Blame for style.css

:root {
  --bg: #060505;
  --ink: #ffb347;
  --gpu: #5ef0ff;
  --fg: #ece6db;
  --dim: #8d857a;
  --line: rgba(236, 230, 219, 0.14);
  --line-strong: rgba(236, 230, 219, 0.32);
  --panel: rgba(10, 9, 8, 0.72);
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --gut: clamp(16px, 2.4vw, 32px);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); overflow: hidden; }
body { font-family: var(--mono); -webkit-font-smoothing: antialiased; }
#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
#gl:active { cursor: grabbing; }
.scrim { position: fixed; z-index: 2; pointer-events: none; }
.scrim.top { left: 0; top: 0; width: min(760px, 100vw); height: 330px; background: radial-gradient(120% 100% at 0 0, rgba(6,5,5,.82), rgba(6,5,5,0) 70%); }
.scrim.bot { left: 0; right: 0; bottom: 0; height: 190px; background: linear-gradient(to top, rgba(6,5,5,.85), rgba(6,5,5,0)); }
.grain {
  position: fixed; inset: -50%; pointer-events: none; opacity: .06; z-index: 1;
  background-image: 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%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(3) infinite;
}
@keyframes grain { 0% { transform: translate(0,0) } 33% { transform: translate(-3%,2%) } 66% { transform: translate(2%,-3%) } }
.mono { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; }
.dim { color: var(--dim); }
.small { font-size: 10.5px; }
a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line-strong); }
a:hover { color: var(--ink); border-color: var(--ink); }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.hud { position: fixed; z-index: 5; }
.tl { top: var(--gut); left: var(--gut); max-width: min(560px, calc(100vw - 2 * var(--gut))); pointer-events: none; }
.tl a, .tl button { pointer-events: auto; }
.kicker { margin-bottom: 14px; }
.kicker .sep { color: var(--line-strong); padding: 0 .4em; }
h1 {
  font-family: var(--serif); font-weight: 400; margin: 0; line-height: .98;
  font-size: clamp(30px, 4.6vw, 64px); letter-spacing: -.01em; text-wrap: balance;
}
h1 em { color: var(--ink); font-style: italic; }
.lede { margin: 16px 0 0; max-width: 430px; font-size: 12.5px; line-height: 1.6; color: #b9b1a5; letter-spacing: .01em; }

.tr { top: var(--gut); right: var(--gut); display: flex; gap: 10px; align-items: center; }
.seg { display: flex; border: 1px solid var(--line-strong); background: var(--panel); backdrop-filter: blur(6px); }
.chip { padding: 8px 13px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); position: relative; }
.chip + .chip { border-left: 1px solid var(--line); }
.chip.on { color: var(--bg); background: var(--ink); }
.chip.gpu.on { background: var(--gpu); }
.chip:not(.on):hover { color: var(--fg); }
.tools { display: flex; gap: 6px; }
.icon {
  width: 33px; height: 33px; display: grid; place-items: center; border: 1px solid var(--line-strong);
  background: var(--panel); font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--fg);
}
.icon:hover { border-color: var(--ink); color: var(--ink); }

.bl { left: var(--gut); bottom: calc(var(--gut) + 74px); display: grid; gap: 5px; }
.readout b { font-weight: 500; color: var(--fg); margin-left: .6em; }

