:root {
  color-scheme: dark;
  font-family: Inter, Manrope, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #0b0f16;
  color: #f7f8fb;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: #0b0f16; }
button, textarea, input { font: inherit; }
button { cursor: pointer; }
button:focus-visible, textarea:focus-visible, input:focus-visible { outline: 3px solid #64a9ff; outline-offset: 2px; }

.splash { position: fixed; inset: 0; z-index: 20; display: grid; place-content: center; justify-items: center; gap: 10px; min-height: 100dvh; background: #0d1118; transition: opacity .22s ease, visibility .22s ease; }
.splash.is-ready { opacity: 0; visibility: hidden; }
.splash-mark, .brand-mark { display: inline-grid; place-items: center; color: #ff635d; font-weight: 900; }
.splash-mark { width: 84px; height: 84px; font-size: 68px; line-height: 1; }
.splash p { margin: 4px 0 18px; font-size: 20px; font-weight: 750; }
.splash a, .app-footer a { color: #aeb9c9; font-size: 12px; text-decoration: none; }

.app-shell { display: grid; grid-template-rows: calc(48px + env(safe-area-inset-top)) minmax(0, 1fr) calc(20px + env(safe-area-inset-bottom)); min-height: 100dvh; background: radial-gradient(circle at 20% 0%, #1d2531 0%, #0d1118 45%, #080b10 100%); }
.app-header { display: grid; grid-template-columns: 44px 1fr 44px; align-items: end; min-height: calc(48px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 10px 0; }
.brand { grid-column: 2; display: inline-flex; justify-content: center; align-items: center; gap: 7px; font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
.brand-mark { width: 20px; height: 22px; font-size: 23px; line-height: .8; }
.icon-button, .camera-icon-button { border: 0; color: #f4f7fc; background: transparent; min-width: 44px; min-height: 44px; font-size: 22px; }
.back-button { grid-column: 1; font-size: 38px; line-height: 1; }
#setup-button { grid-column: 3; }
.screen { min-height: 0; overflow: auto; padding: 14px 12px 20px; }
.setup-screen { width: min(100%, 720px); margin: 0 auto; }
.intro-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.eyebrow { margin: 0 0 5px; color: #aeb9c9; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(23px, 5vw, 31px); line-height: 1.08; letter-spacing: -.035em; }
.privacy-pill { align-self: center; max-width: 154px; color: #cbd3df; font-size: 11px; line-height: 1.25; text-align: right; }
.settings-card { padding: 14px; border: 1px solid #27313f; border-radius: 16px; background: rgba(16, 21, 30, .88); box-shadow: 0 16px 42px rgba(0,0,0,.25); }
.field-label, .setting-heading label, .countdown-block legend { display: block; color: #f4f7fc; font-size: 13px; font-weight: 700; }
.script-input { display: block; width: 100%; min-height: 170px; margin-top: 8px; padding: 12px; resize: vertical; border: 1px solid #334052; border-radius: 12px; color: #121923; background: #fbfcfe; font-size: 17px; line-height: 1.45; }
.character-count { margin-top: 5px; color: #9aa7ba; font-size: 11px; text-align: right; }
.setting-block { margin: 16px 0 0; padding: 0; border: 0; }
.setting-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.setting-heading output { color: #aeb9c9; font-size: 12px; }
input[type="range"] { width: 100%; height: 32px; accent-color: #3e96ff; }
.text-action { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; margin: 3px 0 0; padding: 0 5px; border: 0; color: #4aa0ff; background: transparent; font-size: 14px; font-weight: 750; }
.text-action.is-running { color: #ff7972; }
.scroll-preview { display: none; height: 112px; margin-top: 8px; overflow: hidden; border: 1px solid #344052; border-radius: 12px; background: #090d13; }
.scroll-preview.is-open { display: block; }
.scroll-preview-content { padding: 28px 14px; color: #eef3fb; font-size: 20px; line-height: 1.35; white-space: pre-wrap; }
.countdown-block legend { padding: 0; margin-bottom: 8px; }
.segmented-control { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.segmented-control button { min-height: 44px; border: 1px solid #344052; border-radius: 10px; color: #d7dfea; background: #19212d; font-size: 13px; }
.segmented-control button.selected { border-color: #3e96ff; color: #fff; background: #285a98; }
.primary-button, .secondary-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; border-radius: 12px; font-weight: 800; font-size: 14px; }
.primary-button { width: 100%; margin-top: 18px; border: 0; color: #fff; background: linear-gradient(135deg, #ff5f5b, #fa3c55); box-shadow: 0 10px 22px rgba(255, 64, 84, .2); }
.primary-button span { font-size: 25px; line-height: .7; }
.secondary-button { flex: 1; border: 1px solid #435166; color: #edf2fa; background: #202a38; }

.camera-screen { position: relative; padding: 0; overflow: hidden; background: #05070a; }
.camera-preview, .camera-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.camera-preview { object-fit: cover; transform: scaleX(-1); }
.camera-shade { background: linear-gradient(to bottom, rgba(0,0,0,.52), transparent 25%, transparent 68%, rgba(0,0,0,.76)); pointer-events: none; }
.camera-topbar, .camera-controls { position: absolute; left: 0; right: 0; display: flex; align-items: center; z-index: 2; }
.camera-topbar { top: 0; justify-content: space-between; padding: env(safe-area-inset-top) 10px 0; }
.recording-status { padding: 6px 10px; border-radius: 999px; color: #fff; background: rgba(7, 10, 15, .62); font-size: 12px; font-weight: 700; backdrop-filter: blur(8px); }
.recording-status.is-recording::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #ff5755; vertical-align: middle; }
.teleprompter-window { position: absolute; z-index: 1; top: 26%; right: 10px; left: 10px; bottom: 25%; overflow: hidden; border-radius: 16px; background: rgba(0,0,0,.38); pointer-events: none; }
.camera-cue { position: absolute; right: 12px; left: 12px; color: #fff; font-weight: 750; line-height: 1.25; text-align: center; text-shadow: 0 2px 8px rgba(0,0,0,.7); white-space: pre-wrap; will-change: transform; }
.camera-controls { bottom: 0; flex-direction: column; gap: 8px; padding: 0 16px calc(14px + env(safe-area-inset-bottom)); }
.clean-video-note, .record-hint { color: #f1f4f9; font-size: 12px; text-shadow: 0 1px 3px #000; }
.record-button { display: grid; place-items: center; width: 74px; height: 74px; border: 3px solid #fff; border-radius: 50%; background: rgba(0,0,0,.32); }
.record-button span { width: 55px; height: 55px; border-radius: 50%; background: #ff4d4d; transition: border-radius .2s ease, transform .2s ease; }
.record-button.is-recording span { border-radius: 9px; transform: scale(.72); }
.countdown-overlay { position: absolute; z-index: 4; inset: 0; display: grid; place-content: center; color: #fff; background: rgba(3,6,10,.42); font-size: 104px; font-weight: 900; text-shadow: 0 4px 18px #000; }

.result-screen { width: min(100%, 720px); margin: 0 auto; }
.result-video { display: block; width: 100%; margin-top: 16px; border-radius: 16px; background: #000; aspect-ratio: 9 / 16; }
.result-note { margin: 10px 0 16px; color: #b5c0d0; font-size: 13px; }
.result-actions { display: flex; gap: 8px; }
.result-actions .primary-button { flex: 1; width: auto; margin: 0; }
.notice { position: fixed; z-index: 5; right: 12px; bottom: calc(34px + env(safe-area-inset-bottom)); left: 12px; margin: 0 auto; padding: 11px 12px; border: 1px solid #ff8b83; border-radius: 12px; color: #fff; background: #612326; font-size: 13px; box-shadow: 0 12px 24px rgba(0,0,0,.28); }
.app-footer { display: grid; place-items: center; min-height: calc(20px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); }

@media (min-width: 760px) {
  .app-shell { grid-template-columns: minmax(0, 1fr); }
  .screen { padding-top: 22px; }
  .settings-card { padding: 18px; }
  .camera-screen { width: min(100%, 590px); justify-self: center; }
}