.flow-mix{align-items:center;gap:var(--space-sm);box-sizing:border-box;width:100%;margin-top:var(--space-lg);padding:var(--space-sm) var(--space);border-radius:var(--radius);display:flex}.flow-mix-thumb{flex:0 0 var(--hit);width:var(--hit);height:var(--hit);border:var(--border);border-radius:var(--radius-sm);background:var(--black-5);color:var(--content);position:relative;overflow:hidden}.flow-mix-thumb img{object-fit:cover;width:100%;height:100%;display:block}.flow-mix-thumb-empty{place-items:center;width:100%;height:100%;display:grid}.flow-mix-thumb-empty .icon{width:22px;height:22px}.flow-mix-thumb-music{background:color-mix(in srgb, var(--title) 88%, black);place-items:center;padding:5px;display:grid}.flow-mix-thumb-music .vinyl{width:100%;height:100%;box-shadow:none}.flow-mix-center{align-items:center;gap:var(--space-xs);flex:auto;min-width:0;display:flex}.flow-mix-mute{flex:0 0 var(--hit);width:var(--hit);height:var(--hit);border-radius:var(--radius-full);background:var(--black-5);color:var(--title);border:0;place-items:center;margin:0;padding:0;display:grid}.flow-mix-mute[aria-pressed=true]{background:var(--title);color:var(--page)}.flow-mix-mute .icon{width:22px;height:22px}.flow-mix[data-muted=true] .flow-mix-thumb{opacity:.55;filter:grayscale(.35)}.flow-mix[data-muted=true] .flow-fader{opacity:.45;pointer-events:none}
.flow-shortcuts{gap:var(--space-sm);width:100%;margin-top:var(--space-lg);flex-direction:column;display:flex}.flow-shortcuts-label{color:var(--content);font-size:var(--text-sm);letter-spacing:.02em;margin:0;font-weight:600}.flow-shortcuts-list{gap:var(--space-sm);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.flow-shortcut{max-width:100%;min-height:var(--hit);border:var(--border);border-radius:var(--radius-full);background:var(--black-5);color:var(--title);cursor:var(--cursor);align-items:center;gap:8px;padding:0 14px 0 10px;display:inline-flex}.flow-shortcut:hover{background:var(--black-12)}.flow-shortcut-favicon{border-radius:4px;flex:none;width:20px;height:20px}.flow-shortcut-name{text-overflow:ellipsis;white-space:nowrap;max-width:10rem;font-size:var(--text-sm);font-weight:600;overflow:hidden}
.scene-visual{--card-w:min(40cqw, 104px);--card-h:calc(var(--card-w) * .72);--card-right:7cqw;--lift:0px;pointer-events:none;position:absolute;inset:0;container-type:size}.scene-visual-media{object-fit:cover;width:100%;height:100%;display:block}.scene-visual-card{top:50cqh;right:var(--card-right);box-sizing:border-box;width:var(--card-w);height:var(--card-h);margin-top:calc(var(--card-h) / -2);background:var(--black-5);box-shadow:var(--shadow-subtle);rotate:-6deg;translate:0 var(--lift);transition:rotate .42s var(--ease-standard), translate .42s var(--ease-standard), box-shadow .42s var(--ease-standard);border:3px solid #fff;border-radius:10px;position:absolute;overflow:hidden}.scene-visual-name{right:calc(var(--card-right) + var(--card-w) / 2);top:calc(50cqh + var(--card-h) / 2 - 8px - 2px);z-index:1;box-sizing:border-box;border-radius:var(--radius-full);background:var(--white);max-width:min(60cqw,160px);color:var(--title);box-shadow:var(--shadow-subtle);font-size:var(--text-xs);text-overflow:ellipsis;white-space:nowrap;opacity:0;transition:opacity .24s ease, translate .24s var(--ease-standard);padding:4px 8px;font-weight:600;line-height:1.1;position:absolute;overflow:hidden;translate:50% 4px}.tile-shell:not([data-hidden=true]) .tile:is(:hover,:focus-visible) .scene-visual{--lift:-8px}.tile-shell:not([data-hidden=true]) .tile:is(:hover,:focus-visible) .scene-visual-card{box-shadow:var(--shadow-strong);rotate:0deg}.tile-shell:not([data-hidden=true]) .tile:is(:hover,:focus-visible) .scene-visual-name{opacity:1;transition-delay:.12s;translate:50%}html[data-tile-motion=off] .scene-visual-card,html[data-tile-motion=off] .scene-visual-name{transition:none!important}
