/* Design workspace presentation rules. The fixed canvas is an explicit user requirement. */
body,#board{background:var(--surface-canvas);color:var(--text-primary);font-family:var(--font-ui)}h1,h2,h3{color:var(--text-primary);text-wrap:balance}.hero{padding-top:46px}.hero-row{margin-top:0}.hero h1{font-size:46px;letter-spacing:-.025em;font-weight:600}.section-head h2{margin-top:0}.brand span,.nav a,.header nav a{color:var(--text-secondary)}.header nav .launch{color:white}.eyebrow{color:var(--text-secondary)}.counts strong{color:var(--text-primary)}.system{background:var(--neutral-100)}.callout{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:8px;padding:20px 24px;color:var(--text-secondary)}.callout strong{color:var(--text-primary)}.panel{background:var(--surface-card);border-radius:12px}.wirephone{background:var(--neutral-25);border-color:var(--neutral-400)}.wirephone:before,.wire-tabs span,.wirebar i{background:var(--neutral-200)}.wire-box{background:var(--neutral-50);border-color:var(--neutral-200)}.wire-line{background:var(--neutral-200)}.wire-action{background:var(--neutral-200);color:var(--text-primary)}.wire-head,.wire-input,.wire-symbol{color:var(--text-secondary)}.wire-input{border-color:var(--neutral-400)}.flow-node:hover .wirephone{box-shadow:none;border-color:var(--text-primary)}.flow-node:not(:last-child):after{color:var(--text-secondary)}.rule{background:var(--neutral-100);color:var(--text-secondary)}.learning-note{background:var(--neutral-50);border-color:var(--neutral-400)}.new-tag{background:var(--neutral-100);color:var(--text-primary)}.screen-card:hover{border-color:var(--neutral-400)}.filters button[aria-pressed=true]{background:var(--text-primary);border-color:var(--text-primary);color:white}.filters button{font-size:13px;min-height:44px}.filters .hint,.meta-line,.brand span,.counts span,.lane-head p,.lane-footer,.node-caption small,.node-caption p,.screen-meta>span,.screen-meta p,.screen-meta a,.footer,.rule,.doc-note{font-size:12px}.node-caption strong{font-size:14px}.screen-meta h3{font-size:15px;line-height:1.4}.screen-meta p{min-height:58px}.screen-meta a{min-height:44px;display:inline-flex;align-items:center}.screen-meta{padding-top:14px}.system-tabs{gap:34px;border-color:var(--border-subtle)}.system-tabs button{min-height:48px;font-size:14px}.system-tabs button[aria-selected=true]{border-color:var(--text-primary);color:var(--text-primary)}.inspector,.component-demo .doc-note,.token-link{font-size:13px}.inspector select{font-size:12px;min-height:36px;border-color:var(--border-interactive)}.badge{font-size:12px}.metric-example{background:var(--surface-card);border-radius:12px;border-color:var(--border-subtle);padding:18px}.metric-example .title{font-size:13px}.metric-example small{font-size:12px}.metric-example .number{font-size:32px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}.lightbox{background:var(--surface-canvas);border:0;box-shadow:var(--shadow-dialog)}.lightbox::backdrop{background:#20283299;backdrop-filter:none}.lightbox-nav button,.close{min-width:44px;min-height:44px}.lightbox-details p,.lightbox-nav button{font-size:14px}.lightbox img{border-color:var(--border-subtle)}.demo-input{border-color:var(--border-interactive);font-size:14px;min-height:44px}.demo-input.error{border-color:var(--high)}.input-error{font-size:12px}.field-caption{font-size:13px;font-weight:500}.field-caption span{font-size:12px;color:var(--text-secondary)}.component-demo{min-height:260px}.component-grid{gap:22px}.component-grid h3{font-size:18px}.wide-spec{grid-column:span 2}.spec-label{font-size:12px;color:var(--text-secondary);letter-spacing:.04em}.font-pair{display:grid;grid-template-columns:1fr 1fr;gap:64px;padding:0 0 32px}.font-pair p{font-size:14px;color:var(--text-secondary);max-width:490px;line-height:1.8}.font-ui-demo{font-size:37px;font-weight:500;letter-spacing:-.02em;margin:17px 0}.font-editorial-demo{font-family:var(--font-editorial);font-size:38px;font-weight:400;letter-spacing:-.02em;margin:17px 0}.weights{display:flex;gap:30px;font-size:13px;margin-top:22px}.type-table{border-top:1px solid var(--border-subtle)}.type-table>div{display:grid;grid-template-columns:200px 1fr 160px;align-items:center;gap:25px;padding:22px 0;border-bottom:1px solid var(--border-subtle)}.type-table>div>span{font-size:13px;color:var(--text-secondary)}.type-table code{font-size:12px;text-align:right;color:var(--text-secondary)}.system-rules{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:30px}.system-rules p{font-size:13px;color:var(--text-secondary);line-height:1.85}.system-rules strong{display:block;color:var(--text-primary);font-weight:600;margin-bottom:6px}.color-intro{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;margin-bottom:30px}.color-intro h3,.icon-header h3{font-size:24px;font-weight:550;letter-spacing:-.02em;margin-bottom:12px}.color-intro p,.icon-header p{font-size:14px;color:var(--text-secondary);line-height:1.85}.coverage-bar{display:flex;height:65px;overflow:hidden;border-radius:6px}.coverage-bar span{display:flex;align-items:center;justify-content:center;font-size:12px}.neutral-swatches{display:grid;grid-template-columns:repeat(8,1fr);gap:0;margin-bottom:30px}.color-swatch{min-width:0}.color-swatch .color-block{height:67px;border:1px solid #00000008}.color-swatch strong{display:block;font-size:12px;font-weight:550;margin:12px 0 3px}.color-swatch code{font-size:12px;color:var(--text-secondary)}.semantic-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:30px 0}.semantic-sample{padding:22px 20px;border-radius:8px}.semantic-sample strong{font-size:14px;font-weight:600;display:block;margin-bottom:15px}.semantic-sample p{font-size:13px;line-height:1.7}.semantic-sample code{font-size:11px;display:block;margin-top:14px}.spec-table{width:100%;border-collapse:collapse;text-align:left;font-size:13px;line-height:1.75}.spec-table th{font-size:12px;font-weight:500;color:var(--text-secondary);padding:16px 18px;background:var(--surface-card);border-bottom:1px solid var(--border-subtle)}.spec-table td{padding:16px 18px;border-bottom:1px solid var(--border-subtle);vertical-align:top}.spec-table td:first-child{font-weight:550;min-width:145px}.spec-table td:not(:first-child){color:var(--text-secondary)}.icon-header{display:flex;align-items:center;justify-content:space-between;gap:40px;margin-bottom:28px}.icon-sizes{display:flex;gap:25px;align-items:center}.icon-sizes span{display:flex;gap:9px;align-items:center;font-size:12px;color:var(--text-secondary)}.icon-gallery{display:grid;grid-template-columns:repeat(10,1fr);gap:10px}.icon-cell{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:8px;min-height:93px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--text-primary);font-size:11px}.icon-cell[aria-pressed=true]{border-color:var(--text-primary);background:var(--neutral-50)}.icon-cell:hover{border-color:var(--neutral-400)}.icon-cell .ds-icon{width:24px;height:24px}.icon-inspector{display:flex;align-items:center;gap:23px;padding:25px 0;border-bottom:1px solid var(--border-subtle)}#icon-large{width:70px;height:70px;display:grid;place-items:center;background:var(--surface-card);border-radius:9px}#icon-large .ds-icon{width:36px;height:36px}.icon-inspector strong{font-size:18px;font-weight:550}.icon-inspector p{font-size:13px;color:var(--text-secondary);margin-top:5px}.icon-inspector code{margin-left:auto;font-size:13px;color:var(--text-secondary)}.sample-segment{display:flex;padding:4px;border-radius:9px;background:var(--neutral-100)}.sample-segment button{flex:1;border-radius:6px;min-height:44px;font-size:13px;color:var(--text-secondary);background:transparent}.sample-segment button[aria-pressed=true]{background:var(--surface-card);color:var(--text-primary);font-weight:550}.sample-options{border:0;margin:0;padding:0}.sample-options legend{font-size:13px;margin-bottom:10px}.sample-options label{display:flex;gap:9px;align-items:center;font-size:13px;min-height:44px}.sample-options input{accent-color:var(--brand)}.sample-nav{display:grid;grid-template-columns:repeat(4,1fr);background:var(--neutral-50);border-radius:8px;padding:8px}.sample-nav button{background:transparent;border-radius:6px;min-height:65px;color:var(--text-secondary);font-size:12px;display:flex;gap:7px;align-items:center;justify-content:center;flex-direction:column}.sample-nav button[aria-current=page]{background:var(--surface-card);color:var(--text-primary);font-weight:600}.system-downloads{display:flex;gap:30px;padding-top:26px;margin-top:26px;border-top:1px solid var(--border-subtle);font-size:13px}.panel-heading{font-size:22px;font-weight:550;margin-bottom:22px}.state-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:20px}.state-strip>div{padding:17px;background:var(--surface-card);border-radius:9px;border:1px solid var(--border-subtle)}.state-strip span{font-size:12px;display:block;margin-bottom:18px;color:var(--text-secondary)}.state-strip button{width:100%;font-size:13px;display:flex;align-items:center;justify-content:center;gap:7px}.focus-example{outline:3px solid var(--focus-ring);outline-offset:3px}.state-actions{display:flex;gap:30px;font-size:13px;margin-top:22px}.loading-spin{animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.status{display:inline-flex;align-items:center;gap:5px}.action-link-icon{width:14px;height:14px;vertical-align:middle}.flow-lane{border-radius:12px}a:hover{color:var(--action-primary)}a.launch:hover{color:white}

:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}.primary{color:white;min-height:44px;padding:10px 15px}.secondary{color:var(--text-primary);min-height:44px;padding:10px 15px}.badge .ds-icon{width:14px;height:14px}.ds-icon{display:inline-block;vertical-align:middle}#component-dialog{width:420px;padding:32px;border:1px solid var(--border-subtle);border-radius:12px;color:var(--text-primary);background:white}#component-dialog h2{font-size:24px;margin-bottom:15px}#component-dialog p{font-size:14px;color:var(--text-secondary)}#component-dialog form{margin-top:24px}#component-dialog::backdrop{background:#20283299}@media(prefers-reduced-motion:reduce){.loading-spin{animation:none}}

#component-dialog{max-width:none;transform:scale(var(--dialog-scale,1))}.progress{background:var(--text-primary)}

/* v1.2: proportional wireframes, open thumbnail gallery, continuous system. */
.wirephone{width:180px;height:auto;aspect-ratio:390 / 844;padding:16px 14px;border-radius:18px;display:flex;flex-direction:column;gap:0}.wirephone:before{flex-shrink:0;margin-bottom:18px}.wire-head{font-size:9px;margin-bottom:18px}.wire-title{font-size:14px;margin-bottom:12px}.wire-box{font-size:10px;padding:10px;margin:8px 0;flex-shrink:0}.wire-box strong{font-size:16px}.wire-action{position:static;margin-top:auto;font-size:10px;padding:10px 5px;flex-shrink:0}.wire-input{font-size:10px;flex-shrink:0}.wire-tabs{margin:5px 0}.wirebar{height:64px;flex-shrink:0}.wire-symbol{margin:20px 0 14px}.wire-line{flex-shrink:0}.flow-node:not(:last-child):after{top:178px}.flow-grid{align-items:start}.learn-grid{align-items:start}.learning-note{align-self:center}.node-caption{margin-top:20px}
.screens-grid{column-gap:32px;row-gap:48px}.screen-figure{min-width:0;background:none;border:0;border-radius:0;padding:0;box-shadow:none}.screen-image-button{border-radius:0;background:transparent;overflow:visible}.screen-image-button img{width:100%;height:auto;aspect-ratio:390/844;object-fit:contain;border-radius:0;box-shadow:none}.screen-image-button:hover{outline:1px solid var(--neutral-400);outline-offset:5px}.screen-meta{padding:18px 0 0}.screen-meta p{min-height:0}.screen-meta h3{margin:7px 0}.new-tag{display:none}.screen-meta a{margin-top:4px}
.system-index{display:flex;gap:32px;padding:0 0 24px;border-bottom:1px solid var(--border-subtle)}.system-index a{font-size:14px;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}.system-panel,.system-panel.active{display:block;padding:48px 0 56px;border-bottom:1px solid var(--border-subtle);scroll-margin-top:24px}.system-section-title{font-size:30px;font-weight:550;letter-spacing:-.02em;margin:0 0 32px}.system-downloads{border:0;margin-top:0}.system{background:var(--neutral-50)}

