:root{font-family:system-ui,-apple-system,"Noto Sans", "Noto Sans CJK JP",sans-serif;color:#24413f;background:#f6f5ef;font-size:16px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px}button,input{font:inherit}button{cursor:pointer;touch-action:manipulation}button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #de9850;outline-offset:3px}
.shell{--zoom:1;max-width:1200px;margin:0 auto;padding:20px clamp(14px,3vw,30px) 22px}.hero{background:linear-gradient(130deg,#214b4a,#36716b);border-radius:21px;color:#fff;padding:18px 22px 15px;box-shadow:0 8px 25px #28514b19}.brand-line{display:flex;align-items:center;gap:13px}.mon{font-family:serif;border:1.6px solid #f4e7bc;border-radius:50%;height:47px;width:47px;display:grid;place-items:center;font-size:25px;color:#fff0c7;flex-shrink:0}.eyebrow{font-size:.65rem;letter-spacing:.14em;color:#d0e2d7;font-weight:800}h1{font-size:clamp(1.4rem,3vw,1.95rem);letter-spacing:-.03em;line-height:1.1;margin:3px 0 0}.hero p{font-size:.82rem;margin:9px 0 0;color:#e5f1eb}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:14px 0;flex-wrap:wrap}.toolbar-left,.toolbar-right{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.switch{background:#fff;border:1px solid #d1ded7;min-height:43px;border-radius:12px;padding:7px 10px;display:flex;align-items:center;gap:7px;cursor:pointer;font-size:.84rem;font-weight:650}.switch input{accent-color:#39716a;width:18px;height:18px;margin:0;flex-shrink:0}.switch small{font-size:.7rem;color:#738984;display:block;line-height:1.1}.segmented,.sizing{display:flex;background:#e7eee9;border:1px solid #cbdad1;border-radius:12px;padding:3px;gap:2px}.segmented button,.sizing button{background:transparent;color:#355653;border:0;border-radius:9px;min-height:37px;font-size:.8rem;font-weight:700;padding:0 12px}.segmented button.active{background:#fff;color:#214b4a;box-shadow:0 1px 5px #1f3a3623}.sizing button{font-size:.92rem;min-width:41px;padding:0 8px}.sizing button:disabled{opacity:.3;cursor:default}
.question-nav{display:flex;gap:7px;overflow-x:auto;padding:0 0 12px;scrollbar-width:thin;scrollbar-color:#adc6bd transparent}.question-nav button{flex:none;white-space:nowrap;min-height:43px;border-radius:11px;border:1px solid #c6d9cf;background:#fff;color:#42605d;padding:7px 14px;font-size:.84rem;font-weight:700}.question-nav button.active{background:#214b4a;border-color:#214b4a;color:#fff}.question-nav button span{font-size:.68rem;font-weight:500;display:block;opacity:.78;margin-top:1px}.card-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 1px 12px}.card-kicker{font-size:.66rem;letter-spacing:.1em;font-weight:800;color:#8a7850;margin:0 0 5px}.card-heading h2{font-size:clamp(1.13rem,2.2vw,1.45rem);margin:0;line-height:1.26;color:#243f3b}.count{border-radius:30px;border:1px solid #cbdace;color:#66837a;background:#eef3eb;white-space:nowrap;font-size:.72rem;padding:6px 10px;font-weight:700}
.conversation{display:grid;grid-template-rows:minmax(215px,1.55fr) minmax(145px,1fr);min-height:clamp(475px,62vh,770px);height:min(63vh,740px);border:1px solid #cbdcd1;overflow:hidden;border-radius:20px;background:#fff;box-shadow:0 7px 22px #2449430b}.language-panel{min-height:0;min-width:0;position:relative}.jp-panel{background:#eff4ed;border-bottom:3px solid #cad8c7}.jp-frame{width:100%;height:100%;overflow:auto;scrollbar-width:thin;overscroll-behavior:contain}.shell[data-layout="reading"] .jp-frame{transform:none}.en-panel{background:#fff}.panel-top{display:flex;justify-content:space-between;align-items:center;padding:11px clamp(15px,2.2vw,22px) 0;font-size:.72rem;letter-spacing:.07em;font-weight:800;color:#678277}.panel-top span:last-child{letter-spacing:0;text-transform:none;font-size:.75rem;color:#82928a}.language-body{padding:16px clamp(16px,3vw,32px) 24px;overflow-wrap:break-word}.language-body p{margin:0 0 1.15em}.language-body p:last-child{margin-bottom:0}.english-body{font-size:calc(clamp(1.12rem,2.2vw,1.52rem) * var(--zoom));line-height:1.55;color:#2d413f;font-weight:440}.japanese-body{font-size:calc(clamp(1.16rem,2.32vw,1.7rem) * var(--zoom));line-height:2.05;color:#244e46;font-weight:550;letter-spacing:.012em}.japanese-body p{line-height:2.1;margin-bottom:.52em}.jp-chunk{display:inline-flex;flex-direction:column;align-items:center;vertical-align:top;max-width:100%;white-space:nowrap;text-align:center;margin-right:.1em;margin-bottom:.35em}.jp-line{display:inline-block;line-height:1.8}.jp-line ruby{ruby-position:over;ruby-align:center}.jp-line rt{font-family:system-ui,sans-serif;font-size:.47em;font-weight:500;color:#6a867b;line-height:1.15;letter-spacing:0}.romaji{font-family:system-ui,sans-serif;font-size:.52em;line-height:1.3;font-weight:500;letter-spacing:0;color:#8c7563;white-space:nowrap;margin-top:.1em}.shell[data-furi="off"] rt{display:none}.shell[data-romaji="off"] .romaji{display:none}.shell[data-furi="off"] .jp-line{line-height:1.4}.shell[data-romaji="off"] .jp-chunk{margin-bottom:.12em}
.shell[data-layout="side"] .conversation{grid-template-rows:minmax(410px,1fr);grid-template-columns:1fr 1fr;height:min(63vh,740px)}.shell[data-layout="side"] .jp-panel{border-bottom:0;border-right:3px solid #cad8c7}.shell[data-layout="side"] .jp-frame{transform:none}.shell[data-layout="side"] .en-panel{overflow:auto}.shell[data-layout="reading"] .en-panel{overflow:auto}
.walkthrough{font-size:.78rem;color:#637872;padding:8px 5px;line-height:1.4}.walkthrough p{margin:0}.actions{display:flex;gap:9px;flex-wrap:wrap;margin:6px 0 12px}.action{background:#fff;color:#305953;border:1px solid #c9d7d0;border-radius:11px;padding:10px 16px;min-height:43px;font-size:.83rem;font-weight:740}.action.primary{background:#e4ede6;border-color:#bad1c3}.action:active,.nav-button:active{transform:translateY(1px)}.prev-next{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;border-top:1px solid #d8e1da;padding:12px 0 0}.prev-next p{font-size:.73rem;color:#698078;text-align:center;max-width:180px}.nav-button{min-height:47px;border-radius:12px;background:#244f4b;color:#fff;border:0;display:flex;gap:10px;align-items:center;justify-content:center;font-weight:720}.nav-button:last-child{justify-self:stretch}.nav-button span[aria-hidden]{font-size:1.8rem;line-height:1}.nav-button:disabled{opacity:.36;cursor:default}.tip{background:#f0eee4;border:1px solid #ddd7c0;border-radius:13px;margin-top:16px;padding:12px 15px;color:#4a605c;font-size:.83rem;line-height:1.55}.tip summary{font-weight:740;cursor:pointer}.tip p{margin-bottom:0}footer{color:#80928c;text-align:center;font-size:.7rem;line-height:1.6;padding-top:18px}.toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%) translateY(15px);background:#214b4a;color:white;z-index:1000;padding:11px 18px;border-radius:12px;font-size:.85rem;opacity:0;pointer-events:none;transition:.18s;box-shadow:0 5px 20px #152e2a40;max-width:90vw;text-align:center}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media (max-width:580px){.shell{padding:10px 11px 20px}.hero{border-radius:15px;padding:14px}.hero p{margin-top:6px}.toolbar{margin:9px 0}.toolbar-left,.toolbar-right{gap:5px}.switch{min-height:39px;padding:6px 8px;font-size:.76rem}.segmented button{font-size:.73rem;padding:0 8px}.sizing button{min-width:37px}.question-nav button{min-height:41px}.conversation{height:56vh;min-height:420px;grid-template-rows:minmax(240px,1.65fr) minmax(140px,1fr)}.shell[data-layout="side"] .conversation{min-height:440px}.card-heading h2{font-size:1.1rem}.card-heading{margin-bottom:8px}.jp-panel,.en-panel{overflow:hidden}.shell[data-layout="side"] .jp-panel{overflow:auto}.language-body{padding:12px 13px 17px}.japanese-body{font-size:calc(1.05rem * var(--zoom));line-height:1.9}.english-body{font-size:calc(1.06rem * var(--zoom))}.panel-top{padding:9px 12px 0;font-size:.64rem}.actions .action{flex:1;padding:9px 5px;font-size:.75rem}.prev-next p{font-size:.67rem}.nav-button{font-size:.84rem}}
@media(max-height:660px){.conversation{height:55vh;min-height:380px}.shell[data-layout="side"] .conversation{min-height:360px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.toast{transition:none}}

/* Focus mode devotes the entire foldable screen to the two speakers. */
.heading-actions{display:flex;align-items:center;gap:9px}.focus-button{min-height:35px;background:#fff;color:#315d56;border:1px solid #bfcec6;border-radius:10px;padding:6px 11px;font-size:.77rem;font-weight:700;white-space:nowrap}.exit-focus{display:none;background:#fff;color:#28524d;border:1px solid #b8d0c3;border-radius:9px;font-size:.77rem;font-weight:750;padding:8px;min-height:39px}
body.focus-active{overflow:hidden}.shell.focus-mode{position:fixed;inset:0;z-index:200;max-width:none;width:100%;height:100vh;height:100dvh;padding:0;background:#fff;overflow:hidden;border-radius:0}.shell.focus-mode .hero,.shell.focus-mode .toolbar,.shell.focus-mode .question-nav,.shell.focus-mode .card-heading,.shell.focus-mode .walkthrough,.shell.focus-mode .actions,.shell.focus-mode .tip,.shell.focus-mode footer{display:none}.shell.focus-mode main{height:100%;width:100%;display:flex;flex-direction:column;min-height:0}.shell.focus-mode .conversation,.shell.focus-mode[data-layout="side"] .conversation{width:100%;height:auto;min-height:0;flex:1;border-radius:0;border:0;grid-template-rows:minmax(0,1.65fr) minmax(0,1fr)}.shell.focus-mode[data-layout="side"] .conversation{grid-template-rows:minmax(0,1fr)}.shell.focus-mode .prev-next{flex:0 0 auto;min-height:66px;grid-template-columns:1fr auto 1fr;margin:0;padding:7px 12px calc(7px + env(safe-area-inset-bottom, 0px));gap:10px;background:#f7faf6;border-top:2px solid #cbdace}.shell.focus-mode .prev-next #progressText{display:none}.shell.focus-mode .prev-next #exitFocus{display:block}.shell.focus-mode .nav-button{min-height:45px}.shell.focus-mode .japanese-body{font-size:calc(clamp(1.2rem,2.55vw,1.8rem) * var(--zoom))}.shell.focus-mode .english-body{font-size:calc(clamp(1.2rem,2.4vw,1.65rem) * var(--zoom))}
@media(max-width:580px){.heading-actions{gap:5px}.focus-button{font-size:.69rem;padding:6px 7px;min-height:34px}.count{font-size:.67rem;padding:5px 7px}.shell.focus-mode .prev-next{padding-left:7px;padding-right:7px;gap:6px}.shell.focus-mode .nav-button{font-size:.8rem}.shell.focus-mode .exit-focus{font-size:.7rem}.shell.focus-mode .japanese-body{font-size:calc(1.13rem * var(--zoom))}.shell.focus-mode .english-body{font-size:calc(1.1rem * var(--zoom))}}

/* Reading mode is a single flowing page: nothing is cropped into a scrollable sub-pane.
   Focus mode deliberately uses two independently scrollable sections instead. */
.shell[data-layout="reading"] .conversation{display:block;height:auto;min-height:0;overflow:hidden}
.shell[data-layout="reading"] .jp-frame{height:auto;overflow:visible}
.shell[data-layout="reading"] .en-panel{overflow:visible}
.shell.focus-mode[data-layout="reading"] .conversation{display:grid;height:auto;min-height:0;overflow:hidden;grid-template-rows:minmax(0,1.65fr) minmax(0,1fr)}
.shell.focus-mode[data-layout="reading"] .jp-frame{height:100%;overflow:auto}
.shell.focus-mode[data-layout="reading"] .en-panel{overflow:auto}

/* v0.1.3: one-tap question / personal answer switch, with Japanese first. */
.content-tabs{display:flex;gap:6px;margin:0 1px 9px;padding:4px;border-radius:13px;background:#e5ece7;border:1px solid #cadbd0;max-width:550px}
.content-tabs[hidden]{display:none}
.content-tabs button{flex:1;border:0;border-radius:10px;min-height:43px;padding:8px 10px;font-size:.88rem;color:#36564f;background:transparent;font-weight:750}
.content-tabs button.active{color:#fff;background:#27574f;box-shadow:0 2px 6px #214b4a30}
.shell[data-view="perspective"] .jp-panel{background:#f2f4e9}
.shell[data-view="perspective"] .jp-panel{border-color:#d8dccc}
.shell.focus-mode .content-tabs{display:none}
@media(max-width:580px){.content-tabs button{font-size:.8rem;min-height:45px}}

/* v0.1.4: face-to-face foldable layout. Two synchronized views, different reading aids. */
.face-screen[hidden]{display:none!important}
.face-screen{position:fixed;inset:0;height:100vh;height:100dvh;z-index:500;display:grid;grid-template-rows:minmax(0,1fr) minmax(0,1fr);background:#d7e5dc;gap:3px}
body.face-active{overflow:hidden}
.person-viewport{min-height:0;min-width:0;overflow:hidden;background:#fff}
.person-inner{height:100%;width:100%;display:flex;flex-direction:column;min-height:0;--zoom:1}
.sensei-viewport .person-inner{transform:rotate(180deg)}
.person-bar{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:5px;background:#e7f0e9;padding:5px 9px;border-bottom:1px solid #c7d8ca}
.person-id{font-size:.73rem;font-weight:800;color:#264f47;letter-spacing:.03em;min-width:60px}
.person-bar .progress{color:#597369;font-size:.72rem;font-weight:700;text-align:center}
.person-bar button{background:#fff;border:1px solid #b7cdc0;border-radius:8px;color:#28554d;padding:6px 8px;font-size:.78rem;min-height:32px;font-weight:720}
.face-toggles{display:flex;align-items:center;flex-wrap:wrap;gap:5px;padding:5px 8px;background:#f6faf6;border-bottom:1px solid #e1eae2}
.face-check{display:inline-flex;align-items:center;gap:3px;font-size:.7rem;font-weight:740;color:#315b53;background:#fff;border:1px solid #d4e0d7;border-radius:8px;padding:3px 5px;min-height:32px}
.face-check input{width:15px;height:15px;accent-color:#2f7468;margin:0}
.face-sizing{display:flex;align-items:center;gap:2px;background:#e7efea;border:1px solid #d0ddd3;border-radius:9px;padding:2px;margin-left:3px}
.face-sizing button{color:#27564d;background:#fff;border:1px solid #d0ddd3;border-radius:7px;font-size:.76rem;font-weight:800;min-width:34px;min-height:32px;padding:4px 5px}
.face-sizing button:disabled{opacity:.35;cursor:default}
.face-size-value{min-width:37px;text-align:center;color:#43655b;font-size:.65rem;font-weight:750;font-variant-numeric:tabular-nums}
.face-mode-buttons{display:flex;gap:4px;margin-left:auto}
.face-mode-buttons button{font-size:.69rem;border-radius:8px;border:1px solid #c7dcd0;background:#fff;padding:6px 8px;color:#3a6359;font-weight:730;min-height:32px}
.face-mode-buttons button.active{background:#286258;color:#fff;border-color:#286258}
.person-content{min-height:0;flex:1;overflow-y:auto;overscroll-behavior:contain;padding:8px clamp(10px,2vw,22px) 16px;scrollbar-width:thin}
.face-japanese{padding:2px 0 4px;color:#285148;font-weight:560;font-size:calc(clamp(.94rem,2vw,1.15rem) * var(--zoom));line-height:1.95}
.face-japanese p{margin:0 0 .48em;line-height:2.08}
.face-japanese .jp-chunk{margin-bottom:.22em}
.face-japanese .jp-line{line-height:1.6}
.person-inner[data-furi="off"] rt{display:none}
.person-inner[data-romaji="off"] .romaji{display:none}
.person-inner[data-furi="off"] .jp-line{line-height:1.4}
.person-inner[data-romaji="off"] .jp-chunk{margin-bottom:.08em}
.face-english{border-top:2px solid #d3e2d7;margin-top:8px;padding-top:9px;font-size:calc(clamp(.86rem,1.7vw,1.05rem) * var(--zoom));color:#41524e;line-height:1.47}
.face-english p{margin:0 0 .65em}
.person-inner[data-english="off"] .face-english{display:none}
.face-title{color:#7b795d;font-size:.67rem;letter-spacing:.055em;font-weight:800;margin:0 0 4px;text-transform:uppercase}
.face-footer{padding:4px 8px 6px;border-top:1px solid #e2ece4;display:flex;align-items:center;gap:7px;background:#f9fbf8}
.face-footer button{flex:1;border:1px solid #cbdbce;border-radius:9px;background:#fff;min-height:32px;color:#28544b;font-weight:780}
.face-footer button:disabled{opacity:.35}
.face-footer span{font-size:.73rem;font-weight:800;color:#62796d}
/* Phone portrait can still preview the two panels; on a Fold's inner display both halves have more room. */
@media(max-width:540px){.person-bar{padding:4px 6px}.person-id{font-size:.64rem;min-width:55px}.person-bar button{font-size:.7rem;padding:5px 7px}.face-toggles{padding:4px 5px;gap:3px}.face-check{font-size:.65rem;padding:2px 3px}.face-sizing{gap:1px;margin-left:0}.face-sizing button{min-width:32px;min-height:31px}.face-size-value{min-width:34px;font-size:.61rem}.face-mode-buttons button{font-size:.65rem;padding:5px}.person-content{padding:6px 9px 12px}.face-japanese{font-size:calc(.84rem * var(--zoom))}.face-english{font-size:calc(.82rem * var(--zoom))}.face-footer{padding:3px 6px}}
@media(max-height:720px){.person-bar{padding-top:3px;padding-bottom:3px}.face-toggles{padding-top:3px;padding-bottom:3px}.face-footer{padding-top:2px;padding-bottom:2px}}

/* v0.1.5: independent, readable bullet points within anm Perspective.
   The humble introductory lines remain unbulleted. */
.japanese-body .perspective-point, .english-body .perspective-point,
.face-japanese .perspective-point, .face-english .perspective-point {
  position:relative; padding-inline-start:1.22em; margin-bottom:.38em;
}
.japanese-body .perspective-point::before, .english-body .perspective-point::before,
.face-japanese .perspective-point::before, .face-english .perspective-point::before {
  content:'•';position:absolute;left:.13em;top:0;line-height:inherit;
  color:#4d796f;font-weight:800;
}
/* Keep reading aids aligned beneath each Japanese phrase and the bullet outside the text. */
.face-japanese .perspective-point{margin-bottom:.32em}

/* v0.1.6: make anm Perspective visibly distinct from the ordinary Question action.
   There is no Question/Perspective switch on Sensei's half of the screen. */
.content-tabs #perspectiveTab {
  background:#f5e7d2; color:#78451e;
  border:1px solid #d9b487;
}
.content-tabs #perspectiveTab.active {
  background:#945a2d; color:#fff;
  border-color:#945a2d; box-shadow:0 2px 6px #774a2c36;
}
.face-mode-buttons #face-perspective-me {
  background:#f5e7d2; color:#78451e;
  border:1px solid #d9b487;
}
.face-mode-buttons #face-perspective-me.active {
  background:#945a2d; color:#fff;
  border-color:#945a2d;
}