/* room.txt
   Everything drawn in the plates is measured data. The page itself stays out of the way:
   true black, one mono for everything that is data, one grotesk for what a person reads,
   and four channel colours that belong to the four minds and nothing else. */

:root {
  --ground: #030304;
  --plate: #050506;
  --rule: #18181b;
  --rule-hi: #26262b;
  --ink: #ece8df;
  --ink-2: #b4b0a7;
  --ink-3: #75726b;
  --ink-4: #4a4843;

  --fly: #ff5a78;
  --worm: #6cf2a0;
  --human: #6fb2ff;
  --claude: #ece8df;
  --shown: #ece8df;

  --mono: "Fragment Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --sans: "Inter Tight", "Helvetica Neue", Arial, sans-serif;

  --bar-h: clamp(42px, 2.4vw, 64px);
  --gutter: clamp(16px, 1.4vw, 36px);
  --pad: clamp(14px, .95vw, 30px);

  /* one scale for every screen: 1512 wide reads like a laptop, 3440 like a wall */
  --t-small: clamp(10px, calc(6px + .3vw), 17px);
  --t-label: clamp(11px, calc(6.5px + .32vw), 18px);
  --t-name: clamp(12px, calc(7px + .38vw), 21px);
  --t-say: clamp(15px, calc(6px + .66vw), 36px);
  --t-body: clamp(12px, calc(6px + .45vw), 22px);
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--ground); color: var(--ink); }
body {
  font: 400 var(--t-body)/1.5 var(--mono);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "tnum" 1;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
::selection { background: #ece8df; color: #030304; }

/* the one canvas: every plate is a scissored viewport of it */
#gl {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  pointer-events: none; z-index: 1;
}

/* sensor noise, not decoration: a faint luminous grain over the black */
.grain {
  position: fixed; inset: -50%; z-index: 30; pointer-events: none; opacity: .055;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.4 -.35'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); }
  60% { transform: translate(-1%, 3%); } 80% { transform: translate(3%, 1%); } 100% { transform: translate(0, 0); }
}

/* ---------------------------------------------------------------- bar */
.bar {
  position: sticky; top: 0; z-index: 20; height: var(--bar-h);
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center;
  padding: 0 var(--gutter); background: rgba(3, 3, 4, .92);
  border-bottom: 1px solid var(--rule);
  font-size: var(--t-label); letter-spacing: .02em;
}
.mark { display: flex; align-items: baseline; gap: 1.2em; min-width: 0; }
.mark b { font-weight: 400; color: var(--ink); font-size: var(--t-name); }
.mark span { color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status { display: flex; gap: 1.6em; align-items: center; color: var(--ink-3); white-space: nowrap; }
@media (max-width: 1700px) { .mark span { display: none; } }
.status .live { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); }
.status .live i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ink-4);
}
.status .live.on i { background: var(--worm); box-shadow: 0 0 0 3px rgba(108, 242, 160, .12); }
.bar nav { display: flex; justify-content: flex-end; align-items: center; gap: 1.7em; color: var(--ink-2); }
.bar nav a:hover { color: var(--ink); }

/* ---------------------------------------------------------------- plates */
.plates {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, .92fr) repeat(4, minmax(0, 1fr));
  height: clamp(420px, calc(100vh - var(--bar-h) - 250px), 1000px);
  border-bottom: 1px solid var(--rule);
}
.plate {
  position: relative; min-width: 0; overflow: hidden;
  border-right: 1px solid var(--rule);
}
.plate:last-child { border-right: 0; }
.stage { position: absolute; inset: 0; }

