:root {
  --bg: #0f1a16;
  --card: #17261f;
  --ink: #f3ede0;
  --muted: #b9b29f;
  --accent: #c9a24a;
  --error: #f0907a;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.45 Georgia, "Times New Roman", serif;
  -webkit-text-size-adjust: 100%;
}
.screen[hidden] { display: none !important; }
.card { max-width: 520px; margin: 0 auto; height: 100%; padding: 24px 16px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.hero { width: 120px; height: 180px; }
h1 { font-size: 26px; margin: 8px 0 12px; font-weight: normal; letter-spacing: 0.02em; }
.small { font-size: 15px; color: var(--muted); margin: 6px 0; }
.row { display: flex; gap: 12px; justify-content: center; }
button { font: inherit; font-size: 16px; border-radius: 999px; padding: 12px 22px; border: 1px solid var(--accent); background: transparent; color: var(--ink); cursor: pointer; }
button.primary { background: var(--accent); color: #1b1408; border-color: var(--accent); margin-top: 12px; }
button:disabled { opacity: 0.5; cursor: default; }
button.link { border: 0; padding: 4px 0; color: #5a4a2a; text-decoration: underline; float: right; font-size: 14px; }
.error { color: var(--error); font-size: 15px; }

#bar { position: fixed; inset: 0; background: #000; }
#ar { position: absolute; inset: 0; overflow: hidden; }
#ar video { object-fit: cover; }
#pip { position: absolute; right: 12px; top: calc(12px + env(safe-area-inset-top)); width: 110px; height: 165px; border-radius: 16px; background: rgba(15, 26, 22, 0.55); border: 1px solid rgba(201, 162, 74, 0.6); display: none; z-index: 5; }
#pip.on { display: block; }
#pip.full { left: 50%; top: 18%; right: auto; width: 200px; height: 300px; transform: translateX(-50%); background: transparent; border: 0; }
.hint { position: absolute; top: calc(16px + env(safe-area-inset-top)); left: 16px; right: 140px; color: #fff; font-size: 15px; text-shadow: 0 1px 4px #000; z-index: 4; }
.hint:empty { display: none; }
.bottom { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, rgba(0, 0, 0, 0.8) 30%); z-index: 6; }
.caption { min-height: 2.9em; max-height: 6em; overflow: hidden; font-size: 18px; color: #fff; text-shadow: 0 1px 3px #000; margin-bottom: 8px; }
.caption .you { color: var(--muted); font-size: 15px; display: block; }
.controls { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.status { flex: 1; font-size: 14px; color: var(--accent); }
.pill { padding: 6px 14px; font-size: 14px; background: rgba(0, 0, 0, 0.4); }
.say { display: flex; gap: 8px; }
.say input { flex: 1; min-width: 0; font: inherit; font-size: 16px; padding: 10px 14px; border-radius: 999px; border: 1px solid #3b5145; background: rgba(11, 19, 15, 0.85); color: var(--ink); }
.say .primary { margin-top: 0; padding: 10px 18px; }
.recipe { position: absolute; left: 16px; right: 16px; top: calc(70px + env(safe-area-inset-top)); max-height: 45%; overflow-y: auto; background: #f4eee0; color: #1d2a23; border-radius: 14px; padding: 14px 16px; z-index: 7; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4); }
.recipe h2 { margin: 0 0 6px; font-size: 21px; font-weight: normal; }
.recipe h3 { margin: 10px 0 4px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.08em; color: #6b5526; }
.recipe ul, .recipe ol { margin: 0; padding-left: 20px; font-size: 16px; }