/* Homepage only (html.noir): Archive City, a black-and-white detective city where the only colour
   is Shlexball's gold. The hero is the detective's office door (gold leaf on frosted glass, light
   through venetian blinds), the hero clip is an evidence photo, list bullets are evidence markers,
   and the case game sits on a desk with a notebook. site.css stays underneath for everything
   shared, including the Shlexball Display and Text faces. */

html.noir{
  --night:#09090b; --panel:#131316; --ink:#eeece6; --dim:#a5a4a8;
  --amber:#e9b23c; --orange:#d39424; --rust:#6e4a0e; --violet:#77767c; --cyan:#dcdad3; --plum:#232327;
  --gold:#e9b23c; --gold-hi:#ffdc8f; --gold-deep:#7a5208;
  --paper:#e8e4d9; --paper-2:#d9d4c6; --paper-ink:#1c1b19; --paper-dim:#55524c;
  --display:"Shlexball Display",var(--body-font);
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --rain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' stroke='%23c9c9d2' stroke-linecap='round'%3E%3Cg stroke-opacity='.5'%3E%3Cpath d='M12 8l-4 22M70 120l-4 22M131 40l-5 26M200 150l-4 22M101 190l-4 22M228 70l-3 18'/%3E%3C/g%3E%3Cg stroke-opacity='.28'%3E%3Cpath d='M44 60l-3 16M160 100l-3 16M20 170l-3 16M190 20l-3 16M88 10l-3 14M150 210l-3 14M60 220l-2 12M215 200l-2 12'/%3E%3C/g%3E%3C/svg%3E");
  background:radial-gradient(1000px 520px at 50% -8%,rgba(255,255,255,.07),transparent 70%),#09090b}
html.noir body{background:transparent}
html.noir a{color:#e2e0d9}
html.noir ::selection{background:var(--gold);color:#120d02}

/* Rain behind everything, and film grain over it. */
html.noir .sky{background:none;animation:none}
html.noir .sky::after{inset:-240px 0 0 -60px;background:var(--rain) 0 0/240px 240px;opacity:.35;animation:noir-rain .5s linear infinite;will-change:transform}
@keyframes noir-rain{to{transform:translate3d(42px,240px,0)}}
html.noir .crt{overflow:hidden;background:none;box-shadow:inset 0 0 200px rgba(0,0,0,.8)}
html.noir .crt::before{content:"";position:absolute;inset:-120px;background:var(--noise) 0 0/200px 200px;opacity:.06;animation:noir-grain .7s steps(5) infinite}
@keyframes noir-grain{
  0%{transform:translate(0,0)} 20%{transform:translate(-61px,37px)} 40%{transform:translate(43px,-71px)}
  60%{transform:translate(-29px,-23px)} 80%{transform:translate(67px,51px)} 100%{transform:translate(0,0)}}

/* ---- Opening scene ------------------------------------------------------------------------- */
#attract{display:none}
html.attract{overflow:hidden}
html.attract #attract{display:block;position:fixed;inset:0;z-index:1000;cursor:pointer;background:#050506;
  transition:opacity .6s ease,filter .6s ease}
#attract canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
#attract::after{content:"";position:absolute;inset:-120px;pointer-events:none;background:var(--noise) 0 0/200px 200px;opacity:.08;
  animation:noir-grain .5s steps(5) infinite}
html.attract-leaving #attract{opacity:0;filter:brightness(2.2)}
.noir-card{position:absolute;left:clamp(20px,7vw,110px);top:13vh;max-width:min(40rem,52vw);pointer-events:none;
  text-shadow:0 2px 18px rgba(0,0,0,.9),0 0 2px rgba(0,0,0,.9)}
.noir-card p{margin:0}
.noir-kicker{font:400 clamp(13px,1.2vw,16px)/1.4 var(--display);letter-spacing:.32em;color:#b9b7b0;
  animation:noir-up 1.2s .5s both}
.noir-brand{display:inline-block;white-space:nowrap;margin-top:10px !important;padding:0 .04em;font:400 clamp(48px,6.4vw,104px)/1 var(--display);letter-spacing:.02em;color:transparent;text-shadow:none;
  background:linear-gradient(180deg,#fff2c8 0%,#ffd77a 30%,#e9b23c 52%,#a8730f 54%,#e2a832 78%,#ffe7a8 100%);
  -webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 3px 0 #1a1204) drop-shadow(0 0 30px rgba(233,178,60,.35));animation:noir-up 1.4s .9s both}
.noir-line{margin-top:18px !important;max-width:26em;font:400 clamp(17px,1.7vw,23px)/1.5 var(--body-font);color:#e7e5de;
  animation:noir-up 1.4s 1.6s both}
@keyframes noir-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.attract-prompt{position:absolute;left:0;right:0;bottom:0;margin:0;padding:56px 16px max(22px,3.6vh);text-align:center;
  font:400 clamp(14px,1.6vw,20px)/1.5 var(--display);letter-spacing:.28em;color:#f2efe6;pointer-events:none;
  text-shadow:0 0 12px rgba(0,0,0,.9);background:linear-gradient(rgba(5,5,6,0),rgba(5,5,6,.78) 70%)}
.attract-prompt span{animation:noir-pulse 2.2s ease-in-out 2.4s infinite both}
@keyframes noir-pulse{0%,100%{opacity:1}50%{opacity:.35}}
.attract-prompt .tap{display:none}
@media (hover:none) and (pointer:coarse){.attract-prompt .key{display:none}.attract-prompt .tap{display:inline}}
@media (max-aspect-ratio:10/11){
  .noir-card{left:20px;right:20px;top:21vh;max-width:none;text-align:center}
  .noir-brand{font-size:min(11vw,64px)}
  .noir-line{margin-inline:auto !important}
}

/* After the visitor starts, the first screen comes up out of the dark. Later sections use
   content-visibility, so an animation there would wait until they scroll in. */
html.powered .wrap>:nth-child(-n+3){animation:noir-in 1s cubic-bezier(.2,.7,.25,1) both}
html.powered .wrap>:nth-child(2){animation-delay:.12s}
html.powered .wrap>:nth-child(3){animation-delay:.24s}
@keyframes noir-in{0%{opacity:0;filter:brightness(.2)}100%{opacity:1;filter:none}}

/* ---- Navigation: the agency's sign ---------------------------------------------------------- */
html.noir .hud{margin-top:14px;padding:12px 2px;border-bottom:1px solid #2b2b30}
html.noir .hud>a:first-child{display:inline-flex;align-items:center;gap:12px;font:400 18px/1.6 var(--display);letter-spacing:.14em;color:var(--ink)}
html.noir .hud .mark{position:relative;flex:none;width:18px;height:18px;border:3px solid var(--gold);border-radius:50%;
  box-shadow:0 0 12px rgba(233,178,60,.45)}
html.noir .hud .mark::after{content:"";position:absolute;right:-8px;bottom:-7px;width:9px;height:3px;border-radius:2px;background:var(--gold);transform:rotate(45deg)}
html.noir .hud .links{gap:8px 26px}
html.noir .hud .links a{font-size:14px;letter-spacing:.14em;color:#b5b3ad;text-decoration:none;padding-bottom:3px;border-bottom:1px solid transparent}
html.noir .hud .links a:hover,html.noir .hud .links a:focus-visible{color:var(--ink);border-bottom-color:var(--gold)}

/* ---- Hero: the office door ------------------------------------------------------------------ */
html.noir .title{position:relative;isolation:isolate;margin-top:30px;padding:0 44px 50px;row-gap:8px;
  background:linear-gradient(180deg,#151518 0%,#0d0d10 100%);border:1px solid #2a2a2f;
  box-shadow:0 40px 90px rgba(0,0,0,.65),inset 0 0 0 6px #0b0b0d,inset 0 0 0 7px #26262b}
/* Light through venetian blinds, falling across the whole door. */
html.noir .title::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:repeating-linear-gradient(166deg,rgba(255,248,226,.075) 0 22px,rgba(255,248,226,0) 22px 50px);
  -webkit-mask:radial-gradient(ellipse 70% 90% at 78% 30%,#000 10%,transparent 75%);
  mask:radial-gradient(ellipse 70% 90% at 78% 30%,#000 10%,transparent 75%)}
/* Gold leaf on frosted glass. The glass is its own layer, so the gold can clip to the letters. */
html.noir .hero-brand{position:relative;z-index:0;grid-column:1/-1;justify-self:stretch;margin:0 -44px 34px;padding:44px 24px 34px;text-align:center;
  font:400 clamp(50px,10.4vw,132px)/1 var(--display);letter-spacing:.03em;color:var(--gold);border-bottom:8px solid #050506}
html.noir .hero-brand::before{content:"";position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(ellipse 60% 80% at 50% 70%,rgba(255,240,205,.13),transparent 70%),
    linear-gradient(180deg,rgba(38,38,42,.86),rgba(24,24,27,.9)),
    var(--noise) 0 0/200px 200px,#6a6a6e;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.08),inset 0 30px 60px rgba(255,255,255,.04)}
html.noir .hero-brand .gilt{display:block;color:transparent;
  background:linear-gradient(180deg,#fff2c8 0%,#ffd77a 28%,#e9b23c 50%,#a8730f 52%,#e2a832 76%,#ffe7a8 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 0 #241904) drop-shadow(0 0 22px rgba(233,178,60,.28))}
html.noir .hero-brand .gilt-sub{display:block;margin-top:14px;font:400 clamp(12px,1.4vw,16px)/1.3 var(--display);letter-spacing:.42em;
  color:var(--gold);-webkit-text-fill-color:var(--gold)}
html.noir .hero-message{position:relative}
html.noir .title h1.tagline{max-width:none;font:400 clamp(30px,3.4vw,42px)/1.12 var(--display);letter-spacing:.01em;color:var(--ink)}
html.noir .title h1.tagline::after{content:"";display:block;width:84px;height:3px;margin-top:20px;background:var(--gold);box-shadow:0 0 14px rgba(233,178,60,.5)}
html.noir .hero-copy{margin-top:22px;color:#dddbd4}
html.noir .hero-llm{display:flex;width:fit-content;align-items:center;gap:10px;margin-top:18px;padding:6px 16px 6px 12px;
  font-size:16px;color:#d9d7d0;border:1px solid #3a3a40;border-radius:2px;background:rgba(255,255,255,.03)}
html.noir .hero-llm::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold)}

/* The button: gold, the one warm thing on the door. */
html.noir .btn{position:relative;margin-top:30px;padding:21px 30px 19px;border:0;border-radius:3px;
  font:400 21px/1 var(--display);letter-spacing:.1em;color:#140e02;text-shadow:0 1px 0 rgba(255,240,200,.5);
  background:linear-gradient(180deg,#ffe6a6 0%,#f0bf4d 42%,#d39a24 58%,#b98112 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -3px 0 rgba(90,56,6,.55),0 0 0 1px #4c3305,0 12px 34px rgba(233,178,60,.22);
  transition:transform .08s,filter .15s,box-shadow .15s}
html.noir .btn:hover,html.noir .btn:focus-visible{background:linear-gradient(180deg,#fff0c8 0%,#ffcf63 42%,#e2a72d 58%,#c48a16 100%);
  color:#140e02;outline:0;transform:translateY(1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 -3px 0 rgba(90,56,6,.55),0 0 0 1px #4c3305,0 0 0 4px rgba(233,178,60,.35),0 14px 40px rgba(233,178,60,.32)}
html.noir .btn[aria-disabled="true"],html.noir .btn:disabled{background:#47464c;color:#b8b6b0;text-shadow:none;cursor:not-allowed;transform:none;
  box-shadow:inset 0 0 0 1px #5a5960;filter:none}
html.noir .btn .blink{display:inline-block;margin-right:6px;animation:none}
html.noir .getlink .btn{padding:19px 24px 17px;font-size:17px;line-height:1.3}
html.noir .getlink input[type="email"]{border:1px solid #55545a;border-radius:2px;background:#0c0c0e}
html.noir .getlink input[type="email"]:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(233,178,60,.25)}

html.noir .versus{margin-top:30px;padding:14px 50px 14px 18px;position:relative;color:var(--ink);background:rgba(255,255,255,.035);
  border:1px solid #3a3a40;border-left:3px solid var(--gold);box-shadow:none}
html.noir .versus:hover,html.noir .versus:focus-visible{background:rgba(255,255,255,.07);outline:0}
html.noir .versus small{font:400 13px/1.6 var(--display);letter-spacing:.24em;color:var(--gold)}
html.noir .versus>span{position:absolute;right:18px;top:50%;margin-top:-.7em;color:var(--gold)}

/* The hero clip is an evidence photo: paper border, a strip of tape, an exhibit label. */
html.noir .screen{box-shadow:0 0 0 1px #2c2c31,0 24px 60px rgba(0,0,0,.6)}
html.noir .hero-screen{position:relative;padding:10px 10px 0;background:var(--paper);box-shadow:0 26px 60px rgba(0,0,0,.7),0 0 0 1px #bdb8aa}
html.noir .hero-screen::before{content:"";position:absolute;z-index:3;top:-14px;left:50%;width:120px;height:30px;margin-left:-60px;
  background:rgba(222,218,204,.55);transform:rotate(-3deg);box-shadow:0 1px 2px rgba(0,0,0,.25)}
html.noir .hero-screen figcaption{background:var(--paper);color:var(--paper-dim);padding:10px 4px 12px;font-size:14px}
html.noir .hero-screen figcaption::before{content:"EXHIBIT A";display:block;margin-bottom:3px;font:400 12px/1.4 var(--display);letter-spacing:.26em;color:var(--paper-ink)}
html.noir .hero-replay{top:22px;right:22px;border-radius:2px;font:400 13px/1 var(--display);letter-spacing:.1em;padding:10px 14px;color:#140e02;background:var(--gold);box-shadow:0 2px 0 var(--gold-deep)}
html.noir .hero-side{position:relative}
html.noir .hero-side .art{position:relative;z-index:1;filter:drop-shadow(0 0 30px rgba(233,178,60,.3))}
/* A streetlamp's pool of light where the sprite stands. */
html.noir .hero-side::after{content:"";position:absolute;z-index:0;left:50%;bottom:-10px;width:min(340px,90%);height:150px;transform:translateX(-50%);pointer-events:none;
  background:
    radial-gradient(ellipse 50% 18% at 50% 92%,rgba(255,196,80,.22),transparent 70%),
    linear-gradient(180deg,rgba(255,250,235,0),rgba(255,250,235,.07));
  clip-path:polygon(40% 0,60% 0,100% 100%,0 100%)}

/* ---- Sections: case-file tabs ---------------------------------------------------------------- */
html.noir section:not(.research-feature) h2{font:400 clamp(26px,3.6vw,42px)/1.12 var(--display);letter-spacing:.01em;color:var(--ink)}
html.noir section:not(.research-feature) h2 small{position:relative;display:block;width:fit-content;margin-bottom:22px;padding:7px 16px 6px;
  font:400 13px/1.3 var(--display);letter-spacing:.24em;color:var(--paper-ink);background:var(--paper-2);border-radius:3px 3px 0 0}
html.noir section:not(.research-feature) h2 small::after{content:"";position:absolute;left:0;bottom:-2px;width:min(1000px,calc(100vw - 40px));height:2px;
  background:linear-gradient(90deg,var(--paper-2),rgba(217,212,198,.1) 60%,transparent)}
html.noir .wrap>section:not(.research-feature){padding-top:72px}

/* Bullets are numbered evidence markers. */
html.noir .perks{list-style:none;padding:0;margin:26px 0 0;counter-reset:ev}
html.noir .perks li{position:relative;margin:0 0 16px;padding-left:48px;counter-increment:ev}
html.noir .perks li::before{content:counter(ev);position:absolute;left:0;top:.12em;width:32px;height:25px;padding-top:7px;box-sizing:border-box;text-align:center;
  font:400 13px/1 var(--display);color:#140e02;background:linear-gradient(180deg,#ffdc84,#e2a730);
  clip-path:polygon(24% 0,76% 0,100% 100%,0 100%)}

html.noir .demo-links{gap:10px 12px;margin-top:26px}
html.noir .demo-links a{padding:7px 14px;font-size:15px;text-decoration:none;color:#dcdad3;border:1px solid #3d3d43;border-radius:2px}
html.noir .demo-links a:hover,html.noir .demo-links a:focus-visible{border-color:var(--gold);color:var(--ink);outline:0}

/* Research: the late edition. */
html.noir .research-announcement{margin-top:56px;padding:11px 22px;border:0;color:var(--paper-ink);background:var(--paper);
  font:400 15px/1.4 var(--display);letter-spacing:.06em;box-shadow:0 10px 30px rgba(0,0,0,.45)}
html.noir .research-announcement span:first-child{color:var(--paper-ink);letter-spacing:.2em}
html.noir .research-announcement span:first-child::before{content:"LATE EDITION · ";color:#6d4a07}
html.noir .research-announcement span:last-child::after{content:" \25B6"}
html.noir .research-announcement:hover,html.noir .research-announcement:focus-visible{color:var(--paper-ink);text-decoration:underline;outline:0}
html.noir .research-feature{margin-top:30px;padding:44px 40px 48px;background:#0e0e11;border:0;border-top:4px double #6a6862;border-bottom:4px double #6a6862}

/* How it works: an interview transcript on paper. */
html.noir .panel.talk{background:var(--paper);color:var(--paper-ink);box-shadow:0 18px 40px rgba(0,0,0,.5);border-radius:1px}
html.noir .talk p{font:400 22px/1.5 var(--body-font)}
html.noir .talk .who{font-family:var(--display);letter-spacing:.08em;color:#6d4a07}
html.noir .sprite-mouse{filter:grayscale(1) contrast(1.1)}

html.noir footer.fat{border-top:1px solid #2b2b30}
html.noir footer.fat h3{font:400 14px/1.5 var(--display);letter-spacing:.24em;color:var(--gold)}
html.noir footer.fat .cols{border-bottom-color:#232327}

/* ---- The case ------------------------------------------------------------------------------ */
html.noir #case{position:relative;padding-top:96px}
.case-tape{position:absolute;top:34px;left:-30px;right:-30px;height:34px;overflow:hidden;transform:rotate(-1.6deg);
  background:var(--gold);box-shadow:0 6px 20px rgba(0,0,0,.5);pointer-events:none}
.case-tape span{display:block;white-space:nowrap;font:400 15px/34px var(--display);letter-spacing:.3em;color:#140e02}
.case-lede{max-width:44em;margin:0 0 30px;color:#d8d6cf}
.case-game{position:relative;padding:34px;border:1px solid #2a2a2f;
  background:radial-gradient(900px 420px at 18% 0%,rgba(255,250,235,.07),transparent 65%),linear-gradient(180deg,#151518,#0e0e10)}
.case-game[hidden]{display:none}
.case-brief{display:grid;grid-template-columns:150px minmax(0,1fr);gap:34px;align-items:start}
.case-portrait{width:150px;height:150px;background:url(img/robot-sheet.png) 0 0/1200px 600px no-repeat;image-rendering:pixelated;
  filter:drop-shadow(0 0 26px rgba(233,178,60,.35))}
.case-brief-text p{margin:0 0 16px;font-size:21px;line-height:1.6;color:#e6e4dd}
.case-brief-text p:first-child{font:400 15px/1.5 var(--display);letter-spacing:.24em;color:#b6b4ad}
.case-brief-text p:last-of-type{color:var(--gold-hi)}
.case-start{margin-top:14px}

.case-board{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:30px;align-items:start}
.case-folder{margin:0 0 16px;font:400 13px/1.5 var(--display);letter-spacing:.2em;text-transform:uppercase;color:#9f9d97}
.case-label{display:block;margin-bottom:8px;font-size:16px;color:#c9c7c0}
.case-row{display:flex;gap:10px}
.case-row input{flex:1;min-width:0;padding:14px 16px;font:400 19px/1.3 var(--body-font);color:var(--paper-ink);background:var(--paper);
  border:0;border-radius:2px;box-shadow:inset 0 2px 6px rgba(0,0,0,.25);outline:0}
.case-row input::placeholder{color:#7d7a72}
.case-row input:focus{box-shadow:inset 0 2px 6px rgba(0,0,0,.25),0 0 0 3px var(--gold)}
html.noir .case-row .btn{margin:0;padding:14px 22px 12px;font-size:18px}
.case-status{min-height:1.6em;margin:18px 0 6px;font-size:17px;line-height:1.5;color:#d6d4cd}
.case-status .who,.case-closed .who{font-family:var(--display);letter-spacing:.08em;color:var(--gold)}
.case-status.busy::after{content:"";display:inline-block;width:18px;height:18px;margin-left:10px;vertical-align:-3px;
  background:url(img/robot-sheet.png) 0 -36px/144px 72px no-repeat;image-rendering:pixelated;animation:case-roll .5s steps(4) infinite}
@keyframes case-roll{from{background-position:-36px -36px}to{background-position:-108px -36px}}
.case-results{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:12px}
.case-hit{display:grid;grid-template-columns:52px minmax(0,1fr);gap:14px;width:100%;padding:14px 16px;text-align:left;cursor:pointer;
  font:inherit;color:var(--paper-ink);background:var(--paper);border:0;border-radius:2px;
  box-shadow:0 8px 20px rgba(0,0,0,.4);animation:case-card .35s cubic-bezier(.2,.7,.3,1) calc(var(--i,0) * 70ms) both}
.case-hit:hover,.case-hit:focus-visible{outline:0;box-shadow:0 8px 20px rgba(0,0,0,.4),0 0 0 3px var(--gold)}
@keyframes case-card{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.case-hit.seen{background:var(--paper-2)}
.case-hit-body{display:grid;gap:3px;min-width:0}
.case-hit-name{font:700 18px/1.3 var(--body-font);overflow-wrap:anywhere}
.case-hit.seen .case-hit-name::after{content:"READ";margin-left:10px;padding:1px 6px;font:400 11px/1.4 var(--display);letter-spacing:.18em;
  color:#6d4a07;border:1px solid #6d4a07;vertical-align:2px}
.case-hit-meta{font-size:14px;color:var(--paper-dim)}
.case-hit-snip{font-size:16px;line-height:1.45;color:#2f2d29}
.case-hit-snip mark{padding:0 2px;color:inherit;background:linear-gradient(transparent 12%,rgba(240,186,64,.75) 12% 88%,transparent 88%)}
.case-icon{display:grid;place-items:center;align-self:start;width:52px;height:62px;font:400 11px/1 var(--display);letter-spacing:.06em;color:#f2efe6;
  background:#38373c;clip-path:polygon(0 0,72% 0,100% 20%,100% 100%,0 100%)}
.case-icon.t-pdf{background:#1f1e22}.case-icon.t-docx{background:#45444a}.case-icon.t-pptx{background:#5c5a60}.case-icon.t-txt{background:#828088;color:#121214}

.case-book{position:relative;padding:22px 24px 26px;color:var(--paper-ink);border-radius:1px;box-shadow:0 18px 40px rgba(0,0,0,.55);
  background:linear-gradient(90deg,transparent 34px,rgba(120,40,30,.18) 34px 35px,transparent 35px),
    repeating-linear-gradient(180deg,transparent 0 29px,rgba(60,80,110,.16) 29px 30px),var(--paper)}
.case-book h3{margin:4px 0 12px 22px;font:400 15px/1.4 var(--display);letter-spacing:.24em;color:var(--paper-ink)}
.case-book h3:not(:first-child){margin-top:24px}
.case-leads{margin:0;padding:0 0 0 46px;font-size:16px;line-height:1.5}
.case-leads li{margin:0 0 12px;padding-left:4px}
.case-leads li::marker{font-family:var(--display);color:#6d4a07}
.case-leads li.done .case-lead-text{color:#7b7870;text-decoration:line-through;text-decoration-color:rgba(28,27,25,.4)}
.case-lead-found{display:block;font-size:14px;color:#6d4a07}
.case-hint{margin-left:8px;padding:0;border:0;background:none;font:inherit;font-size:14px;color:#6d4a07;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.case-hint:hover,.case-hint:focus-visible{color:var(--paper-ink);outline:0}
.case-evidence{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0 0 0 22px}
.case-empty{font-size:15px;color:var(--paper-dim)}
.case-chip{display:inline-flex;align-items:center;gap:8px;padding:4px 10px 4px 4px;font:inherit;font-size:14px;color:var(--paper-ink);
  background:#fff9e8;border:1px solid #b9b3a2;border-radius:2px;cursor:pointer}
.case-chip:hover,.case-chip:focus-visible{border-color:#6d4a07;outline:0;box-shadow:0 0 0 2px rgba(233,178,60,.6)}
.case-chip .case-icon{width:26px;height:30px;font-size:7px}
html.noir .case-accuse{margin:24px 0 0 22px;font-size:18px}
.case-accuse-note{margin:12px 0 0 22px;font-size:14px;color:var(--paper-dim)}

/* Dialogs: a file on the desk, or the accusation. */
.case-dialog{width:min(760px,calc(100vw - 24px));max-height:calc(100dvh - 32px);padding:0;border:0;color:var(--ink);background:transparent;overflow:visible}
.case-dialog::backdrop{background:rgba(4,4,5,.93);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.case-dialog[open]{display:flex;flex-direction:column}
.case-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 4px 12px 2px}
.case-dialog-head h3{margin:0;font:700 19px/1.3 var(--body-font);color:var(--ink);overflow-wrap:anywhere}
.is-accuse .case-dialog-head h3{font:400 19px/1.3 var(--display);letter-spacing:.12em;text-transform:uppercase}
.case-close{flex:none;padding:9px 14px;font:400 13px/1 var(--display);letter-spacing:.16em;color:var(--ink);background:#1d1d21;border:1px solid #4a4950;border-radius:2px;cursor:pointer}
.case-close:hover,.case-close:focus-visible{border-color:var(--gold);outline:0}
.case-dialog-body{overflow:auto;overscroll-behavior:contain;min-height:0}
.case-file-meta{margin:0 0 10px;font-size:14px;color:#a9a7a1}
.case-pinned{margin:14px 0 4px;font-size:16px;color:var(--gold-hi)}
.case-doc{padding:34px 38px;color:var(--paper-ink);background:var(--paper);box-shadow:0 20px 50px rgba(0,0,0,.6);border-radius:1px}
.case-doc p{margin:0 0 12px;font-size:17px;line-height:1.6}
.case-doc hr{margin:16px 0;border:0;border-top:1px solid #bdb7a8}
.case-doc dl{margin:0;display:grid;gap:6px}
.case-doc dl>div{display:grid;grid-template-columns:minmax(110px,32%) minmax(0,1fr);gap:16px;font-size:16px;line-height:1.5}
.case-doc dt{color:var(--paper-dim)}
.case-doc dd{margin:0}
.case-doc .doc-title{margin:0 0 14px;font:400 22px/1.25 var(--display);letter-spacing:.04em}
.case-doc .doc-h{margin:18px 0 8px;font:700 18px/1.3 var(--body-font)}
.case-doc .doc-sign{margin-top:18px;font:400 24px/1.3 "Bradley Hand","Segoe Print","Snell Roundhand",cursive;color:#3a3833;transform:rotate(-2deg);transform-origin:left}
.doc-txt{background:#f1efe9}
.doc-txt pre{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font:400 15px/1.55 "Courier New",Courier,monospace;color:#1d1c1a}
.doc-txt pre.wide{white-space:pre;overflow-wrap:normal;overflow-x:auto;padding-bottom:6px}
.doc-pdf{font-family:Georgia,"Times New Roman",serif;box-shadow:0 20px 50px rgba(0,0,0,.6),inset 0 0 0 10px rgba(255,255,255,.35)}
.doc-pdf .doc-title{font:700 24px/1.25 Georgia,"Times New Roman",serif;letter-spacing:.02em;text-transform:uppercase}
.doc-pdf p,.doc-pdf dl>div{font-family:Georgia,"Times New Roman",serif}
.doc-pptx{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;padding:18px;background:#2a2a2e}
.doc-slide{aspect-ratio:16/9;display:flex;flex-direction:column;padding:18px 22px;background:#f4f2ec;color:var(--paper-ink);box-shadow:0 8px 24px rgba(0,0,0,.45)}
.doc-slide h5{margin:0 0 10px;padding-bottom:8px;font:400 19px/1.2 var(--display);border-bottom:2px solid #1c1b19}
.doc-slide ul{margin:0;padding-left:1.1em;font-size:15px;line-height:1.45}

.case-accusation fieldset{margin:0 0 20px;padding:0;border:0}
.case-accusation legend{margin-bottom:12px;font:400 17px/1.4 var(--display);letter-spacing:.08em;color:var(--ink)}
.case-accusation{padding:4px 2px 8px}
.case-suspects{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.case-suspect{position:relative;display:block;cursor:pointer}
.case-suspect input,.case-proof input{position:absolute;opacity:0;width:1px;height:1px}
.case-suspect-card{display:grid;grid-template-columns:minmax(0,1fr);height:100%;padding:12px;
  background:#16161a;border:1px solid #3a3a40;border-radius:2px}
/* A lineup board behind each suspect: height lines and a silhouette. */
.case-suspect-card::before{content:"";width:100%;height:84px;margin-bottom:10px;
  background:
    radial-gradient(circle at 50% 36%,#0b0b0d 0 15px,transparent 16px),
    radial-gradient(ellipse 26px 22px at 50% 100%,#0b0b0d 0 98%,transparent 100%),
    repeating-linear-gradient(180deg,#bfbbb0 0 1px,#8e8b83 1px 10px)}
.case-suspect-card b{font:400 19px/1.3 var(--display);letter-spacing:.04em;color:var(--ink)}
.case-suspect-card small{font-size:14px;color:var(--gold)}
.case-suspect-card span{margin-top:4px;font-size:14px;line-height:1.45;color:#c4c2bb}
.case-suspect input:checked+.case-suspect-card{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold),0 0 30px rgba(233,178,60,.2)}
.case-suspect input:focus-visible+.case-suspect-card,.case-proof input:focus-visible~span:last-child{outline:2px solid var(--gold);outline-offset:3px}
.case-proofs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.case-proof{display:flex;align-items:center;gap:10px;padding:6px 10px 6px 6px;font-size:16px;cursor:pointer;color:var(--paper-ink);background:var(--paper);border-radius:2px;position:relative}
.case-proof .case-icon{width:26px;height:30px;font-size:7px}
.case-proof:has(input:checked){box-shadow:0 0 0 3px var(--gold)}
.case-proof input:checked~span:last-child{font-weight:700}
html.noir .case-accusation .btn{margin-top:4px}
.case-verdict{min-height:1.5em;margin:18px 0 0;font-size:17px;line-height:1.55}
.case-verdict.no{padding:12px 16px;color:var(--ink);background:#1b1b1f;border-left:3px solid var(--gold)}

/* Case closed. */
.case-closed{position:relative;padding:40px 40px 44px;border:1px solid #2a2a2f;background:radial-gradient(800px 380px at 80% 0%,rgba(233,178,60,.1),transparent 65%),#101013}
.case-closed[hidden]{display:none}
.case-stamp{display:inline-block;margin:0 0 26px;padding:10px 22px 8px;font:400 clamp(30px,5vw,52px)/1 var(--display);letter-spacing:.14em;color:var(--gold);
  border:5px double var(--gold);transform:rotate(-4deg);outline:0;animation:case-stamp .5s cubic-bezier(.2,1.6,.4,1) both}
@keyframes case-stamp{from{opacity:0;transform:rotate(-4deg) scale(1.8)}to{opacity:1;transform:rotate(-4deg) scale(1)}}
.case-closing p{max-width:46em;margin:0 0 14px;font-size:19px;line-height:1.6;color:#dedcd5}
.case-stats{font-size:15px;color:#a9a7a1}
.case-pitch{max-width:40em;margin:26px 0 0;font-size:20px;line-height:1.55;color:var(--ink)}
html.noir .case-closed h3{margin:30px 0 0;font:400 clamp(28px,4vw,44px)/1.1 var(--display);color:var(--ink)}
.case-closed .sys a{color:var(--gold-hi)}
.case-again{margin-top:22px;padding:0;border:0;background:none;font:inherit;font-size:16px;color:#c9c7c0;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.case-again:hover,.case-again:focus-visible{color:var(--ink);outline:0}
.case-note{max-width:52em}

@media (max-width:900px){
  .case-board{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  html.noir .title{margin-top:18px;padding:0 18px 36px}
  html.noir .hero-brand{margin:0 -18px 26px;padding:30px 10px 24px}
  html.noir .title h1.tagline{font-size:30px}
  html.noir .title h1.tagline::after{margin-inline:auto}
  html.noir .hero-llm{margin-inline:auto}
  html.noir .research-feature{padding:30px 18px 34px}
  html.noir .research-announcement{font-size:14px}
  html.noir .wrap>section:not(.research-feature){padding-top:64px}
  html.noir #case{padding-top:86px}
  html.noir .talk p{font-size:19px}
  .case-game{padding:20px 16px}
  .case-brief{grid-template-columns:minmax(0,1fr);gap:12px;justify-items:center}
  .case-portrait{width:120px;height:120px;background-size:960px 480px}
  .case-brief-text p{font-size:18px}
  .case-closed{padding:30px 18px 34px}
  .case-doc{padding:24px 20px}
  .doc-txt pre{font-size:13px}
  .case-doc dl>div{grid-template-columns:minmax(0,1fr);gap:0}
  .case-row .btn{padding-inline:16px}
  .case-suspects{grid-template-columns:minmax(0,1fr)}
  .case-suspect-card{grid-template-columns:64px minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:14px}
  .case-suspect-card::before{grid-row:1/-1;width:64px;height:74px;margin:0}
  .case-proofs{grid-template-columns:minmax(0,1fr)}
  .case-book{padding:18px 16px 22px}
}
@media (prefers-reduced-motion:reduce){
  html.attract #attract{transition:opacity .3s}
  html.attract-leaving #attract{filter:none}
  #attract::after,html.noir .crt::before,.noir-kicker,.noir-brand,.noir-line,.attract-prompt span,
  .case-hit,.case-stamp,.case-status.busy::after{animation:none}
  html.powered .wrap>:nth-child(-n+3){animation:none}
}