#face-dialog{box-sizing:border-box;position:fixed;inset:0;width:100%;max-width:none;height:100%;height:100dvh;max-height:none;margin:0;padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));border:0;border-radius:0;background:#f5f8fc;color:#102638;overflow:auto}
#face-dialog[open]{display:grid;grid-template-rows:minmax(220px,1fr) auto minmax(220px,1fr);gap:8px}
#face-dialog::backdrop{background:#102638}
#face-dialog *{box-sizing:border-box}
#face-dialog .face-panel{display:flex;flex-direction:column;gap:6px;min-height:0;padding:12px 14px;border-radius:24px;background:#c9f7ef;overflow:auto}
#face-dialog .face-foreign{transform:rotate(180deg);background:#dbe9ff}
#face-dialog h2{font-size:1rem;text-transform:uppercase;letter-spacing:.06em;text-align:center;margin:0;color:#12665e}
#face-dialog .face-foreign h2{color:#244fc1}
#face-dialog .face-text{flex:0 1 auto;width:100%;height:clamp(80px,16dvh,140px);min-height:68px;margin:auto 0;padding:6px;border:1px solid transparent;background:transparent;box-shadow:none;border-radius:8px;font:500 clamp(20px,4.8vw,32px)/1.3 system-ui,sans-serif;text-align:center;resize:none;color:#102638}
#face-dialog .face-text:focus{outline:2px solid #2377b4;background:#ffffff90}
#face-dialog .face-actions{display:flex;justify-content:center;gap:6px;flex-wrap:wrap}
#face-dialog button{min-width:44px;min-height:44px;margin:0;padding:8px 12px;font-size:1rem;line-height:1.15;border-radius:16px;background:#107b73;color:white;border:1px solid transparent;cursor:pointer}
#face-dialog .face-foreign button{background:#2861dc}
#face-dialog button:disabled{opacity:.45;cursor:default}
#face-dialog .face-status{min-height:1.1em;text-align:center;font-size:.8rem;line-height:1.25;margin:0}
#face-dialog .face-meta{font-size:.7rem;text-align:center;line-height:1.2;min-height:1em}
#face-dialog .face-tools{display:flex;justify-content:center;align-items:center;gap:6px;flex-wrap:wrap;border-top:2px dashed #a5b5c8;border-bottom:2px dashed #a5b5c8;padding:7px 0}
#face-dialog .face-tools select{width:auto;max-width:46vw;min-height:44px;font-size:.9rem;margin:0;padding:6px;border-radius:10px}
#face-dialog .face-tools button{background:#e5edf5;color:#173b54}
#face-dialog .face-tools details{width:100%;text-align:center;font-size:.75rem;line-height:1.35}
#face-dialog .face-tools summary{cursor:pointer}
#face-dialog .face-tools p{margin:4px 8px}
#face-dialog .speech-controls{display:contents!important}
#face-dialog .speech-controls>small,#face-dialog .speech-controls>br{display:none}
#face-dialog .speech-controls>span{flex-basis:100%;text-align:center;font-size:.75rem;line-height:1.2;margin:0!important}
#face-dialog button:focus-visible{outline:3px solid #102638;outline-offset:2px}
html.face-open,html.face-open body{overflow:hidden}
@media(min-width:800px){#face-dialog .face-panel{padding:16px max(20px,calc((100vw - 900px)/2))}#face-dialog .face-text{font-size:32px}}
@media(max-height:550px){#face-dialog[open]{grid-template-rows:minmax(190px,1fr) auto minmax(190px,1fr)}#face-dialog .face-panel{padding:8px;gap:3px}}

#face-dialog button svg{width:20px;height:20px;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}