/* lamps.sh — night ink, one lamp, one cone of light. */
:root {
  --ink: #0a0d12;         /* night, a touch of blue — never flat black */
  --ink-2: #10151c;
  --ink-3: #161d26;
  --line: #1e2731;
  --lit: #f3f5e8;         /* what the light reaches */
  --body: #c9cfc0;
  --dim: #5f6a75;         /* what it does not */
  --lime: #c8f542;        /* the light itself: phosphor */
  --lime-deep: #9cc42f;
  --ember: #f2b45c;       /* refusals, warnings */
  --display: "IBM Plex Mono", ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
  --sans: "IBM Plex Sans", -apple-system, "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
  --measure: 880px;
}
* { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; overflow-x: hidden; background: var(--ink); color: var(--body);
  font: 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased;
}
a { color: var(--lime); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
code { font-family: var(--mono); font-size: .93em; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--lime); color: var(--ink); padding: 8px 12px; border-radius: 6px; font-weight: 600; }
.skip:focus { left: 8px; z-index: 10; }

/* ---------- header / footer ---------- */
.top {
  display: flex; align-items: center; justify-content: space-between;
  max-width: var(--measure); margin: 0 auto; padding: 22px 24px; position: relative; z-index: 3;
}
.brand { display: flex; align-items: center; gap: 9px; color: var(--lit); font-family: var(--display); font-weight: 600; font-size: 17px; letter-spacing: -.02em; }
.brand img { mix-blend-mode: screen; }
.brand:hover { text-decoration: none; }
.top nav { display: flex; gap: 22px; font-family: var(--mono); font-size: 13.5px; }
.top nav a { color: var(--dim); }
.top nav a:hover { color: var(--lime); text-decoration: none; }

.bottom { border-top: 1px solid var(--line); margin-top: 96px; }
.bottom-in { max-width: var(--measure); margin: 0 auto; padding: 28px 24px; display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: space-between; font-size: 13.5px; color: var(--dim); }
.brand-small { display: inline-flex; align-items: center; gap: 7px; color: var(--body); font-family: var(--mono); }
.brand-small img { mix-blend-mode: screen; }
.bottom-links, .bottom-note { font-family: var(--mono); font-size: 12.5px; }
.bottom-links a, .bottom-note a { color: var(--dim); }
.bottom-links a:hover, .bottom-note a:hover { color: var(--lime); }

