/* The editor uses native controls; preview content remains in its own document. */
.practical-prompt{font-size:1rem;line-height:1.8;margin:0 0 24px;color:var(--ink)}
.practical-workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}
.practical-editor-panel,.practical-preview-panel{min-width:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--paper)}
.practical-panel-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 16px;background:var(--soft)}
.practical-panel-heading label,.practical-panel-heading h2{font-size:.9375rem;font-weight:750;margin:0}.practical-byte-count{font-size:.6875rem;color:var(--muted);font-variant-numeric:tabular-nums}
.practical-code{display:block;width:100%;min-height:460px;resize:vertical;border:0;border-radius:0;background:var(--field-bg);color:var(--ink);padding:18px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.875rem;line-height:1.7;tab-size:2;white-space:pre;box-sizing:border-box}.practical-code:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
.practical-code[readonly]{background:var(--soft)}.practical-caption{font-size:.75rem!important;line-height:1.7;color:var(--muted);margin:12px 16px}
.practical-preview-viewport{position:relative;width:100%;min-height:180px;overflow:hidden;background:white}.practical-preview{display:block;border:0;transform-origin:top left;max-width:none}
.practical-sizes{display:flex;gap:6px;flex-wrap:wrap;padding:12px 14px;border-bottom:1px solid var(--line)}.practical-sizes button{font-size:.75rem;padding:7px 10px;min-height:36px}.practical-sizes [aria-pressed=true]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.practical-requirements{margin-top:26px}.practical-requirements h2{font-size:1.25rem;margin:0 0 16px}.practical-checks{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.practical-checks li{display:grid;grid-template-columns:100px minmax(0,1fr) auto;gap:12px;align-items:start;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--paper);font-size:.8125rem;line-height:1.7}
.practical-check-state{color:var(--muted);font-size:.6875rem;font-weight:700}.practical-checks strong{font-size:.75rem;font-variant-numeric:tabular-nums;white-space:nowrap}.practical-check-label{overflow-wrap:anywhere}.practical-checks .is-correct{background:var(--success-bg);border-color:var(--success-text)}.practical-checks .is-correct .practical-check-state{color:var(--success-text)}.practical-checks .is-missing{border-style:dashed}.practical-checks .is-missing .practical-check-state{color:var(--ink)}
.practical-actions{display:flex;justify-content:flex-end;align-items:center;flex-wrap:wrap;gap:12px;margin-top:24px;padding-top:22px;border-top:1px solid var(--line)}.practical-hint{margin-top:20px;font-size:.875rem;color:var(--muted)}.practical-hint summary{cursor:pointer;min-height:40px;font-weight:650;color:var(--ink)}
.practical-code-details{margin:16px 0;min-width:0}.practical-code-details summary{cursor:pointer;min-height:40px;font-size:.875rem;font-weight:650}.practical-code-details pre{max-height:440px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;padding:18px;background:var(--field-bg);color:var(--ink);border:1px solid var(--line);border-radius:10px;font: .8125rem/1.7 ui-monospace,SFMono-Regular,Consolas,monospace}.practical-feedback{min-width:0}
@media(max-width:950px){.practical-workspace{grid-template-columns:1fr}.practical-code{min-height:350px}}
@media(max-width:600px){.practical-code{font-size:1rem;padding:14px;min-height:330px}.practical-panel-heading{padding:12px}.practical-checks li{grid-template-columns:minmax(0,1fr) auto;gap:4px 10px}.practical-check-state{grid-column:1 / -1}.practical-actions>*{flex:1 1 180px}.practical-caption{margin:12px}}
@media print{.practical-actions,.practical-preview-panel,.practical-sizes{display:none}.practical-workspace{display:block}.practical-code{height:auto;min-height:400px}}

.practical-review-code{display:block;width:100%;min-height:240px;margin-top:10px;padding:14px;box-sizing:border-box;font:1rem/1.6 ui-monospace,SFMono-Regular,Consolas,monospace;resize:vertical;background:var(--field-bg);color:var(--ink);border:1px solid var(--field-border);border-radius:10px}

.practical-form,.practical-feedback{text-align:left}

.practical-preview-status:empty{display:none}.practical-sizes .practical-refresh{margin-left:auto}.practical-preview-status{color:var(--ink)}

