@layer components{.shoebox-turn-wrap{--typology-film-paper:#f4f1ea;background:var(--typology-video-ground,var(--color-typology-video));flex-direction:column;width:100%;height:100%;display:flex}.shoebox-turn{isolation:isolate;background:var(--typology-film-paper);cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;flex:1;width:100%;min-height:0;position:relative}.shoebox-turn:active{cursor:grabbing}.shoebox-turn:focus-visible{outline:2px solid var(--color-gold-dark);outline-offset:6px}.shoebox-turn>img,.shoebox-turn>canvas{object-fit:contain;background:var(--typology-frame-ground,#e0e0e0);mix-blend-mode:multiply;width:100%;height:100%;position:absolute;inset:0}.shoebox-turn>canvas{opacity:0}.shoebox-turn.is-drawn>canvas{opacity:1}.shoebox-turn.is-drawn>img{visibility:hidden}.shoebox-turn-hint{border:1px solid var(--rule);color:var(--color-muted);letter-spacing:.04em;white-space:nowrap;pointer-events:none;transition:opacity .6s var(--ease);align-self:center;align-items:center;gap:12px;margin-top:12px;padding:8px 16px;font-size:12px;display:inline-flex}.shoebox-turn-hint>span{color:var(--color-gold-dark)}.shoebox-turn-wrap.is-touched .shoebox-turn-hint{opacity:0}}