/* living terminal — paper terminal in the poolside register, modiqo palette */
.lt-wrap{--lt-ink:#19372F;--lt-dim:rgba(25,55,47,.58);--lt-faint:rgba(25,55,47,.34);
  --lt-accent:#B47155;--lt-ok:#3E8355;--lt-bad:#B0442C;--lt-paper:#FFFCF7;--lt-strip:#F1EDE2;
  max-width:1080px;margin:0 auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.lt-strip{background:var(--lt-strip);background-image:radial-gradient(rgba(25,55,47,.05) 1px,transparent 1px);
  background-size:14px 14px;padding:clamp(16px,4vw,44px);border-radius:4px}
/* The window itself is a dark screen set into the paper mat: black ink glass,
   bone type, ember accents. Everything outside the window stays letterpress. */
.lt-window{--lt-ink:#F0EBE1;--lt-dim:rgba(240,235,225,.62);--lt-faint:rgba(240,235,225,.36);
  --lt-accent:#DD9A76;--lt-ok:#8FC79B;--lt-bad:#E08A72;--lt-line:rgba(240,235,225,.13);
  background:#10201B;border:1px solid rgba(16,32,27,.85);border-radius:10px;
  box-shadow:0 1px 2px rgba(25,55,47,.2),0 12px 34px rgba(25,55,47,.18);overflow:hidden}
.lt-titlebar{display:flex;align-items:center;height:36px;padding:0 14px;border-bottom:1px solid var(--lt-line)}
.lt-dots{display:flex;gap:7px}
.lt-dots i{width:11px;height:11px;border-radius:50%}
.lt-dots i:nth-child(1){background:#E5564B}.lt-dots i:nth-child(2){background:#E8A03E}.lt-dots i:nth-child(3){background:#57B45C}
.lt-title{flex:1;text-align:center;font-size:12px;letter-spacing:.04em;color:var(--lt-dim)}
.lt-titlebar span.lt-balance{min-width:47px;display:inline-flex;justify-content:flex-end}
.lt-badge{padding:3px 6px;border:1px solid var(--lt-accent);border-radius:3px;
  font:700 8.5px/1 var(--mono,ui-monospace,monospace);font-style:normal;letter-spacing:.12em;color:var(--lt-accent)}
.lt-body{height:min(480px,58vh);overflow-y:auto;padding:16px 20px 58px;font-size:14.5px;line-height:1.62;color:var(--lt-ink);scrollbar-width:thin;scrollbar-color:rgba(240,235,225,.25) transparent}
.lt-line{white-space:pre-wrap;word-break:break-word;min-height:1.62em}
.lt-coldopen{display:grid;gap:3px;max-width:74ch;padding:0 0 8px}
.lt-coldline{min-height:1.62em;white-space:pre-wrap;word-break:break-word;animation:lt-cold-in .22s ease both}
.lt-cold-switch{margin-top:8px;padding-top:7px;border-top:1px solid var(--lt-line);
  color:var(--lt-faint);font-size:11px;font-weight:700;letter-spacing:.11em}
.lt-cold-switch:first-child{margin-top:0;padding-top:0;border-top:0}
.lt-cold-user{color:var(--lt-ink);font-weight:700}
.lt-cold-agent{padding-left:2ch;color:var(--lt-dim)}
.lt-cold-correct{color:var(--lt-accent);font-weight:700}
.lt-cold-reset{margin:4px 0;color:var(--lt-faint);font-size:11px;font-weight:700;letter-spacing:.08em}
.lt-cold-switch.lt-cold-rote{color:var(--lt-accent)}
.lt-cold-rote:not(.lt-cold-switch){margin-top:2px;padding:6px 9px;border-left:2px solid var(--lt-accent);
  background:rgba(221,154,118,.14);color:var(--lt-ink);font-weight:700}
.lt-line.dim{color:var(--lt-dim)}
.lt-line.dim::before{content:'\00b7  ';color:var(--lt-faint)}
.lt-line.say{color:var(--lt-ink);opacity:.85}
.lt-line.gap{min-height:.95em}
.lt-line.ask{color:var(--lt-accent);font-weight:700;margin:9px 0 3px}
.lt-line.ask::before{content:'\203a\00a0\00a0';font-weight:700}
.lt-line.cmd{color:var(--lt-ink);margin-top:5px}
.lt-line.cmd::before{content:'$\00a0\00a0';color:var(--lt-faint)}
.lt-line.cred{color:var(--lt-ink);padding-left:1ch}
.lt-line.cred::before{content:'\2387\00a0\00a0';color:var(--lt-accent)}
.lt-line.out{color:var(--lt-dim);padding-left:1ch}
.lt-line.out::before{content:'└ ';color:var(--lt-faint)}
.lt-line.out.ok{color:var(--lt-ok)}
.lt-line.out.save{color:var(--lt-accent)}
.lt-line.out.bad{color:var(--lt-bad)}
.lt-line.out.uri{color:var(--lt-accent);font-weight:700}
.lt-line.out.tree{color:var(--lt-dim);padding-left:3ch;letter-spacing:.02em}
.lt-line.out.tree::before{content:''}
.lt-line.work{color:var(--lt-faint);padding-left:1ch}
.lt-line.work::before{content:'└ ';color:var(--lt-faint)}
.lt-card{border:1.5px solid var(--lt-ink);border-radius:6px;padding:10px 14px;margin:8px 0 8px 2ch;max-width:46ch}
.lt-card b{display:block;font-size:12.5px;letter-spacing:.12em;margin-bottom:4px}
.lt-card span{display:block;color:var(--lt-dim)}
.lt-gate{display:flex;align-items:center;gap:14px;margin:10px 0 8px;flex-wrap:wrap}
.lt-gate em{font-style:normal;color:var(--lt-ink);font-weight:700}
.lt-gate em::before{content:'rote · ';color:var(--lt-accent);font-weight:700}
.lt-gate button{font:700 12.5px/1 ui-monospace,Menlo,monospace;letter-spacing:.08em;color:var(--lt-paper);
  background:var(--lt-accent);border:0;border-radius:5px;padding:9px 14px;cursor:pointer}
.lt-gate button:focus-visible{outline:2px solid var(--lt-ink);outline-offset:2px}
.lt-gate button[data-key]::after{
  content:attr(data-key);display:inline-block;margin-left:7px;padding:2px 4px;border:1px solid currentColor;
  font:700 9px/1 var(--mono,ui-monospace,monospace);letter-spacing:.04em;opacity:.68
}
.lt-scene{display:flex;align-items:center;gap:12px;color:var(--lt-faint);margin:14px 0;font-size:12.5px;letter-spacing:.08em}
.lt-scene::before,.lt-scene::after{content:'';flex:1;border-top:1px solid var(--lt-line)}
.lt-cursor{display:inline-block;width:7px;height:16px;background:var(--lt-accent);vertical-align:-2px;
  animation:lt-blink 1.05s steps(1) infinite}
.lt-promptrow{display:flex;align-items:center;gap:8px;border-top:1px solid var(--lt-line);padding:10px 20px;font-size:14.5px}
.lt-promptrow .lt-caret{color:var(--lt-accent);font-weight:700}
.lt-promptrow .lt-typed{color:var(--lt-ink)}
.lt-statusbar{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--lt-line);
  padding:8px 20px;font-size:11.5px;letter-spacing:.05em;color:var(--lt-dim)}
.lt-statusbar b{font-weight:600;color:var(--lt-accent)}

/* Video-style chrome: progress, pause, replay, sound (muted by default). */
.lt-controls{display:flex;align-items:center;gap:16px;margin-top:10px}
/* The strip is a scrubber: click or drag anywhere on it to jump the film.
   The visible line stays hairline-thin; the hit area is the padded band. */
.lt-progress{flex:1 1 auto;height:2px;background:rgba(25,55,47,.12);border-radius:1px;overflow:visible;position:relative;cursor:pointer;touch-action:none}
.lt-progress::before{content:'';position:absolute;inset:-9px 0}
.lt-progress i{display:block;height:100%;width:0;background:var(--lt-accent);pointer-events:none}
/* chapter ticks: where each phase of the film begins */
.lt-progress u{position:absolute;top:-3px;bottom:-3px;width:2px;border-radius:1px;background:color-mix(in srgb,var(--text-primary) 42%,transparent);pointer-events:none}
.lt-progress:hover{height:4px;margin-block:-1px}
.lt-controls button{font:600 12px/1 ui-monospace,Menlo,monospace;letter-spacing:.08em;color:var(--lt-dim);
  background:none;border:0;cursor:pointer;padding:6px 2px;flex:0 0 auto}
.lt-controls button:hover{color:var(--lt-ink)}
.lt-controls button:focus-visible{outline:2px solid var(--lt-accent);outline-offset:2px}
.lt-controls [data-lt="sound"]{padding:7px 10px;border:1px solid rgba(25,55,47,.3);color:var(--lt-ink)}
.lt-controls [data-lt="sound"][aria-pressed="true"]{background:var(--lt-accent);border-color:var(--lt-accent);color:#fffaf4}
.lt-controls [data-lt="sound"][aria-pressed="true"]:hover{color:#fffaf4;filter:brightness(.96)}
@keyframes lt-blink{50%{opacity:0}}
@keyframes lt-cold-in{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .lt-cursor,.lt-coldline{animation:none}
}
@media (max-width:640px){.lt-body{font-size:13px;padding:12px 12px 8px}.lt-promptrow,.lt-statusbar{padding-left:12px;padding-right:12px}}
/* On touch widths the page owns the scroll gesture: the scrollback stops
   consuming thumb-scrolls (auto-follow still tracks programmatically), so
   a swipe over the terminal moves the page instead of trapping in the log. */
@media (max-width:960px){
  .lt-body{overflow-y:hidden;touch-action:pan-y}
}

/* The narration invite: the muted speaker announces the voice exists — a
   one-time callout anchored to the REAL control (the affordance is the
   button itself), plus a soft pulse on the icon. The hero removes the
   class after ~8s, on unmute, or never re-shows it on loops. */
.lt-controls [data-lt="sound"]{position:relative}
.lt-controls [data-lt="sound"].is-inviting{overflow:visible}
.lt-controls [data-lt="sound"].is-inviting::before{
  content:'';position:absolute;inset:-4px;border:1.5px solid var(--lt-accent);
  border-radius:inherit;animation:lt-invite-pulse 1.6s ease-out infinite;pointer-events:none}
.lt-controls [data-lt="sound"].is-inviting::after{
  content:'NARRATED — TAP FOR SOUND';position:absolute;bottom:calc(100% + 11px);left:-6px;
  white-space:nowrap;padding:7px 10px;border-radius:5px;
  background:var(--lt-accent);color:#10201B;
  font:700 10px/1 var(--mono,ui-monospace,monospace);letter-spacing:.09em;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  animation:lt-invite-in .3s ease both;pointer-events:none}
@keyframes lt-invite-pulse{0%{opacity:.9;transform:scale(1)}70%{opacity:0;transform:scale(1.45)}100%{opacity:0;transform:scale(1.45)}}
@keyframes lt-invite-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.lt-controls [data-lt="sound"].is-inviting::before{animation:none;opacity:.6}}
@media (max-width:700px){.lt-controls [data-lt="sound"].is-inviting::after{left:auto;right:-6px}}