/* Iceman Contributor: ice cave visual system.
   Owner direction, 25 October 2026: icy, ragged and blueish; content panels are
   caves in a mountain with ice crystals forming on their rims. caves.js draws the
   generated rims and the falling crystals; this file carries everything that must
   also work without JavaScript. content.css holds section-internal layout only.
   Type: Londrina Solid (display), Source Sans Pro (body, plain zero), Atkinson Hyperlegible Mono (code). */

@font-face{font-family:"Londrina Solid";src:url("assets/fonts/londrina-solid-900.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:"Source Sans Pro";src:url("assets/fonts/source-sans-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Source Sans Pro";src:url("assets/fonts/source-sans-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Source Sans Pro";src:url("assets/fonts/source-sans-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible Mono";src:url("assets/fonts/atkinson-hyperlegible-mono-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  color-scheme:dark;
  /* public tokens (contract) */
  --ice-bg:#14283E;          /* mountain rock at night */
  --ice-ink:#EAF4FB;         /* snow text on rock */
  --ice-muted:#A9C1D6;
  --ice-accent:#1D5BD0;      /* glacier cobalt: one thing per section */
  --ice-panel:#E3F0F8;       /* flat cave interior */
  --ice-panel-ink:#0D2034;
  --ice-edge:#5B84A8;        /* hairlines inside caves */
  --ice-focus:#2F6FE4;
  --font-display:"Londrina Solid","Arial Black",sans-serif;
  --font-body:"Source Sans Pro","Segoe UI",system-ui,sans-serif;
  --font-mono:"Atkinson Hyperlegible Mono",ui-monospace,monospace;
  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1.25rem;--space-5:2rem;--space-6:3.5rem;
  /* type scale */
  --step-label:.875rem;--step-small:1rem;--step-body:1.1875rem;--step-lead:1.3125rem;
  --step-h3:1.375rem;--step-h2:clamp(2.3rem,1.55rem + 2.6vw,3.75rem);--step-h1:clamp(3.3rem,1.8rem + 5.6vw,6.9rem);
  /* shared components: ragged page, square corners */
  --radius-structure:0;--radius-control:0;--radius-label:0;
  /* internal: cave art */
  --gutter:1rem;
  --cave-pad-x:clamp(1.25rem,5vw,4rem);
  --cave-gap:clamp(3.75rem,10vw,8.75rem);
  --cave-muted:#3D5A75;
  --cave-lip:#A9CFEA;
  --cave-snow:#D8EBF7;
  --cave-w0:#EDF6FC;--cave-w1:#D2E5F2;--cave-w2:#BAD4E9;--cave-w3:#9DC0DB;
  --cave-r0:#2D4C6B;--cave-r1:#22405E;--cave-r2:#1A3450;--cave-r3:#132940;
  --crystal-light:#F2FAFF;--crystal-mid:#9CC7E7;--crystal-edge:#24496C;
  --sky:#0B1828;
}
@media (prefers-color-scheme:dark){
  :root{
    --ice-bg:#0C1A2B;--sky:#07111D;
    --ice-panel:#D5E6F2;
    --cave-w0:#E2EEF7;--cave-w1:#C4DAEA;--cave-w2:#B2CCE1;--cave-w3:#9DBDD6;
    --cave-r0:#25405C;--cave-r1:#1C344F;--cave-r2:#152A43;--cave-r3:#0E2034;
    --cave-lip:#94BCDB;--cave-snow:#BDD6EA;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--ice-bg);overflow-x:clip;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body.ice-page{
  margin:0;min-height:100vh;position:relative;isolation:isolate;overflow-x:clip;
  color:var(--ice-ink);background:var(--ice-bg);
  font:400 var(--step-body)/1.6 var(--font-body);
  font-variant-numeric:lining-nums;
}
/* mountain face: crisp flat facet planes, fixed behind the scrolling caves */
body.ice-page::after{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    linear-gradient(104deg,transparent 0 33%,rgb(160 205 240/.045) 33% 51%,transparent 51%),
    linear-gradient(73deg,rgb(2 10 22/.16) 0 17%,transparent 17% 69%,rgb(160 205 240/.03) 69% 84%,transparent 84%),
    linear-gradient(161deg,transparent 0 58%,rgb(2 10 22/.12) 58% 71%,transparent 71%);
}
/* ridge line at the top of the mountain */
body.ice-page::before{
  content:"";position:absolute;inset:0 0 auto;height:clamp(13rem,30vw,21rem);z-index:-1;pointer-events:none;
  background:var(--sky);
  clip-path:polygon(0 0,100% 0,100% 44%,95% 57%,90% 39%,84% 61%,77% 27%,70% 52%,64% 45%,57% 70%,50% 36%,43% 58%,36% 24%,29% 49%,22% 41%,14% 65%,8% 47%,0 59%);
}

::selection{background:var(--ice-accent);color:#fff}
:focus-visible{outline:3px solid var(--ice-focus);outline-offset:3px}
img,svg,video,canvas{max-width:100%}
a{color:inherit;text-decoration-line:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{text-decoration-thickness:2px}

h1,h2,.ice-display{font-family:var(--font-display);font-weight:900;line-height:.96;letter-spacing:.005em;text-wrap:balance;margin:0}
h1{font-size:var(--step-h1);line-height:.9}
h2{font-size:var(--step-h2)}
h3{font:700 var(--step-h3)/1.25 var(--font-body);margin:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
.ice-kicker,.ice-label{font:700 var(--step-label)/1.3 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--ice-muted)}
.ice-source{font-size:var(--step-small);color:var(--ice-muted)}
.ice-num{font:900 clamp(2.75rem,1.9rem + 3vw,4.5rem)/.95 var(--font-display);font-variant-numeric:tabular-nums}
.ice-num--focus{color:var(--ice-accent)}
code,kbd,samp,.ice-mono{font-family:var(--font-mono);font-size:.86em}
/* inline code stays in the sentence: a flat frost tint, wraps after its slash or inside when it must */
/* inline code never breaks inside; the long model path may break only after its slash */
:is(.cave,.ice-rock) code{padding:.08em .3em;background:rgb(13 32 52/.075);box-shadow:inset 0 -1px 0 rgb(13 32 52/.2);
  -webkit-box-decoration-break:clone;box-decoration-break:clone;white-space:nowrap}
:is(.cave,.ice-rock) code:has(> span){white-space:normal}
:is(.cave,.ice-rock) code > span{white-space:nowrap}
.cave a[href="/glyph-cluster"]{white-space:nowrap}

/* ---------- vertical rhythm: one flow rule for every text column ---------- */
:is(.cave-body,.ice-hero-copy,.ice-split-copy,.ice-stage-copy,.ice-sign) > * + *{margin-top:1rem}
:is(.cave-body,.ice-hero-copy,.ice-split-copy,.ice-stage-copy,.ice-sign) > .ice-kicker + :is(h1,h2,div){margin-top:.85rem}
:is(.cave-body,.ice-hero-copy,.ice-split-copy,.ice-stage-copy,.ice-sign) > :is(h1,h2) + *{margin-top:1.5rem}
:is(.cave-body,.ice-hero-copy,.ice-split-copy,.ice-stage-copy,.ice-sign) > * + :is(ol,ul,table,.ice-gallery,.ice-games,.ice-token,.ice-faq,.ice-related,.ice-evidence,.ice-split,.ice-stage-grid){margin-top:2.25rem}
:is(.cave-body,.ice-hero-copy,.ice-split-copy,.ice-stage-copy,.ice-sign) > * + h3{margin-top:2.75rem}
:is(.cave-body,.ice-hero-copy,.ice-split-copy,.ice-stage-copy,.ice-sign) > h3 + *{margin-top:.75rem}
:is(.cave-body,.ice-hero-copy,.ice-split-copy,.ice-stage-copy,.ice-sign) > * + :is(.ice-actions,.ice-copy){margin-top:2rem}
.cave-body > :first-child{margin-top:0}
.cave-body{display:flow-root}
:is(.cave,.ice-rock) p:not(.ice-actions):not(.ice-copy){max-width:66ch}

/* ---------- caves ---------- */
.cave{
  position:relative;isolation:isolate;display:block;
  /* caves differ in size but share one left edge, so every text column starts on the same line */
  width:min(100% - 2*var(--gutter),var(--cave-w,70rem));margin-block:var(--cave-gap);margin-left:max(var(--gutter),(100% - 70rem)/2);margin-right:auto;
  color:var(--ice-panel-ink);color-scheme:light;
  --ice-ink:var(--ice-panel-ink);--ice-muted:var(--cave-muted);
}
.cave--hero{margin-top:clamp(3.75rem,9vw,8rem)}
.ice-invite{--cave-w:50rem}#benchmarks{--cave-w:65rem}#games{--cave-w:62rem}#tokenizer{--cave-w:67rem}#access{--cave-w:63rem}
#identity{--cave-w:58rem}#theme-song{--cave-w:66rem}#updates{--cave-w:61rem}#questions{--cave-w:59rem}#sources{--cave-w:68rem}
main > aside.cave:last-child{--cave-w:62rem}
.cave-body{position:relative;z-index:1;padding:3.25rem var(--cave-pad-x) 3rem}
.cave--hero > .cave-body{padding-top:4rem;padding-bottom:3.25rem}
.cave-shell{position:absolute;inset:0;z-index:0;pointer-events:none}
.cave-art{position:absolute;display:block;overflow:visible;max-width:none}

/* no-JavaScript cave: a ragged rock rim and a flat ice interior */
.cave::before,.cave::after{content:"";position:absolute;pointer-events:none}
.cave::before{
  inset:-8px;z-index:-2;background:var(--cave-r1);
  clip-path:polygon(0 30px,22px 6px,11% 12px,23% 0,38% 9px,52% 2px,66% 11px,79% 0,91% 9px,calc(100% - 20px) 2px,100% 28px,calc(100% - 6px) 31%,100% 49%,calc(100% - 4px) 70%,100% calc(100% - 34px),calc(100% - 28px) 100%,84% calc(100% - 7px),69% 100%,54% calc(100% - 9px),37% 100%,21% calc(100% - 6px),30px 100%,0 calc(100% - 26px),5px 71%,0 52%,6px 33%);
}
.cave::after{
  inset:0;z-index:-1;background:var(--ice-panel);
  box-shadow:inset 0 0 0 4px var(--cave-lip);
  clip-path:polygon(0 24px,20px 4px,12% 9px,24% 1px,37% 8px,51% 0,64% 9px,78% 2px,90% 8px,calc(100% - 22px) 0,100% 26px,calc(100% - 7px) 30%,100% 47%,calc(100% - 5px) 66%,100% calc(100% - 30px),calc(100% - 26px) 100%,86% calc(100% - 8px),71% 100%,55% calc(100% - 6px),39% 100%,23% calc(100% - 9px),26px 100%,0 calc(100% - 22px),6px 72%,0 54%,7px 35%);
}
.cave:nth-of-type(even)::before,.cave:nth-of-type(even)::after{transform:scaleX(-1)}
.cave--shelled::before,.cave--shelled::after{content:none}

/* the two Demodokos caves are dark: the cave's own mouth is the signboard, its frosted rim the frame */
.ice-invite,.ice-studio{--ice-panel:#0D2034;--cave-w0:#14324F;--cave-w1:#173856;--cave-w2:#1B3F60;--cave-w3:#244E78}

/* reference sections and the footer: text set straight on the rock face between the caves */
.ice-rock{position:relative;width:min(100% - 2*var(--gutter),var(--cave-w,70rem));margin-block:var(--cave-gap);margin-left:max(var(--gutter),(100% - 70rem)/2);margin-right:auto;
  --ice-panel-ink:#EAF4FB;--ice-ink:#EAF4FB;--ice-muted:#A9C1D6;--cave-muted:#A9C1D6;--ice-edge:#3F6486;--ice-focus:#7DB2FF;color:var(--ice-ink)}
.ice-rock > .cave-body{padding-block:0}
.ice-rock + .ice-rock{margin-top:calc(var(--cave-gap) * .6)}
footer.ice-rock{margin-bottom:3rem}
footer.ice-rock > .cave-body{padding-top:1.25rem}

/* generated rim art (caves.js) */
.cave-art .cv-r0{fill:var(--cave-r0)}.cave-art .cv-r1{fill:var(--cave-r1)}
.cave-art .cv-r2{fill:var(--cave-r2)}.cave-art .cv-r3{fill:var(--cave-r3)}
.cave-art .cv-lip{fill:var(--cave-lip)}
.cave-art .cv-in{fill:var(--ice-panel)}
.cave-art .cv-w0{fill:var(--cave-w0)}.cave-art .cv-w1{fill:var(--cave-w1)}.cave-art .cv-w2{fill:var(--cave-w2)}.cave-art .cv-w3{fill:var(--cave-w3)}
.cave-art .cv-snow{fill:var(--cave-snow)}
.cave-art .c-u{fill:var(--crystal-light)}
.cave-art .c-d{fill:var(--crystal-mid)}
.cave-art .c-o{fill:none;stroke:var(--crystal-edge);stroke-width:1;stroke-linejoin:round;stroke-opacity:.75}
.cave-art .c-h{fill:none;stroke:#fff;stroke-width:.9;stroke-linecap:round}
.cave-art .cr{transform-box:fill-box;transform-origin:0 50%;transition:transform 3.4s cubic-bezier(.16,.84,.3,1),opacity 1.2s ease}
.cave-art .cr.is-off{transform:scale(.08);opacity:0;transition:none}
.cave-shell.is-forming .cr{animation:ice-form 1s cubic-bezier(.2,.8,.25,1) both;animation-delay:var(--d,0ms)}
@keyframes ice-form{from{transform:scale(.05);opacity:0}}

/* reduced motion: two still shards lie on the first slab of each button row (caves.js) */
.ice-rest{position:absolute;left:14px;bottom:calc(100% - 3px);width:84px;height:16px;pointer-events:none}
.ice-rest .cave-art{position:static}
.ice-rest .c-o{stroke:#081A2E;stroke-width:1.5;stroke-opacity:.92}
.ice-rest .c-d{fill:#8FC0E6}
/* falling crystal layer (caves.js) */
.ice-fall{position:fixed;inset:0;width:100%;height:100%;z-index:40;pointer-events:none;contain:strict}

/* ---------- ice buttons ---------- */
.ice-btn{
  --btn-fill:var(--ice-accent);--btn-ink:#fff;
  position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  min-height:3.25rem;padding:.8rem 1.55rem .85rem;border:0;background:none;cursor:pointer;
  font:900 1.375rem/1.05 var(--font-display);letter-spacing:.02em;color:var(--btn-ink);text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.ice-btn::before,.ice-btn::after{content:"";position:absolute;z-index:-1;pointer-events:none}
.ice-btn::before{inset:0;background:var(--btn-fill);
  clip-path:polygon(7px 0,calc(100% - 12px) 0,100% 9px,calc(100% - 3px) 55%,100% calc(100% - 6px),calc(100% - 9px) 100%,14px 100%,0 calc(100% - 9px),3px 42%,0 8px)}
/* frosted top of the slab: a crisp, ragged rime band */
.ice-btn::after{inset:0 0 auto;height:42%;background:rgb(255 255 255/.2);
  clip-path:polygon(7px 0,calc(100% - 12px) 0,100% 9px,100% 46%,86% 78%,71% 44%,52% 86%,33% 50%,16% 80%,0 58%,0 8px)}
.ice-btn{transition:transform .08s ease-out}
.ice-btn:hover{--btn-fill:#1749AA;text-decoration:none}
.ice-btn:not(.ice-btn--ghost):hover::after{background:rgb(255 255 255/.3)}
/* press: the slab sinks two pixels and darkens, no bounce */
.ice-btn:active{transform:translateY(2px)}
.ice-btn:active::before{filter:brightness(.86)}
.ice-btn--ghost{--btn-fill:var(--ice-panel-ink);--btn-ink:var(--ice-panel-ink)}
.ice-btn--ghost::after{inset:2px;height:auto;background:#F7FBFE;
  clip-path:polygon(6px 0,calc(100% - 11px) 0,100% 8px,calc(100% - 3px) 55%,100% calc(100% - 5px),calc(100% - 8px) 100%,13px 100%,0 calc(100% - 8px),3px 42%,0 7px)}
.ice-btn--ghost:hover{--btn-fill:var(--ice-accent)}
.ice-btn--ghost:hover::after{background:#fff}
.ice-btn--small{min-height:2.75rem;padding:.55rem 1.05rem .6rem;font-size:1.125rem}
.ice-btn[disabled],.ice-btn[aria-disabled="true"]{opacity:.55;cursor:default}
/* the play mark on a button that starts the music */
.ice-play-mark{display:inline-block;flex:none;width:.72em;height:.82em;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%)}

/* ---------- typographic content patterns ---------- */
/* tables: rows and hairlines; head row is a label row */
.cave table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums lining-nums}
.cave caption{caption-side:bottom;text-align:left;padding-top:var(--space-3);color:var(--ice-muted);font-size:var(--step-small)}
.cave thead th{font:700 var(--step-label)/1.3 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--ice-muted);
  text-align:left;vertical-align:bottom;padding:0 var(--space-4) var(--space-2) 0;border-bottom:2px solid var(--ice-panel-ink)}
.cave tbody th,.cave td{font:400 var(--step-small)/1.4 var(--font-body);text-align:left;padding:.65rem var(--space-4) .65rem 0;border-bottom:1px solid var(--ice-edge);vertical-align:middle}
.cave th:last-child,.cave td:last-child{padding-right:0}

/* ordered steps: display numerals hang at the margin, hairlines between steps */
.ice-steps{list-style:none;margin:0;padding:0;counter-reset:ice-step}
.ice-steps > li{counter-increment:ice-step;position:relative;padding:1.1rem 0 1.2rem 3.75rem;border-top:1px solid var(--ice-edge)}
.ice-steps > li:last-child{border-bottom:1px solid var(--ice-edge)}
.ice-steps > li::before{content:counter(ice-step);position:absolute;left:0;top:.95rem;font:900 2.6rem/1 var(--font-display);color:var(--ice-panel-ink)}
.ice-steps > li > a{white-space:nowrap}

/* ---------- Demodokos signboards: a dark ice slab wedged in the cave mouth, snow on top ---------- */
.ice-sign{
  --ice-ink:#EAF4FB;--ice-muted:#A9C1D6;--ice-accent:#7DB2FF;--ice-edge:#46698A;--ice-focus:#9CC7FF;
  position:relative;isolation:isolate;color:var(--ice-ink);color-scheme:dark;
  margin-inline:calc(var(--sign-in,18px) - var(--cave-pad-x));
  padding:calc(var(--space-5) + 14px) calc(var(--cave-pad-x) - var(--sign-in,18px)) calc(var(--space-5) + 6px);
}
.cave-body > .ice-sign:only-child{margin:0;padding:0}
.cave-body > .ice-sign:only-child::before,.cave-body > .ice-sign:only-child::after{content:none}
@media (max-width:600px){.ice-sign{--sign-in:8px}}
.ice-sign::before,.ice-sign::after{content:"";position:absolute;pointer-events:none;z-index:-1}
.ice-sign::before{inset:0;background:var(--ice-panel-ink);
  clip-path:polygon(0 12px,9% 3px,22% 0,34% 9px,47% 4px,58% 11px,71% 0,86% 8px,100% 2px,calc(100% - 9px) 31%,100% 58%,calc(100% - 6px) calc(100% - 10px),88% 100%,74% calc(100% - 9px),61% 100%,45% calc(100% - 6px),29% 100%,14% calc(100% - 11px),0 100%,8px 66%,0 38%)}
/* frost: a ragged snow cap along the top edge */
.ice-sign::after{inset:0 0 auto;height:24px;background:var(--cave-snow);
  clip-path:polygon(0 12px,9% 3px,22% 0,34% 9px,47% 4px,58% 11px,71% 0,86% 8px,100% 2px,100% 38%,95% 62%,90% 44%,83% 92%,77% 50%,66% 70%,57% 58%,50% 100%,43% 62%,33% 74%,25% 46%,17% 88%,10% 60%,4% 76%,0 70%)}
.ice-sign h2{color:#F4FAFE}
.ice-sign .ice-btn{--btn-ink:var(--ice-panel-ink)}
.ice-sign .ice-btn:hover{--btn-fill:#A6CBFF}
.ice-sign .ice-btn--ghost{--btn-fill:#EAF4FB;--btn-ink:#EAF4FB}
.ice-sign .ice-btn--ghost::after{background:var(--ice-panel-ink)}
.ice-sign .ice-btn--ghost:hover::after{background:#17324F}
.ice-sign .ice-btn--ghost[aria-pressed="true"]::after{background:#24476B}

/* ---------- the ice kid ---------- */
.ice-kid-stage{position:relative;margin:0}
.ice-kid{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}
/* hero lunge: arm and shards leave the image at its left and top edges; let them
   dissolve into the cave instead of ending on a straight cut */
.cave--hero .ice-kid-stage:not([class*="ice-kid-stage--"]) .ice-kid,
.ice-kid-stage--hero .ice-kid{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 13%),linear-gradient(180deg,transparent 0,#000 8%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 13%),linear-gradient(180deg,transparent 0,#000 8%);
  mask-composite:intersect;
}
.ice-kid-stage--player .ice-kid{transition:filter .9s ease}
/* freeze dance: when the music stops he turns to pale frost and a rime crust climbs his legs */
.ice-kid-stage--player.is-frozen .ice-kid{filter:saturate(.18) brightness(1.22) contrast(.82)}
.ice-kid-stage--player .ice-scrawl{top:auto;bottom:100%;left:auto;right:8%;max-width:none;white-space:nowrap;margin-bottom:.5rem}
/* frost scrawl: his short answers, real text in the display face */
.ice-scrawl{font:900 1.5rem/1 var(--font-display);letter-spacing:.01em;color:var(--ice-ink);transform:rotate(-5deg);transform-origin:0 100%}

@media (max-width:600px){
  :root{--step-body:1.125rem;--step-lead:1.25rem}
  .cave-body{padding-top:2.75rem;padding-bottom:2.5rem}
  .cave--hero > .cave-body{padding-top:3.25rem}
  .ice-btn{font-size:1.25rem}
}
@media (prefers-reduced-motion:reduce){
  .cave-art .cr{transition:none}
  .cave-shell.is-forming .cr{animation:none}
  .ice-kid-stage--player .ice-kid{transition:none}
  .ice-btn:active{transform:none}
}