@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--bg:#070a12;--surface:#0c111d;--surface2:#0e1523;--line:#202a3c;--text:#eaf1ff;--muted:#7d8da7;--blue:#358bff;--green:#45d4a2;--font:'DM Sans',Inter,Segoe UI,sans-serif;--mono:'JetBrains Mono',Consolas,monospace}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);min-height:100vh}button,select,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.5;cursor:not-allowed}button:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--blue);outline-offset:2px}.ambient{position:fixed;pointer-events:none;filter:blur(80px);opacity:.22;z-index:-1}.ambient-one{width:550px;height:500px;right:3%;top:2%;background:#0d3874}.ambient-two{width:320px;height:360px;left:20%;bottom:0;background:#132046}.app-shell{display:flex;min-height:100vh}.sidebar{width:250px;flex:none;position:sticky;top:0;height:100vh;border-right:1px solid #1a2435;background:linear-gradient(180deg,#0b101b 0%,#080c15 100%);padding:30px 19px;display:flex;flex-direction:column}.brand{text-decoration:none;color:inherit;display:flex;align-items:center;gap:12px;padding:2px 8px 53px}.brand-mark{display:grid;place-items:center;width:45px;height:45px;border:1px solid #2769bf;background:linear-gradient(135deg,#153e76,#0c1c35);border-radius:12px;font-size:22px;font-weight:800;letter-spacing:-3px;box-shadow:0 0 26px #2668ff25}.brand-mark span{color:#4e9dff}.brand-copy{display:flex;flex-direction:column;gap:4px}.brand-copy strong{font-size:14px;letter-spacing:3px}.brand-copy small{font-family:var(--mono);font-size:8px;letter-spacing:1.3px;color:#7993b7}.side-label{font-size:10px;letter-spacing:1.7px;color:#60738f;font-weight:800;padding:0 17px;margin:0 0 16px}.nav-item{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid #214a80;border-radius:9px;background:linear-gradient(90deg,#0d294b,#0a182b);font-size:13px;font-weight:700;color:#c5e0ff}.nav-icon{font-family:var(--mono);font-size:19px;color:#65adff}.nav-dot{margin-left:auto;width:6px;height:6px;background:#51a0ff;border-radius:50%;box-shadow:0 0 12px #459aff}.resources-label{margin-top:49px}.side-feature{display:flex;align-items:center;gap:12px;padding:13px 10px}.feature-icon{display:grid;place-items:center;width:35px;height:35px;border:1px solid #1e304a;border-radius:9px;color:#74aaf9;font:700 15px var(--mono)}.side-feature>div{display:flex;flex-direction:column;gap:4px}.side-feature strong{font-size:12px;font-weight:600}.side-feature small{font-size:10px;color:#7385a0}.sidebar-bottom{margin-top:auto;border-top:1px solid #1c2739;padding:24px 8px 0;font:500 10px var(--mono);color:#b4c2d5;line-height:2.4}.sidebar-bottom small{display:block;color:#60728b;margin-left:15px}.online-pulse,.status-ring,.workspace-chip span{display:inline-block;width:7px;height:7px;border-radius:100%;background:#48d6a4;box-shadow:0 0 12px #45d4a280;margin-right:7px}.main{min-width:0;flex:1;max-width:1750px;margin:auto;padding:0 45px}.topbar{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #1b2638;height:85px}.breadcrumb{font-size:12px;color:#7888a2}.breadcrumb span{margin:0 12px;color:#3b4e69}.breadcrumb strong{color:#d2dff1;font-weight:600}.top-status{color:#7b91ae;border:1px solid #213048;padding:9px 12px;border-radius:6px;font:600 9px var(--mono);letter-spacing:.9px}.top-status .status-ring{width:5px;height:5px}.hero{padding:64px 0 60px}.eyebrow{color:#6dafff;font:700 10px var(--mono);letter-spacing:1.7px;display:flex;gap:13px;align-items:center}.sparkle{font-size:17px}.eyebrow-line{width:30px;height:1px;background:#2a5382}h1{font-size:clamp(38px,4.3vw,65px);letter-spacing:-2.8px;line-height:1.09;margin:19px 0 20px;font-weight:800}h1 span{color:#4095ff;background:linear-gradient(100deg,#72bdff,#297dff);background-clip:text;-webkit-text-fill-color:transparent}.hero>p{max-width:590px;line-height:1.85;font-size:14px;color:#91a1b8;margin:0}.hero-metrics{display:flex;align-items:center;gap:22px;margin-top:30px;color:#788ca6;font:500 11px var(--mono)}.hero-metrics b{color:#d9e8ff}.hero-metrics i{width:3px;height:3px;border-radius:50%;background:#476381}.workspace{background:linear-gradient(145deg,#0e1523,#090f1b 80%);border:1px solid #233049;border-radius:15px;padding:24px;box-shadow:0 22px 70px #0003}.workspace-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:27px}.section-kicker{font:700 9px var(--mono);letter-spacing:1.5px;color:#569afb}.workspace-heading h2{font-size:17px;letter-spacing:-.25px;margin:8px 0 0}.workspace-chip{font:600 9px var(--mono);letter-spacing:.7px;color:#86a3bf;padding:9px 10px;border:1px solid #24334a;border-radius:6px}.workspace-chip span{width:5px;height:5px}.toolbar{display:flex;align-items:end;gap:11px;flex-wrap:wrap;margin-bottom:16px}.control-group{min-width:175px;display:flex;flex-direction:column;gap:9px}.control-small{min-width:138px}.control-group label{font:700 9px var(--mono);letter-spacing:1.1px;color:#8295b2}.control-group select{appearance:none;background:#111c2c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238ba0bf' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;border:1px solid #293851;color:#d8e7fa;padding:11px 32px 11px 13px;border-radius:7px;font-size:12px;height:42px}.toolbar-spacer{flex:1}.button{border:1px solid #2a3b53;color:#d7e6f7;background:#172236;border-radius:8px;padding:0 16px;height:42px;display:inline-flex;align-items:center;justify-content:center;gap:10px;white-space:nowrap;font-size:12px;font-weight:700;transition:background .15s,transform .15s}.button:hover:not(:disabled){background:#223554;transform:translateY(-1px)}.button.ghost{background:#101a2a}.editors{display:grid;grid-template-columns:1fr 1fr;gap:14px}.editor-panel{min-width:0;background:#080e18;border:1px solid #26334a;border-radius:9px;overflow:hidden}.output-panel{border-color:#26403e}.panel-head{height:53px;border-bottom:1px solid #223047;background:#101827;display:flex;align-items:center;justify-content:space-between;padding:0 15px}.panel-name{display:flex;align-items:center;gap:9px;min-width:0}.file-symbol{font:700 15px var(--mono);color:#75adff}.success-symbol{color:#45d4a2;font-size:16px;font-weight:700}.panel-name strong{font-size:12px;font-weight:650}.panel-tag{font:700 9px var(--mono);color:#7892b2;background:#1b2b41;border-radius:4px;padding:5px 6px}.green-tag{color:#59ccaa;background:#12332e}.mini-button{background:transparent;border:0;color:#89a3c2;font-size:11px}.mini-button:hover{color:#fff}.code-area{display:flex;height:365px;overflow:hidden}.line-numbers{flex:none;width:45px;padding:19px 12px 19px 4px;text-align:right;overflow:hidden;color:#455873;background:#0b121e;font:12px/23px var(--mono);white-space:pre;user-select:none}.code-area textarea{display:block;resize:none;flex:1;width:100%;min-width:0;height:100%;padding:19px 15px 19px 13px;border:0;outline:none;background:#090e18;color:#b8d8f8;font:12px/23px var(--mono);tab-size:2;white-space:pre;overflow:auto}.code-area textarea::placeholder{color:#465a74}.output-panel textarea{color:#a8e6d3}.panel-foot{display:flex;justify-content:space-between;border-top:1px solid #1d2a3e;padding:12px 15px;color:#758ba6;font:10px var(--mono)}.bottom-actions{display:flex;justify-content:space-between;align-items:center;gap:22px;margin-top:19px}.hint{display:flex;gap:11px;align-items:center;color:#66aaff}.hint>span{font-size:25px}.hint>div{display:flex;flex-direction:column;gap:5px}.hint strong{font-size:11px;color:#cdddf1}.hint small{font-size:10px;color:#7f93ad}.actions{display:flex;gap:10px}.button.primary{height:46px;background:linear-gradient(110deg,#1771e6,#3896ff);color:#fff;border-color:#4e9eff;box-shadow:0 5px 25px #1d74ea42}.button.primary:hover{background:linear-gradient(110deg,#3286f5,#54a6ff)}.button.primary .button-arrow{margin-left:15px}.button.secondary{height:46px;background:#141f30}.message{min-height:0;margin-top:0;transition:all .2s;font:12px var(--mono);color:#80c1ff}.message:not(:empty){margin-top:15px;padding:12px;border:1px solid #2e4d71;background:#101f33;border-radius:7px;white-space:pre-wrap;overflow-wrap:anywhere}.message.error{color:#ffafae;border-color:#713d48;background:#2a151f}.message.ok{color:#7fe3bc;border-color:#235f52;background:#0d2423}footer{display:flex;justify-content:space-between;gap:20px;padding:28px 0 32px;color:#5b708c;font:600 9px var(--mono);letter-spacing:.7px}footer b{color:#438dee}@media(max-width:1200px){.sidebar{width:205px}.main{padding:0 26px}.hero{padding:50px 0}.toolbar-spacer{flex-basis:100%;height:0}.bottom-actions{align-items:flex-start;flex-direction:column}.actions{align-self:flex-end}}@media(max-width:800px){.sidebar{display:none}.main{padding:0 17px}.topbar{height:64px}.hero{padding:44px 0}.workspace{padding:16px}.editors{grid-template-columns:1fr}.code-area{height:260px}.toolbar-spacer{display:none}.control-group{flex:1;min-width:140px}.actions{align-self:stretch}.actions .button{flex:1}.workspace-chip{display:none}footer{font-size:8px}}@media(max-width:480px){.top-status{display:none}.hero-metrics{gap:11px;font-size:9px;flex-wrap:wrap}.hero>p{font-size:13px}.toolbar>.ghost{flex:1}.actions{flex-direction:column}.workspace-heading h2{font-size:15px}.hint small{line-height:1.5}}