:root{
  --red:#ef6258;
  --ink:#f4f1ea;
  --black:#090909;
  --panel:rgba(10,10,10,.84);
  --line:rgba(255,255,255,.18);
}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;background:#000;color:var(--ink);font-family:Arial,Helvetica,sans-serif;overflow:hidden}
button,input{font:inherit}
button{color:inherit}
.app{position:relative;width:100%;height:100%;min-height:100dvh;background:#050505;isolation:isolate}
#sceneCanvas{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;object-fit:cover;background:#050505;z-index:-5}
.dim-layer{position:absolute;inset:0;background:#000;opacity:.18;pointer-events:none;z-index:-3;transition:opacity .3s ease}
.grain{position:absolute;inset:-50%;pointer-events:none;z-index:-2;opacity:.08;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='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");animation:grain .35s steps(2) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(3%,-2%)}50%{transform:translate(-2%,3%)}75%{transform:translate(1%,2%)}100%{transform:translate(0,0)}}
.brand{position:absolute;top:max(22px,env(safe-area-inset-top));left:max(22px,env(safe-area-inset-left));display:flex;align-items:center;gap:12px;text-shadow:0 2px 12px #000;z-index:4}
.brand-logo{display:block;width:min(72vw,560px);height:auto;filter:drop-shadow(0 2px 14px rgba(0,0,0,.45))}
.mode{font-size:11px;letter-spacing:.24em;font-weight:800;opacity:.82;background:rgba(0,0,0,.35);padding:7px 10px;border:1px solid rgba(255,255,255,.12)}
.panel{background:var(--panel);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line);box-shadow:0 16px 70px rgba(0,0,0,.45)}
.intro{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(680px,calc(100% - 32px));padding:clamp(24px,5vw,52px);z-index:6}
.eyebrow{font-size:11px;letter-spacing:.25em;font-weight:800;margin:0 0 18px;opacity:.75}
h1{font-size:clamp(36px,7vw,78px);line-height:.88;letter-spacing:-.065em;text-transform:uppercase;margin:0 0 30px;font-weight:900}
.scene-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:18px}
.scene-card{display:flex;align-items:center;gap:12px;border:1px solid var(--line);background:#111;padding:16px;text-align:left;cursor:pointer;font-size:12px;font-weight:900;letter-spacing:.08em;transition:.15s ease}
.scene-card:hover,.scene-card.active{background:var(--ink);color:#000;transform:translateY(-1px)}
.scene-icon{font-size:22px;min-width:28px}
.primary{width:100%;border:0;background:var(--red);padding:17px 20px;font-weight:900;letter-spacing:.08em;cursor:pointer;margin-top:2px}
.primary:hover{filter:brightness(1.08)}
.micro{text-align:center;font-size:11px;opacity:.58;margin:14px 0 0}
.caption{position:absolute;left:50%;bottom:16%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:1px;text-align:center;font-weight:900;font-size:clamp(28px,6vw,66px);line-height:.9;letter-spacing:-.05em;text-shadow:0 4px 30px #000;opacity:0;pointer-events:none;z-index:3;text-transform:uppercase}
.caption.show{animation:captionIn 4.2s ease forwards}
@keyframes captionIn{0%{opacity:0;transform:translate(-50%,10px)}10%,62%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-8px)}}
.controls{position:absolute;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(840px,calc(100% - 24px));padding:12px;z-index:7;transition:.25s ease}
.controls.hidden{opacity:0;pointer-events:none;transform:translate(-50%,20px)}
.control-row{display:flex;gap:8px;align-items:center}
.scene-tabs{overflow-x:auto;padding-bottom:8px}
.tab,.actions button,.flush{border:1px solid var(--line);background:#111;padding:10px 13px;font-size:11px;font-weight:900;letter-spacing:.09em;cursor:pointer;white-space:nowrap}
.tab.active{background:var(--ink);color:#000}
.sliders{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 2px}
.sliders label{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:12px;font-size:10px;font-weight:900;letter-spacing:.12em}
input[type=range]{width:100%;accent-color:var(--red)}
.actions{padding-top:10px;flex-wrap:wrap}
.actions button:hover,.flush:hover{background:var(--ink);color:#000}
.flush{display:block;width:100%;margin-top:10px;background:var(--red);border:0}
.hidden{display:none!important}
.timer-status{font-size:10px;letter-spacing:.1em;opacity:.7;text-align:right;margin-top:9px;min-height:12px}
.wake-controls{position:absolute;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));z-index:8;width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:rgba(0,0,0,.7);font-size:28px;cursor:pointer}
@media (max-width:640px){
  .brand{gap:8px;align-items:flex-start;flex-direction:column}.brand-logo{width:min(78vw,380px)}
  .intro{padding:24px}.scene-grid{grid-template-columns:1fr 1fr}.scene-card{padding:13px 11px;font-size:10px}.scene-icon{font-size:18px;min-width:22px}
  .controls{padding:9px}.sliders{grid-template-columns:1fr}.caption{bottom:24%}
}
@media (prefers-reduced-motion:reduce){.grain{animation:none}.caption.show{animation-duration:5s}}

.shopline{display:inline-block;margin-top:14px;color:var(--red);font-size:11px;font-weight:900;letter-spacing:.14em;text-decoration:none;border-bottom:1px solid transparent}
.shopline:hover{border-bottom-color:var(--red)}