.workbench-shell{--workbench-grid-minor:color-mix(in srgb, var(--text) 4%, transparent);--workbench-grid-major:color-mix(in srgb, var(--text) 9%, transparent);--workbench-stage-grid-minor:color-mix(in srgb, var(--text) 3%, transparent);--workbench-stage-grid-major:color-mix(in srgb, var(--text) 7%, transparent);--workbench-rule:color-mix(in srgb, var(--text) 45%, transparent);--workbench-fill:color-mix(in srgb, var(--text) 5%, transparent);--workbench-hatch:color-mix(in srgb, var(--text) 10%, transparent);background:var(--groupped-background);min-width:900px;height:100%;color:var(--text);font-family:var(--happy2-font-ui);font-synthesis:none;overflow:auto}.workbench-shell *{box-sizing:border-box}.workbench-header{z-index:20;border-bottom:1px solid var(--divider);background:var(--header-background);height:42px;color:var(--text);align-items:stretch;display:flex;position:sticky;top:0}.workbench-brand{border:0;border-right:1px solid var(--divider);color:inherit;font:inherit;text-align:left;cursor:pointer;background:0 0;flex:none;align-items:center;gap:8px;padding:0 16px;text-decoration:none;display:flex}.workbench-brand:focus-visible{outline:2px solid var(--radio-active);outline-offset:-2px}.workbench-brand>span{border-radius:var(--happy2-radius-sm);background:var(--fab-background);width:24px;height:24px;color:var(--fab-icon);justify-content:center;align-items:center;display:flex}.workbench-brand strong{letter-spacing:-.01em;font-size:13px;font-weight:700}.workbench-brand i{color:var(--text-secondary);font-family:var(--happy2-font-mono);letter-spacing:.08em;text-transform:uppercase;font-size:9px;font-style:normal}.header-axis{min-width:0;color:var(--text-secondary);font-family:var(--happy2-font-mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;flex:auto;align-items:center;gap:12px;padding:0 20px;font-size:9px;display:flex}.header-axis i{background-image:repeating-linear-gradient(90deg, var(--workbench-rule) 0 1px, transparent 1px 16px);flex:auto;height:1px}.workbench-appearance,.component-select{border-left:1px solid var(--divider);flex:none;align-items:center;gap:10px;padding:0 14px;display:flex}.workbench-appearance>span,.component-select>span{color:var(--text-secondary);font-family:var(--happy2-font-mono);letter-spacing:.08em;text-transform:uppercase;font-size:9px}.workbench-appearance .happy2-segmented-control__pill,.workbench-appearance .happy2-segmented-control__segment{transition:none}.component-select-field{align-items:center;display:flex;position:relative}.component-select select{appearance:none;border:1px solid var(--divider);border-radius:var(--happy2-radius-sm);background:var(--input-background);width:232px;height:28px;color:var(--input-text);font-family:var(--happy2-font-ui);cursor:pointer;padding:0 30px 0 10px;font-size:12px;font-weight:600}.component-select select:focus-visible{outline:2px solid var(--radio-active);outline-offset:1px}.component-select-chevron{inset-block:0;color:var(--text-secondary);pointer-events:none;align-items:center;display:flex;position:absolute;right:9px}.blueprint-field{background-color:var(--groupped-background);background-image:linear-gradient(var(--workbench-grid-major) 1px, transparent 1px), linear-gradient(90deg, var(--workbench-grid-major) 1px, transparent 1px), linear-gradient(var(--workbench-grid-minor) 1px, transparent 1px), linear-gradient(90deg, var(--workbench-grid-minor) 1px, transparent 1px);background-position:-1px -1px;background-size:80px 80px,80px 80px,16px 16px,16px 16px;min-height:calc(100vh - 42px);padding:48px 48px 80px}.component-page{width:min(1160px,100vw - 96px);min-width:800px;margin:0 auto}.component-title{border:1px solid var(--divider);border-radius:var(--happy2-radius-md);background:var(--surface);min-height:128px;color:var(--text);align-items:stretch;display:flex}.component-title-mark{flex:none;justify-content:center;align-items:center;width:96px;display:flex}.component-number{border:1px solid var(--workbench-rule);border-radius:var(--happy2-radius-pill);width:60px;height:60px;color:var(--text);font-family:var(--happy2-font-mono);justify-content:center;align-items:center;font-size:11px;display:flex}.component-title-text{flex-direction:column;flex:auto;justify-content:center;gap:6px;min-width:0;padding:20px 24px 20px 0;display:flex}.component-title p,.component-title h1,.component-title span,.component-title dl,.component-title dd{margin:0}.component-title p{color:var(--text-secondary);font-family:var(--happy2-font-mono);letter-spacing:.12em;text-transform:uppercase;font-size:9px}.component-title h1{letter-spacing:-.02em;font-size:28px;font-weight:600;line-height:32px}.component-title-text>span{max-width:560px;color:var(--text-secondary);font-size:12px;line-height:18px}.component-title-meta{border-left:1px solid var(--divider);flex:0 0 336px;align-self:stretch;display:flex}.component-title-meta>div{flex-direction:column;flex:1 1 0;justify-content:center;gap:6px;min-width:0;padding:16px;display:flex}.component-title-meta>div+div{border-left:1px solid var(--divider)}.component-title dt{color:var(--text-secondary);font-family:var(--happy2-font-mono);letter-spacing:.08em;text-transform:uppercase;font-size:9px}.component-title dd{color:var(--text);font-family:var(--happy2-font-mono);font-size:10px}.specimen-grid{gap:16px;margin-top:32px;display:grid}.specimen-grid--sizes{grid-template-columns:repeat(3,1fr)}.specimen{border:1px solid var(--divider);border-radius:var(--happy2-radius-md);background:var(--surface);flex-direction:column;min-width:0;display:flex}.specimen>header{border-bottom:1px solid var(--divider);height:40px;color:var(--text);flex:none;align-items:stretch;display:flex}.specimen>header span{border-right:1px solid var(--divider);width:48px;color:var(--text-secondary);font-family:var(--happy2-font-mono);flex:none;justify-content:center;align-items:center;font-size:9px;display:flex}.specimen>header strong{letter-spacing:.08em;text-transform:uppercase;flex:auto;align-items:center;min-width:0;padding:0 12px;font-size:10px;font-weight:700;display:flex}.specimen>header small{min-width:0;color:var(--text-secondary);font-family:var(--happy2-font-mono);text-align:right;flex:0 auto;align-items:center;padding:0 12px 0 0;font-size:9px;display:flex}.specimen-stage{background-color:var(--groupped-background);background-image:linear-gradient(var(--workbench-stage-grid-major) 1px, transparent 1px), linear-gradient(90deg, var(--workbench-stage-grid-major) 1px, transparent 1px), linear-gradient(var(--workbench-stage-grid-minor) 1px, transparent 1px), linear-gradient(90deg, var(--workbench-stage-grid-minor) 1px, transparent 1px);background-size:80px 80px,80px 80px,16px 16px,16px 16px;border-radius:0 0 9px 9px;place-items:center;min-height:192px;display:grid;overflow:hidden}.specimen-stage[data-stage=app]{background-color:var(--groupped-background)}.specimen-stage[data-stage=chrome]{background-color:var(--header-background)}.specimen-stage[data-stage=surface]{background-color:var(--surface)}.full-screen-specimen{margin-top:32px}.full-screen-stage{background-color:var(--groupped-background);background-image:linear-gradient(var(--workbench-stage-grid-minor) 1px, transparent 1px), linear-gradient(90deg, var(--workbench-stage-grid-minor) 1px, transparent 1px);background-size:16px 16px;border-radius:0 0 9px 9px;display:flex;overflow:auto}.full-screen-inset{flex:none;justify-content:flex-start;align-items:flex-start;width:max-content;min-width:100%;padding:24px;display:flex}.full-screen-viewport{width:1024px;min-width:1024px;height:704px;min-height:704px;box-shadow:0 0 0 1px var(--divider);justify-content:stretch;align-items:stretch;display:flex;overflow:hidden}.full-screen-viewport>*{width:100%;height:100%}.dimension-rule{width:100%;color:var(--text-secondary);font-family:var(--happy2-font-mono);align-items:center;font-size:9px;display:flex}.dimension-rule i{background:var(--workbench-rule);flex:auto;height:1px;position:relative}.dimension-rule i:before{background:var(--workbench-rule);content:"";width:1px;height:7px;position:absolute;top:-3px}.dimension-rule i:last-child:before{right:0}.dimension-rule b{padding:0 6px;font-weight:500}.dimensioned-button{justify-content:center;align-items:center;padding-top:24px;display:flex;position:relative}.dimensioned-button>.dimension-rule{position:absolute;top:4px}.box-plans{grid-template-columns:1fr 1fr;gap:16px;margin-top:32px;display:grid}.box-plans .specimen:last-child{grid-column:1/-1}.box-demo{position:relative}.box-demo--fixed{padding-top:20px}.box-demo--fixed>.dimension-rule{position:absolute;top:2px}.box-demo--fluid{width:82%}.blueprint-box{border:1px solid var(--workbench-rule);background:var(--workbench-fill);color:var(--text);flex-direction:column;justify-content:center;align-items:center;display:flex}.blueprint-box span{font-family:var(--happy2-font-mono);font-size:11px;font-weight:600}.blueprint-box small{color:var(--text-secondary);font-family:var(--happy2-font-mono);letter-spacing:.06em;text-transform:uppercase;margin-top:6px;font-size:9px}.blueprint-box--light{background:0 0;border-style:dashed}.blueprint-box--frame{background:0 0;justify-content:flex-end;align-items:flex-end;padding:16px}.blueprint-box--nested{background-image:repeating-linear-gradient(135deg, var(--workbench-hatch) 0 4px, transparent 4px 8px)}