#scene { position:fixed; inset:0; width:100%; height:100%; }
#labels { position:fixed; inset:0; pointer-events:none; }
#panel-explore { top:16px; left:16px; width:250px; }
#panel-voice { top:16px; right:16px; width:280px; }
#panel-vowels { top:16px; right:16px; width:300px; }
#panel-consonants { bottom:78px; right:16px; width:300px; }
#panel-speak { top:16px; right:16px; width:300px; }
#panel-info { bottom:78px; left:16px; width:280px; }
.panel { touch-action:pan-y; }
.panel-hd { position:sticky; top:-13px; z-index:2; padding:8px 0; }
body.theme-dark .panel-hd { background:var(--vk-panel-header); }
body.theme-light .panel-hd { background:var(--vk-panel-header); }
.panel h4 { font-size:16px; font-weight:600; margin:12px 0 6px; }
.panel p + p { margin-top:10px; }
.panel input[type=range] { width:100%; }
.mode-grid,.part-list,.vowel-grid,.consonant-row { display:grid; gap:4px; }
.mode-grid { grid-template-columns:1fr 1fr; margin-bottom:10px; }
.part-list { grid-template-columns:1fr 1fr; gap:3px; }
.panel button { min-width:0; overflow-wrap:break-word; }
.mode-grid button,.part-list button,.vowel-grid button,.consonant-row button { border:0; border-radius:8px; padding:8px 9px; color:inherit; cursor:pointer; font:inherit; font-size:11px; text-align:left; line-height:1.3; }
body.theme-dark .mode-grid button,body.theme-dark .part-list button,body.theme-dark .vowel-grid button,body.theme-dark .consonant-row button { background:var(--vk-panel-surface); }
body.theme-light .mode-grid button,body.theme-light .part-list button,body.theme-light .vowel-grid button,body.theme-light .consonant-row button { background:var(--vk-panel-surface); }
body .panel button.selected { background:var(--pal-accent); color:#fff; }
.mode-grid button small { display:block; opacity:.65; font-size:9px; margin-bottom:2px; }
.part-list button { font-size:10px; padding:6px 8px; }
#explore-detail h4 { font-size:13px; margin:10px 0 4px; }
.toggles { display:flex; flex-wrap:wrap; gap:8px 12px; margin-top:10px; }
.toggles.layers { gap:5px 10px; margin-top:4px; }
.toggles .check { min-height:28px; gap:7px; font-size:11px; }
.voice-head { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.voice-head strong { font-size:36px; font-weight:450; font-variant-numeric:tabular-nums; display:block; line-height:1; }
.voice-head span { font-size:10px; opacity:.65; }
.voice-head .act { width:auto; margin:0; }
.panel .seg { flex-wrap:wrap; }
.panel .seg button { white-space:normal; line-height:1.3; }
.panel .seg button:disabled { opacity:.4; cursor:default; }
.panel .small { font-size:10px; opacity:.6; margin-top:8px; }
.vowel-grid { grid-template-columns:repeat(3,1fr); }
.vowel-grid button { text-align:center; padding:7px 4px; }
.vowel-grid button b { display:block; font-size:16px; font-weight:500; line-height:1.1; }
.vowel-grid button small { display:block; opacity:.6; font-size:9px; margin-top:2px; }
.chart-key { display:flex; justify-content:space-between; font-size:10px; opacity:.7; margin-top:12px; font-variant-numeric:tabular-nums; }
#vowel-chart { width:100%; height:190px; margin-top:6px; border-radius:10px; cursor:crosshair; touch-action:none; }
#spectrum { width:100%; height:92px; margin-top:6px; border-radius:10px; }
body.theme-dark #vowel-chart,body.theme-dark #spectrum { background:var(--vk-panel-surface); }
body.theme-light #vowel-chart,body.theme-light #spectrum { background:var(--vk-panel-surface); }
.consonant-place { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; opacity:.5; margin:10px 0 5px; }
.consonant-row { grid-template-columns:repeat(3,1fr); }
.consonant-row button { text-align:center; font-size:17px; font-weight:500; padding:9px 4px; }
.consonant-row button small { display:block; font-size:9px; font-weight:400; opacity:.6; margin-top:1px; }
.phase-box { margin:12px 0 4px; padding:11px 12px; border-radius:10px; }
body.theme-dark .phase-box { background:var(--vk-panel-surface); }
body.theme-light .phase-box { background:var(--vk-panel-surface); }
.phase-box b { font-size:13px; }
.phase-box p { margin-top:5px; }
.tag { position:absolute; padding:5px 9px; border-radius:7px; border:0; font:500 11px/1.2 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; pointer-events:auto; white-space:nowrap; cursor:pointer; color:inherit; transform:translate(-50%,-50%); }
body.theme-dark .tag { background:rgba(10,13,26,.85); color:#e6e8f2; }
body.theme-light .tag { background:rgba(255,255,255,.9); color:#1e293b; }
.tag::before { content:''; display:inline-block; width:5px; height:5px; background:var(--tag-color,var(--pal-soft)); border-radius:50%; margin-right:6px; vertical-align:middle; }
.tag.selected { color:var(--pal-soft); }
body.theme-light .tag.selected { color:var(--pal-bold); }
#load-state { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); font-size:13px; }
/* Aktions-Pill „Ton": nur bei eingeschaltetem Ton akzentgefüllt, sonst neutral (gleiche Maße). */
body #dock-sound:not(.on),body #nav-sound:not(.on) { background:transparent; color:currentColor; opacity:.6; }
body #dock-sound:not(.on):hover,body #nav-sound:not(.on):hover { opacity:.85; filter:none; }
a { color:inherit; }
@media(max-width:768px) {
  #panel-explore,#panel-voice,#panel-vowels,#panel-consonants,#panel-speak,#panel-info { width:auto; max-height:52vh; }
  .tag { font-size:9px; padding:4px 7px; }
  #mobile-navbar .nav-btn { font-size:9px; }
  .part-list { grid-template-columns:repeat(3,1fr); }
  #vowel-chart { height:160px; }
}
@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto; } }
#speak-text { width:100%; border:0; border-radius:10px; padding:9px 10px; font:inherit; font-size:12px; line-height:1.4; resize:vertical; color:inherit; margin-top:8px; }
body.theme-dark #speak-text { background:var(--vk-panel-surface); }
body.theme-light #speak-text { background:var(--vk-panel-surface); }
#speak-text:focus { outline:none; }
.ipa { font-size:15px; line-height:1.5; margin-top:8px; min-height:22px; letter-spacing:.02em; overflow-wrap:anywhere; }
.ipa b { color:var(--pal-accent); font-weight:700; }
body.theme-dark .ipa b { color:var(--pal-soft); }
#panel-speak .act { margin-top:10px; }