/* v7 — the hero keeps only the mark; the reader has its own section.
   Values from KanjiMeetCardView.tsx, MnemonicStory.tsx, tokens.ts; scaled ~0.87 for the 340px phone. */
/* the hero takes the first screen: headline + mark centred, the loop strip on its floor */
.hero{min-height:calc(100svh - 72px);display:flex;flex-direction:column;justify-content:center;padding-bottom:clamp(28px,4vw,44px)}
.hero>.wrap:first-child{width:100%}
.hero .hero-loop{width:100%;display:grid;grid-template-columns:minmax(0,1fr) 32px minmax(0,1fr) 32px minmax(0,1fr) 32px minmax(0,1fr);align-items:stretch;gap:0 10px;margin-top:clamp(48px,7vw,96px)}
.hl-step{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;margin-top:38px;padding:16px 14px 16px;border-radius:16px;border:1px solid var(--border);background:var(--card);color:var(--ink);text-decoration:none;transition:border-color .2s ease,transform .2s ease}
.hl-step:hover{border-color:var(--navy);transform:translateY(-2px)}
/* number on top, centred; the glyph (drawn with the logo's strokes) under it */
.hl-step .num{position:absolute;top:-38px;left:50%;transform:translateX(-50%);width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--f-ui);font-size:13px;font-weight:700;color:#fff;background:var(--navy)}
.hl-step .tile,.hl-step .glyph-mark{width:36px;height:36px;flex:0 0 36px}
.hl-step b{display:block;font-family:var(--f-head);font-weight:500;font-size:15px;line-height:1.25;margin-top:2px}
.hl-step small{display:block;margin-top:2px;font-size:12px;line-height:1.4;color:var(--muted);text-wrap:pretty;max-width:22ch}
.hl-arrow{height:1.5px;background:var(--border);position:relative;justify-self:stretch;align-self:center;margin-top:38px}
.hl-arrow::after{content:"";position:absolute;right:-1px;top:-3.5px;border-left:7px solid var(--border);border-top:4px solid transparent;border-bottom:4px solid transparent}
/* tablet: still four across, arrows dropped, cards tighter; phones: two across, capped and centred */
@media (max-width:1000px){.hero .hero-loop{grid-template-columns:repeat(4,minmax(0,1fr));gap:0 10px}.hl-arrow{display:none}.hl-step{padding:14px 10px 14px;gap:4px}.hl-step b{font-size:14px}.hl-step small{font-size:11.5px;max-width:none}}
@media (max-width:680px){.hero .hero-loop{grid-template-columns:repeat(2,minmax(0,200px));justify-content:space-evenly;gap:10px 0}.hl-step{margin-top:38px}}
@media (max-width:900px){.hero{min-height:0}}
.hero-vid{justify-content:center;align-items:center;min-height:340px}
.hero-glyph{position:relative;left:auto;top:auto}
@media (max-width:900px){.hero-vid{min-height:0;margin-top:24px;align-items:center}.hero-glyph{left:auto;transform:none}}
/* on a phone the bezel goes: each screen is a flat, full-width panel, not a phone drawn inside a phone */
@media (max-width:560px){
.phone{width:100%;max-width:none;aspect-ratio:auto;height:min(600px,72svh);border:1px solid var(--border);border-radius:20px;box-shadow:0 10px 30px rgba(31,29,32,.08);transform:none!important;margin:0!important}
.phone .status,.phone .home-ind{display:none}
.phone .scr{border-radius:20px}
.loop-visual .phone{height:min(600px,72svh)}
}
/* on a phone the mark steps behind the copy: the disc goes, the strokes sit faint behind the headline */
@media (max-width:900px){
.hero .wrap:first-child{position:relative;display:block}
.hero-copy{position:relative;z-index:1}
.hero-vid{position:absolute;inset:-24px 0 auto auto;width:100%;height:100%;margin:0;pointer-events:none;justify-content:flex-end;align-items:flex-start;z-index:0}
.hero-glyph{width:min(78vw,340px);height:min(78vw,340px);margin-right:-10vw;margin-top:-6vw;opacity:.16}
.hero-glyph::before{display:none}
.hero-glyph .yomidori-mark{width:100%;height:100%}
}
/* the reader's drawer runs under the home indicator, as in the app */
.live-reader .home-ind{background:var(--card)}
/* callouts, pinned to the next thing to tap */
.live-reader .scr{overflow:visible}
.try-tip{position:absolute;z-index:5;display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:999px;background:var(--navy);color:#fff;font-family:var(--f-ui);font-size:12.5px;font-weight:600;white-space:nowrap;box-shadow:0 6px 18px rgba(37,57,86,.28);pointer-events:none;opacity:0;transform:translateY(-4px);transition:opacity .3s ease,transform .3s ease;animation:tip-bob 1.6s ease-in-out infinite}
.try-tip.on{opacity:1;transform:none}
.try-tip::after{content:"";position:absolute;left:14px;bottom:-6px;border-left:6px solid transparent;border-right:6px solid transparent;border-top:7px solid var(--navy)}
.try-tip.up::after{bottom:auto;top:-6px;left:50%;margin-left:-6px;border-top:0;border-bottom:7px solid var(--navy)}
@keyframes tip-bob{0%,100%{translate:0 0}50%{translate:0 -4px}}
/* the three-step guide beside the card; the live step is lit, done steps get a matcha ring */
.mt-steps{list-style:none;margin:28px 0 0;padding:0;max-width:420px}
.mt-steps li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:14px;align-items:start;padding:14px 0;border-top:1.5px solid var(--border);opacity:.42;transition:opacity .35s ease;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mt-steps li:hover{opacity:.75}.mt-steps li:focus-visible{outline:2px solid var(--navy);outline-offset:4px;border-radius:4px}
.mt-steps li:last-child{border-bottom:1.5px solid var(--border)}
.mt-steps li.on{opacity:1}.mt-steps li.done{opacity:.7}
.mt-steps .num{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--f-ui);font-size:13.5px;font-weight:700;color:var(--muted);border:1.5px solid var(--border);transition:background-color .3s ease,border-color .3s ease,color .3s ease}
.mt-steps li.on .num{background:var(--navy);border-color:var(--navy);color:#fff}
.mt-steps li.done .num{border-color:var(--matcha);color:var(--matcha)}
.mt-steps b{display:block;font-family:var(--f-head);font-weight:500;font-size:18px;color:var(--ink);line-height:1.3}
.mt-steps small{display:block;margin-top:3px;font-size:14px;line-height:1.5;color:var(--muted)}
/* focus follows the step: while the glyph is being written (1) or written back (3) the story softens out of the way */
.meet-phone .mt-story{transition:opacity .32s ease,transform .32s ease,filter .5s ease}
#kanji[data-stage="watch"] .mt-body.revealed .mt-story,#kanji[data-stage="write"] .mt-story{filter:blur(2.5px);opacity:.4}
#kanji[data-stage="write"] .mt-story{pointer-events:none}
/* Kanji · Meet ----------------------------------------------------------- */
.meet-phone .sess{background:var(--paper)}
.mt-body{flex:1;min-height:0;padding:0 19px 6px;display:flex;flex-direction:column;overflow:hidden}
.mt-card{margin-top:12px;padding:22px 21px 0;background:var(--card);border:1px solid var(--border);border-radius:16px;display:flex;flex-direction:column;align-items:center}
.mt-slot{position:relative;width:124px;height:124px;align-self:center}
#meetGlyph{display:block;width:100%;height:100%;overflow:visible}
#meetGlyph .bg-guide path{fill:var(--border);opacity:0;transition:opacity .2s ease}
#meetGlyph .bg-ink path{fill:var(--ink);transition:fill .25s ease}
/* TapPartsGlyph: tap a stroke for its part; the selected part in kon, the rest dimmed */
.mt-body.revealed #meetGlyph .bg-ink path{cursor:pointer}
.mt-body.part #meetGlyph .bg-ink path{fill:#c9c3b6}
.mt-body.part #meetGlyph .bg-ink path.lit{fill:var(--navy)}
#meetGlyph .bg-ink{transition:opacity .9s cubic-bezier(.45,0,.55,1)}
.mt-body.guide #meetGlyph .bg-guide path{opacity:1}
.mt-body.tracing #meetGlyph .bg-ink{opacity:0}
/* the finger's strokes land in matcha and dry to ink once the glyph is whole */
.mt-body.writing #meetGlyph .bg-ink{opacity:1;transition:none}
.mt-body.writing #meetGlyph .bg-ink path{fill:var(--matcha)}
.mt-body.dried #meetGlyph .bg-ink path{fill:var(--ink);transition:fill .5s ease}
#meetGlyph .bg-finger{fill:rgba(37,57,86,.2);stroke:rgba(37,57,86,.45);stroke-width:.8;transition:opacity .12s ease}

.mt-card.pulse{animation:mt-pulse .29s ease-out}
@keyframes mt-pulse{0%{transform:scale(1)}31%{transform:scale(1.035)}100%{transform:scale(1)}}
.mt-kw{height:44px;margin-top:14px;display:flex;align-items:center;justify-content:center;font-family:var(--f-head);font-weight:500;font-size:24px;color:var(--matcha);opacity:0;transition:opacity .32s ease}
.mt-body.revealed .mt-kw{opacity:1}
.mt-strip{display:flex;align-self:stretch;margin:14px -21px 0;border-top:1px solid var(--border);opacity:0;pointer-events:none;transition:opacity .32s ease}
.mt-body.revealed .mt-strip{opacity:1;pointer-events:auto}
.mt-strip button{flex:1;padding:11px 0;text-align:center;font-family:var(--f-ui);font-size:12px;font-weight:600;color:var(--muted)}
.mt-strip button+button{border-left:1px solid var(--border)}
.mt-strip button:active{opacity:.6}
/* MnemonicStory: warm surface2 wash, hairline edge, 17/34 prose → 14.5/27 here */
.mt-story{margin-top:12px;padding:14px 15px;background:#efe9dc;border:1px solid var(--border);border-radius:14px;opacity:0;transform:translateY(12px);transition:opacity .32s ease,transform .32s ease}
.mt-body.revealed .mt-story{opacity:1;transform:none}
.mt-sentence{margin:0;font-size:14.5px;line-height:27px;font-weight:500;color:var(--ink)}
.mt-sentence[hidden]{display:none}
.phone .mt-chip{display:inline-flex;align-items:center;gap:3px;height:21px;padding:0 6px;border-radius:7px;border:1px solid transparent;background:rgba(37,57,86,.1);color:var(--navy);vertical-align:-4px;cursor:pointer;font:inherit;line-height:1}
.phone .mt-chip i{font-style:normal;font-family:var(--f-mincho);font-size:15px;font-weight:600}
.phone .mt-chip b{font-size:13.5px;font-weight:700}
.phone .mt-chip.on{background:rgba(37,57,86,.2);border-color:var(--navy)}
.mt-token{color:var(--matcha);font-weight:700}
.mt-panel{cursor:pointer}
.mt-panel[hidden]{display:none}
.mt-panel-head{display:flex;align-items:baseline;gap:10px}
.mt-panel-k{font-family:var(--f-mincho);font-size:28px;line-height:1;color:var(--navy)}
.mt-panel-kw{font-family:var(--f-head);font-size:15px;color:var(--ink)}
.mt-panel .mt-sentence{margin-top:8px}
.mt-panel-close{display:block;margin-top:8px;font-size:11px;color:var(--faint)}
/* what you can read */
.worlds .lede{max-width:560px}

/* Home · the daily goal (ReviewGoalCard.tsx) ------------------------------ */
.home-phone .hm{background:var(--paper);padding:6px 16px 0;overflow:hidden}
.hm-title{display:flex;align-items:baseline;gap:8px;padding:4px 2px 10px}
.hm-title b{font-family:var(--f-head);font-weight:500;font-size:24px;color:var(--ink)}
.hm-title span{font-size:13px;color:var(--muted)}
.home-phone .week{margin:0 0 12px;padding:0 4px}
.home-phone .week small{font-size:10.5px}
.goal{background:var(--card-raised);border:1px solid var(--border);border-radius:20px;padding:18px 16px 16px;font-family:var(--f-ui);color:var(--ink)}
.goal .goal-head{display:flex;align-items:center;gap:16px}
.goal .ring{position:relative;width:96px;height:96px;flex-shrink:0}
.goal .ring svg{display:block}
#ringArc{transition:stroke-dasharray .5s cubic-bezier(.2,.7,.2,1)}
.goal .ring-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.goal .ring-c b{font-family:var(--f-head);font-weight:500;font-size:32px;line-height:36px;color:var(--ink);font-variant-numeric:tabular-nums}
.goal .ring-c small{font-size:11px;color:var(--muted);margin-top:4px}
.goal .ring-tick{position:absolute;left:26px;top:26px;opacity:0;transform:scale(.6);transition:opacity .3s ease,transform .4s cubic-bezier(.2,.7,.2,1)}
.goal.done .ring-c{opacity:0}.goal.done .ring-tick{opacity:1;transform:none}
.goal .goal-text{flex:1;min-width:0}
.goal .eb{font-size:10.5px;letter-spacing:1.5px;font-weight:700;color:var(--navy)}
.goal .ttl{margin:4px 0 3px;font-family:var(--f-head);font-weight:500;font-size:21px;color:var(--ink)}
.goal.done .ttl{color:var(--matcha-ink)}
.goal .sub{font-size:13px;line-height:18px;color:var(--muted)}
.goal .split{display:flex;gap:10px;margin-top:16px}
.goal .split[hidden]{display:none}
.ptile{flex:1;display:flex;flex-direction:column;background:var(--card-tint);border-radius:14px;padding:12px}
.ptile .pg{font-family:var(--f-mincho);font-size:20px;line-height:22px;color:var(--navy)}
.ptile .pl{font-size:12px;color:var(--muted);margin-top:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ptile .pn{font-family:var(--f-head);font-size:18px;color:var(--ink);font-variant-numeric:tabular-nums}
.ptile .bar{display:block;height:6px;border-radius:3px;background:var(--border);margin-top:8px;overflow:hidden}
.ptile .bar i{display:block;height:100%;background:var(--matcha);border-radius:3px;transition:width .5s cubic-bezier(.2,.7,.2,1)}
.goal .quote{margin-top:14px;display:flex;flex-direction:column;gap:2px}
.goal .quote[hidden]{display:none}
.goal .qjp{font-family:var(--f-jp);font-size:13.5px;color:var(--ink)}
.goal .qen{font-size:12px;color:var(--muted)}
.phone .goal .cont{display:block;width:100%;margin-top:16px;padding:15px;border-radius:14px;background:var(--navy);color:#faf8f5;text-align:center;font-family:var(--f-ui);font-size:16px;font-weight:700;transition:opacity .3s ease}
.phone .goal .cont:active{opacity:.75}
.goal.done .cont{display:none}
.home-phone .p-cont{display:flex;gap:10px;align-items:center;margin:12px 0 0;padding:10px;background:var(--card-raised);border:1px solid var(--border);border-radius:14px;box-shadow:none}
.home-phone .p-cont .cov{width:44px;height:58px;flex:0 0 44px;border-radius:7px;background:var(--navy);color:rgba(255,255,255,.9);display:flex;align-items:flex-end;padding:6px;font-family:var(--f-mincho);font-size:11px;line-height:1.15}
.home-phone .p-cont>div{flex:1;min-width:0}
.home-phone .p-cont b{display:block;font-family:var(--f-head);font-size:15px;font-weight:500;color:var(--ink);margin-top:2px}
.home-phone .p-cont .eb{font-size:10px;letter-spacing:1.3px;color:var(--muted);font-weight:700}
.home-phone .p-cont .sub{display:block;font-size:12px;color:var(--muted);margin-top:2px}

/* Read · import sheet, OCR, transcription, the reader's extra bars ------------- */
.phone .view[hidden]{display:none}
/* the import sheet (app/import/index.tsx): a bottom sheet over the dimmed library */
.v-imp{background:var(--paper);position:relative;justify-content:flex-end}
.lib-behind{position:absolute;inset:0;padding:14px 16px}
.lib-t{font-family:var(--f-head);font-weight:500;font-size:24px;color:var(--ink);padding:4px 2px 12px}
.lib-row{display:flex;align-items:center;gap:10px;padding:10px;background:var(--card);border:1px solid var(--border);border-radius:14px;margin-bottom:8px}
.lib-row .cov{width:40px;height:52px;border-radius:7px;background:var(--navy);color:rgba(255,255,255,.9);display:flex;align-items:flex-end;padding:5px;font-family:var(--f-mincho);font-size:10px;line-height:1.15}
.lib-row .cov.alt{background:#7a5c8e}
.lib-row b{display:block;font-family:var(--f-head);font-size:14px;font-weight:500;color:var(--ink)}
.lib-row small{font-size:11.5px;color:var(--muted)}
.v-imp .backdrop{position:absolute;inset:0;background:rgba(20,24,30,.42)}
.v-imp .sheet{position:relative;background:var(--paper);border-radius:24px 24px 0 0;padding:10px 20px 14px}
.v-imp .handle{width:38px;height:4px;border-radius:2px;background:var(--hair);margin:0 auto 12px}
.sheet-hero{position:relative;margin-bottom:16px;overflow:hidden}
.sheet-hero .wm{position:absolute;right:-10px;top:-14px;font-family:var(--f-mincho);font-size:64px;letter-spacing:-3px;line-height:1;color:rgba(30,58,95,.06);pointer-events:none}
.sheet-h{font-family:var(--f-mincho);font-weight:600;font-size:21px;line-height:26px;letter-spacing:-.4px;color:var(--ink)}
.phone .imp-row{display:flex;align-items:center;gap:12px;padding:12px;background:var(--card);border:1px solid var(--border);border-radius:16px;text-align:left;width:100%;cursor:pointer;margin-bottom:8px}
.phone .imp-row:last-child{margin-bottom:0}
.phone .imp-row:active,.phone .imp-row.press{opacity:.7}
.imp-row .g{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-family:var(--f-mincho);font-weight:500;font-size:21px;flex-shrink:0}
.imp-row .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.imp-row b{font-family:var(--f-ui);font-size:14px;font-weight:700;color:var(--ink)}
.imp-row small{font-size:11.5px;line-height:15px;color:var(--muted)}
.imp-row .chev{color:var(--faint);font-size:18px}
/* a photo is a page (PairedReader): the image in the reader, ML Kit boxes hairline, the tapped one firm */
.page{flex:1;min-height:0;display:flex;flex-direction:column;padding:8px 12px 0}
.page[hidden]{display:none}
.page-in{position:relative;flex:1;min-height:0;display:flex;justify-content:center}
.page-img{position:relative;height:100%;max-width:100%;aspect-ratio:7/9}
.page-in img{display:block;width:100%;height:100%;object-fit:cover;border-radius:6px;border:1px solid var(--border)}
.boxes{position:absolute;inset:0}
.boxes i{position:absolute;border:1px solid rgba(30,58,95,.25);border-radius:6px;cursor:pointer;opacity:0;transition:border-color .15s ease,opacity .3s ease}
.page.boxed .boxes i{opacity:1}
.boxes i.sel{border:2px solid rgba(30,58,95,.55);border-radius:8px}
.boxes i:hover{border-color:rgba(30,58,95,.45)}
.page-hint{text-align:center;font-family:var(--f-ui);font-size:11.5px;color:var(--muted);padding:8px 0 2px}
.page-hint[hidden]{display:none}
.live-reader.photo .rd-text{flex:0 0 auto;padding-top:4px;padding-bottom:6px}
.live-reader.photo .rd-text p{font-size:15px;line-height:1.9;margin:0}
/* transcription beat */
.v-stt{background:var(--paper);align-items:center;justify-content:center;padding:0 24px}
.stt-card{width:100%;display:flex;flex-direction:column;align-items:center;gap:4px;padding:26px 20px 22px;background:var(--card);border:1px solid var(--border);border-radius:18px}
.stt-card .g{width:52px;height:52px;border-radius:14px;background:var(--navy-soft,#e7ebf2);color:var(--navy);display:flex;align-items:center;justify-content:center;font-family:var(--f-mincho);font-size:26px;margin-bottom:8px}
.stt-card b{font-family:var(--f-head);font-weight:500;font-size:17px;color:var(--ink)}
.stt-card small{font-size:12px;color:var(--muted)}
.stt-bar{display:block;width:100%;height:4px;border-radius:2px;background:var(--border);margin-top:18px;overflow:hidden}
.stt-bar i{display:block;height:100%;width:0;background:var(--navy);border-radius:2px}
.v-stt.run .stt-bar i{animation:stt 2.1s cubic-bezier(.3,.6,.3,1) .15s forwards}
@keyframes stt{to{width:100%}}
.stt-lbl{margin-top:10px;font-family:var(--f-ui);font-size:12px;font-weight:600;color:var(--navy)}
/* reader: podcast player row, web reader bar */
.player{display:flex;align-items:center;gap:10px;padding:8px 16px 10px;border-bottom:1px solid var(--border);font-family:var(--f-ui);font-size:11px;color:var(--muted)}
.player[hidden]{display:none}
.player .trk{flex:1;height:3px;border-radius:2px;background:var(--border);position:relative}
.player .trk i{position:absolute;left:0;top:-3px;width:9px;height:9px;border-radius:50%;background:var(--muted)}
.player .hp{width:16px;height:12px;border:2px solid var(--muted);border-bottom:0;border-radius:8px 8px 0 0;position:relative}
.player .hp::before,.player .hp::after{content:"";position:absolute;bottom:-5px;width:4px;height:7px;border-radius:2px;background:var(--muted)}
.player .hp::before{left:-2px}.player .hp::after{right:-2px}
.player .pl{width:30px;height:30px;border-radius:50%;background:var(--navy);position:relative}
.player .pl::after{content:"";position:absolute;left:12px;top:9px;border-left:9px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent}
.player{cursor:pointer}
.player.on .pl::after{left:10px;top:10px;width:10px;height:10px;border:0;border-left:3px solid #fff;border-right:3px solid #fff}
.player .trk i{transition:left .6s linear}
/* the line being spoken, as the reader highlights it while audio plays */
.live-reader .rd-text p.now{background:rgba(37,57,86,.06);border-radius:4px}
.urlbar{display:flex;align-items:center;gap:8px;margin:6px 12px 4px;padding:7px 12px;background:var(--card);border:1px solid var(--border);border-radius:10px;font-family:var(--f-ui);font-size:12px;color:var(--muted)}
.urlbar[hidden]{display:none}
.urlbar span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.urlbar b{font-weight:700;color:var(--navy);font-size:12px}

/* Review · the session cards (VocabRecallCardView, the drawing card, GradingBar) — scaled ~0.87 */
.rv-word,.rv-kanji{background:var(--paper)}
.rc-body{flex:1;min-height:0;display:flex;flex-direction:column;padding:0 19px;overflow:hidden}
.rc-card{margin-top:12px;padding:26px 21px;background:var(--card);border:1px solid var(--border);border-radius:16px;display:flex;flex-direction:column;align-items:center;cursor:pointer}
.rc-ruby{height:21px;font-family:var(--f-jp);font-size:14px;color:var(--muted);opacity:0}
.rc-word{font-family:var(--f-jp);font-size:40px;font-weight:500;line-height:1.15;color:var(--ink)}
.rc-slot{min-height:40px;margin-top:14px;display:flex;align-items:center;justify-content:center}
.rc-mean{display:none;font-family:var(--f-head);font-weight:500;font-size:22px;color:var(--matcha)}
.rv-word.revealed .rc-ruby{opacity:1}.rv-word.revealed .rc-slot .apill{display:none}.rv-word.revealed .rc-mean{display:block}.rv-word.revealed .rc-card{cursor:default}
.rc-sent{margin-top:14px;padding:14px 15px;background:#efe9dc;border:1px solid var(--border);border-radius:14px}
.rc-sent p{margin:0;font-family:var(--f-jp);font-size:15px;line-height:28px;color:var(--ink)}
.rc-blank{color:#9a958c;text-decoration:underline}.rc-fill{display:none;font-weight:700}
.rv-word.revealed .rc-blank{display:none}.rv-word.revealed .rc-fill{display:inline}
.rc-en{display:none;margin-top:8px;font-size:12.5px;line-height:18px;color:var(--muted)}
.rv-word.revealed .rc-en{display:block}
.rc-src{display:block;margin-top:7px;padding:0 4px;text-align:right;font-size:11px;color:var(--faint)}
.rc-hint{flex:1;display:flex;align-items:center;justify-content:center;min-height:40px;font-family:var(--f-ui);font-size:12px;letter-spacing:.4px;color:var(--faint)}
.rv-word.revealed .rc-hint{visibility:hidden}
.rc-foot{flex-shrink:0;opacity:0;pointer-events:none;transition:opacity .25s ease}
.rv-word.revealed .rc-foot,.rv-kanji.drawn .rc-foot{opacity:1;pointer-events:auto}
.phone .rc-know{display:block;margin:0 14px 8px;padding:10px;width:calc(100% - 28px);border:1.2px solid var(--border);border-radius:12px;text-align:center;font-family:var(--f-ui);font-size:12px;font-weight:700;color:var(--muted)}
.grade3{display:flex;gap:7px;padding:6px 14px 16px}
.phone .grade3 button{flex:1;padding:12px 4px;border-radius:12px;border:1px solid transparent;display:flex;flex-direction:column;align-items:center;font-family:var(--f-ui);font-size:12.5px;font-weight:700;transition:transform .15s ease,border-color .15s ease}
.phone .grade3 button small{font-family:ui-monospace,Menlo,monospace;font-size:9px;font-weight:600;margin-top:2px;opacity:.7}
.phone .grade3 .g-forgot{background:#efe6e3;color:#a85055}.phone .grade3 .g-almost{background:#efe9dc;color:var(--ink)}.phone .grade3 .g-got{background:#e4ece8;color:var(--matcha)}
.phone .grade3 button.picked{border-color:currentColor;transform:scale(1.04)}
/* kanji · drawing (KanjiDrawingCardView): keyword → pill → clean canvas → message → hint ladder; footer Reveal stroke | Show me */
.rk-draw{align-items:center}
.rc-body[hidden]{display:none}
.rk-draw .apill{white-space:nowrap}
.rk-kw{margin-top:14px;font-family:var(--f-head);font-weight:500;font-size:26px;color:var(--matcha)}
.rk-draw .rc-slot{margin-top:6px;min-height:34px}
.rk-canvas{position:relative;width:200px;height:200px;margin-top:10px;border-radius:16px;border:1px solid var(--border);background:var(--card);cursor:pointer}
#rkGlyph{position:absolute;inset:6%;width:88%;height:88%;overflow:visible}
#rkGlyph .bg-guide path{fill:transparent}
#rkGlyph .bg-ink path{fill:var(--matcha);transition:fill .5s ease}
.rv-kanji.drawn #rkGlyph .bg-ink path{fill:var(--ink)}
#rkGlyph .bg-finger{fill:rgba(37,57,86,.2);stroke:rgba(37,57,86,.45);stroke-width:.8}
.rk-msg{display:block;min-height:18px;margin-top:10px;font-family:var(--f-ui);font-size:12px;color:var(--muted)}
.phone .rk-hint{align-self:center;margin-top:8px;padding:8px 10px;border:0;background:none;white-space:nowrap;text-align:center;font-family:var(--f-ui);font-size:13px;font-weight:600;color:var(--muted)}
.rk-story{align-self:stretch;margin-top:10px;opacity:1;transform:none;padding:10px 12px}
.rk-story .mt-sentence{font-size:13px;line-height:24px}
.rk-draw .rk-canvas{flex-shrink:0}
.rk-story[hidden]{display:none}
/* rung 1: the prose withheld as skeleton pills, the part chips left legible (MnemonicStory redactProse) */
.rk-story.redact .rd{color:transparent;background:#ddd5c3;border-radius:5.5px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.rk-story.redact .mt-token{color:transparent;background:#c9d3b7;border-radius:5.5px}
.rk-foot{flex-shrink:0;display:flex;gap:10px;padding:8px 14px 12px}
.rk-foot[hidden]{display:none}
.phone .rk-ghost{flex:1;padding:12px;white-space:nowrap;border:1.2px solid var(--border);border-radius:12px;text-align:center;font-family:var(--f-ui);font-size:13px;font-weight:700;color:var(--muted)}
.phone .rk-primary{flex:1;padding:13px;border-radius:12px;background:var(--navy);text-align:center;font-family:var(--f-ui);font-size:14.5px;font-weight:700;color:#faf8f5}
.rv-kanji.drawn .rk-ghost{opacity:.4;pointer-events:none}
/* reveal: the glyph, the keyword, the story, the words it lives in */
.rk-reveal[hidden]{display:none}
.rk-hero{display:flex;flex-direction:column;align-items:center;margin-top:14px}
#rkGlyph2{width:130px;height:130px;overflow:visible}
#rkGlyph2 .bg-guide path{fill:transparent}#rkGlyph2 .bg-ink path{fill:var(--ink)}
.rk-kw2{margin-top:8px;font-family:var(--f-head);font-weight:500;font-size:24px;color:var(--matcha)}
.rk-reveal .mt-story{opacity:1;transform:none}
.rk-reveal .mt-chip{cursor:default}
.rk-words{display:flex;align-items:center;gap:10px;margin-top:12px;padding:10px 12px;background:var(--card);border:1px solid var(--border);border-radius:14px}
.rk-read{font-family:var(--f-jp);font-size:12px;color:var(--muted);padding-right:10px;border-right:1px solid var(--border);white-space:nowrap}
.rk-words{gap:14px}
.rk-word b{display:block;font-family:var(--f-jp);font-size:16px;font-weight:500;color:var(--ink)}
.rk-word small{display:block;font-size:11px;color:var(--muted)}

/* the alphabet card wears one of each */
.world .tiles{display:flex;gap:6px;align-items:center}
.world .tiles .glyph-mark{width:60px;height:60px;flex:0 0 60px;margin-top:2px}

/* step 1: only the goal card is the point; the rest of Home softens out */
#words .hm>*{transition:filter .5s ease,opacity .5s ease}
#words[data-stage="today"] .hm>:not(.goal){filter:blur(2.5px);opacity:.4;pointer-events:none}

/* pillar colours: each section's kicker, step numbers and glyph share one hue */
:root{--hanada:#4a7c9b}

.mt-steps li.on b{color:var(--ink)}

/* past the goal: new material as two quiet links where the button was */
.goal .more{display:flex;justify-content:center;gap:22px;margin-top:14px;padding-top:12px;border-top:1px solid var(--border);font-family:var(--f-ui);font-size:13.5px;font-weight:700;color:var(--navy)}
.goal .more[hidden]{display:none}

.h2 .hue{font-style:normal;color:var(--sec,var(--navy))}

/* each section: its kicker text and glyph in its hue, one headline phrase, and a soft disc of the same hue behind */
.sec .lbl{color:inherit}.worlds .lbl{color:#fff}
.sec .lbl .glyph-mark .ink path,.worlds .lbl .glyph-mark .ink path{stroke:var(--sec,var(--navy))}
#start .world.photo{--wc:var(--flag-red)}
#start::before{background:var(--accent-on-dark)}
.sec[style*="--sec"]{position:relative;overflow:hidden}
.sec[style*="--sec"]::before{content:"";position:absolute;width:clamp(320px,38vw,520px);aspect-ratio:1;border-radius:50%;background:var(--sec);opacity:.07;pointer-events:none;z-index:0;right:-8%;top:8%}
.sec[style*="--sec"]:nth-of-type(even)::before{right:auto;left:-10%;top:auto;bottom:6%}
#words::before{right:-8%;left:auto;top:auto;bottom:-6%}
.sec[style*="--sec"]>.wrap{position:relative;z-index:1}

/* import rows: the glyph in strokes, like every kicker on the page — no pastel wash */
.imp-row .tile,.imp-row .glyph-mark{width:42px;height:42px;flex:0 0 42px;border-radius:12px;background:var(--card-tint)!important;border:1px solid var(--border)}
.imp-row .glyph-mark svg{width:30px;height:30px}
.imp-row .glyph-mark .ink path{stroke:var(--navy)}
.stt-card .tile,.stt-card .glyph-mark{width:52px;height:52px;border-radius:14px;background:var(--card-tint)!important;border:1px solid var(--border);margin-bottom:8px}
.stt-card .glyph-mark svg{width:36px;height:36px}
.stt-card .glyph-mark .ink path{stroke:var(--navy)}

.hl-step b{color:var(--ink)}

/* no snap: the page scrolls freely; sections reveal as they arrive (the .rv observer) and anchors tween */
html{scroll-behavior:smooth;scroll-padding-top:72px}
/* the loop strip: the wrapper reveals after the mark has landed, then the four cards flow in left to right */
.hero .hero-loop.rv{transition-delay:0s}
.hero .hero-loop .hl-step{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.2,1),border-color .2s ease}
.hero .hero-loop.in .hl-step{opacity:1;transform:none}
.hero .hero-loop.in .hl-step:nth-of-type(1){transition-delay:3.3s}
.hero .hero-loop.in .hl-step:nth-of-type(2){transition-delay:3.45s}
.hero .hero-loop.in .hl-step:nth-of-type(3){transition-delay:3.6s}
.hero .hero-loop.in .hl-step:nth-of-type(4){transition-delay:3.75s}
.hero .hero-loop.in .hl-step:hover{transition-delay:0s;transform:translateY(-2px)}
.hero .hero-loop .hl-arrow{opacity:0;transition:opacity .4s ease}
.hero .hero-loop.in .hl-arrow{opacity:1;transition-delay:3.9s}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* kanji: phone left, copy right — the page alternates */
@media (min-width:901px){#kanji .two .copy{order:2}#kanji .two .visual{order:1}}

/* a fingertip that lands where the demo taps (the screen is its frame, so the drawer's save button gets one too) */
.phone .scr{position:relative}
.ghost-tap{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:rgba(37,57,86,.18);border:1.5px solid rgba(37,57,86,.5);pointer-events:none;opacity:0;transform:scale(.6);transition:opacity .45s ease,transform .5s cubic-bezier(.2,.7,.2,1);z-index:6}
.ghost-tap.down{transition-duration:.2s}
/* a view arriving in the reader phone fades in rather than snapping */
@keyframes viewIn{from{opacity:0}to{opacity:1}}
.phone .view.arrive{animation:viewIn .55s ease}
.ghost-tap.on{opacity:1;transform:scale(1)}
.ghost-tap.down{transform:scale(.8);background:rgba(37,57,86,.3)}
.ghost-tap.hold{transition-duration:.9s;transform:scale(1.15);border-color:rgba(37,57,86,.75)}

/* footer social: small, navy, red on hover */
.ftr .social{display:flex;gap:14px;margin-top:18px}
.ftr .social a{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;color:var(--navy);border:1px solid var(--border);transition:color .2s ease,border-color .2s ease}
.ftr .social a:hover{color:var(--flag-red);border-color:var(--flag-red)}
.ftr .base a{color:var(--navy);text-decoration:none;border-bottom:1px solid var(--border)}.ftr .base a:hover{color:var(--flag-red);border-color:var(--flag-red)}

/* the section glyphs take their section's colour: the kicker tile in each section, and hero steps 2–4 (step 1 stays navy) */
.sec .lbl .glyph-mark .ink path{stroke:var(--sec,var(--navy))}
.hl-step[data-jump="read:tap"] .glyph-mark .ink path{stroke:var(--flag-red)}
.hl-step[data-jump="kanji:watch"] .glyph-mark .ink path{stroke:var(--matcha-ink)}
.hl-step[data-jump="words"] .glyph-mark .ink path{stroke:#9a7b3a}