:root{
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;

  /* 색 — 라이트 */
  --bg:#FFFFFF;
  --surface:#F5F5F6;            /* 카드·칩 면 */
  --surface-hover:#EDEDEF;      /* 카드 hover */
  --surface-strong:#ECECEE;     /* 배지 면 */
  --ink:#1D1D1F;                /* 제목·본문 16.8:1 */
  --ink-2:#3F3F43;              /* 설명·칩 글자 */
  --muted:#6B6B70;              /* 라벨·푸터 링크 5.3:1 (배지 면 위에는 쓰지 않음) */
  --line:#E5E5E8;
  --ring: inset 0 0 0 1px rgba(0,0,0,.05);
  --icon-ring: 0 0 0 1px rgba(0,0,0,.06);
  --accent:#3155D4;             /* 링크 밑줄·포커스·선택 상태 6.21:1 */
  --accent-ink:#2A49B8;         /* 스토어 버튼 글자 (accent-soft 위 6.1:1) */
  --accent-soft:rgba(49,85,212,.10);
  --on-ink:#FFFFFF;
  --header-bg:rgba(255,255,255,.9);
  --star:#D99A00;               /* 장식. 의미는 sr-only 글자로 전달 */
  --game-bg:#0E100F; --game-fg:#D1F58A;   /* /game/ 타일 (SITE-DECISIONS §1 게임 허브 색) */

  /* 타입 */
  --fs-hero: clamp(34px, 1.6rem + 2.6vw, 56px);  --lh-hero:1.25; --ls-hero:-0.03em; --fw-hero:750;
  --fs-h2: clamp(24px, 1.2rem + 1.1vw, 34px);    --lh-h2:1.32;   --ls-h2:-0.025em;  --fw-h2:700;
  --fs-label:17px; --lh-label:1.5; --fw-label:600;
  --fs-card-title: clamp(18px, 1rem + .3vw, 21px); --lh-card-title:1.35; --ls-card-title:-0.015em; --fw-card-title:650;
  --fs-body:16px;  --lh-body:1.65; --ls-body:-0.01em;
  --fs-card-desc:15px; --lh-card-desc:1.55;
  --fs-meta:15px;  --lh-meta:1.5;
  --fs-chip:15px;  --fw-chip:550;
  --fs-small:14px; --lh-small:1.55;
  --fs-badge:12px; --fw-badge:650;

  /* 간격 */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
  --sp-8:32px; --sp-10:40px; --sp-14:56px; --sp-20:80px; --sp-28:112px;
  --gutter:16px; --container:1120px; --section-y:64px; --grid-gap:16px;

  /* 모양 */
  --r-card:24px; --r-card-sm:20px; --r-thumb:16px; --r-btn:12px; --r-store:10px; --r-badge:8px; --r-pill:9999px;
  --r-icon:22%;
  --icon-feature:56px; --icon-list:52px;
  --tap:44px; --store-h:40px;

  /* 모션 */
  --dur-fast:var(--ys-dur-micro); --dur:var(--ys-dur-short); --ease:var(--ys-ease-move);
  --header-h:60px;

  /* base.css 연결 */
  --ys-line:var(--line); --ys-muted:var(--muted); --ys-ink:var(--ink);
  --ys-container:var(--container); --ys-gutter:var(--gutter);
  --ys-skip-bg:var(--ink); --ys-skip-fg:var(--on-ink);
  --focus:var(--accent);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#101114; --surface:#1B1C20; --surface-hover:#232429; --surface-strong:#2A2B30;
    --ink:#ECECEF; --ink-2:#C9C9CE; --muted:#A3A3A8; --line:#2A2B30;
    --ring: inset 0 0 0 1px rgba(255,255,255,.06);
    --icon-ring: 0 0 0 1px rgba(255,255,255,.08);
    --accent:#8EA8FF; --accent-ink:#8EA8FF; --accent-soft:rgba(142,168,255,.14); --on-ink:#101114;
    --header-bg:rgba(16,17,20,.88);
    --star:#F2B84B;
  }
}
@media (min-width:768px){ :root{ --gutter:24px; --grid-gap:20px; } }
@media (min-width:1024px){ :root{ --fs-body:17px; --fs-card-desc:16px; --section-y:104px; --header-h:68px; --icon-feature:72px; --icon-list:56px; } }
body[data-page="home"]{
&{font-family:var(--font-sans);font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--ls-body);color:var(--ink);background:var(--bg);word-break:keep-all;overflow-wrap:anywhere}
& .wrap{width:min(var(--container),100% - 2*var(--gutter));margin-inline:auto}
& :is(ul){list-style:none;padding:0}
& a{color:inherit;text-decoration:none}
& button{cursor:pointer;border:0}
& :is(#feature,#about,#review,#help,#contact){scroll-margin-top:calc(var(--header-h) + 16px)}
& .hd{position:sticky;top:0;z-index:50;height:var(--header-h);background:var(--header-bg);backdrop-filter:saturate(1.4) blur(12px)}
& .hd.is-scrolled{box-shadow:0 1px 0 var(--line)}
& .hd__in{display:flex;align-items:center;gap:8px;height:100%}
& .hd__brand{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-right:auto;color:var(--ink)}
& .hd__logo{width:28px;height:28px;flex:none}
& .hd__word{font-size:18px;font-weight:800;letter-spacing:-.02em}
& .hd__nav{display:none}
& :is(.hd__lang,.hd__menu-btn){display:flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;background:transparent;transition:opacity var(--dur-fast) var(--ys-ease-standard)}
& .hd__lang{border:1px solid var(--line);border-radius:var(--r-pill);font-size:14px;font-weight:650}
& .hd__menu-btn svg{width:22px;height:22px}
& :is(.hd__lang,.hd__menu-btn):active{opacity:.7}
& .i-close{display:none}
& .menu-toggle[aria-expanded="true"] .i-open{display:none}
& .menu-toggle[aria-expanded="true"] .i-close{display:block}
& .hd__sheet{position:absolute;top:100%;width:100%;background:var(--bg);border-bottom:1px solid var(--line)}
& .hd__sheet a{display:flex;align-items:center;min-height:52px;padding:0 var(--gutter);font-size:17px;font-weight:600;border-top:1px solid var(--line)}
& .hero{padding:32px 0 24px}
& .hero__title{font-size:var(--fs-hero);line-height:var(--lh-hero);letter-spacing:var(--ls-hero);font-weight:var(--fw-hero)}
& .hero__lead{margin-top:12px;font-size:16px;line-height:1.6;color:var(--ink-2)}
& .stats{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:16px;font-size:15px;line-height:1.5;font-weight:500;font-variant-numeric:tabular-nums;color:var(--ink-2)}
& .stats li{white-space:nowrap}
& .stats li:not(:last-child)::after{content:"·";color:var(--muted);margin-left:10px}
& .store-links{display:flex;flex-wrap:wrap;align-items:center;gap:0 6px;font-size:14px;line-height:1.55;color:var(--muted)}
& .store-links > span:first-child{white-space:nowrap}
& .store-links__list{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
& .store-links a{display:inline-flex;align-items:center;min-width:40px;min-height:40px;color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px}
& .store-links a:hover{color:var(--accent)}
& .stats__note{font-size:14px;color:var(--muted);margin-top:6px}
& .catalog{padding-bottom:var(--section-y);overflow-x:clip}
& .chips{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:var(--gutter);margin:0 calc(-1*var(--gutter)) 32px;padding:4px var(--gutter);scrollbar-width:none}
& .chips::-webkit-scrollbar{display:none}
& .chip{position:relative;display:inline-flex;align-items:center;flex:none;scroll-snap-align:start;height:44px;padding:0 16px;border-radius:var(--r-pill);background:var(--surface);color:var(--ink-2);font-size:15px;font-weight:550;white-space:nowrap;transition:background var(--dur-fast) var(--ys-ease-standard),color var(--dur-fast) var(--ys-ease-standard)}
& .chip-edge{position:absolute;top:0;width:1px;height:1px;pointer-events:none}
& .chip-edge--left{left:calc(-1*var(--gutter))}
& .chip-edge--right{right:calc(1px - var(--gutter))}
@media (max-width:767px){
  & .chips:is(.has-fade-left,.has-fade-right){-webkit-mask-image:linear-gradient(90deg,var(--chip-mask-left,#000) 0,#000 16px,#000 calc(100% - 16px),var(--chip-mask-right,#000))}
  & .chips.has-fade-left{--chip-mask-left:transparent}
  & .chips.has-fade-right{--chip-mask-right:transparent}
}
& .chip:hover{background:var(--surface-hover)}
& .chip__n{font-size:13px;font-weight:500;color:var(--muted);margin-left:6px}
& .chip[aria-pressed="true"]{background:var(--ink);color:var(--on-ink)}
& .chip[aria-pressed="true"] .chip__n{color:color-mix(in srgb,var(--on-ink) 70%,transparent)}
& .label{font-size:17px;line-height:1.5;font-weight:600;color:var(--muted);margin-bottom:16px}
& .group + .group{margin-top:48px}
& :is(.feat-grid,.app-grid){display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
& :is(.feat,.app){position:relative;display:grid;min-width:0;background:var(--surface);box-shadow:var(--ring);overflow:hidden;transition:background var(--dur-fast) var(--ys-ease-standard),transform var(--dur-fast) var(--ys-ease-standard)}
& :is(.feat,.app):hover{background:var(--surface-hover)}
& :is(.feat,.app):active{transform:scale(.985)}
& :is(.feat,.app):has(.btn-store:active){transform:none}
& .feat{border-radius:var(--r-card-sm);padding:20px;grid-template-columns:minmax(0,1fr) 100px;grid-template-areas:"icon shot" "name shot" "desc shot" "meta shot" "badges shot" "stores stores";column-gap:16px;row-gap:6px}
& :is(.feat__icon,.app__icon){grid-area:icon;border-radius:var(--r-icon);box-shadow:var(--icon-ring);background:var(--surface-strong);align-self:start}
& .feat__icon{width:var(--icon-feature);height:var(--icon-feature)}
& :is(.feat__name,.app__name){grid-area:name;min-width:0;font-size:var(--fs-card-title);line-height:var(--lh-card-title);letter-spacing:var(--ls-card-title);font-weight:650}
& .feat__name{margin-top:12px}
& :is(.feat__link,.app__link){display:inline-flex;align-items:center;gap:4px;min-width:40px;min-height:40px}
& :is(.feat__link,.app__link) svg{flex:none;color:var(--muted)}
& :is(.feat__link,.app__link)::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:0}
& :is(.feat__link,.app__link):focus-visible{outline:none}
& :is(.feat__link,.app__link):focus-visible::after{outline:2px solid var(--accent);outline-offset:3px}
& :is(.feat,.app):has(:is(.feat__link,.app__link):focus-visible){outline:2px solid var(--accent);outline-offset:3px}
& :is(.feat__desc,.app__desc){grid-area:desc;color:var(--ink-2);font-size:var(--fs-card-desc);line-height:var(--lh-card-desc)}
& .feat__meta{grid-area:meta;display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
& .feat__rate{display:inline-flex;align-items:center;gap:4px}
& .star{color:var(--star);flex:none}
& .badges{grid-area:badges;display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
& .badges li{font-size:12px;line-height:1.5;font-weight:650;padding:3px 8px;border-radius:8px;background:var(--surface-strong);color:var(--ink-2)}
& .feat__stores{grid-area:stores;display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
& .btn-store{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;min-height:var(--store-h);padding:0 14px;border-radius:var(--r-store);background:var(--accent-soft);color:var(--accent-ink);font-size:14px;font-weight:600;white-space:nowrap}
& .btn-store:hover{background:color-mix(in srgb,var(--accent) 16%,transparent)}
& .btn-store:active{opacity:.8}
& .feat__shot{grid-area:shot;grid-row:1 / 6;align-self:start;width:100px;height:150px;border:1px solid var(--line);border-radius:14px;overflow:hidden}
& .feat__shot img{width:100%;height:100%;object-fit:cover}
& .app{border-radius:20px;padding:16px;min-height:88px;grid-template-columns:52px minmax(0,1fr);grid-template-areas:"icon name" "icon desc" "icon badges" "icon web";column-gap:14px;row-gap:4px}
& .app__icon{width:var(--icon-list);height:var(--icon-list)}
& .app__icon--game{display:flex;align-items:center;justify-content:center;background:var(--game-bg);color:var(--game-fg)}
& .app__icon--game svg{width:50%;height:50%}
& .app__name{font-size:17px}
& .app__desc{font-size:15px;line-height:1.5}
& .app__web{grid-area:web;justify-self:start;margin-top:8px}
& .store-row{margin-top:40px;border-top:1px solid var(--line);padding-top:24px}
& .store-row__title{font-size:16px;font-weight:600}
& .store-row__btns{display:flex;flex-direction:column;gap:8px;margin-top:16px}
& :is(.btn-outline,.btn-primary,.btn-secondary){display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border-radius:var(--r-btn);font-size:15px;font-weight:600;white-space:nowrap}
& .btn-outline{padding:0 18px;border:1px solid var(--line);background:var(--bg)}
& .btn-outline svg{color:var(--muted)}
& .btn-outline:hover{background:var(--surface)}
& :is(.reviews,.about,.faq){padding-block:var(--section-y)}
& .h2{font-size:var(--fs-h2);line-height:var(--lh-h2);letter-spacing:var(--ls-h2);font-weight:700}
& .sec-head{display:flex;flex-direction:column;gap:8px;margin-bottom:24px}
& .text-link{display:inline-flex;align-items:center;gap:4px;min-height:44px;font-size:15px;font-weight:600;color:var(--accent-ink);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;align-self:start}
& .text-link svg{flex:none}
& .review-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
& .review{height:100%;background:var(--surface);box-shadow:var(--ring);border-radius:20px;padding:20px}
& .review__stars{display:flex;gap:2px}
& .review__stars svg{width:16px;height:16px}
& .review__body{font-size:16px;line-height:1.7;margin-top:12px}
& .review__cap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px 12px;margin-top:16px;font-size:14px;color:var(--muted)}
& .review__who b{font-weight:600;color:var(--ink-2)}
& .note{font-size:14px;color:var(--muted);margin-top:16px}
& :is(.about,.faq){border-top:1px solid var(--line)}
& .about__in{display:grid;gap:20px}
& .about__body > p{font-size:16px;line-height:1.7;color:var(--ink-2)}
& .about__body > p + p{margin-top:12px}
& .values{margin-top:28px}
& .values li{border-top:1px solid var(--line);padding:16px 0}
& .values__t{font-size:17px;font-weight:650}
& .values__d{font-size:15px;line-height:1.55;color:var(--ink-2);margin-top:2px}
& .about__body > .text-link{margin-top:20px}
& .faq__in{display:grid;gap:16px}
& summary{list-style:none;display:flex;align-items:center;justify-content:space-between;min-height:56px;padding:14px 0;font-size:17px;font-weight:600;gap:16px;border-bottom:1px solid var(--line);cursor:pointer}
& summary::-webkit-details-marker{display:none}
& details:first-child{border-top:1px solid var(--line)}
& summary:hover{color:var(--accent-ink)}
& .chev{flex:none;color:var(--muted);width:20px;height:20px;transition:transform var(--dur) var(--ease)}
& details[open] .chev{transform:rotate(180deg)}
& .faq__a{padding:4px 0 20px;font-size:16px;line-height:1.7;color:var(--ink-2)}
& .faq__a .text-link{margin-top:8px}
& .contact-wrap{padding-bottom:var(--section-y)}
& .contact{background:var(--surface);box-shadow:var(--ring);border-radius:24px;padding:28px}
& .contact__lead{font-size:16px;color:var(--ink-2);margin-top:8px}
& .contact-email{display:inline-flex;align-items:center;min-height:44px;max-width:100%;margin-top:20px;font-size:22px;line-height:1.4;font-weight:700;letter-spacing:-.02em;text-decoration:underline;text-decoration-color:var(--line);text-decoration-thickness:2px;text-underline-offset:6px;overflow-wrap:anywhere}
& .contact-email:hover{text-decoration-color:var(--accent)}
& .contact__btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
& :is(.btn-primary,.btn-secondary){padding:0 20px;flex:1 1 auto}
& .btn-primary{background:var(--ink);color:var(--on-ink);font-weight:650}
& .btn-primary:hover{opacity:.88}
& .btn-primary:active{transform:scale(.98)}
& .btn-secondary{background:var(--bg);border:1px solid var(--line)}
& .contact__caution{font-size:14px;color:var(--muted);margin-top:16px}
& .ys-toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translate(-50%,8px);max-width:calc(100% - 32px);width:max-content;padding:12px 18px;border-radius:12px;background:var(--ink);color:var(--on-ink);font-size:15px;opacity:0;pointer-events:none;transition:opacity var(--ys-dur-micro) var(--ys-ease-standard),transform var(--ys-dur-micro) var(--ys-ease-standard);z-index:100}
& .ys-toast.is-on{opacity:1;transform:translate(-50%,0)}
& .ft{border-top:1px solid var(--line);padding-top:48px;background:var(--bg)}
& .ft__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 16px}
& .ft__brand{grid-column:1/-1}
& .ft__h{font-size:14px;font-weight:650;margin-bottom:8px}
& :is(.ft__col a,.ft__sns a,.ft__top){display:flex;align-items:center;min-width:40px;min-height:40px;font-size:15px;color:var(--muted)}
& :is(.ft__col a,.ft__sns a,.ft__top):hover{color:var(--ink);text-decoration:underline}
& .ft__col{min-width:0}
& .ft__addr{font-size:14px;line-height:1.55;color:var(--muted);margin-top:4px}
& .ft__sns{display:flex;flex-wrap:wrap;gap:4px 16px}
& .ft__sns a{font-size:14px}
& .ft__top{display:inline-flex;gap:4px;margin-top:12px;min-height:44px;font-size:14px}
& .ys-studio{margin-top:40px}
& .ys-studio a{min-width:44px}
html:not(.js) & .ys-js-only{display:none}

@media (max-width:1023px){
  & .ft__sns{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px 16px}
  & .ft__sns a{justify-content:center;white-space:nowrap}
}

@media (pointer:fine){& .chip{height:40px}}
@media (min-width:768px){
  & .hero{padding-top:48px}
  & .hero__lead{font-size:17px}
  & .chips{flex-wrap:wrap;overflow:visible;margin-inline:0;padding-inline:0;-webkit-mask-image:none}
  & .feat-grid{gap:16px}
  & .feat{border-radius:24px;padding:28px 28px 0;min-height:292px;grid-template-columns:minmax(0,1fr) 176px;grid-template-areas:"icon shot" "name shot" "desc shot" "meta shot" "badges shot" "stores shot";grid-template-rows:auto auto auto auto auto 1fr;column-gap:24px}
  & .feat__shot{grid-row:1 / 7;align-self:end;width:176px;height:264px;border-radius:16px 16px 0 0;border-bottom:0}
  & .feat__stores{align-self:end;padding-bottom:28px}
  & .feat:not(:has(.feat__stores)){padding-bottom:28px}
  & .feat:not(:has(.feat__stores)) .feat__shot{margin-bottom:-28px}
  & .app-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  & .store-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
  & .store-row__btns{flex-direction:row;flex-wrap:wrap;margin:0;flex:none}
  & .sec-head{flex-direction:row;justify-content:space-between;align-items:baseline}
  & .review-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  & :is(.btn-primary,.btn-secondary){flex:initial}
}
@media (min-width:900px){
  & .hd__nav{display:flex;gap:4px}
  & .hd__nav a{display:flex;align-items:center;height:40px;padding:0 14px;border-radius:var(--r-pill);font-size:15px;font-weight:550;color:var(--ink-2)}
  & .hd__nav a:hover{background:var(--surface)}
  & .hd__nav a[aria-current="true"]{background:var(--accent-soft);color:var(--accent-ink)}
  & .hd__lang{height:40px;min-width:48px;margin-left:8px}
  & :is(.hd__menu-btn,.hd__sheet){display:none}
}
@media (min-width:1024px){
  & .hero{padding:72px 0 32px}
  & .hero__lead{margin-top:16px;max-width:40em}
  & .stats{margin-top:20px}
  & .store-links{display:inline-flex;vertical-align:middle;margin-right:16px}
  & .stats__note{display:inline-block;vertical-align:middle;margin-top:0}
  & .chips{margin-bottom:40px}
  & .feat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  & .group + .group{margin-top:64px}
  & .app-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
  & .app{padding:24px;border-radius:24px;grid-template-columns:56px minmax(0,1fr)}
  & .app__name{font-size:var(--fs-card-title)}
  & .store-row{margin-top:56px}
  & .sec-head{margin-bottom:32px}
  & .review{border-radius:24px;padding:28px}
  & .about__in{grid-template-columns:5fr 7fr;gap:64px}
  & .about__body > p{font-size:17px}
  & .faq__in{grid-template-columns:4fr 8fr;gap:64px}
  & .contact{padding:48px 56px}
  & .contact-email{font-size:30px}
  & .ft{padding-top:72px}
  & .ft__grid{grid-template-columns:1.4fr repeat(4,minmax(0,1fr));gap:32px}
  & .ft__brand{grid-column:auto}
  & .ys-studio{margin-top:56px}
}
@media (prefers-reduced-motion:reduce){
  & :is(.feat,.app,.btn-primary):active{transform:none}
  & details[open] .chev{transform:none}
  & .ys-toast{transform:translateX(-50%)}
}
}
/* Round 2: a flat, working crop of each app. Studio tokens stay outside the scene. */
body[data-page="home"] {
 & #web {scroll-margin-top:calc(var(--header-h) + 16px)}
 & .hero__grid {display:grid;gap:24px;align-items:center}
 & .hero__text {display:contents}
 & .hero__title {order:0}
 & .hero__lead {order:1;margin:0}
 & .stats {order:2;margin:0}
 & .bench {order:3;width:100%;min-width:0;max-width:520px;justify-self:center;border:1px solid var(--line);border-radius:20px;background:var(--surface);overflow:clip;--ys-shine-color:color-mix(in srgb,var(--accent) 38%,transparent)}
 & .store-links {order:4}
 & .stats__note {order:5;margin:0}
 & .bench__stage {aspect-ratio:4/3;position:relative;background:#fff;color:#24242b;color-scheme:light;isolation:isolate;overflow:hidden;contain:layout paint}
 & .bench__scene {position:absolute;inset:0;display:flex;flex-direction:column;gap:10px;padding:20px;font-size:14px;line-height:1.4;word-break:keep-all;overflow:hidden;background:#fff;color:#24242b}
 & .bench__scene :is(button,input){font:inherit;color:inherit;min-width:40px;min-height:40px}
 & .bench__scene button {border-radius:10px;background:#f0f3f7;padding:4px 10px;flex-shrink:0}
 & .bench__scene :is(input,button):focus-visible {outline:2px solid #3155d4;outline-offset:-2px}
 & .bench__scene input:not([type="range"]) {border:1px solid #d8e2eb;border-radius:12px;background:#fff;padding:8px 12px;width:100%;min-width:0}
 & .bench__bar {padding:12px 16px}
 & .bench__caption {display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:0 8px;min-height:72px;font-size:13px;line-height:1.45}
 & .bench__caption strong {font-size:14px;font-weight:650}
 & .bench__icon {border-radius:6px}
 & .bench__desc {grid-column:1/-1;grid-row:2;min-height:38px;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
 & .bench__caption a {font-size:13px;min-width:44px;min-height:40px;display:flex;align-items:center;color:var(--accent-ink)}
 & .bench__apps {display:flex;gap:4px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding:4px 0;mask-image:linear-gradient(90deg,transparent,#000 8px,#000 calc(100% - 8px),transparent)}
 & .bench__apps::-webkit-scrollbar {display:none}
 & .bench__apps button {display:grid;place-items:center;flex:0 0 40px;width:40px;height:44px;background:transparent;border-radius:10px;scroll-snap-align:center;color:var(--game-fg)}
 & .bench__apps img {border-radius:8px}
 & .bench__apps button[data-bench-app="game"] {background:var(--game-bg)}
 & .bench__apps button[aria-selected="true"] {box-shadow:inset 0 0 0 2px var(--accent)}
 & .bench__ctl {display:flex;justify-content:flex-end;gap:8px;margin-top:4px}
 & .bench__ctl button {min-width:72px;min-height:40px;padding:0 12px;border-radius:10px;background:var(--bg);color:var(--ink-2);font-size:13px;box-shadow:var(--ring)}
 & .scene-status {min-height:20px;align-self:center;margin-top:auto;padding:0 12px;font-size:13px;border-radius:999px;background:#36363e;color:#fff}
 & .scene-status:empty {visibility:hidden}
 & [data-scene="autocomplete"] {background:#f3f9fc;justify-content:center;gap:12px}
 & .ac-card {display:flex;align-items:flex-start;gap:12px;background:#fff;padding:14px;border-radius:16px}
 & .ac-card > div {flex:1;min-width:0}
 & .ac-card strong {font-size:17px;color:#182c38}
 & .ac-card p {margin-top:6px;font-size:13px;color:#506372}
 & .ac-card button {background:#e4f3fb;color:#2880b3;border-radius:999px;font-size:13px}
 & .ac-card:has([aria-pressed="false"]) {opacity:.65}
 & [data-scene="kaomoji"] {background:#fcf7fc;padding:12px;gap:6px}
 & .km-tabs {display:flex;gap:4px;overflow-x:auto;flex-shrink:0}
 & .km-tabs button {white-space:nowrap;background:#f5ebf5;font-size:13px;padding-inline:8px}
 & .km-tabs button[aria-pressed="true"] {background:#a456bf;color:#fff}
 & .km-list {display:grid;grid-template-rows:repeat(4,minmax(40px,1fr));gap:5px;flex:1;min-height:0;overflow-y:auto}
 & .km-row {display:flex;align-items:center;justify-content:space-between;min-height:40px;background:#f6edf7;border-radius:12px;overflow:hidden}
 & .km-row > button:first-child {flex:1;text-align:left;background:transparent;white-space:nowrap;overflow:hidden}
 & .km-row > button:last-child {color:#b75c86;background:#f5deeb}
 & .km-compose {display:flex;gap:6px}
 & .km-compose button {background:#a456bf;color:#fff}
 & [data-scene="clipboardnotebook"] {padding:12px;gap:6px;background:#f4f4f9}
 & .cb-list {display:flex;flex-direction:column;gap:6px;overflow-y:auto;min-height:0;flex:1}
 & .cb-card {background:#fff;border:1px solid #d1d1f2;border-radius:12px;padding:4px 10px 8px;flex-shrink:0}
 & .cb-tools {display:flex;gap:2px;align-items:center;height:40px}
 & .cb-tools button {background:transparent;padding:0;display:grid;place-items:center}
 & .cb-tools > span {flex:0 0 40px;height:40px;display:grid;place-items:center}
 & .cb-tools > span:last-child {margin-inline-start:auto}
 & .cb-tools svg {width:18px;height:18px;fill:currentColor}
 & .cb-card p {font-size:14px;color:#24276a}
 & .cb-card time {color:#737381;font-size:12px}
 & [data-scene="goval"] {background:#0f1923;color:#eceff1;padding:16px}
 & .gv-head {display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:14px}
 & .gv-head time {margin-left:auto;font-size:13px;font-variant-numeric:tabular-nums}
 & .gv-head > div {display:flex;gap:4px}
 & .gv-head button {background:#26313c;color:#fff;font-size:20px}
 & .gv-items {display:grid;grid-template-columns:1fr 1fr;gap:10px;flex:1;min-height:0}
 & .gv-items .gv-tile {padding:0;background:#16232c;border:2px solid transparent;overflow:hidden;border-radius:12px}
 & .gv-tile img {width:100%;height:100%;object-fit:contain}
 & .gv-tile[aria-pressed="true"] {border-color:#ff4454}
 & .gv-items.is-list {grid-template-columns:1fr;grid-template-rows:1fr 1fr}
 & .gv-items.is-list img {object-fit:contain;object-position:left center}
 & .gv-short {font-size:13px;color:#ff6977}
 & .gv-short [data-vp] {font-size:18px;font-weight:700;font-variant-numeric:tabular-nums}
 & [data-scene="forgot"] {background:#4a7d3c;padding:18px}
 & .fg-list {display:flex;flex-direction:column;gap:10px;flex:1}
 & .fg-row {position:relative;touch-action:pan-y;min-height:42px}
 & .fg-card {position:relative;padding:12px;border-radius:10px;background:#ffe799;color:#283326;will-change:auto}
 & .fg-row[data-todo="2"] .fg-card {background:#e0ccec}
 & .fg-row[data-todo="3"] .fg-card {background:#f9c9db}
 & .fg-row[data-todo="4"] .fg-card {background:#cce7bb}
 & .fg-back {position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-end;background:#a83d44;border-radius:10px;color:#fff;padding:8px}
 & .slide-label {background:#dff1cf;color:#365c2f;border-radius:999px;padding:10px 16px;text-align:center;font-size:13px}
 & .fm-tabs {display:flex;gap:6px;align-items:center;overflow-x:auto;flex-shrink:0}
 & .fm-tab {display:flex;border-radius:10px;background:#f0f3f7}
 & .fm-tab button {background:transparent;padding:0 8px}
 & .fm-tab.is-selected {background:#dcecff;color:#265ca1}
 & .fm-path {background:#f6f7f9;padding:8px;border-radius:8px;font-size:13px}
 & .fm-files {display:grid;gap:6px}
 & .fm-files p {display:flex;justify-content:space-between;border-bottom:1px solid #eee;padding:10px}
 & .fm-files small {font-size:12px;color:#64646b}
 & [data-scene="nexusnote"] {background:#f9f8fd;padding:4px}
 & .nx-graph {width:100%;height:100%;min-height:0;overflow:visible}
 & .nx-graph line {stroke:#b3b1bf;stroke-width:1.4}
 & .nx-graph circle {fill:#455f96}
 & .nx-graph g {cursor:pointer}
 & .nx-graph text {fill:#222b44;font-size:13px}
 & .nx-graph g:focus-visible {outline:0}
 & .nx-graph g:focus-visible circle {stroke:#ff9c30;stroke-width:3}
 & .nx-peek {position:absolute;right:12px;top:12px;background:#fff;border:1px solid #dadde6;padding:10px;border-radius:10px;font-size:13px;pointer-events:none}
 & .nx-peek p {margin-top:4px;color:#5a6376}
 & [data-scene="drawing"] {padding:8px;gap:4px}
 & .dr-paper {position:relative;flex:1;min-height:0}
 & .dr-paper img {width:100%;height:100%;object-fit:contain}
 & .dr-paper canvas {position:absolute;inset:0;width:100%;height:100%;touch-action:none}
 & .dr-tools {display:flex;align-items:center;gap:4px;flex-wrap:wrap}
 & .dr-tools button {padding:4px;font-size:19px}
 & .dr-tools button[aria-pressed="true"] {background:#dce9ff}
 & .dr-tools label {flex:1;min-width:68px;font-size:12px}
 & .dr-tools input {width:100%;display:block;min-width:60px;min-height:40px;accent-color:#df8131}
 & .wk-bar {display:flex;gap:10px;justify-content:space-between;align-items:center;font-size:13px;background:#f5f6f8;padding:8px}
 & .wk-page {flex:1;padding:16px}
 & .wk-page h3 {font-size:18px;font-weight:650}
 & .wk-page i {display:block;height:7px;background:#eee;margin-top:14px;border-radius:2px}
 & .wk-page i:last-child {width:70%}
 & .wk-tabs {display:flex;gap:4px;overflow-x:auto;flex-shrink:0}
 & .wk-tabs button {font-size:13px;white-space:nowrap}
 & .wk-tabs button[aria-pressed="true"] {background:#ddeaff;color:#265ca1}
 & .cn-list {display:flex;flex-direction:column;gap:4px;flex:1;overflow-y:auto}
 & .cn-list > div {display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e6e6ed;min-height:44px}
 & .cn-list button {background:#e8e8f9;color:#33366f}
 & [data-scene="counter"] {background:linear-gradient(135deg,#c9e9f7,#ffdfba)}
 & .ct-chips {display:flex;gap:8px}
 & .ct-chips span {background:#ffffffa8;padding:8px 14px;border-radius:999px}
 & .bench__scene .ct-tap {flex:1;min-height:0;background:transparent;font-size:64px;font-weight:750;line-height:1.1;font-variant-numeric:tabular-nums}
 & .ct-buttons {display:flex;gap:8px}
 & .ct-buttons button {flex:1;background:#fff8;font-size:22px}
 & .ct-buttons button:last-child {background:#008bc0;color:#fff}
 & [data-scene="thememo"] {font-size:13px;padding:12px;gap:6px}
 & .tm-body {font-size:15px;min-height:42px}
 & .tm-body mark {background:#e2eaff;color:#244676}
 & .tm-controls {padding:8px;background:#f4f5f7;border-radius:12px;display:flex;gap:8px;flex-wrap:wrap}
 & .tm-controls p {width:100%}
 & .tm-controls label {flex:1;min-width:90px}
 & .tm-controls input {width:100%;accent-color:#3d55a5}
 & .tm-controls > div {display:flex;gap:8px;align-items:center}
 & .tm-silent {font-size:12px;color:#5a6474;margin-top:auto}
 & [data-scene="mymemopad"] {padding:12px}
 & .mm-lock {display:flex;flex-direction:column;align-items:center;gap:8px;height:100%}
 & .mm-dots {font-size:24px;letter-spacing:8px}
 & .mm-keys {display:grid;grid-template-columns:repeat(3,1fr);gap:4px;width:min(100%,260px);flex:1;min-height:0}
 & .mm-keys button {min-height:40px;font-size:18px;background:#f7f7f7}
 & .mm-keys button:last-child {grid-column:2}
 & .mm-notes {display:grid;gap:10px}
 & .mm-notes p {background:#f6f6f8;padding:16px;border-radius:10px}
 & [data-scene="layerpaint"] {display:grid;grid-template-columns:minmax(0,1fr) 128px;gap:12px;padding:10px}
 & .lp-paper {position:relative;height:100%}
 & .lp-paper img {position:absolute;inset:0;object-fit:contain;width:100%;height:100%}
 & .lp-list > div {display:flex;align-items:center;justify-content:space-between;border:1px solid #dddfe9;border-radius:10px;margin-top:8px;padding:4px;font-size:13px}
 & .lp-list button {padding:4px;background:#e1e8fa;color:#476494}
 & [data-scene="firstscreen"] {background:#a92d70;padding:12px;gap:8px}
 & .fs-gallery,.fs-open {flex:1;min-height:0}
 & :is(.fs-gallery,.fs-open) img {height:100%;width:100%;object-fit:contain;border-radius:10px}
 & .fs-slider {position:relative;background:#ffe6f1;border-radius:999px;min-height:44px;color:#8a245b;display:grid;place-items:center;font-size:13px;touch-action:pan-y}
 & .fs-slider .fs-handle {position:absolute;left:2px;top:2px;min-height:40px;width:40px;border-radius:50%;background:#a92d70;color:#fff;font-size:22px;touch-action:pan-y;padding:0}
 & [data-scene="game"] {background:#0e100f;color:#e9f1dd;padding:12px}
 & .gm-cover {flex:1;min-height:0}
 & .gm-cover img {height:100%;width:100%;object-fit:cover;border-radius:10px}
 & .gm-info {display:flex;align-items:center;gap:8px;font-size:13px;flex-wrap:wrap}
 & .gm-info strong {font-size:16px}
 & .gm-info a {margin-left:auto;min-height:40px;display:flex;align-items:center;padding:4px 12px;background:#d1f58a;border-radius:8px;color:#0e100f}
 & .gm-buttons {display:flex;gap:8px;justify-content:flex-end}
 & .gm-buttons button {background:#293228;color:#e2edda}
 & .web {padding-block:var(--section-y);border-top:1px solid var(--line)}
 & .wx-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:24px}
 & .wx {min-width:0;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:20px;overflow:clip;background:var(--bg)}
 & .wx:hover {background:var(--surface)}
 & .wx-preview {position:relative;height:190px;background:#f6f7fa;color:#253044;padding:20px;overflow:hidden;font-size:13px;line-height:1.5}
 & .wx-preview p+p {margin-top:8px}
 & .wx-preview--nexus {display:grid;grid-template-columns:1fr 1.5fr;gap:8px;background:#f9f8fd}
 & .wx-notes {border-right:1px solid #d8dce7;padding-right:10px}
 & .wx-notes p {border-bottom:1px solid #d8dce7;padding:8px 0}
 & .wx-preview--nexus .nx-graph {height:100%;min-width:0}
 & .wx-preview--daily {background:#0f1923;color:#eef2f5}
 & .wx-progress {display:flex;gap:6px;align-items:center;margin-bottom:12px}
 & .wx-progress span {margin-right:auto}
 & .wx-progress i {height:6px;width:20px;border-radius:3px;background:#48545e}
 & .wx-progress i.active {background:#ff4454}
 & .wx-answers {display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:12px}
 & .wx-answers p {padding:8px;border:1px solid #354451;border-radius:8px;margin:0}
 & .wx-answers .correct {border-color:#62bc9b;background:#19372f}
 & .wx-answers b {display:block;font-size:12px;color:#89d7b8}
 & .wx-clips p {padding:10px;background:#fff;border:1px solid #dde2ed;border-radius:10px}
 & .wx-bracket p {display:flex;align-items:center;gap:10px;margin-bottom:8px}
 & .wx-bracket i {height:14px;flex:1;background:#bbc4d2;border-radius:3px}
 & .wx-percent {font-size:40px;line-height:1.2;font-variant-numeric:tabular-nums}
 & .wx-preview--taste p {display:flex;justify-content:space-between}
 & .wx-weapons {display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
 & .wx-weapons span {background:#dfe4ed;border-radius:8px;padding:12px 3px;text-align:center}
 & .wx-preview--games {background:#0e100f;padding:0}
 & .wx-preview--games img {width:100%;height:100%;object-fit:cover}
 & .wx-promo p {display:flex;align-items:center;gap:8px;padding:8px;background:#fff;border-radius:8px}
 & .wx-promo img {border-radius:6px}
 & .wx-check {margin-left:auto;color:#397a61}
 & .wx-code {display:block;margin-top:10px;color:#3155d4}
 & .wx-promo strong {display:block;letter-spacing:3px;margin-top:10px}
 & .wx-tools {display:grid;grid-template-columns:1fr 1fr;gap:12px;height:100%}
 & .wx-tools > div {padding:8px;background:#fff;border-radius:8px;overflow:hidden}
 & .wx-tools i {display:block;height:5px;background:#cbd1dc;margin-top:14px}
 & .wx-tools p {margin-top:12px;color:#3e6573}
 & .wx-meta {position:relative;padding:18px 44px 20px 20px;flex:1}
 & .wx-meta h3 {font-size:18px;line-height:1.35;font-weight:650}
 & .wx-meta p {font-size:14px;line-height:1.55;color:var(--ink-2);margin-top:6px}
 & .wx-arrow {position:absolute;right:20px;top:20px;font-size:20px;color:var(--muted)}
 & .ys-web {margin-top:40px}
 & .ys-web__in {width:100%;gap:4px 12px}
 & .ys-web+.ys-studio {margin-top:0}
 & .ys-web a {font-size:13px}
 @media (min-width:1024px) {
  & .hero__grid {grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:48px}
  & .hero__text {display:block}
  & .hero__text .stats {margin-top:20px}
  & .hero__text .hero__lead {margin-top:16px}
  & .hero__text .store-links {margin-top:24px}
  & .hero__text .stats__note {display:block;margin-top:6px}
  & .wx-grid {grid-template-columns:repeat(12,minmax(0,1fr))}
  & .wx {grid-column:span 4}
  & .wx--large {grid-column:span 6;grid-row:span 2}
  & .wx--large .wx-preview {height:330px}
  & .wx--large .wx-meta {padding-block:24px}
  & .ys-web {margin-top:56px}
 }
 @media (max-width:600px) {
  & .hero__grid {gap:16px}
  & .bench__stage {aspect-ratio:3/2}
  & .bench__scene {padding:12px;font-size:13px;gap:6px}
  & .ac-card {padding:10px 12px;gap:8px;border-radius:12px}
  & .ac-card p {font-size:13px;margin-top:4px}
  & .ac-card strong {font-size:15px}
  & .ac-card button {padding:4px 8px;font-size:13px}
  & .bench__bar {padding:8px 12px}
  & .bench__caption {min-height:72px}
  & [data-scene="kaomoji"] {padding:6px;gap:3px}
  & .km-list {gap:2px}
  & .km-tabs button {font-size:12px;padding-inline:6px}
  & .km-row button {font-size:13px;padding-inline:6px}
  & [data-scene="filemanager"] {padding:8px;gap:4px}
  & .fm-path {padding:6px}
  & .fm-files {gap:0}
  & .fm-files p {padding:5px 8px}
  & [data-scene="clipboardnote"] {padding:6px;gap:2px}
  & .cn-list > div {min-height:40px}
  & [data-scene="goval"] {padding:10px}
  & .gv-head {gap:4px;font-size:13px}
  & .gv-head time {font-size:12px}
  & .gv-head button {padding:2px 6px}
  & .fg-list {gap:5px}
  & .fg-card {padding:9px 12px;min-height:40px}
  & [data-scene="drawing"] {padding:4px}
  & .dr-tools {gap:2px}
  & .dr-tools label {font-size:12px}
  & .nx-peek {font-size:12px;top:6px;right:6px;padding:6px}
  & [data-scene="thememo"] {padding:8px;gap:4px}
  & .tm-controls {padding:4px;gap:4px}
  & .tm-controls label {min-width:68px}
  & .tm-body {font-size:13px;min-height:32px}
  & .tm-silent {line-height:1.3}
  & .mm-lock {gap:4px}
  & .mm-dots {font-size:18px}
  & [data-scene="layerpaint"] {grid-template-columns:minmax(0,1fr) 100px}
  & .lp-list > div {margin-top:4px;padding:0 4px}
  & .web {overflow-x:clip}
  & .wx-grid {display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:16px;gap:16px;margin-inline:-16px;padding:4px 16px 12px;scrollbar-width:none}
  & .wx {flex:0 0 calc((100% - 16px)/1.15);scroll-snap-align:center}
  & .wx-preview {height:190px;padding:16px}
  & .wx-preview--games {padding:0}
  & .wx-meta h3 {font-size:17px}
  & .ys-web__in {gap:0 10px}
  & .ys-web__h {font-size:12px}
  & .ys-web a {font-size:12px;min-height:44px}
 }
 @media (prefers-reduced-motion:no-preference) {
  & .lp-paper img,& .nx-graph :is(g,line) {transition:opacity var(--ys-dur-short) var(--ys-ease-move)}
 }
}

body[data-page="home"] .tm-body .is-read {background:#e2eaff;color:#244676}
html:not([data-ys-motion="on"]) body[data-page="home"] :is(.lp-paper img,.nx-graph g,.nx-graph line) {transition:none}

body[data-page="home"] .ys-web a {min-width:40px}
/* Reserve controls and bilingual text before deferred scripts execute. */
body[data-page="home"] .bench__bar {height:190px}
@media (max-width:600px) {
 body[data-page="home"] .hero__lead {min-height:76.8px}
 body[data-page="home"] .stats {min-height:49px;align-content:start}
}
@media (min-width:601px) and (max-width:1023px) {
 body[data-page="home"] .hero__lead {min-height:54.4px}
}
@media (scripting:none) {body[data-page="home"] .bench__bar {height:auto}}
html:not(.js) body[data-page="home"] .hd .ys-js-only {display:flex !important;visibility:hidden}
body[data-page="home"] .bench__caption :is(strong,a) {grid-row:1}
body[data-page="home"] .bench__caption strong {grid-column:2}
body[data-page="home"] .bench__caption a {grid-column:3}
body[data-page="home"] .bench__icon {grid-column:1;grid-row:1}
body[data-page="home"] .ys-web__h {display:inline-flex;align-items:center;min-height:44px}
body[data-page="home"] .wx-percent > span:last-child {font-size:16px}
@media (max-width:600px) {
 body[data-page="home"] [data-scene="forgot"] {padding:4px;gap:2px}
 body[data-page="home"] .fg-list {gap:2px}
 body[data-page="home"] .fg-row {min-height:40px}
 body[data-page="home"] .fg-card {padding:10px 12px}
 body[data-page="home"] .slide-label {min-height:40px;padding:8px 12px}
 body[data-page="home"] [data-scene="mymemopad"] {padding:4px}
 body[data-page="home"] .mm-lock {gap:3px}
 body[data-page="home"] .mm-dots {font-size:16px;line-height:1}
 body[data-page="home"] .mm-keys {gap:2px}
 body[data-page="home"] .mm-notes p {padding:9px 12px;min-height:40px}
}

body[data-page="home"] .faq-item details {border-top:0}
body[data-page="home"] .faq-item:first-child details {border-top:1px solid var(--line)}

body[data-page="home"] .nx-graph .nx-hit {fill:transparent;stroke:none}
body[data-page="home"] .lp-list button[aria-pressed="false"] {background:#f0f3f7;color:#64646b}
/* Hidden overflow gives inline digit windows a bottom-edge baseline while rolling. */
body[data-page="home"] .ys-digit {overflow:hidden}