.plate-head {
  position: absolute; left: 0; right: 0; top: 0; z-index: 3;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: .9em; row-gap: .2em; align-items: baseline;
  padding: var(--pad) var(--pad) 0;
  font-size: var(--t-label); letter-spacing: .04em; color: var(--ink-3);
}
.plate-head .no { color: var(--ink-4); font-variant-numeric: tabular-nums; }
.plate-head .who { color: var(--ch); font-size: var(--t-name); letter-spacing: .01em; }
.plate-head .count { color: var(--ink-2); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.plate-head .sub { grid-column: 2 / -1; color: var(--ink-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plate-head .sub em { font-style: italic; color: var(--ink-3); }

/* registration marks: the plate is a frame, the specimen sits inside it */
.plate::before, .plate::after {
  content: ""; position: absolute; z-index: 3; width: 9px; height: 9px; pointer-events: none; opacity: .9;
}
.plate::before { left: 7px; bottom: 7px; border-left: 1px solid var(--ink-4); border-bottom: 1px solid var(--ink-4); }
.plate::after { right: 7px; bottom: 7px; border-right: 1px solid var(--ink-4); border-bottom: 1px solid var(--ink-4); }

.plate-foot {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: 0 var(--pad) calc(var(--pad) + 4px);
}
.scale {
  display: flex; align-items: center; gap: .8em; height: 1.4em; margin-bottom: .9em;
  font-size: var(--t-small); color: var(--ink-3); letter-spacing: .03em;
}
.scale i { display: block; height: 7px; border: 1px solid var(--ink-3); border-top: 0; width: 60px; transition: width .4s ease; }

.say {
  min-height: calc(2 * 1.34em); margin: 0;
  font-size: var(--t-say); line-height: 1.34; color: var(--ch);
  letter-spacing: -.01em; overflow-wrap: anywhere;
}
.say .cursor { display: inline-block; width: .55em; height: 1.02em; transform: translateY(.17em); background: var(--ch); margin-left: 2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.receipt {
  margin: .7em 0 0; min-height: 1.5em; font-size: var(--t-small); color: var(--ink-4); letter-spacing: .02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.plate.active .plate-head .no { color: var(--ch); }
.plate.active::before, .plate.active::after { border-color: var(--ch); }
.plate .phase-rule {
  position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--ch); z-index: 4;
  transform-origin: left; transform: scaleX(0); opacity: .9;
}

.plate[data-ch="fly"] { --ch: var(--fly); }
.plate[data-ch="worm"] { --ch: var(--worm); }
.plate[data-ch="human"] { --ch: var(--human); }
.plate[data-ch="claude"] { --ch: var(--claude); }
.plate[data-ch="shown"] { --ch: var(--shown); }

/* shown: the thing itself */
.shown-media { position: absolute; left: var(--pad); right: var(--pad); top: calc(var(--pad) * 2 + 2.6em); bottom: calc(var(--pad) + 7.2em); display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; z-index: 2; }
.shown-media img {
  width: 100%; height: 100%; min-height: 0; object-fit: contain; display: block;
  opacity: 0; transition: opacity 1.1s ease;
}
.shown-media img.in { opacity: 1; }
.shown-media canvas { width: 100%; height: 42%; }
.shown-text {
  align-self: center; margin: 0; max-width: 24ch;
  font: 300 clamp(18px, calc(4px + 1.05vw), 44px)/1.18 var(--sans); letter-spacing: -.02em; color: var(--ink);
}
.shown-text .from { display: block; margin-bottom: 1.1em; font: 400 var(--t-small)/1.4 var(--mono); letter-spacing: .04em; color: var(--ink-3); }

/* claude: no neurons, only language */
.plate[data-ch="claude"] .plate-foot { top: calc(var(--pad) * 2 + 2.6em); display: flex; flex-direction: column; justify-content: flex-end; }
.plate[data-ch="claude"] .say { font-size: clamp(14px, calc(5px + .6vw), 32px); line-height: 1.42; min-height: 0; color: var(--claude); }
.plate[data-ch="claude"] .say.long { font-size: clamp(13px, calc(4.5px + .52vw), 28px); }
.claude-body { position: absolute; left: var(--pad); right: var(--pad); top: calc(var(--pad) * 2 + 2.6em); height: 34%; z-index: 2; overflow: hidden; }
.claude-body .context {
  font-size: var(--t-small); line-height: 1.6; color: var(--ink-4); opacity: .5;
  mask-image: linear-gradient(to bottom, #000 30%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent);
  white-space: pre-wrap; overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------- timeline */
.timeline {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, .92fr) repeat(4, minmax(0, 1fr));
  height: clamp(34px, 2.2vw, 56px); border-bottom: 1px solid var(--rule);
  font-size: var(--t-small); color: var(--ink-4); letter-spacing: .04em;
}
.tick { position: relative; display: flex; align-items: center; gap: .9em; padding: 0 var(--pad); border-right: 1px solid var(--rule); min-width: 0; }
.tick:last-child { border-right: 0; }
.tick .bar-track { position: relative; flex: 1; height: 1px; background: var(--rule-hi); overflow: hidden; }
.tick .bar-fill { position: absolute; inset: 0; background: var(--ch, var(--ink)); transform-origin: left; transform: scaleX(0); }
.tick .stim-span { position: absolute; top: -3px; height: 7px; border-left: 1px solid var(--ink-4); border-right: 1px solid var(--ink-4); }
.tick .t { white-space: nowrap; }
.tick[data-ch="fly"] { --ch: var(--fly); }
.tick[data-ch="worm"] { --ch: var(--worm); }
.tick[data-ch="human"] { --ch: var(--human); }
.tick[data-ch="claude"] { --ch: var(--claude); }

/* ---------------------------------------------------------------- merge: room.txt */
.merge { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 4fr); }
.merge-side {
  border-right: 1px solid var(--rule); padding: var(--pad); color: var(--ink-3); font-size: var(--t-small); line-height: 1.75;
}
.merge-side h2 { margin: 0 0 1.2em; font: 400 var(--t-name)/1.4 var(--mono); color: var(--ink); letter-spacing: .02em; }
.merge-side dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; margin: 0; }
.merge-side dt { color: var(--ink-4); }
.merge-side dd { margin: 0; color: var(--ink-2); text-align: right; font-variant-numeric: tabular-nums; }
.merge-side .legend { margin-top: 22px; display: grid; gap: 7px; }
.merge-side .legend span { display: flex; gap: 10px; align-items: center; }
.merge-side .legend i { width: 7px; height: 7px; background: var(--c); display: block; }

/* the chat log sits in its own frame: a brighter line, corner marks, and the four minds as a mark on the edge */
.log-wrap {
  position: relative; min-width: 0;
  margin: var(--pad) var(--gutter) calc(var(--pad) * 1.4) var(--pad);
  border: 1px solid rgba(236, 232, 223, .3);
  background:
    linear-gradient(var(--ink), var(--ink)) left top / 14px 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) left top / 1px 14px no-repeat,
    linear-gradient(var(--ink), var(--ink)) right top / 14px 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) right top / 1px 14px no-repeat,
    linear-gradient(var(--ink), var(--ink)) left bottom / 14px 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) left bottom / 1px 14px no-repeat,
    linear-gradient(var(--ink), var(--ink)) right bottom / 14px 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) right bottom / 1px 14px no-repeat;
  background-origin: border-box;
  box-shadow: 0 0 0 1px rgba(3, 3, 4, .9), 0 0 32px rgba(236, 232, 223, .035);
}
.log-mark {
  position: absolute; top: 0; left: 22px; z-index: 3; transform: translateY(-50%);
  display: grid; grid-template-columns: repeat(2, 4px); gap: 2px; padding: 0 7px; background: var(--ground);
}
.log-mark i { width: 4px; height: 4px; border-radius: 50%; background: var(--c); display: block; }

