:root{color-scheme:dark;--ink:#080908;--paper:#f2f2e9;--lime:#c2ff50;--line:#34362f;--muted:#9b9e93}*{box-sizing:border-box}body{margin:0;background:var(--ink);color:var(--paper);font-family:Arial,Helvetica,sans-serif;min-height:100svh;display:flex;flex-direction:column}a{color:inherit}button,input,select,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{color:inherit;cursor:pointer}button:disabled{cursor:wait;opacity:.55}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--lime);outline-offset:5px}[hidden]{display:none!important}header,footer{display:flex;justify-content:space-between;align-items:center;margin:0 42px}header{min-height:100px}header img{display:block;width:128px;height:auto}.back,footer,.eyebrow,.hatch-top,.hatch-bottom,.tap-hint,label,.count,#toggle-label,.send{font:10px/1.5 'Courier New',monospace;letter-spacing:1.5px}.back,footer a{text-decoration:none;padding:12px 0}.back:hover,footer a:hover,.email:hover{color:var(--lime)}main{flex:1;width:min(1160px,100%);margin:auto;padding:65px 32px 85px;display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start}.intro{padding-top:65px}.eyebrow{color:var(--muted);display:flex;align-items:center;gap:8px}.eyebrow i{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--lime)}h1{font-family:Impact,'Arial Narrow',Arial,sans-serif;font-size:clamp(40px,4.6vw,68px);line-height:1.04;letter-spacing:-1.8px;margin:26px 0}h1 span{color:var(--lime)}.sub{font-size:17px;color:#b6b8af;margin:22px 0 35px}.email{font:12px/1.6 'Courier New',monospace;text-underline-offset:6px}.hatch{border:1px solid var(--line);background:linear-gradient(155deg,#141610,#080908 65%);position:relative;box-shadow:0 24px 70px #0006}.hatch:before,.hatch:after{content:'';position:absolute;width:4px;height:4px;border:1px solid #777;top:12px;border-radius:50%}.hatch:before{left:12px}.hatch:after{right:12px}.hatch-top,.hatch-bottom{display:flex;justify-content:space-between;gap:10px;padding:22px 24px;color:var(--muted);font-size:9px;letter-spacing:1px}.hatch-top{border-bottom:1px solid var(--line)}#signal{color:var(--lime)}.face-zone{text-align:center;padding:36px 24px 28px}.face-button{border:0;background:transparent;display:flex;flex-direction:column;align-items:center;margin:auto;padding:0;max-width:100%;min-width:210px}.face{width:220px;height:220px;display:block;transition:width .55s ease,height .55s ease,transform .55s ease;filter:drop-shadow(0 12px 20px #0004)}.smile{transform-box:fill-box;transform-origin:center;transition:transform .5s ease}#toggle-label{display:block;padding:14px 0;border-bottom:1px solid #777;margin-top:15px;font-size:11px}.tap-hint{color:var(--muted);font-size:8px;margin:20px 0 0}.is-open .face{width:86px;height:86px;transform:rotate(-5deg)}.is-open .smile{transform:scaleY(1.65)}.is-open .face-zone{padding:20px 24px 16px}.is-open #toggle-label{margin-top:0;font-size:9px}.is-open .tap-hint{display:none}#form-panel{padding:0 28px 28px;animation:unfold .45s ease both;transform-origin:top}fieldset{margin:0;padding:0;border:0;min-width:0}label{display:block;margin:18px 0 8px;font-size:9px}input,select,textarea{display:block;width:100%;background:#0b0d0a;color:var(--paper);border:1px solid #4b4e43;border-radius:0;padding:13px 12px;font-size:16px;min-height:48px}textarea{resize:vertical;min-height:120px;line-height:1.5}input::placeholder,textarea::placeholder{color:#8c9084}.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.row>div{min-width:0}.count{display:flex;justify-content:space-between;margin-top:9px;color:var(--muted);font-size:8px}.privacy{font-size:11px;line-height:1.6;color:var(--muted);margin:20px 0}.send{border:1px solid var(--paper);background:var(--paper);color:var(--ink);padding:15px 17px;width:100%;min-height:48px;display:flex;justify-content:space-between;align-items:center;font-weight:bold}.send:hover{background:var(--lime);border-color:var(--lime)}#status{margin:0;padding:0 28px;font-size:13px;line-height:1.5}#status:empty{display:none}#status.error{color:#ffc3b8;padding-bottom:24px}#success{padding:0 28px 28px}#success h2{font:38px/1.05 Impact,'Arial Narrow',Arial,sans-serif;margin:18px 0}#success>p:not(.eyebrow){color:#b6b8af;font-size:13px;line-height:1.6}.hatch-bottom{border-top:1px solid var(--line);font-size:8px}.is-sent .face-zone{padding-bottom:12px}.is-sent #toggle-label,.is-sent .tap-hint{display:none}.is-sent .face{width:120px;height:120px}.is-sent .face-button{cursor:default;opacity:1}footer{border-top:1px solid #242720;padding:22px 0;color:var(--muted);font-size:9px}.trap,.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}@keyframes unfold{from{opacity:0;transform:translateY(-12px) scaleY(.96)}to{opacity:1;transform:none}}@media(hover:hover){.face-button:hover .face{transform:rotate(-5deg) scale(1.04)}.is-open .face-button:hover .face{transform:rotate(0)}}@media(max-width:760px){header,footer{margin:0 24px}header{min-height:84px}header img{width:112px}.back{font-size:9px}main{grid-template-columns:1fr;gap:30px;padding:24px 24px 48px;max-width:550px}.intro{padding:0}h1{font-size:44px;margin:20px 0 16px}.sub{margin:16px 0 18px;font-size:15px}.face{width:170px;height:170px}.face-zone{padding-top:24px}.hatch-top,.hatch-bottom{padding:20px;font-size:8px}#form-panel{padding:0 20px 24px}.row{grid-template-columns:1fr;gap:0}footer{font-size:8px;gap:12px}}@media(max-width:350px){header,footer{margin:0 18px}main{padding-left:18px;padding-right:18px}h1{font-size:38px}.hatch-top{font-size:7px;padding:20px 16px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Keep the face above the form, matching DOM and keyboard order. */
.hatch{display:flex;flex-direction:column}
.hatch-top{order:0}.face-zone{order:1}#form-panel{order:2}#status{order:3}#success{order:4}.hatch-bottom{order:5}
.is-open #form-panel{order:2;padding-top:0}.is-open #status{order:3}.is-open .face-zone{order:1;padding:16px 24px 20px}
.face,.is-open .face,.is-sent .face{width:220px;height:220px;transition:width .95s ease,height .95s ease;transform:none}
.is-open .face{width:250px;height:86px}.is-sent .face{width:180px;height:180px}
.smile,.is-open .smile{transform:none;transition:none}
.face-button:hover .face,.is-open .face-button:hover .face{transform:none}
.face-button{touch-action:pan-y pinch-zoom}
@media(max-width:760px){.face{width:170px;height:170px}.is-open .face{width:220px;height:76px}}