/* COURIER — tactile letters inside The Lab arcade chrome. */

@font-face { font-family: "Press Start 2P"; font-style: normal; font-weight: 400; font-display: swap; src: url("/press-start-2p.woff2") format("woff2"); }
@font-face { font-family: "Press Start 2P Fallback"; src: local("Courier New"); size-adjust: 166.64%; ascent-override: 60%; descent-override: 0%; line-gap-override: 0%; }

:root {
  --bg:#0a0a12; --surface:#12121d; --surface-2:#1a1a2a; --line:#28283c;
  --text:#e9e9f2; --dim:#9aa0b5; --cyan:#45f0ff; --magenta:#ff3d8b;
  --gold:#ffc857; --green:#41ff8b; --red:#ff5560;
  --pixel:"Press Start 2P","Press Start 2P Fallback","Courier New",monospace;
  --body:-apple-system,"Segoe UI",system-ui,sans-serif; --mono:ui-monospace,"SF Mono",Menlo,monospace;
  --space-gutter:clamp(16px,4vw,48px); --ease-out:cubic-bezier(0.16,1,0.3,1);
  --glow-cyan:0 0 14px rgba(69,240,255,.35);
}
*,*::before,*::after{box-sizing:border-box}
html{color-scheme:dark}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:radial-gradient(900px 440px at 50% -10%,rgba(69,240,255,.06),transparent 70%),radial-gradient(760px 360px at 100% 12%,rgba(255,61,139,.045),transparent 72%),var(--bg);color:var(--text);font-family:var(--body);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
::selection{background:rgba(69,240,255,.3)} [hidden]{display:none!important} a{color:var(--cyan)}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;left:12px;top:-48px;z-index:200;background:var(--cyan);color:#05050d;padding:10px 16px;border-radius:6px;font-family:var(--mono);font-weight:700;text-decoration:none;transition:transform .2s var(--ease-out)}
.skip-link:focus-visible{transform:translateY(60px)}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;box-shadow:0 0 0 5px rgba(69,240,255,.15)}
.site-header{padding:26px var(--space-gutter) 10px;display:flex;flex-direction:column;gap:20px}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.lab-link{align-self:flex-start;font-family:var(--pixel);font-size:10px;color:var(--dim);text-decoration:none;padding:6px 2px;transition:color .15s,text-shadow .15s}
.lab-link:hover{color:var(--cyan);text-shadow:var(--glow-cyan)}
.level{margin:0;font-family:var(--pixel);font-size:9px;letter-spacing:3px;color:var(--gold)}
.wordmark{margin:6px 0 4px;font-family:var(--pixel);font-size:clamp(22px,4.5vw,34px);letter-spacing:3px;color:var(--text);text-shadow:0 0 16px rgba(69,240,255,.55),3px 3px 0 var(--magenta)}
.tagline{margin:0;font-family:var(--mono);font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--dim)}
.cursor{color:var(--cyan);animation:blink 1.1s steps(1) infinite}@keyframes blink{50%{opacity:0}}
.lang-toggle{display:inline-flex;border:1px solid var(--line);border-radius:999px;background:var(--surface)}
.lang-btn{min-width:44px;min-height:40px;border:0;background:transparent;color:var(--dim);font-family:var(--mono);font-weight:800;cursor:pointer;border-radius:999px}
.lang-btn[aria-pressed=true]{background:var(--cyan);color:#05050d}
main{flex:1;width:100%;max-width:1180px;margin:0 auto;padding:20px var(--space-gutter) 72px}
.wizard-rail{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:18px}
.rail-stamp{min-height:54px;display:flex;align-items:center;gap:10px;justify-content:center;border:1px dashed #66667f;border-radius:8px;background:linear-gradient(180deg,var(--surface),rgba(18,18,29,.74));color:var(--dim);font-family:var(--pixel);font-size:9px;cursor:pointer;position:relative;overflow:hidden}
.rail-stamp::after{content:"";position:absolute;inset:auto 9px 7px;height:3px;background:var(--line)}
.rail-stamp span{color:var(--gold)}.rail-stamp.is-active,.rail-stamp.is-done{border-color:var(--gold);color:var(--text);box-shadow:inset 0 0 0 1px rgba(255,200,87,.24)}
.rail-stamp.is-active::after,.rail-stamp.is-done::after{background:linear-gradient(90deg,var(--gold),var(--cyan))}
.courier-layout{display:grid;grid-template-columns:1fr;gap:18px;align-items:start}
.panel{background:linear-gradient(180deg,var(--surface),rgba(18,18,29,.82));border:1px solid var(--line);border-radius:10px;padding:16px}
.wizard-step{display:flex;flex-direction:column;gap:14px}
.panel-title{margin:0;font-family:var(--pixel);font-size:10px;letter-spacing:1px;color:var(--cyan);text-shadow:0 0 8px rgba(69,240,255,.4)}
.field-grid{display:grid;grid-template-columns:1fr;gap:12px}
label,.stacked{display:flex;flex-direction:column;gap:6px;color:var(--dim);font-family:var(--mono);font-size:11px;letter-spacing:1px}
input,textarea{width:100%;min-width:0;background:var(--bg);border:1px solid #5e5e80;color:var(--text);border-radius:6px;padding:10px 12px;font-family:var(--mono);font-size:16px}
textarea{resize:vertical;min-height:220px;line-height:1.6} input:hover,textarea:hover{border-color:#74749a} input[readonly]{color:var(--gold)}
.count-row{display:flex;justify-content:flex-end;color:var(--dim);font-family:var(--mono);font-size:12px}
.choice-field{border:0;margin:0;padding:0}.choice-field legend{margin:0 0 10px;font-family:var(--mono);font-size:11px;letter-spacing:1px;color:var(--dim)}
.choice-grid{display:grid;grid-template-columns:1fr;gap:10px}.choice-grid-small{grid-template-columns:1fr}
.choice-card{position:relative;display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:center;min-height:74px;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);cursor:pointer}
.choice-card input{position:absolute;opacity:0;pointer-events:none}.choice-card:has(input:checked),.choice-card:focus-within{border-color:var(--cyan);box-shadow:0 0 0 2px rgba(69,240,255,.13),inset 0 0 0 1px rgba(69,240,255,.24)}
.choice-card b{display:block;color:var(--text);font-family:var(--mono);font-size:13px;letter-spacing:0}.choice-card small{display:block;color:var(--dim);font-size:12px;letter-spacing:0}
.paper-mini{height:54px;border-radius:4px;border:1px solid rgba(0,0,0,.18)}.paper-mini.paper-cream{background:#f7ecd2}.paper-mini.paper-graph{background:linear-gradient(#d8f7ff 1px,transparent 1px),linear-gradient(90deg,#d8f7ff 1px,transparent 1px),#f8fbf5;background-size:12px 12px}.paper-mini.paper-aerogram{background:linear-gradient(90deg,#d54046 0 7px,#fff 7px 14px,#2478d6 14px 21px,#fff 21px 28px),#f4f1dc;background-size:28px 100%}.paper-mini.paper-parchment{background:radial-gradient(circle at 20% 20%,rgba(112,72,28,.16),transparent 35%),#d6b889}.paper-mini.paper-dark{background:#15241d}.paper-mini.paper-neon{background:#101725}
.font-mini{height:50px;border:1px solid var(--line);border-radius:6px;display:grid;place-items:center;color:var(--gold);font-size:18px}.font-typewriter .font-mini,.font-mini.typewriter{font-family:ui-monospace,"SF Mono",Menlo,monospace}.font-mini.hand{font-family:"Segoe Script","Snell Roundhand",cursive}.font-mini.serif{font-family:"Iowan Old Style",Georgia,serif}
.stamp-tray{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.stamp-pick,.upload-stamp{min-height:74px;background:var(--bg);border:1px solid var(--line);border-radius:8px;color:var(--text);display:flex;align-items:center;justify-content:center;gap:8px;font-family:var(--mono);font-size:12px;cursor:pointer;padding:8px;text-align:center}
.stamp-pick:hover,.upload-stamp:hover{border-color:var(--cyan);box-shadow:0 0 12px rgba(69,240,255,.16)}.upload-stamp input{position:absolute;opacity:0;pointer-events:none}
.note,.privacy-note{margin:0;color:var(--dim);font-size:12.5px}.privacy-note{text-align:center}.arrival-line{margin:0;color:var(--gold);font-family:var(--mono);font-size:13px}
.wax-row,.chip-row,.action-row,.step-actions{display:flex;flex-wrap:wrap;gap:10px}.step-actions{justify-content:flex-end}
.wax-choice,.chip{min-height:42px;border:1px solid var(--line);border-radius:999px;background:var(--bg);color:var(--dim);padding:8px 12px;font-family:var(--mono);font-size:12px;cursor:pointer}
.wax-choice[aria-pressed=true],.chip.is-active{border-color:var(--cyan);color:var(--cyan);box-shadow:inset 0 0 0 1px rgba(69,240,255,.28)}
.wax-dot{display:inline-block;width:18px;height:18px;border-radius:50%;margin-right:6px;vertical-align:middle;box-shadow:inset -3px -4px 0 rgba(0,0,0,.22)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--surface-2);border:1px solid var(--line);color:var(--text);font-family:var(--mono);font-size:12.5px;font-weight:700;letter-spacing:.5px;padding:10px 14px;min-height:44px;border-radius:6px;cursor:pointer;text-decoration:none;transition:transform .12s var(--ease-out),border-color .12s,box-shadow .12s}
.btn:hover{border-color:var(--cyan);box-shadow:0 0 12px rgba(69,240,255,.22);transform:translateY(-1px)}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.btn-primary{background:var(--cyan);border-color:var(--cyan);color:#05050d}.btn-primary:hover{box-shadow:0 0 18px rgba(69,240,255,.5)}.btn-ghost{background:transparent;color:var(--red)}
.preview-column{position:relative;display:flex;flex-direction:column;gap:12px}.letter-sheet{position:relative;width:100%;min-height:520px;border-radius:8px;padding:72px clamp(18px,5vw,42px) 42px;box-shadow:0 18px 50px rgba(0,0,0,.38),0 0 0 1px rgba(255,255,255,.2);overflow:hidden;color:var(--paper-ink);background:var(--paper-bg);font-family:var(--letter-font);font-size:18px;line-height:1.68}
.letter-sheet::before{content:"";position:absolute;inset:0;pointer-events:none;background:var(--paper-grain);mix-blend-mode:multiply;opacity:var(--paper-grain-opacity,.35)}
.paper-cream{--paper-bg:#f7ecd2;--paper-ink:#2b2118;--paper-grain:radial-gradient(circle at 15% 20%,rgba(91,57,25,.08),transparent 25%),radial-gradient(circle at 80% 35%,rgba(255,255,255,.5),transparent 30%),repeating-linear-gradient(7deg,rgba(0,0,0,.018) 0 1px,transparent 1px 5px)}
.paper-graph{--paper-bg:linear-gradient(#c8edf3 1px,transparent 1px),linear-gradient(90deg,#c8edf3 1px,transparent 1px),#f8fbf5;--paper-ink:#243033;--paper-grain:linear-gradient(180deg,rgba(255,255,255,.35),transparent);background-size:28px 28px}
.paper-aerogram{--paper-bg:linear-gradient(90deg,#cf3341 0 8px,#fff 8px 16px,#2478d6 16px 24px,#fff 24px 32px) left/32px 100% repeat-y,linear-gradient(90deg,#2478d6 0 8px,#fff 8px 16px,#cf3341 16px 24px,#fff 24px 32px) right/32px 100% repeat-y,#f4f1dc;--paper-ink:#26314a;--paper-grain:repeating-linear-gradient(0deg,rgba(0,0,0,.025) 0 1px,transparent 1px 7px)}
.paper-parchment{--paper-bg:radial-gradient(circle at 18% 18%,rgba(114,75,30,.2),transparent 26%),radial-gradient(circle at 80% 84%,rgba(88,48,18,.18),transparent 28%),linear-gradient(180deg,#e0c797,#cda975);--paper-ink:#2e1d10;--paper-grain:radial-gradient(ellipse at center,transparent 40%,rgba(80,41,12,.18) 100%)}
.paper-dark{--paper-bg:#14231d;--paper-ink:#f2d88b;--paper-grain:linear-gradient(135deg,rgba(255,200,87,.05),transparent 35%),repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,transparent 1px 6px)}
.paper-neon{--paper-bg:#101725;--paper-ink:#bffbff;--paper-grain:radial-gradient(circle at 70% 20%,rgba(69,240,255,.12),transparent 28%),linear-gradient(180deg,rgba(255,61,139,.07),transparent)}
.font-typewriter{--letter-font:ui-monospace,"SF Mono",Menlo,monospace}.font-hand{--letter-font:"Segoe Script","Snell Roundhand",cursive}.font-serif{--letter-font:"Iowan Old Style",Georgia,serif}
.letter-date,.letter-subject,.letter-body,.letter-signature{position:relative;z-index:1;margin:0 0 16px;overflow-wrap:anywhere}.letter-subject{font-weight:800}.letter-body{white-space:pre-wrap}.letter-signature{margin-top:28px;text-align:right}
.stamp-corner{position:absolute;z-index:3;right:12px;top:12px;width:min(42%,220px);height:170px;border:1px dashed rgba(0,0,0,.22);border-radius:8px}
.placed-stamp,.static-stamp{position:absolute;width:74px;height:86px;border:0;background:#fff;color:#111;padding:7px;box-shadow:0 2px 8px rgba(0,0,0,.24);cursor:grab;touch-action:none}
.placed-stamp::before,.static-stamp::before,.image-stamp::before{content:"";position:absolute;inset:2px;border:2px dotted rgba(0,0,0,.18);pointer-events:none}.placed-stamp::after,.static-stamp::after,.image-stamp::after{content:"";position:absolute;right:2px;bottom:2px;width:38px;height:38px;border:2px solid rgba(20,20,20,.28);border-radius:50%;transform:rotate(-16deg);pointer-events:none}
.placed-stamp:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}.stamp-art{position:relative;display:grid;place-items:center;width:100%;height:100%;overflow:hidden}.stamp-art svg{width:100%;height:100%;image-rendering:pixelated}.stamp-art img{width:100%;height:100%;object-fit:cover}
.remove-stamp{position:absolute;right:-10px;top:-10px;z-index:2;width:28px;height:28px;border-radius:50%;border:1px solid var(--red);background:var(--surface);color:var(--red);cursor:pointer}
.privacy-badge{border:1px solid rgba(65,255,139,.34);background:rgba(65,255,139,.07);border-radius:8px;padding:10px;color:var(--green);font-size:13px}
.envelope-frame{display:grid;gap:12px}.envelope{position:relative;width:min(100%,560px);aspect-ratio:1.62/1;margin:0 auto;background:linear-gradient(160deg,#ead5a7,#f6e8c4);border:1px solid rgba(0,0,0,.2);border-radius:8px;box-shadow:0 22px 54px rgba(0,0,0,.38);overflow:hidden;color:#2e2114}
.envelope::before,.envelope::after{content:"";position:absolute;inset:0}.envelope::before{clip-path:polygon(0 0,50% 54%,100% 0,100% 100%,0 100%);background:linear-gradient(180deg,rgba(255,255,255,.18),transparent)}.envelope::after{clip-path:polygon(0 100%,50% 45%,100% 100%);background:rgba(136,93,48,.13)}
.envelope-flap{position:absolute;z-index:1;left:0;top:0;width:100%;height:56%;transform-origin:top;clip-path:polygon(0 0,100% 0,50% 100%);background:linear-gradient(180deg,#f7e8c6,#dfc48f);transition:transform 1s var(--ease-out)}
.envelope.is-open .envelope-flap{transform:rotateX(160deg)}.envelope-stamps{position:absolute;z-index:3;right:18px;top:18px;width:130px;height:96px}.envelope-stamps .static-stamp{transform:scale(.72);transform-origin:top right}
.recipient-line{position:absolute;z-index:2;left:9%;right:27%;top:54%;font-family:var(--mono);font-weight:800;border-bottom:2px solid rgba(46,33,20,.45);padding-bottom:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.postmark-preview{position:absolute;z-index:4;right:108px;top:38px;width:90px;height:90px;border:3px double rgba(46,33,20,.38);border-radius:50%;display:grid;place-items:center;text-align:center;font-family:var(--mono);font-size:10px;font-weight:800;color:rgba(46,33,20,.58);transform:rotate(-12deg);text-transform:uppercase;white-space:pre-line}
.wax-seal{position:absolute;z-index:5;left:50%;top:48%;width:74px;height:74px;transform:translate(-50%,-30%);border-radius:44% 56% 47% 53%;background:var(--wax,#8d1835);box-shadow:inset -8px -10px 0 rgba(0,0,0,.2),inset 5px 5px 0 rgba(255,255,255,.16),0 4px 12px rgba(0,0,0,.28);display:grid;place-items:center;color:rgba(255,255,255,.78);font-family:var(--pixel);font-size:13px}
.wax-seal span{width:52px;height:52px;border:2px solid rgba(255,255,255,.35);border-radius:50%;display:grid;place-items:center}.sealed-panel{text-align:center;display:grid;justify-items:center;gap:18px}.envelope-large{width:min(760px,100%)}.countdown{margin:0;color:var(--gold);font-family:var(--pixel);font-size:clamp(12px,3vw,20px);line-height:1.6}.sealed-panel .wax-seal{animation:seal-shimmer 2.8s ease-in-out infinite}@keyframes seal-shimmer{50%{filter:brightness(1.25);transform:translate(-50%,-30%) scale(1.04)}}
.delivered-gate{display:grid;justify-items:center;gap:16px;text-align:center;max-width:860px;margin:0 auto}.sound-toggle{display:inline-flex;align-items:center;flex-direction:row;gap:8px;min-height:44px;color:var(--dim);font-size:13px}.sound-toggle input{width:auto;accent-color:var(--cyan)}
.delivery-stage{position:relative;display:grid;justify-items:center;gap:16px;text-align:center}.delivery-title{margin:0;font-family:var(--pixel);font-size:clamp(14px,3vw,24px);color:var(--gold)}
.delivery-track{--p:0%;position:relative;width:min(720px,100%);height:28px;border:1px solid var(--line);border-radius:999px;background:var(--surface);overflow:visible}.delivery-fill{position:absolute;inset:4px auto 4px 4px;width:var(--p);border-radius:999px;background:linear-gradient(90deg,var(--cyan),var(--gold));box-shadow:0 0 16px rgba(69,240,255,.25)}
.courier-plane{position:absolute;left:calc(var(--p) - 18px);top:-8px;width:42px;height:42px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.35))}.courier-plane::before{content:"";position:absolute;inset:11px 3px 11px 3px;background:var(--gold);clip-path:polygon(0 50%,100% 0,76% 50%,100% 100%)}.courier-plane::after{content:"";position:absolute;left:8px;top:16px;width:16px;height:10px;border:2px solid var(--magenta);background:#fff}
.delivery-percent{margin:0;color:var(--cyan);font-family:var(--mono);font-weight:800}.skip-delivery{position:absolute;right:0;top:0}.delivery-stage.is-thunk .postmark-preview{animation:postmark-thunk .34s ease-out both}@keyframes postmark-thunk{0%{transform:rotate(-12deg) scale(1.8);opacity:0}100%{transform:rotate(-12deg) scale(1);opacity:1}}
.opened-letter{max-width:760px;transform:translateY(-24px);opacity:0;transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}.opened-letter.is-visible{opacity:1;transform:translateY(0)}
.created-panel{max-width:760px;margin:22px auto 0;display:grid;gap:12px}.result-heading{margin:0;font-family:var(--pixel);font-size:clamp(13px,2.5vw,18px);color:var(--green);text-shadow:0 0 12px rgba(65,255,139,.5)}
.toasts{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:120;display:flex;flex-direction:column;gap:8px;width:min(440px,calc(100vw - 32px));pointer-events:none}
.toast{background:var(--surface-2);border:1px solid var(--line);border-left:3px solid var(--red);color:var(--text);padding:12px 14px;border-radius:8px;font-size:13.5px;box-shadow:0 8px 30px rgba(0,0,0,.5);animation:toast-in .22s var(--ease-out) both}.toast-info{border-left-color:var(--cyan)}.toast-success{border-left-color:var(--green)}.toast.out{opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s}@keyframes toast-in{from{opacity:0;transform:translateY(10px)}}
.site-footer{border-top:1px solid var(--line);padding:22px var(--space-gutter);text-align:center;color:var(--dim);font-size:13px}.site-footer a{color:var(--cyan);text-decoration:none}.site-footer a:hover{text-decoration:underline;text-shadow:var(--glow-cyan)}.footer-privacy{margin:6px 0 0}
@media (min-width:640px){.wizard-rail{grid-template-columns:repeat(3,1fr)}.field-grid{grid-template-columns:repeat(2,1fr)}.choice-grid{grid-template-columns:repeat(2,1fr)}.choice-grid-small{grid-template-columns:repeat(3,1fr)}.stamp-tray{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1024px){.courier-layout{grid-template-columns:minmax(0,1fr) 440px}.preview-column{position:sticky;top:16px}.stamp-tray{grid-template-columns:repeat(4,1fr)}}
@media (max-width:480px){.wordmark{letter-spacing:1px}.rail-stamp{font-size:8px}.choice-card{grid-template-columns:52px 1fr}.letter-sheet{min-height:500px;font-size:16px}.stamp-corner{width:170px;height:140px}.placed-stamp,.static-stamp{width:62px;height:74px}.skip-delivery{position:static}.recipient-line{right:18%;font-size:12px}.postmark-preview{right:78px;width:74px;height:74px;font-size:8px}.wax-seal{width:62px;height:62px}.wax-seal span{width:44px;height:44px}}
@media (pointer:coarse){.btn,.chip,.wax-choice,.lang-btn{min-height:46px}.stamp-pick,.upload-stamp{min-height:82px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.cursor,.sealed-panel .wax-seal{animation:none!important}}