@font-face{font-family:"KanjiJP";src:url(fonts/noto-serif-jp-kanji.woff) format("woff");font-display:block}
@font-face{font-family:"KanjiSC";src:url(fonts/noto-serif-sc-kanji.woff) format("woff");font-display:block}
:root{--bg:#faf6ee;--card:#fffdf8;--ink:#2b2622;--mute:#7a6f63;--accent:#b4472f;--line:#e4dccd}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:"Hiragino Sans","Noto Sans CJK JP","Noto Sans JP","Microsoft YaHei",system-ui,sans-serif;line-height:1.6}
button{font:inherit;cursor:pointer}
.jp{font-family:"KanjiJP","Noto Serif CJK JP","Hiragino Mincho ProN",serif}
.sc{font-family:"KanjiSC","Noto Serif CJK SC","Songti SC",serif}
/* ---------- first screen ---------- */
.first{display:flex;flex-direction:column;gap:12px;padding:12px}
.side{order:-1;display:flex;flex-direction:column;gap:12px}
.video-wrap{position:relative;background:#111;border-radius:12px;overflow:hidden;aspect-ratio:16/9}
.video-wrap video{width:100%;height:100%;display:block;object-fit:contain;background:#111}
.unmute{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);background:rgba(0,0,0,.72);color:#fff;border:0;border-radius:10px;padding:6px 14px;font-size:14px;line-height:1.4;text-align:center}
.pp{display:none}
body.pc .pp{display:flex;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(12vh,96px);height:min(12vh,96px);border-radius:50%;border:0;background:rgba(0,0,0,.55);color:#fff;font-size:min(4.5vh,36px);align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity .3s;letter-spacing:-.15em}
body.pc .video-wrap:hover .pp,body.pc .video-wrap.paused .pp,body.pc .pp:focus-visible{opacity:1}
body.pc .video-wrap video{cursor:pointer}
body.pc{scrollbar-width:none}body.pc::-webkit-scrollbar{display:none}
.unmute small{opacity:.8;font-size:11px}
.qr-box{display:none}
.anim{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;display:flex;flex-direction:column;align-items:center;min-height:0}
.anim-head{display:flex;gap:14px;align-items:center;align-self:stretch}
.big-char{font-family:"KanjiJP","Noto Serif CJK JP",serif;font-size:64px;line-height:1;color:var(--accent)}
.reading{font-size:15px;color:var(--mute)}
.meaning3{font-size:15px}
.meaning3 span+span::before{content:" / ";color:var(--line)}
.glyph-box{position:relative;width:min(62vw,240px);aspect-ratio:1;margin:8px 0}
.glyph-box>*{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.4s ease}
.glyph-box>.on{opacity:1}
.glyph-box img{object-fit:contain}
.glyph-box .font-glyph{display:flex;align-items:center;justify-content:center;font-size:calc(min(62vw,240px)*.78);line-height:1;font-family:"KanjiJP","Noto Serif CJK JP",serif}
.glyph-box svg path{stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.glyph-box .kvg.on svg path{animation:draw var(--d) ease forwards;animation-delay:var(--delay)}
@keyframes draw{to{stroke-dashoffset:0}}
.stage-name{font-size:20px;font-weight:700;color:var(--accent);text-align:center}
.stage-desc{font-size:14px;text-align:center;min-height:3.2em}
.stage-desc span{display:block}
.stage-ref{font-size:11px;color:var(--mute);text-align:center;min-height:1.4em}
.steps{display:flex;gap:4px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.steps span{font-size:11px;padding:2px 7px;border-radius:99px;background:var(--bg);color:var(--mute)}
.steps span{background:linear-gradient(var(--fill),var(--fill)) no-repeat left center/0% 100%,var(--bg);--fill:#ecbcac;transition:color .3s}
.steps span.on{color:var(--ink);font-weight:600;animation:stepfill var(--dur,2s) linear forwards}
.steps span.done{--fill:var(--accent);background-size:100% 100%;color:#fff}
@keyframes stepfill{from{background-size:0% 100%}to{background-size:100% 100%}}
.progress{display:flex;gap:5px;margin-top:8px}
.progress i{width:8px;height:8px;border-radius:50%;background:var(--line)}
.progress i.on{background:var(--accent)}
/* ---------- PC layout (laptops, monitors, TV): class set by app.js ---------- */
body.pc .first{height:100vh;display:grid;grid-template-columns:minmax(0,31fr) minmax(0,69fr);grid-template-rows:minmax(0,1fr) auto;padding:2vh 1.6vw;gap:1.6vh 1.6vw}
body.pc .anim{grid-column:1;grid-row:1;min-height:0;justify-content:center;padding:1.5vh 1.5vw}
body.pc .side{display:contents}
body.pc .video-wrap{grid-column:2;grid-row:1/3;align-self:center;width:100%;max-height:96vh;flex:none}
body.pc .qr-box{grid-column:1;grid-row:2;display:flex;gap:1.6vw;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1.4vh 1.6vw;flex:1;min-height:0}
body.pc .qr{height:min(16vh,300px);min-height:110px;aspect-ratio:1;background:#fff;padding:8px;border-radius:8px}
body.pc .qr-text p{margin:.3vh 0;font-size:max(12px,.85vw)}
body.pc .qr-text .url{font-weight:700;color:var(--accent);font-size:max(14px,1.1vw)}
body.pc .anim-head{justify-content:center}
body.pc .big-char{font-size:8vh}
body.pc .reading,body.pc .meaning3{font-size:max(13px,1.15vw)}
body.pc .glyph-box{width:min(28vh,21vw);margin:1.5vh 0}
body.pc .glyph-box .font-glyph{font-size:min(22vh,16vw)}
body.pc .stage-name{font-size:max(15px,1.45vw)}
body.pc .stage-desc{font-size:max(12px,.95vw)}
body.pc .stage-ref{font-size:max(11px,.8vw)}
body.pc .steps span{font-size:max(12px,.9vw)}
body.pc .progress i{width:12px;height:12px}
body.tv{overflow:hidden}
body.tv .langbar,body.tv main{display:none}
/* ---------- text version ---------- */
.langbar{position:sticky;top:0;z-index:5;display:flex;justify-content:center;gap:6px;padding:8px;background:rgba(250,246,238,.95);border-bottom:1px solid var(--line)}
.langbar button{border:1px solid var(--line);background:var(--card);border-radius:99px;padding:4px 14px}
.langbar button.on{background:var(--accent);color:#fff;border-color:var(--accent)}
main{max-width:960px;margin:0 auto;padding:8px 14px 40px}
h2{font-size:20px;margin:22px 0 8px}
.hint{color:var(--mute);font-size:13px;margin:0 0 8px}
.picker{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.picker button{font-family:"KanjiJP","Noto Serif CJK JP",serif;font-size:26px;border:1px solid var(--line);background:var(--card);border-radius:10px;padding:4px 0}
.picker button.on{border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset}
.cards{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
.card{min-width:0;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px}
.card-head{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.card-head .c{font-size:44px;color:var(--accent);line-height:1}
.card-head .r{font-size:13px;color:var(--mute)}
.row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(72px,1fr);gap:4px;overflow-x:auto;margin-top:8px;text-align:center}
.cell small{display:block;font-size:11px;color:var(--mute)}
.cell img,.cell .fg{width:100%;max-width:80px;aspect-ratio:1;margin:0 auto;display:block}
.cell .fg{font-size:56px;line-height:80px;font-family:"KanjiJP","Noto Serif CJK JP",serif}
.cell .ref{font-size:10px;color:var(--mute);line-height:1.25;display:block;margin-top:2px}
.card p{margin:8px 0 0;font-size:15px}
details{background:var(--card);border:1px solid var(--line);border-radius:12px;margin:8px 0;padding:0 12px}
summary{padding:10px 0;font-weight:700;cursor:pointer}
details ol{margin:0 0 12px;padding-left:1.4em}
details li{margin:4px 0}
figure{margin:10px 0;text-align:center}
figure img{max-width:100%;max-height:260px;border-radius:8px}
figcaption{font-size:12px;color:var(--mute)}
.timeline{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.timeline div{text-align:center;font-size:11px;color:var(--mute)}
.timeline img,.timeline .fg{width:64px;height:64px;display:block}
.timeline .fg{font-size:52px;line-height:64px;color:var(--ink);font-family:"KanjiJP","Noto Serif CJK JP",serif}
.credits{font-size:13px;color:var(--mute)}
.credits li{margin:3px 0}
.credits a{color:var(--accent)}
@media (max-width:420px){.picker{grid-template-columns:repeat(7,1fr)}.picker button{font-size:22px}}