.deck-letterbox{--lb-gutter:clamp(72px, 6vw, 112px);--lb-pad:clamp(18px, 3.4vh, 48px);--lb-w:min(calc(100vw - 2 * var(--lb-gutter)), calc((100dvh - 2 * var(--lb-pad)) * 16 / 9));--lb-h:calc(var(--lb-w) * 9 / 16);--lb-radius:clamp(10px, .8vw, 16px)}@media (aspect-ratio<=13/8){.deck-letterbox{--lb-w:min(calc(100vw - 2 * var(--lb-pad)), calc((100dvh - 2 * var(--lb-gutter)) * 16 / 9))}}.deck-letterbox[data-fullscreen=true]{--lb-gutter:0px;--lb-pad:0px;--lb-radius:0px}.deck-controls{z-index:2;width:calc((100vw - var(--lb-w)) / 2);color:rgb(var(--c-paper) / .9);pointer-events:none;flex-direction:column;justify-content:center;align-items:center;gap:14px;transition-property:opacity,translate,filter;transition-duration:.32s;transition-timing-function:cubic-bezier(.2,0,0,1);display:flex;position:absolute;top:0;bottom:0;right:0}.deck-controls>*{pointer-events:auto;flex-shrink:0}.deck-controls__count{font:500 .625rem / 1 var(--ff-mono);letter-spacing:.08em;font-variant-numeric:tabular-nums;flex-direction:column;align-items:center;gap:4px;margin:0;display:flex}.deck-controls__count strong{color:var(--text);font-weight:500}.deck-controls__count span{color:rgb(var(--c-paper) / .4);flex-direction:column;align-items:center;gap:4px;display:flex}.deck-controls__count span:before{content:"";background:rgb(var(--c-paper) / .28);width:12px;height:1px;display:block}.deck-controls__pill,.deck-controls__rail{flex-direction:column;align-items:center;gap:2px;display:flex}.deck-controls__pill,.deck-controls__tool{background:rgb(var(--c-ink-deep) / .62);box-shadow:inset 0 0 0 1px rgb(var(--c-paper) / .1), inset 0 1px 0 rgb(var(--c-paper) / .08), 0 18px 40px rgb(var(--c-ink-deep) / .35)}.deck-controls__pill{border-radius:999px;padding:4px}.deck-controls__rail button,.deck-controls__step,.deck-controls__tool{cursor:pointer;border:0;border-radius:50%;place-items:center;padding:0;transition-property:color,background,opacity;transition-duration:.18s;transition-timing-function:cubic-bezier(.2,0,0,1);display:grid;position:relative}.deck-controls__rail button,.deck-controls__step{width:40px;height:40px;color:rgb(var(--c-paper) / .46);background:0 0}.deck-controls__rail button{font:500 .5625rem / 1 var(--ff-mono);font-variant-numeric:tabular-nums;height:clamp(24px, calc((100dvh - 480px) / var(--rail-n,10)), 40px)}.deck-controls__rail button:before{content:"";aspect-ratio:1;background:var(--text);opacity:0;filter:blur(4px);border-radius:50%;height:min(30px,100% - 2px);transition-property:opacity,scale,filter;transition-duration:.3s;transition-timing-function:cubic-bezier(.2,0,0,1);position:absolute;top:50%;left:50%;translate:-50% -50%;scale:.25}.deck-controls__rail button span{z-index:1;position:relative}.deck-controls__rail button.is-active{color:rgb(var(--c-ink-deep))}.deck-controls__rail button.is-active:before{opacity:1;filter:blur();scale:1}.deck-controls__step svg,.deck-controls__tool svg{fill:none;stroke:currentColor;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round}.deck-controls__step svg{width:18px;height:18px;transition:rotate .24s cubic-bezier(.2,0,0,1)}.deck-controls__step:disabled{opacity:.3;cursor:default}.deck-controls__tool{width:48px;height:48px;color:rgb(var(--c-paper) / .8)}.deck-controls__tool.is-locked{color:rgb(var(--c-paper) / .3);cursor:not-allowed}.deck-controls__hint{background:rgb(var(--c-paper));color:rgb(var(--c-ink-deep));font:500 .8125rem / 1.2 var(--ff-body);white-space:nowrap;box-shadow:0 10px 30px rgb(var(--c-ink-deep) / .35);pointer-events:none;opacity:0;border-radius:8px;padding:8px 12px;transition-property:opacity,translate;transition-duration:.16s;transition-timing-function:cubic-bezier(.2,0,0,1);position:absolute;top:50%;right:calc(100% + 12px);translate:6px -50%}.deck-controls__tool:focus-visible .deck-controls__hint,.deck-controls__tool[data-hint-open] .deck-controls__hint{opacity:1;translate:0 -50%}@media (hover:hover) and (pointer:fine){.deck-controls__tool:hover .deck-controls__hint{opacity:1;translate:0 -50%}}.deck-controls__tool[aria-busy=true]{cursor:progress}.deck-controls__tool[aria-busy=true] svg{animation:1.1s cubic-bezier(.2,0,0,1) infinite deck-controls-download}@keyframes deck-controls-download{0%{opacity:.3;translate:0 -3px}60%,to{opacity:1;translate:0 1px}}.deck-controls__share{flex-direction:column;align-items:center;gap:6px;display:flex}.deck-controls__tool.deck-controls__share-tool:not(.is-locked){background:rgb(var(--c-paper) / .94);color:rgb(var(--c-ink-deep))}@media (hover:hover) and (pointer:fine){.deck-controls__tool.deck-controls__share-tool:not(.is-locked):hover{background:rgb(var(--c-paper));color:rgb(var(--c-ink-deep))}.deck-controls__tool.deck-controls__share-tool:not(.is-locked){transition-property:color,background,opacity,translate,box-shadow}.deck-controls__tool.deck-controls__share-tool:not(.is-locked):hover{box-shadow:0 4px 0 rgb(var(--c-tea-green)), 0 4px 0 2px rgb(var(--c-ink-deep));transition-duration:.12s;transition-timing-function:steps(2,end);translate:0 -4px}.deck-controls__tool.deck-controls__share-tool:not(.is-locked):hover:active{box-shadow:0 0 0 2px rgb(var(--c-ink-deep));translate:0}.deck-controls__share-tool:not(.is-locked):hover:after{content:"";pointer-events:none;width:4px;height:4px;margin:-2px 0 0 -2px;animation:.42s step-end forwards deck-controls-share-burst;position:absolute;top:50%;left:50%}.deck-controls__share:has(.deck-controls__share-tool:not(.is-locked):hover) .deck-controls__caption{color:rgb(var(--c-tea-green));position:relative}.deck-controls__share:has(.deck-controls__share-tool:not(.is-locked):hover) .deck-controls__caption:before{content:"▶";animation:.8s step-end infinite deck-controls-share-blink;position:absolute;right:calc(100% + 3px)}}@keyframes deck-controls-share-burst{0%{box-shadow:28px 0 rgb(var(--c-tea-green)), -28px 0 rgb(var(--c-tea-green)), 0 28px rgb(var(--c-tea-green)), 0 -28px rgb(var(--c-tea-green)), 20px 20px rgb(var(--c-sun)), -20px 20px rgb(var(--c-sun)), 20px -20px rgb(var(--c-sun)), -20px -20px rgb(var(--c-sun))}33%{box-shadow:32px 0 rgb(var(--c-sun)), -32px 0 rgb(var(--c-sun)), 0 32px rgb(var(--c-sun)), 0 -32px rgb(var(--c-sun)), 24px 24px rgb(var(--c-tea-green)), -24px 24px rgb(var(--c-tea-green)), 24px -24px rgb(var(--c-tea-green)), -24px -24px rgb(var(--c-tea-green))}66%{box-shadow:40px 0 rgb(var(--c-tea-green) / .6), -40px 0 rgb(var(--c-tea-green) / .6), 0 40px rgb(var(--c-tea-green) / .6), 0 -40px rgb(var(--c-tea-green) / .6), 28px 28px rgb(var(--c-sun) / .6), -28px 28px rgb(var(--c-sun) / .6), 28px -28px rgb(var(--c-sun) / .6), -28px -28px rgb(var(--c-sun) / .6)}to{box-shadow:none}}@keyframes deck-controls-share-blink{50%{opacity:0}}.deck-controls__caption{font:500 .5625rem / 1 var(--ff-mono);letter-spacing:.04em;text-transform:uppercase;color:rgb(var(--c-paper) / .7);white-space:nowrap}.deck-controls__share:has(.is-locked) .deck-controls__caption{color:rgb(var(--c-paper) / .3)}.deck-controls__icon{opacity:0;filter:blur(4px);place-items:center;transition-property:opacity,scale,filter;transition-duration:.3s;transition-timing-function:cubic-bezier(.2,0,0,1);display:grid;position:absolute;scale:.25}.deck-controls__icon.is-active{opacity:1;filter:blur();scale:1}.deck-controls__icon svg{width:20px;height:20px}@media (hover:hover) and (pointer:fine){.deck-controls__rail button:not(.is-active):hover,.deck-controls__step:not(:disabled):hover{color:var(--text);background:rgb(var(--c-paper) / .08)}.deck-controls__tool:not(.is-locked):hover{color:var(--text)}}.deck-controls__rail button:focus-visible,.deck-controls__step:focus-visible,.deck-controls__tool:focus-visible{outline:2px solid var(--accent);outline-offset:2px}@media (aspect-ratio<=13/8){.deck-controls__rail button{height:40px}.deck-controls{width:auto;height:calc((100dvh - var(--lb-h)) / 2);flex-direction:row;top:auto;left:0}.deck-controls__count{flex-direction:row;justify-content:flex-end;gap:8px;min-width:56px}.deck-controls__count span{flex-direction:row;gap:8px}.deck-controls__pill,.deck-controls__rail{flex-direction:row}.deck-controls__step svg{rotate:-90deg}.deck-controls__hint{top:auto;bottom:calc(100% + 10px);right:50%;translate:50% 6px}.deck-controls__tool:hover .deck-controls__hint,.deck-controls__tool:focus-visible .deck-controls__hint,.deck-controls__tool[data-hint-open] .deck-controls__hint{translate:50%}.deck-controls>:last-child{margin-inline-end:8px}}.deck-letterbox[data-fullscreen=true] .deck-controls{opacity:0;filter:blur(4px);width:auto;transition-duration:.24s;right:clamp(10px,1.2vw,22px);translate:8px}@media (aspect-ratio<=13/8){.deck-letterbox[data-fullscreen=true] .deck-controls{height:auto;bottom:clamp(10px,1.6vh,22px);right:0;translate:0 8px}}.deck-letterbox[data-fullscreen=true] .deck-controls.is-visible,.deck-letterbox[data-fullscreen=true] .deck-controls:focus-within{opacity:1;filter:blur();translate:0}.deck-letterbox[data-fullscreen=true] .deck-controls:not(.is-visible):not(:focus-within)>*{pointer-events:none}@media (prefers-reduced-transparency:reduce){.deck-controls__pill,.deck-controls__tool{background:rgb(var(--c-ink-deep))}}@media (prefers-reduced-motion:reduce){.deck-controls__hint{transition-property:opacity}.deck-controls,.deck-controls__rail button,.deck-controls__rail button:before,.deck-controls__step,.deck-controls__step svg,.deck-controls__icon{transition-duration:0s}.deck-controls__tool[aria-busy=true] svg{opacity:.5;animation:none}.deck-controls__share-tool:hover:after,.deck-controls__share .deck-controls__caption:before{animation:none}.deck-controls__tool.deck-controls__share-tool:not(.is-locked):hover{transition-duration:0s}}@media (width<=720px),(height<=500px){.deck-letterbox,.deck-letterbox[data-fullscreen=true]{--lb-bar:calc(56px + env(safe-area-inset-bottom));--lb-w:100vw;--lb-h:calc(100dvh - var(--lb-bar));--lb-radius:0px}.deck-controls,.deck-letterbox[data-fullscreen=true] .deck-controls{width:auto;height:var(--lb-bar);padding-bottom:env(safe-area-inset-bottom);border-top:1px solid rgb(var(--c-paper) / .08);background:rgb(var(--c-ink-deep));opacity:1;filter:none;flex-direction:row;gap:12px;inset:auto 0 0;translate:0}.deck-letterbox[data-fullscreen=true] .deck-controls:not(.is-visible):not(:focus-within)>*{pointer-events:auto}.deck-controls__rail{display:none}.deck-controls__count,.deck-controls__count span{flex-direction:row;gap:8px}.deck-controls__count{justify-content:flex-end;min-width:56px}.deck-controls__pill{flex-direction:row;padding:2px}.deck-controls__step{width:44px;height:40px}.deck-controls__step svg{rotate:-90deg}.deck-controls__tool{width:44px;height:44px}.deck-controls>:last-child{margin-inline-end:0}.deck-controls__hint{white-space:normal;width:max-content;max-width:min(260px,80vw);top:auto;bottom:calc(100% + 10px);right:0;translate:0 6px}.deck-controls__tool:hover .deck-controls__hint,.deck-controls__tool:focus-visible .deck-controls__hint,.deck-controls__tool[data-hint-open] .deck-controls__hint{translate:0}.deck-controls__caption{display:none}}