main { max-width: var(--measure); margin: 0 auto; padding: 0 24px; }
h2 {
  font-family: var(--display); font-weight: 600; font-size: clamp(21px, 2.8vw, 27px);
  line-height: 1.2; letter-spacing: -.03em; color: var(--lit); margin: 0 0 10px;
}
h2::before { content: "## "; color: var(--lime); font-weight: 500; }
.section-lede { color: var(--body); max-width: 640px; margin: 0 0 26px; }
main > section { margin-top: 104px; }
.note { color: var(--dim); font-size: 15px; margin: 14px 0 0; max-width: 680px; }
.note a { color: var(--body); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- terminal blocks ---------- */
.term {
  position: relative; text-align: left;
  background: var(--ink-2); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px; font-family: var(--mono); font-size: 14px; line-height: 1.75;
  overflow-x: auto; color: var(--lit);
}
.term .prompt { color: var(--lime); margin-right: 10px; user-select: none; }
.term .line { white-space: pre; }
.term .line.out { color: var(--dim); padding-left: 22px; }
.term .line.out.warn { color: var(--ember); }
.term.install { display: flex; align-items: center; gap: 8px; padding: 15px 96px 15px 18px; font-size: 15.5px; box-shadow: 0 0 0 1px rgba(200,245,66,.08), 0 24px 60px -30px rgba(200,245,66,.35); }
.term.wide { font-size: 13.5px; }
.copy {
  position: absolute; top: 10px; right: 10px;
  background: var(--ink-3); color: var(--dim); border: 1px solid var(--line);
  border-radius: 6px; padding: 3px 9px; font: 12px var(--mono); cursor: pointer;
}
.copy:hover { color: var(--lime); border-color: var(--lime-deep); }
.copy.done { color: var(--ink); background: var(--lime); border-color: var(--lime); }

/* ---------- hero: the lamp hangs from the ceiling ---------- */
.hero { position: relative; margin-top: 0; padding: 200px 0 40px; text-align: center; overflow: hidden; }
.ceiling { position: absolute; inset: -80px 0 auto 0; height: 560px; pointer-events: none; }
.cord { position: absolute; left: 50%; top: 0; width: 1px; height: 150px; background: linear-gradient(180deg, var(--line), var(--dim)); transform-origin: top center; }
.lantern { position: absolute; left: 50%; top: 150px; width: 64px; height: 64px; margin-left: -32px; mix-blend-mode: screen; transform-origin: 50% -150px; filter: drop-shadow(0 0 18px rgba(200,245,66,.45)); }
.cone {
  position: absolute; left: 50%; top: 200px; width: 1100px; height: 520px; margin-left: -550px;
  background: radial-gradient(ellipse 50% 100% at 50% 0%, rgba(200,245,66,.16), rgba(200,245,66,.05) 45%, transparent 72%);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  transform-origin: top center;
}
.glow { position: absolute; left: 50%; top: 182px; width: 220px; height: 120px; margin-left: -110px; background: radial-gradient(closest-side, rgba(200,245,66,.35), transparent); filter: blur(12px); }
.lit { position: relative; z-index: 1; }
.hero h1 {
  font-family: var(--display); font-weight: 700; font-size: clamp(36px, 7vw, 76px);
  line-height: 1.02; letter-spacing: -.045em; color: var(--lit); margin: 0 0 22px;
}
.lede { color: var(--body); max-width: 600px; margin: 0 auto 30px; font-size: 18px; }
.hero .term.install { max-width: 620px; margin: 0 auto; }
.alt { color: var(--dim); font-size: 13.5px; margin: 12px 0 0; font-family: var(--mono); }
.alt code { color: var(--body); }

/* the cone as a diagram: lit = granted, dark = refused */
.light-map { position: relative; z-index: 1; list-style: none; margin: 56px auto 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 720px; font-family: var(--mono); font-size: 12.5px; }
.light-map li { border-radius: 8px; padding: 10px 10px 8px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; text-align: left; border: 1px solid var(--line); min-width: 0; }
.light-map li code { white-space: nowrap; }
.light-map li span { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.light-map li.on { background: rgba(200,245,66,.07); border-color: rgba(200,245,66,.35); color: var(--lit); }
.light-map li.on span { color: var(--lime); }
.light-map li.off { color: var(--dim); background: transparent; }
.light-map li.off code { text-decoration: line-through; text-decoration-color: rgba(242,180,92,.6); }
.light-map li.off span { color: var(--ember); opacity: .8; }
.light-caption { color: var(--dim); font-size: 14.5px; max-width: 560px; margin: 16px auto 0; }

/* switch-on sequence */
@media (prefers-reduced-motion: no-preference) {
  .hero.on .cone, .hero.on .glow { animation: switch-on 900ms ease-out both; }
  .hero.on .lantern, .hero.on .cord { animation: sway 3.2s ease-in-out both, pendulum 9s 3.2s ease-in-out infinite; }
  .hero.on .cone { animation: switch-on 900ms ease-out both, pendulum 9s 3.2s ease-in-out infinite; }
  .hero.on .light-map li.on { animation: warm 900ms 350ms ease-out both; }
  .hero:not(.on) .cone, .hero:not(.on) .glow { opacity: 0; }
}
@keyframes switch-on { 0% { opacity: 0; } 35% { opacity: .35; } 45% { opacity: .12; } 100% { opacity: 1; } }
@keyframes sway { 0% { transform: rotate(1.6deg); } 50% { transform: rotate(-1deg); } 100% { transform: rotate(0); } }
@keyframes warm { from { background: transparent; border-color: var(--line); color: var(--dim); } }

/* ---------- familiar ---------- */
.cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.col { min-width: 0; position: relative; }
.eyebrow { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; font-family: var(--mono); padding-right: 64px; }
.eyebrow code { color: var(--lit); font-size: 15px; font-weight: 600; }
.eyebrow .like { color: var(--dim); font-size: 12.5px; }
.cols .term { font-size: 13px; padding-right: 16px; position: static; }
.col .copy { top: -2px; right: 0; }
.col-note { color: var(--dim); font-size: 14px; margin: 10px 0 0; }

/* ---------- convention ---------- */
.folder { display: grid; grid-template-columns: 200px minmax(0, 1fr); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--ink-2); }
.tree { padding: 16px 18px; border-right: 1px solid var(--line); font-family: var(--mono); font-size: 13.5px; background: var(--ink); }
.tree-dir { color: var(--body); margin-bottom: 8px; }
.tree-file { color: var(--dim); padding: 4px 0 4px 20px; position: relative; }
.tree-file::before { content: "├─"; position: absolute; left: 0; color: var(--line); }
.tree-file:last-child::before { content: "└─"; }
.tree-file.on { color: var(--lime); }
.tree-file.dim { color: var(--line); }
.manifest { min-width: 0; }
.manifest pre { margin: 0; padding: 16px 18px; font: 13.5px/1.7 var(--mono); overflow-x: auto; color: var(--body); }
.manifest .k { color: var(--lit); }
.manifest .c { color: var(--lime); }
.manifest .n { color: var(--dim); font-style: italic; }
.fields { display: grid; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; margin: 22px 0 0; }
.field { display: grid; grid-template-columns: 84px 1fr; gap: 12px; align-items: baseline; }
.field dt code { color: var(--lit); font-weight: 600; }
.field dd { margin: 0; color: var(--dim); font-size: 14.5px; }

/* ---------- today ---------- */
.lamp-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.lamp-list li { display: grid; grid-template-columns: 110px minmax(0, 1fr) minmax(0, 280px); gap: 16px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line); }
.lamp-name code { color: var(--lit); font-weight: 600; font-size: 15px; }
.lamp-name:hover code { color: var(--lime); }
.lamp-what { color: var(--body); font-size: 15px; }
.lamp-caps { color: var(--dim); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }

