:root{
  --sidebar:232px
}
*{
  box-sizing:border-box
}
html{
  scroll-behavior:smooth;
  scroll-padding-top:108px
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans CJK TC","PingFang TC","Hiragino Sans","Microsoft YaHei",sans-serif;
  font-size:16px;
  line-height:1.65
}
a{
  color:inherit;
  text-decoration:none
}
button{
  font:inherit;
  color:inherit;
  cursor:pointer
}
button,a{
  touch-action:manipulation
}
button{
  background:none;
  border:0
}
img{
  max-width:100%;
  display:block
}
a:focus-visible,button:focus-visible{
  outline:3px solid var(--red);
  outline-offset:5px
}
button[aria-pressed=true]{
  font-weight:650
}
.skip{
  position:fixed;
  top:-90px;
  inset-inline-start:24px;
  padding:12px 22px;
  background:var(--ink);
  color:white;
  z-index:99
}
.skip:focus{
  top:8px
}
header{
  height:84px;
  position:sticky;
  top:0;
  z-index:15;
  background:var(--paper);
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 36px;
  gap:20px
}
.brand-home{
  display:flex;
  align-items:center;
  width:166px;
  min-height:48px
}
.brand-home img{
  width:166px;
  height:auto
}
.header-right{
  display:flex;
  gap:32px;
  align-items:center
}
.header-label{
  font-size:var(--font-secondary);
  color:var(--muted);
  letter-spacing:.06em
}
.languages{
  display:flex;
  align-items:center;
  gap:4px
}
.languages a{
  font-size:var(--font-secondary);
  display:grid;
  place-items:center;
  min-width:38px;
  height:44px;
  border-radius:0
}
.languages a[aria-current]{
  background:var(--ink);
  color:white;
  height:30px
}
.languages a:hover{
  color:var(--red)
}
.languages a[aria-current]:hover{
  color:white
}
aside{
  position:fixed;
  top:84px;
  bottom:0;
  inset-inline-start:0;
  width:var(--sidebar);
  border-inline-end:1px solid var(--line);
  padding:38px 28px;
  display:flex;
  flex-direction:column
}
.aside-title{
  font-size:16px;
  font-weight:600;
  margin-bottom:35px
}
.aside-title>span{
  display:block;
  font-size:var(--font-meta);
  font-family:monospace;
  letter-spacing:.08em;
  margin-top:8px;
  color:var(--muted)
}
aside nav{
  display:grid;
  gap:2px
}
aside nav a{
  font-size:var(--font-secondary);
  min-height:44px;
  display:flex;
  align-items:center;
  gap:16px
}
aside nav a>span{
  font:var(--font-meta) monospace;
  color:#71685e
}
aside nav a:hover,aside nav a.active{
  color:var(--red)
}
.aside-download{
  border-top:1px solid var(--line);
  margin-top:32px;
  padding:20px 0;
  display:flex;
  justify-content:space-between;
  font-size:var(--font-secondary)
}
.aside-foot{
  font:var(--font-meta)/1.9 monospace;
  color:var(--muted);
  margin-top:auto;
  padding-top:24px
}
main{
  margin-inline-start:var(--sidebar);
  min-width:0
}
.hero{
  padding:38px 56px 0
}
.hero-top{
  display:flex;
  justify-content:space-between;
  align-items:center
}
.eyebrow,.section-index{
  font-size:var(--font-meta);
  font-weight:600;
  letter-spacing:.12em;
  line-height:1.5
}
.version{
  font:var(--font-meta) monospace;
  border:1px solid var(--line);
  padding:5px 10px
}
.hero-copy{
  display:flex;
  justify-content:space-between;
  gap:32px;
  align-items:flex-end;
  margin:46px 0 38px
}
h1,h2,h3,p{
  margin:0
}
h1{
  font-size:clamp(42px,4.8vw,76px);
  line-height:1.15;
  letter-spacing:-.03em;
  font-weight:550
}
.hero-copy>p{
  font-size:var(--font-secondary);
  line-height:1.9;
  color:var(--muted);
  max-width:340px;
  padding-bottom:5px
}
.hero-art{
  background:var(--ivory);
  height:380px;
  padding:24px 28px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  position:relative;
  overflow:hidden
}
.hero-art>img{
  height:265px;
  width:70%;
  object-fit:contain;
  align-self:center
}
.art-caption{
  font:var(--font-meta) monospace;
  letter-spacing:.13em;
  color:#786c5b
}
.hero-art-footer{
  font:var(--font-meta) monospace;
  display:flex;
  justify-content:space-between;
  color:#786c5b;
  letter-spacing:.06em
}
.hero-bottom{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:22px 0;
  border-bottom:1px solid var(--line);
  font-size:var(--font-meta)
}
.hero-bottom>a{
  display:flex;
  gap:24px;
  min-height:30px;
  align-items:center
}
.candidate{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--muted)
}
.candidate i{
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--red)
}
.section{
  padding:78px 56px;
  border-bottom:1px solid var(--line)
}
.section-index{
  color:var(--red);
  margin-bottom:36px
}
.two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:54px
}
h2{
  font-size:clamp(30px,3.3vw,49px);
  font-weight:500;
  letter-spacing:-.04em;
  line-height:1.2
}
.large-copy{
  font-size:18px;
  line-height:1.9
}
.small-rule{
  margin-top:32px;
  padding-top:24px;
  border-top:1px solid var(--line)
}
h3{
  font-size:15px;
  font-weight:600;
  line-height:1.5
}
.small-rule p,.spacing-block p,.version-note p{
  font-size:var(--font-secondary);
  color:var(--muted);
  margin-top:12px;
  line-height:1.85
}
.section-heading{
  display:flex;
  justify-content:space-between;
  gap:40px;
  align-items:flex-end;
  margin-bottom:36px
}
.section-heading>p{
  font-size:var(--font-secondary);
  color:var(--muted);
  max-width:350px;
  line-height:1.9
}
.logo-tools{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding-bottom:16px
}
.segmented{
  display:flex;
  gap:4px;
  flex-wrap:wrap
}
.segmented button{
  padding:8px 16px;
  font-size:var(--font-secondary);
  min-height:44px
}
.segmented button[aria-pressed=true]{
  background:var(--ink);
  color:white
}
.backgrounds{
  display:flex;
  gap:6px
}
.backgrounds button{
  width:44px;
  height:44px;
  position:relative;
  border:1px solid transparent
}
.backgrounds button:before{
  content:"";
  position:absolute;
  inset:9px;
  border:1px solid #bbb;
  border-radius:50%
}
.backgrounds button[aria-pressed=true]{
  border-color:var(--ink)
}
.bg-ivory:before{
  background:var(--ivory)
}
.bg-ink:before{
  background:var(--ink)
}
.bg-neutral:before{
  background:#f3f3f3
}
.logo-stage{
  height:350px;
  background:var(--ivory);
  display:grid;
  place-items:center;
  position:relative;
  padding:52px
}
.logo-stage.ink{
  background:var(--ink);
  color:#fff
}
.logo-stage.neutral{
  background:#f3f3f3
}
.logo-stage>img{
  width:80%;
  height:220px;
  object-fit:contain
}
.logo-stage[data-layout=icon]>img{
  width:36%
}
.logo-stage[data-layout=stacked]>img{
  width:65%;
  height:250px
}
.stage-label{
  position:absolute;
  bottom:16px;
  inset-inline-start:20px;
  font:var(--font-meta) monospace;
  opacity:.65
}
.stage-bottom{
  display:flex;
  justify-content:space-between;
  gap:18px;
  padding:16px 0;
  border-bottom:1px solid var(--line);
  font:var(--font-meta)/1.6 monospace
}
.stage-bottom a{
  font-family:inherit;
  display:flex;
  gap:18px
}
.spacing-block{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:50px;
  margin-top:44px;
  align-items:center
}
.spacing-block h3{
  font-size:25px;
  line-height:1.3;
  font-weight:500
}
.spacing-demo{
  background:#eeeae3;
  min-height:200px;
  display:grid;
  place-items:center;
  position:relative;
  padding:36px
}
.spacing-box{
  width:100%;
  padding:20px;
  border:1px solid transparent
}
.spacing-box img{
  width:100%;
  height:80px;
  object-fit:contain
}
.spacing-demo.show-guide .spacing-box{
  border:1px dashed var(--red);
  background:repeating-linear-gradient(0deg,transparent,transparent 19px,#b62c4510 20px)
}
.spacing-measure{
  position:absolute;
  top:15px;
  inset-inline-end:17px;
  font:12px monospace;
  color:var(--red)
}
.text-button{
  font-size:var(--font-meta);
  min-height:44px;
  text-decoration:underline;
  text-underline-offset:5px;
  margin-top:8px;
  padding:0
}
.minimums{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:25px;
  margin-top:38px;
  align-items:center
}
.minimums strong{
  font-size:38px;
  font-weight:450;
  letter-spacing:-.04em
}
.minimums strong span{
  font:13px monospace;
  margin-inline-start:6px
}
.minimums p{
  font-size:var(--font-meta);
  color:var(--muted)
}
.palette{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px
}
.swatch{
  padding:0;
  text-align:start;
  display:flex;
  flex-direction:column
}
.color-chip{
  width:100%;
  height:180px;
  background:var(--swatch);
  display:block;
  border:1px solid #17171712
}
.color-name{
  font-size:var(--font-secondary);
  font-weight:600;
  margin-top:14px
}
.color-code{
  font:var(--font-meta) monospace;
  display:flex;
  justify-content:space-between;
  width:100%;
  margin-top:4px;
  color:var(--muted)
}
.swatch:hover .color-code{
  color:var(--red)
}
.micro{
  font-size:var(--font-meta);
  color:var(--muted);
  margin-top:20px
}
.wordmark-spec{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:24px 0 38px
}
.wordmark-spec>img{
  width:100%;
  height:auto;
  max-height:190px;
  object-fit:contain;
  margin-top:36px
}
.type-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:44px;
  margin-top:40px
}
.type-headline{
  font-size:27px;
  font-weight:500;
  line-height:1.45;
  margin:24px 0 14px;
  letter-spacing:-.03em
}
.type-grid p{
  font-size:var(--font-secondary);
  color:var(--muted)
}
.alphabet{
  font-size:36px;
  line-height:1.4;
  font-weight:400;
  letter-spacing:-.03em;
  margin-top:26px
}
.code-sample{
  background:#eae6de;
  padding:24px;
  min-width:0
}
.code-sample pre{
  font:14px/1.8 ui-monospace,SFMono-Regular,Consolas,monospace;
  white-space:pre-wrap;
  margin:30px 0
}
.code-caption{
  font:var(--font-meta) monospace;
  color:var(--muted)
}
.language-spec{
  padding-top:28px;
  margin-top:34px;
  border-top:1px solid var(--line)
}
.language-spec p{
  font-size:20px;
  margin:12px 0
}
.language-spec small{
  font-size:var(--font-meta);
  color:var(--muted)
}
.usage-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px
}
.usage-visual{
  height:160px;
  display:grid;
  place-items:center;
  padding:25px;
  background:#eeeae3;
  overflow:hidden
}
.usage-visual img{
  height:80px;
  object-fit:contain
}
.usage-visual.good{
  background:var(--ink)
}
.usage-visual.distorted img{
  transform:scaleY(1.65) scaleX(.85)
}
.usage-visual.decorated img{
  filter:drop-shadow(5px 5px 1px #777)
}
.usage-tag{
  font:var(--font-meta) monospace;
  display:block;
  color:var(--red);
  margin:20px 0 8px
}
.good+.usage-tag{
  color:#36634b
}
.usage-card h3{
  font-size:var(--font-secondary)
}
.usage-card p{
  font-size:var(--font-secondary);
  color:var(--muted);
  margin-top:9px
}
.download-feature{
  background:var(--red);
  color:white;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:38px
}
.download-feature h3{
  font-size:26px;
  font-weight:500;
  margin:14px 0 6px
}
.download-feature p{
  font-size:var(--font-secondary);
  color:#fff
}
.download-feature>span{
  font-size:var(--font-secondary);
  white-space:nowrap
}
.download-feature b{
  font-size:28px;
  font-weight:400;
  margin-inline-start:24px
}
.download-feature:hover{
  background:#a9233b
}
.download-list>a,.download-list>button{
  width:100%;
  text-align:start;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:24px 0;
  border-bottom:1px solid var(--line)
}
.download-list strong{
  display:block;
  font-size:15px;
  font-weight:500
}
.download-list small{
  display:block;
  font-size:var(--font-meta);
  color:var(--muted);
  margin-top:5px
}
.download-list>a>span:last-child,.download-list>button>span:last-child{
  font-size:var(--font-meta);
  white-space:nowrap
}
.version-note{
  display:grid;
  grid-template-columns:1fr 3fr;
  gap:25px;
  margin-top:40px
}
.version-note h3{
  font-size:var(--font-secondary)
}
.version-note p{
  margin:0;
  font-size:var(--font-meta)
}
footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:28px 56px;
  gap:24px
}
footer img{
  width:132px;
  height:auto
}
footer>span{
  font:var(--font-meta) monospace;
  color:var(--muted)
}
footer a{
  font-size:var(--font-meta);
  padding:12px 0
}
.toast{
  position:fixed;
  bottom:28px;
  left:calc(50% + 100px);
  transform:translateX(-50%);
  background:var(--ink);
  color:white;
  padding:12px 22px;
  font-size:var(--font-secondary);
  z-index:50;
  opacity:0;
  pointer-events:none;
  transition:opacity .15s;
  max-width:90vw
}
.toast.visible{
  opacity:1
}
dialog{
  border:1px solid var(--line);
  background:var(--paper);
  padding:28px;
  width:min(850px,92vw);
  max-height:85dvh
}
dialog::backdrop{
  background:#17171799
}
.dialog-heading{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:24px
}
.dialog-heading h2{
  font-size:25px
}
.dialog-heading button{
  font-size:28px;
  width:44px;
  height:44px
}
.asset-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px
}
.asset-preview{
  height:120px;
  display:grid;
  place-items:center;
  background:var(--ivory);
  padding:20px
}
.asset-preview img{
  width:100%;
  height:80px;
  object-fit:contain
}
.asset-preview.reverse{
  background:var(--ink)
}
.asset-grid a>span{
  font:var(--font-meta) monospace;
  margin-top:8px;
  display:block
}
.asset-grid a:hover>span{
  text-decoration:underline
}
::selection{
  background:#b62c452c
}
@media(min-width:1600px){
  main{
  max-width:1320px
}
.hero-art{
  height:440px
}
.hero-art>img{
  height:320px
}
}
@media(max-width:1100px){
  :root{
  --sidebar:195px
}
header{
  padding:0 24px
}
aside{
  padding:30px 20px
}
.hero,.section{
  padding-inline-start:34px;
  padding-inline-end:34px
}
.hero-copy{
  align-items:flex-start;
  flex-direction:column;
  gap:22px
}
.hero-copy p{
  max-width:100%
}
.hero-art{
  height:330px
}
.hero-art>img{
  height:230px
}
.section-heading{
  align-items:flex-start;
  flex-direction:column;
  gap:22px
}
.two-col{
  gap:30px
}
.usage-grid{
  gap:12px
}
.usage-visual{
  padding:18px
}
.color-chip{
  height:145px
}
.download-feature{
  padding:28px
}
footer{
  padding-inline-start:34px;
  padding-inline-end:34px
}
}
@media(max-width:760px){
  :root{
  --sidebar:0px
}
html{
  scroll-padding-top:140px
}
header{
  height:72px;
  padding:0 20px
}
.header-label{
  display:none
}
.brand-home,.brand-home img{
  width:144px
}
.languages{
  gap:0
}
.languages a{
  min-width:34px
}
.header-right{
  gap:0
}
aside{
  position:sticky;
  top:72px;
  z-index:14;
  display:block;
  width:100%;
  height:54px;
  border-inline-end:0;
  border-bottom:1px solid var(--line);
  padding:0;
  background:var(--paper);
  overflow-x:auto;
  scrollbar-width:none
}
aside nav{
  display:flex;
  gap:24px;
  padding:0 20px;
  min-width:max-content;
  height:54px
}
aside nav a{
  font-size:var(--font-secondary);
  gap:8px;
  min-height:54px
}
.aside-title,.aside-download,.aside-foot{
  display:none
}
main{
  margin:0
}
.hero{
  padding:28px 22px 0
}
.hero-copy{
  margin:32px 0 28px;
  gap:24px
}
h1{
  font-size:52px
}
.hero-copy>p{
  font-size:var(--font-secondary)
}
.hero-art{
  height:310px;
  padding:22px
}
.hero-art>img{
  height:220px;
  width:95%
}
.art-caption{
  font-size:var(--font-meta)
}
.hero-art-footer{
  font-size:var(--font-meta)
}
.hero-top .eyebrow{
  font-size:var(--font-meta)
}
.hero-bottom{
  font-size:var(--font-meta);
  padding:18px 0
}
.section{
  padding:54px 22px
}
.section-index{
  margin-bottom:25px;
  font-size:var(--font-meta)
}
.two-col{
  grid-template-columns:1fr;
  gap:28px
}
h2{
  font-size:35px
}
.large-copy{
  font-size:16px
}
.section-heading>p{
  font-size:var(--font-secondary);
  max-width:100%
}
.logo-tools{
  align-items:flex-start;
  flex-direction:column;
  gap:12px
}
.segmented{
  width:100%;
  gap:0
}
.segmented button{
  flex:1;
  padding:8px 11px;
  font-size:var(--font-meta)
}
.backgrounds{
  align-self:flex-end
}
.logo-stage{
  height:270px;
  padding:28px
}
.logo-stage>img{
  width:100%;
  height:170px
}
.logo-stage[data-layout=stacked]>img{
  width:80%;
  height:205px
}
.logo-stage[data-layout=icon]>img{
  width:60%
}
.stage-bottom{
  font-size:var(--font-meta);
  flex-direction:column;
  gap:12px
}
.stage-bottom a{
  min-height:30px;
  align-items:center
}
.spacing-block{
  grid-template-columns:1fr;
  gap:24px;
  margin-top:34px
}
.spacing-demo{
  min-height:180px
}
.minimums{
  grid-template-columns:1fr 1fr;
  gap:20px
}
.minimums>p{
  grid-column:1/-1
}
.palette{
  grid-template-columns:1fr 1fr;
  gap:26px 12px
}
.color-chip{
  height:160px
}
.color-name{
  font-size:var(--font-secondary)
}
.color-code{
  font-size:var(--font-meta)
}
.type-grid{
  grid-template-columns:1fr;
  gap:32px
}
.wordmark-spec>img{
  height:auto;
  margin-top:24px
}
.alphabet{
  font-size:40px
}
.language-spec p{
  font-size:15px
}
.usage-grid{
  grid-template-columns:1fr;
  gap:30px
}
.usage-visual{
  height:190px;
  padding:36px
}
.usage-visual img{
  width:100%;
  max-width:300px;
  height:auto
}
.usage-card p{
  font-size:var(--font-secondary)
}
.download-feature{
  padding:28px;
  align-items:flex-start;
  flex-direction:column;
  gap:24px
}
.download-feature h3{
  font-size:25px
}
.download-list>a,.download-list>button{
  align-items:flex-start;
  flex-direction:column;
  gap:16px
}
.version-note{
  grid-template-columns:1fr;
  gap:14px
}
.version-note p{
  font-size:var(--font-secondary)
}
footer{
  padding:25px 22px;
  flex-wrap:wrap;
  gap:20px
}
footer>span{
  display:none
}
.toast{
  left:50%;
  width:max-content;
  max-width:90vw
}
.asset-grid{
  grid-template-columns:1fr 1fr;
  gap:18px 12px
}
.asset-grid a>span{
  font-size:var(--font-meta)
}
.asset-preview{
  height:110px;
  padding:16px
}
.dialog-heading h2{
  font-size:22px
}
dialog{
  padding:20px
}
}
@media(prefers-reduced-motion:reduce){
  html{
  scroll-behavior:auto
}
*,*:before,*:after{
  transition:none!important;
  animation:none!important
}
}

