@layer base;@layer components{.sm{--sm-w:calc(min(78svh, 780px) * 9 / 16);width:min(100%, var(--sm-w));gap:10px;margin-inline:auto;display:grid}.sm-lg{--sm-w:calc(min(84svh, 880px) * 9 / 16)}.sm-stage{--s:.5;aspect-ratio:9/16;width:100%;box-shadow:0 0 0 2px var(--ink), 0 22px 34px -22px #462d1499;touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;cursor:ew-resize;background:#16120e;border-radius:2px;position:relative;overflow:hidden}.sm-solo .sm-stage{cursor:pointer}.sm-v{object-fit:cover;pointer-events:none;background:#16120e;width:100%;height:100%;position:absolute;inset:0}.sm:not(.sm-solo) .sm-cast{clip-path:inset(0 0 0 calc(var(--s) * 100%))}.sm-edge{top:-2px;bottom:-2px;left:calc(var(--s) * 100%);background:var(--tear) no-repeat 0 0 / 100% 100%;pointer-events:none;width:24px;margin-left:-12px;position:absolute}.sm-tags{pointer-events:none;justify-content:space-between;display:flex;position:absolute;top:12px;left:12px;right:12px}.sm-t-src{opacity:clamp(0, calc((var(--s) - .16) * 10), 1)}.sm-t-cast{opacity:clamp(0, calc((.84 - var(--s)) * 10), 1)}.sm-seal{left:clamp(31px, calc(var(--s) * 100%), calc(100% - 31px));z-index:2;cursor:grab;touch-action:pan-y;outline-offset:4px;width:62px;height:62px;transition:transform .25s cubic-bezier(.2,.9,.3,1.3);position:absolute;top:50%;transform:translate(-50%,-50%)}.sm-lg .sm-seal{left:clamp(40px, calc(var(--s) * 100%), calc(100% - 40px));width:80px;height:80px}.sm-seal img{filter:drop-shadow(0 3px 5px #00000073);pointer-events:none;width:105px;max-width:none;height:auto;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)rotate(-8deg)}.sm-lg .sm-seal img{width:136px}.sm-stage[data-drag="1"] .sm-seal{cursor:grabbing;transform:translate(-50%,-50%)scale(1.08)}.sm-ar{color:#fff;filter:drop-shadow(0 1px 2px #000000b3);opacity:.95;transition:transform .2s;position:absolute;top:50%;transform:translateY(-50%)}.sm-ar-l{right:calc(100% + 3px)}.sm-ar-r{left:calc(100% + 3px)}.sm-seal:hover .sm-ar-l{transform:translate(-3px,-50%)}.sm-seal:hover .sm-ar-r{transform:translate(3px,-50%)}.sm-hint{left:clamp(31px, calc(var(--s) * 100%), calc(100% - 31px));z-index:2;background:var(--card);box-shadow:inset 0 0 0 1.5px var(--ink), 2px 3px 0 #14121066;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;color:var(--ink);pointer-events:none;padding:4px 9px 3px;font-size:10.5px;font-weight:600;animation:2.6s ease-in-out infinite sm-hint;position:absolute;top:calc(50% + 50px);transform:translate(-50%)}.sm-hint:before{content:"";background:var(--card);width:1.5px;height:10px;box-shadow:0 0 0 .5px var(--ink);margin-left:-.75px;position:absolute;bottom:100%;left:50%}.sm-lg .sm-hint{top:calc(50% + 62px)}.sm-stage[data-drag="1"] .sm-hint{display:none}@keyframes sm-hint{50%{transform:translate(-50%,3px)}}.sm-play{width:36px;height:36px;color:var(--paper);opacity:0;pointer-events:none;background:#141210cc;border-radius:50%;place-items:center;transition:opacity .2s .7s;display:grid;position:absolute;bottom:18px;left:12px}.sm-play svg{margin-left:2px}.sm[data-playing="0"] .sm-play{opacity:1}.sm-time{color:var(--paper);letter-spacing:.04em;pointer-events:none;background:#141210c7;padding:3px 7px 2px;font-size:11px;position:absolute;bottom:16px;right:10px}.sm-time:empty{display:none}.sm-stage:after{content:"";pointer-events:none;background:#ffffff47;height:4px;position:absolute;bottom:0;left:0;right:0}.sm-bar{z-index:1;background:var(--red);transform-origin:0;pointer-events:none;height:4px;position:absolute;bottom:0;left:0;right:0;transform:scaleX(0)}.sm-foot{justify-content:space-between;align-items:center;gap:10px;display:flex}.sm-toggle{box-shadow:inset 0 0 0 2px var(--ink);border-radius:var(--radius-sm);background:var(--card);display:inline-flex}.sm-toggle button{height:32px;font-family:var(--font-poster);letter-spacing:.05em;text-transform:uppercase;color:var(--ink);justify-content:center;align-items:center;gap:2px;padding:2px 13px 0;font-size:15px;transition:background-color .15s,color .15s;display:inline-flex}.sm-toggle button+button{box-shadow:inset 2px 0 0 var(--ink)}.sm-toggle button:hover{background:var(--sunk)}.sm-toggle button[aria-pressed=true]{background:var(--ink);color:var(--paper)}.sm-mid{padding:0 10px!important}.sm-foot-t{margin-left:auto}}@media (prefers-reduced-motion:reduce){.sm-seal,.sm-ar,.sm-play{transition:none}.sm-hint{animation:none}}