.grid-tool{height:100%;display:grid;min-width:0;position:relative;background:var(--tool-panel);font-size:var(--tool-text)}.grid-workspace-bar{align-items:center;gap:24px;padding:0 16px 0 24px;border-bottom:1px solid var(--tool-line);min-width:0}.grid-workspace-bar h1{font:400 23px/1 var(--font-display),sans-serif;letter-spacing:.02em;font-synthesis:none;margin:0;white-space:nowrap}.grid-top-format{align-items:center;min-width:0;margin-left:auto}.grid-top-format>.ui-button{background:transparent;border-color:transparent}.grid-device-controls{display:flex;align-items:center;gap:2px;border-left:1px solid var(--tool-line);padding-left:12px}.grid-device-controls .ui-button[aria-pressed=true]{background:var(--tool-worktop);border-color:transparent;color:var(--brand-carbon)}.grid-workspace-actions{display:flex;gap:4px;border-left:1px solid var(--tool-line);padding-left:12px}.grid-workspace-actions .ui-button[aria-pressed=true]{background:var(--brand-leadtin-tint);border-color:transparent;color:var(--brand-carbon)}.grid-top-width .ui-numeric{padding:0}.grid-top-width .ui-slider,.grid-top-width label{display:none}.grid-top-width .ui-numeric-value{padding:2px 6px;border-radius:5px}.grid-top-width .ui-input{width:51px;border:0;background:transparent;padding:2px}.grid-top-width .ui-field-error{position:absolute;top:54px;z-index:21;background:var(--brand-leadtin-tint);padding:8px}.grid-format-size{white-space:nowrap}.grid-format-size,.tool-eyebrow{font:11px var(--font-mono),monospace;color:var(--tool-muted)}.tool-eyebrow{letter-spacing:.025em}.grid-work-area{display:grid;grid-template-columns:minmax(0,1fr) 280px;min-height:0;min-width:0}.grid-inspector-hidden .grid-work-area{grid-template-columns:minmax(0,1fr)}.grid-canvas-area{display:flex;position:relative;min-height:0;min-width:0}.grid-canvas-meta{pointer-events:none;position:absolute;left:18px;bottom:14px;display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:5px;background:var(--tool-worktop);color:var(--tool-muted);font:10px var(--font-mono),monospace}.grid-canvas-meta b{font-weight:400;color:var(--brand-concrete-light)}.grid-canvas-meta>span:first-child{text-transform:uppercase}.grid-save-indicator{color:var(--brand-prussian);pointer-events:auto;font-size:7px;margin-left:4px}.grid-zoom-control{position:absolute;right:18px;bottom:12px}.grid-zoom-control .ui-button{min-height:30px;font:11px var(--font-mono),monospace;box-shadow:0 2px 8px #00000008}.grid-sample-control{padding:6px 0 16px}.grid-sample-control .ui-segmented{display:flex}.grid-sample-control .ui-segment{flex:1 1}.grid-inspector-width{margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--tool-line)}.grid-guide-label{margin-top:8px}.grid-control-label{display:block;font-size:12px;color:var(--tool-muted);margin:12px 0 8px}.grid-text-controls>.ui-button{width:100%;justify-content:space-between;margin-bottom:12px}.grid-stage{position:relative;flex:1 1;min-height:0;min-width:0;overflow:auto;background-color:var(--tool-worktop);scrollbar-width:thin;overscroll-behavior:contain}.grid-stage:focus-visible{outline-offset:-3px}.grid-stage-center{display:flex;min-width:100%;min-height:100%;width:max-content;align-items:center;justify-content:center;padding:40px 40px 64px}.grid-paper-frame{position:relative;flex-shrink:0;box-shadow:0 2px 4px #00000008,0 12px 36px #0000000a}.grid-paper-label{position:absolute;bottom:calc(100% + 12px);width:100%;display:flex;justify-content:space-between;gap:10px;color:var(--tool-muted);font:9px var(--font-mono),monospace;letter-spacing:.04em;white-space:nowrap}.grid-paper{transform-origin:0 0;background:var(--brand-white);color:var(--brand-carbon);overflow:hidden}.grid-overlay,.grid-paper{position:absolute;left:0;top:0}.grid-overlay{pointer-events:none}.grid-column-labels{display:grid;position:absolute;top:calc(100% + 12px);font:9px var(--font-mono),monospace;color:var(--brand-prussian);text-align:center}.grid-column-labels span{min-width:0;overflow:hidden}.grid-overflow-note{position:sticky;bottom:12px;left:12px;margin:0 12px 12px;padding:8px 12px;background:var(--brand-leadtin-tint);font-size:12px;width:fit-content;border:1px solid var(--tool-line)}.grid-specimen{display:flex;flex-direction:column;gap:var(--sample-gap)}.sample-footer,.sample-masthead{display:flex;justify-content:space-between;gap:16px;font:14px/var(--sample-label-line) var(--font-mono),monospace;letter-spacing:.02em;min-height:var(--sample-label-line);flex-wrap:wrap}.sample-masthead{box-shadow:0 1px 0 var(--brand-carbon);padding-bottom:var(--sample-gap)}.sample-bottom,.sample-main{display:grid;grid-template-columns:repeat(var(--sample-columns),minmax(0,1fr));gap:var(--sample-gap) var(--sample-gutter);align-items:start}.sample-heading{min-width:0}.sample-heading h2{font-family:var(--sample-heading-font),sans-serif;font-size:var(--sample-title);line-height:var(--sample-title-line);letter-spacing:var(--sample-tracking);font-weight:var(--sample-heading-weight);font-synthesis:none;margin:0;overflow-wrap:anywhere}.sample-shape{position:relative;overflow:hidden;background:var(--brand-prussian);display:grid;place-items:center}.sample-circle{width:min(70%,260px);aspect-ratio:1;border-radius:50%;background:var(--brand-leadtin-tint)}.sample-shape-axis{position:absolute;left:50%;top:0;width:1px;height:100%;background:var(--brand-cool-white);opacity:.35}.sample-shape-axis:after{content:"";position:absolute;left:-600px;top:50%;width:1200px;height:1px;background:inherit}.sample-shape-label{position:absolute;bottom:16px;left:20px;color:var(--brand-white);font:12px var(--font-mono),monospace;letter-spacing:.05em}.sample-copy{min-width:0}.sample-copy p{margin:0;overflow-wrap:anywhere;max-width:36ch}.sample-copy p,.sample-notes{font-family:var(--sample-body-font,var(--font-body)),sans-serif;font-size:var(--sample-body);line-height:var(--sample-body-line)}.sample-notes{display:grid;grid-template-columns:1fr 1fr;gap:var(--sample-gutter);min-width:0}.sample-notes>div{display:flex;flex-direction:column;gap:var(--sample-gap);box-shadow:0 -1px 0 var(--brand-carbon);padding-top:var(--sample-gap);min-width:0;overflow-wrap:anywhere}.sample-note-number{font-family:var(--font-mono),monospace;font-size:var(--sample-body);line-height:var(--sample-body-line)}.sample-footer{margin-top:var(--sample-gap);box-shadow:0 -1px 0 var(--brand-carbon);padding-top:var(--sample-gap)}.sample-title-skeleton{justify-content:space-around}.sample-title-skeleton i{display:block;background:var(--brand-carbon);height:70%;max-height:calc(var(--sample-title-line) * .7);width:95%}.sample-title-skeleton i:nth-child(2){width:80%}.sample-title-skeleton i:nth-child(3){width:58%}.sample-copy-skeleton i{display:block;position:relative}.sample-copy-skeleton i:after{content:"";display:block;background:var(--brand-concrete-light);position:absolute;top:20%;height:35%;width:100%}.sample-copy-skeleton i:last-child:after{width:60%}.grid-inspector{min-height:0;overflow-y:auto;scrollbar-width:thin;overscroll-behavior:contain;border-left:1px solid var(--tool-line);padding:8px 18px 0;background:var(--tool-panel)}.grid-inspector-heading{display:flex;justify-content:space-between;align-items:center;min-height:40px}.grid-inspector-heading .ui-button{width:26px;min-height:26px;padding:5px}.grid-inspector>.ui-segmented{display:flex;margin:0 0 12px}.grid-inspector>.ui-segmented>*{flex:1 1}.grid-control-section{padding:10px 0 14px;border-bottom:1px solid var(--tool-line)}.grid-section-label{display:flex;align-items:center;justify-content:space-between;min-height:28px;font-size:12px;font-weight:600}.grid-section-label>span:last-child:not(:first-child){font:10px var(--font-mono),monospace;color:var(--tool-muted)}.grid-section-label .ui-button{min-height:26px;width:26px;padding:5px}.grid-section-label .ui-button[aria-pressed=true]{background:var(--tool-worktop);border-color:transparent;color:var(--brand-prussian)}.grid-details{font-size:12px}.grid-details summary{cursor:pointer;padding:10px 0;color:var(--tool-muted);list-style:none;display:flex;justify-content:space-between;align-items:center}.grid-details summary:after{content:"+";font:16px var(--font-mono),monospace}.grid-details[open] summary:after{content:"−"}.grid-details summary::-webkit-details-marker{display:none}.grid-details p,.grid-help{font-size:11px;line-height:1.5;color:var(--tool-muted);margin:4px 0 12px}.grid-breakpoints{padding:10px 0;border-bottom:1px solid var(--tool-line)}.grid-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0;font-size:12px}.grid-toggle-row p{font-size:11px;line-height:1.5;color:var(--tool-muted);margin:5px 0 0;max-width:160px}.grid-metrics{font:11px var(--font-mono),monospace;margin:12px 0}.grid-metrics>div{display:flex;justify-content:space-between;padding:7px 0}.grid-metrics dt{color:var(--tool-muted)}.grid-metrics dd{margin:0}.grid-inspector-bottom{margin-top:auto;display:flex;flex-direction:column;align-items:stretch;padding:18px 0;gap:8px}.grid-inspector-bottom .ui-button,.grid-inspector-bottom a{font-size:11px;display:flex;justify-content:space-between;padding:4px 0;min-height:26px}.grid-inspector-bottom a{color:var(--tool-muted)}.grid-inspector-bottom a svg{width:14px;height:14px}.grid-error{position:absolute;z-index:25;bottom:40px;left:16px;right:16px;display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:var(--brand-leadtin-tint);border:1px solid var(--tool-line);font-size:12px;box-shadow:0 6px 20px #00000010}.grid-copy-label{display:flex;flex-direction:column;gap:8px;font-size:12px;margin:18px 0}.grid-copy-label textarea{font:14px/1.5 var(--font-body),sans-serif;padding:10px;min-height:90px;background:var(--tool-panel)}.grid-copy-label textarea,.grid-export-preview{resize:vertical;border:1px solid var(--tool-line);border-radius:var(--tool-radius);color:var(--brand-carbon);width:100%}.grid-export-preview{height:240px;margin-top:14px;padding:12px;font:11px/1.6 var(--font-mono),monospace;background:var(--tool-worktop)}.grid-paper[data-format=banner] .sample-bottom{display:none}.grid-paper[data-format=banner] .sample-footer{margin-top:0}.grid-inspector .ui-numeric{padding:5px 0}.grid-inspector .ui-slider{height:18px}.grid-inspector .ui-numeric-value .ui-input{height:26px;border-color:transparent;background:var(--tool-worktop)}.grid-inspector .ui-numeric-value .ui-input:hover{border-color:var(--tool-line)}.grid-inspector .grid-control-section{padding:8px 0 12px}.grid-inspector .grid-breakpoints{padding:6px 0}.grid-workspace-bar{display:grid;grid-template-columns:minmax(190px,1fr) 438px minmax(88px,1fr);gap:16px;padding:0 16px}.grid-top-left{display:flex;gap:4px;align-items:center}.grid-top-left h1{margin-right:0}.grid-top-left>.ui-button:nth-child(2){width:24px}.grid-top-left>.ui-button:nth-child(3){margin-left:12px}.grid-top-format{display:grid;grid-template-columns:142px 116px 156px;gap:12px}.grid-top-format>.ui-button{width:142px}.grid-device-slot[data-visible=false]{visibility:hidden}.grid-device-controls{border:0;padding:0}.grid-dimension-slot{width:156px;display:flex;align-items:center;justify-content:flex-end}.grid-format-size{width:156px;text-align:right;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.grid-workspace-actions{justify-self:end;border:0;padding:0}.grid-top-width{width:156px}.grid-top-width .ui-numeric-value{margin-left:auto}.grid-top-width .ui-numeric-heading{justify-content:flex-end}.grid-inspector-heading{min-height:44px}.grid-inspector-bottom{display:none}.grid-size-fields{display:grid;grid-template-columns:minmax(0,1fr) 12px minmax(0,1fr);gap:8px;align-items:end;margin:8px 0 12px}.grid-size-fields label{font-size:11px;color:var(--tool-muted);display:grid;gap:6px}.grid-size-fields input{width:100%;font-family:var(--font-mono);font-size:12px}.grid-size-fields>span{padding-bottom:8px;color:var(--tool-muted)}.grid-fixed-size{font:12px var(--font-mono)}.grid-snap-action{display:flex;align-items:center;gap:8px;margin-top:12px}.grid-snap-action>.ui-button:first-child{flex:1 1}.grid-release-rhythm{width:100%;margin-top:8px;font-size:11px}.grid-rhythm-info{background:var(--tool-active);border:0;border-radius:6px;padding:14px!important;margin-top:16px}.grid-rhythm-info .grid-help{color:var(--brand-carbon);margin-bottom:0}.grid-rhythm-info .grid-metrics{margin:8px 0}.grid-preference-note{margin-top:16px}.grid-save-notice{background:var(--tool-active);padding:10px 12px;border-radius:5px}.grid-section-label .ui-button[aria-pressed=true]{background:var(--tool-active);color:var(--brand-carbon)}.grid-save-indicator{color:var(--tool-action)}.grid-zoom-control{display:flex;align-items:center;gap:4px;padding:4px;border-radius:7px;background:var(--tool-panel);box-shadow:0 2px 14px #00000010}.grid-zoom-control .ui-button{box-shadow:none;border-color:transparent}.grid-stage-pan{cursor:grab;touch-action:none}.grid-stage-pan:active{cursor:grabbing}.grid-stage-pan .grid-stage-center{min-width:calc(100% + 800px);min-height:calc(100% + 800px);padding:440px}.grid-tool[data-worktop=warm] .grid-stage{background:#f6f4f1}.grid-tool[data-worktop=dark] .grid-stage{background:#333536}.grid-tool[data-worktop=dark] :is(.grid-paper-label,.grid-column-labels){color:#edeeed!important}.grid-panel-overlay .grid-work-area{grid-template-columns:minmax(0,1fr)}.grid-panel-overlay .grid-inspector{position:absolute;right:0;top:56px;bottom:0;width:280px;z-index:20;box-shadow:-12px 0 30px #00000010}.grid-inspector{animation:inspector-enter .2s cubic-bezier(.2,.7,.2,1)}@keyframes inspector-enter{0%{opacity:0;transform:translateX(12px)}to{opacity:1;transform:translateX(0)}}@media (max-width:1100px){.grid-workspace-bar{grid-template-columns:minmax(150px,1fr) 438px 80px;gap:8px;padding-inline:12px}}@media (max-width:1000px){.grid-work-area{grid-template-columns:minmax(0,1fr)}.grid-inspector{position:absolute;z-index:20;width:280px;right:0;top:56px;bottom:0;box-shadow:-12px 0 30px #00000010}}@media (max-width:850px){.grid-workspace-bar{grid-template-columns:152px minmax(0,1fr) 76px}.grid-top-format{display:flex;justify-content:center}.grid-device-slot,.grid-dimension-slot{display:none}.grid-top-format>.ui-button{width:142px}}@media (max-width:550px){.grid-workspace-bar{grid-template-columns:auto minmax(0,1fr) 64px;padding-inline:6px;gap:4px}.grid-top-left h1{display:none}.grid-top-left{gap:0}.grid-top-left>.ui-button{width:28px;padding:5px}.grid-top-format>.ui-button{width:100%;padding:6px;font-size:11px;gap:4px}.grid-workspace-actions .ui-button{width:30px;padding:6px}.grid-workspace-actions{gap:2px}.grid-inspector,.grid-panel-overlay .grid-inspector{width:min(280px,100%)}.grid-canvas-meta{left:8px;bottom:60px;font-size:9px}.grid-zoom-control{right:8px;bottom:8px}.grid-paper-label span:first-child{display:none}.grid-paper-label{justify-content:flex-end}.grid-column-labels,.grid-paper-label{font-size:8px}}@media (prefers-reduced-motion:reduce){.grid-inspector{animation:none}}@media (max-width:550px){.grid-top-left>.ui-button:nth-child(3){margin-left:0}}.grid-workspace-bar{display:flex;gap:20px;position:relative;z-index:30}.grid-top-left{flex:0 0 auto}.grid-top-format{display:flex;gap:6px;margin:0}.grid-top-format>.ui-button{width:136px;justify-content:space-between}.grid-device-slot{width:auto}.grid-device-slot[data-visible=false]{display:none}.grid-device-controls{padding-left:6px}.grid-dimension-slot{width:150px;justify-content:flex-start}.grid-workspace-actions{margin-left:auto}.grid-device-controls .ui-button[aria-pressed=true],.grid-section-label .ui-button[aria-pressed=true],.grid-workspace-actions .ui-button[aria-pressed=true]{background:var(--brand-carbon);color:var(--brand-white)}.grid-top-width .ui-numeric{margin:0;background:transparent}.grid-top-width .ui-numeric-heading{position:static;padding:0;pointer-events:auto}.grid-top-width .ui-numeric-value{background:var(--tool-worktop)}.grid-inspector .ui-numeric{padding:0;margin:10px 0}.grid-inspector .ui-slider{height:44px}.grid-inspector .ui-numeric-value .ui-input{background:transparent}.grid-inspector .ui-numeric-value .ui-input:focus{background:var(--brand-white)}.grid-rhythm-info,.grid-save-notice{background:var(--brand-leadtin-tint)}.grid-save-summary{background:var(--tool-worktop);padding:12px;font:12px/1.8 var(--font-mono),monospace}.grid-paper,.grid-paper-frame{border-radius:4px}.grid-paper-label{text-transform:none;opacity:.7}.grid-column-labels{opacity:.65}.grid-tool[data-worktop=dark] .grid-column-labels,.grid-tool[data-worktop=dark] .grid-paper-label{color:var(--brand-concrete-light)!important}.sample-shape{background:var(--brand-cool-white);border:1px solid var(--brand-concrete-light)}.sample-circle{background:var(--brand-carbon);width:min(56%,220px)}.sample-shape-axis{background:var(--brand-concrete);opacity:.3}.sample-shape-label{color:var(--brand-concrete)}.sample-title-skeleton{position:relative;border:1px solid var(--brand-concrete-light);border-radius:3px;background:var(--brand-cool-white);display:flex;flex-direction:column;justify-content:center;gap:20px;padding:44px 28px 28px}.sample-title-skeleton i{background:var(--brand-concrete-light);height:12px;min-height:0;width:85%}.sample-title-skeleton i:nth-of-type(2){width:68%}.sample-title-skeleton i:nth-of-type(3){width:48%}.sample-wire-label{font:12px/1.5 var(--font-mono),monospace;color:var(--brand-concrete);letter-spacing:.04em}.sample-title-skeleton .sample-wire-label{position:absolute;top:18px;left:28px}.sample-copy-skeleton{border-top:1px solid var(--brand-concrete-light);padding-top:16px}.sample-copy-skeleton .sample-wire-label{display:block;margin-bottom:14px}.sample-copy-skeleton i{background:linear-gradient(var(--brand-concrete-light),var(--brand-concrete-light)) 0 /100% 5px no-repeat}.grid-paper[data-sample=structure] .sample-circle{background:transparent;border:1px solid var(--brand-concrete-light)}.grid-paper[data-sample=structure] .sample-shape{background:transparent}.grid-panel-overlay .grid-inspector{top:68px;right:12px;bottom:12px;border:1px solid var(--tool-line);border-radius:8px;box-shadow:0 12px 40px #0002}@media (max-width:850px){.grid-workspace-bar{gap:8px}.grid-top-format>.ui-button{width:116px}.grid-device-slot{display:flex}.grid-dimension-slot{width:88px;display:flex}.grid-device-controls{padding:0;border:0}.grid-device-controls .ui-button{width:28px}}@media (max-width:650px){.grid-device-slot,.grid-dimension-slot{display:none}.grid-workspace-bar{gap:4px}.grid-top-format{flex:1 1}.grid-top-format>.ui-button{width:100%}.grid-workspace-actions{padding-left:0;border:0}}.grid-top-width{width:88px}.grid-top-width .ui-numeric-value{margin-left:0}.grid-top-width .ui-numeric-heading{justify-content:flex-start}.grid-format-size{width:auto;text-align:left}.sample-copy-skeleton i:after{display:none}.sample-copy-skeleton i:last-child{background-size:60% 5px}.grid-inspector .ui-slider{height:34px}.grid-inspector>.ui-segmented{margin-top:12px}.grid-canvas-switch{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:4}.grid-canvas-switch .grid-sample-control{padding:0}.grid-canvas-switch .ui-segmented{background:var(--tool-panel);box-shadow:0 2px 10px #00000008}.grid-stage-center{padding-top:64px}.grid-top-width{display:flex;align-items:center;gap:6px;width:150px}.grid-auto-height{font:10px var(--font-mono),monospace;color:var(--tool-muted);white-space:nowrap}.grid-top-width .ui-numeric{width:88px;width:124px;flex-shrink:0}.grid-dimension-slot,.grid-top-width{width:184px}.grid-tool{grid-template-rows:56px auto minmax(0,1fr)}.grid-canvas-switch,.grid-zoom-control{position:static;inset:auto;transform:none;padding:0;background:none;box-shadow:none;border:0}.grid-stage-center{flex-direction:column;gap:14px;padding:32px 40px}.grid-page-caption{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;font:11px/1.5 var(--font-mono);color:var(--tool-muted)}.grid-canvas-meta{position:static;inset:auto;padding:0;background:none;font:inherit}.grid-top-format>.ui-button{font:400 13px var(--font-body);min-width:110px}.grid-top-width .ui-numeric{width:110px}.grid-dimension-slot,.grid-top-width{width:164px}.grid-zoom-control .ui-button{font:400 13px var(--font-body)}.grid-top-width .ui-numeric-heading label{display:block;font-size:0}.grid-top-width .ui-number-unit{font-size:10px}@media (max-width:700px){.grid-tool{grid-template-rows:auto auto minmax(0,1fr)}.grid-workspace-bar{min-height:56px}}.grid-stage-center{gap:32px}.grid-top-width .ui-numeric{width:150px;background:var(--tool-worktop)}.grid-dimension-slot,.grid-top-width{width:208px}.grid-top-width .ui-numeric-heading{position:absolute;padding:0 10px}.grid-top-width .ui-numeric-heading label{font-size:12px}.grid-top-width .ui-numeric-value{background:transparent}.grid-top-width .ui-numeric-value .ui-input{width:64px}.grid-canvas-switch .ui-segmented{box-shadow:none}.grid-work-area{position:relative}.grid-panel-overlay .grid-inspector{top:12px}@media (max-width:900px){.grid-inspector{top:0}}.grid-tool{grid-template-rows:56px minmax(0,1fr)}.grid-workspace-bar .grid-canvas-switch{margin-left:auto}.grid-inspector{display:flex;flex-direction:column}.grid-inspector>*{flex-shrink:0}.grid-inspector .grid-zoom-control{display:flex;justify-content:flex-end}.grid-top-width .ui-numeric{width:122px}.grid-top-width .ui-numeric-value .ui-input{width:48px}.grid-dimension-slot,.grid-top-width{width:174px}@media (max-width:900px){.grid-workspace-bar .grid-canvas-switch{display:none}}.grid-mobile-sample{display:none}@media (max-width:900px){.grid-mobile-sample{display:flex;margin:0 0 12px}}.grid-eased-column,.grid-eased-column line{transition:transform .18s cubic-bezier(.22,.61,.36,1)}.grid-eased-column rect{transition:width .18s cubic-bezier(.22,.61,.36,1)}.grid-paper{transition:padding .18s ease-out}.sample-bottom,.sample-main{transition:gap .18s ease-out}@media (prefers-reduced-motion:reduce){.grid-eased-column,.grid-eased-column line,.grid-eased-column rect,.grid-paper,.sample-bottom,.sample-main{transition:none}}.layout-tool{height:100%;display:grid;grid-template-rows:56px minmax(0,1fr);font:13px/1.4 var(--font-body);color:var(--brand-carbon)}.layout-toolbar{display:flex;align-items:center;gap:14px;padding:0 16px;border-bottom:1px solid var(--tool-line);background:var(--tool-panel);min-width:0;z-index:5}.layout-toolbar h1{font:400 24px var(--font-display);margin:0}.layout-toolbar-actions{display:flex;gap:4px;margin-left:auto}.layout-toolbar>button{max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.layout-work-area{display:grid;grid-template-columns:minmax(0,1fr) 304px;min-height:0;position:relative}.layout-inspector-hidden .layout-work-area{grid-template-columns:minmax(0,1fr)}.layout-stage{overflow:auto;min-width:0;min-height:0;background:var(--tool-worktop);padding:32px;display:grid;place-items:start center}.layout-frame{position:relative;flex-shrink:0;margin:auto}.layout-paper{position:absolute;left:0;top:0;transform-origin:top left;background:var(--tool-panel);box-shadow:var(--tool-shadow);box-sizing:border-box;overflow:hidden;--layout-gap:0px}.layout-paper[data-grow=true]{overflow:visible}.layout-panel-set{display:flex;flex-direction:column;min-height:100%}.layout-columns{display:flex;align-items:stretch}.layout-column{min-width:0;position:relative;display:flex}.layout-column>.layout-panel{width:100%}.layout-rows{display:flex;flex-direction:column}.layout-header,.layout-panel,.layout-row{position:relative}.layout-panel{box-sizing:border-box;min-width:0;display:flex;align-items:flex-start;transition:background-color .16s ease}.layout-paper[data-guides=true] .layout-panel{background:color-mix(in srgb,var(--brand-concrete) 7%,var(--tool-panel));box-shadow:inset 0 0 0 1px var(--tool-line)}.layout-panel[data-selected=true]{background:color-mix(in srgb,var(--brand-concrete) 10%,var(--tool-panel))!important}.layout-panel-label{position:absolute;left:8px;top:8px;font:11px var(--font-mono);opacity:.5}.layout-paper[data-guides=false] .layout-panel-label{display:none}.layout-panel-content{width:100%;display:flex;flex-direction:column;align-items:flex-start;min-width:0}.layout-element{display:block;padding:8px;margin:0;max-width:100%;border:0;border-radius:3px;white-space:pre-wrap;overflow-wrap:anywhere;text-align:left;background:transparent;color:inherit;cursor:pointer;line-height:1.3;font-family:var(--layout-secondary)}.layout-element:hover{background:color-mix(in srgb,var(--brand-carbon) 4%,transparent)}.layout-element[aria-pressed=true]{background:color-mix(in srgb,var(--brand-carbon) 7%,transparent)}.layout-element:focus-visible{outline:1px solid var(--tool-focus);outline-offset:2px}.layout-element-heading{font-family:var(--layout-primary);line-height:1.02;font-weight:400}.layout-element-caption,.layout-element-tag{font-family:var(--font-mono)}.layout-element-tag{padding:6px 12px;background:var(--tool-worktop)}.layout-element-button{padding:12px 24px;background:var(--brand-carbon);color:var(--tool-panel)}.layout-element-button:hover,.layout-element-button[aria-pressed=true]{background:var(--brand-slate)}.layout-element-link{text-decoration:underline;text-underline-offset:5px}.layout-binding{position:absolute;left:0;top:0;bottom:0;border-right:2px dashed var(--brand-concrete-light);display:flex;align-items:center;justify-content:space-around;flex-direction:column}.layout-binding i{width:14%;height:22px;background:var(--brand-carbon);border-radius:3px}.layout-binding span{writing-mode:vertical-rl;transform:rotate(180deg);font:14px var(--font-mono);letter-spacing:3px}.layout-divider{position:absolute;padding:0;border:0;background:transparent;z-index:3;touch-action:none;cursor:col-resize;width:16px;top:0;bottom:0;right:calc(var(--layout-gap) / -2 - 8px);display:grid;place-items:center}.layout-divider span{height:60px;width:3px;border-radius:2px;background:var(--brand-concrete);opacity:.4}.layout-divider:focus-visible span,.layout-divider:hover span{opacity:1;background:var(--brand-carbon)}.layout-divider-header,.layout-divider-row{cursor:row-resize;top:auto;left:0;right:0;bottom:calc(var(--layout-gap) / -2 - 8px);width:100%;height:16px}.layout-divider-header span,.layout-divider-row span{height:3px;width:60px}.layout-wireframe{padding:36px 0;width:100%;display:grid;gap:16px}.layout-wireframe i{height:12px;background:var(--brand-concrete-light);border-radius:2px}.layout-wireframe i:last-child{width:60%}.layout-empty-panel{margin:auto;opacity:.6}.layout-inspector{padding:0 16px;overflow:auto;min-height:0;border-left:1px solid var(--tool-line);display:flex;flex-direction:column;background:var(--tool-panel);scrollbar-width:thin}.layout-inspector>*{flex-shrink:0}.layout-control-group{display:grid;gap:12px;padding:18px 0;border-bottom:1px solid var(--tool-line)}.layout-control-group h2{margin:0;font:500 13px var(--font-body);min-height:24px}.layout-control-group h2,.layout-setting-row{display:flex;justify-content:space-between;align-items:center}.layout-setting-row{font-size:12px}.layout-hint{font-size:11px;line-height:1.5;color:var(--tool-muted);margin:0}.layout-control-group>a,.layout-source a{font-size:11px;color:var(--tool-muted);text-underline-offset:3px}.layout-element-list{display:grid;border:1px solid var(--tool-line);border-radius:4px;padding:4px;gap:2px}.layout-element-list:empty{display:none}.layout-element-list button{justify-content:flex-start;text-transform:capitalize;gap:8px}.layout-element-list span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;color:var(--tool-muted);margin-left:auto;max-width:120px}.layout-add-elements{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}.layout-add-elements button{font-size:11px;padding:4px;text-transform:capitalize;border:1px solid var(--tool-line)}.layout-add-elements svg{width:12px}.layout-text-label{display:grid;gap:8px;font-size:11px;text-transform:capitalize}.layout-export textarea,.layout-text-label textarea{width:100%;padding:10px;border:1px solid var(--tool-line);border-radius:4px;background:var(--tool-worktop);font:13px/1.5 var(--font-body);resize:vertical}.layout-reorder{display:flex;gap:4px}.layout-reorder button{flex:1 1;font-size:11px}.layout-source{padding:16px 0;font-size:12px}.layout-source a{display:block;margin-top:8px}.layout-inspector .tool-panel-footer{bottom:0}.layout-inspector .tool-panel-footer>.ui-button{justify-self:end}.layout-library{width:min(920px,calc(100vw - 32px))}.layout-library>.ui-input{width:100%;margin:12px 0}.layout-library-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-height:60vh;overflow:auto;padding:4px}.layout-library-grid button{padding:10px;border:1px solid var(--tool-line);border-radius:4px;background:var(--tool-panel);text-align:left;color:var(--brand-carbon);font:13px var(--font-body);cursor:pointer}.layout-library-grid button:hover,.layout-library-grid button[aria-pressed=true]{background:var(--tool-worktop);border-color:var(--brand-carbon)}.layout-library-grid svg{width:100%;display:block;margin-bottom:10px}.layout-library-grid small,.layout-library-grid span{display:block}.layout-library-grid small{font-size:10px;color:var(--tool-muted);margin-top:4px}.layout-export{width:min(700px,calc(100vw - 32px))}.layout-export textarea{font-family:var(--font-mono);margin:12px 0}.tool-workspace[data-focus=true] :is(.layout-toolbar,.layout-inspector,.layout-divider,.layout-panel-label,.layout-empty-panel){display:none}.tool-workspace[data-focus=true] .layout-tool{grid-template-rows:minmax(0,1fr)}.tool-workspace[data-focus=true] .layout-work-area{grid-template-columns:minmax(0,1fr)}.tool-workspace[data-focus=true] .layout-element,.tool-workspace[data-focus=true] .layout-panel{box-shadow:none;background:transparent!important}.tool-workspace[data-focus=true] .layout-element-button{background:var(--brand-carbon)!important}@media (max-width:1000px){.layout-toolbar{gap:6px}.layout-toolbar>button{max-width:220px}.layout-toolbar-actions{gap:0}}@media (max-width:900px){.layout-work-area{grid-template-columns:minmax(0,1fr)}.layout-inspector{position:absolute;top:0;right:0;bottom:0;width:304px;z-index:5;box-shadow:-6px 0 18px #0001}}@media (max-width:600px){.layout-tool{grid-template-rows:auto minmax(0,1fr)}.layout-toolbar{flex-wrap:wrap;padding:8px}.layout-toolbar>button{order:3;width:100%;max-width:none}.layout-toolbar h1{font-size:20px}.layout-toolbar .ui-segment{padding-inline:6px}.layout-toolbar-actions button{width:27px;padding:4px}.layout-library-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.layout-inspector{max-width:100%}.layout-stage{padding:16px}}@media (prefers-reduced-motion:reduce){.layout-panel{transition:none}}.layout-control-group .ui-numeric{margin:0}.marketing-tool{height:100%;display:grid;grid-template-rows:56px minmax(0,1fr);background:var(--tool-worktop);color:var(--brand-carbon);font:13px/1.5 var(--font-body)}.marketing-toolbar{display:flex;align-items:center;gap:16px;padding:0 20px;background:var(--tool-panel);border-bottom:1px solid var(--tool-line);min-width:0}.marketing-toolbar h1{margin:0;font:400 23px var(--font-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.marketing-toolbar:has(>.ui-button) h1{font:400 13px var(--font-body);max-width:160px}.marketing-project{border-left:1px solid var(--tool-line);padding-left:16px;text-transform:capitalize}.marketing-device,.marketing-project{color:var(--tool-muted);font-size:11px}.marketing-device{margin-left:auto}.marketing-toolbar-actions{display:flex;align-items:center;gap:6px;margin-left:auto}.marketing-library{overflow:auto;padding:32px}.marketing-library-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;max-width:1440px;margin:0 auto 28px}.marketing-eyebrow{font:10px var(--font-mono);letter-spacing:.05em;color:var(--tool-muted);margin:0 0 12px}.marketing-library-intro h2{font:400 clamp(30px,3.2vw,48px)/1.1 var(--font-display);margin:0 0 12px}.marketing-library-intro p:last-child{color:var(--tool-muted);margin:0}.marketing-library-nav{display:flex;justify-content:space-between;align-items:center;gap:16px;border-bottom:1px solid var(--tool-line);padding-bottom:14px;margin:0 auto 24px;max-width:1440px}.marketing-library-nav .ui-segmented{border-color:transparent;background:transparent}.marketing-template-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 24px;max-width:1440px;margin:auto}.marketing-template{min-width:0}.marketing-template>button{display:block;width:100%;text-align:left;border:0;background:transparent;color:inherit;padding:0;cursor:pointer;font:inherit}.marketing-template>button:focus-visible{outline:2px solid var(--tool-focus);outline-offset:6px;border-radius:3px}.marketing-template-image{display:block;aspect-ratio:1;overflow:hidden;position:relative;background:var(--tool-raised);border-radius:3px}.marketing-template-image>svg{width:100%;height:100%;transition:transform .35s var(--ease-out)}.marketing-template>button:is(:hover,:focus-visible) .marketing-template-image>svg{transform:scale(1.025)}.marketing-template-use{position:absolute;bottom:16px;right:16px;background:var(--brand-white);color:var(--brand-carbon);padding:9px 12px;display:flex;align-items:center;gap:16px;border-radius:3px;opacity:0;transform:translateY(5px);transition:opacity .18s,transform .22s var(--ease-out)}.marketing-template>button:is(:hover,:focus-visible) .marketing-template-use{opacity:1;transform:translateY(0)}.marketing-template-title{display:flex;align-items:center;justify-content:space-between;margin:14px 0 4px}.marketing-template-title strong{font-weight:500}.marketing-template-title>span{font:10px var(--font-mono);color:var(--tool-muted)}.marketing-template-description{display:block;color:var(--tool-muted);font-size:11px}.marketing-empty{text-align:center;padding:60px 20px;color:var(--tool-muted)}.marketing-empty h3{font:400 28px var(--font-display);color:var(--brand-carbon)}.marketing-work-area{display:grid;grid-template-columns:minmax(0,1fr) 300px;min-height:0}.marketing-work-area[data-panel=false]{grid-template-columns:minmax(0,1fr)}.marketing-stage{display:flex;flex-direction:column;align-items:center;min-width:0;overflow:auto;padding:20px 32px 32px}.marketing-stage-bottom,.marketing-stage-top{display:flex;justify-content:space-between;gap:16px;width:min(100%,720px);font:10px var(--font-mono);color:var(--tool-muted)}.marketing-stage-top{margin-bottom:18px}.marketing-stage-bottom{margin-top:16px;font-family:var(--font-body)}.marketing-canvas{height:min(680px,calc(100dvh - 180px));max-width:100%;flex-shrink:0;box-shadow:0 2px 14px #0000000c;animation:marketing-enter .24s var(--ease-out)}.marketing-artwork{display:block;width:100%;height:100%}.marketing-inspector{overflow:auto;border-left:1px solid var(--tool-line);padding:18px;background:var(--tool-panel)}.marketing-inspector>.ui-segmented{display:flex;margin-bottom:20px}.marketing-inspector>.ui-segmented>*{flex:1 1}.marketing-fields{display:grid;gap:18px;animation:marketing-enter .18s ease-out}.marketing-fields label{display:grid;gap:7px;font-size:11px}.marketing-fields :is(.ui-input,.ui-textarea){width:100%}.marketing-fields .ui-textarea{font:13px/1.6 var(--font-body);resize:vertical}.marketing-fields .ui-button{justify-content:center}.marketing-field-note{font-size:11px;line-height:1.6;color:var(--tool-muted)}.marketing-themes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:0;padding:0;gap:8px;margin:0}.marketing-themes legend{padding:0 0 10px;font-size:11px}.marketing-themes button{border:1px solid transparent;padding:3px;border-radius:4px;background:transparent;color:inherit;cursor:pointer}.marketing-themes button[aria-pressed=true]{border-color:var(--brand-carbon)}.marketing-themes button:focus-visible{outline:2px solid var(--tool-focus);outline-offset:3px}.marketing-themes button>span{display:grid;place-items:center;height:44px;border-radius:2px;font:20px var(--font-display)}.marketing-themes small{font:9px var(--font-body)}.marketing-image-control{border-top:1px solid var(--tool-line);padding-top:18px;display:grid;gap:10px}.marketing-image-control :is(p,small){font-size:11px;color:var(--tool-muted);margin:0}.marketing-fit-warning{max-width:620px;background:var(--hint-surface);padding:12px 16px;font-size:12px}.marketing-error,.marketing-notice{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:100;background:var(--hint-surface);border:1px solid var(--tool-line);padding:8px 12px 8px 18px;border-radius:4px;display:flex;align-items:center;gap:12px;max-width:calc(100vw - 40px);font-size:12px;box-shadow:var(--tool-shadow)}.marketing-error{z-index:110}.marketing-content-filter{display:grid;gap:16px;margin:20px 0}.marketing-content-filter label{display:flex;align-items:center;justify-content:space-between}.marketing-content-list{list-style:none;padding:0;display:grid;gap:10px}.marketing-content-list .ui-button{flex-direction:column;align-items:flex-start;gap:6px;height:auto;padding:16px;white-space:normal;text-align:left;width:100%}.marketing-content-list :is(small,span){font-size:11px;color:var(--tool-muted)}.marketing-export-dialog{width:min(640px,calc(100vw - 24px))}.marketing-export-image{display:block;max-width:100%;max-height:60dvh;width:auto;height:auto;margin:24px auto 0}@keyframes marketing-enter{0%{opacity:.4;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@media (max-width:1100px){.marketing-device,.marketing-project,.marketing-toolbar:has(>.ui-button) h1{display:none}.marketing-template-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.marketing-work-area{grid-template-columns:minmax(0,1fr) 270px}.marketing-stage{padding:20px}.marketing-canvas{height:auto;width:100%;max-height:calc(100dvh - 180px)}}@media (max-width:760px){.marketing-toolbar{padding:0 10px;gap:6px}.marketing-toolbar h1{font-size:21px}.marketing-toolbar-actions>.ui-button span,.marketing-toolbar-actions>.ui-button:nth-child(2),.marketing-toolbar>.ui-button[aria-label=Templates] span{display:none}.marketing-toolbar>.ui-button{padding:6px}.marketing-toolbar-actions{gap:2px}.marketing-toolbar>.ui-button[aria-label="Output format"]{max-width:120px;overflow:hidden}.marketing-library{padding:24px 16px}.marketing-library-intro{align-items:flex-start;flex-direction:column;gap:10px;margin-bottom:20px}.marketing-library-nav{align-items:flex-start;flex-direction:column;overflow:auto}.marketing-library-nav .ui-segmented{flex-shrink:0}.marketing-template-grid{gap:24px 14px}.marketing-work-area{display:block;overflow:auto}.marketing-stage{overflow:visible;padding:18px}.marketing-canvas{width:auto;height:440px}.marketing-inspector{border-left:0;border-top:1px solid var(--tool-line);overflow:visible}.marketing-fields{grid-template-columns:repeat(2,minmax(0,1fr))}.marketing-fields>:is(.ui-button,.marketing-image-control,.marketing-field-note,fieldset){grid-column:1/-1}}@media (max-width:480px){.marketing-fields,.marketing-template-grid{grid-template-columns:minmax(0,1fr)}.marketing-canvas{width:100%;height:auto}.marketing-toolbar-actions>.ui-button:first-child{display:none}.marketing-toolbar>.ui-button[aria-label="Output format"]{max-width:98px;font-size:11px}}@media (prefers-reduced-motion:reduce){.marketing-template-image>svg,.marketing-template-use{transition:none}.marketing-canvas,.marketing-fields{animation:none}}