:root{--bg:#f7f2ea;--fg:#1f2a30;--muted:#5d6a70;--line:#e3d9cb;--accent:#2f6f73;--label-bg:#1f2a30;--label-fg:#fff;color-scheme:light}@media (prefers-color-scheme:dark){:root{--bg:#12181b;--fg:#e9eef0;--muted:#a3b0b5;--line:#26313a;--accent:#7cc4c4;--label-bg:#fff;--label-fg:#1f2a30;color-scheme:dark}}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--bg);height:100dvh;color:var(--fg);grid-template-rows:auto minmax(0,1fr);grid-template-columns:minmax(0,1fr);font-family:system-ui,-apple-system,Segoe UI,Roboto,Noto Sans,Noto Sans Arabic,Noto Sans Hebrew,Noto Sans CJK JP,sans-serif;display:grid}.bar{padding:10px max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));border-bottom:1px solid var(--line);align-items:center;gap:12px;display:flex}.brand{letter-spacing:.02em;color:var(--accent);font-weight:700}.scene-name{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;margin:0;font-size:1.05rem;font-weight:600;overflow:hidden}.scene-picker{max-width:100%;font:inherit;color:var(--fg);background:var(--bg);text-overflow:ellipsis;cursor:pointer;border:1px solid #0000;border-radius:8px;margin-inline-start:-7px;padding:4px 6px}.scene-picker:hover{border-color:var(--line)}.scene-picker:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.styles{gap:6px;display:flex}.style{cursor:pointer;opacity:.65;background:0 0;border:2px solid #0000;border-radius:7px;padding:0;line-height:0}.style img{object-fit:cover;border-radius:5px;width:48px;height:32px}.style.on{border-color:var(--accent);opacity:1}.style:hover{opacity:1}.style:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.all-names,.readings{border:1px solid var(--line);background:var(--bg);width:36px;height:36px;color:var(--fg);cursor:pointer;border-radius:8px;place-items:center;padding:0;display:grid}.all-names svg{fill:none;stroke:currentColor;stroke-width:2px;width:22px;height:22px}.all-names.on,.readings.on{border-color:var(--accent);background:var(--accent);color:var(--bg)}.all-names.on svg{fill:currentColor}.all-names:focus-visible,.readings:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.readings ruby{font-size:16px;font-weight:600;line-height:1}.readings rt{font-size:9px}.forms{border:1px solid var(--line);border-radius:8px;display:flex;overflow:hidden}.form{border:none;border-left:1px solid var(--line);background:var(--bg);width:34px;height:34px;color:var(--fg);cursor:pointer;place-items:center;padding:0;display:grid}.form:first-child{border-left:none}.form svg{fill:currentColor;width:20px;height:20px}.form.on{background:var(--accent);color:var(--bg)}.form:focus-visible{outline:2px solid var(--accent);outline-offset:-4px}.picker{font:inherit;border:1px solid var(--line);background:var(--bg);color:var(--fg);border-radius:8px;padding:6px 10px;font-size:1rem}@media (width<=600px){.bar{flex-wrap:wrap;gap:8px}.form{width:30px}.scene-name{flex:calc(100% - 200px)}.all-names,.forms,.readings{order:1}.styles,.picker{order:2}.picker{margin-inline-start:auto}}.main{min-height:0;display:grid;overflow:clip}.viewport{place-items:center;min-height:0;display:grid;overflow:hidden;container-type:size}.stage{aspect-ratio:var(--w) / var(--h);width:min(100cqw, 100cqh * var(--w) / var(--h));-webkit-user-select:none;user-select:none;position:relative;container-type:inline-size}@media (orientation:portrait) and (width<=600px){.viewport{-webkit-overflow-scrolling:touch;place-items:center start;overflow:auto hidden}.stage{width:auto;height:100cqh}}.viewport[data-came]{animation:none}.viewport[data-came=next]{animation-name:from-right}.viewport[data-came=previous]{animation-name:from-left}.viewport[data-came].ready{animation-play-state:running}@keyframes from-right{0%{opacity:0;translate:8%}}@keyframes from-left{0%{opacity:0;translate:-8%}}.stage>img,.stage>svg{width:100%;height:100%;position:absolute;inset:0}.stage>img{object-fit:contain;pointer-events:none;-webkit-touch-callout:none}.sign{pointer-events:none}.region{fill:#0000;pointer-events:fill;fill-rule:evenodd;cursor:pointer;-webkit-tap-highlight-color:transparent;outline:none}.region:focus-visible{stroke:var(--accent);stroke-width:4px;vector-effect:non-scaling-stroke}.dim,.outline{pointer-events:none;opacity:0;transition:opacity .15s .15s}.dim.on,.outline.on{opacity:1;transition-delay:0s}.dim{fill:#141c2061;fill-rule:evenodd}.outline{fill:none;fill-rule:evenodd;stroke:#fff;stroke-width:3px;stroke-linejoin:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 2px #000000b3)}.step{color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:none;place-items:center;width:clamp(28px,3cqw,48px);padding:0;display:grid;position:absolute;top:0;bottom:0}.step[data-side=previous]{left:0}.step[data-side=next]{right:0}.step:before{content:"";background:linear-gradient(90deg,#141c208c,#141c2000);position:absolute;inset:0}.step[data-side=next]:before{background:linear-gradient(270deg,#141c208c,#141c2000)}.step svg{fill:none;stroke:currentColor;stroke-width:3px;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 2px #000000b3);width:70%;position:relative}.step:before,.step svg{opacity:0;transition:opacity .15s}.step:hover:before,.step:hover svg,.step:focus-visible:before,.step:focus-visible svg{opacity:1}.step:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}@media (hover:none){.step:before,.step svg{opacity:.5}}.label{background:var(--label-bg);color:var(--label-fg);white-space:nowrap;pointer-events:none;opacity:0;border-radius:10px;padding:6px 14px;font-size:clamp(1.1rem,3.5vmin,2rem);font-weight:600;line-height:1.3;transition:opacity .15s .15s;position:absolute;transform:translate(-50%,calc(-100% - 10px));box-shadow:0 4px 14px #00000040}.label.on{opacity:1;transition-delay:0s}.label,.tag{text-align:center}.label span,.tag span{display:block}.label rt{font-size:.5em}.tag rt{font-size:max(.55em,8px)}.label[data-edge=below]{transform:translate(-50%,10px)}.label[data-edge=start]{transform:translate(10px,-50%)}.label[data-edge=end]{transform:translate(calc(-100% - 10px),-50%)}.tags{pointer-events:none;opacity:0;visibility:hidden;transition:opacity .2s,visibility 0s .2s;position:absolute;inset:0}.tags.on{opacity:1;visibility:visible;transition:opacity .2s}.tag{background:var(--label-bg);color:var(--label-fg);white-space:nowrap;border-radius:.5em;padding:.15em .55em;font-size:clamp(11px,1.3cqw,17px);font-weight:600;line-height:1.3;transition:opacity .15s;position:absolute;transform:translate(-50%,-50%);box-shadow:0 2px 6px #0000004d}.tags.aside .tag{opacity:.35}.tags.aside .tag.pointed{opacity:0}@media (prefers-reduced-motion:reduce){.dim,.outline,.step:before,.step svg,.label,.tags,.tag{transition:none}.viewport[data-came]{animation:none}}