:root{--black:#070605;--black-lift:#100e0c;--paper:#ece8e0;--muted:#847e74;--faint:#2e2b27;--red:#c1121f;--red-deep:#8c0d16;--strip-bg:#f5f1e8;--font-display:"Bodoni Moda", serif;--font-mono:"DM Mono", monospace;--font-hand:"Caveat", cursive}*{box-sizing:border-box;margin:0;padding:0}html{background:var(--black)}body{background:var(--black);color:var(--paper);font-family:var(--font-mono);-webkit-font-smoothing:antialiased;min-height:100dvh;font-size:14px;line-height:1.6;overflow-x:hidden}body:before{content:"";z-index:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 28%,#ece8e00d 0%,#0000 45%),radial-gradient(140% 120% at 50% 40%,#0000 35%,#0000009e 100%);position:fixed;inset:0}.grain{pointer-events:none;z-index:100;opacity:.55;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.22'/%3E%3C/svg%3E");animation:.9s steps(6,end) infinite grain;position:fixed;inset:-100%}@keyframes grain{0%{transform:translate(0)}16%{transform:translate(-3%,2%)}33%{transform:translate(2%,-4%)}50%{transform:translate(-4%,-2%)}66%{transform:translate(3%,3%)}83%{transform:translate(-2%,4%)}to{transform:translate(0)}}main{z-index:1;min-height:100dvh;padding:104px 24px 72px;padding-top:calc(104px + env(safe-area-inset-top));position:relative}a{color:inherit;text-decoration:none}button{font-family:var(--font-mono);cursor:pointer}::selection{background:var(--red);color:var(--paper)}:focus-visible{outline:1px solid var(--paper);outline-offset:4px}.nav{z-index:50;padding:22px 28px;padding-top:calc(22px + env(safe-area-inset-top));letter-spacing:.3em;text-transform:uppercase;background:linear-gradient(#070605f2 70%,#0000);justify-content:space-between;align-items:center;font-size:11px;display:flex;position:fixed;top:0;left:0;right:0}.nav a{color:var(--muted);transition:color .25s}.nav a:hover,.nav a.active,.nav .wordmark{color:var(--paper)}.nav .wordmark .dot{color:var(--red)}.eyebrow{letter-spacing:.45em;text-transform:uppercase;color:var(--muted);font-size:10px}.display{font-family:var(--font-display);font-weight:400;line-height:.95}.btn{background:linear-gradient(to right, var(--red) 50%, transparent 50%);border:1px solid var(--faint);color:var(--paper);letter-spacing:.28em;text-transform:uppercase;background-position:100% 0;background-size:201% 100%;padding:16px 36px;font-size:11px;transition:background-position .35s,border-color .35s;display:inline-block;position:relative}.btn:hover{border-color:var(--red);background-position:0 0}.btn.primary{border-color:var(--red)}.btn.quiet{color:var(--muted);background:0 0;border:none}.btn.quiet:hover{color:var(--paper)}.btn:disabled{opacity:.4;cursor:default;background-position:100% 0}.welcome{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:36px;min-height:calc(100dvh - 176px);display:flex;position:relative}.balloons{pointer-events:none;z-index:-1;position:absolute;inset:0;overflow:hidden}.balloon{-webkit-user-select:none;user-select:none;-webkit-user-drag:none;position:absolute}.obj-1{opacity:.55;filter:brightness(.85);width:clamp(280px,36vw,520px);animation:13s ease-in-out infinite alternate drift-1;top:-6%;left:-10%}.obj-2{opacity:.45;filter:brightness(.75);width:clamp(220px,30vw,420px);animation:16s ease-in-out infinite alternate drift-2;bottom:-8%;right:-8%}.obj-3{opacity:.5;filter:brightness(.8);width:clamp(160px,22vw,300px);animation:11s ease-in-out infinite alternate drift-3;top:4%;right:6%}.obj-4{opacity:.4;filter:brightness(.7);width:clamp(120px,16vw,220px);animation:18s ease-in-out infinite alternate drift-4;bottom:6%;left:4%}@keyframes drift-1{0%{transform:translateY(0)rotate(-2deg)}to{transform:translateY(-28px)rotate(1deg)}}@keyframes drift-2{0%{transform:translateY(0)rotate(3deg)}to{transform:translateY(-20px)rotate(-1.5deg)}}@keyframes drift-3{0%{transform:translateY(0)rotate(-8deg)}to{transform:translateY(-18px)rotate(-4deg)}}@keyframes drift-4{0%{transform:translateY(0)rotate(4deg)}to{transform:translateY(-24px)rotate(8deg)}}.welcome-title{flex-direction:column;align-items:center;animation:1.1s cubic-bezier(.16,1,.3,1) both rise;display:flex}@keyframes rise{0%{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}.welcome-title .line-1{font-family:var(--font-display);letter-spacing:.06em;text-transform:uppercase;font-size:clamp(64px,15vw,180px);line-height:.9}.welcome-title .line-2{font-family:var(--font-display);color:var(--paper);margin-top:-.08em;font-size:clamp(52px,12vw,150px);font-style:italic;line-height:.9}.welcome-title .line-2 .full-stop{color:var(--red);font-style:normal}.welcome .tagline{font-family:var(--font-display);color:var(--muted);letter-spacing:.04em;font-size:clamp(17px,2.4vw,22px);font-style:italic;animation:1.1s cubic-bezier(.16,1,.3,1) .25s both rise}.welcome .actions{flex-wrap:wrap;justify-content:center;gap:18px;animation:1.1s cubic-bezier(.16,1,.3,1) .45s both rise;display:flex}.welcome .eyebrow{animation:1.1s cubic-bezier(.16,1,.3,1) .1s both rise}.login{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:28px;min-height:calc(100dvh - 176px);display:flex}.login h1{font-size:clamp(40px,9vw,80px);font-style:italic}.login input{border:none;border-bottom:1px solid var(--faint);color:var(--paper);font-family:var(--font-mono);letter-spacing:.35em;text-align:center;background:0 0;width:min(340px,82vw);padding:14px 8px;font-size:16px;transition:border-color .3s}.login input:focus{border-bottom-color:var(--red);outline:none}.login .error{color:var(--red);letter-spacing:.2em;font-size:12px;font-style:italic;font-family:var(--font-display);font-size:18px}.booth{flex-direction:column;align-items:center;gap:30px;max-width:780px;margin:0 auto;display:flex}.booth .placard-line{align-items:center;gap:16px;width:100%;max-width:480px;display:flex}.booth .placard-line:before,.booth .placard-line:after{content:"";background:var(--faint);flex:1;height:1px}.booth-stage{background:var(--black-lift);width:100%;position:relative;box-shadow:0 40px 80px #000c}.booth-stage video{filter:contrast(1.04)brightness(.97);width:100%;height:auto;display:block;transform:scaleX(-1)}.corner{z-index:2;pointer-events:none;width:22px;height:22px;position:absolute}.corner.tl{border-top:1px solid var(--paper);border-left:1px solid var(--paper);top:12px;left:12px}.corner.tr{border-top:1px solid var(--paper);border-right:1px solid var(--paper);top:12px;right:12px}.corner.bl{border-bottom:1px solid var(--paper);border-left:1px solid var(--paper);bottom:12px;left:12px}.corner.br{border-bottom:1px solid var(--paper);border-right:1px solid var(--paper);bottom:12px;right:12px}.rec{z-index:2;letter-spacing:.4em;text-transform:uppercase;color:var(--paper);pointer-events:none;align-items:center;gap:8px;font-size:10px;display:flex;position:absolute;top:18px;left:50%;transform:translate(-50%)}.rec-dot{background:var(--red);border-radius:50%;width:8px;height:8px;animation:1.2s ease-in-out infinite pulse}@keyframes pulse{0%,to{opacity:1}50%{opacity:.25}}.booth-stage .countdown{z-index:2;font-family:var(--font-display);color:var(--paper);text-shadow:0 0 60px #000c;pointer-events:none;justify-content:center;align-items:center;font-size:clamp(110px,28vw,240px);font-style:italic;display:flex;position:absolute;inset:0}.booth-stage .flash{z-index:3;pointer-events:none;background:#fff;animation:.14s ease-out forwards flash-fade;position:absolute;inset:0}@keyframes flash-fade{0%{opacity:1}to{opacity:0}}.booth-stage .shot-dots{z-index:2;pointer-events:none;justify-content:center;gap:12px;display:flex;position:absolute;bottom:18px;left:0;right:0}.booth-stage .shot-dots span{border:1px solid var(--paper);background:0 0;border-radius:50%;width:7px;height:7px;transition:background .3s,border-color .3s}.booth-stage .shot-dots span.done{background:var(--red);border-color:var(--red)}.booth-controls{flex-wrap:wrap;justify-content:center;align-items:center;gap:32px;display:flex}.toggle{color:var(--muted);letter-spacing:.3em;text-transform:uppercase;background:0 0;border:none;border-bottom:1px solid #0000;padding:8px 4px;font-size:11px;transition:color .25s,border-color .25s}.toggle.on{color:var(--paper);border-bottom-color:var(--red)}.shutter{border:1px solid var(--paper);background:0 0;border-radius:50%;width:80px;height:80px;transition:transform .15s;position:relative}.shutter:after{content:"";background:radial-gradient(circle at 35% 30%, #e0303d, var(--red) 55%, var(--red-deep));border-radius:50%;transition:transform .15s,box-shadow .15s;position:absolute;inset:7px;box-shadow:0 0 32px #c1121f73}.shutter:hover:not(:disabled):after{transform:scale(.92);box-shadow:0 0 44px #c1121fa6}.shutter:disabled{opacity:.3}.preview{grid-template-columns:minmax(0,440px) minmax(0,1fr);align-items:start;gap:56px;max-width:1080px;margin:0 auto;display:grid}.preview .strip-img{width:100%;display:block;box-shadow:0 50px 100px #000000d9}.preview-side{flex-direction:column;gap:30px;display:flex;position:sticky;top:104px}.preview-side>.eyebrow{border-bottom:1px solid var(--faint);padding-bottom:14px}.field label{margin-bottom:10px;display:block}.field input{border:none;border-bottom:1px solid var(--faint);width:100%;color:var(--paper);background:0 0;padding:10px 2px;transition:border-color .3s}.field input:focus{border-bottom-color:var(--red);outline:none}.field input.hand{font-family:var(--font-hand);font-size:28px}.field input.mono{font-family:var(--font-mono);letter-spacing:.12em;font-size:14px}.preview-actions{flex-direction:column;gap:12px;display:flex}.memories{max-width:1280px;margin:0 auto}.memories-head{flex-direction:column;gap:14px;margin-bottom:64px;display:flex}.memories-head h1{font-size:clamp(48px,9vw,110px);font-style:italic}.memories-head h1 .full-stop{color:var(--red);font-style:normal}.memories-grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:56px 28px;display:grid}.piece{text-align:left;background:0 0;border:none;flex-direction:column;gap:14px;padding:0;transition:transform .3s;display:flex}.piece:hover{transform:translateY(-5px)}.piece img{filter:brightness(.9);width:100%;transition:filter .3s,box-shadow .3s;display:block;box-shadow:0 24px 48px #000000bf}.piece:hover img{filter:brightness(1.05);box-shadow:0 34px 64px #000000d9}.placard{border-top:1px solid var(--faint);flex-direction:column;gap:3px;padding-top:10px;display:flex}.placard .no{letter-spacing:.4em;color:var(--muted);font-size:9px}.placard .title{font-family:var(--font-display);color:var(--paper);white-space:nowrap;text-overflow:ellipsis;font-size:17px;font-style:italic;overflow:hidden}.placard .date{letter-spacing:.25em;color:var(--muted);font-size:10px}.empty{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:32px;min-height:50vh;display:flex}.empty p{font-family:var(--font-display);color:var(--muted);font-size:clamp(26px,5vw,40px);font-style:italic}.lightbox{z-index:90;background:#070605f7;flex-direction:column;align-items:center;padding:88px 24px 72px;display:flex;position:fixed;inset:0;overflow-y:auto}.lightbox img{width:100%;max-width:min(440px,92vw);box-shadow:0 60px 120px #000000e6}.lightbox .meta{text-align:center;flex-direction:column;gap:8px;margin-top:32px;display:flex}.lightbox .meta .title{font-family:var(--font-hand);font-size:34px}.lightbox .meta .date{color:var(--muted);letter-spacing:.25em;font-size:11px}.lightbox .actions{flex-wrap:wrap;justify-content:center;gap:16px;margin-top:36px;display:flex}.lightbox .close{color:var(--muted);letter-spacing:.3em;text-transform:uppercase;background:0 0;border:none;font-size:11px;transition:color .25s;position:fixed;top:22px;right:28px}.lightbox .close:hover{color:var(--paper)}.danger{border-color:var(--faint);color:var(--muted);background:0 0}.danger:hover{border-color:var(--red);color:var(--red);background:0 0}.offline{z-index:80;background:var(--red);color:var(--paper);text-align:center;letter-spacing:.3em;text-transform:uppercase;padding:11px;font-size:10px;position:fixed;bottom:0;left:0;right:0}.status{color:var(--muted);letter-spacing:.18em;font-size:12px}@media (max-width:860px){.preview{grid-template-columns:1fr}.preview-side{position:static}}@media (max-width:560px){.memories-grid{grid-template-columns:repeat(2,1fr);gap:40px 16px}}@media (max-width:380px){.memories-grid{grid-template-columns:1fr}}@media (prefers-reduced-motion:reduce){*,.grain,.balloon{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