/* v0.4: reading scale and globe language-entry standard */
html{
  font-size:100%;
  scrollbar-color:var(--muted) var(--paper)
}
body{
  font-size:var(--font-body);
  line-height:var(--body-leading)
}
:lang(ja){
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",sans-serif
}
:lang(zh-Hans){
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif
}
h1,h2{
  letter-spacing:-.03em;
  text-wrap:balance
}
h1{
  font-size:clamp(2.5rem,4.8vw,4.5rem)
}
:lang(zh-Hant) h1,:lang(zh-Hans) h1,:lang(ja) h1,:lang(zh-Hant) h2,:lang(zh-Hans) h2,:lang(ja) h2{
  letter-spacing:0
}
p{
  overflow-wrap:anywhere
}
small{
  font-size:var(--font-secondary)
}
.hero-copy>p,.section-heading>p,.small-rule p,.spacing-block p,.version-note p,.type-grid p,.usage-card p,.download-feature p,.icon-subsection>p,.language-rule p,.case-rules>p,.localization-note{
  font-size:var(--font-body);
  line-height:1.75
}
h3,.usage-card h3{
  font-size:1.125rem
}
.hero-copy>p{
  max-width:36ch
}
.section-heading>p{
  max-width:38ch
}
.hero-copy{
  align-items:flex-start
}
.two-col{
  grid-template-columns:1fr 1.2fr
}
.header-label{
  font-size:var(--font-secondary)
}
.brand-home,.brand-home img{
  width:240px
}
.brand-home{
  flex-shrink:0
}
.brand-home picture{
  display:block
}
.ui-icon{
  width:20px;
  height:20px;
  flex:none;
  stroke:currentColor;
  vertical-align:middle;
  display:inline-block
}
a:has(>.ui-icon),button:has(>.ui-icon){
  align-items:center;
  gap:10px
}
.header-right{
  gap:24px
}
.language-picker{
  position:relative
}
.language-picker summary{
  list-style:none;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  cursor:pointer;
  border:1px solid var(--line);
  border-radius:50%;
  color:var(--ink)
}
.language-picker summary::-webkit-details-marker{
  display:none
}
.language-picker summary>.ui-icon{
  width:24px;
  height:24px
}
.language-picker[open] summary,.language-picker summary:hover{
  background:var(--ivory);
  border-color:var(--ink)
}
summary:focus-visible{
  outline:3px solid var(--red);
  outline-offset:4px
}
.language-picker nav{
  position:absolute;
  inset-inline-end:0;
  top:56px;
  width:228px;
  padding:10px;
  background:var(--paper);
  border:1px solid var(--line);
  box-shadow:0 12px 30px #17171714;
  z-index:30
}
.language-heading{
  font-size:var(--font-meta);
  color:var(--muted);
  padding:8px 12px 12px
}
.language-picker nav a{
  display:flex;
  justify-content:space-between;
  align-items:center;
  min-height:48px;
  padding:10px 12px;
  font-size:1rem
}
.language-picker a:hover,.language-picker a:focus-visible{
  background:var(--ivory)
}
.language-picker a[aria-current=page]{
  color:var(--red);
  font-weight:600
}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
.art-caption,.hero-art-footer,.aside-foot,.micro,.stage-label,.stage-bottom,.color-code,.code-caption,.asset-grid a>span{
  font-size:var(--font-meta)
}
.art-caption,.hero-art-footer{
  letter-spacing:0
}
.hero-art-footer{
  gap:12px
}
.hero-bottom{
  align-items:center;
  flex-wrap:wrap;
  font-size:var(--font-secondary)
}
.section-index,.eyebrow{
  letter-spacing:0;
  font-size:var(--font-secondary)
}
.section-index{
  margin-bottom:24px
}
.hero-top .eyebrow{
  font-size:var(--font-meta)
}
aside nav a{
  font-size:var(--font-secondary)
}
.download-list small{
  font-size:var(--font-secondary);
  line-height:1.6
}
.download-list strong{
  font-size:1.125rem
}
.download-list>a>span:last-child,.download-list>button>span:last-child{
  font-size:var(--font-secondary);
  display:inline-flex;
  align-items:center;
  gap:10px
}
.stage-bottom{
  overflow-wrap:anywhere
}
.stage-bottom a{
  font:inherit
}
.logo-stage{
  min-height:350px
}
.stage-label{
  opacity:1
}
.minimums p{
  font-size:var(--font-secondary)
}
.spacing-demo{
  padding:20px;
  background:var(--ivory)
}
.spacing-box{
  padding:0;
  border:0!important;
  background:none!important
}
.clear-space-vector{
  width:100%;
  height:auto;
  overflow:visible
}
.space-guides{
  visibility:hidden
}
.show-guide .space-guides{
  visibility:visible
}
.spacing-measure{
  position:static;
  display:block;
  text-align:center;
  font:var(--font-meta)/1.5 ui-monospace,monospace;
  padding-top:16px
}
.spacing-measure[hidden]{
  display:none
}
.case-rules{
  margin-top:40px;
  border-top:1px solid var(--line);
  padding-top:28px
}
.case-rules>p{
  margin-top:12px;
  max-width:65ch
}
.case-rules>code{
  display:block;
  font-size:var(--font-secondary);
  white-space:normal;
  overflow-wrap:anywhere;
  margin:20px 0
}
.case-example{
  display:flex;
  align-items:baseline;
  gap:22px;
  padding:18px 0;
  border-bottom:1px solid var(--line);
  flex-wrap:wrap
}
.case-example span{
  font-size:var(--font-secondary);
  color:var(--muted)
}
.case-example strong{
  font-size:1.625rem;
  font-weight:500
}
.case-example del{
  font-size:1rem;
  color:var(--muted)
}
table{
  width:100%;
  border-collapse:collapse;
  margin-top:24px;
  font-size:1rem
}
caption{
  text-align:start;
  font-size:var(--font-secondary);
  color:var(--muted);
  padding-bottom:12px
}
th,td{
  text-align:start;
  padding:14px 12px;
  border-bottom:1px solid var(--line);
  font-variant-numeric:tabular-nums
}
th:first-child,td:first-child{
  padding-inline-start:0
}
.icon-subsection{
  margin-top:40px
}
.icon-subsection>p{
  margin-top:12px;
  max-width:65ch
}
.platform-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
  margin-top:24px
}
.platform-grid>a{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
  padding:20px 12px;
  border:1px solid var(--line);
  min-width:0
}
.platform-grid img{
  width:72px;
  height:72px;
  object-fit:contain
}
.platform-grid span{
  font-size:var(--font-secondary)
}
.platform-grid code{
  font-size:var(--font-meta);
  overflow-wrap:anywhere
}
.ui-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
  margin-top:24px;
  border-top:1px solid var(--line)
}
.ui-grid>a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:22px 12px;
  border-bottom:1px solid var(--line);
  min-width:0
}
.ui-grid code{
  font-size:var(--font-meta);
  overflow-wrap:anywhere
}
.icon-preview>.ui-icon{
  width:24px;
  height:24px
}
.ui-grid a>.ui-icon{
  width:16px;
  height:16px
}
.language-rule{
  display:grid;
  grid-template-columns:100px 1fr;
  gap:32px;
  background:var(--ivory);
  padding:32px;
  margin-top:40px
}
.globe-specimen{
  display:grid;
  place-items:center
}
.globe-specimen>.ui-icon{
  width:64px;
  height:64px
}
.language-rule p{
  margin-top:14px;
  max-width:65ch
}
.native-language-list{
  font-size:var(--font-secondary);
  margin-top:20px;
  line-height:1.8
}
.badge-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:24px
}
.badge-preview{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  padding:24px;
  background:var(--ivory)
}
.badge-preview.dark{
  background:var(--ink);
  color:#fff
}
.badge-preview img{
  max-width:calc(100% - 32px);
  height:auto
}
.localization-note{
  padding-top:24px;
  color:var(--muted)
}
.version-note{
  grid-template-columns:1fr 3fr
}
.version-note h3{
  font-size:1rem
}
.language-spec small{
  font-size:var(--font-secondary)
}
.language-spec p{
  overflow-wrap:anywhere
}
footer a{
  font-size:var(--font-secondary)
}
:target{
  scroll-margin-top:110px
}
.toast{
  font-size:var(--font-secondary)
}
@media(max-width:1100px){
  .hero-copy>p,.section-heading>p{
  max-width:65ch
}
.two-col{
  grid-template-columns:1fr
}
.platform-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))
}
.ui-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))
}
.badge-preview{
  padding:16px
}
.usage-grid{
  grid-template-columns:1fr
}
.usage-card{
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:24px
}
.usage-card .usage-visual{
  grid-row:1/4
}
.usage-tag{
  margin:0 0 8px
}
.usage-card p{
  align-self:start
}
}
@media(max-width:760px){
  .brand-home,.brand-home img{
  width:52px
}
.brand-home img{
  height:40px;
  object-fit:contain
}
.header-label{
  display:block;
  max-width:150px;
  overflow-wrap:anywhere;
  line-height:1.4
}
.header-right{
  gap:18px
}
header{
  padding:0 20px
}
.hero-copy{
  margin:28px 0
}
.hero-copy>p,.section-heading>p{
  font-size:1rem
}
.hero-art{
  height:300px;
  padding:20px
}
.hero-art>img{
  height:205px
}
.hero-art-footer{
  font-size:var(--font-meta)
}
h1{
  font-size:2.5rem
}
h2{
  font-size:2rem
}
.section{
  padding:48px 22px
}
.two-col{
  grid-template-columns:1fr
}
.section-index{
  font-size:var(--font-secondary)
}
.stage-bottom{
  font-size:var(--font-meta)
}
.hero-top{
  gap:14px
}
.version{
  font-size:var(--font-meta)
}
.hero-bottom{
  font-size:var(--font-secondary);
  gap:16px
}
.hero-bottom>a{
  min-height:44px
}
.candidate{
  line-height:1.5
}
.logo-stage{
  min-height:270px
}
.segmented button{
  font-size:var(--font-secondary);
  padding:10px 8px
}
.language-spec p{
  font-size:1rem
}
.language-rule{
  grid-template-columns:1fr;
  gap:20px;
  padding:24px
}
.globe-specimen{
  justify-content:start
}
.globe-specimen>.ui-icon{
  width:44px;
  height:44px
}
.platform-grid{
  grid-template-columns:1fr 1fr
}
.ui-grid{
  grid-template-columns:1fr 1fr
}
.ui-grid>a{
  padding:20px 8px
}
.badge-grid{
  grid-template-columns:1fr
}
.usage-card{
  display:block
}
.usage-tag{
  margin-top:18px
}
.version-note{
  grid-template-columns:1fr
}
.version-note p,.usage-card p{
  font-size:1rem
}
.download-feature p{
  font-size:1rem
}
.asset-grid a>span{
  font-size:var(--font-meta)
}
.spacing-demo{
  padding:12px
}
:target{
  scroll-margin-top:146px
}
}
@media(max-width:360px){
  .header-label{
  max-width:120px
}
.header-right{
  gap:10px
}
.hero,.section{
  padding-inline:18px
}
.platform-grid{
  gap:8px
}
.ui-grid{
  grid-template-columns:1fr
}
.hero-top{
  flex-wrap:wrap
}
.hero-art-footer{
  flex-wrap:wrap
}
h1{
  font-size:2.25rem
}
.hero-art{
  height:290px
}
.hero-art>img{
  height:190px
}
.hero-art-footer{
  gap:4px
}
}
@media(max-width:760px){
  .brand-home,.brand-home img{
  width:56px
}
.brand-home img{
  height:44px
}
}
/* Mobile keeps the primary identity and globe control;
   the redundant descriptor
   yields its space so enlarged text cannot clip the fixed navigation header. */
