.mouth-studio { --mouth-line:color-mix(in srgb,currentColor 22%,transparent); max-width:1280px; margin:0 auto; padding:2rem 1.25rem 3rem; }
.mouth-heading { display:flex; align-items:end; justify-content:space-between; gap:2rem; }
.mouth-heading h1 { margin:.25rem 0; font-size:clamp(2rem,4vw,3.25rem); line-height:1.12; }
.mouth-heading p { max-width:34rem; margin:.5rem 0; }
.mouth-eyebrow { font-size:.8rem; text-transform:uppercase; letter-spacing:.12em; }
.mouth-guide { padding:1rem; border:1px solid var(--mouth-line); border-radius:.6rem; background:color-mix(in srgb,#789878 12%,transparent); }
.mouth-guide a { font-weight:650; text-underline-offset:.2em; }
.mouth-ai h2 { margin:0 0 .6rem; font-size:1.1rem; }
.mouth-ai p { margin:.6rem 0; }
.mouth-ai summary { cursor:pointer; font-weight:650; }
.mouth-ai pre { max-width:100%; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; padding:.75rem; border:1px solid var(--mouth-line); border-radius:.4rem; font-size:.8rem; line-height:1.5; }
.mouth-ai code { font-family:ui-monospace,monospace; }
#mouth-status { min-height:1.5em; margin:1rem 0; }
.mouth-workspace { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(19rem,1fr); gap:1.5rem; align-items:start; }
.mouth-view-column { position:sticky; top:1rem; min-width:0; }
#mouth-view { position:relative; height:clamp(360px,58vh,680px); overflow:hidden; border:1px solid var(--mouth-line); border-radius:.75rem; background:radial-gradient(ellipse at 50% 20%,rgba(136,161,164,.16),transparent 70%); }
#mouth-canvas { position:absolute; inset:0; }
#mouth-canvas canvas { display:block; width:100%; height:100%; touch-action:none; }
#mouth-preview-note { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:85%; margin:0; text-align:center; pointer-events:none; }
.mouth-controls { min-width:0; padding:1rem; border:1px solid var(--mouth-line); border-radius:.75rem; }
.mouth-controls fieldset { min-width:0; padding:0; margin:0; border:0; }
.mouth-controls legend { padding:0; margin-bottom:1rem; font-size:1.2rem; font-weight:650; }
.mouth-controls details { margin:1rem 0; padding-top:.75rem; border-top:1px solid var(--mouth-line); }
.mouth-controls summary { cursor:pointer; margin-bottom:.8rem; font-weight:650; }
.mouth-control { display:grid; grid-template-columns:minmax(0,1fr) minmax(6.5rem,9rem); gap:.75rem; align-items:center; margin:.65rem 0; }
.mouth-control > span { overflow-wrap:anywhere; }
.mouth-control input, .mouth-control select { box-sizing:border-box; width:100%; min-width:0; padding:.55rem; border:1px solid var(--mouth-line); border-radius:.35rem; color:inherit; background:transparent; font:inherit; }
.mouth-control input[type=color] { height:2.6rem; padding:.2rem; cursor:pointer; }
.mouth-studio select option, .mouth-studio select optgroup { color:CanvasText; background:Canvas; }
.mouth-actions { display:flex; flex-wrap:wrap; gap:.5rem; margin:.8rem 0; }
.mouth-studio button { padding:.6rem .8rem; border:1px solid var(--mouth-line); border-radius:.4rem; color:inherit; background:color-mix(in srgb,currentColor 7%,transparent); font:inherit; cursor:pointer; }
.mouth-studio button:hover:not(:disabled) { background:color-mix(in srgb,currentColor 14%,transparent); }
.mouth-studio button[aria-pressed=true] { outline:2px solid currentColor; outline-offset:1px; }
.mouth-studio button:disabled { opacity:.45; cursor:default; }
.mouth-studio :is(button,input,select,a,summary):focus-visible { outline:2px solid currentColor; outline-offset:3px; }
.mouth-help, .mouth-note { font-size:.9rem; line-height:1.5; opacity:.85; }
.mouth-error { padding:.85rem; border:1px solid #b95454; border-radius:.4rem; background:rgba(185,84,84,.12); overflow-wrap:anywhere; }
.mouth-studio [hidden] { display:none !important; }
.mouth-site-footer { padding:1.5rem; text-align:center; }
.mouth-site-footer p { margin:.6rem 0; }
.mouth-studio { max-width:1600px; }
.mouth-workspace { grid-template-columns:minmax(0,1.35fr) minmax(25rem,1fr); gap:1rem; }
#mouth-view { height:clamp(440px,69vh,850px); background:#202932; }
.mouth-controls { max-height:85vh; overflow:auto; scrollbar-gutter:stable; }
.mouth-tabs { display:flex; flex-wrap:wrap; gap:.35rem; margin:.7rem 0; position:sticky; top:-1rem; z-index:2; padding:.8rem 0; background:Canvas; }
.mouth-tabs button[aria-selected=true] { background:color-mix(in srgb,#6c9e97 35%,Canvas); box-shadow:inset 0 -3px #6c9e97; }
.mouth-control { grid-template-columns:minmax(8rem,1fr) minmax(10rem,1.1fr); gap:.4rem .8rem; }
.mouth-control > label { font-size:.9rem; line-height:1.35; }
.mouth-inputs { display:flex; gap:.5rem; align-items:center; min-width:0; }
.mouth-inputs input[type=range] { flex:1; padding:0; min-width:3rem; accent-color:#6c9e97; cursor:pointer; }
.mouth-inputs input[type=number] { width:6.5rem; flex:0 0 6.5rem; padding:.4rem; font-variant-numeric:tabular-nums; }
.mouth-inputs input[type=checkbox] { width:1.3rem; height:1.3rem; accent-color:#6c9e97; }
.mouth-field-help { grid-column:1/-1; font-size:.75rem; opacity:.68; line-height:1.4; }
.mouth-random-toolbar { margin:.8rem 0; padding:.7rem; border:1px solid var(--mouth-line); border-radius:.5rem; }
.mouth-random-toolbar h2 { margin:0; font-size:1rem; }
.mouth-random-toolbar .mouth-actions { gap:.35rem; margin:.5rem 0; }
.mouth-random-toolbar button[data-random-scope="all"] { width:100%; font-weight:650; background:color-mix(in srgb,#6c9e97 25%,transparent); }
.mouth-random-toolbar .mouth-note { margin:.4rem 0 0; }
.mouth-random { padding:.7rem; border:1px solid var(--mouth-line); border-radius:.5rem; }
.mouth-random .mouth-control { margin:.45rem 0; }
.mouth-library { margin:.7rem 0 1rem; padding:.85rem; border:1px solid var(--mouth-line); border-radius:.6rem; background:color-mix(in srgb,#6c9e97 10%,transparent); }
.mouth-library h2 { margin:0 0 .6rem; font-size:1.15rem; }
.mouth-library .mouth-actions { gap:.4rem; }
.mouth-library .mouth-actions button { flex:1 1 8rem; }
.mouth-library #mouth-apply-mouth { font-weight:650; background:color-mix(in srgb,#6c9e97 25%,transparent); }
.mouth-library .mouth-check { display:flex; align-items:start; gap:.55rem; margin:.6rem 0; font-size:.9rem; line-height:1.4; }
.mouth-library .mouth-check input { flex:0 0 auto; width:1.2rem; height:1.2rem; margin:.05rem 0 0; accent-color:#6c9e97; }
.mouth-library .mouth-note { margin:.55rem 0; }
.mouth-library .mouth-sources { display:flex; flex-wrap:wrap; gap:.4rem 1rem; font-size:.8rem; }
.mouth-library .mouth-sources:empty { display:none; }
#mouth-profile-current { font-variant-numeric:tabular-nums; font-weight:650; }
.mouth-tooth { margin-top:.8rem; padding:.8rem; border:1px solid var(--mouth-line); border-radius:.5rem; }
.mouth-tooth h2 { font-size:1rem; margin:0 0 .7rem; }
#mouth-warnings { padding:1rem 1rem 1rem 2rem; font-size:.85rem; border:1px solid #a98245; border-radius:.5rem; background:rgba(169,130,69,.1); }
.mouth-lighting { padding:.5rem .8rem; border:1px solid var(--mouth-line); border-radius:.5rem; }
.mouth-lighting .mouth-control { grid-template-columns:8rem 1fr; }
@media (max-width:1000px) { .mouth-workspace { grid-template-columns:1fr; } .mouth-view-column { position:static; } .mouth-controls { max-height:none; overflow:visible; } .mouth-tabs { top:0; } }
@media (max-width:860px) {
  .mouth-workspace { grid-template-columns:1fr; }
  .mouth-view-column { position:static; }
  .mouth-heading { display:block; }
  #mouth-view { height:420px; height:clamp(320px,55vh,520px); }
}
.mouth-era { display:flex; flex-wrap:wrap; gap:.35rem; margin:.55rem 0 .7rem; }
.mouth-era label { display:inline-flex; align-items:center; gap:.4rem; margin:0; padding:.35rem .6rem; border:1px solid var(--mouth-line); border-radius:.4rem; font-size:.9rem; line-height:1.2; }
.mouth-era label:has(input:checked) { background:color-mix(in srgb,#6c9e97 28%,transparent); }
.mouth-era input { width:1rem; height:1rem; margin:0; accent-color:#6c9e97; }
.mouth-species-block { margin:.2rem 0 .75rem; }
.mouth-species-block > label { display:block; margin:0 0 .35rem; font-size:.9rem; }
#mouth-preset { box-sizing:border-box; width:100%; min-width:0; padding:.35rem; border:1px solid var(--mouth-line); border-radius:.35rem; color:CanvasText; background:Canvas; font:inherit; }
.mouth-part-presets, .mouth-quality { margin:.7rem 0 1rem; padding:.85rem; border:1px solid var(--mouth-line); border-radius:.6rem; }
.mouth-part-presets h2, .mouth-quality h2 { margin:0 0 .6rem; font-size:1.05rem; }
.mouth-part-presets .mouth-actions button, .mouth-library .mouth-actions button { flex:1 1 8rem; }
.mouth-quality .mouth-control { grid-template-columns:minmax(5rem,.7fr) minmax(8rem,1.3fr); }
@media (max-width:860px) {
  .mouth-quality .mouth-control, .mouth-part-presets .mouth-control, .mouth-library .mouth-control { grid-template-columns:minmax(0,1fr); }
  #mouth-preset { max-height:14rem; }
}