*{box-sizing:border-box}:root{color-scheme:dark;--bg: #030710;--panel: rgba(12, 18, 32, .74);--panel-strong: rgba(14, 21, 38, .9);--panel-soft: rgba(255, 255, 255, .05);--line: rgba(255, 255, 255, .13);--line-strong: rgba(125, 249, 255, .32);--text: #f8fbff;--muted: rgba(232, 241, 255, .66);--faint: rgba(232, 241, 255, .46);--cyan: #7df9ff;--mint: #8cf5c7;--violet: #c4b5fd;--amber: #fcd34d;--red: #fb7185;--shadow: 0 26px 90px rgba(0, 0, 0, .38);--radius: 18px}html{min-width:320px;background:var(--bg)}body{min-width:320px;margin:0;color:var(--text);background:radial-gradient(circle at 8% 3%,rgba(45,212,240,.28),transparent 26rem),radial-gradient(circle at 76% -2%,rgba(167,139,250,.24),transparent 30rem),radial-gradient(circle at 78% 88%,rgba(16,185,129,.14),transparent 28rem),linear-gradient(180deg,#030710,#07101d 54%,#03060f);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}body:before{position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;pointer-events:none;content:"";opacity:.32;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:42px 42px;-webkit-mask-image:linear-gradient(180deg,black,transparent 82%);mask-image:linear-gradient(180deg,black,transparent 82%)}body:after{position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;pointer-events:none;content:"";opacity:.25;background:linear-gradient(115deg,transparent 0 42%,rgba(125,249,255,.08) 46%,transparent 52%),radial-gradient(circle at 50% 0%,rgba(255,255,255,.08),transparent 36rem)}button,a{color:inherit;font:inherit}button{border:0;border-radius:10px;cursor:pointer}button:disabled{cursor:wait}a{text-decoration:none}.app-shell{display:flex;flex-direction:column;gap:14px;width:min(100%,1720px);min-height:100vh;margin:0 auto;padding:18px 22px 24px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:78px;border:1px solid rgba(255,255,255,.16);border-radius:var(--radius);background:radial-gradient(circle at 7% 0%,rgba(125,249,255,.16),transparent 22rem),radial-gradient(circle at 93% 0%,rgba(196,181,253,.16),transparent 26rem),linear-gradient(180deg,#ffffff17,#ffffff09),var(--panel);box-shadow:var(--shadow),inset 0 1px #ffffff29;padding:14px 16px;-webkit-backdrop-filter:blur(22px) saturate(145%);backdrop-filter:blur(22px) saturate(145%)}.brand-lockup,.topbar-actions,.editor-panel__header,.metric-row,.score-panel{display:flex;align-items:center}.brand-lockup{gap:12px;min-width:0}.brand-mark{display:grid;flex:0 0 auto;width:44px;height:44px;place-items:center;border:1px solid rgba(125,249,255,.5);border-radius:14px;background:linear-gradient(135deg,#7df9ff38,#c4b5fd29),#ffffff0f;color:#fff;font-size:18px;font-weight:830;box-shadow:inset 0 1px #ffffff38,0 18px 44px #00000047}.eyebrow{margin:0 0 4px;color:var(--cyan);font-size:11px;font-weight:820;letter-spacing:0;line-height:1.3;text-transform:uppercase}h1,h2,p,dl,dd{margin:0}h1{overflow-wrap:anywhere;font-size:clamp(1.45rem,2.4vw,2.1rem);letter-spacing:0;line-height:1.04}h2{color:var(--text);font-size:15px;letter-spacing:0;line-height:1.3}.context-strip{display:grid;grid-template-columns:minmax(260px,.9fr) minmax(0,1.3fr);gap:14px;align-items:stretch;border:1px solid rgba(255,255,255,.13);border-radius:var(--radius);background:linear-gradient(135deg,#7df9ff17,#c4b5fd12 46%,#8cf5c70f),#070c17a3;box-shadow:inset 0 1px #ffffff1f;padding:14px;-webkit-backdrop-filter:blur(20px) saturate(145%);backdrop-filter:blur(20px) saturate(145%)}.context-copy{display:flex;flex-direction:column;justify-content:center;min-width:0}.context-copy h2{max-width:720px;overflow-wrap:anywhere;font-size:clamp(1rem,1.6vw,1.35rem);line-height:1.18}.playground-switcher{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;min-width:0}.switch-card{display:grid;gap:5px;min-height:94px;border:1px solid rgba(255,255,255,.13);border-radius:14px;background:linear-gradient(180deg,#ffffff13,#ffffff07),#ffffff09;padding:13px 14px}.switch-card:hover{border-color:#7df9ff6b;background:linear-gradient(180deg,#7df9ff1c,#ffffff09),#ffffff0a}.switch-card--active{border-color:#7df9ff7a;background:radial-gradient(circle at 14% 0%,rgba(125,249,255,.18),transparent 70%),linear-gradient(180deg,#ffffff17,#ffffff09)}.switch-card span{color:var(--cyan);font-size:11px;font-weight:830;line-height:1.2;text-transform:uppercase}.switch-card strong{overflow-wrap:anywhere;color:#fff;font-size:15px;line-height:1.2}.switch-card small{color:var(--muted);font-size:12px;line-height:1.35}.topbar-actions{flex-wrap:wrap;justify-content:flex-end;gap:8px}.runtime-badge,.ghost-action,.nav-action,.primary-action{display:inline-flex;align-items:center;justify-content:center;min-height:38px;border:1px solid var(--line);border-radius:12px;padding:0 13px;white-space:nowrap}.nav-action,.ghost-action{background:linear-gradient(180deg,#ffffff13,#ffffff09),#ffffff09;color:#f8fbffd1;font-weight:730}.runtime-badge{gap:8px;color:#f8fbffc7;font-size:13px;font-weight:700;background:#00000029}.runtime-badge--running{border-color:#fcd34d6b;color:#fde68a}.runtime-badge--failed{border-color:#fb71856b;color:#fecdd3}.status-dot{width:8px;height:8px;border-radius:999px;background:var(--mint);box-shadow:0 0 0 4px #6ee7b721}.runtime-badge--running .status-dot{background:var(--amber);box-shadow:0 0 0 4px #fcd34d21}.runtime-badge--failed .status-dot{background:var(--red);box-shadow:0 0 0 4px #fb718521}.nav-action:hover,.ghost-action:hover{border-color:#7df9ff70;background:#7df9ff1a;color:#fff}.primary-action{min-width:112px;border-color:#7df9ff80;background:linear-gradient(135deg,#7df9fff5,#8cf5c7f0);color:#04111c;font-weight:850;box-shadow:0 14px 36px #22d3ee33}.primary-action:hover{filter:brightness(1.08)}.primary-action:disabled{border-color:#ffffff1f;background:#ffffff14;color:#f8fbff8a;box-shadow:none}.workspace{display:grid;grid-template-columns:minmax(250px,300px) minmax(0,1fr);gap:16px;min-height:0}.control-rail{display:flex;flex-direction:column;gap:12px;min-width:0}.control-panel,.score-panel,.editor-panel{border:1px solid var(--line);border-radius:var(--radius);background:radial-gradient(circle at 15% 0%,rgba(125,249,255,.055),transparent 70%),linear-gradient(180deg,#ffffff12,#ffffff07),var(--panel);box-shadow:var(--shadow),inset 0 1px #ffffff21;-webkit-backdrop-filter:blur(18px) saturate(135%);backdrop-filter:blur(18px) saturate(135%)}.control-panel,.score-panel{padding:14px}.panel-heading{margin-bottom:12px}.example-list{display:grid;gap:8px}.example-option{width:100%;min-height:40px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,#fff1,#ffffff06),#ffffff0a;color:#e8f1ffc7;font-weight:760;text-align:left;padding:0 12px}.example-option:hover,.example-option--active{border-color:#7df9ff7a;background:#7df9ff1b;color:#fff}.metric-list{display:grid}.metric-row{justify-content:space-between;gap:12px;min-height:38px;border-top:1px solid rgba(255,255,255,.1)}.metric-row:first-child{border-top:0}.metric-row dt{color:var(--muted);font-size:13px}.metric-row dd{max-width:150px;overflow:hidden;color:var(--text);font-size:13px;font-weight:780;text-overflow:ellipsis;white-space:nowrap}.score-panel{align-items:flex-start;flex-direction:column;gap:5px;background:radial-gradient(circle at 12% 4%,rgba(125,249,255,.18),transparent 70%),linear-gradient(135deg,#10b9811f,#c4b5fd14),var(--panel)}.score-panel strong{color:#fff;font-size:42px;line-height:1}.score-panel span{color:var(--muted);font-size:13px;font-weight:700}.editor-workbench{display:grid;gap:16px;min-width:0}.editor-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;min-width:0}.editor-panel{min-width:0;overflow:hidden}.editor-panel__header{justify-content:space-between;gap:12px;min-height:62px;border-bottom:1px solid rgba(255,255,255,.12);background:linear-gradient(90deg,rgba(125,249,255,.055),transparent 36%),#0f172acc;padding:12px 14px}.editor-panel__header p{color:var(--muted);font-size:12px;line-height:1.35}.editor-panel__header span{flex:0 0 auto;max-width:160px;overflow:hidden;border:1px solid rgba(255,255,255,.13);border-radius:999px;color:#e8f1ffc7;font-size:12px;font-weight:760;line-height:1;padding:7px 9px;text-overflow:ellipsis;white-space:nowrap}.editor-frame{background:#0e1016eb}.editor-loading{display:grid;height:100%;min-height:180px;place-items:center;background:#0e1016eb;color:var(--muted);font-size:13px;font-weight:720}@media (max-width: 1040px){.context-strip,.workspace{grid-template-columns:1fr}.control-rail{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}}@media (max-width: 820px){.app-shell{padding:12px}.topbar{align-items:flex-start;flex-direction:column}.topbar-actions,.runtime-badge,.ghost-action,.nav-action,.primary-action{width:100%}.runtime-badge,.ghost-action,.nav-action,.primary-action{justify-content:center}.control-rail,.editor-grid,.playground-switcher{grid-template-columns:1fr}}@media (max-width: 520px){.brand-mark{width:38px;height:38px}.editor-panel__header{align-items:flex-start;flex-direction:column}.editor-panel__header span{max-width:100%}}