@font-face{font-family:Michroma;src:url('/assets/fonts/michroma-latin.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('/assets/fonts/space-grotesk-latin.woff2') format('woff2');font-weight:300 700;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/assets/fonts/ibm-plex-mono-latin.woff2') format('woff2');font-weight:400;font-display:swap}
:root{color-scheme:light;--ink:#142631;--muted:#526672;--blue:#4bdcff;--line:#284d652c;--display:Michroma,Arial,sans-serif;--mono:'IBM Plex Mono',monospace;font-family:'Space Grotesk',Arial,sans-serif;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;background:#14232d;color:var(--ink)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}button:disabled{cursor:wait;opacity:.65}a{color:inherit}button:focus-visible,a:focus-visible,.fitting-room:focus-visible{outline:3px solid #007baf;outline-offset:5px}img{max-width:100%}svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.world{position:relative;isolation:isolate;min-height:100svh;overflow:hidden;border:12px solid #14232d;background:#cbd9df;box-shadow:inset 0 0 0 1px #fff9}
.environment,.environment img,.world-wash,.world-grid{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.environment{z-index:-4}.environment img{object-fit:cover;object-position:center 40%;filter:saturate(.24) contrast(1.12) brightness(.91)}
.world-wash{z-index:-3;background:radial-gradient(ellipse at 50% 41%,#effdff9c 0%,#daeaf235 39%,#16344e24 75%),linear-gradient(180deg,#eaf3f8eb 0%,#c9e1ef66 33%,#b6d8ed21 64%,#bed3dfdd 84%,#e4ecf1 100%)}
.world-grid{z-index:-2;background-image:linear-gradient(#274c6a0b 1px,transparent 1px),linear-gradient(90deg,#274c6a0b 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(90deg,#000,transparent 30%,transparent 70%,#000)}
.world::after{content:"";position:absolute;inset:7px;border:1px solid #f7ffff88;pointer-events:none;z-index:9}
.topbar{height:76px;margin:0 32px;display:flex;justify-content:space-between;align-items:center;position:relative;z-index:10;border-bottom:1px solid var(--line)}
.brand{text-decoration:none;display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:15px;letter-spacing:.015em}.brand img{object-fit:contain;width:42px;height:42px}.brand-sub{display:block;font-family:var(--mono);font-size:8px;letter-spacing:.14em;margin-top:6px;color:var(--muted)}
.header-tag{font-family:var(--mono);font-size:9px;letter-spacing:.11em;display:flex;align-items:center;gap:10px;margin:0}
.status-light{display:inline-block;height:5px;width:5px;border-radius:50%;background:#167f9e;box-shadow:0 0 0 4px #36cce117,0 0 14px #41d4ff}
.vision-trigger{border:1px solid #284d6540;border-radius:3px;background:#eef7fa66;padding:11px 17px;font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.06em;display:flex;gap:28px;align-items:center;backdrop-filter:blur(12px);transition:background .2s}.vision-trigger:hover{background:#f5fdff}.vision-trigger span{font-size:17px}
main{position:relative}.intro{text-align:center;position:absolute;top:20px;left:0;width:100%;z-index:3;pointer-events:none;padding:0 20px}.eyebrow{font-family:var(--mono);font-size:9px;letter-spacing:.19em;display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 19px}
h1{font-family:var(--display);font-size:clamp(60px,7.4vw,112px);font-weight:400;letter-spacing:-.065em;line-height:1.22;margin:0;text-shadow:0 1px 0 #ffffffbf}h1 span{margin-left:.22em;color:#356783}
.hero-tagline{font-size:14px;letter-spacing:.015em;color:#415b69;margin:15px 0 0}
.fitting-room{height:830px;max-width:1720px;margin:0 auto;position:relative;touch-action:pan-y;outline:none;--rig-master:min(80vw,1080px);--fit-scale:1;--rig-end:.8271;--rig-floor:764px;--rig-size:calc(var(--rig-master) * var(--fit-scale));--drag:0px;cursor:grab;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.fitting-room.dragging{cursor:grabbing}.fitting-room:focus:not(:focus-visible){outline:none}
.cat-rig{position:absolute;width:var(--rig-size);height:var(--rig-size);left:50%;top:calc(var(--rig-floor) - var(--rig-size) * var(--rig-end));transform:translateX(-50%);pointer-events:none;z-index:5}
.fitting-room[data-helmet="02-bubble"]{--fit-scale:.70;--rig-end:.9053}.fitting-room[data-helmet="03-ufo"]{--fit-scale:.88;--rig-end:.8277}.fitting-room[data-helmet="04-foil"]{--fit-scale:.63;--rig-end:.8448}.fitting-room[data-helmet="05-box"]{--fit-scale:.80;--rig-end:.8725}.fitting-room[data-helmet="06-pot"]{--fit-scale:.70;--rig-end:.9019}
.rig-float{position:relative;width:100%;height:100%;animation:levitate 6s ease-in-out infinite}
.helmet-layer,.cat-layer{width:100%;height:100%;position:absolute;inset:0;object-fit:contain;user-select:none}.rear-layer{z-index:1}.cat-layer{z-index:2;mask-image:url('/assets/layers/01-signature-mask.png');mask-mode:luminance;mask-size:100% 100%;mask-repeat:no-repeat;-webkit-mask-image:url('/assets/layers/01-signature-mask.png');-webkit-mask-size:100% 100%;-webkit-mask-repeat:no-repeat}.front-layer{z-index:3;filter:drop-shadow(0 15px 20px #18384c24)}
.landing-glow{position:absolute;left:39%;top:77%;width:24%;height:3%;z-index:5;background:#a8e6ff;filter:blur(20px);opacity:0;pointer-events:none}.landing-glow.pulse{animation:landing .6s ease-out}
@keyframes levitate{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}@keyframes landing{0%{opacity:.6}100%{opacity:0}}@keyframes turn{to{transform:rotate(360deg)}}
.stage-halo{position:absolute;left:50%;top:27%;width:min(53vw,750px);aspect-ratio:1;transform:translateX(-50%);border:1px solid #d5faff;border-radius:50%;background:radial-gradient(circle,transparent 52%,#91d8ee14 62%,#edfaff70 69%,transparent 70%);box-shadow:0 0 0 12px #ffffff0c,0 0 0 13px #2b688822,0 0 0 24px #fff2,0 0 0 25px #e1f9ff7a,inset 0 0 55px #85deff30,0 0 55px #b4eaff77;pointer-events:none;z-index:0}
.stage-halo::before{content:"";position:absolute;inset:-42px;border-radius:50%;background:repeating-conic-gradient(from 0deg,#1f608440 0 .17deg,transparent .17deg 5deg);mask-image:radial-gradient(transparent 68.2%,#000 68.4%,#000 70%,transparent 70.2%);animation:turn 90s linear infinite}
.stage-halo::after{content:"";position:absolute;inset:16px;border:1px solid #ffffffa3;border-radius:50%;border-right-color:#1e749252;border-left-color:#1e749252}
.orbit{position:absolute;left:50%;top:61%;width:84%;height:45%;border:1px solid #497a9d40;border-radius:50%;transform:translate(-50%,-50%) rotate(-12deg);pointer-events:none;z-index:1}.orbit-back{border-bottom-color:transparent}.orbit-front{width:86%;height:47%;transform:translate(-50%,-50%) rotate(12deg);border-top-color:transparent}
.floor-shadow{position:absolute;width:400px;height:26px;border-radius:50%;background:#163b5354;filter:blur(18px);top:91%;left:50%;transform:translateX(-50%);pointer-events:none}
.stage-base{position:absolute;width:530px;height:45px;left:50%;top:92%;transform:translateX(-50%);border:1px solid #d4faff;border-radius:50%;box-shadow:0 0 0 8px #64c6e51c,0 0 0 9px #5e9bb02e,0 0 30px #9eebff88,inset 0 0 25px #c0f5ff88;pointer-events:none}
.candidate-space{position:absolute;inset:0;pointer-events:none;z-index:6}
.candidate{position:absolute;border:0;padding:0;background:transparent;width:150px;height:178px;pointer-events:auto;transform:translate(calc(-50% + var(--drag)*.17),-50%);transition:left .55s cubic-bezier(.22,1,.36,1),top .55s cubic-bezier(.22,1,.36,1),opacity .25s;opacity:1}
.candidate img{width:100%;height:150px;object-fit:contain;filter:drop-shadow(0 16px 12px #18384c40);animation:levitate 5.5s ease-in-out infinite;animation-delay:var(--delay);transition:scale .2s}.candidate:hover img,.candidate:focus-visible img{scale:1.1}
.candidate-label{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;display:inline-block;padding:5px 8px;background:#eaf8ff94;border-bottom:1px solid #375a7355}
.candidate[data-slot="-1"]{left:11%;top:66%}.candidate[data-slot="1"]{left:89%;top:66%}
.candidate[data-slot="-2"]{left:12%;top:34%;width:112px;height:140px;opacity:.84}.candidate[data-slot="2"]{left:88%;top:34%;width:112px;height:140px;opacity:.84}.candidate[data-slot="-2"] img,.candidate[data-slot="2"] img{height:112px}
.candidate[data-slot="0"],.candidate[data-slot="3"]{left:50%;top:0;opacity:0;pointer-events:none;visibility:hidden}
.stage-note{position:absolute;font-family:var(--mono);font-size:9px;letter-spacing:.11em;line-height:1.9;color:#36596d;bottom:48px;pointer-events:none}.stage-note-left{left:4%}.stage-note-right{right:4%;text-align:right}.stage-note::before{content:"+";display:block;font-size:18px;font-weight:400;margin-bottom:6px;color:#1a637d}
.controls{position:relative;z-index:7;display:grid;grid-template-columns:300px 1fr 242px;column-gap:35px;row-gap:0;align-items:center;max-width:1120px;margin:-46px auto 0;padding:23px 29px 17px;text-align:center;background:linear-gradient(120deg,#f6fbfff2,#dbe9f0ed);border:1px solid #fff;box-shadow:0 18px 45px #173b4c27,inset 0 0 0 5px #b4cbd92c;clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);backdrop-filter:blur(20px)}
.helmet-picker{display:flex;align-items:center;justify-content:space-between;gap:16px;grid-column:1;grid-row:1 / 3;padding-right:24px;border-right:1px solid var(--line)}
.arrow-button{width:42px;height:48px;flex-shrink:0;border:1px solid #375b7540;display:grid;place-items:center;border-radius:2px;background:#ffffff70;transition:background .2s,transform .2s}.arrow-button:hover{background:#fff;transform:translateY(-2px)}
.helmet-caption{min-width:140px}.helmet-counter{font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:var(--muted)}.helmet-caption h2{font-family:var(--display);font-size:15px;font-weight:400;letter-spacing:-.05em;margin:8px 0 0;line-height:1.2}
.helmet-joke{grid-column:2;grid-row:1;font-size:15px;color:#29495c;margin:0 0 10px;min-height:20px}
.selection-dots{grid-column:2;grid-row:2;display:flex;justify-content:center;gap:4px;margin:0}.selection-dot{width:35px;height:27px;background:none;border:0;border-bottom:2px solid #426e8830;display:grid;place-items:center;padding:0 0 4px;transition:background .2s,border-color .2s}.selection-dot::after{content:attr(data-label);font-family:var(--mono);font-size:10px;color:#456378}.selection-dot:hover{background:#fff8}.selection-dot[aria-pressed="true"]{border-color:#177896;background:#fff9}.selection-dot[aria-pressed="true"]::after{color:#075b79}
.save-button{grid-column:3;grid-row:1 / 3;min-height:54px;border:1px solid #75c8df;background:#173b51;color:#f0fbff;border-radius:2px;display:inline-flex;align-items:center;justify-content:center;gap:13px;padding:15px 18px;font-size:15px;box-shadow:inset 0 0 0 3px #54b8d215,0 0 20px #52caea26;transition:background .2s,transform .2s}.save-button:hover{background:#0b2a41;transform:translateY(-2px)}.save-button svg{width:18px;height:18px}.save-arrow{margin-left:auto;color:#83e8ff}
.gesture-hint{grid-column:1 / -1;grid-row:3;display:flex;align-items:center;justify-content:center;gap:13px;font-family:var(--mono);font-size:9px;letter-spacing:.07em;color:#587184;margin:18px 0 0}.feedback{grid-column:1 / -1;grid-row:4;margin:7px 0 0;min-height:16px;font-size:12px;color:#365d6d}.feedback:empty{min-height:0;margin:0}
footer{padding:26px 34px 20px;display:flex;justify-content:space-between;font-family:var(--mono);font-size:9px;letter-spacing:.15em;color:#39566a}.no-script{text-align:center;padding:20px}
dialog{width:min(580px,calc(100% - 32px));border:1px solid #f5ffff;border-radius:4px;padding:48px;background:#eaf3f8f5;backdrop-filter:blur(25px);color:var(--ink);box-shadow:0 40px 100px #102a4955;max-height:calc(100svh - 40px);overflow:auto}dialog::backdrop{background:#0e253a99;backdrop-filter:blur(7px)}.dialog-close{position:absolute;right:20px;top:15px;font-size:30px;width:40px;height:40px;border:0;background:none}.dialog-close:hover{background:#fff9}dialog .eyebrow{justify-content:flex-start;font-size:10px}dialog h2{font-size:36px;line-height:1.15;font-weight:400;letter-spacing:-.05em;margin:24px 0}dialog h2 span{font-weight:700;color:#24647e}dialog p{font-size:15px;line-height:1.7;color:#456071}.source-links{display:flex;gap:24px;flex-wrap:wrap;font-size:14px;line-height:1.6;margin:24px 0}.source-links a{text-underline-offset:5px}.source-note{font-size:11px!important;border-top:1px solid var(--line);padding-top:20px;margin-bottom:0}
@media(min-width:1700px){.fitting-room{height:900px;--rig-master:1200px;--rig-floor:830px}.stage-halo{top:26%}.controls{max-width:1200px;grid-template-columns:330px 1fr 260px}}
@media(min-width:901px) and (max-width:1199px){.fitting-room{height:790px;--rig-master:960px;--rig-floor:720px}.controls{margin-inline:28px;grid-template-columns:270px 1fr 205px;gap:16px;padding-inline:20px}.helmet-picker{gap:10px;padding-right:15px}.helmet-caption{min-width:125px}.helmet-joke{font-size:13px}.save-button{font-size:13px;gap:8px}.stage-halo{width:65vw;top:27%}.candidate[data-slot="-2"]{left:12%}.candidate[data-slot="2"]{left:88%}}
@media(max-width:900px) and (min-width:651px){.fitting-room{height:720px;--rig-master:810px;--rig-floor:650px}.header-tag{display:none}.intro{top:28px}h1{font-size:7.4vw}.hero-tagline{font-size:14px}.stage-halo{width:72vw;top:30%}.candidate{width:103px;height:131px}.candidate img{height:103px}.candidate[data-slot="-2"],.candidate[data-slot="2"]{width:90px;height:118px;top:29%}.candidate[data-slot="-2"] img,.candidate[data-slot="2"] img{height:90px}.candidate[data-slot="-2"]{left:10%}.candidate[data-slot="2"]{left:90%}.candidate[data-slot="-1"]{left:8%}.candidate[data-slot="1"]{left:92%}.stage-note{display:none}.controls{margin-inline:20px;grid-template-columns:270px 1fr;gap:12px 24px;padding:20px}.helmet-picker{grid-row:1 / 3}.helmet-joke{grid-row:1;margin:0;font-size:13px}.selection-dots{grid-row:2}.save-button{grid-column:1 / -1;grid-row:3;margin:4px auto 0;min-width:245px}.gesture-hint{grid-row:4;margin-top:0}.feedback{grid-row:5}}
@media(max-width:650px){
.world{border-width:6px}.world::after{inset:4px}.topbar{height:67px;margin:0 17px}.brand{font-size:10px;gap:6px}.brand img{width:33px;height:33px}.brand-sub{font-size:6px;letter-spacing:.08em;margin-top:4px}.header-tag{display:none}.vision-trigger{font-size:8px;gap:10px;padding:9px 10px}.vision-trigger span{font-size:14px}
.intro{top:26px;padding:0 12px}.eyebrow{font-size:7px;letter-spacing:.13em;margin-bottom:17px;gap:8px}.status-light{width:4px;height:4px}h1{font-size:7.7vw;letter-spacing:-.065em;white-space:nowrap}h1 span{margin-left:.16em}.hero-tagline{font-size:12px;margin-top:12px;letter-spacing:0}
.fitting-room{height:650px;--rig-master:min(144vw,560px);--rig-floor:572px}.fitting-room[data-helmet="02-bubble"]{--fit-scale:.70}.fitting-room[data-helmet="03-ufo"]{--fit-scale:.764}.fitting-room[data-helmet="04-foil"]{--fit-scale:.66}.fitting-room[data-helmet="05-box"]{--fit-scale:.83}.fitting-room[data-helmet="06-pot"]{--fit-scale:.72}.stage-halo{width:90%;top:43%;box-shadow:0 0 0 9px #fff1,0 0 0 10px #2b688822,0 0 0 17px #fff2,0 0 0 18px #e1f9ff7a,inset 0 0 35px #85deff30,0 0 35px #b4eaff77}.stage-halo::before{inset:-25px}.stage-halo::after{inset:12px}.orbit{width:106%;height:38%;top:68%;transform:translate(-50%,-50%) rotate(-19deg)}.orbit-front{width:106%;height:42%;transform:translate(-50%,-50%) rotate(19deg)}
.candidate{width:77px;height:100px}.candidate img{height:77px}.candidate-label{font-size:7px;letter-spacing:.08em;padding:4px 6px}.candidate[data-slot="-1"]{left:13%;top:31%}.candidate[data-slot="1"]{left:87%;top:31%}.candidate[data-slot="-2"],.candidate[data-slot="2"]{visibility:hidden;pointer-events:none;opacity:0}
.floor-shadow{width:58%;height:16px;top:92%}.stage-base{width:73%;height:29px;top:92%}.stage-note{display:none}
.controls{display:flex;flex-direction:column;gap:0;margin:-16px 14px 0;padding:20px 18px 16px;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}.helmet-picker{width:100%;border:0;padding:0;gap:10px}.helmet-caption{min-width:125px}.helmet-caption h2{font-size:15px}.helmet-counter{font-size:8px}.arrow-button{width:42px;height:44px}.helmet-joke{font-size:13px;margin:17px 0 12px;min-height:18px}.selection-dots{gap:6px;margin:0 0 18px}.selection-dot{width:34px;height:28px}.save-button{width:100%;min-height:51px;font-size:14px}.gesture-hint{font-size:8px;letter-spacing:.025em;margin:14px 0 0}.feedback{font-size:11px}footer{font-size:7px;letter-spacing:.1em;padding:23px 21px 19px}
.world-wash{background:radial-gradient(ellipse at 50% 44%,#effdff70,transparent 52%),linear-gradient(180deg,#eaf3f8f2,#c9e1ef66 36%,#bed3df66 60%,#dae7effa 84%)}.environment img{object-position:center top;filter:saturate(.2) contrast(1.1) brightness(.94)}.world-grid{background-size:40px 40px}dialog{padding:39px 25px}dialog h2{font-size:30px}.source-links{gap:15px}
}
@media(max-width:430px){.fitting-room{height:578px;--rig-floor:500px}.candidate[data-slot="-1"],.candidate[data-slot="1"]{top:30%}.stage-halo{top:42%}.controls{margin-top:-8px}}
@media(max-width:360px){.topbar{margin:0 12px}.brand{font-size:9px;gap:4px}.brand img{width:29px;height:29px}.brand-sub{display:none}.vision-trigger{font-size:7px;gap:5px;padding:8px}.intro{top:25px}.hero-tagline{font-size:10px}.eyebrow{font-size:6px}.fitting-room{height:515px;--rig-floor:448px}.candidate{width:66px;height:90px}.candidate img{height:66px}.candidate[data-slot="-1"],.candidate[data-slot="1"]{top:31%}.stage-halo{top:45%}.controls{margin-top:0;padding:18px 15px 15px}.selection-dots{gap:3px}.helmet-caption{min-width:120px}.helmet-joke{font-size:12px}.gesture-hint{font-size:7px}footer{font-size:6px;padding-inline:19px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}