.game-interactions.record-scene-open { overflow: hidden; }
#record-scene {
  position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; border-radius: 0; color: var(--ink); background-color: #fff;
  background-image: linear-gradient(#e7edf455 1px,transparent 1px),linear-gradient(90deg,#e7edf455 1px,transparent 1px);
  background-size: 24px 24px; display: grid; grid-template-rows: auto minmax(220px,1fr) auto; overflow: auto;
}
#record-scene:not([open]) { display: none; }
#record-scene::backdrop { background: #fff; }
#record-scene .record-options { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 18px; padding: 8px 16px; background: #fffffff2; font: 14px/22px 'IBM Plex Sans',sans-serif; }
#record-scene .record-options [aria-pressed=true] { color: var(--pen); font-weight: 600; }
#record-scene .record-stage { position: relative; width: min(760px,100%); min-height: 0; margin-inline: auto; overflow: hidden; }
#record-scene .record-art { position: absolute; top: 3%; left: 50%; width: min(300px,42dvh); height: min(300px,42dvh); margin-left: calc(min(300px,42dvh) / -2); overflow: visible; }
#record-scene .record-bolt { transform-origin: 50% 50%; }
#record-scene .record-cut-shadow { fill: #565b6320; transform: translate(5px,5px); }
#record-scene .record-cut-edge { fill: #fff; stroke: #bec6d0; stroke-width: 1.3; stroke-linejoin: round; }
#record-scene .record-bolt-color { fill: var(--marker); stroke: var(--pen); stroke-width: 4.3; stroke-linecap: round; stroke-linejoin: round; }
#record-scene .record-bolt-ink { fill: none; stroke: var(--pen); stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
#record-scene .record-bolt-grain { fill: none; stroke: var(--pen); stroke-width: 1; stroke-linecap: round; opacity: .2; }
#record-scene .record-rays { opacity: 0; stroke: var(--pen); stroke-width: 3; transform-origin: 50% 50%; }
#record-scene .record-rays path + path { stroke: var(--marker); stroke-width: 5; }
#record-scene .record-papers { opacity: 0; }
#record-scene .record-papers path { fill: var(--marker); stroke: #282b3030; stroke-width: 1; transform-box: fill-box; transform-origin: center; }
#record-scene .record-papers path:nth-child(3n+2) { fill: var(--pen); stroke: none; }
#record-scene .record-papers path:nth-child(3n) { fill: #fff; stroke: var(--pen); stroke-width: 1.5; }
#record-scene .record-stack { display: none; fill: #fff; stroke: var(--pen); stroke-width: 2; }
#record-scene .record-stack path:nth-child(1) { fill: #e7edf4; }
#record-scene .record-stack path:nth-child(2) { fill: #f4f6f8; }
#record-scene .record-stack .record-stack-lines { fill: none; opacity: .25; stroke-width: 1.4; }
#record-scene #record-scene-title { position: absolute; top: 73%; left: 4%; width: 92%; margin: 0; text-align: center; color: var(--ink); font: 600 38px/1.1 Caveat,cursive; }
#record-scene .record-number { position: absolute; top: 56%; left: 0; width: 100%; height: 100px; text-align: center; color: var(--pen); font: 600 92px/1 Caveat,cursive; font-variant-numeric: tabular-nums; }
#record-scene .record-number span { position: absolute; inset: 0; }
#record-scene .record-before { opacity: 0; }
#record-scene .record-after { opacity: 1; }
#record-scene .record-caption { position: absolute; top: 81%; width: 100%; margin: 0; text-align: center; font: 15px/24px 'IBM Plex Sans',sans-serif; color: var(--muted); }
#record-scene .record-trail { position: absolute; top: 88%; left: 0; width: 100%; margin: 0; padding: 0; list-style: none; display: flex; justify-content: center; gap: 12px; }
#record-scene .record-trail li { position: relative; width: 28px; height: 28px; opacity: .45; }
#record-scene .record-trail li:last-child { opacity: 1; }
#record-scene .record-trail li:last-child::before { content: ''; position: absolute; inset: 2px -3px; background: #f3dc6266; clip-path: polygon(3% 9%,99% 0,96% 89%,0 100%); }
#record-scene .record-trail svg { position: relative; width: 28px; height: 28px; fill: none; stroke: var(--pen); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#record-scene .record-addition { display: none; }
#record-scene .record-actions { position: relative; display: flex; flex-direction: column; align-items: center; padding: 8px 20px max(12px,env(safe-area-inset-bottom)); border: 0; background: #fffffff2; }
#record-scene .record-actions .tool { min-height: 44px; font: 15px/22px 'IBM Plex Sans',sans-serif; }
#record-scene .record-continue { width: min(460px,88vw); padding: 0; }
#record-scene .record-action-surface { display: grid; place-items: center; width: 100%; min-height: 50px; padding: 10px 20px; color: #fff; background: var(--pen); clip-path: polygon(1% 4%,99% 0,100% 91%,0 100%); }
#record-scene .record-action-surface .tool-label { color: #fff; font-weight: 600; }
#record-scene .record-action-surface .tool-label::before { content: none; }
#record-scene .record-continue:hover .record-action-surface, #record-scene .record-continue:active .record-action-surface { background: var(--accent); }
#record-scene .record-continue:focus-visible { outline: 0; }
#record-scene .record-continue:focus-visible::after { content: ''; position: absolute; bottom: -6px; left: 0; width: 100%; height: 6px; background: var(--pen); mask: var(--pen-stroke-focus) center / 100% 100% no-repeat; }
#record-scene .record-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

