/* Typography: calm, legible and native to the visitor's device. */
:root{--sans:'Noto Sans SC','PingFang SC','Microsoft YaHei UI','Microsoft YaHei',system-ui,sans-serif}
body{font-family:var(--sans);font-size:15px}
.header nav{font-size:14px;font-weight:500;letter-spacing:.01em}
.nav-cta,.quiet-link,.text-link{font-size:13px;font-weight:500}
.hero h1{font-weight:550;letter-spacing:.01em;line-height:1.48}
.hero-description{font-size:15px;color:#4f6254;line-height:1.95}
.product-name{font-size:13px;font-weight:500}
.hero-attributes{font-size:11px;color:#536b58}
.scene-note{font-size:10px;color:#42554a}
.section-kicker{font-size:13px;font-weight:500;color:#57745f}
h2{font-weight:550;letter-spacing:.005em;line-height:1.5}
.center-heading>p:last-child,.section-heading>p,.design-points p,.first-days-title>p:not(.section-kicker){font-size:14px;color:#5c6d60;line-height:1.9}
.design-points h3,.onboarding h3{font-weight:550;letter-spacing:.01em}
.collection-details>p,.onboarding p,.support-intro p:last-child{font-size:13px;color:#5c6d60}
.collection-details .collection-note,.doc-footnote{font-size:12px;color:#687c6b}
.swatches button{font-size:12px}.support-links a,.onboarding a{font-size:13px}
.doc-article h1{font-weight:550}.doc-article h2{font-weight:550}
.doc-article p,.doc-article li{font-size:15px;color:#435a47;line-height:1.9}
.doc-article .doc-lead{font-size:16px;color:#566e58}
.doc-nav>a{font-size:13px}.doc-nav>span,.doc-tag,.search-status{font-size:12px}
.notice p{font-size:14px}.notice>strong{font-size:13px}
.search-box input{font-size:13px}.keymap-bottom small{font-size:11px;color:#526657}

/* One consistent line-icon family, drawn at a stable size on all platforms. */
.point-icon{display:grid;place-items:center;width:42px;height:42px;margin:0 0 13px;color:#739079}
.point-icon svg,.support-symbol svg,.diagram-symbol svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.support-symbol svg{width:38px;height:38px;stroke-width:1.7}
.diagram-symbol svg{width:27px;height:27px;stroke-width:1.65}
.detail-image figcaption a{color:#465c4c;font-size:11px;white-space:nowrap;border-bottom:1px solid #91a596}

/* Geometry comes directly from the repository layout, including its split gap. */
.keymap-workbench .keyboard{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--layout-gap);padding:35px 4px 28px;align-items:start}
.keymap-workbench .keyboard-half{display:block;position:relative;width:100%;max-width:none;aspect-ratio:var(--layout-cols) / var(--layout-rows);margin:0}
.keymap-workbench .key{position:absolute;left:calc(var(--key-x) * 100% / var(--layout-cols));top:calc(var(--key-y) * 100% / var(--layout-rows));width:calc(var(--key-w) * 100% / var(--layout-cols) - 4px);height:calc(var(--key-h) * 100% / var(--layout-rows) - 4px);min-height:0;margin:0;padding:1px;font-size:clamp(9px,1vw,12px);line-height:1.15;overflow-wrap:anywhere;border:1px solid #c5d3c4;border-bottom:3px solid #bdccbc;border-radius:7px;background:#f0f4ec;color:#405644;box-shadow:0 2px 2px #3b59450a}
.keymap-workbench .key:nth-child(n){transform:rotate(var(--key-rotation))}
.key-label{display:block}
.keymap-workbench .key.thumb{background:#d9e8d8;border-color:#aec7ae;color:#35563b}
.keymap-workbench .key.special{background:#a9c7ad;border-color:#83aa8b;color:#213e29;font-weight:600}
.keymap-workbench .key.empty{opacity:.38}
.keymap-workbench .key:hover,.keymap-workbench .key[aria-pressed=true]{background:#accbad;border-color:#7aa180;color:#203e28}
.keymap-info p{font-size:13px}.keymap-info>span{font-size:11px;color:#5c7060}

/* The pill glides between tabs while the keyboard keeps its repository geometry. */
.keymap-tabs{position:relative;isolation:isolate}
.keymap-tabs button{position:relative;z-index:1}
.keymap-tab-indicator{position:absolute;top:0;left:0;z-index:0;pointer-events:none;background:#fff;border-radius:22px;box-shadow:0 2px 5px #3b59450a}
.keymap-tabs.has-sliding-indicator [aria-pressed=true]{background:transparent;box-shadow:none}

/* Light movement and translucent surfaces, respecting device preferences. */
.header{background:#fafbf9d9;backdrop-filter:blur(20px) saturate(1.15);-webkit-backdrop-filter:blur(20px) saturate(1.15);box-shadow:0 1px 0 #c7d3c73a}
.keymap-workbench{background:#f7faf5dc;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 15px 50px #4a66500c}
.detail-image figcaption,.zoom{background:#ffffffcf;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
@media(prefers-reduced-motion:no-preference){
  @keyframes ego-intro{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
  @keyframes ego-image{from{opacity:.55;transform:scale(1.025)}to{opacity:1;transform:scale(1)}}
  .hero-copy{animation:ego-intro .75s cubic-bezier(.2,.7,.2,1) both}
  .hero-scene{animation:ego-image 1s cubic-bezier(.2,.7,.2,1) both}
  .motion-ready{opacity:0;transform:translateY(16px)}
  .motion-ready.is-visible{opacity:1;transform:translateY(0);transition:opacity .65s ease,transform .65s cubic-bezier(.2,.7,.2,1)}
  .button,.nav-cta,.swatches i,.key,.point-icon,.collection-main img{transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease,opacity .2s ease}
  .keymap-tabs.indicator-ready .keymap-tab-indicator{transition:transform .32s cubic-bezier(.2,.75,.25,1),width .32s cubic-bezier(.2,.75,.25,1),height .2s ease}
  .keymap-tabs button{transition:color .22s ease}
  .keymap-workbench .key:active{filter:brightness(.97)}
}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .nav-cta:hover{background:#e8f0e7;border-color:#8da792}
  .design-points>div:hover .point-icon{transform:translateY(-3px)}
  .swatches button:hover i{transform:scale(1.08)}
  .collection-main button:hover img{transform:scale(1.02)}
}
@media(max-width:760px){
  .header{gap:12px}.header nav{font-size:12px;gap:14px;flex-shrink:0}.header nav a{white-space:nowrap}.header .logo,.header .nav-cta{flex-shrink:0}.nav-cta{font-size:11px}.hero h1{font-weight:550}
  .hero-description{font-size:13px;line-height:1.9}.hero-attributes{font-size:10px}
  .section-kicker{font-size:12px}.center-heading>p:last-child,.section-heading>p,.design-points p,.first-days-title>p:not(.section-kicker){font-size:13px}
  .design-points .point-icon{width:34px;height:34px;top:23px}.collection-details>p,.onboarding p{font-size:13px}
  .support-symbol svg{width:27px;height:27px}.keymap-workbench .keyboard{grid-template-columns:1fr;gap:28px;padding:25px 0 22px}
  .keymap-workbench .keyboard-half{max-width:390px;margin:auto}
  .keymap-workbench .key{font-size:10px}.keymap-workbench .key.thumb{font-size:9px}.key.thumb .key-label{white-space:nowrap}.keymap-info p{font-size:12px}.keymap-info>span{font-size:10px;white-space:normal}
  .doc-article p,.doc-article li{font-size:14px;line-height:1.9}.doc-article .doc-lead{font-size:15px}.doc-nav>a{font-size:11px}.search-box input{font-size:13px}
}
@media(max-width:380px){.hero-attributes{font-size:9px}.keymap-workbench .key{font-size:9px}}