@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root { color-scheme: dark; --ink:#f8f7ef; --muted:#aaa99f; --panel:rgba(15,17,24,.72); --line:rgba(255,244,178,.14); --accent:#f6d94c; --accent-rgb:246,217,76; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; overflow-x:hidden; background:#080b14; color:var(--ink); font-family:Manrope,Arial,sans-serif; }
button,input { font:inherit; }
button { color:inherit; cursor:pointer; }
#scene { position:fixed; inset:0; z-index:0; width:100%; height:100%; }
body::before { content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.28; background:linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:46px 46px; mask-image:linear-gradient(to bottom,black,transparent 82%); }
body::after { content:""; position:fixed; inset:0; z-index:2; pointer-events:none; background:radial-gradient(circle at 50% 50%,transparent 28%,rgba(4,6,14,.58) 100%); }
.topbar,.interface,.photo-portal,.toast { position:relative; z-index:3; }
.topbar { height:76px; padding:0 clamp(20px,4vw,66px); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,.07); background:rgba(7,9,18,.45); backdrop-filter:blur(16px); }
.brand { display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font-family:"DM Mono",monospace; font-size:12px; letter-spacing:.12em; font-weight:500; }
.brand-mark { color:var(--accent); font-size:22px; text-shadow:0 0 18px var(--accent); }
.live-indicator { display:flex; align-items:center; gap:8px; color:var(--muted); font-family:"DM Mono",monospace; font-size:10px; letter-spacing:.05em; }
.live-indicator i { width:7px; height:7px; border-radius:50%; background:#687084; }
.live-indicator.active i { background:#58e8aa; box-shadow:0 0 12px #58e8aa; }
.interface { min-height:calc(100vh - 76px); padding:clamp(38px,7vh,90px) clamp(20px,4vw,66px) 42px; display:grid; grid-template-columns:minmax(280px,1fr) 290px; grid-template-rows:auto 1fr auto; column-gap:clamp(20px,6vw,120px); align-items:start; pointer-events:none; }
.intro { max-width:590px; pointer-events:auto; }
.eyebrow,.panel-heading,output,.gesture-details small,.gesture-help { font-family:"DM Mono",monospace; letter-spacing:.09em; }
.eyebrow { margin:0 0 17px; color:rgb(var(--accent-rgb)); font-size:11px; }
h1 { font-size:clamp(39px,5vw,76px); line-height:1.05; letter-spacing:-.065em; margin:0; font-weight:800; }
h1 em { color:rgb(var(--accent-rgb)); font-style:normal; text-shadow:0 0 28px rgba(var(--accent-rgb),.3); }
.intro-copy { max-width:460px; margin:22px 0 0; color:var(--muted); font-size:14px; line-height:1.8; }
.control-panel { grid-column:2; grid-row:1 / span 2; width:100%; padding:19px; border:1px solid var(--line); background:var(--panel); border-radius:16px; backdrop-filter:blur(20px); box-shadow:0 20px 80px rgba(0,0,0,.2); pointer-events:auto; }
.panel-heading { display:flex; justify-content:space-between; color:#dadbea; font-size:10px; font-weight:500; text-transform:uppercase; }
.panel-heading small,output { color:#777b9d; font-size:9px; border:0; background:transparent; }
.panel-heading.compact { margin-top:25px; }
.templates { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:12px; }
.template { min-width:0; height:55px; border:1px solid rgba(255,255,255,.08); border-radius:8px; background:rgba(255,255,255,.025); color:#9497ad; font-size:8px; transition:.25s ease; }
.template span { display:block; margin-bottom:4px; color:#c7c8db; font-size:18px; line-height:17px; }
.template:hover,.template.selected { color:#fff; border-color:rgba(var(--accent-rgb),.82); background:rgba(var(--accent-rgb),.15); box-shadow:inset 0 0 18px rgba(var(--accent-rgb),.13),0 0 17px rgba(var(--accent-rgb),.13); }
.template.selected span { color:rgb(var(--accent-rgb)); }
.color-picker,.upload-button { margin-top:11px; display:flex; align-items:center; gap:10px; height:42px; padding:0 11px; border:1px solid rgba(255,255,255,.09); border-radius:8px; color:#dfe0ed; font-size:11px; background:rgba(255,255,255,.025); transition:.2s; }
.color-picker:hover,.upload-button:hover { border-color:rgba(var(--accent-rgb),.65); }
#particleColor { width:22px; height:22px; padding:0; border:0; border-radius:50%; background:transparent; cursor:pointer; }
#particleColor::-webkit-color-swatch-wrapper { padding:0; } #particleColor::-webkit-color-swatch { border:2px solid rgba(255,255,255,.4); border-radius:50%; }
.upload-button { cursor:pointer; border-style:dashed; justify-content:center; color:#c9c9e0; } .upload-button input { display:none; } .upload-icon { color:rgb(var(--accent-rgb)); font-size:18px; }
.privacy-note { margin:8px 0 0; color:#777b92; font-size:9px; line-height:1.5; }
.gesture-card { grid-column:1; grid-row:2; align-self:end; width:min(350px,100%); margin-top:clamp(120px,17vh,250px); pointer-events:auto; }
.camera-frame { position:relative; height:190px; overflow:hidden; border:1px solid var(--line); border-radius:14px; background:#0d1020; box-shadow:0 20px 50px rgba(0,0,0,.25); }
#camera,#handCanvas { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scaleX(-1); }
#camera { opacity:0; transition:opacity .35s; } #camera.active { opacity:.8; }
#handCanvas { z-index:2; pointer-events:none; } .camera-mask { position:absolute; inset:0; z-index:3; background:linear-gradient(120deg,rgba(var(--accent-rgb),.16),transparent 55%),linear-gradient(to top,rgba(5,7,16,.7),transparent 50%); pointer-events:none; }
.crosshair { position:absolute; z-index:4; top:50%; left:50%; width:52px; height:52px; transform:translate(-50%,-50%); border:1px solid rgba(255,255,255,.45); border-radius:50%; box-shadow:0 0 20px rgba(var(--accent-rgb),.38); }
.crosshair::after,.crosshair::before { content:""; position:absolute; background:rgba(255,255,255,.6); } .crosshair::after { width:72px;height:1px;top:25px;left:-11px; }.crosshair::before {width:1px;height:72px;left:25px;top:-11px;}
#gestureState { position:absolute; z-index:5; right:10px; bottom:7px; margin:0; color:#f5f5ff; font-family:"DM Mono",monospace; font-size:9px; letter-spacing:.05em; text-shadow:0 1px 5px #000; }
.gesture-details { display:flex; justify-content:space-between; align-items:center; padding-top:11px; }.gesture-details small { display:block; color:#8b8da5; font-size:9px; }.gesture-details strong { font-family:"DM Mono",monospace; font-size:12px; color:rgb(var(--accent-rgb)); letter-spacing:.09em; }
.gesture-details button,.manual-controls button { border:1px solid rgba(var(--accent-rgb),.55); border-radius:8px; padding:9px 12px; background:rgba(var(--accent-rgb),.1); color:#f2f1ff; font-size:10px; transition:.2s; }.gesture-details button:hover,.manual-controls button:hover { background:rgba(var(--accent-rgb),.28); box-shadow:0 0 18px rgba(var(--accent-rgb),.2); }
.gesture-help { margin:9px 0 0; color:#777b92; font-size:8px; line-height:1.7; }
.manual-controls { grid-column:1; grid-row:3; display:flex; gap:9px; margin-top:29px; pointer-events:auto; }.manual-controls button { padding:10px 16px; background:rgba(10,13,28,.65); color:#c7c8d5; }.manual-controls .solid { border-color:rgb(var(--accent-rgb)); background:rgb(var(--accent-rgb)); color:white; }
.photo-portal { position:fixed; inset:0; z-index:10; display:grid; place-items:center; padding:25px; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .42s,visibility .42s; }.photo-portal.show { opacity:1; visibility:visible; }
.portal-glow { position:absolute; width:min(72vw,750px); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgba(var(--accent-rgb),.32),rgba(var(--accent-rgb),.06) 38%,transparent 68%); filter:blur(10px); animation:pulse 1.8s infinite alternate; }
.portal-rings { position:absolute; width:min(78vw,610px); aspect-ratio:1; display:grid; place-items:center; perspective:800px; }.portal-rings i { position:absolute; width:100%; height:42%; border:1px solid rgba(var(--accent-rgb),.5); border-radius:50%; opacity:0; box-shadow:0 0 18px rgba(var(--accent-rgb),.22),inset 0 0 18px rgba(var(--accent-rgb),.12); transform:scale(.05) rotate(0); }.photo-portal.show .portal-rings i { animation:portal-burst 1.15s cubic-bezier(.16,1,.3,1) both,ring-spin 5s linear 1.1s infinite; }.photo-portal.show .portal-rings i:nth-child(2) { width:84%; height:84%; animation-delay:.08s,1.18s; }.photo-portal.show .portal-rings i:nth-child(3) { width:72%; height:32%; transform:rotate(65deg); animation-delay:.16s,1.26s; }
.photo-portal figure { position:relative; width:min(72vw,520px); margin:0; transform:scale(.02) rotate(-8deg); opacity:0; filter:brightness(2.3) saturate(.45); transition:transform .58s cubic-bezier(.16,1,.3,1),opacity .3s,filter .58s; }.photo-portal.show figure { transform:scale(1) rotate(0); opacity:1; filter:brightness(1) saturate(1); }.photo-portal.releasing figure { transform:scale(.02) rotate(9deg); opacity:0; filter:brightness(2.5) saturate(.2); transition:transform .48s cubic-bezier(.7,0,.84,0),opacity .42s,filter .42s; }
.photo-portal figure::after { content:""; position:absolute; inset:0 0 42px; border-radius:13px; pointer-events:none; opacity:0; background:linear-gradient(115deg,transparent 25%,rgba(255,255,255,.62) 48%,transparent 70%); transform:translateX(-125%); }.photo-portal.materializing figure::after { animation:photo-scan .85s .12s ease-out; }.photo-portal img { display:block; width:100%; max-height:64vh; object-fit:cover; clip-path:circle(0 at 50% 50%); border-radius:13px; border:1px solid rgba(255,255,255,.7); box-shadow:0 0 0 8px rgba(var(--accent-rgb),.13),0 28px 100px rgba(0,0,0,.58),0 0 70px rgba(var(--accent-rgb),.42); transition:clip-path .68s cubic-bezier(.16,1,.3,1); }.photo-portal.show img { clip-path:circle(75% at 50% 50%); }.photo-portal.releasing img { clip-path:circle(0 at 50% 50%); transition:clip-path .4s cubic-bezier(.7,0,.84,0); }.photo-portal figcaption { display:flex; justify-content:space-between; gap:16px; padding:14px 5px; color:white; font-family:"DM Mono",monospace; font-size:11px; letter-spacing:.06em; }.photo-portal figcaption small { color:#b3b3cc; font-size:9px; }
.toast { position:fixed; z-index:20; left:50%; bottom:25px; transform:translate(-50%,20px); padding:10px 15px; border:1px solid rgba(255,255,255,.13); border-radius:8px; background:rgba(9,11,22,.88); color:#e9e9f5; font-size:11px; opacity:0; transition:.25s; pointer-events:none; backdrop-filter:blur(8px); }.toast.show { transform:translate(-50%,0); opacity:1; }
.morph-particle { position:fixed; z-index:14; left:50%; top:50%; width:17px; height:17px; border-radius:50%; opacity:0; pointer-events:none; transform:translate(-50%,-50%) scale(.4); background:radial-gradient(circle,#fffbd2 0 8%,rgb(var(--accent-rgb)) 25%,rgba(var(--accent-rgb),.48) 48%,transparent 72%); box-shadow:0 0 13px rgb(var(--accent-rgb)),0 0 34px rgba(var(--accent-rgb),.86),0 0 70px rgba(var(--accent-rgb),.45); will-change:left,top,transform,opacity; }.morph-particle::before,.morph-particle::after { content:""; position:absolute; inset:50%; width:90px; height:2px; transform-origin:left center; background:linear-gradient(90deg,rgba(var(--accent-rgb),.9),transparent); filter:blur(.5px); opacity:.75; }.morph-particle::after { width:52px; transform:rotate(120deg); opacity:.5; }.morph-particle.active { opacity:1; animation:particle-flicker .12s steps(2) infinite; }
@keyframes pulse { from { transform:scale(.9); opacity:.65; } to { transform:scale(1.15); opacity:1; } }
@keyframes portal-burst { 0%{opacity:0;transform:scale(.05) rotate(-35deg)} 38%{opacity:.88} 100%{opacity:.34;transform:scale(1) rotate(0)} }
@keyframes ring-spin { to { transform:rotate(360deg) rotateX(32deg) } }
@keyframes photo-scan { 0%{opacity:0;transform:translateX(-125%)} 22%{opacity:.75} 100%{opacity:0;transform:translateX(125%)} }
@keyframes particle-flicker { 50%{filter:brightness(1.7)} }
@media(max-width:760px) { .topbar{height:60px}.live-indicator span{display:none}.interface{min-height:calc(100vh - 60px);padding:33px 18px;display:flex;flex-direction:column;gap:24px}.intro h1{font-size:45px}.control-panel{order:3}.gesture-card{order:2;margin:0;width:100%}.manual-controls{order:4;margin:0}.photo-portal figcaption{flex-direction:column;gap:5px}.templates{gap:4px}.template{height:51px;font-size:7px}.template span{font-size:16px}.control-panel{padding:15px} }