/* LK Studio JP — home (v2), B3 and LK Sans pages. Loaded only on those pages, after site.css.
   @bs[n,colour] is expanded at build time into n solid box-shadow layers along 35° (step = var(--bs)). */
@property --hole{syntax:"<length>";inherits:false;initial-value:0px}
@property --sxa{syntax:"<number>";inherits:true;initial-value:1}
@property --tl{syntax:"<length>";inherits:false;initial-value:0px}
:root{--sx-ease:cubic-bezier(.2,.8,.2,1);--sx-emph:cubic-bezier(.7,0,.2,1);--sx-pop:cubic-bezier(.3,1.5,.45,1);--sx-ink:#3a1c40}
[data-page=home] body,[data-page=b3] body{background:#ffcc66}
[data-page=lk-sans] body{background:#fff4e2}
[data-page=home] main,[data-page=b3] main,[data-page=lk-sans] main{color:var(--sx-ink)}
.sx{position:relative}
.sx-bg{position:fixed;inset:0;z-index:-1;background:#ffcc66;pointer-events:none}
[data-page=lk-sans] .sx-bg{background:#fff4e2}
.sx svg{overflow:visible}
.sx-eyebrow{font-weight:700;font-size:14px;letter-spacing:.02em;margin-bottom:18px;opacity:.85}
[data-lang=en] .sx h1,[data-lang=en] .sx h2,[data-lang=en] .sx h3{hyphens:manual;overflow-wrap:break-word}
.sx h1,.sx h2,.sx h3{text-wrap:balance}
:lang(ja) .sx h2,:lang(zh-Hans) .sx h2,:lang(ja) .sx h3,:lang(zh-Hans) .sx h3{word-break:auto-phrase}

/* ---------- buttons, chips: Material shapes, B3 shadows */
.sx-btn{--bs:1px;position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:10px;min-height:56px;padding:0 24px 0 28px;border-radius:28px;
  background:#fff4e2;color:#3a1c40;font-weight:700;font-size:16px;line-height:1.2;text-decoration:none;border:0;cursor:pointer;
  box-shadow:calc(var(--bs)*0.819) calc(var(--bs)*0.574) 0 #3a1c40,calc(var(--bs)*1.638) calc(var(--bs)*1.147) 0 #3a1c40,calc(var(--bs)*2.457) calc(var(--bs)*1.721) 0 #3a1c40,calc(var(--bs)*3.277) calc(var(--bs)*2.294) 0 #3a1c40,calc(var(--bs)*4.096) calc(var(--bs)*2.868) 0 #3a1c40;transition:--bs 320ms var(--ease),transform 320ms var(--ease)}
.sx-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.sx-btn:hover{--bs:1.6px;transform:translate(-1px,-.7px)}
.sx-btn:active{--bs:.3px;transform:translate(3px,2px);transition-duration:90ms}
.sx-btn-tonal{--bs:0px;background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}
.sx-btn-tonal:hover{--bs:0px;background:color-mix(in srgb,currentColor 10%,transparent);transform:none}
.sx-btn:focus-visible,.sx-tile:focus-visible,.dtile:focus-visible,.tl-link:focus-visible,.seg2 button:focus-visible,.wt:focus-visible,.sw:focus-visible{outline:3px solid currentColor;outline-offset:4px}
.tile-go{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px;height:40px;padding:0 16px;border-radius:20px;background:color-mix(in srgb,currentColor 12%,transparent);width:max-content}
.tile-go svg,.tl-link svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform 320ms var(--sx-ease)}
a:hover>.tile-go svg,a:hover .tile-go svg,.tl-link:hover svg{transform:translateX(4px)}
.sx-rp{position:absolute;left:var(--x);top:var(--y);width:16px;height:16px;margin:-8px;border-radius:50%;background:currentColor;opacity:.22;pointer-events:none;animation:sx-rp 560ms var(--sx-ease) forwards}
@keyframes sx-rp{to{transform:scale(var(--s,24));opacity:0}}

/* ---------- hero: one spark of light, then the world lights up */
.sx-hero{--sx-x:24%;--sx-y:30%;position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;overflow:clip;color:#3a1c40;isolation:isolate}
.sx-night{display:none;position:absolute;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(90% 80% at var(--sx-x) var(--sx-y),#24306a 0%,#141a40 45%,#0b1030 100%);
  -webkit-mask:radial-gradient(circle at var(--sx-x) var(--sx-y),transparent var(--hole),#000 calc(var(--hole) + 1px));
  mask:radial-gradient(circle at var(--sx-x) var(--sx-y),transparent var(--hole),#000 calc(var(--hole) + 1px))}
.js .sx-night{display:block}
.sx-lit .sx-night{--hole:170vmax;transition:--hole 1500ms cubic-bezier(.65,0,.25,1)}
.sx-done .sx-night,.sx-quick .sx-night{display:none}
.sx-spark{position:absolute;left:var(--sx-x);top:var(--sx-y);width:12px;height:12px;margin:-6px;border-radius:50%;background:#ffcc66;transform:scale(0)}
.sx-spark::before,.sx-spark::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:1.5px solid #ffcc66;opacity:0}
.js .sx-spark{animation:sx-spark 900ms var(--sx-pop) 250ms forwards}
.js .sx-spark::before{animation:sx-ring 1600ms var(--sx-ease) 700ms infinite}
.js .sx-spark::after{animation:sx-ring 1600ms var(--sx-ease) 1500ms infinite}
@keyframes sx-spark{60%{transform:scale(1.8)}to{transform:scale(1)}}
@keyframes sx-ring{0%{transform:scale(1);opacity:.9}to{transform:scale(9);opacity:0}}
.sx-mark{position:absolute;z-index:0;right:clamp(16px,8vw,150px);top:clamp(92px,15vh,180px);width:clamp(150px,25vw,400px);height:auto;
  transform:translate3d(0,calc(var(--hp,0) * -8vh),0)}
.sx-mark .mk-sh{fill:#3a1c40}
.sx-mark .mk-lit{fill:#fff4e2}
.js .sx-mark .mk-lit{opacity:0;transition:opacity 320ms var(--ease) 650ms}
.sx-lit .sx-mark .mk-lit{opacity:1}
.sx-quick .sx-mark .mk-lit{transition-delay:120ms}
.sx-hero-in{position:relative;z-index:1;width:100%;max-width:1320px;margin:0 auto;padding:0 var(--gutter) clamp(48px,10vh,112px);
  transform:translate3d(0,calc(var(--hp,0) * 14vh),0);opacity:calc(1 - var(--hp,0) * .9)}
.sx-slogan{margin:0 0 clamp(20px,3vh,32px);font-weight:900;color:#3a1c40;letter-spacing:-.01em;line-height:1.02;font-size:clamp(64px,10.5vw,188px);max-width:min(60vw,1000px)}
:lang(ja) .sx-slogan{font-size:clamp(46px,7.6vw,138px)}
[data-lang=en] .sx-slogan{font-size:clamp(44px,7.4vw,132px);line-height:.98;letter-spacing:-.025em}
.sl-line{display:block;overflow:clip;padding-bottom:.1em;margin-bottom:-.1em;white-space:nowrap}
.sl-line>span{display:inline-block}
.js .sx-slogan .sl-line>span{transform:translate3d(0,108%,0) rotate(4deg);transform-origin:0 100%}
.sx-lit .sx-slogan .sl-line>span{transform:none;transition:transform 1000ms var(--sx-ease) calc(780ms + var(--n) * 110ms)}
.sx-intro{text-wrap:pretty;max-width:30em;font-size:clamp(16px,1.3vw,20px);line-height:1.75}
[data-lang=en] .sx-intro{line-height:1.55}
.sx-ctas{display:flex;flex-wrap:wrap;gap:14px 18px;margin-top:clamp(22px,3.4vh,36px)}
.js .sx-hero .sx-eyebrow,.js .sx-intro,.js .sx-ctas{opacity:0;transform:translate3d(0,24px,0)}
.sx-lit .sx-hero .sx-eyebrow,.sx-lit .sx-intro,.sx-lit .sx-ctas{opacity:1;transform:none;transition:opacity 700ms var(--sx-ease),transform 900ms var(--sx-ease)}
.sx-lit .sx-hero .sx-eyebrow{transition-delay:700ms}.sx-lit .sx-intro{transition-delay:1100ms}.sx-lit .sx-ctas{transition-delay:1250ms}
.sx-quick .sx-slogan .sl-line>span{transition-delay:calc(80ms + var(--n) * 90ms)!important}
.sx-quick .sx-hero .sx-eyebrow{transition-delay:40ms!important}.sx-quick .sx-intro{transition-delay:300ms!important}.sx-quick .sx-ctas{transition-delay:420ms!important}
@media (max-width:760px){
  .sx-hero{--sx-x:22%;--sx-y:20%}
  .sx-mark{top:84px;right:20px;width:min(40vw,190px)}
  .sx-slogan{max-width:none}
}

/* ---------- timeline: from a spark in 2017 to 2026 */
.sx-tl{--w:clamp(320px,31vw,470px);position:relative;color:var(--sx-ink)}
.sx-tl-pin{position:relative}
.sx-tl-track{padding:clamp(96px,14vh,150px) var(--gutter) clamp(72px,10vh,120px);max-width:960px;margin:0 auto}
.sx-tl-head{margin-bottom:clamp(56px,9vh,96px)}
.sx-tl-head h2{font-size:clamp(42px,6.4vw,112px);font-weight:900;line-height:1.02;letter-spacing:-.025em}
[data-lang=en] .sx-tl-head h2{font-size:clamp(40px,5.4vw,96px)}
.sx-tl-head p:last-child{margin-top:20px;font-size:clamp(17px,1.5vw,22px);opacity:.8}
.sx-tl-list{list-style:none;margin:0;padding:0 0 0 34px;display:grid;gap:clamp(64px,12vh,132px);position:relative}
.sx-tl-list::before{content:"";position:absolute;left:6px;top:8px;bottom:8px;width:2px;background:color-mix(in srgb,currentColor 18%,transparent)}
.sx-tl-list::after{content:"";position:absolute;left:6px;top:8px;width:2px;height:calc(var(--p,0) * (100% - 16px));background:#ffcc66}
.tl-item{--a:1;--o:0;position:relative}
.tl-item::before{content:"";position:absolute;left:-34px;top:6px;width:14px;height:14px;border-radius:50%;background:var(--sx-bgc,#0b1030);box-shadow:inset 0 0 0 2px color-mix(in srgb,currentColor 40%,transparent);transition:background-color 300ms,box-shadow 300ms}
.tl-item.is-on::before{background:#ffcc66;box-shadow:inset 0 0 0 2px #ffcc66,0 0 0 6px color-mix(in srgb,#ffcc66 30%,transparent)}
.tl-y{position:relative;z-index:2;display:block;margin:0 0 -.24em -.04em;font-size:clamp(84px,9.6vw,164px);font-weight:900;line-height:.82;letter-spacing:-.045em;pointer-events:none;
  opacity:calc(.16 + var(--a) * .84);transform:translate3d(calc(var(--o) * -5vw),0,0);font-variant-numeric:tabular-nums}
.tl-light .tl-y{color:#3a1c40}
.tl-card{position:relative;z-index:1;padding:clamp(22px,2.4vw,32px);border-radius:28px;background:color-mix(in srgb,currentColor 7%,transparent);
  transform:translate3d(0,calc((1 - var(--a)) * 46px),0) scale(calc(.9 + var(--a) * .1));opacity:calc(.3 + var(--a) * .7)}
.tl-when{font-weight:700;font-size:15px;display:flex;gap:10px;align-items:baseline;opacity:.8}
.tl-d{font-weight:400}
.tl-icon{display:flex;align-items:center;min-height:76px;margin:16px 0 20px}
.tl-ic{width:64px;height:64px;flex:none}
.tl-icon .appicon{width:64px;height:64px;flex:none;border-radius:15px}
.tl-pair{display:flex;align-items:center;gap:14px}
.tl-pair>*{transition:transform 600ms var(--sx-pop) calc(var(--k,0) * 90ms)}
.tl-item:not(.is-on) .tl-pair>*{transform:translateY(10px) scale(.86)}
.tl-pair>:nth-child(2){--k:1}.tl-pair>:nth-child(3){--k:2}
.tl-card h3{font-size:clamp(22px,1.8vw,28px);font-weight:700;line-height:1.3;margin-bottom:10px}
.tl-card>p:not(.tl-when){font-size:16px;line-height:1.75;opacity:.85}
[data-lang=en] .tl-card>p:not(.tl-when){line-height:1.55}
.tl-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.tl-link{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:22px;
  background:color-mix(in srgb,currentColor 12%,transparent);font-weight:700;font-size:15px;text-decoration:none;transition:background-color 200ms}
.tl-link:hover{background:color-mix(in srgb,currentColor 20%,transparent)}
.tl-light .tl-card{--bs:1px;background:#fff4e2;color:#3a1c40;box-shadow:calc(var(--bs)*0.819) calc(var(--bs)*0.574) 0 #3a1c40,calc(var(--bs)*1.638) calc(var(--bs)*1.147) 0 #3a1c40,calc(var(--bs)*2.457) calc(var(--bs)*1.721) 0 #3a1c40,calc(var(--bs)*3.277) calc(var(--bs)*2.294) 0 #3a1c40,calc(var(--bs)*4.096) calc(var(--bs)*2.868) 0 #3a1c40,calc(var(--bs)*4.915) calc(var(--bs)*3.441) 0 #3a1c40,calc(var(--bs)*5.734) calc(var(--bs)*4.015) 0 #3a1c40}
.tl-light .tl-link{background:#ffcc66}
.tl-light .tl-link:hover{background:#ffd98a}
/* 2023: Steam reviews */
.tl-meter{display:grid;gap:8px;width:132px;font-size:15px}
.tl-meter b{font-size:30px;font-weight:300;line-height:1;font-variant-numeric:tabular-nums}
.tl-meter i{display:block;height:8px;border-radius:4px;background:color-mix(in srgb,currentColor 18%,transparent);overflow:hidden}
.tl-meter i::after{content:"";display:block;height:100%;width:calc(var(--v) * 100%);border-radius:inherit;background:#ffcc66;transform-origin:0 50%;transform:scaleX(0);transition:transform 900ms var(--sx-ease) 200ms}
.tl-item.is-on .tl-meter i::after{transform:none}
/* 2024: LONG Game -> LK Studio */
.tl-morph{display:inline-flex;align-items:flex-end;font-weight:900;font-size:clamp(34px,3.4vw,48px);line-height:1.08;white-space:nowrap;letter-spacing:-.01em}
.tl-morph>span,.tm-w>span{display:inline-block;vertical-align:bottom}
.tm-x{max-width:3.2em;overflow:hidden;transition:max-width 800ms var(--sx-emph) 150ms,opacity 400ms 150ms}
.tm-k{max-width:0;overflow:hidden;color:#ffcc66;transition:max-width 800ms var(--sx-emph) 250ms}
.tm-sp{width:.28em}
.tm-w{display:inline-grid!important;overflow:hidden}
.tm-a,.tm-b{grid-area:1/1;transition:transform 700ms var(--sx-emph) 350ms,opacity 500ms 350ms}
.tm-b{transform:translateY(100%);opacity:0}
.tl-item.is-on .tm-x{max-width:0;opacity:0}
.tl-item.is-on .tm-k{max-width:.9em}
.tl-item.is-on .tm-a{transform:translateY(-100%);opacity:0}
.tl-item.is-on .tm-b{transform:none;opacity:1}
.tl-games{display:block;margin-left:18px;font-size:15px;opacity:0;transform:translateX(-10px);transition:opacity 500ms 900ms,transform 600ms var(--sx-ease) 900ms}
.tl-item.is-on .tl-games{opacity:.9;transform:none}
.tl-icon:has(.tl-morph){flex-wrap:wrap;row-gap:8px}
/* 2025, 2026: renamed apps */
.tl-swap{display:flex;align-items:center;gap:14px}
.tl-swap>:first-child{transition:transform 600ms var(--sx-ease),opacity 600ms,filter 600ms}
.tl-arrow{width:44px;height:2px;background:currentColor;position:relative;transform-origin:0 50%;transform:scaleX(0);transition:transform 500ms var(--sx-emph) 200ms}
.tl-arrow::after{content:"";position:absolute;right:-1px;top:-5px;width:10px;height:10px;border:solid currentColor;border-width:2px 2px 0 0;transform:rotate(45deg)}
.tl-swap>:last-child{transform:scale(.4) rotate(-20deg);opacity:0;transition:transform 700ms var(--sx-pop) 450ms,opacity 300ms 450ms}
.tl-item.is-on .tl-swap>:first-child{transform:scale(.78);opacity:.5;filter:grayscale(1)}
.tl-item.is-on .tl-arrow{transform:none}
.tl-item.is-on .tl-swap>:last-child{transform:none;opacity:1}
.sx-tl-rail{display:none}
/* desktop: pinned, horizontal */
.sx-tl.is-h .sx-tl-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:clip}
.sx-tl.is-h .sx-tl-track{position:absolute;left:0;top:0;bottom:0;margin:0;max-width:none;width:max-content;display:flex;align-items:center;
  gap:clamp(72px,9vw,150px);padding:0 calc(50vw - var(--w) / 2) 0 var(--gutter);will-change:transform}
.sx-tl.is-h .sx-tl-head{flex:0 0 min(620px,42vw);margin:0}
.sx-tl.is-h .sx-tl-list{display:flex;align-items:center;gap:inherit;padding:0}
.sx-tl.is-h .sx-tl-list::before,.sx-tl.is-h .sx-tl-list::after,.sx-tl.is-h .tl-item::before{display:none}
.sx-tl.is-h .tl-item{flex:0 0 var(--w)}
.sx-tl.is-h .tl-y{transform:translate3d(calc(var(--o) * -9vw),0,0)}
.sx-tl.is-h .sx-tl-rail{display:block;position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(28px,6vh,56px);height:2px;background:color-mix(in srgb,currentColor 18%,transparent)}
.sx-tl-glow{position:absolute;left:0;top:0;height:100%;width:calc(var(--p,0) * 100%);background:#ffcc66}
.sx-tl-glow::after{content:"";position:absolute;right:-7px;top:-6px;width:14px;height:14px;border-radius:50%;background:#ffcc66;box-shadow:0 0 0 6px color-mix(in srgb,#ffcc66 28%,transparent)}

/* ---------- works: bento of stickers, visuals break out of their frames */
.sx-works,.sx-design{max-width:1320px;margin:0 auto;padding:clamp(96px,14vh,168px) var(--gutter) clamp(40px,6vh,72px);color:#3a1c40}
.sx-design{padding-bottom:clamp(96px,14vh,168px)}
.sx-h{position:relative;z-index:0;margin:0 0 .04em -.04em;font-size:clamp(72px,13vw,220px);font-weight:900;line-height:.86;letter-spacing:-.045em;color:#3a1c40}
:lang(ja) .sx-h{font-size:clamp(52px,9.4vw,168px)}
[data-lang=en] .sx-h{font-size:clamp(52px,9vw,156px);letter-spacing:-.04em}
.sx-h span{display:inline-block}
.js .sx-h span{clip-path:inset(0 100% 0 0);transform:translateX(-4%)}
.js .sx-h.is-in span{clip-path:inset(0 -10% 0 0);transform:none;transition:clip-path 1100ms var(--sx-emph),transform 1100ms var(--sx-emph)}
.sx-bento{position:relative;z-index:1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(14px,1.7vw,26px)}
.sx-tile{--bs:1px;--rx:0deg;--ry:0deg;position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;min-height:340px;border-radius:32px;
  color:var(--ink);text-decoration:none;box-shadow:calc(var(--bs)*0.819) calc(var(--bs)*0.574) 0 var(--cast),calc(var(--bs)*1.638) calc(var(--bs)*1.147) 0 var(--cast),calc(var(--bs)*2.457) calc(var(--bs)*1.721) 0 var(--cast),calc(var(--bs)*3.277) calc(var(--bs)*2.294) 0 var(--cast),calc(var(--bs)*4.096) calc(var(--bs)*2.868) 0 var(--cast),calc(var(--bs)*4.915) calc(var(--bs)*3.441) 0 var(--cast),calc(var(--bs)*5.734) calc(var(--bs)*4.015) 0 var(--cast);
  transform:perspective(1400px) rotateX(var(--rx)) rotateY(var(--ry));transition:--bs 320ms var(--ease),transform 600ms var(--sx-ease)}
.sx-tile:hover{--bs:1.8px}
.sx-tile.is-tilt{transition:--bs 320ms var(--ease),transform 120ms linear}
.js .sx-tile[data-r]:not(.is-in),.js .dtile[data-r]:not(.is-in){opacity:0;transform:translate3d(0,64px,0) scale(.96)}
.js .sx-tile[data-r].is-in,.js .dtile[data-r].is-in{opacity:1;transition:opacity 700ms var(--sx-ease),transform 900ms var(--sx-ease),--bs 320ms var(--ease)}
.tile-sky{position:absolute;inset:0;z-index:-2;border-radius:inherit;background:linear-gradient(180deg,var(--g) 0%,var(--g) 52%,var(--h) 100%)}
.tile-body{position:relative;z-index:1;display:grid;gap:10px;justify-items:start;padding:clamp(22px,2.4vw,34px);max-width:min(560px,100%)}
.tile-body .appicon{width:56px;height:56px;margin-bottom:6px}
.tile-name{font-size:clamp(30px,3vw,48px);font-weight:900;line-height:1.05;letter-spacing:-.015em}
.tile-line{font-size:clamp(15px,1.15vw,18px);line-height:1.6;max-width:26em;opacity:.92}
.sx-tile .tile-go{margin-top:8px}
.tv{position:absolute;z-index:0;pointer-events:none;transition:transform 800ms var(--sx-ease)}
.tile-atmo{grid-column:span 7;grid-row:span 2;min-height:clamp(560px,52vw,760px)}
.tile-atmo .tile-body{max-width:56%}
.tv-atmo{right:7%;top:-60px;transform:rotate(-7deg)}
.tv-atmo .phone{width:clamp(210px,19vw,290px)}
.tile-atmo:hover .tv-atmo{transform:rotate(-3deg) translateY(-14px)}
.tile-music,.tile-health{grid-column:span 5;min-height:clamp(330px,26vw,370px)}
.tile-music .tile-body,.tile-health .tile-body{max-width:64%}
.tv-music{right:-28px;top:-58px;width:min(240px,48%)}
.tv-music .record{width:100%}
.tile-music:hover .tv-music{transform:translate(-10px,-10px) rotate(8deg)}
.tv-health{right:-8px;top:-46px;width:min(250px,50%)}
.tv-health .skel{width:100%}
.tile-health:hover .tv-health{transform:translateY(-10px) scale(1.04)}
/* Endless Thunder II: full screen, edge to edge */
.sx-thunder{--cast:#06050f;position:relative;isolation:isolate;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;overflow:clip;color:#fff4e2;background:#0d0b17}
.th-media{position:absolute;inset:0;z-index:-2;overflow:hidden;background:#0d0b17;transform:scale(calc(1.16 - var(--tz,0) * .16));transform-origin:50% 40%}
.th-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.1);transition:opacity 1600ms ease,transform 8000ms linear}
.th-shot.is-on{opacity:1;transform:scale(1)}
.th-rain{position:absolute;inset:-30%;background:repeating-linear-gradient(100deg,transparent 0 26px,rgba(255,244,226,.07) 26px 27px,transparent 27px 61px);animation:sx-rain 700ms linear infinite;pointer-events:none}
@keyframes sx-rain{to{transform:translate3d(-14px,90px,0)}}
.th-flash{position:absolute;inset:0;background:#efeaff;opacity:0;pointer-events:none}
.sx-thunder.is-flash .th-flash{animation:sx-flash 1100ms 1}
@keyframes sx-flash{0%,100%{opacity:0}8%{opacity:.42}16%{opacity:0}24%{opacity:.26}34%{opacity:0}}
.th-fallback .street{position:absolute;inset:0;width:100%;height:100%}
.th-shade{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(13,11,23,.88) 0%,rgba(13,11,23,.5) 40%,rgba(13,11,23,0) 72%),linear-gradient(0deg,rgba(13,11,23,.92) 0%,rgba(13,11,23,0) 55%),linear-gradient(180deg,rgba(13,11,23,.7) 0%,rgba(13,11,23,0) 22%)}
.th-in{position:relative;z-index:1;width:100%;max-width:1320px;margin:0 auto;padding:0 var(--gutter) clamp(64px,12vh,128px);display:grid;justify-items:start;gap:14px}
.th-kick{font-size:14px;font-weight:700;letter-spacing:.04em;opacity:.8}
.th-title{margin:0;font-family:"LK Title Serif",var(--serif);font-weight:900;line-height:1}
.th-zh{display:flex;font-size:clamp(64px,12vw,220px);letter-spacing:.02em;white-space:nowrap}
.th-zh span{display:inline-block}
.js .th-in[data-r] .th-zh span{opacity:0;transform:translate3d(0,.35em,0);filter:blur(10px)}
.js .th-in[data-r].is-in .th-zh span{opacity:1;transform:none;filter:none;transition:opacity 900ms var(--sx-ease) calc(var(--i) * 90ms),transform 1100ms var(--sx-ease) calc(var(--i) * 90ms),filter 900ms calc(var(--i) * 90ms)}
.th-en{display:block;margin-top:.5em;font-size:clamp(20px,2.2vw,34px);letter-spacing:.03em;opacity:.88;white-space:nowrap}
.th-by{display:inline-flex;align-items:center;gap:.36em;font-size:17px;font-weight:700}
.th-by svg{height:.86em;width:auto;fill:currentColor}
.th-line{max-width:30em;font-size:clamp(16px,1.3vw,19px);line-height:1.7;opacity:.9}
.th-btn{margin-top:10px;background:#fff4e2;color:#26233e;box-shadow:calc(var(--bs)*0.819) calc(var(--bs)*0.574) 0 #06050f,calc(var(--bs)*1.638) calc(var(--bs)*1.147) 0 #06050f,calc(var(--bs)*2.457) calc(var(--bs)*1.721) 0 #06050f,calc(var(--bs)*3.277) calc(var(--bs)*2.294) 0 #06050f,calc(var(--bs)*4.096) calc(var(--bs)*2.868) 0 #06050f}
.th-cap{position:absolute;z-index:1;right:var(--gutter);bottom:clamp(24px,4vh,40px);margin:0;font-size:12px;font-weight:700;padding:6px 12px;border-radius:99px;background:rgba(13,11,23,.62);color:#fff4e2}
@media (max-width:980px){
  .tile-atmo{grid-column:1/-1;grid-row:auto;min-height:600px}
  .tile-music,.tile-health{grid-column:span 6}
}
@media (max-width:680px){
  .sx-bento{gap:28px}
  .tile-music,.tile-health{grid-column:1/-1;min-height:360px}
  .tile-atmo{min-height:620px}
  .tile-atmo .tile-body,.tile-music .tile-body,.tile-health .tile-body{max-width:100%}
  .tv-atmo{right:8%;top:-40px}
  .tv-atmo .phone{width:168px}
  .tv-music{width:170px;right:-14px;top:-44px}
  .tv-health{width:190px;top:-40px}
  .th-cap{left:var(--gutter);right:auto;top:84px;bottom:auto}
}

/* ---------- design & type tiles */
.sx-dgrid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.7vw,26px)}
.dtile{--bs:1px;--rx:0deg;--ry:0deg;position:relative;isolation:isolate;display:grid;grid-template-rows:1fr auto;min-height:clamp(380px,34vw,500px);border-radius:32px;overflow:hidden;
  color:#3a1c40;text-decoration:none;transform:perspective(1400px) rotateX(var(--rx)) rotateY(var(--ry));transition:transform 600ms var(--sx-ease)}
.dtile.is-tilt{transition:transform 120ms linear}
.dtile-b3{background:#ffcc66}
.dtile-lk-sans{background:#fff;box-shadow:inset 0 0 0 1.5px #eadcc4}
.dt-art{position:relative;display:grid;place-items:center;min-height:220px}
.dt-word{--tl:.0042em;font-size:clamp(130px,15vw,250px);font-weight:900;line-height:.9;letter-spacing:-.05em;color:#fff4e2;transform:translate(-14%,-6%);text-shadow:calc(var(--tl)*0.819) calc(var(--tl)*0.574) 0 #3a1c40,calc(var(--tl)*1.638) calc(var(--tl)*1.147) 0 #3a1c40,calc(var(--tl)*2.457) calc(var(--tl)*1.721) 0 #3a1c40,calc(var(--tl)*3.277) calc(var(--tl)*2.294) 0 #3a1c40,calc(var(--tl)*4.096) calc(var(--tl)*2.868) 0 #3a1c40,calc(var(--tl)*4.915) calc(var(--tl)*3.441) 0 #3a1c40,calc(var(--tl)*5.734) calc(var(--tl)*4.015) 0 #3a1c40,calc(var(--tl)*6.553) calc(var(--tl)*4.589) 0 #3a1c40,calc(var(--tl)*7.372) calc(var(--tl)*5.162) 0 #3a1c40,calc(var(--tl)*8.192) calc(var(--tl)*5.736) 0 #3a1c40,calc(var(--tl)*9.011) calc(var(--tl)*6.309) 0 #3a1c40,calc(var(--tl)*9.830) calc(var(--tl)*6.883) 0 #3a1c40,calc(var(--tl)*10.649) calc(var(--tl)*7.456) 0 #3a1c40,calc(var(--tl)*11.468) calc(var(--tl)*8.030) 0 #3a1c40,calc(var(--tl)*12.287) calc(var(--tl)*8.604) 0 #3a1c40,calc(var(--tl)*13.106) calc(var(--tl)*9.177) 0 #3a1c40,calc(var(--tl)*13.926) calc(var(--tl)*9.751) 0 #3a1c40,calc(var(--tl)*14.745) calc(var(--tl)*10.324) 0 #3a1c40,calc(var(--tl)*15.564) calc(var(--tl)*10.898) 0 #3a1c40,calc(var(--tl)*16.383) calc(var(--tl)*11.472) 0 #3a1c40,calc(var(--tl)*17.202) calc(var(--tl)*12.045) 0 #3a1c40,calc(var(--tl)*18.021) calc(var(--tl)*12.619) 0 #3a1c40,calc(var(--tl)*18.840) calc(var(--tl)*13.192) 0 #3a1c40,calc(var(--tl)*19.660) calc(var(--tl)*13.766) 0 #3a1c40,calc(var(--tl)*20.479) calc(var(--tl)*14.339) 0 #3a1c40,calc(var(--tl)*21.298) calc(var(--tl)*14.913) 0 #3a1c40,calc(var(--tl)*22.117) calc(var(--tl)*15.487) 0 #3a1c40,calc(var(--tl)*22.936) calc(var(--tl)*16.060) 0 #3a1c40,calc(var(--tl)*23.755) calc(var(--tl)*16.634) 0 #3a1c40,calc(var(--tl)*24.575) calc(var(--tl)*17.207) 0 #3a1c40,calc(var(--tl)*25.394) calc(var(--tl)*17.781) 0 #3a1c40,calc(var(--tl)*26.213) calc(var(--tl)*18.354) 0 #3a1c40,calc(var(--tl)*27.032) calc(var(--tl)*18.928) 0 #3a1c40,calc(var(--tl)*27.851) calc(var(--tl)*19.502) 0 #3a1c40,calc(var(--tl)*28.670) calc(var(--tl)*20.075) 0 #3a1c40,calc(var(--tl)*29.489) calc(var(--tl)*20.649) 0 #3a1c40,calc(var(--tl)*30.309) calc(var(--tl)*21.222) 0 #3a1c40,calc(var(--tl)*31.128) calc(var(--tl)*21.796) 0 #3a1c40,calc(var(--tl)*31.947) calc(var(--tl)*22.369) 0 #3a1c40,calc(var(--tl)*32.766) calc(var(--tl)*22.943) 0 #3a1c40,calc(var(--tl)*33.585) calc(var(--tl)*23.517) 0 #3a1c40,calc(var(--tl)*34.404) calc(var(--tl)*24.090) 0 #3a1c40,calc(var(--tl)*35.224) calc(var(--tl)*24.664) 0 #3a1c40,calc(var(--tl)*36.043) calc(var(--tl)*25.237) 0 #3a1c40,calc(var(--tl)*36.862) calc(var(--tl)*25.811) 0 #3a1c40,calc(var(--tl)*37.681) calc(var(--tl)*26.385) 0 #3a1c40,calc(var(--tl)*38.500) calc(var(--tl)*26.958) 0 #3a1c40,calc(var(--tl)*39.319) calc(var(--tl)*27.532) 0 #3a1c40,calc(var(--tl)*40.138) calc(var(--tl)*28.105) 0 #3a1c40,calc(var(--tl)*40.958) calc(var(--tl)*28.679) 0 #3a1c40,calc(var(--tl)*41.777) calc(var(--tl)*29.252) 0 #3a1c40,calc(var(--tl)*42.596) calc(var(--tl)*29.826) 0 #3a1c40,calc(var(--tl)*43.415) calc(var(--tl)*30.400) 0 #3a1c40,calc(var(--tl)*44.234) calc(var(--tl)*30.973) 0 #3a1c40,calc(var(--tl)*45.053) calc(var(--tl)*31.547) 0 #3a1c40,calc(var(--tl)*45.873) calc(var(--tl)*32.120) 0 #3a1c40,calc(var(--tl)*46.692) calc(var(--tl)*32.694) 0 #3a1c40,calc(var(--tl)*47.511) calc(var(--tl)*33.267) 0 #3a1c40,calc(var(--tl)*48.330) calc(var(--tl)*33.841) 0 #3a1c40,calc(var(--tl)*49.149) calc(var(--tl)*34.415) 0 #3a1c40,calc(var(--tl)*49.968) calc(var(--tl)*34.988) 0 #3a1c40,calc(var(--tl)*50.787) calc(var(--tl)*35.562) 0 #3a1c40,calc(var(--tl)*51.607) calc(var(--tl)*36.135) 0 #3a1c40,calc(var(--tl)*52.426) calc(var(--tl)*36.709) 0 #3a1c40,calc(var(--tl)*53.245) calc(var(--tl)*37.282) 0 #3a1c40,calc(var(--tl)*54.064) calc(var(--tl)*37.856) 0 #3a1c40,calc(var(--tl)*54.883) calc(var(--tl)*38.430) 0 #3a1c40,calc(var(--tl)*55.702) calc(var(--tl)*39.003) 0 #3a1c40,calc(var(--tl)*56.521) calc(var(--tl)*39.577) 0 #3a1c40,calc(var(--tl)*57.341) calc(var(--tl)*40.150) 0 #3a1c40,calc(var(--tl)*58.160) calc(var(--tl)*40.724) 0 #3a1c40,calc(var(--tl)*58.979) calc(var(--tl)*41.298) 0 #3a1c40,calc(var(--tl)*59.798) calc(var(--tl)*41.871) 0 #3a1c40,calc(var(--tl)*60.617) calc(var(--tl)*42.445) 0 #3a1c40,calc(var(--tl)*61.436) calc(var(--tl)*43.018) 0 #3a1c40,calc(var(--tl)*62.256) calc(var(--tl)*43.592) 0 #3a1c40,calc(var(--tl)*63.075) calc(var(--tl)*44.165) 0 #3a1c40,calc(var(--tl)*63.894) calc(var(--tl)*44.739) 0 #3a1c40,calc(var(--tl)*64.713) calc(var(--tl)*45.313) 0 #3a1c40,calc(var(--tl)*65.532) calc(var(--tl)*45.886) 0 #3a1c40,calc(var(--tl)*66.351) calc(var(--tl)*46.460) 0 #3a1c40,calc(var(--tl)*67.170) calc(var(--tl)*47.033) 0 #3a1c40,calc(var(--tl)*67.990) calc(var(--tl)*47.607) 0 #3a1c40,calc(var(--tl)*68.809) calc(var(--tl)*48.180) 0 #3a1c40,calc(var(--tl)*69.628) calc(var(--tl)*48.754) 0 #3a1c40,calc(var(--tl)*70.447) calc(var(--tl)*49.328) 0 #3a1c40,calc(var(--tl)*71.266) calc(var(--tl)*49.901) 0 #3a1c40,calc(var(--tl)*72.085) calc(var(--tl)*50.475) 0 #3a1c40,calc(var(--tl)*72.905) calc(var(--tl)*51.048) 0 #3a1c40,calc(var(--tl)*73.724) calc(var(--tl)*51.622) 0 #3a1c40,calc(var(--tl)*74.543) calc(var(--tl)*52.195) 0 #3a1c40,calc(var(--tl)*75.362) calc(var(--tl)*52.769) 0 #3a1c40,calc(var(--tl)*76.181) calc(var(--tl)*53.343) 0 #3a1c40,calc(var(--tl)*77.000) calc(var(--tl)*53.916) 0 #3a1c40,calc(var(--tl)*77.819) calc(var(--tl)*54.490) 0 #3a1c40,calc(var(--tl)*78.639) calc(var(--tl)*55.063) 0 #3a1c40,calc(var(--tl)*79.458) calc(var(--tl)*55.637) 0 #3a1c40,calc(var(--tl)*80.277) calc(var(--tl)*56.210) 0 #3a1c40,calc(var(--tl)*81.096) calc(var(--tl)*56.784) 0 #3a1c40,calc(var(--tl)*81.915) calc(var(--tl)*57.358) 0 #3a1c40,calc(var(--tl)*82.734) calc(var(--tl)*57.931) 0 #3a1c40,calc(var(--tl)*83.554) calc(var(--tl)*58.505) 0 #3a1c40,calc(var(--tl)*84.373) calc(var(--tl)*59.078) 0 #3a1c40,calc(var(--tl)*85.192) calc(var(--tl)*59.652) 0 #3a1c40,calc(var(--tl)*86.011) calc(var(--tl)*60.226) 0 #3a1c40,calc(var(--tl)*86.830) calc(var(--tl)*60.799) 0 #3a1c40,calc(var(--tl)*87.649) calc(var(--tl)*61.373) 0 #3a1c40,calc(var(--tl)*88.468) calc(var(--tl)*61.946) 0 #3a1c40,calc(var(--tl)*89.288) calc(var(--tl)*62.520) 0 #3a1c40,calc(var(--tl)*90.107) calc(var(--tl)*63.093) 0 #3a1c40,calc(var(--tl)*90.926) calc(var(--tl)*63.667) 0 #3a1c40,calc(var(--tl)*91.745) calc(var(--tl)*64.241) 0 #3a1c40,calc(var(--tl)*92.564) calc(var(--tl)*64.814) 0 #3a1c40,calc(var(--tl)*93.383) calc(var(--tl)*65.388) 0 #3a1c40,calc(var(--tl)*94.202) calc(var(--tl)*65.961) 0 #3a1c40,calc(var(--tl)*95.022) calc(var(--tl)*66.535) 0 #3a1c40,calc(var(--tl)*95.841) calc(var(--tl)*67.108) 0 #3a1c40,calc(var(--tl)*96.660) calc(var(--tl)*67.682) 0 #3a1c40,calc(var(--tl)*97.479) calc(var(--tl)*68.256) 0 #3a1c40,calc(var(--tl)*98.298) calc(var(--tl)*68.829) 0 #3a1c40;transition:--tl 320ms var(--ease)}
.dtile-b3:hover .dt-word{--tl:.0075em}
.dt-sans{grid-auto-flow:row;align-content:center;gap:4px}
.dt-aa{font-size:clamp(110px,13vw,210px);line-height:1;letter-spacing:-.02em;animation:sx-wcycle 4.8s ease-in-out infinite}
.dt-cjk{font-size:clamp(32px,3.6vw,58px);letter-spacing:.12em;line-height:1.2;animation:sx-wcycle 4.8s ease-in-out -1.2s infinite}
@keyframes sx-wcycle{0%,100%{font-weight:300}33%{font-weight:900}66%{font-weight:400}}
.dt-body{display:grid;gap:8px;justify-items:start;padding:clamp(22px,2.4vw,34px)}
.dt-body h3{font-size:clamp(28px,2.8vw,44px);font-weight:900;line-height:1.1}
.dt-body p{font-size:16px;opacity:.85}
@media (max-width:760px){.sx-dgrid{grid-template-columns:1fr}}

/* ---------- close */
.sx-close{position:relative;min-height:100vh;display:flex;flex-direction:column;padding:clamp(120px,16vh,180px) var(--gutter) 0;
  text-align:center;color:#fff4e2;--cast:#0b1030}
.sx-close::before{content:"";position:absolute;right:max(10vw,36px);top:clamp(64px,12vh,120px);width:clamp(28px,3vw,44px);aspect-ratio:1;border-radius:50%;background:#fff4e2}
.sx-close-t{font-size:clamp(56px,9.5vw,164px);font-weight:900;line-height:1.05;letter-spacing:-.02em;max-width:14ch;text-wrap:balance}
:lang(ja) .sx-close-t{font-size:clamp(44px,7vw,124px)}
[data-lang=en] .sx-close-t{font-size:clamp(42px,6.6vw,116px);max-width:16ch;line-height:1}
.sx-close-in{flex:1;display:grid;place-content:center;justify-items:center;gap:clamp(32px,6vh,56px);padding-bottom:clamp(80px,12vh,140px)}
.sx-close .sx-btn{background:#ffcc66;color:#3a1c40;box-shadow:calc(var(--bs)*0.819) calc(var(--bs)*0.574) 0 #0b1030,calc(var(--bs)*1.638) calc(var(--bs)*1.147) 0 #0b1030,calc(var(--bs)*2.457) calc(var(--bs)*1.721) 0 #0b1030,calc(var(--bs)*3.277) calc(var(--bs)*2.294) 0 #0b1030,calc(var(--bs)*4.096) calc(var(--bs)*2.868) 0 #0b1030}

/* ---------- page transition: colour flood out, light sweep in */
.sx-tx{position:fixed;inset:0;z-index:9999;pointer-events:none;visibility:hidden;background:var(--tx-c,#3a1c40);clip-path:circle(0 at var(--x,50%) var(--y,50%))}
.sx-tx.is-go{visibility:visible;clip-path:circle(150vmax at var(--x,50%) var(--y,50%));transition:clip-path 640ms var(--sx-emph)}
.sx-tx.is-rect{visibility:visible;clip-path:inset(var(--t) var(--r) var(--b) var(--l) round 32px)}
.sx-tx.is-rect.is-go{clip-path:inset(0 0 0 0 round 0);transition:clip-path 600ms var(--sx-emph)}
.sx-leaving main{transform:scale(.93);filter:saturate(.7);transition:transform 640ms var(--sx-emph),filter 640ms}
@keyframes sx-sweep-in{from{clip-path:circle(0 at 6% 4%)}to{clip-path:circle(160vmax at 6% 4%)}}
@keyframes sx-sweep-old{to{transform:scale(1.12);filter:brightness(.72)}}
html.sx-vt::view-transition-new(root){animation:sx-sweep-in 950ms cubic-bezier(.6,0,.2,1) both}
html.sx-vt::view-transition-old(root){animation:sx-sweep-old 950ms cubic-bezier(.6,0,.2,1) both}
html.sx-arrive:not(.sx-vt) body::after{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;background:var(--tx-c,#3a1c40);animation:sx-recede 900ms cubic-bezier(.6,0,.2,1) 60ms both}
@keyframes sx-recede{from{clip-path:circle(160vmax at 94% 96%)}to{clip-path:circle(0 at 94% 96%)}}

/* ================================================================ B3 + LK Sans pages */
.ds-hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;overflow:clip;padding:120px var(--gutter) clamp(56px,10vh,110px);isolation:isolate}
.ds-hero-in{position:relative;z-index:1;width:100%;max-width:1320px;margin:0 auto}
.ds-sub{margin-top:clamp(18px,3vh,30px);font-size:clamp(17px,1.6vw,24px);max-width:26em;opacity:.88}
.ds-cue{position:absolute;right:var(--gutter);bottom:clamp(56px,10vh,110px);font-size:13px;font-weight:700;writing-mode:vertical-rl;letter-spacing:.1em;opacity:.7}
.ds-cue::after{content:"";display:block;width:2px;height:56px;margin:12px auto 0;background:currentColor;transform-origin:50% 0;animation:sx-cue 1800ms var(--sx-emph) infinite}
@keyframes sx-cue{0%{transform:scaleY(0)}50%{transform:scaleY(1);transform-origin:50% 0}51%{transform-origin:50% 100%}100%{transform:scaleY(0);transform-origin:50% 100%}}
/* B3 hero: the sun goes down as you scroll, the shadow grows */
.ds-sun{position:absolute;z-index:0;left:clamp(24px,8vw,140px);top:clamp(92px,15vh,170px);width:clamp(54px,6.4vw,104px);aspect-ratio:1;border-radius:50%;background:#fff4e2;
  transform:translate3d(calc(var(--hp,0) * 6vw),calc(var(--hp,0) * 26vh),0)}
.ds-rays{position:absolute;inset:0;z-index:0;pointer-events:none}
.ds-rays i{position:absolute;left:clamp(50px,11vw,192px);top:clamp(118px,19vh,222px);width:170vmax;height:2px;background:rgba(255,244,226,.55);transform-origin:0 50%;
  transform:translate(calc(var(--r) * -62px),calc(var(--r) * 88px)) rotate(35deg) scaleX(0)}
.js .ds-rays i{animation:sx-ray 1400ms var(--sx-emph) calc(200ms + var(--r) * 80ms) forwards}
@keyframes sx-ray{to{transform:translate(calc(var(--r) * -62px),calc(var(--r) * 88px)) rotate(35deg) scaleX(1)}}
.ds-title{margin:0;font-weight:900;line-height:1}
.ds-b3{--tl:0em;display:block;width:max-content;margin:clamp(24px,5vh,56px) 0 0 -.05em;font-size:clamp(170px,29vw,450px);font-weight:900;letter-spacing:-.055em;color:#fff4e2;line-height:.76;
  text-shadow:calc(var(--tl)*0.819) calc(var(--tl)*0.574) 0 #3a1c40,calc(var(--tl)*1.638) calc(var(--tl)*1.147) 0 #3a1c40,calc(var(--tl)*2.457) calc(var(--tl)*1.721) 0 #3a1c40,calc(var(--tl)*3.277) calc(var(--tl)*2.294) 0 #3a1c40,calc(var(--tl)*4.096) calc(var(--tl)*2.868) 0 #3a1c40,calc(var(--tl)*4.915) calc(var(--tl)*3.441) 0 #3a1c40,calc(var(--tl)*5.734) calc(var(--tl)*4.015) 0 #3a1c40,calc(var(--tl)*6.553) calc(var(--tl)*4.589) 0 #3a1c40,calc(var(--tl)*7.372) calc(var(--tl)*5.162) 0 #3a1c40,calc(var(--tl)*8.192) calc(var(--tl)*5.736) 0 #3a1c40,calc(var(--tl)*9.011) calc(var(--tl)*6.309) 0 #3a1c40,calc(var(--tl)*9.830) calc(var(--tl)*6.883) 0 #3a1c40,calc(var(--tl)*10.649) calc(var(--tl)*7.456) 0 #3a1c40,calc(var(--tl)*11.468) calc(var(--tl)*8.030) 0 #3a1c40,calc(var(--tl)*12.287) calc(var(--tl)*8.604) 0 #3a1c40,calc(var(--tl)*13.106) calc(var(--tl)*9.177) 0 #3a1c40,calc(var(--tl)*13.926) calc(var(--tl)*9.751) 0 #3a1c40,calc(var(--tl)*14.745) calc(var(--tl)*10.324) 0 #3a1c40,calc(var(--tl)*15.564) calc(var(--tl)*10.898) 0 #3a1c40,calc(var(--tl)*16.383) calc(var(--tl)*11.472) 0 #3a1c40,calc(var(--tl)*17.202) calc(var(--tl)*12.045) 0 #3a1c40,calc(var(--tl)*18.021) calc(var(--tl)*12.619) 0 #3a1c40,calc(var(--tl)*18.840) calc(var(--tl)*13.192) 0 #3a1c40,calc(var(--tl)*19.660) calc(var(--tl)*13.766) 0 #3a1c40,calc(var(--tl)*20.479) calc(var(--tl)*14.339) 0 #3a1c40,calc(var(--tl)*21.298) calc(var(--tl)*14.913) 0 #3a1c40,calc(var(--tl)*22.117) calc(var(--tl)*15.487) 0 #3a1c40,calc(var(--tl)*22.936) calc(var(--tl)*16.060) 0 #3a1c40,calc(var(--tl)*23.755) calc(var(--tl)*16.634) 0 #3a1c40,calc(var(--tl)*24.575) calc(var(--tl)*17.207) 0 #3a1c40,calc(var(--tl)*25.394) calc(var(--tl)*17.781) 0 #3a1c40,calc(var(--tl)*26.213) calc(var(--tl)*18.354) 0 #3a1c40,calc(var(--tl)*27.032) calc(var(--tl)*18.928) 0 #3a1c40,calc(var(--tl)*27.851) calc(var(--tl)*19.502) 0 #3a1c40,calc(var(--tl)*28.670) calc(var(--tl)*20.075) 0 #3a1c40,calc(var(--tl)*29.489) calc(var(--tl)*20.649) 0 #3a1c40,calc(var(--tl)*30.309) calc(var(--tl)*21.222) 0 #3a1c40,calc(var(--tl)*31.128) calc(var(--tl)*21.796) 0 #3a1c40,calc(var(--tl)*31.947) calc(var(--tl)*22.369) 0 #3a1c40,calc(var(--tl)*32.766) calc(var(--tl)*22.943) 0 #3a1c40,calc(var(--tl)*33.585) calc(var(--tl)*23.517) 0 #3a1c40,calc(var(--tl)*34.404) calc(var(--tl)*24.090) 0 #3a1c40,calc(var(--tl)*35.224) calc(var(--tl)*24.664) 0 #3a1c40,calc(var(--tl)*36.043) calc(var(--tl)*25.237) 0 #3a1c40,calc(var(--tl)*36.862) calc(var(--tl)*25.811) 0 #3a1c40,calc(var(--tl)*37.681) calc(var(--tl)*26.385) 0 #3a1c40,calc(var(--tl)*38.500) calc(var(--tl)*26.958) 0 #3a1c40,calc(var(--tl)*39.319) calc(var(--tl)*27.532) 0 #3a1c40,calc(var(--tl)*40.138) calc(var(--tl)*28.105) 0 #3a1c40,calc(var(--tl)*40.958) calc(var(--tl)*28.679) 0 #3a1c40,calc(var(--tl)*41.777) calc(var(--tl)*29.252) 0 #3a1c40,calc(var(--tl)*42.596) calc(var(--tl)*29.826) 0 #3a1c40,calc(var(--tl)*43.415) calc(var(--tl)*30.400) 0 #3a1c40,calc(var(--tl)*44.234) calc(var(--tl)*30.973) 0 #3a1c40,calc(var(--tl)*45.053) calc(var(--tl)*31.547) 0 #3a1c40,calc(var(--tl)*45.873) calc(var(--tl)*32.120) 0 #3a1c40,calc(var(--tl)*46.692) calc(var(--tl)*32.694) 0 #3a1c40,calc(var(--tl)*47.511) calc(var(--tl)*33.267) 0 #3a1c40,calc(var(--tl)*48.330) calc(var(--tl)*33.841) 0 #3a1c40,calc(var(--tl)*49.149) calc(var(--tl)*34.415) 0 #3a1c40,calc(var(--tl)*49.968) calc(var(--tl)*34.988) 0 #3a1c40,calc(var(--tl)*50.787) calc(var(--tl)*35.562) 0 #3a1c40,calc(var(--tl)*51.607) calc(var(--tl)*36.135) 0 #3a1c40,calc(var(--tl)*52.426) calc(var(--tl)*36.709) 0 #3a1c40,calc(var(--tl)*53.245) calc(var(--tl)*37.282) 0 #3a1c40,calc(var(--tl)*54.064) calc(var(--tl)*37.856) 0 #3a1c40,calc(var(--tl)*54.883) calc(var(--tl)*38.430) 0 #3a1c40,calc(var(--tl)*55.702) calc(var(--tl)*39.003) 0 #3a1c40,calc(var(--tl)*56.521) calc(var(--tl)*39.577) 0 #3a1c40,calc(var(--tl)*57.341) calc(var(--tl)*40.150) 0 #3a1c40,calc(var(--tl)*58.160) calc(var(--tl)*40.724) 0 #3a1c40,calc(var(--tl)*58.979) calc(var(--tl)*41.298) 0 #3a1c40,calc(var(--tl)*59.798) calc(var(--tl)*41.871) 0 #3a1c40,calc(var(--tl)*60.617) calc(var(--tl)*42.445) 0 #3a1c40,calc(var(--tl)*61.436) calc(var(--tl)*43.018) 0 #3a1c40,calc(var(--tl)*62.256) calc(var(--tl)*43.592) 0 #3a1c40,calc(var(--tl)*63.075) calc(var(--tl)*44.165) 0 #3a1c40,calc(var(--tl)*63.894) calc(var(--tl)*44.739) 0 #3a1c40,calc(var(--tl)*64.713) calc(var(--tl)*45.313) 0 #3a1c40,calc(var(--tl)*65.532) calc(var(--tl)*45.886) 0 #3a1c40,calc(var(--tl)*66.351) calc(var(--tl)*46.460) 0 #3a1c40,calc(var(--tl)*67.170) calc(var(--tl)*47.033) 0 #3a1c40,calc(var(--tl)*67.990) calc(var(--tl)*47.607) 0 #3a1c40,calc(var(--tl)*68.809) calc(var(--tl)*48.180) 0 #3a1c40,calc(var(--tl)*69.628) calc(var(--tl)*48.754) 0 #3a1c40,calc(var(--tl)*70.447) calc(var(--tl)*49.328) 0 #3a1c40,calc(var(--tl)*71.266) calc(var(--tl)*49.901) 0 #3a1c40,calc(var(--tl)*72.085) calc(var(--tl)*50.475) 0 #3a1c40,calc(var(--tl)*72.905) calc(var(--tl)*51.048) 0 #3a1c40,calc(var(--tl)*73.724) calc(var(--tl)*51.622) 0 #3a1c40,calc(var(--tl)*74.543) calc(var(--tl)*52.195) 0 #3a1c40,calc(var(--tl)*75.362) calc(var(--tl)*52.769) 0 #3a1c40,calc(var(--tl)*76.181) calc(var(--tl)*53.343) 0 #3a1c40,calc(var(--tl)*77.000) calc(var(--tl)*53.916) 0 #3a1c40,calc(var(--tl)*77.819) calc(var(--tl)*54.490) 0 #3a1c40,calc(var(--tl)*78.639) calc(var(--tl)*55.063) 0 #3a1c40,calc(var(--tl)*79.458) calc(var(--tl)*55.637) 0 #3a1c40,calc(var(--tl)*80.277) calc(var(--tl)*56.210) 0 #3a1c40,calc(var(--tl)*81.096) calc(var(--tl)*56.784) 0 #3a1c40,calc(var(--tl)*81.915) calc(var(--tl)*57.358) 0 #3a1c40,calc(var(--tl)*82.734) calc(var(--tl)*57.931) 0 #3a1c40,calc(var(--tl)*83.554) calc(var(--tl)*58.505) 0 #3a1c40,calc(var(--tl)*84.373) calc(var(--tl)*59.078) 0 #3a1c40,calc(var(--tl)*85.192) calc(var(--tl)*59.652) 0 #3a1c40,calc(var(--tl)*86.011) calc(var(--tl)*60.226) 0 #3a1c40,calc(var(--tl)*86.830) calc(var(--tl)*60.799) 0 #3a1c40,calc(var(--tl)*87.649) calc(var(--tl)*61.373) 0 #3a1c40,calc(var(--tl)*88.468) calc(var(--tl)*61.946) 0 #3a1c40,calc(var(--tl)*89.288) calc(var(--tl)*62.520) 0 #3a1c40,calc(var(--tl)*90.107) calc(var(--tl)*63.093) 0 #3a1c40,calc(var(--tl)*90.926) calc(var(--tl)*63.667) 0 #3a1c40,calc(var(--tl)*91.745) calc(var(--tl)*64.241) 0 #3a1c40,calc(var(--tl)*92.564) calc(var(--tl)*64.814) 0 #3a1c40,calc(var(--tl)*93.383) calc(var(--tl)*65.388) 0 #3a1c40,calc(var(--tl)*94.202) calc(var(--tl)*65.961) 0 #3a1c40,calc(var(--tl)*95.022) calc(var(--tl)*66.535) 0 #3a1c40,calc(var(--tl)*95.841) calc(var(--tl)*67.108) 0 #3a1c40,calc(var(--tl)*96.660) calc(var(--tl)*67.682) 0 #3a1c40,calc(var(--tl)*97.479) calc(var(--tl)*68.256) 0 #3a1c40,calc(var(--tl)*98.298) calc(var(--tl)*68.829) 0 #3a1c40,calc(var(--tl)*99.117) calc(var(--tl)*69.403) 0 #3a1c40,calc(var(--tl)*99.937) calc(var(--tl)*69.976) 0 #3a1c40,calc(var(--tl)*100.756) calc(var(--tl)*70.550) 0 #3a1c40,calc(var(--tl)*101.575) calc(var(--tl)*71.123) 0 #3a1c40,calc(var(--tl)*102.394) calc(var(--tl)*71.697) 0 #3a1c40,calc(var(--tl)*103.213) calc(var(--tl)*72.271) 0 #3a1c40,calc(var(--tl)*104.032) calc(var(--tl)*72.844) 0 #3a1c40,calc(var(--tl)*104.851) calc(var(--tl)*73.418) 0 #3a1c40,calc(var(--tl)*105.671) calc(var(--tl)*73.991) 0 #3a1c40,calc(var(--tl)*106.490) calc(var(--tl)*74.565) 0 #3a1c40,calc(var(--tl)*107.309) calc(var(--tl)*75.139) 0 #3a1c40,calc(var(--tl)*108.128) calc(var(--tl)*75.712) 0 #3a1c40,calc(var(--tl)*108.947) calc(var(--tl)*76.286) 0 #3a1c40,calc(var(--tl)*109.766) calc(var(--tl)*76.859) 0 #3a1c40,calc(var(--tl)*110.586) calc(var(--tl)*77.433) 0 #3a1c40,calc(var(--tl)*111.405) calc(var(--tl)*78.006) 0 #3a1c40,calc(var(--tl)*112.224) calc(var(--tl)*78.580) 0 #3a1c40,calc(var(--tl)*113.043) calc(var(--tl)*79.154) 0 #3a1c40,calc(var(--tl)*113.862) calc(var(--tl)*79.727) 0 #3a1c40,calc(var(--tl)*114.681) calc(var(--tl)*80.301) 0 #3a1c40,calc(var(--tl)*115.500) calc(var(--tl)*80.874) 0 #3a1c40,calc(var(--tl)*116.320) calc(var(--tl)*81.448) 0 #3a1c40,calc(var(--tl)*117.139) calc(var(--tl)*82.021) 0 #3a1c40,calc(var(--tl)*117.958) calc(var(--tl)*82.595) 0 #3a1c40,calc(var(--tl)*118.777) calc(var(--tl)*83.169) 0 #3a1c40,calc(var(--tl)*119.596) calc(var(--tl)*83.742) 0 #3a1c40,calc(var(--tl)*120.415) calc(var(--tl)*84.316) 0 #3a1c40,calc(var(--tl)*121.235) calc(var(--tl)*84.889) 0 #3a1c40,calc(var(--tl)*122.054) calc(var(--tl)*85.463) 0 #3a1c40,calc(var(--tl)*122.873) calc(var(--tl)*86.036) 0 #3a1c40;transition:--tl 900ms var(--ease) 300ms}
.ds-b3.is-grown{--tl:.0034em}
.ds-b3.is-scrub{transition:none}
.ds-name{font-size:clamp(44px,6.4vw,112px);color:#3a1c40;letter-spacing:-.02em}
/* sections */
.ds-sec{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,96px);align-items:center;
  min-height:100vh;min-height:100svh;max-width:1320px;margin:0 auto;padding:clamp(88px,12vh,140px) var(--gutter);color:var(--sx-ink)}
.ds-flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.ds-flip .ds-text{order:2}
.ds-wm{position:absolute;z-index:0;left:-.04em;top:50%;font-size:clamp(170px,32vw,540px);font-weight:900;line-height:.8;letter-spacing:-.05em;white-space:nowrap;opacity:.07;pointer-events:none;
  transform:translate3d(0,calc(-50% + var(--so,0) * -22vh),0)}
.ds-flip .ds-wm{left:auto;right:-.04em}
[data-lang=en] .ds-wm{font-size:clamp(120px,20vw,340px);opacity:.055}
.ds-text{position:relative;z-index:1}
.ds-k{font-weight:700;font-size:14px;letter-spacing:.04em;opacity:.72;margin-bottom:14px}
.ds-text h2{font-size:clamp(38px,4.8vw,80px);font-weight:900;line-height:1.08;letter-spacing:-.02em}
[data-lang=en] .ds-text h2{font-size:clamp(34px,4.2vw,70px);line-height:1.04}
.ds-text>p:last-child{margin-top:20px;font-size:clamp(16px,1.25vw,19px);line-height:1.75;max-width:27em;opacity:.86}
[data-lang=en] .ds-text>p:last-child{line-height:1.55}
.js .ds-text[data-r]>*{opacity:0;transform:translate3d(0,30px,0)}
.js .ds-text[data-r].is-in>*{opacity:1;transform:none;transition:opacity 700ms var(--sx-ease),transform 900ms var(--sx-ease)}
.js .ds-text[data-r].is-in>:nth-child(2){transition-delay:90ms}.js .ds-text[data-r].is-in>:nth-child(3){transition-delay:180ms}
.ds-vis{position:relative;z-index:1;min-width:0;transform:translate3d(0,calc(var(--so,0) * 7vh),0)}
@media (max-width:900px){
  .ds-sec,.ds-flip{grid-template-columns:minmax(0,1fr);min-height:auto;padding-block:clamp(72px,11vh,110px)}
  .ds-flip .ds-text{order:0}
  .ds-vis{transform:none}
}
.stage{position:relative;border-radius:32px;overflow:hidden;background:#ffcc66}
/* angle */
.av svg{width:100%;height:auto;aspect-ratio:6/5;border-radius:32px;background:#ffcc66;overflow:hidden;touch-action:pan-y;cursor:crosshair}
.av-sh{fill:#3a1c40}
.av-lit{fill:#fff4e2}
.av-sun{fill:#fff4e2;stroke:#fff4e2;stroke-width:0;transition:stroke-width 300ms}
.av.is-drag .av-sun{stroke-width:10;stroke-opacity:.35}
.av-gauge path{fill:none;stroke:#3a1c40;stroke-width:2.4;stroke-linecap:round}
.av-g0{opacity:.4}
.av-deg{font-size:22px;font-weight:900;fill:#3a1c40;font-variant-numeric:tabular-nums}
.av.is-off .av-deg{fill:#a3312b}
.av-hint{margin-top:14px;font-size:14px;opacity:.75}
/* length */
.lv{display:grid;gap:18px}
.lv-stage{position:relative;aspect-ratio:7/5}
.ds-length{overflow:clip}
.lv-mark{position:absolute;left:10%;top:12%;width:32%;height:auto}
.lv-mark .mk-sh{fill:#3a1c40}.lv-mark .mk-lit{fill:#fff4e2}
.lv-ctl{display:grid;gap:10px;font-weight:700;font-size:15px}
.lv-ctl b{font-variant-numeric:tabular-nums}
.sx input[type=range]{width:100%;height:44px;accent-color:#3a1c40;cursor:pointer;background:transparent}
/* solid */
.sv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,26px)}
.sv-card{position:relative;aspect-ratio:4/5;border-radius:32px;overflow:hidden;background:#ffcc66;display:flex;align-items:flex-end;padding:20px;font-weight:700;font-size:15px}
.sv-card::before{content:"";position:absolute;left:18%;top:16%;width:38%;aspect-ratio:1;border-radius:22%;background:#fff4e2}
.sv-blur::before{box-shadow:18px 26px 38px rgba(58,28,64,.5);animation:sx-wobble 3.2s ease-in-out infinite}
@keyframes sx-wobble{50%{box-shadow:26px 36px 56px rgba(58,28,64,.34)}}
.sv-solid{--bs:0px}
.sv-solid::before{box-shadow:var(--long)}
.sv.is-in .sv-solid{--bs:4px;transition:--bs 900ms var(--ease) 300ms}
.sv-card span{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:99px;background:#fff4e2;color:#3a1c40}
.sv-blur span::before{content:"✕";font-weight:900;color:#a3312b}
.sv-solid span::before{content:"✓";font-weight:900}
.sv-blur{opacity:.9;filter:saturate(.7)}
/* day / night */
.cv{display:grid;gap:18px}
.cv-stage{position:relative;aspect-ratio:7/4;border-radius:32px;overflow:hidden;background:#ffcc66;transition:background-color 600ms var(--ease)}
.cv-mark{position:absolute;left:12%;top:16%;width:30%;height:auto}
.cv-mark .mk-sh{fill:#3a1c40;transition:fill 600ms var(--ease)}
.cv-mark .mk-lit{fill:#fff4e2}
.cv-moon{position:absolute;right:12%;top:16%;width:22px;height:22px;border-radius:50%;background:#fff4e2;opacity:0;transform:translateY(20px);transition:opacity 600ms,transform 600ms var(--sx-ease)}
.cv[data-mode=night] .cv-stage{background:#2e3f7a}
.cv[data-mode=night] .cv-mark .mk-sh{fill:#0b1030}
.cv[data-mode=night] .cv-moon{opacity:1;transform:none}
.cv-bar{display:flex;height:14px;border-radius:7px;overflow:hidden;gap:3px}
.cv-bar i{display:block;flex:var(--f) 1 0;transition:flex-grow 600ms var(--ease),background-color 600ms}
.cv-bar .b1{--f:50;background:#ffcc66}.cv-bar .b2{--f:25;background:#3a1c40}.cv-bar .b3{--f:25;background:#fff4e2;box-shadow:inset 0 0 0 1px #eadcc4}.cv-bar .b4{--f:0;background:#ffcc66}
.cv[data-mode=night] .b1{--f:55;background:#2e3f7a}.cv[data-mode=night] .b2{--f:25;background:#0b1030}.cv[data-mode=night] .b3{--f:15}.cv[data-mode=night] .b4{--f:5}
.seg2{display:inline-flex;padding:4px;border-radius:26px;box-shadow:inset 0 0 0 1.5px currentColor;width:max-content;max-width:100%}
.seg2 button{position:relative;overflow:hidden;min-height:44px;min-width:88px;padding:0 20px;border:0;border-radius:22px;background:transparent;font-weight:700;font-size:15px;cursor:pointer;transition:background-color 250ms,color 250ms}
.seg2 button[aria-pressed=true]{background:#3a1c40;color:#ffcc66}
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px}
.sw{position:relative;overflow:hidden;display:grid;gap:2px;justify-items:start;text-align:left;padding:12px;border:0;border-radius:20px;background:color-mix(in srgb,currentColor 6%,transparent);cursor:pointer;transition:background-color 200ms}
.sw:hover{background:color-mix(in srgb,currentColor 12%,transparent)}
.sw-c{width:36px;height:36px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(58,28,64,.18);margin-bottom:6px}
.sw-n{font-weight:700;font-size:14px}
.sw code{font-size:13px;opacity:.75;font-family:inherit}
.sw-status{min-height:1.4em;font-size:14px;font-weight:700}
/* icons */
.iv{display:flex;justify-content:center;flex-wrap:wrap;gap:clamp(10px,2vw,28px);padding:30px 0}
.iv-i{transition:transform 700ms var(--sx-pop);transform:translateY(calc(var(--i) * 18px - 27px)) rotate(calc(var(--i) * 4deg - 6deg))}
.iv-i .appicon,.iv-i img{width:clamp(88px,10vw,140px);height:auto;border-radius:22%}
.js .iv:not(.is-in) .iv-i{transform:translateY(80px) scale(.6);opacity:0}
.js .iv.is-in .iv-i{opacity:1;transition:transform 900ms var(--sx-pop) calc(var(--i) * 110ms),opacity 400ms calc(var(--i) * 110ms)}
.iv-i:hover{transform:translateY(-14px) rotate(0) scale(1.06)!important}
/* motion */
.mv{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:center}
.mv-curve{width:100%;height:auto;background:#fff;border-radius:28px;padding:18px;box-shadow:inset 0 0 0 1.5px #eadcc4}
.mv-grid{fill:none;stroke:#eadcc4;stroke-width:2}
.mv-path{fill:none;stroke:#3a1c40;stroke-width:4;stroke-linecap:round}
.mv-dot{fill:#ffcc66;stroke:#3a1c40;stroke-width:3}
.mv-demo{position:relative;aspect-ratio:1;border-radius:28px;background:#ffcc66;overflow:hidden}
.mv-box{--bs:0px;position:absolute;left:24%;top:22%;width:34%;aspect-ratio:1;border-radius:22%;background:#fff4e2;opacity:0;box-shadow:var(--long)}
.mv.is-play .mv-box{--bs:3px;opacity:1;transition:--bs 320ms cubic-bezier(.3,.7,.2,1),opacity 320ms cubic-bezier(.3,.7,.2,1)}
.mv-code{grid-column:1/-1;font-family:inherit;font-weight:700;font-size:15px}
.mv .sx-btn{grid-column:1/-1;justify-self:start}
/* sky palette */
.skv{display:grid;grid-template-rows:repeat(4,1fr);grid-auto-flow:column;gap:clamp(4px,.6vw,8px);aspect-ratio:14/4.6}
.skv i{display:block;border-radius:clamp(6px,.9vw,12px);background:linear-gradient(180deg,var(--g) 0%,var(--g) 55%,var(--h) 100%)}
.js .skv:not(.is-in) i{transform:scale(.3);opacity:0}
.js .skv.is-in i{transition:transform 700ms var(--sx-pop) var(--d),opacity 300ms var(--d)}
.skv-link{margin-top:22px;color:var(--sx-ink)}
/* next page */
.ds-next{max-width:1320px;margin:0 auto;padding:clamp(72px,10vh,120px) var(--gutter) clamp(96px,14vh,160px)}
.ds-next .dtile{min-height:clamp(320px,30vw,440px)}

/* LK Sans hero */
.ls-float{position:absolute;inset:0;z-index:0;pointer-events:none}
.ls-float span{position:absolute;left:var(--x);top:var(--y);font-size:clamp(64px,10vw,170px);font-weight:var(--w);line-height:1;opacity:.13;
  transform:translate3d(calc(var(--mx,0) * var(--dep,30px)),calc(var(--my,0) * var(--dep,30px)),0);animation:sx-float 7s ease-in-out var(--d) infinite alternate}
.ls-float span:nth-child(2n){--dep:-44px}.ls-float span:nth-child(3n){--dep:60px}
@keyframes sx-float{to{translate:0 -26px}}
.ls-title{display:flex;margin:0;font-size:clamp(92px,17vw,290px);line-height:.92;letter-spacing:-.03em;white-space:pre}
.ls-title span{display:inline-block;font-weight:900;animation:sx-wave 2.8s ease-in-out calc(var(--i) * -.22s) infinite}
@keyframes sx-wave{0%,100%{font-weight:300}50%{font-weight:900}}
/* weights */
.wv{display:grid;gap:18px}
.wv-sample{font-size:clamp(32px,4.6vw,72px);line-height:1.2;transition:font-weight 0s}
.wv-num{font-size:clamp(110px,15vw,240px);line-height:1;color:#fff4e2;--cast:#3a1c40;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.wv-stops{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.wt{position:relative;overflow:hidden;display:grid;gap:2px;justify-items:start;padding:14px;border:0;border-radius:20px;background:color-mix(in srgb,currentColor 8%,transparent);text-align:left;cursor:pointer;transition:background-color 250ms,color 250ms}
.wt b{font-size:34px;line-height:1}
.wt span{font-size:14px;font-weight:700}
.wt small{font-size:12px;opacity:.75}
.wt[aria-pressed=true]{background:#3a1c40;color:#ffcc66}
/* the LK glyph */
.gv{display:grid;gap:22px}
.gv-type{font-size:clamp(44px,5.8vw,96px);font-weight:900;line-height:1.05;letter-spacing:-.02em;white-space:nowrap}
.gv-lk{display:inline-grid;vertical-align:bottom}
.gv-a,.gv-b{grid-area:1/1;transition:opacity 500ms var(--sx-ease),transform 700ms var(--sx-emph),filter 500ms}
.gv-b{opacity:0;transform:translateY(40%) scale(.8);filter:blur(6px)}
.gv-lk.is-glyph .gv-a{opacity:0;transform:translateY(-40%) scale(.8);filter:blur(6px)}
.gv-lk.is-glyph .gv-b{opacity:1;transform:none;filter:none;color:#ffcc66}
.gv-play{display:flex;flex-wrap:wrap;gap:10px}
.gv-play input{flex:1 1 220px;min-height:56px;padding:0 20px;border:0;border-radius:16px 16px 4px 4px;background:color-mix(in srgb,currentColor 10%,transparent);color:inherit;font:inherit;font-size:18px;box-shadow:inset 0 -2px 0 currentColor}
.gv-play input:focus{outline:none;box-shadow:inset 0 -3px 0 #ffcc66}
.gv-out{font-size:clamp(36px,5vw,80px);font-weight:700;line-height:1.2;min-height:1.3em;overflow-wrap:anywhere}
[data-ds=glyph] .sx-btn{background:#ffcc66;box-shadow:calc(var(--bs)*0.819) calc(var(--bs)*0.574) 0 #1c0d20,calc(var(--bs)*1.638) calc(var(--bs)*1.147) 0 #1c0d20,calc(var(--bs)*2.457) calc(var(--bs)*1.721) 0 #1c0d20,calc(var(--bs)*3.277) calc(var(--bs)*2.294) 0 #1c0d20,calc(var(--bs)*4.096) calc(var(--bs)*2.868) 0 #1c0d20}
/* scripts */
.scv{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:center}
.scv-glyph{display:grid;place-items:center;aspect-ratio:1;border-radius:32px;background:#fff;box-shadow:inset 0 0 0 1.5px #eadcc4;font-size:clamp(110px,15vw,240px);line-height:1;font-weight:700;overflow:hidden}
.scv-glyph span{grid-area:1/1;opacity:0;transform:translateY(30%);transition:opacity 500ms,transform 700ms var(--sx-emph)}
.scv-glyph span.is-on{opacity:1;transform:none}
.scv-glyph span.is-out{opacity:0;transform:translateY(-30%)}
.scv-n{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.scv-n li{display:grid;gap:2px}
.scv-n b{font-size:clamp(34px,4vw,60px);font-weight:300;line-height:1;font-variant-numeric:tabular-nums}
.scv-n span{font-size:14px;opacity:.8}
/* local forms */
.lv2{display:grid;gap:22px;justify-items:start}
.lv2-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;width:100%;font-size:clamp(54px,7.6vw,128px);line-height:1}
.lv2-row span{display:grid;place-items:center;aspect-ratio:1;border-radius:22px;background:#fff4e2;color:#3a1c40;
  background-image:linear-gradient(rgba(58,28,64,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(58,28,64,.09) 1px,transparent 1px);background-size:50% 50%;background-position:center;
  transition:transform 380ms var(--sx-emph) calc(var(--i,0) * 50ms),opacity 300ms calc(var(--i,0) * 50ms),filter 300ms calc(var(--i,0) * 50ms)}
.lv2-row.is-swap span{transform:scale(.72) rotate(-6deg);opacity:0;filter:blur(8px)}
@media (max-width:600px){.lv2-row{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* in use */
.uv{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.uv-temp{position:relative;display:grid;align-content:end;gap:4px;aspect-ratio:1;border-radius:32px;overflow:hidden;padding:22px;background:linear-gradient(180deg,var(--g) 0%,var(--g) 55%,var(--h) 100%);color:#3a1c40}
.uv-temp span{font-size:clamp(90px,10vw,160px);font-weight:300;line-height:1;color:#fff4e2}
.uv-temp small{font-size:14px;font-weight:700}
.uv-ui{display:grid;align-content:center;gap:8px;padding:24px;border-radius:32px;background:#fff4e2;color:#3a1c40}
.uv-ui b{font-size:26px}
.uv-ui span{font-size:15px;opacity:.8}
.uv-lic{grid-column:1/-1;font-size:14px;opacity:.85}
@media (max-width:600px){.scv,.mv,.uv{grid-template-columns:minmax(0,1fr)}.wv-stops{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- reduced motion */
@media (prefers-reduced-motion:reduce){
  .sx-night,.sx-tx{display:none!important}
  .js .sx-slogan .sl-line>span,.js .sx-hero .sx-eyebrow,.js .sx-intro,.js .sx-ctas,.js .sx-h span,.js .sx-tile[data-r]:not(.is-in),.js .dtile[data-r]:not(.is-in),
  .js .ds-text[data-r]>*,.js .iv:not(.is-in) .iv-i,.js .skv:not(.is-in) i{opacity:1!important;transform:none!important;clip-path:none!important}
  .js .sx-mark .mk-lit{opacity:1}
  .ls-title span,.dt-aa,.dt-cjk,.ls-float span,.th-rain,.sv-blur::before{animation:none!important}
  .ls-title span{font-weight:900}
  .sx-leaving main{transform:none}
  html.sx-arrive body::after{display:none}
}

/* ---------- footnotes */
sup.fn{font-size:.6em;line-height:0;vertical-align:super;margin-left:.15em;font-weight:700;letter-spacing:0}
sup.fn a{display:inline-block;min-width:1.4em;padding:.15em .25em;margin:-.15em -.1em;border-radius:6px;text-align:center;text-decoration:none;color:inherit;opacity:.8}
sup.fn a:hover,sup.fn a:focus-visible{opacity:1;background:color-mix(in srgb,currentColor 14%,transparent)}
.sx-notes{width:100%;max-width:1320px;margin:0 auto;padding:28px 0 40px;border-top:1px solid color-mix(in srgb,currentColor 22%,transparent);text-align:left;font-size:12.5px;line-height:1.75;color:inherit}
[data-lang=en] .sx-notes{line-height:1.6}
.sx-notes h2{font-size:13px;font-weight:700;margin-bottom:10px;opacity:.9}
.sx-notes ol{margin:0;padding-left:1.6em;display:grid;gap:4px;opacity:.78}
.sx-notes li{padding:2px 6px;margin-left:-6px;border-radius:6px;transition:background-color 600ms}
.sx-notes li:target{background:color-mix(in srgb,currentColor 14%,transparent);opacity:1}
.sx-notes p{margin-top:10px;opacity:.65}
.ds-end{max-width:1320px;margin:0 auto;padding:0 var(--gutter);color:var(--sx-ink)}
.ds-end .ds-next{padding-inline:0}

/* ---------- LK Sans: wide sections and type that runs off the page */
.ds-wide{grid-template-columns:minmax(0,1fr);align-content:center;gap:clamp(28px,5vh,56px)}
.ds-wide .ds-text{max-width:760px}
.ds-band{order:3;grid-column:1/-1;width:100vw;margin-left:calc(50% - 50vw);overflow:clip;pointer-events:none}
.pg{display:grid;gap:clamp(4px,1vh,10px);margin-top:clamp(24px,5vh,64px)}
.pg-row{display:flex;align-items:baseline;gap:24px;white-space:nowrap;font-size:clamp(40px,6.4vw,112px);line-height:1.08;font-weight:var(--w);letter-spacing:-.015em;
  transform:translate3d(calc(var(--so,0) * var(--dir) * 18vw - 10vw),0,0)}
.pg-row small{flex:none;font-size:13px;font-weight:700;letter-spacing:.02em;opacity:.7;width:8em}
/* Latin inspector */
.lt{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,3vw,44px);align-items:start}
.lt-stage{position:sticky;top:96px;display:grid;gap:14px}
.lt-big{--F:clamp(200px,24vw,360px);position:relative;height:calc(var(--F) * 1.25);border-radius:32px;background:#fff4e2;color:#3a1c40;overflow:hidden}
.lt-g{position:absolute;left:0;right:0;top:0;text-align:center;font-size:var(--F);line-height:1.25;font-weight:var(--lw,400);transition:transform 420ms var(--sx-pop),opacity 200ms}
.lt-g.is-swap{transform:translateY(8%) scale(.92);opacity:0;transition-duration:120ms}
.lt-l{position:absolute;left:0;right:0;height:0;border-top:1.5px dashed rgba(58,28,64,.28)}
.lt-l b{position:absolute;left:14px;top:-1.7em;font-size:11px;font-weight:700;opacity:.6}
.lt-cap{top:calc(var(--F) * .252)}.lt-x{top:calc(var(--F) * .455)}.lt-base{top:calc(var(--F) * .985);border-top-style:solid;border-color:rgba(58,28,64,.45)}
.lt-meta{display:flex;gap:14px;align-items:baseline;font-size:15px}
.lt-meta b{font-size:28px}
.lt-meta span{opacity:.7;font-variant-numeric:tabular-nums}
.lt-w button[aria-pressed=true]{background:#ffcc66;color:#3a1c40}
.lt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(46px,4.6vw,64px),1fr));gap:6px}
.lt-c{aspect-ratio:1;border:0;border-radius:14px;background:color-mix(in srgb,currentColor 8%,transparent);font-size:clamp(22px,2.2vw,32px);line-height:1;cursor:pointer;transition:background-color 200ms,color 200ms,transform 300ms var(--sx-pop)}
.lt-c:hover{transform:translateY(-3px);background:color-mix(in srgb,currentColor 16%,transparent)}
.lt-c[aria-pressed=true]{background:#ffcc66;color:#3a1c40}
.lt-c:focus-visible{outline:3px solid currentColor;outline-offset:2px}
@media (max-width:900px){.lt{grid-template-columns:minmax(0,1fr)}.lt-stage{position:relative;top:0}.lt-big{--F:min(60vw,300px)}}
/* figures */
.fg{display:grid;gap:clamp(16px,3vh,28px)}
.fg-clock{font-size:clamp(72px,11vw,190px);font-weight:300;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.fg-cells{display:flex;flex-wrap:wrap;font-size:clamp(40px,5vw,80px);line-height:1.1;font-weight:700}
.fg-cells span{display:inline-block;box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 35%,transparent);margin-right:-1px}
.fg-temps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.fg-temps li{display:grid;gap:4px;padding:14px 12px;border-radius:20px;background:color-mix(in srgb,currentColor 8%,transparent)}
.fg-temps span{font-size:13px;opacity:.75}
.fg-temps b{font-size:clamp(26px,2.8vw,40px);font-weight:300;font-variant-numeric:tabular-nums}
.fg-count{font-size:clamp(40px,5vw,84px);font-weight:900;line-height:1;font-variant-numeric:tabular-nums}
.fg-count span{display:inline-block;padding:0 .1em;box-shadow:inset 0 -.12em 0 #ffcc66}
/* accents */
.ac{position:relative;display:grid;min-height:clamp(170px,22vw,320px)}
.ac-w{grid-area:1/1;display:grid;align-content:center;gap:8px;opacity:0;transform:translateY(24px);transition:opacity 500ms,transform 700ms var(--sx-emph)}
.ac-w.is-on{opacity:1;transform:none}
.ac-w b{font-size:clamp(54px,12vw,210px);font-weight:900;line-height:1;letter-spacing:-.03em}
.ac-w small{font-size:15px;font-weight:700;opacity:.7}
.acc-strip{display:grid;gap:6px;margin-top:clamp(16px,4vh,48px)}
.acc-strip p{white-space:nowrap;font-size:clamp(44px,6vw,104px);line-height:1.12;font-weight:300;letter-spacing:.02em}
.acc-strip p span{display:inline-block;animation:sx-marq 60s linear infinite}
.acc-strip .acc-lo span{animation-direction:reverse;font-weight:700}
@keyframes sx-marq{to{transform:translateX(-50%)}}
@media (max-width:600px){.fg-temps{grid-template-columns:repeat(3,minmax(0,1fr))}.fg-temps li:nth-child(n+4){display:none}}
@media (prefers-reduced-motion:reduce){.acc-strip p span,.th-rain{animation:none!important}.pg-row{transform:none}.js .th-in[data-r] .th-zh span{opacity:1;transform:none;filter:none}}
