/* 구성: 첫 화면의 문장과 "만드는 과정"이 한 흐름. 오른쪽 고정 무대 하나가 처음엔 광고 장면 사진, 내려가면 그 광고 영상이 된다.
   부품은 앱 규칙을 따른다: 주 단추·선택은 연두 알약, 보조 단추는 면 알약, 카드는 테두리 없이 면 밝기로, 입력 문장은 연두 말풍선. */
:root{
  --bg:#ffffff; --ink:#0d0d10; --sub:#5c5c64; --faint:#6b6b73; --line:#e4e4e9;
  --lime:#c6ff00; --limeInk:#0d0d10; --hover:#e6e6eb; --tint:#f4f4f6;
  --pill:#efeff2; --pill2:#e4e4e9; --composer:#ffffff; --composerLine:#e4e4e9; --caret:#0d0d10; --frame:#ffffff; --chip:rgba(13,13,16,.84); --chipInk:#ffffff; --scrim:rgba(5,5,7,.74); --shadow:rgba(0,0,0,.35);
  --sans:"Source Sans 3","Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR","Segoe UI",system-ui,sans-serif;
  --gutter:clamp(20px,3.2vw,48px);
  --top:60px;
  --r:22px; --rs:14px; /* 영상·사진 모서리: 큰 것 22, 작은 것 14 */
  color-scheme:light;
}
/* 어두운 모드: 앱(HostGlass)과 같은 바탕·면 3단계·글자 3단계·연두 */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#050507; --ink:#f7f7f8; --sub:#a3a3aa; --faint:#85858d; --line:rgba(255,255,255,.11);
  --lime:#c6ff00; --limeInk:#050507; --hover:#26262c; --tint:#121216;
  --pill:#1b1b20; --pill2:#26262c; --composer:#1b1b20; --composerLine:rgba(255,255,255,.11); --caret:#c6ff00; --frame:#121216; --chip:rgba(5,5,7,.78); --chipInk:#f7f7f8; --scrim:rgba(0,0,0,.8); --shadow:rgba(0,0,0,.75); --band:.12em; --bandY:100%;
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#050507; --ink:#f7f7f8; --sub:#a3a3aa; --faint:#85858d; --line:rgba(255,255,255,.11);
  --lime:#c6ff00; --limeInk:#050507; --hover:#26262c; --tint:#121216;
  --pill:#1b1b20; --pill2:#26262c; --composer:#1b1b20; --composerLine:rgba(255,255,255,.11); --caret:#c6ff00; --frame:#121216; --chip:rgba(5,5,7,.78); --chipInk:#f7f7f8; --scrim:rgba(0,0,0,.8); --shadow:rgba(0,0,0,.75); --band:.12em; --bandY:100%;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:76px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.75 var(--sans);word-break:keep-all;line-break:strict;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.24em}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:inherit;touch-action:manipulation;border-radius:0}
img{max-width:100%}
h1,h2,h3,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:1240px;margin:0 auto;padding-inline:var(--gutter)}
[lang]:not([lang="ko"]){word-break:normal;overflow-wrap:break-word}
:lang(ja){word-break:auto-phrase}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* 가리킴·누름·포커스 한 벌: 가리키면 밑줄이 굵어지고, 누르면 검정 반전. */
.pt{position:relative;text-decoration:underline;text-underline-offset:.24em;text-decoration-thickness:1px;transition:text-decoration-thickness .12s}
.pt::after{content:"";position:absolute;inset:-10px -6px}
@media (hover:hover){.pt:hover{text-decoration-thickness:2px}}
.pt:active{background:var(--ink);color:var(--bg);text-decoration-color:transparent}
.pt:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* 머리줄 */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--bg)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:var(--top)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;letter-spacing:-.01em}
.brand img{width:28px;height:28px;border-radius:7px;display:block}
.brand small{font-weight:400;color:var(--faint);font-size:14px;letter-spacing:0}
.nav{display:flex;gap:26px;font-size:15px;margin-left:auto;position:relative}
.nav a{text-decoration:none;color:var(--sub);padding-block:4px;transition:color .15s}
.nav a:hover{color:var(--ink)}
.nav a[aria-current]{color:var(--ink);font-weight:600}
.nav .bar{position:absolute;bottom:0;height:2px;background:var(--ink);left:0;width:0;transition:left .28s cubic-bezier(.3,.8,.3,1),width .28s cubic-bezier(.3,.8,.3,1);opacity:0}
.nav .bar.on{opacity:1}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:var(--bg);padding:10px 18px;font-weight:600;font-size:15px;text-decoration:none;line-height:1.2;border:1px solid var(--ink);transition:background .12s,color .12s}
@media (hover:hover){.btn:hover{background:var(--bg);color:var(--ink)}}
.btn:active{background:var(--hover);color:var(--ink)}
.btn.big{padding:15px 24px;font-size:17px}
/* 머리줄: 구글 공식 배지(구글 배지 생성기 안내대로 원본 이미지 주소, 색·모양 변경 없음). 이미지에 투명 여백이 있어 그만큼 바깥 여백을 당긴다 */
.gp{display:block;margin-right:-10px;border-radius:8px;transition:transform .12s}
.gp img{display:block;height:54px;width:auto}
.gp:active{transform:scale(.97)}
.gp:focus-visible{outline:2px solid var(--ink);outline-offset:-6px}
@media (max-width:860px){.gp img{height:48px}}
@media (max-width:860px){.nav{display:none}}

