:root{--bg:#d9dbd3;--paper:#fbfaf6;--field:#fefdfb;--ink:#1f2b2e;--ink-soft:#55646a;--ink-faint:#8a9698;--line:#1f2b2e29;--seal:#d9482b;--seal-ink:#b5381f;--seal-deep:#962c17;--paw-0:#2f6fde;--paw-1:#e0902b;--paw-2:#1e9e8a;--paw-3:#c2459b;--display:"Shippori Mincho B1", "Yu Mincho", "Hiragino Mincho ProN", serif;--body:"Zen Kaku Gothic New", "Yu Gothic", "Hiragino Sans", system-ui, sans-serif;--mono:"JetBrains Mono", Consolas, monospace;--rail:clamp(14px, 3vw, 40px);--ease:cubic-bezier(.22, 1, .36, 1)}*{box-sizing:border-box}[hidden]{display:none!important}html,body{height:100%;margin:0}body{background:var(--bg);color:var(--ink);font:400 16px/1.75 var(--body);-webkit-font-smoothing:antialiased;overflow:hidden}button,textarea{font:inherit;color:inherit}button{cursor:pointer}:focus-visible{outline:2px solid var(--seal);outline-offset:2px}.sr{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}#stage{touch-action:none;width:100%;height:100%;display:block;position:fixed;inset:0}.masthead{top:var(--rail);left:var(--rail);pointer-events:none;max-width:min(27em,52vw);transition:opacity .5s var(--ease);position:fixed}.masthead.is-away{opacity:0}.kicker{font:500 12px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--seal-ink);margin:0 0 4px}h1{font:800 clamp(30px, 4.4vw, 58px) / 1.15 var(--display);font-feature-settings:"palt" 1;letter-spacing:.01em;text-shadow:0 0 3px var(--bg), 0 0 14px var(--bg), 0 0 28px var(--bg);margin:0}.statement{max-width:min(21em,30vw);color:var(--ink-soft);word-break:keep-all;overflow-wrap:anywhere;margin:12px 0 0;font-size:16px}.views{top:var(--rail);right:var(--rail);display:flex;position:fixed}.views button{background:var(--paper);border:1px solid var(--line);min-height:40px;color:var(--ink-soft);border-left-width:0;padding:0 14px;font-size:14px}.views button:first-child{border-left-width:1px;border-radius:4px 0 0 4px}.views button:last-child{border-radius:0 4px 4px 0}.views button[aria-pressed=true]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--ink);font-weight:700}#sound{border-left-width:1px;border-radius:4px;margin-left:8px}#sound[aria-pressed=false]{text-decoration:line-through}.panel{left:var(--rail);bottom:var(--rail);width:min(600px, calc(100vw - var(--rail) * 2));background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:18px 22px 16px;position:fixed;box-shadow:0 1px #1f2b2e0d,0 18px 40px -18px #46371e61}.run{border-top:1px solid var(--line);margin-bottom:14px;padding-top:12px}.tape{scrollbar-width:thin;gap:14px;padding:2px 40px 10px 2px;display:flex;overflow-x:auto;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 48px),#0000);mask-image:linear-gradient(90deg,#000 calc(100% - 48px),#0000)}.tok{flex:none;gap:1px;display:grid}.tok b{min-height:1.5em;font:500 13px/1.5 var(--body);color:var(--ink-soft);white-space:pre}.tok span{display:flex}.tok i{min-width:.7em;font:500 17px/1.4 var(--mono);color:var(--ink-faint);text-align:center;border-bottom:3px solid #0000;padding:0 1px 2px}.tok i.on{color:var(--ink);border-color:var(--paw)}.tok i.now{background:color-mix(in srgb, var(--paw) 20%, transparent)}[data-p="0"]{--paw:var(--paw-0)}[data-p="1"]{--paw:var(--paw-1)}[data-p="2"]{--paw:var(--paw-2)}[data-p="3"]{--paw:var(--paw-3)}.meter{flex-wrap:wrap;align-items:center;gap:8px 20px;margin-top:8px;display:flex}.paws{color:var(--ink-soft);grid-template-columns:auto auto;gap:0 14px;margin:0;padding:0;font-size:13px;line-height:1.6;list-style:none;display:grid}.paws li{align-items:center;gap:6px;display:flex}.paws i{background:var(--paw);width:10px;height:10px;transition:box-shadow .2s var(--ease);border-radius:50%}.paws li.on{color:var(--ink);font-weight:700}.paws li.on i{box-shadow:0 0 0 3px color-mix(in srgb, var(--paw) 30%, transparent)}.count,.stats{color:var(--ink-soft);margin:0;font-size:13px}.count output,.count span{font:500 15px var(--mono);color:var(--ink)}.stats{flex-basis:100%}.stats b{font:700 14px var(--mono);color:var(--ink)}.controls{gap:6px;margin-left:auto;display:flex}.controls button{border:1px solid var(--line);background:0 0;border-radius:4px;min-height:36px;padding:0 12px;font-size:13px}.controls button:hover{border-color:var(--ink)}textarea{background:var(--field);border:1px solid var(--line);resize:none;border-radius:4px;width:100%;padding:10px 14px;line-height:1.7;display:block}textarea:disabled{color:var(--ink-soft);background:0 0}.foot{align-items:center;gap:14px;margin-top:10px;display:flex}.samples{flex-wrap:wrap;gap:2px 12px;margin-right:auto;display:flex}.samples:before{content:"例文";color:var(--ink-faint);font-size:13px}.samples button{border:0;border-bottom:1px dotted var(--ink-faint);color:var(--ink-soft);background:0 0;padding:0;font-size:13px;line-height:1.5}.samples button:hover{color:var(--seal-ink);border-color:currentColor}.len{font:500 13px var(--mono);color:var(--ink-soft);white-space:nowrap}#go{background:var(--seal-ink);color:#fff8f2;white-space:nowrap;min-height:44px;transition:background .2s, transform .2s var(--ease);border:0;border-radius:4px;padding:0 20px;font-size:15px;font-weight:700}#go:hover{background:var(--seal-deep)}#go:active{transform:translateY(1px)}.is-running .composer{display:none}.panel:has(.run:not([hidden])) .run{border-top:0;padding-top:0}.is-running .run{border:0;margin:0;padding:0}#go:disabled{opacity:.55;cursor:progress}.note{color:var(--ink-soft);margin:8px 0 0;font-size:13px;line-height:1.6}.note:empty{display:none}@media (max-width:1100px){.statement{display:none}}@media (max-width:720px){.views{top:calc(var(--rail) + 70px);left:var(--rail);right:auto}.masthead.is-away+.views{top:var(--rail)}.views button{min-height:36px;padding:0 9px;font-size:13px}.panel{padding:14px 14px 12px}.samples{display:none}.len{margin-right:auto}.controls{flex-basis:100%;margin-left:0}}@media (prefers-reduced-motion:reduce){*{transition:none!important}}
