.tone-launch { margin:0 0 .6rem; min-height:44px; padding:.4rem .9rem; color:#31443b; background:#f7f4ec; border:1px solid #bbaa90; border-radius:8px; cursor:pointer; font:inherit; font-weight:700; }
#tone-dialog { width:min(780px,calc(100vw - 20px)); color:#29251f; }
#tone-dialog [hidden], .tone-launch[hidden] { display:none!important; }
.tone-controls,.tone-prices { display:grid; grid-template-columns:1fr 1fr; gap:.3rem 1rem; }
#tone-dialog label { margin:0; }
#tone-dialog #tone-target,#tone-dialog #tone-status { color:#595047; margin:.4rem 0; }
#tone-palette { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.35rem; }
#tone-palette button { display:flex; align-items:center; gap:.4rem; margin:0; padding:.3rem .4rem; text-align:left; background:white; line-height:1.15; }
#tone-palette button[aria-pressed=true] { border-color:#344d3a; box-shadow:inset 0 0 0 1px #344d3a; background:#eff3ec; }
#tone-palette img { width:32px; height:32px; border-radius:50%; object-fit:cover; flex:none; }
#tone-palette small { display:block; font-size:.72rem; color:#665d53; }
.tone-paging,.tone-actions,.tone-legend { display:flex; align-items:center; gap:.6rem; }
.tone-paging { justify-content:flex-end; font-size:.82rem; } .tone-paging button { min-width:44px; }
.tone-legend { justify-content:space-between; padding:.3rem 0; font-size:.9rem; }
.tone-frame { display:grid; position:relative; overflow:hidden; isolation:isolate; background:#f2ece4; border:1px solid #d9cdbd; border-radius:.6rem; --split:50%; }
.tone-frame canvas { grid-area:1/1; display:block; width:100%; height:clamp(155px,32dvh,360px); object-fit:contain; }
#tone-preview { clip-path:inset(0 0 0 var(--split)); background:#f2ece4; }
.tone-frame::after { position:absolute; content:""; top:0; bottom:0; left:var(--split); border-left:2px solid white; box-shadow:0 0 2px #24221b; pointer-events:none; }
#tone-dialog .tone-slider { margin:.3rem 0; } #tone-dialog input[type=range]{padding:0;min-height:30px;accent-color:#344d3a;}
.tone-prices { background:#f5f1eb; padding:.55rem .75rem; border-radius:.5rem; }
.tone-prices span,.tone-prices strong { display:block; } .tone-prices span { font-size:.82rem; }
#tone-dialog #tone-difference { margin:.25rem 0; font-weight:700; }
.tone-actions { flex-wrap:wrap; margin-top:.4rem; }
#tone-dialog :focus-visible,.tone-launch:focus-visible { outline:3px solid #85602c; outline-offset:2px; }
@media(max-width:620px){#tone-palette{grid-template-columns:repeat(2,minmax(0,1fr))}.tone-controls{grid-template-columns:minmax(0,1fr)}#tone-dialog{padding:16px}.tone-actions button{flex:1 1 auto}}