@supports (overflow-x: clip) {
  html, body { overflow-x: clip; }
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overscroll-behavior-x: none; }
main { display: block; min-width: 0; }
.grid-bg { transform: translateZ(0); }

.wrap { padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); }
.grid > *, .split > *, .hero-grid > *, .section-head > *, .foot-grid > *, .laws > *, .dev-hub > *, .def-points > *, .faq > *, .tr-body > *, .reveal { min-width: 0; }
.faq, .split { grid-template-columns: minmax(0, 1fr); }
.code, .formula, .table-wrap, .diagram, .copy-row, .qa-code, .qa-code pre, .tr-pre, .player, .trail, .cmp-stage, .callout, .card, .law, .dev-tile, .faq-item, .def-band, .cta-band { max-width: 100%; }
h1, h2, h3, h4, .faq-q, .law-n, .tr-panel h4, .lead, .hero-kicker, .def-lead, .card p, .law-r, .dev-tile p, .def-point p, .list li, .priv-list li, .step p, .tr-d, .faq-a { overflow-wrap: break-word; }
html:lang(ja) h1, html:lang(ja) h2, html:lang(ja) h3, html:lang(zh) h1, html:lang(zh) h2, html:lang(zh) h3 { word-break: auto-phrase; line-break: strict; }
html:lang(ko) h1, html:lang(ko) h2, html:lang(ko) h3, html:lang(ko) h4, html:lang(ko) .faq-q, html:lang(ko) .lead { word-break: keep-all; overflow-wrap: anywhere; }

header.top {
  padding-top: env(safe-area-inset-top);
  background: rgba(0, 0, 0, 0.92);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.nav { height: 64px; gap: 12px; padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); }