.log {
  list-style: none; margin: 0; padding: .8em 0 2em;
  mask-image: linear-gradient(to bottom, transparent, #000 2.2em); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 2.2em); height: max(250px, calc(100vh - var(--bar-h) - clamp(420px, calc(100vh - var(--bar-h) - 250px), 1000px) - clamp(34px, 2.2vw, 56px))); overflow-y: auto; scrollbar-width: thin;
  scrollbar-color: var(--rule-hi) transparent;
}
.log li {
  display: grid; grid-template-columns: 7.2em 6.4em minmax(0, 1fr); gap: 0 1.1em;
  padding: .2em var(--gutter) .2em var(--pad); font-size: var(--t-body); line-height: 1.55; color: var(--ink-2);
}
.log li .t { color: var(--ink-4); }
.log li .who { color: var(--c); }
.log li .txt { min-width: 0; overflow-wrap: anywhere; }
.log li .rc { color: var(--ink-4); margin-left: 12px; font-size: .86em; }
.log li.stimulus { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--rule); }
.log li.stimulus .who, .log li.stimulus .txt { color: var(--ink-3); }
.log li.post .txt { color: var(--ink); }
.log li.post .who::after { content: " x"; color: var(--ink-4); }
.log li.now { background: #09090b; }
.log li.now .txt { color: var(--ink); }
.log li[data-ch="fly"] { --c: var(--fly); }
.log li[data-ch="worm"] { --c: var(--worm); }
.log li[data-ch="human"] { --c: var(--human); }
.log li[data-ch="claude"] { --c: var(--claude); }
.log li[data-ch="stimulus"] { --c: var(--ink-3); }

/* ---------------------------------------------------------------- method */
.method { position: relative; z-index: 2; border-top: 1px solid var(--rule); padding: clamp(40px, 6vw, 110px) var(--gutter); }
.method h2 { margin: 0 0 clamp(28px, 3vw, 56px); font: 300 clamp(28px, 3.4vw, 64px)/1.02 var(--sans); letter-spacing: -.025em; max-width: 22ch; }
.method .cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rule); }
.method .col { padding: 22px 22px 0 0; border-right: 1px solid var(--rule); margin-right: 22px; min-width: 0; }
.method .col:last-child { border-right: 0; margin-right: 0; }
.method .col h3 { margin: 0 0 4px; font: 400 12px/1.4 var(--mono); color: var(--c); }
.method .col .n { font: 300 clamp(34px, 3.6vw, 72px)/1 var(--sans); letter-spacing: -.03em; margin: 10px 0 16px; color: var(--ink); }
.method .col p { margin: 0 0 12px; color: var(--ink-2); font-size: 12.5px; line-height: 1.65; max-width: 44ch; }
.method .col p b { font-weight: 400; color: var(--ink); }
.method .col[data-ch="fly"] { --c: var(--fly); }
.method .col[data-ch="worm"] { --c: var(--worm); }
.method .col[data-ch="human"] { --c: var(--human); }
.method .col[data-ch="claude"] { --c: var(--claude); }

