@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,700;9..144,900&family=Manrope:wght@500;700;800&display=swap');

:root {
  --ink: #07110f;
  --reef: #00e0b8;
  --reef-2: #76ffe6;
  --sand: #f2dfb8;
  --shell: #fff8e9;
  --kelp: #16352f;
  --warning: #ffcf5a;
  --danger: #ff5f73;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
  color: var(--shell);
  background:
    radial-gradient(circle at 20% -10%, rgba(0, 224, 184, .28), transparent 36rem),
    radial-gradient(circle at 95% 12%, rgba(255, 207, 90, .18), transparent 28rem),
    linear-gradient(145deg, #07110f 0%, #0d211e 48%, #172d28 100%);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .17;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.shell {
  width: min(980px, 100%);
  margin: 0 auto;
  padding: max(18px, env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom));
}

.hero { display: grid; gap: 14px; }

.camera-card {
  position: relative;
  min-height: 66vh;
  border: 1px solid rgba(118, 255, 230, .32);
  border-radius: 34px;
  overflow: hidden;
  background: #020706;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .42), inset 0 0 0 1px rgba(255,255,255,.08);
}

video, #overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#overlay { z-index: 2; }

.camera-message {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-content: center;
  gap: 16px;
  padding: 30px;
  text-align: center;
  background: linear-gradient(180deg, rgba(7,17,15,.42), rgba(7,17,15,.88));
  transition: opacity .35s ease, transform .35s ease;
}

.camera-message.hidden { opacity: 0; pointer-events: none; transform: scale(1.02); }

.tooth-mark { font-size: 58px; filter: drop-shadow(0 12px 30px rgba(0,224,184,.38)); }

h1, h2 { font-family: Fraunces, Georgia, serif; margin: 0; letter-spacing: -.05em; }
h1 { font-size: clamp(42px, 13vw, 78px); line-height: .9; }
h2 { font-size: clamp(30px, 8vw, 52px); color: var(--reef-2); }
p { line-height: 1.55; }

.primary, .glass {
  appearance: none;
  border: 0;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  min-height: 52px;
  border-radius: 999px;
  padding: 0 22px;
}

.primary {
  color: var(--ink);
  background: linear-gradient(135deg, var(--reef-2), var(--warning));
  box-shadow: 0 16px 40px rgba(0,224,184,.28);
}

.glass, .slider-card, .panel {
  color: var(--shell);
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.055));
  backdrop-filter: blur(18px);
}

.glass:disabled { opacity: .42; cursor: not-allowed; }

.controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 14px 0;
}

.slider-card {
  grid-column: 1 / -1;
  border-radius: 24px;
  padding: 14px 16px;
  display: grid;
  gap: 9px;
  font-weight: 900;
}

input[type="range"] { accent-color: var(--reef); width: 100%; }

.panel {
  border-radius: 26px;
  padding: 18px;
  box-shadow: 0 20px 50px rgba(0,0,0,.18);
}

.status-panel { display: grid; gap: 12px; }

.eyebrow {
  margin: 0 0 7px;
  color: var(--sand);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 12px;
  font-weight: 900;
}

.meter { height: 14px; background: rgba(255,255,255,.11); border-radius: 999px; overflow: hidden; }
.meter i { display: block; width: 0%; height: 100%; background: linear-gradient(90deg, var(--danger), var(--warning), var(--reef)); border-radius: inherit; transition: width .25s ease; }

.intel-grid { display: grid; gap: 12px; }
ul { margin: 0; padding-left: 20px; }
li { margin: 8px 0; }

.disclaimer { color: rgba(255,248,233,.68); font-size: 13px; text-align: center; }

.reticle { position: absolute; inset: 22px; z-index: 3; pointer-events: none; }
.reticle span { position: absolute; width: 42px; height: 42px; border-color: rgba(118,255,230,.78); }
.reticle span:nth-child(1){ left:0; top:0; border-left:3px solid; border-top:3px solid; border-radius: 18px 0 0 0; }
.reticle span:nth-child(2){ right:0; top:0; border-right:3px solid; border-top:3px solid; border-radius: 0 18px 0 0; }
.reticle span:nth-child(3){ left:0; bottom:0; border-left:3px solid; border-bottom:3px solid; border-radius: 0 0 0 18px; }
.reticle span:nth-child(4){ right:0; bottom:0; border-right:3px solid; border-bottom:3px solid; border-radius: 0 0 18px 0; }

.scanline {
  position: absolute;
  z-index: 3;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--reef-2), transparent);
  box-shadow: 0 0 24px var(--reef);
  animation: scan 2.7s linear infinite;
  opacity: .65;
}
@keyframes scan { from { transform: translateY(0); } to { transform: translateY(66vh); } }

@media (min-width: 760px) {
  .hero { grid-template-columns: minmax(0, 1.5fr) .8fr; align-items: stretch; }
  .camera-card { min-height: 620px; }
  .controls { grid-template-columns: auto auto 1fr; align-items: center; }
  .slider-card { grid-column: auto; }
  .intel-grid { grid-template-columns: 1fr 1fr; }
}