:root{color-scheme:light;--ink:#122039;--muted:#59677a;--line:#dce3ed;--blue:#2563eb}*{box-sizing:border-box}body{margin:0;background:#f5f7fb;color:var(--ink);font:16px/1.6 system-ui,-apple-system,'Segoe UI',sans-serif}.lab{max-width:1100px;margin:auto;padding:24px}header{padding:26px 30px;background:#0f172a;border-radius:16px;color:#e2e8f0}.eyebrow{font-size:11px;letter-spacing:2px;color:#facc15;font-weight:700}h1{font-size:clamp(23px,3.4vw,34px);line-height:1.2;margin:12px 0}header p{margin:0;color:#cbd5e1}.lesson{display:flex;align-items:center;gap:14px;margin:22px 0}.lesson label{font-weight:600}select{min-width:0;max-width:100%;padding:9px;border:1px solid var(--line);border-radius:8px;background:white;color:var(--ink);font:inherit}.workspace{display:grid;grid-template-columns:1fr 1fr;gap:16px}.workspace section{min-width:0;background:white;border:1px solid var(--line);border-radius:12px;overflow:hidden}.panel-title{display:block;font-size:11px;font-weight:700;letter-spacing:1.4px;padding:14px 18px;margin:0;border-bottom:1px solid var(--line);color:var(--muted)}textarea{display:block;resize:vertical;width:100%;height:280px;min-height:180px;border:0;background:#fff;color:#16243e;padding:18px;font:15px/1.65 Consolas,'Courier New',monospace;tab-size:4;white-space:pre;overflow:auto}pre{margin:0;height:328px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;padding:18px;color:#d1fae5;background:#101c30;font:14px/1.7 Consolas,monospace}.hint{font-size:11px;padding:0 16px;color:var(--muted)}.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}button{font:600 15px system-ui;padding:12px 20px;border:1px solid var(--line);border-radius:8px;cursor:pointer;background:white;color:var(--ink)}#run{background:#facc15;border-color:#facc15}button:disabled{opacity:.5;cursor:default}:focus-visible{outline:3px solid var(--blue);outline-offset:2px}#status{font-size:14px;margin:14px 0;min-height:24px}.error{color:#fecaca}footer{border-top:1px solid var(--line);padding-top:12px;font-size:12px;color:var(--muted)}@media(max-width:700px){.lab{padding:12px}header{padding:22px}.workspace{grid-template-columns:minmax(0,1fr)}.lesson{align-items:stretch;flex-direction:column;gap:6px}textarea{height:270px;font-size:16px}pre{height:190px}.actions button{padding:12px 14px}}
:where(.workspace){margin-top:22px}