@import url('./becchio-switch.css?v=8.6');
@font-face{font-family:Inter;src:url('fonts/inter.woff2') format('woff2');font-weight:100 900;font-display:swap}@font-face{font-family:Poppins;src:url('fonts/poppins-900.woff2') format('woff2');font-weight:900;font-display:swap}
:root{color-scheme:dark;--canvas:#070e18;--surface:#101a29;--line:rgba(197,231,249,.16);--ink:#e8eef5;--dim:#a7b8ca;--accent:#38bdf8;--text:var(--ink);--text-soft:var(--dim);--glass-border:var(--line)}*{box-sizing:border-box}body{margin:0;background:var(--canvas);color:var(--ink);font:var(--type-body-size,1rem)/var(--type-body-line,1.5) Inter,sans-serif}button,input,select{font:inherit}button,a,select{touch-action:manipulation}a{color:var(--accent);text-underline-offset:4px}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:4px}h1,h2,h3{font-family:Poppins,sans-serif;font-weight:900;letter-spacing:0;text-transform:uppercase}h1{font-size:var(--type-title-large-size,1.5rem);line-height:var(--type-title-large-line,1.3333);margin:0 0 8px}h2{font-size:var(--type-body-size,1rem);line-height:var(--type-body-line,1.5);margin:0 0 16px}h3{font-size:var(--type-body-size,1rem);line-height:var(--type-body-line,1.5)}p{margin:0 0 16px}becchio-icon{vertical-align:middle}.studio-header{min-height:88px;padding:24px 32px;display:flex;justify-content:space-between;align-items:center;}.private{color:var(--dim);display:flex;gap:8px;align-items:center;font-size:12px;line-height:16px}.private becchio-icon{width:16px;height:16px}.wordmark{font-size:12px;line-height:16px;display:grid;text-align:right}.wordmark strong{font:900 16px/24px Poppins,sans-serif;text-transform:uppercase}.workspace{display:flex;max-width:1600px;margin:0 auto;padding:24px 24px 64px;gap:32px}aside{flex:none;width:216px;min-width:0}aside h2{padding:16px 16px 0;color:var(--dim);font:600 12px/16px Inter,sans-serif;text-transform:none}aside .catalog-note{font-size:12px;line-height:16px;color:var(--dim);padding:24px 16px;margin-top:24px}main{min-width:0;flex:1;padding-top:16px}.lede{color:var(--dim);max-width:720px}.heading-row{display:flex;justify-content:space-between;gap:24px;align-items:start}.tag{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font-size:12px;line-height:16px;padding:8px 12px;border:1px solid var(--line);border-radius:999px;color:var(--dim)}.tag becchio-icon{width:16px;height:16px}.toolbar{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:16px 0;flex-wrap:wrap}.segmented{display:flex;gap:4px;flex-wrap:wrap;padding:4px;border:1px solid var(--line);border-radius:999px;background:var(--surface,#0b1421)}.segmented button{border:0;border-radius:999px;color:var(--dim);background:transparent;cursor:pointer;min-height:44px;padding:8px 16px;display:flex;gap:8px;align-items:center;font-size:14px;line-height:24px}.segmented button[aria-pressed=true]{color:var(--ink);background:var(--surface-selected,#1b2a3f)}.segmented becchio-icon{width:20px;height:20px}.preview-note{font-size:12px;line-height:16px;color:var(--dim);max-width:480px}.preview-shell{background:var(--surface-deep,#050b14);border:1px solid var(--line);border-radius:16px;margin-top:24px;overflow:hidden}.preview-viewport{position:relative;margin:0 auto;overflow:hidden;width:100%;height:520px}.preview-viewport iframe{border:0;position:absolute;left:50%;top:0;transform-origin:top center;background:var(--surface-deep,#050b14);height:600px}.preview-caption{padding:16px 24px;display:flex;gap:16px;justify-content:space-between;color:var(--dim);font-size:12px;line-height:16px}.details{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:32px}.details section{min-width:0}.muted{color:var(--dim)}.rule-list{margin:0;padding-left:24px;color:var(--dim)}.rule-list li{margin-bottom:8px}.source{font:12px/16px ui-monospace,monospace;overflow-wrap:anywhere;color:var(--dim)}.panel{border:1px solid var(--line);padding:24px;border-radius:16px;background:var(--surface-panel,#0c1624)}.code{white-space:pre-wrap;font:12px/20px ui-monospace,monospace;color:var(--code-ink,#b9d5ec);overflow-wrap:anywhere}.doc-selector{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}.doc-selector button{background:var(--surface-control,#121e30);border:1px solid var(--line);border-radius:999px;padding:8px 16px;color:var(--ink);min-height:44px;cursor:pointer}.doc-selector button[aria-pressed=true]{border-color:var(--accent);color:var(--accent)}.document{background:var(--surface-panel,#0c1624);border:1px solid var(--line);border-radius:16px;padding:32px;max-width:960px;font-size:16px;line-height:24px;overflow-wrap:anywhere}.document pre{white-space:pre-wrap;font:12px/20px ui-monospace,monospace;background:var(--surface-deep,#050b14);padding:16px;border-radius:8px}.document h2{margin:32px 0 16px}.document h3{margin:24px 0 8px}.document p{max-width:78ch}.document li{margin-bottom:8px}.document table{border-collapse:collapse;width:100%;font-size:14px;line-height:24px}.document td,.document th{border-bottom:1px solid var(--line);padding:8px;text-align:left}.empty{min-height:320px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:16px;text-align:center;padding:32px}.empty p{max-width:480px;color:var(--dim)}.screenshot{display:block;width:100%;height:auto}.shot-wrap{max-height:640px;overflow:auto}.gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:24px}.gallery-grid a{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;padding:24px;text-decoration:none;gap:8px;color:var(--ink)}.gallery-grid a:hover{border-color:var(--accent)}.gallery-grid a becchio-icon{color:var(--accent);margin-bottom:8px}.gallery-grid small{color:var(--dim);font-size:12px;line-height:16px}.help{padding:16px 0;color:var(--dim);font-size:12px;line-height:16px}.skip{position:fixed;top:8px;left:8px;transform:translateY(-200%);z-index:100;background:#102238;padding:12px 16px}.skip:focus{transform:none}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@media(max-width:1100px){.workspace{gap:24px}aside{width:184px}.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.private{max-width:120px}}@media(max-width:767px){.studio-header{min-height:72px;padding:16px}.workspace{display:block;padding:16px 16px 112px}aside{width:auto;margin-bottom:24px}aside h2,aside .catalog-note{display:none}main{padding:0}.heading-row{display:block}.heading-row .tag{margin-bottom:16px}.details{grid-template-columns:1fr;gap:24px}.document{padding:16px}.preview-caption{padding:16px;flex-wrap:wrap}.gallery-grid{grid-template-columns:1fr 1fr}.gallery-grid a{padding:16px}.segmented button{padding:8px 12px}.wordmark strong{font-size:12px;line-height:16px}.preview-note{display:none}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}@media(prefers-contrast:more){:root{--line:#91a4b8;--dim:#cdd9e5}}@media(prefers-reduced-transparency:reduce){.segmented,.panel,.preview-shell{background:#101a29}}
.studio-live-display{margin-block:32px;max-width:70ch}.studio-live-display>summary{cursor:pointer;min-height:44px;display:flex;align-items:center}.studio-live-display>p{color:var(--dim);line-height:1.5;margin-block:8px 24px}.studio-live-display .display-motion-settings{margin-block:24px}
.workbench-summary{display:flex;gap:48px;flex-wrap:wrap;margin:32px 0;padding:24px 0;}.workbench-summary>div{display:grid;gap:8px}.workbench-summary strong{font:900 32px/40px Poppins,sans-serif}.workbench-summary span{font-size:12px;line-height:16px;color:var(--dim)}.workbench-search{display:flex;gap:16px;flex-wrap:wrap;align-items:center}.workbench-search label{font-size:14px;line-height:24px;color:var(--dim)}.workbench-search input:not([data-search-part="query"]){background:var(--surface-panel,#0c1624);min-height:48px;padding:12px 16px;border:1px solid var(--line);border-radius:12px;color:var(--ink);width:min(100%,440px)}.pattern-family{margin-top:40px}.pattern-family-heading{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:16px}.pattern-family-heading h2{display:flex;gap:12px;align-items:center;margin:0}.pattern-family-heading>span{font-size:12px;line-height:16px;color:var(--dim)}.pattern-list{}.pattern-entry{display:flex;gap:24px;align-items:center;justify-content:space-between;padding:20px 8px;color:var(--ink);text-decoration:none;transition:background-color 220ms ease}.pattern-entry:hover,.pattern-entry:focus-visible{background:var(--surface-hover);color:var(--ink)}.pattern-entry>div:first-child{display:grid;gap:4px;min-width:0}.pattern-entry strong{font-size:16px;line-height:24px}.pattern-entry span{color:var(--dim);font-size:14px;line-height:24px}.pattern-entry small{color:var(--dim);font-size:12px;line-height:16px}.pattern-entry-end{display:flex;gap:24px;align-items:center;flex:none}.pattern-kind{font-size:12px!important;line-height:16px!important;white-space:nowrap}.pattern-kind[data-kind=composition]{color:var(--accent)}.pattern-entry-end becchio-icon{width:20px;height:20px;color:var(--accent)}.workbench-back{display:inline-flex;gap:8px;align-items:center;margin:0 0 24px;font-size:14px;line-height:24px;text-decoration:none}.workbench-back becchio-icon{width:20px;height:20px}.workbench-controls{margin-top:24px;display:flex;align-items:end;gap:16px;flex-wrap:wrap;padding:24px 0;}.workbench-control{display:grid;gap:8px;font-size:12px;line-height:16px;color:var(--dim)}.workbench-control select,.workbench-dimensions input{min-height:48px;padding:8px 12px;background:var(--surface-panel,#0c1624);border:1px solid var(--line);border-radius:8px;color:var(--ink);max-width:100%}.workbench-control select{min-width:152px}.orientation-control .segmented{border-radius:12px}.orientation-control .segmented button{border-radius:8px}.workbench-dimensions{display:flex;gap:8px;align-items:end}.workbench-dimensions label{display:grid;gap:8px;color:var(--dim);font-size:12px;line-height:16px}.workbench-dimensions input{width:96px}.workbench-dimensions>span{align-self:center;margin-top:16px;color:var(--dim)}.workbench-options{display:flex;gap:20px;flex-wrap:wrap;width:100%;font-size:12px;line-height:16px;color:var(--dim);padding-top:8px}.workbench-options label{display:inline-flex;align-items:center;gap:8px;min-height:32px;cursor:pointer}.workbench-options input{width:16px;height:16px;accent-color:var(--accent)}.workbench-viewport{position:relative;overflow:auto;background:var(--surface-deep,#050b14);display:flex;justify-content:flex-start}.workbench-viewport[data-fit=true]{justify-content:center}.workbench-viewport iframe{border:0;flex:none;transform-origin:top center;display:block;position:absolute;left:0;top:0}.workbench-viewport[data-fit=true] iframe{left:50%;translate:-50% 0}.workbench-help{display:flex;gap:24px;align-items:start;justify-content:space-between;margin-top:16px;font-size:12px;line-height:16px;color:var(--dim)}.workbench-help p{max-width:680px}.workbench-help a{display:inline-flex;gap:8px;flex:none;align-items:center}.workbench-help becchio-icon{width:16px;height:16px}
@media(max-width:767px){.workbench-summary{gap:24px;margin:24px 0}.workbench-summary strong{font-size:24px;line-height:32px}.workbench-summary span{max-width:100px}.workbench-search{display:grid;gap:8px}.workbench-search .help{padding:0}.pattern-entry{gap:12px;padding:16px 0}.pattern-entry-end{gap:8px;flex-direction:column;align-items:end}.pattern-entry>div:first-child{max-width:75%}.pattern-kind{font-size:10px!important;white-space:normal;text-align:right;max-width:72px}.pattern-family-heading>span{display:none}.workbench-controls{gap:16px}.workbench-control{width:calc(50% - 8px)}.workbench-control select{min-width:0;width:100%}.orientation-control{width:100%}.orientation-control .segmented{width:max-content}.workbench-dimensions input{width:96px}.workbench-options{gap:12px}.workbench-help{display:block}.workbench-help a{margin-bottom:8px}.workbench-preview{margin-top:16px}}
.workbench-search input:not([data-search-part="query"]),.workbench-control select,.workbench-dimensions input,.orientation-control .segmented,.orientation-control .segmented button{border-radius:999px}.workbench-options label{min-height:44px}.pattern-kind{font-size:12px!important}

/* Studio composition only. Component geometry remains inside its shared owner. */
.studio-identity{display:flex;align-items:center;gap:16px;flex-wrap:wrap;min-width:0}.studio-brand{display:inline-flex;gap:8px;align-items:center;min-height:44px;min-width:44px;padding:8px 12px;border-radius:999px;text-decoration:none;color:var(--ink);font:500 var(--type-role-main-nav-size,1rem)/1.5 Inter,sans-serif}.studio-brand img{width:24px;height:24px;object-fit:contain;flex:none}.studio-brand:hover{background:rgba(232,238,245,.08)}.studio-identity becchio-button[hidden]{display:none}
#navigation{position:sticky;top:112px;align-self:flex-start;max-height:calc(100vh - 136px);overflow:auto;--nav-section-max-height:calc(100vh - 260px)}
#navigation becchio-nav{width:100%;min-width:0}#navigation h2{font-size:12px;line-height:16px;text-transform:none}#navigation .catalog-note{margin-top:16px;padding:16px;font-size:12px;line-height:16px}
.workbench-search{display:flex;align-items:center;gap:24px;margin-bottom:32px}.workbench-search>becchio-field{width:min(100%,560px)}.workbench-search .help{padding:0}
.workbench-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:32px 0;padding:0;border:0}.workbench-summary becchio-metric{min-width:0}
.select-wrap{position:relative;display:block;min-width:0}.select-wrap select{width:100%;appearance:none;padding-right:48px!important}.select-wrap>becchio-icon{position:absolute;right:16px;top:50%;translate:0 -50%;--icon-size:16px;pointer-events:none;color:var(--dim)}
::selection{background:#38bdf8;color:#07111f}input,textarea{caret-color:var(--accent)}*{scrollbar-width:thin;scrollbar-color:#354d68 var(--surface,#0b1421)}
@media(max-width:767px){.studio-brand .brand-word{width:108px;height:20px}.studio-brand{gap:8px}.studio-header .wordmark strong{font-size:12px}.workbench-search{display:grid;gap:8px}.workbench-search>becchio-field{width:100%}.workbench-summary{grid-template-columns:1fr;gap:16px}#navigation{position:static;max-height:none;--nav-section-max-height:168px;margin-bottom:24px;padding-bottom:16px}#navigation h2{display:block;margin:0 0 8px;padding:0}.workbench-summary becchio-metric{width:100%}}

.component-inspection{margin-top:24px}.component-inspection>.foundation-field{max-width:640px}.case-coverage{margin:16px 0}.case-coverage summary{min-height:44px;padding:8px 0;cursor:pointer}.case-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px;margin-top:16px}.case-list button{min-height:44px;padding:12px 16px;background:var(--surface-panel);color:var(--ink);border:1px solid var(--line);border-radius:12px;text-align:left;font-size:14px;cursor:pointer}.case-list button[aria-pressed=true]{border-color:var(--accent)}
.component-examples{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;margin-top:32px}.component-examples section{min-width:0}.component-examples iframe{width:100%;height:440px;border:0;background:var(--surface-deep,#050b14);border-radius:16px;display:block;margin-bottom:16px}.component-examples h2{margin-bottom:16px}@media(max-width:900px){.component-examples{grid-template-columns:1fr}}

.spec-tabs{display:block;margin:24px auto 0;max-width:100%;width:max-content}.spec-tabs button{font:inherit}.spec-tabs [data-spec-view]>span{min-width:0;overflow:hidden;opacity:0;transition:opacity 220ms ease}.spec-tabs [data-spec-view][aria-selected=true]>span,.spec-tabs [data-spec-view][data-nav-pointer]>span,.spec-tabs [data-spec-view]:focus>span{opacity:1}.spec-tabs[data-nav-keyboard] [data-spec-view]>span,.spec-tabs[reduced-motion] [data-spec-view]>span{transition:none}.spec-reading{min-width:0}
@media(prefers-reduced-motion:reduce){.spec-tabs [data-spec-view]>span{transition:none}}

@media(min-width:768px) and (max-width:1000px){.studio-brand .brand-word{display:none}}

/* Typography catalog adoption in the Studio shell; component owners keep their styles. */
body{font-kerning:normal;word-spacing:normal;font-synthesis:none}#content>h1,.heading-row h1{max-width:36ch;text-wrap:balance}#content>p,.lede{max-width:70ch}h4,h5,h6{font-family:Poppins,sans-serif;font-weight:900;text-transform:uppercase;letter-spacing:0;font-size:var(--type-body-size,1rem);line-height:var(--type-body-line,1.5)}

/* The shared Side Bar owns horizontal placement and push geometry. The inner
   destination component remains Section Nav. No phone-only stacked shell. */
.workspace{display:block;gap:0}
#studio-side-nav{--sidebar-gap:24px;--sidebar-ink:var(--ink);--sidebar-ink-dim:var(--dim);--sidebar-line:var(--line);--sidebar-accent:var(--accent);--sidebar-max-height:calc(100dvh - 136px)}
#navigation{position:static;max-height:none;overflow:visible;min-width:0;margin:0;padding:0;--nav-section-max-height:calc(100dvh - 220px)}
#navigation h2{padding:8px 12px;margin:0 0 8px;color:var(--dim);font:600 12px/16px Inter,sans-serif;text-transform:none}
#navigation .catalog-note{display:block;margin-top:16px;padding:16px 12px;color:var(--dim);font-size:12px;line-height:16px}
#main{width:100%;min-width:0}
@media(max-width:767px){#studio-side-nav{--sidebar-gap:16px;--sidebar-max-height:calc(100dvh - 112px)}#navigation{--nav-section-max-height:calc(100dvh - 192px)}#navigation .catalog-note{display:none}#main{padding-top:8px}.heading-row .tag{max-width:100%;white-space:normal}.gallery-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr))}}

/* Shared compact geometry: no count cards stretched across the working pane. */
.workbench-search{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:16px;min-height:44px}
.workbench-search .help{padding:0;margin:0}
.workbench-summary{display:grid;grid-template-columns:repeat(3,minmax(0,var(--summary-unit)));gap:16px;margin:24px 0;width:max-content;max-width:100%;align-items:start}
.workbench-summary becchio-metric{width:min(100%,var(--summary-unit))}
@media(orientation:portrait),(max-width:560px){.workbench-summary{grid-template-columns:minmax(0,var(--summary-unit));width:var(--summary-unit)}.workbench-search{display:flex}#main{padding-top:0}}

#studio-side-nav{--sidebar-trigger-bottom:calc(88px + env(safe-area-inset-bottom))}
#studio-side-nav[data-push-mode="narrow"] #navigation{--nav-section-max-height:calc(100dvh - 96px)}

body:has(#studio-side-nav[data-push-mode="narrow"]) .workspace{padding-left:0;padding-right:0}
#studio-side-nav[data-push-mode="narrow"] #main{padding-left:0;padding-right:0;box-sizing:border-box}

/* Source-bound asset contracts and bounded configuration controls. */
.asset-library-grid{display:grid;grid-template-columns:minmax(220px,1fr) minmax(0,2fr);gap:24px;margin-top:24px;align-items:start}.asset-library-grid #asset-list{max-height:70dvh;overflow:auto;border:1px solid var(--line);border-radius:16px;padding:8px}.asset-row{display:grid;gap:4px;min-height:44px;width:100%;text-align:left;padding:12px;border:0;border-radius:8px;background:transparent;color:var(--ink);font:inherit;cursor:pointer}.asset-row strong{font-size:14px;line-height:20px}.asset-row small{font-size:12px;line-height:16px;color:var(--dim);overflow-wrap:anywhere}.asset-row[aria-pressed=true],.asset-row:hover{background:var(--surface)}.asset-row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.asset-library-grid #asset-detail{min-width:0}.editor-capability{display:flex;align-items:center;gap:12px;min-height:44px;font-size:14px}.editor-capability input{width:20px;height:20px;accent-color:var(--accent)}.editor-pattern-preview{margin-top:24px}.editor-pattern-preview iframe{display:block;width:100%;height:620px;border:1px solid var(--line);border-radius:16px;margin-top:16px}.editor-pattern-preview summary{min-height:44px;cursor:pointer}.editor-pattern-fields{display:grid;gap:16px}@media(max-width:640px){.asset-library-grid{grid-template-columns:1fr}.asset-library-grid #asset-list{max-height:320px}}

#studio-side-nav[collapsed][data-push-mode=wide] #navigation>h2,#studio-side-nav[collapsed][data-push-mode=wide] #navigation>.catalog-note{display:none}#studio-side-nav[collapsed][data-push-mode=wide] #navigation{padding:0}#studio-side-nav[collapsed][data-push-mode=wide] #navigation becchio-nav{width:100%}

/* Studio entry: task hierarchy and real owner specimens, with quiet content surfaces. */
 .workbench-heading{display:flex;align-items:flex-start;flex-direction:column;gap:16px;margin-bottom:24px}
.workbench-heading h1{margin:0}
.workbench-start-actions{display:flex;gap:8px 16px;align-items:center;flex-wrap:wrap}
.workbench-overview{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;align-items:start}
.section-heading{display:flex;gap:16px;align-items:center;justify-content:space-between;min-height:44px;margin-bottom:8px}
.section-heading h2{margin:0}
.section-heading a,.workbench-sample-link a{font-size:var(--type-role-metadata-size,.75rem);line-height:var(--type-role-metadata-line,1.3333);min-height:44px;display:inline-flex;align-items:center}
.dashboard-groups .pattern-entry{padding:16px 0;min-height:64px}
.dashboard-groups .pattern-entry strong{display:flex;gap:16px;align-items:center}
.dashboard-groups .pattern-entry strong becchio-icon{flex:none}
.workbench-foundation-link{margin-top:24px}
.workbench-sample-link{margin-top:16px}
/* Collections use the portable Grid arrangement and Tile content slots. */
.component-gallery{--tile-unit:148px;--grid-min-row-tile:296px;--grid-gap:24px;--gallery-columns:min(var(--grid-columns,1),var(--gallery-count,1));margin-block:24px 0;min-width:0;align-items:stretch}
.workbench-components .component-gallery{margin-top:0}
.component-card{width:100%;min-width:0}
.component-gallery[data-arrangement="rows"]>.component-card{flex:1 1 18.5rem;min-width:min(100%,18.5rem);max-width:calc((100% - (var(--gallery-columns) - 1)*var(--grid-gap))/var(--gallery-columns))}
.component-gallery[data-arrangement="stack"]>.component-card{max-width:640px;justify-self:center}
.component-card::part(tile){height:100%}
.component-card>[slot="action"]{margin-block-start:auto;padding-block-start:8px;box-sizing:border-box;align-self:center}
.component-card :is(h2,h3){margin:0}
.component-card>becchio-button{justify-self:center;width:max-content;min-width:0;max-width:100%;--btn-max-width:100%;--btn-label-white-space:normal;--btn-label-overflow-wrap:anywhere}
.component-thumbnail{--thumbnail-height:172px;position:relative;height:var(--thumbnail-fit-height,var(--thumbnail-height));overflow:hidden;min-width:0;isolation:isolate;pointer-events:none}
.workbench-components .component-thumbnail{--thumbnail-height:144px}
.component-thumbnail[data-interactive]{pointer-events:auto;overflow:visible}
.thumbnail-canvas{position:absolute;left:50%;top:50%;width:400px;height:320px;transform-origin:center;display:flex;align-items:center;justify-content:center}
.workbench-heading becchio-button{max-width:100%}
@media(max-width:1000px){.workbench-overview{gap:24px}}
@media(max-width:900px){.workbench-overview{grid-template-columns:1fr;gap:32px}.component-gallery{--grid-gap:16px}.dashboard-groups .pattern-entry{min-height:56px;padding:12px 0}}

/* Landing gutters do not depend on a retained Side Nav push mode. */
body:has(#studio-side-nav[navigation-disabled]) .workspace{padding-left:24px;padding-right:24px}
#studio-side-nav[navigation-disabled] #main{padding-left:0;padding-right:0}
.workbench-overview>.dashboard-groups{margin-top:0}.workbench-overview>.dashboard-groups>h2{min-height:44px;display:flex;align-items:center}
@media(orientation:portrait),(max-width:767px){body:has(#studio-side-nav[navigation-disabled]) .workspace{padding-left:0;padding-right:0}#studio-side-nav[navigation-disabled] #main{padding-left:0;padding-right:0}}

/* Studio text binds the approved semantic roles. Shared controls retain their owners. */
body{font-family:var(--type-role-paragraph-family,Inter,sans-serif);font-size:var(--type-role-paragraph-size,1rem);line-height:var(--type-role-paragraph-line,1.5);font-weight:var(--type-role-paragraph-weight,400);font-kerning:normal;font-synthesis:none;letter-spacing:0;word-spacing:normal}
h1{font-size:var(--type-role-page-title-size,1.5rem);line-height:var(--type-role-page-title-line,1.3333)}h2{font-size:var(--type-role-section-heading-size,1rem);line-height:var(--type-role-section-heading-line,1.5)}h3{font-size:var(--type-role-subsection-heading-size,1rem);line-height:var(--type-role-subsection-heading-line,1.5)}
.private,.tag,.preview-caption,.help,.gallery-grid small,.workbench-help,.workbench-options{font-size:var(--type-role-metadata-size,.75rem);line-height:var(--type-role-metadata-line,1.3333)}
.code,.source,.document pre{font-size:var(--type-role-code-size,.75rem);line-height:var(--type-role-code-line,1.6667);font-family:var(--type-role-code-family,ui-monospace,monospace)}
.document,.document table,.document td,.document th{font-size:var(--type-role-document-body-size,1rem);line-height:var(--type-role-document-body-line,1.5)}
.workbench-control,.workbench-dimensions label{font-size:var(--type-role-label-size,1rem);line-height:var(--type-role-label-line,1.5)}
.workbench-back,.pattern-entry strong,.segmented button,.doc-selector button{font-size:var(--type-role-button-size,1rem);line-height:var(--type-role-button-line,1.5)}

/* Semantic titles keep their role when enlarged text needs word wrapping. */
h1,h2,h3,h4,h5,h6{overflow-wrap:anywhere}
/* Named heading roles remain legible for long words at enlarged text sizes. */
h1[data-type-role],h2[data-type-role],h3[data-type-role],h4[data-type-role],h5[data-type-role],h6[data-type-role]{overflow-wrap:anywhere}
.section-heading a,.workbench-sample-link a{min-width:44px}

/* A route target is a reading landmark, not an interactive control. Native
   keyboard focus rings remain on every actionable element. */
#main:focus{outline:none}
.workbench-overview h2,.pattern-family-heading h2{font-family:var(--type-role-subsection-heading-family,Poppins,sans-serif);font-size:var(--type-role-subsection-heading-size,1rem);line-height:var(--type-role-subsection-heading-line,1.5);font-weight:var(--type-role-subsection-heading-weight,900)}

:root{--glass-color:#bbbbbc;--glass-light:#fff;--glass-dark:#000;--glass-reflex-light:.6;--glass-reflex-dark:1.5;--glass-saturation:150%;--glass-ink:var(--ink);--glass-muted:var(--dim);--glass-solid:#152131;--c-glass:var(--glass-color);--c-light:var(--glass-light);--c-dark:var(--glass-dark);--c-content:var(--ink);--c-action:var(--accent);--saturation:var(--glass-saturation);--nav-ink:var(--ink);--nav-ink-dim:var(--dim);--nav-accent:var(--accent);--btn-ink:var(--ink);--btn-accent:var(--accent);--on-accent:#04121c;--btn-on-accent:var(--on-accent);--tile-border:rgba(255,255,255,.14);--tile-tint:rgba(255,255,255,.04);--field-ink:var(--ink);--field-ink-dim:var(--dim);--field-line:var(--line);--field-search-surface:var(--surface);--field-search-opaque:var(--surface);--code-ink:#b9d5ec;--surface-deep:#050b14;--surface-panel:#0c1624;--surface-selected:#1b2a3f;--surface-hover:#101f30;--surface-control:#121e30}
:root[data-theme="light"]{color-scheme:light;--canvas:#e8e8e9;--surface:#f0f0f1;--ink:#222244;--dim:#535568;--accent:#0052f5;--on-accent:#fff;--tile-border:rgba(34,34,68,.38);--tile-tint:rgba(34,34,68,.04);--line:rgba(34,34,68,.2);--glass-reflex-light:1;--glass-reflex-dark:1;--glass-solid:#e4e4e7;--code-ink:#303b65;--surface-deep:#dedee2;--surface-panel:#f3f3f5;--surface-selected:#d4d8e2;--surface-hover:#dfe3e9;--surface-control:#f3f3f5}
.studio-brand{font-family:Poppins,sans-serif;font-weight:900;text-transform:uppercase;min-height:44px;padding:8px 16px;border-radius:999px;color:var(--ink);text-decoration:none}
.studio-brand img{transition:scale 200ms cubic-bezier(.5,0,0,1)}
.studio-brand:hover img{scale:1.2}.studio-brand:active img{scale:.96}
:root[data-theme="light"] .studio-brand img{filter:brightness(0) saturate(100%) opacity(.85)}
@media(prefers-reduced-motion:reduce){.studio-brand img{transition:none;scale:1!important}}

becchio-nav{--nav-ink:var(--ink);--nav-ink-dim:var(--dim);--nav-accent:var(--accent)}
becchio-button{--btn-ink:var(--ink);--btn-ink-dim:var(--dim);--btn-accent:var(--accent);--btn-line:var(--line);--btn-on-accent:var(--on-accent)}
becchio-field{--field-ink:var(--ink);--field-ink-dim:var(--dim);--field-line:var(--line);--field-search-surface:var(--surface);--field-search-opaque:var(--surface)}
becchio-sidebar{--sidebar-ink:var(--ink);--sidebar-ink-dim:var(--dim);--sidebar-line:var(--line);--sidebar-bg:var(--surface);--sidebar-accent:var(--accent)}

/* Every Studio discovery level composes the same shared Tile/Grid owners.
   Columns use the full Tile minimum; large text can request a wider basis.
   Grid's auto orientation rule keeps portrait in DOM reading order. */
.overview-grid{--tile-unit:148px;--grid-min-row-tile:296px;--grid-gap:24px;--overview-columns:min(var(--grid-columns,1),var(--overview-count,1));margin-block:24px 0;margin-inline:auto;align-items:stretch;}
.overview-tile{--tile-body-line:var(--type-role-paragraph-line,1.5);width:100%;min-width:0;}
.overview-grid[data-arrangement="rows"]>.overview-tile{flex:1 1 18.5rem;min-width:min(100%,18.5rem);max-width:min(40rem,calc((100% - (var(--overview-columns) - 1)*var(--grid-gap))/var(--overview-columns)));}
.overview-grid[data-arrangement="stack"]>.overview-tile{width:100%;max-width:40rem;justify-self:center;}
.overview-tile::part(tile){height:100%;}
.overview-tile>[slot="title"]{margin:0;}
.overview-copy{display:flex;flex-direction:column;gap:8px;flex:1;min-width:0;}
.overview-copy :is(p,small){margin:0;overflow-wrap:anywhere;color:var(--dim);}
.overview-copy p{font-family:var(--type-role-paragraph-family,Inter,sans-serif);font-size:var(--type-role-paragraph-size,1rem);line-height:var(--type-role-paragraph-line,1.5);font-weight:var(--type-role-paragraph-weight,400);}
.overview-copy small{font-family:var(--type-role-metadata-family,Inter,sans-serif);font-size:var(--type-role-metadata-size,.75rem);line-height:var(--type-role-metadata-line,1.3333);font-weight:var(--type-role-metadata-weight,400);}
.overview-tile>becchio-button{align-self:flex-start;max-width:100%;}
.overview-visual{display:grid;place-items:center;aspect-ratio:16/10;background:var(--surface-panel);color:var(--dim);}
.overview-visual>becchio-icon{width:64px;height:64px;--icon-size:64px;filter:drop-shadow(0 8px 8px color-mix(in srgb,var(--ink) 12%,transparent));}
.foundation-layer-guide{margin-top:32px;}
.foundation-layer-guide .foundation-flow{margin:16px 0;}
.product-visual{position:relative;isolation:isolate;aspect-ratio:16/10;overflow:hidden;background:color-mix(in srgb,var(--product-color) 12%,var(--surface-panel));}
.product-visual__symbol{position:absolute;inset:0;display:grid;place-items:center;}
.product-visual__symbol>becchio-icon,.product-visual__symbol>img{width:64px;height:64px;--icon-size:64px;color:var(--ink);filter:drop-shadow(0 8px 8px color-mix(in srgb,var(--product-color) 20%,transparent));}
.product-visual__capture{position:relative;display:block;width:100%;height:100%;object-fit:cover;object-position:top;}
.product-visual img[hidden]{display:none;}
@media(max-width:640px){.overview-grid{--grid-gap:16px;}}

/* Reading groups separate through spacing; control and Tile rims stay intact. */
.document hr{border:0;margin-block:24px}

/* Portrait keeps identity compact; contextual Back remains a separate action. */
@media(orientation:portrait),(max-width:519px){.studio-brand{width:44px;height:44px;min-width:44px;min-height:44px;padding:0;justify-content:center;gap:0}.studio-brand>span{display:none}}