.tape-panel,.metrics-sidebar{position:sticky;top:1.2rem;align-self:start;z-index:10}.tape-panel .metrics-card,.metrics-sidebar .metrics-card{background:var(--bc-paper);border-radius:var(--bc-radius);padding:1.6rem 1.4rem 1.5rem 0;box-shadow:var(--bc-shadow-soft);overflow:hidden}.tape-head{padding-left:4.1rem;margin-bottom:1.1rem;display:flex;flex-direction:column;gap:.15rem;position:relative}.tape-head h3{font-family:var(--bc-serif);font-weight:500;font-size:1.35rem;color:var(--bc-ink);margin:0}.tape-progress .tape-progress-line{font-size:.84rem;color:var(--bc-ink-soft);margin:.15rem 0 0 0}.tape-progress .tape-progress-line .count{font-family:var(--bc-serif);color:var(--bc-copper-deep)}.metrics-toggle{display:none;align-items:center;gap:.35rem;background:none;border:none;padding:.25rem .5rem;color:var(--bc-copper-deep);font-family:var(--bc-sans);font-size:.85rem;font-weight:600;cursor:pointer;border-radius:999px;position:absolute;top:0;right:1.4rem}.metrics-toggle:hover,.metrics-toggle:focus-visible{background:var(--bc-copper-tint)}.metrics-toggle:focus-visible{outline:2px solid var(--bc-copper);outline-offset:2px}.metrics-toggle-chevron{width:1rem;height:1rem;min-width:1rem;min-height:1rem;transition:transform .25s ease}.metrics-sidebar.expanded .metrics-toggle-chevron{transform:rotate(180deg)}.metrics-body{display:block}.metrics-list.tape{position:relative;list-style:none;padding:0;margin:0;display:block}.metrics-list.tape::before{content:"";position:absolute;left:1.55rem;top:0;bottom:0;width:1.7rem;background:repeating-linear-gradient(180deg, var(--bc-hairline) 0 1px, transparent 1px 7px) left/6px 100% no-repeat,repeating-linear-gradient(180deg, var(--bc-ink-ghost) 0 1px, transparent 1px 35px) left/10px 100% no-repeat,linear-gradient(90deg, hsl(37, 30%, 88%), hsl(37, 33%, 92%));border-right:1px solid var(--bc-hairline);border-radius:2px}.metrics-list.tape::after{content:"";position:absolute;left:1.55rem;top:0;width:1.7rem;height:var(--tape-fill, 0%);background:repeating-linear-gradient(180deg, hsla(31, 40%, 30%, 0.35) 0 1px, transparent 1px 7px) left/6px 100% no-repeat,linear-gradient(90deg, var(--bc-copper), hsl(31, 45%, 72%));border-radius:2px 2px 0 0;transition:height .7s cubic-bezier(0.3, 0.9, 0.3, 1)}.metric-item{position:relative;padding:.55rem 0 .55rem 4.1rem;z-index:1;cursor:pointer;list-style:none}.metric-item .stop{position:absolute;left:1.55rem;top:50%;width:1.7rem;transform:translateY(-50%);text-align:center;font-family:var(--bc-serif);font-size:.8rem;line-height:1.55rem;z-index:2;color:var(--bc-ink-ghost)}.metric-item .tape-card{display:block;background:rgba(0,0,0,0);border:none;box-shadow:none;border-radius:var(--bc-radius);padding:.7rem .9rem .65rem;transition:background .3s,box-shadow .3s}.metric-item .metric-content{display:block}.metric-item .metric-name{font-family:var(--bc-serif);font-size:1.08rem;font-weight:500;display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;margin:0;color:var(--bc-ink-ghost)}.metric-item .m-abbr{font-family:var(--bc-sans);font-size:.68rem;font-weight:600;letter-spacing:.08em;color:var(--bc-ink-ghost)}.metric-item .metric-desc{display:block;font-size:.8rem;color:var(--bc-ink-ghost);margin:.15rem 0 0 0}.metric-item .metric-desc em{font-style:italic;font-family:var(--bc-serif);color:var(--bc-copper-deep)}.metric-item .metric-desc--open{display:none}.metric-item.locked .tape-card{background:rgba(0,0,0,0)}.metric-item.unlocked .metric-desc--thread,.metric-item.precision .metric-desc--thread{display:none}.metric-item.unlocked .metric-desc--open,.metric-item.precision .metric-desc--open{display:block}.metric-item.unlocked .tape-card{background:#fff;box-shadow:0 1px 2px hsla(35,20%,60%,.22)}.metric-item.unlocked .metric-name{color:var(--bc-plum)}.metric-item.unlocked .stop{color:hsl(31,40%,24%);font-weight:600}.metric-item.unlocked .metric-desc{color:var(--bc-ink-soft)}.metric-item.unlocked:hover .tape-card,.metric-item.unlocked.active .tape-card{box-shadow:0 4px 14px hsla(35,25%,45%,.18)}.metric-item.unlocked.active .tape-card{background:var(--bc-copper-tint)}.metric-item.precision .tape-card{background:#fff;outline:1px dashed var(--bc-copper);outline-offset:-4px;box-shadow:0 1px 2px hsla(35,20%,60%,.22)}.metric-item.precision .m-abbr{color:var(--bc-copper-deep)}.metric-item:focus-visible{outline:2px solid var(--bc-copper);outline-offset:2px}@keyframes ink-in{from{opacity:.25;transform:translateX(6px)}to{opacity:1;transform:none}}.metric-item.unlocking .tape-card{animation:ink-in .45s cubic-bezier(0.2, 0.8, 0.3, 1) both}@media(prefers-reduced-motion: reduce),(prefers-reduced-motion: reduce){.metrics-list.tape::after{transition:none}.metric-item.unlocking .tape-card{animation:none}}html.reduce-motion .metrics-list.tape::after{transition:none}html.reduce-motion .metric-item.unlocking .tape-card{animation:none}.metric-details-area{margin:1.5rem 0 0 4.1rem;padding:1rem;background:#fff;border-radius:var(--bc-radius);border:1px solid var(--bc-hairline);box-shadow:var(--bc-shadow-soft);min-height:80px}.metric-details-area .placeholder-text{color:var(--bc-ink-ghost);text-align:center;font-style:italic;font-family:var(--bc-serif);margin:0;padding:1rem}.metric-details-area h5{margin:0 0 .5rem 0;font-family:var(--bc-serif);font-weight:500;color:var(--bc-ink);font-size:1rem}.metric-details-area p{margin:0;font-size:.9rem;color:var(--bc-ink-soft);line-height:1.5}.metric-details-area strong{color:var(--bc-copper-deep)}.metric-details-area .precision-note{margin-top:.75rem;padding:.75rem;background:var(--bc-copper-tint);border-radius:var(--bc-radius);font-size:.85rem;color:var(--bc-copper-deep)}.metric-details-area .precision-note strong{color:var(--bc-copper-deep)}#nudge-container{margin:1.1rem 0 0 4.1rem}.nudge-message{padding:.7rem .9rem;background:var(--bc-plum-tint);border-left:2px solid var(--bc-plum);border-radius:0 var(--bc-radius) var(--bc-radius) 0;font-size:.84rem;color:var(--bc-ink-soft);margin-bottom:1rem;animation:slide-up .5s ease}.nudge-message .nudge-content strong{display:block;margin-bottom:.25rem;color:var(--bc-plum);font-weight:600}.nudge-message .nudge-content small{display:block;color:var(--bc-ink-soft);margin-top:.25rem}.achievement-badge{margin:1.1rem 0 0 4.1rem;padding:.9rem 1rem;background:var(--bc-copper-tint);border:none;border-left:2px solid var(--bc-copper);border-radius:0 var(--bc-radius) var(--bc-radius) 0;text-align:left;display:none}.achievement-badge.visible{display:block;animation:ink-in .6s ease both}.achievement-badge h4{font-family:var(--bc-serif);font-weight:500;color:var(--bc-copper-deep);margin:0 0 .25rem 0;font-size:1.05rem}.achievement-badge p{color:var(--bc-ink-soft);font-size:.9rem;margin:0}.unlock-toast{position:fixed;bottom:2rem;left:50%;transform:translateX(-50%) translateY(100px);background:var(--bc-plum);color:#fff;padding:1rem 1.5rem;border-radius:999px;box-shadow:0 10px 30px hsla(35,25%,30%,.22);display:flex;align-items:center;gap:1rem;opacity:0;transition:all .5s cubic-bezier(0.3, 0.9, 0.3, 1);z-index:1000;min-width:280px;font-family:var(--bc-sans)}.unlock-toast.visible{opacity:1;transform:translateX(-50%) translateY(0)}.unlock-toast .toast-icon{display:none}.unlock-toast .toast-message{font-weight:600;font-size:1rem}.btn-visual-guide{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--bc-copper-tint);color:var(--bc-copper-deep);border:none;font-family:var(--bc-serif);font-size:12px;font-weight:600;margin-left:8px;cursor:pointer;transition:background .2s ease,color .2s ease;vertical-align:middle}.btn-visual-guide:hover{background:var(--bc-copper);color:#fff}.btn-visual-guide:focus-visible{outline:2px solid var(--bc-copper);outline-offset:2px}dialog.visual-guide-dialog{margin:auto;border:none;border-radius:1.25rem;padding:0;max-width:700px;width:90vw;max-height:85vh;box-shadow:0 20px 40px hsla(35,25%,30%,.25);background:var(--bc-paper);overflow:hidden}dialog.visual-guide-dialog::backdrop{background:hsla(35,20%,15%,.45)}.guide-shell{position:relative;display:flex;flex-direction:column}@media(min-width: 48rem){.guide-shell{flex-direction:row;min-height:22rem}}.guide-close-form{position:absolute;top:.75rem;right:.75rem;margin:0;z-index:2}.guide-close{width:32px;height:32px;border-radius:50%;background:hsla(0,0%,100%,.85);border:none;cursor:pointer;display:grid;place-items:center;justify-content:center;color:var(--bc-ink);transition:background .2s ease}.guide-close .bc-icon{width:1rem;height:1rem;min-width:1rem;min-height:1rem}.guide-close:hover{background:#fff;box-shadow:0 2px 8px hsla(35,25%,30%,.12)}.guide-close:focus-visible{outline:2px solid var(--bc-copper);outline-offset:2px}.guide-figure{flex:1;background:#fff;border-bottom:1px solid var(--bc-hairline);display:flex;align-items:center;justify-content:center;padding:1.5rem;min-height:12rem}@media(min-width: 48rem){.guide-figure{border-bottom:none;border-right:1px solid var(--bc-hairline)}}.guide-figure img{max-width:100%;max-height:100%;-o-object-fit:contain;object-fit:contain;border-radius:8px}.guide-figure .guide-image-fallback{margin:0;color:var(--bc-ink-ghost);font-style:italic;font-family:var(--bc-serif);font-size:.9rem;text-align:center;padding:2rem}.guide-info{flex:1;padding:1.75rem;display:flex;flex-direction:column;justify-content:center}.guide-info h3{font-family:var(--bc-serif);font-weight:500;color:var(--bc-copper-deep);margin:0 0 .75rem 0;font-size:1.3rem}.guide-info>p{color:var(--bc-ink);margin:0 0 1.25rem 0;line-height:1.6}.guide-tips{background:var(--bc-copper-tint);padding:15px;border-radius:var(--bc-radius)}.guide-tips h4{margin:0 0 .5rem 0;font-family:var(--bc-sans);font-size:.9rem;font-weight:600;color:var(--bc-copper-deep)}.guide-tips ul{margin:0;padding-left:1.2rem;counter-reset:guide-step}.guide-tips ul li{font-family:var(--bc-serif);font-size:.85rem;color:var(--bc-ink);margin-bottom:.25rem}.guide-tips ul li:last-child{margin-bottom:0}.measurement-guide-link{display:inline-block;margin-top:.35rem;background:none;border:none;border-bottom:1px dashed var(--bc-copper);padding:0 0 .1rem;color:var(--bc-copper-deep);font-family:var(--bc-sans);font-size:.85rem;cursor:pointer}.measurement-guide-link:hover{color:var(--bc-plum);border-bottom-color:var(--bc-plum)}@keyframes slide-up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media(max-width: 48rem){.tape-panel,.metrics-sidebar{position:static;margin-bottom:1.5rem}.tape-panel .metrics-card,.metrics-sidebar .metrics-card{padding:1.25rem 1.5rem}.tape-head{padding-left:0;margin-bottom:.9rem}.tape-head h3{font-size:1.15rem}.metrics-toggle{display:inline-flex;position:static;margin-top:.4rem}.metrics-body{display:none}.metrics-sidebar.expanded .metrics-body{display:block}.tape-progress{position:relative;margin-top:.5rem}.tape-progress::before{content:"";display:block;height:6px;border-radius:3px;background:repeating-linear-gradient(90deg, var(--bc-hairline) 0 1px, transparent 1px 7px),linear-gradient(90deg, hsl(37, 30%, 88%), hsl(37, 33%, 92%))}.tape-progress::after{content:"";position:absolute;left:0;top:.5rem;height:6px;width:var(--tape-fill, 0%);border-radius:3px;background:linear-gradient(90deg, var(--bc-copper), hsl(31, 45%, 72%));transition:width .7s cubic-bezier(0.3, 0.9, 0.3, 1)}.metrics-list.tape::before,.metrics-list.tape::after{display:none}.metrics-list.tape{padding-left:0}.metric-item{padding-left:2.4rem}.metric-item .stop{left:0}.metric-details-area,#nudge-container,.achievement-badge{margin-left:0}}@media(max-width: 48rem)and (prefers-reduced-motion: reduce){.tape-progress::after{transition:none}}html.reduce-motion .tape-progress::after{transition:none}