/* A single vector/HTML stage is resized by LayerSlider in both views. */
.hero-tools{--preview-size:64px;--preview-width:calc(var(--preview-size) * 16 / 9);position:absolute;z-index:3;top:16px;right:16px;display:flex;align-items:flex-start;gap:12px}
.hero-tools .photo-caption{position:relative;inset:auto;width:var(--preview-width);height:var(--preview-size);flex:none;display:block;padding:0;background:transparent}
.hero-tools .photo-thumbnail{width:100%;height:100%;min-width:0;flex-basis:auto;border:0;background:transparent}
.hero-tools .photo-thumbnail img{width:100%;height:100%;max-width:none;object-fit:cover}
.hero-tools .photo-navigation button{position:absolute;z-index:2;top:50%;transform:translateY(-50%);width:18px;height:44px;background:transparent;color:#fff;font-size:12px;text-shadow:0 1px 4px #000,0 0 2px #000}
.hero-tools .photo-previous{left:0}.hero-tools .photo-next{right:0}
.hero-tools .photo-navigation button:hover{color:#fff;background:transparent;filter:drop-shadow(0 0 2px #fff9)}
.hero-tools .photo-expand{right:4px;bottom:4px;width:9px;height:9px;pointer-events:none}
.hero-motion{position:relative;width:var(--preview-width);height:var(--preview-size);flex:none;isolation:isolate}
.motion-open{position:absolute;inset:0;z-index:1;width:100%;height:100%;padding:0;border:0;background:transparent;color:inherit;cursor:zoom-in}
.motion-expand{z-index:5}
.motion-open:disabled{cursor:default}.motion-open:focus-visible{outline:0;box-shadow:none}
.motion-open:focus-visible .motion-expand{filter:drop-shadow(0 0 2px #fff) drop-shadow(0 1px 2px #000);transform:scale(1.5)}
/* Fit the original artwork into the wider thumbnail without stretching it. */
.motion-home{position:absolute;top:0;bottom:0;left:50%;width:calc(var(--preview-size) * 840 / 590);transform:translateX(-50%);z-index:0;pointer-events:none}
.motion-player{width:100%;height:100%;pointer-events:none}
.motion-player:empty{display:none}
.motion-static{display:block;width:100%;height:100%}.motion-static>svg{display:block;width:100%;height:100%}
.hero-motion[data-motion-state="playing"] .motion-static,.hero-motion[data-motion-state="paused"] .motion-static{visibility:hidden}
.motion-stage{position:relative;font-family:DINWeb,Arial,sans-serif;font-size:16px;color:var(--ink);line-height:1.2;isolation:isolate}
.motion-canvas{position:absolute;left:0;top:0;width:960px;height:960px;transform-origin:0 0}.motion-canvas>svg{position:absolute;inset:0;overflow:visible;width:960px!important;height:960px!important}
.motion-stage text,.motion-static text{fill:var(--ink);font-family:DINWeb,Arial,sans-serif}
.motion-stage .binary-line,.motion-stage .code-line{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:0;filter:drop-shadow(0 1px 2px var(--paper))}
.binary-line{fill:var(--accent)!important}
.motion-stage .syntax-tag,.motion-stage .syntax-attr{fill:var(--accent)}
.motion-stage .syntax-value{fill:var(--ink)}
.motion-stage .syntax-plain{fill:var(--muted)}
.motion-paper{fill:var(--paper)}.motion-surface{fill:var(--surface)}
.motion-logo{fill:var(--logo-color)}.motion-accent{fill:var(--accent)!important}.motion-muted{fill:var(--muted)!important}
.motion-bold{font-weight:700}.motion-accent-bg{fill:var(--accent)}.motion-on-accent{fill:var(--button-ink)!important}
.folder{position:absolute;inset:0;perspective:1800px;visibility:hidden}
.folder-core{position:absolute;left:358.067px;top:186px;width:243.866px;height:590px;transform-style:preserve-3d}
.folder-wing{position:absolute;top:0;width:243.866px;height:590px;transform-style:preserve-3d}
.folder-left{left:-243.866px;transform-origin:100% 50%}.folder-right{left:243.866px;transform-origin:0 50%}
.folder-face{position:absolute;inset:0;backface-visibility:hidden;background:var(--paper);box-shadow:0 4px 12px #0001;transform:translateZ(.5px);overflow:hidden}
.folder-face>svg{display:block;width:243.866px!important;height:590px!important}
.folder-back{transform:rotateY(180deg) translateZ(.5px)}
.folder-face::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#00000005,transparent 3%,#ffffff08 46%,transparent 97%,#0000000c),repeating-linear-gradient(12deg,transparent 0 2px,#77777706 2px 3px);box-shadow:inset 0 0 0 1px #7771}
.motion-dialog{width:min(920px,calc(100vw - 32px),calc((100dvh - 112px) * 840 / 590));height:auto;aspect-ratio:840/590;margin:auto;padding:0;overflow:visible;border:0;background:transparent;color:var(--ink);max-width:none;max-height:none}
.motion-dialog:not([open]){display:none}.motion-dialog::backdrop{background:color-mix(in srgb,var(--paper) 90%,transparent);backdrop-filter:blur(8px)}
.motion-enlarged{width:100%;height:100%;aspect-ratio:840/590}
.motion-close{position:absolute;z-index:10;top:-48px;right:0;width:44px;height:44px;padding:0;border:0;background:transparent;color:#fff;font-family:Arial,sans-serif;font-size:32px;line-height:1;cursor:pointer}
.motion-close:hover{color:#fff}
.motion-close:focus-visible{outline:0;box-shadow:none;text-shadow:0 0 3px #fff}
html:has(.motion-dialog[open]:not(.motion-inline)){overflow:hidden}
.motion-enlarged>.motion-static{position:absolute;inset:0}
@media(max-width:767px){.hero-tools{--preview-size:56px;gap:10px}}
@media print{.hero-tools,.motion-dialog{display:none!important}}
.motion-player[hidden],.motion-static[hidden]{display:none!important}
.motion-stage .motion-logo{fill:var(--logo-color)!important;color:var(--logo-color)}
/* Decorative vendor layers must never intercept the thumbnail's click target. */
.motion-player *{pointer-events:none!important}
/* Avoid retaining a tiny GPU texture when the live player moves into its dialog. */
.motion-player .ls-z{will-change:auto!important}
.motion-dialog .binary-line,.motion-dialog .code-line{filter:none}

/* Desktop enlargement remains part of the hero; only mobile uses the modal backdrop. */
.motion-dialog.motion-inline{position:absolute;inset:auto;margin:0;z-index:4;pointer-events:none;background:transparent;box-shadow:none;outline:none}
.motion-close{filter:drop-shadow(0 1px 2px #0009)}
.motion-inline .motion-close{pointer-events:auto}
.motion-inline::backdrop{background:transparent;backdrop-filter:none}
.hero-motion[data-motion-state="enlarged"] .motion-static{visibility:hidden}
html:has(.motion-dialog[open]) .motion-expand{visibility:hidden}

/* The decorative header follows the live page's colour mode without extra controls. */
.motion-nav-moon{display:none}
:root[data-theme="dark"] .motion-nav-sun{display:none}
:root[data-theme="dark"] .motion-nav-moon{display:inline}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .motion-nav-sun{display:none}
  :root:not([data-theme="light"]) .motion-nav-moon{display:inline}
}