.face-preview{width:min(100%,370px);margin:2px 0 24px}
.face-preview-heading{display:flex;align-items:center;justify-content:space-between;margin:0 0 10px;gap:12px}
.face-preview-heading h2{margin:0;font-size:9px;letter-spacing:1.6px;color:#788272;font-weight:700;text-transform:uppercase}
.face-preview-heading button{font-size:10px;padding:4px 0;border:0;background:transparent;font-weight:500}
.robot-screen{aspect-ratio:5/3;width:100%;margin:auto;background:#baffce;border:3px solid #3d6251;border-radius:14px;overflow:hidden;box-shadow:0 3px 0 #b3cdb9}
.screen-face{display:block;width:100%;height:100%;color:#10251b;background:#baffce;stroke:none}
.face-background{fill:#baffce;stroke:none}
.face-features{fill:none;stroke:currentColor;stroke-width:8;stroke-linecap:round;stroke-linejoin:round}
.face-mouth-opening{fill:currentColor;stroke:currentColor}
.face-tongue{fill:#62c67a;stroke:none}
.face-preview-actions{display:flex;align-items:center;gap:9px}
.face-preview-status{display:flex;align-items:center;justify-content:space-between;margin:13px 0 9px;font-size:10px;color:#6a7865;gap:8px}
.face-preview-status button{font-size:9px;padding:5px 8px;border-radius:5px}
.face-preview button[aria-pressed=true]{background:#e3ecd9;border-color:#819b77;color:#2c593e}
.face-expression-picker{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
.face-expression-picker button{min-width:0;padding:4px;border-radius:6px;background:#f5f6ed}
.face-expression-picker .screen-face{width:100%;height:auto;aspect-ratio:5/3;border-radius:3px}
.face-expression-picker span{font-size:8px;font-weight:500;display:block;margin-top:4px}
.face-preview-note{margin:11px 0 0;font-size:10px;line-height:1.65;color:#87917e}
.robot-screen:fullscreen{width:100vw;max-width:none;height:100vh;border:0;border-radius:0;box-shadow:none;background:#baffce;display:grid;place-items:center}
.robot-screen:fullscreen .screen-face{width:100%;height:100%}