html,body{height:100%}html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}body{background:var(--night);color:var(--ink);font-family:var(--font-read);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;touch-action:manipulation;margin:0;overflow:hidden}button{font:inherit;color:inherit}#app{background:radial-gradient(circle at 20% 15%, #b7a3f52e, transparent 40%), radial-gradient(circle at 85% 80%, #5ccfb924, transparent 45%), var(--night);padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);flex-direction:column;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}#app:before{content:"";pointer-events:none;opacity:.35;background-image:radial-gradient(#fff 1px,#0000 1.5px),radial-gradient(#fff 1px,#0000 1.5px);background-position:0 0,60px 90px;background-size:120px 120px,190px 190px;position:absolute;inset:0}#above,#below{z-index:3;width:100%;position:relative}#stageWrap{z-index:2;flex:none;position:relative}#stage{transform-origin:0 0;background:var(--paper);border-radius:36px;width:1600px;height:1000px;position:absolute;top:0;left:0;overflow:hidden;box-shadow:0 30px 80px #00000059}.portrait #stage{border-radius:0}#bg,#scene,#fx,#grain{position:absolute;inset:0}#bg>*,#scene>.layer{width:1600px;height:1000px;position:absolute;inset:0}#scene>.layer.html{pointer-events:none}#scene>.layer.html>*{pointer-events:auto}#fx{pointer-events:none;z-index:20}#grain{pointer-events:none;z-index:30;opacity:.07;mix-blend-mode:multiply;background-size:256px 256px}svg{overflow:visible}#dock{z-index:25;pointer-events:none;align-items:center;gap:22px;height:190px;padding:0 34px 28px;display:flex;position:absolute;bottom:0;left:0;right:0}#dock>*{pointer-events:auto}#textbar{border:5px solid var(--ink);background:#fffdf8f2;border-radius:40px;flex:1;align-items:center;gap:18px;min-width:0;height:132px;padding:0 28px 0 18px;transition:opacity .3s,transform .3s;display:flex;position:relative;box-shadow:0 9px #3b2c4f38}#textbar.empty{opacity:0;pointer-events:none;transform:translateY(16px)}#tbText{min-width:0;font-family:var(--font-read);letter-spacing:.005em;color:var(--ink);text-wrap:balance;flex:1;max-height:116px;font-size:44px;font-weight:700;line-height:1.22;overflow:hidden}:root[lang=ja] #tbText{letter-spacing:.04em;font-size:40px;line-height:1.38}:root[lang=zh-Hans] #tbText{font-size:40px;line-height:1.38}#tbText.small{font-size:36px}:root[lang=ja] #tbText.small,:root[lang=zh-Hans] #tbText.small{font-size:33px}#tbText.xsmall{font-size:32px;line-height:1.16}:root[lang=ja] #tbText.xsmall,:root[lang=zh-Hans] #tbText.xsmall{font-size:29px;line-height:1.28}#tbText .w{cursor:pointer;border-radius:14px;margin:0 -2px;padding:0 2px;transition:background-color .12s,color .12s}#tbText .w.now{background:var(--hl);box-shadow:0 0 0 4px var(--hl)}#tbText.pico{color:#1f7f70}#tbSpeaker{flex:none;width:84px;height:84px;display:none}#tbSpeaker.on{display:block}.roundBtn{cursor:pointer;border:5px solid var(--ink);background:var(--card);border-radius:50%;flex:none;place-items:center;width:96px;height:96px;padding:0;transition:transform .15s,box-shadow .15s,opacity .25s,filter .25s;display:grid;box-shadow:0 7px #3b2c4f40}.roundBtn:active{transform:translateY(5px);box-shadow:0 2px #3b2c4f40}.roundBtn svg{width:56%;height:56%}.roundBtn:focus-visible,.pill:focus-visible,.hit:focus-visible{outline:6px solid var(--sun);outline-offset:4px}#btnReplay{background:#ddf6f0;width:80px;height:80px}#btnNext{background:var(--coral);width:132px;height:132px}#btnNext svg{width:52%;height:52%}#btnNext.locked{filter:grayscale(.9)brightness(1.1);opacity:.45;pointer-events:none}#btnNext{position:relative}#btnNext.ready{animation:1.6s ease-in-out infinite nextPulse}#btnNext.ready:after{content:"";pointer-events:none;border:9px solid #ffc93c8c;border-radius:50%;animation:1.6s ease-out infinite nextRing;position:absolute;inset:-9px}@keyframes nextPulse{0%,to{transform:scale(1)}50%{transform:scale(1.07)}}@keyframes nextRing{0%{opacity:.9;transform:scale(.9)}to{opacity:0;transform:scale(1.35)}}#btnPrev{width:88px;height:88px}#btnPrev.hide{visibility:hidden}#topbar{z-index:26;pointer-events:none;align-items:center;gap:16px;display:flex;position:absolute;top:26px;left:30px;right:30px}#topbar>*{pointer-events:auto}#topbar .roundBtn{width:84px;height:84px}#btnHome{background:var(--sun)}#topbar .spacer{pointer-events:none;flex:1}.pill{border:5px solid var(--ink);background:var(--card);cursor:pointer;height:84px;font-family:var(--font-display);border-radius:42px;align-items:center;gap:4px;padding:0 10px;font-size:30px;font-weight:800;display:flex;box-shadow:0 7px #3b2c4f40}.pill span{border-radius:30px;padding:8px 18px}.pill span.on{background:var(--mint);color:#fff}#langPill{text-align:center;width:190px;font-family:Grandstander,Mochiy Pop One,system-ui,sans-serif}.roundBtn.off{background:#e9e3ee}.roundBtn.off svg{opacity:.45}#chapterTag{pointer-events:none;font-family:var(--font-display);color:var(--ink);border:4px solid var(--ink);background:#fffdf8e0;border-radius:30px;padding:10px 26px;font-size:30px;font-weight:800;box-shadow:0 6px #3b2c4f2e}#chapterTag:empty{display:none}#factBtn{background:var(--sun);display:none}#factBtn.on{animation:2.4s ease-in-out infinite factWiggle;display:grid}@keyframes factWiggle{0%,80%,to{transform:rotate(0)}85%{transform:rotate(-14deg)scale(1.08)}90%{transform:rotate(12deg)scale(1.08)}95%{transform:rotate(-6deg)}}.portrait #dock{gap:clamp(8px,2vw,18px);height:auto;padding:12px 14px 14px;position:relative}.portrait #textbar{border-width:3px;border-radius:24px;gap:10px;height:auto;min-height:clamp(84px,14vw,140px);padding:10px 14px 10px 10px;box-shadow:0 5px #3b2c4f38}.portrait #tbText{max-height:none;font-size:clamp(19px,3.6vw,36px)}:root[lang=ja] .portrait #tbText,:root[lang=zh-Hans] .portrait #tbText{font-size:clamp(17px,3.3vw,33px)}.portrait #tbText.small{font-size:clamp(17px,3.2vw,32px)}.portrait #tbText.xsmall{font-size:clamp(15px,2.9vw,29px)}:root[lang=ja] .portrait #tbText.small,:root[lang=zh-Hans] .portrait #tbText.small{font-size:clamp(16px,3vw,31px)}:root[lang=ja] .portrait #tbText.xsmall,:root[lang=zh-Hans] .portrait #tbText.xsmall{font-size:clamp(14px,2.7vw,28px)}.portrait #tbSpeaker{width:clamp(40px,7vw,70px);height:clamp(40px,7vw,70px)}.portrait .roundBtn{border-width:3px;box-shadow:0 4px #3b2c4f40}.portrait #btnReplay{width:clamp(40px,7vw,64px);height:clamp(40px,7vw,64px)}.portrait #btnNext{width:clamp(60px,12vw,104px);height:clamp(60px,12vw,104px)}.portrait #btnPrev{width:clamp(44px,8.5vw,76px);height:clamp(44px,8.5vw,76px)}.portrait #topbar{gap:clamp(6px,1.6vw,14px);padding:10px 14px;position:relative;top:0;left:0;right:0}.portrait #topbar .roundBtn{width:clamp(40px,9vw,64px);height:clamp(40px,9vw,64px)}.portrait .pill{border-width:3px;height:clamp(40px,9vw,64px);padding:0 4px;font-size:clamp(14px,3vw,22px);box-shadow:0 4px #3b2c4f40}.portrait .pill span{padding:4px 8px}.portrait #langPill{width:clamp(90px,20vw,150px)}.portrait #chapterTag{border-width:3px;padding:6px 12px;font-size:clamp(13px,2.6vw,20px)}@media (width<=600px){.portrait #chapterTag{display:none}}.portrait #langPill{font-size:max(16px,clamp(14px,3vw,22px))}#rotateTip{display:none}.portrait #rotateTip{color:#fff;font-family:var(--font-display);opacity:.8;justify-content:center;align-items:center;gap:10px;padding:4px 16px 12px;font-size:clamp(14px,2.6vw,20px);display:flex}.portrait #rotateTip svg{width:28px;height:28px;animation:2.4s ease-in-out infinite rot}@keyframes rot{0%,30%{transform:rotate(0)}50%,80%{transform:rotate(-90deg)}to{transform:rotate(0)}}#rails{z-index:4;pointer-events:none;top:env(safe-area-inset-top,0px);bottom:env(safe-area-inset-bottom,0px);left:env(safe-area-inset-left,0px);right:env(safe-area-inset-right,0px);--b:clamp(42px, min(calc(var(--rail) - 18px), 14vh), 64px);position:absolute}.rails .roundBtn{border-width:3px;box-shadow:0 4px #3b2c4f40}.rails #topbar,.rails #dock{grid-template-columns:var(--rail) minmax(0, 1fr) var(--rail);justify-items:center;gap:0;height:auto;padding:0;display:grid;position:absolute;left:0;right:0}.rails #topbar{grid-auto-rows:min-content;align-content:start;row-gap:8px;padding-top:10px;top:0}.rails #topbar .roundBtn{width:var(--b);height:var(--b)}.rails #topbar .spacer,.rails #chapterTag{display:none}.rails #btnHome{grid-area:1/1}.rails #factBtn{grid-area:2/1}.rails #langPill{grid-area:1/3}.rails #btnSound{grid-area:2/3}.rails #btnMusic{grid-area:3/3}.rails #btnGuide{grid-area:4/3}.rails #dock{padding-bottom:max(6px, calc(24px * var(--s)));align-items:end;bottom:0}.rails #btnPrev{width:calc(var(--b) * 1.05);height:calc(var(--b) * 1.05)}.rails #btnNext{width:calc(var(--b) * 1.3);height:calc(var(--b) * 1.3)}.rails #textbar{border-width:3px;border-radius:22px;justify-self:stretch;gap:10px;height:auto;min-height:0;margin:0 8px;padding:5px 14px 5px 5px;box-shadow:0 4px #3b2c4f38}.rails #btnReplay{width:calc(var(--b) * .72);height:calc(var(--b) * .72)}.rails #tbSpeaker{width:calc(var(--b) * .7);height:calc(var(--b) * .7)}.rails #tbText{max-height:none;font-size:clamp(15px,4.4vh,20px);line-height:1.25}.rails #tbText.small{font-size:clamp(14px,4vh,18px)}.rails #tbText.xsmall{font-size:clamp(13px,3.6vh,17px)}:root[lang=ja] .rails #tbText,:root[lang=zh-Hans] .rails #tbText{font-size:clamp(14px,4vh,19px);line-height:1.35}:root[lang=ja] .rails #tbText.small,:root[lang=zh-Hans] .rails #tbText.small{font-size:clamp(13px,3.7vh,17px)}:root[lang=ja] .rails #tbText.xsmall,:root[lang=zh-Hans] .rails #tbText.xsmall{font-size:clamp(12px,3.4vh,16px)}.langCompact{font-family:Grandstander,Mochiy Pop One,system-ui,sans-serif;font-weight:800;font-size:calc(var(--b) * .3);position:relative;overflow:hidden}.langCompact select{opacity:0;cursor:pointer;width:100%;height:100%;font-size:16px;position:absolute;top:0;left:0}.langCompact:has(select:focus-visible){outline:6px solid var(--sun);outline-offset:4px}.hit{cursor:pointer}@media (hover:hover){.hit:hover .hov,.hov.hit:hover{filter:brightness(1.05)drop-shadow(0 0 10px #ffc93ccc)}}.layer svg .hit{pointer-events:all}.bigBtn{font-family:var(--font-display);color:var(--ink);border:6px solid var(--ink);cursor:pointer;background:var(--card);border-radius:999px;justify-content:center;align-items:center;gap:18px;height:140px;padding:0 46px;font-size:52px;font-weight:800;transition:transform .15s,box-shadow .15s;display:flex;position:absolute;box-shadow:0 10px #3b2c4f47}.bigBtn:active{transform:translateY(7px);box-shadow:0 3px #3b2c4f47}.bigBtn svg{flex:none;width:96px;height:96px}.bigBtn.coral{background:var(--coral);color:#fff}.bigBtn.mint{background:var(--mint);color:#fff}.bigBtn.sun{background:var(--sun)}.bigBtn.lilac{background:var(--lilac);color:#fff}.bigBtn .lbl{text-shadow:0 3px #3b2c4f40;white-space:nowrap}.bigBtn.sun .lbl,.bigBtn:not(.coral):not(.mint):not(.lilac) .lbl{text-shadow:none}.bigBtn[disabled]{opacity:.4;pointer-events:none}.card{background:var(--card);border:6px solid var(--ink);border-radius:34px;position:absolute;overflow:hidden;box-shadow:0 12px #3b2c4f38}.label{font-family:var(--font-display);color:var(--ink);text-align:center;white-space:nowrap;font-weight:800;position:absolute}.tag{font-family:var(--font-display);background:var(--card);border:5px solid var(--ink);white-space:nowrap;border-radius:26px;padding:8px 24px;font-size:34px;font-weight:800;position:absolute;transform:translate(-50%);box-shadow:0 6px #3b2c4f33}#startGate{z-index:24;cursor:pointer;background:#2a214047;place-items:start center;padding-top:220px;display:grid;position:absolute;inset:0}#startTap{cursor:pointer;background:0 0;border:0;border-radius:50%;width:280px;height:280px;padding:0;animation:.6s ease-out both gateIn;position:relative}#startTap span{border:8px solid var(--ink);background:var(--coral);border-radius:50%;place-items:center;animation:1.6s ease-in-out .6s infinite nextPulse;display:grid;position:absolute;inset:0;box-shadow:0 12px #3b2c4f4d}#startTap svg{width:60%;height:60%}#startTap span:after{content:"";pointer-events:none;border:14px solid #ffc93c99;border-radius:50%;animation:1.6s ease-out infinite nextRing;position:absolute;inset:-22px}#startTap:focus-visible{outline:8px solid var(--sun);outline-offset:8px}@keyframes gateIn{0%{opacity:0;transform:scale(0)}60%{opacity:1;transform:scale(1.12)}80%{transform:scale(.96)}to{opacity:1;transform:scale(1)}}.overlay{z-index:40;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#2a21408c;place-items:center;display:grid;position:absolute;inset:0}.factCard{background:var(--card);border:6px solid var(--ink);text-align:left;border-radius:44px;width:1040px;padding:44px 56px 48px;position:relative;box-shadow:0 16px #3b2c4f40}.factCard h3{font-family:var(--font-display);color:var(--coral-dark);align-items:center;gap:16px;margin:0 0 14px;font-size:46px;display:flex}.factCard p{margin:0;font-size:42px;font-weight:700;line-height:1.35}.factCard .roundBtn{background:var(--sun);position:absolute;top:-40px;right:-40px}#guide{z-index:100;background:var(--paper);-webkit-overflow-scrolling:touch;-webkit-user-select:text;user-select:text;padding-top:env(safe-area-inset-top,0px);position:fixed;inset:0;overflow-y:auto}#guide .wrap{max-width:760px;margin:0 auto;padding:32px 20px 80px}#guide header{background:var(--paper);z-index:2;border-bottom:2px solid #eadcc6;justify-content:space-between;align-items:center;gap:14px;padding:14px 0;display:flex;position:sticky;top:0}#guide h1{font-family:var(--font-display);text-wrap:balance;margin:0;font-size:32px;line-height:1.1}#guide h2{font-family:var(--font-display);color:var(--ink);text-wrap:balance;align-items:baseline;gap:12px;margin:36px 0 8px;font-size:24px;display:flex}#guide h2.book{border:3px solid var(--ink);background:#fff1c9;border-radius:18px;margin:52px 0 12px;padding:12px 20px;font-size:26px;box-shadow:0 5px #3b2c4f26}#guide h2 small{font-family:var(--font-read);letter-spacing:.08em;text-transform:uppercase;color:var(--mint-dark);font-size:14px;font-weight:700}#guide p,#guide li{font-family:var(--font-read);color:#3b2c4f;font-size:17.5px;line-height:1.6}#guide .lede{font-size:19px}#guide .box{border:3px solid var(--ink);background:#fffdf8;border-radius:18px;margin:14px 0;padding:16px 20px;box-shadow:0 5px #3b2c4f1f}#guide .box h3{letter-spacing:.08em;text-transform:uppercase;color:var(--coral-dark);font-size:15px;font-family:var(--font-read);margin:0 0 6px}#guide .box ul{margin:6px 0 0;padding-left:22px}#guide .close{border-width:3px;width:52px;height:52px;box-shadow:0 4px #3b2c4f40}#guide .meta{color:var(--ink-soft);font-size:14px}#guide a{color:var(--mint-dark)}.agePaths{margin:20px 0 36px}#guide .agePaths h2{margin-top:18px}.ageTabs{flex-wrap:wrap;gap:10px;display:flex}.ageTabs button,.ageLessons button{font:inherit;color:var(--ink);cursor:pointer}.ageTabs button{border:2px solid var(--ink);background:#fff;border-radius:999px;padding:10px 18px;font-weight:800}.ageTabs button[aria-pressed=true]{background:var(--sun);box-shadow:0 4px #3b2c4f33}#guide .ageNote{margin:16px 0 10px;font-weight:700}.ageLessons{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;padding-left:0;list-style:none;display:grid}.ageLessons li{min-width:0}.ageLessons button{text-align:left;border:2px solid var(--ink);background:#fffdf8;border-radius:14px;width:100%;height:100%;padding:12px 14px}.ageLessons button:hover,.ageLessons button:focus-visible{background:#fff1c9}.ageLessons span{color:var(--ink-soft);font-size:13px;font-weight:700;display:block}.ageLessons strong{margin-top:4px;font-size:17px;display:block}@media (prefers-reduced-motion:reduce){#btnNext.ready,#factBtn.on,#btnNext.ready:after,#startTap,#startTap span,#startTap span:after{animation:none}}input,textarea{-webkit-user-select:text;user-select:text}:root[lang=ja] #guide p,:root[lang=ja] #guide li{font-family:Hiragino Sans,Hiragino Kaku Gothic ProN,Noto Sans JP,Yu Gothic,Meiryo,sans-serif}:root[lang=ja] #guide h1,:root[lang=ja] #guide h2{font-family:Hiragino Maru Gothic ProN,Hiragino Sans,Noto Sans JP,Yu Gothic,sans-serif}:root[lang=zh-Hans] #guide{font-family:PingFang SC,Noto Sans CJK SC,Microsoft YaHei,sans-serif}#loading{z-index:50;background:var(--paper);color:var(--ink);place-items:center;font:800 48px Grandstander,sans-serif;display:grid;position:absolute;inset:0}