.gr-samples{flex-wrap:wrap;align-items:center;gap:.4rem;margin-bottom:.75rem;display:flex}.gr-samples .sample-btn{padding:.34rem .7rem}.gr-controls{border:1px solid var(--border);background:var(--bg-surface);border-radius:10px;grid-template-columns:minmax(150px,.8fr) minmax(140px,.7fr) minmax(210px,1.4fr);gap:.7rem;margin-bottom:.8rem;padding:.8rem;display:grid}.gr-field{min-width:0}.gr-field>label{color:var(--text-dim);letter-spacing:.045em;text-transform:uppercase;margin-bottom:.35rem;font-size:.75rem;font-weight:650;display:block}.gr-select,.gr-num{border:1px solid var(--border);background:var(--bg);width:100%;min-height:42px;color:var(--text);border-radius:6px;padding:.5rem .65rem;font-size:.95rem}.gr-step-row{align-items:center;min-height:42px;display:flex}.gr-step-label{background:color-mix(in srgb, var(--accent) 9%, var(--bg));min-height:32px;color:var(--text);font-variant-numeric:tabular-nums;border-radius:999px;align-items:center;padding:.24rem .62rem;font-size:.9rem;font-weight:650;display:inline-flex}.gr-canvas-wrap{margin-bottom:.65rem}#gr-canvas{cursor:crosshair;touch-action:pan-y;width:100%;height:auto}#gr-canvas:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.gr-toolbar{flex-wrap:wrap;align-items:stretch;gap:.45rem;margin-bottom:.75rem;display:flex}.gr-nav,.gr-play,.gr-toolbar .gr-btn{min-height:42px}.gr-nav{border:1px solid var(--border);background:var(--bg-surface);width:42px;color:var(--text-dim);cursor:pointer;border-radius:6px;justify-content:center;align-items:center;font-size:1.2rem;transition:color .1s,background .1s,border-color .1s;display:inline-flex}.gr-nav:hover{color:var(--text);background:var(--bg-hover);border-color:var(--text-dim)}.gr-play{border:1px solid var(--border);background:color-mix(in srgb, var(--accent) 12%, var(--bg-surface));min-width:100px;color:var(--accent);cursor:pointer;border-radius:6px;justify-content:center;align-items:center;gap:.45rem;padding:0 .9rem;font-size:.88rem;font-weight:650;transition:background .15s,color .15s,border-color .15s;display:inline-flex}.gr-play:hover{background:color-mix(in srgb, var(--accent) 19%, var(--bg-surface))}.gr-play.playing{border-color:var(--border);color:#b7f7cc;background:#14532d}.gr-play.playing:hover{background:#166534}.gr-pi{font-size:.75rem}.gr-toolbar .gr-btn{white-space:normal;margin:0;line-height:1.2}.gr-hint{border-left:3px solid var(--accent);background:color-mix(in srgb, var(--border) 20%, transparent);color:var(--text-dim);margin-bottom:.8rem;padding:.65rem .8rem;font-size:.88rem;line-height:1.45}#math-breakdown-area .result-box,#result-area .result-box{grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem;padding:.6rem;display:grid}#math-breakdown-area .result-label,#result-area .result-label{grid-column:1/-1;padding:.2rem .18rem 0}#math-breakdown-area .bd-row,#result-area .bd-row{border:1px solid var(--border);background:var(--bg-surface);border-radius:8px;min-width:0;padding:.68rem .72rem}#math-breakdown-area .bd-row>div{min-width:0}#math-breakdown-area .bd-row strong,#result-area .bd-row strong{max-width:100%;padding-bottom:.15rem;display:block;overflow:auto hidden}#math-breakdown-area .katex,#result-area .katex{font-size:.94em}@media (width<=720px){.gr-controls{grid-template-columns:repeat(2,minmax(0,1fr))}.gr-controls .gr-field:last-child{grid-column:1/-1}}@media (width<=560px){.gr-controls,#math-breakdown-area .result-box,#result-area .result-box{grid-template-columns:1fr}.gr-controls .gr-field:last-child,#math-breakdown-area .result-label,#result-area .result-label{grid-column:auto}.gr-toolbar .gr-play{flex:100px}.gr-toolbar .gr-btn{flex:calc(50% - .25rem)}}