@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");@tailwind base;@tailwind components;@tailwind utilities;:root{--bg:#05080f;--surface:#080d18;--surface2:#0d1424;--border:rgba(0,220,255,0.10);--border-h:rgba(0,220,255,0.28);--cyan:#00dcff;--cyan2:#00b8d9;--purple:#9b6dff;--purple2:#c084fc;--gradient:linear-gradient(135deg,#00dcff,#9b6dff);--text:#e0f0ff;--muted:#4a5c78;--dim:#7a90b0}*,:after,:before{box-sizing:border-box;margin:0;padding:0}body,html{height:100%;background:var(--bg);color:var(--text);font-family:Space Grotesk,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}body:before{content:"";inset:0;background-image:linear-gradient(rgba(0,220,255,.03) 1px,transparent 0),linear-gradient(90deg,rgba(0,220,255,.03) 1px,transparent 0);background-size:40px 40px}.orb,body:before{position:fixed;pointer-events:none;z-index:0}.orb{border-radius:50%;filter:blur(90px)}.orb1{width:600px;height:600px;top:-150px;left:-150px;background:radial-gradient(circle,rgba(0,220,255,.12) 0,transparent 65%);animation:drift1 20s ease-in-out infinite alternate}.orb2{width:500px;height:500px;bottom:-100px;right:-100px;background:radial-gradient(circle,rgba(155,109,255,.1) 0,transparent 65%);animation:drift2 25s ease-in-out infinite alternate}.orb3{width:280px;height:280px;top:45%;left:50%;transform:translateX(-50%);background:radial-gradient(circle,rgba(0,220,255,.05) 0,transparent 70%);animation:drift3 16s ease-in-out infinite alternate}@keyframes drift1{to{transform:translate(50px,70px) scale(1.08)}}@keyframes drift2{to{transform:translate(-50px,-70px) scale(1.1)}}@keyframes drift3{to{transform:translateX(-50%) translateY(25px)}}.card{background:rgba(8,13,24,.9);border:1px solid var(--border);border-radius:16px;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);transition:border-color .3s,box-shadow .3s}.card:hover{border-color:rgba(0,220,255,.18);box-shadow:0 0 30px rgba(0,220,255,.05)}.btn-primary{background:linear-gradient(135deg,var(--cyan) 0,var(--purple) 100%);color:#fff;font-weight:700;font-size:14px;border:none;border-radius:10px;cursor:pointer;font-family:Space Grotesk,sans-serif;transition:.25s;position:relative;overflow:hidden}.btn-primary:before{content:"";position:absolute;inset:0;background:rgba(255,255,255,0);transition:background .25s}.btn-primary:hover:not(:disabled):before{background:rgba(255,255,255,.08)}.btn-primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 8px 24px rgba(0,220,255,.25)}.btn-primary:disabled{opacity:.45;cursor:not-allowed}.btn-ghost{background:transparent;border:1px solid var(--border);color:var(--dim);font-size:13px;font-weight:500;border-radius:10px;cursor:pointer;font-family:Space Grotesk,sans-serif;transition:.25s}.btn-ghost:hover{border-color:var(--border-h);color:var(--text);background:rgba(0,220,255,.05)}.btn-danger{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.2);color:#f87171;font-size:12px;font-weight:500;border-radius:8px;cursor:pointer;font-family:Space Grotesk,sans-serif;transition:.25s}.btn-danger:hover{background:rgba(239,68,68,.15);border-color:rgba(239,68,68,.4)}.code-area{width:100%;height:220px;font-family:JetBrains Mono,monospace;font-size:12.5px;line-height:1.7;background:rgba(3,6,14,.85);border:1px solid var(--border);border-radius:12px;color:var(--text);padding:16px;resize:none;outline:none;transition:border-color .25s,box-shadow .25s}.code-area:focus{border-color:rgba(0,220,255,.35);box-shadow:0 0 0 3px rgba(0,220,255,.07)}.code-area.output{color:var(--cyan);background:rgba(3,6,14,.95);height:200px}.code-area::placeholder{color:var(--muted)}.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;border:1px solid rgba(0,220,255,.25);background:rgba(0,220,255,.06);color:var(--cyan);font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase}.pill-dot{width:5px;height:5px;border-radius:50%;background:var(--cyan);animation:blink 2s ease-in-out infinite}@keyframes blink{0%,to{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}.toggle-wrap{display:flex;align-items:center;gap:10px;cursor:pointer}.toggle{width:38px;height:20px;border-radius:999px;background:rgba(0,220,255,.1);border:1px solid var(--border);position:relative;transition:.3s;cursor:pointer;flex-shrink:0}.toggle.on{background:linear-gradient(135deg,var(--cyan),var(--purple));border-color:var(--cyan)}.toggle:after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,.4);transition:.3s}.toggle.on:after{left:20px;background:#fff}.sidebar{position:fixed;top:0;left:0;bottom:0;width:240px;z-index:200;background:rgba(5,8,15,.97);border-right:1px solid var(--border);-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);transform:translateX(-100%);transition:transform .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column}.sidebar.open{transform:translateX(0)}.sidebar-overlay{position:fixed;inset:0;z-index:199;background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .3s}.sidebar-overlay.open{opacity:1;pointer-events:all}.nav-item{display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:10px;margin:2px 8px;cursor:pointer;font-size:14px;font-weight:500;color:var(--dim);transition:.2s;text-decoration:none}.nav-item:hover{color:var(--text);background:rgba(0,220,255,.05)}.nav-item.active{color:var(--cyan);background:rgba(0,220,255,.08);border:1px solid rgba(0,220,255,.12)}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:rgba(0,220,255,.15);border-radius:999px}::-webkit-scrollbar-thumb:hover{background:rgba(0,220,255,.3)}@keyframes fadeUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{to{transform:rotate(1turn)}}.fu{animation:fadeUp .5s ease both}.fu1{animation-delay:.07s}.fu2{animation-delay:.14s}.fu3{animation-delay:.21s}.fu4{animation-delay:.28s}@media (max-width:768px){.fu1[style*=grid-template-columns],.fu2[style*=grid-template-columns]{display:flex!important;flex-direction:column!important}}