/* Keep source design tokens and control sizes; adapt only the document browser. */
html,body{width:100%;height:100%;overflow:hidden;scroll-behavior:auto;scroll-padding-top:0}
body{background:#fff;font-size:16px}
.canvas{width:100%;height:100%;min-height:0;margin:0;zoom:1!important}
.topbar,.hero,.intro-strip,.group-heading,.footer,.backtop{display:none!important}
.layout{height:100%;grid-template-columns:204px minmax(0,1fr);align-items:stretch}
.sidebar{position:relative;top:0;height:100%;min-height:0;padding:20px 14px 20px 16px;background:#fffcf8;overscroll-behavior:contain;scrollbar-gutter:stable}
.sidebar-title{margin:18px 8px 12px;color:var(--ink);font-weight:600}
.main{height:100%;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:24px 28px 28px;outline-offset:-4px;scroll-behavior:auto}
.spec{margin:0;padding:0 0 24px;border:0;scroll-margin-top:0}
.spec:not([hidden]){display:block}
.spec-head{margin-bottom:22px;gap:18px}.spec-head>div{min-width:0}.spec-head h2{font-size:23px}.spec-head p{font-size:14px;line-height:1.75}
.spec-head>code{white-space:normal;max-width:38%;flex:none}
.library-controls{display:grid;gap:10px;position:sticky;top:-20px;padding:0 0 8px;background:#fffcf8;z-index:2}
.library-controls .doc-search{width:100%;height:40px;padding:0 10px;background:#fff}
.library-controls .doc-search input{font-size:13px}
.library-mobile-label,#library-category{display:none}
.nav-group a{min-height:36px}.nav-group a[hidden],.nav-group[hidden]{display:none!important}
.nav-group h3{margin-top:16px}.side-note{margin:18px 8px 0}
.skip-link{left:220px}.skip-link:focus{top:8px}
.demo{padding:24px}.cols2,.cols3,.cols4{gap:22px}.demo>*,.rules>*,.cols2>*,.cols3>*,.cols4>*{min-width:0}
.rules{gap:24px;line-height:1.9}.rules b{margin-bottom:5px}
.library-matrix-scroll{max-width:100%;overflow:auto;padding:4px;scrollbar-width:thin}
.button-matrix{min-width:820px}.color-ramp{min-width:780px}.type-table{min-width:670px}.token-table{min-width:560px}
.icon-sizes{gap:40px}.icon-gallery{flex-wrap:wrap;gap:24px}
.semantic-colors{grid-template-columns:repeat(3,minmax(0,1fr))}.neutral-strip{flex-wrap:wrap}.neutral-strip .semantic-color{flex:1 1 28%}
.spacing-scale{flex-wrap:wrap;gap:24px}.spacing-item{width:90px}.layout-ruler{gap:12px}
.radius-samples{flex-wrap:wrap;gap:24px}.radius-sample{flex:1 1 220px}
.avatar-list,.avatar-fallbacks{flex-wrap:wrap;gap:20px}.avatar-fallbacks{padding-left:20px}
.size-line{flex-wrap:wrap}.palette-caption,.font-details{flex-wrap:wrap}
.d-charts-layout{grid-template-columns:1.3fr 1fr}.d-charts-layout>.d-chart-card:last-child{grid-column:1/-1}.d-charts-layout .d-bars{height:220px}
.d-dialog-stage{padding:16px}.d-choice-row{flex-wrap:wrap}.d-chart-heading{flex-wrap:wrap}
.f-transfer-demo{grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr);gap:16px}.f-transfer-help{grid-column:1/-1;padding-left:0}
.f-calendar-demo{grid-template-columns:360px minmax(0,1fr);gap:24px}
.toast-container{right:18px;left:auto;max-width:calc(100% - 36px)}
@media(max-width:1100px){.layout{grid-template-columns:188px minmax(0,1fr)}.main{padding:22px}.demo{padding:20px}.cols3,.cols4{grid-template-columns:repeat(2,minmax(0,1fr))}.d-modal-demos{grid-template-columns:1fr}.f-calendar-demo{grid-template-columns:1fr}.d-charts-layout{grid-template-columns:1fr}.d-charts-layout>.d-chart-card:last-child{grid-column:auto}.rules{grid-template-columns:repeat(2,minmax(0,1fr))}.spec-head{flex-wrap:wrap}.spec-head>code{max-width:100%;margin-top:0}.icon-sizes{gap:24px;flex-wrap:wrap}.f-form-demos{gap:22px}}
@media(max-width:900px){.cols3,.cols4{grid-template-columns:repeat(2,minmax(0,1fr))}.cols2{grid-template-columns:1fr}.main{padding:20px}.rules{grid-template-columns:1fr}.radius-samples{gap:18px}.semantic-colors{grid-template-columns:repeat(2,minmax(0,1fr))}.f-state-line{flex-wrap:wrap}.d-data-tables{grid-template-columns:1fr}.avatar-fallbacks{border-left:0;padding-left:0}}
@media(max-width:650px){
 .layout{display:grid;grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
 .sidebar{height:auto;max-height:none;overflow:visible;padding:12px 16px;border-right:0;border-bottom:1px solid var(--line);scrollbar-gutter:auto}
 #catalogue,.sidebar-title,.side-note{display:none}.side-empty{padding:8px 0 0;font-size:12px}
 .library-controls{grid-template-columns:1fr;gap:8px;position:static;padding:0;background:none}.library-mobile-label{display:block;font-size:12px;color:var(--muted)}
 #library-category{display:block;width:100%;min-height:44px;border:1px solid var(--border);border-radius:8px;background:#fff;padding:0 10px;font-size:15px}
 .library-controls .doc-search{height:40px}.library-controls .doc-search input{font-size:16px}.doc-search kbd{display:none}
 .main{padding:20px 16px 24px;scrollbar-gutter:auto}.spec-head{gap:12px}.spec-head h2{font-size:22px}.spec-head h2 span{display:block;margin:4px 0 0}.spec-head>code{font-size:12px}.spec-head p{font-size:14px}
 .cols2,.cols3,.cols4,.rules{grid-template-columns:minmax(0,1fr)}.demo{padding:16px}.demo.white{padding:14px}.rules{gap:18px}.library-matrix-scroll{margin-inline:-4px}
 .icon-sizes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.icon-size{justify-self:start}.icon-gallery{gap:20px}.icon-gallery .hint{flex-basis:100%;margin-left:0!important}
 .semantic-colors{grid-template-columns:1fr}.neutral-strip{align-items:flex-start}.neutral-strip .semantic-color{flex-basis:100%}.contrast-line{align-items:flex-start;flex-wrap:wrap}.layout-ruler{gap:6px}.spacing-scale{padding:0;gap:20px}.spacing-item{width:70px}
 .radius-shape{width:78px}.radius-sample{flex-basis:100%}.avatar-list{gap:16px}.size-line{gap:18px}.message-showcase{align-items:flex-start}.notification-demo{width:100%}.progress-line{min-width:0}.progress-label{flex:none}
 .f-state-line{padding-inline:0}.f-calendar{width:100%;padding:8px}.f-calendar-grid button{min-width:0;font-size:14px;padding:0}.f-calendar-demo{gap:16px;padding:8px}.f-calendar-toolbar{font-size:14px}.f-calendar-legend{gap:12px}.f-calendar-footer{flex-wrap:wrap}.f-calendar-footer .f-text-button{padding-inline:0}
 .f-transfer-demo{grid-template-columns:minmax(0,1fr);gap:12px}.f-transfer-help{grid-column:auto}.f-transfer-actions{display:flex;justify-content:center;gap:24px}.f-transfer-actions svg{transform:rotate(90deg)}.f-transfer-list{min-height:132px}.f-transfer-head{padding:12px}.f-transfer-list label{padding:0 10px}
 .d-dialog-stage{padding:12px}.d-dialog-card,.d-sheet-card{padding:18px}.d-choice-row{gap:6px}.d-dialog-actions{align-items:stretch;flex-direction:column}.d-dialog-actions .btn{width:100%}.d-chart-card{padding:16px}.d-chart-summary{flex-wrap:wrap}.d-chart-comparison{margin-left:0}.d-donut{width:min(220px,100%)}.d-chart-legend{gap:8px}.d-nutrition-legend{gap:12px}.d-demo-toolbar{flex-wrap:wrap}.d-file-example{flex-wrap:wrap}.d-file-example .d-status-pill{margin-left:0}.d-dropzone{padding:16px}.d-empty-card{padding-inline:12px}.d-native-dialog{width:calc(100vw - 24px);padding:20px}.d-native-dialog .d-dialog-actions{flex-direction:row}.d-native-dialog .d-dialog-actions .btn{width:auto}.d-data-tables{padding-inline:8px;overflow:auto}.d-data-tables table{min-width:220px}.d-chart-data summary span{display:block;margin-left:0}
 .skip-link{left:16px}.toast-container{right:12px;max-width:calc(100% - 24px)}
}