@media(max-width:760px){
  .header-label{
  display:none
}
}

/* Long translated download labels must reflow at enlarged text sizes. */
.download-list>a>span,.download-list>button>span{
  min-width:0;
  max-width:100%;
  white-space:normal;
  overflow-wrap:anywhere
}
.download-list .ui-icon{
  flex-shrink:0
}

.download-list>a>span:last-child,.download-list>button>span:last-child{
  white-space:normal
}

.download-feature>span{
  min-width:0;
  max-width:100%;
  white-space:normal;
  overflow-wrap:anywhere
}

/* Content adapts to the panel width;
   normal reading text never shrinks to fit. */
h1{
  font-size:clamp(2.25rem,1.6rem + 3.2vw,4.5rem)
}
h2{
  font-size:clamp(2.25rem,1.5rem + 2.2vw,3rem)
}
h1,h2,h3,p,.eyebrow,.stage-label,.art-caption,.hero-art-footer{
  overflow-wrap:anywhere
}
.hero-copy>*,.section-heading>*,.two-col>*,.type-grid>*,.spacing-block>*,.minimums>*,.usage-card>*,.download-feature>*{
  min-width:0
}
.two-col,.type-grid,.spacing-block{
  grid-template-columns:repeat(2,minmax(0,1fr))
}
.hero-art{
  height:auto;
  min-height:380px;
  gap:20px
}
.hero-art>img{
  flex-shrink:0
}
.section-picker{
  display:none
}
aside{
  overflow-y:auto
}
.section-picker summary{
  min-height:52px;
  padding:14px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  cursor:pointer;
  font-size:var(--font-secondary);
  list-style:none
}
.section-picker summary::-webkit-details-marker{
  display:none
}
.section-picker summary:focus-visible{
  outline:3px solid var(--red);
  outline-offset:-4px
}
.section-picker[open] summary>.ui-icon{
  transform:rotate(180deg)
}
.section-picker nav{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 16px;
  padding:0 22px 14px
}
.section-picker nav a{
  min-height:44px;
  display:flex;
  align-items:center;
  font-size:var(--font-secondary);
  overflow-wrap:anywhere;
  padding:8px 0
}
@media(max-width:1100px){
  .two-col{
  grid-template-columns:minmax(0,1fr)
}
}
@media(max-width:760px){
  aside{
  display:none
}
.section-picker{
  display:block;
  border-bottom:1px solid var(--line);
  background:var(--paper)
}
.two-col,.type-grid,.spacing-block{
  grid-template-columns:minmax(0,1fr)
}
.hero-art{
  height:auto;
  min-height:290px
}
.hero-art>img{
  max-height:190px
}
:target{
  scroll-margin-top:88px
}
html{
  scroll-padding-top:88px
}
}

