.tone-stage{gap:var(--space-2)}.tone-read{text-align:center}.tone-read__freq{display:flex;align-items:baseline;justify-content:center;gap:10px;font-size:clamp(3.2rem,9vw,5.2rem);transition:color .2s ease}.tone-stage.is-on .tone-read__freq{color:var(--color-accent-ink)}.tone-read__hz{font-family:var(--font-body);font-size:1rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-gray)}.tone-read__note{margin:10px 0 0;display:flex;align-items:baseline;justify-content:center;gap:10px;flex-wrap:wrap;font-size:var(--fs-md);color:var(--color-ink-soft);min-height:1.9em}.tone-read__note strong{font-family:var(--font-heading);font-size:1.5rem;color:var(--color-accent-ink)}.tone-read__note span{font-weight:700;color:var(--color-ink-soft)}.tone-read__note em{font-style:normal;font-weight:700;color:var(--color-gray);font-variant-numeric:tabular-nums}.tone-read__note em.is-off{color:var(--color-warn)}.tone-scope{position:relative;width:100%;height:150px;border-radius:var(--radius-media);background:linear-gradient(var(--color-hairline) 1px,transparent 1px) 0 50% / 100% 50%,var(--color-bg);border:1px solid var(--color-hairline);box-shadow:inset 0 2px 10px #0000004d;overflow:hidden;cursor:ew-resize;touch-action:pan-y;transition:border-color .2s ease}:root[data-theme=light] .tone-scope{box-shadow:inset 0 2px 8px #1e1c1814}.tone-scope:hover,.tone-scope.is-drag{border-color:color-mix(in srgb,var(--color-accent) 55%,transparent)}.tone-scope canvas{width:100%;height:100%;display:block}.tone-scope__hint{position:absolute;right:10px;bottom:8px;display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-gray);pointer-events:none;transition:opacity .3s ease}.tone-scope__hint svg{width:14px;height:14px}.tone-scope.is-used .tone-scope__hint{opacity:0}.tone-waves{width:100%}.tone-waves button{min-height:48px;flex-direction:column;gap:2px;padding:4px 6px}.tone-waves button svg{width:34px;height:20px}.tone-waves button span{font-size:var(--fs-xs);line-height:1}.tone-actions{display:flex;align-items:center;justify-content:center;gap:var(--space-3)}.tone-oct{display:flex;align-items:center;gap:8px}.tone-oct__val{display:flex;align-items:center;gap:8px;font-size:var(--fs-xs);font-weight:700;color:var(--color-gray)}.tone-oct .stepper__value{width:44px;height:var(--tap-sm);font-size:1rem;padding:0}.note-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}.note-btn{min-height:52px;border-radius:var(--radius);border:1px solid var(--color-hairline);background:var(--color-surface-2);color:var(--color-ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:4px 2px;box-shadow:var(--shadow-sm);touch-action:manipulation;transition:background .15s ease,border-color .15s ease,color .15s ease,transform .1s ease}.note-btn:active{transform:scale(.94)}.note-btn b{font-size:.92rem;line-height:1.1}.note-btn small{font-size:var(--fs-xs);font-weight:700;color:var(--color-gray)}.note-btn.is-sharp{background:var(--color-bg)}:root[data-theme=light] .note-btn.is-sharp{background:var(--color-surface-3)}.note-btn:hover{border-color:var(--color-accent)}.note-btn[aria-pressed=true]{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-on-accent);box-shadow:var(--shadow-glow)}.note-btn[aria-pressed=true] small{color:var(--color-on-accent);opacity:.8}.note-btn.is-hit{animation:tone-hit .35s ease-out}@keyframes tone-hit{0%{box-shadow:0 0 0 4px var(--color-accent-glow)}to{box-shadow:var(--shadow-sm)}}.tone-midi{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.tone-midi__status{font-size:var(--fs-sm);color:var(--color-gray)}.tone-midi__status.is-on{color:var(--color-accent-ink);font-weight:700}.tone-hz-row{flex-wrap:nowrap}.tone-hz-row .input{width:auto}.tone-hz{font-size:1.15rem;font-weight:700;font-variant-numeric:tabular-nums}.tone-unit{font-weight:700;color:var(--color-gray)}.panel>.tone-scale{position:relative;height:16px;margin:2px 11px 0;font-size:var(--fs-xs);font-weight:700;color:var(--color-gray)}.tone-scale span{position:absolute;top:0;transform:translate(-50%)}.tone-scale span:first-child{transform:none;margin-left:-8px}.tone-scale span:last-child{transform:translate(-100%);margin-left:8px}#hzChips{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}#hzChips .chip{padding:0 4px}.tone-cents{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px}.tone-cents .field__label{white-space:nowrap}.tone-cents .stepper{grid-template-columns:var(--tap-sm) minmax(0,1fr) var(--tap-sm);gap:6px}.tone-cents .icon-btn{width:var(--tap-sm);height:var(--tap-sm)}.tone-cents .stepper__value{height:var(--tap-sm);font-size:1rem}.tone-warn{display:flex;gap:8px;align-items:flex-start;margin:0;font-size:var(--fs-sm);color:var(--color-gray)}.tone-warn svg{width:15px;height:15px;flex:0 0 auto;margin-top:2px;color:var(--color-warn)}.tone-a4 .stepper{grid-template-columns:var(--tap-sm) minmax(0,1fr) var(--tap-sm);gap:6px}.tone-a4 .icon-btn{width:var(--tap-sm);height:var(--tap-sm)}.tone-a4 .stepper__value{height:var(--tap-sm);font-size:1rem}@media (max-width: 600px){.tone-stage{gap:12px;padding-top:14px;padding-bottom:14px}.tone-read__freq{font-size:3rem;gap:6px}.tone-read__hz{font-size:var(--fs-sm)}.tone-read__note{margin-top:6px;font-size:var(--fs-base);gap:8px}.tone-read__note strong{font-size:1.25rem}.tone-scope{height:80px}.tone-waves button{min-height:46px}.tone-actions{gap:var(--space-2)}.tone-actions .icon-btn--lg{width:48px;height:48px}.note-grid{gap:6px}.note-btn{min-height:46px}.note-btn b{font-size:.86rem}#hzChips{gap:6px}}@media (max-width: 380px){.tone-cents{grid-template-columns:minmax(0,1fr) auto}.tone-cents .field__label{grid-column:1 / -1}}.tone-stage:fullscreen,.tone-stage.is-stage-mode{justify-content:safe center;gap:3vh}.tone-stage:fullscreen .tone-read__freq,.tone-stage.is-stage-mode .tone-read__freq{font-size:clamp(4.5rem,17vmin,12rem)}.tone-stage:fullscreen .tone-read__note,.tone-stage.is-stage-mode .tone-read__note{font-size:clamp(1rem,3vmin,1.6rem)}.tone-stage:fullscreen .tone-read__note strong,.tone-stage.is-stage-mode .tone-read__note strong{font-size:clamp(1.5rem,5vmin,2.8rem)}.tone-stage:fullscreen .tone-scope,.tone-stage.is-stage-mode .tone-scope{height:26vh;max-width:1100px}.tone-stage:fullscreen .tone-waves,.tone-stage.is-stage-mode .tone-waves{max-width:720px}:root[data-theme=light] .note-btn[aria-pressed=true]{background:var(--color-accent-hover);border-color:var(--color-accent-hover)}:root[data-theme=light] .note-btn.is-sharp small{color:var(--color-ink-soft)}.ptl-ico{display:inline-block;width:16px;height:16px;margin:0 6px 0 0;vertical-align:-3px;color:var(--g-ink, var(--color-accent-ink));flex:0 0 auto}[role=tab] .ptl-ico{margin-right:6px}[role=tab][aria-selected=true] .ptl-ico{color:inherit}@media (max-width: 600px){[role=tab] .ptl-ico{display:none}}
