.player{margin:1.8em 0;border:1px solid var(--border);border-radius:14px;background:var(--bg-elev);box-shadow:var(--shadow);overflow:hidden;outline:none;font-size:.92rem;line-height:1.6}.player:focus-visible{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}.player-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6em 1em;padding:.7em 1em;border-bottom:1px solid var(--border);background:var(--bg-soft)}.player-title{display:flex;align-items:center;gap:.6em;font-weight:600}.player-badge{font-size:.72rem;font-weight:600;padding:.1em .6em;border-radius:99px;background:var(--primary);color:var(--primary-fg);letter-spacing:.05em}.player-controls{display:flex;flex-wrap:wrap;align-items:center;gap:.45em}.player-controls label{font-size:.82rem;color:var(--fg-soft);display:inline-flex;align-items:center;gap:.35em}.player-controls .input{width:auto}.player-body{display:grid;grid-template-columns:1fr}.player{container-type:inline-size}@container (min-width: 760px){.player.layout-side .player-body{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr)}.player.layout-side .code-panel{border-left:1px solid var(--border);border-top:none}}.player-stage{padding:.8em 1em;min-width:0;display:flex;flex-direction:column;justify-content:center}.player-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:.3em 1.1em;font-size:.78rem;color:var(--fg-soft);margin-top:.3em}.player-legend span{display:inline-flex;align-items:center;gap:.35em}.lg{width:12px;height:12px;border-radius:3px;border:2px solid;display:inline-block}.lg-active{background:var(--v-active-soft);border-color:var(--v-active)}.lg-compare{background:var(--v-compare-soft);border-color:var(--v-compare)}.lg-swap{background:var(--v-swap-soft);border-color:var(--v-swap)}.lg-done{background:var(--v-done-soft);border-color:var(--v-done)}.lg-pivot{background:var(--v-pivot-soft);border-color:var(--v-pivot)}.lg-new{background:var(--v-new-soft);border-color:var(--v-new)}.lg-muted{background:var(--v-muted-soft);border-color:var(--v-muted)}.player-msg{display:flex;gap:.7em;align-items:baseline;padding:.65em 1em;border-top:1px solid var(--border);background:var(--bg-elev);min-height:3.4em}.player-msg code{font-size:.88em;padding:.05em .35em;border-radius:4px;background:var(--bg-soft);border:1px solid var(--border)}.step-no{flex:none;font-family:var(--font-mono);font-size:.75rem;color:var(--fg-muted);background:var(--bg-soft);border-radius:6px;padding:.05em .5em}.player-vars{display:flex;flex-wrap:wrap;gap:.4em;padding:0 1em .6em}.var-chip{display:inline-flex;font-family:var(--font-mono);font-size:.78rem;border:1px solid var(--border);border-radius:6px;overflow:hidden}.var-chip b{font-weight:600;padding:.05em .45em;background:var(--primary-soft);color:var(--primary)}.var-chip span{padding:.05em .5em}.player-bar{display:flex;align-items:center;gap:.8em;padding:.6em 1em;border-top:1px solid var(--border);background:var(--bg-soft)}.pb-buttons{display:flex;gap:.35em}.pb-play{min-width:82px;justify-content:center}.pb-range{flex:1;accent-color:var(--primary);min-width:60px}.pb-speed{width:auto}@media(max-width:560px){.player-bar{flex-wrap:wrap}.pb-range{order:3;flex-basis:100%}}.code-panel{border-top:1px solid var(--border);display:flex;flex-direction:column;min-width:0;background:var(--bg-code)}.player.layout-below .code-panel{border-left:none;border-top:1px solid var(--border)}.code-panel-title{font-size:.75rem;color:var(--fg-muted);padding:.4em .9em;border-bottom:1px solid var(--border)}.code-panel-body{position:relative;overflow:auto;max-height:380px;padding:.4em 0}.code-panel pre{margin:0;font-size:.78rem;line-height:1.65}.cl{display:flex;padding-right:.8em;border-left:3px solid transparent;transition:background .2s}.cl.on{background:var(--primary-soft);border-left-color:var(--primary)}.ln{flex:none;width:2.6em;text-align:right;padding-right:.9em;color:var(--fg-muted);opacity:.6;user-select:none}.lc{white-space:pre}.tk-kw{color:#cf222e}.tk-type{color:#8250df}.tk-num{color:#0550ae}.tk-str{color:#0a3069}.tk-com{color:#6e7781;font-style:italic}.tk-fn{color:#6639ba}:root[data-theme=dark] .tk-kw{color:#ff7b72}:root[data-theme=dark] .tk-type{color:#d2a8ff}:root[data-theme=dark] .tk-num{color:#79c0ff}:root[data-theme=dark] .tk-str{color:#a5d6ff}:root[data-theme=dark] .tk-com{color:#8b949e}:root[data-theme=dark] .tk-fn{color:#d2a8ff}.player.layout-below .code-panel-body{max-height:240px}.split-side{padding:.8em 1em;border-top:1px solid var(--border);font-size:.86rem}@container (min-width: 640px){.player-body.split{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}.split-side{border-top:none;border-left:1px solid var(--border)}}