/* ---------- skill / why ---------- */
.skill .term.install { max-width: 560px; margin: 0; }
.why-list { list-style: none; margin: 0 0 30px; padding: 0; border-top: 1px solid var(--line); max-width: 680px; }
.why-list li { padding: 14px 0 14px 28px; border-bottom: 1px solid var(--line); position: relative; color: var(--lit); }
.why-list li::before { content: "◆"; position: absolute; left: 0; top: 15px; color: var(--lime); font-size: 12px; }
.links { display: flex; gap: 14px; flex-wrap: wrap; }
.btn { display: inline-block; background: var(--lime); color: var(--ink); font-weight: 600; padding: 11px 18px; border-radius: 8px; border: 1px solid var(--lime); font-family: var(--mono); font-size: 14.5px; }
.btn:hover { text-decoration: none; filter: brightness(1.06); }
.btn.ghost { background: transparent; color: var(--lime); }

/* ---------- error page ---------- */
.errorpage { text-align: center; padding: 120px 0; }
.errorpage h1 { font-family: var(--mono); font-size: 72px; margin: 0; color: var(--lime); }

/* ---------- docs (content() pages) ---------- */
main.docs { max-width: 760px; margin: 0 auto; padding: 32px 24px 80px; }
main.docs h1 { font-family: var(--display); font-weight: 700; font-size: 34px; letter-spacing: -.04em; color: var(--lit); line-height: 1.1; }
main.docs h1::before { content: "# "; color: var(--lime); font-weight: 500; }
main.docs h2 { font-size: 22px; margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--line); }
main.docs h3 { font-family: var(--mono); font-size: 15px; color: var(--lime); margin-top: 28px; letter-spacing: .02em; }
main.docs p, main.docs li { color: var(--body); }
main.docs li { margin: 6px 0; }
main.docs pre { background: var(--ink-2); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; overflow-x: auto; font: 13.5px/1.65 var(--mono); color: var(--lit); }
main.docs code { color: var(--lit); }
main.docs a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .cols { grid-template-columns: minmax(0, 1fr); }
  .folder { grid-template-columns: minmax(0, 1fr); }
  .tree { border-right: 0; border-bottom: 1px solid var(--line); }
  .fields { grid-template-columns: 1fr; }
  .lamp-list li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .lamp-caps { text-align: left; white-space: normal; }
}
@media (max-width: 560px) {
  .hero { padding-top: 170px; }
  .light-map { grid-template-columns: 1fr; }
  .term.install { flex-wrap: wrap; padding-right: 18px; font-size: 14px; }
  .term.install code { white-space: normal; word-break: break-all; }
  .term.install .copy { position: static; margin-top: 6px; }
  .top nav { gap: 14px; }
}


