:root {
  --ink: #17252a;
  --paper: #e8edef;
  --blue: #2446b5;
  --red: #d23d2b;
  --red-ink: #a42b1e;
  --mid: #66777d;
  --faint: #9aa9ad;
  --faint-line: #becbce;
  --border: #cad5d7;
  --body-text: #34454b;
  --sheet: #f5f7f7;
  --sans: 'Archivo', Helvetica, sans-serif;
  --mono: 'Geist Mono', ui-monospace, monospace;
  --header-h: 52px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--paper); }
body { min-height: 100vh; display: flex; flex-direction: column; color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
::selection { background: var(--blue); color: white; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--blue); }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
p { text-wrap: pretty; }

.site-header { position: fixed; inset: 0 0 auto; height: var(--header-h); z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 28px; background: rgba(232,237,239,.96); border-bottom: 1px solid var(--border); backdrop-filter: blur(6px); }
.brand-group { display: flex; align-items: center; gap: 18px; }
.brand-mark { display: inline-flex; align-items: center; gap: 11px; }
.brand-mark svg { display: block; flex: none; }
.brand-name { font-size: 14px; font-weight: 600; letter-spacing: .06em; }
.brand-tag { color: var(--mid); font: 10px var(--mono); letter-spacing: .14em; border-bottom: 1px dotted var(--faint); padding-bottom: 2px; }
.header-links { display: flex; align-items: center; gap: 25px; font: 10px var(--mono); letter-spacing: .13em; }
.header-links > a { color: var(--blue); white-space: nowrap; }
.header-links > a:hover { color: var(--red); }
.protocol-status { color: var(--red-ink); }
.live-indicator { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.pulse { width: 7px; height: 7px; background: var(--red); border-radius: 50%; animation: pulse 1.65s infinite; }
.live-indicator.is-paused .pulse { animation: none; opacity: .35; }
.live-indicator.is-paused #live-state { color: var(--red-ink); }
.clock { margin-left: 9px; color: var(--mid); }
@keyframes pulse { 50% { opacity: .28; transform: scale(.72); } }

.main { flex: 1; }
.page { max-width: 1120px; margin: 0 auto; padding: 90px 40px 120px; }
.back-link { color: var(--mid); font: 10px var(--mono); letter-spacing: .18em; }
.back-link:hover { color: var(--red); }
.site-footer { display: flex; align-items: baseline; justify-content: space-between; gap: 22px; padding: 18px 28px; border-top: 1px solid var(--border); color: var(--faint); font: 10px/1.5 var(--mono); letter-spacing: .12em; }
.site-footer a:hover { color: var(--red); }

.heard-opening { margin-top: 30px; padding: 14px 0 32px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.heard-kicker { display: flex; justify-content: space-between; gap: 16px; color: var(--mid); font: 10px var(--mono); letter-spacing: .17em; }
.heard-opening h1 { margin: 28px 0 3px; font-size: clamp(68px, 10.6vw, 142px); line-height: .9; letter-spacing: -.055em; font-weight: 500; }
.heard-title-period { color: var(--red); }
.heard-intro { display: flex; align-items: start; justify-content: space-between; gap: 32px; }
.heard-intro p { max-width: 28ch; margin: 0; font-size: clamp(22px, 2.5vw, 31px); font-weight: 300; line-height: 1.18; letter-spacing: -.025em; }
.heard-intro span { padding-top: 4px; color: var(--mid); font: 10px/1.65 var(--mono); letter-spacing: .14em; text-align: right; }
.heard-signature { display: flex; flex: 0 0 240px; flex-direction: column; align-items: stretch; gap: 8px; width: 240px; }
.heard-trace { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; width: 100%; border-top: 1px solid var(--ink); }
.heard-trace button { position: relative; display: block; width: 100%; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.heard-trace button::before { position: absolute; top: 7px; right: 0; left: 0; height: 3px; background: var(--faint-line); content: ''; transition: height .25s ease, background-color .25s ease; }
.heard-trace button:hover::before, .heard-trace button:focus-visible::before { height: 7px; background: var(--blue); }
.heard-trace button[aria-pressed="true"]::before { height: 10px; background: var(--red); }
.heard-trace.is-paused button[aria-pressed="true"]::before { background: var(--ink); }
.heard-trace-count, .heard-signature-caption { display: block; width: 100%; text-align: right; }
.heard-trace-count { color: var(--red-ink) !important; font-variant-numeric: tabular-nums; white-space: nowrap; }

.heard-disclosure { display: grid; grid-template-columns: 150px minmax(0,1fr) auto; gap: 24px; align-items: start; margin: 32px 0 70px; padding: 19px 22px; border: 1px solid var(--border); border-left: 3px solid var(--red); background: var(--sheet); }
.heard-disclosure-mark { color: var(--red-ink); font: 10px/1.5 var(--mono); letter-spacing: .13em; }
.heard-disclosure p { max-width: 70ch; margin: 0; color: var(--body-text); font-size: 14px; line-height: 1.55; }
.heard-refresh { display: block; margin-top: 8px; color: var(--mid); font: 9px/1.5 var(--mono); letter-spacing: .13em; }
.heard-disclosure a, .heard-reading-body > a, .heard-protocol-return { color: var(--blue); font: 10px/1.5 var(--mono); letter-spacing: .14em; white-space: nowrap; }
.heard-disclosure a:hover, .heard-reading-body > a:hover, .heard-protocol-return:hover { color: var(--red); text-decoration: underline; }

.heard-layout { display: grid; grid-template-columns: minmax(0,1fr) 270px; gap: 54px; align-items: start; }
.heard-section-head { display: flex; align-items: end; justify-content: space-between; gap: 22px; padding-bottom: 15px; border-bottom: 1px solid var(--ink); }
.heard-section-index, .heard-section-note, .heard-small-label { color: var(--mid); font: 10px/1.5 var(--mono); letter-spacing: .15em; }
.heard-section-index { color: var(--blue); }
.heard-section-head h2 { margin: 8px 0 0; font-size: clamp(24px,2.6vw,34px); font-weight: 400; line-height: 1.1; letter-spacing: -.02em; }
.heard-section-note { text-align: right; }
.heard-stream-intro, .heard-field-note { color: var(--body-text); font-size: 15px; font-weight: 300; line-height: 1.6; }
.heard-stream-intro { max-width: 56ch; margin: 19px 0 24px; }
.heard-field-note { margin: 18px 0 28px; font-size: 13px; }

.heard-controls { display: flex; flex-wrap: wrap; gap: 7px; }
.heard-controls button { padding: 9px 11px; border: 1px solid var(--border); background: transparent; color: var(--mid); cursor: pointer; font: 10px var(--mono); letter-spacing: .12em; }
.heard-controls button:hover { border-color: var(--blue); color: var(--blue); }
.heard-controls button[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.heard-controls button[data-heard-filter="ATTACHMENT"][aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: white; }
.heard-controls button[data-heard-filter="AGENCY"][aria-pressed="true"] { border-color: var(--blue); background: var(--blue); color: white; }
.heard-controls button[data-heard-filter="TRUST"][aria-pressed="true"] { border-color: var(--red); background: var(--red); color: white; }

.heard-simulation-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; padding: 13px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); scroll-margin-top: 72px; }
.heard-simulation-bar > span { color: var(--red-ink); font: 10px/1.5 var(--mono); letter-spacing: .12em; }
.heard-simulation-bar > div { display: flex; align-items: center; gap: 7px; }
.heard-simulation-bar button { padding: 7px 10px; border: 1px solid var(--border); background: transparent; color: var(--ink); cursor: pointer; font: 10px var(--mono); letter-spacing: .12em; white-space: nowrap; }
.heard-simulation-bar button:hover { border-color: var(--blue); color: var(--blue); }
#pause { border-color: var(--red-ink); background: var(--red-ink); color: white; }
#pause:hover, #pause[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: white; }
#next:disabled { color: var(--faint); cursor: default; }

.heard-record { padding: 30px 0 34px; border-bottom: 1px solid var(--border); }
.heard-record-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; color: var(--mid); font: 10px/1.5 var(--mono); letter-spacing: .13em; }
.heard-record-id { color: var(--red-ink); }
.heard-record-text { max-width: 37ch; margin: 24px 0; font-size: clamp(21px,2.3vw,29px); font-weight: 300; line-height: 1.32; letter-spacing: -.015em; }
.heard-record-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.heard-record-tags span { padding: 6px 8px; border: 1px solid var(--faint-line); font: 9px var(--mono); letter-spacing: .13em; }
.heard-record-tags .is-primary { border-width: 2px; }
.heard-record-tags [data-signal="ATTACHMENT"], .heard-record-tags [data-signal="CONTINUITY"], .heard-record-tags [data-signal="LANGUAGE"] { border-color: var(--ink); color: var(--ink); }
.heard-record-tags [data-signal="AGENCY"], .heard-record-tags [data-signal="CAPABILITY"], .heard-record-tags [data-signal="RELIEF"] { border-color: var(--blue); color: var(--blue); }
.heard-record-tags [data-signal="TRUST"], .heard-record-tags [data-signal="SUSPICION"], .heard-record-tags [data-signal="DEPENDENCE"], .heard-record-tags [data-signal="CONFUSION"] { border-color: var(--red); color: var(--red-ink); }
.heard-record-context { margin-top: 17px; color: var(--mid); font: 10px/1.5 var(--mono); letter-spacing: .13em; white-space: pre-wrap; }
.heard-tremor { padding: 19px 23px 21px; border-left: 2px solid var(--red); background: var(--sheet); }
.heard-tremor-label { color: var(--red-ink); font: 10px var(--mono); letter-spacing: .15em; }
.heard-tremor p { max-width: 50ch; margin: 11px 0 0; font-size: 15px; line-height: 1.5; }
.heard-empty { padding: 24px 0; color: var(--body-text); }

.heard-movement { display: grid; grid-template-columns: 1fr auto; gap: 4px; padding: 15px 0; border-top: 1px solid var(--border); }
.heard-movement span { font: 10px var(--mono); letter-spacing: .08em; }
.heard-movement strong { grid-row: span 2; font: 28px var(--mono); line-height: 1; }
.heard-movement small { color: var(--mid); font: 9px var(--mono); letter-spacing: .13em; }
.tone-blue strong { color: var(--blue); }
.tone-red strong { color: var(--red); }
.tone-ink strong { color: var(--ink); }
.heard-field-foot { padding-top: 18px; border-top: 1px solid var(--ink); color: var(--mid); font: 10px/1.8 var(--mono); letter-spacing: .13em; }

.heard-reading { margin-top: 90px; }
.heard-reading-body { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 20px; padding-top: 32px; align-items: start; }
.heard-reading-lede { margin: 0; font-size: clamp(23px,2.7vw,35px); font-weight: 300; line-height: 1.25; letter-spacing: -.02em; }
.reading-panel { padding: 15px 0 0; border-top: 1px solid var(--border); }
.reading-panel.tone-blue .heard-small-label { color: var(--blue); }
.reading-panel.tone-red .heard-small-label { color: var(--red-ink); }
.reading-panel p { margin: 11px 0 0; color: var(--body-text); font-size: 14px; line-height: 1.65; }
.heard-reading-disclosure summary { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; list-style: none; cursor: pointer; }
.heard-reading-disclosure summary::-webkit-details-marker { display: none; }
.heard-reveal-hint { color: var(--blue); font: 10px var(--mono); letter-spacing: .13em; white-space: nowrap; }
.heard-reading-disclosure:not([open]) .when-open, .heard-reading-disclosure[open] .when-closed { display: none; }
.heard-reading-disclosure[open] .heard-reveal-hint { color: var(--red-ink); }
.heard-reading-body > a { grid-column: 1 / -1; margin-top: 7px; }

.heard-protocol .heard-opening h1 { font-size: clamp(44px,6.2vw,82px); line-height: 1.03; letter-spacing: -.045em; }
.heard-protocol .heard-intro p { max-width: 30ch; font-size: clamp(20px,2.4vw,30px); }
.heard-protocol .heard-disclosure { grid-template-columns: 150px minmax(0,1fr); }
.heard-protocol-grid { display: grid; grid-template-columns: 188px minmax(0,680px); gap: 56px; }
.heard-protocol-nav { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 14px; align-self: start; }
.heard-protocol-nav span, .heard-protocol-nav a { font: 10px/1.4 var(--mono); letter-spacing: .12em; }
.heard-protocol-nav span { margin-bottom: 8px; color: var(--faint); }
.heard-protocol-nav a { color: var(--mid); }
.heard-protocol-nav a:hover { color: var(--red); }
.heard-protocol-sections section { padding: 0 0 40px; margin-bottom: 40px; border-bottom: 1px solid var(--border); scroll-margin-top: 84px; }
.heard-protocol-sections h2 { margin: 11px 0 19px; font-weight: 400; font-size: clamp(26px,3vw,36px); letter-spacing: -.02em; }
.heard-protocol-sections p, .heard-protocol-sections li { color: var(--body-text); font-size: 16px; line-height: 1.7; font-weight: 300; }
.heard-protocol-sections p { margin: 0 0 16px; }
.heard-protocol-sections a { color: var(--blue); text-decoration: underline; }
.heard-protocol-sections ol { padding-left: 24px; margin: 0 0 20px; }
.heard-protocol-sections li { padding-left: 5px; margin-bottom: 9px; }
.heard-schema { display: flex; flex-wrap: wrap; gap: 7px; margin: 23px 0; }
.heard-schema span { padding: 8px 10px; border: 1px solid var(--faint-line); font: 10px var(--mono); letter-spacing: .12em; }
.heard-protocol-return { display: inline-block; margin-top: 4px; }

@media (max-width: 760px) {
  .site-header { height: 46px; padding: 0 18px; }
  .brand-name { font-size: 13px; }
  .brand-tag, .header-links > a, .clock { display: none; }
  .header-links { font-size: 9px; }
  .page { padding: 68px 18px 65px; }
  .site-footer { flex-direction: column; gap: 9px; padding: 20px 18px; }
  .heard-opening { margin-top: 22px; padding-bottom: 23px; }
  .heard-kicker { flex-direction: column; gap: 6px; font-size: 9px; }
  .heard-opening h1 { margin: 29px 0 27px; font-size: clamp(60px,18vw,92px); }
  .heard-intro { flex-direction: column; gap: 19px; }
  .heard-intro p { font-size: 26px; }
  .heard-intro span { padding: 0; text-align: left; font-size: 9px; }
  .heard-signature { flex-basis: auto; width: 240px; max-width: 100%; }
  .heard-trace-count, .heard-signature-caption { text-align: left; }
  .heard-disclosure, .heard-protocol .heard-disclosure { grid-template-columns: 1fr; gap: 13px; margin: 24px 0 52px; padding: 17px; }
  .heard-disclosure a { margin-top: 4px; }
  .heard-layout { grid-template-columns: 1fr; gap: 58px; }
  .heard-section-head { flex-direction: column; align-items: start; gap: 8px; }
  .heard-section-note { text-align: left; font-size: 9px; }
  .heard-controls { gap: 5px; }
  .heard-controls button { padding: 8px; font-size: 9px; }
  .heard-simulation-bar { flex-direction: column; align-items: start; gap: 9px; }
  .heard-record { padding: 25px 0 29px; }
  .heard-record-meta { font-size: 9px; }
  .heard-record-text { font-size: 23px; }
  .heard-field-note { margin-bottom: 18px; }
  .heard-reading { margin-top: 68px; }
  .heard-reading-body { grid-template-columns: 1fr; gap: 14px; }
  .heard-reading-body > a { grid-column: 1; margin-top: 2px; white-space: normal; }
  .heard-protocol .heard-opening h1 { font-size: clamp(43px,12vw,64px); }
  .heard-protocol .heard-intro p { font-size: 23px; }
  .heard-protocol-grid { grid-template-columns: 1fr; gap: 34px; }
  .heard-protocol-nav { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .heard-protocol-nav span { grid-column: 1 / -1; margin: 0; }
  .heard-protocol-sections section { scroll-margin-top: 70px; }
  .heard-protocol-sections p, .heard-protocol-sections li { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .pulse { animation: none; } .heard-trace button::before { transition: none; } }

/* Editorial field: original palette and rules, without a social-card wall. */
.heard-trace i { display: block; height: 22px; border-top: 3px solid var(--blue); margin-top: 7px; }
.heard-trace i:nth-child(3n) { border-color: var(--red); margin-top: 12px; }
.signal-field { display: flex; align-items: center; gap: 4px; min-height: 270px; padding: 25px 0; border-bottom: 1px solid var(--ink); }
.signal-bar { position: relative; flex: 1 1 0; min-width: 0; height: 90px; padding: 0; border: none; background: var(--blue); cursor: pointer; transition: height .4s ease; }
.signal-bar:nth-child(3n) { height: 160px; }
.signal-bar:nth-child(4n) { height: 55px; }
.signal-bar:nth-child(7n) { height: 205px; }
.signal-bar[data-provider="MASTODON"] { background: var(--ink); }
.signal-bar[data-provider="hacker-news"] { background: var(--red); }
.signal-bar[data-provider="YOUTUBE"] { background: color-mix(in srgb, var(--red) 68%, var(--ink)); }
.signal-bar[aria-pressed="true"], .signal-bar:hover { background: var(--red); }
.signal-bar span { position: absolute; left: 50%; bottom: -20px; transform: translateX(-50%); font: 8px var(--mono); color: var(--mid); }
.signal-bar:not(:nth-child(3n+1)) span { visibility: hidden; }
.quiet-trace { position: relative; display: grid; grid-template-columns: repeat(31,minmax(2px,1fr)); align-items: center; gap: 4px; width: 100%; height: 205px; overflow: hidden; }
.quiet-trace::before { content: ""; position: absolute; inset: 50% 0 auto; border-top: 1px solid var(--mid); opacity: .45; }
.quiet-trace i { z-index: 1; height: 2px; background: var(--blue); opacity: .72; animation: quiet-breathe 5s ease-in-out infinite; }
.quiet-trace i:nth-child(11), .quiet-trace i:nth-child(21) { height: 5px; }
.quiet-trace i:nth-child(12), .quiet-trace i:nth-child(20) { height: 9px; }
.quiet-trace i:nth-child(13), .quiet-trace i:nth-child(19) { height: 16px; }
.quiet-trace i:nth-child(14), .quiet-trace i:nth-child(18) { height: 30px; background: var(--red); }
.quiet-trace i:nth-child(15), .quiet-trace i:nth-child(17) { height: 54px; background: var(--ink); }
.quiet-trace i:nth-child(16) { height: 86px; background: var(--red); }
@keyframes quiet-breathe { 0%,100% { opacity: .45; } 50% { opacity: .82; } }
.voice-placeholder { height: 390px; margin: 24px 0; border: 1px solid var(--border); background: var(--paper); overflow: auto; }
.voice-placeholder.is-direct-link { height: auto; min-height: 118px; }
.voice-placeholder.is-resolved-voice { height: auto; min-height: 220px; padding: 24px; }
.voice-placeholder > p { padding: 22px; }
.voice-placeholder.is-resolved-voice > p { padding: 0; }
.voice-attribution { display: grid; gap: 5px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.voice-attribution strong { font-size: 18px; font-weight: 500; }
.voice-attribution span { font: 9px var(--mono); letter-spacing: .08em; color: var(--mid); }
.voice-original-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 18px !important; line-height: 1.55 !important; }
.voice-placeholder iframe { display: block; height: 100%; width: 100%; border: 0; pointer-events: none; }
#voice-panel { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(560px, 100%); height: 100dvh; max-height: 100dvh; max-width: 100%; padding: 28px; border: 0; border-left: 1px solid var(--ink); background: var(--sheet); color: var(--ink); }
#voice-panel::backdrop { background: rgba(23,37,42,.35); }
.voice-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
#voice-panel h2 { font-size: 38px; font-weight: 400; letter-spacing: -.025em; }
#voice-panel p { font-size: 15px; line-height: 1.65; }
#voice-panel button { cursor: pointer; padding: 12px; font: 10px var(--mono); letter-spacing: .1em; border: 1px solid var(--ink); background: transparent; color: var(--ink); }
#voice-link:not([hidden]) { display: inline-block; padding: 12px; border: 1px solid var(--blue); font: 11px var(--mono); color: var(--blue); }
.policy-status { padding: 16px; border-left: 2px solid var(--red); background: var(--sheet); }
@media (max-width: 760px) { #voice-panel { inset: auto 0 0; width: 100%; height: 92dvh; max-height: 92dvh; border-top: 2px solid var(--ink); border-left: 0; padding: 22px 18px; } .signal-field { gap: 3px; } .voice-placeholder { height: 330px; } }
@media (prefers-reduced-motion: reduce) { .signal-bar { transition: none; } .quiet-trace i { animation: none; } }