.spine{display:none}@media (width>=1280px){.spine{display:block}}.spine{pointer-events:none;z-index:5;--spine-x:max(8px, calc(50vw - (var(--page) / 2) - 52px));--spine-gap:28px;inline-size:100%;position:fixed;inset-block:0;inset-inline-start:0}.spine__rail{background:#e9e7e11f;inline-size:1px;position:absolute;inset-block:12vh;inset-inline-start:var(--spine-x)}.spine__labels{flex-direction:column;justify-content:space-between;margin:0;padding:0;list-style:none;display:flex;position:absolute;inset-block:12vh;inset-inline-start:calc(var(--spine-x) + var(--spine-gap))}.spine__label{writing-mode:vertical-rl;font-family:var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim);transition:color var(--dur) var(--ease);font-size:.625rem;line-height:1;transform:rotate(180deg)}.spine__label.is-active{color:var(--ink)}.spine__mark{background:var(--accent);block-size:6px;inline-size:6px;transition:transform .22s var(--ease);will-change:transform;margin-inline-start:-2.5px;position:absolute;inset-block-start:12vh;inset-inline-start:var(--spine-x);transform:translate(0,0)}.trace{display:none}.trace-host{--frame-x:max(0px, calc((100vw - var(--page)) / 2));--spine-x:max(8px, calc(50vw - (var(--page) / 2) - 52px));--trace-out:min(calc((100vw - var(--page)) / 2), 60px);position:relative}@media (width>=1280px){.trace{pointer-events:none;z-index:0;display:block;position:absolute}}.trace--h{background:linear-gradient(90deg,#e9e7e11a,#e9e7e100);block-size:1px}.trace--v{background:linear-gradient(#e9e7e11a,#e9e7e100);inline-size:1px}.trace--loop{inline-size:280px;inset-block-start:-1px;inset-inline-end:calc(-1 * var(--trace-out) + 6px)}.trace--records{inline-size:330px;inset-block-start:34%;inset-inline-end:calc(-1 * var(--trace-out) + 14px)}.trace--mark{background:linear-gradient(#e9e7e100,#e9e7e121);block-size:44px;inline-size:1px;inset-block-start:calc(34% - 44px);inset-inline-end:calc(-1 * var(--trace-out) + 126px)}.trace--mark:after{content:"";background:var(--accent);opacity:.5;block-size:5px;inline-size:5px;position:absolute;inset-block-end:-2px;inset-inline-start:-2px}.trace--console{block-size:190px;inset-block-end:-1px;inset-inline-end:calc(-1 * var(--trace-out) + 26px)}.trace--roles{inline-size:calc(var(--frame-x) + var(--gutter) - var(--spine-x) - 30px);inset-block-start:50%;inset-inline-start:calc(var(--spine-x) + 16px - var(--frame-x) - var(--gutter))}.trace--letter{background:linear-gradient(#e9e7e100,#e9e7e117);block-size:140px;inset-block-start:4%;inset-inline-end:calc(-1 * var(--trace-out) + 10px)}
