:root{--bg-color: #0d1117;--bg-gradient: linear-gradient(135deg, #0d1117 0%, #161b22 100%);--text-primary: #e6edf3;--text-secondary: #8b949e;--accent-color: #58a6ff;--accent-hover: #79c0ff;--border-color: #30363d;--glass-bg: rgba(22, 27, 34, .6);--glass-border: rgba(255, 255, 255, .1);--error-color: #f85149;--success-color: #238636}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:var(--bg-gradient);background-attachment:fixed;color:var(--text-primary);line-height:1.6;min-height:100vh;display:flex;flex-direction:column}header{padding:1.5rem 2rem;background:var(--glass-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--glass-border);position:sticky;top:0;z-index:100;display:flex;justify-content:space-between;align-items:center}.logo{font-size:1.5rem;font-weight:800;color:var(--text-primary);text-decoration:none;background:-webkit-linear-gradient(0deg,#58a6ff,#a371f7);-webkit-background-clip:text;-webkit-text-fill-color:transparent}main{flex:1;padding:3rem 2rem;max-width:1200px;margin:0 auto;width:100%}h1{font-size:2.5rem;margin-bottom:1rem;font-weight:800;line-height:1.2}h2{font-size:1.75rem;margin-bottom:1rem;color:var(--text-primary)}p{color:var(--text-secondary);margin-bottom:2rem}.hero{text-align:center;margin-bottom:4rem}.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:2rem}.tool-card{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:12px;padding:2rem;text-decoration:none;color:inherit;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:block}.tool-card:hover{transform:translateY(-5px);box-shadow:0 10px 20px #0003;border-color:var(--accent-color)}.tool-card h3{color:var(--accent-color);margin-bottom:.5rem}.tool-card p{margin-bottom:0;font-size:.95rem}.editor-container{display:flex;gap:2rem;height:60vh;margin-bottom:2rem}.editor-pane{flex:1;display:flex;flex-direction:column}.editor-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}textarea.code-editor,pre.code-output{flex:1;background:#0d1117cc;border:1px solid var(--border-color);border-radius:8px;padding:1rem;font-family:Fira Code,Courier New,Courier,monospace;font-size:.9rem;color:var(--text-primary);resize:none;overflow:auto;transition:border-color .2s ease;box-shadow:inset 0 2px 4px #0000001a}textarea.code-editor:focus{outline:none;border-color:var(--accent-color)}.code-output{white-space:pre-wrap;word-wrap:break-word}.btn{background:var(--glass-bg);color:var(--text-primary);border:1px solid var(--glass-border);padding:.5rem 1rem;border-radius:6px;cursor:pointer;font-weight:600;transition:background .2s,border-color .2s;font-family:inherit}.btn:hover{background:#ffffff1a;border-color:var(--accent-color)}.btn-primary{background:var(--accent-color);color:#0d1117;border-color:var(--accent-color)}.btn-primary:hover{background:var(--accent-hover)}.controls{display:flex;gap:1rem;margin-bottom:1rem}footer{text-align:center;padding:2rem;border-top:1px solid var(--glass-border);color:var(--text-secondary);font-size:.9rem}.status-bar{margin-top:1rem;padding:1rem;border-radius:8px;display:none;font-family:Fira Code,monospace;font-size:.85rem;word-break:break-all}.status-bar.error{display:block;background:#f851491a;border:1px solid var(--error-color);color:var(--error-color)}.status-bar.success{display:block;background:#2386361a;border:1px solid var(--success-color);color:var(--success-color)}@media (max-width: 768px){.editor-container{flex-direction:column;height:auto}textarea.code-editor,pre.code-output{min-height:300px}}