.diagram-scene{flex-direction:row;overflow:hidden}.bar-area{position:relative;flex:none;display:flex;padding:.7rem 14px .7rem 1.5rem}.marks{transition:opacity .2s ease .16s,visibility 0s}.bar-area.rail-minimal{z-index:6}.bar-area.rail-minimal .marks{opacity:1;visibility:visible;transition:none}.bar-area.rail-minimal .jump-mark,.bar-area.rail-minimal .marks-line{visibility:hidden;opacity:0}.bar-area.rail-minimal .jump-mark{height:auto;padding:.25rem .6rem;border:1px solid var(--line);border-radius:999px;background:var(--surface);box-shadow:0 6px 16px -8px #00000059;line-height:1.2;transform:translateY(-50%)}.bar-area.rail-minimal .jump-mark.peek,.bar-area.rail-minimal .marks-line.peek{visibility:visible;opacity:1}@media (prefers-reduced-motion: reduce){.marks,.bar-area.rail-minimal .marks{transition:none}}.bar-area.rail-minimal .bar-frame{margin:0 1.1rem 0 0}.bar-area>.rail-toggle{top:.7rem;bottom:.7rem}.bar-frame{position:relative;display:flex;align-self:center;height:80%;margin:0 calc(var(--brand-right, 4.4rem) + .2rem) 0 5.8rem}.bar{position:relative;width:.9rem;border-radius:999px;background:#ffffff0d;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none}.bar:focus{outline:none}.bar:focus-visible{box-shadow:0 0 0 2px var(--terracotta)}.bar-volumes{position:absolute;inset:0;border-radius:inherit;overflow:hidden}.bar-volume{position:absolute;left:0;right:0;background:var(--band);opacity:.35}.bar-volume+.bar-volume{border-top:2px solid var(--black)}.bar-volume span{position:absolute;top:.3rem;left:50%;transform:translate(-50%);font-size:.6rem;font-weight:700;color:var(--black)}.thumb{position:absolute;left:-.2rem;right:-.2rem;min-height:1.4rem;border:2px solid var(--light);border-radius:999px;background:#ffffff2e;pointer-events:none}.bar.active .thumb{border-color:var(--terracotta)}.marks{position:absolute;top:0;bottom:0;left:-5.8rem;right:calc(-1 * var(--brand-right, 4.4rem));pointer-events:none}.marks-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.marks-line{fill:none;stroke:var(--band, var(--muted));stroke-width:1;opacity:.45;transition:opacity .15s,stroke-width .15s}.marks-line.active,.marks-line.hover{opacity:1;stroke-width:1.6}.jump-mark{position:absolute;pointer-events:auto;display:flex;align-items:center;gap:.25rem;height:13px;padding:0 .2rem 0 .25rem;border:none;border-radius:0;background:none;color:var(--muted);font-size:.68rem;line-height:1;transform:translateY(-50%);cursor:pointer}.jump-mark.on-left{padding:0 .25rem 0 .2rem;transform:translate(-100%,-50%)}.jump-mark small{font-size:.6rem;opacity:.75}.jump-mark.name{max-width:136px;font-size:.7rem}.jump-mark.name span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.jump-mark{white-space:nowrap}.jump-mark:hover,.jump-mark.active{color:var(--light)}.jump-mark.active span{color:var(--band, var(--light));font-weight:700}.tiles{--board: 219px;flex:1;min-width:0;overflow-y:auto;scrollbar-width:none;display:grid;grid-template-columns:repeat(var(--columns, 4),calc(var(--board) + 20px));grid-auto-rows:max-content;align-content:start;justify-content:center;gap:1.2rem;padding:1.2rem 1.5rem 2rem 1rem}.tiles::-webkit-scrollbar{display:none}.tile{display:flex;flex-direction:column;min-width:0;padding:10px;border:1px solid var(--line);border-radius:10px;background:#ffffff06;color:var(--light);text-decoration:none;transition:border-color .2s,background .2s}.tile:hover,.tile:focus-visible{border-color:var(--terracotta);background:color-mix(in srgb,var(--accent) 8%,transparent);outline:none}.tile-board{width:var(--board);height:var(--board);border-radius:3px;background:#ffffff0a}.tile-board .board{width:var(--board);box-shadow:0 4px 14px #00000073}.tile-header,.tile-moves{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tile-header{margin-top:.55rem;font-size:.85rem;line-height:1.35}.tile-header b{font-weight:400;color:var(--band, var(--light))}.tile-moves{margin-top:.15rem;font-size:.78rem;line-height:1.45;color:var(--muted)}.tile-games{margin-top:.1rem;font-size:.78rem;line-height:1.45;color:var(--terracotta)}.tiles .empty{grid-column:1 / -1;color:var(--muted)}@media (max-width: 800px){.tiles{gap:.8rem}}@media (max-width: 640px){.bar-area{padding-left:.5rem}.tiles{padding-right:1rem}}