/* Tone & Noise Generator — tokens only; builds on shared.css. */
.tg-wrap{width:min(960px,100%);margin:0 auto;padding:28px 22px 70px}
.tg-wrap .hero{text-align:center;margin-bottom:20px}
.tg-wrap .hero .kicker{font:700 var(--text-micro)/1 "Manrope",sans-serif;text-transform:uppercase;letter-spacing:1.5px;color:var(--accent)}
.tg-wrap .hero h1{font-size:clamp(28px,4.5vw,40px);line-height:1.12;margin:10px 0 8px;color:var(--ink)}
.tg-wrap .hero p{margin:0 auto;max-width:620px;color:var(--muted);font-size:var(--text-input)}

.tg-grid{display:grid;grid-template-columns:1fr 300px;gap:14px;align-items:start}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;box-shadow:var(--shadow)}

.tg-signals{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.tg-signals button{flex:1;min-width:120px;padding:11px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);color:var(--ink);cursor:pointer;font:600 var(--text-small)/1 "Manrope",sans-serif}
.tg-signals button.active{background:var(--solid);color:#fff;border-color:var(--solid)}

.tg-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tg-field{display:flex;flex-direction:column;gap:6px;margin:0;border:0;padding:0}
.tg-field>span,.tg-field>legend{font:700 var(--text-small)/1 "Manrope",sans-serif;color:var(--g-2);padding:0}
.tg-field input,.tg-field select{font:500 var(--text-input)/1.2 "Manrope",sans-serif;padding:10px 11px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);color:var(--ink);width:100%}
.tg-field input[type=range]{padding:0;accent-color:var(--accent)}
.tg-freq{display:flex;align-items:center;gap:8px}
.tg-freq input{flex:1} .tg-freq span,.tg-level-row span{color:var(--g-2);font:500 var(--text-small)/1 "DM Mono",monospace}
.tg-level{gap:8px}
.tg-level-row{display:flex;align-items:center;gap:8px}
.tg-presets{display:flex;flex-wrap:wrap;gap:6px}
.tg-presets button{padding:8px 9px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);color:var(--ink);cursor:pointer;font:600 var(--text-micro)/1 "Manrope",sans-serif}
.tg-presets button:hover{border-color:var(--accent)}

.tg-warn{margin:14px 0 0;padding:10px 12px;border-radius:var(--r-sm);background:var(--surface-2);border:1px solid var(--line);color:var(--g-1);font-size:var(--text-small);line-height:1.5}
.tg-transport{display:flex;align-items:center;gap:14px;margin-top:14px}
.tg-play{padding:13px 26px;border:1px solid var(--solid);border-radius:var(--r-md);background:var(--solid);color:#fff;cursor:pointer;font:700 var(--text-small)/1 "Manrope",sans-serif;text-transform:uppercase;letter-spacing:.5px}
.tg-play.on{background:var(--accent);border-color:var(--accent)}
.tg-now{color:var(--g-2);font:500 var(--text-small)/1.4 "DM Mono",monospace}

.tg-export{align-self:start;display:flex;flex-direction:column;gap:12px}
.tg-export .kicker{font:700 var(--text-micro)/1 "Manrope",sans-serif;text-transform:uppercase;letter-spacing:.8px;color:var(--g-2)}
.tg-export-btn{margin-top:4px;padding:12px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2);color:var(--ink);cursor:pointer;font:700 var(--text-small)/1 "Manrope",sans-serif;text-transform:uppercase;letter-spacing:.5px}
.tg-export-btn:hover{border-color:var(--accent)}
.tg-filename{margin:0;color:var(--g-2);font:var(--text-micro)/1.4 "DM Mono",monospace;word-break:break-all}

.tg-content{margin-top:24px}
.tg-doc,.tg-faq{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:2px 18px;margin-bottom:14px}
.tg-doc>summary,.tg-faq-list>details>summary{cursor:pointer;padding:15px 0;font-weight:700;list-style:none}
.tg-doc>summary::-webkit-details-marker{display:none}
.tg-doc>summary::after,.tg-faq-list>details>summary::after{content:"+";float:right;color:var(--g-2)}
.tg-doc[open]>summary::after,.tg-faq-list>details[open]>summary::after{content:"−"}
.tg-doc-body{padding:0 0 16px}
.tg-doc-body h3{margin:14px 0 6px;font-size:var(--text-small);text-transform:uppercase;letter-spacing:.7px;color:var(--g-2)}
.tg-doc-body p,.tg-doc-body li{color:var(--g-1);font-size:var(--text-body);line-height:1.6}
.tg-doc-body ol,.tg-doc-body ul{margin:0;padding-left:20px}
.tg-note{margin-top:14px;color:var(--g-2);font-size:var(--text-small)}
.tg-faq{padding:2px 18px 8px}
.tg-faq>h2{font-size:var(--text-emphasis);margin:14px 0 4px}
.tg-faq-list>details{border-top:1px solid var(--line)}
.tg-faq-list>details:first-child{border-top:0}
.tg-faq-list>details>p{margin:0 0 14px;color:var(--g-1);font-size:var(--text-body);line-height:1.6}
.tg-related{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.tg-related a{color:var(--accent);font-size:var(--text-body);text-decoration:none}
.tg-related a:hover{text-decoration:underline}

@media(max-width:760px){.tg-grid{grid-template-columns:1fr}.tg-fields{grid-template-columns:1fr}}