/* A decorative mirror colours code while the original textarea handles all input. */
:root{--html-tag:#245997;--html-attribute:#805410;--html-value:#24693d;--html-comment:#65717b;--html-entity:#8253a4;--html-punctuation:#536775}
:root[data-theme=dark]{--html-tag:#91c9ff;--html-attribute:#f4cb83;--html-value:#a4deaf;--html-comment:#a8b7c1;--html-entity:#d6afff;--html-punctuation:#b3c0c9}
.html-token-tag,.html-token-doctype,.html-token-selector{color:var(--html-tag)}.html-token-attribute,.html-token-property{color:var(--html-attribute)}.html-token-value{color:var(--html-value)}.html-token-comment{color:var(--html-comment)}.html-token-entity{color:var(--html-entity)}.html-token-punctuation{color:var(--html-punctuation)}
.html-syntax-control{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:.8125rem!important;font-weight:600!important;color:var(--ink);cursor:pointer}
.html-syntax-control input{width:18px;height:18px;min-height:18px;margin:0;accent-color:var(--accent);flex:0 0 18px}
.html-code-editor{position:relative;min-width:0;background:var(--field-bg);text-align:left}
.html-code-editor:has(textarea[readonly]){background:var(--soft)}
.html-code-input,.html-code-mirror{font-variant-ligatures:none;direction:ltr;tab-size:2;text-align:left}
.html-code-editor .html-code-mirror{position:absolute;top:0;left:0;z-index:0;box-sizing:border-box;margin:0;border:0;border-radius:0;max-width:none;max-height:none;white-space:pre;overflow:hidden;overflow-wrap:normal;word-break:normal;pointer-events:none;color:var(--ink);background:transparent}
.html-code-editor.is-highlighted .html-code-input{position:relative;z-index:1;color:transparent;-webkit-text-fill-color:transparent;background:transparent;caret-color:var(--ink)}
.html-code-editor.is-highlighted .html-code-input::selection{background:color-mix(in srgb,var(--accent) 25%,transparent);color:transparent}
.practical-code-details>.html-syntax-control{margin:4px 0}
@media(forced-colors:active),print{.html-code-editor .html-code-mirror{display:none!important}.html-code-editor.is-highlighted .html-code-input{color:var(--ink);-webkit-text-fill-color:currentColor;background:var(--field-bg)}.html-code-editor.is-highlighted .html-code-input::selection{background:Highlight;color:HighlightText}}
@media print{.html-syntax-control{display:none!important}.html-code-editor.is-highlighted .html-code-input{color:#000;-webkit-text-fill-color:#000;background:#fff}.practical-code-details pre{color:#000;background:#fff}.practical-code-details [class^=html-token-]{color:inherit}}

.python-input-label{display:block;margin:16px 16px 8px;font-size:.8125rem;font-weight:650;color:var(--ink)}
.practical-preview-panel .python-input{display:block;width:calc(100% - 32px);margin:0 16px 12px;resize:vertical;padding:12px;border:1px solid var(--field-border);border-radius:8px;background:var(--field-bg);color:var(--ink);font:1rem/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;box-sizing:border-box}
.practical-preview-panel .python-run{margin:0 16px 16px;max-width:calc(100% - 32px)}
.python-output{white-space:pre-wrap;overflow-wrap:anywhere;overflow:auto;min-height:180px;max-height:400px;margin:0 16px;padding:16px;border:1px solid var(--line);border-radius:10px;background:var(--field-bg);color:var(--ink);font:.875rem/1.65 ui-monospace,SFMono-Regular,Consolas,monospace;text-align:left}
.python-support{margin:16px;font-size:.8125rem;color:var(--muted);line-height:1.7}.python-support summary{min-height:44px;color:var(--ink);cursor:pointer}
.python-test-example{grid-column:1 / -1;font-size:.8125rem;min-width:0}.python-test-example summary{cursor:pointer;min-height:44px;color:var(--ink)}.python-test-example p{margin:8px 0 4px}.python-test-example pre{white-space:pre-wrap;overflow-wrap:anywhere;margin:0 0 8px;padding:12px;background:var(--field-bg);color:var(--ink);border:1px solid var(--line);border-radius:8px;font:.8125rem/1.6 ui-monospace,SFMono-Regular,Consolas,monospace}