footer { position: relative; z-index: 2; padding: 28px var(--gutter) 40px; border-top: 1px solid var(--rule); color: var(--ink-4); font-size: 11px; line-height: 1.7; }

/* ---------------------------------------------------------------- narrower screens */
@media (max-width: 1280px) {
  /* the four minds in a square, in the order of the mark: worm, fly / guy, ai */
  .plates { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "shown shown" "worm fly" "human claude"; height: auto; }
  .plate { height: clamp(360px, 52vw, 560px); border-bottom: 1px solid var(--rule); }
  .plate[data-ch="shown"] { grid-area: shown; height: clamp(300px, 36vw, 420px); border-right: 0; }
  .plate[data-ch="worm"] { grid-area: worm; border-right: 1px solid var(--rule); }
  .plate[data-ch="fly"] { grid-area: fly; border-right: 0; }
  .plate[data-ch="human"] { grid-area: human; border-right: 1px solid var(--rule); }
  .plate[data-ch="claude"] { grid-area: claude; border-right: 0; }
  .plate-head .no { display: none; }     /* the numbers follow the wide layout's order, not the square's */
  .timeline { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .tick .t { display: none; }
  .merge { grid-template-columns: minmax(0, 1fr); }
  .merge-side { border-right: 0; border-bottom: 1px solid var(--rule); }
  .method .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .method .col:nth-child(2n) { border-right: 0; margin-right: 0; }
}
@media (max-width: 760px) {
  .bar nav a[href="#method"], .bar nav a[href="/room.txt"] { display: none; }
  .bar nav { gap: 1.2em; }
  .bar { grid-template-columns: minmax(0, 1fr) auto; }
  .status { display: none; }
  .mark span { display: none; }
  /* phone: what was shown, then all four minds on the same screen */
  /* sized from the visible screen (svh leaves out the browser bars) so the five panels fit one screen */
  .plates { --shown-h: clamp(220px, 31vh, 400px); }
  @supports (height: 1svh) { .plates { --shown-h: clamp(220px, 31svh, 400px); } }
  .plate[data-ch="shown"] { height: var(--shown-h); }
  .plate[data-ch="shown"] .scale { display: none; }
  .plate[data-ch="shown"] .say { font-size: 14px; }
  .plate[data-ch="shown"] .receipt { min-height: 0; margin-top: .3em; }
  .plate[data-ch="shown"] .shown-media { top: calc(var(--pad) + 3.4em); bottom: calc(var(--pad) + 4.6em); }
  .shown-text { font-size: 15px; }
  .plate:not([data-ch="shown"]) {
    --pad: 10px;
    height: min(420px, max(210px, calc((100vh - var(--bar-h) - var(--shown-h)) / 2)));
  }
  @supports (height: 1svh) {
    .plate:not([data-ch="shown"]) { height: min(420px, max(210px, calc((100svh - var(--bar-h) - var(--shown-h)) / 2))); }
  }
  .plate:not([data-ch="shown"]) .plate-head { font-size: 10px; column-gap: .55em; }
  .plate:not([data-ch="shown"]) .plate-head .who { font-size: 12px; }
  .plate:not([data-ch="shown"]) .plate-head .sub,
  .plate:not([data-ch="shown"]) .scale { display: none; }
  .plate:not([data-ch="shown"]) .say { font-size: 12.5px; line-height: 1.32; }
  .plate:not([data-ch="shown"]) .receipt { font-size: 9.5px; margin-top: .5em; min-height: 1.3em; }
  .plate::before, .plate::after { width: 7px; height: 7px; bottom: 5px; }
  .plate::before { left: 5px; }
  .plate::after { right: 5px; }
  .plate[data-ch="claude"] .claude-body { display: none; }
  .plate[data-ch="claude"] .plate-foot {
    top: calc(var(--pad) + 26px); overflow: hidden;
    mask-image: linear-gradient(to bottom, transparent, #000 2.6em); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 2.6em);
  }
  .plate[data-ch="claude"] .say, .plate[data-ch="claude"] .say.long { font-size: 11px; line-height: 1.45; flex-shrink: 0; }
  .plate[data-ch="claude"] .receipt { flex-shrink: 0; }   /* a long line overflows upward: the newest words stay in view */
  .log-wrap { margin: 12px 12px 18px; }
  .log { height: min(74vh, 640px); }
  .timeline { height: 30px; }
  .tick { padding: 0 8px; }
  .log li { grid-template-columns: 58px minmax(0, 1fr); padding-left: 14px; }
  .log li .t { display: none; }
  .method .cols { grid-template-columns: minmax(0, 1fr); }
  .method .col { border-right: 0; margin-right: 0; border-bottom: 1px solid var(--rule); padding-bottom: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
  .say .cursor { animation: none; }
}

/* ---------------------------------------------------------------- listening */
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.sound-toggle { display: inline-flex; align-items: center; gap: .7em; color: var(--ink-2); letter-spacing: .02em; }
.sound-toggle i {
  position: relative; width: 1.9em; height: .9em; display: block;
  background:
    linear-gradient(var(--ink-3), var(--ink-3)) 0 55% / 2px 30% no-repeat,
    linear-gradient(var(--ink-3), var(--ink-3)) 33% 50% / 2px 55% no-repeat,
    linear-gradient(var(--ink-3), var(--ink-3)) 66% 45% / 2px 85% no-repeat,
    linear-gradient(var(--ink-3), var(--ink-3)) 100% 55% / 2px 40% no-repeat;
}
.sound-toggle[aria-pressed="true"] { color: var(--ink); }
.sound-toggle[aria-pressed="true"] i {
  background:
    linear-gradient(var(--worm), var(--worm)) 0 55% / 2px 30% no-repeat,
    linear-gradient(var(--fly), var(--fly)) 33% 50% / 2px 55% no-repeat,
    linear-gradient(var(--human), var(--human)) 66% 45% / 2px 85% no-repeat,
    linear-gradient(var(--ink), var(--ink)) 100% 55% / 2px 40% no-repeat;
  animation: levels .9s steps(3) infinite;
}
@keyframes levels { 50% { transform: scaleY(.72); } }
.sound-toggle:hover { color: var(--ink); }

.listen {
  position: absolute; left: 0; bottom: 18%; display: inline-flex; align-items: center; gap: .8em;
  font-size: var(--t-small); color: var(--ink-2); letter-spacing: .03em;
  padding: .55em .9em .55em .75em; border: 1px solid var(--rule-hi);
}
.listen i { width: .62em; height: .72em; background: var(--ink); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.listen:hover { border-color: var(--ink-3); color: var(--ink); }
.listen.on { border-color: var(--ink); color: var(--ink); }
.listen.on i { clip-path: polygon(0 0, 35% 0, 35% 100%, 0 100%, 0 0, 65% 0, 100% 0, 100% 100%, 65% 100%); }

.log li { grid-template-columns: 7.2em 6.4em minmax(0, 1fr) 1.8em; }
.lp-cell { display: flex; justify-content: flex-end; align-items: flex-start; padding-top: .35em; }
.lp { width: 1.1em; height: 1.1em; display: grid; place-items: center; opacity: .35; transition: opacity .15s; }
.lp::before { content: ""; width: .52em; height: .62em; background: var(--c, var(--ink)); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.log li:hover .lp, .lp:focus-visible { opacity: 1; }
.lp.on { opacity: 1; }
.lp.on::before { clip-path: polygon(0 0, 35% 0, 35% 100%, 0 100%, 0 0, 65% 0, 100% 0, 100% 100%, 65% 100%); }
@media (hover: none) { .lp { opacity: .8; } }
@media (max-width: 760px) { .log li { grid-template-columns: 58px minmax(0, 1fr) 1.6em; } }

/* ---------------------------------------------------------------- top */
.top { position: relative; z-index: 2; border-top: 1px solid var(--rule); padding: clamp(40px, 5vw, 96px) var(--gutter) clamp(28px, 3vw, 60px); }
.top-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2em; align-items: end; margin-bottom: clamp(24px, 2.4vw, 48px); }
.top-head h2 { margin: 0 0 .35em; font: 300 clamp(28px, 3.4vw, 64px)/1.02 var(--sans); letter-spacing: -.025em; }
.top-sub { margin: 0; max-width: 62ch; color: var(--ink-3); font-size: var(--t-small); line-height: 1.7; }
.top-tabs { display: flex; gap: 1.6em; font-size: var(--t-label); }
.top-tabs button { color: var(--ink-3); padding-bottom: .35em; border-bottom: 1px solid transparent; }
.top-tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.top-tabs button:hover { color: var(--ink); }

.top-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.entry { border-bottom: 1px solid var(--rule); }
.entry-row {
  width: 100%; text-align: left; display: grid; align-items: start;
  grid-template-columns: clamp(64px, 7vw, 150px) minmax(0, 1fr) minmax(0, clamp(220px, 24vw, 470px));
  gap: 0 clamp(16px, 2vw, 44px); padding: clamp(18px, 1.6vw, 34px) 0;
}
.entry-row:hover .entry-title { color: #fff; }
.rank { font: 300 clamp(34px, 3.6vw, 76px)/.9 var(--sans); letter-spacing: -.04em; color: var(--ink-4); font-variant-numeric: tabular-nums; }
.entry:first-child .rank { color: var(--ink); }
.entry-main { min-width: 0; display: grid; gap: .55em; }
.entry-title { font: 400 clamp(18px, 1.5vw, 32px)/1.15 var(--sans); letter-spacing: -.015em; color: var(--ink); }
.entry-why { color: var(--ink-3); font-size: var(--t-small); line-height: 1.65; max-width: 76ch; }
.entry-quote { color: var(--c); font-size: var(--t-body); line-height: 1.5; max-width: 80ch; overflow-wrap: anywhere; }
.entry-quote b { font-weight: 400; color: var(--ink-4); margin-right: .8em; }
.entry-quote[data-ch="fly"] { --c: var(--fly); } .entry-quote[data-ch="worm"] { --c: var(--worm); }
.entry-quote[data-ch="human"] { --c: var(--human); } .entry-quote[data-ch="claude"] { --c: var(--claude); }
.entry-meta { min-width: 0; display: grid; gap: .6em; justify-items: end; text-align: right; color: var(--ink-3); font-size: var(--t-small); }
.strip { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.strip span { width: clamp(22px, 1.9vw, 40px); aspect-ratio: 1; background: #0c0c0e; border: 1px solid var(--rule-hi); background-size: cover; background-position: center; display: grid; place-items: center; font-size: 9px; color: var(--ink-4); }
.strip span.sound::before { content: ""; width: 60%; height: 40%; background: linear-gradient(var(--ink-3), var(--ink-3)) 10% 50% / 1px 40% no-repeat, linear-gradient(var(--ink-3), var(--ink-3)) 35% 50% / 1px 100% no-repeat, linear-gradient(var(--ink-3), var(--ink-3)) 60% 50% / 1px 65% no-repeat, linear-gradient(var(--ink-3), var(--ink-3)) 85% 50% / 1px 30% no-repeat; }
.strip span.text::before { content: "Aa"; font: 400 10px/1 var(--sans); color: var(--ink-3); }
.score { display: inline-flex; align-items: center; gap: .7em; }
.score i { width: 60px; height: 2px; background: linear-gradient(90deg, var(--ink) calc(var(--s) * 100%), var(--rule-hi) 0); }

.reader { padding: 0 0 clamp(28px, 2.6vw, 56px) calc(clamp(64px, 7vw, 150px) + clamp(16px, 2vw, 44px)); }
.reader[hidden] { display: none; }
.rm { display: grid; grid-template-columns: clamp(90px, 9vw, 180px) minmax(0, 1fr); gap: 0 clamp(14px, 1.6vw, 32px); padding: 1.1em 0; border-top: 1px solid var(--rule); }
.rm-thumb { width: 100%; aspect-ratio: 1; background: #0c0c0e center / cover no-repeat; border: 1px solid var(--rule-hi); display: grid; place-items: center; color: var(--ink-4); font-size: var(--t-small); }
.rm-thumb.text { font: 300 clamp(18px, 1.6vw, 34px)/1 var(--sans); color: var(--ink-3); letter-spacing: -.02em; }
.rm-lines { min-width: 0; display: grid; gap: .45em; }
.rm-shown { color: var(--ink-3); font-size: var(--t-small); }
.rl { display: grid; grid-template-columns: 5.6em minmax(0, 1fr) 1.8em; gap: 0 1em; font-size: var(--t-body); line-height: 1.55; color: var(--ink-2); }
.rl .who { color: var(--c); }
.rl .txt { overflow-wrap: anywhere; }
.rl .rc { color: var(--ink-4); font-size: .85em; margin-left: .8em; }
.rl.best .txt { color: var(--ink); }
.rl[data-ch="fly"] { --c: var(--fly); } .rl[data-ch="worm"] { --c: var(--worm); }
.rl[data-ch="human"] { --c: var(--human); } .rl[data-ch="claude"] { --c: var(--claude); }
.rl.post .who::after { content: " x"; color: var(--ink-4); }
.rl .lp { opacity: .6; }
.reader-foot { margin-top: 1em; color: var(--ink-4); font-size: var(--t-small); overflow-wrap: anywhere; }

@media (max-width: 1100px) {
  .entry-row { grid-template-columns: clamp(48px, 9vw, 90px) minmax(0, 1fr); }
  .entry-meta { grid-column: 2; justify-items: start; text-align: left; margin-top: 1em; }
  .strip { justify-content: flex-start; }
  .reader { padding-left: 0; }
}
@media (max-width: 760px) {
  .top-head { grid-template-columns: minmax(0, 1fr); }
  .rm { grid-template-columns: minmax(0, 1fr); gap: .8em; }
  .rm-thumb { width: 42%; }
  .rl { grid-template-columns: 4.6em minmax(0, 1fr) 1.6em; }
}