/* ---------- the lamp keeps swinging, barely ---------- */
@keyframes pendulum { 0% { transform: rotate(0); } 28% { transform: rotate(.9deg); } 72% { transform: rotate(-.7deg); } 100% { transform: rotate(0); } }

/* ---------- agents row ---------- */
.agent-row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.agent-row li { border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; font-family: var(--mono); font-size: 13.5px; color: var(--lit); background: var(--ink-2); }
.agent-row li.any { color: var(--lime); border-color: rgba(200,245,66,.35); background: rgba(200,245,66,.06); }

/* ---------- leaderboard ---------- */
.board-search { display: flex; gap: 10px; margin: 0 0 18px; max-width: 460px; }
.board-search input, .search input { flex: 1; min-width: 0; background: var(--ink-2); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; color: var(--lit); font: 15px var(--sans); }
.board-search input:focus, .search input:focus { outline: 2px solid var(--lime); outline-offset: 1px; border-color: var(--lime-deep); }
.board-search button, .search button { background: transparent; color: var(--lime); border: 1px solid var(--lime-deep); border-radius: 8px; padding: 10px 18px; font: 600 14px var(--mono); cursor: pointer; }
.board-search button:hover, .search button:hover { background: rgba(200,245,66,.08); }
.board { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.board li { display: grid; grid-template-columns: 34px 120px minmax(0, 1fr) 90px; gap: 14px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--line); }
.board .rank { font-family: var(--mono); color: var(--dim); font-size: 13px; }
.board .board-pulls { font-family: var(--mono); font-size: 12.5px; color: var(--lime-deep); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 720px) { .board li { grid-template-columns: 28px minmax(0, 1fr) 80px; } .board .lamp-what { display: none; } }

