@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&display=swap');
:root { --bg:#080b10; --surface:#0f141c; --surface-2:#151b25; --border:#26303e; --text:#eef2f7; --muted:#8995a6; --accent:#b7f34a; --accent-soft:rgba(183,243,74,.12); --error:#ff6b7a; }
* { box-sizing:border-box; }
html { background:var(--bg); }
body { margin:0; min-width:320px; min-height:100vh; background:radial-gradient(circle at 80% -10%,rgba(183,243,74,.08),transparent 30rem),var(--bg); color:var(--text); font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; -webkit-font-smoothing:antialiased; }
button,a { font:inherit; } button { color:inherit; }
.app-shell { width:min(1180px,calc(100% - 48px)); margin:0 auto; }
.hero { display:flex; align-items:flex-end; justify-content:space-between; padding:64px 0 38px; border-bottom:1px solid var(--border); }
.eyebrow { color:var(--accent); font:11px 'DM Mono',monospace; letter-spacing:.18em; text-transform:uppercase; }
h1 { margin:8px 0; font-size:clamp(42px,6vw,72px); letter-spacing:-.055em; line-height:.95; }
.hero p { max-width:570px; margin:0; color:var(--muted); font-size:16px; }
.hero-badge { display:flex; gap:9px; align-items:center; padding:10px 14px; border:1px solid var(--border); border-radius:99px; color:var(--muted); font-size:12px; }
.hero-badge span { width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 12px var(--accent); }
.workspace { display:grid; grid-template-columns:245px minmax(0,1fr); gap:28px; padding:32px 0 38px; }
.examples { display:flex; flex-direction:column; min-height:650px; }
.section-heading,.panel-bar { display:flex; align-items:center; justify-content:space-between; }
.section-heading { margin:0 8px 14px; color:var(--muted); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.count { display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--surface-2); color:var(--text); }
.example-card { display:grid; grid-template-columns:28px 1fr; gap:9px; width:100%; margin-bottom:7px; padding:14px 12px; border:1px solid transparent; border-radius:8px; background:transparent; text-align:left; cursor:pointer; transition:160ms ease; }
.example-card:hover { background:var(--surface); } .example-card.active { border-color:rgba(183,243,74,.3); background:var(--accent-soft); }
.example-number { color:#566174; font:11px 'DM Mono',monospace; padding-top:2px; }
.example-card.active .example-number,.example-card.active strong { color:var(--accent); }
.example-card strong { display:block; font-size:13px; font-weight:600; } .example-card small { display:block; margin-top:4px; color:var(--muted); font-size:11px; line-height:1.4; }
.tip { display:flex; gap:10px; align-items:center; margin:auto 8px 0; color:var(--muted); font-size:11px; }
.tip>span { display:grid; place-items:center; width:32px; height:32px; border:1px solid var(--border); border-radius:7px; font-family:'DM Mono',monospace; }
.tip p { margin:0; line-height:1.5; } .tip strong { color:#c7d0dc; font-weight:600; }
.playground { min-width:0; } .panel { overflow:hidden; border:1px solid var(--border); border-radius:10px; background:var(--surface); box-shadow:0 16px 44px rgba(0,0,0,.2); }
.editor-panel { height:430px; } .panel-bar { height:44px; padding:0 15px; border-bottom:1px solid var(--border); color:var(--muted); font:11px 'DM Mono',monospace; }
.window-dots { display:flex; gap:6px; } .window-dots i { width:7px; height:7px; border-radius:50%; background:#354052; } .window-dots i:first-child { background:var(--accent); }
.text-button { border:0; background:none; color:var(--muted); font-size:11px; cursor:pointer; } .text-button:hover { color:var(--text); }
.code-editor { display:block; width:100%; height:calc(100% - 44px); resize:none; padding:20px 22px; border:0; outline:0; background:#0d1219; color:#e7edf5; caret-color:var(--accent); font:14px/1.6 'DM Mono',monospace; tab-size:2; }
.code-editor::selection { background:rgba(183,243,74,.22); }
.code-editor:focus { box-shadow:inset 0 0 0 1px rgba(183,243,74,.22); }
.run-button { display:flex; gap:10px; align-items:center; margin:16px 0; padding:12px 16px; border:0; border-radius:7px; background:var(--accent); color:#10150b; font-size:12px; font-weight:700; cursor:pointer; transition:transform 150ms ease,box-shadow 150ms ease; }
.run-button:hover { transform:translateY(-1px); box-shadow:0 8px 24px rgba(183,243,74,.18); } .run-button:active { transform:translateY(0); }
.run-button kbd { margin-left:4px; padding:2px 5px; border-radius:4px; background:rgba(8,11,16,.12); font:10px 'DM Mono',monospace; }
.result-panel { min-height:132px; } .status-label { display:flex; gap:7px; align-items:center; text-transform:uppercase; letter-spacing:.08em; }
.status-label i { width:6px; height:6px; border-radius:50%; background:#586476; } .result-panel.success .status-label { color:var(--accent); } .result-panel.success .status-label i { background:var(--accent); }
.result-panel.error .status-label { color:var(--error); } .result-panel.error .status-label i { background:var(--error); }
.result-panel pre { margin:0; padding:21px; color:#dce4ed; font:14px/1.6 'DM Mono',monospace; white-space:pre-wrap; overflow-wrap:anywhere; }
.result-panel.success pre { color:var(--accent); } .result-panel.error pre { color:var(--error); }
footer { display:flex; justify-content:space-between; padding:20px 0 32px; border-top:1px solid var(--border); color:#596578; font-size:11px; }
footer a { color:var(--muted); text-decoration:none; } footer a:hover { color:var(--accent); }
button:focus-visible,a:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
@media (max-width:760px) { .app-shell{width:min(100% - 28px,620px)} .hero{align-items:flex-start;padding-top:38px} .hero-badge{display:none} .workspace{grid-template-columns:1fr} .examples{min-height:auto} .examples nav{display:grid;grid-template-columns:1fr 1fr;gap:6px} .example-card{margin:0} .tip{display:none} .editor-panel{height:400px} }
@media (max-width:480px) { .hero p{font-size:14px} .examples nav{grid-template-columns:1fr} .editor-panel{height:360px} footer{flex-direction:column;gap:8px} }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after{scroll-behavior:auto!important;transition:none!important} }