.bottom { left: var(--gut); right: var(--gut); bottom: var(--gut); display: flex; gap: 16px; align-items: center; }
.play {
  flex: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--ink); color: var(--ink);
  display: grid; place-items: center; background: rgba(255, 179, 71, .06);
  box-shadow: 0 0 0 0 rgba(255, 179, 71, .35); animation: pulse 2.6s ease-out infinite;
}
.play.playing { animation: none; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255,179,71,.35) } 80%,100% { box-shadow: 0 0 0 14px rgba(255,179,71,0) } }
.scrub { position: relative; flex: 1; height: 46px; cursor: ew-resize; touch-action: none; user-select: none; }
.track { position: absolute; left: 0; right: 0; top: 22px; height: 1px; background: var(--line-strong); }
.track i { position: absolute; left: 0; top: -1px; height: 3px; width: 0; background: var(--ink); box-shadow: 0 0 12px rgba(255,179,71,.7); }
.ticks { position: absolute; inset: 12px 0 auto 0; height: 21px; }
.ticks i { position: absolute; top: 0; width: 1px; height: 7px; background: var(--line-strong); }
.ticks i.gpu { background: var(--gpu); height: 11px; top: -2px; }
.knob {
  position: absolute; top: 15px; width: 15px; height: 15px; margin-left: -7px; border: 1px solid var(--ink);
  background: var(--bg); transform: rotate(45deg); box-shadow: 0 0 14px rgba(255,179,71,.5);
}
.band { position: absolute; top: 20px; height: 5px; background: rgba(94, 240, 255, .18); border-left: 1px solid var(--gpu); border-right: 1px solid var(--gpu); pointer-events: none; }
.chip .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--gpu); margin-right: 7px; vertical-align: 1px; box-shadow: 0 0 8px var(--gpu); }
.chip.gpu.on .dot { background: var(--bg); box-shadow: none; }
#rGpuRow.live b { color: var(--gpu); }
.ends .short { display: none; }
.ends { position: absolute; left: 0; right: 0; bottom: -2px; display: flex; justify-content: space-between; font-size: 9.5px; }

.credit { position: fixed; z-index: 5; right: var(--gut); bottom: calc(var(--gut) + 74px); font-size: 10px; }

.tip {
  position: fixed; z-index: 6; pointer-events: none; padding: 6px 9px; background: var(--panel);
  border: 1px solid var(--line-strong); font-size: 10.5px; white-space: nowrap; transform: translate(12px, 12px);
}

#loader { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; background: var(--bg); transition: opacity .9s ease; }
#loader.gone { opacity: 0; pointer-events: none; }
.loader-inner { width: min(360px, 80vw); display: grid; gap: 14px; }
.loader-title { font-family: var(--serif); font-size: 34px; font-style: italic; }
.bar { height: 1px; background: var(--line-strong); position: relative; }
.bar i { position: absolute; left: 0; top: -1px; height: 3px; width: 0; background: var(--ink); transition: width .2s; }

