.design-page.main{max-width:1720px}.design-page .page-header{align-items:center}.design-system{min-width:0}.design-intro{justify-content:space-between;align-items:center;gap:32px;padding:8px 0 28px;display:flex}.design-intro h2{margin:16px 0 12px;font-size:clamp(24px,2.5vw,34px);line-height:1.25}.design-intro p{max-width:650px;color:var(--ui-muted);font-size:max(14px,.9375rem);line-height:1.7}.design-status-dot{background:var(--accent);border-radius:50%;width:6px;height:6px}.design-intro-note{border-left:1px solid var(--ui-border);flex:none;gap:5px;padding-left:24px;display:grid}.design-intro-note>span{color:var(--ui-muted);font-size:max(11px,.75rem)}.design-intro-note strong{font-size:24px;font-weight:600}.design-jump-links{flex-wrap:wrap;gap:8px;padding:0 0 24px;display:flex}.design-jump-links a{border:1px solid var(--ui-border);border-radius:var(--ui-radius-control);min-height:40px;font-size:var(--ui-control-font);align-items:center;padding:8px 14px;display:inline-flex}.design-jump-links a:hover{background:var(--surface)}.design-layout{grid-template-columns:minmax(0,1fr) 320px;align-items:start;gap:24px;display:grid}.design-examples{gap:20px;min-width:0;display:grid}.design-section{scroll-margin-top:24px}.design-section>header{justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:24px;display:flex}.design-section h2{font-size:20px;line-height:1.35}.design-section>header p,.design-dialog-example p{color:var(--ui-muted);margin-top:8px;font-size:max(12px,.8125rem);line-height:1.65}.design-dimension{border:1px solid var(--ui-border);color:var(--ui-muted);font-family:var(--fontMono);border-radius:6px;flex:none;padding:4px 8px;font-size:11px;display:inline-flex}.design-button-row,.design-status-row{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.design-state-row{border-top:1px solid var(--ui-border);grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:24px;padding-top:24px;display:grid}.design-state-row>div{align-content:start;justify-items:start;gap:10px;min-width:0;display:grid}.design-state-row>div>span{color:var(--ui-muted);font-size:max(11px,.75rem)}.design-caption{color:var(--ui-muted);margin-top:22px;font-size:max(12px,.8rem);line-height:1.65}.design-field-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;display:grid}.design-status-row{border-top:1px solid var(--ui-border);margin-top:24px;padding-top:24px}.design-panel-example{background:var(--ui-surface-subtle);border:1px solid var(--ui-border);border-radius:var(--ui-radius-control);overflow:hidden}.design-panel-toolbar{border-bottom:1px solid var(--ui-border);justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;display:flex}.design-panel-toolbar>span:first-child{font-weight:600;font-size:var(--ui-control-font);align-items:center;gap:8px;display:flex}.design-example-row{background:var(--surface);align-items:center;gap:12px;padding:16px;display:flex}.design-example-row+.design-example-row{border-top:1px solid var(--ui-border)}.design-example-row>svg{color:var(--ui-muted);flex:none}.design-example-row>div{flex:1;gap:5px;min-width:0;display:grid}.design-example-row strong{font-size:var(--ui-control-font);overflow-wrap:anywhere;font-weight:500}.design-example-row>div>span{color:var(--ui-muted);font-size:max(11px,.75rem)}.design-panel-footer{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-top:20px;display:flex}.design-panel-footer>span{color:var(--ui-muted);max-width:280px;font-size:max(11px,.75rem)}.design-dialog-example{justify-content:space-between;align-items:center;gap:24px;display:flex}.design-dialog-example>div{max-width:450px}.design-dialog-example>.portal-ui-button{flex:none}.design-small-icon{border:1px solid var(--ui-border);background:var(--ui-surface-subtle);border-radius:var(--ui-radius-control);width:42px;height:42px;color:var(--accent);place-items:center;margin-bottom:16px;display:grid}.design-theme-settings{min-width:0;scroll-margin-top:24px;position:sticky;top:24px}.design-theme-settings .theme-switcher{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-bottom:24px;display:grid}.design-theme-settings .theme-switcher button{border:1px solid var(--ui-border);border-radius:var(--ui-radius-control);background:var(--surface);width:100%;min-height:42px;color:var(--text);justify-content:center;align-items:center;gap:7px;padding:8px;font-size:max(12px,.8rem);display:flex}.design-theme-settings .theme-switcher button[aria-pressed=true]{background:var(--text);border-color:var(--text);color:var(--surface)}.design-color-list{gap:18px;display:grid}.design-system .design-theme-settings .design-color-control{font-size:var(--ui-control-font);align-items:center;gap:12px;margin:0;display:flex}.design-color-chip{border:1px solid var(--ui-border);border-radius:10px;flex:none;width:38px;height:38px;position:relative;overflow:hidden}.design-color-chip input{opacity:0;cursor:pointer;width:100%;height:100%;position:absolute;inset:0}.design-color-chip:focus-within{outline:2px solid var(--ui-focus);outline-offset:3px}.design-color-control code{color:var(--ui-muted);margin-top:3px;font-size:11px;display:block}.design-sliders{border-block:1px solid var(--ui-border);gap:20px;margin-top:24px;padding-block:24px;display:grid}.design-sliders label{font-size:var(--ui-control-font);grid-template-columns:1fr auto;gap:8px;margin:0;display:grid}.design-sliders label>span{color:var(--ui-muted);font-size:12px}.design-sliders input{width:100%;accent-color:var(--accent);grid-column:1/-1}.design-save-actions{gap:8px;padding-top:24px;display:grid}.design-type-sample{border-top:1px solid var(--ui-border);overflow-wrap:anywhere;gap:10px;margin-top:24px;padding-top:24px;display:grid}.design-type-sample>span{color:var(--ui-muted);font-size:11px}.design-type-sample h3{font-size:20px}.design-type-sample p{font-size:var(--ui-control-font)}.design-type-sample code{font-size:11px;font-family:var(--fontMono);color:var(--ui-muted)}.design-live-message{background:var(--surface);border:1px solid var(--ui-border);border-radius:var(--ui-radius-control);width:fit-content;max-width:100%;font-size:var(--ui-control-font);align-items:center;gap:12px;margin-top:20px;padding:4px 8px 4px 16px;display:flex;position:sticky;bottom:16px;box-shadow:0 8px 28px #0001}.design-live-message[hidden]{display:none}.design-live-message>span{overflow-wrap:anywhere;min-width:0}.design-dialog-form{gap:20px;display:grid}.design-loading-details{color:var(--ui-muted);font-size:var(--ui-control-font);padding:16px 0}.design-loading-details summary{cursor:pointer}.design-loading-details .loading-design-grid{margin-top:16px}@media (max-width:1200px){.design-layout{grid-template-columns:minmax(0,1fr) 290px;gap:20px}.design-dialog-example{flex-direction:column;align-items:flex-start}}@media (max-width:1050px){.design-layout{grid-template-columns:minmax(0,1fr)}.design-theme-settings{position:static}.design-intro-note{display:none}}@media (max-height:1050px){.design-theme-settings{position:static}}@media (max-width:550px){.design-intro{padding-top:0}.design-intro h2{font-size:24px}.design-section h2{font-size:18px}.design-section>header{margin-bottom:20px}.design-field-grid{grid-template-columns:minmax(0,1fr);gap:18px}.design-example-row{flex-wrap:wrap;gap:10px}.design-example-row>.portal-ui-status{margin-left:27px}.design-jump-links{gap:6px}.design-jump-links a{min-height:44px;padding-inline:10px;font-size:12px}.design-state-row{gap:16px}.design-state-row .portal-ui-button{max-width:100%;padding-inline:10px}.design-dialog-example>.portal-ui-button{width:100%}.design-theme-settings .theme-switcher button{min-height:44px}}