.may-recorder-figure { width: 324px; margin: 0; }
.may-recorder-device { width: 324px; height: 685px; overflow: hidden; border: 7px solid #211e1d; border-radius: 45px; background: #211e1d; box-shadow: 0 34px 80px rgba(32, 16, 23, .32); }
.may-recorder-screen { --control-surface: rgba(31, 27, 24, .58); --control-border: rgba(255, 255, 255, .9); --control-ink: #fff; position: relative; width: 390px; height: 844px; overflow: hidden; background: #000; color: #fff; transform: scale(.7948718); transform-origin: top left; }
.may-recorder-screen.is-audio { --control-surface: #871d2e; --control-border: rgba(255, 255, 255, .72); --control-ink: #fff; background: #faf8f4; }
.may-recorder-camera { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.may-recorder-camera-gate { position: absolute; top: 245px; left: 35px; right: 35px; z-index: 3; display: grid; justify-items: center; gap: 10px; text-align: center; }
.may-recorder-camera-gate[hidden] { display: none; }
.may-recorder-camera-gate button { min-height: 44px; padding: 9px 18px; border: 1px solid #fff9; border-radius: 999px; background: #871d2e; color: #fff; font: 600 15px Outfit,sans-serif; }
.may-recorder-camera-gate button:disabled { opacity: .65; }
.may-recorder-camera-gate p { max-width: 260px; color: #f8f1ec; font: 400 13px/1.45 Outfit,sans-serif; }
.may-recorder-status { position: absolute; top: 17px; left: 28px; right: 28px; z-index: 4; display: flex; justify-content: space-between; font: 500 15px "DM Sans", sans-serif; text-shadow: 0 1px 5px #0008; }
.may-recorder-screen.is-audio .may-recorder-status { color: #2a2622; text-shadow: none; }
.may-recorder-topbar { position: absolute; top: 59px; left: 20px; right: 20px; z-index: 6; height: 72px; display: flex; align-items: center; justify-content: space-between; }
.may-recorder-surface { display: grid; place-items: center; flex: none; padding: 0; border: 1.25px solid var(--control-border); border-radius: 50%; background: var(--control-surface); color: var(--control-ink); box-shadow: 0 4px 9px #0003; cursor: pointer; }
.may-recorder-surface:focus-visible,.may-recorder-prompt button:focus-visible,.may-recorder-topic-sheet button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.may-recorder-top-control { width: 50px; height: 50px; }
.may-recorder-top-control:disabled { opacity: .5; cursor: not-allowed; }
.may-recorder-timer { position: absolute; top: 77px; left: 50%; z-index: 7; display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 9px; border-radius: 18px; background: rgba(31, 27, 24, .64); color: #fff; font: 500 27px/36px "DM Sans", sans-serif; font-variant-numeric: tabular-nums; letter-spacing: -.4px; transform: translateX(-50%); box-shadow: 0 3px 8px #0003; }
.may-recorder-screen.is-audio .may-recorder-timer { background: #fff; color: #2a2622; }
.may-recorder-timer-dot { width: 10px; height: 10px; border-radius: 50%; background: #871d2e; }
.may-recorder-ringlight { position: absolute; top: 137px; right: 20px; z-index: 6; width: 50px; height: 50px; }
.may-recorder-ringlight.is-on { background: #fff7ea; color: #292620; }
.may-recorder-ringlight-slash { position: absolute; width: 29px; height: 2px; border-radius: 1px; background: currentColor; transform: rotate(-45deg); pointer-events: none; }
.may-recorder-waveform { position: absolute; top: calc(50% - 95px); left: 0; right: 0; height: 190px; display: flex; align-items: center; justify-content: center; gap: 7px; }
.may-recorder-waveform i { width: 4px; border-radius: 2px; background: #871d2e; }
.may-recorder-prompt { position: absolute; left: 22px; right: 22px; bottom: 157px; z-index: 5; height: 154px; overflow: hidden; border: 1.25px solid rgba(255, 255, 255, .78); border-radius: 24px; background: #871d2e; color: #fff; box-shadow: 0 8px 14px #0003; padding: 8px 16px; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.may-recorder-prompt::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255,255,255,.06), rgba(0,0,0,.12)); pointer-events: none; }
.may-recorder-prompt-header { position: relative; height: 22px; flex: none; display: flex; align-items: center; justify-content: space-between; }
.may-recorder-prompt-label { display: flex; align-items: center; gap: 6px; font: 600 13px/18px Outfit, sans-serif; }
.may-recorder-prompt-label > span { font-size: 15px; }
.may-recorder-prompt-header > div { display: flex; margin-right: -5px; margin-top: -11px; gap: 8px; }
.may-recorder-prompt-header button { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: transparent; color: inherit; cursor: pointer; }
.may-recorder-question { position: relative; margin: 0; max-height: 48px; overflow: hidden; font: 400 18px/23px Fraunces, serif; }
.may-recorder-prompt-actions { position: relative; height: 44px; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.may-recorder-prompt-actions button { min-height: 44px; border: 0; cursor: pointer; font-family: Outfit, sans-serif; }
.may-recorder-topic { display: flex; flex: 1; align-items: center; justify-content: center; gap: 6px; height: 32px; min-height: 32px !important; padding: 0 10px; border-radius: 16px; background: #faf8f4; color: #871d2e; font-size: 13px; font-weight: 600; white-space: nowrap; }
.may-recorder-refresh { display: flex; min-width: 108px; align-items: center; justify-content: center; gap: 6px; padding: 0; background: transparent; color: #fff; font-size: 14px; font-weight: 600; }
.may-recorder-controls { position: absolute; left: 30px; right: 30px; bottom: 46px; z-index: 6; height: 96px; display: flex; align-items: center; justify-content: space-between; }
.may-recorder-impulse,.may-recorder-stop { width: 64px; height: 64px; }
.may-recorder-impulse > span { font: 400 28px/32px Outfit, sans-serif; }
.may-recorder-stop:disabled { opacity: .42; cursor: not-allowed; }
.may-recorder-record { width: 96px; height: 96px; border-color: var(--control-border); background: var(--control-surface); }
.may-recorder-record-core { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #871d2e; color: #fff; }
.may-recorder-screen.is-audio .may-recorder-record { background: #fff; border-color: #871d2e; }
.may-recorder-home-indicator { position: absolute; left: 50%; bottom: 9px; width: 108px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.75); transform: translateX(-50%); }
.may-recorder-screen.is-audio .may-recorder-home-indicator { background: #2a2622; }
.may-recorder-topic-sheet { position: absolute; inset: auto 0 0; z-index: 12; display: flex; flex-direction: column; gap: 5px; min-height: 290px; padding: 25px 24px 44px; border-radius: 26px 26px 0 0; background: #faf8f4; color: #2a2622; box-shadow: 0 -10px 30px #0004; }
.may-recorder-topic-sheet h3 { margin: 0 0 8px; font: 400 23px Fraunces, serif; }
.may-recorder-topic-sheet button:not(.may-recorder-topic-sheet-close) { min-height: 44px; padding: 8px 14px; border: 1px solid #ded6d0; border-radius: 12px; background: #fff; color: #2a2622; text-align: left; cursor: pointer; }
.may-recorder-topic-sheet-close { align-self: flex-end; display: grid; place-items: center; width: 34px; height: 34px; border: 0; background: transparent; cursor: pointer; }
.may-recorder-figure figcaption { margin-top: 16px; color: hsl(var(--muted-foreground)); font: 400 12px/1.4 Outfit, sans-serif; text-align: center; }
@media (max-width: 360px) {
  .may-recorder-figure { width: 294px; }
  .may-recorder-device { width: 294px; height: 620px; }
  .may-recorder-screen { transform: scale(.71795); }
}