/* Shared Sunlit Studio surfaces for the production study and account routes. */
@font-face{font-family:LexiUI;src:url(ui-regular.ttf) format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:LexiUI;src:url(ui-bold.ttf) format('truetype');font-weight:700 900;font-display:swap}
:root{--ink:#29272b;--paper:#faf7ef;--card:#fffefa;--muted:#68616a;--line:#ddd5c8;--outline:#847b86;--orange:#975315;--yellow:#f4d887;--blue:#6a587d;--green:#31594a;--success-surface:#edf3ed;--error-ink:#8c352b;--error-surface:#f9ede7;--shadow:none}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:LexiUI,'Noto Sans',system-ui,sans-serif;line-height:1.6}
body:has(#lessonDialog) :is(h1,h2,h3,.wordmark),body:has(#pictureGrid) :is(h1,h2,h3),body:has(.poses) :is(h1,h2,h3){font-family:LexiUI,'Noto Sans',system-ui,sans-serif}
button,input,select,textarea{font:inherit}
button,a,input,select,textarea{touch-action:manipulation}
a{color:var(--orange);text-underline-offset:4px}
:is(button,a,input,select,textarea,summary):focus-visible{outline:3px solid var(--blue);outline-offset:3px}
input,select,textarea,.field{font-size:16px;min-height:44px;border-color:var(--outline);background:#fff;color:var(--ink)}
.primary,.secondary,.choice,.rush-symbol,.chip,.sound-toggle,.account-link,.email-button,.google-button{min-height:44px;border-radius:12px}
.primary,.email-button{min-height:48px;background:var(--ink);color:var(--paper)}
.primary:hover,.email-button:hover{background:#42383d}
.secondary,.google-button,.sound-toggle,.account-link{background:var(--card);color:var(--ink);border:1px solid var(--outline)}
.secondary:hover,.google-button:hover,.sound-toggle:hover,.account-link:hover{background:#f9edd0}
.eyebrow{color:var(--orange);font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;font-weight:700}
.small,.muted,.home-note{color:var(--muted)}
.panel,.card,.login-card,body>main>section{box-shadow:none}
.panel,.card,.login-card{background:var(--card);border:1px solid var(--line);border-radius:24px}
.sync-card{border:1px solid var(--line);box-shadow:0 18px 40px #29272b24}
.sync-card .actions button{min-height:48px}
.sync-notice{box-shadow:0 8px 24px #29272b22}
.sync-notice button{min-height:44px}
dialog{max-width:min(520px,calc(100vw - 32px));border:1px solid var(--line);border-radius:20px;padding:24px;background:var(--card);color:var(--ink);box-shadow:0 20px 50px #29272b33}
dialog::backdrop{background:#29272b99}
dialog h2{margin:0 0 12px;line-height:1.2}
dialog p{line-height:1.6;color:var(--muted)}
dialog .actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
dialog .actions>*{flex:1 1 160px}

/* Kana: a calm course entry and a single reading path through each study card. */
body:has(#exerciseProgress) .shell{max-width:1120px;padding:32px 48px 64px}
body:has(#exerciseProgress) .topbar{gap:20px;margin-bottom:28px;border-bottom:1px solid var(--line);padding-bottom:18px}
body:has(#exerciseProgress) .brand-tagline{font-weight:400}
body:has(#exerciseProgress) .grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:20px}
body:has(#exerciseProgress) .panel{padding:clamp(20px,3vw,32px)}
body:has(#exerciseProgress) .hero h1{font-size:clamp(2.3rem,4.5vw,3.75rem);line-height:1.14;letter-spacing:-.045em;max-width:680px}
body:has(#exerciseProgress) .hero p{font-size:1rem;line-height:1.65}
body:has(#exerciseProgress) .mini-stack{gap:8px}
body:has(#exerciseProgress) .game-tile{box-shadow:none;padding:13px 16px;border-color:var(--line);border-radius:14px}
body:has(#exerciseProgress) .game-tile.locked{opacity:1;background:#faf8f3}
body:has(#exerciseProgress) .game-tile.locked :is(.num,h3,p,.status){color:var(--muted)}
body:has(#exerciseProgress) .num{background:var(--blue);border-radius:10px;font-size:.9rem}
body:has(#exerciseProgress) .status{color:var(--blue);font-size:.72rem}
body:has(#exerciseProgress) .learning-progress{position:static;width:auto;max-width:100%;margin:22px 0 0;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:18px;border-radius:18px;box-shadow:none;text-align:center}
body:has(#exerciseProgress) .learning-progress{order:2}
body:has(#exerciseProgress) .learning-progress progress{grid-column:1/-1;width:100%}
body:has(#exerciseProgress) .shell:has(#home.active) .learning-progress{display:none}
body:has(#exerciseProgress) .learn-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;max-width:1000px;margin:auto}
body:has(#exerciseProgress) .learn-layout>*{min-width:0}
body:has(#exerciseProgress) #imageView{width:100%;min-width:0;max-width:100%}
body:has(#exerciseProgress) .learn-layout.single{grid-template-columns:1fr;max-width:800px}
body:has(#exerciseProgress) .glyph-stage{min-height:0;gap:4px}
body:has(#exerciseProgress) .glyph{font-size:clamp(6rem,10vw,8.5rem);font-weight:400;line-height:1.2}
body:has(#exerciseProgress) .roman{color:var(--blue);font-size:1.1rem}
body:has(#exerciseProgress) .glyph-stage:has(#learnGlyph.hidden) .roman{display:block;font-size:clamp(2.5rem,7vw,4rem);line-height:1.2;background:#f0ebf3;border-radius:18px;padding:24px 32px;margin:26px auto;color:var(--blue)}
body:has(#exerciseProgress) .memory-image{width:min(100%,360px);aspect-ratio:1;border:1px solid var(--line);background:white}
body:has(#exerciseProgress) .mnemonic{background:#f9edd0;border:1px solid #e7d6af;line-height:1.6;text-align:left}
body:has(#exerciseProgress) .cue-editor{padding:16px;border:1px solid var(--line);border-radius:18px;background:var(--card)}
body:has(#exerciseProgress) .course-data-options{margin-top:22px;padding-top:14px;border-top:1px solid var(--line)}
body:has(#exerciseProgress) .course-data-options summary{font-size:.875rem;color:var(--muted);cursor:pointer;min-height:44px;display:flex;align-items:center}
body:has(#exerciseProgress) .course-data-options button{margin-top:8px}
body:has(#exerciseProgress) .cue-actions{align-items:center}
body:has(#exerciseProgress) .canvas-wrap{background:var(--card);color:var(--ink)}
body:has(#exerciseProgress) .canvas-wrap .eyebrow{color:var(--orange)}
body:has(#exerciseProgress) .canvas-wrap p{color:var(--muted)}
body:has(#exerciseProgress) canvas{max-width:420px;margin:auto;border:1px solid var(--outline);background:#fff}
body:has(#exerciseProgress) .guide{color:var(--ink)}
body:has(#exerciseProgress) .draw-score.pass,.feedback.good{color:var(--green)}
body:has(#exerciseProgress) .draw-score.fail,.feedback.bad{color:var(--error-ink)}
body:has(#exerciseProgress) .game-card{max-width:800px;text-align:left}
body:has(#exerciseProgress) .game-head{gap:16px}
body:has(#exerciseProgress) .game-phase{background:#f0ebf3;color:var(--blue);padding:10px 14px}
body:has(#exerciseProgress) .prompt{text-align:center;font-size:clamp(5.5rem,12vw,8.5rem);font-weight:400;line-height:1.25}
body:has(#exerciseProgress) .prompt.word{font-size:clamp(3rem,7vw,5rem)}
body:has(#exerciseProgress) .prompt.flow-line{font-size:clamp(1.7rem,5vw,3.2rem);line-height:1.8}
body:has(#exerciseProgress) .choice{min-height:64px;border:1px solid var(--outline);background:var(--card);font-size:1.1rem}
body:has(#exerciseProgress) .choice.correct{background:var(--success-surface);border-color:var(--green)}
body:has(#exerciseProgress) .choice.wrong{background:var(--error-surface);border-color:var(--error-ink)}
body:has(#exerciseProgress) .feedback{padding:10px 0;line-height:1.55;min-height:44px}
body:has(#exerciseProgress) .word-reveal{background:var(--success-surface);border:1px solid #bbd1c4;text-align:left}
body:has(#exerciseProgress) .score-ring{background:conic-gradient(var(--blue) var(--score),#e8e1e8 0)}
body:has(#exerciseProgress) .kana-grid button{min-height:64px;border-color:var(--outline)}
body:has(#exerciseProgress) .reference-card{max-width:800px}
body:has(#exerciseProgress) .rush-symbol{min-height:76px;border-color:var(--outline)}

/* Kanji uses the same restrained card, control and feedback language. */
body:has(#introducedCount){--ink:#29272b;--paper:#faf7ef;--line:#ddd5c8;--muted:#68616a;--green:#31594a;--orange:#975315}
body:has(#introducedCount) .shell{max-width:1000px;padding:32px 48px 64px}
body:has(#introducedCount) .top{border-bottom:1px solid var(--line);padding-bottom:18px}
body:has(#introducedCount) .card{background:var(--card);border-color:var(--line);box-shadow:none}
body:has(#introducedCount) h1{font-size:clamp(2.2rem,5vw,3.75rem);line-height:1.14}
body:has(#introducedCount) .cyclePanel,body:has(#introducedCount) .cue{background:#f9edd0}
body:has(#introducedCount) .picture{background:white}
body:has(#introducedCount) .field{border-color:var(--outline);font-size:16px}
body:has(#introducedCount) .incorrect{color:var(--error-ink)}
body:has(#introducedCount) .promptGlyph{font-weight:400}

/* Account and data routes remain short, readable, and consistent. */
.login-header{max-width:1120px;border-bottom:1px solid var(--line)}
.login-layout{max-width:1120px;gap:40px}
.welcome-cats{width:min(100%,320px);height:auto}
.login-card{box-shadow:none}
.login-card input{border-color:var(--outline);font-size:16px}
.login-card .notice{background:#f9edd0}
.login-card .message.error{color:var(--error-ink)}
body:has(#transferFile) main,body:has(>main>h1:first-child) main{max-width:760px}
body:has(#transferFile) section{background:var(--card);border:1px solid var(--line);border-radius:24px}
body:has(#transferFile) button{min-height:48px;background:var(--ink);color:var(--paper)}
body:has(#transferFile) a{color:var(--orange)}
body:has(#transferFile) input[type=file]{border:1px solid var(--outline);padding:12px;border-radius:12px;background:white}
body:has(#transferFile) #transferStatus.error{color:var(--error-ink)}
body:has(>main>h1) h1{line-height:1.16}
body:has(#privacyContents) main{max-width:760px!important;margin:40px auto 72px!important;padding:20px!important}
body:has(#privacyContents) h2{margin-top:36px;scroll-margin-top:24px}
body:has(#privacyContents) p{line-height:1.7}
#privacyContents{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 18px;padding:20px;margin:24px 0;background:var(--card);border:1px solid var(--line);border-radius:20px}
#privacyContents strong{grid-column:1/-1}
#privacyContents a{color:var(--orange);min-height:44px;display:flex;align-items:center}
body:has(#cards) .filters button{min-height:44px;border-color:var(--outline);border-radius:12px}
body:has(#cards) .filters button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
body:has(#cards) .card{background:var(--card);border-color:var(--line);box-shadow:none}
body:has(#cards) .notice{background:#f9edd0;border-color:#e7d6af}

@media(max-width:800px){body:has(#exerciseProgress) .shell,body:has(#introducedCount) .shell{padding:24px}body:has(#exerciseProgress) .grid,body:has(#exerciseProgress) .learn-layout{grid-template-columns:1fr}body:has(#exerciseProgress) .canvas-wrap{order:0}}
@media(max-width:620px){body:has(#exerciseProgress) .shell,body:has(#introducedCount) .shell{padding:16px}body:has(#exerciseProgress) .panel,body:has(#introducedCount) .card{padding:20px;border-radius:20px}body:has(#exerciseProgress) .hero h1{font-size:clamp(2.2rem,11vw,2.75rem)}body:has(#exerciseProgress) .topbar{align-items:flex-start}body:has(#exerciseProgress) .progressbox{width:100%;justify-content:space-between}body:has(#exerciseProgress) .learning-progress{margin-top:16px;grid-template-columns:repeat(3,minmax(0,1fr))}body:has(#exerciseProgress) .learning-progress strong{font-size:1rem}body:has(#exerciseProgress) .learning-progress span{font-size:.75rem}body:has(#exerciseProgress) .choices{grid-template-columns:1fr 1fr}body:has(#exerciseProgress) .choice{padding:10px 7px}body:has(#exerciseProgress) .rush-grid{gap:8px}body:has(#exerciseProgress) .rush-symbol{font-size:2rem;padding:8px}body:has(#exerciseProgress) .canvas-actions{flex-wrap:wrap}body:has(#exerciseProgress) .canvas-actions button{min-width:calc(50% - 6px)}body:has(#introducedCount) .stage{grid-template-columns:1fr}.login-header{padding:16px 20px}.login-layout{padding:0 20px}}
@media(max-width:350px){body:has(#exerciseProgress) .topbar{gap:8px}body:has(#exerciseProgress) .brand{width:100%}body:has(#exerciseProgress) .progressbox{gap:6px}body:has(#exerciseProgress) .kana-grid{grid-template-columns:repeat(5,minmax(0,1fr))}body:has(#exerciseProgress) .kana-grid button{padding:6px 2px}body:has(#exerciseProgress) .kana-grid button strong{font-size:1.5rem}}
@media(max-width:350px){#privacyContents{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}