/* Prefrontal launch site: paradigma.inc's structure (apparatus band, full-height opening) with deepmind.google's
   News and article layouts, on Paradigma's grey. Type: Libre Caslon Display (Paradigma) for headlines, Google Sans Flex (DeepMind) for everything else, DM Mono for code and names such as dig.bench. */
@font-face{font-family:'Libre Caslon Display';src:url(fonts/libre-caslon-display.woff2) format('woff2');font-weight:400;font-display:block}
@font-face{font-family:'Google Sans Flex';src:url(fonts/google-sans-flex.woff2) format('woff2');font-weight:300 700;font-display:swap}
@font-face{font-family:'DM Mono';src:url(fonts/dm-mono-400-latin.woff2) format('woff2');font-weight:400;font-display:block;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Mono';src:url(fonts/dm-mono-400-latin-ext.woff2) format('woff2');font-weight:400;font-display:block;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'DM Mono';src:url(fonts/dm-mono-500-latin.woff2) format('woff2');font-weight:500;font-display:block;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Mono';src:url(fonts/dm-mono-500-latin-ext.woff2) format('woff2');font-weight:500;font-display:block;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --paper:#ffffff;--ink:#111;--ink-muted:#5a5a5a;--rule:#c9c9c9;
  --dark:#0e0e0e;--dark-ink:#f2f2f2;--dark-ink-muted:#9a9a9a;--dark-rule:#3a3a3a;
  --ground:#ffffff;--coral:#E8604C;--blue:#2F6FB0;
  --serif:"Libre Caslon Display",serif;--sans:"Google Sans Flex",system-ui,sans-serif;--mono:"DM Mono",ui-monospace,monospace; /* Caslon (paradigma.inc) for headlines, Google Sans Flex (deepmind.google) for everything else, DM Mono for code */
  --text-ui:12.5px;--text-reading:16px;--logo-ar:900/123;
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--dark);overscroll-behavior-y:none}
body{font-family:var(--sans);font-size:var(--text-ui);line-height:1.62;color:var(--ink);background:var(--dark);font-synthesis:style;-webkit-font-smoothing:antialiased}
body.home{background:var(--ground)}
html:has(body.home){background:var(--ground)}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit}

/* links on hover: a hairline underline draws in from the left; the text never changes colour */
:root{--redact-bg:var(--ink);--redact-fg:var(--paper)}
a{background-image:linear-gradient(var(--redact-bg),var(--redact-bg));background-position:0 100%;background-repeat:no-repeat;background-size:0% 1px;margin:0 -.18em;padding:0 .18em}
a:focus-visible{outline:1px solid currentColor;outline-offset:3px;text-decoration:none}
@media (hover:hover) and (pointer:fine){
  a{transition:background-size .35s cubic-bezier(.4,0,.2,1)}
  a:hover{text-decoration:none;background-size:100% 1px}
}
.skip-link{position:absolute;top:0;left:-9999px;z-index:100;background:var(--paper);color:var(--ink);padding:8px 14px}
.skip-link:focus{left:0}