.brand { min-height: 44px; }
.nav-cta { gap: 8px; }
.nav-cta .btn.gh, .lang summary, .menu-btn, .nav-cta .btn.primary { height: 44px; min-height: 44px; }
.nav-cta .btn.gh, .menu-btn { width: 44px; padding: 0; justify-content: center; border-radius: 10px; }
.nav-cta .btn.gh span { display: none; }
.lang summary { padding: 0 12px; border-radius: 10px; }
.nav-cta .btn.primary { padding: 0 16px; border-radius: 10px; }
.lang-menu { top: calc(100% + 10px); min-width: 200px; }
.lang-menu a { min-height: 44px; align-items: center; padding: 10px 12px; font-size: 14.5px; }
.lang-menu a .code { overflow: visible; }
.links.open, .top.compact .links.open { top: calc(64px + env(safe-area-inset-top)); background: #000; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 18px max(32px, env(safe-area-inset-left)) calc(28px + env(safe-area-inset-bottom)); align-items: center; }
.links.open a, .top.compact .links.open a { width: 100%; max-width: 560px; min-height: 52px; display: flex; align-items: center; justify-content: center; font-size: 17px; }

.btn { min-height: 44px; }
.btn.sm { min-height: 40px; }
.chip { min-height: 40px; padding: 8px 14px; font-size: 13px; }
.copy-btn { position: relative; min-height: 36px; padding: 6px 12px; font-size: 12px; }
.copy-btn::after, .tr-play::after { content: ""; position: absolute; inset: -5px -4px; }
html body .pp-toc a { padding-top: 11px; padding-bottom: 11px; }
.card.flat[style*="sticky"] > a { padding-top: 9px !important; padding-bottom: 9px !important; }
.card.flat[style*="sticky"] { max-height: calc(100vh - 112px); max-height: calc(100dvh - 112px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.copy-row { padding: 5px 5px 5px 14px; font-size: 13px; }
.hero-dev .copy-row { width: min(480px, 100%); }
.topic { min-height: 40px; padding: 8px 14px; font-size: 13.5px; }
.assist-close { width: 44px; height: 44px; }
.assist-launch { min-height: 48px; }
.assist-form button { width: 48px; min-height: 44px; }
.foot-grid a { padding: 0; min-height: 40px; display: flex; align-items: center; }
.foot-contact a { display: inline; min-height: 0; }
.foot-bottom a { display: inline-flex; align-items: center; min-height: 44px; }
.foot-grid .foot-link { min-height: 40px; display: flex; align-items: center; font-size: 14px; }
.dev-tile .copy-row code { word-break: normal; overflow-wrap: anywhere; }

@media (hover: none) {
  .btn:hover, .assist-launch:hover { transform: none; }
  .btn:hover .arrow { transform: none; }
  .card:hover::before { opacity: 0; }
}

.hero { padding: 40px 0 24px; }
.hero-grid { gap: 20px; }
.hero h1 { font-size: clamp(30px, 4vw, 42px); }
h1 { font-size: clamp(28px, 3.6vw, 36px); }
h2 { font-size: clamp(23px, 2.9vw, 28px); }
.lead, .hero .lead { font-size: 16px; }
.hero-kicker { font-size: 16.5px; }
.page-hero { padding: 44px 0 12px; }
section { padding: 56px 0; }
section.tight { padding: 40px 0; }
.section-head { margin-bottom: 30px; }

.player { margin-top: 36px; }
.player-caption { grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; padding: 16px 20px; }
.player-controls { gap: 8px; }
.player-controls button { height: 44px; min-width: 44px; padding: 0 14px; font-size: 13px; border-radius: 10px; }
.progress { padding: 0 20px 6px; gap: 5px; }
.progress span { height: 27px; padding: 12px 0; background-clip: content-box; border-radius: 0; }
.progress span i { top: 12px; bottom: 12px; border-radius: 3px; }

.diagram svg { min-width: 0; width: 100%; }
.diagram { overflow-x: visible; padding: 20px; }

.table-wrap { -webkit-overflow-scrolling: touch; }
table.spec th, table.spec td { padding: 12px 14px; }

.laptop { max-width: 900px; padding: 0 16px; }
.laptop-base { margin: 0 -16px; }
.tr-play { position: relative; min-height: 34px; padding: 4px 14px; font-size: 12.5px; }
.tr-step { min-height: 40px; }
.tr-step .n { white-space: nowrap; flex-shrink: 0; word-break: normal; overflow-wrap: normal; }
.tr-step .t { min-width: 0; }
.tr-kv .v, .laptop .tr-kv .v { word-break: normal; overflow-wrap: anywhere; }

.grid.g2, .grid.g3, .grid.g4, .laws, .dev-hub, .split { max-width: none; }
.wrap.grid.g2, .wrap.grid.g3, .wrap.grid.g4, .wrap.split { max-width: var(--maxw); }
.hero-actions[style*="flex-start"] { justify-content: center !important; }
.grid + .reveal:has(> .btn:only-child) { display: flex; justify-content: center; }
.faq { max-width: 860px; }
.faq-item { padding: 24px 26px; }

.foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 28px; }
.foot-grid > :first-child { grid-column: 1 / -1; }
.foot-grid > :first-child p { max-width: 520px; }
.player-stage { aspect-ratio: 2 / 1; }

@media (min-width: 700px) {
  .g2, .dev-hub, .laws { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kv { grid-template-columns: 170px minmax(0, 1fr); }
  .cmp.landscape { display: block; }
  .cmp.portrait { display: none; }
  .cmp-stage { padding: 14px; }
  .cta-band { padding: 36px 32px; }
}

@media (min-width: 700px) and (max-width: 900px) {
  .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .def-points { grid-template-columns: minmax(0, 1fr); }
  .def-points > :last-child:nth-child(odd) { grid-column: auto; }
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g2:has(> * > .code), .g2:has(> .code), .g2:has(> * > .formula) { grid-template-columns: minmax(0, 1fr); }
  .diagram svg.pay.landscape { display: none; }
  .diagram svg.pay.portrait { display: block; min-width: 0; width: 100%; max-width: 420px; margin: 0 auto; }
}

@media (min-width: 901px) {
  .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid.g3:not(.def-points) { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
  .grid.g3:not(.def-points) > * { flex: 0 1 calc((100% - 28px) / 3); }
  .foot-grid { grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); }
  .foot-grid > :first-child { grid-column: auto; }
  .metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .metric, .metric:nth-child(2) { border-right: 1px solid var(--line); border-bottom: none; }
  .metric:nth-child(-n+2) { border-bottom: none; }
  .metric:last-child { border-right: none; }
  .metric .lbl { white-space: normal; }
}

@media (min-width: 1024px) {
  .split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 36px; }
}

@media (max-width: 699px) {
  .diagram { padding: 14px; }
}

@media (max-width: 760px) {
  .brand small { display: none; }
}