:root{color-scheme:dark;--paper:#f0ecdf;--ink:#141714;--line:rgba(255,255,255,.28);--accent:#ff8064}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#111;color:var(--paper)}body{font-family:Arial,Helvetica,sans-serif;overflow-x:hidden}button,a{font:inherit}button{color:inherit}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.lenses{position:relative;width:100%;height:100svh;min-height:720px;overflow:hidden;background:var(--ink);isolation:isolate}.backgrounds,.background,.shade{position:absolute;inset:0}.background{width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.035);transition:opacity .7s ease,transform 1.1s cubic-bezier(.22,.75,.22,1)}.background.is-active{opacity:1;transform:scale(1)}.shade{z-index:1;background:linear-gradient(90deg,rgba(9,12,10,.82) 0%,rgba(9,12,10,.48) 40%,rgba(9,12,10,.14) 69%,rgba(9,12,10,.5) 100%),linear-gradient(0deg,rgba(9,12,10,.82) 0%,transparent 38%,rgba(9,12,10,.46) 100%)}
.masthead{position:absolute;z-index:5;top:28px;left:34px;display:flex;align-items:flex-start;gap:28px}.group-name{display:flex;flex-direction:column;color:#fff;text-decoration:none;font-weight:900;font-size:18px;line-height:.82;letter-spacing:-.055em}.group-name span:last-child{font-size:23px}.masthead p{margin:0;padding-left:28px;border-left:1px solid var(--line);font:11px/1.35 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.11em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.brand-rail{position:absolute;z-index:6;top:26px;right:30px;display:flex;align-items:center;gap:14px;padding:10px 14px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(7,10,8,.2);backdrop-filter:blur(12px)}.rail-brand{position:relative;width:88px;height:30px;padding:4px 8px;border:0;background:none;cursor:pointer;opacity:.52;transition:opacity .25s ease,transform .25s ease}.rail-brand:not(:last-child):after{content:"";position:absolute;right:-8px;top:7px;width:1px;height:16px;background:rgba(255,255,255,.2)}.rail-brand:hover,.rail-brand:focus-visible,.rail-brand.is-active{opacity:1;transform:translateY(-1px)}.rail-brand:focus-visible,.selector-item:focus-visible{outline:2px solid #fff;outline-offset:3px}.rail-brand img{display:block;width:100%;height:100%;object-fit:contain}.rail-filter-white{filter:grayscale(1) brightness(0) invert(1)}
.clear-lens{position:absolute;z-index:3;top:12%;left:61%;width:clamp(320px,43vw,630px);aspect-ratio:1;transform:translateX(-50%);overflow:hidden;border:1px solid rgba(255,255,255,.65);border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12),0 18px 70px rgba(0,0,0,.18);transition:width .65s ease,left .65s ease,border-radius .65s ease}.clear-lens img{width:100vw;height:100svh;min-height:720px;object-fit:cover;position:absolute;top:calc(-12vh);left:calc(-61vw + 50%);max-width:none;filter:saturate(1.04) contrast(1.02);transition:opacity .32s ease}.lenses[data-active="2"] .clear-lens{width:clamp(350px,52vw,750px);left:63%;border-radius:5% 50% 50% 50%}.lenses[data-active="3"] .clear-lens{width:clamp(330px,46vw,660px);left:58%;border-radius:50% 5% 50% 50%}.lenses[data-active="4"] .clear-lens{width:clamp(360px,54vw,780px);left:64%;border-radius:50% 50% 5% 50%}.lenses[data-active="5"] .clear-lens{width:clamp(310px,42vw,600px);left:60%;border-radius:50% 50% 50% 5%}
.active-word{position:absolute;z-index:7;left:34px;top:170px;width:min(380px,35vw);height:58px;pointer-events:none}.word{position:absolute;left:0;bottom:0;margin:0;opacity:0;transform:translateY(10px);font-weight:800;font-size:clamp(36px,3.2vw,48px);line-height:.84;letter-spacing:-.065em;text-transform:uppercase;white-space:nowrap;text-shadow:0 2px 25px rgba(0,0,0,.28);transition:opacity .45s ease,transform .45s ease}.word-long{font-size:clamp(31px,2.8vw,41px);letter-spacing:-.05em}.word.is-active{opacity:1;transform:none}
.selector{position:absolute;z-index:7;left:34px;top:254px;width:400px}.selector h2{margin:0 0 30px;font:11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}.selector-list{border-top:1px solid var(--line)}.selector-item{display:grid;grid-template-columns:48px 1fr auto;align-items:center;width:100%;min-height:69px;padding:0;border:0;border-bottom:1px solid var(--line);background:transparent;text-align:left;cursor:pointer;opacity:.5;transition:opacity .3s ease,padding-left .3s ease,background .3s ease}.selector-item span{font:11px/1 ui-monospace,SFMono-Regular,Menlo,monospace}.selector-item strong{font-size:20px;letter-spacing:-.045em}.selector-item:hover,.selector-item.is-active{opacity:1;padding-left:10px;background:linear-gradient(90deg,rgba(255,255,255,.07),transparent)}.selector-item.is-active:after{content:"";justify-self:end;width:8px;height:8px;margin-right:4px;border-radius:50%;background:var(--accent);box-shadow:0 0 22px var(--accent)}
.brand-stage{position:absolute;z-index:5;right:36px;bottom:190px;width:360px;height:160px;pointer-events:none}.brand-stage:before{content:"";position:absolute;inset:-35px -42px;background:radial-gradient(ellipse,rgba(246,241,227,.95) 0%,rgba(246,241,227,.78) 32%,rgba(246,241,227,.35) 58%,transparent 75%);filter:blur(6px)}.brand-logo{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transform:translateY(10px) scale(.96);transition:opacity .42s ease,transform .42s ease}.brand-logo.is-active{opacity:1;transform:none}.brand-logo img{position:relative;display:block;max-width:280px;max-height:112px;width:78%;height:78%;object-fit:contain}.brand-logo-nadir img{width:100%;height:100%;max-width:360px;max-height:145px}
.detail{position:absolute;z-index:7;right:34px;bottom:48px;width:360px;min-height:116px;pointer-events:none}.detail-copy{position:absolute;inset:0;opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .45s ease}.detail-copy.is-active{opacity:1;transform:none;pointer-events:auto}.detail-copy small{font:11px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.17em;color:var(--accent)}.detail-copy p{margin:13px 0 9px;font:600 clamp(16px,1.45vw,21px)/1.22 Arial,Helvetica,sans-serif;letter-spacing:-.025em;text-shadow:0 2px 20px rgba(0,0,0,.65)}.detail-copy a{display:inline-block;color:#fff;font:12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;text-underline-offset:4px;pointer-events:auto}
.legal{position:absolute;z-index:7;left:34px;right:430px;bottom:25px;display:flex;flex-wrap:wrap;gap:8px 18px;color:rgba(255,255,255,.62);font:9px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase}.legal a{color:inherit;text-underline-offset:3px}.lenses[data-active="2"]{--accent:#79ffb6}.lenses[data-active="3"]{--accent:#ffd739}.lenses[data-active="4"]{--accent:#69c9ff}.lenses[data-active="5"]{--accent:#ff8064}
@media (max-width:1050px){.brand-rail{left:24px;right:24px;top:84px;justify-content:space-between}.rail-brand{width:17%;max-width:110px}.active-word{left:26px;top:170px}.selector{left:26px;top:250px;width:330px}.brand-stage{right:28px;bottom:185px;width:310px}.detail{right:28px;width:310px}.legal{left:26px;right:370px}}
@media (max-width:720px){.lenses{min-height:790px;height:100svh}.masthead{top:20px;left:18px}.masthead p{display:none}.brand-rail{top:66px;left:12px;right:12px;gap:3px;padding:7px 6px}.rail-brand{width:20%;height:34px;padding:5px}.rail-brand:not(:last-child):after{right:-2px}.clear-lens{top:16%;left:66%;width:360px}.clear-lens img{height:100svh;min-height:790px;top:calc(-16vh);left:calc(-66vw + 50%)}.lenses[data-active="2"] .clear-lens,.lenses[data-active="3"] .clear-lens,.lenses[data-active="4"] .clear-lens,.lenses[data-active="5"] .clear-lens{left:66%;width:390px}.active-word{left:18px;top:128px;width:calc(100% - 36px);height:45px}.word,.word-long{font-size:34px;white-space:normal}.selector{left:16px;right:16px;top:auto;bottom:112px;width:auto}.selector h2{margin-bottom:16px}.selector-item{min-height:48px;grid-template-columns:40px 1fr auto}.selector-item strong{font-size:17px}.brand-stage{right:12px;top:212px;bottom:auto;width:190px;height:94px}.brand-stage:before{inset:-18px -24px}.brand-logo img{max-width:170px;max-height:76px}.brand-logo-nadir img{max-width:190px;max-height:90px}.detail{left:18px;right:18px;bottom:388px;width:auto;min-height:100px}.detail-copy p{max-width:310px;font-size:16px}.legal{left:16px;right:16px;bottom:20px;gap:4px 10px;font-size:8px}.legal span:nth-child(3){display:none}}
@media (max-height:760px) and (min-width:721px){.selector-item{min-height:56px}.selector{top:225px}.active-word{top:145px}.brand-stage{bottom:150px}.detail{bottom:28px}.legal{display:none}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}
