/* Kridona portfolio — paper and ink, one hot colour, real screens thrown on the table. Phone first. */
@font-face{font-family:'Jakarta';font-style:normal;font-weight:400 800;font-display:swap;src:url('/f/f-Jakarta-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Jakarta';font-style:normal;font-weight:400 800;font-display:swap;src:url('/f/f-Jakarta-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url('/f/f-InstrumentSerif-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url('/f/f-InstrumentSerif-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Geist';font-style:normal;font-weight:300 800;font-display:swap;src:url('/f/f-Geist-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Geist';font-style:normal;font-weight:300 800;font-display:swap;src:url('/f/f-Geist-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{--paper:#F1EEE6;--ink:#0D0D0C;--hot:#FF4B1F;--mute:#6A665D;--line:rgba(13,13,12,.17);--ghost:rgba(13,13,12,.13);--g:18px;
  --sans:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;--disp:'Jakarta','Geist',system-ui,sans-serif;--serif:'Instrument Serif',Georgia,serif}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.5 var(--sans);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
.page{overflow-x:hidden;overflow-x:clip}
img,video{max-width:100%}
h1,h2,h3,p,ol,ul,figure,fieldset{margin:0;padding:0}
a{color:inherit}
section{position:relative;isolation:isolate}
.dark{background:var(--ink);color:var(--paper);--mute:#9B978D;--line:rgba(241,238,230,.2);--ghost:rgba(241,238,230,.15)}
::selection{background:var(--hot);color:#fff}
:focus-visible{outline:2px solid var(--hot);outline-offset:3px}

/* ── small parts ─────────────────────────────────────────── */
.ar{width:.82em;height:.82em;flex:none;display:inline-block;vertical-align:-.04em}
.lnk{display:inline-flex;align-items:center;gap:8px;font:700 16px/1.2 var(--disp);letter-spacing:-.01em;text-decoration:none;padding:6px 0 5px;border-bottom:2px solid currentColor}
.lnk .ar{color:var(--hot)}
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:14px;padding:17px 20px 17px 22px;background:var(--ink);color:var(--paper);font:800 16px/1 var(--disp);letter-spacing:-.01em;text-decoration:none;border:0;border-radius:3px;cursor:pointer}
.btn .ar{color:var(--hot)}
.dark .btn{background:var(--paper);color:var(--ink)}
.k{font:500 13px/1.3 var(--sans);letter-spacing:.02em;color:var(--mute)}
.d{font-size:17px;line-height:1.48}
.mark{display:block;width:24px;height:20px;background:currentColor;-webkit-mask:url('/kridona-mark.svg') center/contain no-repeat;mask:url('/kridona-mark.svg') center/contain no-repeat}
.brand{display:inline-flex;align-items:center;gap:10px;font:800 13px/1 var(--disp);letter-spacing:.22em;text-decoration:none}
/* a real screen in a thin dark body */
.ph{display:block;border:5px solid #0D0D0C;border-radius:26px;background:#0D0D0C;overflow:hidden;box-shadow:0 26px 48px -14px rgba(13,13,12,.5)}
.ph img,.ph video{display:block;width:100%;height:auto;border-radius:20px;background:#161614}
.dark .ph{border-color:#2D2C29;box-shadow:0 28px 60px -12px rgba(0,0,0,.8)}
/* a line of a heading that rises out of its own mask */
.ln{display:block;overflow:hidden;padding:.14em .06em .16em;margin:-.14em -.06em -.16em}
.ln>span{display:block}

/* until the script takes over, the first screen waits (the class is set and dropped by a timer in the head) */
.pre .hero .ln>span{transform:translateY(132%)}
.pre .hero .eyebrow,.pre .hero .lede,.pre .hero-p,.pre .hc{opacity:0}

/* ── top ─────────────────────────────────────────────────── */
.top{position:absolute;inset:0 0 auto 0;z-index:9;display:flex;justify-content:space-between;align-items:center;padding:20px var(--g)}
.top-a{display:inline-flex;align-items:center;gap:7px;font:700 14px/1 var(--disp);text-decoration:none;padding:8px 0;border-bottom:2px solid currentColor}
.top-a .ar{color:var(--hot)}

/* ── hero ────────────────────────────────────────────────── */
.hero{padding:96px 0 0}
.hero-t{padding:0 var(--g);position:relative;z-index:3}
.eyebrow{font:500 12.5px/1.35 var(--sans);letter-spacing:.03em;color:var(--mute);max-width:24em}
.h1{font:800 clamp(74px,21.4vw,132px)/.86 var(--disp);letter-spacing:-.052em;margin-top:18px}
.h1 em{font:italic 400 1.12em/.8 var(--serif);letter-spacing:-.035em;color:var(--hot)}
.h1 .ln-i{margin-top:-.2em;padding-left:.04em}
.lede{margin-top:20px;max-width:22em;font:400 19px/1.36 var(--sans);letter-spacing:-.01em}
.hero-p{margin-top:24px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.heap{position:relative;height:108vw;margin-top:18px;z-index:2}
.hc{position:absolute;left:50%;top:50%;width:50vw;height:75vw;margin:-37.5vw 0 0 -25vw;border-radius:15px;overflow:hidden;background:#161614;box-shadow:0 0 0 1px rgba(13,13,12,.55),0 20px 38px -10px rgba(13,13,12,.42);will-change:transform;backface-visibility:hidden}
.hc img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}
/* where the cards lie when nothing moves them */
.hc:nth-child(1){translate:0 0;rotate:-4deg;scale:1.06;z-index:8}
.hc:nth-child(2){translate:66% -12%;rotate:9deg;scale:.95;z-index:7}
.hc:nth-child(3){translate:-66% -6%;rotate:-10deg;scale:.93;z-index:6}
.hc:nth-child(4){translate:38% 24%;rotate:5deg;scale:.9;z-index:5}
.hc:nth-child(5){translate:-40% 22%;rotate:-7deg;scale:.88;z-index:4}
.hc:nth-child(6){translate:6% -26%;rotate:3deg;scale:.86;z-index:3}
.hc:nth-child(n+7){opacity:0;z-index:1}
.heap.on .hc{translate:none;rotate:none;scale:none}
.counts{position:relative;z-index:4;display:grid;grid-template-columns:1fr 1fr;background:var(--paper);border-top:2px solid var(--ink)}
.counts a{display:block;padding:16px var(--g) 15px;text-decoration:none;border-bottom:1px solid var(--line)}
.counts a:nth-child(odd){border-right:1px solid var(--line)}
.counts b{display:block;font:800 64px/.88 var(--disp);letter-spacing:-.06em}
.counts span{display:block;margin-top:8px;font-size:14px;color:var(--mute)}

/* ── section head ────────────────────────────────────────── */
.web,.shops,.apps,.games,.prices,.steps{padding:104px 0 108px}
.sh{position:relative;padding:0 var(--g)}
.sh-n{font:italic 400 24px/1 var(--serif);color:var(--hot)}
.sh-h{margin-top:10px;font:800 clamp(48px,13.6vw,150px)/.9 var(--disp);letter-spacing:-.055em;position:relative;z-index:1}
.sh-c{position:absolute;right:-.07em;top:-.34em;z-index:0;font:800 clamp(170px,50vw,520px)/.8 var(--disp);letter-spacing:-.07em;color:transparent;-webkit-text-stroke:1.5px var(--ghost);pointer-events:none;user-select:none;white-space:nowrap}
.sh-t{position:relative;z-index:1;margin-top:20px;max-width:27em;color:var(--mute);font-size:17px;line-height:1.46}
.dark .sh-t{color:#B9B5AB}

/* ── web: three large ────────────────────────────────────── */
.feat{position:relative;margin-top:78px}
.feat-s{position:relative;height:140vw}
.feat-d{position:absolute;top:0;width:96vw;max-width:none;height:auto;border-radius:9px;box-shadow:0 0 0 1px rgba(13,13,12,.3),0 24px 44px -18px rgba(13,13,12,.4)}
.feat-l .feat-d{left:19vw;rotate:2.2deg}
.feat-r .feat-d{right:19vw;rotate:-2deg}
.feat-p{position:absolute;top:17vw;width:56vw;z-index:2}
.feat-l .feat-p{left:5vw;rotate:-4deg}
.feat-r .feat-p{right:5vw;rotate:3.6deg}
.feat-x{padding:0 var(--g);margin-top:30px}
.feat-l .feat-x{padding-left:calc(var(--g) + 8vw)}
.feat-x h3{margin-top:8px;font:800 clamp(38px,10.6vw,84px)/.94 var(--disp);letter-spacing:-.05em}
.feat-x .d{margin-top:12px;max-width:21em}
.feat-x .lnk{margin-top:18px}

/* ── web: the other fifteen, sideways ────────────────────── */
.strip-w{margin-top:104px}
.strip-h{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:16px var(--g) 0;margin:0 0 0;border-top:2px solid var(--ink)}
.strip-h span{font:800 30px/1 var(--disp);letter-spacing:-.045em}
.strip-h i{font:italic 400 20px/1 var(--serif);color:var(--mute)}
.strip-h i::after{content:' →';font-style:normal;color:var(--hot)}
.strip{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;scrollbar-width:none;padding:38px 0 26px}
.strip::-webkit-scrollbar{display:none}
.strip-t{display:flex;align-items:flex-start;gap:24px;width:max-content;padding:0 calc(var(--g) + 6px)}
.si{flex:none;display:block;width:56vw;max-width:270px;text-decoration:none;scroll-snap-align:center}
.si:nth-child(4n+1){rotate:-1.7deg}
.si:nth-child(4n+2){margin-top:46px;rotate:1.5deg}
.si:nth-child(4n+3){margin-top:14px;rotate:-.9deg}
.si:nth-child(4n){margin-top:64px;rotate:2.3deg}
.si-n{display:block;margin-top:16px;font:italic 400 18px/1 var(--serif);color:var(--hot)}
.si b{display:block;margin-top:4px;font:800 22px/1.1 var(--disp);letter-spacing:-.035em}
.si-d{display:block;margin-top:5px;font-size:14px;line-height:1.35;color:var(--mute)}

/* ── shops ───────────────────────────────────────────────── */
.shop{margin-top:92px}
.shop-hd{padding:0 var(--g);position:relative;z-index:3}
.shop-r .shop-hd{text-align:right}
.shop-hd h3{margin-top:4px;font:italic 400 clamp(58px,16.4vw,170px)/.92 var(--serif);letter-spacing:-.035em}
.shop-s{position:relative;height:152vw;margin-top:22px}
.shop-d{position:absolute;top:0;width:124vw;border-radius:9px;overflow:hidden;box-shadow:0 0 0 1px rgba(241,238,230,.16)}
.shop-d img{display:block;width:100%;height:auto}
.shop-l .shop-d{left:-7vw;rotate:-1.7deg}
.shop-r .shop-d{right:-7vw;rotate:1.7deg}
.shop-p{position:absolute;top:32vw;width:54vw;z-index:2}
.shop-l .shop-p{right:6vw;rotate:4deg}
.shop-r .shop-p{left:6vw;rotate:-4deg}
.shop-x{padding:0 var(--g);margin-top:26px;max-width:26em}
.shop-r .shop-x{margin-left:auto}
.shop-x .lnk{margin-top:18px}

/* ── apps ────────────────────────────────────────────────── */
.apps-s{position:relative;height:108vw;margin-top:56px}
.ap{position:absolute;inset:0;z-index:1;clip-path:inset(-14% -14% -14% 114%);transition:clip-path .85s cubic-bezier(.72,0,.18,1)}
.ap.on{z-index:3;clip-path:inset(-14% -14% -14% -14%)}
.ap.was{z-index:2;clip-path:inset(-14% -14% -14% -14%);transition:none}
.ap-d{position:absolute;left:9vw;top:0;width:112vw;max-width:none;height:auto;border-radius:9px;rotate:1.6deg;box-shadow:0 0 0 1px rgba(13,13,12,.28),0 26px 46px -18px rgba(13,13,12,.42)}
.ap-p{position:absolute;left:5vw;top:24vw;width:38vw;rotate:-4deg;border-width:4px;border-radius:20px}
.ap-p img{border-radius:15px}
.apps-x{padding:0 var(--g);margin-top:30px}
.apps-now{display:grid}
.an{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s .35s}
.an.on{opacity:1;visibility:visible;transition:opacity .45s .3s}
.an .d{margin-top:8px;max-width:25em}
.an .lnk{margin-top:16px}
.apps-l{list-style:none;margin-top:34px;border-bottom:1px solid var(--line)}
.al{position:relative;display:grid;grid-template-columns:34px 1fr;align-items:baseline;gap:2px 0;width:100%;padding:15px 0 14px;background:none;border:0;border-top:1px solid var(--line);border-radius:0;text-align:left;color:inherit;font:inherit;cursor:pointer}
.al i{font:italic 400 17px/1 var(--serif);color:var(--mute)}
.al b{font:800 28px/1 var(--disp);letter-spacing:-.045em;transition:color .3s}
.al span{grid-column:2;font-size:14px;color:var(--mute)}
.al::after{content:'';position:absolute;left:0;top:-1px;height:2px;width:100%;background:var(--hot);transform:scaleX(0);transform-origin:0 50%}
.al.on i,.al.on b{color:var(--hot)}
.al.on::after{transform:scaleX(1)}
.apps.auto .al.on::after{animation:fill 4.4s linear both}
@keyframes fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ── games ───────────────────────────────────────────────── */
.games-g{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;align-items:start;padding:0 var(--g);margin-top:58px}
.game-b{margin-top:84px}
.game-p{rotate:-2.4deg;border-width:4px;border-radius:22px}
.game-b .game-p{rotate:2.6deg}
.game-p video{border-radius:17px;aspect-ratio:600/1230;object-fit:cover}
.game h3{margin-top:22px;font:800 26px/1 var(--disp);letter-spacing:-.045em}
.game .d{margin-top:8px;font-size:15px;line-height:1.42;color:#C9C5BB}
.game .lnk{margin-top:14px}

/* ── prices ──────────────────────────────────────────────── */
.pl{list-style:none;margin:50px var(--g) 0;border-bottom:2px solid var(--ink)}
.pl li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:baseline;gap:0 8px;padding:19px 0 17px;border-top:1px solid var(--line)}
.pl li:first-child{border-top:2px solid var(--ink);padding:24px 0 22px}
.pl-n{font:italic 400 16px/1 var(--serif);color:var(--hot)}
.pl-t b{display:block;font:800 20px/1.12 var(--disp);letter-spacing:-.035em}
.pl-t i{display:block;margin-top:4px;font-style:normal;font-size:14px;line-height:1.3;color:var(--mute)}
.pl-p{white-space:nowrap;text-align:right}
.pl-p b{font:800 32px/1 var(--disp);letter-spacing:-.055em;font-variant-numeric:tabular-nums}
.pl-p small{font:500 13px/1 var(--sans);color:var(--mute)}
.pl li:first-child .pl-t b{font-size:24px}
.pl li:first-child .pl-p b{font-size:54px;color:var(--hot)}

/* ── steps ───────────────────────────────────────────────── */
.steps{padding-top:0}
.st{list-style:none;margin:46px var(--g) 0}
.st li{display:grid;grid-template-columns:54px minmax(0,1fr);gap:0 10px;align-items:start;padding:22px 0 24px;border-top:1px solid var(--line)}
.st li:nth-child(2){margin-left:7vw}
.st li:nth-child(3){margin-left:14vw}
.st li:nth-child(4){margin-left:21vw}
.st-n{font:italic 400 84px/.74 var(--serif);color:var(--hot)}
.st h3{font:800 23px/1.08 var(--disp);letter-spacing:-.04em}
.st p{margin-top:8px;font-size:16px;line-height:1.45;color:var(--mute)}
.note{margin:64px var(--g) 0;padding-top:20px;border-top:2px solid var(--ink);max-width:36em;font-size:16px;line-height:1.5;color:#3E3B35}
.note b{color:var(--ink);font-family:var(--disp);font-weight:800}

/* ── ask ─────────────────────────────────────────────────── */
.ask{padding:100px 0 0}
.ask-h{padding:0 var(--g)}
.ask-t{margin-top:22px}
.ask .lede{color:#D8D4CA}
.f{padding:0 var(--g);margin-top:46px}
.f-w{border:0;min-width:0}
.f-w legend,.f-l>span{display:block;padding:0;font:500 13px/1.3 var(--sans);letter-spacing:.02em;color:var(--mute)}
.f-l>span i{font-style:normal;opacity:.7}
.f-l>span i::before{content:'· '}
.f-ws{display:flex;flex-wrap:wrap;gap:4px 20px;margin-top:10px}
.f-ws label{position:relative;cursor:pointer}
.f-ws input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.f-ws span{display:block;padding:5px 0 6px;font:800 27px/1.1 var(--disp);letter-spacing:-.045em;color:rgba(241,238,230,.36);border-bottom:3px solid transparent;transition:color .2s,border-color .2s}
.f-ws input:checked+span{color:var(--paper);border-color:var(--hot)}
.f-ws input:focus-visible+span{outline:2px solid var(--hot);outline-offset:4px}
.f-l{display:block;margin-top:28px}
.f-l input,.f-l textarea{display:block;width:100%;margin-top:2px;padding:8px 0 11px;background:none;border:0;border-bottom:1px solid rgba(241,238,230,.36);border-radius:0;color:var(--paper);font:500 20px/1.3 var(--sans);-webkit-appearance:none;appearance:none}
.f-l textarea{resize:vertical;min-height:112px}
.f-l input:focus,.f-l textarea:focus{outline:none;border-bottom-color:var(--hot);box-shadow:0 1px 0 var(--hot)}
.f-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.f-m{min-height:1.5em;margin-top:18px;font-size:16px;color:var(--hot)}
.f-m.ok{color:var(--paper);font:800 24px/1.15 var(--disp);letter-spacing:-.035em}
.btn-l{width:100%;margin-top:6px;padding:23px 22px;font-size:20px}
.btn-l[disabled]{opacity:.55}
.f-s{margin-top:16px;font-size:13px;line-height:1.45;color:var(--mute)}
.foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:92px;padding:22px var(--g) calc(26px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
.foot p{display:flex;gap:18px;font-size:13px;color:var(--mute)}

/* ── from the tablet up ──────────────────────────────────── */
@media (min-width:900px){
  :root{--g:4vw}
  body{font-size:18px}
  .top{padding:26px var(--g)}
  .hero{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);align-items:center;padding-top:118px}
  .hero-t{padding-right:0}
  .h1{font-size:clamp(120px,12.6vw,250px);white-space:nowrap}
  .lede{font-size:23px;margin-top:30px}
  .hero-p{margin-top:34px}
  .heap{height:46vw;margin-top:0}
  .hc{width:19vw;height:28.5vw;margin:-14.25vw 0 0 -9.5vw;border-radius:18px}
  .counts{grid-column:1/-1;grid-template-columns:repeat(4,1fr);margin-top:10px}
  .counts a{padding:22px var(--g) 22px;border-right:1px solid var(--line)}
  .counts a:last-child{border-right:0}
  .counts b{font-size:clamp(76px,7.4vw,130px)}
  .counts span{font-size:16px}
  .web,.shops,.apps,.games,.prices{padding:170px 0 180px}
  .steps{padding:0 0 180px}
  .sh-n{font-size:30px}
  .sh-h{font-size:clamp(110px,11.4vw,210px)}
  .sh-c{font-size:clamp(360px,37vw,720px);top:-.26em}
  .sh-t{font-size:21px;margin-top:30px}
  .d{font-size:19px}
  .lnk{font-size:18px}

  .feat{display:grid;grid-template-columns:minmax(0,62fr) minmax(0,38fr);align-items:center;margin-top:120px}
  .feat-r{grid-template-columns:minmax(0,38fr) minmax(0,62fr)}
  .feat-r .feat-s{order:2}
  .feat-s{height:46vw}
  .feat-d{width:50vw;top:2vw}
  .feat-l .feat-d{left:9vw}
  .feat-r .feat-d{right:9vw}
  .feat-p{width:18vw;top:5vw;border-width:7px;border-radius:34px}
  .feat-p video{border-radius:26px}
  .feat-l .feat-p{left:4vw}
  .feat-r .feat-p{right:4vw}
  .feat-x,.feat-l .feat-x{padding:0 var(--g);margin-top:0}
  .feat-r .feat-x{text-align:right}
  .feat-r .feat-x .d{margin-left:auto}
  .feat-x h3{font-size:clamp(44px,5.4vw,104px)}

  .strip-w{margin-top:170px}
  .strip-h span{font-size:44px}
  .strip-h i{font-size:24px}
  .strip{padding:50px 0 34px}
  .strip-t{gap:44px;padding:0 var(--g)}
  .si{width:clamp(150px,24vh,250px);max-width:none}
  .strip.pin{overflow:visible}

  .shop{display:grid;grid-template-columns:minmax(0,60fr) minmax(0,40fr);grid-template-areas:'s h' 's x';align-content:center;column-gap:0;margin-top:150px}
  .shop-r{grid-template-columns:minmax(0,40fr) minmax(0,60fr);grid-template-areas:'h s' 'x s'}
  .shop-hd{grid-area:h;align-self:end;padding:0 var(--g) 0 0}
  .shop-r .shop-hd{padding:0 0 0 var(--g)}
  .shop-l .shop-hd{margin-left:-6vw}
  .shop-r .shop-hd{margin-right:-6vw}
  .shop-hd h3{font-size:clamp(66px,7.3vw,150px);white-space:nowrap}
  .shop-s{grid-area:s;height:44vw;margin-top:0}
  .shop-d{width:56vw}
  .shop-l .shop-d{left:-3vw}
  .shop-r .shop-d{right:-3vw}
  .shop-p{width:17vw;top:6vw;border-width:7px;border-radius:34px}
  .shop-p video{border-radius:26px}
  .shop-l .shop-p{right:5vw}
  .shop-r .shop-p{left:5vw}
  .shop-x{grid-area:x;align-self:start;padding:0 var(--g) 0 0;margin-top:26px}
  .shop-r .shop-x{padding:0 0 0 var(--g);margin-left:0;text-align:left}
  .shop-r .shop-hd{text-align:left}

  .apps-g{display:grid;grid-template-columns:minmax(0,60fr) minmax(0,40fr);align-items:center;margin-top:90px}
  .apps-s{height:42vw;margin-top:0}
  .ap-d{left:7vw;width:54vw;top:1vw}
  .ap-p{left:3vw;top:9vw;width:15.5vw;border-width:6px;border-radius:30px}
  .ap-p img{border-radius:23px}
  .apps-x{padding:0 var(--g) 0 2vw;margin-top:0}
  .al{grid-template-columns:44px auto 1fr;gap:0 14px;padding:16px 0}
  .al b{font-size:clamp(30px,2.7vw,44px)}
  .al span{grid-column:3;text-align:right;font-size:15px}

  .games{display:grid;grid-template-columns:minmax(0,40fr) minmax(0,60fr);align-items:start}
  .games-g{grid-template-columns:repeat(2,minmax(0,330px));gap:0 5vw;justify-content:end;margin:0;padding:0 calc(var(--g) + 2vw) 0 0}
  .game-b{margin-top:150px}
  .game h3{font-size:38px}
  .game .d{font-size:17px}

  .pl{margin-top:84px}
  .pl li{grid-template-columns:60px minmax(0,1fr) auto;padding:26px 0 24px}
  .pl li:first-child{padding:34px 0 30px}
  .pl-n{font-size:22px}
  .pl-t{display:flex;align-items:baseline;gap:22px}
  .pl-t b{font-size:clamp(30px,3vw,48px)}
  .pl-t i{font-size:17px;margin-top:0}
  .pl-p b{font-size:clamp(46px,4.6vw,78px)}
  .pl-p small{font-size:17px}
  .pl li:first-child .pl-t b{font-size:clamp(38px,3.8vw,60px)}
  .pl li:first-child .pl-p b{font-size:clamp(84px,8.4vw,150px)}

  .st{margin-top:80px;max-width:1040px;margin-left:var(--g)}
  .st li{grid-template-columns:110px minmax(0,1fr);padding:30px 0 34px}
  .st li:nth-child(2){margin-left:8vw}
  .st li:nth-child(3){margin-left:16vw}
  .st li:nth-child(4){margin-left:24vw}
  .st-n{font-size:150px}
  .st h3{font-size:36px}
  .st p{font-size:19px;max-width:28em}
  .note{margin-top:110px;margin-left:calc(var(--g) + 24vw);font-size:18px}

  .ask{padding-top:170px}
  .ask-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;column-gap:3vw}
  .ask-h{position:sticky;top:60px}
  .ask-t{font-size:clamp(100px,9.4vw,190px)}
  .f{margin-top:14px;padding-left:0}
  .f-ws span{font-size:34px}
  .f-l input,.f-l textarea{font-size:22px}
  .btn-l{width:auto;min-width:320px;margin-top:14px}
  .foot{margin-top:170px;padding:28px var(--g) 34px}
  .foot p{font-size:14px;gap:28px}
}

@media (prefers-reduced-motion:reduce){
  .ap,.an{transition:none}
  .apps.auto .al.on::after{animation:none}
}