/* The journal has become an arcade. Paper, ink, too much stimulus. */
.hero__art { transform: perspective(1100px) rotateX(var(--tilt-y,0deg)) rotateY(var(--tilt-x,0deg)); transition: transform .25s ease-out, box-shadow .25s; box-shadow: 8px 8px 0 #d8cfca; }
.hero-toy { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.1rem 1.25rem 1.45rem; position:relative; margin-top:auto; border-top:1px solid #beb0a9; background:#eee4df; }
.toy-label { font:.75rem var(--font-ui); text-transform:uppercase; color:#755456; }
.toy-status { font: .9rem/1.5 var(--font-body); margin:.4rem 0 0; }
.toy-feed { flex:none; border:1px solid var(--ink); background:var(--brain); padding:.7rem 1rem; color:var(--ink); font:.8rem var(--font-ui); min-height:44px; cursor:pointer; box-shadow:2px 2px var(--ink); }
.toy-feed span { margin-left:1rem; }
.hero-toy__meter { position:absolute; height:4px; bottom:0; inset-inline:0; background:#c8bbb6; overflow:hidden; }
.hero-toy__meter span { display:block; height:100%; width:var(--fed,0%); background:var(--cavity-mid); transition:width .3s; }
.hero__art.is-fed .hero__brain { animation-duration:.12s !important; }
.hero__art.is-fed { box-shadow:10px 10px 0 var(--brain); }
.world-drool { position:fixed; inset:0; pointer-events:none; z-index:80; overflow:hidden; }
.world-drop { position:absolute; top:var(--start-y,-30px); left:var(--drop-x,0); width:var(--drop-size,18px); height:auto; animation:page-drip var(--drop-time,5s) cubic-bezier(.48,.08,.72,.6) forwards; transform-origin:top; }
.world-drop .drips__drop-body { fill:#a7dce1; stroke:#141010; }
.world-drop .drips__wet { stroke:#fff; fill:none; }
@keyframes page-drip { 0%{transform:translateY(0) scaleY(.8);opacity:0} 5%{opacity:.92} 20%{transform:translateY(3vh) scaleY(1.35)} 95%{opacity:.92} 100%{transform:translateY(110vh) scaleY(1.8);opacity:0} }
.arcade { position:relative; overflow:clip; background:#c4e5e5; border-bottom:1px solid var(--ink); }
.arcade-heading,.market-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; margin-bottom:2.5rem; }
.arcade-heading h2,.market-heading h2 { font:clamp(5rem,12vw,11rem)/.88 var(--font-display); text-transform:uppercase; letter-spacing:-.035em; margin:0; }
.arcade-heading h2 span { color:var(--cavity-mid); }
.arcade-heading>p,.market-heading>p { font:1rem/1.65 var(--font-body); margin:0 0 .25rem; }
.arcade-machine { border:1px solid var(--ink); box-shadow:8px 9px 0 #96b8b9; background:#e7eeea; position:relative; }
.arcade-toolbar { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.5rem 1.25rem; background:var(--ink); color:#e8f4ef; font:.75rem var(--font-ui); }
.arcade-toolbar>span { display:flex; align-items:center; gap:.65rem; }
.arcade-toolbar i { display:inline-block; width:7px; height:7px; background:var(--brain); border-radius:50%; }
.arcade-toolbar em { color:#9aafab; font-style:normal; }
.arcade-toolbar>div { display:flex; gap:.75rem; }
.arcade-toolbar button { border:1px solid #647472; background:transparent; color:inherit; padding:.55rem .75rem; min-height:42px; font:inherit; cursor:pointer; }
.arcade-toolbar button:disabled { opacity:.4; cursor:default; }
.arcade-toolbar button[aria-pressed=true] { color:var(--brain); border-color:var(--brain); }
.game-stage { position:relative; height:clamp(420px,65svh,600px); overflow:hidden; touch-action:pan-y; isolation:isolate; }
.is-gaming .fxp { visibility:hidden; }
.game-stage[data-phase=running] { touch-action:none; }
.game-stage:focus-visible { outline:3px solid var(--cavity-mid); outline-offset:4px; }
#runner-canvas { display:block; width:100%; height:100%; }
.game-hud { position:absolute; inset:24px 28px auto; display:flex; justify-content:space-between; gap:1rem; pointer-events:none; color:var(--ink); }
.game-hud>div { display:flex; flex-direction:column; gap:.4rem; }
.game-hud>div:last-child { text-align:right; }
.game-hud span { font:.7rem var(--font-ui); text-transform:uppercase; letter-spacing:.06em; }
.game-hud b { font:2.6rem/1 var(--font-display); font-variant-numeric:tabular-nums; }
.game-hud .game-focus { align-items:center; }
.game-focus>div { width:120px; height:6px; background:#bfbdaf; margin-top:.25rem; }
.game-focus i { display:block; width:100%; height:100%; background:var(--cavity-mid); transition:width .2s; }
.game-overlay { position:absolute; inset:0; display:flex; align-items:flex-start; justify-content:center; padding:65px 7%; flex-direction:column; background:linear-gradient(90deg,#e8eee9 5%,#e8eee9ed 33%,#e8eee900 77%); }
.game-kicker { font:.7rem var(--font-ui); text-transform:uppercase; margin:0 0 1.6rem; }
.game-overlay h3 { font:clamp(4.8rem,8vw,7.8rem)/.89 var(--font-display); letter-spacing:-.035em; text-transform:uppercase; margin:0; }
.game-overlay h3 span { color:var(--cavity-mid); }
.game-message { font:.9rem/1.6 var(--font-body); margin:1.5rem 0; }
.game-best { font:.75rem var(--font-ui); margin:1.2rem 0 0; }
.game-best b { font-weight:400; color:var(--cavity-mid); }
.game-stage:not([data-phase=running]) .game-hud { opacity:0; }
.game-stage[data-phase=running] .game-overlay { display:none; }
.game-stage[data-phase=paused] .game-overlay,.game-stage[data-phase=over] .game-overlay { background:linear-gradient(90deg,#e8eee9f5,#e8eee9d4 70%,#e8eee9a0); }
.game-callout { position:absolute; top:100px; inset-inline:0; text-align:center; font:1.6rem var(--font-display); color:var(--cavity-mid); pointer-events:none; }
.game-touch { position:absolute; bottom:18px; inset-inline:18px; display:flex; justify-content:center; gap:10px; }
.game-touch button { border:1px solid #14101070; background:#f6f2ecdc; color:var(--ink); width:58px; min-height:48px; font:1.1rem var(--font-ui); cursor:pointer; -webkit-user-select:none; user-select:none; touch-action:none; }
.game-touch button[data-action=jump] { width:116px; font-size:.8rem; }
.game-stage:not([data-phase=running]) .game-touch { display:none; }
@media(hover:hover) and (pointer:fine) { .game-touch { opacity:0; transition:opacity .2s; } .game-stage:hover .game-touch,.game-stage:focus-within .game-touch { opacity:1; } }
.arcade-bottom { padding:1rem 1.25rem; border-top:1px solid #14101050; display:flex; align-items:center; justify-content:space-between; gap:1rem; font:.7rem/1.7 var(--font-ui); }
.arcade-bottom p { margin:0; }
.arcade-bottom kbd { display:inline-block; font:inherit; border:1px solid #9aa4a0; padding:0 .3rem; margin-right:.2rem; background:#f6f2ec; }
.arcade-bottom>span { color:#536461; }
.game-swipe { display:none; }
.arcade-after { display:flex; justify-content:space-between; gap:1.5rem; align-items:center; padding-top:1.5rem; font:.75rem/1.6 var(--font-ui); }
.arcade-after p { margin:0; }
.arcade-after a { color:var(--cavity-mid); min-height:44px; display:flex; align-items:center; }
.arcade-goo { position:absolute; right:-5%; top:-2px; width:35%; height:auto; opacity:.85; pointer-events:none; transform-origin:top; animation:goo-breathe 7s ease-in-out infinite alternate; }
@keyframes goo-breathe { to{transform:scaleY(1.12)} }
.spec__screen .plate-no a { color:var(--cavity-mid); }
.field-scene { overflow:hidden; }
.field-media { position:relative; overflow:hidden; }
.field-media>img { display:block; width:100%; height:auto; }
.field-media>.field-motion { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .65s; pointer-events:none; }
.field-scene.is-film .field-media>.field-motion { opacity:1; }
.field-film { position:absolute; z-index:2; bottom:66px; left:4.5%; min-height:44px; padding:.55rem .9rem; border:1px solid var(--ink); font:.75rem var(--font-ui); color:var(--ink); background:#fff; cursor:pointer; }
.field-film:hover { background:var(--brain); }
.pairing { background:#191a19; color:#eff0df; }
.pairing>.wrap { display:block; }
.pairing .eyebrow { color:#a9c9c5; }
.pairing .market-heading h2 { font-size:clamp(4.5rem,9vw,8.5rem); margin-bottom:0; }
.market-heading h2 span { color:#b0dfe0; }
.market-heading>p { color:#9aa6a0; }
.market-terminal { border:1px solid #56635a; background:#202722; }
.market-top,.market-bottom { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.8rem 1.3rem; font:.75rem/1.6 var(--font-ui); }
.market-top { border-bottom:1px solid #526056; }
.market-top>span { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; }
.market-top b { font:inherit; color:#a1bdb2; }
.market-led { display:inline-block; width:7px; height:7px; border-radius:50%; background:#9eaa9f; }
[data-state=fresh] .market-led { background:#b0e5bb; box-shadow:0 0 9px #b0e5bb50; }
[data-state=stale] .market-led,[data-state=unavailable] .market-led { background:#f0ba75; }
.market-refresh,.market-chart-top button { color:#dfeadd; border:1px solid #607168; background:transparent; padding:.5rem .75rem; font:.75rem var(--font-ui); min-height:44px; cursor:pointer; }
.market-refresh:disabled { opacity:.5; cursor:wait; }
.market-body { display:grid; grid-template-columns:.9fr 1.1fr; }
.market-quote { padding:2.3rem; border-right:1px solid #526056; min-width:0; }
.market-label { display:block; font:.75rem var(--font-ui); text-transform:uppercase; letter-spacing:.08em; color:#b4c3b8; }
.market-price { display:block; font:clamp(2.4rem,4.3vw,4.4rem)/1.1 var(--font-display); color:#bce9e5; margin:1rem 0 .8rem; letter-spacing:.01em; overflow-wrap:anywhere; }
.market-change { margin:0; font:.8rem var(--font-ui); color:#a5b9ad; }
.market-change[data-direction=up] { color:#b7e8bd; }
.market-change[data-direction=down] { color:#f3afb8; }
.market-stat-grid { margin-top:2.25rem; display:grid; grid-template-columns:1fr 1fr; gap:1.6rem 1rem; }
.market-stat-grid>div { display:flex; flex-direction:column; gap:.5rem; }
.market-stat-grid span { color:#aabbaf; font:.7rem/1.5 var(--font-ui); }
.market-stat-grid b { font:1.25rem var(--font-ui); font-weight:400; }
.market-chart-panel { padding:1.7rem 1.5rem; min-width:0; display:flex; flex-direction:column; justify-content:space-between; }
.market-chart-top { display:flex; align-items:center; justify-content:space-between; gap:1rem; font:.7rem/1.5 var(--font-ui); color:#b4c3b8; }
.market-chart-top>div { display:flex; flex:none; }
.market-chart-top button+button { border-left:0; }
.market-chart-top button[aria-pressed=true] { background:#bce9e5; color:#191a19; }
.market-chart { min-height:220px; position:relative; padding-top:24px; }
.market-chart svg { display:block; width:100%; height:auto; overflow:visible; }
.market-chart svg:focus-visible { outline:1px solid #bce9e5; outline-offset:3px; }
.chart-grid { stroke:#3c4a40; stroke-width:1; }
.chart-label { fill:#9eb1a4; font:10px var(--font-ui); }
.chart-line { fill:none; stroke:#bce9e5; stroke-width:2.5; stroke-linejoin:round; }
.chart-area { fill:#bce9e510; }
.chart-cursor { stroke:#bce9e5; stroke-width:1; stroke-dasharray:3 4; }
.chart-dot { stroke:#202722; stroke-width:2; fill:#bce9e5; }
.market-chart-empty { position:absolute; inset:40% 10% auto; font:.8rem/1.6 var(--font-ui); text-align:center; color:#c6d7c9; background:#202722ee; padding:1rem; }
.market-chart-value { position:absolute; top:0; left:0; font:.7rem var(--font-ui); color:#bce9e5; pointer-events:none; }
#chart-help { font:.7rem/1.6 var(--font-ui); color:#aabbaf; margin:.5rem 0; }
.market-chart-range { display:flex; justify-content:space-between; gap:1rem; font:.65rem var(--font-ui); color:#aabbaf; }
.market-bottom { border-top:1px solid #526056; }
.market-status { color:#b4c3b8; margin:0; }
[data-state=stale] .market-status,[data-state=unavailable] .market-status { color:#f0ba75; }
.market-source { color:#bce9e5; flex:none; min-height:44px; display:flex; align-items:center; }
.market-provenance { display:flex; flex-wrap:wrap; gap:.4rem 1rem; margin:1rem 0 2rem; color:#a0b2a5; font:.7rem/1.6 var(--font-ui); }
.market-provenance a { color:#bce9e5; }
.market-details { border-top:1px solid #56635a; }
.market-details summary { cursor:pointer; padding:1.3rem 0; display:flex; justify-content:space-between; gap:1rem; font:.9rem var(--font-body); }
.market-details summary span { font:.7rem/1.6 var(--font-ui); color:#a0b2a5; }
.market-details .pairing__box { background:#28312a; border:1px solid #526056; padding:1.5rem 2rem; }
.market-details .pairing__box p { color:#cbd7c9; font:.9rem/1.7 var(--font-body); max-width:80ch; }
.market-details .ca__card { background:#dce8da; color:#191a19; }
.lab-templates__grid { grid-template-columns:repeat(6,minmax(0,1fr)); }
.meme { transition:transform .25s ease, box-shadow .25s; }
@supports(animation-timeline:view()) {
  @media(prefers-reduced-motion:no-preference) {
    .scroll-depth:not(.fx-paused) .memes .meme { animation:archive-arrive linear both; animation-timeline:view(); animation-range:entry 0% entry 100%; transform-origin:center bottom; }
    .scroll-depth:not(.fx-paused) .memes .meme:nth-child(even) { --fan:4deg; }
    .scroll-depth:not(.fx-paused) .memes .meme:nth-child(odd) { --fan:-4deg; }
  }
}
@keyframes archive-arrive { from{opacity:.3;transform:perspective(1000px) rotateX(12deg) rotateZ(var(--fan)) translateY(55px) scale(.94)} to{opacity:1;transform:none} }
@media(hover:hover) and (prefers-reduced-motion:no-preference) { .meme:hover { rotate:y -3deg; translate:0 -7px; } }
.ink-pink { color:var(--cavity-mid); }
@media(min-width:1000px) { .hero__plate { margin-block:38px 24px; } }
@media(max-width:999px) {
  .arcade-heading,.market-heading { gap:1rem; }
  .arcade-heading>p,.market-heading>p { font-size:.85rem; }
  .market-body { grid-template-columns:1fr 1fr; }
  .market-quote { padding:1.6rem; }
  .arcade-bottom>span { display:none; }
  .arcade-goo { width:38%; }
}
@media(max-width:640px) {
  .fxp { display:none; }
  .site-head nav { gap:1rem; }
  .site-head nav .nav-buy { display:none; }
  .hero-toy { padding:1rem .8rem 1.2rem; gap:.6rem; }
  .toy-status { font-size:.8rem; }
  .toy-feed { font-size:.7rem; padding:.65rem .7rem; }
  .toy-feed span { margin-left:.4rem; }
  .toy-label { font-size:.65rem; }
  .arcade-heading,.market-heading { display:block; }
  .arcade-heading h2 { font-size:clamp(4rem,15.4vw,6.8rem); }
  .arcade-heading>p,.market-heading>p { margin:1.3rem 0 0; }
  .arcade-heading>p br,.market-heading>p br { display:none; }
  .arcade-goo { width:45%; opacity:.6; }
  .arcade-machine { box-shadow:4px 5px #96b8b9; }
  .arcade-toolbar { padding:.4rem .7rem; gap:.5rem; font-size:.65rem; }
  .arcade-toolbar em { display:none; }
  .arcade-toolbar>div { gap:.4rem; }
  .arcade-toolbar button { padding:.45rem; font-size:.65rem; }
  .arcade-toolbar i { display:none; }
  .game-stage { height:clamp(380px,65svh,500px); }
  .game-overlay { padding:40px 7%; background:linear-gradient(90deg,#e8eee9f5,#e8eee9b8 65%,#e8eee935); }
  .game-overlay h3 { font-size:4.9rem; }
  .game-kicker { font-size:.62rem; margin-bottom:1.5rem; max-width:24ch; line-height:1.7; }
  .game-message { font-size:.82rem; }
  .game-hud { inset:20px 16px auto; gap:.75rem; }
  .game-hud span { font-size:.6rem; letter-spacing:0; }
  .game-hud b { font-size:2.1rem; }
  .game-focus>div { width:88px; }
  .arcade-bottom { padding:.8rem; font-size:.6rem; }
  .arcade-after { display:block; font-size:.7rem; }
  .arcade-after>a { margin-top:.7rem; }
  .game-swipe { display:inline; }
  .field-media { aspect-ratio:1.25; }
  .field-media>img { height:100%; object-fit:cover; object-position:right; }
  .field-film { bottom:65px; left:5%; font-size:.65rem; padding:.5rem; }
  .pairing .market-heading h2 { font-size:clamp(3.5rem,14vw,5.5rem); }
  .market-body { grid-template-columns:1fr; }
  .market-top { padding:.7rem .9rem; }
  .market-top>span { font-size:.7rem; gap:.4rem; }
  .market-top b { display:none; }
  .market-refresh { padding:.5rem; font-size:.7rem; }
  .market-quote { border-right:0; border-bottom:1px solid #526056; }
  .market-price { font-size:3.7rem; }
  .market-stat-grid { margin-top:1.7rem; }
  .market-chart-panel { padding:1.25rem .9rem; gap:.7rem; }
  .market-chart { min-height:160px; }
  .market-bottom { display:block; padding:.9rem; font-size:.65rem; }
  .market-source { margin-top:.5rem; }
  .market-details summary { align-items:center; }
  .market-details summary span { max-width:16ch; text-align:right; font-size:.65rem; }
  .market-details .pairing__box { padding:1rem; }
  .lab-templates__grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
.fx-paused .arcade-goo,.fx-paused .world-drop { animation-play-state:paused; }
.fx-paused .meme:hover { rotate:none; translate:none; }
.fx-paused .hero__art { transform:none; }
@media(prefers-reduced-motion:reduce) { .arcade-goo,.world-drop { animation:none; } .world-drool { display:none; } .hero__art { transform:none; transition:none; } .field-media>.field-motion { transition:none; } }