/* ───── 이야기: 첫 화면 + 만드는 과정이 한 기둥, 오른쪽에 고정 무대 ───── */
.story{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(28px,5vw,88px);align-items:start;padding-block:clamp(24px,3.4vw,44px) clamp(28px,4vw,56px)}
.story .col{min-width:0;grid-column:1}
.story .col.c1{grid-row:1}.story .col.c2{grid-row:2}
.hero h1{font-size:clamp(17px,1.7vw,22px);font-weight:600;line-height:1.55;letter-spacing:-.01em;max-width:34em}
.typed{margin-top:clamp(20px,3vw,36px);min-width:0;display:flex;flex-direction:column}
.typed:focus-visible{outline-offset:10px}
.sentence{font-size:clamp(30px,4.4vw,66px);line-height:1.17;font-weight:300;letter-spacing:-.04em;max-width:16em;text-wrap:pretty}
.ink{background:linear-gradient(var(--lime),var(--lime)) 0 var(--bandY,96%)/0% var(--band,.34em) no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.ink.rtl{background-position:100% var(--bandY,96%)}
.ink.sent{background-size:100% var(--band,.34em);transition:background-size .7s cubic-bezier(.25,.7,.2,1)}
.ink.still{transition:none}
.caret{display:inline-block;width:2px;height:1.15em;background:var(--caret);vertical-align:-.2em;margin-inline-start:1px}
/* 첫 화면 = 앱 채팅 한 장면.
   입력창·마이크·보내기는 광고 양식(광고 작업공간 UI_Input_Vector_v001): 어두운 입력창 #1c1c20 + 연두 테두리, 단추는 입력창 바깥 오른쪽 원, 입력창 세로 가운데.
   보낸 말은 앱과 같은 내 말풍선(MainActivity ChatBubble: 오른쪽, Surface3 #26262C, 흰 6% 테두리, 네 모서리 같은 둥글기, 글 #F7F7F8, 살짝 떠오르며 등장).
   보내면 입력창은 비고(안내 문구·회색 보내기) 말풍선이 위로 올라온다. 연두는 테두리·커서·켜진 보내기에만. 실제로 입력되는 칸은 아니다(aria-hidden). */
.chat{--fieldBg:#1c1c20;--fieldInk:#f4f4f5;--fieldPh:#85858b;--offBtn:#28292d;--adLime:#c5ff00;--bubBg:#26262c;--bubInk:#f7f7f8;
  display:flex;flex-direction:column;justify-content:center;gap:.28em;margin-top:clamp(18px,2.4vw,28px);font-size:clamp(28px,3.5vw,52px);line-height:1.2;font-weight:300;letter-spacing:-.035em}
.thread{display:flex;justify-content:flex-end;min-width:0}
.sentence.bub{font-size:1em;line-height:1.2;font-weight:300;letter-spacing:-.035em;max-width:86%;padding:.42em .62em;background:var(--bubBg);color:var(--bubInk);border-radius:.62em;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),inset 0 1px 0 rgba(255,255,255,.05);text-wrap:pretty}
/* 입력 중에는 말풍선 자리를 빼서 입력창이 칸 가운데에서 시작한다. 보내면 말풍선이 떠오르고 입력창은 아래로 미끄러진다 */
.chat:not(.sent) .thread{display:none}
.chat.sent.anim .bub{animation:bubIn .34s cubic-bezier(.2,.8,.25,1)}
@keyframes bubIn{from{opacity:0;transform:translateY(.4em) scale(.97)}to{opacity:1;transform:none}}
.msg.slide{transition:transform .34s cubic-bezier(.2,.8,.25,1)}
.msg{display:flex;align-items:center;gap:.3em}
.mtx{flex:1;min-width:0;padding:.42em .7em;background:var(--fieldBg);color:var(--fieldInk);box-shadow:inset 0 0 0 max(2px,.06em) var(--adLime);border-radius:1.1em;text-wrap:pretty}
.mtx .phd{color:var(--fieldPh);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* 안내 문구는 한 줄 */
.mtx #txt:not(:empty)~.phd{display:none}
.mtx .caret{width:max(3px,.08em);height:1.1em;background:var(--adLime);vertical-align:-.18em}
.acts{display:flex;gap:.3em;flex:none}
.ib{width:clamp(48px,1.75em,96px);height:clamp(48px,1.75em,96px);border-radius:50%;display:grid;place-items:center;background:var(--fieldBg);color:var(--fieldInk);transition:background .16s,color .16s,transform .12s}
.ib svg{width:44%;height:44%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ib.send{background:var(--offBtn);color:var(--fieldPh)}
.ib.send.on{background:var(--adLime);color:#141510}
.ib.send.press{transform:scale(.84)}
.mz{font-weight:300;line-height:1.2;letter-spacing:-.035em;text-wrap:pretty}
.caret.blink{animation:blink .45s steps(1) 2}
.caret.off{display:none}
@keyframes blink{50%{opacity:0}}
.typed figcaption{margin-top:14px;display:flex;flex-direction:column;gap:10px;min-width:0;flex:1}
.typed .tools{margin-top:auto;padding-top:8px}
.meaning{margin-top:14px;color:var(--sub);max-width:40em;font-size:16.5px;opacity:0;transform:translateY(4px);transition:opacity .35s,transform .35s}
.meaning.on{opacity:1;transform:none}
.tools{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 22px;font-size:15px}
.typed .who{font-weight:600;font-size:15px}
@media (min-width:861px){.typed .who{display:none}}
.hthumb,.hcap,.now{display:none}
.tools .count{font-size:13px;color:var(--faint);font-variant-numeric:tabular-nums;display:none;position:relative;padding-bottom:3px}
.tools .rl{color:var(--sub);font-size:14px}
.places{display:flex;flex-wrap:wrap;gap:2px 18px;font-size:14px;max-width:46em}
.places button{color:var(--sub);padding-block:2px;position:relative;transition:color .15s}
.places button::after{content:"";position:absolute;inset:-6px -4px}
@media (hover:hover){.places button:hover{color:var(--ink)}}
.places button[aria-current]{color:var(--ink);font-weight:600;box-shadow:inset 0 -2px 0 var(--line)}
.places button[aria-current]::before,.count::before{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:left}
.typed.run .places button[aria-current]::before,.typed.run .count::before{animation:roll var(--hold,4200ms) linear both}
.typed.hold .places button[aria-current]::before,.typed.hold .count::before{animation-play-state:paused}
.typed.manual .places button[aria-current]::before,.typed.manual .count::before{animation:none;transform:none}
@keyframes roll{to{transform:scaleX(1)}}
.places button:active{background:var(--ink);color:var(--bg)}
.keys{font-size:13.5px;color:var(--sub)}
.hero-foot{margin-top:clamp(28px,3.4vw,44px);display:grid;gap:18px;max-width:40em}
.lede{font-size:18px;color:var(--ink);max-width:31em}
.cta-row{display:flex;flex-wrap:wrap;gap:18px 28px;align-items:center}
.langbar{position:relative;z-index:60;background:#d4f26a;color:#111;text-align:center;font-weight:700;font-size:15px;line-height:1.4;padding:10px 16px}.langbar a{color:#111;text-decoration:underline;text-underline-offset:3px}
.qr{display:none;align-items:center;gap:14px;font-size:14px;color:var(--sub);max-width:24em;line-height:1.55}.qr span:last-child{min-width:12em}
.qr #qr{display:block;width:100px;height:100px;flex:none;padding:6px;background:#fff;border-radius:12px} /* 어두운 모드에서도 읽히게 흰 바탕 */
.qr svg{display:block;width:88px;height:88px}
@media (hover:hover) and (min-width:900px){.qr{display:flex}}
.facts-row{display:flex;flex-wrap:wrap;gap:8px;font-size:14.5px;color:var(--sub)}
.facts-row li{padding:6px 13px;border-radius:999px;background:var(--pill);line-height:1.35}

/* 무대: 사진 ↔ 영상 */
.stage{--vw:min(380px,calc((100svh - 310px)*9/16)); /* 영상 아래 설명·광고 고르기·고지(약 210px)까지 한 화면에 들어오게 */grid-column:2;grid-row:1/span 2;position:sticky;top:76px;width:var(--vw);min-width:220px;align-self:start}
.vwrap{position:relative;aspect-ratio:9/16;background:var(--frame) center/cover no-repeat;overflow:hidden;border-radius:var(--r);isolation:isolate}
.rbtn{position:absolute;inset:0;display:block;width:100%;height:100%;cursor:pointer}
.rbtn img{position:absolute;inset:0;width:100%;height:100%;display:block;visibility:hidden}
.rbtn .r0{visibility:visible}
.vwrap.mid .r0{visibility:hidden}
.vwrap.mid .r1{visibility:visible}
.rbtn:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.vwrap #yt,.vwrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none;opacity:0;transition:opacity .4s}
.stage.video.live .vwrap #yt,.stage.video.live .vwrap iframe{opacity:1}
.stage.video .rbtn{pointer-events:none}
.stage.video .vwrap{cursor:pointer}
/* 자동 재생이 막힌 기기(아이폰 저전력 모드·사파리 자동 재생 끔 등): 유튜브 화면을 직접 눌러 시작하게 꺼내 놓는다 */
.stage.video.tap .vwrap #yt,.stage.video.tap .vwrap iframe{opacity:1;pointer-events:auto;z-index:2}
.stage.video.tap .rbtn{visibility:hidden}
.noyt #mute{visibility:hidden}
.stage.video.live .rbtn{visibility:hidden}
.rcap{display:block;margin-top:9px;font-size:13.5px;line-height:1.5;color:var(--sub);min-height:1.5em}
/* 영상 조작(재생·소리)은 영상 위 왼쪽 아래 동그란 아이콘, 광고 고르기는 영상 아래 이름표 + 두 칸 전환 막대 — 모양부터 다르게 */
.vctl{position:absolute;left:10px;bottom:10px;z-index:3;display:flex;gap:8px}
.vb{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(5,5,7,.62);color:#f7f7f8;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);transition:background .15s,transform .1s}
@media (hover:hover){.vb:hover{background:rgba(5,5,7,.82)}}
.vb:active{transform:scale(.92)}
.vb:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.vb svg{width:20px;height:20px;fill:currentColor}
.vb .s{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.vb .i-pause,.vb.playing .i-play,.vb .i-on,.vb.on .i-off{display:none}
.vb.playing .i-pause,.vb.on .i-on{display:block}
.vpick{margin-top:12px}
.vlab{font-size:12.5px;color:var(--faint);margin-bottom:6px}
/* 광고 고르기: 광고가 계속 늘어나므로 옆으로 넘겨 보는 썸네일 줄. 고른 광고는 연두 테두리 */
.vsel{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding:2px;margin:-2px}
.vsel::-webkit-scrollbar{display:none}
.vk{flex:none;scroll-snap-align:start;display:flex;align-items:center;gap:10px;width:156px;padding:6px 10px 6px 6px;border-radius:14px;background:var(--btnBg);color:var(--btnSub);text-align:start;transition:box-shadow .15s,color .15s,transform .1s}
.vk img{flex:none;width:30px;height:53px;object-fit:cover;border-radius:7px;background:#121216}
.vt{display:grid;min-width:0;line-height:1.3}
.vt b{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vt small{font-size:12px;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (hover:hover){.vk:hover{color:var(--btnInk)}}
.vk:active{transform:scale(.97)}
.vk[aria-pressed="true"]{color:var(--btnInk);box-shadow:inset 0 0 0 2px var(--lime)}
.vk:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.vnote{margin-top:12px;font-size:13.5px;line-height:1.6;color:var(--sub)}
.vnote.s{display:none}

/* 기록 */
.ph{margin-top:clamp(64px,8vw,120px)}
.ph h2{font-size:clamp(22px,2.2vw,28px);line-height:1.3;font-weight:700;letter-spacing:-.02em}
.ph .lead{margin-top:10px;color:var(--sub);font-size:17px;max-width:36em}
.log{position:relative;margin-top:clamp(24px,3vw,40px)}
.log>li{position:relative;display:grid;grid-template-columns:3.4em minmax(0,1fr);column-gap:20px;padding-bottom:clamp(24px,3vw,40px)}
.log .t{font-size:13.5px;color:var(--faint);padding-top:.34em;font-variant-numeric:tabular-nums;text-align:right;align-self:start;position:relative;transition:color .2s}
.log .t::after{content:"";position:absolute;inset:-8px -4px}
@media (hover:hover){.log .t:hover{color:var(--ink);text-decoration:underline}}
.log>li.on .t{color:var(--ink);font-weight:700}
.log h3{font-size:20px;line-height:1.5;font-weight:600;letter-spacing:-.015em;grid-column:2;color:var(--sub);position:relative;transition:color .25s;padding-bottom:2px}
.log .hb{display:inline-flex;align-items:center;gap:.4em;position:relative;font-weight:inherit;color:inherit;transition:transform .2s cubic-bezier(.3,.8,.3,1)}
.log .hb::before{content:"";width:0;height:0;border-style:solid;border-width:.32em 0 .32em .52em;border-color:transparent transparent transparent currentColor;margin-left:-.92em;opacity:0;transition:opacity .2s}
.log .hb::after{content:"";position:absolute;inset:-8px -10px}
@media (hover:hover){.log .hb:hover{color:var(--ink);transform:translateX(.92em)}.log .hb:hover::before{opacity:1}}
.log>li.on .hb::before{opacity:1}.log>li.on .hb{transform:translateX(.92em)}
.log .hb:active{transform:translateX(.92em) scale(.98)}
.log .hb:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.log .prog{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--ink);transform:scaleX(0);transform-origin:left;opacity:0}
.log>li.on .prog{opacity:1}
.log .body,.log .note,.log .q{grid-column:2}
.log .body{margin-top:2px;max-width:34em;color:var(--sub);transition:color .25s}
.log>li.on h3,.log>li.on .body{color:var(--ink)}
.log .q{margin-top:10px;padding:11px 16px;border-radius:10px;background:var(--lime);color:var(--limeInk);font-weight:500;line-height:1.6;max-width:30em;font-size:17px}
.log .note{margin-top:8px;font-size:15.5px;line-height:1.7;color:var(--sub);max-width:34em}
@media (max-width:860px){
  .story{grid-template-columns:1fr;column-gap:0;padding-bottom:0}
  .story .col{grid-column:auto}.story .col.c1,.story .col.c2{grid-row:auto}
  /* 첫 화면: 채팅창·설명은 전폭, 아래에 광고 사진(왼쪽)과 나라·단추(오른쪽) */
  .typed{display:grid;grid-template-columns:min(42vw,200px) minmax(0,1fr);column-gap:18px;align-items:start}
  .typed .chat,.typed .meaning{grid-column:1/-1}
  .chat{font-size:clamp(21px,5.9vw,26px)}
  .sentence.bub{max-width:90%}
  .mtx{padding:.4em .6em;border-radius:.95em}
  .msg{gap:6px}
  .acts{gap:6px}
  .ib{width:40px;height:40px}
  .typed .meaning{margin-top:16px;font-size:15.5px;line-height:1.7}
  .hthumb{display:block;grid-column:1;margin-top:22px;position:relative;aspect-ratio:9/16;width:100%;background:var(--frame);overflow:hidden;border-radius:var(--rs);transition:transform .15s}
  .hthumb img{position:absolute;inset:0;width:100%;height:100%;display:block;visibility:hidden}
  .hthumb .h0{visibility:visible}
  .hthumb.mid .h0{visibility:hidden}.hthumb.mid .h1{visibility:visible}
  .hthumb:active{transform:scale(.97)}
  .typed figcaption{grid-column:2;margin-top:22px;gap:12px;flex:none}
  .typed .tools{margin-top:0;padding-top:0;flex-direction:column;align-items:stretch;gap:8px;display:flex}
  .typed .tools .pt{justify-content:center}
  .tools .count{display:inline-block;align-self:flex-start;margin-top:2px}
  .hcap{display:block;font-size:12.5px;line-height:1.6;color:var(--sub)}
  .places{display:none}
  .hero-foot{margin-top:48px}
  /* 만드는 과정: 옅은 바탕 띠로 구역을 가르고, 영상은 크게 위에 붙는다 */
  .ph{margin:52px calc(-1*var(--gutter)) 0;padding:36px var(--gutter) 24px;background:var(--tint)}
  .stage{grid-column:auto;grid-row:auto;--vw:min(46vw,calc(40svh*9/16));position:sticky;top:calc(var(--top) + env(safe-area-inset-top,0px));z-index:6;background:var(--tint);margin:20px calc(-1*var(--gutter)) 0;padding:10px var(--gutter) 14px;width:auto;min-width:0;display:grid;grid-template-columns:var(--vw) minmax(0,1fr);gap:10px 16px;align-items:start;align-content:start;box-shadow:0 12px 14px -14px var(--shadow)}
  .stage .vwrap{grid-row:1/8;background-color:var(--frame)}
  .stage.inproc .rbtn{display:none}
  .now{display:grid;gap:0;align-self:start}
  .now .nt{font-size:13px;color:var(--sub);font-variant-numeric:tabular-nums}
  .now .nn{font-size:21px;line-height:1.3;font-weight:700;letter-spacing:-.02em}
  .stage .rcap{display:none}
  .stage .vnote{display:none}.stage .vnote.s{display:block;margin-top:2px;font-size:12px;line-height:1.5}
  .stage .vpick{margin-top:0}
  .stage .vk{width:150px}
  .stage.inproc .vctl{position:static;gap:8px}
  .stage.inproc .vb{width:40px;height:40px;background:var(--btnBg);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
  .log{margin-top:22px}
  .log>li{grid-template-columns:2.9em minmax(0,1fr);column-gap:12px}
}

/* ───── 구역 공통 ───── */
.sec{padding-block:clamp(48px,6vw,88px)}
#world{background:var(--tint)} /* 과정(휴대폰)과 광고 벽은 옅은 바탕 띠로 구역을 가른다 */
.sec>.wrap>header{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,28em);gap:8px clamp(28px,6vw,96px);align-items:end;margin-bottom:clamp(20px,3vw,36px)}
h2{font-size:clamp(22px,2.2vw,28px);line-height:1.3;font-weight:700;letter-spacing:-.02em}
.sec .lead{margin-top:8px;color:var(--sub);font-size:16.5px;max-width:34em}
.sec .note2{color:var(--sub);font-size:14px;max-width:30em}
@media (max-width:859px){.sec>.wrap>header{grid-template-columns:1fr;gap:14px;margin-bottom:28px}}

/* 만든 앱: 같은 크기 카드 열두 장. 사진이 먼저 보이고 글은 짧게 */
.qlang{display:flex;gap:6px 20px;font-size:15.5px;margin-bottom:22px}
.qlang button{color:var(--sub);position:relative;padding-block:2px;transition:color .15s}
.qlang button::after{content:"";position:absolute;inset:-8px -6px}
@media (hover:hover){.qlang button:hover{color:var(--ink)}}
.qlang button[aria-pressed="true"]{color:var(--ink);font-weight:600;box-shadow:inset 0 -2px 0 var(--ink)}
.apps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(32px,3.4vw,48px) clamp(16px,2vw,28px)}
@media (max-width:1099px){.apps{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:860px){.apps{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}}
.app{display:flex;flex-direction:column;min-width:0}
.afr{display:block;position:relative;width:100%;aspect-ratio:9/16;background:var(--frame);overflow:hidden;border-radius:var(--rs);isolation:isolate}
.afr img{position:absolute;inset:0;display:block;width:100%;height:100%;transition:transform .35s cubic-bezier(.3,.8,.3,1)}
.afr.err img{display:none}
.afr.err{background:var(--tint)}
.afr .tm{position:absolute;left:10px;bottom:10px;display:inline-flex;align-items:center;gap:7px;padding:5px 11px 5px 10px;border-radius:999px;background:var(--chip);color:var(--chipInk);font-size:13px;font-weight:600;line-height:1.2;font-variant-numeric:tabular-nums;transition:transform .2s}
.afr .tm i{width:0;height:0;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent currentColor}
@media (hover:hover){.app:hover .afr img{transform:scale(1.035)}.app:hover .afr .tm{transform:translateY(-2px)}}
.afr:active img{transform:scale(.98)}
.atx{min-width:0;display:flex;flex-direction:column;flex:1;margin-top:14px}
.apps .head{margin-top:12px;font-size:18px;line-height:1.35;font-weight:700;letter-spacing:-.02em}
.apps .name{text-decoration:none;font-weight:inherit;text-align:start}
@media (hover:hover){.apps .name:hover{text-decoration:underline;text-underline-offset:.2em}}
.apps .cn{margin-top:2px;font-size:13.5px;color:var(--faint)}
.apps .desc{margin-top:8px;font-size:14.5px;line-height:1.6;color:var(--sub);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.apps .q{margin-top:0;padding:0 12px;border-block:9px solid var(--lime);background:var(--lime);color:var(--limeInk);font-weight:500;font-size:14.5px;line-height:1.55;border-radius:10px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;transition:opacity .2s}
.apps .q.swap{opacity:0}
.apps .row{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:12px}
.apps .cp{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:1 1 auto;min-height:38px;padding:7px 12px;border-radius:999px;background:var(--bg);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line);font-size:13.5px;font-weight:600;line-height:1.2;white-space:nowrap;transition:background .15s,color .15s,box-shadow .15s,transform .1s}
.apps .cp svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5}
@media (hover:hover){.apps .cp:hover{box-shadow:inset 0 0 0 1px var(--ink)}}
.apps .cp:active{transform:scale(.97)}
.apps .cp.done{background:var(--ink);color:var(--bg);box-shadow:none}
@media (max-width:520px){.apps .head{font-size:16px}.apps .desc{font-size:13.5px}.apps .q{font-size:13.5px;padding:0 10px;border-block-width:8px}.afr .tm{left:8px;bottom:8px;font-size:12px;padding:4px 9px 4px 8px}}

/* 나라와 지역별 광고: 사진 벽 */
.wrap.wide{max-width:1560px}
.wtools{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 26px;margin-bottom:12px;font-size:15.5px}
.conts{display:flex;flex-wrap:wrap;gap:6px 20px}
.conts button,.layers button{color:var(--sub);padding-block:2px;position:relative;transition:color .15s}
.conts button::after,.layers button::after{content:"";position:absolute;inset:-8px -6px}
.conts button span{font-size:12.5px;color:var(--faint);margin-left:5px;font-variant-numeric:tabular-nums}
@media (hover:hover){.conts button:hover,.layers button:hover{color:var(--ink)}}
.conts button[aria-pressed="true"],.layers button[aria-pressed="true"]{color:var(--ink);font-weight:600;box-shadow:inset 0 -2px 0 var(--ink)}
.conts button:active,.layers button:active{background:var(--ink);color:var(--bg)}
.layers{display:flex;flex-wrap:wrap;gap:6px 20px;align-items:baseline;font-size:15.5px;margin-bottom:18px}
.layers .lbl{color:var(--faint);font-size:14px}
.wtools input{font:inherit;background:transparent;color:var(--ink);border:0;border-bottom:1px solid var(--ink);padding:3px 2px;min-width:15em;border-radius:0}
.wtools input::placeholder{color:var(--faint)}
.wtools input:focus{outline:0;box-shadow:0 2px 0 var(--ink)}
.wcount{font-size:13px;color:var(--faint);font-variant-numeric:tabular-nums}
.wline{min-height:1.7em;font-size:15.5px;color:var(--ink);margin-bottom:12px}
@media (max-width:859px){.wline{display:none}}
.wall{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));column-gap:clamp(10px,1.2vw,16px);row-gap:clamp(22px,2.4vw,30px)}
@media (max-width:1099px){.wall{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (max-width:859px){.wall{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:599px){.wall{grid-template-columns:repeat(3,minmax(0,1fr))}}
.cell{content-visibility:auto;contain-intrinsic-size:auto 160px 340px}
.cell.wide{grid-column:span 2}
.cbtn{display:block;width:100%;position:relative}
.cbtn:focus-visible{outline:2px solid var(--ink);outline-offset:-2px;z-index:2}
.fr{position:relative;display:block;aspect-ratio:9/16;background:var(--frame);overflow:hidden;border-radius:var(--rs)}
.cell.wide .fr{aspect-ratio:16/9;background:#000}
.fr img{position:absolute;inset:0;width:100%;height:100%;display:block;visibility:hidden;transition:visibility 0s linear var(--d,0ms)}
.wall[data-layer="mid"] .cell.has1:not(.alt) .l1,.wall[data-layer="mid"] .cell.alt.has0 .l0{visibility:visible}
.wall[data-layer="mid"] .cell:not(.has1).has0 .l0{visibility:visible}
.wall[data-layer="first"] .cell.has0:not(.alt) .l0,.wall[data-layer="first"] .cell.alt.has1 .l1{visibility:visible}
.wall[data-layer="first"] .cell:not(.has0).has1 .l1{visibility:visible}
.cell.wide.has1 .l1{visibility:visible}
.cell.noimg .fr{display:none}
.cap{display:block;padding:8px 2px 0;line-height:1.4}
.cap .n{display:block;font-weight:600;font-size:14px;letter-spacing:-.01em}
.cap .c{display:block;font-size:13px;color:var(--sub)}
@media (hover:hover){.cbtn:hover .n{text-decoration:underline;text-underline-offset:.2em}}
.wall.text{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));column-gap:20px;row-gap:6px}
.wall.text .fr{display:none}
.wall.text .cap{padding:8px 0}
.more{margin-top:26px;font-weight:600}
.none{color:var(--sub)}
.worldnote{font-size:14px;color:var(--sub);max-width:30em}

/* 휴대폰 기능 */
.caps{display:flex;flex-wrap:wrap;gap:8px;max-width:62em;font-size:15px}
.caps li{display:inline-flex;align-items:center;min-height:38px;padding:7px 14px;border-radius:999px;background:var(--pill);color:var(--sub);line-height:1.3}
.caps li:has(button){padding:0;background:var(--pill2)}
.caps button{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:7px 15px;border-radius:999px;color:var(--ink);font-weight:600;text-decoration:none}
.caps button::before{content:"";position:static;width:0;height:0;border-style:solid;border-width:4.5px 0 4.5px 7px;border-color:transparent transparent transparent currentColor;inset:auto}
@media (hover:hover){.caps button:hover{background:var(--hover)}}
.caps button:active{transform:scale(.97);background:var(--hover);color:var(--ink)}
.capnote{margin-top:20px;font-size:14.5px;color:var(--sub);max-width:46em}

/* 알아 둘 것 */
.dl{display:grid;gap:0;max-width:48em}
.dl .qa{padding:18px 0;border-top:1px solid var(--line)}
.dl .qa:first-child{border-top:0;padding-top:0}
.dl dt{font-weight:700;font-size:17px;line-height:1.5;color:var(--ink)}
.dl dd{margin:6px 0 0;color:var(--sub);line-height:1.75}
.dl dd a{color:var(--ink)}

/* 바닥 */
footer{padding-block:clamp(44px,5vw,64px) 40px;background:var(--tint);font-size:14.5px;color:var(--sub)}
.ftop{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px clamp(32px,6vw,96px);align-items:start}
.fbrand{display:grid;gap:10px;justify-items:start}
.fbrand .brand{color:var(--ink)}
.ftag{color:var(--sub)}
.fmail span{color:var(--faint);margin-right:6px}
.fmail a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:1px;padding-block:6px;display:inline-block}
@media (hover:hover){.fmail a:hover{text-decoration-thickness:2px}}
.fcols{display:grid;grid-template-columns:repeat(3,auto);gap:24px clamp(28px,4vw,64px)}
.fh{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:6px}
.fcols ul{display:grid;gap:0}
.fcols a{display:inline-block;padding-block:6px;color:var(--sub);text-decoration:none}
@media (hover:hover){.fcols a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:.2em}}
.fcopy{margin-top:36px;padding-top:18px;border-top:1px solid var(--line);font-size:13px;color:var(--faint)}
@media (max-width:760px){.ftop{grid-template-columns:1fr}.fcols{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* 영상 창 */
dialog{border:0;border-radius:calc(var(--r) + 6px);padding:0;background:var(--bg);color:var(--ink);max-width:none;max-height:100svh;overflow:auto}
dialog::backdrop{background:var(--scrim)}
.dlg{padding:14px 16px 16px;display:grid;gap:10px;justify-items:center}
.dlg .head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;width:100%}
.dlg .head b{font-weight:600}
.dlg .head span.cn{color:var(--faint);font-size:14px;margin-left:8px;font-weight:400}
.dlg .x{font-size:15px}
.vbox{position:relative;background:#000 center/cover no-repeat;border-radius:var(--r);overflow:hidden;isolation:isolate;aspect-ratio:9/16;height:min(66svh,calc(100svh - 230px),680px);max-width:88vw}
.vbox.wide{aspect-ratio:16/9;height:auto;width:min(88vw,880px)}
.vbox iframe,.vbox #dyt{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;opacity:0;transition:opacity .25s}
.vbox.live iframe,.vbox.live #dyt{opacity:1}
.dnav{display:flex;gap:22px;width:100%;font-size:14.5px;min-height:1.6em}
.dlg p{font-size:15px;color:var(--sub);max-width:28em;width:100%}
.vbox.wide~p{max-width:44em}
.dlg .yt{font-size:14.5px;justify-self:start}
.fly{position:fixed;left:0;top:0;z-index:5;pointer-events:none;object-fit:cover;border-radius:var(--rs);transform-origin:0 0;will-change:transform}


/* ───── 앱과 같은 부품 ───── */
/* 단추는 앱(HostTextButton·HostIconButton)과 같은 색: 바탕 #1B1B20·글 #F7F7F8·모서리 18·높이 42, 고른 것·주 단추는 연두 바탕+검은 글. 밝은 화면에서도 같다. */
:root{--btnBg:#1b1b20;--btnHover:#26262c;--btnInk:#f7f7f8;--btnSub:#a3a3aa}
/* 주 단추: 연두 */
.btn{background:var(--lime);color:#050507;border:0;border-radius:18px;min-height:48px;padding:12px 22px;transition:filter .15s,transform .1s}
@media (hover:hover){.btn:hover{background:var(--lime);color:#050507;filter:brightness(.94)}}
.btn:active{background:var(--lime);color:#050507;transform:scale(.97)}
.btn.big{padding:15px 26px;font-size:17px}
/* 보조 단추 */
.tools .pt,.dnav .pt,.dlg .x,.more,.dlg .yt,.apps .cp,.caps button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:42px;padding:6px 15px;border-radius:18px;background:var(--btnBg);color:var(--btnInk);box-shadow:none;text-decoration:none;font-weight:600;font-size:14px;line-height:1.2;white-space:nowrap;transition:background .15s,color .15s,transform .1s}
@media (hover:hover){.tools .pt:hover,.dnav .pt:hover,.dlg .x:hover,.more:hover,.dlg .yt:hover,.apps .cp:hover,.caps button:hover{background:var(--btnHover);color:var(--btnInk);box-shadow:none}}
.tools .pt:active,.dnav .pt:active,.dlg .x:active,.more:active,.dlg .yt:active,.apps .cp:active,.caps button:active{background:var(--btnHover);color:var(--btnInk);transform:scale(.97)}
.tools .rl{color:var(--btnSub)}
.apps .cp.done{background:var(--lime);color:#050507}
.tools{gap:8px;align-items:center}
.dnav{gap:8px}
/* 고르는 칩: 꺼짐 = 어두운 바탕·회색 글, 고름 = 연두 바탕·검은 글 */
.places{gap:6px;flex-wrap:nowrap;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;position:relative;padding-block:2px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent);padding-inline:24px;margin-inline:-24px} /* 문장이 많아져(74개) 한 줄로 옆으로 넘긴다. 지금 문장 이름표가 가운데로 따라온다 */
.places::-webkit-scrollbar{display:none}
.places li{flex:none}
.places button,.qlang button,.conts button,.layers button{display:inline-flex;align-items:center;white-space:nowrap;min-height:38px;padding:6px 14px;border-radius:18px;background:var(--btnBg);color:var(--btnSub);font-weight:600;font-size:14px;line-height:1.2;box-shadow:none;transition:background .15s,color .15s,transform .1s}
@media (hover:hover){.places button:hover,.qlang button:hover,.conts button:hover,.layers button:hover{color:var(--btnInk);background:var(--btnHover)}}
.places button[aria-current],.qlang button[aria-pressed="true"],.conts button[aria-pressed="true"],.layers button[aria-pressed="true"]{background:var(--lime);color:#050507;box-shadow:none}
.places button:active,.qlang button:active,.conts button:active,.layers button:active{transform:scale(.97)}
.conts button span{color:inherit;opacity:.7}
.layers .lbl{align-self:center}
.qlang{gap:6px}
/* 자동 넘김 남은 시간: 연두 칩 안의 가는 막대 */
.places button{position:relative;overflow:hidden;isolation:isolate}
.places button::after{inset:0}
.places button[aria-current]::before{left:12px;right:12px;bottom:5px;height:2px;border-radius:2px;background:#050507;opacity:.4}
/* 카드: 테두리 없이 면 밝기 */
.app{background:var(--tint);border-radius:var(--r);padding:8px 8px 14px}
.app .atx{padding-inline:6px}
/* 입력 문장: 연두 상자 */
.apps .q,.log .q{border-radius:18px}
/* 단추 아닌 칩(휴대폰 기능의 영상 없는 항목·사실 줄)은 옅은 면 */
.caps li{border-radius:18px}
.caps li:has(button){padding:0;background:none}
.facts-row li{border-radius:18px}
/* 검색창: 앱 입력창처럼 어두운 칸, 누르면 연두 테두리 */
.wtools input{background:var(--btnBg);color:var(--btnInk);border:0;border-radius:18px;padding:10px 16px;min-width:15em;min-height:42px}
.wtools input::placeholder{color:#85858d}
.wtools input:focus{outline:0;box-shadow:inset 0 0 0 2px var(--lime)}
@media (max-width:860px){.typed .tools .pt{min-height:40px;font-size:13.5px}}


/* 제품 정보: 한눈에 보기(사양) + 할 수 있는 일 6개 + 만들 수 있는 앱 */
.pgrid{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:clamp(16px,2vw,24px);align-items:start}
.pspec{padding:20px 22px;border-radius:var(--r);background:var(--btnBg);color:var(--btnInk)}
.pst{font-size:13px;font-weight:600;color:var(--faint);margin-bottom:10px}
.pspec .pst{color:var(--btnSub)}
.pspec dl{display:grid;gap:0}
.pspec dl>div{display:grid;grid-template-columns:5.5em minmax(0,1fr);gap:12px;padding:9px 0;border-top:1px solid rgba(255,255,255,.08)}
.pspec dl>div:first-child{border-top:0}
.pspec dt{color:var(--btnSub);font-size:14px}
.pspec dd{margin:0;font-size:14.5px;font-weight:600;line-height:1.5}
.pspec dd a{color:var(--lime);text-decoration:underline;text-underline-offset:.2em}
.pfeat{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.6vw,18px)}
.pfeat li{padding:20px 22px;border-radius:var(--r);background:var(--tint)}
.pfeat h3{font-size:17px;font-weight:700;letter-spacing:-.015em;line-height:1.4}
.pfeat p{margin-top:6px;font-size:15px;line-height:1.7;color:var(--sub)}
.pex{margin-top:clamp(20px,2.6vw,32px)}
.pex ul{display:flex;flex-wrap:wrap;gap:8px}
.pex li{padding:7px 14px;border-radius:18px;background:var(--pill);color:var(--ink);font-size:14.5px;line-height:1.3}
.pex li.etc{background:none;padding-inline:4px;color:var(--sub)}
@media (max-width:980px){.pgrid{grid-template-columns:1fr}}
@media (max-width:640px){.pfeat{grid-template-columns:1fr}}

/* 언어 고르기 */
.flang{margin-top:28px}
.flang summary{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:6px 15px;border-radius:18px;background:var(--btnBg);color:var(--btnInk);font-weight:600;font-size:14px;cursor:pointer;list-style:none}
.flang summary::-webkit-details-marker{display:none}
.flang summary svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6}
.flang ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:2px 16px;margin-top:14px}
.flang a{display:inline-block;padding-block:6px;color:var(--sub);text-decoration:none;font-size:14px}
.flang a[aria-current]{color:var(--ink);font-weight:700}
@media (hover:hover){.flang a:hover{color:var(--ink);text-decoration:underline}}
/* 오른쪽→왼쪽 언어 */
[dir="rtl"] .vctl{left:auto;right:10px}
[dir="rtl"] .afr .tm{left:auto;right:10px}
[dir="rtl"] .log .t{text-align:left}
[dir="rtl"] .log .hb::before{margin-left:0;margin-right:-.92em;transform:scaleX(-1)}
[dir="rtl"] .log>li.on .hb,[dir="rtl"] .log .hb:hover{transform:translateX(-.92em)}
[dir="rtl"] .gp{margin-right:0;margin-left:-10px}
[dir="rtl"] .nav{margin-left:0;margin-right:auto}
@media (max-width:1300px){.nav a.navex{display:none}}
.dlg .dacts{display:flex;flex-wrap:wrap;gap:8px;justify-self:start}.dlg .ex{background:var(--lime);color:#0d0d10}.dlg .ex[hidden]{display:none}@media (hover:hover){.dlg .ex:hover{background:var(--lime);color:#0d0d10;filter:brightness(.95)}}
.app .exl{margin-top:10px;font-size:14.5px}.app .exl a{color:var(--ink);font-weight:600;text-underline-offset:.22em}[dir="rtl"] .app .exl a span,[dir="rtl"] .dlg .ex span{display:inline-block;transform:scaleX(-1)}
.stores{display:flex;align-items:center;gap:10px}.pb{--ih:calc(var(--bh) / var(--k));height:var(--ih)!important;width:auto!important;margin:calc(var(--ih) * var(--t) * -1) calc(var(--ih) * 2.584 * var(--l) * -1)!important;display:block}.pb-a{--k:0.768;--t:0.116;--l:0}.pb-b{--k:0.672;--t:0.164;--l:0.0635}.pb-c{--k:1;--t:0;--l:0}.asb2{height:var(--bh)!important;width:auto!important;display:block}.stores.hs{--bh:40px}.stores.hs .gp{margin:0}@media (max-width:860px){.stores.hs{--bh:36px}}@media (max-width:540px){.stores.hs{--bh:30px;gap:6px}.brand{white-space:nowrap;flex-shrink:0}.brand small{display:none}}@media (max-width:360px){.stores.hs{--bh:26px;gap:5px}}.hero-st{gap:12px;--bh:52px}.hero-st .gp{margin:0}@media (max-width:540px){.hero-st{--bh:44px}}.asbig{display:inline-flex;align-items:center}.asbig img{height:48px;width:auto;display:block}.nav a{white-space:nowrap}
.exmore{margin-top:28px;font-size:17px}.exmore a{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:10px 22px;border-radius:999px;background:var(--lime);color:#0d0d10;font-weight:700;text-decoration:none}[dir="rtl"] .exmore a span{transform:scaleX(-1)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.caret.blink{animation:none}*{transition-duration:0s!important}}