.bench-body{background:#e9ece5;margin:0;color:#203a31;overflow:hidden}.studio-shell{margin:16px;background:#fff;border:1px solid #dce2d6;border-radius:17px;box-shadow:0 12px 40px #1e332b0b;height:calc(100dvh - 32px);min-height:580px;overflow:hidden;display:flex;flex-direction:column}.bench-header{height:70px;flex-shrink:0;border-bottom:1px solid #e6eae1;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:0 24px;background:#fdfefa}.bench-brand{display:flex;align-items:center;gap:17px}.bench-brand>.brandmark{width:142px;transform:scale(.77);transform-origin:left center;margin-right:-32px}.bench-brand>span{width:1px;height:27px;background:#dfe5d8}.bench-brand>div:last-child b{font-size:12px;font-weight:650;display:block}.bench-brand small{font-size:7px;letter-spacing:1.5px;color:#94a18b;margin-top:5px;display:block}.bench-version{display:flex;gap:7px;align-items:center;font-size:10px;color:#839278}.bench-version>span{padding:4px 6px;border:1px solid #e3e8dc;border-radius:4px;color:#9aa68e;font-size:8px;margin-left:4px}.bench-header-actions{display:flex;gap:9px}.bench-header-actions>button,.export-trigger{border:1px solid #dee5d6;border-radius:7px;background:white;color:#64755b;font-size:10px;height:32px;padding:0 12px;display:flex;align-items:center;gap:7px}.bench-header-actions svg{width:13px;height:13px}.export-trigger{background:#173d31;color:white;border-color:#173d31}.export-wrap{position:relative}.export-menu{position:absolute;top:40px;right:0;width:275px;z-index:30;border:1px solid #dce6d1;border-radius:10px;background:#fff;padding:8px;box-shadow:0 12px 35px #193b2d22}.export-menu>span{display:block;font-size:8px;letter-spacing:1.3px;color:#9aa78f;padding:9px 9px 12px}.export-menu>button{display:flex;align-items:center;gap:8px;background:white;border:0;border-radius:6px;width:100%;padding:12px 9px;text-align:left;font-size:10px;color:#546b47}.export-menu>button:hover{background:#f2f7ec}.export-menu small{display:block;font-size:9px;line-height:1.7;padding:10px 9px;color:#98a58b;border-top:1px solid #edf1e6;margin-top:4px}.workbench{display:grid;grid-template-columns:222px minmax(0,1fr);flex:1;min-height:0;position:relative}.studio-nav{background:#fafbf7;border-right:1px solid #e4e9dd;padding:24px 13px 15px;display:flex;flex-direction:column;min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:#d5dfc9 transparent}.nav-heading{font-size:8px;line-height:1.6;letter-spacing:1.4px;color:#95a18b;font-weight:650;padding:0 11px;margin-bottom:12px;display:flex;justify-content:space-between}.nav-heading>span{font-size:8px;border:1px solid #e0e6d9;border-radius:3px;padding:1px 4px;letter-spacing:0}.area-link{display:flex;align-items:center;text-align:left;gap:9px;padding:11px 10px;margin-bottom:4px;flex-shrink:0;border:1px solid transparent;border-radius:7px;background:transparent;font-size:10px;color:#718367;width:100%}.area-link svg{height:14px;width:14px;color:#8fa180}.area-link>span{font-size:8px;margin-left:auto;padding:2px 5px;border-radius:3px;background:#edf1e6;color:#9aa88d}.area-link.area-active{background:#e9f1e1;color:var(--teal);border-color:#d7e5ca;font-weight:600}.area-active svg{color:var(--teal)}.area-active>span{background:#d7e8c9;color:#638149}.nav-search{display:flex;gap:6px;align-items:center;border-bottom:1px solid #e5ebdd;margin:10px 8px 9px;padding:0 0 10px;flex-shrink:0}.nav-search svg{width:12px;height:12px;color:#9aa98c}.nav-search input{font:10px 'DM Sans',sans-serif;background:none;border:0;outline:none;width:100%;color:#546b47}.nav-search input::placeholder{color:#a4af98}.studio-nav .screen-nav{display:block;overflow:auto;flex:1;min-height:130px;max-height:calc(100dvh - 485px);scrollbar-width:thin;scrollbar-color:#dce4d2 transparent;margin-bottom:10px}.screen-nav details{margin:0 0 5px}.screen-nav summary{display:flex;gap:7px;align-items:center;list-style:none;font-size:9px;font-weight:600;color:#7e9270;padding:9px 9px;cursor:pointer}.screen-nav summary::-webkit-details-marker{display:none}.screen-nav summary>small{margin-left:auto;font-size:8px;font-weight:400;color:#a5b098}.screen-nav summary>svg{width:10px;height:10px;color:#94a784;transition:transform .15s}.screen-nav details[open]>summary>svg{transform:rotate(90deg)}.studio-nav .screen-nav button{width:100%;display:flex;gap:8px;align-items:center;border:0;border-radius:5px;background:transparent;padding:8px 9px 8px 18px;font-size:9px;color:#8c9c7f;margin:2px 0;text-align:left;line-height:1.4}.nav-screen-dot{width:4px;height:4px;border:1px solid #b3bfa7;flex-shrink:0}.studio-nav .screen-nav button>small{margin-left:auto;font-size:7px;color:#aab59d}.studio-nav .screen-nav button.active{background:#f0f5e9;color:#426a36;font-weight:600}.studio-nav .screen-nav button.active>.nav-screen-dot{background:#588c43;border-color:#588c43}.studio-nav .screen-nav button:hover{background:#f0f4e9}.nav-no-results{font-size:10px;color:#9aa88b;padding:10px}.design-system-label{padding-top:19px;border-top:1px solid #e6ecdd;margin:15px 10px 4px;padding-left:0}.studio-nav-foot{padding:24px 11px 0;margin-top:auto;color:#859879;font-size:8px;flex-shrink:0}.studio-nav-foot>.dot{display:inline-block;width:4px;height:4px;margin-right:5px}.studio-nav-foot p{font-size:8px;color:#a2ae97;line-height:1.8;margin:8px 0 0}.bench-main{min-height:0;min-width:0;display:flex;flex-direction:column;background:#fdfefa}.page-toolbar{min-height:79px;padding:16px 27px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-shrink:0}.page-title{display:flex;align-items:center;gap:10px;min-width:0}.page-title small{font-size:8px;color:#91a182;letter-spacing:.5px;display:block;margin-bottom:5px}.page-title h1{font-family:Manrope,sans-serif;font-size:20px;letter-spacing:-.8px;line-height:1.25;margin:0;font-weight:750}.toolbar-actions{display:flex;align-items:center;gap:10px}.toolbar-scenario select{font-size:9px;padding:8px 23px 8px 9px;border:1px solid #e0e8d7;border-radius:6px;color:#7b8e6c;background:#fff;max-width:180px}.device-control{display:flex;align-items:center;background:#eff3e9;padding:3px;border:1px solid #e1e8d7;border-radius:7px;gap:2px}.device-control>button{display:flex;align-items:center;gap:5px;padding:6px 9px;border:0;background:transparent;font-size:9px;color:#94a087;border-radius:5px}.device-control>button.selected{background:white;color:#48643b;box-shadow:0 1px 3px #3650250c}.device-control svg{width:12px;height:12px}.focus-control{background:transparent;border:1px solid #e2e8da;border-radius:6px;width:29px;height:29px;display:grid;place-items:center;color:#809572}.focus-control svg{width:13px;height:13px}.nav-toggle{display:none}.bench-content{display:flex;flex:1;min-height:0;flex-direction:column;padding:0 25px 20px;gap:12px}.preview-space{border:1px solid #e2e8d9;border-radius:12px;flex:1;min-height:210px;background:#f2f5eb;background-image:radial-gradient(#cdd8bf .6px,transparent .6px);background-size:15px 15px;overflow:hidden;display:flex;flex-direction:column}.preview-bar{height:39px;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:0 16px;flex-shrink:0;background:#f5f8efb0;border-bottom:1px solid #e5ebdb}.preview-tabs{display:flex;gap:13px}.preview-tabs button{border:0;background:none;color:#9bab8e;display:flex;align-items:center;gap:4px;font-size:8px;padding:6px 0}.preview-tabs svg{height:10px;width:10px}.preview-tabs button.selected{color:#416a35;font-weight:600}.preview-indicator{display:flex;align-items:center;gap:5px;font-size:6px;letter-spacing:1px;color:#8da37a}.preview-indicator .dot{width:4px;height:4px}.preview-indicator>span:not(.dot){color:#a9b69d;letter-spacing:.3px;margin-left:10px}.design-stage{flex:1;min-height:0;display:grid;place-items:center;overflow:auto;padding:16px 20px;scrollbar-width:thin;scrollbar-color:#bacaad transparent}.device-holder{position:relative;flex-shrink:0}.device-transform{position:absolute;top:0;left:0;transform-origin:top left;width:375px;height:768px}.device-transform>.phone{width:375px!important;height:768px!important;border-width:7px!important;border-radius:47px!important;box-shadow:0 20px 40px -18px #27442e3d,0 0 0 1px #809173;transform:none!important}.device-transform .phone-content{font-family:'DM Sans',sans-serif}.preview-footer{height:37px;display:flex;justify-content:space-between;align-items:center;padding:0 15px;flex-shrink:0;border-top:1px solid #e4ebd9;background:#f7f9f2d9;gap:12px}.screen-pager{display:flex;align-items:center;gap:8px;font-size:8px;color:#a0af91}.screen-pager b{font-weight:550;color:#6e895c}.screen-pager button{border:0;background:none;color:#86a171;padding:2px;display:grid;place-items:center}.screen-pager button:disabled{opacity:.25}.screen-pager svg{width:11px;height:11px}.canvas-caption{font-size:7px;color:#9bac8d}.zoom-control{display:flex;gap:4px;align-items:center}.zoom-control button{border:0;background:none;color:#7f966e;font-size:11px;padding:4px}.zoom-control #zoom-readout{font-size:7px;min-width:50px}.spec-panel{height:var(--spec-height);min-height:0;flex-shrink:0;background:#18271f;border:1px solid #293a2b;border-radius:11px;color:#e6eee1;display:flex;flex-direction:column;position:relative;overflow:hidden}.spec-resize{height:8px;flex-shrink:0;cursor:ns-resize;display:flex;justify-content:center;align-items:center;background:#1c2c23;touch-action:none}.spec-resize>span{height:2px;width:25px;background:#4b5b47;border-radius:2px}.spec-resize:focus-visible{outline:2px solid #8bcb62;outline-offset:-2px}.spec-toolbar{height:37px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 15px;border-bottom:1px solid #2d3b2b;flex-shrink:0}.spec-toolbar [role=tablist]{display:flex;gap:5px}.spec-toolbar [role=tab]{border:0;border-radius:5px;background:transparent;padding:6px 10px;font-size:9px;color:#8b9c80}.spec-toolbar [role=tab].active{color:#e7efdf;background:#2b3a2b}.spec-tools{display:flex;gap:6px}.spec-tools>button{background:transparent;border:1px solid #35432f;border-radius:4px;width:23px;height:23px;display:grid;place-items:center;color:#8d9e80}.spec-tools svg{width:11px;height:11px}.spec-tools>button:last-child svg{transform:rotate(90deg)}.spec-content{padding:21px 23px;overflow:auto;min-height:0;flex:1;scrollbar-width:thin;scrollbar-color:#405438 #1b2b21}.spec-panel.collapsed{height:46px}.spec-panel.collapsed .spec-content{display:none}.spec-kicker{font-size:7px;color:#88ac6e;letter-spacing:1.3px;display:block;margin-bottom:9px}.notes-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr .9fr;gap:28px;align-items:start}.notes-grid h3,.state-spec-grid h3,.motion-spec h3{font-family:Manrope,sans-serif;font-size:15px;letter-spacing:-.4px;margin:0 0 8px;line-height:1.5;font-weight:650;color:#dce8d2}.spec-content p{font-size:10px;color:#8e9f84;line-height:1.9;margin:0}.spec-content b{font-size:10px;font-weight:550;color:#c3d1b8}.spec-note{display:flex;gap:10px}.spec-note>span{font-size:8px;color:#547144;padding-top:2px}.spec-note p{font-size:9px;margin-top:7px}.spec-demo{border-left:1px solid #35472c;padding-left:19px}.spec-demo b{font-size:9px}.spec-demo p{font-size:9px;margin-top:7px}.spec-demo strong{color:#b5d69d;font-weight:550}.spec-table{width:100%;border-collapse:collapse;text-align:left;min-width:550px}.spec-table th{font-size:7px;letter-spacing:1px;text-transform:uppercase;font-weight:500;color:#6e8e59;padding:0 15px 12px 0}.spec-table td{font-size:9px;color:#9db08e;padding:10px 15px 10px 0;border-top:1px solid #2a3b26;line-height:1.7;vertical-align:top}.spec-table td:first-child{color:#cedcc3;width:20%}.spec-table td:nth-child(2){width:16%}.spec-table td:nth-child(3){width:18%;color:#7fa666}.spec-table-scroll{overflow:auto}.spec-empty{display:flex;gap:14px;align-items:flex-start}.spec-empty>svg{color:#779a60;width:18px;height:18px}.spec-empty p{margin-top:7px}.state-spec-grid{display:grid;grid-template-columns:1fr 1fr;gap:45px}.state-spec-grid .states{max-width:280px;margin-top:13px}.spec-content .states button{background:#213321;color:#849d73;border-color:#3b5131;padding:7px;font-size:8px}.spec-content .states button.active{background:#354c2b;border-color:#688c51;color:#c7dfb5}.state-spec-grid small,.motion-spec small{font-size:9px;color:#668355;line-height:1.8;display:block;margin-top:10px}.flow-links{display:flex;gap:10px;flex-wrap:wrap}.flow-links>button,.flow-links>div{border:1px solid #354a2c;border-radius:7px;background:#203220;display:flex;flex-direction:column;align-items:flex-start;position:relative;padding:12px 30px 12px 12px;min-width:140px;gap:7px;text-align:left}.flow-links small{font-size:7px;color:#739661}.flow-links b{font-size:10px;font-weight:500}.flow-links svg{position:absolute;right:10px;bottom:12px;width:12px;height:12px;color:#86b168}.spec-footnote{font-size:8px!important;margin-top:13px!important;color:#607c50!important}.motion-spec{display:grid;grid-template-columns:1fr auto;gap:25px}.spec-action{display:flex;align-items:center;gap:7px;background:#263b24;border:1px solid #476238;border-radius:6px;padding:9px 12px;color:#accd93;font-size:9px}.spec-action svg{width:12px;height:12px}.motion-checkbox{font-size:9px;display:flex;gap:7px;align-items:center;color:#819f6d;margin-top:15px}.motion-checkbox input{accent-color:#8bcb62}.screen-enter{animation:screenEntrance .18s ease-out}@keyframes screenEntrance{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}.bench-reduced-motion .screen-enter,.bench-reduced-motion .processing-track span{animation:none!important}.bench-reduced-motion *{transition:none!important}.workbench.is-focused{grid-template-columns:1fr}.workbench.is-focused>.studio-nav,.workbench.is-focused .spec-panel{display:none}.workbench.is-focused .bench-content{gap:0}.desktop-preview{flex:1;min-height:200px;border:1px solid #e0e7d7;border-radius:11px;overflow:auto;background:#f5f7f0;scrollbar-width:thin;scrollbar-color:#c9d8bc transparent}.desktop-preview-label{font-size:7px;letter-spacing:1px;display:flex;align-items:center;gap:6px;padding:12px 20px;background:#f9fbf4;border-bottom:1px solid #e3eadb;color:#91a480}.desktop-preview-label svg{width:10px;height:10px}.desktop-preview-label>span{margin-left:auto;color:#a8b69a;font-size:7px;letter-spacing:.2px}.embedded-review.review-main{margin:0;width:100%;max-width:none;padding:25px}.embedded-review .review-page-heading{margin-bottom:20px}.embedded-review .review-page-heading h1{font-size:22px}.embedded-review .review-page-heading .eyebrow{font-size:8px}.embedded-review .review-page-heading p{font-size:10px}.embedded-review .review-metrics{gap:12px;margin-bottom:20px}.embedded-review .review-metrics>div{padding:15px}.embedded-review .review-metrics strong{font-size:25px}.embedded-review .review-demo-badge{display:none}.review-nav-items{margin:5px 4px 15px}.review-nav-items button{border:0;background:none;font-size:9px;color:#8b9e7c;padding:9px 12px;border-radius:5px;display:flex;align-items:center;gap:8px;width:100%;text-align:left}.review-nav-items button.active{background:#eff4e7;color:#4c753d}.library-page{padding:25px 35px 50px;overflow:auto;flex:1;min-height:0;scrollbar-width:thin;scrollbar-color:#c9d8ba transparent}.library-intro{padding:13px 0 25px;border-bottom:1px solid #e5ebdc;margin-bottom:30px}.library-intro>.eyebrow{font-size:8px;color:#9aac8b}.library-intro h2{font-family:Manrope;font-size:35px;font-weight:750;letter-spacing:-1.6px;line-height:1.25;margin:15px 0;color:#28533d}.library-intro p{font-size:12px;line-height:1.8;color:#8c9f7d}.library-section{margin:35px 0}.library-section-title{display:flex;align-items:center;gap:13px;margin-bottom:20px}.library-section-title>span{font-size:9px;color:#a0b28e}.library-section-title>h3{font-family:Manrope;font-size:16px;letter-spacing:-.5px;font-weight:650;margin:0;color:#567c44}.foundation-palette{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.foundation-palette>button{border:1px solid #e1e9d7;border-radius:11px;overflow:hidden;padding:0;background:white;text-align:left}.foundation-palette>button>i{display:block;height:110px;background:var(--swatch)}.foundation-palette>button>div{padding:17px}.foundation-palette b{display:block;font-size:12px;color:#4c723c}.foundation-palette code{display:block;font-size:10px;color:#9caf8c;margin-top:7px}.foundation-palette p{font-size:10px;line-height:1.7;color:#8ea07e;margin:12px 0}.foundation-palette small{font-size:8px;color:#a7b69a}.type-specimens{display:grid;grid-template-columns:1fr 1fr;gap:35px;border:1px solid #e1e9d7;border-radius:11px;padding:26px;background:#fafcf6}.type-specimens small{font-size:8px;letter-spacing:1px;color:#9db18b}.type-specimens h2{font-family:Manrope;font-size:30px;letter-spacing:-1.1px;font-weight:750;color:#306747;margin:20px 0}.type-specimens p{font-size:16px;line-height:1.9;color:#799868;margin:22px 0}.type-sizes{font-size:14px;color:#74965f;display:flex;gap:15px;flex-wrap:wrap;align-items:baseline}.type-sizes span{font-size:12px}.type-sizes small{font-size:10px;letter-spacing:0}.spacing-tokens{display:flex;gap:30px;flex-wrap:wrap;align-items:flex-end;border:1px solid #e1e9d7;border-radius:11px;padding:24px}.spacing-tokens i{display:block;height:18px;background:#d2e8c0;border-radius:3px}.spacing-tokens b{font-size:9px;color:#91ab7d;font-weight:500;display:block;margin-top:12px}.library-caption{font-size:10px;line-height:1.8;color:#9db18b;margin-top:15px}.component-gallery{display:grid;grid-template-columns:1fr 1fr;gap:22px}.component-gallery>section{border:1px solid #e0e9d5;border-radius:11px;background:#fff;overflow:hidden}.component-heading{padding:19px 23px;border-bottom:1px solid #eaf0e2;background:#fafcf6}.component-heading>span{font-size:8px;letter-spacing:1px;color:#a3b592}.component-heading h3{font-family:Manrope;font-size:16px;letter-spacing:-.5px;margin:9px 0 0;color:#64874f}.component-demo{padding:25px;max-width:375px;margin:auto}.component-demo .primary,.component-demo .secondary{margin-top:12px}.component-demo .primary:first-child{margin-top:0}.component-demo small{font-size:8px;color:#acba9e;display:block;margin-top:17px}.component-demo .field+.field{margin-top:22px}.status-demo{display:flex;gap:7px;flex-wrap:wrap}.component-progress{width:100%;margin:15px 0 5px}.component-progress .step-progress{padding:0}.status-demo .info-note{width:100%;font-size:10px}.asset-layout{display:grid;grid-template-columns:1.4fr 1fr;gap:35px;align-items:center}.asset-logo{border:1px solid #e1e9d6;border-radius:12px;overflow:hidden;background:white}.asset-logo>img{width:100%;display:block}.asset-details .eyebrow{font-size:8px}.asset-details>h3{font-family:Manrope;font-size:20px;letter-spacing:-.7px;color:#5d8348;margin:12px 0}.asset-details p{font-size:11px;line-height:1.9;color:#8caa79}.asset-download{display:inline-flex;align-items:center;gap:8px;border:1px solid #bfd6aa;border-radius:7px;text-decoration:none;font-size:10px;color:#668c4b;padding:11px 13px;margin:10px 0 20px}.asset-download svg{width:13px;height:13px}.asset-note{border-top:1px solid #e6eedc;padding-top:18px}.asset-note b{font-size:10px;color:#86a96e;font-weight:550}.asset-note p{font-size:10px;margin-top:8px}.asset-illustrations{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;border:1px solid #e1e9d6;border-radius:11px;padding:22px}.asset-illustrations small{font-size:9px;color:#a0b48b;display:block;text-align:center;margin-top:20px}.asset-illustrations .document-art{max-width:310px;margin:0 auto}.screen-map-area{overflow:auto;padding:25px;scrollbar-width:thin;scrollbar-color:#c4d6b3 transparent}.map-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:25px}.map-heading .eyebrow{font-size:7px;color:#a5b497}.map-heading h2{font-family:Manrope;font-size:23px;letter-spacing:-1px;line-height:1.4;margin:10px 0;color:#557d40}.map-heading>span{font-size:9px;color:#a0b78e;white-space:nowrap}.map-filter{display:flex;align-items:center;gap:12px;font-size:9px;color:#98ad85;margin:0 0 23px}.map-filter select{font-size:9px;padding:8px;border:1px solid #dce7cf;border-radius:6px;background:#fbfdf7;color:#7c9a64}.studio-map-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.map-screen{border:1px solid #dde7d0;border-radius:9px;background:#fbfdf7;padding:15px 13px;display:flex;text-align:left;gap:12px;align-items:flex-start;transition:border .15s}.map-screen:hover{border-color:#a6c48a;background:#f5fbed}.map-screen>span{font-size:9px;color:#a4bd8f;margin-top:2px}.map-screen small{font-size:7px;letter-spacing:.4px;color:#a6b998}.map-screen b{font-size:11px;font-weight:550;color:#678b50;display:block;margin:6px 0}.map-screen p{font-size:9px;color:#a3b690;line-height:1.7;margin:0}.map-screen>svg{width:12px;height:12px;color:#b1c69c;margin-left:auto;flex-shrink:0}.nav-scrim{display:none}
@media(min-width:1700px){.workbench{grid-template-columns:240px minmax(0,1fr)}.bench-content{padding-left:36px;padding-right:36px}.page-toolbar{padding-left:38px;padding-right:38px}.notes-grid{gap:40px}.spec-content p{font-size:11px}.spec-note p,.spec-demo p{font-size:10px}.spec-content b{font-size:11px}}
@media(max-width:1150px){.workbench{grid-template-columns:195px minmax(0,1fr)}.bench-content{padding:0 18px 17px}.page-toolbar{padding:15px 20px;gap:10px}.page-title h1{font-size:18px}.toolbar-actions{gap:6px}.toolbar-scenario select{max-width:150px;font-size:8px}.notes-grid{grid-template-columns:1.2fr 1fr 1fr;gap:22px}.spec-demo{display:none}.studio-map-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.library-page{padding:20px 26px 40px}.bench-version{display:none}.type-specimens{gap:22px;padding:22px}.type-specimens h2{font-size:25px}.type-specimens p{font-size:13px}}
@media(max-width:850px){.studio-shell{margin:8px;height:calc(100dvh - 16px);border-radius:12px}.workbench{grid-template-columns:175px minmax(0,1fr)}.bench-header{height:62px;padding:0 17px}.bench-brand{gap:10px}.bench-brand>div:last-child b{font-size:11px}.bench-brand small{font-size:6px;letter-spacing:.8px}.bench-brand>.brandmark{transform:scale(.65);margin-right:-48px}.studio-nav{padding:19px 8px 12px}.nav-heading{font-size:7px;letter-spacing:1px}.area-link{font-size:9px;padding:10px 8px;gap:7px}.area-link svg{width:12px;height:12px}.area-link>span{font-size:7px;padding:2px 4px}.screen-nav summary{font-size:8px}.studio-nav .screen-nav button{font-size:8px;padding-left:14px}.toolbar-scenario select{max-width:135px}.device-control>button{padding:6px}.device-control>button>span{display:none}.page-title h1{font-size:16px}.page-title small{font-size:7px}.page-toolbar{min-height:74px}.notes-grid{grid-template-columns:1fr 1fr;gap:20px}.spec-note:last-of-type{display:none}.notes-grid h3{font-size:13px}.spec-content{padding:17px}.spec-content p{font-size:9px}.spec-toolbar{padding:0 10px}.spec-toolbar [role=tab]{padding:6px 8px;font-size:8px}.component-gallery,.asset-layout{grid-template-columns:1fr}.foundation-palette{gap:12px}.foundation-palette>button>i{height:75px}.foundation-palette>button>div{padding:13px}.foundation-palette b{font-size:10px}.foundation-palette p{font-size:9px}.type-specimens{grid-template-columns:1fr}.embedded-review.review-main{padding:20px}.embedded-review .review-metrics{grid-template-columns:repeat(2,1fr)}.embedded-review .review-page-heading h1{font-size:19px}.asset-illustrations{gap:20px;padding:17px}.canvas-caption{display:none}}
@media(max-width:650px){.bench-body{overflow:hidden}.studio-shell{margin:0;height:100dvh;border-radius:0;border:0;min-height:530px}.bench-header{height:60px;padding:0 13px;gap:6px}.bench-brand{gap:7px}.bench-brand>span{height:24px}.bench-brand>div:last-child b{font-size:10px}.bench-brand small{font-size:5px;letter-spacing:.65px}.bench-brand>.brandmark{width:142px;transform:scale(.58);margin-right:-58px}.bench-header-actions{gap:5px}.bench-header-actions>button,.export-trigger{height:29px;padding:0 9px;font-size:9px;gap:5px}.bench-header-actions>button>span{display:none}.bench-header-actions svg{width:11px;height:11px}.workbench{display:block;min-height:0}.bench-main{height:100%;min-height:0}.studio-nav{position:absolute;top:0;left:0;bottom:0;width:235px;z-index:20;display:none;box-shadow:15px 0 35px #23462b20;background:#fcfef8}.studio-nav.nav-open{display:flex}.studio-nav .screen-nav{min-height:120px;max-height:none;display:block}.studio-nav .screen-nav button{font-size:10px;width:100%;display:flex;min-width:0;padding:9px 13px}.studio-nav .screen-nav button>span{display:inline-block!important}.studio-nav .screen-nav details{display:block}.studio-nav .screen-nav summary{font-size:10px}.nav-heading{font-size:8px}.area-link{font-size:10px;padding:12px 10px}.design-system-label{padding-top:14px}.studio-nav-foot{padding-top:15px}.nav-scrim{display:block;border:0;position:absolute;inset:0;background:#173b2b44;backdrop-filter:blur(2px);z-index:15}.page-toolbar{padding:13px 14px;min-height:93px;flex-wrap:wrap;gap:10px}.page-title{flex:1;min-width:150px}.page-title h1{font-size:17px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:245px}.page-title small{font-size:7px;margin-bottom:4px}.nav-toggle{border:1px solid #dfe9d4;border-radius:5px;background:white;width:27px;height:27px;display:grid;place-items:center;color:#84a26e;flex-shrink:0}.nav-toggle svg{width:12px;height:12px}.toolbar-actions{width:100%;gap:8px}.toolbar-scenario{flex:1}.toolbar-scenario select{max-width:none;width:100%;padding:7px 9px;font-size:8px}.device-control>button{padding:5px 7px}.device-control>button>span{display:inline;font-size:8px}.focus-control{width:26px;height:26px}.bench-content{padding:0 11px 10px;gap:9px;min-height:0}.preview-space{border-radius:9px;min-height:180px}.preview-bar{height:30px;padding:0 11px}.preview-tabs button{font-size:7px}.preview-tabs{gap:10px}.preview-indicator{font-size:5px;gap:4px;letter-spacing:.6px}.preview-indicator>span:not(.dot){display:none}.design-stage{padding:12px 10px}.preview-footer{height:30px;padding:0 9px}.screen-pager{font-size:7px;gap:6px}.zoom-control #zoom-readout{font-size:7px}.zoom-control button{padding:3px}.spec-panel{height:min(var(--spec-height),29dvh);border-radius:8px}.spec-panel.collapsed{height:43px}.spec-toolbar{height:34px;padding:0 8px;gap:4px}.spec-toolbar [role=tablist]{gap:0}.spec-toolbar [role=tab]{font-size:7px;padding:5px 7px;white-space:nowrap}.spec-tools{gap:4px}.spec-tools>button{width:21px;height:21px}.spec-content{padding:14px}.notes-grid{display:block}.notes-grid>div:first-child h3{font-size:13px;margin-bottom:7px}.notes-grid .spec-note,.notes-grid .spec-demo{display:none}.spec-kicker{font-size:6px;margin-bottom:7px}.spec-content p{font-size:9px}.spec-resize{height:7px}.state-spec-grid{grid-template-columns:1fr;gap:22px}.state-spec-grid h3{font-size:13px}.state-spec-grid>div:last-child{display:none}.state-spec-grid .states{margin-top:9px}.motion-spec{grid-template-columns:1fr;gap:15px}.motion-spec h3{font-size:13px}.motion-spec p{font-size:8px}.motion-spec small{display:none}.motion-spec>div:last-child{display:flex;gap:12px;align-items:center}.motion-checkbox{margin:0;font-size:8px}.spec-action{padding:7px 9px;font-size:8px}.flow-links{gap:8px}.flow-links>button,.flow-links>div{min-width:120px;padding:9px 25px 9px 10px}.flow-links small{font-size:6px}.flow-links b{font-size:8px}.library-page{padding:15px 21px 35px}.library-intro{margin-bottom:20px}.library-intro h2{font-size:28px;letter-spacing:-1.2px}.library-intro p{font-size:11px}.foundation-palette{grid-template-columns:1fr}.foundation-palette>button{display:grid;grid-template-columns:90px 1fr}.foundation-palette>button>i{height:100%}.foundation-palette>button>div{padding:14px}.foundation-palette p{font-size:10px;margin:8px 0}.type-specimens{padding:20px}.spacing-tokens{gap:20px;padding:20px}.component-demo{padding:22px}.asset-illustrations{grid-template-columns:1fr}.map-heading{display:block;margin-bottom:18px}.map-heading h2{font-size:19px;margin-bottom:12px}.map-heading>span{font-size:8px}.screen-map-area{padding:17px}.studio-map-grid{grid-template-columns:1fr;gap:10px}.map-screen{padding:13px}.map-screen small{font-size:6px}.map-screen p{font-size:9px}.embedded-review.review-main{padding:18px 12px}.embedded-review .review-page-heading h1{font-size:19px}.embedded-review .review-metrics>div{padding:12px}.embedded-review .review-metrics span{font-size:8px}.embedded-review .review-metrics small{font-size:7px}.embedded-review .review-panel-heading{padding:14px}.desktop-preview-label{font-size:6px;padding:9px 12px}.desktop-preview-label>span{font-size:6px}.workbench.is-focused .page-toolbar{min-height:93px}.show-library .toolbar-actions{display:none}.show-library .page-toolbar{min-height:67px}}
@media(max-height:720px) and (min-width:651px){.studio-shell{min-height:500px;margin:8px;height:calc(100dvh - 16px)}.bench-header{height:57px}.page-toolbar{min-height:66px;padding-top:11px;padding-bottom:11px}.spec-panel{height:min(var(--spec-height),190px)}.spec-panel.collapsed{height:46px}.studio-nav{padding-top:17px}.studio-nav .screen-nav{max-height:calc(100dvh - 435px);min-height:90px}.studio-nav-foot{display:none}.spec-content{padding-top:15px;padding-bottom:15px}.notes-grid h3{font-size:13px}.spec-content p{font-size:9px}}
@media(prefers-reduced-motion:reduce){.screen-enter{animation:none!important}}