:root{--paper:#fff;--ink:#16141c;--quiet:#534f5a;--rainbow:linear-gradient(90deg, #ff4d6a 0%, #ff8a4a 16%, #ffd24a 32%, #5dff8a 48%, #4ddbff 64%, #7a7bff 80%, #ff5cb0 92%, #ff4d6a 100%);--pad:max(18px, env(safe-area-inset-left));--pad-r:max(18px, env(safe-area-inset-right));--pad-t:max(16px, env(safe-area-inset-top));--pad-b:max(26px, env(safe-area-inset-bottom));--hit:44px}*,:before,:after{box-sizing:border-box}html{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;background:var(--paper)}html,body{height:100%;color:var(--ink);-webkit-font-smoothing:antialiased;touch-action:manipulation;-webkit-tap-highlight-color:transparent;margin:0;font-family:Figtree,system-ui,sans-serif}body{overscroll-behavior:none;overflow:hidden}body.clean [data-chrome]{opacity:0;pointer-events:none;transition:opacity .16s}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}#viewport{background:var(--paper);place-items:center;display:grid;position:fixed;inset:0}body.dropping #viewport:after{content:"";border:1.5px solid var(--ink);pointer-events:none;z-index:4;position:absolute;inset:10px}#frame{background:#fff;width:100vw;height:100vh;position:relative}#poster,#stage{width:100%;height:100%;display:block;position:absolute;inset:0}#poster{object-fit:contain;background:#fff}#stage{touch-action:none;cursor:grab}#stage:active{cursor:grabbing}#poster[hidden],#stage[hidden]{display:none}.mark{top:var(--pad-t);left:var(--pad);z-index:2;pointer-events:none;max-width:min(28rem,100vw - 11rem);position:fixed}.subjects,.families{pointer-events:auto;gap:.35rem;margin-top:.35rem;display:flex}.families[hidden]{display:none}.word{letter-spacing:-.07em;text-wrap:balance;margin:0;font-family:Syne,sans-serif;font-size:clamp(1.85rem,3.6vw,3.1rem);font-weight:800;line-height:.85}.aside{letter-spacing:.16em;text-transform:uppercase;color:var(--quiet);margin:.5rem 0 0;font-size:.72rem;font-weight:500}.tools{top:var(--pad-t);right:var(--pad-r);z-index:2;flex-direction:column;align-items:flex-end;gap:.35rem;display:flex;position:fixed}.subjects button,.families button,.actions button,.menu summary,.sheet-close,#speed{appearance:none;min-height:var(--hit);font:inherit;color:var(--quiet);cursor:pointer;letter-spacing:.16em;text-transform:uppercase;background:0 0;border:0;align-items:center;padding:0 .45rem;font-size:.72rem;font-weight:600;display:inline-flex}.subjects button,.families button{position:relative}.subjects button[aria-selected=true],.families button[aria-selected=true]{color:var(--ink)}.subjects button[aria-selected=true]:after,.families button[aria-selected=true]:after{content:"";background:currentColor;width:1.35em;height:1.5px;position:absolute;bottom:10px;left:50%;transform:translate(-50%)}.actions button:hover,.subjects button:hover,.families button:hover,.menu summary:hover,#speed:hover,.sheet-close:hover{color:var(--ink)}.menu{position:relative}.menu summary{list-style:none}.menu summary::-webkit-details-marker{display:none}.menu[open]>summary{color:var(--ink)}.menu-list{z-index:5;background:var(--paper);border:1px solid var(--ink);flex-direction:column;min-width:7.5rem;padding:.15rem 0;display:flex;position:absolute;bottom:calc(100% + 4px);right:0}.menu-list button{justify-content:flex-start;width:100%;min-height:36px}.hint{left:var(--pad);bottom:calc(var(--pad-b) + 72px);z-index:4;border:1.5px solid var(--ink);background:var(--paper);color:var(--ink);font:inherit;letter-spacing:.02em;cursor:pointer;margin:0;padding:.5rem .9rem;font-size:.78rem;font-weight:500;position:fixed}.hint kbd{font-family:IBM Plex Mono,ui-monospace,monospace;font-size:.85em;font-weight:500}.hint[hidden]{display:none}.spectrum{letter-spacing:.18em;text-transform:uppercase;color:var(--quiet);flex-direction:column;align-items:flex-end;gap:.2rem;font-size:.72rem;font-weight:500;display:flex}.spectrum input,.scrub{appearance:none;background:var(--rainbow);cursor:pointer;border:0;margin:0}.spectrum input{border-radius:999px;width:min(168px,38vw);height:10px}.spectrum input::-webkit-slider-thumb{appearance:none;border:2px solid var(--ink);background:var(--paper);border-radius:50%;width:16px;height:16px}.scrub::-webkit-slider-thumb{appearance:none;border:2px solid var(--ink);background:var(--paper);border-radius:50%;width:16px;height:16px}.spectrum input::-moz-range-thumb{border:2px solid var(--ink);background:var(--paper);border-radius:50%;width:16px;height:16px}.scrub::-moz-range-thumb{border:2px solid var(--ink);background:var(--paper);border-radius:50%;width:16px;height:16px}.composer{left:50%;bottom:calc(var(--pad-b) + 64px);z-index:2;width:min(28rem,100vw - 2.5rem);position:fixed;transform:translate(-50%)}.composer[hidden],.composer [hidden]{display:none}#word-input,.upload{width:100%;min-height:var(--hit);border:1.5px solid var(--ink);background:var(--paper);color:var(--ink);font:inherit;border-radius:999px}#word-input{letter-spacing:-.04em;padding:.55rem 1.1rem;font-family:Syne,sans-serif;font-size:1.05rem;font-weight:700}.upload{text-align:center;letter-spacing:.12em;text-transform:uppercase;color:var(--quiet);cursor:pointer;place-items:center;padding:.45rem 1.1rem;font-size:.78rem;font-weight:600;display:grid}.upload input{display:none}body.dropping .upload,.upload:hover{color:var(--ink)}#word-input:focus-visible,.upload:focus-visible,.spectrum input:focus-visible,.scrub:focus-visible,#play:focus-visible,.subjects button:focus-visible,.families button:focus-visible,.actions button:focus-visible,.menu summary:focus-visible,.hint:focus-visible,#speed:focus-visible,.sheet-close:focus-visible{outline:2px solid var(--ink);outline-offset:3px}.dock{left:var(--pad);right:var(--pad-r);bottom:calc(var(--pad-b) + 10px);z-index:3;grid-template-columns:auto auto 1fr;align-items:center;gap:.75rem;display:grid;position:fixed}#play{width:var(--hit);height:var(--hit);border:1.5px solid var(--ink);background:var(--paper);color:var(--ink);cursor:pointer;border-radius:50%;place-items:center;padding:0;display:grid}#play svg{fill:currentColor;grid-area:1/1;width:18px;height:18px;display:none}#play[aria-pressed=true] #icon-pause,#play[aria-pressed=false] #icon-play{display:block}.clock{font-variant-numeric:tabular-nums;margin:0;font-family:IBM Plex Mono,ui-monospace,monospace;font-size:.9rem;font-weight:500}.clock .total{color:var(--quiet)}.actions{flex-wrap:wrap;justify-content:flex-end;gap:.2rem;display:flex}.scrub{z-index:3;height:calc(18px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);position:fixed;bottom:0;left:0;right:0}.sheet{border:1px solid var(--ink);background:var(--paper);width:min(22rem,100vw - 2rem);color:var(--ink);overscroll-behavior:contain;padding:1.4rem 1.5rem 1.2rem}.sheet::backdrop{background:#ffffff9e}.sheet-title{letter-spacing:-.05em;margin:0 0 .9rem;font-family:Syne,sans-serif;font-size:1.4rem;font-weight:800}.sheet dl{gap:.45rem;margin:0;display:grid}.sheet dl div{grid-template-columns:6.2rem 1fr;gap:.6rem;font-size:.88rem;display:grid}.sheet dt{font-family:IBM Plex Mono,ui-monospace,monospace;font-weight:500}.sheet dd{color:var(--quiet);margin:0}.sheet-close{margin-top:.6rem;padding-left:0}@media (width<=720px){.word{font-size:1.55rem}.mark{max-width:calc(100vw - 8.5rem)}.families button{letter-spacing:.1em;padding:0 .3rem}.hint{bottom:calc(var(--pad-b) + 118px)}.aside{letter-spacing:.1em}.composer{left:var(--pad);right:var(--pad-r);bottom:calc(var(--pad-b) + 128px);width:auto;transform:none}.actions button:nth-child(n+3){display:none}.spectrum{width:min(132px,36vw)}.spectrum input{width:100%}.spectrum span{clip:rect(0 0 0 0);width:1px;height:1px;position:absolute;overflow:hidden}.dock{grid-template-columns:auto 1fr}.actions{grid-column:1/-1;justify-content:flex-start}.scrub{height:calc(24px + env(safe-area-inset-bottom))}}@media (prefers-reduced-motion:reduce){body.clean [data-chrome]{transition:none}#stage{cursor:default}}