:lang(zh-Hant) :is(h1,h2),:lang(zh-Hans) :is(h1,h2),:lang(ja) :is(h1,h2){
  letter-spacing:0
}

/* Brand story: a readable editorial column, with room for every language. */
.story-copy{
  max-width:66ch
}
.story-lead{
  font-size:1.125rem;
  line-height:1.85
}
.story-part{
  margin-top:2rem
}
.story-part h3{
  font-size:1.125rem;
  font-weight:600;
  line-height:1.6
}
.story-part p{
  font-size:var(--font-body);
  line-height:1.85;
  margin-top:.75rem
}
.story-signoff{
  font-size:1.375rem;
  line-height:1.65;
  margin-top:2.5rem;
  color:var(--red)
}
.story-download{
  display:inline-flex;
  align-items:center;
  gap:12px;
  min-height:44px;
  font-size:var(--font-secondary);
  margin-top:1rem;
  text-decoration:underline;
  text-underline-offset:5px
}
.story-name-rule{
  margin-top:1.5rem
}

/* A reverse favicon needs its intended dark preview surface. */
.platform-grid a.platform-platform_dark>img{
  background:var(--ink);
  border-radius:8px;
  padding:8px
}
:lang(ja){
  line-break:strict
}

/* v0.5: shared fourteen-locale layout; scripts shape through the browser. */
.language-picker nav {max-height:calc(100dvh - 120px);overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;max-width:calc(100vw - 32px)}
.language-picker nav a {flex-shrink:0;gap:12px}
.language-picker nav a span {unicode-bidi:plaintext}
:lang(ar) h1,:lang(ar) h2,:lang(ar) h3,:lang(ar) .eyebrow,:lang(ar) .section-index,:lang(ar) .header-label,:lang(ar) .alphabet,
:lang(hi) h1,:lang(hi) h2,:lang(hi) h3,:lang(hi) .eyebrow,:lang(hi) .section-index,:lang(hi) .alphabet,
:lang(th) h1,:lang(th) h2,:lang(th) h3,:lang(th) .eyebrow,:lang(th) .section-index,:lang(th) .alphabet {letter-spacing:0;line-height:1.6}
:lang(vi) h1,:lang(vi) h2,:lang(vi) h3 {line-height:1.4}
:lang(ko) p,:lang(ko) h1,:lang(ko) h2,:lang(ko) h3 {word-break:keep-all;overflow-wrap:anywhere}
:lang(th) p {word-break:normal;overflow-wrap:anywhere}
.format-sample {margin-block-start:1.5rem;line-height:1.8}
.format-sample small {font-size:.875rem;color:var(--muted)}
pre,code,.color-code,#asset-name,.version,.aside-title>span {direction:ltr;unicode-bidi:isolate}
.alphabet {overflow-wrap:anywhere;line-height:1.8}
[dir=rtl] header {direction:ltr}
[dir=rtl] .header-right {direction:rtl}
[dir=rtl] .brand-home img,[dir=rtl] .logo-stage img,[dir=rtl] .spacing-demo svg {transform:none}
.badge-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
.badge-preview {min-width:0}
.badge-preview img {width:calc(100% - 32px);min-width:0;flex:1;object-fit:contain}
@media(max-width:760px){.badge-grid{grid-template-columns:minmax(0,1fr)}}
.case-rules table {table-layout:fixed;width:100%}
.case-rules th,.case-rules td {overflow-wrap:anywhere;white-space:normal}
.palette {grid-template-columns:repeat(4,minmax(0,1fr))}
.swatch {min-width:0}
.color-name {overflow-wrap:anywhere}
.color-code {flex-wrap:wrap}
@media(max-width:760px){.palette{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Hide the whole skip link even when translated text wraps at 200%. */
.skip {top:0;transform:translateY(calc(-100% - 8px));max-width:calc(100vw - 48px);overflow-wrap:anywhere}
.skip:focus {top:8px;transform:none}
/* The language trigger stays physically top-right in both reading directions. */
[dir=rtl] .language-picker nav {inset-inline-end:auto;left:auto;right:0}
/* Natural scripts in metadata must not inherit the Latin monospace specimen. */
:is(:lang(ar),:lang(hi),:lang(th)) :is(.art-caption,.hero-art-footer,.aside-foot,.stage-label,.micro,.asset-grid a>span) {font-family:inherit;letter-spacing:0}

/* Replacement references remain separate, readable targets in every locale. */
.rebrand-links{display:flex;flex-wrap:wrap;gap:8px 24px;list-style:none;padding:0;margin:16px 0}
.rebrand-links li{min-width:0;max-width:100%}
.rebrand-links a{display:inline-flex;align-items:center;min-height:44px;overflow-wrap:anywhere;text-decoration:underline;text-underline-offset:4px}
.download-list>a,.download-list>button{display:grid;grid-template-columns:minmax(0,1fr) minmax(44px,30%)}
.download-list>a>span:last-child,.download-list>button>span:last-child{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}

.download-feature>span{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.download-feature b{margin-inline-start:0}

/* Keep reading surfaces reachable, including short panels and enlarged text. */
html {scrollbar-gutter:stable;scroll-padding-inline:24px}
main {padding-bottom:48px}
.code-sample pre {overflow-wrap:anywhere;overflow:auto;max-width:100%;padding-bottom:8px}
aside,.language-picker nav {scroll-padding-block:16px;padding-bottom:24px}
.platform-grid span {min-width:0;max-width:100%;overflow-wrap:anywhere}
.candidate {min-width:0;max-width:100%;overflow-wrap:anywhere;white-space:normal}

/* The open asset browser is a reading surface, not an unconstrained canvas. */
dialog {max-width:calc(100vw - 32px);overflow:auto;scrollbar-gutter:stable;scroll-padding-block:20px}
.dialog-heading {gap:16px;min-width:0}
.dialog-heading h2 {min-width:0;overflow-wrap:anywhere}
.dialog-heading button {flex-shrink:0}
.asset-grid {grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr))}
.asset-grid>a,.asset-preview {min-width:0;max-width:100%}
.asset-grid a>span {overflow-wrap:anywhere;white-space:normal}