.doc{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:200px minmax(0,1fr);gap:var(--space-48);padding:var(--space-40) var(--space-24) var(--space-64)}
.toc{position:sticky;top:92px;align-self:start;display:flex;flex-direction:column;gap:var(--space-2)}
.toc a{padding:var(--space-6) var(--space-12);border-radius:var(--radius-md);color:var(--text-secondary);text-decoration:none;font:var(--type-body-m)}
.toc a:hover{background:var(--bg-row-hover);color:var(--text-primary)}
.doc__main{min-width:0}
.hero h1{font:var(--type-display);letter-spacing:var(--type-display-tracking);margin:var(--space-8) 0 var(--space-12)}
.hero p,.lead,.note{color:var(--text-secondary);max-width:680px;margin:0}
.note{margin-top:var(--space-16);font:var(--type-body-s)}
.sec{padding-top:var(--space-64)}
.sec h2{font:var(--type-heading-h1);letter-spacing:var(--type-heading-h1-tracking);margin-bottom:var(--space-12)}
.sec h3{font:var(--type-heading-h3);margin:var(--space-32) 0 var(--space-12)}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:var(--accent-on-soft);background:var(--accent-soft);padding:1px 5px;border-radius:var(--radius-xs)}
.flow{list-style:none;margin:var(--space-16) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-12);counter-reset:f}
.flow li{position:relative;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-16);display:flex;flex-direction:column;gap:var(--space-6);counter-increment:f}
.flow li::before{content:counter(f);font:var(--type-caption-medium);color:var(--text-tertiary)}
.flow li:not(:last-child)::after{content:"→";position:absolute;right:-12px;top:50%;transform:translate(50%,-50%);color:var(--text-tertiary);z-index:1}
.flow b{font:var(--type-body-m-medium);word-break:break-word}
.flow span{font:var(--type-caption);color:var(--text-secondary)}
.code{margin:var(--space-16) 0 0;padding:var(--space-16);background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);overflow-x:auto}
.code code{background:none;padding:0;color:var(--text-secondary);font-size:12.5px;line-height:1.6}
.sw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--space-8);margin-top:var(--space-16)}
.sw{display:flex;gap:var(--space-12);align-items:center;padding:var(--space-8);border-radius:var(--radius-lg);background:var(--bg-surface);border:1px solid var(--border-subtle)}
.sw__c{display:flex;width:56px;height:40px;border-radius:var(--radius-md);overflow:hidden;flex:none;box-shadow:inset 0 0 0 1px var(--border-subtle)}
.sw__c span{flex:1}
.sw__t{display:flex;flex-direction:column;min-width:0;gap:1px}
.sw__t b{font:var(--type-body-m-medium)}
.sw__t code{align-self:flex-start;background:none;padding:0;color:var(--text-tertiary)}
.sw__t small{font:var(--type-caption);color:var(--text-tertiary)}
.ramp{display:flex;align-items:center;gap:var(--space-12);margin-bottom:var(--space-8)}
.ramp__n{width:64px;font:var(--type-caption-medium);color:var(--text-secondary)}
.ramp__s{flex:1;display:flex;border-radius:var(--radius-md);overflow:hidden;box-shadow:inset 0 0 0 1px var(--border-subtle)}
.ramp__s span{flex:1;height:44px;display:flex;align-items:flex-end;padding:var(--space-4)}
.ramp__s i{font:var(--type-caption);font-style:normal;font-size:10px;color:#fff;mix-blend-mode:difference}
.type{display:flex;flex-direction:column;margin-top:var(--space-16);border-top:1px solid var(--border-subtle)}
.ty{display:grid;grid-template-columns:180px 1fr;gap:var(--space-24);align-items:baseline;padding:var(--space-16) 0;border-bottom:1px solid var(--border-subtle)}
.ty__m{display:flex;flex-direction:column}
.ty__m b{font:var(--type-body-m-medium)}
.ty__m small{font:var(--type-caption);color:var(--text-tertiary)}
.sizes{display:flex;flex-direction:column;gap:var(--space-6);margin-top:var(--space-16)}
.sp{display:grid;grid-template-columns:120px auto 1fr;gap:var(--space-12);align-items:center}
.sp code{background:none;padding:0;color:var(--text-tertiary)}
.sp span{height:12px;border-radius:var(--radius-xs);background:var(--accent-default)}
.sp small{font:var(--type-caption);color:var(--text-tertiary)}
.radii{display:flex;gap:var(--space-16);flex-wrap:wrap;margin-top:var(--space-24)}
.rd{display:flex;flex-direction:column;gap:var(--space-4);align-items:flex-start}
.rd span{width:72px;height:56px;background:var(--accent-soft);border:1.5px solid var(--accent-default)}
.rd code{background:none;padding:0;color:var(--text-tertiary)}
.rd small{font:var(--type-caption);color:var(--text-tertiary)}
.specimen{display:flex;flex-wrap:wrap;gap:var(--space-16);margin-top:var(--space-16);padding:var(--space-24);background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-xl)}
.specimen figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:var(--space-8)}
.specimen figcaption{font:var(--type-caption);color:var(--text-tertiary)}
.odd.is-hover{border-color:var(--border-strong);background:var(--bg-elevated)}
.odd.still{animation:none}
.rules{display:grid;grid-template-columns:200px 1fr;gap:var(--space-12) var(--space-24);margin:var(--space-24) 0 0;max-width:860px}
.rules dt{font:var(--type-body-m-medium)}
.rules dd{margin:0;color:var(--text-secondary)}
.demo-lg{margin-top:var(--space-16)}
.fb{display:flex;flex-direction:column;gap:var(--space-12);margin-top:var(--space-16);max-width:720px}
.fb .banner{margin:0}
.demo-it{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);max-width:320px}
.srcs{display:flex;flex-direction:column;gap:var(--space-8);padding:var(--space-16);background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);align-items:flex-start}
@media (max-width:860px){
  .doc{grid-template-columns:1fr;padding:var(--space-24) var(--space-16) var(--space-48);gap:0}
  .toc{position:static;flex-direction:row;overflow-x:auto;margin:0 calc(-1 * var(--space-16));padding:0 var(--space-16) var(--space-8);margin-bottom:var(--space-24);scrollbar-width:none}
  .toc a{white-space:nowrap;border:1px solid var(--border-subtle);border-radius:var(--radius-full)}
  .flow{grid-template-columns:1fr 1fr}
  .flow li::after{display:none}
  .ty{grid-template-columns:1fr;gap:var(--space-6)}
  .rules{grid-template-columns:1fr;gap:var(--space-4)}
  .rules dd{margin-bottom:var(--space-12)}
  .sp{grid-template-columns:110px auto 1fr}
  .lg__cols{display:none}
}