/* Three design prototypes. All rules are scoped to their own anatomy. */
.project-card.prototype-card { align-self:start; display:block; border-radius:20px; }
.prototype-header { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px 16px; padding:23px 28px 25px; }
.prototype-identity { min-width:0; }
.prototype-identity h2 { display:flex; align-items:center; gap:9px; min-height:32px; margin:0; font-size:17px; line-height:1.2; letter-spacing:-.035em; font-weight:650; }
.prototype-logo { width:30px; height:30px; object-fit:contain; flex:none; }
.prototype-logo.bug-identity { width:34px; height:34px; }
.prototype-logo.flix-identity { width:122px; height:27px; }
.prototype-name > span,.prototype-domain { font-weight:400; color:#737378; }
.project-card .project-intro { grid-column:1/-1; margin:0; text-align:left; }
.project-intro strong { display:block; max-width:48ch; font-size:23px; line-height:1.22; letter-spacing:-.035em; font-weight:600; color:var(--ink); text-wrap:pretty; }
.project-intro > span { display:block; max-width:72ch; margin-top:8px; font-size:15px; line-height:1.55; color:#66666d; text-wrap:pretty; }
.card-heading > .project-intro { margin-top:18px; }
.prototype-links { display:flex; align-items:center; gap:14px; flex:none; }
.prototype-links .about-project { font-size:12px; min-height:44px; }
.prototype-links > a { display:grid; place-items:center; width:36px; height:44px; color:#48484b; }
.prototype-links > a:hover { color:#000; }
.prototype-links > a svg { transition:transform .2s var(--ease); }
.prototype-links > a:hover svg { transform:translate(2px,-2px); }

/* ChainMessages: a small archive reader, warm paper and Ethereum blue. */
.project-card.chain-archive { grid-column:1/-1; width:100%; max-width:1120px; justify-self:center; }
.chain-identity { width:145px; height:auto; object-fit:contain; }
.chain-study { --chain-blue:#405cc4; --chain-line:#dad9d1; background:#f4f0e8; padding:30px 28px 18px; color:#111522; }
.chain-intro { position:relative; display:flex; justify-content:space-between; align-items:center; gap:20px; padding-bottom:29px; }
.chain-eyebrow { font-size:10px; font-weight:650; text-transform:uppercase; letter-spacing:.1em; color:#5265a8; }
.chain-intro h3 { font-size:clamp(31px,3.6vw,44px); line-height:1.04; font-weight:650; letter-spacing:-.048em; margin:13px 0 14px; }
.chain-intro > div > p:last-child { font-size:13px; line-height:1.6; color:#667080; }
.chain-eth-art { width:152px; height:152px; object-fit:contain; opacity:.85; margin-right:12px; }
.chain-archive-layout { display:grid; grid-template-columns:220px minmax(0,1fr); gap:27px; border-top:1px solid var(--chain-line); padding-top:23px; align-items:start; }
.chain-catalog { min-width:0; }
.chain-catalog-label { display:flex; justify-content:space-between; align-items:center; font-size:10px; text-transform:uppercase; letter-spacing:.07em; color:#697381; padding:0 12px 13px 0; }
.chain-catalog-label > span { font-variant-numeric:tabular-nums; }
.chain-records { display:grid; }
.chain-records > button { display:flex; gap:10px; align-items:start; min-height:85px; width:100%; border:0; border-left:2px solid transparent; border-bottom:1px solid #dcdcd5; background:none; padding:18px 10px 16px 8px; text-align:left; color:#4a5260; transition:background .2s,color .2s; }
.chain-records > button:hover { background:#eaeaf0; color:#172c70; }
.chain-records > button[aria-pressed="true"] { background:#e8eaf4; border-left-color:var(--chain-blue); color:#203879; }
.chain-record-index { font-size:10px; line-height:1.8; color:#808792; font-variant-numeric:tabular-nums; }
.chain-records strong { display:block; font-size:13px; line-height:1.4; font-weight:600; }
.chain-records small { display:block; font-size:10px; margin-top:6px; color:#687383; line-height:1.5; }
.chain-record-arrow { margin-left:auto; font-size:15px; opacity:0; }
.chain-records > button[aria-pressed="true"] .chain-record-arrow { opacity:1; }
.chain-catalog-note { padding:16px 12px 0 0; color:#747c86; font-size:11px; line-height:1.6; max-width:25ch; }
.chain-reading { min-width:0; background:#fffdf8; border:1px solid #dddcd5; border-radius:5px; box-shadow:0 3px 8px #34342d05; }
.chain-reading-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:69px; padding:12px 24px; border-bottom:1px solid #e5e3dd; }
.chain-reading-toolbar > span { font-size:10px; color:#677284; text-transform:uppercase; letter-spacing:.055em; }
.chain-view-controls { display:flex; gap:2px; flex:none; }
.chain-view-controls > button { border:0; background:none; padding:8px 11px; min-height:44px; font-size:12px; color:#737b88; border-radius:4px; }
.chain-view-controls > button[aria-pressed="true"] { background:#e9edf9; color:#314fbd; }
.chain-view-controls > button > span { font-family:Consolas,monospace; margin-left:3px; font-size:10px; opacity:.65; }
.chain-message-page { position:relative; min-height:260px; padding:46px 28px 25px; display:flex; align-items:center; }
.chain-quote-mark { position:absolute; top:13px; left:24px; font-family:Georgia,serif; font-size:66px; line-height:1; color:#627eea; opacity:.5; pointer-events:none; }
.chain-message-page blockquote { margin:0; color:#162348; font-size:clamp(29px,3.1vw,39px); line-height:1.15; font-weight:500; letter-spacing:-.037em; overflow-wrap:anywhere; max-width:26ch; }
.chain-hex-view { width:100%; align-self:stretch; }
.chain-hex-view > p { font:10px/1.5 Consolas,monospace; color:#737f92; margin-bottom:15px; }
.chain-hex-view code { display:block; font:13px/1.85 Consolas,'Courier New',monospace; color:#3c5796; overflow-wrap:anywhere; max-height:176px; overflow:auto; }
.chain-hex-view button { min-height:44px; margin-top:14px; padding:0; background:none; border:0; color:#314fbd; font-size:12px; }
.chain-hex-view button > span { margin-left:12px; }
.chain-study[data-view="hex"] .chain-message-page { align-items:start; padding-top:22px; }
.chain-context { padding:0 28px 25px; }
.chain-context-label { font-size:11px; font-weight:600; color:#4c629b; margin-bottom:7px; }
.chain-context > p:last-child { font-size:12px; line-height:1.6; color:#697382; max-width:52ch; }
.chain-source { display:flex; align-items:center; justify-content:space-between; gap:16px; border-top:1px solid #e5e3dd; padding:14px 28px 12px; }
.chain-source > div > span { display:block; color:#7a808a; text-transform:uppercase; letter-spacing:.065em; font-size:9px; }
.chain-source a { display:flex; gap:12px; align-items:center; min-height:38px; font-size:13px; color:#435a96; }
.chain-source code { font:11px Consolas,monospace; }
.chain-source > span { color:#7a808a; font-size:10px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.chain-bottom { display:flex; justify-content:space-between; align-items:center; gap:20px; padding-top:15px; }
.chain-bottom > p { font-size:10px; line-height:1.6; color:#757b85; }
.chain-bottom > button { min-height:44px; flex:none; border:0; background:none; color:#314fbd; font-size:12px; padding:8px 0 8px 10px; }
.chain-bottom > button > span { padding-left:15px; }
.chain-study :is(button,a):focus-visible { outline:2px solid #405cc4; outline-offset:3px; }
@media(max-width:750px) {
  .chain-archive-layout { grid-template-columns:minmax(0,1fr); gap:19px; }
  .chain-records { grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
  .chain-records > button { flex-direction:column; gap:5px; min-height:116px; border-left:0; border-bottom:2px solid #dcdcd5; padding:11px; }
  .chain-records > button[aria-pressed="true"] { border-bottom-color:var(--chain-blue); }
  .chain-records strong { font-size:12px; }
  .chain-records small { font-size:10px; }
  .chain-record-arrow,.chain-catalog-note { display:none; }
  .chain-message-page { min-height:240px; }
  .chain-message-page blockquote { font-size:34px; }
}
@media(max-width:500px) {
  .chain-study { padding:25px 18px 14px; }
  .chain-intro { gap:0; padding-bottom:22px; }
  .chain-intro h3 { font-size:32px; }
  .chain-intro > div > p:last-child { font-size:12px; }
  .chain-eth-art { position:absolute; right:-20px; top:-8px; width:100px; height:100px; opacity:.15; margin:0; pointer-events:none; }
  .chain-records > button { padding:10px 8px; }
  .chain-records small { display:none; }
  .chain-records > button { min-height:83px; }
  .chain-records strong { font-size:11px; }
  .chain-reading-toolbar { padding:10px 14px; gap:6px; }
  .chain-reading-toolbar > span { font-size:9px; max-width:11ch; line-height:1.4; }
  .chain-view-controls > button { padding-inline:9px; font-size:11px; }
  .chain-view-controls > button > span { display:none; }
  .chain-message-page { padding-inline:20px; min-height:255px; }
  .chain-message-page blockquote { font-size:30px; }
  .chain-quote-mark { left:17px; }
  .chain-context { padding:0 20px 20px; }
  .chain-source { padding-inline:20px; gap:8px; }
  .chain-source code { font-size:10px; }
  .chain-source > span { font-size:9px; }
  .chain-bottom { align-items:start; flex-direction:column-reverse; gap:4px; padding-top:8px; }
  .chain-bottom > button { padding-left:0; align-self:flex-end; }
  .chain-identity { width:122px; }
}
@media(max-width:350px) {
  .chain-identity { width:112px; }
  .chain-study { padding-inline:14px; }
  .chain-intro h3 { font-size:29px; }
  .chain-message-page blockquote { font-size:27px; }
  .chain-source { padding-inline:14px; }
}

/* 0001s: an editorial archive, using the site's original type and footage. */
.project-card.flight-archive { grid-column:1/-1; width:100%; max-width:1120px; justify-self:center; }
.flight-wordmark { font:500 27px/1 'IBM Plex Mono',Consolas,monospace; letter-spacing:-.085em; }
.flight-wordmark > span { color:#75796c; font-weight:400; font-size:19px; letter-spacing:-.055em; }
.flight-study { --flight-ink:#eeece2; --flight-muted:#b3b6aa; --flight-signal:#d0db9c; padding:32px 28px 18px; background:#171916; color:var(--flight-ink); }
.flight-study button,.flight-study a { -webkit-tap-highlight-color:transparent; }
.flight-study :is(button,a):focus-visible { outline:2px solid var(--flight-signal); outline-offset:4px; }
.flight-intro { padding-bottom:27px; }
.flight-eyebrow { font:10px/1.6 'IBM Plex Mono',monospace; letter-spacing:.055em; text-transform:uppercase; color:var(--flight-muted); }
.flight-intro h3 { font:400 clamp(38px,4.7vw,58px)/1 'Newsreader',Georgia,serif; letter-spacing:-.04em; margin:17px 0 12px; }
.flight-intro h3 em { color:var(--flight-signal); font-weight:400; }
.flight-intro > p:last-child { font-size:12px; line-height:1.5; color:var(--flight-muted); }
.flight-collections { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid #3b3e36; border-bottom:1px solid #3b3e36; }
.flight-collections button { min-width:0; min-height:80px; position:relative; border:0; background:none; padding:14px 8px 14px 0; text-align:left; color:var(--flight-muted); transition:color .18s; }
.flight-collections button + button { padding-left:18px; border-left:1px solid #3b3e36; }
.flight-collections button > span { display:block; font:10px/1.6 'IBM Plex Mono',monospace; }
.flight-collections button > strong { display:block; font:400 20px/1.5 'IBM Plex Mono',monospace; letter-spacing:-.05em; }
.flight-collections button[aria-pressed="true"],.flight-collections button:hover { color:var(--flight-signal); }
.flight-collections button[aria-pressed="true"]::after { content:""; position:absolute; bottom:-1px; left:0; right:0; height:2px; background:var(--flight-signal); }
.flight-file-strip { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 0 12px; color:var(--flight-muted); font:10px/1.5 'IBM Plex Mono',monospace; }
.flight-file-strip > :first-child { color:var(--flight-ink); }
.flight-file-strip > :last-child { font-variant-numeric:tabular-nums; }
.flight-contact-sheet { display:grid; grid-template-columns:minmax(0,1fr) 23%; gap:22px; align-items:start; }
.flight-lead,.flight-browse { min-width:0; }
.flight-media { position:relative; aspect-ratio:16/9; background:#0a0c09; }
.flight-media > .standby-frame { display:block; position:relative; width:100%; height:100%; padding:0; border:0; overflow:hidden; background:#0a0c09; color:var(--flight-ink); text-align:left; }
.flight-media .standby-frame img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.flight-media .standby-frame:hover img { transform:scale(1.02); }
.flight-play { position:absolute; left:18px; bottom:18px; display:flex; align-items:center; gap:17px; min-height:48px; background:#eeece2; color:#171916; padding:0 16px 0 0; font:11px/1.4 'IBM Plex Mono',monospace; }
.flight-play > span:first-child { display:grid; place-items:center; align-self:stretch; width:48px; border-right:1px solid #17191630; font-size:13px; }
.flight-play time { font-size:10px; color:#616658; }
.standby-frame:hover .flight-play { background:var(--flight-signal); }
.flight-media iframe,.flight-media > .youtube-player-host { display:block; border:0; width:100%; height:100%; }
.flight-loading-poster { position:absolute; inset:0; pointer-events:none; }
.flight-loading-poster img { display:block; width:100%; height:100%; object-fit:cover; filter:brightness(.6); }
.flight-loading-poster > span { position:absolute; inset:auto 16px 18px; text-align:center; color:white; font:11px/1.5 'IBM Plex Mono',monospace; }
.flight-caption { display:flex; justify-content:space-between; align-items:start; gap:20px; padding-top:17px; }
.flight-caption > div { min-width:0; }
.flight-caption #flight-name { display:block; color:var(--flight-ink); font:400 24px/1.25 'IBM Plex Mono',monospace; letter-spacing:-.055em; overflow-wrap:anywhere; }
.flight-caption #flight-name:hover { color:var(--flight-signal); }
.flight-caption p { font-size:11px; color:var(--flight-muted); margin-top:7px; line-height:1.5; overflow-wrap:anywhere; }
.flight-caption > a { flex:none; font-size:11px; padding:5px 0 12px; color:var(--flight-muted); }
.flight-caption > a:hover { color:var(--flight-signal); }
.flight-browse { display:flex; flex-direction:column; }
.flight-browse-heading { order:2; display:flex; flex-direction:column; align-items:start; gap:0; margin-top:8px; border-top:1px solid #3b3e36; }
.flight-browse-heading > span { display:none; font:10px/1.5 'IBM Plex Mono',monospace; color:var(--flight-muted); }
.flight-browse-heading button { min-height:48px; background:none; border:0; color:var(--flight-ink); font-size:12px; padding:8px 0; width:100%; text-align:left; display:flex; justify-content:space-between; align-items:center; }
.flight-browse-heading button > span { padding-left:16px; }
.flight-browse-heading button:hover { color:var(--flight-signal); }
.flight-records { display:grid; grid-template-columns:minmax(0,1fr); gap:15px; }
.flight-records > button { position:relative; min-width:0; border:0; border-bottom:2px solid transparent; padding:0 0 10px; background:none; text-align:left; color:var(--flight-muted); transition:color .2s,border-color .2s; }
.flight-records > button[aria-pressed="true"] { color:var(--flight-ink); border-color:var(--flight-signal); }
.flight-records img { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; opacity:.85; transition:opacity .2s; }
.flight-records > button:hover img,.flight-records > button[aria-pressed="true"] img { opacity:1; }
.flight-record-copy { display:block; padding-top:9px; }
.flight-record-copy > span { display:block; font:9px/1.5 'IBM Plex Mono',monospace; color:var(--flight-muted); }
.flight-record-copy > strong { display:block; margin-top:3px; font-size:11px; line-height:1.5; font-weight:400; }
.flight-footnote { display:flex; justify-content:space-between; align-items:center; gap:16px; min-height:38px; margin-top:22px; border-top:1px solid #3b3e36; padding-top:10px; color:var(--flight-muted); font-size:10px; line-height:1.5; }
.flight-footnote > button { flex:none; min-height:44px; padding:8px 0; background:none; border:0; color:var(--flight-ink); font-size:11px; }
.flight-study .player-status { display:flex; align-items:center; flex-wrap:wrap; gap:8px 16px; padding:12px 0 0; color:var(--flight-muted); font-size:12px; }
.flight-study .player-status a,.flight-study .player-status button { color:var(--flight-signal); }
.flight-study .player-status button { min-height:44px; border:0; background:none; }
.flight-media .player-error { display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; height:100%; padding:20px; gap:12px; text-align:center; }
.flight-media:has(.player-error) { min-height:260px; }
.flight-media .player-error .eyebrow { font:10px 'IBM Plex Mono',monospace; color:var(--flight-muted); text-transform:uppercase; }
.flight-media .player-error strong { font:400 28px/1.1 'Newsreader',Georgia,serif; }
.flight-media .player-error p { font-size:12px; max-width:45ch; color:var(--flight-muted); }
.flight-media .player-recovery { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 16px; font-size:12px; }
.flight-media .player-recovery button { min-height:44px; padding:8px 12px; border:1px solid #59604d; background:none; color:var(--flight-ink); }
.flight-media .player-recovery > a { display:flex; align-items:center; min-height:44px; color:var(--flight-signal); }
@media(max-width:600px) {
  .flight-study { padding:25px 20px 14px; }
  .flight-intro h3 { font-size:43px; }
  .flight-collections button > strong { font-size:16px; }
  .flight-collections button + button { padding-left:10px; }
  .flight-collections button > span { font-size:9px; }
  .flight-file-strip { font-size:9px; }
  .flight-file-strip > :nth-child(2) { display:none; }
  .flight-play { left:10px; bottom:10px; gap:10px; min-height:44px; font-size:10px; padding-right:12px; }
  .flight-play > span:first-child { width:38px; }
  .flight-play time { font-size:9px; }
  .flight-caption { gap:12px; }
  .flight-caption #flight-name { font-size:19px; }
  .flight-caption > a { font-size:10px; }
  .flight-contact-sheet { grid-template-columns:minmax(0,1fr); gap:20px; }
  .flight-records { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .flight-browse-heading { order:0; flex-direction:row; justify-content:space-between; align-items:center; margin:0; }
  .flight-browse-heading > span { display:block; font-size:9px; }
  .flight-browse-heading button { width:auto; gap:6px; }
  .flight-record-copy > strong { font-size:10px; }
  .flight-record-copy > span { font-size:8px; }
  .flight-footnote { align-items:start; }
}
@media(max-width:350px) {
  .flight-study { padding-inline:15px; }
  .flight-intro h3 { font-size:36px; }
  .flight-eyebrow { font-size:8px; }
  .flight-collections button > strong { font-size:14px; }
  .flight-collections button > span { font-size:8px; }
  .flight-caption { flex-wrap:wrap; gap:5px; }
  .flight-browse-heading button { font-size:11px; }
  .flight-browse-heading button > span { padding-left:5px; }
}

/* Bug League: a photographic viewfinder beside its physical collectible. */
.field-study { --bug-zoom:1.35; --bug-focus:55% 55%; background:#f1efe7; padding:27px 28px 22px; overflow:hidden; }
.field-labels { display:grid; grid-template-columns:1fr 30px 1fr; align-items:center; font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:#6b685e; }
.field-labels > span:last-child { text-align:right; }
.field-arrow { text-align:center; font-size:17px; }
.field-composition { position:relative; height:345px; max-width:660px; margin:12px auto 0; isolation:isolate; }
.field-viewfinder { position:absolute; left:0; top:32px; width:61%; height:260px; border-radius:3px; overflow:hidden; background:#232821; box-shadow:0 10px 26px #29251e14; }
.field-viewfinder .bug-photo { position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto; border-radius:0; background:#4b5042; }
.field-viewfinder .bug-photo-view { inset:0; width:100%; height:100%; overflow:hidden; transform:scale(var(--bug-zoom)); transform-origin:var(--bug-focus); }
.field-viewfinder .bug-photo img { inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--bug-focus); }
.field-viewfinder .bug-photo::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,#12170ec9,transparent 44%); }
.field-focus { position:absolute; width:64px; height:64px; top:calc(42% - 32px); left:calc(48% - 32px); border:1px solid #ffffffe0; border-radius:5px; opacity:.7; transition:transform .3s, border-color .3s; }
.field-species { position:absolute; top:16px; left:16px; color:white; font-size:12px; text-shadow:0 1px 5px #000a; }
.field-camera { position:absolute; bottom:14px; left:19px; display:flex; align-items:center; gap:10px; color:#fff; font-size:12px; }
.field-shutter { display:grid; place-items:center; flex:none; width:54px; height:54px; border:2px solid #fff; border-radius:50%; background:transparent; padding:4px; }
.field-shutter > span { display:block; width:100%; height:100%; border-radius:50%; background:#fff; transition:transform .18s,background .18s; }
.field-shutter:hover > span { transform:scale(.9); background:#f5ebbc; }
.field-shutter:active > span { transform:scale(.8); }
.field-shutter:focus-visible { outline-color:#ffe28a; }
.field-shutter[aria-disabled="true"] { opacity:.75; cursor:wait; }
.field-flash { position:absolute; inset:0; background:white; opacity:0; pointer-events:none; }
.field-collectible { position:absolute; z-index:2; top:13px; right:3%; width:43%; max-width:222px; margin:0; transform:rotate(4deg); transform-origin:50% 80%; transition:transform .55s var(--ease),opacity .3s; }
.field-collectible img { width:100%; height:auto; border-radius:9px; box-shadow:0 14px 24px #3e332e30,0 2px 4px #3e332e24; }
.field-collectible figcaption { display:flex; align-items:baseline; justify-content:space-between; gap:7px; margin-top:12px; font-size:13px; font-weight:600; color:#37352c; }
.field-collectible figcaption span { flex:none; color:#514b39; font-size:17px; font-weight:600; letter-spacing:-.04em; }
.field-note { display:flex; justify-content:space-between; gap:16px; align-items:baseline; padding-top:12px; border-top:1px solid #dcd8cb; color:#5e5c52; font-size:12px; line-height:1.5; }
.field-note > span { white-space:nowrap; font-size:10px; font-variant-numeric:tabular-nums; letter-spacing:.08em; color:#767264; }
.field-study[data-phase="framing"] .field-focus { border-color:#ffe28a; transform:scale(.83); }
.field-study[data-phase="finding"] .field-collectible,.field-study[data-phase="framing"] .field-collectible,.field-study[data-phase="snapping"] .field-collectible { opacity:.3; transform:translateY(9px) rotate(7deg) scale(.96); }
.field-study[data-phase="snapping"] .field-flash { animation:field-shutter-flash .24s ease-out; }
.field-study[data-phase="revealing"] .field-collectible { animation:field-card-settle .65s var(--ease) both; }
.field-study[data-phase="collected"] .field-collectible { transform:rotate(0); opacity:1; }
@keyframes field-shutter-flash { 0%,100% { opacity:0; } 25% { opacity:.85; } }
@keyframes field-card-settle { from { opacity:0; transform:translate(-24px,12px) rotate(-7deg) scale(.93); } 65% { opacity:1; } to { opacity:1; transform:rotate(0); } }

/* Aibiguity: the product's illustrated Quick Start and shared judgment line. */
.judgment-study { --human-position:49.37%; --ai-teal:#008577; --ai-coral:#e05240; padding:27px 28px 22px; background:#f2f5f4; color:#121817; container-type:inline-size; }
.judgment-eyebrow { display:flex; align-items:center; justify-content:space-between; gap:16px; color:#075f57; font-size:10px; line-height:1.4; font-weight:750; text-transform:uppercase; letter-spacing:.09em; }
.judgment-eyebrow > span:last-child { color:#64706c; white-space:nowrap; font-variant-numeric:tabular-nums; }
.judgment-study h3 { max-width:20ch; font-size:clamp(29px,2.8vw,39px); font-weight:800; letter-spacing:-.045em; line-height:1.05; margin:17px 0 9px; text-wrap:balance; }
.judgment-premise { font-size:12px; line-height:1.5; color:#616b67; }
.judgment-stage { display:grid; grid-template-columns:minmax(100px,.75fr) minmax(0,1.4fr); align-items:center; gap:20px; margin-top:26px; min-height:190px; }
.judgment-art { width:100%; height:175px; object-fit:contain; filter:drop-shadow(0 9px 10px #3c332113); }
.judgment-control { min-width:0; }
.judgment-answer { margin-bottom:12px; }
.judgment-answer > label { display:block; font-size:10px; text-transform:uppercase; letter-spacing:.06em; font-weight:700; color:#66706c; margin-bottom:9px; }
.judgment-answer > div { display:flex; gap:7px; align-items:baseline; flex-wrap:wrap; }
.judgment-answer output { font-size:48px; line-height:1; letter-spacing:-.06em; font-weight:800; font-variant-numeric:tabular-nums; }
.judgment-answer #ai-unit { font-size:19px; font-weight:750; letter-spacing:-.035em; }
.judgment-track { position:relative; min-width:0; height:54px; display:flex; align-items:center; }
.judgment-track input { appearance:none; background:transparent; width:100%; height:54px; margin:0; cursor:ew-resize; }
.judgment-track input::-webkit-slider-runnable-track { height:8px; border-radius:8px; background:linear-gradient(90deg,var(--ai-teal) 0 var(--human-position),#d3dcda var(--human-position) 100%); }
.judgment-track input::-webkit-slider-thumb { appearance:none; width:25px; height:25px; border:4px solid #fff; border-radius:50%; margin-top:-8.5px; background:var(--ai-coral); box-shadow:0 2px 8px #12181740; }
.judgment-track input::-moz-range-track { height:8px; border-radius:8px; background:#d3dcda; }
.judgment-track input::-moz-range-progress { height:8px; border-radius:8px; background:var(--ai-teal); }
.judgment-track input::-moz-range-thumb { width:17px; height:17px; border:4px solid #fff; border-radius:50%; background:var(--ai-coral); box-shadow:0 2px 8px #12181740; }
.judgment-track input:disabled { opacity:1; cursor:default; }
.judgment-track input:focus-visible { outline:2px solid #075f57; outline-offset:4px; border-radius:6px; }
.judgment-slider-hint { position:absolute; top:-2px; left:45%; background:#fff; color:#075f57; border:1px solid #c7ded8; border-radius:5px; padding:4px 7px; font-size:10px; font-weight:650; white-space:nowrap; pointer-events:none; box-shadow:0 3px 7px #12181708; }
.judgment-axis { display:flex; justify-content:space-between; gap:12px; color:#64706c; font-size:10px; font-weight:600; }
.judgment-markers { position:absolute; inset:0 12.5px; pointer-events:none; }
.judgment-model-marker { position:absolute; top:calc(50% + var(--model-lane)); left:var(--model-position); width:27px; height:27px; display:grid; place-items:center; transform:translate(-50%,-50%); border:2px solid white; border-radius:50%; background:white; box-shadow:0 0 0 1px #c6cecb,0 3px 8px #12181715; animation:judgment-arrive .4s ease-out both; animation-delay:var(--arrival-delay); }
.judgment-model-marker::before { content:""; position:absolute; z-index:-1; width:1px; height:var(--stem-height); background:#a7b7b1; left:50%; top:100%; }
.judgment-model-marker.is-below::before { top:auto; bottom:100%; }
.judgment-model-marker img { width:18px; height:18px; object-fit:contain; }
.judgment-model-marker.is-selected { box-shadow:0 0 0 2px #008577,0 3px 8px #12181715; }
.judgment-study[data-state="compared"] .judgment-track,.judgment-study[data-state="compared"] .judgment-track input { height:138px; }
.judgment-results { border-top:1px solid #d8e0dc; padding-top:20px; margin-top:22px; }
.judgment-result-label { color:#075f57; text-transform:uppercase; font-size:10px; letter-spacing:.08em; font-weight:750; }
.judgment-results h4 { font-size:23px; line-height:1.15; letter-spacing:-.04em; font-weight:750; margin:7px 0 15px; color:#16265d; }
.judgment-model-choices { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }
.judgment-model-choices button { display:grid; grid-template-columns:20px 1fr; align-items:center; gap:6px; border:1px solid #d5deda; border-radius:7px; padding:10px; background:#ffffff9c; color:#58635f; text-align:left; min-height:70px; }
.judgment-model-choices button img { width:18px; height:18px; object-fit:contain; }
.judgment-model-choices button span { font-size:10px; font-weight:600; }
.judgment-model-choices button strong { grid-column:1/-1; color:#1c3029; font-size:21px; font-weight:750; letter-spacing:-.035em; }
.judgment-model-choices button[aria-pressed="true"] { background:#fff; border-color:#008577; box-shadow:inset 0 0 0 1px #008577; }
.judgment-model-choices button:hover { border-color:#008577; }
.judgment-reason { font-size:12px; line-height:1.55; color:#53625b; margin-top:12px; min-height:3.1em; }
.judgment-action { display:flex; gap:18px; justify-content:space-between; align-items:center; margin-top:20px; padding-top:18px; border-top:1px solid #d8e0dc; }
.judgment-action > p { font-size:12px; line-height:1.45; max-width:25ch; color:#53625b; }
.judgment-action > button { flex:none; min-height:46px; padding:11px 17px; border:0; border-radius:7px; color:#fff; background:#08796e; font-size:12px; font-weight:700; white-space:nowrap; transition:background .15s; }
.judgment-action > button:hover { background:#075f57; }
.judgment-source { font-size:10px; line-height:1.5; color:#65726c; margin-top:12px; }
@keyframes judgment-arrive { from { opacity:0; transform:translate(-50%,calc(-50% - var(--model-lane))) scale(.7); } to { opacity:1; transform:translate(-50%,-50%) scale(1); } }
@container (max-width:390px) {
  .judgment-stage { grid-template-columns:92px minmax(0,1fr); gap:12px 18px; min-height:0; margin-top:21px; }
  .judgment-art { height:100px; }
  .judgment-control { display:contents; }
  .judgment-answer { margin:0; }
  .judgment-answer output { font-size:44px; }
  .judgment-answer #ai-unit { font-size:17px; }
  .judgment-scale { grid-column:1/-1; }
  .judgment-model-choices { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .judgment-model-choices button { grid-template-columns:18px 1fr auto; min-height:48px; }
  .judgment-model-choices button strong { grid-column:auto; font-size:18px; }
  .judgment-action { gap:12px; }
  .judgment-action > button { padding-inline:12px; font-size:11px; }
}

/* MemerIQ: a playable browser-era time capsule, adapted from the original game. */
.project-card.meme-monitor { grid-column:1/-1; width:100%; max-width:1120px; justify-self:center; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; overflow:visible; }
.meme-project-header { padding:8px 5px 20px; }
.meme-monitor-hardware { position:relative; padding:25px 25px 0; border:1px solid #161b19; border-radius:20px 20px 26px 26px; background:linear-gradient(112deg,#454b47 0%,#303632 18%,#343b36 80%,#252c27 100%); box-shadow:inset 0 2px 1px #abb2a180,inset 2px 0 2px #88907e50,inset -3px -4px 3px #0e140ec9,0 4px 0 #1e241f,0 18px 28px -8px #17231745; }
.meme-monitor-hardware::before { content:""; position:absolute; pointer-events:none; inset:6px; border:1px solid #89958022; border-bottom-color:#080f0880; border-radius:15px 15px 21px 21px; }
.meme-screen { position:relative; border:7px solid; border-color:#131a15 #1b231d #505b50 #202923; border-radius:9px; overflow:hidden; box-shadow:0 0 0 1px #091109,0 1px 0 2px #8a998738; }
.meme-screen::after { content:""; position:absolute; z-index:8; pointer-events:none; inset:0; border-radius:2px; box-shadow:inset 0 2px 5px #07100855,inset 2px 0 4px #07100830; }
.meme-study { --meme-desktop:#a5ab96; --meme-title:linear-gradient(#8aa4cf,#4f6ea4); --meme-toolbar:#e1ddd3; --meme-border:#77776d; --meme-radius:3px; --meme-accent:#167c80; position:relative; display:grid; grid-template-columns:76px minmax(0,1fr); grid-template-rows:minmax(0,1fr) 42px; column-gap:10px; height:640px; padding:14px 14px 0 8px; background:var(--meme-desktop); color:#191716; container-type:inline-size; transition:background-color .22s; }
.meme-monitor-chin { position:relative; display:flex; justify-content:space-between; align-items:center; min-height:70px; padding:0 13px; color:#d4d5cd; }
.meme-hardware-brand { font:600 10px/1 Tahoma,sans-serif; letter-spacing:.16em; color:#aeb8a6; text-shadow:0 1px 1px #121b11; }
.meme-speaker { position:absolute; left:50%; top:30px; transform:translateX(-50%); width:100px; height:12px; opacity:.55; background:repeating-linear-gradient(90deg,#121d13 0 2px,#69756270 2px 3px,transparent 3px 6px); border-radius:2px; }
.meme-monitor-controls { display:flex; align-items:center; gap:12px; }
.meme-hardware-key { width:11px; height:4px; background:#222c23; border:1px solid #131e13; border-bottom-color:#7c887166; border-radius:2px; }
.meme-power-switch { display:grid; place-items:center; width:24px; height:20px; border:1px solid #111a12; border-radius:7px; color:#a6b59f; background:linear-gradient(#465341,#2a3429); box-shadow:0 1px #72816b60; font:12px/1 Tahoma,sans-serif; }
.meme-power { width:5px; height:5px; border-radius:50%; background:#9dc689; box-shadow:0 0 5px #9dc68950; }
.meme-desktop-icons { display:flex; flex-direction:column; align-items:stretch; gap:3px; padding-top:1px; padding-bottom:85px; overflow:auto; scrollbar-width:none; }
.meme-desktop-icons > button,.meme-desktop-icons > a { display:flex; align-items:center; flex-direction:column; justify-content:center; gap:4px; border:1px solid transparent; background:transparent; color:white; text-align:center; padding:4px 1px; min-height:60px; text-decoration:none; border-radius:2px; }
.meme-desktop-icons img { width:29px; height:29px; object-fit:contain; image-rendering:auto; }
.meme-desktop-icons span { font:10px/1.2 Tahoma,"Segoe UI",sans-serif; text-shadow:0 1px 2px #000c; }
.meme-desktop-icons > :hover,.meme-desktop-icons > :focus-visible { background:#203e732e; border-color:#e9f3ff66; }
.meme-clippy { position:absolute; left:13px; bottom:51px; width:68px; border:0; background:none; padding:0; display:flex; align-items:center; flex-direction:column; gap:3px; }
.meme-clippy img { width:35px; height:65px; object-fit:contain; filter:drop-shadow(0 3px 2px #0002); }
.meme-clippy span { color:white; font-size:9px; text-shadow:0 1px 2px #000; }
.meme-taskbar { grid-column:1/-1; display:flex; align-items:center; gap:8px; margin:7px -14px 0 -8px; padding:3px 6px; border-top:2px solid var(--task-edge,#f3f0e5); background:var(--task-bg,linear-gradient(#d7d3c7,#b4b0a5)); color:var(--task-ink,#232522); }
.meme-taskbar button { display:flex; align-items:center; gap:6px; height:30px; border:1px solid var(--task-border,#797b74); background:var(--task-button,#d9d7cc); color:var(--task-ink,#232522); box-shadow:var(--task-shadow,inset 1px 1px white,inset -1px -1px #92938c); padding:3px 9px; font:11px Tahoma,"Segoe UI",sans-serif; }
.meme-taskbar #meme-start { padding:0; border:0; background:none; box-shadow:none; }
.meme-taskbar #meme-start img { width:80px; height:30px; object-fit:fill; }
.meme-taskbar .meme-task { min-width:130px; background:var(--task-active,#e2e0d7); box-shadow:var(--task-active-shadow,inset 1px 1px #8b8f87,inset -1px -1px white); border-radius:var(--task-radius,0); }
.meme-task img { width:18px; height:22px; object-fit:contain; }
.meme-tray { margin-left:auto; display:flex; align-items:center; gap:7px; border:1px solid var(--tray-border,#aaa99f); background:var(--tray-bg,transparent); color:var(--task-ink,#232522); padding:4px 7px; min-height:26px; font:10px Tahoma,sans-serif; }
.meme-tray img { width:16px; height:16px; object-fit:contain; }
.meme-desktop-popup { position:absolute; z-index:5; width:min(420px,calc(100% - 30px)); max-height:calc(100% - 100px); top:65px; left:50%; transform:translateX(-50%); border:2px outset #dbd9d0; background:#fffaf0; box-shadow:0 10px 30px #0004; overflow:auto; }
.meme-desktop-popup > header { display:flex; align-items:center; justify-content:space-between; gap:8px; background:#496b9d; color:white; padding:2px 4px 2px 10px; }
.meme-desktop-popup h3 { margin:0; font:600 12px Tahoma,sans-serif; }
.meme-desktop-popup header button { min-width:40px; min-height:40px; color:white; font-size:23px; background:none; border:0; }
#meme-popup-body { padding:18px; font:13px/1.55 Tahoma,sans-serif; }
#meme-popup-body p + p { margin-top:12px; }
.meme-start-menu { position:absolute; z-index:6; bottom:38px; left:3px; width:230px; background:#dedbd0; border:2px outset white; padding:5px; box-shadow:4px 0 20px #0003; }
.meme-start-menu > * { display:flex; align-items:center; padding:10px 12px; width:100%; min-height:44px; color:#232522; text-align:left; font:12px Tahoma,sans-serif; border:0; background:none; }
.meme-start-menu > strong { background:#496b9d; color:white; font-weight:700; }
.meme-start-menu button:hover,.meme-start-menu a:hover { background:#254e8c; color:#fff; }
.meme-study[data-era="xp"] { --meme-desktop:#7aace0; --meme-title:linear-gradient(#9cc4ef,#4e87d8 24%,#2d62ab); --meme-toolbar:#dbeaf9; --meme-border:#2f5a96; --meme-radius:9px; }
.meme-study[data-era="aero"] { --meme-desktop:#7c90a6; --meme-title:linear-gradient(#b8e1ff,#6daaec 28%,#2f5eb0); --meme-toolbar:#e6f0fa; --meme-border:#566c85; --meme-radius:10px; }
.meme-study[data-era="modern"] { --meme-desktop:#415c78; --meme-title:#242930; --meme-toolbar:#edf1f6; --meme-border:#242930; --meme-radius:3px; }
.meme-study[data-era="xp"] { --task-bg:linear-gradient(#4388df,#2458a7 22%,#2458a7 88%,#183f85); --task-edge:#7dacff; --task-ink:#fff; --task-border:#153f87; --task-button:#3979c8; --task-active:#1b4b92; --task-active-shadow:inset 1px 1px 3px #11326a; --task-shadow:inset 0 1px #8cb7ff80; --task-radius:3px; --tray-bg:#2086d9; --tray-border:#54aeed; }
.meme-study[data-era="aero"] { --task-bg:linear-gradient(#516b8770,#162942dc 48%,#101d30ed); --task-edge:#b6d3ec88; --task-ink:#eff6ff; --task-border:#95bad17a; --task-button:#ffffff15; --task-active:linear-gradient(#a6c5db55,#c6e5ff22); --task-active-shadow:inset 0 0 0 1px #ffffff21; --task-shadow:none; --task-radius:4px; --tray-bg:transparent; --tray-border:transparent; }
.meme-study[data-era="modern"] { --task-bg:#171b21; --task-edge:#242b34; --task-ink:#f2f6fb; --task-border:transparent; --task-button:transparent; --task-active:#ffffff16; --task-active-shadow:inset 0 -2px #72b8ec; --task-shadow:none; --task-radius:0; --tray-bg:transparent; --tray-border:transparent; }
.meme-study[data-era="xp"] #meme-start img { width:88px; height:30px; }
.meme-study[data-era="aero"] #meme-start { width:46px; justify-content:center; }
.meme-study[data-era="aero"] #meme-start img { width:34px; height:34px; object-fit:contain; }
.meme-study[data-era="modern"] #meme-start { width:40px; justify-content:center; }
.meme-study[data-era="modern"] #meme-start img { width:19px; height:19px; object-fit:contain; }
.meme-study[data-era="modern"] .meme-taskbar button { font-family:"Segoe UI",sans-serif; }
.meme-study[data-era="modern"] .meme-start-menu { background:#222933; border:1px solid #4b5562; }
.meme-study[data-era="modern"] .meme-start-menu > * { color:#f2f6fb; }
.meme-study[data-era="aero"] .meme-start-menu { border-color:#7995ae; }
.meme-study[data-era="xp"] .meme-start-menu { border-color:#3d79c7; }
.meme-window { min-width:0; min-height:0; display:flex; flex-direction:column; border:1px solid var(--meme-border); border-radius:var(--meme-radius); overflow:hidden; box-shadow:0 9px 22px #1d293526; background:#fffaf0; }
.meme-browser-bar { min-height:32px; display:flex; align-items:center; gap:8px; padding:5px 9px; background:var(--meme-title); color:#fff; font:600 10px/1.3 Tahoma,"Segoe UI",sans-serif; text-shadow:0 1px 1px #13275080; }
.meme-browser-bar > img { width:16px; height:16px; object-fit:contain; }
#meme-minimize { margin-left:auto; border:1px solid #ffffff66; color:white; background:#ffffff15; width:36px; height:26px; flex:none; }
.meme-browser-menu { display:flex; align-items:center; background:var(--meme-toolbar); padding:0 7px; border-bottom:1px solid #0001; }
.meme-browser-menu > * { border:0; background:none; padding:0 10px; display:flex; align-items:center; min-height:32px; color:#30302a; font:11px Tahoma,sans-serif; }
.meme-browser-menu > :hover { background:#ffffff70; }
.meme-browser-menu > a { margin-left:auto; }
#meme-browser-title { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.meme-window-decoration { flex:none; margin-left:auto; font-size:14px; letter-spacing:3px; opacity:.8; }
.meme-browser-address { display:flex; align-items:center; gap:9px; padding:6px 8px; background:var(--meme-toolbar); border-bottom:1px solid #0002; color:#535c65; font:10px/1.3 Tahoma,"Segoe UI",sans-serif; }
.meme-browser-address > span:last-child { flex:1; min-width:0; background:#fff; border:1px solid #a4abb2; padding:4px 7px; color:#24282c; }
.meme-play { position:relative; flex:1; min-height:0; overflow:auto; padding:18px 24px; background:#fffaf2; scrollbar-width:thin; scrollbar-color:#aab4ac #f0eee8; }
.meme-game-heading { margin-bottom:8px; }
.meme-game-heading h3 { margin:0 0 5px; font-size:25px; letter-spacing:-.04em; line-height:1.1; font-weight:800; }
.meme-game-heading p { color:#766b60; font-size:12px; }
.meme-browser-bar,.meme-browser-menu,.meme-browser-address,.meme-browser-status { flex:none; }
.meme-run-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.meme-run-header > p { font-size:10px; color:#756b60; font-weight:800; letter-spacing:.045em; }
.meme-run-header dl { display:flex; gap:20px; margin:0; }
.meme-run-header dt { color:#756b60; font-size:9px; text-transform:uppercase; font-weight:750; }
.meme-run-header dd { font-size:19px; font-weight:800; letter-spacing:-.04em; line-height:1.2; margin:0; font-variant-numeric:tabular-nums; }
.meme-picture { height:160px; padding:5px; background:#253b3b; border-radius:5px; }
.meme-picture img { display:block; width:100%; height:100%; object-fit:contain; background:#111; }
.meme-prompt { margin:10px 0; }
.meme-prompt > p { color:#bd4639; text-transform:uppercase; font-size:9px; letter-spacing:.07em; font-weight:800; margin-bottom:4px; }
.meme-prompt h4 { font-size:27px; font-weight:800; letter-spacing:-.035em; line-height:1.1; margin:0; }
.meme-choices { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.meme-choices button { border:1px solid #cfc7ba; background:#fffaf2; color:#191716; border-radius:5px; min-height:48px; font-size:23px; font-weight:800; letter-spacing:-.025em; }
.meme-choices button:hover:not(:disabled) { background:#effaf7; border-color:#167c80; }
.meme-choices button[data-result="correct"] { border-color:#3b8b59; background:#dff1e6; color:#18492e; }
.meme-choices button[data-result="wrong"] { border-color:#b73c2f; background:#ffe5df; color:#8b231a; }
.meme-result { margin-top:16px; padding:14px 0 14px 13px; border-left:3px solid #f2b84b; }
.meme-result[data-result="correct"] { border-left-color:#3b8b59; }
.meme-result-heading { display:flex; justify-content:space-between; gap:12px; align-items:baseline; margin-bottom:8px; }
.meme-result-heading strong { font-size:22px; line-height:1.1; letter-spacing:-.04em; font-weight:800; }
.meme-result-heading > span { color:#6a6257; font-size:10px; text-align:right; }
.meme-result > p { font-size:12px; line-height:1.5; color:#6a6257; }
#meme-answer-year { color:#191716; }
#meme-note { font-size:11px; margin-top:4px; }
.meme-result > a { display:inline-flex; align-items:center; min-height:44px; font-size:11px; color:#116a6d; text-decoration:underline; text-underline-offset:3px; }
.meme-study[data-state="playing"] .meme-play-actions { display:none; }
.meme-play-actions { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:17px; }
.meme-play-actions button { min-height:44px; border-radius:5px; padding:10px 13px; font-size:12px; font-weight:750; }
.meme-secondary { border:1px solid #d7cfc1; background:#fffaf2; color:#645b50; }
.meme-primary { border:1px solid #116a6d; background:#167c80; color:#fff; margin-left:auto; }
.meme-primary:hover { background:#116a6d; }
.meme-secondary:hover { background:#eee9df; }
.meme-history { border-top:1px solid #dfd7cb; margin-top:18px; padding-top:13px; }
.meme-history-heading { display:flex; justify-content:space-between; gap:12px; color:#776b5b; font-size:9px; letter-spacing:.045em; text-transform:uppercase; font-weight:750; }
.meme-history-heading > span:first-child { color:#bd4639; }
#meme-timeline { list-style:none; padding:0; margin:10px 0 0; display:grid; gap:6px; }
#meme-timeline:empty { display:none; }
#meme-timeline li { display:grid; grid-template-columns:38px 1fr auto; gap:8px; align-items:center; font-size:11px; padding-block:5px; }
#meme-timeline li strong { font-size:12px; font-weight:800; color:#726354; }
#meme-timeline li.is-correct strong { color:#2a6d45; }
#meme-timeline li small { font-size:10px; color:#786d60; }
#meme-history-empty { margin-top:10px; color:#857968; font-size:11px; }
.meme-sample-note { font-size:9px; color:#857968; line-height:1.5; margin-top:14px; }
.meme-browser-status { display:flex; justify-content:space-between; gap:12px; background:var(--meme-toolbar); border-top:1px solid #0002; padding:7px 9px; color:#4d5964; font:9px/1.3 Tahoma,"Segoe UI",sans-serif; }
.meme-run-summary { padding:19px 0 0; }
.meme-run-summary > strong { font-size:35px; font-weight:800; letter-spacing:-.045em; }
.meme-run-summary p { font-size:12px; line-height:1.5; color:#6a6257; margin-top:6px; }
.meme-run-summary a { display:inline-flex; align-items:center; min-height:44px; color:#116a6d; font-size:12px; font-weight:700; }
.meme-study[data-state="finished"] .meme-picture,.meme-study[data-state="finished"] .meme-prompt { display:none; }
@container (min-width:700px) {
  .meme-play { display:grid; grid-template-columns:minmax(0,1fr) 180px; column-gap:24px; align-content:start; }
  .meme-game-heading,.meme-run-header,.meme-picture,.meme-prompt,.meme-choices,.meme-result,.meme-play-actions,.meme-run-summary,.meme-sample-note { grid-column:1; }
  .meme-history { grid-column:2; grid-row:1 / span 9; margin:0; border-top:0; border-left:1px solid #dfd7cb; padding:8px 0 0 18px; }
  .meme-history-heading { flex-direction:column; gap:7px; }
  #meme-timeline li { grid-template-columns:36px 1fr; }
  #meme-timeline li small { grid-column:2; }
}
@container (max-width:550px) {
  .meme-play { padding:14px; }
  .meme-game-heading h3 { font-size:23px; }
  .meme-picture { height:150px; }
  .meme-choices { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .meme-choices button { min-height:48px; font-size:21px; }
  .meme-result-heading { align-items:flex-start; flex-direction:column; gap:5px; }
  #meme-timeline li { grid-template-columns:34px 1fr; }
  #meme-timeline li small { grid-column:2; }
}
@media (max-width:650px) {
  .meme-project-header { padding:4px 3px 16px; }
  .meme-monitor-hardware { padding:13px 13px 0; border-radius:16px 16px 20px 20px; }
  .meme-screen { border-width:4px; border-radius:6px; }
  .meme-study { height:690px; padding:0 6px; grid-template-columns:minmax(0,1fr); grid-template-rows:65px minmax(0,1fr) 40px; gap:0; }
  .meme-desktop-icons { flex-direction:row; padding:2px; gap:2px; overflow-x:auto; overflow-y:hidden; }
  .meme-desktop-icons > * { flex:0 0 50px; min-height:58px!important; }
  .meme-desktop-icons img { width:23px; height:23px; }
  .meme-desktop-icons span { font-size:8px; }
  .meme-browser-menu > * { padding-inline:7px; min-height:38px; font-size:10px; }
  .meme-browser-address > span:first-child { display:none; }
  .meme-clippy { left:auto; right:29px; bottom:0; width:44px; height:40px; justify-content:center; z-index:3; }
  .meme-clippy img { width:19px; height:33px; }
  .meme-clippy span { display:none; }
  .meme-taskbar { grid-row:3; margin:5px -6px 0; padding:2px 4px; gap:5px; }
  .meme-taskbar .meme-task { min-width:0; flex:1; margin-right:44px; }
  .meme-tray { padding:3px; }
  .meme-tray span { display:none; }
  .meme-monitor-chin { padding:0 3px; min-height:56px; }
  .meme-speaker { width:42px; height:8px; top:24px; }
  .meme-monitor-controls { gap:7px; }
  .meme-hardware-key { display:none; }
  .meme-hardware-brand { font-size:8px; }
}

@media (max-width:350px) {
  .meme-game-heading h3 { font-size:20px; }
  .meme-picture { height:130px; }
}

/* Clanker Faker: the replay is an investigation, using the original game artwork. */
.project-card.clanker-investigation { grid-column:1/-1; width:100%; max-width:1120px; justify-self:center; border:1px solid #dbe2e6; }
.clanker-case { padding:27px 28px 23px; background:#eef2f4; color:#172026; }
.clanker-case-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:23px; }
.clanker-eyebrow { color:#63727c; font-size:10px; line-height:1.4; text-transform:uppercase; letter-spacing:.09em; font-weight:750; }
.clanker-case-heading h3 { font-size:clamp(25px,3vw,37px); font-weight:750; letter-spacing:-.045em; line-height:1.1; margin-top:7px; }
.clanker-demo-label { flex:none; color:#667781; font-size:11px; border-left:1px solid #cbd6dc; padding-left:17px; }
.clanker-investigation-grid { display:grid; grid-template-columns:minmax(0,1fr) 265px; gap:23px; align-items:start; }
.clanker-evidence { min-width:0; }
.clanker-arena { position:relative; padding:6px; border-radius:8px; background:#172026; box-shadow:0 1px 2px #14263220; }
.clanker-arena #clanker-board { display:block; width:100%; height:auto; aspect-ratio:1; border-radius:3px; cursor:crosshair; }
.clanker-arena-tag { position:absolute; top:16px; left:16px; pointer-events:none; background:#152128dd; color:#edf3f6; padding:5px 8px; font-size:9px; font-weight:600; letter-spacing:.04em; border:1px solid #ffffff30; border-radius:2px; }
.clanker-transport { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:13px; }
.clanker-icon-control { display:grid; place-items:center; width:44px; height:44px; flex:none; border:0; border-radius:6px; background:#172026; color:#fff; }
.clanker-icon-control:hover { background:#304452; }
.clanker-icon-control svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.clanker-speed { display:flex; align-items:center; gap:2px; padding:3px; background:#fff; border:1px solid #d8e0e5; border-radius:6px; }
.clanker-speed button { min-width:42px; min-height:38px; border:0; border-radius:3px; background:none; color:#53626b; font-size:12px; font-weight:650; }
.clanker-speed button[aria-pressed="true"] { background:#172026; color:white; }
.clanker-transport #clanker-clock { margin-left:auto; color:#53636d; font-size:12px; font-variant-numeric:tabular-nums; }
.clanker-transport #clanker-scrub { width:100%; flex-basis:100%; height:36px; margin:0; accent-color:#2674e8; }
.clanker-help { color:#63727c; font-size:11px; line-height:1.5; margin-top:3px; }
.clanker-inspection { min-width:0; padding:21px 18px 17px; border:1px solid #dbe2e6; border-radius:9px; background:#fff; box-shadow:0 8px 24px #24364406; }
.clanker-inspection-head h4 { font-size:22px; font-weight:700; letter-spacing:-.035em; line-height:1.15; margin:9px 0; }
.clanker-inspection-head > #clanker-feedback { font-size:12px; color:#63727c; line-height:1.55; min-height:56px; }
.clanker-roster { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; margin:16px 0 20px; }
.clanker-roster button { min-height:44px; padding:0; background:#f5f7f8; border:1px solid #dae2e7; border-radius:5px; color:#40545f; font-size:13px; font-weight:650; font-variant-numeric:tabular-nums; }
.clanker-roster button:hover:not(:disabled) { border-color:#2674e8; background:#edf5ff; }
.clanker-roster button[aria-pressed="true"] { background:#fff6e2; border-color:#bf8522; color:#80510a; }
.clanker-roster button:disabled:not([aria-pressed="true"]) { opacity:.4; }
.clanker-log-heading { display:flex; justify-content:space-between; color:#65757f; font-size:9px; text-transform:uppercase; font-weight:700; letter-spacing:.045em; }
.clanker-log-heading > span:last-child { font-weight:400; }
.clanker-stat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin:10px 0 14px; }
.clanker-stat-grid > div { border-top:1px solid #e0e6e9; padding-top:9px; }
.clanker-stat-grid dt { color:#65757f; font-size:9px; line-height:1.4; }
.clanker-stat-grid dd { margin:5px 0 0; font-size:23px; font-weight:650; letter-spacing:-.04em; }
.clanker-events { list-style:none; padding:0; margin:0; max-height:172px; overflow:auto; scrollbar-width:thin; scrollbar-color:#bdcbd5 transparent; }
.clanker-events li + li { border-top:1px solid #e7edf0; }
.clanker-events button { display:flex; align-items:center; gap:8px; width:100%; min-height:44px; padding:8px 2px; border:0; background:transparent; text-align:left; color:#344b58; }
.clanker-events button:hover { background:#edf5ff; }
.clanker-events time { flex:none; padding:4px 5px; border-radius:4px; background:#edf3fb; color:#2463a9; font-size:10px; font-weight:600; font-variant-numeric:tabular-nums; }
.clanker-events button > span { font-size:11px; line-height:1.35; }
.clanker-empty-evidence { min-height:174px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; border-top:1px solid #e3e9ec; }
.clanker-empty-evidence img { width:62px; height:62px; object-fit:contain; opacity:.85; }
.clanker-empty-evidence p { font-size:14px; line-height:1.4; text-align:center; color:#829099; letter-spacing:-.015em; }
.clanker-verdict-actions { display:grid; gap:7px; margin-top:18px; }
.clanker-confirm,.clanker-reset { min-height:46px; width:100%; border:0; border-radius:6px; background:#172026; color:#fff; font-size:12px; font-weight:650; padding:10px; }
.clanker-confirm:disabled { background:#e4e9ec; color:#89969e; }
.clanker-confirm:hover:not(:disabled),.clanker-reset:hover { background:#304452; }
#clanker-full-game { display:flex; align-items:center; justify-content:center; min-height:44px; font-size:11px; color:#2463a9; }
.clanker-case[data-state="correct"] .clanker-inspection-head h4 { color:#147146; }
.clanker-case[data-state="missed"] .clanker-inspection-head h4 { color:#a04138; }
.clanker-case[data-state="correct"] .clanker-roster button[aria-pressed="true"],.clanker-case[data-state="missed"] .clanker-roster button[aria-pressed="true"] { background:#e6f5ed; border-color:#147146; color:#147146; }
.clanker-provenance { margin-top:19px; padding-top:14px; border-top:1px solid #dae2e6; color:#73818b; font-size:10px; line-height:1.5; }
@media (max-width:850px) {
  .clanker-investigation-grid { grid-template-columns:minmax(0,1fr); gap:20px; }
  .clanker-inspection { display:grid; grid-template-columns:1fr 1fr; gap:0 20px; }
  .clanker-inspection-head,.clanker-roster { grid-column:1; }
  .clanker-observations,.clanker-empty-evidence { grid-column:2; grid-row:1 / span 2; }
  .clanker-verdict-actions { grid-column:1/-1; }
  .clanker-roster { grid-template-columns:repeat(6,minmax(0,1fr)); margin-bottom:0; }
  .clanker-empty-evidence { border:0; }
}
@media (max-width:550px) {
  .clanker-case { padding:21px 14px 17px; }
  .clanker-case-heading { gap:12px; align-items:flex-start; margin-bottom:17px; }
  .clanker-case-heading h3 { font-size:28px; max-width:16ch; }
  .clanker-demo-label { font-size:9px; padding-left:10px; max-width:7ch; line-height:1.5; }
  .clanker-inspection { display:block; padding:18px 14px 14px; }
  .clanker-roster { grid-template-columns:repeat(6,minmax(0,1fr)); margin:14px 0 20px; }
  .clanker-empty-evidence { display:none; }
  .clanker-transport { gap:6px; }
  .clanker-speed button { min-width:34px; }
  .clanker-transport #clanker-clock { font-size:10px; }
  .clanker-arena-tag { top:11px; left:11px; font-size:8px; }
  .clanker-inspection-head > #clanker-feedback { min-height:0; }
}
@media (max-width:350px) {
  .clanker-roster { grid-template-columns:repeat(5,minmax(0,1fr)); }
  .clanker-transport #clanker-clock { width:100%; text-align:right; }
}

/* Embreeflix: the original dark cinema palette, one film at a time. */
.cinema-study { background:#0b0d10; color:#f4f1ea; }
.cinema-feature { position:relative; min-height:390px; overflow:hidden; isolation:isolate; }
.cinema-art { position:absolute; top:0; bottom:0; right:0; width:57%; overflow:hidden; }
.cinema-art img { height:100%; width:100%; object-fit:cover; object-position:center 42%; }
.cinema-art::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,#0b0d10 0%,#0b0d1000 47%); pointer-events:none; }
.cinema-copy { position:relative; z-index:1; width:60%; padding:36px 0 27px 30px; min-height:390px; display:flex; flex-direction:column; align-items:flex-start; }
.cinema-eyebrow { color:#c3c8cf; font-size:9px; line-height:1.4; text-transform:uppercase; letter-spacing:.15em; margin-bottom:38px; }
.cinema-eyebrow::before { content:""; display:inline-block; width:17px; height:2px; background:#e5484d; vertical-align:middle; margin-right:9px; }
.cinema-copy h3 { font-size:clamp(33px,3.8vw,54px); max-width:9ch; line-height:.98; letter-spacing:-.055em; font-weight:700; text-wrap:balance; text-shadow:0 2px 18px #0008; }
.cinema-meta { margin-top:20px; color:#c3c8cf; font-size:11px; line-height:1.5; }
.cinema-meta span { color:#67717e; margin-inline:5px; }
.cinema-copy > #flix-info-copy { max-width:23ch; color:#b9bdc3; font-size:13px; line-height:1.5; margin-top:9px; text-shadow:0 1px 8px #000; }
.cinema-index { margin-top:auto; padding-top:25px; font-size:11px; font-variant-numeric:tabular-nums; color:#dddfe3; }
.cinema-index > span { color:#72777f; margin-left:5px; }
.cinema-selector { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; padding:22px 26px 25px; border-top:1px solid #272a30; }
.cinema-selector button { display:flex; align-items:center; gap:10px; min-width:0; padding:10px 0 0; background:none; color:#afb3b9; border:0; border-top:2px solid transparent; text-align:left; transition:color .2s,border-color .2s; }
.cinema-selector button[aria-pressed="true"] { color:#f4f1ea; border-top-color:#e5484d; }
.cinema-selector button:hover { color:white; }
.cinema-selector img { width:28px; height:42px; object-fit:cover; border-radius:1px; opacity:.7; flex:none; }
.cinema-selector button[aria-pressed="true"] img { opacity:1; }
.cinema-selector button > span { font-size:11px; font-weight:550; line-height:1.35; }
.cinema-selector small { display:block; color:#818893; font-weight:400; font-size:9px; margin-top:5px; }
.cinema-selector button:focus-visible { outline-color:#fff; }
.cinema-feature.is-changing .cinema-art { animation:cinema-arrive .38s ease-out both; }
.cinema-feature.is-changing .cinema-copy { animation:cinema-copy-arrive .3s ease-out both; }
@keyframes cinema-arrive { from { opacity:.15; } to { opacity:1; } }
@keyframes cinema-copy-arrive { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:none; } }

@media (min-width:651px) and (max-width:1180px) {
  .field-composition { height:373px; }
  .field-viewfinder { height:281px; }
  .field-collectible { max-width:244px; }
  .cinema-feature,.cinema-copy { min-height:420px; }
  .cinema-copy h3 { font-size:54px; }
}
@media (max-width:650px) {
  .prototype-header { padding:18px 19px; gap:10px; }
  .prototype-identity h2 { font-size:14px; gap:7px; min-height:28px; }
  .prototype-logo,.prototype-logo.bug-identity { width:25px; height:27px; }
  .prototype-logo.flix-identity { width:104px; height:24px; }
  .project-intro strong { font-size:21px; }
  .project-intro > span { font-size:14px; line-height:1.55; }
  .prototype-links { gap:7px; }
  .prototype-links .about-project { font-size:11px; }
  .prototype-links > a { width:36px; }
  .field-study { padding:21px 19px 18px; }
  .field-labels { font-size:8px; letter-spacing:.07em; grid-template-columns:1fr 25px 1fr; }
  .field-composition { height:294px; margin-top:17px; }
  .field-viewfinder { top:22px; height:217px; width:61%; }
  .field-collectible { top:20px; right:0; width:46%; max-width:202px; }
  .field-collectible figcaption { flex-direction:column; gap:3px; font-size:11px; margin-top:10px; padding:5px 7px; background:#f1efe7; position:relative; }
  .field-collectible figcaption span { font-size:16px; }
  .field-camera { left:12px; bottom:12px; gap:6px; flex-direction:column; font-size:10px; }
  .field-shutter { width:48px; height:48px; }
  .field-focus { width:48px; height:48px; left:calc(45% - 24px); top:calc(42% - 24px); }
  .field-species { top:12px; left:12px; font-size:10px; }
  .field-note { font-size:11px; gap:10px; }
  .field-note > span { font-size:9px; }
  .cinema-feature,.cinema-copy { min-height:357px; }
  .cinema-art { width:65%; }
  .cinema-art img { object-position:56% center; }
  .cinema-art::after { background:linear-gradient(90deg,#0b0d10 0%,#0b0d1000 65%); }
  .cinema-copy { width:66%; padding:26px 0 25px 23px; }
  .cinema-eyebrow { font-size:8px; margin-bottom:40px; }
  .cinema-copy h3 { font-size:38px; }
  .cinema-meta { font-size:10px; }
  .cinema-copy > #flix-info-copy { max-width:19ch; font-size:12px; }
  .cinema-selector { padding:17px 20px 20px; gap:13px; }
  .cinema-selector button { flex-direction:column; align-items:flex-start; gap:8px; min-height:68px; }
  .cinema-selector img { display:none; }
  .cinema-selector button > span { font-size:11px; }
  .cinema-selector small { font-size:9px; }
}
@media (max-width:350px) {
  .prototype-header { padding-inline:15px; }
  .prototype-identity h2 { font-size:13px; }
  .prototype-links { gap:4px; }
  .prototype-links .about-project { font-size:10px; }
  .field-study { padding-inline:15px; }
  .field-composition { height:265px; }
  .field-viewfinder { height:200px; }
  .cinema-copy { padding-left:19px; }
  .cinema-copy h3 { font-size:34px; }
}
@media (prefers-reduced-motion:reduce) {
  .prototype-card *, .prototype-card *::before,.prototype-card *::after { animation:none!important; transition:none!important; }
  .field-flash { display:none; }
}
@media print { .prototype-links,.field-camera,.judgment-action button,.cinema-selector { display:none; } }
@media (max-width:650px) {
  .judgment-study { padding:23px 20px 20px; }
  .judgment-study h3 { font-size:32px; }
}
@media (max-width:350px) {
  .judgment-study { padding-inline:16px; }
  .judgment-study h3 { font-size:28px; }
}