/* Theme controls belong to both palettes. Learning content and progress stay unchanged. */
.theme-settings{margin:0 0 30px}.theme-settings h2{margin:6px 0 18px}.theme-choices{display:grid;grid-template-columns:1fr 1fr;gap:14px}.theme-choices button{padding:10px;text-align:left;min-width:0}.theme-choices strong,.theme-choices small{display:block;margin:6px 4px}.theme-choices small{font-size:12px;color:var(--quiet)}.theme-choices [aria-pressed=true]{outline:2px solid var(--brand);outline-offset:2px}.theme-choices [aria-pressed=true] strong:after{content:' ✓'}.theme-preview{height:94px;display:flex;align-items:center;justify-content:center;border-radius:8px;overflow:hidden}.paper-preview{background:#ecefe3;color:#294c3c;font:44px 'LearningHub Decorative',serif}.yoru-preview{background:#632196 url('/themes/yoru-mobile.jpg') center 42%/cover;color:white;font:bold 11px monospace;text-shadow:1px 2px #36163e}.theme-credit{margin-bottom:0}.theme-cassette{display:none}
html[data-theme=yoru]{--paper:#e1d8e9;--surface:#f3edf4;--ink:#302238;--quiet:#6e527e;--line:#bcabc8;--soft:#e6d9ee;--brand:#7423b5;--accent:#b7d65b;color-scheme:light}
html[data-theme=yoru] body{background:#37213f}
html[data-theme=yoru] body:before{content:'';position:fixed;inset:0;pointer-events:none;background:linear-gradient(#30143b08,#30143b25),var(--yoru-desktop) center/cover;z-index:0}
html[data-theme=yoru] .shell{position:relative;z-index:1;background:transparent}
html[data-theme=yoru] .chrome{background:#e1dfd4f5;padding:22px;margin:0 -22px;border-bottom:3px solid #52246f;box-shadow:0 4px #7b28c160}
html[data-theme=yoru] .brand{font-family:Georgia,serif;font-style:italic;font-size:23px}html[data-theme=yoru] .brand small{font-family:sans-serif;font-style:normal}html[data-theme=yoru] .mark{border-radius:1px;box-shadow:2px 2px #d8f06f;color:#f5f1df}
html[data-theme=yoru] :is(button,input,textarea,select,dialog,.badge,.result,.glyph,.seal){border-radius:2px}
html[data-theme=yoru] button{border:2px solid;border-color:#fff5ff #85708f #85708f #fff5ff;background:#ded0e7;box-shadow:1px 1px #64536e}
html[data-theme=yoru] button:hover{background:#ecdef4}html[data-theme=yoru] button:active{border-color:#85708f #fff5ff #fff5ff #85708f}
html[data-theme=yoru] button.primary,html[data-theme=yoru] .hero button{background:#dcf57c;color:#30213a;border-color:#f7ffcf #6c7841 #6c7841 #f7ffcf}
html[data-theme=yoru] :is(button,a,input,textarea,select):focus-visible{outline-color:#8732c9}
html[data-theme=yoru] :is(.page-head,.hero,.tile,.soft-card,.entry,.article,.question,.flash,.grammar-lesson,.grammar-prompt,.grammar-overview,.drill-overview,.drill-passage,.drill-answer,.listen-player,.listening-work,.listen-summary,.listen-notes,dialog){background:var(--paper);border:3px solid;border-color:#fff6ff #675071 #675071 #fff6ff;border-radius:1px;box-shadow:3px 3px 0 #7228b988}
html[data-theme=yoru] .page-head{padding:20px 24px;border-top:8px solid #7926cb;max-width:none}
html[data-theme=yoru] .page-head h1{font-family:var(--serif);font-size:32px}
html[data-theme=yoru] :is(.hero,.grammar-lesson,.grammar-prompt,.drill-overview,.theme-settings){position:relative;border-top:9px solid #7926cb}
html[data-theme=yoru] .hero{color:var(--ink);background:linear-gradient(135deg,#e9e5d5,#d6c5e4)}
html[data-theme=yoru] .hero :is(p,.eyebrow){color:var(--quiet)}html[data-theme=yoru] .hero .watermark{color:#7b2ac2;opacity:.12}
html[data-theme=yoru] .eyebrow{color:#784293;font-family:monospace;letter-spacing:1.7px}
html[data-theme=yoru] .week-dates{background:#e1d8e9f5;padding:10px;border:2px outset #f9efff}
html[data-theme=yoru] .day.today{background:#7926cb;color:#fff}html[data-theme=yoru] .day.today small{color:#fff}
html[data-theme=yoru] .section-head{background:var(--paper);padding:10px 12px;border-left:4px solid #8b30ce}
html[data-theme=yoru] :is(.notice,.empty){background:var(--paper);padding:16px;border:1px solid var(--line)}
html[data-theme=yoru] .row{margin-bottom:10px;padding:16px;background:var(--paper)}
html[data-theme=yoru] .columns>section{background:#e1d8e9f7;padding:20px;border:2px outset #fff0ff}
html[data-theme=yoru] .columns>section .soft-card{box-shadow:none}
html[data-theme=yoru] .back{padding:7px 12px;background:var(--paper)}
html[data-theme=yoru] :is(.article,.question,.listening-work,.listen-notes,.listen-summary){padding:22px}
html[data-theme=yoru] .article{background:#f4efe7}
html[data-theme=yoru] .flash{background:#f4efe7}
html[data-theme=yoru] :is(blockquote,.grammar-answer,.drill-context,.drill-hint){background:#ebe1ee;border-color:#9663b1;border-radius:1px}
html[data-theme=yoru] .grammar-answer{color:var(--ink)}
html[data-theme=yoru] .card-session>.section-head{padding:6px 10px}
html[data-theme=yoru] .card-session>.back{align-self:flex-start;padding:4px 12px}
html[data-theme=yoru] .card-controls{background:var(--paper);padding:6px;border:2px outset #fff5ff}
html[data-theme=yoru] .card-controls .card-sync{box-shadow:none;border:0;background:transparent}
html[data-theme=yoru] .ratings button:last-child{background:#ddf383}
html[data-theme=yoru] .grammar-controls{background:#e1d8e9;border-top:4px solid #7b29ba}
html[data-theme=yoru] .grammar-controls .section-head{padding:0;border:0}
html[data-theme=yoru] .listen-player{padding:12px;position:relative;top:auto}
html[data-theme=yoru] .theme-cassette{display:block;background:#302637;color:#e2f48b;border:3px inset #d6bfe5;padding:9px 16px;margin-bottom:10px}
html[data-theme=yoru] .theme-cassette>span{display:block;background:#ddef85;color:#35213f;font:11px monospace;letter-spacing:2px;padding:5px 9px}
html[data-theme=yoru] .tape-reels{display:flex;align-items:center;justify-content:center;gap:24px;padding:10px}
html[data-theme=yoru] .tape-reels i{width:40px;height:40px;border:6px dotted #c4b1d4;border-radius:50%;background:radial-gradient(circle,#decfe4 0 5px,transparent 6px);animation:tape-spin 3s linear infinite;animation-play-state:paused}
html[data-theme=yoru] .tape-reels b{width:65px;height:17px;background:#17131c;border:2px solid #796083}
html[data-theme=yoru] .is-playing .tape-reels i{animation-play-state:running}
html[data-theme=yoru] .listen-option{border-radius:1px;background:var(--surface)}
html[data-theme=yoru] .listen-option:has(:checked),html[data-theme=yoru] .listen-option.is-correct{background:#e4efb5;border-color:#788b3b}
html[data-theme=yoru] .listen-option.is-wrong{background:#f2dce4;border-color:#a25a7d}
html[data-theme=yoru] .listen-dots [aria-current=step]{background:#7926cb;color:white}
html[data-theme=yoru] .listen-figure{background:#f4efe7}
html[data-theme=yoru] :is(.listen-count,.listen-number){color:#79469b}
html[data-theme=yoru] body:is([data-page=settings],[data-page=song]) .narrow{background:var(--paper);padding:20px;border:3px outset #fff1ff}
html[data-theme=yoru] .login{background:var(--paper);padding:25px;border:3px outset #fff1ff}
html[data-theme=yoru] .login .page-head{padding:0;border:0;box-shadow:none}
html[data-theme=yoru] #navigation{background:#ded7df;border:3px outset #fff3ff;border-radius:1px;box-shadow:4px 4px #49205e66;backdrop-filter:none}
html[data-theme=yoru] #navigation button{border:2px outset #fff2ff;background:#dfd1e8;border-radius:1px;color:#593766}
html[data-theme=yoru] #navigation button.active{background:#7926cb;color:white;border-style:inset}
html[data-theme=yoru] .chrome-ghost{background:#ded7df;border-radius:1px}
html[data-theme=yoru] .desktop-footer{background:#e1d8e9;padding:18px;margin-bottom:110px}
html[data-theme=yoru] #toast{background:#e0f18c;color:#34223e;border:2px outset white;border-radius:1px;box-shadow:4px 4px #51236866}
html[data-theme=yoru] dialog{background:var(--paper);border-top:9px solid #7926cb}
html[data-theme=yoru] dialog::backdrop{background:#27123399}
@keyframes tape-spin{to{transform:rotate(360deg)}}
@media(min-width:900px){html[data-theme=yoru] body[data-page=week] .head-row{margin-bottom:85px}html[data-theme=yoru] body[data-page=week] .dashboard{gap:30px}html[data-theme=yoru] body[data-page=week] .hero{margin-top:35px}}
@media(max-width:700px){html[data-theme=yoru] body:before{background-image:linear-gradient(#30143b08,#30143b25),var(--yoru-mobile);background-position:center top}html[data-theme=yoru] .chrome{margin:0 -12px;padding:19px 12px}html[data-theme=yoru] .brand{font-size:18px}html[data-theme=yoru] .page-head{padding:16px}html[data-theme=yoru] .page-head h1{font-size:27px}html[data-theme=yoru] body[data-page=week] .head-row{margin-bottom:90px}html[data-theme=yoru] .columns>section{padding:13px}html[data-theme=yoru] :is(.article,.question,.listening-work,.listen-notes,.listen-summary){padding:16px}html[data-theme=yoru] .listen-dots{gap:6px}html[data-theme=yoru] .listen-player .actions{gap:5px}html[data-theme=yoru] .listen-player .actions button{font-size:11px;padding:7px 5px}html[data-theme=yoru] .theme-cassette{padding:7px 12px}html[data-theme=yoru] #navigation{border-left:0;border-right:0;border-bottom:0}html[data-theme=yoru] .card-session>.section-head{padding:3px 8px}.theme-preview{height:78px}.theme-choices{gap:10px}.theme-choices small{font-size:11px}}
@media(prefers-reduced-motion:reduce){html[data-theme=yoru] .tape-reels i{animation:none}}

html{--yoru-desktop:url('/themes/yoru-desktop.jpg');--yoru-mobile:url('/themes/yoru-mobile.jpg')}
html[data-wallpaper=collage]{--yoru-desktop:url('/themes/yoru-collage-desktop.jpg');--yoru-mobile:url('/themes/yoru-collage-mobile.jpg')}
html[data-wallpaper=archive]{--yoru-desktop:url('/themes/yoru-archive-desktop.jpg');--yoru-mobile:url('/themes/yoru-archive-mobile.jpg')}
.wallpaper-settings{margin-top:24px}.wallpaper-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.wallpaper-choices button{padding:6px;font-size:12px;min-width:0}.wallpaper-thumb{display:block;height:100px;background-position:center 35%;background-size:cover;margin-bottom:6px}.wallpaper-street{background-image:url('/themes/yoru-mobile.jpg')}.wallpaper-collage{background-image:url('/themes/yoru-collage-mobile.jpg')}.wallpaper-archive{background-image:url('/themes/yoru-archive-mobile.jpg')}.wallpaper-settings [aria-pressed=true]{outline:2px solid var(--brand);outline-offset:2px}
/* Text outside cards also needs an opaque surface over the artwork. */
html[data-theme=yoru] :is(.narrow>p,main>p,.grammar-position,.drill-guide,.drill-stats,.reading-tools){background:var(--paper);padding:10px 14px;border:1px solid var(--line)}
html[data-theme=yoru] #drill-form{background:var(--paper);padding:18px;border:2px outset #fff1ff}
html[data-theme=yoru] .grammar-study-footer{background:var(--paper);padding:14px}
html[data-theme=yoru] .dashboard>section>p{background:var(--paper);padding:10px}
html[data-theme=yoru] :is(.narrow>h1,.narrow>h2,.narrow>h3,main>h1,main>h2){background:var(--paper);padding:12px 16px;border-left:5px solid #7926cb}