.story-player{--key-sx:-14px;grid-template-areas:"tv""card""controls";gap:.75rem;display:grid}.story-player__card{grid-area:card;margin-top:.5rem}.story-player__controls{grid-area:controls}.story-player__tv{grid-area:tv;justify-self:center}@media (min-width:64rem){.story-player{grid-template:"card tv""controls tv"/minmax(0,28rem) auto;place-content:center;gap:.625rem clamp(2.5rem,6vw,5rem)}.story-player__card{align-self:end;margin-top:0}.story-player__controls{align-self:start}.story-player__tv{--glass-w:15rem;justify-self:auto}}.story-card,.story-controls{color:var(--color-ink);box-shadow:var(--key-sx) 20px 34px -18px #28180c8c, calc(var(--key-sx) / 4) 2px 4px #28180c38;position:relative}.story-card__paper,.story-controls{background-color:var(--color-paper);background-image:linear-gradient(170deg,#fff0 55%,#28184609),url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.25  0 0 0 0 0.2  0 0 0 0 0.3  0 0 0 0.05 0'/></filter><rect width='220' height='220' filter='url(%23g)'/></svg>");border-radius:2px}.story-card__paper{padding:1.5rem 1.625rem 1.625rem}.story-card__page{font-family:var(--font-body);font-size:var(--text-micro);color:var(--color-ink-soft);letter-spacing:.18em;text-transform:uppercase;font-variant-numeric:tabular-nums}.story-card__title{border-bottom:1px solid var(--color-rule);font-family:var(--font-body);font-size:var(--text-title);font-weight:700;line-height:var(--text-title--line-height);margin-top:.375rem;padding-bottom:.875rem}.story-card__title[data-latin]{letter-spacing:.14em;text-transform:uppercase;font-weight:600}.story-card__lines{margin-top:1rem;display:grid}.story-card__lines>*{grid-area:1/1}.story-card__sizer{visibility:hidden}.story-card__said{animation:story-line-in .48s var(--ease-paper) .18s both}.story-card__said[data-leaving]{pointer-events:none;animation:.18s ease-in both story-line-out}@keyframes story-line-in{0%{opacity:0;transform:translateY(.3rem)}to{opacity:1;transform:none}}@keyframes story-line-out{0%{opacity:1}to{opacity:0;transform:translateY(-.3rem)}}.story-card__line{font-family:var(--font-body);font-size:var(--text-body);line-height:var(--text-body--line-height)}.story-card__zh{font-size:var(--text-small);line-height:var(--text-small--line-height);color:var(--color-ink-soft);margin-top:.5rem}.story-word{font:inherit;color:inherit;text-align:inherit;text-underline-offset:.32em;background:0 0;border:0;padding:0;-webkit-text-decoration:underline dotted #1d1d1f40;text-decoration:underline dotted #1d1d1f40;text-decoration-thickness:1.5px;transition:color .3s}button.story-word{cursor:pointer}.story-card__line[data-live] .story-word[data-ahead]{color:var(--color-ink-soft)}.story-word[aria-current]{text-decoration-color:#0000}button.story-word:hover{-webkit-text-decoration-color:var(--color-mark);text-decoration-color:var(--color-mark)}.story-word__mark [data-hl-mode]{--hl-progress:1;animation:.12s ease-out both story-mark}@keyframes story-mark{0%{opacity:.35}to{opacity:1}}.story-word:focus-visible,.story-tick:focus-visible,.story-pen:focus-visible,.story-play:focus-visible,.story-tv__start:focus-visible{outline:1.5px solid var(--color-mark);outline-offset:4px;border-radius:50% 45% 55% 48%/48% 55% 45% 52%}.story-controls{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.25rem 1rem;padding:.375rem .875rem;display:flex}.story-ticks{margin:0;padding:0;list-style:none;display:flex}.story-tick{cursor:pointer;background:0 0;border:0;place-items:center;width:1.75rem;height:2.75rem;padding:0;display:grid}.story-tick svg{fill:none;stroke:#48484a73;stroke-width:1.6px;stroke-linecap:round;width:.75rem;height:1.5rem;transition:stroke .4s ease, transform .5s var(--ease-paper)}.story-tick[data-read] svg{stroke:var(--color-pencil)}.story-tick[aria-current] svg{stroke:var(--color-mark);stroke-width:2.2px;transform:scaleY(1.35)}.story-buttons{align-items:center;gap:.25rem;display:flex}.story-pen,.story-play{min-height:2.75rem;color:var(--color-ink);cursor:pointer;background:0 0;border:0;justify-content:center;align-items:center;padding:0 .5rem;display:inline-flex}.story-pen svg{width:2.5rem;height:.9rem;color:var(--color-ink)}.story-pen--back svg{transform:scaleX(-1)}.story-pen:disabled{opacity:.25;cursor:default}.story-play{font-family:var(--font-body);font-size:var(--text-small);gap:.375rem}.story-play__mark{place-items:center;width:2.5rem;height:2.5rem;display:grid;position:relative}.story-play__icon{width:1.125rem;height:1.125rem;fill:var(--color-ink)}.story-play__ring{width:calc(100% + .25rem);height:calc(100% + .25rem);color:var(--color-mark);position:absolute;inset:-.125rem}
.story-tv{--glass-w:204px;--pw:9;--ph:16;--sx:0;--sy:0;--sw:9;--sh:16;--sr:1.2;z-index:3;width:calc(var(--glass-w) * var(--pw) / var(--sw));aspect-ratio:var(--pw) / var(--ph);position:relative}.story-tv:not([data-picture]){--glass-w:236px}.story-tv__art{pointer-events:none;-webkit-user-select:none;user-select:none;width:100%;max-width:none;height:100%;position:absolute;inset:0}.story-tv__screen{left:calc(var(--sx) / var(--pw) * 100%);top:calc(var(--sy) / var(--ph) * 100%);width:calc(var(--sw) / var(--pw) * 100%);height:calc(var(--sh) / var(--ph) * 100%);border-radius:calc(var(--glass-w) * var(--sr) / var(--sw));background:linear-gradient(172deg,#2b2150 0%,#5a3a78 42%,#c68a63 88%,#e8b77e 100%);position:absolute;overflow:hidden}.story-tv__memo{color:#fbf8f1;text-align:center;align-content:center;justify-items:center;gap:.35rem;padding:0 .75rem;display:grid;position:absolute;inset:0 0 auto}.story-tv__meta{font-family:var(--font-body);font-size:var(--text-micro);letter-spacing:.08em;opacity:.85}.story-tv__title{font-family:var(--font-body);font-size:var(--text-small);font-weight:600;line-height:1.25}.story-tv__wave{align-items:center;gap:2px;height:2.25rem;margin-top:.4rem;display:flex}.story-tv__wave i{width:3px;height:var(--h);opacity:.8;transform-origin:50%;background:#fbf8f1;border-radius:2px;display:block}.story-tv[data-playing] .story-tv__wave i{animation:story-wave calc(.6s + var(--n) * 37ms) ease-in-out calc(var(--n) * -.09s) infinite alternate}@keyframes story-wave{0%{transform:scaleY(.45)}to{transform:scaleY(1)}}.story-tv__player,.story-tv__start{position:absolute;inset:0}.story-tv__player{background:#0e1119}.story-tv[data-picture]:not([data-ready]) .story-tv__player{background:0 0}.story-tv__mount,.story-tv__player>iframe{border:0;width:100%;height:100%;position:absolute;inset:0}.story-tv__start{z-index:1;color:#fbf8f1;cursor:pointer;background:0 0;border:0;place-items:center;padding:0;display:grid}.story-tv__play{fill:#fbf8f1;border:1.5px solid #fbf8f1d9;border-radius:50%;width:3.25rem;height:3.25rem;padding:.9rem .8rem .9rem 1rem}.story-tv[data-picture] .story-tv__memo{z-index:1;background:linear-gradient(#140e249e,#140e244d 60%,#140e2400);align-content:start;padding-top:1rem;padding-bottom:2.5rem}.story-tv[data-picture] .story-tv__wave,.story-tv[data-picture][data-ready] .story-tv__memo{display:none}.story-tv__poster{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.story-tv[data-picture]:not([data-ready]) .story-tv__play{background:#14101e59}.story-tv:not([data-picture]) .story-tv__player,.story-tv:not([data-picture]) .story-tv__start{border-radius:14px;height:204px;inset:auto 16px 16px;overflow:hidden}.story-tv:not([data-picture]):not([data-ready]) .story-tv__player{background:#ffffff14}.story-tv:not([data-picture]) .story-tv__player{box-shadow:inset 0 0 0 1px #ffffff38,0 0 0 3px #140c288c,0 0 0 4px #ffffff24,0 8px 18px -8px #0a061e99}.story-tv:not([data-picture]) .story-tv__memo{height:calc(100% - 252px)}.story-tv__pane{z-index:1;color:#fbf8f1d9;font-family:var(--font-body);font-size:var(--text-micro);letter-spacing:.06em;position:absolute;bottom:226px;left:18px}