/* The Lake from Space, a Research Lab exhibit (prototype). The site's type pair and tokens (src/dipcast/pages/page.css),
   set as a field journal: paper, hairlines, plates with captions, a monospaced log for anything measured. One radius,
   no shadows, no gradients except the paper's own grain. */
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url("../fonts/SourceSans3-latin.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: italic; font-weight: 400 700; font-display: swap;
  src: url("../fonts/SourceSans3-italic-latin.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/SourceSerif4-latin.woff2") format("woff2"); }

:root {
  --font-text: "Source Sans 3", Georgia, serif;
  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --paper: #f3efe4; --paper-2: #ebe5d6; --card: #fbf9f3; --ink: #1b2328; --muted: #555d62; --faint: #6c7174;
  --line: #d8d0bd; --hair: rgba(27, 35, 40, .14); --rule: #b9ae95;
  --deep: #12232a; --deep-2: #1b3138; --deep-ink: #e9e4d6; --deep-muted: #a8b3b0;
  --brand: #0f5a61; --bar: #3d5b5d; --lab: #7a3b1d; --pick: #c2552a; --gap: #b8ad95;
  --radius: 6px; --fs-meta: 13px; --fs-note: 15px; --fs-body: 17px; --fs-head: 21px; --fs-title: 44px;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .2 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (max-width: 760px) { :root { --fs-title: 34px; --fs-head: 19px; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 var(--fs-body)/1.5 var(--font-text); color: var(--ink);
  background: var(--paper) var(--grain); }
a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
button { font: inherit; color: inherit; }
.mono { font-family: var(--font-mono); font-size: .86em; letter-spacing: 0; }
.muted { color: var(--muted); }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 760px) { .wrap { padding: 0 16px; } }

/* ------------------------------------------------------------------ bar */
.top { background: var(--bar); color: #fff; }
.top .wrap { display: flex; align-items: center; gap: 16px; min-height: 52px; flex-wrap: wrap; }
.top a { color: rgba(255, 255, 255, .88); text-decoration: none; font-size: var(--fs-note); font-weight: 600; }
.top a:hover { color: #fff; }
.top .brand { font: 600 19px/1 var(--font-display); color: #fff; margin-right: auto; }
.top .crumb { color: rgba(255, 255, 255, .7); font-size: var(--fs-note); }

/* ------------------------------------------------------------------ frontispiece */
.front { background: var(--deep) var(--grain); color: var(--deep-ink); padding: 48px 0 40px; border-bottom: 1px solid #000; }
.front .wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
@media (max-width: 900px) { .front .wrap { grid-template-columns: 1fr; gap: 28px; } }
.front .kicker { font-size: var(--fs-note); color: var(--deep-muted); margin: 0 0 14px; }
.front h1 { font: 600 var(--fs-title)/1.05 var(--font-display); letter-spacing: -.015em; margin: 0 0 18px; color: #fbf7ec; }
.front .q { font: 600 var(--fs-head)/1.35 var(--font-display); margin: 0 0 18px; color: #fbf7ec; max-width: 34ch; }
.front p { margin: 0 0 12px; max-width: 58ch; }
.front .answer { color: var(--deep-ink); }
.front .status { margin-top: 18px; font-size: var(--fs-note); color: var(--deep-muted); }
.front .status b { color: var(--deep-ink); font-weight: 600; }
.contact { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 16px; }
@media (max-width: 900px) { .contact { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.contact button { display: block; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; color: var(--deep-ink); min-height: 44px; }
.contact .im { display: block; position: relative; aspect-ratio: 1; border: 1px solid rgba(233, 228, 214, .35); overflow: hidden; background: #0b171b; }
.contact img { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; display: block; filter: brightness(1.7) contrast(1.05) saturate(1.1); }
.contact .ring { position: absolute; inset: 12.5%; border: 1px dashed rgba(255, 255, 255, .55); border-radius: 50%; pointer-events: none; }
.contact .cap { display: block; min-height: 3.2em; font-size: 12px; line-height: 1.3; margin-top: 6px; color: var(--deep-muted); }
.contact .cap b { display: block; color: var(--deep-ink); font-weight: 600; font-size: 13px; }
.contact button:hover .im, .contact button[aria-current=true] .im { border-color: #fbf7ec; }
.contact .none { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; color: var(--deep-muted); background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(233,228,214,.08) 6px 7px); }
.contact-note { grid-column: 1 / -1; font-size: 12px; color: var(--deep-muted); margin: 4px 0 0; }

/* ------------------------------------------------------------------ sections */
section.sec { padding: 44px 0 8px; }
.sec-head { display: flex; align-items: baseline; gap: 14px; border-top: 1px solid var(--ink); padding-top: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.sec-head .no { font: 600 var(--fs-note)/1 var(--font-mono); color: var(--muted); }
.sec-head h2 { font: 600 var(--fs-head)/1.25 var(--font-display); margin: 0; }
.sec-head .aside { margin-left: auto; font-size: var(--fs-note); color: var(--muted); }
@media (max-width: 760px) { .sec-head .aside { margin-left: 0; flex-basis: 100%; } }
h3 { font: 600 var(--fs-body)/1.3 var(--font-display); margin: 0 0 6px; }
p { margin: 0 0 12px; }
.note { font-size: var(--fs-note); color: var(--muted); }

/* ------------------------------------------------------------------ lake index + map */
.atlas { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 32px; }
@media (max-width: 900px) { .atlas { grid-template-columns: 1fr; } }
.index { columns: 2; column-gap: 24px; max-height: 520px; overflow: auto; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.index h4 { break-after: avoid; margin: 0; padding: 10px 2px 6px; font: 600 var(--fs-note)/1.2 var(--font-display); color: var(--muted); border-bottom: 1px solid var(--hair); z-index: 1; }
.index button { break-inside: avoid; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; width: 100%; padding: 8px 4px; border: 0; border-bottom: 1px solid var(--hair); background: none; text-align: left; cursor: pointer; min-height: 44px; }
.index button:hover { background: var(--paper-2); }
.index button[aria-current=true] { background: var(--card); box-shadow: inset 3px 0 0 var(--pick); }
.index .nm { font-weight: 600; font-size: var(--fs-note); line-height: 1.25; }
.index .tg { font-size: 12px; color: var(--muted); white-space: nowrap; align-self: center; }
.index .sb { grid-column: 1 / -1; font-size: 12px; color: var(--faint); }
.picker { display: none; }
@media (max-width: 900px) {
  .index { display: none; }
  .picker { display: block; }
  .picker label { display: block; font-size: var(--fs-note); font-weight: 600; margin-bottom: 6px; }
  .picker select { width: 100%; min-height: 44px; font: inherit; padding: 8px 10px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--card); color: var(--ink); }
}
.map-key { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-top: 8px; }
.map-key i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: -1px; margin-right: 5px; border: 1.5px solid var(--ink); }
.map-key i.pilot { background: var(--brand); border-color: var(--brand); }
.map-key i.hist { background: var(--card); }
.map-key i.small { background: none; border-style: dashed; border-color: var(--faint); }

/* ------------------------------------------------------------------ the lake heading */
.lakehead { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; align-items: end; padding: 28px 0 4px; }
.lakehead h2 { font: 600 34px/1.1 var(--font-display); margin: 0; letter-spacing: -.01em; }
@media (max-width: 760px) { .lakehead { grid-template-columns: 1fr; } .lakehead h2 { font-size: 28px; } }
.lakehead .meta { font-size: var(--fs-note); color: var(--muted); }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 16px 0 0; }
@media (max-width: 760px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.facts div { padding: 10px 12px 10px 0; }
.facts div + div { border-left: 1px solid var(--hair); padding-left: 12px; }
@media (max-width: 760px) { .facts div:nth-child(3) { border-left: 0; padding-left: 0; } .facts div:nth-child(n+3) { border-top: 1px solid var(--hair); } }
.facts dt { font-size: 12px; color: var(--muted); }
.facts dd { margin: 2px 0 0; font: 600 var(--fs-body)/1.3 var(--font-text); }
.facts dd small { display: block; font-weight: 400; font-size: 12px; color: var(--muted); }

/* ------------------------------------------------------------------ plate */
.plate-row { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 32px; align-items: start; }
@media (max-width: 900px) { .plate-row { grid-template-columns: 1fr; gap: 20px; } }
.plates { display: grid; grid-template-columns: minmax(0, 540px); gap: 16px; }
.plates.two { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .plates { grid-template-columns: 1fr; } .plates.two { grid-template-columns: 1fr 1fr; gap: 10px; } }
figure.plate { margin: 0; }
.frame { position: relative; aspect-ratio: 1; background: #0b171b; border: 1px solid var(--ink); }
.frame::before, .frame::after { content: ""; position: absolute; width: 14px; height: 14px; border: 1px solid var(--ink); pointer-events: none; }
.frame::before { top: -7px; left: -7px; border-right: 0; border-bottom: 0; }
.frame::after { bottom: -7px; right: -7px; border-left: 0; border-top: 0; }
.frame img { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; display: block; }
.frame img.tci.bright { filter: brightness(1.75) contrast(1.05) saturate(1.1); }
.frame img.layer { display: none; }
.frame[data-layer=index] img.index, .frame[data-layer=mask] img.mask { display: block; }
.frame[data-layer=index] img.tci { filter: brightness(1.2) saturate(0) contrast(.9); opacity: .65; }
.frame .ring { position: absolute; inset: 12.5%; border: 1.5px dashed rgba(255, 255, 255, .8); border-radius: 50%; pointer-events: none; }
.frame .pin { position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border: 1.5px solid #fff; border-radius: 50%; pointer-events: none; }
.frame .scale { position: absolute; left: 10px; bottom: 10px; color: #fff; font: 11px/1 var(--font-mono); pointer-events: none; }
.frame .scale i { display: block; width: calc(100% / 8); min-width: 0; height: 5px; border: 1.5px solid #fff; border-top: 0; margin-bottom: 4px; }
.frame .scale { width: 100%; }
.frame .north { position: absolute; right: 10px; top: 10px; color: #fff; font: 600 11px/1 var(--font-mono); text-align: center; pointer-events: none; }
.frame .north svg { display: block; margin: 0 auto 2px; }
.frame.empty { background: var(--paper-2) repeating-linear-gradient(135deg, transparent 0 9px, rgba(27,35,40,.07) 9px 10px); display: grid; place-items: center; }
.frame.empty .msg { max-width: 30ch; text-align: center; font-size: var(--fs-note); color: var(--muted); padding: 16px; }
.frame.empty .msg b { display: block; color: var(--ink); font: 600 var(--fs-body)/1.3 var(--font-display); margin-bottom: 6px; }
figcaption { margin-top: 12px; font-size: var(--fs-note); }
figcaption .plate-no { font: 600 var(--fs-note)/1.3 var(--font-display); }
figcaption .log { display: block; margin-top: 4px; font: 12px/1.55 var(--font-mono); color: var(--muted); }

.seg { display: inline-flex; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; margin: 0 8px 8px 0; }
.seg button { border: 0; background: var(--card); padding: 8px 12px; min-height: 40px; cursor: pointer; font-size: var(--fs-note); }
.seg button + button { border-left: 1px solid var(--rule); }
.seg button[aria-pressed=true] { background: var(--ink); color: var(--paper); }
.seg button:disabled { color: var(--faint); cursor: not-allowed; background: var(--paper-2); }
.controls { margin: 14px 0 4px; }
.controls label.chk { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-note); min-height: 40px; margin-right: 12px; }
.legend { display: flex; align-items: center; gap: 8px; font: 12px/1 var(--font-mono); color: var(--muted); margin-top: 8px; flex-wrap: wrap; }
.legend .ramp { width: 160px; height: 10px; border: 1px solid var(--hair); }
.legend .cloud { display: inline-block; width: 12px; height: 10px; background: rgb(128, 128, 128); border: 1px solid var(--hair); }

.reading { border-top: 1px solid var(--line); }
.reading .big { font: 600 40px/1 var(--font-display); letter-spacing: -.01em; margin: 14px 0 4px; }
.reading .big small { font: 400 var(--fs-note)/1 var(--font-text); color: var(--muted); letter-spacing: 0; margin-left: 6px; }
.reading .when { font: 600 var(--fs-body)/1.3 var(--font-display); }
.reading dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; font-size: var(--fs-note); margin: 14px 0; }
.reading dt { color: var(--muted); }
.reading dd { margin: 0; }
.tagline { display: inline-block; font-size: 12px; border: 1px solid var(--rule); border-radius: var(--radius); padding: 2px 7px; margin-right: 6px; color: var(--muted); background: var(--card); }
.tagline.exp { border-color: #c79a43; color: #6b4b10; background: #fbf3df; }
.claim { font-size: var(--fs-note); color: var(--muted); border-left: 2px solid var(--rule); padding-left: 12px; margin: 14px 0; }

.stepper { display: flex; gap: 8px; align-items: center; margin: 4px 0 12px; flex-wrap: wrap; }
.stepper button { border: 1px solid var(--rule); background: var(--card); border-radius: var(--radius); min-height: 40px; padding: 6px 12px; cursor: pointer; font-size: var(--fs-note); }
.stepper button:disabled { color: var(--faint); cursor: not-allowed; }
.stepper .pos { font-size: 12px; color: var(--muted); }

/* ------------------------------------------------------------------ record */
.years { width: 100%; margin-bottom: 18px; }
.yr { display: grid; grid-template-columns: 56px minmax(0, 1fr) 150px; gap: 12px; align-items: center; width: 100%; border: 0; background: none; padding: 3px 0; text-align: left; cursor: pointer; min-height: 32px; }
@media (max-width: 760px) { .yr { grid-template-columns: 44px minmax(0, 1fr); } .yr .yc { display: none; } }
.yr .yl { font: 600 var(--fs-note)/1 var(--font-mono); }
.yr .yc { font-size: 12px; color: var(--muted); }
.yr .ys { position: relative; display: block; }
.yr svg { display: block; width: 100%; height: 22px; }
.yr .yr-why { position: absolute; left: 8px; top: 3px; font-size: 11px; color: var(--faint); white-space: nowrap; overflow: hidden; max-width: calc(100% - 12px); }
.yr[aria-pressed=true] .yl { color: var(--pick); }
.yr[aria-pressed=true] svg .bg { fill: var(--card); stroke: var(--pick); }
.yr:hover svg .bg { fill: var(--card); }
.yr:disabled { cursor: default; }
.chart { width: 100%; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart .axis text, .chart text { font: 11px var(--font-text); fill: var(--muted); }
.chart .lane-label { font: 600 12px var(--font-text); fill: var(--ink); }
.chart .dot { cursor: pointer; }
.chart .dot:focus { outline: none; }
.chart .dot:focus-visible circle, .chart .dot:hover circle { stroke: var(--pick); stroke-width: 2.5; }
.chart-note { font-size: 12px; color: var(--muted); display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
.chart-note .sw { display: inline-block; width: 18px; height: 10px; vertical-align: -1px; margin-right: 5px; border: 1px solid var(--hair); }
.chart-note .sw.gap { background: repeating-linear-gradient(135deg, transparent 0 3px, var(--gap) 3px 4px); }
.chart-note .sw.off { background: var(--paper-2); }
details.table { margin: 16px 0; font-size: var(--fs-note); }
details.table summary { cursor: pointer; min-height: 40px; display: flex; align-items: center; color: var(--brand); font-weight: 600; }
details.table table { border-collapse: collapse; width: 100%; font-size: 13px; }
details.table th, details.table td { text-align: left; padding: 5px 8px 5px 0; border-bottom: 1px solid var(--hair); }
details.table th { font-weight: 600; color: var(--muted); }
details.table .scroll { max-height: 340px; overflow: auto; }

/* ------------------------------------------------------------------ findings */
.notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
@media (max-width: 900px) { .notes { grid-template-columns: 1fr; } }
.fnote { border-top: 1px solid var(--line); padding: 16px 0 22px; }
.fnote .tag { font: 12px/1 var(--font-mono); color: var(--muted); margin-bottom: 8px; display: block; }
.fnote .fig { font: 600 34px/1.05 var(--font-display); margin: 6px 0 6px; }
.fnote .fig small { font: 400 var(--fs-note)/1.3 var(--font-text); color: var(--muted); }
.fnote p { font-size: var(--fs-note); }
.fnote svg { display: block; width: 100%; height: auto; margin: 6px 0 8px; }
.fnote svg text { font: 11px var(--font-text); fill: var(--muted); }
.wide { grid-column: 1 / -1; }
.lim { columns: 2; column-gap: 40px; font-size: var(--fs-note); padding-left: 18px; }
@media (max-width: 760px) { .lim { columns: 1; } }
.lim li { margin-bottom: 8px; break-inside: avoid; }
.qs { counter-reset: q; list-style: none; padding: 0; margin: 0; }
.qs li { border-top: 1px solid var(--hair); padding: 14px 0; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 0 12px; font-size: var(--fs-note); }
.qs li::before { counter-increment: q; content: "Q" counter(q); font: 600 var(--fs-note)/1.4 var(--font-mono); color: var(--muted); }
.qs h3 { font-size: var(--fs-body); }
.qs .k { color: var(--muted); }
footer.foot { margin-top: 48px; padding: 24px 0 40px; border-top: 1px solid var(--ink); font-size: 13px; color: var(--muted); }
footer.foot p { max-width: 90ch; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------------ shared: drawn map (lab.js drawMap) */
:root { --sea: #dfe3df; --land: #f1ecdf; }
.drawn-map svg { display: block; width: 100%; height: auto; border: 1px solid var(--rule); border-radius: var(--radius); }
.drawn-map .grat { stroke: rgba(27, 35, 40, .12); stroke-width: 1; stroke-dasharray: 2 3; }
.drawn-map .land { fill: var(--land); stroke: var(--ink); stroke-width: .8; stroke-linejoin: round; }
.drawn-map .land.other { fill: #e9e4d6; stroke: rgba(27, 35, 40, .45); }
.drawn-map .gl { font: 10px var(--font-mono); fill: var(--faint); }
.drawn-map .pt { cursor: pointer; }
.drawn-map .pt:focus { outline: none; }
.drawn-map .pt:focus-visible .pt-ring, .drawn-map .pt:hover circle:not([fill=transparent]) { stroke: var(--pick); stroke-width: 2; }
.drawn-map .pt-pilot { fill: var(--brand); stroke: var(--paper); stroke-width: 1.5; }
.drawn-map .pt-hist { fill: var(--card); stroke: var(--ink); stroke-width: 1.2; }
.drawn-map .pt-small { fill: none; stroke: var(--faint); stroke-width: 1.2; stroke-dasharray: 2 1.5; }
.drawn-map .pt-ring { fill: none; stroke: var(--pick); stroke-width: 2; }
.drawn-map .pt-label { font: 600 13px var(--font-display); fill: var(--ink); paint-order: stroke; stroke: var(--land); stroke-width: 4px; stroke-linejoin: round; }

/* ------------------------------------------------------------------ shared: a wide satellite picture with its windows */
.wide { position: relative; margin: 0; }
.wide .im { position: relative; overflow: hidden; border: 1px solid #000; background: #0b171b; }
.wide img { display: block; width: 100%; height: 100%; object-fit: cover; filter: brightness(1.6) contrast(1.06) saturate(1.08); }
.wide .box { position: absolute; left: 40%; width: 20%; aspect-ratio: 1; top: 50%; transform: translateY(-50%); border: 1.5px solid rgba(255, 255, 255, .9); pointer-events: none; }
.wide .box::after { content: ""; position: absolute; inset: 12.5%; border: 1px dashed rgba(255, 255, 255, .85); border-radius: 50%; }
.wide .bar { position: absolute; left: 12px; bottom: 12px; color: #fff; font: 11px/1 var(--font-mono); text-shadow: 0 0 3px rgba(0, 0, 0, .6); }
.wide .bar i { display: block; width: 0; height: 5px; border: 1.5px solid #fff; border-top: 0; margin-bottom: 4px; }
.wide figcaption { font-size: 12px; margin-top: 8px; }
.front .wide figcaption { color: var(--deep-muted); }
.front .wide figcaption b { color: var(--deep-ink); font-weight: 600; }

/* ------------------------------------------------------------------ shared: flipbook */
.flip { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 8px; }
@media (max-width: 760px) { .flip { grid-template-columns: 1fr; } }
.flip .frame.cloud { background: #d9dcd9 repeating-linear-gradient(135deg, transparent 0 7px, rgba(255, 255, 255, .55) 7px 8px); display: grid; place-items: center; }
.flip .frame.cloud .msg { text-align: center; font-size: var(--fs-note); color: var(--ink); padding: 16px; }
.flip .frame.cloud .msg b { display: block; font: 600 22px/1.2 var(--font-display); margin-bottom: 4px; }
.flip .stamp { position: absolute; left: 10px; top: 10px; color: #fff; font: 600 15px/1 var(--font-mono); text-shadow: 0 0 4px rgba(0, 0, 0, .7); pointer-events: none; }
.flip .frame.cloud .stamp { color: var(--ink); text-shadow: none; }
.flip .ctl { display: flex; gap: 10px; align-items: center; margin: 12px 0 8px; }
.flip .ctl button { border: 1px solid var(--rule); background: var(--card); border-radius: var(--radius); min-height: 40px; padding: 6px 14px; cursor: pointer; font-size: var(--fs-note); }
.flip .ctl input[type=range] { flex: 1; accent-color: var(--brand); min-height: 40px; }
.strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 4px; }
.strip button { position: relative; aspect-ratio: 1; padding: 0; border: 1px solid var(--rule); background: #d9dcd9 repeating-linear-gradient(135deg, transparent 0 4px, rgba(255, 255, 255, .6) 4px 5px); cursor: pointer; overflow: hidden; }
.strip button img { width: 100%; height: 100%; image-rendering: pixelated; display: block; filter: brightness(1.7); }
.strip button[aria-current=true] { outline: 2px solid var(--pick); outline-offset: 1px; }
.strip button span { position: absolute; left: 2px; bottom: 1px; font: 9px/1 var(--font-mono); color: var(--ink); }
.strip button img + span { color: #fff; text-shadow: 0 0 2px #000; }