:root { color-scheme: dark; font-family: Arial, Helvetica, sans-serif; background: #03050c; color: #fff; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
body { display: grid; place-items: center; overflow: hidden; }
[hidden] { display: none !important; }
#demo { position: relative; width: min(100vw, 56.25vh); height: min(177.777778vw, 100vh); width: min(100vw, 56.25svh); height: min(177.777778vw, 100svh); aspect-ratio: 9/16; overflow: hidden; isolation: isolate; background: #03050c; }
.screen { position: absolute; inset: 0; }
.background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; }
.placed { position: absolute; left: calc(var(--x) / 1080 * 100%); top: calc(var(--y) / 1920 * 100%); width: calc(var(--w) / 1080 * 100%); height: calc(var(--h) / 1920 * 100%); }
.artwork { pointer-events: none; user-select: none; object-fit: fill; }
.image-control, .close-detail { display: block; border: 0; padding: 0; background: transparent; color: inherit; text-decoration: none; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.image-control { border-radius: 4px; }
.image-control img { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; }
.hover-scale { transition: transform 180ms ease-out; transform-origin: center; }
@media (hover:hover) { .hover-scale:hover, .hover-scale.group-hover { transform: scale(1.05); } }
.image-control:active { filter: brightness(1.12); }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid #dfb8ff; outline-offset: 3px; }
.back-control::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: max(100%,44px); height: max(100%,44px); }
.close-detail:focus-visible { outline-offset: -4px; }
#logo-home { z-index: 3; }
.utility, .load-status { font: 12px/1.4 Arial, sans-serif; color: #fff; background: #181026; border: 1px solid #7543a5; border-radius: 6px; }
.utility { position: absolute; z-index: 4; bottom: 1.3%; left: 3%; min-height: 32px; padding: 6px 10px; cursor: pointer; }
.utility:hover { background: #2b193e; }
.load-status { position: absolute; z-index: 6; left: 50%; top: 48%; transform: translate(-50%,-50%); max-width: 85%; padding: 12px 16px; box-shadow: 0 8px 32px #0008; }
.load-status button { display: block; margin: 8px auto 0; background: #dfb8ff; border: 0; border-radius: 4px; padding: 8px 12px; color: #181026; cursor: pointer; }
/* Preserve the original 21px end caps; only the middle of each 84x42 sprite stretches. */
.size-fill { pointer-events: none; border-style: solid; border-color: transparent; border-width: 0 calc(var(--thumb-size,20px) * .42); border-image-slice: 0 21 fill; border-image-repeat: stretch; }
#prefill-fill { border-image-source: url('./assets/sprite-119.png'); }
#decode-fill { border-image-source: url('./assets/sprite-66.png'); }
#size-slider { position: absolute; margin: 0; padding: 0; left: calc(362 / 1080 * 100%); top: calc(454 / 1920 * 100%); width: calc(448 / 1080 * 100%); height: max(44px, calc(50 / 1920 * 100%)); transform: translateY(-50%); appearance: none; -webkit-appearance: none; background: transparent; cursor: ew-resize; touch-action: pan-y; }
#size-slider::-webkit-slider-runnable-track { height: var(--thumb-size,20px); background: transparent; }
#size-slider::-moz-range-track { height: var(--thumb-size,20px); background: transparent; }
#size-slider::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: var(--thumb-size,20px); height: var(--thumb-size,20px); border: 0; border-radius: 50%; background: url('./assets/sprite-88.png') center/contain no-repeat; }
#size-slider::-moz-range-thumb { width: var(--thumb-size,20px); height: var(--thumb-size,20px); border: 0; border-radius: 50%; background: url('./assets/sprite-88.png') center/contain no-repeat; }
#standalone-tour { z-index: 5; background: #03050c; }
#tour-video { width: 100%; height: 100%; object-fit: contain; }
#close-tour { top: 12px; bottom: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: -1px; padding: 0; border: 0; }
::selection { background: #7543a5; color: #fff; }
@media (prefers-reduced-motion: reduce) { .hover-scale { transition: none; } }