/* Shared live cover. The still sets geometry and remains the WebGL fallback. */
[data-branchline-art] { position:relative; isolation:isolate; overflow:hidden; background:#557792; }
[data-branchline-art="thumbnail"] { aspect-ratio:16/9; }
[data-branchline-art] > canvas { position:absolute; inset:0; width:100%; height:100%; opacity:0; transition:opacity .6s ease; }
[data-branchline-art].is-ready > canvas { opacity:1; }
[data-branchline-art] > img { transition:opacity .6s ease !important; transform:none !important; }
[data-branchline-art].is-ready > img { opacity:0 !important; }
[data-branchline-art="cover"] > canvas { cursor:grab; touch-action:pan-y; }
[data-branchline-art="cover"] > canvas:active { cursor:grabbing; }
[data-branchline-art="cover"] > canvas:focus-visible { outline:2px solid #e2efe9; outline-offset:-4px; }
[data-branchline-art="thumbnail"] > canvas { pointer-events:none; }
.branchline-art__actions { display:flex; align-items:center; gap:5px; }
.work__art-zoom { position:absolute; bottom:10px; right:10px; display:flex; gap:4px; z-index:2; visibility:hidden; }
.work:has(.is-ready) .work__art-zoom { visibility:visible; }
.work__art-zoom button { width:32px; height:32px; display:grid; place-items:center; border:1px solid #ffffff30; border-radius:50%; background:#192d3bb3; color:#fff; font:18px/1 var(--font-sans); cursor:pointer; }
.work__art-zoom button:hover { background:#192d3b; }
.work__art-zoom button:focus-visible { outline:2px solid white; outline-offset:2px; }
[data-art-zoom]:disabled { opacity:.4; cursor:default; }
[data-branchline-art="cover"] > img { object-fit:contain !important; }
.branchline-art__tools { position:absolute; z-index:2; bottom:22px; left:24px; right:24px; display:flex; align-items:center; justify-content:space-between; gap:12px; color:#f0f4f2; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .3s; }
.is-ready .branchline-art__tools { opacity:1; visibility:visible; }
.branchline-art__hint { display:inline-flex; align-items:center; gap:9px; font:12px/1.2 var(--font-sans); letter-spacing:.01em; }
.branchline-art__hint svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.branchline-art__tools button { pointer-events:auto; min-height:36px; padding:8px 12px; border:1px solid #e3eee52e; border-radius:24px; background:#253c4a35; color:inherit; font:11px/1.2 var(--font-sans); cursor:pointer; backdrop-filter:blur(8px); }
.branchline-art__tools button:hover { background:#253c4a70; border-color:#e3eee560; }
.branchline-art__tools button:focus-visible { outline:2px solid white; outline-offset:3px; }
[data-art-status] { position:absolute; bottom:14px; left:24px; right:24px; font-size:11px; color:#fff; }
[data-art-status]:empty { display:none; }
@media(max-width:600px) { .branchline-art__tools { bottom:14px; left:16px; right:16px; } }
@media(prefers-reduced-motion:reduce) { [data-branchline-art] > canvas, [data-branchline-art] > img { transition:none !important; } }