.c452-card{min-width:0}.c452-controls{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}.c452-controls button{min-height:44px;border:1px solid #2149a7;border-radius:999px;padding:10px 17px;font:inherit;font-weight:750;background:#fff;color:#173b8f;cursor:pointer}.c452-controls .primary{background:#173b8f;color:#fff}.c452-controls button:disabled{opacity:.55;cursor:not-allowed}.c452-result{margin-top:22px;border-top:1px solid #d8deea;padding-top:18px}.c452-result[hidden]{display:none}.metric-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.metric{border:1px solid #d8deea;border-radius:12px;padding:12px;background:#f7f9fc}.metric strong,.metric output{display:block}.metric output{font-size:1.35rem;font-weight:800;margin-top:4px;overflow-wrap:anywhere}.frame-stage{height:90px;border:1px solid #8994a8;border-radius:14px;background:linear-gradient(90deg,#eef3ff,#fff);position:relative;overflow:hidden}.frame-dot{width:26px;height:26px;border-radius:50%;background:#173b8f;position:absolute;top:32px;left:14px}.is-running .frame-dot{animation:frame-travel 1.1s linear infinite alternate}@keyframes frame-travel{to{transform:translateX(min(620px,calc(100vw - 110px)))}}@media(prefers-reduced-motion:reduce){.is-running .frame-dot{animation-duration:3s}}
.mouse-zone{border:2px solid #8994a8;border-radius:18px;padding:20px;min-height:250px;touch-action:none;user-select:none;background:#f7f9fc}.mouse-zone:focus-visible{outline:3px solid #ff9f1c;outline-offset:3px}.mouse-shape{width:150px;height:190px;border:3px solid #173b8f;border-radius:70px 70px 54px 54px;margin:8px auto 20px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:68px 1fr;overflow:hidden;background:#fff}.mouse-button{display:grid;place-items:center;border-bottom:2px solid #173b8f;font-size:.8rem;text-align:center}.mouse-button:first-child{border-right:2px solid #173b8f}.mouse-wheel{grid-column:1/3;place-self:start center;margin-top:-53px;border:2px solid #173b8f;border-radius:12px;padding:8px 4px;background:#fff}.mouse-button[data-active=true],.mouse-wheel[data-active=true]{background:#ffdca6}.event-log{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;overflow-wrap:anywhere}.button-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.button-grid span{border:1px solid #d8deea;border-radius:8px;padding:8px;text-align:center}.button-grid span[data-active=true]{background:#ffe8b8;border-color:#a25d00}
.audio-warning{border-left:4px solid #a25d00;background:#fff8e8;padding:12px 14px}.channel-display{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:16px 0}.channel{border:2px solid #8994a8;border-radius:18px;padding:28px 12px;text-align:center;font-size:1.25rem;font-weight:800}.channel[data-active=true]{background:#e2ecff;border-color:#173b8f}.channel[data-active=true]::after{content:' · playing';font-size:.9rem}.volume-note{font-size:.92rem;color:#38445b}
.sticks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.stick-panel{border:1px solid #d8deea;border-radius:14px;padding:16px}.stick-plot{position:relative;width:min(220px,100%);aspect-ratio:1;margin:10px auto;border:2px solid #8994a8;border-radius:50%;background:linear-gradient(transparent calc(50% - 1px),#c5cddd 50%,transparent calc(50% + 1px)),linear-gradient(90deg,transparent calc(50% - 1px),#c5cddd 50%,transparent calc(50% + 1px))}.deadzone-ring{position:absolute;inset:40%;border:1px dashed #a25d00;border-radius:50%}.stick-dot{position:absolute;width:16px;height:16px;border-radius:50%;background:#173b8f;left:calc(50% - 8px);top:calc(50% - 8px);transform:translate(0,0)}.axis-values{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88rem}.axis-values span{overflow-wrap:anywhere}.range-line{display:grid;gap:6px}.range-line input{width:100%}
.poly-input{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.poly-summary{display:grid;gap:8px}.poly-summary p{margin:0;overflow-wrap:anywhere}.division-steps{display:grid;gap:12px;padding-left:1.25rem}.division-steps li{padding:10px;border:1px solid #d8deea;border-radius:10px;overflow-wrap:anywhere}.division-steps code{white-space:normal}.scope-list{padding-left:1.2rem}.scope-list li{margin:.4rem 0}
@media(max-width:760px){.metric-grid{grid-template-columns:1fr 1fr}.button-grid{grid-template-columns:1fr 1fr}.sticks,.channel-display{grid-template-columns:1fr}.mouse-zone{padding:14px}.axis-values{grid-template-columns:1fr}.c452-controls button{flex:1 1 42%}}