@import url('./fonts/qiji.css');
@import url('./fonts/glow.css');
@import url('./fonts/human.css');
@import url('./fonts/system.css');

:root {
  color-scheme: light;
  --paper:#faf9f6; --ink:#514738; --ai:#48677c; --muted:#85837c;
  --edge:clamp(24px,4.2vw,64px); --press-x:50vw; --press-y:45vh;
  font-family: 'PingFang SC',system-ui,sans-serif;
}
* {box-sizing:border-box;}
html,body {margin:0; width:100%; height:100%; overflow:hidden; background:var(--paper); color:var(--ink);}
body {-webkit-tap-highlight-color:transparent; overscroll-behavior:none;}
button,a {color:inherit; font:inherit; -webkit-tap-highlight-color:transparent;}
button {background:none; border:0; cursor:pointer;}
a {text-decoration:none;}
a:focus-visible,button:focus-visible {outline:1px solid var(--ai); outline-offset:5px;}
[hidden] {display:none !important;}
#stage {position:fixed; inset:0; background:var(--paper); touch-action:none; user-select:none; -webkit-user-select:none;}
/* A barely perceptible paper grain, without lighting effects or scenery. */
#stage::before {content:''; position:absolute; inset:0; pointer-events:none; opacity:.018; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' filter='url(%23p)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");}
.interaction-zone {position:absolute; inset:0 0 90px; z-index:1; cursor:default;}
.performance {position:absolute; top:50%; left:50%; transform:translate(-50%,-55%); width:min(76vw,430px); display:grid; grid-template-rows:auto auto; row-gap:32px; pointer-events:none; z-index:2;}
.sentence-frame {position:relative; height:min(52dvh,440px); width:100%;}
.sentence {position:absolute; top:max(0px,calc((100% - var(--block-height,100%)) / 2)); width:100%; margin:0; text-align:left; font:400 50px/1.62 'Held Woodcut','Held Human',serif; transition:opacity .8s ease;}
.sentence[data-speaker='AI'],.sentence[data-rewrite-by='AI'] .unit.system {font-family:'Held Glow',sans-serif; color:var(--ai);}
.sentence[data-speaker='人'],.sentence[data-rewrite-by='人'] .unit.system {font-family:'Held Woodcut','Held Human',serif; color:var(--ink);}
.sentence .unit {position:absolute; display:inline-block; white-space:pre; margin:0; line-height:1.62; letter-spacing:0; font-weight:400;}
.sentence[data-speaker='AI'] .unit.voice,
.sentence[data-rewrite-by='AI'] .unit.system {font-size:1em; line-height:1.62; letter-spacing:0;}
.sentence[data-speaker='AI'] .unit.voice .glyph,
.sentence[data-rewrite-by='AI'] .unit.system .glyph {position:relative; top:-.11em;}
html[lang='en'] .sentence .unit .glyph {top:0;}
.sentence .glyph {position:relative; display:inline-block; transform-origin:50% 70%; transition:text-decoration-color .25s ease, text-shadow .55s ease; text-shadow:0 0 calc(var(--near,0) * 14px) color-mix(in srgb, currentColor calc(var(--near,0) * 28%), transparent);}
html[lang='en'] .sentence .unit.voice,
html[lang='en'] .sentence .unit.system {letter-spacing:0;}
.is-leaving #sentence,.is-flying #sentence {opacity:0; visibility:hidden;}
.is-gone #sentence {opacity:0; transition-duration:.45s;}
.is-interstitial #sentence {visibility:hidden;}
.hold-line {position:absolute; inset:0; margin:0; display:flex; align-items:center; justify-content:flex-start; font:400 30px/1.5 'Held Woodcut','Held Human',serif; color:var(--ink); letter-spacing:.04em; pointer-events:none; opacity:0; z-index:1;}
.is-interstitial .hold-line {opacity:var(--invite,0);}
.is-interstitial .performance-foot {opacity:0;}
.performance-foot {display:flex; justify-content:space-between; align-items:center; gap:20px; min-height:26px;}
.speaker-label {margin:0; display:flex; align-items:center; gap:13px; height:24px; font:400 10px/1 system-ui,sans-serif; letter-spacing:.08em; white-space:nowrap;}
.identity-name {color:#99978f; transition:color .7s ease;}
.identity-name[data-name='human'] {font-family:'PingFang SC',system-ui,sans-serif;}
.identity-infinity {width:39px; height:17px; overflow:visible;}
.identity-arc {fill:none; stroke:#cecac0; stroke-width:.85; transition:stroke .7s ease,stroke-width .7s ease;}
.speaker-label[data-active='human'] .identity-arc[data-actor='human'] {stroke:var(--ink); stroke-width:1.1;}
.speaker-label[data-active='ai'] .identity-arc[data-actor='ai'] {stroke:var(--ai); stroke-width:1.1;}
.speaker-label[data-active='human'] [data-name='human'] {color:var(--ink);}
.speaker-label[data-active='ai'] [data-name='ai'] {color:var(--ai);}
.cue {margin:0; color:var(--muted); font:400 11px/1.8 'PingFang SC',system-ui,sans-serif; letter-spacing:.07em; white-space:nowrap; transition:opacity .3s;}
.cue-hold {color:var(--ink);}
.is-holding .cue {opacity:.55;}
.hold-rings {position:absolute; left:var(--press-x); top:var(--press-y); width:88px; height:88px; margin:-44px 0 0 -44px; pointer-events:none; z-index:4; opacity:0; transition:opacity .25s;}
.hold-rings.is-on {opacity:1;}
.hold-rings svg {width:100%; height:100%; overflow:visible;}
.hold-rings circle {fill:none; transform:rotate(-90deg); transform-origin:50% 50%; stroke-linecap:round;}
.ring-track {stroke:#a3a49c; stroke-width:.65; opacity:.22;}
.ring-fill {stroke:var(--ink); stroke-width:1; stroke-dasharray:1;}
.ring-delay.ring-fill {stroke-dashoffset:calc(1 - var(--delay-fill,0));}
.ring-save {opacity:0; transition:opacity .25s;}
.hold-rings.is-recovering .ring-save {opacity:1;}
.hold-rings.is-recovering .ring-save.ring-track {opacity:.22;}
.ring-save.ring-fill {stroke:var(--ai); stroke-dashoffset:calc(1 - var(--save-fill,0));}
.edition-footer {position:absolute; left:var(--edge); right:var(--edge); bottom:max(24px,env(safe-area-inset-bottom)); display:flex; align-items:center; justify-content:space-between; gap:20px; z-index:6; color:#79786f; font-size:10px; line-height:1.5; letter-spacing:.06em;}
.wall-link {position:relative; display:flex; gap:14px; align-items:baseline; padding:12px 0; min-height:44px;}
#wall-label {position:relative; z-index:1;}
#saved-total {font:400 10px/1 'Held System',ui-monospace,monospace; color:#aaa79b; letter-spacing:0;}
.wall-link.has-kept {color:#5c574e; animation:archive-breath 9.5s ease-in-out infinite;}
.wall-link.has-kept #saved-total {color:#6f6a60;}
.archive-peek {position:absolute; left:0; bottom:8px; max-width:3.2em; overflow:hidden; font:400 11px/1 'Held Woodcut','Held Human',serif; color:var(--ink); letter-spacing:.1em; opacity:0; transform:translateY(5px); pointer-events:none; white-space:nowrap; z-index:0; transition:opacity .9s ease, transform 1.1s ease;}
.wall-link.is-peeling .archive-peek {opacity:.28; transform:translateY(-3px);}
@keyframes archive-breath {
  0%, 100% {opacity:1;}
  50% {opacity:.72;}
}
.stage-tools {display:flex; align-items:center; gap:28px;}
.language-switch {display:flex; align-items:center; gap:6px; font-size:10px;}
.language-switch>span {color:#c1beb5;}
.language-switch button {padding:12px 1px; min-height:40px; color:#a3a198; font-size:10px;}
.language-switch button[aria-pressed='true'] {color:#53554e;}
.about-toggle {padding:12px 0; min-height:40px; font-size:10px; color:inherit; letter-spacing:inherit;}
.edition-footer a:hover,.edition-footer button:hover {color:#2b393e;}
.technical-traces {display:none;}
.about-backdrop {position:fixed; inset:0; background:#eeede880; backdrop-filter:blur(5px); z-index:10;}
.about-text {position:fixed; inset:0 0 0 auto; width:min(540px,100%); margin:0; padding:clamp(28px,5vw,64px); overflow:auto; overscroll-behavior:contain; touch-action:pan-y; background:var(--paper); z-index:11; user-select:text; -webkit-user-select:text; box-shadow:-16px 0 80px #39342808;}
.about-close {display:block; margin:-10px -8px 64px auto; padding:10px 8px; color:#77776e; font-size:11px;}
.about-text h1 {max-width:280px; margin:0 0 40px; font:400 30px/1.55 'Held Human',serif; letter-spacing:.025em; color:var(--ink);}
.about-text p {margin:0 0 22px; font-size:13px; line-height:2; color:#68675f;}
.about-text .about-footnote {margin-top:32px; font-size:11px; color:#89867c;}
.about-actions {display:flex; flex-wrap:wrap; gap:20px; align-items:center; margin-top:32px; color:var(--ai); font-size:11px;}
.about-actions button {padding:10px 0;}
.about-actions button:disabled {opacity:.4; cursor:default;}
.about-totals {margin-top:38px !important; font-size:10px !important; color:#99958a !important;}
@media (max-width:600px) {
  .performance {width:78vw; row-gap:24px;}
  .performance-foot {gap:12px;}
  .speaker-label {gap:8px; font-size:10px;}
  .identity-infinity {width:34px;}
  .cue {font-size:10px; letter-spacing:0;}
  .edition-footer {bottom:max(19px,env(safe-area-inset-bottom)); font-size:10px;}
  .stage-tools {gap:19px;}
  .about-close {margin-bottom:44px;}
}
@media (max-height:650px) {
  .performance {row-gap:20px;}
}
@media (max-height:480px) {
  .performance {top:47%; width:min(68vw,470px); row-gap:12px;}
  .sentence-frame {height:53dvh;}
  .edition-footer {bottom:10px;}
  .about-close {margin-bottom:24px;}
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {transition:none !important; animation:none !important;}
}

/* Familiar proofing marks are the intervention, not a separate spectacle. */
.unit.needs-correction .glyph {
  text-decoration-line:underline;
  text-decoration-style:wavy;
  text-decoration-color:#c24c43;
  text-decoration-thickness:1.3px;
  text-underline-offset:.16em;
  text-decoration-skip-ink:none;
}
.unit.is-glitching .glyph {
  text-decoration-color:#ff4d6a;
}
.unit.is-glitching[data-glitch='soul'] .glyph {
  text-decoration-color:#c8603f;
}
.sentence-flight {position:fixed; margin:0; z-index:5; pointer-events:none; transform-origin:50% 50%; transition:transform 1s cubic-bezier(.22,.1,.18,1), opacity 1s ease;}
.performance {width:min(80vw,560px);}
.sentence {line-height:1.62;}
.speaker-label {gap:10px;}
.correction-mode {font:400 10px/1 system-ui,sans-serif;color:#85837c;letter-spacing:.08em;margin-right:10px;}
html[lang='en'] .correction-mode {font-size:9px;}
@media(max-width:600px) {
 .performance {width:80vw;}
 .speaker-label {gap:7px;font-size:9px;}
 .correction-mode {font-size:9px;margin-right:4px;letter-spacing:0;}
 html[lang='en'] .performance-foot {flex-wrap:wrap;row-gap:8px;}
}