:root{--bg: #e6e3eb;--ink: #1c1a20;--dim: rgba(28, 26, 32, .62);--faint: rgba(28, 26, 32, .36);--hair: rgba(28, 26, 32, .16);--well: rgba(255, 255, 255, .42);--well-focus: rgba(255, 255, 255, .7);--sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", Arial, sans-serif;--line-font: var(--sans);--line-weight: 500;--level: 0;--ui: 1}@media (min-height: 900px){:root{--ui: 1.5}}@media (min-height: 1300px){:root{--ui: 2}}@media (min-height: 1800px){:root{--ui: 2.5}}*{box-sizing:border-box}html,body,#root{height:100%;margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow:hidden}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.exhibit{height:100%;display:grid;grid-template-rows:minmax(0,1fr) auto auto;justify-items:center;padding:calc(24px * var(--ui)) 16px calc(28px * var(--ui));gap:calc(16px * var(--ui))}.body-slot{min-height:0;height:100%;width:100%;display:grid;place-items:center}.words{width:min(100%,calc(760px * var(--ui)));min-height:calc(120px * var(--ui));display:grid;align-content:start;gap:calc(10px * var(--ui));text-align:center}.heard{margin:0;color:var(--dim);font-size:calc(14px * var(--ui));line-height:1.45}.who{display:block;margin-bottom:calc(2px * var(--ui));color:var(--faint);font-size:calc(10px * var(--ui));letter-spacing:.16em;text-transform:uppercase}.line{animation:arrive .36s ease-out both}.line .en{margin:0;font-family:var(--line-font);font-weight:var(--line-weight);font-size:calc(26px * var(--ui));line-height:1.3;text-wrap:balance}.line .zh{margin:calc(8px * var(--ui)) 0 0;color:var(--dim);font-size:calc(20px * var(--ui));line-height:1.45;animation:arrive .36s ease-out both}.cue{margin:0;display:grid;gap:calc(2px * var(--ui));color:var(--dim);font-size:calc(14px * var(--ui));letter-spacing:.02em}[data-mode=standby] .cue,[data-mode=down] .cue{font-size:calc(16px * var(--ui))}.typebox{width:min(100%,calc(520px * var(--ui)))}.typebox input{width:100%;padding:calc(12px * var(--ui)) calc(18px * var(--ui));border:1px solid var(--hair);border-radius:999px;background:var(--well);color:var(--ink);font:inherit;font-size:calc(15px * var(--ui));text-align:center;outline:none;transition:border-color .2s,background-color .2s}.typebox input::placeholder{color:var(--faint)}.typebox input:focus{border-color:var(--faint);background:var(--well-focus)}.debug{position:fixed;left:12px;bottom:10px;color:var(--faint);font:11px ui-monospace,Menlo,monospace}@keyframes arrive{0%{opacity:0;transform:translateY(6px)}}.clips{position:relative;height:100%;max-width:100%;aspect-ratio:9 / 16;display:grid;place-items:center;overflow:hidden;--edge-x: 7%;--edge-top: 7%;--edge-bottom: 3%;-webkit-mask-image:linear-gradient(to right,transparent,#000 var(--edge-x),#000 calc(100% - var(--edge-x)),transparent),linear-gradient(to bottom,transparent,#000 var(--edge-top),#000 calc(100% - var(--edge-bottom)),transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent,#000 var(--edge-x),#000 calc(100% - var(--edge-x)),transparent),linear-gradient(to bottom,transparent,#000 var(--edge-top),#000 calc(100% - var(--edge-bottom)),transparent);mask-composite:intersect}.clips .layer{position:absolute;top:0;right:0;bottom:0;left:0;isolation:isolate;background:var(--bg);opacity:0;transition:opacity 0s linear .28s;pointer-events:none}.clips .layer.still{opacity:1}.clips .layer.front{z-index:1;opacity:1;transition:opacity .28s ease}.clips .flat{position:absolute;top:0;right:0;bottom:0;left:0;mix-blend-mode:darken}.clips .portrait,.clips .clip,.clips .plate{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover}.clips .plate{background:center / 100% 100% no-repeat;mix-blend-mode:multiply}@media (prefers-reduced-motion: reduce){.line,.line .zh{animation:none!important}}
