@property --sp-frame{syntax:"<integer>";inherits:true;initial-value:0}@property --sp-xp{syntax:"<number>";inherits:true;initial-value:0}@property --sp-n{syntax:"<integer>";inherits:false;initial-value:0}@property --sp-k{syntax:"<integer>";inherits:false;initial-value:0}@property --sp-hue-i{syntax:"<integer>";inherits:true;initial-value:0}@property --sp-m{syntax:"<integer>";inherits:true;initial-value:0}@property --sp-hh{syntax:"<integer>";inherits:true;initial-value:0}@property --sp-mm{syntax:"<integer>";inherits:true;initial-value:0}@property --sp-en{syntax:"<integer>";inherits:true;initial-value:0}@counter-style sp-pad3{system:extends decimal;pad:3 "0"}.specimen,.specimen *,.specimen :before,.specimen :after{box-sizing:border-box}:root{--sp-tempo:calc(1.6 - var(--scene-energy));--sp-vt-dur:calc(var(--dur-page) * var(--sp-tempo))}.specimen{--sp-pad:clamp(14px, 3.4vmin, 32px);--sp-warmth:calc(max(var(--scene-time) - .5, .5 - var(--scene-time)) * 2);--sp-on-photo:oklch(.5 .13 var(--scene-hue));--sp-photo-ink:var(--fvzl-charcoal);timeline-scope:--sp-tray;--sp-host-inset:3.25rem;grid-template-rows:auto minmax(0,1fr);min-width:0;min-height:0;display:grid;position:relative}.vh{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.sp-label{font-family:var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin:0;font-size:11px}.sp-bar{padding:8px var(--sp-pad);border-bottom:1px solid var(--rule);grid-template-columns:auto minmax(3rem,1fr) auto;align-items:center;gap:clamp(12px,3vw,32px);display:grid}.sp-readout{font-family:var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);font-variant-numeric:tabular-nums;--sp-hue-i:calc(var(--scene-hue));--sp-m:calc(mod(round(var(--scene-time) * 1440), 1440));--sp-hh:calc(round(down, var(--sp-m) / 60, 1));--sp-mm:calc(mod(var(--sp-m), 60));--sp-en:calc(var(--scene-energy) * 100);counter-reset:sp-hue var(--sp-hue-i) sp-hh var(--sp-hh) sp-mm var(--sp-mm) sp-en var(--sp-en);flex-wrap:wrap;gap:0 .9em;margin:3px 0 0;font-size:11px;display:flex}.sp-readout b{color:var(--ink);font-weight:500}.r-hue:after{content:counter(sp-hue) "°"}.r-time:after{content:counter(sp-hh, decimal-leading-zero) ":" counter(sp-mm, decimal-leading-zero)}.r-energy:after{content:counter(sp-en) "%"}.sp-scale{visibility:hidden;background:repeating-linear-gradient(90deg, var(--rule) 0 1px, transparent 1px 7px) left bottom / 100% 7px no-repeat;border-bottom:1px solid var(--rule);height:30px;position:relative}.sp-mark{left:calc(var(--b) * 100%);font-family:var(--font-mono);color:var(--ink-3);font-size:10px;line-height:1;position:absolute;top:0;translate:-50%}.sp-mark:after{content:"";background:var(--ink-3);width:1px;height:13px;position:absolute;top:calc(100% + 4px);left:50%}@media (width<=480px){.sp-mark{font-size:0}}.sp-needle{border-right:2px solid var(--accent);position:absolute;inset:-2px 0 0;translate:-100%}.sp-nav{gap:6px;display:flex}.sp-nav[hidden]{display:none}.sp-step{width:44px;height:44px;font:inherit;color:var(--ink);background:var(--panel);border:1px solid var(--rule);cursor:pointer;transition:border-color var(--dur-quick), opacity var(--dur-quick);border-radius:50%;place-items:center;padding:0;font-size:1rem;display:grid}.sp-step:disabled{opacity:.35;cursor:default}@media (hover:hover){.sp-step:not(:disabled):hover{border-color:var(--ink-2)}}.sp-step,.pin,.chip{touch-action:manipulation}.sp-step:focus-visible,.pin:focus-visible,.chip:has(:focus-visible){outline:2px solid var(--accent-ink);outline-offset:2px}.sp-tray{overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-timeline:--sp-tray inline;min-height:0;display:flex;overflow:auto hidden}.sp-tray:focus-visible{outline:2px solid var(--accent-ink);outline-offset:-2px}.specimen[data-enhanced] .sp-tray{scrollbar-width:none}@media (hover:hover) and (pointer:fine){.specimen[data-enhanced] .sp-tray{cursor:grab}}.specimen[data-dragging] .sp-tray{cursor:grabbing;scroll-snap-type:none;-webkit-user-select:none;user-select:none}.specimen[data-dragging] .pin,.specimen[data-dragging] .chip{pointer-events:none}.specimen[data-enhanced] .sp-tray::-webkit-scrollbar{display:none}.plate{scroll-snap-align:start;flex:0 0 100%;min-width:0;position:relative}.plate-body{width:100%;height:100%;padding:var(--sp-pad) var(--sp-pad) calc(var(--sp-pad) + var(--sp-host-inset));grid-template-rows:minmax(0,1fr) auto;gap:12px;display:grid;container-type:size}.snap-end{display:none}.plate-copy{max-width:36ch}.plate-title{letter-spacing:-.04em;text-wrap:balance;margin:4px 0 0;font-size:clamp(1.15rem,.8rem + 2.6cqmin,2rem);font-weight:470;line-height:1.05}.plate-note{color:var(--ink-2);text-wrap:pretty;margin:6px 0 0;font-size:.8125rem;line-height:1.45}.plate-note code{font-family:var(--font-mono);color:var(--accent-ink);font-size:.75rem}@media (width>=600px) and (aspect-ratio>=5/4){.plate-body{grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(13rem,1fr) minmax(0,2.6fr);align-items:end;gap:clamp(16px,3cqw,40px)}.plate-body>.fit{grid-area:1/2}.plate-body>.plate-copy{grid-area:1/1}}.fit{place-items:center;height:100%;min-height:0;display:grid;container-type:size}.sp-photo{--ar:1.6;width:min(100cqw, 100cqh * var(--ar));aspect-ratio:var(--ar);border:1px solid var(--rule);background:#e5e3e0;border-radius:3px;margin:0;position:relative}.sp-film{border-radius:inherit;filter:sepia(calc(var(--sp-warmth) * .45)) brightness(calc(1 - var(--sp-warmth) * .3));display:grid;position:absolute;inset:0;overflow:hidden}.sp-film img{object-fit:cover;-webkit-user-drag:none;-webkit-user-select:none;user-select:none;grid-area:1/1;width:100%;height:100%}.turn-frames{--ar:2.133}.turn-frames .sp-film{background:var(--rule);grid-template:repeat(3,1fr)/repeat(4,1fr);gap:1px}.turn-frames .sp-film img{grid-area:auto}.sp-hint{display:none}.explode-frames .sp-film img{visibility:hidden}.explode-frames .sp-film img:last-child{visibility:visible}.pins{position:absolute;inset:0}.plate-sheet .plate-body{grid-template-rows:auto auto minmax(0,1fr);align-content:start}.facts{border-top:1px solid var(--rule);grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 16px;margin:0;padding-top:10px;display:grid}.facts dt{font-family:var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-size:10px}.facts dd{letter-spacing:-.04em;font-variant-numeric:tabular-nums;margin:2px 0 0;font-size:clamp(1.2rem,.7rem + 3.4cqmin,2.4rem);font-weight:350;line-height:1}.facts small{letter-spacing:0;color:var(--ink-3);font-size:.45em}.modules{min-height:0;margin:0;padding:0;list-style:none;overflow:hidden}.modules li{grid-template-columns:2.4em 7.5em minmax(0,1fr);gap:.75em;padding:5px 0;font-size:.8125rem;line-height:1.35;display:grid;position:relative}.modules li:before{content:"";background:var(--rule-soft);transform-origin:0;height:1px;position:absolute;inset:0 0 auto}.mod-code{font-family:var(--font-mono);color:var(--accent-ink);font-size:11px}.mod-desc{color:var(--ink-2);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}@media (width>=600px) and (aspect-ratio>=5/4){.plate-sheet .plate-body{grid-template-rows:auto auto;align-content:center;align-items:start}.plate-sheet .plate-copy{grid-area:1/1}.plate-sheet .facts{grid-area:2/1;grid-template-columns:repeat(2,minmax(0,1fr))}.plate-sheet .modules{grid-area:1/2/span 2;align-self:center}.modules li{padding:9px 0;font-size:.875rem}}@container (width<=420px){.modules{grid-template-columns:1fr 1fr;align-content:start;column-gap:16px;display:grid}.mod-desc{display:none}.modules li{grid-template-columns:2.4em minmax(0,1fr)}}.pin{cursor:pointer;background:0 0;border:0;border-radius:50%;place-items:center;width:44px;height:44px;padding:0;display:grid;position:absolute;translate:-50% -50%}.pin:before,.pin:after{content:"";border-radius:50%;grid-area:1/1}.pin:before{border:1.5px solid var(--sp-on-photo);background:#ffffffb8;width:22px;height:22px}.pin:after{background:var(--sp-on-photo);width:8px;height:8px}.pin-code{font-family:var(--font-mono);letter-spacing:.06em;color:var(--sp-photo-ink);background:#ffffffb8;border-radius:2px;padding:1px 4px;font-size:10px;position:absolute;top:50%;left:calc(50% + 15px);translate:0 -50%}.note{width:min(17rem,100vw - 24px);color:var(--ink);background:var(--panel);border:1px solid var(--rule);border-radius:var(--radius);box-shadow:var(--shadow-panel);position-area:top;position-try-fallbacks:flip-block, --sp-right, --sp-left;opacity:0;transition:opacity calc(var(--dur-quick) * var(--sp-tempo)) var(--ease), translate calc(var(--dur-base) * var(--sp-tempo)) var(--ease), display calc(var(--dur-base) * var(--sp-tempo)) allow-discrete, overlay calc(var(--dur-base) * var(--sp-tempo)) allow-discrete;margin:8px;padding:12px 14px 14px;inset:auto;translate:0 6px}@position-try --sp-right{position-area:right}@position-try --sp-left{position-area:left}.note:popover-open{opacity:1;translate:0}@starting-style{.note:popover-open{opacity:0;translate:0 6px}}@supports not (anchor-name:--x){.note{margin:0 auto;position:fixed;inset:auto 12px 12px}}.note-title{letter-spacing:-.02em;margin:6px 0 0;font-size:1.05rem;font-weight:500}.note-desc{color:var(--ink-2);margin:4px 0 0;font-size:.8125rem;line-height:1.45}.proj{grid-template-rows:minmax(0,1fr) auto auto}.proj-frame{view-transition-name:sp-slide}.slide{visibility:hidden;grid-area:1/1;display:grid;position:relative}.slide img{grid-area:1/1}.proj:not([data-js]):has(.chip:first-of-type :checked) .slide:first-of-type,.proj:not([data-js]):has(.chip:nth-of-type(2) :checked) .slide:nth-of-type(2),.proj:not([data-js]):has(.chip:nth-of-type(3) :checked) .slide:nth-of-type(3),.proj:not([data-js]):has(.chip:nth-of-type(4) :checked) .slide:nth-of-type(4),.proj:not([data-js]):has(.chip:nth-of-type(5) :checked) .slide:nth-of-type(5),.proj:not([data-js]):has(.chip:nth-of-type(6) :checked) .slide:nth-of-type(6),.proj:not([data-js]):has(.chip:nth-of-type(7) :checked) .slide:nth-of-type(7),.proj:not([data-js]):has(.chip:nth-of-type(8) :checked) .slide:nth-of-type(8),.proj[data-js] .slide[data-current]{visibility:visible}.slide-cap{font-family:var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--sp-photo-ink);background:#ffffffb8;border-radius:2px;padding:3px 6px;font-size:10px;position:absolute;top:10px;left:10px}.proj-pick{border:0;gap:6px;min-width:0;margin:0;padding:0;display:flex}.chip{width:44px;height:44px;font-family:var(--font-mono);color:var(--ink-2);border:1px solid var(--rule);cursor:pointer;transition:background-color var(--dur-quick), color var(--dur-quick), border-color var(--dur-quick);border-radius:50%;place-items:center;font-size:12px;display:grid;position:relative}.chip input{opacity:0;cursor:pointer;margin:0;position:absolute;inset:0}.chip:has(:checked){color:var(--bg);background:var(--ink);border-color:var(--ink)}@media (hover:hover){.chip:not(:has(:checked)):hover{border-color:var(--ink-2)}}@media (width>=600px) and (aspect-ratio>=5/4){.proj{grid-template-rows:minmax(0,1fr) auto}.proj>.fit{grid-row:1/span 2}.proj .proj-pick{grid-area:2/1}}::view-transition-old(root){animation:none}::view-transition-new(root){animation:none}::view-transition-group(sp-slide){animation-duration:var(--sp-vt-dur);clip-path:inset(0 round 3px)}::view-transition-old(sp-slide){animation:var(--sp-vt-dur) var(--ease-calm) both sp-slide-out}::view-transition-new(sp-slide){animation:var(--sp-vt-dur) var(--ease-calm) both sp-slide-in}:root[data-sp-dir=back]::view-transition-old(sp-slide){animation-name:sp-slide-out-back}:root[data-sp-dir=back]::view-transition-new(sp-slide){animation-name:sp-slide-in-back}@keyframes sp-slide-out{to{filter:brightness(.82);translate:-100%}}@keyframes sp-slide-in{0%{translate:100%}}@keyframes sp-slide-out-back{to{filter:brightness(.82);translate:100%}}@keyframes sp-slide-in-back{0%{translate:-100%}}@media (prefers-reduced-motion:no-preference){.sp-tray{scroll-behavior:smooth}.pin:before{animation:sp-ping var(--signal-period) var(--ease-calm) infinite}.specimen[data-running=false] .pin:before{animation-play-state:paused}}@keyframes sp-ping{0%,55%{box-shadow:0 0 0 0 var(--accent-glow)}to{box-shadow:0 0 0 12px #0000}}@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){.sp-scale{visibility:visible}.sp-mark{left:calc(var(--a) * 100%)}@media (width<=480px){.sp-mark{font-size:0}}.sp-needle{animation:linear both sp-needle;animation-timeline:--sp-tray}.plate-turn{view-timeline:--sp-turn inline;flex-basis:300%}.plate-turn .plate-body{width:33.3333%;position:sticky;left:0}.plate-turn .snap-end,.plate-explode .snap-end{scroll-snap-align:end;width:1px;height:1px;display:block;position:absolute;top:0;right:0}.turn-frames{--ar:1.6;animation:steps(25,jump-none) both sp-turn;animation-timeline:--sp-turn;animation-range:contain}.turn-frames .sp-film{background:0 0;grid-template:1fr/1fr;gap:0}.turn-frames .sp-film img{--sp-d:calc(mod(round(var(--sp-frame)), 12) - var(--i));opacity:max(0, 1 - var(--sp-d) * var(--sp-d));grid-area:1/1}.plate-static{display:none}.sp-hint{font-family:var(--font-mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;color:var(--sp-photo-ink);background:#fffc;border-radius:999px;gap:.6em;margin:0;padding:6px 12px;font-size:11px;display:flex;position:absolute;bottom:10px;left:50%;translate:-50%}.plate-turn .sp-hint{animation:linear both sp-hint;animation-timeline:--sp-turn;animation-range:contain}.plate-explode .sp-hint{animation:linear both sp-hint-out;animation-timeline:--sp-explode;animation-range:contain contain 12%}.plate-explode{view-timeline:--sp-explode inline;flex-basis:200%}.plate-explode .plate-body{width:50%;position:sticky;left:0}.explode-frames{animation:linear both sp-explode;animation-timeline:--sp-explode;animation-range:contain}.explode-frames .sp-film img,.explode-frames .sp-film img:last-child{visibility:visible;--sp-d:calc(round(var(--sp-xp) * var(--sp-last)) - var(--i));opacity:max(0, 1 - var(--sp-d) * var(--sp-d))}.explode-frames .pins{animation:linear both sp-pins;animation-timeline:--sp-explode;animation-range:contain}.hint-fine{display:none}@media (hover:hover) and (pointer:fine){.specimen[data-enhanced] .hint-touch{display:none}.specimen[data-enhanced] .hint-fine{display:inline}}.plate-sheet{view-timeline:--sp-sheet inline}.count{--sp-n:var(--to);counter-reset:sp-n round(var(--sp-n));animation:linear both sp-count;animation-timeline:--sp-sheet;animation-range:entry 15% entry 95%}.count.k{--sp-k:var(--hi);counter-reset:sp-k round(var(--sp-k)) sp-n round(var(--sp-n))}.count:before{content:counter(sp-n)}.count.k:before{content:counter(sp-k) "," counter(sp-n, sp-pad3)}.count-text{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.modules li{animation:linear both sp-rise;animation-timeline:--sp-sheet;animation-range:entry calc(35% + var(--i) * 8%) entry calc(75% + var(--i) * 5%)}.modules li:before{animation:linear both sp-draw;animation-timeline:--sp-sheet;animation-range:entry calc(30% + var(--i) * 8%) entry calc(80% + var(--i) * 4%)}}}@keyframes sp-needle{to{translate:0}}@keyframes sp-turn{0%{--sp-frame:0}to{--sp-frame:24}}@keyframes sp-hint-out{to{opacity:0}}@keyframes sp-explode{0%{--sp-xp:0}to{--sp-xp:1}}@keyframes sp-pins{0%,92%{opacity:0;visibility:hidden}to{opacity:1;visibility:visible}}@keyframes sp-hint{0%,45%,55%,to{opacity:0}49%,51%{opacity:1}}@keyframes sp-count{0%{--sp-n:0;--sp-k:0}}@keyframes sp-rise{0%{opacity:0;translate:2.5rem}}@keyframes sp-draw{0%{transform:scaleX(0)}}
