@font-face{font-family:Mono;src:url('assets/mono.ttf')} 
:root{--bg:#242e3c;--pink:#df5c7a;--light:#f2bdc9;--line:#df5c7a50}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--pink);font-family:Mono,monospace;min-height:100svh;display:flex;flex-direction:column}
a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid var(--light);outline-offset:6px}
header{height:84px;margin:0 5vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);font-size:10px;letter-spacing:.15em;position:relative;z-index:3}header>a{font-size:24px;font-weight:bold}header>a span{font-size:16px;margin-left:10px}header button{color:var(--pink);background:none;border:0;font-size:10px;padding:12px}
main{flex:1;min-height:710px;position:relative;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;padding-bottom:40px}
.scene{position:absolute;top:0;left:50%;width:900px;height:470px;transform:translateX(-50%);overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}
.scene img{position:absolute;top:-185px;left:0;width:100%;user-select:none;transform:translate(var(--mx,0px),var(--my,0px));transition:transform .6s ease-out;mask-image:linear-gradient(#000 78%,transparent 92%)}
.content{position:relative;z-index:2;text-align:center;width:min(880px,90vw)}
.eyebrow{font-size:10px;letter-spacing:.36em;margin:0 0 6px;color:var(--light)}
h1{font-size:clamp(80px,11.5vw,162px);line-height:1;margin:0;font-weight:900;letter-spacing:-.075em;text-shadow:4px 4px #151e2a}
.subtitle{font-size:13px;letter-spacing:.04em;color:var(--light);margin:18px 0 28px}
.controls{max-width:720px;margin:auto}
#copy{display:flex;align-items:center;width:100%;gap:18px;background:#202936;border:1px solid var(--line);padding:19px 22px;color:var(--light);text-align:left}.label,.copy-label{font-size:10px;color:var(--pink)}#ca{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.copy-label{white-space:nowrap}
nav{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}nav a{display:flex;align-items:center;justify-content:center;gap:10px;flex:1;min-height:52px;padding:14px 18px;background:#313848;border:1px solid var(--pink);box-shadow:0 4px #171e2a;font-size:11px;transition:transform .15s,background .15s;color:var(--light)}nav .primary{background:var(--pink);color:#202936}nav img{width:17px;height:17px;object-fit:contain}.x{filter:invert(1)}nav a:hover{transform:translateY(-3px);background:#5a3f54}nav .primary:hover{background:#f17e99}nav a[aria-disabled=true]{opacity:.65;cursor:default}
footer{display:flex;justify-content:space-between;gap:15px;margin:0 5vw;padding:22px 0;border-top:1px solid var(--line);font-size:8px;color:#ab8c9e}#toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);background:var(--pink);color:var(--bg);padding:15px 25px;opacity:0;pointer-events:none;z-index:9;font-size:12px}#toast.show{opacity:1}[hidden]{display:none!important}
@media(min-height:950px) and (min-width:801px){main{max-height:950px;margin:auto;width:100%}.scene{top:30px}}
@media(max-width:800px){header{height:65px}header>span{display:none}main{min-height:680px;padding-bottom:35px}.scene{width:700px;height:380px}.scene img{top:-125px}.content{width:88vw}h1{font-size:clamp(65px,16vw,120px)}.eyebrow{font-size:9px}.subtitle{font-size:11px}nav{display:grid;grid-template-columns:1fr 1fr}nav a{padding:12px;font-size:10px}footer{flex-direction:column;font-size:8px}#copy{padding:17px 14px;gap:10px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}