/* Phone demo — the app's real screens on the app's T tokens. */
.phone{width:340px;max-width:100%;aspect-ratio:340/704;background:var(--paper);border:8px solid #1f1d20;border-radius:44px;box-shadow:0 30px 70px rgba(31,29,32,.22),0 8px 20px rgba(31,29,32,.1);overflow:hidden;display:flex;flex-direction:column;position:relative;font-family:var(--f-ui);color:var(--ink);font-size:12px;line-height:1.35;text-wrap:initial;user-select:none;-webkit-user-select:none}
.phone .status{height:34px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 22px;font-size:12px;font-weight:600;color:#1d1b20;position:relative}
.phone .status::after{content:"";position:absolute;left:50%;top:9px;width:11px;height:11px;border-radius:50%;background:#0e0c10;transform:translateX(-50%)}
.phone .status i{display:inline-block;width:20px;height:9px;border:1.5px solid #1d1b20;border-radius:3px;position:relative}
.phone .status i::after{content:"";position:absolute;left:1px;top:1px;bottom:1px;width:70%;background:#1d1b20;border-radius:1px}
.phone .scr{flex:1;min-height:0;position:relative;overflow:hidden}
.phone .view{position:absolute;inset:0;display:flex;flex-direction:column;animation:pv .3s cubic-bezier(.2,.7,.2,1)}
@keyframes pv{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.phone .home-ind{height:20px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.phone .home-ind::after{content:"";width:110px;height:4px;border-radius:2px;background:#1d1b20}
.phone button{border:0;background:none;padding:0;color:inherit;cursor:pointer;font:inherit;text-align:left}
.phone .press{opacity:.6}
.phone .tile{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;font-family:var(--f-mincho);font-weight:500;border-radius:10px}
.phone .t-soft{background:var(--navy-soft);color:var(--navy)}
.phone .eb{font-size:9.5px;font-weight:700;letter-spacing:1.3px;color:var(--muted)}
.phone .bar{display:block;height:4px;background:var(--border);border-radius:2px;margin-top:7px;overflow:hidden}.phone .bar i{display:block;height:100%;background:var(--matcha);border-radius:2px}
/* tabs — glyph + label, navy when active */
.tabs{border-top:1px solid var(--border);background:var(--card);display:flex;padding:7px 4px 5px;flex-shrink:0}
.tabs button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:9px;font-weight:600;color:var(--muted)}
.tabs button i{font-style:normal;font-family:var(--f-mincho);font-size:19px;line-height:1.1}
.tabs .on{color:var(--navy)}
/* band header (Home + tabs) */
.p-band{background:var(--band);border-bottom:1px solid var(--hair);border-radius:0 0 24px 24px;padding:12px 18px 18px;flex-shrink:0}
.greet-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.greet{font-family:var(--f-head);font-size:19px;color:var(--ink);letter-spacing:.2px}
.streak{font-size:11.5px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.week-h{display:flex;justify-content:space-between;margin:12px 0 7px;font-size:10.5px;font-weight:600;color:var(--muted)}.week-h .door{font-weight:400;color:var(--faint)}
.week{display:flex;justify-content:space-between}
.week div{width:27px;display:flex;flex-direction:column;align-items:center;gap:4px}
.week .circ{width:27px;height:27px;border-radius:50%;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center}
.week .circ.cleared{background:var(--matcha);border-color:var(--matcha)}.week .circ.rest{border-style:dashed;border-color:var(--faint)}.week .circ.today{border:2px solid var(--navy)}
.week small{font-size:9.5px;font-weight:600;letter-spacing:.4px;color:var(--faint)}.week small.td{color:var(--navy)}
.tab-title{display:flex;justify-content:space-between;align-items:baseline;margin-top:6px}
.tab-title>span:first-child{font-family:var(--f-head);font-size:24px;color:var(--ink)}
.pill-sm{font-size:11px;font-weight:600;padding:5px 10px;border-radius:999px;background:var(--card);border:1px solid var(--border);color:var(--ink)}
.p-lbl{font-size:11px;color:var(--muted)}
.p-body{padding:16px 18px 8px;flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column}
/* Home body */
.today-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.today{font-family:var(--f-head);font-size:22px;color:var(--ink)}
.gs-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;background:var(--matcha-soft);color:var(--matcha-ink);font-size:10.5px;font-weight:700}.gs-pill b{font-family:ui-monospace,Menlo,monospace;font-size:10px}
.goal{position:relative;background:var(--card-raised);border:1px solid var(--border);border-radius:18px;padding:14px 14px 13px}
.goal .gear{position:absolute;top:9px;right:9px;color:var(--faint)}
.goal-head{display:flex;align-items:center;gap:13px}
.ring{position:relative;width:96px;height:96px;flex-shrink:0;transform:scale(.86);margin:-7px}
.ring-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring-c b{font-family:var(--f-head);font-weight:500;font-size:30px;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}.ring-c small{font-size:10.5px;color:var(--muted);margin-top:3px}
.goal-text{flex:1;min-width:0}.goal-text .eb{color:var(--navy)}
.goal-text .ttl{font-family:var(--f-head);font-size:18px;color:var(--ink);margin:3px 0 2px}.goal-text .ttl.ok{color:var(--matcha-ink)}
.goal-text .sub{font-size:11.5px;color:var(--muted)}
.split{display:flex;gap:8px;margin-top:12px}
.ptile{flex:1;background:var(--card-tint);border-radius:12px;padding:10px;display:flex;flex-direction:column}
.ptile .g{font-family:var(--f-mincho);font-size:18px;color:var(--navy);line-height:1.1}
.ptile small{font-size:10.5px;color:var(--muted);margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ptile b{font-family:var(--f-head);font-weight:500;font-size:15px;color:var(--ink);font-variant-numeric:tabular-nums}
.ptile .bar{height:5px;margin-top:6px}
.goal-btn{display:block;width:100%;margin-top:12px;background:var(--navy);color:#fff;border-radius:12px;padding:12px;text-align:center;font-size:14px;font-weight:700;transition:opacity .15s}
.goal-btn.quiet{background:transparent;border:1.5px solid var(--navy);color:var(--navy)}
.quote{margin-top:12px}.quote .jp{font-family:var(--f-jp);font-size:12px;color:var(--ink)}.quote .en{font-size:11px;color:var(--muted);margin-top:1px}
.cont{display:flex;align-items:center;gap:11px;width:100%;margin-top:10px;background:var(--card-raised);border:1px solid var(--border);border-radius:16px;padding:10px}
.cont .cov{width:42px;height:54px;border-radius:7px;background:var(--navy);color:#fff;font-family:var(--f-mincho);font-size:11px;line-height:1.05;display:flex;align-items:center;justify-content:center;text-align:center;flex-shrink:0}
.cont>div{flex:1;min-width:0}.cont .t{font-family:var(--f-jp);font-size:14px;color:var(--ink);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cont .s{font-size:11px;color:var(--muted);margin-top:1px}
.cont .chev{color:var(--faint);font-size:18px}
.find{margin-top:auto;text-align:right;font-size:11.5px;font-weight:700;color:var(--navy);padding:6px 0 2px}
/* Library / Words / Kanji */
.chips{display:flex;gap:5px;overflow:hidden;margin:12px 0 10px}
.chips span{padding:5px 10px;border-radius:999px;border:1px solid var(--border);background:var(--card);font-size:10px;font-weight:600;white-space:nowrap}
.chips span:first-child{background:var(--navy);color:#fff;border-color:var(--navy)}
.p-row{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:9px 11px;margin-bottom:7px;width:100%}
.p-row .tile{width:36px;height:36px;font-size:18px}
.p-row>div{flex:1;min-width:0}
.p-row em{display:block;font-style:normal;font-size:9px;font-weight:700}
.p-row b{display:block;font-family:var(--f-jp);font-size:12px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-row small{display:block;font-size:10px;color:var(--muted)}.p-row .go{color:var(--faint);font-size:13px}
.wgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.wcard{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:10px 11px;animation:pv .35s}
.wcard.new{border-color:#c9d4ab;background:#ecf0dd}
.wcard b{display:block;font-family:var(--f-jp);font-size:16px;font-weight:700;color:var(--ink)}
.wcard small{display:block;font-family:var(--f-jp);font-size:10px;color:var(--muted);min-height:13px}
.wcard em{display:block;font-style:normal;font-size:10.5px;color:var(--text);margin-top:3px}
.wcard .st{display:inline-block;margin-top:6px;font-size:9px;font-weight:600;padding:2px 7px;border-radius:999px;background:var(--card-tint);color:var(--muted)}
.wcard.new .st{background:#e2e9cb;color:#43532a}
.legend{display:flex;gap:12px;margin:12px 0 0;font-size:10px;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:4px}.legend i{width:10px;height:10px;border-radius:3px;border:1.5px solid}
.dex{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-top:8px}
.dex i{font-style:normal;aspect-ratio:1;border-radius:8px;display:flex;align-items:center;justify-content:center;font-family:var(--f-mincho);font-size:17px;border:1px solid;transition:background .4s,border-color .4s}
.dex .s0{background:#f4ecdd;border-color:#ddd3bf;color:var(--ink)}.dex .s1{background:#ecf0dd;border-color:#c9d4ab;color:var(--ink)}.dex .s2{background:#e2e9cb;border-color:#a9bb80;color:#43532a}.dex .s3{background:var(--card);border-color:var(--hair);color:#bdb6a6}
/* Reader */
.rtb{display:flex;align-items:center;padding:6px 8px;gap:4px;flex-shrink:0}
.rtb button,.rtb .ic{width:36px;height:36px;display:flex;align-items:center;justify-content:center;color:var(--text)}
.rtb .c{flex:1;text-align:center;min-width:0}
.rtb .t{font-family:var(--f-jp);font-size:13px;font-weight:700;color:var(--text);display:inline-flex;align-items:center;gap:6px}
.rtb .m{font-size:10.5px;font-weight:500;color:var(--muted)}
.coach{margin:4px 14px 0;padding:8px 12px;border-radius:10px;background:var(--matcha-soft);color:var(--matcha-ink);font-size:11.5px;font-weight:600;text-align:center;animation:pv .3s}
.rd-text{padding:14px 20px 0;font-family:var(--f-jp);font-size:16px;line-height:2;color:var(--ink);flex:1;min-height:0;overflow:hidden}
.rd-text p{margin:0 0 10px}
.w{cursor:pointer;border-radius:3px;padding:1px 0}
.w.hi{background:rgba(255,183,77,.28)}.w.sv{background:rgba(255,213,79,.22)}
.drawer{background:var(--card);border-top:1px solid var(--border);flex-shrink:0;animation:sheet .28s cubic-bezier(.2,.7,.2,1)}
@keyframes sheet{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}
.wb{padding:12px 16px 6px}
.wb-row{display:flex;align-items:center;gap:10px}
.wb-left{flex:1;display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;min-width:0}
.wb-word{font-family:var(--f-jp);font-size:20px;font-weight:700;color:var(--ink);letter-spacing:.2px}.wb-read{font-family:var(--f-jp);font-size:13px;color:var(--muted)}
.bm{display:flex;align-items:center;gap:5px;padding:5px 7px;border-radius:9px;color:var(--navy);transition:opacity .15s}
.bm.saved{background:var(--matcha-soft);color:var(--matcha)}.bm span{font-size:10.5px;font-weight:600;color:var(--matcha-ink);letter-spacing:.2px}
.wb-mean{font-size:12.5px;line-height:1.45;color:var(--muted);margin-top:3px}
.wb-dots{display:flex;align-items:center;justify-content:center;gap:5px;padding-top:8px}
.wb-dots i{width:5px;height:5px;border-radius:3px;background:var(--faint)}.wb-dots i.on{width:15px;background:var(--navy)}.wb-dots span{font-size:9.5px;color:var(--muted);margin-left:6px;opacity:.75}
.ch-prog{height:3px;background:var(--border)}.ch-prog i{display:block;height:100%;background:var(--navy)}
/* Session shell */
.sess{background:var(--paper)}
.ss-top{display:flex;align-items:center;padding:6px 14px 4px;gap:8px;flex-shrink:0}
.ss-top button,.ss-top .ic{width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:var(--ink)}
.ss-top .ic{color:var(--faint)}
.ss-top .cnt{flex:1;text-align:center;font-family:ui-monospace,Menlo,monospace;font-size:11px;font-weight:600;color:var(--muted)}
.ss-prog{margin:0 16px 8px;height:2px;background:var(--border);border-radius:1px;overflow:hidden;flex-shrink:0}.ss-prog i{display:block;height:100%;background:var(--navy)}
.ss-body{flex:1;min-height:0;overflow:hidden;padding:0 18px;display:flex;flex-direction:column}
.ss-foot{flex-shrink:0;padding:6px 14px 8px;display:flex;flex-direction:column;gap:8px}
.wcard-p{margin-top:8px;padding:22px 20px;background:var(--card);border:1px solid var(--border);border-radius:16px;display:flex;flex-direction:column;align-items:center;cursor:pointer}
.wcard-p .ruby{height:20px;font-family:var(--f-jp);font-size:14px;color:var(--muted)}
.wcard-p .big{font-family:var(--f-jp);font-size:40px;font-weight:500;color:var(--ink);line-height:1.15}
.wcard-p .slot{min-height:40px;margin-top:12px;display:flex;align-items:center;justify-content:center;text-align:center}
.wcard-p .mean{font-family:var(--f-head);font-size:21px;color:var(--matcha)}
.apill{padding:7px 14px;border-radius:999px;background:#f1f4ea;border:1px solid #dde3cd;font-size:12px;font-weight:600;color:var(--matcha-ink)}
.sent{margin-top:14px;padding:12px 14px;background:#efe9dc;border:1px solid var(--border);border-radius:14px;font-family:var(--f-jp);font-size:14.5px;line-height:1.9;color:var(--ink);cursor:pointer}
.sent u{color:#9a958c;text-decoration:underline}.sent b{font-weight:700}
.src{margin-top:6px;padding:0 4px;text-align:right;font-size:10.5px;color:var(--faint)}
.kstrip{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.kstrip div{display:flex;align-items:center;gap:10px;padding:7px 10px;background:var(--card);border:1px solid var(--border);border-radius:10px}
.kstrip i{font-style:normal;font-family:var(--f-mincho);font-size:19px;color:var(--ink);width:28px;text-align:center}.kstrip span{flex:1;font-size:12.5px;font-weight:600;color:var(--ink)}.kstrip small{font-size:10px;color:var(--muted)}
.taphint{flex:1;display:flex;align-items:center;justify-content:center;font-size:12px;letter-spacing:.4px;color:var(--faint);opacity:.85;min-height:40px;cursor:pointer}
.know{display:block;width:100%;padding:10px;border-radius:12px;border:1.2px solid var(--border);text-align:center;font-size:12px;font-weight:700;color:var(--muted)}
.grades{display:flex;gap:8px;padding-bottom:6px}
.gr{flex:1;padding:12px 4px;border-radius:12px;text-align:center;font-size:13px;font-weight:700;border:1px solid transparent;transition:opacity .15s}
.gr small{display:block;font-family:ui-monospace,Menlo,monospace;font-size:9.5px;font-weight:600;opacity:.7;margin-top:2px}
.gr.forgot{background:#efe6e3;color:var(--shu)}.gr.almost{background:#efe9dc;color:var(--ink)}.gr.got{background:#e4ece8;color:var(--matcha)}
.gotit{display:block;width:100%;padding:13px;border-radius:12px;background:var(--navy);color:#fff;text-align:center;font-size:14px;font-weight:700;transition:opacity .15s}
/* Kanji meet card */
.kcard{margin-top:8px;padding:20px 20px 0;background:var(--card);border:1px solid var(--border);border-radius:16px;display:flex;flex-direction:column;align-items:center}
.gslot{position:relative;width:156px;height:156px}
.gslot svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transition:opacity .9s ease}
.gslot svg .ghost path{stroke:transparent}.gslot svg .ink path{stroke:var(--ink)}
.gslot.tracing svg .ghost path{stroke:var(--border)}.gslot.tracing svg .ink path{stroke:transparent}
.gslot svg.off{opacity:0}
.gslot canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;pointer-events:none}
.gslot.tracing canvas{pointer-events:auto;cursor:crosshair}
.kw{height:44px;margin-top:14px;display:flex;align-items:center;font-family:var(--f-head);font-size:24px;color:var(--matcha);opacity:0;transition:opacity .32s}.kw.in{opacity:1}
.strip{display:flex;align-self:stretch;margin:12px -20px 0;border-top:1px solid var(--border);opacity:0;transition:opacity .32s;pointer-events:none}.strip.in{opacity:1;pointer-events:auto}
.strip button{flex:1;padding:11px 4px;text-align:center;font-size:12px;font-weight:600;color:var(--muted)}.strip button+button{border-left:1px solid var(--border)}
.story{margin-top:12px;font-size:13px;line-height:1.6;color:var(--text);opacity:0;transform:translateY(10px);transition:opacity .32s,transform .32s}.story.in{opacity:1;transform:none}
.story i{font-style:normal;font-family:var(--f-mincho);display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 4px;margin:0 1px;border-radius:6px;background:var(--navy-soft);color:var(--navy);font-size:13px;vertical-align:-5px}
/* Session complete */
.cdone{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:16px 22px;gap:4px}
.cdone .ring.big{width:120px;height:120px;transform:none;margin:0 0 10px}
.cdone .ch{font-family:var(--f-head);font-size:22px;color:var(--matcha-ink)}
.cdone .cs{font-size:12px;color:var(--muted)}
.cdone .rows{width:100%;margin-top:16px;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:4px 14px}
.cdone .rows div{display:flex;justify-content:space-between;padding:8px 0;font-size:12.5px;color:var(--text)}.cdone .rows div+div{border-top:1px solid var(--border)}.cdone .rows b{font-family:var(--f-head);font-weight:500;font-size:15px;color:var(--ink)}