@import url("https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=Outfit:wght@400;500&display=swap");
.sx{--sx-i:var(--card);--sx-i2:var(--card);--sx-v:#8a5cf0;--sx-c:#e8415a;--sx-w:var(--ink);--sx-m:var(--mute);--sx-o:#d9791f;--sx-ln:var(--line)}
html[data-theme=dark] .sx{--sx-v:#a876ff;--sx-c:#ff5f76;--sx-o:#ff9d4d}
.sx-sec{margin-top:clamp(60px,9vw,130px)}
.sx-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:clamp(20px,5vw,80px);margin-bottom:clamp(22px,3vw,40px);align-items:start}
.sx-head h2{font-size:clamp(28px,3.4vw,52px);letter-spacing:-.04em;font-weight:500;line-height:1.05;margin-top:12px}
.sx-head p{color:var(--mute);max-width:56ch}
.spx{background:var(--sx-i);color:var(--sx-w);border-radius:var(--r);padding:clamp(16px,3vw,34px);font-family:"Outfit","Inter Tight",sans-serif;position:relative;overflow:hidden}
.spx svg{width:100%;height:auto;display:block}
.spx text{font-family:"Outfit","Inter Tight",sans-serif;fill:var(--sx-w)}
.spx .dsp{font-family:"Syne","Inter Tight",sans-serif;font-weight:800}
.spx .mut{fill:var(--sx-m)}
.sx-view{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(18px,3vw,40px);align-items:center}
.sx-fig{position:relative}
.sx-dual{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,32px)}
.sx-panel{min-width:0}
.sx-fig2{position:relative}
.sx-pcap{margin-top:10px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--sx-m);text-align:center}
.v3d-wrap{position:absolute;left:7.1429%;top:9.375%;width:61.905%;height:81.25%;border-radius:50%;overflow:hidden;background:#f2edfb}
.v3d-wrap canvas{width:100%;height:100%;display:block}
.sx-ctl2{margin-top:clamp(18px,2.6vw,30px);padding-top:clamp(18px,2.6vw,30px);border-top:1px solid var(--sx-ln)}
.sx-ctl2 label{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--sx-m);display:block;margin-bottom:10px}
.sx-ctl2 input[type=range]{width:100%;accent-color:var(--sx-c)}
.sx-ctl2 .sx-read{margin-top:14px}
.sx-ctl2 .sx-notes{margin-top:14px}
@media(max-width:640px){.sx-dual{grid-template-columns:1fr}}
.sx-ctl{display:flex;flex-direction:column;gap:18px}
.sx-ctl label{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--sx-m);display:block;margin-bottom:8px}
.sx-ctl input[type=range]{width:100%;accent-color:var(--sx-c)}
.sx-rng{display:flex;justify-content:space-between;font-size:12px;color:var(--sx-m);margin-top:4px}
.sx-btns{display:flex;flex-wrap:wrap;gap:8px}
.sx-b{font:500 14px/1 "Outfit",sans-serif;color:var(--sx-w);background:transparent;border:1px solid var(--sx-ln);border-radius:99px;padding:9px 15px;cursor:pointer;transition:background .2s,border-color .2s}
.sx-b:hover{border-color:var(--sx-w)}.sx-b.on{background:var(--sx-c);border-color:var(--sx-c);color:#fff}
.sx-read{font-size:15px;line-height:1.5;color:var(--sx-w)}
.sx-read b{color:var(--sx-o);font-weight:500}
.sx-notes{list-style:none;padding:0;display:grid;gap:8px;font-size:14px;color:var(--sx-m)}
.sx-notes li{padding-left:16px;position:relative}.sx-notes li:before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--sx-v)}
/* visual system */
.sx-banner{border-radius:var(--r);background:var(--sx-i) url(sph-marble.webp) center/cover;min-height:clamp(220px,32vw,420px);display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(20px,3.4vw,48px);color:#fff;overflow:hidden}
.sx-lock small{display:block;font:700 clamp(11px,1.3vw,16px)/1 "Syne",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#e8c36a;margin-bottom:10px}
.sx-lock b{display:block;font:800 clamp(34px,7.4vw,112px)/.92 "Syne",sans-serif;letter-spacing:-.02em;text-transform:uppercase;text-shadow:0 2px 24px rgba(29,22,67,.55)}
.sx-vs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.6vw,22px);margin-top:clamp(12px,1.6vw,22px)}
.sx-card{background:var(--sx-i);color:var(--sx-w);border-radius:var(--r);padding:clamp(18px,2.4vw,30px);font-family:"Outfit",sans-serif}
.sx-card h3{font:500 13px/1 "Outfit",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--sx-m);margin-bottom:18px}
.sx-sw{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.sx-sw div{border-radius:12px;aspect-ratio:3/4;display:flex;align-items:flex-end;padding:8px;font-size:12px;color:#fff;border:1px solid rgba(128,128,128,.22)}
.sx-sw .lt{color:var(--sx-i)}
.sx-type{display:flex;gap:26px;align-items:flex-end;flex-wrap:wrap}
.sx-type .a{font:800 clamp(60px,8vw,104px)/.9 "Syne",sans-serif;text-transform:uppercase}
.sx-type .b{font:400 clamp(44px,6vw,76px)/.9 "Outfit",sans-serif}
.sx-type p{font-size:13px;color:var(--sx-m);margin-top:14px;flex-basis:100%}
.sx-cs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:clamp(12px,1.6vw,22px)}
.sx-c{border-radius:18px;padding:18px;min-height:190px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;font-family:"Outfit",sans-serif;position:relative;overflow:hidden}
.sx-c i{font:800 14px/1 "Syne",sans-serif;font-style:normal;opacity:.7}
.sx-c b{font:800 clamp(18px,1.8vw,26px)/1 "Syne",sans-serif;text-transform:uppercase;display:block;margin-bottom:8px}
.sx-c span{font-size:13px;line-height:1.4;opacity:.88;display:block}
.sx-c.w{grid-column:span 1}
/* technique */
.sx-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(14px,2vw,24px)}
.sx-fig{min-width:0}
.sx-t-wrap{display:grid;gap:18px}
.sx-t-ctl{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center}
.sx-t-ctl .sx-rw{display:flex;align-items:center;gap:12px;flex:1 1 260px}
.sx-t-ctl .sx-rw label{margin:0;white-space:nowrap}
.sx-t-ctl input[type=range]{flex:1;accent-color:var(--sx-c)}
.sx-cap{font-size:clamp(15px,1.3vw,17px);line-height:1.5;min-height:3em;color:var(--sx-w);max-width:70ch}
.sx-cap em{font-style:normal;color:var(--sx-o)}
.sx-badge{display:inline-block;border:1.5px solid var(--sx-c);color:var(--sx-c);border-radius:6px;padding:4px 10px;font:800 12px/1 "Syne",sans-serif;letter-spacing:.1em;text-transform:uppercase;transform:rotate(-3deg);margin-left:10px;vertical-align:middle}
.spx svg .g{transition:opacity .35s}
@keyframes sx-tilt{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
.spx .sx-cube{animation:sx-tilt 3.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@media(prefers-reduced-motion:reduce){.spx .sx-cube{animation:none}}
.spx svg[data-step="1"] .g:not(.s1),.spx svg[data-step="2"] .g:not(.s2),.spx svg[data-step="3"] .g:not(.s3),.spx svg[data-step="4"] .g:not(.s4){opacity:.18}
/* learnings */
.sx-lr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,22px)}
.sx-l{background:var(--card);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.sx-l figure{aspect-ratio:16/10;background:#000;position:relative}
.sx-l figure video,.sx-l figure img{width:100%;height:100%;object-fit:cover}
.sx-l figcaption{position:absolute;left:14px;bottom:10px;font-size:12px;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.7)}
.sx-l div{padding:clamp(18px,2vw,26px)}
.sx-l .tag{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.sx-l h3{font-size:clamp(24px,2.2vw,32px);letter-spacing:-.03em;font-weight:500;margin:8px 0 10px}
.sx-l p{color:var(--mute);font-size:15px;line-height:1.55}
@media(max-width:900px){.sx-head,.sx-view,.sx-vs,.sx-lr{grid-template-columns:1fr}.sx-cs{grid-template-columns:repeat(2,minmax(0,1fr))}.sx-sw{grid-template-columns:repeat(5,1fr)}}
@media(max-width:520px){.sx-cs{grid-template-columns:1fr}.sx-c{min-height:130px}}
.sx-vs>*,.sx-view>*{min-width:0}
.sx-sw div{font-size:11px;overflow:hidden}
@media(max-width:700px){.sx-t-wrap .sx-fig{overflow-x:auto}.sx-t-wrap #t-svg{min-width:600px}.sx-sw div{font-size:9px;padding:5px}}
#sx-tech{max-width:1180px;margin:0 auto}
.spx:has(#sx-tech){padding:clamp(14px,2vw,24px)}
#sx-tech .sx-cap{font-size:16px;min-height:0}
#sx-tech .sx-b{font-size:14px;padding:9px 15px}
.sx-tabs .sx-b{position:relative;flex:none;white-space:nowrap}
.sx-tabs .sx-badge{position:absolute;top:-9px;right:-6px;margin:0;font-size:9px;padding:2px 6px;line-height:1.1;white-space:nowrap}