/* ---------- /hub: the catalog ---------- */
.hubpage .search { margin-top: 56px; }
.hubpage .search h1 { font-family: var(--display); font-weight: 700; font-size: clamp(28px, 5vw, 44px); letter-spacing: -.04em; color: var(--lit); margin: 0 0 18px; }
.hubpage .search form { display: flex; gap: 10px; max-width: 520px; }
.hubpage .meta { color: var(--dim); font-size: 14px; margin: 12px 0 0; }
.hubpage .grid { margin-top: 34px; display: grid; grid-template-columns: 1fr; gap: 12px; max-width: 780px; }
.card { display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--line); border-radius: 12px; padding: 16px; background: var(--ink-2); color: var(--body); min-width: 0; }
.card:hover { text-decoration: none; border-color: var(--lime-deep); }
.card-head { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--mono); font-size: 15px; gap: 8px; }
.card-head .ref { color: var(--dim); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-head .ref strong { color: var(--lit); }
.card:hover .ref strong { color: var(--lime); }
.card-head .pulls { margin-left: auto; font-size: 12.5px; color: var(--lime-deep); white-space: nowrap; }
.card-head .ver { color: var(--dim); font-size: 12.5px; }
.card .desc { margin: 0; font-size: 14px; color: var(--body); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card-foot { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pill { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; border-radius: 999px; padding: 3px 9px; }
.pill.pure { color: var(--lime); background: rgba(200,245,66,.08); border: 1px solid rgba(200,245,66,.3); }
.pill.native { color: var(--ember); background: rgba(242,180,92,.08); border: 1px solid rgba(242,180,92,.3); }
.card .tool { font-family: var(--mono); font-size: 11.5px; color: var(--dim); border: 1px solid var(--line); border-radius: 5px; padding: 2px 7px; }
.card .caps { font-size: 11px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.empty { color: var(--dim); }


/* =========== compact landing: masthead / duo / leaderboard / trio ========== */

.mast { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 56px; align-items: end; padding: 118px 0 8px; margin-top: 0; }
.mast-brand { position: relative; min-width: 0; }
.mast-ceiling { position: absolute; left: 0; right: 0; top: -118px; height: 240px; pointer-events: none; }
.mast-cord { position: absolute; left: 84px; top: -22px; width: 1px; height: 64px; background: linear-gradient(180deg, var(--line), var(--dim)); transform-origin: top center; }
.mast-lantern { position: absolute; left: 84px; top: 42px; margin-left: -22px; mix-blend-mode: screen; filter: drop-shadow(0 0 12px rgba(200,245,66,.45)); transform-origin: 50% -64px; }
.mast-glow { position: absolute; left: 84px; top: 34px; width: 130px; height: 70px; margin-left: -65px; background: radial-gradient(closest-side, rgba(200,245,66,.32), transparent); filter: blur(10px); }
.mast-cone { position: absolute; left: 84px; top: 66px; width: 460px; height: 190px; margin-left: -230px; background: radial-gradient(ellipse 50% 100% at 50% 0%, rgba(200,245,66,.17), rgba(200,245,66,.05) 45%, transparent 72%); clip-path: polygon(50% 0, 100% 100%, 0 100%); transform-origin: 50% 0; }
@media (prefers-reduced-motion: no-preference) {
  .mast-cone, .mast-glow { animation: switch-on 900ms ease-out both; }
  .mast-lantern, .mast-cord { animation: sway 3.2s ease-in-out both, pendulum 9s 3.2s ease-in-out infinite; }
  .mast-cone { animation: switch-on 900ms ease-out both, pendulum 9s 3.2s ease-in-out infinite; }
}
.wordmark { position: relative; font-family: var(--display); font-weight: 700; font-size: clamp(56px, 9vw, 108px); line-height: .95; letter-spacing: -.055em; color: var(--lit); margin: 0; }
.ecosystem { position: relative; font-family: var(--mono); font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: var(--lime); margin: 14px 0 0 4px; }
.thesis { font-size: clamp(16.5px, 1.9vw, 19.5px); line-height: 1.55; color: var(--body); margin: 0; max-width: 30em; }
.thesis strong { color: var(--lit); }

.label { font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); margin: 0 0 12px; }

.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 56px; margin-top: 64px; align-items: start; }
.duo-col { min-width: 0; }
.duo .term.install { max-width: none; margin: 0; }
.duo .alt { margin-top: 10px; }

.boardsec { margin-top: 72px; }
.board-search { display: flex; gap: 10px; margin: 0 0 10px; }
.board-meta { font-family: var(--mono); font-size: 12.5px; color: var(--dim); margin: 0 0 6px; }
.board-meta strong { color: var(--lime); font-weight: 600; }
.board-head { color: var(--dim); font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.board-head .board-pulls { color: var(--dim); }
.board .lamp-ref { color: var(--dim); font-size: 12px; margin-left: 10px; font-family: var(--mono); }
.board .col-ceiling { font-size: 12px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.board li { grid-template-columns: 30px minmax(0, 1.1fr) minmax(0, 1fr) 64px; }
.board-foot { color: var(--dim); font-size: 13.5px; font-family: var(--mono); margin: 14px 0 0; }

.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 72px; }
.trio-card { display: block; border: 1px solid var(--line); border-radius: 12px; padding: 18px; background: var(--ink-2); color: var(--body); font-size: 14px; min-width: 0; }
.trio-card:hover { text-decoration: none; border-color: var(--lime-deep); }
.trio-card:hover .label { color: var(--lime); }
.trio-card p:last-child { margin: 0; }

@media (max-width: 860px) {
  .mast { grid-template-columns: 1fr; align-items: start; gap: 20px; padding-top: 128px; }
  .duo { grid-template-columns: 1fr; }
  .board li { grid-template-columns: 26px minmax(0, 1fr) 60px; }
  .board .col-ceiling { display: none; }
  .board-head .col-ceiling { display: none; }
  .trio { grid-template-columns: 1fr; }
}
.duo .term.install code { white-space: nowrap; }
.duo .term.install { overflow-x: auto; }
main.landing { max-width: 1140px; }

[hidden] { display: none !important; }
.pill.community { color: var(--body); background: var(--ink-3); border: 1px solid var(--line); }
.pill.breaks { color: var(--ember); background: rgba(242,180,92,.08); border: 1px solid rgba(242,180,92,.4); }

.top nav .langs { display: inline-flex; gap: 2px; margin-left: 10px; padding-left: 14px; border-left: 1px solid var(--line); }
.top nav .langs a { padding: 2px 6px; border-radius: 5px; font-size: 12px; letter-spacing: .04em; }
.top nav .langs a:hover { color: var(--lime); background: rgba(200,245,66,.07); text-decoration: none; }

/* ---------- the paper ---------- */

/* ---------- the paper ---------- */
.paper-main { max-width: 720px; }
.paper-main > section { margin-top: 72px; }
.paper-hero { padding-bottom: 0; }
.paper-hero h1 { font-size: clamp(30px, 5.4vw, 52px); }
.paper-eyebrow { font-family: var(--mono); font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--lime); margin: 0 0 14px; }
.paper-meta { margin: 24px auto 0; font-family: var(--mono); font-size: 12.5px; color: var(--dim); display: flex; gap: 8px 22px; justify-content: center; flex-wrap: wrap; }
.paper-meta b { color: var(--body); font-weight: 500; }

.abstract { margin: 56px 0 0; padding: 22px 24px; background: var(--ink-2); border: 1px solid var(--line); border-radius: 12px; }
.abstract p { margin: 0; }
.abstract .label { font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--lime); margin: 0 0 10px; }

.paper-main h2 .no { color: var(--lime); font-weight: 500; margin-right: 10px; }
.paper-main p { max-width: 68ch; }
.paper-main em, .paper-main strong { color: var(--lit); }

.formula { margin: 22px 0 6px; padding: 18px 20px; text-align: center; background: var(--ink-2); border: 1px solid rgba(200,245,66,.28); border-radius: 12px; font-family: var(--mono); font-size: clamp(14px, 2.6vw, 17px); color: var(--lit); overflow-x: auto; white-space: nowrap; box-shadow: 0 0 0 1px rgba(200,245,66,.06), 0 24px 60px -34px rgba(200,245,66,.3); }
.formula .op { color: var(--lime); padding: 0 6px; }
.formula-caption { text-align: center; color: var(--dim); font-size: 13.5px; font-family: var(--mono); margin: 0 0 16px; }

.parties { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.parties li { border: 1px solid var(--line); border-radius: 10px; padding: 14px 14px 12px; background: var(--ink-2); }
.parties .who { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--lime); margin-bottom: 6px; }
.parties .what { font-size: 14.5px; }
@media (max-width: 640px) { .parties { grid-template-columns: 1fr; } }

.paper-main figure { margin: 22px 0; }
.paper-main figcaption { color: var(--dim); font-size: 13.5px; font-family: var(--mono); margin-top: 10px; }
.paper-main .light-map { margin: 22px 0 0; max-width: none; }

.table-wrap { overflow-x: auto; margin: 22px 0 0; border: 1px solid var(--line); border-radius: 12px; }
.paper-main table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
.paper-main th { font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); text-align: left; font-weight: 500; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--ink-2); }
.paper-main td { padding: 11px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.paper-main tr:last-child td { border-bottom: 0; }
.paper-main td:first-child { font-family: var(--mono); font-size: 13px; color: var(--lit); white-space: nowrap; }

.sentence { margin: 72px 0 0; padding: 30px 26px; text-align: center; border: 1px solid rgba(200,245,66,.28); border-radius: 14px; background: var(--ink-2); box-shadow: 0 0 0 1px rgba(200,245,66,.06), 0 30px 70px -40px rgba(200,245,66,.35); }
.sentence p { font-family: var(--display); font-size: clamp(16.5px, 2.8vw, 20px); line-height: 1.5; letter-spacing: -.02em; color: var(--lit); margin: 0; text-wrap: balance; }
.sentence .mark { color: var(--lime); }