/* High-fidelity gallery: calm cards, one caption per screen. */
.screens-grid{gap:32px 24px}.screen-figure{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:12px;padding:16px;box-shadow:none}.screen-image-button{border-radius:5px;overflow:hidden}.screen-image-button:hover{outline:1px solid var(--neutral-400);outline-offset:3px}.screen-meta{padding:16px 0 0}.screen-meta h3{margin:0;font-size:14px;font-weight:500;line-height:1.45}.screen-meta h3 a{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;margin:0;font-size:14px;color:var(--text-primary);text-decoration:none}.screen-meta h3 a:hover{color:var(--action-primary)}.screen-meta h3 a span{font-size:15px;color:var(--text-secondary);flex-shrink:0}.screen-figure:hover{border-color:var(--neutral-400)}

/* A real, scrollable 390 × 844 app inside the gallery dialog. */
.live-device{width:339.3px;height:734.28px;margin:6px auto 0;overflow:hidden;border-radius:16px;background:var(--surface-card);outline:1px solid var(--border-subtle)}#live-prototype{display:block;width:390px;height:844px;border:0;transform:scale(.87);transform-origin:top left;background:var(--surface-card)}.lightbox-details #reset-scenario{display:block;font-size:13px}.lightbox-details .eyebrow{font-size:11px;letter-spacing:.07em}