:root {
  --sun: #ffb703;
  --orange: #fb8500;
  --blue: #219ebc;
  --navy: #023047;
  --cream: #fff7dd;
  --white: #fffef8;
  --danger: #d62828;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; overflow: hidden; background: var(--cream); color: var(--navy); font-family: ui-rounded, "SF Pro Rounded", "SF Pro Display", system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; }
button { font: inherit; touch-action: manipulation; }
.app { min-height: 100svh; padding: max(22px, env(safe-area-inset-top)) 18px max(22px, env(safe-area-inset-bottom)); display: grid; place-items: center; position: relative; background: radial-gradient(circle at 25% 10%, #fff 0 12%, transparent 13%), linear-gradient(160deg, #fff8d9, #ffe4a3); }
.hidden { display: none !important; }
.lock-screen { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; background: linear-gradient(160deg, #fff8d9, #ffe4a3); }
.lock-card { width: min(100%, 380px); display: grid; gap: 16px; justify-items: center; text-align: center; padding: 26px 18px; border-radius: 38px; background: rgba(255,255,255,.72); box-shadow: 0 18px 42px rgba(2,48,71,.12); }
.pin-input { width: min(100%, 280px); height: 74px; border: 4px solid var(--sun); border-radius: 24px; background: white; color: var(--navy); text-align: center; font-size: 40px; font-weight: 900; letter-spacing: 10px; }
.lock-button { height: 82px; font-size: 30px; }
.parent-dot { position: fixed; top: max(12px, env(safe-area-inset-top)); left: 12px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; z-index: 10; }
.hero { width: min(100%, 430px); text-align: center; display: grid; gap: 18px; justify-items: center; }
.mascot { width: 154px; height: 154px; display: grid; place-items: center; font-size: 82px; border-radius: 42px; background: var(--white); box-shadow: 0 18px 0 rgba(2, 48, 71, .09); transform: rotate(-3deg); }
.mascot.small { width: 104px; height: 104px; font-size: 54px; border-radius: 32px; }
h1 { font-size: clamp(34px, 8vw, 48px); line-height: 1.05; margin: 8px 0 0; }
p { margin: 0; font-size: 20px; line-height: 1.35; }
.big-button { width: min(100%, 360px); height: 108px; border: 0; border-radius: 999px; background: var(--orange); color: white; font-size: 38px; font-weight: 900; box-shadow: 0 12px 0 #c96700, 0 22px 28px rgba(2,48,71,.18); }
.big-button:active, .action-button:active, .round:active { transform: translateY(4px); box-shadow: none; }
.small-link { border: 0; background: transparent; color: rgba(2,48,71,.65); font-size: 15px; padding: 8px; }
.camera { position: fixed; inset: 0; background: #000; display: block; overflow: hidden; }
video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.camera-actions { position: fixed; left: 0; right: 0; bottom: max(18px, env(safe-area-inset-bottom)); z-index: 30; height: 104px; pointer-events: none; }
.shutter { position: fixed; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: 92px; height: 92px; border-radius: 50%; border: 8px solid white; background: var(--orange); box-shadow: 0 0 0 5px rgba(255,255,255,.35), 0 12px 30px rgba(0,0,0,.35); pointer-events: auto; }
.shutter:active { transform: translateX(-50%) translateY(4px); }
.round { min-height: 56px; border: 0; border-radius: 22px; padding: 10px 12px; font-size: 18px; font-weight: 900; box-shadow: 0 8px 22px rgba(0,0,0,.28); pointer-events: auto; }
.secondary { background: rgba(255,255,255,.96); color: var(--navy); }
#cancelCameraBtn { position: fixed; top: max(14px, env(safe-area-inset-top)); left: 14px; z-index: 31; width: 82px; }

.result { width: min(100%, 460px); display: grid; gap: 14px; align-content: center; }
.photo-wrap { width: 100%; aspect-ratio: 4 / 3; border-radius: 34px; overflow: hidden; background: white; box-shadow: 0 12px 0 rgba(2,48,71,.08); }
.photo-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card { border-radius: 34px; padding: 20px; background: var(--white); min-height: 180px; display: grid; place-items: center; text-align: center; box-shadow: 0 10px 26px rgba(2,48,71,.12); }
.spinner { width: 62px; height: 62px; margin: 0 auto 14px; border-radius: 50%; border: 8px solid #ffe2a6; border-top-color: var(--orange); animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.label { color: rgba(2,48,71,.55); font-weight: 800; }
h2 { font-size: clamp(48px, 16vw, 76px); margin: 0; line-height: 1; }
h3 { font-size: clamp(34px, 10vw, 52px); margin: 4px 0 12px; color: var(--blue); line-height: 1; text-transform: capitalize; }
.sentence { font-size: 22px; font-weight: 750; margin: 4px 0; }
.english { color: rgba(2,48,71,.75); font-size: 19px; }
.error { color: var(--danger); font-weight: 850; }
.result-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.action-button { min-height: 78px; border: 0; border-radius: 26px; background: var(--blue); color: white; font-size: 22px; font-weight: 900; box-shadow: 0 8px 0 #126782; }
.action-button.primary { background: var(--orange); box-shadow: 0 8px 0 #c96700; }
dialog { width: min(92vw, 380px); border: 0; border-radius: 28px; padding: 22px; color: var(--navy); box-shadow: 0 22px 70px rgba(0,0,0,.25); }
dialog::backdrop { background: rgba(2,48,71,.35); }
dialog h2 { font-size: 26px; margin-bottom: 10px; }
dialog p, dialog label { font-size: 16px; display: grid; gap: 8px; margin: 10px 0; }
dialog button { width: 100%; min-height: 48px; border: 0; border-radius: 16px; background: var(--navy); color: white; font-weight: 800; }
@media (max-height: 720px) { .mascot { width: 112px; height: 112px; font-size: 60px; } .big-button { height: 92px; } .photo-wrap { aspect-ratio: 16 / 10; } }