#kbWrap{flex:0 0 auto;background:linear-gradient(180deg,#2a2f3d,#1b1f2a);border-top:1px solid var(--line);padding:8px 6px calc(env(safe-area-inset-bottom) + 8px);touch-action:none}#keyboard{position:relative;height:96px;width:100%;touch-action:none;user-select:none;-webkit-user-select:none}@media(max-height:700px){#keyboard{height:80px}}@media(min-width:1200px){#keyboard{height:116px}}.key{position:absolute;top:0;touch-action:none;cursor:pointer;transition:transform .05s;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.key.white{height:100%;background:linear-gradient(180deg,#f4f6f8,#dee2e9 78%,#c2c8d1);border-radius:0 0 3px 3px;box-shadow:inset -1px 0 #00000024,0 2px 4px var(--shade);z-index:1}.key.black{height:62%;background:linear-gradient(180deg,#2b2f3a,#13151c 82%,#090b0f);border-radius:0 0 2px 2px;box-shadow:0 3px 6px #00000080;z-index:2}.key.down{transform:translateY(2px) scaleY(.985);transform-origin:top}.key.white.down{background:linear-gradient(180deg,#e3e7ed,#cad1da)}.key.black.down{background:linear-gradient(180deg,#3b404e,#1b1e27)}.key .glow{position:absolute;inset:0;border-radius:inherit;opacity:0;pointer-events:none;transition:opacity .16s}.key.lit .glow{opacity:1}.key.wrong .glow{opacity:1;transition:none;background:radial-gradient(ellipse at 50% 100%,rgba(255,77,77,.95) 0%,rgba(255,77,77,.35) 68%,transparent 100%)!important}.thumbMark{position:absolute;top:30%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;pointer-events:none;z-index:5;animation:thumbIn .35s ease-out}.thumbMark .num{width:26px;height:26px;border-radius:50%;color:#fff;font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center;border:2px solid #fff;box-shadow:0 2px 8px #00000080}.thumbMark .who{margin-top:2px;font-size:10px;font-weight:700;color:#fff;text-shadow:0 1px 3px #000;white-space:nowrap}.thumbMark.right .num{background:#35d07a}.thumbMark.left .num{background:#3a8dff}.thumbMark.blk{top:8%}.thumbMark.fingerMark{top:52%;animation:none}.thumbMark.fingerMark .num{width:20px;height:20px;font-size:12px;border-width:2px}.thumbMark.fingerMark.blk{top:22%}@keyframes thumbIn{0%{transform:translate(-50%,10px);opacity:0}to{transform:translate(-50%);opacity:1}}.keyname{position:absolute;bottom:5px;left:0;right:0;text-align:center;font-size:9px;color:#6c7482;pointer-events:none;letter-spacing:-.06em}.keyname.other{display:none}#keyboard.names .keyname.other{display:block}@media(max-width:900px){.keyname{display:none}}#story{position:fixed;inset:0;z-index:90;display:flex;align-items:safe center;justify-content:center;padding:44px 22px 28px;--accent: #6b4a2b;--dot: #c9a24a;background:radial-gradient(ellipse 90% 80% at 50% 60%,#fffdf8,#efe6d2 74%,#e3d6ba);overflow:hidden auto;cursor:pointer;transition:opacity .45s}#story.hide{opacity:0;pointer-events:none;visibility:hidden;transition:opacity .45s,visibility 0s .45s}#storyBg{position:fixed;inset:-12px;z-index:0;pointer-events:none;background:center / cover no-repeat;filter:blur(3px) saturate(.9);opacity:0;transition:opacity .6s}#story.withBg #storyBg{opacity:.55}#story.withBg:after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 80% 70% at 50% 55%,#fbf5e680,#fbf5e6d1)}#storyPage{width:100%;max-width:640px;display:flex;flex-direction:column;position:relative;z-index:2;background:url(../img/parchment.webp) center / cover,radial-gradient(ellipse at 50% 40%,#fffaecfa,#f3e7ccfa 60%,#e0cda6fa);border:1.5px solid #a8853a;border-radius:6px;padding:40px 52px 36px;box-shadow:inset 0 0 0 1px #fffaebb3,inset 0 0 40px #78551e2e,0 10px 34px #32230a59}#storyPage:before{content:"";position:absolute;inset:0;border-radius:6px;pointer-events:none;box-shadow:inset 0 0 18px #78501447,inset 0 0 3px #78501459}#storyHead{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;opacity:0;transform:translateY(6px);transition:opacity .6s,transform .6s}#story.headShow #storyHead{opacity:1;transform:none}#storyChapter{font-size:10.5px;letter-spacing:.38em;color:var(--accent);font-weight:600}#storyChapter:empty{display:none}#storyScene{font-family:Hiragino Mincho ProN,Yu Mincho,"Noto Serif JP",serif;font-size:clamp(17px,4.6vw,22px);letter-spacing:.16em;color:#2a1c0e;font-weight:600;line-height:1.5;display:flex;align-items:center;gap:12px}#storyScene:before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--dot);box-shadow:0 0 0 3px #fff8e8,0 0 14px var(--dot)}#storyScene:after{content:"";flex:1;height:1px;margin-left:6px;background:linear-gradient(90deg,var(--accent),transparent);opacity:.35}#storyIllust{display:block;width:100%;aspect-ratio:16 / 9;max-height:38vh;object-fit:cover;border:1px solid #a8853a;border-radius:4px;margin:0 0 14px;box-shadow:inset 0 0 0 1px #fffaeb99,0 3px 12px #32230a40}#storyIllust.hide{display:none}#storyLines{width:100%;display:flex;flex-direction:column;gap:11px}#storyLines p{font-family:Hiragino Mincho ProN,Yu Mincho,"Noto Serif JP",serif;font-size:clamp(13.5px,3.5vw,16px);line-height:2.05;color:#2a1c0e;letter-spacing:.03em;text-align:left;margin:0;opacity:0;transform:translateY(8px);transition:opacity .6s ease-out,transform .6s ease-out}#storyLines p.show{opacity:1;transform:none}#storyLines p.speech{padding-left:14px;border-left:2px solid var(--accent);color:#1f1408}#storyLines p.speech b{font-family:Hiragino Sans,Noto Sans JP,system-ui,sans-serif;font-size:10px;letter-spacing:.22em;color:var(--accent);font-weight:700;margin-right:8px;vertical-align:.14em}#storyLines p.beat{font-size:clamp(15px,4vw,18.5px);letter-spacing:.1em;font-weight:600;margin:4px 0}#storyLines .sayChunk{display:inline-block}#storyLines p .draft{font-size:10px;color:#8a6a3a;border:1px solid #c9b58a;border-radius:6px;padding:0 5px;margin-left:6px;vertical-align:.1em}#storyFoot{margin-top:22px;display:flex;align-items:center;gap:14px;opacity:0;transition:opacity .4s}#storyFoot.show{opacity:1}#storyNext{letter-spacing:.22em;padding:10px 26px;font-size:12px;background:#fff8e8;color:var(--accent);border:1px solid var(--accent);border-radius:8px;cursor:pointer;font-weight:700}#storyNext:after{content:" ▸";opacity:.7}#storyNext:hover{background:#fff}#storySkip{position:absolute;top:12px;right:14px;z-index:3;font-size:10px;letter-spacing:.12em;padding:7px 12px;background:#fff8e8e6;color:var(--accent);border:1px solid #c9b58a;border-radius:8px;cursor:pointer}@media(max-width:640px){#story{padding-left:18px;padding-right:18px}}@media(prefers-reduced-motion:reduce){#storyHead,#storyLines p{transition:opacity .01s;transform:none}}