:root{--bg:#f4f1ea;--text:#1b1d21;--card:#fffdf8;--muted:#5a6170;--accent:#d44f2a;--accent2:#1f6fb2;--border:#e7dece}*{box-sizing:border-box}html,body{color:var(--text);background:radial-gradient(circle at 10% 10%, #fff4db 0%, var(--bg) 35%, #e9eef8 100%);min-height:100vh;margin:0;padding:0;font-family:Avenir Next,Gill Sans,sans-serif}a{color:inherit;text-decoration:none}.container{max-width:1040px;margin:0 auto;padding:48px 20px}.card{background:color-mix(in srgb, var(--card) 90%, white);border:1px solid var(--border);border-radius:20px;padding:24px;box-shadow:0 18px 50px #181d241f}.kicker{color:var(--accent2);letter-spacing:.08em;text-transform:uppercase;margin:0;font-size:12px;font-weight:700}h1{margin:10px 0 12px;font-size:clamp(30px,5vw,52px);line-height:1.05}p{color:var(--muted);margin:0;line-height:1.6}.actions{flex-wrap:wrap;gap:12px;margin-top:24px;display:flex}.btn{border:1px solid #0000;border-radius:999px;padding:10px 16px;font-weight:700}.btn.primary{background:var(--accent);color:#fff}.btn.ghost{border-color:var(--border);background:#fff}.btn.runner{color:#13457f;background:#e6effb;border-color:#c7d6ea}.btn:disabled{cursor:not-allowed;opacity:.7}.runnerPanel{border:1px solid var(--border);background:#fff;border-radius:14px;margin-top:20px;padding:14px}.runnerMeta{color:#344054;margin-bottom:6px;font-size:.9rem}.runnerOutput{color:#e2e8f0;white-space:pre-wrap;background:#0f172a;border-radius:10px;max-height:220px;margin:10px 0 0;padding:10px;font-size:12px;line-height:1.45;overflow:auto}.playgroundPanel{border:1px solid var(--border);background:#fff;border-radius:14px;margin-top:20px;padding:14px}.playgroundTitle{margin:0;font-size:clamp(20px,2.4vw,26px);line-height:1.2}.playgroundHint{color:var(--muted);margin-top:8px}.codeEditor{resize:vertical;color:#0f172a;background:#f9fbff;border:1px solid #c6d0df;border-radius:10px;width:100%;min-height:220px;margin-top:12px;padding:12px;font-family:Menlo,Monaco,Consolas,Courier New,monospace;font-size:13px;line-height:1.5}.codeEditor:focus{outline-offset:0;border-color:#9ec5ff;outline:2px solid #b9d4ff}.streamHeader{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;display:flex}.status{color:var(--muted);font-weight:600}.frameWrap{aspect-ratio:16/9;border:1px solid var(--border);background:#10151f;border-radius:14px;place-items:center;margin-top:14px;display:grid;overflow:hidden}.frame{object-fit:contain;width:100%;height:100%}.streamEmbedCard{margin-top:18px}.embedTitle{margin:0;font-size:clamp(22px,3vw,30px);line-height:1.2}.embedHint{color:var(--muted);margin-top:8px}.embedWrap{border:1px solid var(--border);background:#f8f7f3;border-radius:14px;margin-top:14px;overflow:hidden}.streamEmbed{border:0;width:100%;min-height:620px;display:block}@media (max-width:768px){.streamEmbed{min-height:480px}}