#record-scene[data-variant=total] .record-stack { display: block; }
#record-scene[data-variant=total] .record-art { top: 1%; width: min(245px,35dvh); height: min(245px,35dvh); margin-left: calc(min(245px,35dvh) / -2); }
#record-scene[data-variant=total] .record-bolt { transform: translate(16px,-9px) scale(.79); }
#record-scene[data-variant=total] #record-scene-title { top: 39%; font-size: 36px; }
#record-scene[data-variant=total] .record-number { top: 50%; }
#record-scene[data-variant=total] .record-caption { top: 76%; }
#record-scene[data-variant=total] .record-trail { top: 86%; }
#record-scene[data-variant=total] .record-addition { position: absolute; top: 71%; left: 8%; width: 84%; display: flex; justify-content: center; align-items: center; gap: 8px; margin: 0; color: var(--pen); font: 16px/24px 'IBM Plex Sans',sans-serif; opacity: 0; }
#record-scene .record-addition svg { width: 23px; height: 25px; fill: none; stroke: var(--pen); stroke-width: 1.8; stroke-linecap: round; }

#record-scene.record-animate[data-variant=burst] .record-bolt { animation: record-burst-bolt 3600ms cubic-bezier(.2,.7,.3,1) both; }
#record-scene.record-animate[data-variant=burst] .record-rays { animation: record-burst-rays 3600ms ease-out both; }
#record-scene.record-animate .record-papers { animation: record-papers-visible 1000ms 1700ms linear both; }
#record-scene.record-animate .record-papers path { animation: record-paper-fly 1000ms 1700ms ease-out both; }
#record-scene.record-animate[data-variant=burst] .record-before { animation: record-burst-before 3600ms linear both; }
#record-scene.record-animate[data-variant=burst] .record-after { animation: record-burst-after 3600ms ease-out both; }
#record-scene.record-animate[data-variant=burst] #record-scene-title { animation: record-burst-title 3600ms ease-out both; }
#record-scene.record-animate[data-variant=burst] .record-caption { animation: record-burst-caption 3600ms ease-out both; }
#record-scene.record-animate[data-variant=burst] .record-trail { animation: record-burst-trail 3600ms ease-out both; }
#record-scene.record-animate[data-variant=total] .record-art { animation: record-total-art 500ms ease-out both; }
#record-scene.record-animate[data-variant=total] #record-scene-title { animation: record-total-title 2200ms ease-out both; }
#record-scene.record-animate[data-variant=total] .record-before { animation: record-total-before 2200ms linear both; }
#record-scene.record-animate[data-variant=total] .record-after { animation: record-total-after 2200ms ease-out both; }
#record-scene.record-animate[data-variant=total] .record-addition { animation: record-total-addition 2200ms cubic-bezier(.3,0,.2,1) both; }
#record-scene.record-animate[data-variant=total] .record-caption { animation: record-total-caption 2200ms ease-out both; }
#record-scene.record-animate[data-variant=total] .record-trail { animation: record-total-trail 2200ms ease-out both; }
#record-scene.record-animate[data-variant=total] .record-papers, #record-scene.record-animate[data-variant=total] .record-papers path { animation-delay: 1450ms; animation-duration: 750ms; }

