.str{--str-line:#11111129;--str-tick:#11111157;--str-strong:#121212;--str-muted:#6b6862;z-index:60;font-family:var(--font-mono), ui-monospace, monospace;display:none;position:fixed;top:50%;right:0;transform:translateY(-50%)}@media (min-width:1280px){.str{display:block}}.str[data-tone=dark]{--str-line:#fff3;--str-tick:#ffffff6b;--str-strong:#fff;--str-muted:#ffffff9e}.str-instrument{justify-items:center;gap:14px;width:64px;padding:16px 0;display:grid}.str-track{background:var(--str-line);width:1px;height:44vh;transition:background .4s;display:block;position:relative}.str-fill{background:var(--red,#b10e24);transform-origin:top;position:absolute;inset:0;transform:scaleY(0)}.str-tick{background:var(--str-tick);transform-origin:100%;cursor:pointer;width:18px;height:1px;transition:transform .35s cubic-bezier(.23,1,.32,1),background .3s;position:absolute;right:0;transform:translateY(-.5px)scaleX(.556)}.str-tick:not([data-major]){transform:translateY(-.5px)scaleX(.278)}.str-tick:after{content:"";position:absolute;inset:-4px -6px -4px -4px}.str-tick[data-passed]{background:var(--red,#b10e24)}.str-tick[data-major][data-active]{background:var(--red-bright,#d3132c);transform:translateY(-.5px)scaleX(1)}.str-tick:hover{transform:translateY(-.5px)scaleX(1)}.str-head{background:var(--red-bright,#d3132c);clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);pointer-events:none;width:10px;height:11px;position:absolute;top:0;left:50%;transform:translate(-50%,-50%)}.str-count{letter-spacing:.08em;color:var(--str-muted);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:.62rem;font-weight:500;transition:color .4s}.str-count b{color:var(--str-strong);font-weight:700;transition:color .4s}.str-caption{writing-mode:vertical-rl;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;text-overflow:ellipsis;max-height:26vh;color:var(--str-muted);font-size:.6rem;font-weight:600;transition:color .4s;overflow:hidden;transform:rotate(180deg)}.str-caption em{color:var(--str-strong);font-style:normal;transition:color .4s}.str-panel{overscroll-behavior:contain;-webkit-backdrop-filter:blur(14px)saturate(1.15);backdrop-filter:blur(14px)saturate(1.15);opacity:0;visibility:hidden;scrollbar-width:thin;scrollbar-color:#1113 transparent;background:#fffffff2;border:1px solid #1111111a;border-radius:10px;width:290px;max-height:72vh;padding:16px 12px 14px;transition:opacity .22s,transform .35s cubic-bezier(.22,1,.36,1),visibility 0s linear .35s;position:absolute;top:50%;right:60px;overflow:auto;transform:translate(10px,-50%);box-shadow:0 24px 60px #0c0e112e,0 2px 8px #0c0e1114}.str:hover .str-panel,.str:focus-within .str-panel{opacity:1;visibility:visible;transition-delay:80ms,80ms,0s;transform:translateY(-50%)}.str-panel-title{letter-spacing:.16em;text-transform:uppercase;color:var(--red,#b10e24);align-items:center;gap:8px;margin:0 0 10px 8px;font-size:.6rem;font-weight:700;display:flex}.str-panel-title:before{content:"";background:var(--red,#b10e24);clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);width:8px;height:9px}.str-panel ol{margin:0;padding:0;list-style:none}.str-panel button{text-align:left;cursor:pointer;background:0 0;border:0;border-radius:6px;width:100%;transition:background .18s,color .18s;display:grid}.str-panel button:hover{background:#1111110d}.str-panel button:focus-visible{outline:2px solid var(--red,#b10e24);outline-offset:-2px}.str-panel>ol>li>button{font-family:var(--font-body-stack);color:#1b1c1f;grid-template-columns:26px minmax(0,1fr);align-items:baseline;padding:7px 8px;font-size:.88rem;font-weight:600;line-height:1.3}.str-panel>ol>li>button i{font-family:var(--font-mono), ui-monospace, monospace;letter-spacing:.1em;color:#9a978f;font-size:.6rem;font-style:normal}.str-panel>ol>li[data-active]>button,.str-panel>ol>li[data-active]>button i{color:var(--red,#b10e24)}.str-panel li ol{border-left:1px solid #1111111a;margin:0 0 6px 34px;padding-left:10px}.str-panel li ol button{font-family:var(--font-body-stack);color:#5b5f66;padding:4px 8px;font-size:.8rem;line-height:1.35;position:relative}.str-panel li ol li[data-active] button{color:#111;font-weight:600}.str-panel li ol li[data-active] button:before{content:"";background:var(--red-bright,#d3132c);clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);width:7px;height:8px;position:absolute;top:50%;left:-14px;transform:translateY(-50%)}@media (prefers-reduced-motion:reduce){.str *,.str-panel{transition:none!important}}