:root{--bg:#f6f2e8;--card:#fffdf8;--ink:#17233a;--mute:#434d63;--navy:#16233b;--navy2:#1f3150;--onnavy:#f3ede0;--amb:#c4761d;--line:#ddd5c2;--sand:#efe6cf;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0f1829;--card:#172338;--ink:#ece6d8;--mute:#c9d1de;--navy:#0a1220;--navy2:#16233b;--amb:#e59a3d;--line:#2a3a56;--sand:#1d2c47}}
:root[data-theme="dark"]{--bg:#0f1829;--card:#172338;--ink:#ece6d8;--mute:#c9d1de;--navy:#0a1220;--navy2:#16233b;--amb:#e59a3d;--line:#2a3a56;--sand:#1d2c47}
html{scroll-padding-top:env(safe-area-inset-top,0px)}*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.65 "Hanken Grotesk",system-ui,sans-serif}
h1,h2,h3{font-family:"Bricolage Grotesque","Hanken Grotesk",sans-serif;line-height:1.1;margin:0 0 .5em;letter-spacing:-.015em}
h1{font-size:clamp(2.4rem,6vw,4.4rem);font-weight:800}h2{font-size:clamp(1.7rem,3.8vw,2.6rem);font-weight:800}h3{font-size:1.25rem;font-weight:600}
p{margin:0 0 1em;max-width:66ch}img{display:block;max-width:100%}
:focus-visible{outline:3px solid var(--amb);outline-offset:2px}
.wrap{max-width:1160px;margin:0 auto;padding:0 20px}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:9;background:var(--navy);color:var(--onnavy)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:66px}
.logo{display:flex;align-items:center;gap:10px;font:800 1.05rem "Bricolage Grotesque",sans-serif;text-decoration:none;color:inherit}
.logo img{height:38px;width:auto}.flogo{height:120px;width:auto;margin-bottom:14px}
nav{display:flex;gap:2px;flex-wrap:wrap}
nav a{padding:8px 11px;text-decoration:none;font-size:.93rem;color:#c3c9d6;border-radius:6px}
nav a[aria-current="page"]{color:#fff;box-shadow:inset 0 -2px var(--amb)}
@media(max-width:860px){.bar{flex-direction:column;align-items:flex-start;padding:10px 0}nav a{padding:6px 8px;font-size:.86rem}}
.pad{padding:64px 0}
.hero{background:var(--navy);color:var(--onnavy);overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center;padding-top:64px;padding-bottom:64px}
.hero p{color:#c3c9d6;font-size:1.15rem}
.hero .ph{border-radius:12px;aspect-ratio:4/3;object-fit:cover;width:100%;box-shadow:0 0 0 8px var(--navy2)}
@media(max-width:820px){.hero .wrap{grid-template-columns:1fr}}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.btn{display:inline-block;padding:13px 22px;border-radius:999px;font:700 1rem "Hanken Grotesk",sans-serif;text-decoration:none;border:2px solid var(--amb);background:var(--amb);color:#1d1204;cursor:pointer}
.btn.alt{background:transparent;color:inherit;border-color:currentColor}
.grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.card .b{padding:20px 22px 24px}.card img{width:100%;aspect-ratio:3/2;object-fit:cover}
.card ul,.list{padding-left:1.1em;margin:0 0 1em;color:var(--mute)}
.tag{display:inline-block;font-size:.8rem;font-weight:700;color:var(--amb);margin-bottom:6px}
.badge{display:inline-block;background:var(--amb);color:#1d1204;font-size:.78rem;font-weight:700;padding:2px 10px;border-radius:999px;margin-left:6px}
.split{display:grid;gap:36px;grid-template-columns:1.1fr 1fr;align-items:center}
@media(max-width:780px){.split{grid-template-columns:1fr}}
.photos{display:grid;gap:12px;grid-template-columns:repeat(3,1fr)}.photos img{width:100%;height:100%;min-height:160px;object-fit:cover;border-radius:12px;aspect-ratio:3/4}
.band{background:var(--navy);color:var(--onnavy);padding:64px 0}.band p{color:#c3c9d6}
.sand{background:var(--sand)}
.steps{counter-reset:s;list-style:none;padding:0;margin:0}
.steps li{counter-increment:s;display:grid;grid-template-columns:42px 1fr;gap:14px;padding:15px 0;border-top:1px solid var(--line)}
.steps li:before{content:counter(s);width:34px;height:34px;border-radius:50%;background:var(--navy);color:var(--onnavy);display:grid;place-items:center;font-weight:700}
.steps strong{display:block}.steps span{color:var(--mute)}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0}
.tabs button{font:600 .95rem "Hanken Grotesk",sans-serif;padding:8px 16px;border-radius:999px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer}
.tabs button[aria-pressed="true"]{background:var(--navy);color:var(--onnavy);border-color:var(--navy)}
.scroll{display:flex;gap:16px;overflow-x:auto;padding-bottom:12px;scroll-snap-type:x mandatory}
.scroll figure{margin:0;flex:0 0 min(300px,78%);scroll-snap-align:start;background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.scroll img{width:100%;aspect-ratio:4/3;object-fit:cover}.scroll figcaption{padding:12px 16px;font-size:.93rem;color:var(--mute)}.scroll figcaption b{display:block;color:var(--ink)}
.note{border-left:4px solid var(--amb);background:var(--card);padding:14px 18px;color:var(--mute);margin:22px 0;max-width:70ch;border-radius:0 8px 8px 0}
table{border-collapse:collapse;width:100%;font-size:.95rem}td,th{padding:8px 10px;border-top:1px solid var(--line);text-align:left}th{color:var(--mute);font-weight:500}
.tw{overflow-x:auto}
select{font:inherit;padding:11px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);max-width:100%}label{font-weight:700;display:block;margin-bottom:6px}
footer{background:var(--navy);color:#c3c9d6;padding:36px 0;font-size:.92rem}
.pg{display:none}.pg.on{display:block}

h1,h2{letter-spacing:-.035em}h1{font-size:clamp(2.6rem,7vw,5rem)}
.hero{position:relative}.hero .wrap{padding-top:72px;padding-bottom:72px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.chips span{border:1.5px solid #3a4c6e;border-radius:999px;padding:5px 14px;font-size:.88rem;color:#dfe5f0}
.chips span:first-child{background:var(--amb);border-color:var(--amb);color:#1d1204;font-weight:700}
.hero .ph{border-radius:28px;box-shadow:12px 12px 0 var(--amb);transform:rotate(1.2deg)}
.btn{box-shadow:0 4px 0 rgba(0,0,0,.28);transition:transform .15s,box-shadow .15s}.btn:hover{transform:translateY(2px);box-shadow:0 2px 0 rgba(0,0,0,.28)}
.card{border-radius:24px;border-width:1.5px}
.photos img{border-radius:20px}
.band .photos img:nth-child(2){transform:translateY(18px)}
.tag,.badge{font-weight:800}.badge{background:#ffd27a;border:1.5px solid var(--navy)}
.bento{grid-template-columns:repeat(6,1fr)}
.bento a:nth-child(1),.bento a:nth-child(4){grid-column:span 4}.bento a:nth-child(2),.bento a:nth-child(3){grid-column:span 2}
.bento a:nth-child(1) img,.bento a:nth-child(4) img{aspect-ratio:16/9}
.bento a{transition:transform .2s}.bento a:hover{transform:translateY(-4px)}
@media(max-width:780px){.bento a{grid-column:span 6!important}}
.mq{background:var(--amb);color:#1d1204;overflow:hidden;white-space:nowrap;font:800 1.05rem "Bricolage Grotesque",sans-serif;padding:12px 0}
.mq div{display:inline-block;animation:mq 38s linear infinite}.mq span{margin:0 22px}
@keyframes mq{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.mq div{animation:none}.btn{transition:none}.hero .ph{transform:none}}
.wa{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:20;background:#25d366;color:#06240f;font:800 .95rem "Hanken Grotesk",sans-serif;text-decoration:none;padding:12px 18px;border-radius:999px;box-shadow:0 6px 18px rgba(0,0,0,.3)}
.sand h2,.pad h2{max-width:20ch}

.lang{font:700 .9rem "IBM Plex Sans Arabic","Hanken Grotesk",sans-serif;background:transparent;color:var(--onnavy);border:1.5px solid #3a4c6e;border-radius:999px;padding:6px 16px;cursor:pointer}
a[href^="mailto"],a[href*="wa.me/628"]{unicode-bidi:isolate}
[lang="ar"] body,[lang="ar"] h1,[lang="ar"] h2,[lang="ar"] h3,[lang="ar"] .btn,[lang="ar"] .mq,[lang="ar"] .wa,[lang="ar"] .tabs button,[lang="ar"] .logo{font-family:"IBM Plex Sans Arabic","Hanken Grotesk",sans-serif}
[lang="ar"] h1,[lang="ar"] h2{letter-spacing:0;line-height:1.3}[lang="ar"] body{line-height:1.85}
[dir="rtl"] .card ul,[dir="rtl"] .list{padding-left:0;padding-right:1.2em}
[dir="rtl"] .note{border-left:0;border-right:4px solid var(--amb);border-radius:8px 0 0 8px}
[dir="rtl"] td,[dir="rtl"] th{text-align:right}
[dir="rtl"] .wa{right:auto;left:16px}
[dir="rtl"] .hero .ph{transform:rotate(-1.2deg);box-shadow:-12px 12px 0 var(--amb)}
.mq{direction:ltr}

a{color:inherit}
main p a,.card .b p a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
a.card,a.card h3,a.card p,a.card strong{color:var(--ink)}a.card p{color:var(--mute)}
a.card strong{display:inline-block;margin-top:6px;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;text-decoration-color:var(--amb)}
body{font-size:19px;line-height:1.7}
nav a{font-size:1.02rem;color:#e6eaf2;padding:9px 12px}
.logo{font-size:1.15rem}
.chips span{font-size:1rem;color:#eef1f7}
.hero p,.band p,footer{color:#e3e8f0}.hero p{font-size:1.3rem}
h2{font-size:clamp(1.9rem,4vw,2.8rem)}h3,.card h3{font-size:1.5rem;line-height:1.2}
.card .b{padding:24px 26px 28px}.card ul,.list{font-size:1.05rem}.list{font-size:1.15rem}
.card p,.card li{color:var(--mute)}
.tag{font-size:.95rem}.badge{font-size:.9rem;padding:3px 12px}
.btn,.tabs button,.lang{font-size:1.05rem}.btn{padding:15px 26px}
.tabs button{padding:10px 18px}
.scroll figcaption{font-size:1.05rem;color:var(--mute)}.scroll figcaption b{font-size:1.1rem}
.steps li{font-size:1.05rem}.steps span{color:var(--mute)}
table{font-size:1.1rem}th{color:var(--mute)}
.note{font-size:1.05rem}.wa{font-size:1.05rem;padding:14px 20px}
.mq{font-size:1.2rem}
.bento{align-items:start}
@media(max-width:600px){body{font-size:18px}h1{font-size:2.4rem}}

.lang{background:var(--navy);color:var(--onnavy)}.lang option{color:#17233a;background:#fff}
[lang="zh"] body,[lang="zh"] h1,[lang="zh"] h2,[lang="zh"] h3,[lang="zh"] .btn,[lang="zh"] .mq,[lang="zh"] .wa,[lang="zh"] .tabs button,[lang="zh"] .logo{font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif}
[lang="zh"] h1,[lang="zh"] h2{letter-spacing:0;line-height:1.3}[lang="zh"] p{max-width:44em}

.strip{display:flex;gap:8px;overflow-x:auto;padding:6px 0 10px;margin-top:22px}
.strip button{flex:0 0 auto;font:700 .95rem "Hanken Grotesk",sans-serif;border:1.5px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:9px 16px;cursor:pointer;white-space:nowrap}
.stage{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center;padding:44px 0;border-top:1px solid var(--line)}
.stage:nth-child(even) .sv{order:-1}
.stage .n{display:flex;align-items:center;gap:12px;margin-bottom:10px}.stage .n svg{width:44px;height:44px;padding:9px;border-radius:50%;background:var(--navy);stroke:var(--onnavy);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.stage .n span{font:800 1.1rem "Bricolage Grotesque",sans-serif;color:var(--amb)}
.stage.hl{border:2px solid var(--amb);border-radius:28px;padding:32px;margin:14px 0;background:var(--card)}
.stage .sv img,.phb{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:20px}
.phb{display:grid;place-items:center;text-align:center;padding:20px;background:var(--sand);border:2px dashed var(--line);color:var(--mute);font-size:1rem}
.stage .sub{font-weight:700;font-size:1.2rem;color:var(--ink);margin:0 0 .6em}
@media(max-width:780px){.stage{grid-template-columns:1fr}.stage:nth-child(even) .sv{order:0}.stage.hl{padding:22px}}
.docs{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));margin:24px 0}
.doc{background:#fff;border:1px solid #cdd5e0;border-radius:8px;aspect-ratio:3/4;padding:14px;position:relative;overflow:hidden;box-shadow:0 8px 18px rgba(0,0,0,.18)}
.doc i{display:block;height:7px;background:#dde3ec;border-radius:3px;margin:7px 0}.doc i:nth-child(3n){width:70%}.doc i.h{height:12px;width:55%;background:#16233b}
.doc u{position:absolute;inset:0;display:grid;place-items:center;font:800 1.7rem "Bricolage Grotesque",sans-serif;color:rgba(22,35,59,.1);transform:rotate(-24deg);text-decoration:none;letter-spacing:.1em}
.dc h3{font-size:1.15rem;margin:12px 0 4px}.dc p{font-size:1rem;color:var(--mute);margin:0}

@media(max-width:860px){.bar{flex-direction:row;flex-wrap:wrap;align-items:center;padding:8px 0;min-height:0}nav{order:3;flex:0 0 100%;flex-wrap:nowrap;overflow-x:auto;margin:0 -4px}nav a{white-space:nowrap}.lang{margin-left:auto}}
@media(max-width:600px){.photos{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px}.photos img{flex:0 0 72%;scroll-snap-align:start;aspect-ratio:4/3;min-height:0;height:auto}.wa{font-size:.95rem;padding:11px 16px}}
@media(max-width:600px){.logo{font-size:.98rem;gap:8px}.logo img{height:32px}.lang{padding:6px 8px;font-size:.88rem;max-width:104px}}

.kiln{margin:36px 0}.vids{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px}
.vids figure{margin:0;flex:0 0 min(260px,72%);scroll-snap-align:start;background:var(--card);border:1.5px solid var(--line);border-radius:20px;overflow:hidden}
.vids video{width:100%;aspect-ratio:9/16;object-fit:cover;background:#000;display:block}.vids figcaption{padding:12px 14px;font-size:1.02rem;color:var(--mute)}
@media(min-width:900px){.vids{overflow:visible}.vids figure{flex:1 1 0}}
.st-cur{background:var(--amb);color:#1d1204}.st-dev{background:transparent;border:2px solid var(--amb);color:var(--ink)}.st-plan{background:transparent;border:2px dashed var(--line);color:var(--mute)}.logo{white-space:nowrap;flex:none}@media(min-width:1180px){nav{flex-wrap:nowrap}nav a{padding:9px 8px;font-size:.98rem}}

.fgrid{display:grid;gap:14px;margin-top:16px}.fgrid[hidden],#shaperow[hidden],#tabs2[hidden]{display:none}
input,textarea,select{font:inherit;width:100%;padding:11px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink)}
.meta{margin:0 0 1em;display:grid;gap:8px}.meta div{display:grid;grid-template-columns:122px 1fr;gap:10px;font-size:1rem}.meta dt{font-weight:700}.meta dd{margin:0;color:var(--mute)}
.ill{aspect-ratio:3/2;background:var(--sand);display:grid;place-items:center;position:relative}.ill svg{width:60%;height:auto}.ill small{position:absolute;right:12px;bottom:8px;font-size:.85rem;color:var(--mute)}
.specs{margin:36px 0}.pack{margin:32px 0;padding:26px;border:1.5px solid var(--line);border-radius:24px;background:var(--card)}
.detail .btn.alt{color:var(--ink)}.tpic .ill,.tpic img{height:100%;min-height:220px;aspect-ratio:auto;object-fit:cover}#phead[hidden],#plist[hidden],#tabs[hidden]{display:none}

.shapes{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));margin:22px 0 10px}.shapes figure{margin:0;background:var(--card);border:1.5px solid var(--line);border-radius:18px;overflow:hidden}.shapes .ill{aspect-ratio:3/2}.shapes figcaption{padding:10px 12px;font-size:1rem;font-weight:700}
.mini{background:var(--bg);border:1.5px solid var(--line);border-radius:16px;padding:16px}.mini h3{font-size:1.15rem;margin:0 0 6px}.mini p{margin:0;font-size:1rem;color:var(--mute)}
details{border-top:1px solid var(--line);padding:12px 0}details summary{cursor:pointer;font-weight:700;font-size:1.1rem}details p{margin:10px 0 0;color:var(--mute)}
.shapes .ill svg{width:88%}
.fam{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin:14px 0}.fam button{text-align:start;font:inherit;padding:18px 20px;border-radius:20px;border:2px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;display:grid;gap:4px}.fam button span{color:var(--mute);font-size:1rem}.fam button strong{font-size:1.2rem}.fam button[aria-pressed="true"]{border-color:var(--amb);box-shadow:0 0 0 3px rgba(196,118,29,.28)}
.shapechips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0 0 12px}.shapechips li{border:1.5px solid var(--line);background:var(--card);border-radius:999px;padding:6px 14px;font-size:1rem}
.lang{font-size:.82rem;padding:3px 6px;max-width:92px;border-width:1px;border-radius:999px;line-height:1.3}
@media(max-width:600px){.lang{max-width:84px;padding:3px 4px;font-size:.8rem}}
.glabel{margin:14px 0 0;font-weight:700;color:var(--mute)}
.hero h1{font-size:clamp(2.2rem,5vw,3.7rem);letter-spacing:-.025em}

:root{--bd:#16233b;--pop:#ff6b35;--sun:#ffd23f;--ctaink:#16233b}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bd:#4a608d;--sun:#3a2f0b;--ctaink:#ffe9a8}}
:root[data-theme="dark"]{--bd:#4a608d;--sun:#3a2f0b;--ctaink:#ffe9a8}
.hero{background-image:radial-gradient(rgba(255,255,255,.08) 1.5px,transparent 1.5px);background-size:22px 22px}
.hero h1{font-weight:800;font-size:clamp(2.4rem,5.4vw,4.2rem);letter-spacing:-.03em;line-height:1.02}
h2{font-size:clamp(2rem,4.2vw,3rem);letter-spacing:-.03em}
.heroimg{position:relative}.heroimg .ph{display:block}
.spin{position:absolute;top:-30px;right:-18px;width:116px;height:116px;animation:spin 26s linear infinite;filter:drop-shadow(3px 3px 0 rgba(0,0,0,.35))}
@keyframes spin{to{transform:rotate(360deg)}}
.stk{position:absolute;left:-12px;bottom:26px;background:var(--sun);color:#16233b;border:2px solid #16233b;border-radius:14px;padding:9px 16px;font:800 1.05rem "Bricolage Grotesque","Hanken Grotesk",sans-serif;transform:rotate(-4deg);box-shadow:4px 4px 0 #16233b}
@media(max-width:820px){.spin{right:-6px;top:-24px;width:96px;height:96px}.stk{left:-6px}}
.card,.pack,.mini,.fam button,.stage.hl{border:2px solid var(--bd)}
.card{border-radius:22px;box-shadow:5px 5px 0 var(--bd);transition:transform .15s,box-shadow .15s}.pack{box-shadow:5px 5px 0 var(--bd)}
a.card:hover,.bento a:hover{transform:translate(-2px,-2px) rotate(-.6deg);box-shadow:8px 8px 0 var(--bd)}
.card h3,a.card h3{font-weight:800}
.btn{border:2px solid var(--bd);box-shadow:4px 4px 0 var(--bd);font-weight:800}.btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--bd)}
.btn.alt{background:var(--card);color:var(--ink);border-color:var(--bd)}
.hero .btn,.band .btn,footer .btn{border-color:var(--onnavy);box-shadow:4px 4px 0 var(--onnavy)}
.hero .btn.alt,.band .btn.alt,footer .btn.alt{background:transparent;color:var(--onnavy);box-shadow:4px 4px 0 var(--amb)}
.detail .btn.alt{color:var(--ink)}
.tabs button,.strip button{border:2px solid var(--bd);font-weight:800}
.tabs button[aria-pressed="true"]{background:var(--amb);color:#1d1204;box-shadow:3px 3px 0 var(--bd)}
.badge{border:2px solid var(--bd);background:var(--sun);color:#16233b}
.mqw{overflow:hidden;padding:20px 0}
.mq{transform:rotate(-1.4deg);width:104%;margin-left:-2%;border-block:2px solid var(--bd);font-size:1.3rem;padding:14px 0}
.kiln3{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin:24px 0 16px}
.kiln3 div{border:2px solid var(--bd);border-radius:22px;padding:22px 24px;box-shadow:5px 5px 0 var(--bd)}
.kiln3 b{display:block;font:800 clamp(3.2rem,8vw,5rem)/1 "Bricolage Grotesque","Hanken Grotesk",sans-serif;letter-spacing:-.04em}.kiln3 span{font-weight:800;font-size:1.15rem}
.kiln3 .k1{background:var(--sun);color:#16233b}.kiln3 .k2{background:var(--amb);color:#1d1204}.kiln3 .k3{background:var(--navy);color:var(--onnavy)}
.cta{background:var(--sun);color:var(--ctaink);border-block:2px solid var(--bd)}.cta h2{font-size:clamp(2.2rem,5.4vw,3.8rem);max-width:16ch}.cta p{color:var(--ctaink)}.cta .btn.alt{background:transparent;color:var(--ctaink);border-color:var(--ctaink)}
@media(prefers-reduced-motion:reduce){.spin{animation:none}.btn,.card{transition:none}}
.kiln3 div{min-width:0}.kiln3 b{font-size:clamp(3rem,6.2vw,4.3rem)}

:root{--g:#3ddc97;--sk:#7cc6ff;--lil:#b9a4ff;--pk:#ff8fb1}
.badge{background:var(--sun-b,#ffd23f);color:#16233b;border:2px solid var(--bd);font-size:.98rem;padding:4px 14px;font-weight:800}
.badge.st-cur{background:var(--g)}.badge.st-dev{background:var(--pop);color:#16233b}
.grid>.card:nth-child(3)>.b>.st-plan{background:var(--lil);border:2px solid var(--bd);color:#16233b}
.grid>.card:nth-child(4)>.b>.st-plan{background:var(--sk);border:2px solid var(--bd);color:#16233b}
#st2 .badge{background:var(--g)}#st3 .badge{background:var(--pop)}
.stage .n svg{stroke:#16233b;border:2px solid var(--bd)}
#st0 .n svg{background:#ffd23f}#st1 .n svg{background:var(--sk)}#st2 .n svg{background:var(--g)}#st3 .n svg{background:var(--pop)}#st4 .n svg{background:var(--lil)}#st5 .n svg{background:var(--sk)}#st6 .n svg{background:var(--pk)}
.stage .n span:not(.badge){color:var(--ink)}
.kiln3 .k1{background:var(--g);color:#16233b}.kiln3 .k2{background:#ffd23f;color:#16233b}.kiln3 .k3{background:var(--pop);color:#16233b}
a.card,#plist .card,.shapechips li{box-shadow:5px 5px 0 var(--c,var(--bd))}
a.card:hover{box-shadow:8px 8px 0 var(--c,var(--bd))}
.bento a:nth-child(1){--c:#ffd23f}.bento a:nth-child(2){--c:var(--pop)}.bento a:nth-child(3){--c:var(--g)}.bento a:nth-child(4){--c:var(--sk)}
#plist .card:nth-child(6n+1){--c:#ffd23f}#plist .card:nth-child(6n+2){--c:var(--pop)}#plist .card:nth-child(6n+3){--c:var(--g)}#plist .card:nth-child(6n+4){--c:var(--sk)}#plist .card:nth-child(6n+5){--c:var(--lil)}#plist .card:nth-child(6n+6){--c:var(--pk)}
.sand a.card:nth-child(1){--c:var(--pop)}.sand a.card:nth-child(2){--c:#ffd23f}
.tabs button[aria-pressed="true"],.strip button:hover{background:var(--pop);color:#16233b}
.fam button[aria-pressed="true"]{border-color:var(--bd);background:#ffd23f;color:#16233b;box-shadow:4px 4px 0 var(--bd)}.fam button[aria-pressed="true"] span{color:#16233b}
.mq{background:var(--pop);color:#16233b}
.tag{color:var(--pop);font-weight:800}

#home section,.band,.cta{position:relative;overflow:hidden}
#home section>.wrap{position:relative;z-index:1}
.deco{position:absolute;inset:0;pointer-events:none;z-index:0}.deco span{position:absolute;display:block}
.deco svg{display:block;width:100%;height:auto;filter:drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(5px 5px 0 rgba(0,0,0,.28))}
.hero h1,h2{font-family:"Lilita One","Bricolage Grotesque",sans-serif;font-weight:400;letter-spacing:.01em}
.hero h1{color:#ffd23f;-webkit-text-stroke:2px #0b0b0b;paint-order:stroke fill;text-shadow:4px 4px 0 var(--pop);font-size:clamp(2.4rem,5.4vw,4.1rem);line-height:1.06}
[lang="ar"] .hero h1,[lang="ar"] h2{font-family:"IBM Plex Sans Arabic",sans-serif;font-weight:700;-webkit-text-stroke:0}
[lang="zh"] .hero h1,[lang="zh"] h2{font-family:"Noto Sans SC",sans-serif;font-weight:700;-webkit-text-stroke:0}
nav a+a{border-left:2px dotted rgba(255,255,255,.28);border-radius:0}
@media(prefers-reduced-motion:reduce){.deco{display:block}}
h2{-webkit-text-stroke:.7px currentColor}[lang="ar"] h2,[lang="zh"] h2{-webkit-text-stroke:0}

nav a+a{border-left:0;position:relative}
nav a{padding:9px 13px}
nav a+a::before{content:"";position:absolute;left:-3px;top:50%;width:7px;height:22px;transform:translateY(-50%);background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 22'><path d='M3.5 1 Q0.5 5 3.5 9 T3.5 16 T3.5 21' fill='none' stroke='%23ffffff' stroke-opacity='.5' stroke-width='1.7' stroke-linecap='round'/></svg>") no-repeat center/contain}
@media(max-width:1179px){.bar{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:10px 0;min-height:0}
nav{order:3;flex:0 0 100%;flex-wrap:nowrap;overflow-x:auto;margin:2px -4px 0;padding-bottom:2px}nav a{white-space:nowrap}nav a:first-child{margin-left:auto}nav a:last-child{margin-right:auto}}
@media(min-width:1180px){nav a{padding:9px 11px}}
@media(max-width:1179px){.bar{padding:10px 20px!important}}

nav a+a::before{width:0;height:18px;background:none;border-left:1.5px solid rgba(255,255,255,.32);left:-1px}

.hero h1,h2{font-family:"Bricolage Grotesque","Hanken Grotesk",sans-serif;font-weight:800;letter-spacing:-.03em;-webkit-text-stroke:0}
.hero h1{color:var(--onnavy);text-shadow:none;paint-order:normal;font-size:clamp(2.4rem,5.2vw,4rem);line-height:1.04}
[lang="ar"] .hero h1,[lang="ar"] h2{font-family:"IBM Plex Sans Arabic",sans-serif;font-weight:700;letter-spacing:0}
[lang="zh"] .hero h1,[lang="zh"] h2{font-family:"Noto Sans SC",sans-serif;font-weight:700;letter-spacing:0}

@media(max-width:1099px){
.deco{position:static;inset:auto;display:flex;justify-content:space-between;align-items:flex-end;gap:10px;padding:20px 24px 0;margin-bottom:14px}
.deco span{position:static;width:54px!important;flex:none}
.deco span:only-child{margin-left:auto}
}

.pg{position:relative;overflow:hidden}
.pg section>.wrap,.pg>.wrap{position:relative;z-index:1}
.stkr{display:block}.stkr svg{display:block;width:100%;height:auto;filter:drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(5px 5px 0 rgba(0,0,0,.28))}
.deco{display:none!important}
.srow{display:none}
@media(max-width:1399px){.srow{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;padding:20px 24px 0;margin-bottom:14px}.srow .stkr{width:54px;flex:none}.srow .stkr:only-child{margin-left:auto}}
.sfl{display:none;position:absolute;inset:0;pointer-events:none;z-index:2}
@media(min-width:1400px){.sfl{display:block}.sfl .stkr{position:absolute;width:92px}}
#plist .card{position:relative}.badge.own{position:absolute;top:14px;inset-inline-start:14px;z-index:2;margin:0;transform:rotate(-3deg);box-shadow:3px 3px 0 var(--bd)}

/* Layout refinements (Oct 2026 feedback): image proportions, calmer ticker, mobile spacing, CTA hierarchy */
.hero .ph{height:auto}
.btn{text-align:center;line-height:1.25}
.mqw{padding:0}
.mq{transform:none;width:auto;margin-left:0;font-size:1.05rem;padding:10px 0;letter-spacing:.01em}
.mq div{animation-duration:64s}.mq span{margin:0 16px}.mq span:nth-child(even){opacity:.55;font-size:.7em}
.mqw:hover .mq div{animation-play-state:paused}
@media(max-width:1399px){.pg section~section .srow,.pg section section .srow{display:none}.srow{padding:14px 20px 0;margin-bottom:4px}.srow .stkr{width:44px}}
@media(max-width:1179px){nav{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);scrollbar-width:thin}
[dir="rtl"] nav{-webkit-mask-image:linear-gradient(270deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(270deg,#000 calc(100% - 36px),transparent)}}
/* Floating button (class kept as .wa) now opens the Contact page, where buyers choose email or WhatsApp */
.wa{background:var(--amb);color:#1d1204;border:2px solid var(--bd);box-shadow:4px 4px 0 var(--bd)}
.wa:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--bd)}
body:has(#contact.on) .wa{display:none}
@media(max-width:600px){
.pad,.band{padding:48px 0}.hero .wrap{padding-top:36px;padding-bottom:48px;gap:32px}
.hero p{font-size:1.12rem}.hero .ph{box-shadow:8px 8px 0 var(--amb)}[dir="rtl"] .hero .ph{box-shadow:-8px 8px 0 var(--amb)}
.btns .btn{flex:1 1 100%}
.card .b{padding:20px 20px 24px}
#tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px}#tabs button:first-child{grid-column:1/-1}#tabs button{padding:9px 10px;font-size:.95rem;line-height:1.2}
.detail .tabs button{padding:7px 12px;font-size:.95rem}
.vids figure{flex-basis:min(220px,62%)}
.wa{font-size:.9rem;padding:9px 14px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px))}[dir="rtl"] .wa{right:auto;left:12px}
footer{padding-bottom:84px}
}