:root{color-scheme:dark;--background:#182b42;--accent:#ffc89b;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#f1f1ee;background:var(--background);font-synthesis:none}
*{box-sizing:border-box}body{margin:0}button{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}main{position:relative;min-height:100svh;isolation:isolate}canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}#surface{z-index:-2}#light{z-index:-1}header{position:absolute;top:max(42px,env(safe-area-inset-top));left:24px;right:24px;text-align:center;pointer-events:none}h1{font-size:21px;line-height:1.2;font-weight:500;letter-spacing:-.055em;margin:0;color:rgba(255,255,250,.84)}.palette-bar{position:fixed;bottom:max(38px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);border:1px solid #ffffff19;border-top-color:#ffffff32;background:linear-gradient(160deg,#ffffff0f,#ffffff03),#171c2340;box-shadow:0 10px 30px #0000001c,inset 0 1px 0 #ffffff0a;backdrop-filter:blur(24px) saturate(125%);-webkit-backdrop-filter:blur(24px) saturate(125%);border-radius:25px;padding:10px 12px;margin:0;min-width:0}#swatches{display:flex;gap:6px}.swatch{position:relative;display:grid;place-items:center;width:44px;height:44px;border:0;background:none;padding:0;cursor:pointer}.tile{display:grid;grid-template:repeat(3,3px)/repeat(3,3px);gap:4px;align-content:center;justify-content:center;width:34px;height:34px;background:var(--swatch-background);border:1px solid #ffffff16;border-radius:11px;transition:transform 180ms ease,box-shadow 180ms ease}.tile i{width:3px;height:3px;background:var(--swatch-dot);border-radius:50%}.tile i:nth-child(5){width:4px;height:4px;transform:translate(-.5px,-.5px);background:var(--swatch-accent)}.swatch[aria-checked=true] .tile{transform:scale(1.06);border-color:transparent;box-shadow:inset 0 1px 1px #ffffff48,inset 0 -1px 1px #ffffff10,0 1px 3px #00000040}.swatch:hover .tile{transform:scale(1.09)}.swatch:focus-visible,.buy:focus-visible,.dismiss:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:13px}.swatch::after{content:attr(data-name);position:absolute;bottom:57px;left:50%;transform:translate(-50%,4px);white-space:nowrap;font-size:13px;line-height:18px;font-weight:500;color:#f3f2ed;padding:7px 11px;background:#161b24e6;backdrop-filter:blur(12px);border:1px solid #ffffff18;border-radius:10px;box-shadow:0 4px 16px #0002;opacity:0;pointer-events:none;transition:opacity 140ms ease,transform 140ms ease}.swatch:hover::after,.swatch:focus-visible::after{opacity:1;transform:translate(-50%,0)}.buy{position:fixed;right:max(40px,env(safe-area-inset-right));bottom:max(48px,env(safe-area-inset-bottom));display:flex;align-items:center;gap:17px;min-height:44px;padding:11px 17px;border-radius:14px;border:1px solid #fff;background:#fff;color:#18202b;box-shadow:0 3px 12px #00000014;font-size:14px;line-height:20px;font-weight:500;cursor:pointer;transition:background 180ms,border-color 180ms}.price{color:#626873;font-weight:400}.buy:hover{background:#f0f1f3;border-color:#f0f1f3}.buy:active{transform:translateY(1px)}dialog{width:min(400px,calc(100vw - 40px));padding:36px;border:1px solid #ffffff24;border-radius:23px;background:#171c26f2;backdrop-filter:blur(28px);color:#f1f1ee;box-shadow:0 24px 90px #0008}dialog::backdrop{background:#080c1680;backdrop-filter:blur(7px)}.dismiss{position:absolute;top:12px;right:12px;background:none;border:0;font-size:25px;width:36px;height:36px;cursor:pointer;color:#ffffff8f}.eyebrow{font-size:12px;letter-spacing:.12em;color:#ffffff70;margin:8px 0 19px}h2{font-size:24px;line-height:1.25;letter-spacing:-.045em;font-weight:500;margin:0 0 14px}dialog p:last-child{font-size:16px;line-height:1.6;color:#ffffff9c;margin-bottom:0}.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}
@media(max-width:760px){header{top:max(32px,env(safe-area-inset-top))}.palette-bar{bottom:calc(104px + env(safe-area-inset-bottom));padding:8px}.swatch{width:40px;height:44px}#swatches{gap:3px}.buy{right:24px;bottom:calc(26px + env(safe-area-inset-bottom))}}
@media(max-width:350px){.palette-bar{padding:6px}#swatches{gap:0}.swatch{width:39px}.tile{width:32px;height:32px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}}
@media(forced-colors:active){.swatch[aria-checked=true]{outline:2px solid Highlight}.buy,.palette-bar{border:1px solid ButtonText}}

.tagline{margin:10px 0 0;font-size:13px;line-height:1.5;font-weight:400;letter-spacing:.01em;color:rgba(255,255,250,.58)}