html{background:var(--a-bg)}body{margin:0;background:var(--a-bg)}
/* Shared editorial hierarchy across all skills. */
body .app{padding-bottom:84px}body .app *{scrollbar-color:var(--a-line) transparent}
body .app .site-header{position:relative}
body .app :is(input,textarea,select){font-family:inherit;color:var(--a-text)}
body .app .studio-hero{grid-template-columns:1.1fr 1fr;gap:55px;min-height:420px;margin-bottom:20px}
body .app .studio-hero h1{font-size:52px;max-width:540px;line-height:1.16}
body .app .studio-scene{height:370px;mask-image:none!important;border-radius:28px;object-position:80% center}
body .app .studio-hero-copy>p{max-width:450px;font-size:17px}
body .app .studio-continue{margin:15px 0 45px;padding:21px 25px;border-radius:20px;align-items:center;gap:18px}
body .app .continue-icon{background:var(--a-raised);color:var(--a-accent);border-radius:50%;width:46px;height:46px;display:grid;place-items:center}
body .app .studio-explore{padding-top:8px;border-top:1px solid var(--a-line)}
body .app .studio-skills{grid-template-columns:repeat(3,minmax(0,1fr))}
body .app .studio-features{margin-top:40px;gap:25px}
body .app .reading-feature:before{color:var(--a-accent);opacity:.22}
body .app .studio-method h2{color:var(--a-text);font-size:23px}body .app .studio-method p{color:var(--a-muted)}
/* Grammar: a visual lesson, followed by an optional readable companion. */
body .app .knowledge-map{background:none;border:0;padding:0;box-shadow:none}
body .app .knowledge-map-header{padding:7px 0 25px;gap:22px;align-items:center}
body .app .knowledge-map-header h2{font-size:38px;line-height:1.2;font-weight:650;letter-spacing:-.035em;color:var(--a-text);margin:14px 0 0}
body .app .map-label{font-size:12px;color:var(--a-muted);gap:9px}
body .app .generated-map-frame{max-width:940px;margin:0 auto 28px;padding:0;background:none;border:0;overflow:hidden;border-radius:22px;box-shadow:0 15px 45px #0002}
body .app .generated-map-frame img{display:block;width:100%;height:auto;max-height:none;object-fit:contain}
body .app .map-zoom{background:var(--a-panel);color:var(--a-text);border:1px solid var(--a-line);border-radius:50%;width:44px;height:44px;bottom:15px;right:15px}
body .app .map-text{background:var(--a-panel);border:1px solid var(--a-line);border-radius:20px;padding:0 23px}
body .app .map-text>summary{padding:20px 0;color:var(--a-text);font-size:15px;min-height:52px}
body .app .knowledge-branches{padding:0;gap:14px;border:0}
body .app .knowledge-node{border:1px solid var(--a-line);border-radius:14px;background:var(--a-bg)}
body .app .knowledge-node summary{padding:17px;gap:12px;font-size:15px;color:var(--a-text);min-height:56px}
body .app .map-index{color:var(--a-accent);font-size:12px}
body .app .node-detail{padding:0 20px 20px;font-size:16px;line-height:1.85;color:var(--a-muted)}
body .app .node-detail blockquote{background:var(--a-raised);border:0;border-inline-start:2px solid var(--a-accent);padding:16px;border-radius:0 12px 12px 0;color:var(--a-text)}
body .app .knowledge-formulas{gap:15px;margin-block:24px}
body .app .knowledge-formulas>div{background:var(--a-bg);border:0;border-radius:12px;padding:18px;line-height:1.7}
body .app .knowledge-formulas>div>span{color:var(--a-accent)}
body .app .grammar-form-grid article{background:var(--a-raised);border:0;border-radius:14px;padding:20px}
body .app .grammar-form-grid h3{color:var(--a-accent);font-size:13px}
body .app .grammar-illustration{border:1px solid var(--a-line);border-radius:18px;margin-top:20px;background:var(--a-panel)}
/* Reading and listening retain the complete material and original audio. */
body .app .material-intro-grid{grid-template-columns:minmax(230px,.8fr) minmax(0,1.2fr);gap:45px}
body .app .material-illustration{width:100%;max-width:420px;max-height:none;aspect-ratio:auto;justify-self:start}
body .app .material-illustration img{width:100%;height:auto;max-height:none;object-fit:contain}
body .app .material-heading{align-items:start;margin-bottom:24px}
body .app .material-card h2{font-size:39px;line-height:1.25;max-width:650px}
body .app .material-card .eyebrow{color:var(--a-accent)}
body .app .reading-text{font-family:Georgia,'Noto Serif',serif;font-size:22px;line-height:1.95;max-width:730px;letter-spacing:.005em;padding:10px 0}
body .app .reading-text p{margin:0 0 1.4em;color:var(--a-text)}
body .app .reading-text h3{font-family:Manrope,Arial,sans-serif;font-size:21px;color:var(--a-text)}
body .app .listening-player{max-width:760px;margin:28px auto;background:var(--a-panel);border:1px solid var(--a-line);border-radius:22px;padding:24px}
body .app audio{color-scheme:inherit;width:100%;min-height:48px}
body .app .audio-speed{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--a-muted);margin-top:14px}
body .app .audio-speed select{border:1px solid var(--a-line);border-radius:25px;background:var(--a-raised);padding:9px 16px;min-height:42px}
body .app .synthetic-notice{font-size:12px;line-height:1.75;color:var(--a-muted)}
body .app .transcript{border-top:1px solid var(--a-line);padding-top:24px}
body .app .practice-reference{background:var(--a-panel);border:1px solid var(--a-line);border-radius:18px;max-width:820px;margin-inline:auto}
/* Writing desk: task → draft → self-check → model. */
body .app .question-card:has(.writing-checklist){max-width:860px}
body .app .write-answer,body .app .dual-input{width:100%}
body .app textarea{display:block;width:100%;box-sizing:border-box;background:var(--a-bg);border:1px solid var(--a-line);border-radius:17px;padding:22px;font-size:19px;line-height:1.85;resize:vertical;min-height:150px;caret-color:var(--a-accent);box-shadow:inset 0 2px 8px #00000008}
body .app .question-card:has(.writing-checklist) textarea{min-height:280px;font-family:Georgia,serif}
body .app textarea:focus{outline:2px solid var(--a-accent);outline-offset:3px}
body .app .writing-note{font-size:13px;color:var(--a-muted);line-height:1.8;padding:0;margin-bottom:18px}
body .app .writing-checklist{border:1px solid var(--a-line);border-radius:18px;background:var(--a-bg);padding:22px;margin:25px 0;display:grid;gap:14px}
body .app .writing-checklist label{display:flex;gap:12px;align-items:start;color:var(--a-text);font-size:15px;line-height:1.7;cursor:pointer}
body .app .writing-checklist input{width:19px;height:19px;margin-top:4px;flex-shrink:0;accent-color:var(--a-accent)}
body .app .model-answer{border:0;border-radius:18px;background:var(--a-bg);padding:26px;font-size:19px;line-height:1.9;color:var(--a-text)}
body .app .model-answer p{margin-bottom:20px}
/* Review: readable comparison, compact metadata, no red wall. */
body .app .notebook-section{max-width:950px;margin:0 auto 40px;padding:0}
body .app .notebook-section .section-heading{align-items:start;gap:20px;margin-bottom:25px}
body .app .notebook-section h2{font-size:29px;line-height:1.35;color:var(--a-text);font-weight:650}
body .app .notebook-section .section-heading p{font-size:14px;line-height:1.85;max-width:650px;color:var(--a-muted)}
body .app .notes-count{background:var(--a-raised);color:var(--a-accent);border:0;border-radius:17px;padding:14px;min-width:54px;text-align:center}
body .app .note-list{display:grid;grid-template-columns:1fr;gap:18px}
body .app .note-card,body .app .note-card.unknown{background:var(--a-panel);border:1px solid var(--a-line);border-radius:21px;padding:26px;box-shadow:none}
body .app .note-top{font-size:12px;color:var(--a-muted);padding-bottom:17px;margin-bottom:19px;border-bottom:1px solid var(--a-line);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
body .app .note-card h3{font-size:20px;line-height:1.7;font-weight:550;color:var(--a-text)}
body .app .note-card p{font-size:16px;line-height:1.85;color:var(--a-muted)}
body .app .note-card mark{color:var(--a-good);background:var(--a-good-bg);border-radius:5px;padding:2px 4px}
body .app .note-card del{color:var(--a-bad);background:var(--a-bad-bg);border-radius:5px;padding:2px 4px}
body .app .note-actions{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin-top:22px;padding-top:19px;border-top:1px solid var(--a-line)}
body .app .empty-notes{padding:45px 28px;border:1px dashed var(--a-line);background:var(--a-panel);border-radius:22px;text-align:center;color:var(--a-muted)}
body .app .empty-notes svg{color:var(--a-accent)}
body .app .review-plan{border-top:1px solid var(--a-line);padding-top:34px}
body .app .review-plan>.note-list>p{padding:24px;background:var(--a-panel);border-radius:18px;font-size:15px;line-height:1.8}
body .app .related-section{margin-top:40px;padding-top:26px;border-top:1px solid var(--a-line)}
body .app .related-section h2{font-size:19px;font-weight:600;color:var(--a-text)}
body .app .related-section>div{gap:12px}body .app .related-section a{background:var(--a-panel);border:1px solid var(--a-line);border-radius:14px;color:var(--a-muted);padding:15px;font-size:13px;min-height:44px}
body .app .stage-picker[open],body .app .progress-panel[open]{background:var(--a-panel);border-color:var(--a-line);color:var(--a-text)}
body .app .stage-route button{background:var(--a-raised);color:var(--a-muted)}body .app .stage-route button.active{color:var(--a-accent)}
body .app .word-meaning,body .app .headword{color:var(--a-text)}
body .app .question-context,body .app .reading-text,body .app .word-body{min-width:0;overflow-wrap:break-word}
/* Theme comparison lives outside the learning app; never changes answers or progress. */
.palette-picker{position:fixed;bottom:max(16px,env(safe-area-inset-bottom));right:22px;z-index:50;border:1px solid var(--a-line);border-radius:30px;padding:8px 12px 8px 18px;background:var(--a-panel);color:var(--a-muted);box-shadow:0 8px 30px #0003;font:12px Manrope,Arial,sans-serif}
.palette-picker label{display:flex;gap:12px;align-items:center}.palette-picker select{max-width:180px;background:var(--a-raised);color:var(--a-text);border:0;border-radius:22px;padding:10px 13px;font:14px Manrope,Arial,sans-serif;min-height:42px}.palette-picker option{background:var(--a-panel);color:var(--a-text)}
.palette-picker select:focus-visible{outline:2px solid var(--a-accent);outline-offset:3px}
@media(max-width:700px){body .app .studio-hero{display:flex;gap:28px;min-height:0}body .app .studio-hero h1{font-size:37px}body .app .studio-scene{height:230px}body .app .studio-skills{grid-template-columns:1fr}body .app .studio-continue{padding:18px;gap:12px}body .app .knowledge-map-header{align-items:start;flex-direction:column;gap:18px}body .app .knowledge-map-header h2{font-size:30px}body .app .generated-map-frame{border-radius:15px}body .app .map-text{padding-inline:16px}body .app .knowledge-branches{grid-template-columns:1fr}body .app .knowledge-formulas{grid-template-columns:1fr}body .app .material-intro-grid{grid-template-columns:1fr;gap:25px}body .app .material-illustration{max-width:100%}body .app .material-card h2{font-size:31px}body .app .reading-text{font-size:20px;line-height:1.85;margin-top:25px}body .app .listening-player{padding:17px}body .app .writing-checklist{padding:17px}body .app textarea{padding:18px;font-size:18px}body .app .note-card{padding:21px}body .app .notebook-section h2{font-size:25px}body .app .note-card h3{font-size:18px}body .app .note-card p{font-size:15px}body .app .stage-picker{position:relative;inset:auto;max-width:100%;margin-bottom:12px}body .app .progress-panel>summary{justify-content:flex-start}body .app .stage-picker .stage-route{width:100%}body .app .studio-method>div:last-child{flex-wrap:wrap}.palette-picker{right:12px;bottom:12px;max-width:calc(100vw - 24px);padding:6px 9px 6px 14px}.palette-picker select{max-width:170px}}
@media print{.palette-picker{display:none!important}body .app{padding-bottom:0}}
.palette-picker{display:flex;gap:8px;align-items:center}.palette-picker>button{border:0;border-radius:50%;background:var(--a-raised);color:var(--a-text);width:40px;height:40px;font-size:22px;cursor:pointer}.palette-picker.collapsed{padding:6px}.palette-picker.collapsed label{display:none}
body .app .writing-checklist label{background:none;border:0;padding:6px 0;box-shadow:none}
body .app .grammar-scene img{width:100%;height:auto;object-fit:contain}
/* Palette changes are immediate; only geometry/shadow hover transitions remain. */
body .app,body .app *{transition-property:transform,box-shadow!important}
body .app .notebook-section .filter-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0;overflow:visible;border:0}
body .app .notebook-section .filter-tabs button{font-size:13px;line-height:1.5;padding:10px 14px;min-height:44px;border:1px solid var(--a-line);border-radius:24px;color:var(--a-muted);background:var(--a-panel)}
body .app .notebook-section .filter-tabs button.active,body .app .notebook-section .filter-tabs button[aria-pressed=true]{background:var(--a-accent);color:var(--a-on);border-color:var(--a-accent)}
body .app .unit-tabs{overflow:visible;flex-wrap:wrap;max-width:100%}
@media(max-width:600px){body .app .unit-tabs a{padding-inline:10px}body .app .notes-count{padding:10px;min-width:44px}body .app .notebook-section .section-heading{gap:12px}}