:root {
  color-scheme: light;
  --paper:#fff;
  --ink:#20363a;
  --muted:#66777a;
  --aqua:#28b5c4;
  --aqua-dark:#098d9c;
  --red:#ed1c24;
  --glass:rgba(20,43,47,.7);
  --line:rgba(255,255,255,.42);
}
* { box-sizing:border-box; }
html,body { width:100%; height:100%; margin:0; overflow:hidden; background:#dfeaed; }
body { color:#fff; font-family:"Segoe UI Variable","Segoe UI",Arial,sans-serif; }
button { font:inherit; }
[hidden] { display:none!important; }
.dev-badge { position:fixed; z-index:1000; top:12px; right:12px; padding:8px 14px; border-radius:999px; background:#ffb000; color:#1e2528; font-size:16px; font-weight:900; letter-spacing:.12em; box-shadow:0 5px 18px rgba(0,0,0,.24); pointer-events:none; }

.booth {
  width:min(100vw,56.25vh);
  height:min(100vh,177.777vw);
  margin:auto;
  position:relative;
  background:var(--paper);
  box-shadow:0 0 80px rgba(25,63,70,.18);
}
.brand-header,.brand-footer { position:absolute; z-index:1; left:3.7037%; width:92.5926%; overflow:hidden; pointer-events:none; user-select:none; }
.brand-header { top:2.0833%; height:6.7708%; pointer-events:auto; cursor:pointer; touch-action:manipulation; }
.brand-footer { top:86.4583%; height:10.4167%; }
.brand-header img,.brand-footer img { width:100%; height:100%; display:block; object-fit:fill; }
.interactive-frame { position:absolute; z-index:2; left:3.7037%; top:10.4167%; width:92.5926%; height:73.9583%; overflow:hidden; border-radius:24px; background:#bdbdbd; }
.screen { position:absolute; inset:0; overflow:hidden; }
.screen>img,.screen>video { width:100%; height:100%; object-fit:cover; }

.standby-screen>img { object-position:center; }
.standby-copy { position:absolute; z-index:2; left:7%; right:7%; bottom:9%; display:flex; justify-content:center; }
.standby-copy>p { margin:0 0 12px; color:#86f2f8; font-size:clamp(12px,1.7vw,20px); font-weight:800; letter-spacing:.15em; text-transform:uppercase; }
.standby-copy h1 { margin:0 0 20px; font-size:clamp(48px,8vw,102px); line-height:.88; letter-spacing:-.055em; }
.standby-copy>span { display:block; max-width:75%; margin-bottom:34px; color:rgba(255,255,255,.84); font-size:clamp(16px,2.2vw,26px); line-height:1.3; }
.start-button { min-width:64%; border:0; border-radius:20px; padding:26px 44px; background:var(--aqua); color:#fff; font-size:clamp(24px,3vw,36px); font-weight:800; cursor:pointer; box-shadow:0 18px 40px rgba(0,110,125,.32); }
.standby-hint { display:none; }

.camera-screen { background:#bdbdbd; }
.camera-screen video { position:absolute; left:50%; top:50%; max-width:none; max-height:none; object-fit:cover; opacity:0; transform:translate(-50%,-50%) rotate(270deg) scaleY(-1); transform-origin:center; transition:opacity .18s ease; }
body[data-camera-rotation="none"] .camera-screen video { max-width:100%; max-height:100%; transform:translate(-50%,-50%) scaleX(-1); }
.camera-screen.camera-ready video { opacity:1; }
.camera-shade { position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.08),transparent 42%,rgba(8,32,37,.88)); pointer-events:none; }
.countdown { position:absolute; z-index:10; inset:0; display:grid; place-items:center; background:rgba(5,31,36,.18); pointer-events:none; }
.countdown span { display:grid; place-items:center; width:clamp(128px,26vw,250px); aspect-ratio:1; border:clamp(5px,.8vw,10px) solid rgba(255,255,255,.92); border-radius:50%; background:rgba(8,54,61,.52); color:#fff; font-size:clamp(92px,19vw,190px); font-weight:900; line-height:1; text-shadow:0 8px 24px rgba(0,0,0,.25); backdrop-filter:blur(8px); }
.countdown b { font:inherit; transform:translateY(-.055em); }
.countdown.tick span { animation:countdown-tick .78s cubic-bezier(.16,1,.3,1); }
.camera-flash { position:absolute; z-index:11; inset:0; background:#fff; pointer-events:none; animation:camera-flash .22s ease-out forwards; }
.camera-controls { position:absolute; z-index:3; left:0; right:0; bottom:1.8%; display:grid; gap:10px; justify-items:center; }
.controls-heading { display:flex; align-items:center; gap:11px; padding:0 5%; justify-self:start; }
.controls-heading>span { width:36px; height:36px; display:grid; place-items:center; border-radius:50%; background:var(--aqua); font-weight:900; }
.controls-heading p { margin:0; display:grid; }
.controls-heading b { font-size:clamp(15px,1.9vw,22px); }
.controls-heading small { color:rgba(255,255,255,.68); font-size:clamp(11px,1.25vw,15px); }
.scenario-strip { width:100%; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:9px; margin:0; padding:6px 4%; border:0; }
.scenario-strip::-webkit-scrollbar { display:none; }
.camera-controls.capture-locked .scenario-strip { pointer-events:none; }
.scenario-card { min-width:0; }
.scenario-card input { position:absolute; opacity:0; pointer-events:none; }
.scenario-card span { width:100%; display:grid; gap:6px; padding:6px 6px 9px; border:2px solid transparent; border-radius:15px; background:rgba(255,255,255,.92); color:var(--ink); cursor:pointer; box-shadow:0 9px 22px rgba(11,38,43,.22); transition:transform .22s,border-color .22s; }
.scenario-card img { width:100%; aspect-ratio:1.35; object-fit:cover; border-radius:10px; }
.scenario-card b { min-height:2.2em; display:grid; place-items:center; overflow:hidden; font-size:clamp(9px,1.15vw,14px); line-height:1.1; text-align:center; }
.scenario-card input:checked+span { border-color:var(--aqua); transform:translateY(-6px); }
.capture-button,.primary-action,.secondary-action,.camera-error button { border-radius:16px; padding:17px 30px; font-size:clamp(17px,2.1vw,24px); font-weight:800; cursor:pointer; }
.capture-button,.primary-action { min-width:46%; border:0; background:var(--red); color:#fff; box-shadow:0 13px 32px rgba(196,13,23,.28); }
.capture-button { display:flex; align-items:center; justify-content:center; gap:13px; }
.capture-button i { width:19px; height:19px; border:4px solid #fff; border-radius:50%; box-shadow:0 0 0 2px rgba(255,255,255,.35); }
.privacy-consent { max-width:78%; margin:0; color:rgba(255,255,255,.82); font-size:clamp(10px,1.15vw,14px); line-height:1.3; text-align:center; text-shadow:0 2px 8px rgba(0,0,0,.65); }
.capture-button:disabled,.primary-action:disabled,.secondary-action:disabled { opacity:.45; cursor:wait; }
.message,.print-status { position:absolute; z-index:7; left:50%; transform:translateX(-50%); margin:0; padding:11px 17px; border-radius:14px; background:rgba(137,20,48,.88); backdrop-filter:blur(14px); font-weight:700; text-align:center; }
.message { top:22px; }
.message:empty,.print-status:empty { display:none; }
.camera-error { position:absolute; z-index:8; inset:0; display:grid; place-content:center; justify-items:center; gap:20px; background:#193c42; }
.camera-error p { font-size:30px; font-weight:800; }
.camera-error button { border:0; background:#fff; color:var(--ink); }

.promo-carousel,.promo-slide { position:absolute; inset:0; }
.promo-slide { opacity:0; overflow:hidden; pointer-events:none; clip-path:inset(0 0 100% 0); transition:opacity .9s ease,clip-path 1.1s cubic-bezier(.22,1,.36,1); }
.promo-slide.active { opacity:1; clip-path:inset(0); z-index:2; }
.promo-slide img { width:100%; height:100%; object-fit:fill; }
.promo-progress { position:absolute; z-index:5; left:7%; right:7%; bottom:6%; display:flex; gap:7px; }
.promo-progress span { height:4px; flex:1; border-radius:4px; background:rgba(255,255,255,.25); transition:background .3s,transform .3s; transform-origin:left; }
.promo-progress span.active { background:var(--aqua); transform:scaleY(1.7); }
.generation-status { position:absolute; z-index:6; top:24px; right:24px; display:flex; align-items:center; gap:10px; padding:11px 15px; border:1px solid var(--line); border-radius:14px; background:var(--glass); backdrop-filter:blur(18px); }
.generation-status span { width:18px; height:18px; border:2px solid rgba(255,255,255,.3); border-top-color:#fff; border-radius:50%; animation:spin .8s linear infinite; }
.generation-status p { margin:0; font-weight:700; }
.flow-error { position:absolute; z-index:9; inset:0; display:grid; align-content:center; justify-items:start; padding:9%; background:linear-gradient(145deg,rgba(8,42,48,.96),rgba(13,91,101,.92)); backdrop-filter:blur(18px); }
.flow-error small { color:#8df4f8; font-size:clamp(11px,1.35vw,16px); font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.flow-error h2 { max-width:90%; margin:12px 0 16px; font-size:clamp(40px,6.7vw,76px); line-height:.94; letter-spacing:-.045em; }
.flow-error>p { max-width:82%; margin:0; color:rgba(255,255,255,.8); font-size:clamp(16px,2.1vw,24px); line-height:1.35; }
.flow-error-actions { width:100%; display:grid; grid-template-columns:1.15fr .85fr; gap:12px; margin-top:34px; }
.flow-error-actions button { min-width:0; }

.result-screen>img { object-fit:cover; object-position:center; background:transparent; }
.result-shade { position:absolute; inset:0; background:linear-gradient(180deg,transparent 42%,rgba(5,34,40,.38) 58%,rgba(5,26,31,.94) 100%); pointer-events:none; }
.result-retrieval { position:absolute; z-index:3; inset:0 4% 3%; display:flex; flex-direction:column; justify-content:flex-end; }
.result-main-actions { display:grid; grid-template-columns:1.3fr .7fr; gap:12px; }
.result-main-actions button,.qr-overlay-actions button { width:100%; min-height:66px; padding:17px 20px; font-size:clamp(16px,1.9vw,22px); }
.pickup-action { border:0; border-radius:16px; background:#fff; color:var(--aqua-dark); font-weight:900; cursor:pointer; box-shadow:0 10px 28px rgba(0,0,0,.24); }
.qr-overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; }
.qr-pickup { width:min(64%,620px); display:flex; flex-direction:column; align-items:center; gap:16px; padding:30px 34px 24px; border-radius:26px; background:#fff; color:var(--ink); box-shadow:0 24px 64px rgba(0,0,0,.4); }
.qr-copy { min-width:0; text-align:center; }
.qr-copy h2 { margin:0 0 9px; font-size:clamp(29px,4vw,46px); line-height:.95; letter-spacing:-.04em; }
.qr-copy p { max-width:440px; margin:0 auto; color:var(--muted); font-size:clamp(12px,1.55vw,18px); line-height:1.3; }
.qr-frame { padding:10px; border:2px solid #dce8e9; border-radius:19px; background:#fff; box-shadow:0 8px 24px rgba(18,65,71,.1); }
.qr-frame img { display:block; width:clamp(245px,31vw,330px); aspect-ratio:1; }
.qr-waiting { width:clamp(245px,31vw,330px); min-height:245px; display:grid; place-items:center; margin:0; color:var(--muted); text-align:center; font-weight:750; }
.qr-timer { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; margin:0; color:var(--muted); font-size:clamp(11px,1.3vw,15px); line-height:1; }
.qr-timer b { color:var(--aqua-dark); font-size:clamp(22px,2.8vw,32px); font-variant-numeric:tabular-nums; letter-spacing:.02em; }
.qr-overlay-actions { width:min(64%,620px); display:flex; flex-direction:column; gap:10px; }
.qr-back-action { border:0; border-radius:16px; background:#fff; color:var(--ink); font-weight:900; cursor:pointer; box-shadow:0 10px 28px rgba(0,0,0,.24); }
.print-action { border:1px solid rgba(255,255,255,.36); border-radius:16px; background:rgba(17,53,59,.5); color:rgba(255,255,255,.78); font-weight:700; cursor:pointer; backdrop-filter:blur(14px); }
.secondary-action { min-width:0; border:0; background:#ed1c24; color:#fff; font-weight:900; box-shadow:0 12px 30px rgba(237,28,36,.32); }
.primary-action { min-width:0; }
.print-status { bottom:34%; background:rgba(8,43,49,.9); }
button:focus-visible,.scenario-card input:focus-visible+span { outline:4px solid #fff; outline-offset:3px; }

body.no-branding .brand-header,
body.no-branding .brand-footer { display:none; }
body.no-branding .interactive-frame { top:2.0833%; height:95.8334%; }

@keyframes spin { to { transform:rotate(360deg); } }
@keyframes countdown-tick { from { opacity:.2; transform:scale(1.35); } to { opacity:1; transform:scale(1); } }
@keyframes camera-flash { from { opacity:.92; } to { opacity:0; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }
@media (max-aspect-ratio:9/16) {
  .booth { width:100vw; height:177.777vw; margin-top:calc((100vh - 177.777vw)/2); }
}