.numbers{border-radius:var(--r-plate);background:#f9f6f2eb;box-shadow:0 1px 2px #1e242a2e}.numbers>summary{cursor:pointer;min-height:48px;font-size:var(--fs-sm);align-items:center;gap:10px;padding:0 16px;font-weight:650;list-style:none;display:flex}.numbers>summary::-webkit-details-marker{display:none}.numbers>summary:before{content:"";border:5px solid #0000;border-left:7px solid var(--ink);width:0;height:0;transition:transform var(--t-quick) var(--ease);border-right:0}.numbers[open]>summary:before{transform:rotate(90deg)}.numbers-body{font-size:var(--fs-xs);gap:10px;padding:0 16px 16px;display:grid}.numbers-body h3{font-size:var(--fs-md);margin-top:6px}.numbers-body p{color:var(--ink-2)}.knob{border:0;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px 16px;min-width:0;margin:0;padding:0;display:grid}.knob>legend{font-size:var(--fs-xs);grid-column:1/-1;margin-bottom:8px;padding:0;font-weight:700}.knob-dial{background:repeating-conic-gradient(from 0deg, #8f8a83 0 3deg, #f1efeb 3deg 6deg);width:68px;height:68px;transform:rotate(var(--rot,-60deg));border-radius:50%;transition:transform .36s cubic-bezier(.2,1.3,.4,1);position:relative;box-shadow:0 6px 10px -2px #1e181273,0 2px 3px #1e181259,inset 0 0 0 1px #3c363066}.knob-dial:before{content:"";background:radial-gradient(circle at 38% 30%,#fff 0%,#e7e5e1 30%,#b9b5af 75%,#8e8a84 100%);border-radius:50%;position:absolute;inset:7px;box-shadow:inset 0 1px 1px #fff,inset 0 -2px 4px #00000040,0 1px 2px #00000059}.knob-dial:after{content:"";background:var(--ink);border-radius:2px;width:3px;height:16px;margin-left:-1.5px;position:absolute;top:12px;left:50%;box-shadow:1px 0 #fff9}.knob-options{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;min-width:0;display:grid}.knob-options input{opacity:0;pointer-events:none;width:1px;height:1px;margin:0;position:absolute}.knob-options .key{width:100%;min-height:44px;font-size:var(--fs-xs);text-align:left;cursor:pointer;justify-content:flex-start;padding:6px 10px}.knob-options input:focus-visible+.key{outline:3px solid var(--focus);outline-offset:3px}.knob:has(.knob-options>:nth-child(2)>input:checked) .knob-dial{--rot:-30deg}.knob:has(.knob-options>:nth-child(3)>input:checked) .knob-dial{--rot:0deg}.knob:has(.knob-options>:nth-child(4)>input:checked) .knob-dial{--rot:30deg}.knob:has(.knob-options>:nth-child(5)>input:checked) .knob-dial{--rot:60deg}.knob:has(.knob-options>:nth-child(6)>input:checked) .knob-dial{--rot:90deg}.knob:has(.knob-options>:nth-child(7)>input:checked) .knob-dial{--rot:120deg}.knob:has(.knob-options>:nth-child(8)>input:checked) .knob-dial{--rot:150deg}.knob:has(.knob-options>:nth-child(9)>input:checked) .knob-dial{--rot:180deg}.knob:has(.knob-options>:nth-child(10)>input:checked) .knob-dial{--rot:210deg}.knob:not(:has(input:checked)) .knob-dial{--rot:-120deg}