/* Demonstrações locais: cada gesto altera uma amostra neutra, sem carregar a Workbench. */
#entrada{--demo-pad:24px;--demo-gap:24px;--demo-title:28px}
.comoIlu.sceneMini{display:block;width:100%;height:312px;padding:var(--demo-pad);aspect-ratio:auto;min-height:0;background:var(--wb-panel);border:1px solid var(--wb-line);border-radius:var(--wb-panel-radius)}
.demo{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr);gap:var(--demo-gap);width:100%;height:100%;min-width:0;text-align:left;color:var(--wb-text);--sample-surface:var(--wb-panel-2);--sample-text:var(--wb-text);--sample-accent:#50b3f9;--demo-body-size:14px;--range-percent:25%;--mapped-body:14px;--mapped-gap:16px;--mapped-radius:8px}
.demoTop{display:grid;gap:12px;align-content:start;min-width:0}
.demoKicker{display:block;color:var(--wb-soft);font:400 12px/16px var(--wb-sans)}
.demoTitle{display:block;min-height:2.24em;font:500 var(--demo-title)/1.12 var(--wb-sans);letter-spacing:-.025em;white-space:normal;text-wrap:balance;overflow-wrap:break-word}
.demoContent{align-self:end;min-width:0}
.demoEyebrow,.demoRole{display:flex;align-items:baseline;justify-content:space-between;gap:12px;min-width:0}
.demoRole{min-height:calc(var(--demo-title) * 2.24)}
.demoValue{flex:none;font:400 20px/28px var(--wb-mono);letter-spacing:-.04em;color:var(--wb-soft)}
.demoLive{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
/* 1 · O token e o alvo compartilham a mesma cor. */
.demoColorContent{display:grid;gap:16px}
.demoSwatches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.demoSwatch{display:grid;gap:6px;min-width:0;min-height:44px;padding:5px 6px;border:1px solid transparent;border-radius:var(--wb-panel-radius);background:transparent;color:var(--wb-soft);text-align:left;transition:border-color .2s var(--wb-ease),color .2s var(--wb-ease)}
.demoSwatch i{display:block;height:10px;width:100%;border-radius:1px;box-shadow:inset 0 0 0 1px rgb(255 255 255 / .1)}
.demoSwatch span{font:400 11px/16px var(--wb-sans);overflow-wrap:break-word}
.demoSwatch:hover{border-color:var(--wb-line-2);color:var(--wb-text)}
.demoSwatch[aria-pressed=true]{border-color:transparent;color:var(--wb-text)}
.demoColorStage{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0;min-height:72px;padding:12px;background:var(--sample-surface);border-radius:var(--wb-panel-radius)}
.demoColorCopy{display:grid;gap:4px;min-width:0}
.demoColorTitle{font:500 13px/18px var(--wb-sans);color:var(--sample-text)}
.demoColorSupport{font:400 11px/16px var(--wb-sans);color:var(--sample-text)}
.demoSampleAction{flex:none;display:inline-flex;align-items:center;min-height:28px;padding:0 10px;border-radius:var(--wb-panel-radius);background:var(--sample-accent);color:#0e0e10;font:500 11px/16px var(--wb-sans)}
[data-color-target]{outline:1px solid transparent;outline-offset:3px;transition:outline-color .25s var(--wb-ease),box-shadow .25s var(--wb-ease)}
.demoTokens[data-token=surface] [data-color-target=surface],.demoTokens[data-token=text] [data-color-target=text],.demoTokens[data-token=accent] [data-color-target=accent]{outline-color:var(--wb-mark)}
/* 2 · O controle nativo altera o tamanho da amostra. */
.demoAdjustment{display:grid;gap:8px}
.demoControlLabel{display:block;font:400 12px/16px var(--wb-sans);color:var(--wb-soft)}
.demoRange{display:block;width:100%;min-width:0;height:28px;margin:0;appearance:none;-webkit-appearance:none;background:transparent;cursor:ew-resize;touch-action:pan-y}
.demoRange::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(to right,var(--wb-text) 0 var(--range-percent),var(--wb-line-2) var(--range-percent) 100%)}
.demoRange::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;box-sizing:border-box;width:14px;height:14px;margin-top:-5px;border:2px solid var(--wb-text);border-radius:50%;background:var(--wb-panel)}
.demoRange::-moz-range-track{height:4px;border-radius:2px;background:var(--wb-line-2)}
.demoRange::-moz-range-progress{height:4px;border-radius:2px;background:var(--wb-text)}
.demoRange::-moz-range-thumb{box-sizing:border-box;width:14px;height:14px;border:2px solid var(--wb-text);border-radius:50%;background:var(--wb-panel)}
.demoEndpoints{display:flex;justify-content:space-between;gap:12px;font:400 11px/16px var(--wb-mono);color:var(--wb-dim)}
.demoPreview{display:grid;gap:4px}
.demoReading{display:block;min-height:56px;font:400 var(--demo-body-size)/1.4 var(--wb-sans);overflow-wrap:break-word;transition:font-size .2s var(--wb-ease)}
/* 3 · Os desenhos e seus valores mudam juntos. */
.demoProposalContent{display:grid;gap:12px}
.demoModes{display:inline-flex;justify-self:end;gap:2px;padding:2px;border:1px solid var(--wb-line);border-radius:var(--wb-control-radius);background:var(--wb-bg)}
.demoMode{min-height:28px;padding:3px 10px;border:0;border-radius:inherit;background:transparent;color:var(--wb-soft);font:400 12px/18px var(--wb-sans)}
.demoMode:hover{color:var(--wb-text)}
.demoMode[aria-pressed=true]{background:var(--wb-panel-2);color:var(--wb-text)}
.demoMappings{display:grid;gap:2px}
.demoMapping{display:grid;grid-template-columns:minmax(0,1fr) 48px 52px;align-items:center;gap:12px;min-height:32px}
.demoMapping dt{display:grid;min-width:0;font:400 12px/16px var(--wb-sans)}
.demoMapping dt small{font:400 10px/14px var(--wb-sans);color:var(--wb-dim)}
.demoMapping dd{margin:0}
.demoMappedValue{text-align:right;white-space:nowrap;font:400 12px/18px var(--wb-mono);font-variant-numeric:tabular-nums}
.demoMeasureType{display:grid;place-items:center;min-width:0;height:32px;text-align:center;font:500 var(--mapped-body)/1.2 var(--wb-sans);transition:font-size .35s var(--wb-ease-exp)}
.demoMeasureSpace{display:grid;place-items:center;height:32px}
.demoMeasureSpace i{position:relative;display:block;width:var(--mapped-gap);height:12px;border-inline:1px solid var(--wb-soft);transition:width .35s var(--wb-ease-exp)}
.demoMeasureSpace i::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--wb-dim)}
.demoMeasureShape{display:grid;place-items:center;height:32px}
.demoMeasureShape i{display:block;width:32px;height:24px;border:1px solid var(--wb-soft);border-radius:var(--mapped-radius);background:transparent;transition:border-radius .35s var(--wb-ease-exp)}
/* One short introduction; user input always takes control. */
@keyframes demoEnter{from{opacity:.4;transform:translateY(5px)}to{opacity:1;transform:none}}
.demo.isEntering .demoTop{animation:demoEnter .65s var(--wb-ease-exp) both}.demo.isEntering .demoContent{animation:demoEnter .8s var(--wb-ease-exp) .12s both}
:root[data-movimento=reduzido] .demo *{animation:none!important;transition:none!important}
.sceneSurface.entradaQuadro{display:grid;place-items:center;width:100%;min-width:0;min-height:clamp(400px,45vw,520px);padding:48px;aspect-ratio:auto;background:var(--wb-panel);background-image:none;border:1px solid var(--wb-line);border-radius:var(--wb-panel-radius)}
.sceneSurface .demo{max-width:560px;min-height:320px;height:auto;--demo-title:40px;--demo-gap:32px}
.sceneSurface .demoColorStage{min-height:96px;padding:20px}.sceneSurface .demoColorTitle{font-size:20px;line-height:28px}.sceneSurface .demoColorSupport{font-size:14px;line-height:20px}.sceneSurface .demoSampleAction{min-height:36px;padding:0 16px;font-size:14px}
.sceneSurface .demoMapping{min-height:40px}.sceneSurface .demoMappings{gap:12px}
.entradaLado .sceneSurface{aspect-ratio:auto;min-height:440px;margin-top:0;padding:32px}.entradaLado .sceneSurface .demo{--demo-title:32px;max-width:400px}
@media(min-width:821px) and (max-width:1100px){.comoIlu.sceneMini{--demo-pad:20px;--demo-title:24px}.sceneMini .demoColorStage{gap:8px;padding:10px}.sceneMini .demoSampleAction{padding:0 8px}.sceneMini .demoColorSupport{font-size:10px}.sceneMini .demoMapping{gap:8px;grid-template-columns:minmax(0,1fr) 48px 48px}}
@media(max-width:980px){.entradaLado .sceneSurface{margin-top:48px}}
@media(max-width:820px){.sceneSurface.entradaQuadro{padding:32px;aspect-ratio:auto}.sceneSurface .demo{--demo-title:32px;min-height:300px}}
@media(max-width:420px){.sceneSurface.entradaQuadro,.entradaLado .sceneSurface{padding:24px}.sceneSurface .demo{--demo-title:28px;min-height:288px}.sceneSurface .demoColorStage{padding:12px;gap:12px}.sceneSurface .demoColorTitle{font-size:13px;line-height:18px}.sceneSurface .demoColorSupport{font-size:11px;line-height:16px}.sceneSurface .demoSampleAction{min-height:28px;padding:0 10px;font-size:11px}}
/* Diagnóstico: uma lista de estilos e sua aplicação na composição neutra. */
:root{--audit-accent:#50b3f9}
:root[data-tema=claro]{--audit-accent:#246baf}
.sceneSurface.auditSurface{display:block;padding:0;min-height:0;overflow:hidden}
.sceneSurface .auditDemo{display:grid;grid-template-columns:280px minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;grid-template-areas:"inspector preview" "status status";gap:0;max-width:none;min-height:480px;height:auto;--audit-space-tight:8px;--audit-space-list:16px;--audit-space-section:24px;--audit-font-heading:28px;--audit-font-body:14px;--audit-font-meta:12px}
.auditInspector{grid-area:inspector;display:flex;flex-direction:column;gap:24px;padding:24px;min-width:0;border-right:1px solid var(--wb-line)}
.auditInspectorTitle{font:500 14px/20px var(--wb-sans)}
.auditCategories{display:flex;flex-wrap:wrap;gap:4px}
.auditCategory{min-height:32px;padding:5px 8px;border:1px solid transparent;border-radius:var(--wb-control-radius);background:transparent;color:var(--wb-soft);font:400 12px/18px var(--wb-sans);white-space:nowrap;transition:background-color .2s var(--wb-ease),color .2s var(--wb-ease)}
.auditCategory:hover{color:var(--wb-text)}
.auditCategory[aria-pressed=true]{border-color:var(--wb-line-2);background:var(--wb-bg);color:var(--wb-text)}
.auditValues{display:grid;gap:8px}
.auditPick{display:grid;grid-template-columns:16px minmax(0,1fr) auto;align-items:center;gap:12px;min-height:64px;width:100%;padding:10px 8px;border:1px solid transparent;border-radius:var(--wb-panel-radius);background:transparent;color:var(--wb-soft);text-align:left;transition:background-color .2s var(--wb-ease),color .2s var(--wb-ease)}
.auditPick:hover{background:var(--wb-bg);color:var(--wb-text)}
.auditPick[aria-pressed=true]{border-color:var(--wb-line-2);background:var(--wb-bg);color:var(--wb-text)}
.auditPickColor{display:block;width:16px;height:16px;border:1px solid var(--wb-line-2);border-radius:2px}
.auditPickAa{font:500 13px/18px var(--wb-sans);font-style:normal}
.auditPickSpace{display:block;position:relative;width:16px;height:12px;border-inline:1px solid var(--wb-soft)}
.auditPickSpace::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--wb-dim)}
.auditPickName{display:grid;gap:4px;min-width:0;font:400 13px/18px var(--wb-sans)}
.auditPickName small{font:400 10px/14px var(--wb-mono);color:var(--wb-dim)}
.auditPick code{font:400 11px/16px var(--wb-mono);white-space:nowrap}
.auditPreview{position:relative;grid-area:preview;min-width:0;padding:32px;background:var(--wb-bg)}
.auditContent{display:grid;min-width:0}
.auditSampleHeading,.auditItemCopy{display:grid;min-width:0}
.auditSampleTitle{margin:0;font-weight:500;line-height:1.2;letter-spacing:-.025em}
.auditSampleIntro{margin:0;max-width:var(--medida-texto);line-height:1.5}
.auditSampleMeta{margin:0;color:var(--wb-soft);line-height:1.5}
.auditList{display:grid;list-style:none;margin:0;padding:0;min-width:0}
.auditItem{display:grid;grid-template-columns:minmax(0,1fr) 8px;align-items:center;gap:16px;min-width:0;padding:16px;border-radius:var(--wb-panel-radius)}
.auditItemTitle{font-weight:500;line-height:1.4;overflow-wrap:break-word}
.auditDot{display:block;width:8px;height:8px;border-radius:50%}
[data-audit-color=surface]{background:var(--wb-panel-2)}
[data-audit-color=text]{color:var(--wb-text)}
[data-audit-color=accent]{background:var(--audit-accent)}
[data-audit-type=heading]{font-size:var(--audit-font-heading)}
[data-audit-type=body]{font-size:var(--audit-font-body)}
[data-audit-type=meta]{font-size:var(--audit-font-meta)}
[data-audit-space=tight]{row-gap:var(--audit-space-tight)}
[data-audit-space=list]{row-gap:var(--audit-space-list)}
[data-audit-space=section]{row-gap:var(--audit-space-section)}
.auditPreview [data-audit-hit]{outline:1px solid var(--wb-mark);outline-offset:3px}
.auditDot[data-audit-hit]{outline-offset:4px}
.auditMeasures{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.auditMeasure{position:absolute;min-height:1px;border-inline:1px solid var(--wb-mark);background:color-mix(in srgb,var(--wb-mark) 14%,transparent)}
.auditMeasure span{position:absolute;right:4px;top:50%;transform:translateY(-50%);padding:0 3px;background:var(--wb-bg);color:var(--wb-mark);font:400 10px/12px var(--wb-mono)}
.auditStatus{grid-area:status;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;min-height:48px;padding:12px 24px;border-top:1px solid var(--wb-line);font:400 12px/18px var(--wb-sans);color:var(--wb-soft)}
.auditSelection{font-family:var(--wb-mono);color:var(--wb-text)}
.auditDemo.isEntering .auditInspector,.auditDemo.isEntering .auditPreview{animation:demoEnter .7s var(--wb-ease-exp) both}
@media(max-width:980px){.sceneSurface .auditDemo{grid-template-columns:260px minmax(0,1fr)}.auditInspector{padding:20px}.auditPreview{padding:24px}.auditPick{gap:8px}}
@media(max-width:760px){.sceneSurface .auditDemo{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;grid-template-areas:"inspector" "preview" "status"}.auditInspector{gap:16px;padding:20px;border-right:0;border-bottom:1px solid var(--wb-line)}.auditValues{gap:4px}.auditPick{min-height:44px;padding:8px}.auditPickName{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}.auditPickName small{font-size:10px}.auditPreview{padding:24px}.auditItem{padding:12px}.auditStatus{padding:12px 20px}}
@media(max-width:420px){.sceneSurface.auditSurface{padding:0}.auditPreview{padding:20px}}
/* A proposta é revelada pelo botão: a ação e os dois blocos conservam seu lugar. */
.sceneSurface.magicSurface{padding:48px;min-height:520px}
.sceneSurface .magicDemo{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-rows:auto;align-items:center;gap:48px;max-width:none;min-height:400px;height:auto;--mapped-body:11.5px;--mapped-gap:13px;--mapped-radius:3px}
.magicControls{display:grid;gap:var(--wb-section-gap);min-width:0}
.magicSummary{min-height:64px;margin:0;font:500 28px/32px var(--wb-sans);letter-spacing:-.02em}
.magicRules{display:grid;gap:16px;list-style:none;margin:0;padding:0}
.magicRule{display:grid;align-content:start;gap:4px;min-height:50px;min-width:0}
.magicFamily{font:400 14px/22px var(--wb-sans);color:var(--wb-soft)}
.magicRuleValues{font:400 16px/24px var(--wb-sans);color:var(--wb-soft);font-variant-numeric:tabular-nums;transition:color .3s var(--wb-ease)}
.magicRule[data-magic-resolved=true] .magicRuleValues{color:var(--wb-text)}
.magicActions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.magicActions .magicButton{min-width:184px;max-width:100%;min-height:48px;padding:12px 24px;font:500 16px/22px var(--wb-sans);white-space:normal}
.magicButton[aria-disabled=true]{cursor:progress}
.magicActions .magicReset{min-height:48px;height:auto;padding:12px 24px;border:1px solid var(--wb-line-2);background:transparent;color:var(--wb-text);font:400 14px/22px var(--wb-sans);text-decoration:none;white-space:normal}
.magicReset:hover{color:var(--wb-text)}
.magicReset[aria-hidden=true]{visibility:hidden;pointer-events:none}
.magicTokenCard{display:grid;gap:var(--wb-section-gap);min-width:0;width:100%;padding:32px;border:1px solid var(--wb-line-2);border-radius:var(--wb-panel-radius);background:var(--wb-bg)}
.magicScale{font:400 12px/18px var(--wb-sans);color:var(--wb-dim)}
.magicTokenHeading{font:500 20px/28px var(--wb-sans);letter-spacing:-.02em;color:var(--wb-text)}
.magicMappings{display:grid;gap:16px}
.magicMapping{display:grid;grid-template-columns:minmax(0,1fr) 72px 64px;align-items:center;gap:16px;min-height:88px;min-width:0}
.magicMapping dt{display:grid;gap:4px;min-width:0;font:500 20px/28px var(--wb-sans)}
.magicMapping dt small{font:400 14px/22px var(--wb-sans);color:var(--wb-soft)}
.magicMapping dd{margin:0}
.magicTokenValue{color:var(--wb-soft);text-align:right;white-space:nowrap;font:400 16px/24px var(--wb-mono);font-variant-numeric:tabular-nums;transition:color .3s var(--wb-ease)}
.magicMapping[data-magic-resolved=true] .magicTokenValue{color:var(--wb-text)}
/* Texto e intervalo ampliados em 2×; o canto conserva o raio real (1:1). */
.magicMapping .demoMeasureType{height:48px;font-size:calc(var(--mapped-body) * 2);line-height:1}
.magicMapping .demoMeasureSpace{height:48px}
.magicMapping .demoMeasureSpace i{width:calc(var(--mapped-gap) * 2);height:24px}
.magicMapping .demoMeasureShape{height:48px}
.magicMapping .demoMeasureShape i{width:40px;height:32px;border-radius:var(--mapped-radius)}
@media(max-width:980px){.sceneSurface.magicSurface{padding:32px}.sceneSurface .magicDemo{gap:32px}.magicTokenCard{padding:24px}.magicMapping{gap:12px;grid-template-columns:minmax(0,1fr) 64px 64px}}
@media(max-width:820px){.sceneSurface .magicDemo{grid-template-columns:minmax(0,1fr);gap:32px}.sceneSurface.magicSurface{min-height:0}}
@media(max-width:520px){.magicMapping{grid-template-columns:minmax(0,1fr) 72px;gap:12px 16px;padding-block:8px}.magicMapping dt{grid-column:1;grid-row:1}.magicMapping .magicTokenValue{grid-column:2;grid-row:1}.magicMapping dd:not(.magicTokenValue){grid-column:1 / -1;grid-row:2;justify-self:start;min-width:64px}.magicMapping .demoMeasureSpace,.magicMapping .demoMeasureShape{justify-items:start}}
@media(max-width:420px){.sceneSurface.magicSurface{padding:24px}.magicTokenCard{padding:16px}.magicSummary{font-size:24px}}

/* Integração da Home: a casca e seus tokens continuam sendo a fonte. */
.sceneFigure{margin:0;min-width:0}.sceneFigure figcaption{margin-top:12px;font:400 12px/18px var(--wb-sans);color:var(--wb-dim);max-width:var(--medida-texto)}
#entrada .demoSwatch[aria-pressed=true]{border-color:transparent}
#entrada .demoMode[aria-pressed=true]{color:var(--wb-text)}
#entrada ::selection{background:var(--wb-mark);color:var(--wb-bg)}
#entrada .comoCards>li:nth-child(2) .comoIlu{height:312px;aspect-ratio:auto}
#entrada .entradaFim{gap:24px}#entrada .entradaFim .entradaSecTitulo,#entrada .entradaFim .entradaSecTexto{margin-top:0}
:root[data-movimento=reduzido] #entrada *,:root[data-movimento=reduzido] #entrada *::before,:root[data-movimento=reduzido] #entrada *::after{animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){#entrada *,#entrada *::before,#entrada *::after{animation:none!important;transition:none!important}}

/* O rosa pertence ao alvo localizado, não ao contêiner do seletor. */
#entrada .demoSwatch:hover{border-color:transparent}
#entrada .comoCards>li>.demoExampleNote{display:block;margin:-12px 0 16px;font:400 12px/18px var(--wb-sans);color:var(--wb-dim);max-width:var(--medida-texto)}
#entrada .sceneMini .demoAdjustment{gap:8px}#entrada .sceneMini .demoControl{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:center}
#entrada .sceneMini .demoControlLabel{grid-column:1/-1}#entrada .sceneMini .demoValue{font:400 14px/20px var(--wb-mono)}#entrada .sceneMini .demoReading{min-height:28px}

/* Card 2: o controle ocupa a faixa inferior, com valor e rótulo na mesma linha. */
#entrada .sceneMini .demoEditor .demoAdjustment{align-self:end}
#entrada .sceneMini .demoEditor .demoControl{grid-template-areas:"rotulo valor" "barra barra";gap:0 12px}
#entrada .sceneMini .demoEditor .demoControlLabel{grid-area:rotulo;grid-column:auto}
#entrada .sceneMini .demoEditor .demoValue{grid-area:valor;justify-self:end;font:400 20px/28px var(--wb-mono);color:var(--wb-text)}
#entrada .sceneMini .demoEditor .demoRange{grid-area:barra}
#entrada .sceneMini .demoSwatch i{height:14px}
#entrada .sceneMini .demoEditor .demoValue{font-size:40px;line-height:48px}

/* Card 3: nome e família à esquerda, amostras e valores em colunas estáveis à direita. */
#entrada .sceneMini .demoProposal .demoMapping>dd:not(.demoMappedValue){justify-items:center}