@keyframes record-burst-bolt { 0% { opacity: 0; transform: translateY(80px) scale(.26) rotate(-9deg); } 12% { opacity: 1; transform: translateY(48px) scale(.32) rotate(-5deg); } 32% { transform: translateY(0) scale(.42) rotate(0); } 43% { transform: scale(.1); } 48% { transform: scale(.12); } 63% { transform: scale(1.1) rotate(-4deg); } 74%,100% { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes record-burst-rays { 0%,36% { opacity: 0; transform: scale(.22); } 42% { opacity: .8; transform: scale(.65); } 48% { opacity: 0; transform: scale(.15); } 55% { opacity: .8; transform: scale(1.05); } 75%,100% { opacity: 0; transform: scale(1.35); } }
@keyframes record-papers-visible { 0% { opacity: 0; } 12%,62% { opacity: 1; } 100% { opacity: 0; } }
@keyframes record-paper-fly { from { transform: translate(0,0) rotate(0); } to { transform: translate(var(--dx),var(--dy)) rotate(var(--turn)); } }
@keyframes record-burst-before { 0%,40% { opacity: 0; transform: none; } 46%,55% { opacity: 1; transform: none; } 63%,100% { opacity: 0; transform: translateY(-15px) scale(.8); } }
@keyframes record-burst-after { 0%,56% { opacity: 0; transform: translateY(15px) scale(.8); } 65% { opacity: 1; transform: scale(1.08); } 75%,100% { opacity: 1; transform: none; } }
@keyframes record-burst-title { 0%,66% { opacity: 0; transform: translateY(7px); } 79%,100% { opacity: 1; transform: none; } }
@keyframes record-burst-caption { 0%,72% { opacity: 0; } 84%,100% { opacity: 1; } }
@keyframes record-burst-trail { 0%,84% { opacity: 0; transform: translateY(5px); } 100% { opacity: 1; transform: none; } }
@keyframes record-total-art { from { opacity: 0; transform: translateY(15px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes record-total-title { 0% { opacity: 0; transform: translateY(6px); } 22%,100% { opacity: 1; transform: none; } }
@keyframes record-total-before { 0%,22% { opacity: 0; transform: none; } 28%,59% { opacity: 1; transform: none; } 70%,100% { opacity: 0; transform: translateY(-12px) scale(.8); } }
@keyframes record-total-after { 0%,62% { opacity: 0; transform: translateY(12px) scale(.9); } 76% { opacity: 1; transform: scale(1.06); } 88%,100% { opacity: 1; transform: none; } }
@keyframes record-total-addition { 0%,15% { opacity: 0; transform: translateY(6px); } 28%,54% { opacity: 1; transform: none; } 73%,100% { opacity: 0; transform: translateY(-80px) scale(.35); } }
@keyframes record-total-caption { 0%,72% { opacity: 0; } 92%,100% { opacity: 1; } }
@keyframes record-total-trail { 0%,83% { opacity: 0; transform: translateY(5px); } 100% { opacity: 1; transform: none; } }

#record-scene.record-reduced *, #record-scene.record-reduced *::before { animation: none !important; }
@media (prefers-reduced-motion: reduce) { #record-scene *, #record-scene *::before { animation: none !important; } }
@media (width < 640px) {
  #record-scene .record-options { gap: 2px 10px; padding-block: 4px; font-size: 13px; }
  #record-scene #record-scene-title, #record-scene[data-variant=total] #record-scene-title { font-size: 31px; }
  #record-scene .record-number { font-size: 82px; }
  #record-scene .record-caption { font-size: 14px; }
  #record-scene .record-actions { padding-top: 6px; }
}
@media (height < 630px) {
  #record-scene .record-art { width: 190px; height: 190px; margin-left: -95px; top: 0; }
  #record-scene .record-number { font-size: 62px; height: 66px; top: 54%; }
  #record-scene #record-scene-title { font-size: 28px; top: 74%; }
  #record-scene .record-caption { top: 83%; font-size: 13px; }
  #record-scene .record-trail { display: none; }
  #record-scene[data-variant=total] .record-art { width: 165px; height: 165px; margin-left: -82.5px; }
  #record-scene[data-variant=total] #record-scene-title { top: 39%; font-size: 28px; }
  #record-scene[data-variant=total] .record-number { top: 52%; }
  #record-scene[data-variant=total] .record-caption { top: 82%; }
  #record-scene[data-variant=total] .record-addition { top: 75%; font-size: 14px; }
}