/* Standalone mobile demo. Header, scroll area and navigation never overlap. */
:root{color-scheme:dark;--bg:#101315;--surface:#1a1f22;--frame:#30383b;--text:#f1eee6;--hint:#a6adac;--gold:#d7bb80;--accent:#436b7b;--radius:17px;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:14px;background:#090c0e;color:var(--text)}
*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}button:disabled{opacity:.45;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--gold);outline-offset:3px}a{color:inherit;text-decoration:none}h1,h2,h3,p{margin:0}h1{font-size:29px;font-weight:550;letter-spacing:-.04em;line-height:1.14;margin:7px 0 13px}h2{font-size:18px;font-weight:550;letter-spacing:-.02em;margin:10px 0}h3{font-size:15px;font-weight:550;line-height:1.35}p{line-height:1.6;margin:9px 0}small{font-size:11px;line-height:1.5;color:var(--hint)}b{font-weight:600}
.shell{max-width:480px;height:100vh;height:100dvh;margin:auto;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto;background:var(--bg);border-inline:1px solid #202729}.demo{padding:7px 4px;text-align:center;background:#272b25;color:#d3d0b2;font-size:8px;letter-spacing:.09em}header{display:flex;align-items:center;gap:7px;padding:15px 12px;border-bottom:1px solid #293136}.brand{flex:1;text-align:center;font-size:13px;letter-spacing:.16em;font-weight:650}.brand span{display:block;font-size:8px;font-weight:400;letter-spacing:.035em;color:var(--hint);margin-top:5px}.icon{border:0;background:none;font-size:25px;min-width:36px;min-height:40px;position:relative}#badge{position:absolute;right:0;top:0;font-size:9px;min-width:16px;background:var(--accent);border-radius:10px;padding:2px}#screen{padding:20px 16px 28px;overflow:auto;min-width:0;min-height:0;outline:none;scrollbar-width:thin;scrollbar-color:#455359 transparent}#notice{font-size:12px;background:#263b40;padding:0 15px;color:#e1ece9;max-height:88px;overflow:auto}#notice:not(:empty){padding-block:10px}nav{display:grid;grid-template-columns:repeat(4,1fr);padding:6px 5px max(6px,env(safe-area-inset-bottom));border-top:1px solid var(--frame);background:#171d20}nav button{border:0;background:none;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;min-height:51px;font-size:10px;color:var(--hint)}nav span{font-size:23px;line-height:1}nav .active{color:var(--gold)}.eyebrow{font-size:9px;letter-spacing:.17em;color:var(--gold);font-weight:600;margin-top:5px}.muted{color:var(--hint);font-size:13px}.footnote{font-size:11px;color:var(--hint);margin-top:18px}.intro{position:relative;padding:9px 0 15px}.intro h1{font-size:40px;line-height:1.02;letter-spacing:-.05em;margin-top:13px}.intro h1 span{position:absolute;right:8px;top:28px;font-size:80px;font-weight:200;color:#bba37b;opacity:.8;filter:drop-shadow(0 0 17px #637b8850)}.intro p{font-size:12px;color:var(--hint);margin-top:15px}.segmented{display:flex;gap:4px;border:1px solid var(--frame);padding:4px;border-radius:13px;background:#171d20}.segmented button{flex:1;border:0;background:none;border-radius:9px;font-size:11px;padding:11px 5px;min-height:40px;white-space:nowrap}.segmented .selected{background:#34464e;color:#f0ece0}.filters{display:flex;gap:6px;overflow:auto;scrollbar-width:none;padding:13px 0 3px}.filters button{border:1px solid var(--frame);border-radius:24px;padding:8px 11px;min-height:36px;white-space:nowrap;background:none;color:var(--hint);font-size:11px}.filters .selected{background:#dac18b;color:#1b2224;border-color:#dac18b}.sectionline{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:18px 0 10px}.sectionline h2{font-size:17px;margin:0}.sectionline small{white-space:nowrap}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.card{position:relative;border:1px solid var(--frame);border-radius:var(--radius);overflow:hidden;background:var(--surface);min-width:0}.product-card{border:0;background:none;text-align:left;padding:0;width:100%;height:100%;display:flex;flex-direction:column}.card-info{padding:12px 11px 13px}.card-info small{font-size:8px;letter-spacing:.06em}.card-info h3{margin-top:6px;overflow-wrap:anywhere;font-size:14px;line-height:1.3}.card-info p{font-size:12px;margin:8px 0 0;color:#d8bd86}.heart{position:absolute;top:8px;right:8px;width:35px;height:35px;display:grid;place-items:center;border:1px solid #ffffff22;background:#172127bb;border-radius:50%;font-size:23px;color:#d8d6cc}.heart.on{color:var(--gold);background:#33413d}.art{--tone:#a0adb0;position:relative;width:100%;aspect-ratio:1.15;background:radial-gradient(ellipse at 50% 95%,#ffffff13,transparent 60%),linear-gradient(145deg,#1b2c31,#151b24);display:grid;place-items:center;overflow:hidden;isolation:isolate;border-bottom:1px solid #ffffff0b}.art::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 60%,var(--tone),transparent 68%);opacity:.13;z-index:-1}.orbit{width:65%;aspect-ratio:1;border:1px solid var(--tone);border-radius:50%;box-shadow:0 0 20px -10px var(--tone),inset 0 0 16px -12px var(--tone);transform:rotate(-28deg);position:absolute}.orbit::before,.orbit::after{content:"";position:absolute;inset:12%;border:1px solid var(--tone);opacity:.3;border-radius:42% 58% 52% 48%}.orbit::after{inset:-8%;border-style:dotted;opacity:.2}.symbol{font-family:Georgia,serif;font-size:63px;font-weight:400;line-height:1;color:var(--tone);text-shadow:0 0 21px #ffffff18}.art small{position:absolute;bottom:8px;font-size:6px;letter-spacing:.17em;color:var(--tone);opacity:.7}.art.earth{--tone:#bba176}.art.water,.art.balance{--tone:#80b1c9}.art.wind{--tone:#9fbdac}.art.fire,.art.radiance{--tone:#d6a485}.art.space,.art.all{--tone:#b3a1c8}.art.sang,.art.sponsor{--tone:#c8bb8b}.hero{aspect-ratio:1.65;border:1px solid var(--frame);border-radius:21px;margin-bottom:24px}.hero .orbit{width:47%}.hero .symbol{font-size:95px}.hero small{font-size:8px;bottom:13px}.callout{display:flex;gap:16px;border-block:1px solid var(--frame);margin:25px 0;padding:22px 0}.callout>span{font-size:40px;color:var(--gold);line-height:1.4}.callout h2{margin:0}.callout p{font-size:12px;color:var(--hint)}.sponsor-callout{border:1px solid #5b513e;background:linear-gradient(145deg,#2d2c26,#1b2223);border-radius:18px;padding:19px}.sponsor-callout h2{font-size:25px}.sponsor-callout p{color:#c2bda9;font-size:12px}.btn{border:1px solid transparent;border-radius:12px;padding:14px 13px;min-height:46px;display:block;width:100%;margin-top:10px;font-weight:550;font-size:13px}.primary{background:var(--accent);color:#fff}.secondary{background:var(--surface);border-color:var(--frame)}.link{background:none;color:var(--gold);padding:0;min-height:26px;text-align:left;margin:0;font-size:12px}.btn:active:not(:disabled){filter:brightness(1.2)}.panel{border:1px solid var(--frame);background:var(--surface);border-radius:var(--radius);padding:16px;margin:14px 0}.panel p:first-child{margin-top:0}.packs,.periods{display:flex;gap:8px;margin:13px 0 18px}.packs button,.periods button{flex:1;min-width:0;border:1px solid var(--frame);background:var(--surface);padding:12px 5px;border-radius:12px;display:flex;flex-direction:column;align-items:center;gap:5px;min-height:61px}.packs .selected,.periods .selected{background:#2a3f47;border-color:#779499}.packs small,.periods small{font-size:10px;color:var(--gold)}.price{font-size:30px;font-weight:550;letter-spacing:-.04em;margin:18px 0}.stock{font-size:12px;color:#b8c7af}.tag{display:inline-block;font-size:10px;color:#b8b9ba;margin-top:6px}.composition>div,.summary{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:8px 0;font-size:13px}.composition>div+div{border-top:1px solid var(--frame)}.composition .sum{color:var(--gold);padding-top:12px;margin-top:5px}.composition span{max-width:75%}.summary b{white-space:nowrap}.total{font-size:18px;padding-top:14px;margin-top:6px;border-top:1px solid var(--frame)}.field{display:flex;flex-direction:column;gap:8px;font-size:12px;color:#c0c7c6;margin:17px 0}.field input,.field select{width:100%;min-width:0;border:1px solid #465359;background:#171d21;color:var(--text);padding:13px;border-radius:10px;font-size:16px;min-height:46px}.consent{display:flex;align-items:flex-start;gap:10px;font-size:11px;line-height:1.6;margin:23px 0}.consent input{width:20px;height:20px;flex-shrink:0;accent-color:var(--accent)}.build-row,.cart-row{display:flex;gap:8px;justify-content:space-between;align-items:center;padding:13px 0}.build-row+.build-row,.cart-row+.cart-row{border-top:1px solid var(--frame)}.build-row>div:first-child{flex:1;min-width:0;font-size:12px}.build-row small{display:block;margin-top:5px}.stepper{display:flex;gap:5px;align-items:center;flex-shrink:0}.stepper button{border:1px solid var(--frame);background:#252f34;border-radius:9px;width:34px;height:36px;font-size:19px}.stepper b{font-size:12px;min-width:30px;text-align:center}.cart-row h3{font-size:14px}.cart-row .muted{font-size:11px;margin:7px 0}.cart-row>div:first-child{min-width:0}.line-controls{display:flex;flex-direction:column;align-items:flex-end;gap:16px}.remove{border:0;background:none;font-size:23px;color:#b6a29b;min-width:34px;min-height:34px}.empty{text-align:center;padding:45px 7px}.empty>span{font-family:Georgia,serif;font-size:70px;color:var(--gold)}.empty h2{font-size:23px}.empty .btn{margin-top:25px}.success-symbol{font-size:42px;color:#c1ccae;width:76px;height:76px;display:grid;place-items:center;border:1px solid #68775f;border-radius:50%;margin:22px 0}.pvz h2{margin-top:0}.order{margin-bottom:18px}.profile .btn:first-child{margin-top:0}ul{padding-left:19px;line-height:2.3;font-size:13px}@media(min-width:481px){.shell{box-shadow:0 0 80px #0009}}@media(max-width:370px){#screen{padding-inline:12px}.intro h1{font-size:37px}.build-row{gap:4px}.build-row b{font-size:11px}.stepper{gap:3px}.stepper button{width:32px}.stepper b{min-width:27px}}