body{margin:0}header{display:flex;justify-content:space-between;gap:15px;align-items:center;padding:20px;border-bottom:1px solid var(--border);flex-wrap:wrap}main{max-width:1600px;margin:25px auto;padding:0 24px}h1{font-size:2rem}h2{font-size:1.2rem}.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:14px 0}button,select{padding:10px;font:inherit;background:var(--bg2);color:var(--text);border:1px solid var(--border);border-radius:6px;cursor:pointer}button:disabled{opacity:.5;cursor:not-allowed}.primary{background:var(--accent);color:white}.workspace{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px}.workspace>section{min-width:0}#editor{height:580px;width:100%;border:1px solid var(--border);border-radius:8px;font-size:15px}textarea{width:100%;font:14px/1.6 monospace;padding:12px;border:1px solid var(--border);background:var(--bg2);color:var(--text)}#fallback{height:580px}#console{height:290px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;background:#112331;color:#e2f2ed;padding:18px;border-radius:8px;font:13px/1.6 monospace}details{margin:14px 0;padding:14px;border:1px solid var(--border);border-radius:7px}summary{cursor:pointer;font-weight:600}.small,footer{font-size:.85rem;color:var(--text2)}footer{padding:30px}.notice{padding:15px;background:#fff0d5;color:#553811;border-radius:8px}.test-result{padding:12px;border-left:4px solid #bf4b32;margin:8px 0;background:var(--bg2);overflow-wrap:anywhere}.test-result.pass{border-color:#208655}.test-result pre,#test-details pre{white-space:pre-wrap;overflow-wrap:anywhere}.test-result h3{font-size:1rem}dialog{border:1px solid var(--border);border-radius:10px;max-width:500px;padding:25px}dialog::backdrop{background:#0007}:focus-visible{outline:3px solid #8250df;outline-offset:3px}[hidden]{display:none!important}@media(max-width:900px){.workspace{grid-template-columns:1fr}main{padding:0 14px}#editor{height:460px}.toolbar button{font-size:.85rem}}

.intro-lesson{max-width:950px;padding:24px;margin:20px 0;border:2px solid #208655;border-radius:12px;background:var(--bg2)}.intro-lesson h2{font-size:1.6rem}.intro-lesson li{margin:10px 0}.intro-lesson pre{white-space:pre-wrap;overflow-wrap:anywhere}.intro-lesson .toolbar{gap:24px}.list-picture{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}.list-picture span{padding:10px 22px;border:1px solid var(--border);border-radius:8px;text-align:center}.list-picture small{display:block;color:var(--text2)}#activity{max-width:100%}.toolbar>label{min-width:0;max-width:100%}@media(max-width:500px){.intro-lesson{padding:14px}.toolbar>label{display:flex;flex-direction:column}}