.lab{grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr);align-items:stretch;gap:clamp(14px,1.6vw,24px);display:grid}.lab__stage{border-radius:28px;min-height:300px;padding:0;position:relative;overflow:hidden}.lab__canvas{aspect-ratio:1.6;cursor:crosshair;touch-action:manipulation;width:100%;display:block}.lab__legend{border:1px solid var(--ck-line);background:color-mix(in srgb, var(--ck-void) 72%, transparent);backdrop-filter:blur(8px);color:var(--ck-muted);letter-spacing:.12em;text-transform:uppercase;pointer-events:none;border-radius:999px;flex-wrap:wrap;gap:6px 16px;padding:8px 14px;font-size:.68rem;font-weight:700;display:flex;position:absolute;bottom:14px;left:16px}.lab__legend span{align-items:center;gap:8px;display:inline-flex}.lab__dot{background:var(--ck-butter);width:8px;height:8px;box-shadow:0 0 10px var(--ck-gold);border-radius:50%}.lab__dot.is-stuck{background:var(--ck-ember);box-shadow:0 0 10px var(--ck-ember)}.lab__ring{border:2px solid var(--ck-head);border-radius:50%;width:11px;height:11px}.lab__hint{border:1px solid var(--ck-line);background:color-mix(in srgb, var(--ck-void) 70%, transparent);backdrop-filter:blur(8px);color:var(--ck-soft);letter-spacing:.1em;text-transform:uppercase;pointer-events:none;border-radius:999px;margin:0;padding:6px 12px;font-size:.68rem;font-weight:700;position:absolute;top:14px;right:16px}.lab__panel{border-radius:28px;align-content:start;gap:16px;padding:clamp(18px,2vw,28px);display:grid}.lab__scores{grid-template-columns:1fr 1fr;gap:10px;display:grid}.lab__score,.lab__mini{border:1px solid var(--ck-line);background:color-mix(in srgb, var(--ck-void) 38%, transparent);border-radius:16px;padding:12px 14px;position:relative;overflow:hidden}.lab__score span,.lab__mini span{color:var(--ck-soft);letter-spacing:.14em;text-transform:uppercase;font-size:.64rem;font-weight:700;display:block}.lab__score b{color:var(--ck-head);letter-spacing:-.05em;font-variant-numeric:tabular-nums;margin-top:4px;font-size:clamp(1.7rem,2.6vw,2.4rem);font-weight:780;line-height:1;display:block}.lab__mini b{color:var(--ck-head);letter-spacing:-.04em;font-variant-numeric:tabular-nums;margin-top:2px;font-size:1.3rem;display:block}.lab__bar{background:var(--ck-line);height:3px;position:absolute;bottom:0;left:0;right:0}.lab__bar:after{content:"";transform-origin:0;transform:scaleX(var(--v,0));background:linear-gradient(90deg, var(--ck-caramel), var(--ck-butter));transition:transform .4s var(--ck-ease);position:absolute;inset:0}.lab__score.is-held .lab__bar:after{background:linear-gradient(90deg,#6fa86c,#bfe3a5)}.lab__status{border-left:2px solid var(--ck-gold);background:color-mix(in srgb, var(--ck-gold) 8%, transparent);min-height:4.6em;color:var(--ck-text);border-radius:0 12px 12px 0;margin:0;padding:12px 14px;font-size:.92rem;line-height:1.5}.lab__controls{gap:14px;display:grid}.lab__range{gap:6px;display:grid}.lab__range span{color:var(--ck-muted);justify-content:space-between;font-size:.8rem;font-weight:650;display:flex}.lab__range output{color:var(--ck-head);font-variant-numeric:tabular-nums}.lab input[type=range]{-webkit-appearance:none;appearance:none;cursor:pointer;background:0 0;width:100%;height:22px;margin:0}.lab input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(90deg, var(--ck-gold), var(--ck-line-strong));border-radius:3px;height:3px}.lab input[type=range]::-moz-range-track{background:linear-gradient(90deg, var(--ck-gold), var(--ck-line-strong));border-radius:3px;height:3px}.lab input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;border:2px solid var(--ck-ink-on-gold);background:var(--ck-butter);width:18px;height:18px;box-shadow:0 0 0 4px color-mix(in srgb, var(--ck-gold) 30%, transparent), 0 0 20px var(--ck-gold);transition:scale .3s var(--ck-ease);border-radius:50%;margin-top:-7.5px}.lab input[type=range]::-moz-range-thumb{border:2px solid var(--ck-ink-on-gold);background:var(--ck-butter);width:14px;height:14px;box-shadow:0 0 0 4px color-mix(in srgb, var(--ck-gold) 30%, transparent), 0 0 20px var(--ck-gold);border-radius:50%}.lab input[type=range]:hover::-webkit-slider-thumb,.lab input[type=range]:focus-visible::-webkit-slider-thumb{scale:1.2}.lab__switch{cursor:pointer;grid-template-columns:44px minmax(0,1fr);align-items:start;gap:12px;display:grid;position:relative}.lab__switch input{opacity:0;cursor:pointer;width:44px;height:26px;margin:0;position:absolute}.lab__switch:before{content:"";border:1px solid var(--ck-line-strong);background:color-mix(in srgb, var(--ck-void) 50%, transparent);border-radius:999px;width:44px;height:26px;transition:background .4s}.lab__switch:after{content:"";background:var(--ck-soft);width:18px;height:18px;transition:translate .45s var(--ck-ease), background .3s, box-shadow .4s;border-radius:50%;position:absolute;top:4px;left:4px}.lab__switch:has(input:checked):before{background:color-mix(in srgb, var(--ck-gold) 38%, transparent)}.lab__switch:has(input:checked):after{background:var(--ck-butter);box-shadow:0 0 18px var(--ck-gold);translate:18px}.lab__switch:has(input:focus-visible):before{outline:2px solid var(--ck-butter);outline-offset:3px}.lab__switch span{color:var(--ck-muted);font-size:.8rem;line-height:1.4;display:block}.lab__switch span b{color:var(--ck-head);font-size:.92rem;font-weight:700;display:block}.lab__buttons{flex-wrap:wrap;gap:8px;display:flex}.lab__buttons .button{min-height:44px;padding:0 1.1rem;font-size:.88rem}.lab__presets{flex-wrap:wrap;grid-column:1/-1;align-items:center;gap:10px;display:flex}.lab__presets p{color:var(--ck-soft);letter-spacing:.18em;text-transform:uppercase;margin:0 6px 0 0;font-size:.72rem;font-weight:700}.lab__presets button{border:1px solid var(--ck-line-strong);background:color-mix(in srgb, var(--ck-void) 44%, transparent);min-height:42px;color:var(--ck-head);font:650 .86rem var(--ck-font);cursor:pointer;border-radius:999px;padding:0 18px;transition:background .3s,color .3s,border-color .3s}.lab__presets button:hover,.lab__presets button[aria-pressed=true]{background:var(--ck-gold);border-color:var(--ck-gold);color:var(--ck-ink-on-gold)}.lab__noscript{color:var(--ck-muted);grid-column:1/-1}@media (width<=960px){.lab{grid-template-columns:minmax(0,1fr)}.lab__stage{min-height:0}.lab__hint{display:none}}@media (width<=560px){.lab__scores{grid-template-columns:1fr 1fr}.lab__legend{gap:4px 10px;padding:6px 10px;bottom:10px;left:10px}}