/* apparatus band */
.apparatus-band{display:flex;justify-content:space-between;align-items:center;padding:18px 3.4vw 12px}
.apparatus-band .mark{display:block;text-decoration:none;padding:4px .18em}
.apparatus-band .mark .logo{display:block;width:128px;aspect-ratio:var(--logo-ar);background:currentColor;-webkit-mask:url(img/logo.png) center/contain no-repeat;mask:url(img/logo.png) center/contain no-repeat}
.apparatus-band .mark{background:none!important}
.apparatus-band .mark .logo{transition:opacity .35s ease,transform .35s cubic-bezier(.4,0,.2,1)}
.apparatus-band .mark:hover .logo{opacity:.6;transform:translateX(2px)}
.apparatus-band nav{font-size:11px;letter-spacing:.09em;text-transform:uppercase}
.apparatus-band nav a{text-decoration:none}
.apparatus-band .sep,.site-footer .sep{padding:0 .6em}
.over-art{position:absolute;inset:0 0 auto;z-index:10;color:#fff;--redact-bg:#fff;--redact-fg:#111}
.over-art.ink{color:var(--ink);--redact-bg:var(--ink);--redact-fg:#e2e2e2}
.home .apparatus-band{padding:14px 6vw 12px;text-shadow:0 1px 3px rgba(0,0,0,.5);--redact-fg:var(--ground)}
.home .apparatus-band nav{font-size:12px;letter-spacing:.055em}
@media (width<=440px){.apparatus-band{flex-wrap:wrap;gap:6px 12px}.apparatus-band nav{letter-spacing:.03em}.apparatus-band .sep{padding:0 .35em}}

/* home opening, after paradigma.inc: one real photograph (a lone figure on a summit above a sea of fog), toned
   to Paradigma's flat grey (baked into the files, since a live filter on so large a layer seams), with moving clouds. Everything sits in a box locked to the photo's 1461:1076 frame,
   so the word's baseline stays on his feet (56.1% down) and the gap between PREFRO and NTAL stays on him
   (56.8% across) at every size. His front layer is keyed from the same photo, so he stands before the letters. */
.home-opening{--opening-h:max(600px,100svh);position:relative;height:var(--opening-h);background:var(--ground);overflow:clip;isolation:isolate;color:#fff;--redact-bg:#fff;--redact-fg:var(--ground)}
.home-opening .comp{--cw:max(100vw,calc(var(--opening-h) * 1461 / 1076));--ch:calc(var(--cw) * 1076 / 1461);--ts:min(calc(var(--cw) * .1),11.4vw,22svh);
  position:absolute;left:50%;width:var(--cw);height:var(--ch);top:calc((var(--opening-h) - var(--ch)) / 2);transform:translateX(-50%);z-index:0}
.home-opening .art{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:fill} /* an <img>, not a background: Chrome seamed the stretched background between raster tiles */
.home-opening .clouds{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.home-opening .clouds.front-fog{z-index:4}
.home-opening .wordmark{position:absolute;inset:0;z-index:2;font-family:var(--serif);font-weight:400;font-size:var(--ts);line-height:1;letter-spacing:.08em;white-space:nowrap;
  color:rgba(255,255,255,.1);text-shadow:0 0 .9px rgba(255,255,255,.78),0 0 .025em rgba(255,255,255,.18),0 0 .1em rgba(255,255,255,.16)}
.home-opening .wordmark span{position:absolute;top:calc(56.1% - var(--ts) * .74)}
.home-opening .wordmark .l{right:43.2%}
.home-opening .wordmark .r{left:56.8%} /* one continuous word at its natural spacing, the O to N joint on him; he stands in front, as Paradigma's figure does */
.home-opening .front{position:absolute;z-index:3;pointer-events:none;left:calc(804 / 1461 * 100%);top:calc(534 / 1076 * 100%);width:calc(50 / 1461 * 100%);height:calc(71 / 1076 * 100%);
  background:url(img/summit-man.png) center/100% 100% no-repeat}
.home-opening::after{content:"";position:absolute;left:0;right:0;bottom:0;height:22%;z-index:4;pointer-events:none;background:linear-gradient(transparent,var(--ground))}
.statement,.tenet dd{font-family:var(--serif);font-weight:300;letter-spacing:-.01em;color:rgba(255,255,255,.12);text-shadow:0 0 var(--statement-softness,.3px) rgba(255,255,255,.95),0 0 3px rgba(255,255,255,.12);font-size:clamp(28px,min(3vw,4.8svh),44px);line-height:1.12}
.statement{position:absolute;z-index:4;top:max(108px,15svh);left:6vw;width:min(22ch,58vw)}
.descent{position:absolute;z-index:6;left:6vw;bottom:24px;font-size:12px;letter-spacing:.055em;text-transform:uppercase;color:#111;text-decoration:none;--redact-bg:#111;--redact-fg:#fff}
.grain::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;opacity:.42;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* the field: tenets over the art as it runs on below the fold */
.field{position:relative;z-index:1;padding:12svh 6vw 10svh;color:#fff}
.tenets{display:grid;gap:7svh}
.tenet{border-top:1px solid rgba(255,255,255,.6);padding-top:14px}
.tenet dt{font-size:12px;letter-spacing:.055em;text-transform:uppercase;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.tenet dd{max-width:27ch;margin:16px 0 0}
@media (width>=1001px){.tenets{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:8vw}}

/* News, after deepmind.google/discover/blog: heading with a muted line, a featured story on the left (title,
   meta, large rounded image), a hairline-divided list on the right with square rounded thumbnails, in a clean
   sans. Set on Paradigma's grey. */
.dm-news{padding:110px 5vw 120px;color:#111;font-family:var(--sans);--redact-bg:#111;--redact-fg:var(--ground)}
.dm-page .dm-news{padding-top:150px}
.dm-head h1,.dm-head h2{font-weight:400;font-size:clamp(34px,3.4vw,48px);line-height:1.1;letter-spacing:-.02em;margin:0}
.dm-head p{font-size:clamp(34px,3.4vw,48px);line-height:1.1;letter-spacing:-.02em;color:rgba(17,17,17,.92);max-width:30ch;margin:0}
.dm-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 56px;margin-top:64px}
.dm-lead h3{font-weight:400;font-size:clamp(30px,3vw,44px);line-height:1.12;letter-spacing:-.02em;margin:0;max-width:22ch}
.dm-news h3 a{text-decoration:none;background:none;margin:0;padding:0}
.dm-news h3 a:hover{color:#111!important;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.dm-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin:18px 0 0;font-size:15px;color:rgba(17,17,17,.92)}
.dm-meta a{color:#111;text-decoration:none}
.dm-meta a span{display:inline-block;margin-left:6px;transition:transform .2s}
.dm-meta a:hover span{transform:translateX(3px)}
.dm-hero{display:block;margin:40px 0 0;background:none;padding:0}
.dm-hero .pic{aspect-ratio:1/1;max-width:564px}
.pic{position:relative;overflow:hidden;border-radius:16px;background:#5c5c5c}
.pic video{width:100%;height:100%;object-fit:cover;display:block}
.pic video[src$="lsa.mp4"]{object-position:50% 0} /* keep the cherry at the top of the LSA film in frame when the box crops it */
.dm-a-hero .pic:has(video[src$="lsa.mp4"]){aspect-ratio:7/4} /* frames the LSA architecture closely: cherry near the top, bottom sheet just above the edge */
.dm-a-hero .pic video[src$="lsa.mp4"]{object-position:50% 25%}
.pic img,.pic svg,.pic canvas{width:100%;height:100%;object-fit:cover;display:block}
.pic.live{background:#efede9}
.pic.dark{background:#121212}
.dm-list{list-style:none;margin:0;padding:0}
.dm-item{display:grid;grid-template-columns:minmax(0,1fr) 176px;gap:32px;padding:0 0 36px;margin-bottom:36px;border-bottom:1px solid rgba(17,17,17,.22)}
.dm-item:last-child{border-bottom:0}
.dm-item h3{font-weight:400;font-size:clamp(22px,1.9vw,28px);line-height:1.18;letter-spacing:-.01em;margin:0}
.dm-thumb{display:block;background:none;padding:0;margin:0}
.dm-thumb .pic{aspect-ratio:1/1}
@media (width<=900px){.dm-grid{grid-template-columns:1fr;gap:56px}.dm-item{grid-template-columns:minmax(0,1fr) 112px;gap:20px}}

/* Article pages, after deepmind.google/blog/<post>: centred meta, title, byline and pill buttons; a wide rounded
   hero; a centred lede; then a 624px reading column in sans, figures up to 848px. On the grey. */
.dm-article{color:#111;font-family:var(--sans);padding:120px 5vw 40px;--redact-bg:#111;--redact-fg:var(--ground)}
.dm-a-head{text-align:center;max-width:900px;margin:0 auto}
.dm-a-meta{display:flex;justify-content:center;gap:16px;font-size:17.5px;line-height:25px;font-weight:400;letter-spacing:.012em;color:rgba(17,17,17,.92);margin:0}
.dm-a-head h1{font-weight:500;font-size:54px;line-height:56px;letter-spacing:-.0225em;margin:16px auto 0;max-width:848px;text-wrap:balance}
.dm-a-by{font-size:20px;line-height:29px;font-weight:500;letter-spacing:-.004em;color:rgba(17,17,17,.92);margin:36px 0 0}
.dm-a-btns{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px 16px;margin-top:40px}
.pill{display:inline-flex;align-items:center;gap:10px;height:48px;padding:12px 24px;border-radius:9999px;font:450 17.5px/24px var(--sans);letter-spacing:.012em;text-decoration:none;color:#111;background:rgba(20,21,24,.55);border:0;margin:0;cursor:pointer}
.pill.solid{background:#f8f9fc;color:#18191d}
.pill:hover{background:#444!important;color:#fff!important}
.pill.ghost{background:none;padding:12px 8px}
.pill svg{width:20px;height:20px}
.dm-a-hero{margin:72px auto 0;max-width:1296px}
.dm-a-hero .pic{aspect-ratio:2/1;border-radius:20px}
.dm-a-hero .pic img{object-position:50% 52%}
.dm-a-hero .pic:has(img[src*="latent-sparse-attention"])::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(17,17,17,.1);pointer-events:none} /* the white LSA cover would melt into the page - the cards' hairline */
.dm-a-lede{max-width:624px;margin:80px auto 0;text-align:center;font-weight:500;font-size:24px;line-height:26px;letter-spacing:-.007em;text-wrap:balance}
.dm-a-body{max-width:624px;margin:56px auto 0}
.dm-a-body>p,.dm-a-body li{font-size:17.5px;line-height:25.4px;font-weight:400;letter-spacing:.012em;color:rgba(17,17,17,.92);margin:0 0 1.15em}
.dm-a-body p.isolated{font-weight:500;font-size:28px;line-height:1.2;letter-spacing:-.015em;color:#111;margin:1.6em 0}
.dm-a-body h2{font-weight:450;font-size:42px;line-height:43.7px;letter-spacing:-.023em;margin:2.1em 0 .6em}
.dm-a-body h2.end-matter{font-size:26px;border-top:1px solid rgba(17,17,17,.25);padding-top:18px}
.dm-a-body h3{font-weight:500;font-size:24px;line-height:26px;letter-spacing:-.007em;margin:2em 0 .6em}
.dm-a-body .wide-fig{width:min(848px,90vw);margin:48px 0 48px calc((624px - min(848px,90vw)) / 2);color:#111}
.dm-a-body figcaption,.dm-a-body .cap{font-size:17.5px;line-height:25.4px;letter-spacing:.012em;color:rgba(17,17,17,.92);padding-top:12px}
.dm-a-body .label,.dm-a-body th,.dm-a-body tr.group td,.dm-a-body .legend,.dm-a-body .split-key,.dm-a-body .dots .axis{font-family:var(--sans);letter-spacing:.01em;text-transform:none;font-size:14px;color:rgba(17,17,17,.92)}
.dm-a-body .label{border-color:rgba(17,17,17,.35)}
.dm-a-body .label .muted{color:rgba(17,17,17,.92)}
.dm-a-body table{font-size:15px;color:#111}
.dm-a-body th{border-color:rgba(17,17,17,.92)}
.dm-a-body td{border-color:rgba(17,17,17,.18)}
.dm-a-body tr.ours td{background:rgba(17,17,17,.08)}
.dm-a-body .tabs button{font-family:var(--sans);text-transform:none;font-size:14px;color:rgba(17,17,17,.92);border-color:rgba(17,17,17,.3);border-radius:0}
.dm-a-body .tabs button[aria-selected=true]{background:#fff;color:#1b1b1b;border-color:#fff}
.dm-a-body .stat .big{color:#111;font-family:var(--sans);font-weight:500;font-size:120px;letter-spacing:-.04em}
.dm-a-body .stat .say{font-family:var(--sans);font-weight:500;font-size:24px;line-height:26px;letter-spacing:-.007em;color:#111}
.dm-a-body .split .a{background:#fff}
.dm-a-body .film{border-radius:16px;overflow:hidden}
.dm-a-body .steps button{font-family:var(--sans);font-size:12px;color:rgba(17,17,17,.92)}
.dm-a-body .steps button[aria-current=true]{color:#111}
.dm-a-body .steps button::before{background:rgba(17,17,17,.25)}
.dm-a-body .steps .fill{background:#111}
.dm-a-body .step-cap{font-size:15px;color:rgba(17,17,17,.92)}
.dm-a-body .step-cap b{font-family:var(--sans);font-weight:500;color:#111}
.dm-a-body .step-cap .todo{color:rgba(17,17,17,.4)}
.dm-a-body .pair>div{border-color:rgba(17,17,17,.35);font-size:16px;color:rgba(17,17,17,.92)}
.dm-a-body .pair b{font-family:var(--sans);font-weight:500;color:#111}
.dm-a-body .dots .row{border-color:rgba(17,17,17,.18);font-size:15px}
.dm-a-body .dots .track{background:linear-gradient(rgba(17,17,17,.3),rgba(17,17,17,.3)) center/100% 1px no-repeat}
.dm-a-body .dots .dot{background:#111}
.dm-a-body .trail{font-size:16px;color:rgba(17,17,17,.92)}
.dm-a-body .trail .q{background:rgba(17,17,17,.08);border-radius:12px}
.dm-a-body .trail .q b{font-family:var(--sans);text-transform:none;letter-spacing:0;font-size:13px;color:rgba(17,17,17,.92)}
.dm-a-body .trail .ans{font-family:var(--sans);font-weight:500}
.dm-a-body .todo-chart{border-color:rgba(17,17,17,.35);color:rgba(17,17,17,.92);font-family:var(--sans);text-transform:none;letter-spacing:0;font-size:14px;border-radius:12px}
.dm-a-body .legend i[style*="#111"]{color:#111!important}
.dm-a-body p.document{display:flex;justify-content:space-between;border-top:1px solid rgba(17,17,17,.25);padding-top:14px;font-size:17px}
.dm-a-body p.document span{font-size:14px;color:rgba(17,17,17,.92)}
.dm-a-body pre{background:rgba(17,17,17,.04);border:0;border-radius:12px;color:#111;font:13px/1.55 var(--sans);padding:18px 20px;overflow-x:auto}
.dm-a-body .bibtex{position:relative}
.dm-a-body .bibtex button{background:none;color:rgba(17,17,17,.92);font-family:var(--sans);text-transform:none;letter-spacing:0}
.dm-a-body .links{list-style:none;padding:0;border-top:1px solid rgba(17,17,17,.3)}
.dm-a-body .links li a{display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px solid rgba(17,17,17,.18);text-decoration:none;margin:0}
.dm-a-body .links .t{font-family:var(--sans);font-size:19px}
.dm-a-body .links .u{font-family:var(--sans);color:rgba(17,17,17,.92);font-size:14px}
.dm-a-body a:not(.pill){color:#111;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;background:none;margin:0;padding:0}
.dm-a-body .links li a{text-decoration:none}
.facts{display:grid;gap:18px;margin:2em 0}
.facts div{border-top:1px solid rgba(17,17,17,.25);padding-top:12px}
.facts dt{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:rgba(17,17,17,.92)}
.facts dd{margin:6px 0 0;font-size:17.5px;line-height:25.4px;color:#111}
.board{background:rgba(17,17,17,.04);border-radius:16px;padding:20px 16px 12px}
.board svg{width:100%;height:auto;display:block;overflow:visible}
.board .tick{fill:rgba(17,17,17,.92);font:13px var(--sans)}
.board .axis{fill:rgba(17,17,17,.92);font:13px var(--sans)}
.board .lbl{font:500 14px var(--sans);cursor:default}
.board .series{transition:opacity .15s}
.board-key{display:flex;flex-direction:column;gap:6px;margin:12px 4px 4px;font-size:13px;line-height:1.4;color:rgba(17,17,17,.92)}
.board-key i{display:inline-block;vertical-align:middle;margin-right:8px}
.board-key i.ln{width:16px;height:1.5px;background:rgba(17,17,17,.42)}
.board-key i.ring{width:9px;height:9px;border-radius:50%;border:1.5px solid rgba(17,17,17,.7)}
.board-key i.ln.dash{background:repeating-linear-gradient(90deg,#111 0 5px,transparent 5px 9px)}
figcaption img.mark{display:inline-block;width:15px;height:15px;vertical-align:-3px;margin:0 1px} /* digbench.ai's numbered schematic key */
.schematic{background:#0e0f12;border-radius:16px;padding:18px}
.schematic img{width:100%;height:auto;display:block}
.games{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.dm-a-body .games li{margin:0;padding:0}
.dm-a-body .games a{display:block;background:rgba(17,17,17,.04);border-radius:12px;padding:12px 14px 20px;color:#111;text-decoration:none;transition:background .15s}
.dm-a-body .games a:hover{background:rgba(17,17,17,.09)!important;color:#111!important}
.games span{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:rgba(17,17,17,.92)}
.games b{display:block;text-align:center;font:500 20px var(--sans);margin-top:6px}
@media (width<=700px){.games{grid-template-columns:repeat(2,1fr)}}
@media (width<=700px){.dm-a-head h1{font-size:36px;line-height:40px}.dm-a-body h2{font-size:30px;line-height:32px}.dm-a-hero .pic{aspect-ratio:4/3}.dm-a-body .wide-fig{width:100%;margin-left:0}}

/* ledger and sheets */
.ledger{background:var(--dark);padding:3vh 12px 96px}
.ledger.pitch{background:none}
.document-file{counter-reset:folio;display:grid;justify-items:center;row-gap:16px}
.sheets{display:contents}
.sheet{--sheet-pad-top:56px;--sheet-pad-left:76px;--sheet-pad-right:190px;--measure:36rem;position:relative;width:min(100%,860px);min-width:0;background:var(--paper);color:var(--ink);padding:var(--sheet-pad-top) var(--sheet-pad-right) 110px var(--sheet-pad-left);counter-increment:folio;animation:sheet-settle .5s cubic-bezier(.2,.6,.2,1) both}
@keyframes sheet-settle{from{opacity:0;transform:translateY(10px)}}
.sheet::before{content:"";position:absolute;top:108px;left:0;width:30px;height:7px;background:var(--ink)}
.sheet::after{content:"0" counter(folio,decimal-leading-zero);position:absolute;right:44px;bottom:44px;font-size:12px;letter-spacing:.09em}
.sheet>*{max-width:var(--measure)}
.sheet>p{font-size:var(--text-reading);text-align:justify;-webkit-hyphens:auto;hyphens:auto;margin-bottom:2.2em}
.sheet p.isolated{font-family:var(--serif);font-size:clamp(20px,2.2vw,28px);line-height:1.35;text-align:left;hyphens:none;margin:5vh 0}
.sheet h2{font-family:var(--serif);font-weight:400;font-size:38px;line-height:1.15;margin:8px 0 24px}
.sheet h3{font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.25;margin:2.6em 0 14px}
.sheet h4{font-size:11px;font-weight:400;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-muted);margin:2.4em 0 10px}
.sheet h2.end-matter{border-top:1px solid var(--ink);padding-top:14px;font-size:20px}
.sheet h2.end-matter:first-child{border-top:none;padding-top:0}
.sheet pre{border:1px solid var(--ink);margin-bottom:2.2em;padding:18px 20px;font:11.5px/1.55 var(--sans);overflow-x:auto;white-space:pre}
.sheet figcaption,.cap{display:block;font-size:12px;letter-spacing:.04em;line-height:1.5;color:var(--ink-muted);padding-top:8px}
.sheet .wide-fig{max-width:none;margin:4vh calc(44px - var(--sheet-pad-right)) 2.4em 0}
.sheet p.document{border-top:1px solid var(--ink);display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 24px;margin-bottom:3.4em;padding:14px 0 0;text-align:left}
.sheet p.document span{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-muted)}
.bibtex{position:relative}
.bibtex button{position:absolute;top:8px;right:8px;background:var(--paper);color:var(--ink-muted);font:11px var(--sans);letter-spacing:.09em;text-transform:uppercase;border:0;padding:2px 6px;cursor:pointer}
.bibtex button:hover{color:var(--ink)}
.redaction{display:inline-block;width:7em;height:1.05em;background:var(--ink);vertical-align:text-bottom}
.cover-meta{position:absolute;top:var(--sheet-pad-top);right:var(--sheet-pad-left);display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-muted)}
.cover-meta .redaction{width:4.5em;margin-top:4px}

/* home sheets: wide, with strip, headline, spread, notes */
.wide{--sheet-pad-top:48px;--sheet-pad-right:var(--sheet-pad-left);background:#f4f4f2;padding-bottom:88px}
.wide>*{max-width:none}
.wide::before{top:calc(var(--sheet-pad-top) + 28px)}
.strip,.note dt,.results .no,.results .meta{font-size:11px;line-height:1.6;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-muted)}
.strip{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--ink);padding-bottom:14px}
.strip h2{font:inherit;letter-spacing:inherit;color:var(--ink);margin:0}
.wide .headline,.wide .contact,.wide .results li{text-align:left;-webkit-hyphens:none;hyphens:none}
.wide .headline{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.2vw,40px);line-height:1.06;letter-spacing:-.02em;text-wrap:balance;margin:40px 0 0}
.wide .lead{font-size:clamp(24px,2.6vw,32px);text-wrap:pretty}
.spread{display:grid;gap:40px;margin-top:40px}
.spread figure{justify-self:center;width:min(100%,520px)}
.spread .frame{aspect-ratio:3/2;background:#121212;position:relative;overflow:hidden}
.spread .frame.light{background:#efede9}
.spread figcaption{font-family:var(--serif);font-size:15px;line-height:1.4;letter-spacing:normal;color:var(--ink-muted);padding-top:14px}
.notes{display:grid;gap:28px}
.note{border-top:1px solid var(--ink);padding-top:14px}
.note dd{font-family:var(--serif);font-size:17px;line-height:1.3;text-wrap:pretty;margin:6px 0 0}
@media (width>=1001px){.notes{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:5%}}
.results{list-style:none;margin:56px 0 0}
.results li{display:grid;grid-template-columns:3.6em minmax(0,1fr);border-top:1px solid var(--ink);padding:20px 0 28px}
.results .no{padding-top:.9em}
.results a{font-family:var(--serif);font-size:clamp(20px,2vw,24px);line-height:1.16;text-decoration:none}
.results .meta{display:block;margin-top:10px}
.short{padding-bottom:56px}
.contact{margin:36px 0 0}
.contact a{display:inline-block;background-color:var(--ink);color:var(--paper);box-shadow:inset 0 0 0 1px var(--ink);--redact-bg:var(--paper);--redact-fg:var(--ink);margin:0;padding:17px 22px;font-size:14px;line-height:1;letter-spacing:.04em;text-decoration:none}
.contact a span{margin-left:.7em}
.index .columns{display:grid;gap:32px;margin-top:28px}
.index h3{font-family:var(--serif);font-weight:400;font-size:24px;margin:0 0 10px}
.index h3 a,.index li a{text-decoration:none}
.index ul{list-style:none}
.index li{border-top:1px solid var(--ink);font-family:var(--serif);font-size:17px;line-height:1.3;padding:10px 0}
.index li .meta{display:block;margin-top:4px;font:11px var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-muted)}
.index .all{display:inline-block;margin-top:12px;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
@media (width>=701px){.index .columns{grid-template-columns:1fr 1fr}}

/* listings */
.sheet .entries{max-width:none;margin-top:56px}
.entry{--measure:58ch;display:flex;gap:2.4em;border-top:1px solid var(--ink);padding:26px 0 44px}
.entry .no{font-size:11px;letter-spacing:.09em;color:var(--ink-muted);padding-top:10px}
.entry h2{font-size:clamp(24px,2.4vw,32px);line-height:1.2;margin:0 0 8px}
.entry h2 a{text-decoration:none}
.entry .meta{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:16px}
.entry .deckline,.entry .summary,.entry .byline{max-width:var(--measure)}
.entry .deckline,.entry .summary{text-align:justify;-webkit-hyphens:auto;hyphens:auto;margin-bottom:12px}
.entry .summary,.entry .byline{color:var(--ink-muted)}
.entry .byline{font-size:11.5px}

/* editorial opening for listings and articles */
.editorial-opening{position:relative;height:clamp(680px,100svh,1100px);background:var(--dark);color:#fff;overflow:clip;container-type:size}
.editorial-opening .opening-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 60%;filter:grayscale(1) brightness(.5);-webkit-mask:linear-gradient(#000 80%,transparent 100%);mask:linear-gradient(#000 80%,transparent 100%)}
.editorial-opening .opening-art.live{filter:none}
.editorial-opening.short-open{height:clamp(640px,80svh,900px)}
.opening-type{position:relative;z-index:2;padding:clamp(112px,14svh,160px) 6vw 0;pointer-events:none}
.opening-type a{pointer-events:auto}
.opening-type h1{max-width:11ch;font-family:var(--serif);font-weight:400;font-size:clamp(48px,min(8vw,10svh),128px);line-height:.98;text-wrap:balance;color:rgba(255,255,255,.1);text-shadow:0 0 .6px rgba(255,255,255,.87),0 0 .035em rgba(255,255,255,.22)}
.opening-type h1.long{max-width:14ch}
.opening-type p{max-width:40ch;margin-top:24px;color:rgba(255,255,255,.92)}
.ink-dark{color:var(--ink);background:#efede9}
.ink-dark .opening-type h1{color:rgba(17,17,17,.1);text-shadow:0 0 .6px rgba(17,17,17,.87),0 0 .035em rgba(17,17,17,.22)}
.ink-dark .opening-type p{color:var(--ink);-webkit-text-stroke:.03em currentColor}
.opening-pdf{display:inline-block;margin:32px 10px 0 0;padding:12px 18px;font-size:13px;letter-spacing:.09em;text-transform:uppercase;text-decoration:none;background-color:var(--ink);color:#fff;border:1px solid var(--ink);--redact-bg:#fff;--redact-fg:var(--ink)}
.opening-pdf.ghost{background-color:transparent;color:var(--ink);--redact-bg:var(--ink);--redact-fg:#fff}
.opening-pdf span{opacity:.75}
.document-record{width:min(100%,860px);display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding:0 0 12px;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--dark-ink-muted)}

/* footer */
.site-footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 3em;border-top:1px solid var(--dark-rule);margin-top:96px;padding:14px 8vw 40px;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--dark-ink-muted);--redact-bg:var(--dark-ink);--redact-fg:var(--ink)}
.site-footer a{color:var(--dark-ink);text-decoration:none}
.site-footer .sep{opacity:.6}
.home .site-footer{border:0;margin-top:0;padding:18px 6vw 24px;color:#111;--redact-bg:#111;--redact-fg:#111}
.home .site-footer a{color:#111}

/* figures inside sheets */
.stat{display:grid;grid-template-columns:auto 1fr;gap:12px 32px;align-items:end}
.stat .big{font-family:var(--serif);font-weight:300;font-size:clamp(80px,10vw,140px);line-height:.85;letter-spacing:-.04em}
.stat .say{font-family:var(--serif);font-size:clamp(19px,1.8vw,24px);line-height:1.2;max-width:22ch}
.split{display:flex;height:14px;margin-top:22px}
.split .a{flex:98;background:var(--ink)}
.split .b{flex:2;background:var(--coral)}
.split-key{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.06em;margin-top:8px}
.film{position:relative;aspect-ratio:16/8;background:#f4f4f2}
.film canvas{width:100%;height:100%}
.film .film3d{position:absolute;inset:0}
.film .film-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.film .film3d canvas{display:block;width:100%;height:100%}
.film .play{position:absolute;right:10px;bottom:10px;font:11px var(--sans);letter-spacing:.09em;text-transform:uppercase;background:var(--paper);color:var(--ink);border:1px solid var(--ink);padding:6px 10px;cursor:pointer}
.film .play:hover{background:var(--ink);color:var(--paper)}
.steps{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;margin-top:10px}
.steps button{all:unset;cursor:pointer;position:relative;padding-top:10px;font:10.5px var(--sans);letter-spacing:.04em;color:var(--ink-muted)}
.steps button::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--rule)}
.steps .fill{position:absolute;left:0;right:0;top:0;height:2px;background:var(--ink);transform-origin:left;transform:scaleX(0);z-index:1}
.steps button[aria-current=true]{color:var(--ink)}
.steps button:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
.step-cap{display:grid;grid-template-columns:1fr auto;gap:1em;margin-top:16px;font-size:13px;line-height:1.55}
.step-cap b{font-weight:400;font-family:var(--serif);font-size:16px}
.step-cap .count{font-size:11px;letter-spacing:.09em;color:var(--ink-muted)}
.step-cap .todo{color:var(--rule)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-bottom:2.2em}
.pair>div{border-top:1px solid var(--ink);padding-top:14px;font-size:14px;line-height:1.55}
.pair b{display:block;font-family:var(--serif);font-weight:400;font-size:22px;margin-bottom:6px}
.label{display:flex;justify-content:space-between;gap:1em;font-size:11px;letter-spacing:.09em;text-transform:uppercase;border-bottom:1px solid var(--ink);padding-bottom:10px}
.label .muted{color:var(--ink-muted)}
.tabs{display:flex;margin-top:12px}
.tabs button{all:unset;cursor:pointer;font:11px var(--sans);letter-spacing:.06em;text-transform:uppercase;padding:6px 10px;border:1px solid var(--rule);margin-right:-1px;color:var(--ink-muted)}
.tabs button[aria-selected=true]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:12px;margin-top:8px;font-variant-numeric:tabular-nums}
th{font-weight:400;font-size:11px;letter-spacing:.09em;text-transform:uppercase;text-align:right;padding:8px 0 8px 18px;border-bottom:1px solid var(--ink)}
td{text-align:right;padding:7px 0 7px 18px;border-bottom:1px solid var(--rule)}
th:first-child,td:first-child{text-align:left;padding-left:0}
tr.group td{color:var(--ink-muted);font-size:11px;letter-spacing:.09em;text-transform:uppercase;padding-top:16px}
tr.ours td{background:#f4f4f2}
.todo-chart{display:grid;place-items:center;aspect-ratio:16/7;margin-top:12px;border:1px dashed var(--rule);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-muted);text-align:center;padding:16px}
.legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px;font-size:11px;letter-spacing:.04em}
.legend i{display:inline-block;width:14px;height:2px;background:currentColor;vertical-align:middle;margin-right:6px}
.dots{margin-top:8px}
.dots .row{display:grid;grid-template-columns:120px 1fr 56px;align-items:center;gap:12px;padding:7px 0;border-bottom:1px solid var(--rule);font-size:12px}
.dots .track{position:relative;height:12px;background:linear-gradient(var(--rule),var(--rule)) center/100% 1px no-repeat}
.dots .dot{position:absolute;top:50%;width:11px;height:11px;border-radius:50%;background:var(--ink);transform:translate(-50%,-50%)}
.dots .row.ours .dot{background:var(--coral)}
.dots .v{text-align:right}
.dots .axis{display:grid;grid-template-columns:120px 1fr 56px;gap:12px;font-size:11px;color:var(--ink-muted);padding-top:6px}
.dots .axis span{display:flex;justify-content:space-between}
.trail{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:12px;font-size:13px}
.trail .q{background:#f4f4f2;padding:18px}
.trail .q b{display:block;font-weight:400;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:8px}
.trail .ans{font-family:var(--serif);font-size:26px;margin-top:10px}
.links{list-style:none;border-top:1px solid var(--ink);margin-bottom:2.2em}
.links li a{display:flex;justify-content:space-between;gap:1em;padding:12px .18em;border-bottom:1px solid var(--rule);text-decoration:none;margin:0}
.links .t{font-family:var(--serif);font-size:20px;line-height:1.2}
.links .u{font-size:11px;letter-spacing:.04em;color:var(--ink-muted);align-self:center}
.links li a:hover .u{color:inherit}

@media (width>=701px) and (width<=1000px){.sheet{--sheet-pad-left:7vw;--sheet-pad-right:15vw}.sheet::after{bottom:36px;right:4vw}}
@media (width<=700px){
  .ledger{padding:10px 8px 64px}.document-file{row-gap:10px}
  .sheet{--sheet-pad-top:40px;--sheet-pad-left:7vw;--sheet-pad-right:7vw;padding-bottom:72px}
  .sheet::before{width:20px;height:6px;top:72px}.sheet::after{bottom:28px;right:7vw}
  .sheet>p{text-align:left;hyphens:none}
  .cover-meta .redaction{display:none}
  .wide::before{top:calc(var(--sheet-pad-top) + 24px)}
  .statement,.tenet dd{--statement-softness:.6px;font-size:clamp(28px,7.4vw,40px)}
  .statement{width:80vw;top:17svh}
  .field{padding:12svh 7vw 8svh}
  .editorial-opening{height:max(660px,92svh)}
  .opening-type{padding:120px 7vw 0}
  .opening-type h1{font-size:clamp(46px,12.5vw,76px)}
  .opening-type p{max-width:32ch}
  .entry{gap:1.4em}
  .results li{grid-template-columns:2.6em minmax(0,1fr)}
  .steps{grid-template-columns:repeat(4,1fr);row-gap:12px}.film{aspect-ratio:4/3}
  .pair,.trail{grid-template-columns:1fr}
  .stat{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.sheet{animation:none}a{transition:none}}

/* Headlines in Caslon (regular weight only); everything else stays in the sans at DeepMind's measured sizes */
.dm-head h1,.dm-head h2,.dm-head p,.dm-lead h3,.dm-item h3,.dm-a-head h1,.dm-a-lede,.dm-a-body h2,.dm-a-body h3,.dm-a-body p.isolated,
.dm-a-body .stat .big,.dm-a-body .stat .say,.dm-a-body .pair b,.dm-a-body .trail .ans,.dm-a-body .links .t,.games b,.facts dd,.statement,.tenet dd,.home-opening .wordmark{font-family:var(--serif);font-weight:400}
.dm-head h1,.dm-head h2,.dm-head p{letter-spacing:-.01em}
.dm-lead h3{letter-spacing:-.01em;line-height:1.08}
.dm-a-head h1{letter-spacing:-.01em;line-height:1.02;font-size:58px}
.dm-a-body h2{letter-spacing:-.01em}
.dm-a-lede{font-size:26px;line-height:1.2;letter-spacing:0}
@media (width<=700px){.dm-a-head h1{font-size:38px}}
/* article head: date and tag small and muted (as on the news cards), deck close under the title */
.dm-a-meta{flex-wrap:wrap;gap:4px 16px;font-size:14px;line-height:1.4;letter-spacing:.02em;color:rgba(17,17,17,.5)}
.dm-a-meta span{white-space:nowrap}
.dm-a-head h1{margin-top:10px}
.dm-a-by{margin-top:10px;font-weight:400;color:rgba(17,17,17,.6)}
.dm-a-btns{margin-top:20px}
/* the cover: at most 960px wide, so it sits with the 624px text column instead of filling the screen */
.dm-article{padding-top:96px}
.dm-a-hero{margin-top:40px;max-width:960px}
.dm-a-hero .pic{border-radius:16px}
.dm-a-lede{margin-top:56px}
@media (width<=700px){
  .dm-article{padding-top:88px}
  .dm-a-by{margin-top:8px;font-size:18px;line-height:1.4}
  .dm-a-btns{margin-top:16px}
  .dm-a-hero{margin-top:28px}
  .dm-a-lede{margin-top:40px}
  .dm-a-body{margin-top:32px}
}
/* head buttons: short labels on a phone, so Paper, Code and Copy link fit on one line */
.pill-short{display:none}
@media (width<=700px){
  .pill-long{display:none}
  .pill-short{display:inline}
  .dm-article .dm-a-btns{flex-wrap:nowrap;gap:6px}
  .dm-article .dm-a-btns .pill.pill{height:40px;padding:0 12px;gap:6px;font-size:15px;white-space:nowrap;flex:none}
  .dm-article .dm-a-btns .pill.ghost{padding:0 6px}
}

/* legibility on the grey: main text pure white */
.dm-a-body>p,.dm-a-body li,.dm-a-body .step-cap,.dm-a-body .pair>div,.dm-a-body .trail,.dm-a-body table,.dm-a-body td,.facts dd,.dm-item h3,.dm-lead h3{color:#111}
.dm-head h1,.dm-head h2,.dm-head p,.dm-lead h3,.dm-item h3,.dm-a-head h1,.dm-a-lede,.dm-a-body h2,.dm-a-body h3,.dm-a-body p.isolated,.dm-a-body .stat .big,.dm-a-body .stat .say,.statement,.home-opening .wordmark{-webkit-text-stroke:0}
.site-footer,.site-footer .sep{color:rgba(17,17,17,.92)}

/* mailing list, above the footer on every page */
.signup{padding:48px 6vw;color:#111;font-family:var(--sans)}
.signup-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:20px 64px;align-items:center;max-width:1296px;margin:0 auto}
.signup h2{font-family:var(--serif);font-weight:400;font-size:clamp(34px,3.4vw,48px);line-height:1.05;letter-spacing:-.02em;margin:0}
.signup p{margin:0}
.signup-label{display:block;margin:0 0 8px;font-size:13px;font-weight:500;color:#111}
.signup-row{display:flex;gap:8px}
.signup input[type=email]{flex:1;min-width:0;height:40px;padding:0 12px;border:1px solid rgba(17,17,17,.18);border-radius:6px;background:#fff;color:#111;font:inherit;font-size:14px;outline:0;transition:border-color .15s,box-shadow .15s}
.signup input[type=email]:hover{border-color:rgba(17,17,17,.32)}
.signup input[type=email]:focus{border-color:#111;box-shadow:0 0 0 3px rgba(17,17,17,.08)}
.signup input[type=email]::placeholder{color:rgba(17,17,17,.4)}
.signup button{height:40px;padding:0 16px;border-radius:6px;border:1px solid #111;background:#111;color:#fff;font:inherit;font-size:14px;font-weight:500;cursor:pointer;white-space:nowrap;transition:background .15s}
.signup button:hover{background:#2a2a2a}
.signup button:focus-visible{outline:2px solid #111;outline-offset:2px}
.signup button:disabled{opacity:.6;cursor:default}
.signup .signup-note{margin:8px 0 0;font-size:12px;line-height:1.5;color:rgba(17,17,17,.5)}
.signup-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (width<=760px){.signup{padding:36px 16px}.signup-in{grid-template-columns:1fr}}

/* white site, 27 Oct 2026: news in sequence, obvious contact */
body:not(.is-home) .apparatus-band{color:var(--ink);text-shadow:none;--redact-bg:var(--ink);--redact-fg:#fff}
.dm-seq{list-style:none;margin:64px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 32px}
.dm-card .dm-thumb .pic{aspect-ratio:4/3;border-radius:16px;background:#fff;border:1px solid rgba(17,17,17,.1)}
.dm-card .pic video{object-fit:cover}
.dm-card h3{font-weight:400;font-size:clamp(22px,1.9vw,28px);line-height:1.18;letter-spacing:-.01em;margin:24px 0 0}
.dm-card .dm-deck{margin:8px 0 0;font-size:18px;line-height:1.4;color:rgba(17,17,17,.6)}
.dm-card .dm-deck .dm-name,.dm-a-by .dm-name{font-family:var(--mono);font-weight:500;font-size:.94em} /* a product name, such as dig.bench */
@media (width<=900px){.dm-seq{grid-template-columns:1fr}}
/* date and tags above the title, small and muted */
.dm-seq:not(.dm-feature) .dm-meta{margin:14px 0 0;font-size:14px;letter-spacing:.02em;color:rgba(17,17,17,.5)}
.dm-seq:not(.dm-feature) .dm-card h3{margin-top:4px}
.pic.ink{background:#fff}.pic.ink img,.pic.ink video{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply}

/* Header band, bh1.0: a larger logo, and News / Careers as buttons so they read at a glance. Over the opening they are
   frosted white glass; on white pages, ink outlines. Selectors repeat .apparatus-band to outrank .home .apparatus-band nav */
.apparatus-band .mark .logo{width:clamp(156px,13vw,200px)}
.apparatus-band.apparatus-band nav{display:flex;align-items:center;gap:10px;font:500 13px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase}
.apparatus-band .sep{display:none}
.apparatus-band nav a{display:inline-flex;align-items:center;height:40px;margin:0;padding:0 18px;border-radius:999px;border:1px solid rgba(255,255,255,.65);background:rgba(255,255,255,.12) none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);text-shadow:none;transition:background-color .2s,color .2s,border-color .2s}
.apparatus-band nav a:hover,.apparatus-band nav a:focus-visible{background-color:#fff;color:#111;border-color:#fff}
.apparatus-band nav a:focus-visible{outline:2px solid #fff;outline-offset:2px}
body:not(.is-home) .apparatus-band nav a{border-color:rgba(17,17,17,.35);background-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
body:not(.is-home) .apparatus-band nav a:hover,body:not(.is-home) .apparatus-band nav a:focus-visible{background-color:#111;color:#fff;border-color:#111}
body:not(.is-home) .apparatus-band nav a:focus-visible{outline-color:#111}
@media (width<=440px){
  .apparatus-band.apparatus-band{flex-wrap:nowrap;gap:12px;padding-left:16px;padding-right:16px}
  .apparatus-band .mark .logo{width:132px}
  .apparatus-band.apparatus-band nav{gap:6px;font-size:11.5px;letter-spacing:.05em}
  .apparatus-band nav a{height:36px;padding:0 13px}
}
@media (width<=350px){
  .apparatus-band .mark .logo{width:112px}
  .apparatus-band nav a{padding:0 10px}
}
/* Opening on narrow screens: the word is anchored on the figure, right of centre, so "NTAL" ran off phones. Shift the
   whole composition left until the word (about 7.1 times its size wide, its centre .64 of its size left of the O-N
   joint at 56.8%) is centred, never further than the image overhangs the screen; zero wherever the image fits the width */
.home-opening .comp{transform:translateX(calc(-50% - max(0px, min(var(--cw) * .068 - var(--ts) * .64, (var(--cw) - 100vw) / 2))))}

/* Home opening, bh1.2: the lockup, mark then word, centred above the middle, with the slogan under it; below them
   Cajal's Purkinje cells (1899), traced into vector lines and drawn in silver on black (assets/cajal.js). The
   descriptor is a caption at the lower left and the credit for the drawing at the lower right. Black and white
   like paradigma.inc: the word in glowing outline Caslon, film grain over all. */
.flash-opening{--opening-h:max(600px,100svh);--f:min(6.4vw,11svh);position:relative;height:var(--opening-h);background:#0a0a0a;overflow:clip;isolation:isolate;color:#ecece6}
.flash-opening canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.6s ease}
.flash-opening.is-lit canvas{opacity:1}
/* the black-and-white print: paradigma's film grain over everything (.grain) */
.flash-brand{position:absolute;z-index:2;left:50%;top:calc(var(--opening-h) * .3);transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center}
.flash-caption{position:absolute;z-index:2;left:6vw;bottom:max(40px,8svh);max-width:88vw;margin:0;font-size:clamp(15px,1.25vw,19px);letter-spacing:.14em;text-transform:uppercase;color:rgba(236,236,230,.62);text-shadow:0 0 6px #0a0a0a,0 0 14px #0a0a0a,0 0 24px #0a0a0a}
.flash-credit{position:absolute;z-index:2;right:6vw;bottom:max(40px,8svh);margin:0;font-family:var(--serif);font-size:13px;letter-spacing:.02em;color:rgba(236,236,230,.42);text-shadow:0 0 6px #0a0a0a,0 0 14px #0a0a0a}
@media (width<=700px){.flash-credit{right:auto;left:5vw;bottom:max(14px,3svh);font-size:11px}}
.flash-caption::before{content:"";display:block;width:48px;height:1px;margin-bottom:16px;background:currentColor;opacity:.6}
.flash-lockup{display:flex;align-items:center;gap:calc(var(--f) * .3);width:max-content}
.flash-source{width:calc(var(--f) * 1.05);line-height:0}
.flash-source .flash-mark{display:block;width:100%;height:auto;filter:drop-shadow(0 0 .03em rgba(255,255,255,.24))}
.flash-source .flash-mark{color:#ecece6}
.flash-title{margin:0;padding-top:.08em;font-family:var(--serif);font-weight:400;font-size:var(--f);line-height:1;letter-spacing:.08em;text-transform:uppercase;-webkit-text-stroke:0;color:rgba(255,255,255,.1);text-shadow:0 0 .6px rgba(255,255,255,.9),0 0 .035em rgba(255,255,255,.24)}
.flash-slogan{margin:calc(var(--f) * .1) 0 0;font-family:var(--serif);font-weight:400;font-size:clamp(26px,calc(var(--f) * .46),44px);line-height:1.1;letter-spacing:.07em;color:#d8d8d2;-webkit-text-stroke:0}
@media (width<=700px){
  .flash-opening{--f:min(10vw,7svh)}
  .flash-brand{top:calc(var(--opening-h) * .24)}
  .flash-caption{left:5vw;font-size:13px;letter-spacing:.1em}
}

/* Header band, bh1.1: pinned to the top. Clear over the dark opening, white elsewhere (assets/band.js sets .is-solid).
   News is a plain link; Join us is the only button. */
.apparatus-band.apparatus-band{position:fixed;inset:0 0 auto;z-index:20;transition:background-color .3s,color .3s,box-shadow .3s}
.apparatus-band.is-solid{background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(17,17,17,.08);color:var(--ink);text-shadow:none}
.is-home .apparatus-band .mark{visibility:hidden;opacity:0;transition:opacity .3s,visibility .3s}
.is-home .apparatus-band.is-solid .mark{visibility:visible;opacity:1}
.apparatus-band.apparatus-band nav a:not(.cta){border-color:transparent;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:0 10px;background-image:linear-gradient(currentColor,currentColor);background-size:0 1px;background-position:10px calc(50% + .85em);background-repeat:no-repeat;transition:background-size .3s}
.apparatus-band.apparatus-band nav a:not(.cta):hover,.apparatus-band.apparatus-band nav a:not(.cta):focus-visible{background-color:transparent;color:inherit;border-color:transparent;background-size:calc(100% - 20px) 1px}
.apparatus-band.is-solid nav a.cta{border-color:rgba(17,17,17,.35);background-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.apparatus-band.is-solid nav a.cta:hover,.apparatus-band.is-solid nav a.cta:focus-visible{background-color:#111;color:#fff;border-color:#111}

/* home, bh2.1: the first screen is the logo alone at the centre, links in small type at the foot. Over two screens
   of scroll, assets/glide.js moves the logo to the top left and the links to the top right, and a white bar fades in behind
   them. Without the script the header stays in the first screen and scrolls away. */
body.glide-home,html:has(body.glide-home){background:var(--paper)}
.glide{position:absolute;inset:0 0 auto;height:100svh;z-index:20;pointer-events:none;color:var(--ink)}
.glide-bar{position:absolute;inset:0 0 auto;height:72px;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(17,17,17,.08);opacity:0}
.glide-logo{position:absolute;left:50%;top:50%;width:min(400px,72vw);margin:0;line-height:0;transform:translate(-50%,-50%);pointer-events:auto}
.glide-logo a{display:block;color:inherit;background:none;padding:0;margin:0}
.glide-logo .logo{width:100%;height:auto}
.glide-links{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);display:flex;gap:22px;white-space:nowrap;font-size:11px;line-height:1;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-muted);pointer-events:auto}
.glide-links a{text-decoration:none;background:none;padding:6px 0;margin:0}
.glide-links a:hover,.glide-links a:focus-visible{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
/* With glide.js on, CSS places the logo and links between their two states, so they follow a window resize in the same
   frame. glide.js sets only the progress: --e (logo) and --el (links), 0 on the first screen and 1 docked, eased, and
   --s, the logo's scale. Positions use the header's width (cqw) and the small viewport height (svh, steady while a
   phone's address bar moves); a translate percentage is of the element's own size. .13346 is the logo's height/width. The links are placed by
   their right edge, from their width --lw (set by glide.js). */
/* the progress values are not inherited, so a change restyles only the element it is set on, not the logo's SVG shapes */
@property --e{syntax:'<number>';inherits:false;initial-value:0}
@property --el{syntax:'<number>';inherits:false;initial-value:0}
@property --s{syntax:'<number>';inherits:false;initial-value:1}
.glide.is-on{position:fixed;height:auto;container-type:inline-size;--lw:0px;--pad:max(24px,3.4cqw);--w0:min(400px,72cqw);--w1:136px;--bar:72px}
.glide.is-on .glide-logo,.glide.is-on .glide-links{left:0;top:0;bottom:auto}
.glide.is-on .glide-logo{width:var(--w0);transform-origin:0 0;will-change:transform;
  transform:translate(calc((1 - var(--e)) * (50cqw - var(--w0) / 2) + var(--e) * var(--pad)), calc((1 - var(--e)) * (50svh - var(--w0) * .13346 / 2) + var(--e) * (var(--bar) - var(--w1) * .13346) / 2)) scale(var(--s))}
.glide.is-on .glide-links{color:var(--ink);will-change:transform,opacity;
  transform:translate(calc((1 - var(--el)) * (50cqw + var(--lw) / 2) + var(--el) * (100cqw - var(--pad)) - 100%), calc((1 - var(--el)) * (100svh - 28px - 100%) + var(--el) * (var(--bar) - 100%) / 2))}
.glide-bar{will-change:opacity}
/* phone: no blur behind the white bar, which is expensive to redraw while it fades in */
@media (width<=600px){.glide-bar{-webkit-backdrop-filter:none;backdrop-filter:none;background:#fff}}
.glide-stage{height:100svh}
.glide.is-on~#main .glide-stage{height:100svh} /* 2 screens of scroll for the move (SCREENS in glide.js), then the news begins .2 screen below the top */
/* the social links: inline, except on a phone, where they fade out as the move starts (glide.js) and are removed
   once the header gets .is-docked */
.glide-social{display:flex;gap:22px}
@media (width<=600px){
  .glide.is-on{--pad:16px;--w1:112px;--bar:60px}  /* keep in step with glide.js (w1) and .glide-bar's height */
  .glide-bar{height:60px}
  .glide-links,.glide-social{gap:16px}
  .glide-links{font-size:13px;letter-spacing:.06em}
  .glide.is-docked .glide-social{display:none}
}
.heartbeat{position:relative;min-height:100svh}
.heartbeat canvas{position:absolute;inset:0;width:100%;height:100%}

/* Join us page */
.join{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:0 6vw;box-sizing:border-box;color:#111;font-family:var(--sans)}
.join .join-in{margin:auto 0;padding-top:12vh;text-align:center}
.join .join-text{max-width:56ch;margin:0 auto 24px;font-size:clamp(18px,1.4vw,21px);line-height:1.5;color:#111}
.join .join-text a{color:#111}
.join .join-sign{margin:0;padding:0 0 28px;font-size:11px;line-height:1;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-muted)}
.apparatus-band.band-plain.band-plain.band-plain nav{gap:22px;font-size:11px;font-weight:400;letter-spacing:.09em;color:var(--ink-muted)}
.apparatus-band.band-plain.band-plain.band-plain nav a{height:auto;padding:6px 0;border:0;border-radius:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;color:inherit}
.apparatus-band.band-plain.band-plain.band-plain nav a:hover,.apparatus-band.band-plain.band-plain.band-plain nav a:focus-visible{background:none;color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}

/* the home page's mailing list: small, in the size of the hero and header links */
.signup.small{padding:28px 6vw 20px}
.signup.small .signup-in{grid-template-columns:auto minmax(0,340px);justify-content:space-between;gap:12px 40px}
.signup.small h2{font-family:var(--sans);font-size:11px;line-height:1;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-muted)}
.signup.small .signup-label{font-size:11px;font-weight:400;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-muted);margin:0 0 6px}
.signup.small .signup-row{gap:6px}
.signup.small input[type=email]{height:30px;padding:0 10px;font-size:12px;border-radius:999px}
.signup.small button{height:30px;padding:0 14px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:400;border-radius:999px}
.signup.small .signup-note{font-size:10.5px;margin-top:6px}
@media (width<=760px){.signup.small{padding:24px 16px 16px}.signup.small .signup-in{grid-template-columns:1fr}}
.signup .signup-note:empty{display:none}

/* News cards - the whole 16:9 cover, never cropped at the sides */
.dm-card .dm-thumb .pic{aspect-ratio:16/9}
.dm-card .dm-thumb picture{display:block;width:100%;height:100%}
/* The news page as v1 has it: the newest post featured, its image beside its text; older posts as rows */
.dm-seq.dm-feature{grid-template-columns:minmax(0,1fr);gap:0}
.dm-feature .dm-card{display:grid;align-items:center}
.dm-feature .dm-card h3{margin-top:0}
.dm-feature li:first-child{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:48px;padding-bottom:48px}
.dm-feature li:first-child h3{font-size:clamp(30px,2.8vw,42px);line-height:1.1}
.dm-feature li:first-child .dm-deck{font-size:18px}
.dm-feature li+li{grid-template-columns:260px minmax(0,1fr);gap:32px;padding:28px 0;border-top:1px solid rgba(17,17,17,.12)}
.dm-feature li+li .dm-thumb .pic{border-radius:12px}
.dm-feature li+li .dm-meta{margin-top:12px}
@media (width<=760px){.dm-feature li:first-child,.dm-feature li+li{grid-template-columns:minmax(0,1fr);gap:18px}}
/* Home, three across: every card title on one line - sized to the card, so the longest ("Accelerating attention at
   ultra-long context", about 19 times its font size) just fits; all three the same size. Never below 18px: in windows
   narrower than about 1280px the long title wraps instead */
@media (width>900px){.dm-seq:not(.dm-feature) .dm-card{container-type:inline-size}
.dm-seq:not(.dm-feature) .dm-card h3{font-size:max(18px,min(clamp(22px,1.9vw,28px),5.15cqi))}}
/* Blog posts: the running text fully justified, hyphenated so the 624px column has no wide gaps between words;
   figures, captions, side notes and the Paper / Code links keep their own alignment */
.dm-article .dm-a-lede,.dm-a-body>p:not(.legend,.isolated),.dm-a-body>:is(ul:not(.res),ol)>li{text-align:justify;hyphens:auto;-webkit-hyphens:auto}
/* A one-line lede (dig.bench) centred rather than justified */
.dm-article .dm-a-lede.centred{text-align:center}
/* phone: the column is too narrow for even word spacing, so the running text is left-aligned (ragged right) and the lede
   centred, as before the text was justified; no automatic hyphens */
@media (width<=600px){.dm-article .dm-a-body>p:not(.legend,.isolated),.dm-article .dm-a-body>:is(ul:not(.res),ol)>li{text-align:start;hyphens:manual;-webkit-hyphens:manual;text-wrap:pretty}.dm-article .dm-a-lede{text-align:center;hyphens:manual;-webkit-hyphens:manual}}
/* The mailing list on one line: its label, the email field and the button */
.signup.small .signup-in{grid-template-columns:auto minmax(0,480px)}
.signup.small form{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.signup.small .signup-label{margin:0;white-space:nowrap}
.signup.small .signup-row{flex:1;min-width:220px}
.signup.small .signup-note{flex-basis:100%}
@media (width<=760px){.signup.small .signup-in{grid-template-columns:1fr}}
/* phone: the sign-off line large, in the serif, centred above the mailing list; desktop unchanged */
@media (width<=760px){.signup.small h2{font-family:var(--serif);font-size:32px;line-height:1.1;letter-spacing:-.01em;text-transform:none;color:#111;text-align:center;margin-bottom:12px}}

/* Share on X and Share on LinkedIn on the blogs: outlined pills like Code, before Copy link */
.dm-a-btns .pill svg{flex:none}

/* X and LinkedIn in the header on every page, written out like News and Join us (home: .glide-social; other pages: .nav-social) */
.glide-social,.nav-social{display:inline-flex;align-items:center;gap:inherit}
.apparatus-band nav .nav-social{gap:inherit}
.glide.is-docked .glide-social{display:inline-flex}
/* phones: keep News, Join us, X and LinkedIn on one line beside the logo */
@media (width<=600px){.apparatus-band nav a{white-space:nowrap}.apparatus-band.band-plain.band-plain.band-plain nav,.glide-links{gap:14px}}
@media (width<=360px){.apparatus-band.band-plain.band-plain.band-plain nav,.glide-links{gap:10px;font-size:10.5px;letter-spacing:.05em}}
/* phones: the X and LinkedIn buttons show only their logos so the button row fits */
@media (width<=760px){.dm-article .dm-a-btns .pill.pill:has(.share-btn-label){padding:0 9px}.dm-article .dm-a-btns .pill.ghost[data-copy]{padding:0 3px}.share-btn-label{display:none}.dm-article .dm-a-btns:has(.share-btn-label){gap:4px}}
/* the blog button row (paper, code, X, LinkedIn, copy link), smaller; .pill.pill outranks posts/figures.css, which loads after this file */
.dm-article .dm-a-btns{gap:8px}
.dm-article .dm-a-btns .pill.pill{height:36px;padding:0 15px;gap:7px;font-size:14px;line-height:1}
.dm-article .dm-a-btns .pill.pill svg{width:15px;height:15px}
.dm-article .dm-a-btns .pill.pill.ghost{padding:0 6px}
@media (width<=760px){.dm-article .dm-a-btns .pill.pill{height:34px;padding:0 11px;gap:5px;font-size:13.5px}.dm-article .dm-a-btns .pill.pill:has(.share-btn-label){padding:0 9px}.dm-article .dm-a-btns .pill.pill.ghost[data-copy]{padding:0 3px}.dm-article .dm-a-btns .pill.pill svg{width:15px;height:15px}.dm-article .dm-a-btns:has(.share-btn-label){gap:4px}}
/* phones: no X and LinkedIn share buttons in the blog head, so Paper, Code and Copy link fit on one line */
@media (width<=760px){.dm-article .dm-a-btns .pill[data-share]{display:none}}
/* Every other page's header (posts, Join us) exactly as the home header once docked, so nothing moves or changes size
   on the way from the home page to a post: the home's own logo (img/logo.svg, from index.html) at 136px, a 72px bar,
   the same side margins (3.4% of the width, at least 24px), the links the same size and centred in the bar. On phones
   (as the home at 600px and below): 112px, a 60px bar, 16px margins and 13px links */
.apparatus-band.band-plain.band-plain.band-plain{box-sizing:border-box;height:72px;padding:0 max(24px,3.4%);align-items:center;flex-wrap:nowrap}
.apparatus-band.band-plain.band-plain.band-plain .mark{padding:0;margin:0;line-height:0}
.apparatus-band.band-plain.band-plain.band-plain .mark .logo{width:136px;aspect-ratio:632.4/84.4;-webkit-mask-image:url(img/logo.svg);mask-image:url(img/logo.svg)}
.apparatus-band.band-plain.band-plain.band-plain nav{font-size:11px;letter-spacing:.09em;font-weight:400;line-height:1}
.apparatus-band.band-plain.band-plain.band-plain nav a{color:#111}
@media (width<=600px){
  .apparatus-band.band-plain.band-plain.band-plain{height:60px;padding:0 16px}
  .apparatus-band.band-plain.band-plain.band-plain .mark .logo{width:112px}
  .apparatus-band.band-plain.band-plain.band-plain nav{font-size:13px;letter-spacing:.06em}
}
@media (width<=360px){.apparatus-band.band-plain.band-plain.band-plain nav{font-size:10.5px;letter-spacing:.05em}}
/* Maths in the text, pre-rendered with KaTeX (assets/katex), never split across lines, at 1.1x rather than 1.21x so its lines keep the text's spacing */
.dm-a-body .katex{white-space:nowrap;font-size:1.1em}
/* The X and LinkedIn header links (social-menu.js): inline on larger screens; on a phone folded behind a "more" icon
   (three dots) that opens them in a small panel, so the header holds only the logo, News, Join us and the icon */
.social-menu{position:relative;display:inline-flex;align-items:center;gap:inherit}
.social-links{display:inline-flex;align-items:center;gap:inherit}
.social-toggle{display:none}
@media (width<=760px){
  .social-toggle{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;margin:-8px -7px -8px -4px;padding:0;border:0;border-radius:50%;background:none;color:inherit;cursor:pointer;pointer-events:auto}
  .social-toggle svg{width:17px;height:17px;display:block}
  .social-toggle:focus-visible{outline:2px solid currentColor;outline-offset:1px}
  .social-menu.is-open .social-toggle{background:rgba(17,17,17,.07)}
  .social-links{display:none;position:absolute;right:-6px;top:calc(100% + 14px);z-index:30;flex-direction:column;align-items:stretch;gap:0;min-width:136px;padding:6px 0;background:#fff;border:1px solid rgba(17,17,17,.1);border-radius:12px;box-shadow:0 10px 30px rgba(17,17,17,.1)}
  .social-menu.opens-up .social-links{top:auto;bottom:calc(100% + 14px)}
  .social-menu.is-open .social-links{display:flex}
  .social-menu.social-menu .social-links a.social-text.social-text{display:block;margin:0;padding:10px 16px;color:#111;text-decoration:none}
  .social-menu.social-menu .social-links a.social-text.social-text:hover,.social-menu.social-menu .social-links a.social-text.social-text:focus-visible{background:rgba(17,17,17,.05);text-decoration:none}
}
/* home, phone: on the first screen X and LinkedIn stay written out at the foot; the three dots replace them once the header
   docks at the top (glide.js sets .is-docked) */
@media (width<=760px){
  .glide:not(.is-docked) .social-toggle{display:none}
  .glide:not(.is-docked) .social-menu .social-links{display:inline-flex;position:static;flex-direction:row;align-items:center;gap:inherit;min-width:0;padding:0;background:none;border:0;border-radius:0;box-shadow:none}
  .glide:not(.is-docked) .social-menu.social-menu .social-links a.social-text.social-text{padding:6px 0;color:inherit;background:none}
}
/* The header links and a post's title block never jump as the page loads: they wait for their font (the same file, fetched once and preloaded
   on every page) instead of first showing a fallback font of a different width, which on a right-aligned bar moved
   them by up to 10px when the font arrived. Body text keeps font-display:swap */
@font-face{font-family:'Google Sans Flex Header';src:url(fonts/google-sans-flex.woff2) format('woff2');font-weight:300 700;font-display:block}
.glide-links,.apparatus-band.band-plain.band-plain.band-plain nav,.dm-a-head :is(.dm-a-meta,.dm-a-by,.dm-a-btns .pill){font-family:'Google Sans Flex Header','Google Sans Flex',system-ui,sans-serif}
/* Likewise the post titles and headings (Libre Caslon Display, preloaded) and the dig.bench name (DM Mono), whose
   @font-face rules above wait for the font (font-display:block) rather than swap */