.cf-screen{--cf-code-bg:#0f1626;--cf-code-ink:#e3e9f2;--cf-code-muted:#7d8ba3;--cf-code-line:#22304a}.cf-layout{grid-template-areas:"board""code""side";align-items:start;gap:16px;display:grid}@media (min-width:980px){.cf-layout{grid-template:"board code""side code"1fr/minmax(0,1fr) minmax(0,1fr)}}.cf-left{grid-area:board}.cf-right{grid-area:code}.cf-side{grid-area:side}.cf-left,.cf-right,.cf-side{flex-direction:column;gap:12px;min-width:0;display:flex}.cf-board{background:var(--board);outline-offset:3px;margin:5px;padding:0;position:relative}.cf-canvas{aspect-ratio:512/352;image-rendering:auto;border-radius:2px;width:100%;height:auto;display:block}.cf-overlay p{margin:0}.cf-banner{border-radius:var(--radius);color:#f6e7c1;font-family:var(--f-display);pointer-events:none;background:#0a1028d1;padding:10px 18px;font-size:clamp(18px,4vw,26px);position:absolute;top:40%;left:50%;transform:translate(-50%,-50%)}.cf-status{grid-template-columns:1fr 1fr;gap:6px 14px;display:grid}.cf-meter{align-items:center;gap:8px;font-size:13px;display:flex}.cf-meter span{color:var(--muted);min-width:46px}.cf-meter b{font-family:var(--f-mono);text-align:right;min-width:28px;font-size:13px}.cf-water>i{background:var(--info)}.cf-where{grid-column:1/-1}.cf-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);flex-direction:column;gap:8px;padding:10px 12px;display:flex}.cf-panel .eyebrow{margin:0}.cf-chips{flex-wrap:wrap;gap:6px;display:flex}.cf-chips .tag{color:var(--ink)}.cf-chips .tag b{font-family:var(--f-mono)}.cf-bin{margin:0}.cf-ref summary{cursor:pointer}.cf-ref-row{grid-template-columns:70px 1fr;align-items:baseline;gap:8px;display:grid}.cf-ref-row>div{flex-wrap:wrap;gap:4px;display:flex}.cf-fnbtn{font:13px var(--f-mono);background:var(--sunk);color:var(--ink);border:1px solid var(--line);cursor:pointer;border-radius:4px;min-height:26px;padding:3px 6px}.cf-fnbtn:hover:not(:disabled){border-color:var(--accent)}.cf-lesson{background:var(--surface);border:2px solid var(--ink);border-radius:var(--radius);flex-direction:column;gap:8px;padding:12px 14px;display:flex}.cf-lesson p{margin:0;line-height:1.5}.cf-lesson-head{flex-direction:column;gap:2px;display:flex}.cf-lesson-head .h3{margin:0}.cf-lesson code,.cf-done code{font-family:var(--f-mono);background:var(--sunk);border-radius:3px;padding:1px 4px;font-size:.92em}.cf-example{background:var(--cf-code-bg);color:var(--cf-code-ink);font:13px/1.5 var(--f-mono);white-space:pre;border-radius:4px;margin:0;padding:10px 12px;overflow-x:auto}.cf-example code{font-size:inherit;background:0 0;padding:0}.cf-lesson-foot{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;display:flex}.cf-done summary{cursor:pointer}.cf-done-row{border-bottom:1px solid var(--line);flex-wrap:wrap;align-items:center;gap:8px;padding:4px 0;display:flex}.cf-done-row .btn{margin-left:auto}.cf-tabs{flex-wrap:wrap;align-items:flex-end;gap:4px;margin-bottom:-12px;display:flex}.cf-tab{border:1px solid var(--line);background:var(--sunk);border-bottom:0;border-radius:6px 6px 0 0;align-items:center;display:flex}.cf-tab.on{background:var(--cf-code-bg);border-color:var(--cf-code-bg)}.cf-tab button{font:13px var(--f-mono);color:var(--muted);cursor:pointer;background:0 0;border:0;min-height:30px;padding:6px 10px}.cf-tab.on button{color:var(--cf-code-ink)}.cf-tab .cf-x{padding:6px 8px 6px 0;font-size:15px}.cf-tab-add{font:14px var(--f-mono);border:1px dashed var(--line);color:var(--muted);cursor:pointer;background:0 0;border-radius:6px 6px 0 0;min-height:30px;padding:4px 10px}.cf-tab-add.small{font-size:12px;font-family:var(--f-body)}.cf-tab-name{font:16px var(--f-mono);border:1px solid var(--accent);background:var(--surface);width:130px;color:var(--ink);border-radius:6px 6px 0 0;padding:4px 6px}.cf-editor{background:var(--cf-code-bg);border:1px solid var(--cf-code-line);border-radius:0 6px 6px;height:clamp(220px,42vh,460px);display:flex;overflow:hidden}.cf-gutter{text-align:right;min-width:38px;color:var(--cf-code-muted);font:14px/1.5 var(--f-mono);-webkit-user-select:none;user-select:none;border-right:1px solid var(--cf-code-line);background:#ffffff08;flex:none;padding:10px 0;overflow:hidden}.cf-gutter>div{padding:0 8px 0 6px}.cf-gutter>.err{color:#fff;background:#7a1f1a}.cf-code{flex:1;min-width:0;position:relative}.cf-code pre,.cf-code textarea{font:14px/1.5 var(--f-mono);tab-size:4;white-space:pre;letter-spacing:0;word-spacing:0;border:0;margin:0;padding:10px 12px;position:absolute;inset:0;overflow:auto}.cf-code pre{color:var(--cf-code-ink);pointer-events:none;overflow:hidden}.cf-code textarea{color:#0000;caret-color:#ffd23f;resize:none;-webkit-text-fill-color:transparent;background:0 0;outline:none}.cf-code textarea::selection{background:#78a0ff59}.cf-editor:focus-within{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent)}@media (max-width:700px),(pointer:coarse){.cf-code pre,.cf-code textarea,.cf-gutter{font-size:16px}}.cf-kw{color:#ff9ec7}.cf-st{color:#b5e48c}.cf-nu{color:#ffc66d}.cf-cm{color:#7d8ba3;font-style:italic}.cf-fn{color:#7fd4ff}.cf-bi{color:#c9a7ff}.cf-controls{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;display:flex}.cf-speed{flex-wrap:wrap;gap:4px;display:flex}.cf-console{background:var(--cf-code-bg);color:var(--cf-code-ink);height:170px;font:13px/1.5 var(--f-mono);border:1px solid var(--cf-code-line);border-bottom:0;border-radius:6px 6px 0 0;padding:8px 12px;overflow-y:auto}.cf-line{white-space:pre-wrap;overflow-wrap:anywhere}.cf-line.note{color:var(--cf-code-muted)}.cf-line.error{color:#ff8a80}.cf-line.talk{color:#ffd9a0}.cf-line.info{color:#9ccbff}.cf-line.you{color:#ffd23f}.cf-line.done{color:#7be3a4;font-weight:700}.cf-quick{background:var(--cf-code-bg);border:1px solid var(--cf-code-line);font:14px var(--f-mono);color:#ffd23f;border-radius:0 0 6px 6px;align-items:center;gap:6px;margin-top:-12px;padding:4px 10px;display:flex}.cf-quick input{min-width:0;color:var(--cf-code-ink);font:16px var(--f-mono);background:0 0;border:0;outline:none;flex:1;padding:6px 0}.cf-quick input::placeholder{color:var(--cf-code-muted)}.cf-quick:focus-within{border-color:var(--accent)}.cf-foot{justify-content:flex-end;gap:8px;display:flex}