:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --red: #ff3b3b;
  --green: #31e981;
  --blue: #4985ff;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #050505; overflow: hidden; }
body { min-height: 100svh; color: #fff; }
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.app { min-height: 100svh; background: #050505; }
.intro {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(48px + var(--safe-top)) 28px calc(32px + var(--safe-bottom));
  text-align: center;
  background:
    radial-gradient(circle at 13% 16%, rgba(255, 42, 42, .17), transparent 25%),
    radial-gradient(circle at 86% 22%, rgba(39, 110, 255, .19), transparent 27%),
    radial-gradient(circle at 50% 92%, rgba(25, 238, 121, .13), transparent 28%),
    #050505;
}

.brand-mark { position: relative; width: 86px; height: 86px; margin-bottom: 30px; }
.brand-mark span { position: absolute; width: 52px; height: 52px; border-radius: 50%; mix-blend-mode: screen; }
.mark-r { left: 0; top: 0; background: var(--red); }
.mark-g { right: 0; top: 0; background: var(--green); }
.mark-b { left: 17px; bottom: 0; background: var(--blue); }
.eyebrow { margin: 0 0 10px; color: #969696; font-size: 12px; font-weight: 750; letter-spacing: .18em; }
h1 { margin: 0; max-width: 340px; font-size: clamp(40px, 11vw, 58px); line-height: .94; letter-spacing: -.055em; }
.intro-copy { max-width: 370px; margin: 24px 0 34px; color: #b8b8b8; font-size: 17px; line-height: 1.5; }
.primary-button {
  width: min(100%, 360px); min-height: 58px; border: 0; border-radius: 18px; padding: 0 24px;
  display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  background: #fff; color: #080808; font-weight: 800; cursor: pointer;
  box-shadow: 0 10px 35px rgba(255,255,255,.12);
}
.primary-button:active { transform: scale(.985); }
.primary-button.compact { width: 100%; min-height: 52px; }
.text-button { border: 0; background: none; color: #d4d4d4; padding: 18px; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.privacy-note { max-width: 320px; margin: auto 0 0; padding-top: 38px; color: #777; font-size: 12px; line-height: 1.45; }
.camera-icon { width: 20px; height: 15px; border: 2px solid currentColor; border-radius: 4px; position: relative; }
.camera-icon::before { content: ""; position: absolute; width: 6px; height: 6px; border: 2px solid currentColor; border-radius: 50%; left: 5px; top: 2px; }
.camera-icon::after { content: ""; position: absolute; width: 7px; height: 3px; border-radius: 2px 2px 0 0; background: currentColor; left: 4px; top: -5px; }

.viewer { position: fixed; inset: 0; background: #000; overflow: hidden; }
#camera, #demo-image { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
#output { position: absolute; inset: 0; width: 100%; height: 100%; background: #0b0b0b; }
.viewer::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(0,0,0,.58), transparent 22%, transparent 60%, rgba(0,0,0,.88)); }
.viewer-header { position: absolute; z-index: 4; top: 0; left: 0; right: 0; padding: calc(14px + var(--safe-top)) 16px 0; display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 8px; }
.viewer-brand { justify-self: center; display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 850; letter-spacing: .13em; }
.mini-mark { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: conic-gradient(var(--red), var(--green), var(--blue), var(--red)); }
.header-actions { display: flex; gap: 8px; min-width: 46px; justify-content: flex-end; }
.icon-button { width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(12,12,12,.52); backdrop-filter: blur(16px); cursor: pointer; }
.close-icon { width: 17px; height: 17px; position: relative; }
.close-icon::before, .close-icon::after { content: ""; position: absolute; left: 8px; top: 0; width: 2px; height: 18px; background: currentColor; border-radius: 2px; transform: rotate(45deg); }
.close-icon::after { transform: rotate(-45deg); }
.help-button { font-size: 18px; font-weight: 800; }
.torch-icon { width: 13px; height: 21px; border: 2px solid currentColor; border-radius: 3px 3px 7px 7px; position: relative; }
.torch-icon::after { content: ""; position: absolute; left: 2px; right: 2px; top: 5px; height: 2px; background: currentColor; }
.icon-button.on { color: #111; background: #fff; }

.focus-guide { position: absolute; z-index: 3; width: min(72vw, 370px); aspect-ratio: 3 / 4; left: 50%; top: 43%; transform: translate(-50%, -50%); opacity: .55; }
.focus-guide span { position: absolute; width: 29px; height: 29px; border-color: #fff; border-style: solid; }
.focus-guide span:nth-child(1) { left: 0; top: 0; border-width: 2px 0 0 2px; border-radius: 8px 0 0; }
.focus-guide span:nth-child(2) { right: 0; top: 0; border-width: 2px 2px 0 0; border-radius: 0 8px 0 0; }
.focus-guide span:nth-child(3) { right: 0; bottom: 0; border-width: 0 2px 2px 0; border-radius: 0 0 8px; }
.focus-guide span:nth-child(4) { left: 0; bottom: 0; border-width: 0 0 2px 2px; border-radius: 0 0 0 8px; }
.mode-chip { position: absolute; z-index: 4; top: calc(76px + var(--safe-top)); left: 50%; transform: translateX(-50%); border: 1px solid rgba(255,255,255,.16); border-radius: 99px; padding: 8px 13px; display: flex; align-items: center; gap: 8px; background: rgba(8,8,8,.58); backdrop-filter: blur(14px); font-size: 10px; font-weight: 850; letter-spacing: .12em; white-space: nowrap; }
.mode-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 12px var(--red); }

.controls { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; padding: 18px 18px calc(16px + var(--safe-bottom)); }
.view-switch { width: 230px; margin: 0 auto 16px; padding: 3px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; display: grid; grid-template-columns: 1fr 1fr; background: rgba(10,10,10,.56); backdrop-filter: blur(18px); }
.view-option { border: 0; border-radius: 9px; padding: 8px 9px; background: transparent; color: #aaa; font-size: 11px; font-weight: 750; cursor: pointer; }
.view-option.active { color: #111; background: #fff; }
.filter-buttons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; max-width: 440px; margin: 0 auto; }
.filter-button { position: relative; min-width: 0; aspect-ratio: 1; max-height: 72px; border: 1px solid rgba(255,255,255,.18); border-radius: 22px; color: #fff; background: rgba(20,20,20,.65); display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(18px); transition: transform .16s, border-color .16s, background .16s; }
.filter-button span:first-child { font-size: 24px; font-weight: 900; line-height: 1; }
.filter-button small { margin-top: 4px; color: #aaa; font-size: 8px; font-weight: 850; letter-spacing: .1em; }
.filter-button.active { transform: translateY(-4px); }
.filter-button.red.active { background: rgba(227, 31, 31, .82); border-color: #ff7777; box-shadow: 0 10px 32px rgba(255,36,36,.28); }
.filter-button.green.active { background: rgba(14, 173, 79, .82); border-color: #77ffae; box-shadow: 0 10px 32px rgba(24,255,116,.22); }
.filter-button.blue.active { background: rgba(32, 82, 210, .84); border-color: #7fa5ff; box-shadow: 0 10px 32px rgba(45,98,255,.28); }
.filter-button.auto.active { background: #fff; color: #111; border-color: #fff; }
.filter-button.active small { color: currentColor; opacity: .78; }
.play-icon { width: 0; height: 0; border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-left: 14px solid currentColor; margin-left: 3px; }
.adjust-toggle { margin: 14px auto 0; border: 0; padding: 8px 12px; display: flex; align-items: center; gap: 7px; color: #c8c8c8; background: transparent; font-size: 11px; font-weight: 700; cursor: pointer; }
.sliders-icon { width: 15px; height: 11px; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; position: relative; }
.sliders-icon::before { content: ""; position: absolute; left: 3px; top: -3px; width: 4px; height: 4px; border: 1px solid currentColor; background: #111; border-radius: 50%; }
.sliders-icon::after { content: ""; position: absolute; right: 2px; bottom: -3px; width: 4px; height: 4px; border: 1px solid currentColor; background: #111; border-radius: 50%; }
.adjust-panel { max-width: 420px; margin: 7px auto 0; padding: 14px; border: 1px solid rgba(255,255,255,.13); border-radius: 16px; background: rgba(12,12,12,.82); backdrop-filter: blur(18px); }
.adjust-panel label { display: grid; grid-template-columns: 78px 1fr; align-items: center; gap: 10px; margin: 8px 0; color: #cfcfcf; font-size: 11px; font-weight: 700; }
.adjust-panel input { width: 100%; accent-color: #fff; }
.reset-button { display: block; margin: 8px 0 0 auto; border: 0; background: transparent; color: #aaa; font-size: 10px; text-decoration: underline; cursor: pointer; }

.sheet-dialog { width: min(calc(100% - 24px), 480px); margin: auto auto 12px; border: 1px solid #292929; border-radius: 26px; padding: 12px 22px calc(22px + var(--safe-bottom)); color: #fff; background: #111; box-shadow: 0 25px 80px #000; }
.sheet-dialog::backdrop { background: rgba(0,0,0,.72); backdrop-filter: blur(4px); }
.dialog-handle { width: 44px; height: 4px; border-radius: 99px; margin: 0 auto 20px; background: #424242; }
.sheet-dialog h2 { margin: 0 0 14px; font-size: 24px; letter-spacing: -.03em; }
.sheet-dialog p, .sheet-dialog li { color: #bdbdbd; line-height: 1.5; }
.sheet-dialog ol { padding-left: 22px; }

@media (min-width: 700px) {
  .intro { padding-left: 60px; padding-right: 60px; }
  .filter-button { aspect-ratio: 1.2; }
  .focus-guide { width: min(46vw, 390px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}