:root{color-scheme:dark;--ink:#172750;--night:#0e1934;--slate:#27395b;--ice:#c9ffff;--teal:#54eadb;--pink:#ffa6d8;--sun:#ffe5a8;--pale:#f8fbff;--muted:#b4c8e4;--glass:rgba(20,36,75,.86)}
    *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;color:#fff;font-family:ui-rounded,"Trebuchet MS",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:radial-gradient(ellipse at 10% 10%,#7897d6 0,transparent 29%),radial-gradient(ellipse at 92% 13%,#edafd0 0,transparent 30%),linear-gradient(135deg,#9fcbe7 0%,#bcdddf 44%,#cab8e6 100%);overflow-x:hidden}
    body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.3;background-image:radial-gradient(#fff 1.7px,transparent 2px);background-size:31px 31px;mask-image:linear-gradient(to bottom,black,transparent 80%)}
    button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid var(--sun);outline-offset:4px}button:disabled{opacity:.53;cursor:not-allowed}a{color:inherit} .shell{width:min(100% - 28px,990px);margin:0 auto;padding:16px 0 42px;position:relative}
    .topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:22px}.brand{display:flex;align-items:center;gap:11px;font-size:17px;font-weight:1000;letter-spacing:.2px;text-shadow:0 2px 10px #5b72a966}.brand-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:15px;background:#ffffffbf;box-shadow:0 5px 0 #50769c55,0 12px 25px #344d7950}.brand-icon svg{width:30px;height:30px}.tag{display:block;font-size:10px;letter-spacing:1.3px;text-transform:uppercase;font-weight:900;color:#fff;opacity:.85}.sound{background:#ffffffbf;color:var(--ink);border:2px solid #fff;border-radius:100px;min-height:42px;padding:9px 13px;font-weight:900;box-shadow:0 5px 0 #5e6e9850}
    .hero{display:grid;grid-template-columns:1.17fr .83fr;gap:25px;align-items:center;margin:10px 0 22px}.eyebrow{display:inline-block;border:1px solid #fff9;padding:8px 13px;border-radius:50px;background:#fff7;color:#233b64;font-size:11px;letter-spacing:1.4px;font-weight:1000}.hero h1{font-size:clamp(42px,7vw,73px);line-height:.98;margin:15px 0 13px;letter-spacing:-3px;color:#fff;text-shadow:0 4px 0 #637ca9,0 8px 22px #4b548c80}.hero h1 span{color:#ffebaa;text-shadow:0 4px 0 #c79866,0 8px 22px #785d7b80}.hero p{max-width:525px;margin:0;font-size:15px;line-height:1.55;font-weight:750;text-shadow:0 1px 2px #54617d55}
    .hero{grid-template-columns:1fr 1.07fr;gap:12px;align-items:center;margin:14px 0 26px}.hero h1{font-size:clamp(37px,6.2vw,69px);line-height:1.02}.hero h1 span{color:#fff3c7}.hero p{max-width:490px}.hero-art{position:relative;min-width:0}.hero-art img{width:100%;height:auto;display:block;filter:drop-shadow(0 15px 20px #3d63865c);animation:float 4s ease-in-out infinite}.art-tag{position:absolute;bottom:3%;left:50%;transform:translateX(-50%);white-space:nowrap;padding:8px 13px;border-radius:30px;background:#18345dcb;border:1px solid #fff9;color:#f8fcff;font-size:11px;font-weight:950;box-shadow:0 7px 18px #2b477e44}.mini-crystals{display:flex;align-items:center;gap:6px;margin-top:14px}.mini-crystals img{width:37px;height:33px;object-fit:contain}.mini-crystals span{font-size:12px;font-weight:950;letter-spacing:.3px;color:#fff5d4;text-shadow:0 1px 3px #547497}.resource-badge img{height:57px;width:60px;object-fit:contain;filter:drop-shadow(0 3px 4px #14194c)}.reward-strip{display:flex;align-items:center;gap:10px;margin:0 0 16px;border-radius:17px;border:1px solid #ffffff85;background:linear-gradient(100deg,#30528cc4,#68539b85);padding:10px 13px}.reward-strip img{width:65px;height:60px;object-fit:contain}.reward-strip strong{font-size:15px;color:#fff4c4;display:block}.reward-strip small{font-size:11px;line-height:1.5;display:block;color:#e8efff}.setup-dialog{width:min(92vw,450px);border:2px solid #c7fffa;border-radius:22px;padding:26px;color:#eafaff;background:#142b4b;box-shadow:0 20px 80px #061630ac}.setup-dialog::backdrop{background:#071228af}.setup-dialog h3{font-size:23px;margin:0 0 8px}.setup-dialog p{font-size:14px;line-height:1.6;color:#d5e7f8}.setup-dialog input{width:100%;min-height:48px;padding:10px;border-radius:12px;background:#091a35;border:1px solid #8aafce;color:white;margin-bottom:10px}.setup-dialog .outline{width:100%;margin-top:12px}
    @keyframes float{50%{transform:translateY(-8px)}}
    .panel{background:linear-gradient(153deg,rgba(20,39,83,.94),rgba(24,39,78,.91));border:2px solid #ffffff80;border-radius:30px;box-shadow:0 12px 0 #576e9b4d,0 32px 54px #263d7170,inset 0 1px 0 #fff7;padding:clamp(17px,4vw,31px);position:relative;overflow:hidden}.panel:before{content:"";position:absolute;left:-70px;top:-100px;width:270px;height:220px;border-radius:50%;background:#9be0f819;filter:blur(4px);pointer-events:none}.panel-header{position:relative;display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:18px}.panel h2{font-size:clamp(20px,4vw,28px);line-height:1.12;margin:0;letter-spacing:-.8px}.mini{font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--ice);font-weight:1000}.pill{border-radius:30px;padding:7px 12px;border:1px solid #75d9cf8a;background:#54eadb1d;color:#adfff0;font-size:10px;white-space:nowrap;font-weight:900}.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:17px}.field{position:relative}.field.full{grid-column:1 / -1}label{display:block;font-size:12px;font-weight:900;letter-spacing:.4px;margin:0 0 9px;color:#deefff}.input-wrap{display:flex;align-items:center;gap:10px;border:1.5px solid #92a4caa1;background:#0b1833cf;border-radius:16px;padding:0 14px;min-height:54px;transition:border-color .2s,box-shadow .2s}.input-wrap:focus-within{border-color:var(--teal);box-shadow:0 0 0 4px #54eadb29}.input-wrap .field-ico{color:#77e7e0;font-size:21px}.input-wrap input{background:none;border:0;outline:0;color:white;min-height:50px;width:100%;min-width:0;font-weight:750;font-size:16px}.input-wrap input::placeholder{color:#7e94b5}.device-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.device{min-height:54px;min-width:0;display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 6px;line-height:1.15;background:#15274bd9;border:1.5px solid #7186b0;border-radius:13px;color:#d4e3fa;font-size:12px;font-weight:900;transition:.15s}.device:hover{border-color:#b4fff6}.device[aria-pressed=true]{background:linear-gradient(130deg,#d4fff5,#69e6d8);border-color:#b9fff8;color:#142e43;box-shadow:0 4px 0 #168e8d}.device .emoji{font-size:18px}.resource{padding:16px;border-radius:19px;border:1px solid #a8a8d17d;background:linear-gradient(125deg,#283e6b,#34437e 56%,#3c3871);margin-top:5px}.resource-top{display:flex;align-items:center;gap:12px}.resource-badge{height:65px;width:65px;flex:0 0 65px;display:grid;place-items:center;background:#fff2;border:1px solid #fff5;border-radius:20px}.resource-badge svg{width:46px;height:46px;filter:drop-shadow(0 3px 4px #14194c)}.amount{font-size:clamp(30px,5vw,44px);font-weight:1000;line-height:1;letter-spacing:-1px;font-variant-numeric:tabular-nums}.resource-title{font-size:12px;color:#e4ecff;margin:6px 0 0;font-weight:800}.range-row{display:flex;justify-content:space-between;font-size:11px;font-weight:900;color:#c9ddff;margin-top:16px}.range{width:100%;height:12px;display:block;margin:14px 0;appearance:none;border:1px solid #e1fef7a6;border-radius:20px;background:linear-gradient(90deg,#ffe6a4 0%,#61e8d9 var(--fill,55%),#0a1732 var(--fill,55%),#0a1732 100%);cursor:pointer}.range::-webkit-slider-thumb{appearance:none;width:29px;height:29px;border-radius:50%;background:#fff;border:6px solid #72e9db;box-shadow:0 0 0 4px #72e9db3f,0 4px 8px #0e142e}.range::-moz-range-thumb{width:17px;height:17px;border-radius:50%;background:#fff;border:6px solid #72e9db;box-shadow:0 4px 8px #0e142e}.quick{display:flex;gap:8px;flex-wrap:wrap}.quick button{padding:7px 11px;border-radius:99px;border:1px solid #b0c6e4a0;background:#101f40;color:#dcecff;font-size:12px;font-weight:850}.quick button:hover{background:#29436c}.disclose{font-size:12px;line-height:1.55;color:#d1e2fa;margin:18px 0 14px}.disclose b{color:white}.primary{min-height:57px;width:100%;border:1.5px solid #fff8;border-radius:17px;color:#173c45;font-size:16px;font-weight:1000;background:linear-gradient(#dbfff4,#7cefdc);box-shadow:0 5px 0 #2eafa9,0 10px 16px #0004;transition:transform .12s,box-shadow .12s;display:flex;align-items:center;justify-content:center;gap:10px}.primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 7px 0 #2eafa9,0 12px 18px #0004}.primary:active:not(:disabled){transform:translateY(3px);box-shadow:0 2px 0 #2eafa9}.error-text{min-height:20px;color:#ffd7d5;font-size:12px;font-weight:800;margin:12px 0 0}.fineprint{color:#c7d6eb;font-size:11px;line-height:1.5;margin:11px 0 0;text-align:center}.hidden{display:none!important}
    .progress-top{display:flex;align-items:center;justify-content:space-between;gap:16px}.timer{flex:0 0 auto;display:grid;place-items:center;width:66px;height:66px;border-radius:50%;background:conic-gradient(#6ff3e0 var(--p,0%),#29446b 0);font-size:19px;font-weight:1000;position:relative}.timer:after{content:"";position:absolute;inset:6px;border-radius:50%;background:#162b4e}.timer span{z-index:1}.track{height:11px;border-radius:20px;background:#0c1732;overflow:hidden;margin:18px 0 14px;border:1px solid #8b9fbd}.fill{height:100%;width:0%;background:linear-gradient(90deg,#7cf2df,#ffe3a5);border-radius:20px;transition:width .22s linear}.steps{display:grid;gap:9px;padding:0;margin:0;list-style:none}.steps li{display:flex;align-items:center;gap:10px;color:#aec0d8;font-size:13px;font-weight:800}.steps .dot{height:26px;width:26px;border-radius:50%;display:grid;place-items:center;flex:0 0 26px;border:1px solid #6683aa;background:#203a5c;color:#c7d8f1;font-size:12px}.steps li.complete{color:#dcfff8}.steps li.complete .dot{background:#68ecd9;color:#132b3e;border-color:#c0fff4}.steps li.active{color:#fff5c8}.steps li.active .dot{background:#fce3a0;color:#433a48;border-color:#fff6d7;box-shadow:0 0 0 4px #ffe5aa24}.notice{padding:13px 14px;border-radius:14px;background:#ffdb9e18;border:1px solid #f4ce8d6b;color:#f7e7c7;font-size:12px;line-height:1.55;margin-top:18px}.end-banner{display:flex;align-items:center;gap:12px;border-radius:17px;background:#a8ffe716;border:1px solid #7ae4ce85;padding:15px;margin:18px 0}.end-banner .symbol{font-size:29px}.end-banner strong{display:block;font-size:17px}.end-banner p{margin:5px 0 0;font-size:12px;line-height:1.5;color:#d6e8ef}.outline{min-height:48px;width:100%;border:1px solid #b8d6ed85;border-radius:14px;background:#152b50;color:#e8faff;font-size:13px;font-weight:850;margin-top:12px}.footer{margin:25px auto 0;max-width:700px;text-align:center;font-size:11px;line-height:1.6;color:#253f65;font-weight:800}.footer a{text-decoration:underline}.footer strong{color:#142d4d}
    @media(max-width:720px){.hero{grid-template-columns:1fr;gap:0;margin:7px 0 20px}.hero h1{font-size:clamp(43px,12vw,67px)}.hero p{max-width:520px}.orb-stage{height:128px;position:absolute;right:3px;top:35px;opacity:.35;pointer-events:none}.orb-stage:before{width:112px;height:112px;box-shadow:0 0 0 10px #fff3}.orb-stage svg{width:115px;height:115px}.star{display:none}.hero-text{z-index:1;position:relative;padding-right:30px}.panel-header{align-items:flex-start}.pill{white-space:normal;text-align:center}.formgrid{grid-template-columns:1fr}.formgrid .field.full{grid-column:auto}.device-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.topbar{margin-bottom:17px}}@media(max-width:390px){.shell{width:min(100% - 18px,990px)}.panel{padding:16px;border-radius:24px}.device{font-size:11px}.hero h1{font-size:42px}.brand{font-size:15px}.tag{font-size:9px}.sound{padding:9px 10px;font-size:12px}}
    @media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}
    @media(max-width:690px){.hero-text{padding-right:0}.hero{grid-template-columns:1fr;text-align:center;gap:0}.hero h1{font-size:clamp(38px,11vw,60px);margin:12px 0}.hero p{margin:auto}.hero-art{width:min(100%,510px);margin:-1px auto 0}.hero-art img{max-height:300px}.art-tag{bottom:0}.mini-crystals{justify-content:center}.reward-strip{padding:8px 10px}.reward-strip img{width:55px;height:53px}}
    @media(prefers-reduced-motion:reduce){.hero-art img{animation:none}}

    /* v3: readable, colorful crystal-world hero and reward image with 99,999 embedded */
    :root { color-scheme: dark; --ink:#152349; --night:#0b1740; --teal:#72ffe6; --ice:#cbfcff; }
    body { background:radial-gradient(ellipse 48% 36% at 10% 11%, #3178dbb0, transparent 77%),radial-gradient(ellipse 44% 33% at 95% 19%, #b352cf90, transparent 75%),linear-gradient(155deg,#0c1f51 0%,#132e71 33%,#352675 65%,#121b46 100%); color:#f7fbff; }
    body:before { opacity:.25; background-size:41px 41px; }
    .shell { width:min(100% - 32px,1050px);padding-top:20px; }
    .topbar {margin-bottom:18px; }
    .brand {font-size:18px;text-shadow:0 2px 4px #08133b;}
    .brand-icon {background:#f0fbff;box-shadow:0 5px 0 #091a5770,0 14px 25px #07103d70;}
    .tag {font-size:9px;color:#d7edff;letter-spacing:1.8px;opacity:1;}
    .sound {background:#f9fbff;color:#172a4e;box-shadow:0 5px 0 #070d3e88;white-space:nowrap;}
    .hero {display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:12px;align-items:center;margin:4px 0 26px;padding:28px 22px 22px;border:1.5px solid #b6d6ff70;border-radius:30px;position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(circle at 85% 25%,#e389d750,transparent 39%),radial-gradient(circle at 23% 60%,#2c80dd94,transparent 65%),linear-gradient(120deg,#192d73 3%,#253d92 45%,#57338f 100%);box-shadow:0 13px 40px #060f3773,inset 0 1px #ffffff63; }
    .hero:before {content:"";z-index:-1;position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(#f8ffffb0 1.3px,transparent 2px);background-size:43px 43px;mask-image:linear-gradient(#000,transparent 96%);opacity:.35;}
    .hero-text{z-index:1;min-width:0;position:relative;padding:12px 0 12px 6px;}
    .eyebrow {display:inline-block;background:#0b214cb8;color:#def9ff;border:1px solid #e1fdffc7;box-shadow:0 5px 16px #050c3255;font-size:10px;letter-spacing:1.4px;}
    .hero h1 {font-size:clamp(41px,5.2vw,69px);font-weight:1000;letter-spacing:-2.5px;line-height:1.01;margin:19px 0 14px;color:#f9fcff;text-shadow:0 4px 0 #0f2b6c,0 7px 16px #041947a8;}
    .hero h1 span {color:#ffe2a1;text-shadow:0 4px 0 #9b683d,0 8px 15px #071c60b8;}
    .hero h1 .hero-topline {color:#fff;text-shadow:0 4px 0 #0c2866,0 8px 15px #071c60b8;}
    .hero p{font-size:14px;font-weight:750;line-height:1.6;max-width:400px;color:#f2f8ff;text-shadow:0 2px 4px #07164dc7;}
    .mini-crystals{margin-top:19px;background:#101f57c0;border:1px solid #bdddfb83;border-radius:99px;padding:8px 12px;display:inline-flex;box-shadow:0 5px 19px #09164577;}
    .mini-crystals span {font-size:10px;letter-spacing:.4px;color:#fff1c8;text-shadow:0 1px 6px #091645;}
    .hero-art{position:relative;z-index:1;min-width:0;filter:drop-shadow(0 12px 16px #06133c88);}
    .hero-art img{width:100%;max-width:100%;height:auto;border:1px solid #dbfaff5e;border-radius:21px;box-shadow:0 12px 24px #09134c8a;animation:float 4s ease-in-out infinite;}
    .art-tag {bottom:9px;background:#0a2156e8;font-size:10px;border:1px solid #c5edff9c;box-shadow:0 4px 12px #06134d9c;}
    .panel {background:linear-gradient(153deg,#132859ed,#182a5df5 60%,#17204eef);border-color:#c1dcff8c;box-shadow:0 7px 0 #080f3473,0 20px 47px #040b2f8c;}
    .reward-strip {background:linear-gradient(100deg,#1b427ac4,#393478b8);border-color:#8bdce5a6;}
    .footer,.footer strong,.footer a {color:#e0edff;}
    .footer {text-shadow:0 2px 8px #051139;}
    .primary {text-decoration:none;}
    @media(max-width:800px){.hero {grid-template-columns:1fr;text-align:center;gap:14px;padding:25px 18px 20px;}.hero h1{font-size:clamp(42px,8.5vw,68px);}.hero p{max-width:590px;margin:0 auto;}.hero-text{padding:0;}.hero-art{width:min(100%,640px);margin:0 auto;}.hero-art img{max-height:none;}.mini-crystals{justify-content:center;}.art-tag{bottom:9px;}}
    @media(max-width:430px){.shell{width:min(100% - 16px,1050px);padding-top:10px;}.hero{padding:24px 12px 16px;border-radius:21px;}.hero h1{font-size:clamp(36px,10vw,48px);letter-spacing:-1.8px;margin:15px 0 12px;}.hero p{font-size:12px;line-height:1.55;}.hero-art img{border-radius:14px;}.art-tag{font-size:8px;padding:6px 8px;}.mini-crystals{padding:6px 8px;}.mini-crystals span{font-size:9px;}.brand{font-size:14px;}.sound{font-size:11px;padding:7px 8px;}}
    @media(prefers-reduced-motion:reduce){.hero-art img{animation:none;}}