.sheet {
  position: fixed; z-index: 10; inset: var(--gut); display: flex; flex-direction: column;
  background: rgba(6, 5, 5, .94); border: 1px solid var(--line-strong); backdrop-filter: blur(10px);
}
.sheet[hidden] { display: none; }
.sheet-head { display: flex; justify-content: space-between; align-items: flex-start; padding: 18px 20px; border-bottom: 1px solid var(--line); gap: 12px; }
.sheet-head h2 { font-family: var(--serif); font-weight: 400; font-size: 34px; margin: 4px 0 0; }
.sheet-tools { display: flex; gap: 10px; align-items: center; }
.seg.small .chip { padding: 7px 10px; font-size: 10.5px; text-transform: none; letter-spacing: .04em; }
.viewer { flex: 1; position: relative; overflow: hidden; cursor: grab; touch-action: none; background: #000; }
.viewer img { position: absolute; left: 0; top: 0; transform-origin: 0 0; user-select: none; max-width: none; image-rendering: auto; }
.viewer.gpu-on img { filter: none; }
.sheet-foot { padding: 12px 20px; border-top: 1px solid var(--line); line-height: 1.7; }
.about { inset: auto var(--gut) var(--gut) auto; width: min(560px, calc(100vw - 2 * var(--gut))); max-height: calc(100vh - 2 * var(--gut)); }
.about-body { padding: 6px 20px 18px; overflow: auto; font-family: var(--mono); font-size: 12px; line-height: 1.7; color: #c9c1b5; }
.about-body b { color: var(--fg); font-weight: 500; }
.about-body code { font-size: 10.5px; color: var(--fg); }

@media (max-width: 720px), (max-height: 480px) {
  .lede { display: none; }
  h1 { font-size: 30px; max-width: 78vw; }
  .tr { top: auto; bottom: calc(var(--gut) + 64px); right: var(--gut); }
  .bl { bottom: calc(var(--gut) + 124px); display: block; }
  .bl > div { display: none; }
  .credit { right: auto; left: var(--gut); top: calc(var(--gut) + 116px); bottom: auto; max-width: none; }
  .ends { font-size: 9px; }
  .ends .long { display: none; }
  .ends .short { display: inline; }
  .chip { padding: 8px 10px; }
}
@media (prefers-reduced-motion: reduce) { .grain { animation: none; } .play { animation: none; } }

/* share-image frame */
body.shot .bottom, body.shot .tr, body.shot .bl, body.shot .lede, body.shot .grain, body.shot .scrim.bot { display: none !important; }
body.shot .credit { bottom: var(--gut); }

/* keyboard and screen-reader access to the scrubber: a native range input, visually hidden */
.scrub-in { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.scrub:focus-within .knob { outline: 2px solid var(--fg); outline-offset: 4px; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.readout .read { margin-top: 6px; justify-self: start; border: 1px solid var(--line-strong); background: var(--panel); color: var(--fg); padding: 7px 11px; }
.readout .read:hover { border-color: var(--ink); color: var(--ink); }
.readout { pointer-events: auto; }

/* close-up and about sheets on phones */
.sheet-head { position: relative; }
.sheet-head > :first-child { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.sheet-head > .icon, .sheet-tools .icon { flex: none; }
.sheet-tools .seg { flex: 0 1 auto; min-width: 0; }
@media (max-width: 720px) {
  .sheet-head { flex-wrap: wrap; }
  .sheet-head > :first-child { flex-basis: 100%; padding-right: 48px; }
  .sheet-tools { flex: 1 1 100%; justify-content: space-between; }
  .sheet-tools .icon, .sheet-head > .icon { position: absolute; top: 14px; right: 14px; }
  .seg.small .chip { white-space: nowrap; }
  .sheet-head h2 { font-size: 28px; }
}

/* touch: 44 px targets */
@media (pointer: coarse) {
  .icon { width: 44px; height: 44px; }
  .tools { gap: 8px; }
  .chip { min-height: 44px; }
  .seg.small .chip { min-height: 40px; }
  .readout .read { min-height: 40px; }
}
@media (pointer: coarse) and (max-width: 360px) {
  .chip { padding-left: 8px; padding-right: 8px; }
}

.credit { text-shadow: 0 0 8px #000, 0 0 2px #000; }

.tr { flex-wrap: wrap; justify-content: flex-end; }
.layer-hint { order: 3; flex-basis: 100%; margin: 6px 2px 0; font-size: 10.5px; line-height: 1.35; color: var(--dim); max-width: 300px; text-align: right; }
.layer-why { order: 4; flex-basis: 100%; max-width: 300px; margin-left: auto; font-size: 10.5px; line-height: 1.35; color: var(--dim); text-align: right; }
.layer-why summary { cursor: pointer; }
.layer-why p { margin: 4px 0 0; }
@media (max-width: 700px) { .layer-hint, .layer-why { display: none; } }
.tear-seg { order: 5; margin-left: auto; margin-top: 6px; }
body.tearing .bottom, body.tearing #readout { opacity: .35; pointer-events: none; }
.load-err { margin-top: 14px; max-width: 340px; line-height: 1.5; color: var(--fg); }
.load-err p { margin: 0 0 10px; }
#loader.failed .bar { opacity: .3; }
.viewer img.cmp { pointer-events: none; }
.swipe-line { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--gpu); box-shadow: 0 0 6px var(--gpu); pointer-events: none; }
.swipe { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; gap: 10px; align-items: center; font-size: 11px; padding: 6px 12px; background: rgba(0,0,0,.6); border: 1px solid var(--line); color: var(--fg); }
.swipe input { width: 180px; }
.scalebar { position: absolute; left: 16px; bottom: 16px; font-size: 10.5px; color: var(--fg); pointer-events: none; text-shadow: 0 0 4px #000; }
.scalebar i { display: block; height: 4px; border: 1px solid var(--fg); border-top: 0; margin-bottom: 4px; }
.img-err { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.layer-why summary { display: block; text-align: right; }
[hidden] { display: none !important; }

/* polish: vignette over the 3D view, under the HUD */
.vignette { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 85% 80% at 55% 52%, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%); }
body.shot .vignette { display: none; }

/* polish: keyboard help */
.help { inset: auto auto var(--gut) var(--gut); width: min(440px, calc(100vw - 2 * var(--gut))); max-height: calc(100vh - 2 * var(--gut)); }
.keys { display: grid; grid-template-columns: auto 1fr; gap: 9px 16px; margin: 0; padding: 16px 20px 6px; overflow: auto; font-size: 11.5px; color: #c9c1b5; }
.keys dt { white-space: nowrap; color: var(--dim); }
.keys dd { margin: 0; }
kbd { display: inline-block; min-width: 20px; padding: 2px 6px; border: 1px solid var(--line-strong); border-bottom-width: 2px; font: inherit; color: var(--fg); text-align: center; }
.help-foot { padding: 4px 20px 16px; margin: 0; }
@media (pointer: coarse) { #btnHelp { display: none; } }

/* polish: phones, keep the layer switch, the read button and the scrubber from overlapping */
@media (max-width: 720px) {
  .tr { left: var(--gut); justify-content: space-between; row-gap: 8px; }
  .tr > .seg[role=tablist] { flex: 1 1 100%; }
  .tr > .seg[role=tablist] .chip { flex: 1 1 0; min-width: 0; padding-left: 6px; padding-right: 6px; font-size: 10px; letter-spacing: .06em; line-height: 1.25; }
  .tear-seg { margin-top: 0; order: 2; }
  .tools { order: 1; }
  .bl { bottom: calc(var(--gut) + 64px + 44px + 8px + 44px + 14px); }
  .tear-seg { flex-wrap: wrap; justify-content: flex-end; }
}
/* polish: a flex-wrap row sizes itself to all its items side by side, which pushed the layer switch over the title */
@media (min-width: 721px) { .tr { max-width: 600px; } }
/* scroll picker and "Open your own" */
.scroll-pick { display: flex; align-items: center; gap: 8px; margin-top: 12px; pointer-events: auto; }
.scroll-pick select { background: rgba(12,10,9,0.8); color: #ece6db; border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; padding: 5px 10px; font: inherit; font-size: 12px; max-width: 240px; }
.local-tag { color: #7fd8ff; }
.open-own .o-private { border-left: 2px solid #7fd8ff; padding-left: 10px; }
.o-drop { border: 1.5px dashed rgba(255,255,255,0.28); border-radius: 12px; padding: 22px 16px; text-align: center; cursor: pointer; margin: 10px 0; transition: background .2s, border-color .2s; }
.o-drop.over, .o-drop:focus-visible { background: rgba(255,179,71,0.08); border-color: #ffb347; outline: none; }
.o-drop-btns { display: flex; gap: 8px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
.o-drop-btns label { cursor: pointer; }
.o-url { display: flex; gap: 8px; margin-top: 8px; }
.o-url input { flex: 1; min-width: 0; background: rgba(0,0,0,0.4); color: inherit; border: 1px solid rgba(255,255,255,0.2); border-radius: 8px; padding: 7px 10px; font: inherit; font-size: 13px; }
.o-status { padding: 10px 12px; border-radius: 8px; font-size: 12px; margin: 8px 0; background: rgba(255,255,255,0.05); }
.o-status.err { background: rgba(255,80,60,0.12); color: #ffb4a8; }
.o-status.ok { background: rgba(80,200,255,0.1); color: #a8e6ff; }
.o-status ul { margin: 6px 0 0; padding-left: 18px; }
.o-list { list-style: none; padding: 0; margin: 6px 0 12px; }
.o-list li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
.o-list li > span:last-child { display: flex; gap: 6px; }
.mu { text-transform: none; }
@media (min-width: 721px) { .hud.tr .seg[role=tablist] .chip { letter-spacing: .07em; padding: 8px 11px; } }

/* Destroy mode: tool cursors (a fist for Crush, squeezed while pressed; a flame for Burn; a droplet for Water) */
body.destroy.tool-tear #gl { cursor: crosshair; }
body.destroy.tool-crush #gl { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='%23f3e6cf' stroke='%231a120c' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M6 13c0-2 1.4-3.2 3-3.2s2.8 1.1 2.8 2.6c0-1.9 1.3-3 2.9-3s2.8 1.1 2.8 2.8c.1-1.6 1.4-2.6 2.9-2.6 1.6 0 2.8 1.2 2.8 2.9v.9c.4-.7 1.2-1.1 2-1.1 1.4 0 2.3 1 2.3 2.5v5.2c0 4.7-3.7 8.1-8.6 8.1h-3.4C10 28.1 6 24.6 6 20.4z'/%3E%3Cpath d='M11.8 12.4v3.6M17.5 12.2v3.6M23.2 12.5v3.4M6.4 17.4c2.3-1.6 5.4-1.6 7.4.4' fill='none'/%3E%3C/g%3E%3C/svg%3E") 16 11, pointer; }
body.destroy.tool-crush.pressing #gl, body.destroy.tool-crush #gl:active { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='-1 -4 34 38'%3E%3Cg fill='%23f3e6cf' stroke='%231a120c' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M6 13c0-2 1.4-3.2 3-3.2s2.8 1.1 2.8 2.6c0-1.9 1.3-3 2.9-3s2.8 1.1 2.8 2.8c.1-1.6 1.4-2.6 2.9-2.6 1.6 0 2.8 1.2 2.8 2.9v.9c.4-.7 1.2-1.1 2-1.1 1.4 0 2.3 1 2.3 2.5v5.2c0 4.7-3.7 8.1-8.6 8.1h-3.4C10 28.1 6 24.6 6 20.4z'/%3E%3Cpath d='M11.8 12.4v3.6M17.5 12.2v3.6M23.2 12.5v3.4M6.4 17.4c2.3-1.6 5.4-1.6 7.4.4' fill='none'/%3E%3C/g%3E%3C/svg%3E") 16 12, pointer; }
body.destroy.tool-burn #gl { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M16 3c1 5 7.5 8 7.5 15.5a7.5 7.5 0 0 1-15 0c0-4.2 2-6.5 3.2-8.6.4 3 1.8 4.3 3 4.4-1-4.2 0-8.3 1.3-11.3z' fill='%23ff8a2a' stroke='%231a120c' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M16 15c.6 3 3.6 4.4 3.6 7.6a3.6 3.6 0 0 1-7.2 0c0-2.2 2-4.4 3.6-7.6z' fill='%23ffd56a'/%3E%3C/svg%3E") 16 4, pointer; }
body.destroy.tool-water #gl { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M16 3C12.4 9.6 8 13.8 8 19.4a8 8 0 0 0 16 0C24 13.8 19.6 9.6 16 3z' fill='%2378b8e8' stroke='%230c1620' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M12.4 19.6a3.8 3.8 0 0 0 3 3.6' fill='none' stroke='%23e8f6ff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") 16 27, pointer; }
.touch-pop { position: fixed; z-index: 8; width: 44px; height: 44px; margin: -22px 0 0 -22px; pointer-events: none; background: center / contain no-repeat; animation: pop .65s ease-out forwards; }
.touch-pop.crush { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='-1 -4 34 38'%3E%3Cg fill='%23f3e6cf' stroke='%231a120c' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M6 13c0-2 1.4-3.2 3-3.2s2.8 1.1 2.8 2.6c0-1.9 1.3-3 2.9-3s2.8 1.1 2.8 2.8c.1-1.6 1.4-2.6 2.9-2.6 1.6 0 2.8 1.2 2.8 2.9v.9c.4-.7 1.2-1.1 2-1.1 1.4 0 2.3 1 2.3 2.5v5.2c0 4.7-3.7 8.1-8.6 8.1h-3.4C10 28.1 6 24.6 6 20.4z'/%3E%3Cpath d='M11.8 12.4v3.6M17.5 12.2v3.6M23.2 12.5v3.4M6.4 17.4c2.3-1.6 5.4-1.6 7.4.4' fill='none'/%3E%3C/g%3E%3C/svg%3E"); }
.touch-pop.burn { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M16 3c1 5 7.5 8 7.5 15.5a7.5 7.5 0 0 1-15 0c0-4.2 2-6.5 3.2-8.6.4 3 1.8 4.3 3 4.4-1-4.2 0-8.3 1.3-11.3z' fill='%23ff8a2a' stroke='%231a120c' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M16 15c.6 3 3.6 4.4 3.6 7.6a3.6 3.6 0 0 1-7.2 0c0-2.2 2-4.4 3.6-7.6z' fill='%23ffd56a'/%3E%3C/svg%3E"); }
.touch-pop.water { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M16 3C12.4 9.6 8 13.8 8 19.4a8 8 0 0 0 16 0C24 13.8 19.6 9.6 16 3z' fill='%2378b8e8' stroke='%230c1620' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M12.4 19.6a3.8 3.8 0 0 0 3 3.6' fill='none' stroke='%23e8f6ff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.touch-pop.tear { display: none; }
@keyframes pop { 0% { transform: scale(.6); opacity: 0 } 25% { transform: scale(1.05); opacity: 1 } 100% { transform: scale(.9); opacity: 0 } }
.chip.tool.on { background: var(--fg); color: var(--bg); }
.chip:disabled { opacity: .35; cursor: default; }
.roll-up { flex: none; border: 1px solid var(--line-strong); background: var(--panel); color: var(--fg); min-height: 34px; }
.roll-up.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
@media (max-width: 720px) { .roll-up { padding: 8px; font-size: 10px; } }
@media (max-width: 720px) { body.destroy #readout { display: none; } }

.prize-badge { font-size: 11px; color: #f2c66d; border: 1px solid rgba(242,198,109,0.45); border-radius: 999px; padding: 3px 9px; text-decoration: none; white-space: nowrap; }
.prize-badge:hover { background: rgba(242,198,109,0.12); }
.scroll-pick .prize-only { font-size: 11px; padding: 3px 9px; }
.scroll-pick .prize-only.on { border-color: rgba(242,198,109,0.7); color: #f2c66d; }
.scroll-pick { flex-wrap: wrap; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
#gl:focus-visible, .viewer:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.about-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; opacity: .75; }
.about-foot a { color: inherit; }
.about-foot .version { letter-spacing: .02em; }

/* ---------------------------------------------------------------- embed mode (?embed=1) */
#btnFull, .embed-full, .embed-gate { display: none; }
.embed #btnFull { display: inline-flex; }
.embed .embed-full { display: block; position: fixed; left: 14px; top: 56px; z-index: 30; font-size: 11px; color: var(--dim, #9a8f80); text-decoration: none; padding: 4px 8px; border-radius: 999px; background: rgba(6, 5, 5, .6); }
.embed .embed-full:hover, .embed .embed-full:focus-visible { color: #fff; }
.embed .embed-gate:not([hidden]) { display: flex; position: fixed; inset: 0; z-index: 5; align-items: center; justify-content: center; border: 0; background: transparent; color: inherit; cursor: pointer; touch-action: pan-x pan-y; }
.embed .embed-gate span { padding: 8px 14px; border-radius: 999px; background: rgba(6, 5, 5, .72); border: 1px solid rgba(255, 255, 255, .18); font-size: 12px; letter-spacing: .06em; }
.embed .embed-gate:hover span, .embed .embed-gate:focus-visible span { border-color: rgba(255, 255, 255, .5); }
.embed .hud.tl .kicker, .embed .hud.tl .lede, .embed .vignette { display: none; }
.embed .hud.tl h1 { font-size: clamp(16px, 4.2vw, 24px); line-height: 1.1; max-width: 60vw; }
.embed .layer-hint, .embed .layer-why { display: none; }
.embed .readout { display: none; }
.embed-nocontrols .hud, .embed-nocontrols .scrub, .embed-nocontrols .dock { display: none !important; }
@media (max-height: 420px) { .embed .hud.tl h1 { display: none; } }
.embed-code { width: 100%; box-sizing: border-box; background: rgba(255, 255, 255, .05); color: inherit; border: 1px solid rgba(255, 255, 255, .15); border-radius: 8px; padding: 8px; font-size: 11px; resize: vertical; overflow: hidden; }
#embedSheet label { display: block; margin: 4px 0; }

.toast { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 60; max-width: min(560px, 90vw); padding: 8px 14px; border-radius: 10px; background: rgba(6, 5, 5, .88); border: 1px solid rgba(255, 255, 255, .18); font-size: 12px; line-height: 1.4; }
.toast[hidden] { display: none; }