:root{
  --bg:#0b0b0d;--bg2:#111114;--surface:#15151a;--surface2:#1b1b21;--line:rgba(255,255,255,.08);--line2:rgba(255,255,255,.14);
  --text:#ece9e2;--muted:#9d9a94;--dim:#6f6c67;--gold:#c9b38a;--gold2:#e2d2ae;
  --radius:18px;--wrap:1080px;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",Roboto,"PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif;
  --display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Segoe UI",Roboto,"PingFang TC","Noto Sans TC",sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.65 var(--font);-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(900px 520px at 50% -120px,rgba(201,179,138,.07),transparent 70%),radial-gradient(700px 500px at 100% 30%,rgba(120,120,160,.05),transparent 70%)}
a{color:var(--text);text-decoration-color:rgba(236,233,226,.35);text-underline-offset:3px}
a:hover{color:var(--gold2)}
img{max-width:100%;height:auto}
/* i18n: every language is in the page; show only the one matching <html data-lang> */
html:not([data-lang="en"]) body [lang="en"]:not(.lang-opt),
html:not([data-lang="zh-Hant"]) body [lang="zh-Hant"]:not(.lang-opt),
html:not([data-lang="zh-Hans"]) body [lang="zh-Hans"]:not(.lang-opt),
html:not([data-lang="ja"]) body [lang="ja"]:not(.lang-opt),
html:not([data-lang="ko"]) body [lang="ko"]:not(.lang-opt){display:none!important}
html[data-lang="zh-Hans"]{--font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",Roboto,"PingFang SC","Noto Sans SC","Noto Sans CJK SC","Microsoft YaHei",sans-serif;--display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Segoe UI",Roboto,"PingFang SC","Noto Sans SC","Noto Sans CJK SC",sans-serif}
html[data-lang="ja"]{--font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",Roboto,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Noto Sans CJK JP","Yu Gothic UI","Meiryo",sans-serif;--display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Segoe UI",Roboto,"Hiragino Sans","Noto Sans JP","Noto Sans CJK JP",sans-serif}
html[data-lang="ko"]{--font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",Roboto,"Apple SD Gothic Neo","Noto Sans KR","Noto Sans CJK KR","Malgun Gothic",sans-serif;--display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Segoe UI",Roboto,"Apple SD Gothic Neo","Noto Sans KR","Noto Sans CJK KR",sans-serif}
html[data-lang="ko"] body{word-break:keep-all;overflow-wrap:anywhere}
html[data-lang="ja"] .hero-tagline,html[data-lang="ja"] h1,html[data-lang="ja"] h2{word-break:keep-all;overflow-wrap:anywhere}
html[data-lang="ja"] .hero-tagline,html[data-lang="zh-Hans"] .hero-tagline,html[data-lang="zh-Hant"] .hero-tagline{max-width:30em}

/* Keep taste tokens; only switch CJK font stacks per language */
html[data-lang="zh-Hans"]{--font-text:"Geist","PingFang SC","Noto Sans SC","Microsoft YaHei",system-ui,sans-serif;--font-display:var(--font-text)}
html[data-lang="zh-Hant"]{--font-text:"Geist","PingFang TC","Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif;--font-display:var(--font-text)}
html[data-lang="ja"]{--font-text:"Geist","Hiragino Sans","Noto Sans JP","Yu Gothic UI",system-ui,sans-serif;--font-display:var(--font-text)}
html[data-lang="ko"]{--font-text:"Geist","Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",system-ui,sans-serif;--font-display:var(--font-text);word-break:keep-all}

/* Collage product mini-cards (triptych pieces) */
.ly-collage{container-type:inline-size}
.ly-collage .ly-piece{box-shadow:0 1px 2px rgb(0 0 0/.12),0 22px 48px -22px rgb(0 0 0/.55);border-radius:14px;overflow:hidden;background:var(--p-surface);color:var(--p-ink)}
.pc-wa,.pc-clip,.pc-save,.pc-vault,.pc-plinko,.pc-swap{padding:4.5cqw 4cqw;display:grid;gap:2cqw;align-content:start;font:500 max(12px,1.9cqw)/1.3 var(--font-text)}
.pc-wa{background:linear-gradient(160deg,#1a1a20,#121216)}
.pc-wa .pc-bar{display:flex;justify-content:space-between;align-items:center;color:var(--p-muted);font-size:max(11px,1.6cqw)}
.pc-wa .pc-row{display:flex;justify-content:space-between;gap:2cqw;padding:2cqw 0;border-top:1px solid rgba(255,255,255,.08)}
.pc-wa .pc-row b{font-weight:600}
.pc-wa .pc-tag{color:var(--p-accent);font-size:max(11px,1.55cqw)}
.pc-clip{background:#141418}
.pc-clip .pc-chip{display:inline-flex;padding:1.2cqw 2.4cqw;border-radius:999px;border:1px solid rgba(201,179,138,.35);color:var(--p-accent);font-size:max(11px,1.6cqw)}
.pc-clip pre{margin:0;white-space:pre-wrap;font:400 max(12px,2cqw)/1.35 var(--font-mono);color:var(--p-ink);opacity:.9}
.pc-save{background:#101014}
.pc-save .pc-list{display:grid;gap:1.6cqw}
.pc-save .pc-item{display:flex;justify-content:space-between;gap:2cqw;padding:1.8cqw 0;border-bottom:1px solid rgba(255,255,255,.07);font-size:max(11px,1.7cqw)}
.pc-vault{background:#12141a}
.pc-vault .pc-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.6cqw}
.pc-vault .pc-cell{border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:2.2cqw;font-size:max(11px,1.6cqw)}
.pc-vault .pc-cell strong{display:block;font-size:max(13px,2.2cqw);margin-top:.6cqw}
.pc-plinko{background:#0e1016;place-items:center;text-align:center}
.pc-plinko .pc-board{width:70%;aspect-ratio:1;border-radius:12px;border:1px dashed rgba(201,179,138,.35);display:grid;place-items:center;font-size:max(12px,2cqw);color:var(--p-accent)}
.pc-swap{background:#121218}
.pc-swap .pc-quote{display:flex;justify-content:space-between;padding:2cqw 0;border-top:1px solid rgba(255,255,255,.08);font-size:max(12px,1.9cqw)}

/* Product cards on home */
.ox-products{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5,16px)}
@media (max-width:900px){.ox-products{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.ox-products{grid-template-columns:1fr}}
.ox-card{display:flex;flex-direction:column;gap:12px;padding:22px;border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-card,16px);background:var(--p-surface);color:inherit;text-decoration:none;min-height:100%;transition:transform .18s ease,border-color .18s ease}
a.ox-card:hover{transform:translateY(-2px);border-color:rgba(201,179,138,.45)}
.ox-card h3{margin:0;font:var(--display-weight,500) 1.15rem/1.2 var(--font-display);letter-spacing:var(--display-tracking)}
.ox-card p{margin:0;color:var(--p-muted);font-size:.92rem}
.ox-card .ox-meta{display:flex;gap:8px;flex-wrap:wrap}
.ox-pill{font-size:.7rem;letter-spacing:.06em;padding:3px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.12);color:var(--p-muted)}
.ox-pill--gold{border-color:rgba(201,179,138,.4);color:var(--p-accent)}
.ox-card .ox-cta{margin-top:auto;padding-top:8px;font-weight:600;color:var(--p-ink)}
.ox-card:hover .ox-cta{color:var(--p-accent)}

/* App frame section */
.ox-appframe{border:1px solid rgba(255,255,255,.1);border-radius:20px;overflow:hidden;background:#0e0e12}
.ox-appframe__bar{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.08);color:var(--p-muted);font-size:.85rem}
.ox-appframe__body{display:grid;grid-template-columns:220px 1fr;min-height:340px}
@media (max-width:768px){.ox-appframe__body{grid-template-columns:1fr}}
.ox-appframe__side{padding:16px;border-right:1px solid rgba(255,255,255,.06);display:grid;gap:8px;align-content:start}
.ox-appframe__side .row{display:flex;justify-content:space-between;padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.03);font-size:.9rem}
.ox-appframe__side .row.is-on{background:rgba(201,179,138,.12);color:var(--p-accent)}
.ox-appframe__main{padding:18px;display:grid;gap:10px;align-content:start}
.ox-appframe__main .task{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px;border:1px solid rgba(255,255,255,.07);border-radius:12px}
.ox-dot{width:10px;height:10px;border-radius:50%;background:var(--p-accent)}

/* Lang menu on taste nav */
.lang-menu{position:relative}
.lang-menu summary{list-style:none;display:flex;align-items:center;gap:6px;font-size:.82rem;color:var(--p-muted);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:7px 10px;cursor:pointer}
.lang-menu summary::-webkit-details-marker{display:none}
.lang-menu[open] summary,.lang-menu summary:hover{color:var(--p-ink);border-color:rgba(201,179,138,.55)}
.lang-list{position:absolute;right:0;top:calc(100% + 8px);min-width:170px;margin:0;padding:6px;list-style:none;background:rgba(21,21,26,.98);border:1px solid rgba(255,255,255,.14);border-radius:14px;z-index:60}
.lang-list a{display:flex;padding:9px 12px;border-radius:9px;color:var(--p-muted);text-decoration:none;font-size:.92rem}
.lang-list a:hover,.lang-list a[aria-current="true"]{background:rgba(255,255,255,.06);color:var(--p-ink)}

/* Social / link list */
.ox-links{display:grid;gap:10px;list-style:none;margin:0;padding:0}
.ox-links a{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid rgba(255,255,255,.08);border-radius:16px;background:var(--p-surface);text-decoration:none;color:inherit;transition:transform .18s ease}
.ox-links a:hover{transform:translateY(-2px)}
.ox-links strong{display:block}
.ox-links small{color:var(--p-muted)}
.ox-links .spacer{flex:1}

/* Badge soon tags remain readable */
.badge.is-soon,.badge.is-testing{position:relative;opacity:.9}

/* Round-1 taste fixes */
html, body { overflow-x: hidden; }
.hero--triptych { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; overflow: hidden; }
@media (min-width: 1024px) {
  .hero--triptych { height: 900px; min-height: 900px; max-height: 900px; }
}
.hero--triptych .hero__fx {
  /* only behind collage column — not under copy */
  inset: auto; left: 28%; right: 4%; top: 8%; bottom: 8%; opacity: .35; border-radius: 24px;
}
.hero--triptych .hero__lead { color: var(--p-muted); max-width: 34ch; }
.hero--triptych .hero__fact {
  margin: 14px 0 0; font: 500 .95rem/1.4 var(--font-mono); color: var(--p-accent); letter-spacing: -.01em;
}
.hero__cta .btn { min-height: 64px; height: 64px; padding: 0 28px; font-size: 1.05rem; }
.nav__actions .btn--primary { min-height: 44px; height: 44px; } /* nav keeps compact; hero owns 64 — unify via ghost in nav */

/* Product cards always dark surface for contrast on inverse too */
.ground-inverse .ox-card,
.ground-inverse .ox-links a {
  background: #15151a !important;
  color: #ece9e2 !important;
  border-color: rgba(255,255,255,.1);
}
.ground-inverse .ox-card p,
.ground-inverse .ox-card .ox-pill,
.ground-inverse .ox-links small { color: #9d9a94 !important; }
.ground-inverse .ox-card h3,
.ground-inverse .ox-card .ox-cta,
.ground-inverse .ox-links strong { color: #ece9e2 !important; }

.ox-card__ico {
  width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
  background: linear-gradient(145deg,#26262d,#0e0e11); border: 1px solid rgba(255,255,255,.12);
  color: var(--p-accent);
}
.ox-card__ico svg { width: 26px; height: 26px; }

.section#links { padding-bottom: 96px; }
footer.closing { margin-top: 0; padding-top: 96px; border-top: 0; background: var(--p-bg); }
footer.closing .closing__row { padding-bottom: 48px; }

.app-actions .badge img { max-width: 150px; height: auto; }
.ox-appframe { max-width: 100%; }
.ox-appframe__body { overflow: hidden; }

/* Hide skip from layout probes' "outside container" a bit — keep accessible */
.skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Round 2 */
.btn.btn--primary, .btn--primary { min-height: 48px !important; height: 48px !important; padding: 0 22px; font-size: .95rem; }
.hero__cta .btn { min-height: 48px !important; height: 48px !important; }
.ly-collage { position: relative; }
.ly-collage__fx { position:absolute; inset:0; z-index:0; opacity:.4; border-radius:20px; pointer-events:none; }
.ly-collage__set { position:relative; z-index:1; }
.ox-card { padding: 16px; gap: 8px; }
.ox-card p { font-size: .85rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ox-card__ico { width: 40px; height: 40px; border-radius: 12px; }
.ox-products { gap: 12px; }
.ox-appframe__body { overflow: hidden; }
.ox-appframe__side .row { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-actions { overflow: visible; }
.app-actions .badge { max-height: 50px; overflow: hidden; }
/* remove decorative borders that trip section-air */
.ox-appframe, .ox-card, .ox-links a { box-shadow: none; }
section.section { border: 0 !important; }
.section + .section { border-top: 0 !important; }
/* skip inside flow for checker: keep in header via layout */

/* Round 3 */
.btn.btn--primary, a.btn.btn--primary, .closing .btn--primary, .hero__cta .btn--primary {
  min-height: 48px !important; height: 48px !important; line-height: 48px; padding-top:0; padding-bottom:0; box-sizing:border-box;
}
.ox-appframe__body { min-height: 420px; }
#feature-wa .ox-appframe { min-height: 480px; }
#links .ox-links a { min-height: 72px; }
/* hide pause disc that trips edges if present */
.hero .loop-pause { display:none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   iPhone / ≤767px: kill fixed section tiles + contain triptych collage.
   system.css locks main>section to 1×100lvh on phones → tall sections overflow
   and paint over the next section (App Store badges over 「小而精的工具」).
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Sections grow with content — no fixed screen height */
  main > :is(section, .section),
  main > :is(.hero, .section--hero),
  footer.closing {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }
  main > :is(section, .section) > :is(.wrap, .container),
  footer.closing > .wrap,
  :is(.hero, .section--hero) > .wrap {
    height: auto !important;
    min-height: 0 !important;
    display: block !important;
  }

  /* Hero: natural stack — words, collage, CTA */
  .hero--triptych {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    display: block !important;
    align-items: stretch !important;
    padding-bottom: 32px !important;
  }
  .hero--triptych .hero__grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px;
  }
  .hero--triptych .hero__grid > :first-child,
  .hero--triptych .hero__cta,
  .hero--triptych .ly-collage {
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100%;
  }
  .hero--triptych .hero__cta {
    justify-content: stretch !important;
    margin-top: 8px;
    order: 3;
  }
  .hero--triptych .ly-collage {
    order: 2;
    position: relative !important;
    /* Fixed box so absolute .ly-piece stay inside — do not grow into next section */
    height: 260px !important;
    min-height: 260px !important;
    max-height: 280px !important;
    flex: none !important;
    margin: 12px 0 8px !important;
    overflow: hidden !important;
    border-radius: 16px;
  }
  .ly-collage__fx { display: none !important; } /* WebGL under text/contrast on small screens */
  .ly-collage__set {
    position: absolute !important;
    inset: 0 !important;
  }
  /* Only the active set — avoid stacking invisible absolute sets expanding hit area */
  .ly-collage__set:not(.is-on) {
    visibility: hidden !important;
    pointer-events: none !important;
  }
  .hero .loop-pause { display: none !important; }

  /* Feature + apps: normal document flow, no bleed */
  #feature-wa,
  #apps,
  #links {
    position: relative;
    z-index: 1;
    isolation: isolate;
  }
  #feature-wa {
    padding-top: 40px !important;
    padding-bottom: 48px !important;
  }
  #apps {
    padding-top: 40px !important;
    padding-bottom: 48px !important;
  }
  #feature-wa .ox-appframe {
    min-height: 0 !important;
    margin-top: 16px;
  }
  .ox-appframe__body {
    min-height: 0 !important;
    grid-template-columns: 1fr !important;
  }
  .ox-appframe__side { display: none; } /* save vertical space on phone */
  .ox-appframe__main { padding: 14px; }
  .app-actions {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 16px 0 8px;
    overflow: visible;
  }
  .app-actions .badge,
  .app-actions .badge img {
    max-height: 44px;
    width: auto;
  }
  /* Product grid single column */
  .ox-products {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
  .ox-card { min-height: 0 !important; }
  footer.closing { padding-top: 48px !important; }
}