@layer components{.mic__view{gap:var(--space-2);display:grid}.mic__view .segmented{justify-self:start}.mic__graph{gap:var(--space-1);margin:0;display:grid}.mic__graph svg,.mic__spectrum{width:100%;height:var(--space-8);border-radius:var(--radius-sm);background:var(--color-sunken)}.mic__zone{fill:var(--color-ok-fill);opacity:.18}.mic__area{fill:var(--color-accent);opacity:.75}.mic__graph-caption{justify-content:space-between;gap:var(--space-3);font-size:var(--text-xs);color:var(--color-text-3);display:flex}.mic__spectrum{padding:0 var(--space-1);align-items:flex-end;gap:1px;display:flex;overflow:hidden}.mic__spectrum span{background:var(--color-accent);transform-origin:bottom;will-change:transform;border-radius:1px 1px 0 0;flex:1;height:100%}.mic__card{gap:var(--space-3);padding:var(--space-4);border-radius:var(--radius-lg);border:var(--border-w) solid var(--color-border);background:var(--color-surface);display:grid}.mic__card-title{font-size:var(--text-md);font-weight:var(--weight-semibold)}.mic__progress{height:var(--space-2);border-radius:var(--radius-full);background:var(--color-track);overflow:hidden}.mic__progress span{background:var(--color-accent);transform-origin:0;height:100%;transition:transform var(--dur-fast) linear;display:block}@media (prefers-reduced-motion:reduce){.mic__progress span{transition:none}}.mic__clip{gap:var(--space-3);grid-template-columns:auto minmax(0,1fr);align-items:center;display:grid}@container (width<=420px){.mic__clip{grid-template-columns:1fr}}.mic__wave{height:var(--space-7);padding:0 var(--space-1);border-radius:var(--radius-sm);background:var(--color-sunken);align-items:center;gap:1px;display:flex;position:relative;overflow:hidden}.mic__wave span:not(.mic__playhead){background:var(--color-text-3);border-radius:1px;flex:1;height:100%}.mic__wave span[data-cut]{background:var(--color-danger-fill)}.mic__playhead{background:var(--color-accent);width:2px;position:absolute;top:0;bottom:0}.mic__audio{width:100%}.mic__clip-info{align-items:center;gap:var(--space-3);flex-wrap:wrap;display:flex}.mic__ready{gap:var(--space-2);display:grid}.mic__checks{gap:var(--space-1);padding:0;list-style:none;display:grid}.mic__checks li{align-items:center;gap:var(--space-2);min-height:var(--target-s);grid-template-columns:auto minmax(0,1fr) auto;display:grid}.mic__checks svg{width:var(--icon-m);height:var(--icon-m)}.mic__checks strong{font-weight:var(--weight-semibold);text-align:right}.mic__checks [data-check=pass] svg{color:var(--color-ok)}.mic__checks [data-check=warn] svg{color:var(--color-warn)}.mic__checks [data-check=fail] svg{color:var(--color-danger)}.mic__checks [data-check=skip] svg{color:var(--color-text-3)}.mic__settings{border:var(--border-w) solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface)}.mic__settings summary{cursor:pointer;min-height:var(--target-min);padding:var(--space-2) var(--space-4);font-weight:var(--weight-medium);align-items:center;display:flex}.mic__settings{min-width:0}.mic__settings-body{gap:var(--space-3);padding:0 var(--space-4) var(--space-4);grid-template-columns:minmax(0,1fr);display:grid}.mic__settings-body .select{width:100%;min-width:0}.mic__facts-title{font-size:var(--text-sm);font-weight:var(--weight-semibold);margin-top:var(--space-2)}.mic__facts{gap:var(--space-1) var(--space-4);font-size:var(--text-sm);grid-template-columns:repeat(auto-fill,minmax(min(100%,14rem),1fr));margin:0;display:grid}.mic__facts div{justify-content:space-between;gap:var(--space-3);padding-block:var(--space-1);border-bottom:var(--border-w) solid var(--color-border);display:flex}.mic__facts dt{color:var(--color-text-2)}.mic__facts dd{font-weight:var(--weight-medium);text-align:right;overflow-wrap:anywhere;margin:0}.webcam__stage{width:100%;aspect-ratio:var(--webcam-ar,16 / 9);border-radius:var(--radius-md);background:var(--color-test-black);max-height:70dvh;position:relative;overflow:hidden}.webcam__video{object-fit:contain;background:var(--color-test-black);width:100%;height:100%}.webcam__video[data-mirror=true]{transform:scaleX(-1)}.webcam__badge{top:var(--space-3);left:var(--space-3);align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);background:color-mix(in srgb, var(--color-test-black) 60%, transparent);color:var(--color-test-white);font-size:var(--text-xs);font-weight:var(--weight-semibold);pointer-events:none;display:inline-flex;position:absolute}.webcam__badge:before{content:"";width:var(--space-2);height:var(--space-2);border-radius:var(--radius-full);background:var(--color-danger-fill)}.webcam__grid{pointer-events:none;background:linear-gradient(to right, transparent calc(100% / 3 - 1px), color-mix(in srgb, var(--color-test-white) 55%, transparent) calc(100% / 3 - 1px), color-mix(in srgb, var(--color-test-white) 55%, transparent) calc(100% / 3), transparent calc(100% / 3)), linear-gradient(to right, transparent calc(200% / 3 - 1px), color-mix(in srgb, var(--color-test-white) 55%, transparent) calc(200% / 3 - 1px), color-mix(in srgb, var(--color-test-white) 55%, transparent) calc(200% / 3), transparent calc(200% / 3)), linear-gradient(to bottom, transparent calc(100% / 3 - 1px), color-mix(in srgb, var(--color-test-white) 55%, transparent) calc(100% / 3 - 1px), color-mix(in srgb, var(--color-test-white) 55%, transparent) calc(100% / 3), transparent calc(100% / 3)), linear-gradient(to bottom, transparent calc(200% / 3 - 1px), color-mix(in srgb, var(--color-test-white) 55%, transparent) calc(200% / 3 - 1px), color-mix(in srgb, var(--color-test-white) 55%, transparent) calc(200% / 3), transparent calc(200% / 3));position:absolute;inset:0}.webcam__readings{gap:var(--space-2);display:grid}.webcam__readings .meter__row{flex-wrap:wrap;margin:0}.webcam__chart{gap:var(--space-2);margin:0;display:grid}.webcam__chart-box{height:var(--space-9);border:var(--border-w) solid var(--color-border);border-radius:var(--radius-md);background:var(--color-sunken);position:relative;overflow:hidden}.webcam__chart-box svg{width:100%;height:100%;display:block}.webcam__chart-line{fill:none;stroke:var(--color-accent);stroke-width:2px;vector-effect:non-scaling-stroke;stroke-linejoin:round}.webcam__chart-ref{stroke:var(--color-ok-fill);stroke-width:1px;stroke-dasharray:4 3;vector-effect:non-scaling-stroke}.webcam__chart-label{left:var(--space-2);font-size:var(--text-xs);color:var(--color-text-2);position:absolute;transform:translateY(-110%)}.webcam__picture{border:var(--border-w) solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface)}.webcam__picture summary{min-height:var(--target-min);padding:var(--space-2) var(--space-4);cursor:pointer;font-weight:var(--weight-medium);align-items:center;display:flex}.webcam__picture-body{gap:var(--space-4);padding:0 var(--space-4) var(--space-4);display:grid}.webcam__control-label{justify-content:space-between;gap:var(--space-3);font-size:var(--text-sm);font-weight:var(--weight-medium);display:flex}.webcam__save{align-items:center;gap:var(--space-2) var(--space-3);flex-wrap:wrap;display:flex}.webcam__save .tool-panel__hint{margin:0}.speaker__stage{gap:var(--space-3);grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.speaker__side{align-content:center;justify-items:center;gap:var(--space-2);min-height:9rem;padding:var(--space-4) var(--space-2);border-radius:var(--radius-lg);border:var(--border-w) solid var(--color-border-strong);background:var(--color-surface);color:var(--color-text);text-align:center;transition:background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);-webkit-tap-highlight-color:transparent;display:grid;position:relative}.speaker__side:hover{background:var(--color-sunken)}.speaker__side:active{transform:scale(.98)}.speaker__side[data-playing=true]{border-color:var(--color-accent);background:var(--color-accent-subtle)}.speaker__icons{gap:var(--space-1);color:var(--color-text-2);display:inline-flex;position:relative}.speaker__side[data-playing=true] .speaker__icons{color:var(--color-accent)}.speaker__icons svg{width:var(--icon-xl);height:var(--icon-xl)}.speaker__icons--both svg{width:calc(var(--icon-xl) - var(--space-3));height:calc(var(--icon-xl) - var(--space-3))}.speaker__icon--left{transform:scaleX(-1)}.speaker__icons:before,.speaker__icons:after{content:"";inset:calc(-1 * var(--space-2));border-radius:var(--radius-full);border:calc(var(--border-w) * 2) solid var(--color-accent);opacity:0;pointer-events:none;position:absolute}.speaker__side[data-playing=true] .speaker__icons:before{animation:speaker-ring calc(var(--dur-slow) * 3.5) var(--ease-exit) infinite}.speaker__side[data-playing=true] .speaker__icons:after{animation:speaker-ring calc(var(--dur-slow) * 3.5) var(--ease-exit) calc(var(--dur-slow) * 1.4) infinite}@keyframes speaker-ring{0%{opacity:.6;transform:scale(.85)}to{opacity:0;transform:scale(1.5)}}@media (prefers-reduced-motion:reduce){.speaker__side[data-playing=true] .speaker__icons:before{opacity:.6;animation:none}.speaker__side[data-playing=true] .speaker__icons:after{animation:none}}.speaker__name{font-size:var(--text-lg);font-weight:var(--weight-semibold)}.speaker__state{align-items:center;gap:var(--space-1);font-size:var(--text-sm);color:var(--color-text-2);min-height:var(--icon-m);display:inline-flex}.speaker__state svg{width:var(--icon-s);height:var(--icon-s)}.speaker__state[data-state=played]{color:var(--color-ok)}.speaker__state[data-state=playing]{color:var(--color-accent);font-weight:var(--weight-medium)}.speaker__status{font-size:var(--text-md);color:var(--color-text-2);min-height:calc(var(--text-md) * var(--leading-body))}.speaker__status strong{color:var(--color-text)}.speaker__options{gap:var(--space-1);display:grid}.speaker__ask{gap:var(--space-4);padding:var(--space-5);border-radius:var(--radius-lg);background:var(--color-sunken);border:var(--border-w) solid var(--color-border);display:grid}.speaker__ask-title{font-size:var(--text-xl);font-weight:var(--weight-semibold)}.speaker__fix{gap:var(--space-4);padding:var(--space-5);border-radius:var(--radius-lg);background:var(--color-surface);border:var(--border-w) solid var(--color-border-strong);display:grid}.speaker__fix .help-list{max-width:none}.speaker__fix .help-list ul{padding-left:var(--space-5);gap:var(--space-1);display:grid}.speaker__more{gap:var(--space-4);padding-top:var(--space-5);border-top:var(--border-w) solid var(--color-border);display:grid}.speaker__more-title{font-size:var(--text-xl);font-weight:var(--weight-semibold)}.speaker__checks{gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));display:grid}.speaker__check{gap:var(--space-3);padding:var(--space-4);border-radius:var(--radius-lg);border:var(--border-w) solid var(--color-border);background:var(--color-surface);align-content:start;display:grid}.speaker__check-title{font-size:var(--text-md);font-weight:var(--weight-semibold)}.speaker__check .small{color:var(--color-text-2)}.speaker__pan{gap:var(--space-1);display:grid}.speaker__label-row{justify-content:space-between;align-items:center;gap:var(--space-3);display:flex}.speaker__value{font-size:var(--text-sm);font-weight:var(--weight-medium);font-variant-numeric:tabular-nums}.speaker__row{align-items:center;gap:var(--space-3);flex-wrap:wrap;display:flex}.speaker__chips{gap:var(--space-2);flex-wrap:wrap;display:flex}.speaker__check .btn[aria-pressed=true]{border-color:var(--color-accent);background:var(--color-accent-subtle);color:var(--color-text);box-shadow:inset 0 0 0 1px var(--color-accent)}.speaker__progress{height:var(--space-2);border-radius:var(--radius-full);background:var(--color-track);overflow:hidden}.speaker__progress span{background:var(--color-accent);transform-origin:0;height:100%;display:block}.tone__head{justify-content:space-between;align-items:flex-start;gap:var(--space-3);flex-wrap:wrap;display:flex}.tone__display{gap:var(--space-2);display:grid}.tone__note{align-items:baseline;gap:var(--space-2);color:var(--color-text-2);flex-wrap:wrap;display:flex}.tone__note-name{color:var(--color-text);font-size:var(--text-xl);font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums}.tone__freq{gap:var(--space-3);display:grid}.tone__freq--titled{padding:var(--space-4);border:var(--border-w) solid var(--color-border);border-radius:var(--radius-lg)}.tone__freq-title{justify-content:space-between;align-items:baseline;gap:var(--space-3);font-weight:var(--weight-semibold);display:flex}.tone__exact{align-items:flex-end;gap:var(--space-3);flex-wrap:wrap;display:flex}.tone__number{width:9rem}.tone__slider{gap:var(--space-1);display:grid}.tone__mix{gap:var(--space-4) var(--space-6);grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));display:grid}.tone__control{gap:var(--space-1);align-content:start;display:grid}.tone__label-row{justify-content:space-between;align-items:center;gap:var(--space-3);min-height:var(--target-min);display:flex}.tone__value{font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text);font-variant-numeric:tabular-nums}.tone__actions{align-items:center;gap:var(--space-3);flex-wrap:wrap;display:flex}.tone__actions .tone__spacer{flex:1}.tone__status{font-size:var(--text-sm);color:var(--color-text-2)}.tone__error{font-size:var(--text-sm);color:var(--color-danger)}.tone__number[aria-invalid=true]{border-color:var(--color-danger)}.tone__presets{gap:var(--space-2);display:grid}.tone__chips{gap:var(--space-2);flex-wrap:wrap;display:flex}.tone__chips .btn[aria-pressed=true]{border-color:var(--color-accent);background:var(--color-accent-subtle);color:var(--color-text);box-shadow:inset 0 0 0 1px var(--color-accent)}.tone__sweep{gap:var(--space-3);display:grid}.tone__sweep-fields{align-items:flex-start;gap:var(--space-3);flex-wrap:wrap;display:flex}.tone__progress{height:var(--space-2);border-radius:var(--radius-full);background:var(--color-track);overflow:hidden}.tone__progress span{background:var(--color-accent);transform-origin:0;height:100%;display:block}.tone .segmented{flex-wrap:wrap}.tone__display .readout--m .readout__value{overflow-wrap:anywhere}.pitch__head{justify-content:space-between;align-items:center;gap:var(--space-3);flex-wrap:wrap;display:flex}.pitch__main{justify-content:space-between;align-items:flex-end;gap:var(--space-4) var(--space-6);flex-wrap:wrap;display:flex}.pitch__note{gap:var(--space-1);display:grid}.pitch__note-value{min-width:3ch;font-size:var(--text-readout);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-wordmark);font-variant-numeric:tabular-nums;align-items:baseline;line-height:1;display:inline-flex}.pitch__acc{align-self:flex-start;font-size:.6em}.pitch__octave{color:var(--color-text-2);margin-left:var(--space-1);font-size:.5em}.pitch__placeholder,.pitch__main[data-stale=true] :is(.pitch__note-value,.pitch__octave,.readout__value,.readout__unit){color:var(--color-text-3)}.cents{gap:var(--space-2);display:grid}.cents__track{height:var(--space-7);border-radius:var(--radius-md);background:var(--color-track);position:relative}.cents__zone{background:color-mix(in srgb, var(--color-ok-fill) 22%, transparent);border-inline:var(--border-w) solid color-mix(in srgb, var(--color-ok-fill) 55%, transparent);position:absolute;top:0;bottom:0}.cents__ticks{pointer-events:none;justify-content:space-between;align-items:flex-end;display:flex;position:absolute;inset:0}.cents__tick{width:var(--border-w);background:var(--color-border-strong);height:30%}.cents__tick[data-major=true]{height:55%}.cents__tick[data-center=true]{background:var(--color-text-2);height:100%}.cents__rail{will-change:transform;transition:transform var(--dur-fast) var(--ease-standard);pointer-events:none;position:absolute;inset:0}.cents__needle{left:50%;top:calc(-1 * var(--space-1));bottom:calc(-1 * var(--space-1));width:var(--space-1);margin-left:calc(var(--space-1) / -2);border-radius:var(--radius-full);background:var(--color-text-3);box-shadow:0 0 0 var(--border-w) var(--color-surface);position:absolute}.cents__needle[data-tone=ok]{background:var(--color-ok-fill)}.cents__needle[data-tone=warn]{background:var(--color-warn-fill)}.cents__needle[data-tone=neutral]{opacity:.4}.cents__scale{font-size:var(--text-xs);color:var(--color-text-3);font-variant-numeric:tabular-nums;grid-template-columns:repeat(5,minmax(0,1fr));display:grid}.cents__scale span{text-align:center}.cents__scale span:first-child{text-align:left}.cents__scale span:last-child{text-align:right}.pitch__chart{gap:var(--space-2);display:grid}.pitch__canvas{border-radius:var(--radius-md);background:var(--color-sunken);border:var(--border-w) solid var(--color-border);width:100%;height:8rem;display:block}.pitch__settings{align-items:flex-start;gap:var(--space-4) var(--space-6);flex-wrap:wrap;display:flex}.pitch__a4{align-items:center;gap:var(--space-2);display:flex}.pitch__a4 .input{text-align:center;width:5.5rem}.pitch__a4 .btn{font-size:var(--text-xl)}.cents__needle[data-off=true]{opacity:.6}.pitch__strings-wrap{gap:var(--space-2);display:grid}.pitch__strings-head{justify-content:space-between;align-items:baseline;gap:var(--space-2);flex-wrap:wrap;display:flex}.pitch__strings{gap:var(--space-2);grid-template-columns:repeat(auto-fit,minmax(min(100%,3rem),1fr));display:grid}.pitch__string{justify-content:center;align-items:center;gap:var(--space-1);min-height:var(--target-min);padding:0 var(--space-2);border:var(--border-w) solid var(--color-border-strong);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text);font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums;display:inline-flex}.pitch__string:hover{background:var(--color-sunken)}.pitch__string-oct{font-size:var(--text-xs);color:var(--color-text-2);margin-left:1px}.pitch__string svg{width:var(--icon-s);height:var(--icon-s);color:var(--color-ok)}.pitch__string[data-target=true]{border-color:var(--color-accent);box-shadow:inset 0 0 0 1px var(--color-accent)}.pitch__string[aria-pressed=true]{background:var(--color-accent-subtle);border-color:var(--color-accent)}.pitch__string[data-tuned=true]{border-color:var(--color-ok-fill)}.pitch__string[data-tuned=true][data-target=true]{box-shadow:inset 0 0 0 1px var(--color-ok-fill)}.pitch__settings .select{min-width:0;max-width:100%}.pitch__steady{font-size:var(--text-lg);font-weight:var(--weight-semibold);white-space:nowrap}.pitch__play{align-items:center;gap:var(--space-2) var(--space-3);flex-wrap:wrap;display:flex}.tool-panel__toolbar.kbd__toolbar{margin-bottom:0}.capture.kbd__area{text-align:start;place-items:stretch stretch;gap:var(--space-4);cursor:pointer;container:kbd/inline-size}.capture.kbd__area[data-active=true]{cursor:default}.kbd__head{gap:var(--space-1);text-align:center;min-height:calc(var(--space-8) + var(--space-3));align-content:center;justify-items:center;display:grid}.kbd__title{font-size:var(--text-xl);font-weight:var(--weight-semibold);color:var(--color-text);line-height:var(--leading-title)}.kbd__last{justify-content:center;align-items:baseline;gap:var(--space-2) var(--space-3);flex-wrap:wrap;display:flex}.kbd__key{font-size:var(--text-3xl);font-weight:var(--weight-semibold);line-height:var(--leading-title);color:var(--color-text);overflow-wrap:anywhere}.kbd__code kbd{font-size:var(--text-sm)}.kbd__hint{font-size:var(--text-sm);color:var(--color-text-2)}.kbd__hint[data-holding=true]{color:var(--color-warn);font-weight:var(--weight-semibold)}.kbd__extra{font-family:var(--font-mono);overflow-wrap:anywhere}.kbd-map{overscroll-behavior-x:contain;border-radius:var(--radius-md);overflow-x:auto}.kbd-map__svg{width:100%;height:auto;display:none}.kbd-map__svg--compact{min-width:28rem;display:block}.kbd__pan-hint{font-size:var(--text-xs);color:var(--color-text-3);text-align:center}@container kbd (width>=28rem){.kbd__pan-hint{display:none}}@container kbd (width>=36rem){.kbd-map__svg--compact{display:none}.kbd-map__svg--tkl{display:block}}@container kbd (width>=48rem){.kbd-map__svg--tkl{display:none}.kbd-map__svg--full{display:block}}@supports selector(:has(*)){.kbd-map:focus-visible{outline:none}.kbd__area:has(.kbd-map:focus-visible){outline:var(--focus-ring) solid var(--color-focus);outline-offset:var(--focus-offset)}}.kbd-key__cap{fill:var(--color-surface);stroke:var(--color-border-strong);stroke-width:1px;transition:fill var(--dur-fast) var(--ease-standard), stroke var(--dur-fast) var(--ease-standard)}.kbd-key__label{fill:var(--color-text-2);font-family:var(--font-sans);font-weight:var(--weight-medium)}.kbd-key[data-state=down] .kbd-key__cap{fill:var(--color-accent);stroke:var(--color-accent)}.kbd-key[data-state=down] .kbd-key__label{fill:var(--color-on-accent);font-weight:var(--weight-semibold)}.kbd-key__dot{fill:var(--color-on-accent)}.kbd-key[data-state=ok] .kbd-key__cap{fill:color-mix(in srgb, var(--color-ok) 14%, var(--color-surface));stroke:var(--color-ok)}.kbd-key[data-state=ok] .kbd-key__label{fill:var(--color-text)}.kbd-key__tick{fill:none;stroke:var(--color-ok);stroke-width:2px;stroke-linecap:round;stroke-linejoin:round}.kbd-key[data-state=held] .kbd-key__cap{fill:color-mix(in srgb, var(--color-warn) 20%, var(--color-surface));stroke:var(--color-warn);stroke-width:2px;stroke-dasharray:4 3}.kbd-key[data-state=held] .kbd-key__label{fill:var(--color-text)}.kbd-key__warn path{fill:none;stroke:var(--color-warn);stroke-width:2px;stroke-linecap:round}.kbd-key__warn circle{fill:var(--color-warn)}.kbd-key[data-state=chatter] .kbd-key__cap{fill:color-mix(in srgb, var(--color-warn) 20%, var(--color-surface));stroke:var(--color-warn);stroke-width:2px}.kbd-key[data-state=chatter] .kbd-key__label{fill:var(--color-text)}.kbd-key__twice{fill:none;stroke:var(--color-warn);stroke-width:2px;stroke-linecap:round}.kbd__reading{font-size:var(--text-sm);color:var(--color-text-2);max-width:68ch}.kbd__sources{color:var(--color-text-3)}.kbd__result-line{overflow-wrap:anywhere}.kbd-missing{font-size:var(--text-sm)}.kbd-missing summary{cursor:pointer;font-weight:var(--weight-medium);color:var(--color-text);padding-block:var(--space-2)}.kbd-missing__list{gap:var(--space-1) var(--space-2);color:var(--color-text-2);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.kbd-missing__list li{padding:0 var(--space-2);border:var(--border-w) solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-sunken);white-space:nowrap}.kbd-legend{gap:var(--space-2) var(--space-5);font-size:var(--text-sm);color:var(--color-text-2);flex-wrap:wrap;padding:0;list-style:none;display:flex}.kbd-legend li{align-items:center;gap:var(--space-2);display:inline-flex}.kbd-legend__swatch{width:var(--icon-l);height:var(--icon-l);flex:none}.kbd-log{max-height:14rem;padding:var(--space-3) var(--space-4);border:var(--border-w) solid var(--color-border);border-radius:var(--radius-md);background:var(--color-sunken);overflow-y:auto}.kbd-log__list{gap:var(--space-1);font-size:var(--text-sm);margin:0;padding:0;list-style:none;display:grid}.kbd-log__row{gap:var(--space-3);grid-template-columns:4.5rem minmax(0,1fr) minmax(0,1fr);display:grid}.kbd-log__row code{overflow-wrap:anywhere}.kbd-log__type,.kbd-log__key{color:var(--color-text-2);overflow-wrap:anywhere}.kbd__toggles{gap:var(--space-2) var(--space-4);flex-wrap:wrap;display:flex}.kbd-key__count{font-variant-numeric:tabular-nums}.kbd-rollover{gap:var(--space-2);padding:var(--space-4);border:var(--border-w) solid var(--color-border);border-radius:var(--radius-md);display:grid}.kbd-rollover__title{font-size:var(--text-md)}.kbd-rollover__held{align-items:center;gap:var(--space-1) var(--space-2);min-height:var(--target-min);font-size:var(--text-sm);flex-wrap:wrap;display:flex}.kbd-rollover__chip{font-size:var(--text-sm)}.kbd-type{gap:var(--space-2);justify-items:start;display:grid}.kbd-type .field{width:100%}.kbd-type__input{resize:vertical;width:100%;font-family:var(--font-mono)}.capture.mouse__area{gap:var(--space-4);cursor:crosshair}.mouse__copy{gap:var(--space-1);max-width:40ch;display:grid}.mouse__title{font-size:var(--text-lg);font-weight:var(--weight-semibold);color:var(--color-text);line-height:var(--leading-title)}.mouse-map{width:calc(var(--space-9) + var(--space-5));height:auto;overflow:visible}.mouse-map__body{fill:var(--color-surface);stroke:var(--color-border-strong);stroke-width:1.5px}.mouse-map__arrow{fill:var(--color-text-3);transition:fill var(--dur-fast) var(--ease-standard)}.mouse-map__arrow[data-on=true]{fill:var(--color-accent)}.mouse-part[data-state=down] .mouse-map__arrow{fill:var(--color-on-accent)}.mouse-part__cap{fill:var(--color-surface);stroke:var(--color-border-strong);stroke-width:1.5px;transition:fill var(--dur-fast) var(--ease-standard), stroke var(--dur-fast) var(--ease-standard)}.mouse-part[data-state=down] .mouse-part__cap{fill:var(--color-accent);stroke:var(--color-accent)}.mouse-part[data-state=ok] .mouse-part__cap{fill:color-mix(in srgb, var(--color-ok) 14%, var(--color-surface));stroke:var(--color-ok)}.mouse-part[data-state=chatter] .mouse-part__cap{fill:color-mix(in srgb, var(--color-warn) 20%, var(--color-surface));stroke:var(--color-warn);stroke-dasharray:4 3}.mouse-part__dot{fill:var(--color-on-accent)}.mouse-part__tick{fill:none;stroke:var(--color-ok);stroke-width:2px;stroke-linecap:round;stroke-linejoin:round}.mouse-part__warn path{fill:none;stroke:var(--color-warn);stroke-width:2px;stroke-linecap:round}.mouse-part__warn circle{fill:var(--color-warn)}.mouse-table{border-collapse:collapse;width:100%;font-size:var(--text-sm)}.mouse-table th,.mouse-table td{padding:var(--space-2) var(--space-3);text-align:start;vertical-align:middle;border-bottom:var(--border-w) solid var(--color-border)}.mouse-table th:first-child,.mouse-table td:first-child{padding-inline-start:0}.mouse-table th:last-child,.mouse-table td:last-child{padding-inline-end:0}.mouse-table thead th{font-size:var(--text-xs);font-weight:var(--weight-medium);color:var(--color-text-2);text-transform:uppercase;letter-spacing:.04em}.mouse-table tbody th{font-weight:var(--weight-semibold)}.mouse-table .mouse-table__num{text-align:end;font-variant-numeric:tabular-nums}.mouse-table__status{align-items:center;gap:var(--space-2);color:var(--color-text-2);display:inline-flex}.mouse-table tr[data-state=ok] .mouse-table__status{color:var(--color-text)}.mouse-table tr[data-state=chatter] .mouse-table__status{color:var(--color-warn);font-weight:var(--weight-semibold)}.mouse-swatch{width:var(--icon-m);height:var(--icon-m);flex:none}.mouse-table-wrap{overflow-x:auto;container:mouse-table/inline-size}.mouse-table__hold-inline{margin-top:var(--space-1);font-size:var(--text-xs);color:var(--color-text-2);display:none}@container mouse-table (width<=26rem){.mouse-table__hold{display:none}.mouse-table__hold-inline{display:block}}.mouse__stats.stat-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,6.5rem),1fr))}.mouse-table__note{margin-top:var(--space-1);font-size:var(--text-xs);color:var(--color-warn);font-weight:var(--weight-medium);display:block}.mouse__readings{gap:var(--space-2);font-size:var(--text-sm);color:var(--color-text-2);max-width:68ch;display:grid}.mouse-targets{gap:var(--space-3);padding:var(--space-4);border:var(--border-w) solid var(--color-border);border-radius:var(--radius-md);display:grid}.mouse-targets__title{font-size:var(--text-md)}.mouse-targets__idle{gap:var(--space-3);justify-items:start;display:grid}.mouse-targets__run{gap:var(--space-2);display:grid}.mouse-targets__bar{justify-content:space-between;align-items:center;gap:var(--space-3);display:flex}.mouse-targets__box{cursor:crosshair;border:var(--border-w) dashed var(--color-border-strong);border-radius:var(--radius-md);background:var(--color-sunken);touch-action:manipulation;height:16rem;position:relative;overflow:hidden}.mouse-targets__target{width:var(--target-min);height:var(--target-min);border:2px solid var(--color-accent);border-radius:var(--radius-full);background:radial-gradient(circle, var(--color-accent) 0 25%, var(--color-surface) 26% 55%, var(--color-accent) 56% 100%);cursor:pointer;padding:0;position:absolute;transform:translate(-50%,-50%)}.mouse-targets__result:focus{outline:none}.tool-panel__toolbar.cps__toolbar{margin-bottom:0}.capture.cps__area{cursor:pointer;-webkit-touch-callout:none;min-height:16rem;position:relative;overflow:hidden}.cps__area[data-phase=locked]{cursor:default}.cps__record-line{min-height:var(--target-min);align-items:center;display:flex}.cps__result{display:grid}.cps__result:focus-visible{border-radius:var(--radius-lg)}.cps__idle{justify-items:center;gap:var(--space-2);display:grid}.cps__icon{width:var(--space-8);height:var(--space-8);border-radius:var(--radius-full);background:var(--color-accent-subtle);color:var(--color-accent);margin-bottom:var(--space-2);place-items:center;display:grid}.cps__icon svg{width:var(--icon-l);height:var(--icon-l)}.cps__title{font-size:var(--text-2xl);font-weight:var(--weight-semibold);line-height:var(--leading-title);color:var(--color-text)}.cps__live{gap:var(--space-5);width:100%;max-width:30rem;color:var(--color-text);display:grid}.cps__readouts{gap:var(--space-3);grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.cps__readouts .readout{justify-items:center}.cps-progress{height:var(--meter-h);border-radius:var(--radius-full);background:var(--color-track);overflow:hidden}.cps-progress__fill{border-radius:inherit;background:var(--color-accent);transform-origin:0;will-change:transform;height:100%;display:block}.cps__record{align-items:center;gap:var(--space-2) var(--space-3);flex-wrap:wrap;display:flex}.cps__copy-status{margin-top:var(--space-3);color:var(--color-ok);font-weight:var(--weight-medium)}.cps__copy-fallback{margin-top:var(--space-3)}.cps__share{width:100%;min-height:calc(var(--space-8) + var(--space-5));resize:vertical;font:inherit}.cps__toolbar{gap:var(--space-3);flex-wrap:wrap}.cps__toolbar .segmented{flex-wrap:wrap}.cps__idle,.cps__live{position:relative}.cps__mark{width:var(--space-5);height:var(--space-5);margin:calc(var(--space-5) / -2) 0 0 calc(var(--space-5) / -2);border:2px solid var(--color-accent);border-radius:var(--radius-full);pointer-events:none;opacity:0;animation:cps-mark var(--dur-slow) var(--ease-exit) 1 both;position:absolute}@keyframes cps-mark{0%{opacity:.8}to{opacity:0}}@media (prefers-reduced-motion:reduce){.cps__mark{display:none}}.cps-chart{gap:var(--space-2);max-width:48rem;margin:0;display:grid}.cps-chart__title{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--color-text)}.cps-chart__svg{width:100%;height:auto;display:block;overflow:visible}.cps-chart__grid{stroke:var(--color-border);stroke-width:1px}.cps-chart__tick{fill:var(--color-text-2);font-size:var(--text-xs);font-variant-numeric:tabular-nums}.cps-chart__bar{fill:var(--color-accent)}.cps-chart__bar:hover{fill:var(--color-accent-hover)}.cps-chart__avg{stroke:var(--color-text);stroke-width:1px;stroke-dasharray:4 3}.cps-chart__legend{align-items:center;gap:var(--space-2);font-size:var(--text-xs);color:var(--color-text-2);display:flex}.cps-chart__swatch{width:var(--space-4);border-top:1px dashed var(--color-text)}.cps-chart__details summary{cursor:pointer;font-size:var(--text-sm);color:var(--color-text-2);min-height:var(--target-s);align-items:center;display:flex}.cps-chart__table{border-collapse:collapse;font-size:var(--text-sm);max-height:16rem}.cps-chart__table th,.cps-chart__table td{text-align:right;padding:var(--space-1) var(--space-3);border-bottom:var(--border-w) solid var(--color-border)}.tool-panel__toolbar.space__toolbar{margin-bottom:0}.capture.space__area{cursor:pointer;gap:var(--space-4);min-height:16rem}.space__area[data-phase=locked]{cursor:default}.space__record-line{min-height:var(--target-min);align-items:center;display:flex}.space__result:focus-visible{border-radius:var(--radius-lg)}.space__idle{justify-items:center;gap:var(--space-2);display:grid}.space__title{font-size:var(--text-2xl);font-weight:var(--weight-semibold);line-height:var(--leading-title);color:var(--color-text)}.space__live{gap:var(--space-5);width:100%;max-width:30rem;color:var(--color-text);display:grid}.space__readouts{gap:var(--space-4);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.space__readouts .readout{justify-items:center}.space-progress{height:var(--meter-h);border-radius:var(--radius-full);background:var(--color-track);overflow:hidden}.space-progress__fill{border-radius:inherit;background:var(--color-accent);transform-origin:0;will-change:transform;height:100%;display:block}.space-key{width:min(100%, calc(var(--space-9) * 2 + var(--space-7)));min-height:var(--target-min);border:var(--border-w) solid var(--color-border-strong);border-bottom-width:var(--space-1);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text-2);font-size:var(--text-sm);font-weight:var(--weight-medium);transition:transform var(--dur-fast) var(--ease-standard);place-items:center;display:grid}.space-key[data-down=true]{transform:translateY(var(--space-1)) scaleY(.94);background:var(--color-accent);border-color:var(--color-accent);color:var(--color-on-accent)}.space__result{display:grid}.space__record{align-items:center;gap:var(--space-2) var(--space-3);flex-wrap:wrap;display:flex}.space__toolbar .segmented{flex-wrap:wrap}.space__result{gap:var(--space-4);grid-template-columns:minmax(0,1fr)}.space__reading{font-size:var(--text-sm);color:var(--color-text-2)}.space-chart{gap:var(--space-2);padding:var(--space-4);border:var(--border-w) solid var(--color-border);border-radius:var(--radius-md);margin:0;display:grid}.space-chart__title{font-size:var(--text-md);font-weight:var(--weight-semibold);color:var(--color-text)}.space-chart__plot{gap:var(--space-1);display:grid}.space-chart__peak{font-size:var(--text-xs);color:var(--color-text-3)}.space-chart__svg{width:100%;height:var(--space-9);border-bottom:var(--border-w) solid var(--color-border-strong);display:block}.space-chart__svg rect{fill:var(--color-accent)}.space-chart__axis{font-size:var(--text-xs);color:var(--color-text-3);justify-content:space-between;display:flex}.reaction__area{cursor:pointer;-webkit-touch-callout:none;min-height:16rem;transition:none}.reaction__area[data-phase=waiting]{border-style:solid;border-color:var(--color-border-strong);background:var(--color-sunken);color:var(--color-text)}.reaction__area[data-phase=go]{border-style:solid;border-color:var(--color-ok-fill);background:var(--color-ok-fill);color:var(--color-on-accent)}.reaction__area[data-phase=early]{border-style:solid;border-color:var(--color-warn)}.reaction__area[data-phase=between],.reaction__area[data-phase=done]{border-style:solid;border-color:var(--color-accent);background:var(--color-accent-subtle);color:var(--color-text)}.reaction__area[data-phase=done]{cursor:default}.reaction__content{justify-items:center;gap:var(--space-2);max-width:36ch;display:grid}.reaction__icon{width:var(--icon-l);height:var(--icon-l);color:var(--color-accent)}.reaction__area[data-phase=early] .reaction__icon{color:var(--color-warn)}.reaction__title{font-size:var(--text-3xl);font-weight:var(--weight-semibold);line-height:var(--leading-title);color:inherit}.reaction__area[data-phase=ready] .reaction__title{color:var(--color-text)}.reaction__text{font-size:var(--text-md);color:inherit}.reaction__area[data-phase=go] .reaction__title{font-size:var(--text-4xl)}.reaction__trials{gap:var(--space-2);grid-template-columns:repeat(auto-fill,minmax(min(100%,7rem),1fr));padding:0;list-style:none;display:grid}.reaction__trial{gap:var(--space-1);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);border:var(--border-w) solid var(--color-border);background:var(--color-surface);min-height:var(--target-min);display:grid}.reaction__trial[data-state=current]{border-color:var(--color-accent)}.reaction__trial[data-state=done]{background:var(--color-sunken)}.reaction__trial-label{font-size:var(--text-xs);color:var(--color-text-2);font-weight:var(--weight-medium)}.reaction__trial-value{font-size:var(--text-lg);font-weight:var(--weight-semibold);min-height:calc(var(--text-lg) * var(--leading-body))}.reaction__trial-label{gap:var(--space-1) var(--space-2);flex-wrap:wrap;align-items:baseline;display:flex}.reaction__trial-mark{font-weight:var(--weight-semibold);color:var(--color-text)}.reaction__trial[data-mark=fast]{border-color:var(--color-ok)}.reaction__trial[data-mark=slow]{border-color:var(--color-border-strong)}.reaction__footer{justify-content:space-between}.reaction__device{gap:var(--space-1);padding-top:var(--space-3);border-top:var(--border-w) solid var(--color-border);display:grid}.reaction__device-title{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--color-text)}.reaction__device-list{gap:var(--space-1);padding-left:var(--space-5);font-size:var(--text-sm);color:var(--color-text-2);display:grid}.reaction__toolbar{gap:var(--space-3);flex-wrap:wrap;align-items:center;display:flex}.reaction__toolbar .segmented{flex-wrap:wrap}.reaction-chart{gap:var(--space-2);max-width:32rem;margin:0;display:grid}.reaction-chart__title{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--color-text)}.reaction-chart__svg{width:100%;height:auto;display:block;overflow:visible}.reaction-chart__bar{fill:var(--color-accent)}.reaction-chart__bar[data-mark=fast]{fill:var(--color-ok-fill)}.reaction-chart__base{stroke:var(--color-border-strong);stroke-width:1px}.reaction-chart__avg{stroke:var(--color-text);stroke-width:1px;stroke-dasharray:4 3}.reaction-chart__value{fill:var(--color-text);font-size:var(--text-xs);font-variant-numeric:tabular-nums}.reaction-chart__tick{fill:var(--color-text-2);font-size:var(--text-xs)}.reaction-chart__legend{align-items:center;gap:var(--space-2);font-size:var(--text-xs);color:var(--color-text-2);display:flex}.reaction-chart__swatch{width:var(--space-4);border-top:1px dashed var(--color-text)}.typing__bar{gap:var(--space-3);flex-wrap:wrap;justify-content:space-between;align-items:center;display:flex}.typing__live{gap:var(--space-5);display:flex}.typing__metric{justify-items:end;display:grid}.typing__metric-label{font-size:var(--text-xs);color:var(--color-text-2);font-weight:var(--weight-medium);text-transform:uppercase;letter-spacing:.04em}.typing__metric-value{font-size:var(--text-2xl);font-weight:var(--weight-semibold);line-height:var(--leading-title)}.typing__words{--typing-line:calc(var(--text-lg) * 1.9);height:calc(var(--typing-line) * 3 + var(--space-4) * 2);padding:var(--space-4);border-radius:var(--radius-md);background:var(--color-sunken);border:var(--border-w) solid var(--color-border);font-family:var(--font-mono);font-size:var(--text-lg);line-height:var(--typing-line);color:var(--color-text-2);flex-wrap:wrap;align-content:flex-start;column-gap:.6em;display:flex;position:relative;overflow:hidden}@container tool (width>=37.5rem){.typing__words{--typing-line:calc(var(--text-xl) * 1.9);font-size:var(--text-xl)}}.typing__words[data-phase=done]{opacity:.6}.typing__word{white-space:nowrap;border-radius:var(--radius-sm)}.typing__word[data-state=correct]{color:var(--color-text-3)}.typing__word[data-state=incorrect]{color:var(--color-danger);text-decoration:underline wavy var(--color-danger);text-underline-offset:.25em}.typing__word[data-state=current]{background:var(--color-accent-subtle);color:var(--color-text);box-shadow:0 0 0 var(--space-1) var(--color-accent-subtle)}.typing__char[data-state=pending]{color:var(--color-text-2)}.typing__char[data-state=correct]{color:var(--color-text)}.typing__char[data-state=incorrect],.typing__char[data-state=extra]{color:var(--color-danger);text-decoration:underline;text-decoration-thickness:var(--focus-ring)}.typing__char[data-state=extra]{text-decoration-style:wavy}.typing__char[data-caret]{box-shadow:inset var(--focus-ring) 0 0 var(--color-accent)}.typing__entry{gap:var(--space-3);flex-wrap:wrap;display:flex}.typing__input{min-width:0;font-family:var(--font-mono);font-size:var(--text-lg);flex:14rem}.typing__input:disabled{opacity:.6}.typing__foot{justify-content:space-between}.typing__result:focus{outline:none}.typing__result:focus-visible{outline:var(--focus-ring) solid var(--color-focus);outline-offset:var(--focus-offset);border-radius:var(--radius-lg)}.typing__words[data-phase=ready],.typing__words[data-phase=running]{cursor:text}.typing__missed{gap:var(--space-2);display:grid}.typing__missed-title{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--color-text)}.typing__chips{gap:var(--space-2);flex-wrap:wrap;padding:0;list-style:none;display:flex}.typing__chip{align-items:baseline;gap:var(--space-2);padding:var(--space-1) var(--space-3);border-radius:var(--radius-sm);border:var(--border-w) solid var(--color-border);background:var(--color-surface);font-size:var(--text-sm);overflow-wrap:anywhere;max-width:100%;display:inline-flex}.typing__chip--word{font-family:var(--font-mono)}.typing__key{font-family:var(--font-mono);font-weight:var(--weight-semibold);color:var(--color-text)}.typing__typed{color:var(--color-danger)}.typing__bar .segmented{flex-wrap:wrap}.typing__options{gap:var(--space-1) var(--space-5);flex-wrap:wrap;display:flex}.typing-chart,.typing-keys{gap:var(--space-2);margin:0;display:grid}.typing-chart{max-width:48rem}.typing-chart__title{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--color-text)}.typing-chart__legend{gap:var(--space-1) var(--space-4);font-size:var(--text-xs);color:var(--color-text-2);flex-wrap:wrap;padding:0;list-style:none;display:flex}.typing-chart__legend li{align-items:center;gap:var(--space-2);display:inline-flex}.typing-chart__key{width:var(--space-4);display:inline-block}.typing-chart__key--wpm{border-top:2px solid var(--color-accent)}.typing-chart__key--raw{border-top:2px dashed var(--color-text-3)}.typing-chart__key--err{width:var(--space-2);height:var(--space-2);background:var(--color-danger);border-radius:var(--radius-full)}.typing-chart__svg{width:100%;height:auto;display:block;overflow:visible}.typing-chart__grid{stroke:var(--color-border);stroke-width:1px}.typing-chart__tick{fill:var(--color-text-2);font-size:var(--text-xs);font-variant-numeric:tabular-nums}.typing-chart__wpm{fill:none;stroke:var(--color-accent);stroke-width:2px;stroke-linejoin:round;stroke-linecap:round}.typing-chart__raw{fill:none;stroke:var(--color-text-3);stroke-width:1px;stroke-dasharray:4 3;stroke-linejoin:round}.typing-chart__err{stroke:var(--color-danger);stroke-width:2px;stroke-linecap:round}.typing-chart__hit{fill:#0000}.typing-chart__hit:hover{fill:var(--color-accent-subtle);fill-opacity:.5}.typing-keys__board{gap:var(--space-1);font-family:var(--font-mono);font-size:var(--text-xs);max-width:34rem;display:grid}.typing-keys__row{gap:var(--space-1);grid-template-columns:repeat(11,minmax(0,1fr));display:grid}.typing-keys__row[data-row="1"]{padding-left:4.54545%}.typing-keys__row[data-row="2"]{padding-left:9.09091%}.typing-keys__row[data-row="3"]{padding-left:13.6986%}.typing-keys__key{aspect-ratio:1;border-radius:var(--radius-sm);border:var(--border-w) solid var(--color-border);background:var(--color-surface);min-width:0;color:var(--color-text-2);place-items:center;display:grid}.typing-keys__key--space{aspect-ratio:auto;min-height:var(--space-5);grid-column:3/10}.typing-keys__key[data-level="1"]{background:color-mix(in srgb, var(--color-danger) 15%, var(--color-surface));color:var(--color-text)}.typing-keys__key[data-level="2"]{background:color-mix(in srgb, var(--color-danger) 35%, var(--color-surface));color:var(--color-text)}.typing-keys__key[data-level="3"]{background:color-mix(in srgb, var(--color-danger) 60%, var(--color-surface));color:var(--color-text)}.typing-keys__key[data-level="4"]{background:var(--color-danger-fill);border-color:var(--color-danger-fill);color:var(--color-on-accent)}.typing__live--wide{justify-content:flex-start}.typing__live--wide .typing__metric{justify-items:start}.typing__sentence{gap:var(--space-3);padding:var(--space-4);border-radius:var(--radius-md);background:var(--color-sunken);border:var(--border-w) solid var(--color-border);cursor:text;display:grid}.typing__sentence[data-phase=done]{opacity:.6;cursor:default}.typing__sentence-now{font-size:var(--text-xl);line-height:var(--leading-body-cjk);color:var(--color-text-2);overflow-wrap:anywhere}.typing__sentence-next{font-size:var(--text-md);line-height:var(--leading-body-cjk);color:var(--color-text-3);overflow-wrap:anywhere}.typing__char[data-state=composing]{color:var(--color-text);text-underline-offset:.2em;text-decoration:underline dotted}@container tool (width>=37.5rem){.typing__sentence-now{font-size:var(--text-2xl)}}.dp__strip{gap:var(--space-2);grid-template-columns:repeat(auto-fill,minmax(min(100%,4.5rem),1fr));padding:0;list-style:none;display:grid}.dp__swatch{gap:var(--space-1);width:100%;min-height:var(--target-min);padding:var(--space-1);border:var(--border-w) solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text-2);font-size:var(--text-xs);font-weight:var(--weight-medium);justify-items:stretch;display:grid}.dp__swatch:hover{border-color:var(--color-border-strong);color:var(--color-text)}.dp__swatch-fill{height:var(--space-7);border-radius:var(--radius-sm);border:var(--border-w) solid var(--color-border-strong);display:block}.dp__swatch-name{text-align:center}.dp__overlay{z-index:var(--z-dialog);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;outline:none;width:100vw;height:100dvh;transition:none;position:fixed;inset:0}.dp__overlay[data-hint=false]{cursor:none}.dp__hint{left:50%;bottom:calc(var(--space-5) + env(safe-area-inset-bottom,0));width:max-content;max-width:calc(100% - var(--space-5) * 2 - env(safe-area-inset-left,0) - env(safe-area-inset-right,0));justify-items:center;gap:var(--space-2);padding:var(--space-4) var(--space-5);border-radius:var(--radius-lg);border:var(--border-w) solid var(--color-border);background:var(--color-surface);color:var(--color-text);box-shadow:var(--shadow-3);text-align:center;cursor:default;opacity:1;visibility:visible;transition:opacity var(--dur-base) var(--ease-standard);display:grid;position:absolute;transform:translate(-50%)}.dp__hint[data-visible=false]:not(:focus-within){opacity:0;visibility:hidden;transition:opacity var(--dur-slow) var(--ease-exit), visibility 0s linear var(--dur-slow)}.dp__hint-title{font-weight:var(--weight-semibold)}.dp__hint-text{font-size:var(--text-sm);color:var(--color-text-2)}.dp__result{outline:none}.dp__judge{gap:var(--space-3);border:0;min-width:0;margin:0;padding:0;display:grid}.dp__judge-q{font-weight:var(--weight-semibold);padding:0}.dp__judge-actions{gap:var(--space-2);flex-wrap:wrap;display:flex}.dp__steps{gap:var(--space-2);padding-left:var(--space-5);color:var(--color-text-2);margin:0;display:grid}.dp__hint-actions{justify-content:center;gap:var(--space-2);flex-wrap:wrap;display:flex}.dp__hint-actions .btn[aria-pressed=true]{background:var(--color-accent-subtle);border-color:var(--color-accent)}.dp__overlay[data-marking=true]{cursor:crosshair}.dp__grid{pointer-events:none;--dp-line:color-mix(in srgb, var(--color-test-gray) 70%, transparent);background-image:linear-gradient(to right, var(--dp-line) 1px, transparent 1px), linear-gradient(to bottom, var(--dp-line) 1px, transparent 1px);background-size:calc(100% / var(--dp-grid)) calc(100% / var(--dp-grid));position:absolute;inset:0}.dp__mark,.dp__cross{width:var(--space-7);height:var(--space-7);pointer-events:none;position:absolute;transform:translate(-50%,-50%)}.dp__mark{border-radius:var(--radius-full);border:2px solid var(--color-test-white);box-shadow:0 0 0 2px var(--color-test-black), inset 0 0 0 2px var(--color-test-black)}.dp__cross:before,.dp__cross:after{content:"";position:absolute}.dp__cross:before{width:var(--space-1);background:linear-gradient(to right, var(--color-test-black) 33%, var(--color-test-white) 33% 67%, var(--color-test-black) 67%);mask-image:linear-gradient(to bottom, var(--color-test-black) 35%, transparent 35% 65%, var(--color-test-black) 65%);top:0;bottom:0;left:50%;transform:translate(-50%)}.dp__cross:after{height:var(--space-1);background:linear-gradient(to bottom, var(--color-test-black) 33%, var(--color-test-white) 33% 67%, var(--color-test-black) 67%);mask-image:linear-gradient(to right, var(--color-test-black) 35%, transparent 35% 65%, var(--color-test-black) 65%);top:50%;left:0;right:0;transform:translateY(-50%)}.dp__badge{top:calc(var(--space-3) + env(safe-area-inset-top,0));left:calc(var(--space-3) + env(safe-area-inset-left,0));padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);background:var(--color-surface);color:var(--color-text);font-size:var(--text-xs);font-weight:var(--weight-semibold);box-shadow:var(--shadow-2);pointer-events:none;position:absolute}.dp__makers{gap:var(--space-1) var(--space-4);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}}