@import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400;500;600;700&family=Unbounded:wght@500;600;700;800&display=swap');

/* Three type voices: expressive headings, pixel game labels, readable UI. */
h1,h2{font-family:Unbounded,Manrope,sans-serif;font-weight:600}
h1{font-size:clamp(35px,3.65vw,50px);line-height:1.26;letter-spacing:-2.8px}
h2{font-size:29px;line-height:1.4;letter-spacing:-1.4px}
.brand,.product h3,.currency h3,.floating strong,.price,.steps article>span,.total strong{font-family:'Pixelify Sans',monospace;font-weight:500;letter-spacing:0}
.brand{font-size:27px}.product h3,.currency h3{font-size:32px;line-height:1.15}.price{font-size:28px}.floating strong{font-size:36px}.steps article>span{font-size:23px}.total strong{font-size:28px}
.eyebrow{font-size:9px;letter-spacing:2.2px}.hero-note{letter-spacing:.15px}.badge{font-size:9px;letter-spacing:.9px;font-weight:800}

/* Colored scenery is visible through the lens-like surfaces. */
body{background:radial-gradient(ellipse at 5% 18%,#d9f7fc,transparent 40%),radial-gradient(ellipse at 80% 25%,#aacbff,transparent 48%),#e9f1fa;isolation:isolate}
.ambient{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:linear-gradient(123deg,transparent 35%,#87cefa3b 50%,transparent 68%)}
.ambient:before,.ambient:after{content:'';position:absolute;border-radius:50%;filter:blur(4px)}
.ambient:before{width:65vw;height:65vw;right:-20vw;top:14vh;background:radial-gradient(circle at 32% 28%,#b4fff4 0%,#38cad477 26%,#2589ff66 48%,#8588e933 61%,transparent 70%)}
.ambient:after{width:40vw;height:40vw;left:-19vw;top:52vh;background:radial-gradient(circle at 65% 35%,#a9e5ff,#7c9dfd60 44%,transparent 69%)}

/* Reflected light, inset rims, and translucent depth. */
.glass,.product,.tabs,dialog{--gx:40%;--gy:10%;position:relative;background:linear-gradient(125deg,#ffffff80 0%,#ffffff29 42%,#d7efff45 76%,#ffffff70 100%);border:1px solid #ffffffc9;backdrop-filter:blur(22px) saturate(1.65);-webkit-backdrop-filter:blur(22px) saturate(1.65);box-shadow:inset 0 1.5px 1px #fff,inset 1px 0 1px #ffffff9c,inset 0 -2px 1px #237bab30,0 14px 35px #164e8120,0 2px 5px #1b52841a}
.glass:before,.product:before,.tabs:before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;background:radial-gradient(ellipse at var(--gx) var(--gy),#ffffff70,transparent 56%),linear-gradient(118deg,transparent 24%,#ffffff26 29%,transparent 37%,transparent 63%,#ffffff29 68%,transparent 72%);opacity:.65}
.glass:after,.product:after{content:'';position:absolute;inset:4px;border:1px solid #ffffff42;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 10px #ffffff1a;z-index:1}
.nav{position:sticky;top:15px;z-index:20;border-radius:25px;background:linear-gradient(120deg,#ffffff90,#d6edff38 55%,#ffffff85)}
.nav>*{position:relative;z-index:2}.nav nav a{padding:9px 0}.brand img{border:1px solid #fff8;box-shadow:0 2px 10px #154d6e19}
.hero{gap:20px}.hero-copy{position:relative;z-index:1}.hero h1{font-size:clamp(35px,3.65vw,50px)}h1 em{background:linear-gradient(110deg,#146ce7,#1489c8 70%,#06899b);background-clip:text;-webkit-background-clip:text;color:transparent}
.hero-art:before{content:'';position:absolute;inset:35px -15px 0 0;background:radial-gradient(ellipse,#3bf5e55c,transparent 68%);filter:blur(25px);pointer-events:none}
.art-frame{border:8px solid #ffffff53;box-shadow:inset 0 1px 5px white,0 30px 65px #145aa636,0 0 0 1px #ffffffe6;position:relative}
.art-frame:after{content:'';position:absolute;inset:0;border-radius:28px;pointer-events:none;background:linear-gradient(122deg,#ffffff48,transparent 25%,transparent 64%,#d9faff30 76%,transparent 84%);box-shadow:inset 2px 2px 3px #ffffffbd,inset -2px -2px 4px #82e6ff70}
.orbit1{border:10px solid #ffffff24;box-shadow:inset 1px 2px 1px #ffffffbb,1px 2px 1px #ffffffb3,0 15px 40px #167fab17;transform:rotate(-22deg) scaleX(1.06)}
.orbit2{border-color:#ffffff73}
.floating{position:absolute;z-index:3;bottom:29px;left:-8px;width:310px;padding:20px 22px;background:linear-gradient(135deg,#ffffff8c,#e0f9ff37 55%,#bce7fa62);backdrop-filter:blur(14px) saturate(1.9);-webkit-backdrop-filter:blur(14px) saturate(1.9);box-shadow:inset 0 2px 2px #fff,inset 2px 0 3px #ffffffc7,inset 0 -2px 3px #1c698966,0 22px 40px #104d7e38;color:#11334f}
.floating>*{position:relative;z-index:2}.floating small{font-weight:800}.floating .gem{color:#087ca6;text-shadow:1px 1px #fff}.floating b{color:#007dba}.mini{position:absolute;z-index:3;font-weight:700;top:30px;padding:15px 18px;background:linear-gradient(130deg,#ffffff9c,#d7eaff47);backdrop-filter:blur(12px) saturate(1.8)}
.tabs{border-radius:16px;background:linear-gradient(115deg,#ffffff68,#d7e9f23b)}.tabs:before{z-index:0}.tabs button{position:relative;z-index:1;border:1px solid transparent}.tabs button.active{border-color:#ffffffcf;background:linear-gradient(#ffffffb8,#e4f4ff80);box-shadow:inset 0 1px 1px #fff,0 4px 10px #3578a51f}
.product{border-radius:26px;background:linear-gradient(130deg,#ffffff63,#ffffff2b 40%,#c9e9fa38);padding:13px;transition:transform .25s,box-shadow .25s}.product:hover{box-shadow:inset 0 1.5px 1px #fff,inset 1px 0 1px #ffffff9c,inset 0 -2px 1px #237bab30,0 22px 45px #17669c30}.product:before{inset:0;background:radial-gradient(ellipse at var(--gx) var(--gy),#ffffff61,transparent 65%);z-index:0}.product-body,.product-image{position:relative;z-index:2}.product-body{padding:18px 11px 10px}.product p{color:#405a71}.product-image{border:1px solid #ffffffad;box-shadow:0 7px 16px #1a456825,inset 0 1px #fff}.badge{background:#ffffffb8;border:1px solid #ffffffdb;box-shadow:inset 0 1px #fff,0 3px 10px #0c1f2d1f;backdrop-filter:blur(16px) saturate(1.6)}
.primary,.add,.cart-button{position:relative;overflow:hidden;border:1px solid #ffffff96;box-shadow:inset 0 1.5px 1px #ffffff9c,inset 0 -2px 1px #003f9866,0 8px 20px #1268ab24;background:linear-gradient(160deg,#3ba5ffef 0%,#1178e9ed 50%,#0764d4e3);color:white;backdrop-filter:blur(16px)}
.primary:before,.add:before,.cart-button:before{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 25%,#ffffff32 45%,transparent 65%);transform:translateX(-130%);transition:transform .65s}
.primary:hover:before,.add:hover:before,.cart-button:hover:before{transform:translateX(130%)}.add{background:linear-gradient(145deg,#ffffffab,#c3ecff61);border-color:#ffffffef;color:#135d95;box-shadow:inset 0 1px #fff,inset 0 -1px #5191b44d,0 4px 10px #2377a81a}.add:hover{background:linear-gradient(145deg,#ffffffd9,#afe3fcaa)}
.icon{background:#ffffff32;border-color:#ffffffa6;box-shadow:inset 0 1px #ffffffc2,0 3px 8px #22536c14;backdrop-filter:blur(14px)}
.how{border:1px solid #a5dfff89;background:linear-gradient(120deg,#0d294bf0,#123d5dcc 55%,#066a7eab);box-shadow:inset 0 2px 1px #d2fbff8c,inset 0 -2px 1px #002747,0 20px 45px #0e537e2c;backdrop-filter:blur(24px) saturate(1.7)}.how:before{content:'';position:absolute;inset:5px;border:1px solid #ceefff26;border-radius:23px;pointer-events:none}.how h2{font-size:27px}.how p{color:#c0d5e5}.how .eyebrow{color:#7ae9e8}.faq h2{font-size:25px}.faq details{padding:19px 20px;border:1px solid #ffffff8a;border-radius:16px;background:linear-gradient(115deg,#ffffff68,#ffffff20);backdrop-filter:blur(16px);box-shadow:inset 0 1px #fff9,0 5px 15px #1c5d7d09;margin-bottom:10px}.faq details p{color:#405a71}
dialog{position:fixed;background:linear-gradient(135deg,#f3fbffdc,#e2f4ffd1);backdrop-filter:blur(35px) saturate(1.6);-webkit-backdrop-filter:blur(35px) saturate(1.6);box-shadow:inset 0 2px 2px #fff,inset 0 -2px 2px #72b3d066,0 35px 90px #061a3a66}dialog::backdrop{backdrop-filter:blur(6px);background:#061a3a58}.dialog-head h2{font-size:27px}

.dark{background:radial-gradient(ellipse at 10% 15%,#102d41,transparent 45%),#071322;--muted:#b6c7d8;--line:#91d0f033}.dark .ambient{opacity:.8}.dark .ambient:before{background:radial-gradient(circle at 32% 28%,#28e9d03b,#218be74d 38%,#7e71db2b 60%,transparent 72%)}.dark .ambient:after{background:radial-gradient(circle at 65% 35%,#386fde66,#009cbd22 45%,transparent 70%)}
.dark .glass,.dark .product,.dark .tabs{background:linear-gradient(130deg,#92c9ec26,#3482b314 45%,#a9d6f022);border-color:#c2efff57;box-shadow:inset 0 1.5px 1px #ddf8ff8a,inset 1px 0 1px #a7e8ff33,inset 0 -2px 1px #020f25b3,0 18px 40px #0000002b}
.dark .glass:before,.dark .product:before,.dark .tabs:before{opacity:.2}.dark .glass:after,.dark .product:after{border-color:#bdeaff21}.dark .product p,.dark .faq details p{color:#b9ccde}.dark .floating{background:linear-gradient(130deg,#cee9ff4a,#27779536 55%,#7cbfd738);color:white;box-shadow:inset 0 2px 2px #f1fcffb0,inset 2px 0 2px #ceffff40,inset 0 -2px 3px #020e2180,0 22px 40px #0005}.dark .floating b,.dark .floating .gem{color:#78f1ff}.dark .floating .gem{text-shadow:none}.dark .mini{color:#f3fbff}.dark .tabs button.active{background:linear-gradient(#a2d5f44d,#38729e40);color:white;border-color:#ccefff5c;box-shadow:inset 0 1px #ffffff80,0 4px 12px #0002}.dark .add{background:linear-gradient(145deg,#8cd7ff47,#3e9ed526);color:#d1f3ff;border-color:#b5eaff70;box-shadow:inset 0 1px #ffffff6b,inset 0 -1px #02182770,0 5px 12px #0002}.dark .cart-button{background:linear-gradient(150deg,#89dbff52,#257fb63d);color:#e3f7ff}.dark .icon{background:#b0e8ff19;border-color:#bde8ff50}.dark .faq details{background:linear-gradient(115deg,#83b8d71c,#76b6dc0a);border-color:#a6e2ff40;box-shadow:inset 0 1px #ffffff35}.dark dialog{background:linear-gradient(135deg,#183d56e8,#0c233ce6);border-color:#b3e6ff69;box-shadow:inset 0 2px 2px #cff1ff89,0 35px 90px #0009}.dark h1 em{background-image:linear-gradient(110deg,#5aaaff,#64e3ec)}.dark .eyebrow{color:#69dfdf}
@media(min-width:901px) and (max-width:1150px){.hero h1{font-size:40px;letter-spacing:-2.3px}.hero-art{transform:scale(.85)}.currency h3{font-size:27px}}
@media(min-width:651px) and (max-width:900px){.hero h1{font-size:34px;letter-spacing:-2px}.hero-art{transform:scale(.72)}.currency h3{font-size:25px}.currency .price{font-size:25px}.nav nav{font-size:11px}.brand{font-size:23px}}
@media(max-width:650px){.nav{top:9px;border-radius:20px}.brand{font-size:22px}.hero h1{font-size:clamp(29px,8vw,36px);letter-spacing:-1.8px;line-height:1.3}.hero p{line-height:1.8}.hero-art{margin-top:12px}.floating{left:-4px;bottom:17px;width:295px}.floating strong{font-size:34px}.mini{right:-5px;top:26px}.ambient:before{width:140vw;height:140vw;top:27vh;right:-85vw}.ambient:after{width:100vw;height:100vw;left:-65vw;top:65vh}h2{font-size:24px;letter-spacing:-1px}.product h3{font-size:32px}.currency h3{font-size:25px}.currency .price{font-size:25px}.product.currency{grid-template-columns:100px 1fr;gap:5px}.currency .product-body{padding-right:3px}.how h2{font-size:24px}.faq h2{font-size:23px}.steps article>span{font-size:22px}.shop-toolbar{margin-top:22px}.hero .orbit1{transform:scaleX(.98)}.glass,.product,.tabs{backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5)}}
@media(prefers-reduced-motion:reduce){.primary:before,.add:before,.cart-button:before{display:none}.product{transition:none}}
@supports not (backdrop-filter:blur(1px)){.glass,.product,.tabs{background:#e7f3fff2}.dark .glass,.dark .product,.dark .tabs{background:#152e45f5}}