:root{--bg:#f6f7f9;--surface:#fff;--surface-2:#eef1f5;--text:#1c2430;--text-muted:#5b6676;--line:#d6dbe3;--accent:#1e5fb4;--accent-text:#fff;--accent-soft:#e3edfa;--error:#b42318;--error-soft:#fdecea;--warning:#9a5b00;--warning-soft:#fff4e0;--info:#1e5fb4;--info-soft:#e3edfa;--good:#1f7a3d;--good-soft:#e6f4ea;--ludwig:#6b4e2e;--ludwig-soft:#f7efe4;--syn-tag:#1d4ed8;--syn-attr:#7c3aed;--syn-string:#b42318;--syn-number:#0f766e;--syn-comment:#6b7280;--syn-name:#a15c00;--radius:.5rem;--shadow:0 .25rem 1rem #0000001f;--font:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, "SF Mono", Menlo, Consolas, monospace;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#12161c;--surface:#1a2029;--surface-2:#232b36;--text:#e6e9ee;--text-muted:#9aa5b4;--line:#333d4a;--accent:#6ea8ff;--accent-text:#0d1420;--accent-soft:#1d2d45;--error:#ff8a80;--error-soft:#3a1d1b;--warning:#ffc266;--warning-soft:#352a16;--info:#6ea8ff;--info-soft:#1d2d45;--good:#6fd08c;--good-soft:#17301f;--ludwig:#e4c49b;--ludwig-soft:#2e261c;--syn-tag:#7cb7ff;--syn-attr:#c4a7ff;--syn-string:#ffa99f;--syn-number:#5fd4c4;--syn-comment:#8b95a5;--syn-name:#f2c46d;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}:root[data-theme=dark]{--bg:#12161c;--surface:#1a2029;--surface-2:#232b36;--text:#e6e9ee;--text-muted:#9aa5b4;--line:#333d4a;--accent:#6ea8ff;--accent-text:#0d1420;--accent-soft:#1d2d45;--error:#ff8a80;--error-soft:#3a1d1b;--warning:#ffc266;--warning-soft:#352a16;--info:#6ea8ff;--info-soft:#1d2d45;--good:#6fd08c;--good-soft:#17301f;--ludwig:#e4c49b;--ludwig-soft:#2e261c;--syn-tag:#7cb7ff;--syn-attr:#c4a7ff;--syn-string:#ffa99f;--syn-number:#5fd4c4;--syn-comment:#8b95a5;--syn-name:#f2c46d;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*,:before,:after{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--bg);color:var(--text);font-family:var(--font);flex-direction:column;font-size:1rem;line-height:1.5;display:flex}button{font:inherit;color:inherit;cursor:pointer}kbd{font-family:var(--mono);color:var(--text-muted);font-size:.75rem}code{font-family:var(--mono);background:var(--surface-2);border-radius:.25rem;padding:.05em .3em;font-size:.9em}.menubar{background:var(--surface);border-bottom:1px solid var(--line);flex-wrap:wrap;align-items:center;gap:.5rem;padding:.25rem .75rem;display:flex}.brand{color:var(--text);align-items:center;gap:.5rem;margin-right:.5rem;font-weight:700;text-decoration:none;display:flex}.brand img{border-radius:50%;width:2rem;height:2rem}.menus{flex-wrap:wrap;gap:.125rem;display:flex}.menu{position:relative}.menu-button{border-radius:var(--radius);background:0 0;border:0;padding:.375rem .625rem}.menu-button:hover,.menu-button[aria-expanded=true]{background:var(--surface-2)}.menu-list{z-index:20;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);min-width:14rem;box-shadow:var(--shadow);flex-direction:column;padding:.25rem;display:flex;position:absolute;top:100%;left:0}.menu-list[hidden]{display:none}.menu-list button{text-align:left;background:0 0;border:0;border-radius:.375rem;justify-content:space-between;gap:1rem;padding:.5rem .75rem;display:flex}.menu-list button:hover,.menu-list button:focus-visible{background:var(--accent-soft)}.folder-status{color:var(--text-muted);margin-left:auto;font-size:.875rem}.banner{background:var(--warning-soft);color:var(--text);border-bottom:1px solid var(--line);flex-wrap:wrap;align-items:center;gap:.75rem;padding:.5rem .75rem;font-size:.9375rem;display:flex}.banner[hidden]{display:none}.mobile-tabs{background:var(--surface);border-bottom:1px solid var(--line);display:flex}.mobile-tabs button{background:0 0;border:0;border-bottom:.1875rem solid #0000;flex:1;padding:.5rem}.mobile-tabs button[aria-pressed=true]{border-bottom-color:var(--accent);font-weight:600}.workspace{flex:1;grid-template-rows:1fr;grid-template-columns:1fr;min-height:0;display:grid}.pane{background:var(--surface);min-width:0;min-height:0;display:none}.pane.active{flex-direction:column;display:flex}@media (width>=64em){.mobile-tabs{display:none}.workspace{grid-template-columns:var(--cols,minmax(20rem, 26rem) 1fr 1fr);grid-template-rows:var(--rows,1fr minmax(6rem, 30%));background:var(--line);gap:1px}.pane{flex-direction:column;display:flex}.learn{grid-area:1/1/3}.code{grid-area:1/2}.preview{grid-area:1/3}.checks{grid-area:2/2/auto/4}.viewer{grid-area:1/2/3/4}.workspace.viewing .code,.workspace.viewing .preview,.workspace.viewing .checks,.viewer[hidden],.pane.collapsed>:not(.strip){display:none}.pane.collapsed>.strip{display:flex}}.strip{background:var(--surface-2);color:var(--text-muted);writing-mode:vertical-rl;border:0;flex:1;justify-content:center;align-items:center;gap:.5rem;padding:.75rem 0;font-weight:600;display:none}.checks .strip{writing-mode:horizontal-tb;padding:0 .75rem}.strip:hover{color:var(--accent);background:var(--accent-soft)}.pane-bar{background:var(--surface-2);border-bottom:1px solid var(--line);align-items:stretch;display:flex}.pane-bar .file-tabs{border-bottom:0;flex:1}.collapse{color:var(--text-muted);background:0 0;border:0;padding:0 .75rem;font-weight:700;display:none}.collapse:hover{color:var(--accent)}@media (width>=64em){.collapse{display:block}}.viewer-url{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.viewer-note{color:var(--text-muted);background:var(--surface-2);border-top:1px solid var(--line);margin:0;padding:.25rem .75rem;font-size:.8125rem}.file-tabs{background:var(--surface-2);border-bottom:1px solid var(--line);display:flex;overflow-x:auto}.file-tabs button{border:0;border-right:1px solid var(--line);font-family:var(--mono);white-space:nowrap;background:0 0;padding:.375rem .875rem;font-size:.875rem}.file-tabs button[aria-selected=true]{background:var(--surface);font-weight:600}.editor{flex:1;min-height:0;overflow:hidden}.editor .cm-editor{height:100%;font-size:.9375rem}.editor .cm-scroller{font-family:var(--mono)}.cm-editor{background:var(--surface);color:var(--text)}.cm-gutters{background:var(--surface-2)!important;color:var(--text-muted)!important;border-right:1px solid var(--line)!important}.cm-activeLine{background:color-mix(in srgb, var(--accent-soft) 45%, transparent)!important}.cm-activeLineGutter{background:var(--accent-soft)!important}.cm-tooltip{color:var(--text);background:var(--surface)!important;border:1px solid var(--line)!important}.preview-bar,.checks-bar{background:var(--surface-2);border-bottom:1px solid var(--line);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;padding:.25rem .75rem;font-size:.875rem;display:flex}.preview-title,.checks-title{font-weight:600}.devices{gap:.25rem;display:flex}.devices button,.button{background:var(--surface);border:1px solid var(--line);border-radius:.375rem;padding:.25rem .625rem;font-size:.875rem}.devices button[aria-pressed=true],.button.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-text)}.frame-wrap{background:var(--surface-2);flex:1;justify-content:center;min-height:0;display:flex;overflow:auto}.frame-wrap iframe{background:#fff;border:0;width:100%;height:100%}.frame-wrap.handy iframe{border-inline:1px solid var(--line);width:23.4375rem;max-width:100%}.frame-wrap.tablet iframe{border-inline:1px solid var(--line);width:48rem;max-width:100%}.checks-summary{color:var(--text-muted)}.findings{flex:1;margin:0;padding:0;list-style:none;overflow:auto}.findings li button{text-align:left;border:0;border-bottom:1px solid var(--line);background:0 0;grid-template-columns:auto auto 1fr;align-items:baseline;gap:.5rem;width:100%;padding:.375rem .75rem;display:grid}.findings li button:hover{background:var(--surface-2)}.findings .where{font-family:var(--mono);color:var(--text-muted);white-space:nowrap;font-size:.8125rem}.badge{border-radius:.25rem;padding:.05rem .4rem;font-size:.75rem;font-weight:700}.badge.error{background:var(--error-soft);color:var(--error)}.badge.warning{background:var(--warning-soft);color:var(--warning)}.badge.info{background:var(--info-soft);color:var(--info)}.findings .all-good{color:var(--good);padding:.75rem}.learn-tabs{background:var(--surface-2);border-bottom:1px solid var(--line);align-items:stretch;display:flex}.learn-tabs [role=tab]{background:0 0;border:0;border-bottom:.1875rem solid #0000;flex:1;padding:.5rem .25rem;font-size:.9375rem}.learn-tabs [role=tab][aria-selected=true]{border-bottom-color:var(--accent);font-weight:600}.learn-body{flex:1;padding:1rem;overflow:auto}.learn-body h2{margin:0 0 .5rem;font-size:1.25rem}.learn-body h3{margin:1.25rem 0 .5rem;font-size:1.0625rem}.learn-body img{max-width:100%;height:auto}.learn-body table{border-collapse:collapse;width:100%;font-size:.9375rem}.learn-body th,.learn-body td{border:1px solid var(--line);text-align:left;vertical-align:top;padding:.25rem .5rem}.learn-body blockquote{background:var(--info-soft);border-left:.25rem solid var(--info);border-radius:0 var(--radius) var(--radius) 0;margin:.75rem 0;padding:.5rem .75rem}.learn-body blockquote p{margin:0}.learn-body pre{background:var(--surface-2);border-radius:var(--radius);padding:.5rem .75rem;font-size:.875rem;overflow-x:auto}.learn-body pre code{background:0 0;padding:0}.section-title{text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);margin:1.25rem 0 .5rem;font-size:.8125rem}.section-title:first-child{margin-top:0}.card{text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);grid-template-columns:2rem 1fr;align-items:start;gap:.75rem;width:100%;margin-bottom:.5rem;padding:.75rem;display:grid}.card:hover{border-color:var(--accent)}.card .number{background:var(--accent-soft);width:2rem;height:2rem;color:var(--accent);border-radius:50%;place-items:center;font-weight:700;display:grid}.card.done .number{background:var(--good-soft);color:var(--good)}.card strong{display:block}.card span{color:var(--text-muted);font-size:.875rem}.lesson-head{margin-bottom:.75rem}.back{color:var(--accent);background:0 0;border:0;margin-bottom:.5rem;padding:0}.lesson-meta{color:var(--text-muted);font-size:.8125rem}.steps{flex-wrap:wrap;gap:.25rem;margin:.5rem 0 1rem;display:flex}.steps button{border:1px solid var(--line);background:var(--surface);border-radius:.375rem;min-width:2rem;height:2rem;font-size:.875rem}.steps button[aria-current=step]{background:var(--accent);border-color:var(--accent);color:var(--accent-text)}.steps button.seen{border-color:var(--good)}.step-nav{justify-content:space-between;gap:.5rem;margin-top:1.5rem;display:flex}.box{border-radius:var(--radius);border:1px solid var(--line);background:var(--surface);margin:1rem 0;padding:.75rem 1rem}.box>h4{margin:0 0 .5rem;font-size:1rem}.box ul,.box ol{margin:0;padding-left:1.25rem}.box.lernziele{background:var(--accent-soft);border-color:#0000}.box.aufgabe{border-left:.25rem solid var(--accent)}.box.aufgabe.wahl{border-left-color:var(--warning)}.box.aufgabe.solved{border-left-color:var(--good)}.checklist{list-style:none;padding:0!important}.checklist li{align-items:baseline;gap:.5rem;padding:.125rem 0;display:flex}.checklist .mark{text-align:center;width:1.25rem}.checklist .ok{color:var(--good)}.checklist .no{color:var(--text-muted)}.ichkann table{font-size:.9375rem}.ichkann td.rate{text-align:center;width:2.5rem;padding:0}.ichkann td.rate button{opacity:.35;background:0 0;border:0;width:100%;min-height:2.25rem;font-size:1.125rem}.ichkann td.rate button[aria-pressed=true]{opacity:1;background:var(--accent-soft)}.ludwig{background:var(--ludwig-soft);border-color:#0000;grid-template-columns:3rem 1fr;gap:.75rem;display:grid}.ludwig img{border-radius:50%;width:3rem;height:3rem}.ludwig h4{color:var(--ludwig)}.ludwig>div>:last-child{margin-bottom:0}.ludwig details summary{cursor:pointer;color:var(--ludwig);font-weight:600}.row{flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:.5rem;display:flex}.feedback{font-size:.9375rem}.feedback.good{color:var(--good)}.feedback.bad{color:var(--error)}.question{margin-bottom:1rem}.question p{margin:0 0 .25rem;font-weight:600}.question label{align-items:baseline;gap:.5rem;padding:.125rem 0;display:flex}.question.right .explain{color:var(--good)}.question.wrong .explain{color:var(--error)}.game-grid{grid-template-columns:repeat(auto-fill,minmax(8rem,1fr));gap:.5rem;display:grid}.tile{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);min-height:3.5rem;padding:.5rem;font-size:.9375rem}.tile[aria-pressed=true]{border-color:var(--accent);background:var(--accent-soft)}.tile.matched{border-color:var(--good);background:var(--good-soft);cursor:default}.tile.miss{border-color:var(--error);background:var(--error-soft)}.buckets{grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.5rem;margin-top:.5rem;display:grid}.bucket{border:.125rem dashed var(--line);border-radius:var(--radius);text-align:left;background:0 0;min-height:5rem;padding:.5rem}.bucket h5{margin:0 0 .25rem;font-size:.9375rem}.bucket .placed{color:var(--good);font-size:.875rem;display:block}.order-list{margin:0;padding:0;list-style:none}.order-list li{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);align-items:center;gap:.5rem;margin-bottom:.25rem;padding:.375rem .5rem;display:flex}.order-list li span{flex:1}.order-list button{background:var(--surface-2);border:1px solid var(--line);border-radius:.25rem;width:2rem;height:2rem}.nutzwert input{width:3.5rem;font:inherit;padding:.125rem .25rem}.nutzwert input.site{width:100%;min-width:6rem}.nutzwert .total td{font-weight:700}.nutzwert .winner{background:var(--good-soft)}.table-wrap{overflow-x:auto}.animation{margin:1rem 0}.animation svg{background:var(--surface-2);border-radius:var(--radius);width:100%;height:auto}.animation figcaption{color:var(--text-muted);margin-top:.25rem;font-size:.875rem}.search{width:100%;font:inherit;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--text);margin-bottom:.75rem;padding:.5rem .75rem}.ref-entry{border-bottom:1px solid var(--line);padding:.25rem 0}.ref-entry summary{cursor:pointer;padding:.25rem 0;font-weight:600}.goats{letter-spacing:.1em}.dialog{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--text);box-shadow:var(--shadow);width:min(44rem,100vw - 2rem);max-height:calc(100vh - 2rem);padding:1.25rem}.dialog::backdrop{background:#0006}.dialog h2{margin:0 0 .75rem;font-size:1.25rem}.dialog-actions{justify-content:flex-end;gap:.5rem;margin-top:1rem;display:flex}.palette-input{flex-wrap:wrap;align-items:center;gap:.5rem;display:flex}.palette-input input[type=color]{border:1px solid var(--line);background:0 0;border-radius:.375rem;width:3rem;height:2.25rem;padding:0}.palette-input input[type=text]{font:inherit;font-family:var(--mono);border:1px solid var(--line);background:var(--surface);width:8rem;color:var(--text);border-radius:.375rem;padding:.25rem .5rem}.harmonies{grid-template-columns:repeat(auto-fill,minmax(12rem,1fr));gap:.5rem;margin:.75rem 0;display:grid}.harmony{text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:.5rem}.harmony[aria-pressed=true]{border-color:var(--accent);box-shadow:0 0 0 .125rem var(--accent-soft)}.harmony small{color:var(--text-muted);display:block}.swatches{gap:.25rem;margin-top:.375rem;display:flex}.swatch{border:1px solid #0000001a;border-radius:.25rem;flex:1;height:1.5rem}.palette-table td:first-child{width:2.5rem}.palette-table .swatch{height:1.75rem}.contrast-ok{color:var(--good)}.contrast-bad{color:var(--error)}.palette-preview{border-radius:var(--radius);border:1px solid var(--line);margin-top:.75rem;padding:.75rem 1rem}.palette-preview button{border:0;border-radius:.375rem;padding:.375rem .75rem}@media (prefers-reduced-motion:reduce){.animation svg *{animation:none!important}}.tree{background:var(--surface-2);border-radius:var(--radius);margin:.5rem 0;padding:.5rem;font-size:.875rem;list-style:none}.tree li{border-radius:.25rem;align-items:baseline;gap:.375rem;display:flex}.tree code{background:0 0}.tree-mark{text-align:center;flex:none;width:1.25rem}.tree-text{color:var(--text-muted);font-family:var(--font)}.tree li.target{background:var(--warning-soft)}.tree li.hit{background:var(--good-soft)}.tree li.wrong{background:var(--error-soft)}.tree-task{margin:.25rem 0 .5rem}@media (width>=64em){.preview-bar,.checks-bar{flex-wrap:nowrap}.preview-bar .devices{margin-left:auto}.preview-bar .devices button{padding:.125rem .5rem}}