.native-dialog-learn-demo{gap:14px;width:min(100%,700px);margin-inline:auto;display:grid}.native-dialog-learn-context,.native-popover-learn-context{color:var(--cvg-ds-text-primary);background:var(--cvg-ds-inset);border:1px solid var(--cvg-ds-border);border-radius:var(--radius-md);justify-items:start;gap:9px;padding:16px;display:grid}.native-dialog-learn-context h3,.native-dialog-learn-surface h3{margin:0;font-size:17px}.native-dialog-learn-context p,.native-dialog-learn-surface p,.native-popover-learn-context p{color:var(--cvg-ds-text-secondary);margin:0;font-size:13px;line-height:1.5}.native-dialog-learn-label{color:var(--cvg-ds-text-muted);letter-spacing:.08em;font-size:10px;font-weight:700}.native-dialog-learn-context output,.native-popover-learn-context output{color:var(--cvg-ds-text-secondary);font-size:12px;line-height:1.5}.native-dialog-learn-context>button,.native-popover-learn-context>button{min-height:40px}.native-dialog-learn-surface{width:min(480px,100vw - 32px);max-width:calc(100vw - 32px);color:var(--cvg-ds-text-primary);background:var(--cvg-ds-panel);border:1px solid var(--cvg-ds-border);border-radius:var(--radius-lg);padding:22px;box-shadow:0 24px 70px #00000047}.native-dialog-learn-surface::backdrop{background:#0a101994}.native-dialog-learn-surface>*+*{margin-top:13px}.native-dialog-learn-surface :focus,.native-popover-learn-surface :focus,.native-dialog-learn-context :focus-visible,.native-popover-learn-context :focus-visible{outline:2px solid var(--cvg-ds-action);outline-offset:3px}.native-popover-learn-context{grid-template-columns:minmax(0,1fr) auto;align-items:center}.native-popover-learn-context>div:first-child{gap:5px;display:grid}.native-popover-learn-context output{grid-column:1/-1}.native-popover-learn-surface{width:min(300px,100vw - 32px);color:var(--cvg-ds-text-primary);background:var(--cvg-ds-panel);border:1px solid var(--cvg-ds-border);border-radius:var(--radius-md);margin:0;padding:16px;position:fixed;inset:auto;box-shadow:0 16px 42px #0000003d}.native-popover-learn-surface[popover]{max-height:min(60vh,320px);overflow:auto}.native-popover-learn-surface p{color:var(--cvg-ds-text-secondary);margin:7px 0 0;font-size:13px;line-height:1.5}.native-dialog-learn-guidance{gap:10px;display:grid}.native-dialog-learn-guidance p{color:var(--cvg-ds-text-secondary);margin:0;font-size:13px;line-height:1.55}.native-dialog-learn-guidance kbd{color:var(--cvg-ds-text-primary);background:var(--cvg-ds-inset);border:1px solid var(--cvg-ds-border);font:12px var(--font-mono);border-radius:4px;padding:1px 5px}.native-dialog-learn-guidance .native-popover-learn-compat{border-inline-start:3px solid var(--cvg-ds-action);background:var(--cvg-ds-inset);padding:9px 10px}@media (width<=760px){.native-dialog-learn-context,.native-popover-learn-context{padding:13px}.native-dialog-learn-context>button{width:100%}.native-popover-learn-context{grid-template-columns:minmax(0,1fr)}.native-popover-learn-context>button{width:100%}.native-popover-learn-surface{width:min(300px,100vw - 32px)}}.native-pmo-demo{gap:10px;width:min(100%,760px);margin-inline:auto;display:grid}.native-pmo-item{min-width:0;color:var(--cvg-ds-text-primary);background:var(--cvg-ds-panel);border:1px solid var(--cvg-ds-border);border-radius:var(--radius-md);gap:10px;padding:15px 17px;display:grid}.native-pmo-item-heading{align-items:flex-start;gap:11px;display:flex}.native-pmo-index{width:27px;height:27px;color:var(--cvg-ds-action);background:var(--cvg-ds-inset);font:11px var(--font-mono);border-radius:50%;flex:0 0 27px;place-items:center;display:grid}.native-pmo-item-heading h3{margin:0;font-size:14px}.native-pmo-item-heading p,.native-pmo-reading{color:var(--cvg-ds-text-secondary);margin:3px 0 0;font-size:12px;line-height:1.45}.native-pmo-native{padding:3px 0}.native-pmo-item progress,.native-pmo-item meter,.native-pmo-item input[type=range]{width:100%;min-width:0;margin:0;display:block}.native-pmo-item progress,.native-pmo-item meter{min-height:18px}.native-pmo-actions{flex-wrap:wrap;gap:8px;display:flex}.native-pmo-actions .btn{min-height:36px}.native-pmo-actions .btn:disabled{cursor:not-allowed;opacity:.55}.native-pmo-meter-label,.native-pmo-range-label{color:var(--cvg-ds-text-primary);justify-content:space-between;align-items:center;gap:10px;font-size:12px;font-weight:600;display:flex}.native-pmo-range-label>span{min-width:2.5em;color:var(--cvg-ds-text-primary);font:12px var(--font-mono);text-align:end}.native-pmo-calculation{color:var(--cvg-ds-text-secondary);background:var(--cvg-ds-inset);border-inline-start:3px solid var(--cvg-ds-action);font:13px var(--font-mono);border-radius:4px;align-items:center;gap:12px;padding:11px 13px;display:flex}.native-pmo-calculation output{color:var(--cvg-ds-text-primary);font-size:17px;font-weight:700}.native-pmo-guidance{gap:9px;display:grid}.native-pmo-guidance p{color:var(--cvg-ds-text-secondary);margin:0;font-size:13px;line-height:1.55}.native-pmo-guidance strong{color:var(--cvg-ds-text-primary)}.native-pmo-guidance code,.native-pmo-reading code{color:var(--cvg-ds-text-primary);font-family:var(--font-mono)}.native-pmo-demo :focus-visible{outline:2px solid var(--cvg-ds-action);outline-offset:3px}@media (width<=560px){.native-pmo-item{padding:13px}.native-pmo-actions{display:grid}.native-pmo-actions .btn{width:100%}}.final-metadata-learn-demo,.final-iframe-learn-demo,.final-template-learn-demo{gap:10px;width:min(100%,760px);min-width:0;display:grid}.final-metadata-learn-context,.final-iframe-learn-parent,.final-iframe-learn-facts,.final-template-learn-context{min-width:0;color:var(--cvg-ds-text-secondary);border:1px solid var(--cvg-ds-border);border-radius:var(--radius-sm);background:var(--cvg-ds-panel);gap:5px;padding:10px 12px;display:grid}.final-metadata-learn-context>span,.final-iframe-learn-parent>span,.final-template-learn-context>span{color:var(--cvg-ds-text-muted);font:600 10px/1.35 var(--font-ui);letter-spacing:.06em}.final-metadata-learn-context strong{color:var(--cvg-ds-text-primary);font-size:14px}.final-metadata-learn-context small,.final-template-learn-context small,.final-iframe-learn-local{color:var(--cvg-ds-text-muted);font:12px/1.45 var(--font-ui)}.final-learn-isolated-frame{border:1px solid var(--cvg-ds-border-strong);border-radius:var(--radius-sm);background:#f5f7fb;width:100%;min-width:0;height:218px;display:block}.final-template-learn-demo .final-learn-isolated-frame{height:250px}.final-iframe-learn-parent{gap:8px}.final-iframe-learn-frame-label{color:var(--cvg-ds-text-muted);font:12px/1.4 var(--font-mono)}.final-iframe-learn-parent .final-learn-isolated-frame{height:205px}.final-iframe-learn-status{color:var(--cvg-ds-text-muted);font:12px/1.4 var(--font-ui)}.final-iframe-learn-facts strong{color:var(--cvg-ds-text-primary);font:600 13px/1.4 var(--font-ui)}.final-iframe-learn-facts p,.final-metadata-learn-guidance p,.final-iframe-learn-guidance p,.final-template-learn-guidance p{color:var(--cvg-ds-text-secondary);font:13px/1.5 var(--font-ui);margin:0}.final-iframe-learn-token-state{border-top:1px solid var(--cvg-ds-border);padding-top:6px}.final-metadata-learn-guidance,.final-iframe-learn-guidance,.final-template-learn-guidance{align-content:start;gap:10px;min-width:0;display:grid}.final-metadata-learn-stages,.final-iframe-learn-stages,.final-template-learn-stages{gap:6px;display:grid}.final-metadata-learn-stages button,.final-iframe-learn-stages button,.final-template-learn-stages button,.final-iframe-learn-token,.final-template-learn-action{min-width:0;min-height:38px;color:var(--cvg-ds-text-primary);background:var(--cvg-ds-panel);border:1px solid var(--cvg-ds-border);border-radius:var(--radius-sm);font:500 12px/1.35 var(--font-ui);text-align:left;cursor:pointer;padding:8px 10px}.final-metadata-learn-stages button:hover,.final-iframe-learn-stages button:hover,.final-template-learn-stages button:hover,.final-iframe-learn-token:hover,.final-template-learn-action:hover{border-color:var(--cvg-ds-action)}.final-metadata-learn-stages button:focus-visible,.final-iframe-learn-stages button:focus-visible,.final-template-learn-stages button:focus-visible,.final-iframe-learn-token:focus-visible,.final-template-learn-action:focus-visible{outline:3px solid var(--cvg-ds-focus);outline-offset:2px}.final-metadata-learn-stages button[aria-pressed=true],.final-iframe-learn-stages button[aria-pressed=true],.final-template-learn-stages button[aria-pressed=true],.final-iframe-learn-token[aria-pressed=true]{border-color:var(--cvg-ds-action);background:var(--cvg-ds-action-selected)}.final-metadata-learn-note{color:var(--cvg-ds-text-muted);font:12px/1.45 var(--font-ui)}.final-template-learn-context{grid-template-columns:1fr}@media (width<=760px){.final-metadata-learn-demo,.final-iframe-learn-demo,.final-template-learn-demo{width:100%}.final-learn-isolated-frame{height:195px}.final-iframe-learn-parent .final-learn-isolated-frame{height:180px}.final-template-learn-demo .final-learn-isolated-frame{height:245px}.final-metadata-learn-stages,.final-iframe-learn-stages,.final-template-learn-stages{grid-template-columns:repeat(2,minmax(0,1fr))}.final-metadata-learn-stages button,.final-iframe-learn-stages button,.final-template-learn-stages button{overflow-wrap:anywhere}}.css-border-learn-demo{width:min(100%,440px);min-width:0;color:var(--cvg-ds-text-primary);gap:16px;display:grid}.css-border-learn-observation{color:var(--cvg-ds-text-secondary);font:600 13px/1.45 var(--font-ui);text-align:center}.css-border-learn-specimen{box-sizing:border-box;background:var(--cvg-ds-panel);width:100%;min-width:0;min-height:168px;color:var(--cvg-ds-text-primary);text-align:center;overflow-wrap:anywhere;align-content:center;justify-items:center;gap:8px;padding:22px;display:grid}.css-border-learn-specimen strong{font:650 20px/1.3 var(--font-ui)}.css-border-learn-specimen>span{color:var(--cvg-ds-text-secondary);font:14px/1.5 var(--font-ui)}.css-border-learn-guidance{min-width:0}.css-border-learn-guidance p{color:var(--cvg-ds-text-secondary);margin:0 0 12px}.css-border-learn-stages{gap:6px;display:grid}.css-border-learn-stages button{border:1px solid var(--cvg-ds-border);border-radius:var(--cvg-ds-radius-sm);background:var(--cvg-ds-inset);min-width:0;color:var(--cvg-ds-text-primary);font:500 13px/1.35 var(--font-ui);text-align:left;cursor:pointer;padding:8px 10px}.css-border-learn-stages button[aria-pressed=true]{border-color:var(--cvg-ds-action);background:var(--cvg-ds-action-selected)}.css-border-learn-stages button:focus-visible{outline:3px solid var(--cvg-ds-focus);outline-offset:2px}.css-border-learn-side-map{grid-template-columns:minmax(0,1fr) minmax(0,3fr) minmax(0,1fr);grid-template-areas:".top.""left specimen right"".bottom.";place-items:center;gap:8px;width:100%;min-width:0;display:grid}.css-border-learn-side-map>span{max-width:100%;color:var(--cvg-ds-text-primary);font:650 12px/1.3 var(--font-ui);text-align:center}.css-border-learn-side-top{grid-area:top}.css-border-learn-side-right{grid-area:right}.css-border-learn-side-bottom{grid-area:bottom}.css-border-learn-side-left{grid-area:left}.css-border-learn-side-specimen{grid-area:specimen;min-height:150px;padding:14px 8px}@media (width<=760px){.css-border-learn-demo{gap:12px}.css-border-learn-specimen{min-height:148px;padding:16px 10px}.css-border-learn-side-map{grid-template-columns:minmax(0,.8fr) minmax(0,2.2fr) minmax(0,.8fr);gap:6px}.css-border-learn-side-map>span{font-size:11px}.css-border-learn-side-specimen{min-height:132px;padding:12px 6px}}.css-box-shadow-learn-demo{width:min(100%,520px);min-width:0;color:var(--cvg-ds-text-primary);text-align:center;justify-items:center;gap:12px;padding:20px 12px;display:grid}.learn-experience-stage-content:has(.css-box-shadow-learn-demo){overflow:visible}.css-box-shadow-learn-observation{color:var(--cvg-ds-text-secondary);font:650 13px/1.4 var(--font-ui)}.css-box-shadow-learn-specimen{box-sizing:border-box;border:1px solid var(--cvg-ds-border);border-radius:var(--radius-md);background:var(--cvg-ds-panel);width:min(100%,238px);min-width:0;min-height:142px;color:var(--cvg-ds-text-primary);overflow-wrap:anywhere;align-content:center;justify-items:center;gap:8px;padding:20px;display:grid}.css-box-shadow-learn-specimen strong{font:650 17px/1.3 var(--font-ui)}.css-box-shadow-learn-specimen>span{color:var(--cvg-ds-text-secondary);font:13px/1.45 var(--font-ui)}.css-box-shadow-learn-value{max-width:100%;color:var(--cvg-ds-text-muted);font:11px/1.45 var(--font-mono);overflow-wrap:anywhere}.css-box-shadow-learn-guidance{min-width:0}.css-box-shadow-learn-guidance p{color:var(--cvg-ds-text-secondary);margin:0 0 12px}.css-box-shadow-learn-stages{gap:7px;display:grid}.css-box-shadow-learn-stages button{border:1px solid var(--cvg-ds-border);border-radius:var(--cvg-ds-radius-sm);background:var(--cvg-ds-inset);min-width:0;min-height:40px;color:var(--cvg-ds-text-primary);font:550 13px/1.35 var(--font-ui);text-align:left;cursor:pointer;align-items:center;gap:10px;padding:8px 10px;display:flex}.css-box-shadow-learn-stages button>span{color:var(--cvg-ds-text-muted);font:11px/1 var(--font-mono)}.css-box-shadow-learn-stages button[aria-pressed=true]{border-color:var(--cvg-ds-action);background:var(--cvg-ds-action-selected)}.css-box-shadow-learn-stages button:focus-visible{outline:3px solid var(--cvg-ds-focus);outline-offset:2px}@media (width<=760px){.css-box-shadow-learn-demo{gap:9px;padding:14px 4px}.css-box-shadow-learn-specimen{width:min(100%,150px);min-height:132px;padding:12px}.css-box-shadow-learn-specimen strong{font-size:15px}.css-box-shadow-learn-specimen>span{font-size:12px}.css-box-shadow-learn-value{font-size:10px}}.css-outline-learn-demo{box-sizing:border-box;width:min(100%,520px);min-width:0;color:var(--cvg-ds-text-primary);text-align:center;justify-items:center;gap:14px;padding:28px 22px;display:grid}.learn-experience-stage-content:has(.css-outline-learn-demo){overflow:visible}.css-outline-learn-observation{color:var(--cvg-ds-text-secondary);font:650 13px/1.4 var(--font-ui)}.css-outline-learn-specimen{box-sizing:border-box;border-width:var(--css-outline-border-width);border-style:var(--css-outline-border-style);border-color:var(--css-outline-border-color);border-radius:var(--radius-md);background:var(--cvg-ds-panel);width:min(100%,300px);min-width:0;min-height:146px;color:var(--cvg-ds-text-primary);font-family:var(--font-ui);text-align:center;cursor:pointer;overflow-wrap:anywhere;align-content:center;justify-items:center;gap:9px;padding:20px;display:grid}.css-outline-learn-specimen[data-outline-stage=true],.app:not(.is-playground) .main .learn-experience .learn-experience-stage-content .css-outline-learn-specimen[data-focus-stage=true]:focus-visible{outline-width:var(--css-outline-width);outline-style:var(--css-outline-style);outline-color:var(--css-outline-color);outline-offset:var(--css-outline-offset)}.css-outline-learn-specimen strong{font:650 17px/1.3 var(--font-ui)}.css-outline-learn-specimen span{color:var(--cvg-ds-text-secondary);font:13px/1.45 var(--font-ui)}.css-outline-learn-values,.css-outline-learn-note{max-width:100%;color:var(--cvg-ds-text-muted);font:11px/1.45 var(--font-mono);overflow-wrap:anywhere}.css-outline-learn-note{font-family:var(--font-ui);margin:0}.css-outline-learn-guidance{min-width:0}.css-outline-learn-guidance p{color:var(--cvg-ds-text-secondary);margin:0 0 12px}.css-outline-learn-stages{gap:7px;display:grid}.css-outline-learn-stages button{border:1px solid var(--cvg-ds-border);border-radius:var(--cvg-ds-radius-sm);background:var(--cvg-ds-inset);min-width:0;min-height:40px;color:var(--cvg-ds-text-primary);font:550 13px/1.35 var(--font-ui);text-align:left;cursor:pointer;align-items:center;gap:10px;padding:8px 10px;display:flex}.css-outline-learn-stages button>span{color:var(--cvg-ds-text-muted);font:11px/1 var(--font-mono)}.css-outline-learn-stages button[aria-pressed=true]{border-color:var(--cvg-ds-action);background:var(--cvg-ds-action-selected)}.css-outline-learn-stages button:focus-visible{outline:3px solid var(--cvg-ds-focus);outline-offset:2px}@media (width<=760px){.css-outline-learn-demo{gap:10px;padding:22px 12px}.css-outline-learn-specimen{width:min(100%,264px);min-height:136px;padding:16px 12px}.css-outline-learn-specimen strong{font-size:15px}.css-outline-learn-specimen span{font-size:12px}.css-outline-learn-values{font-size:10px}}.css-typography-learn-demo{box-sizing:border-box;width:min(100%,600px);min-width:0;color:var(--cvg-ds-text-primary);gap:16px;display:grid}.css-typography-learn-specimen{box-sizing:border-box;border:1px solid var(--cvg-ds-border-strong);border-radius:var(--cvg-ds-radius-md);background:var(--cvg-ds-panel);width:100%;min-width:0;color:var(--cvg-ds-text-primary);overflow-wrap:anywhere;padding:24px}.css-typography-learn-guidance{min-width:0}.css-typography-learn-guidance p{color:var(--cvg-ds-text-secondary);margin:0 0 12px}.css-typography-learn-stages{gap:6px;display:grid}.css-typography-learn-stages button{border:1px solid var(--cvg-ds-border);border-radius:var(--cvg-ds-radius-sm);background:var(--cvg-ds-inset);min-width:0;color:var(--cvg-ds-text-primary);text-align:left;cursor:pointer;padding:7px 9px}.css-typography-learn-stages button.active,.css-typography-learn-stages button[aria-pressed=true]{border-color:var(--cvg-ds-action);background:var(--cvg-ds-action-selected)}.css-typography-learn-stages button:focus-visible{outline:2px solid var(--cvg-ds-action);outline-offset:2px}.css-typography-learn-level{border-bottom:1px solid var(--cvg-ds-border);gap:5px;padding:12px 0;display:grid}.css-typography-learn-level:first-child{padding-top:0}.css-typography-learn-level:last-child{border-bottom:0;padding-bottom:0}.css-typography-learn-level>span{color:var(--cvg-ds-text-muted);font:12px/1.4 var(--font-ui)}.css-typography-learn-title,.css-typography-learn-supporting,.css-typography-learn-meta{color:var(--cvg-ds-text-primary);overflow-wrap:anywhere}.css-spacing-learn-scene{width:min(100%,470px);min-width:0;color:var(--cvg-ds-text-primary);font-family:var(--font-ui);gap:9px;display:grid}.css-spacing-learn-context-label,.css-spacing-learn-gap-caption{color:var(--cvg-ds-text-muted);font:600 10px/1.4 var(--font-mono);letter-spacing:.04em}.css-spacing-learn-frame{border:1px dashed var(--cvg-ds-border-strong);border-radius:var(--radius-sm);background:color-mix(in srgb, var(--cvg-ds-inset) 78%, transparent);width:100%;min-width:0;padding:12px;display:flow-root}.css-spacing-learn-frame.is-row{justify-content:flex-start;align-items:stretch;display:flex}.css-spacing-learn-specimen,.css-spacing-learn-neighbor{box-sizing:border-box;border:2px solid var(--cvg-ds-action);background:var(--cvg-ds-panel);border-radius:4px;flex:none;place-items:stretch stretch;width:230px;height:132px;display:grid;position:relative}.css-spacing-learn-content{border:1px solid var(--cvg-ds-border-strong);background:var(--cvg-ds-action-selected);min-width:0;min-height:0;color:var(--cvg-ds-text-primary);font:600 12px/1.4 var(--font-mono);text-align:center;border-radius:2px;place-items:center;display:grid}.css-spacing-learn-edge-label{color:var(--cvg-ds-text-secondary);background:var(--cvg-ds-panel);font:10px/1.2 var(--font-mono);padding:2px 4px;position:absolute;bottom:4px;right:5px}.css-spacing-learn-neighbor{border-style:dashed;border-color:var(--cvg-ds-border-strong);background:var(--cvg-ds-inset);width:116px;height:90px;color:var(--cvg-ds-text-secondary);font:11px/1.3 var(--font-mono);place-items:center}.css-spacing-learn-frame.is-row .css-spacing-learn-specimen,.css-spacing-learn-frame.is-row .css-spacing-learn-neighbor{width:calc(50% - 9px);height:104px}.css-spacing-learn-side-layout{width:100%;min-width:0;color:var(--cvg-ds-text-secondary);font:600 10px/1.35 var(--font-mono);text-align:center;grid-template-rows:auto auto auto;grid-template-columns:minmax(46px,.62fr) minmax(0,2fr) minmax(46px,.62fr);place-items:center;gap:6px;display:grid}.css-spacing-learn-side-layout>span{overflow-wrap:anywhere;min-width:0}.css-spacing-learn-side-layout .top{grid-area:1/2}.css-spacing-learn-side-layout .left{grid-area:2/1}.css-spacing-learn-side-layout .is-labeled{grid-area:2/2;width:min(100%,230px);min-width:0;height:118px}.css-spacing-learn-side-layout .right{grid-area:2/3}.css-spacing-learn-side-layout .bottom{grid-area:3/2}.css-spacing-learn-gap-caption{text-align:center}.css-spacing-learn-observation{color:var(--cvg-ds-action);font:650 11px/1.45 var(--font-mono);margin:1px 0 0}.css-spacing-learn-guidance-copy{color:var(--cvg-ds-text-secondary);font:400 13px/1.5 var(--font-ui);margin:0}.css-spacing-learn-stage-picker{gap:6px;margin-top:auto;display:grid}.css-spacing-learn-stage-picker button{align-items:center;gap:8px;min-width:0;min-height:35px;display:flex}.css-spacing-learn-stage-picker button>span{border:1px solid var(--learn-line);width:20px;height:20px;color:var(--cvg-ds-text-muted);font:11px/1 var(--font-mono);border-radius:50%;flex:0 0 20px;place-items:center;display:grid}.css-spacing-learn-stage-picker button[aria-pressed=true]>span{border-color:var(--cvg-ds-action);color:var(--cvg-ds-action)}@media (width<=760px){.css-spacing-learn-scene{gap:7px}.css-spacing-learn-frame{padding:9px}.css-spacing-learn-specimen{width:min(230px,78%);height:118px}.css-spacing-learn-neighbor{width:min(100px,38%);height:82px}.css-spacing-learn-frame.is-row .css-spacing-learn-specimen,.css-spacing-learn-frame.is-row .css-spacing-learn-neighbor{width:calc(50% - 9px);height:96px}.css-spacing-learn-side-layout{grid-template-columns:minmax(46px,.62fr) minmax(0,2fr) minmax(46px,.62fr);gap:5px;font-size:10px}}.css-box-model-learn-visual{width:min(100%,590px);min-width:0;color:var(--cvg-ds-text-primary);font-family:var(--font-ui);gap:12px;display:grid}.css-box-model-learn-frame{--box-model-learn-border:#4b9d91;border:1px dashed var(--cvg-ds-border-strong);border-radius:var(--radius-sm);background:color-mix(in srgb, var(--cvg-ds-inset) 78%, transparent);min-width:0;min-height:252px;padding:36px 8px 8px;display:flow-root}.css-box-model-learn-frame-label{color:var(--cvg-ds-text-muted);font:600 10px/1.4 var(--font-mono);letter-spacing:.035em;margin:-25px 0 10px;display:block}.css-box-model-learn-specimen{background:color-mix(in srgb, var(--cvg-ds-action-selected) 58%, var(--cvg-ds-panel));max-width:none;color:var(--cvg-ds-text-primary);display:flow-root}.css-box-model-learn-content{background:color-mix(in srgb, var(--cvg-ds-action-selected) 85%, var(--cvg-ds-panel));min-width:0;min-height:0;color:var(--cvg-ds-text-primary);text-align:center;place-content:center;justify-items:center;gap:3px;display:grid;overflow:hidden}.css-box-model-learn-content strong{font-size:12px;line-height:1.25}.css-box-model-learn-content span{color:var(--cvg-ds-text-secondary);font:10px/1.3 var(--font-mono)}.css-box-model-learn-layers{grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin:0;display:grid}.css-box-model-learn-layers>div{border:1px solid var(--cvg-ds-border);border-radius:var(--radius-sm);background:var(--cvg-ds-panel);min-width:0;padding:8px 9px}.css-box-model-learn-layers dt{min-width:0;color:var(--cvg-ds-text-primary);align-items:center;gap:5px;font-size:11px;font-weight:650;display:flex}.css-box-model-learn-layers dt i{border:1px solid var(--cvg-ds-border-strong);border-radius:2px;flex:0 0 10px;width:10px;height:10px;display:inline-block}.css-box-model-learn-layers dt i.is-content{background:color-mix(in srgb, var(--cvg-ds-action-selected) 85%, var(--cvg-ds-panel))}.css-box-model-learn-layers dt i.is-padding{background:color-mix(in srgb, var(--cvg-ds-action-selected) 58%, var(--cvg-ds-panel))}.css-box-model-learn-layers dt i.is-border{background:var(--box-model-learn-border)}.css-box-model-learn-layers dt i.is-margin{border-style:dashed}.css-box-model-learn-layers dt i.is-sizing{background:var(--cvg-ds-inset)}.css-box-model-learn-layers dd{color:var(--cvg-ds-text-secondary);font:10px/1.35 var(--font-mono);overflow-wrap:anywhere;margin:4px 0 0 15px}.css-box-model-learn-equation{border-left:3px solid var(--cvg-ds-action);border-radius:0 var(--radius-sm) var(--radius-sm) 0;background:var(--cvg-ds-panel);color:var(--cvg-ds-text-secondary);font:11px/1.5 var(--font-mono);overflow-wrap:anywhere;margin:0;padding:9px 11px}.css-box-model-learn-comparison{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.css-box-model-learn-comparison>section{border:1px solid var(--cvg-ds-border);border-radius:var(--radius-sm);background:var(--cvg-ds-panel);min-width:0;padding:10px}.css-box-model-learn-comparison h3{color:var(--cvg-ds-text-primary);margin:0;font-size:13px}.css-box-model-learn-comparison section>p{color:var(--cvg-ds-text-secondary);font:10px/1.4 var(--font-mono);margin:4px 0 0}.css-box-model-learn-comparison .css-box-model-learn-frame{min-height:190px;margin-top:8px;padding:28px 5px 5px}.css-box-model-learn-comparison .css-box-model-learn-frame-label{margin-top:-19px;margin-bottom:5px;font-size:8px}.css-box-model-learn-guidance{color:var(--cvg-ds-text-secondary);font:13px/1.5 var(--font-ui);gap:9px;display:grid}.css-box-model-learn-guidance p{margin:0}.css-box-model-learn-guidance .css-box-model-learn-observation{color:var(--cvg-ds-action);font:650 11px/1.45 var(--font-mono)}.css-box-model-learn-stage-picker{gap:6px;margin-top:2px;display:grid}.css-box-model-learn-stage-picker button{text-align:left;align-items:center;gap:8px;min-width:0;min-height:35px;display:flex}.css-box-model-learn-stage-picker button>span{border:1px solid var(--learn-line);width:20px;height:20px;color:var(--cvg-ds-text-muted);font:11px/1 var(--font-mono);border-radius:50%;flex:0 0 20px;place-items:center;display:grid}.css-box-model-learn-stage-picker button[aria-pressed=true]>span{border-color:var(--cvg-ds-action);color:var(--cvg-ds-action)}@media (width<=760px){.css-box-model-learn-visual{width:100%}.css-box-model-learn-frame{min-height:236px}.css-box-model-learn-layers{grid-template-columns:repeat(2,minmax(0,1fr))}.css-box-model-learn-layers>div:last-child{grid-column:1/-1}.css-box-model-learn-comparison{grid-template-columns:minmax(0,1fr)}.css-box-model-learn-comparison .css-box-model-learn-frame{min-height:190px}}.css-display-learn-scene{width:min(100%,470px);min-width:0;color:var(--cvg-ds-text-primary);font-family:var(--font-ui)}.css-display-learn-flow{border:1px dashed var(--cvg-ds-border-strong);border-radius:var(--radius-sm);background:color-mix(in srgb, var(--cvg-ds-inset) 78%, transparent);min-height:190px;padding:16px;display:flow-root}.css-display-learn-context,.css-display-learn-container-label{color:var(--cvg-ds-text-muted);font:600 10px/1.4 var(--font-mono);letter-spacing:.04em;margin:0 0 10px}.css-display-learn-target{box-sizing:border-box;border:2px solid var(--cvg-ds-action);background:var(--cvg-ds-action-selected);color:var(--cvg-ds-text-primary);font:600 12px/1.4 var(--font-mono);border-radius:5px;padding:12px 14px}.css-display-learn-flow .css-display-learn-target{width:100%;min-height:58px}.css-display-learn-neighbor{border:1px dashed var(--cvg-ds-border-strong);color:var(--cvg-ds-text-secondary);font:12px/1.45 var(--font-ui);border-radius:4px;margin:12px 0 0;padding:8px 10px}.css-display-learn-flow-inline{color:var(--cvg-ds-text-secondary);font:12px/1.5 var(--font-ui);display:inline}.css-display-learn-line{border:1px dashed var(--cvg-ds-border-strong);border-radius:var(--radius-sm);background:color-mix(in srgb, var(--cvg-ds-inset) 78%, transparent);padding:18px}.css-display-learn-line-context{color:var(--cvg-ds-text-secondary);font:15px/2.4 var(--font-ui);margin:0}.css-display-learn-line .css-display-learn-target{vertical-align:middle;padding:3px 7px}.css-display-learn-line .display-inline-block-target{text-align:center;padding:8px;line-height:34px}.css-display-learn-line .display-none-target{border:0;padding:0}.css-display-learn-container{box-sizing:border-box;border:2px solid var(--cvg-ds-border-strong);border-radius:var(--radius-sm);background:color-mix(in srgb, var(--cvg-ds-inset) 78%, transparent);place-content:center flex-start;align-items:center;gap:12px;width:100%;min-height:190px;padding:40px 16px 16px;position:relative}.css-display-learn-container-label{margin:0;position:absolute;top:13px;left:16px}.css-display-learn-item{border:1px solid var(--cvg-ds-action);background:var(--cvg-ds-panel);min-width:0;min-height:54px;color:var(--cvg-ds-action);font:600 13px/1 var(--font-mono);border-radius:4px;place-items:center;display:grid}.css-display-learn-grid .css-display-learn-item{min-height:50px}.css-display-learn-comparison{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.css-display-learn-comparison section{border:1px solid var(--cvg-ds-border-strong);border-radius:var(--radius-sm);background:var(--cvg-ds-panel);min-width:0;padding:12px}.css-display-learn-comparison section>strong{color:var(--cvg-ds-text-secondary);font:600 11px/1.4 var(--font-mono);margin-bottom:10px;display:block}.css-display-learn-items{gap:7px;min-width:0}.css-display-learn-items>span{background:var(--cvg-ds-action-selected);min-width:0;min-height:38px;color:var(--cvg-ds-text-primary);font:600 11px/1 var(--font-mono);border-radius:3px;place-items:center;display:grid}.css-display-learn-observation{color:var(--cvg-ds-action);font:650 11px/1.45 var(--font-mono);margin:1px 0 0}.css-display-learn-guidance{color:var(--cvg-ds-text-secondary);font:400 13px/1.5 var(--font-ui);margin:0}.css-display-learn-stage-picker{gap:6px;margin-top:auto;display:grid}.css-display-learn-stage-picker button{align-items:center;gap:8px;min-width:0;min-height:35px;display:flex}.css-display-learn-stage-picker button>span{border:1px solid var(--learn-line);width:20px;height:20px;color:var(--cvg-ds-text-muted);font:11px/1 var(--font-mono);border-radius:50%;flex:0 0 20px;place-items:center;display:grid}.css-display-learn-stage-picker button[aria-pressed=true]>span{border-color:var(--cvg-ds-action);color:var(--cvg-ds-action)}@media (width<=760px){.css-display-learn-flow{padding:11px}.css-display-learn-line{padding:12px}.css-display-learn-comparison{grid-template-columns:minmax(0,1fr)}}.css-overflow-learn-scene{width:min(100%,520px);min-width:0;color:var(--cvg-ds-text-primary);font-family:var(--font-ui);justify-items:start;gap:8px;display:grid}.css-overflow-learn-scene-caption{width:min(100%,280px);color:var(--cvg-ds-text-muted);font:600 10px/1.4 var(--font-mono);justify-content:space-between;gap:8px;display:flex}.css-overflow-learn-viewport{border-radius:var(--radius-sm);background:var(--cvg-ds-inset);max-width:100%;color:var(--cvg-ds-text-primary);scrollbar-color:var(--cvg-ds-border-strong) var(--cvg-ds-inset);border-color:var(--cvg-ds-action)!important}.css-overflow-learn-viewport:focus-visible{outline:3px solid var(--cvg-ds-action);outline-offset:3px}.css-overflow-learn-content{color:var(--cvg-ds-text-primary);font-family:var(--font-ui);margin:0}.css-overflow-learn-content.is-contained{border:1px solid var(--cvg-ds-border);background:var(--cvg-ds-action-selected);text-align:center;border-radius:4px;place-content:center;justify-items:center;gap:6px;display:grid}.css-overflow-learn-content.is-contained span,.css-overflow-learn-content.is-horizontal article span{color:var(--cvg-ds-text-secondary);font:11px/1.4 var(--font-mono)}.css-overflow-learn-content.is-horizontal{align-items:stretch;gap:8px;display:flex}.css-overflow-learn-content.is-horizontal article{box-sizing:border-box;border:1px solid var(--cvg-ds-border);background:var(--cvg-ds-panel);border-radius:4px;flex:0 0 106px;align-content:center;justify-items:start;gap:8px;padding:10px;display:grid}.css-overflow-learn-content.is-horizontal article strong{color:var(--cvg-ds-action);font:650 10px/1.4 var(--font-mono)}.css-overflow-learn-content.is-vertical{align-content:start;gap:6px;display:grid}.css-overflow-learn-content.is-vertical>*{box-sizing:border-box;border:1px solid var(--cvg-ds-border);background:var(--cvg-ds-panel);border-radius:3px;align-items:center;min-height:34px;padding:5px 8px;font-size:11px;display:flex}.css-overflow-learn-content.is-vertical>strong{color:var(--cvg-ds-action);font:650 10px/1.4 var(--font-mono)}.css-overflow-learn-content.is-practical{border:1px solid var(--cvg-ds-border);background:var(--cvg-ds-panel);font:10px/1.45 var(--font-mono);white-space:pre;border-radius:3px;padding:8px;display:block;overflow:visible}.css-overflow-learn-guidance{gap:10px;display:grid}.css-overflow-learn-observation{color:var(--cvg-ds-action);font:650 10px/1.45 var(--font-mono);letter-spacing:.025em;margin:0}.css-overflow-learn-guidance>p:not(.css-overflow-learn-observation){color:var(--cvg-ds-text-secondary);margin:0;font-size:13px;line-height:1.55}.css-overflow-learn-guidance .css-overflow-learn-keyboard-note{border-left:2px solid var(--cvg-ds-action);background:var(--cvg-ds-inset);padding:8px 10px;font-size:12px}.css-overflow-learn-stage-picker{gap:5px;display:grid}.css-overflow-learn-stage-picker button{min-width:0;min-height:36px;color:var(--cvg-ds-text-primary);border:1px solid var(--cvg-ds-border);background:var(--cvg-ds-panel);text-align:left;cursor:pointer;border-radius:4px;align-items:center;gap:9px;padding:6px 9px;display:flex}.css-overflow-learn-stage-picker button>span{width:22px;height:22px;color:var(--cvg-ds-text-muted);border:1px solid var(--cvg-ds-border);font:10px/1 var(--font-mono);border-radius:50%;flex:0 0 22px;place-items:center;display:grid}.css-overflow-learn-stage-picker button.active{border-color:var(--cvg-ds-action);background:var(--cvg-ds-action-selected);font-weight:650}.css-overflow-learn-stage-picker button.active>span{color:var(--cvg-ds-action);border-color:var(--cvg-ds-action)}.learn-experience-stage-content:has(.css-overflow-learn-scene[data-overflow-mode=visible]){overflow:visible}@media (width<=700px){.css-overflow-learn-scene{width:100%}.css-overflow-learn-viewport{width:min(280px,100%)!important}.css-overflow-learn-stage-picker{grid-template-columns:repeat(2,minmax(0,1fr))}}.flexbox-learn-topic,.flexbox-learn-topic .flexbox-learn-visual{min-width:0}.flexbox-learn-topic .learn-experience-stage-content>.flexbox-learn-visual{width:100%;margin-inline:0}.flexbox-learn-topic .flexbox-learn-container,.flexbox-learn-topic .flexbox-learn-item,.flexbox-learn-topic .flexbox-composition-nav{min-width:0}.flexbox-learn-topic .flexbox-learn-guidance{gap:12px;min-width:0;display:grid}.flexbox-learn-topic .flexbox-learn-guidance>p{color:var(--cvg-ds-text-secondary);font-size:var(--cvg-ds-type-supporting);margin:0;line-height:1.6}.flexbox-learn-topic .flexbox-learn-stage-picker{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;display:grid}.flexbox-learn-topic .flexbox-learn-stage-picker button{min-width:0;min-height:36px;color:var(--cvg-ds-text-secondary);background:var(--cvg-ds-inset);border:1px solid var(--cvg-ds-border);text-align:left;font-size:var(--cvg-ds-type-caption);border-radius:5px;align-items:center;gap:7px;padding:6px 8px;display:flex}.flexbox-learn-topic .flexbox-learn-stage-picker button.active,.flexbox-learn-topic .flexbox-learn-stage-picker button[aria-pressed=true]{color:var(--cvg-ds-action);border-color:var(--cvg-ds-action)}.flexbox-learn-topic .flexbox-learn-stage-picker button>span{color:var(--cvg-ds-text-muted);font:10px var(--font-mono);flex:none}.flexbox-learn-topic .flexbox-learn-stage-actions{flex-wrap:wrap;gap:8px;display:flex}.flexbox-learn-topic .flexbox-learn-stage-actions .btn{min-height:38px;color:var(--cvg-ds-text-secondary);background:var(--cvg-ds-inset);border-color:var(--cvg-ds-border)}.flexbox-learn-topic .flexbox-learn-stage-actions .btn-primary{color:var(--cvg-ds-action-on);background:var(--cvg-ds-action);border-color:var(--cvg-ds-action)}.flexbox-learn-topic .flexbox-learn-stage-actions button:disabled{opacity:.45;cursor:not-allowed}.flexbox-learn-topic .flexbox-learn-container[data-flex-container=true]{align-content:flex-start}.flexbox-learn-topic .flexbox-learn-container:has([data-flex-item]){min-height:210px}.flexbox-learn-topic .flexbox-learn-container[style*="max-width: min(440px, 67vw)"]{margin-right:auto}.flexbox-learn-topic .flexbox-learn-item{flex:0 clamp(56px,8vw,110px)}.flexbox-learn-topic .flexbox-learn-item.is-primary{border-color:var(--cvg-ds-demo-border)}.flexbox-learn-topic .flexbox-composition-nav{flex:0 100%}@media (width<=700px){.flexbox-learn-topic .flexbox-learn-stage-picker{grid-template-columns:repeat(2,minmax(0,1fr))}.flexbox-learn-topic .flexbox-learn-item{flex-basis:54px}.flexbox-learn-topic .flexbox-learn-container:has([data-flex-item]){min-height:142px}}.css-position-learn{min-width:0}.css-position-learn .css-position-learn-frame{border-radius:8px}.css-position-learn .css-position-learn-frame.is-focused{outline:2px solid var(--cvg-ds-focus);outline-offset:2px}.css-position-learn .css-position-learn-viewport{background:var(--cvg-ds-inset);border:0;border-radius:8px;width:100%;height:250px;display:block}.css-position-learn .css-position-learn-observation{color:var(--cvg-ds-text-primary);font-size:var(--cvg-ds-type-caption);margin:0 0 8px;font-weight:700}.css-position-learn .css-position-learn-guidance{color:var(--cvg-ds-text-secondary);font-size:var(--cvg-ds-type-body);margin:0 0 12px;line-height:1.5}.css-position-learn .css-position-learn-stage-picker{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;display:grid}.css-position-learn .css-position-learn-stage-picker button{min-width:0;min-height:36px;color:var(--cvg-ds-text-secondary);background:var(--cvg-ds-inset);border:1px solid var(--cvg-ds-border);text-align:left;font-size:var(--cvg-ds-type-caption);border-radius:5px;align-items:center;gap:8px;padding:6px 8px;display:flex}.css-position-learn .css-position-learn-stage-picker button span{color:var(--cvg-ds-text-muted);font-variant-numeric:tabular-nums}.css-position-learn .css-position-learn-stage-picker button.active{color:var(--cvg-ds-text-primary);border-color:var(--cvg-ds-accent)}.css-position-learn .css-position-learn-stage-picker button:focus-visible{outline:2px solid var(--cvg-ds-accent);outline-offset:2px}@media (width<=520px){.css-position-learn .css-position-learn-viewport{height:230px}.css-position-learn .css-position-learn-stage-picker{grid-template-columns:1fr}}.css-transform-learn{min-width:0}.css-transform-learn .learn-experience-stage-content:has(.css-transform-learn-scene){overflow:visible}.css-transform-learn-guidance{color:var(--cvg-ds-text-secondary);font:14px/1.5 var(--font-ui);margin:0}.css-transform-learn-stages{gap:6px;display:grid}.css-transform-learn-stages button{border:1px solid var(--cvg-ds-border);border-radius:var(--cvg-ds-radius-sm);background:var(--cvg-ds-inset);min-width:0;min-height:38px;color:var(--cvg-ds-text-primary);font:500 12px/1.35 var(--font-ui);text-align:left;cursor:pointer;align-items:center;gap:9px;padding:7px 9px;display:flex}.css-transform-learn-stages button>span{color:var(--cvg-ds-text-muted);font:11px/1 var(--font-mono)}.css-transform-learn-stages button[aria-pressed=true]{border-color:var(--cvg-ds-action);background:var(--cvg-ds-action-selected)}.css-transform-learn-stages button:focus-visible{outline:3px solid var(--cvg-ds-focus);outline-offset:2px}.css-transform-learn-scene{isolation:isolate;box-sizing:border-box;border:1px solid var(--cvg-ds-border);border-radius:var(--cvg-ds-radius-md);background:var(--cvg-ds-panel);place-items:center;width:min(100%,540px);min-width:0;min-height:278px;padding:24px;display:grid;position:relative}.css-transform-learn-reference{box-sizing:border-box;border:1px dashed var(--cvg-ds-text-muted);background:0 0;border-radius:9px;width:116px;height:64px;margin:-32px 0 0 -58px;position:absolute;top:50%;left:50%}.css-transform-learn-specimen{z-index:1;border:2px solid var(--cvg-ds-action);background:var(--cvg-ds-action-selected);width:116px;height:64px;color:var(--cvg-ds-text-primary);text-align:center;grid-area:1/1;align-content:center;justify-items:center;gap:3px;margin:0;padding:6px;display:grid;position:relative}.css-transform-learn-specimen strong{font:650 12px/1.2 var(--font-ui)}.css-transform-learn-specimen span{max-width:100%;color:var(--cvg-ds-text-secondary);font:9px/1.2 var(--font-mono)}.css-transform-learn-origin{z-index:2;border:2px solid var(--cvg-ds-panel);background:var(--cvg-ds-focus);border-radius:50%;width:12px;height:12px;position:absolute;transform:translate(-50%,-50%)}.css-transform-learn-legend{color:var(--cvg-ds-text-muted);font:10px/1.3 var(--font-mono);justify-content:space-between;gap:8px;display:flex;position:absolute;bottom:10px;left:12px;right:12px}@media (width<=760px){.css-transform-learn-scene{min-height:276px;padding:20px 12px 30px}.css-transform-learn-legend{font-size:9px}.css-transform-learn-stages{grid-template-columns:repeat(2,minmax(0,1fr))}.css-transform-learn-stages button{min-height:42px}}.css-filters-learn{min-width:0}.css-filters-learn .learn-experience-stage-content:has(.css-filters-learn-scene){overflow:visible}.css-filters-learn-guidance{color:var(--cvg-ds-text-secondary);font:14px/1.5 var(--font-ui);margin:0}.css-filters-learn-stages{gap:6px;display:grid}.css-filters-learn-stages button{border:1px solid var(--cvg-ds-border);border-radius:var(--cvg-ds-radius-sm);background:var(--cvg-ds-inset);min-width:0;min-height:38px;color:var(--cvg-ds-text-primary);font:500 12px/1.35 var(--font-ui);text-align:left;cursor:pointer;align-items:center;gap:9px;padding:7px 9px;display:flex}.css-filters-learn-stages button>span{color:var(--cvg-ds-text-muted);font:11px/1 var(--font-mono)}.css-filters-learn-stages button[aria-pressed=true]{border-color:var(--cvg-ds-action);background:var(--cvg-ds-action-selected)}.css-filters-learn-stages button:focus-visible{outline:3px solid var(--cvg-ds-focus);outline-offset:2px}.css-filters-learn-scene{box-sizing:border-box;border:1px solid var(--cvg-ds-border);border-radius:var(--cvg-ds-radius-md);background:var(--cvg-ds-panel);place-items:center;width:min(100%,520px);min-width:0;min-height:276px;padding:30px;display:grid;position:relative}.css-filters-learn-art{box-sizing:border-box;border:1px solid color-mix(in srgb, var(--cvg-ds-text-primary) 18%, transparent);color:#fff;background:linear-gradient(118deg,#bf4d37 0 25%,#386bb5 25% 51%,#268463 51% 76%,#c38b2f 76%);border-radius:14px;place-items:center;width:100%;max-width:460px;min-height:164px;padding:22px;display:grid;position:relative}.css-filters-learn-art-label{z-index:1;color:#fff;font:600 10px/1.4 var(--font-mono);text-align:center;background:#15243ccc;border:1px solid #ffffff80;border-radius:6px;padding:10px 12px;position:relative}.css-filters-learn-art>i,.css-filters-learn-art>b{background:#f3c969b8;border:2px solid #ffffffa0;border-radius:50%;width:72px;height:72px;position:absolute}.css-filters-learn-art>i{top:12px;right:12%}.css-filters-learn-art>b{background:#8053a8c9;bottom:10px;left:10%}.css-filters-learn-backdrop{border:1px solid color-mix(in srgb, var(--cvg-ds-text-primary) 18%, transparent);background:linear-gradient(118deg,#c04f38 0 24%,#386bb5 24% 51%,#268463 51% 77%,#c38b2f 77%);border-radius:13px;place-items:center;display:grid;position:absolute;inset:20px;overflow:hidden}.css-filters-learn-backdrop>span{z-index:1;color:#fff;font:600 9px/1.3 var(--font-mono);letter-spacing:.04em;background:#15243cb8;border-radius:4px;padding:5px 7px;position:relative}.css-filters-learn-backdrop>i,.css-filters-learn-backdrop>b,.css-filters-learn-backdrop>em{background:#f3c969d9;border:2px solid #ffffffa0;border-radius:50%;width:80px;height:80px;position:absolute}.css-filters-learn-backdrop>i{top:8px;right:10%}.css-filters-learn-backdrop>b{background:#8053a8e0;bottom:-24px;left:8%}.css-filters-learn-backdrop>em{background:#33a7a1e0;width:56px;height:56px;top:54%;left:47%}.css-filters-learn-glass{z-index:2;box-sizing:border-box;border:1px solid color-mix(in srgb, var(--cvg-ds-text-primary) 27%, transparent);background:color-mix(in srgb, var(--cvg-ds-panel) 70%, transparent);width:min(84%,340px);min-width:0;color:var(--cvg-ds-text-primary);text-align:center;border-radius:11px;justify-items:center;gap:7px;padding:17px 20px;display:grid;position:relative;box-shadow:0 8px 22px #101b3033}.css-filters-learn-glass>strong{font:700 11px/1.3 var(--font-mono);letter-spacing:.04em}.css-filters-learn-glass>span{color:var(--cvg-ds-text-secondary);font:12px/1.4 var(--font-ui)}.css-filters-learn-glass.is-profile{text-align:left;grid-template-columns:38px minmax(0,1fr);justify-items:start;gap:6px 11px;width:min(90%,360px);padding:14px}.css-filters-learn-avatar{color:#fff;width:38px;height:38px;font:700 12px var(--font-mono);background:linear-gradient(135deg,#e3a758,#bb634e 52%,#566ba8);border:1px solid #fffb;border-radius:50%;grid-row:span 2;place-items:center;display:grid}.css-filters-learn-glass.is-profile>div{gap:3px;min-width:0;display:grid}.css-filters-learn-glass.is-profile strong{color:var(--cvg-ds-text-primary);font:650 13px/1.3 var(--font-ui)}.css-filters-learn-glass.is-profile small{color:var(--cvg-ds-text-secondary);font:11px/1.35 var(--font-ui)}.css-filters-learn-profile-action{color:var(--cvg-ds-action);font:600 11px/1.4 var(--font-ui);grid-column:2}@media (width<=760px){.css-filters-learn-scene{min-height:260px;padding:24px}.css-filters-learn-backdrop{inset:16px}.css-filters-learn-art{min-height:148px;padding:15px}.css-filters-learn-art-label{font-size:9px}.css-filters-learn-stages{grid-template-columns:repeat(2,minmax(0,1fr))}.css-filters-learn-stages button{min-height:42px;font-size:11px}.css-filters-learn-glass{width:88%;padding:14px 12px}.css-filters-learn-glass.is-profile{width:92%;padding:11px}}.css-transitions-learn,.css-transitions-learn-guidance{min-width:0}.css-transitions-learn-guidance>p{color:var(--cvg-ds-text-secondary);font:14px/1.5 var(--font-ui);margin:0 0 12px}.css-transitions-learn-guidance>.btn{margin-bottom:12px}.css-transitions-learn-stages{gap:6px;display:grid}.css-transitions-learn-stages button{border:1px solid var(--cvg-ds-border);border-radius:var(--cvg-ds-radius-sm);background:var(--cvg-ds-inset);min-width:0;min-height:38px;color:var(--cvg-ds-text-primary);font:500 12px/1.35 var(--font-ui);text-align:left;cursor:pointer;align-items:center;gap:9px;padding:7px 9px;display:flex}.css-transitions-learn-stages button>span{color:var(--cvg-ds-text-muted);font:11px/1 var(--font-mono)}.css-transitions-learn-stages button[aria-pressed=true]{border-color:var(--cvg-ds-action);background:var(--cvg-ds-action-selected)}.css-transitions-learn-stages button:focus-visible{outline:3px solid var(--cvg-ds-focus);outline-offset:2px}.css-transitions-learn-scene{box-sizing:border-box;border:1px solid var(--cvg-ds-border);border-radius:var(--cvg-ds-radius-md);background:var(--cvg-ds-panel);place-items:center;width:min(100%,540px);min-width:0;min-height:278px;padding:26px;display:grid;position:relative}.css-transitions-learn-track{border-top:1px dashed var(--cvg-ds-border-strong,var(--cvg-ds-text-muted));height:1px;position:absolute;top:50%;left:12%;right:12%}.css-transitions-learn-track span{background:var(--cvg-ds-text-muted);border-radius:50%;width:7px;height:7px;position:absolute;top:-4px;left:0}.css-transitions-learn-specimen{z-index:1;box-sizing:border-box;color:#fff;width:166px;min-height:72px;font:650 13px/1.35 var(--font-ui);text-align:center;background:#356fc2;border:1px solid #254f8c;border-radius:10px;place-items:center;padding:12px;display:grid;position:relative}.css-transitions-learn-specimen.is-practical{cursor:pointer;width:auto;min-width:190px;box-shadow:0 5px #254f8c,0 9px 16px #192d4c2e}.css-transitions-learn-specimen.is-practical:hover,.css-transitions-learn-specimen.is-practical:focus-visible{transform:translateY(-8px)!important;box-shadow:0 10px #254f8c,0 16px 22px #192d4c3d!important}.css-transitions-learn-specimen.is-practical span{margin-left:8px;font-size:17px}.css-transitions-learn-observation{color:var(--cvg-ds-text-muted);font:11px/1.4 var(--font-mono);text-align:center;margin:0;position:absolute;bottom:10px;left:12px;right:12px}@media (prefers-reduced-motion:reduce){.css-transitions-learn-specimen{transition-duration:.01ms!important;transition-delay:0s!important}}@media (width<=760px){.css-transitions-learn-scene{min-height:260px;padding:20px 12px 34px}.css-transitions-learn-stages{grid-template-columns:repeat(2,minmax(0,1fr))}.css-transitions-learn-stages button{min-height:42px;font-size:11px}}.css-animations-learn{min-width:0}.css-animations-learn-guidance{color:var(--cvg-ds-text-secondary);font:14px/1.5 var(--font-ui);margin:0 0 12px}.css-animations-learn-actions{flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 12px;display:flex}.css-animations-learn-actions .btn{min-height:38px}.css-animations-learn-play-status{color:var(--cvg-ds-text-muted);font:12px/1.4 var(--font-ui)}.css-animations-learn-stages{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;display:grid}.css-animations-learn-stages button{border:1px solid var(--cvg-ds-border);border-radius:var(--cvg-ds-radius-sm);background:var(--cvg-ds-inset);min-width:0;min-height:38px;color:var(--cvg-ds-text-primary);font:500 12px/1.35 var(--font-ui);text-align:left;cursor:pointer;align-items:center;gap:8px;padding:7px 8px;display:flex}.css-animations-learn-stages button>span{color:var(--cvg-ds-text-muted);font:11px/1 var(--font-mono)}.css-animations-learn-stages button[aria-pressed=true]{border-color:var(--cvg-ds-action);background:var(--cvg-ds-action-selected)}.css-animations-learn-stages button:focus-visible,.css-animations-learn-actions button:focus-visible{outline:3px solid var(--cvg-ds-focus);outline-offset:2px}.css-animations-learn-scene{box-sizing:border-box;border:1px solid var(--cvg-ds-border);border-radius:var(--cvg-ds-radius-md);background:var(--cvg-ds-panel);place-items:center;width:min(100%,540px);min-width:0;min-height:278px;padding:24px;display:grid;position:relative;overflow:hidden}.css-animations-learn-track{border-top:1px dashed var(--cvg-ds-border-strong);color:var(--cvg-ds-text-muted);font:10px/1 var(--font-mono);justify-content:space-between;display:flex;position:absolute;top:50%;left:16%;right:16%}.css-animations-learn-track span{background:var(--cvg-ds-panel);padding:4px;position:relative;top:-17px}.css-animations-learn-specimen{z-index:1;box-sizing:border-box;color:#fff;width:166px;min-height:72px;font:650 13px/1.35 var(--font-ui);text-align:center;background:#356fc2;border:1px solid #254f8c;border-radius:10px;place-items:center;padding:12px;display:grid;position:relative;transform:translate(-34px)rotate(-4deg);box-shadow:0 5px #254f8c,0 10px 22px #192d4c33}.css-animations-learn-observation{color:var(--cvg-ds-text-muted);font:11px/1.4 var(--font-mono);text-align:center;margin:0;position:absolute;bottom:10px;left:12px;right:12px}@keyframes cvg-animations-learn-traverse{0%{transform:translate(-34px)rotate(-4deg)}50%{transform:translate(0)translateY(-18px)rotate(0)}to{transform:translate(34px)rotate(8deg)}}@media (prefers-reduced-motion:reduce){.css-animations-learn-specimen{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important}}@media (width<=760px){.css-animations-learn-scene{min-height:250px;padding:20px 12px 32px}.css-animations-learn-stages button{min-height:42px;font-size:11px}}.css-media-queries-learn{min-width:0}.css-media-queries-learn .learn-experience-stage{align-self:center}.css-media-queries-learn .css-media-queries-learn-visual{width:100%;min-width:0}.css-media-queries-learn .css-media-queries-learn-canvas{border:1px solid var(--cvg-ds-border);background:var(--cvg-ds-inset);scrollbar-color:var(--cvg-ds-border-strong) transparent;border-radius:8px;width:100%;max-width:100%;overflow:auto hidden}.css-media-queries-learn .css-media-queries-learn-canvas:focus-visible{outline:2px solid var(--cvg-ds-focus);outline-offset:2px}.css-media-queries-learn .css-media-queries-learn-canvas iframe{background:var(--cvg-ds-inset);border:0;max-width:none;height:500px;margin-inline:auto;display:block}.css-media-queries-learn .css-media-queries-learn-frame-note{color:var(--cvg-ds-text-muted);font:10px/1.4 var(--font-mono);margin-top:6px}.css-media-queries-learn .css-media-queries-learn-guidance{color:var(--cvg-ds-text-secondary);font-size:var(--cvg-ds-type-body);margin:0 0 10px;line-height:1.5}.css-media-queries-learn .css-media-queries-learn-query{border:1px solid var(--cvg-ds-border);background:var(--cvg-ds-inset);border-radius:6px;gap:5px;min-width:0;margin:0 0 10px;padding:8px 10px;display:grid}.css-media-queries-learn .css-media-queries-learn-query span{color:var(--cvg-ds-text-muted);font:9px/1.3 var(--font-mono);letter-spacing:.07em}.css-media-queries-learn .css-media-queries-learn-query code{overflow-wrap:anywhere;color:var(--cvg-ds-action);font:11px/1.5 var(--font-mono)}.css-media-queries-learn .css-media-queries-learn-readout{min-width:0;color:var(--cvg-ds-text-secondary);font-size:var(--cvg-ds-type-caption);gap:3px;margin-bottom:10px;line-height:1.45;display:grid}.css-media-queries-learn .css-media-queries-learn-readout strong{color:var(--cvg-ds-text-primary);font-variant-numeric:tabular-nums;font-weight:650}.css-media-queries-learn .css-media-queries-learn-width-control{min-width:0;color:var(--cvg-ds-text-secondary);font-size:var(--cvg-ds-type-caption);gap:5px;margin:0 0 9px;display:grid}.css-media-queries-learn .css-media-queries-learn-width-control span{justify-content:space-between;gap:8px;display:flex}.css-media-queries-learn .css-media-queries-learn-width-control b{color:var(--cvg-ds-text-primary);font-variant-numeric:tabular-nums}.css-media-queries-learn .css-media-queries-learn-width-control input{width:100%;accent-color:var(--cvg-ds-action)}.css-media-queries-learn .css-media-queries-learn-presets,.css-media-queries-learn .css-media-queries-learn-stages{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;min-width:0;margin-top:8px;display:grid}.css-media-queries-learn .css-media-queries-learn-stages{grid-template-columns:repeat(2,minmax(0,1fr))}.css-media-queries-learn :is(.css-media-queries-learn-presets,.css-media-queries-learn-stages) button{min-width:0;min-height:34px;color:var(--cvg-ds-text-secondary);border:1px solid var(--cvg-ds-border);background:var(--cvg-ds-inset);text-align:left;font:500 11px/1.25 var(--font-ui);cursor:pointer;border-radius:5px;align-items:center;gap:6px;padding:6px 7px;display:flex}.css-media-queries-learn .css-media-queries-learn-presets button{font-family:var(--font-mono);font-variant-numeric:tabular-nums;justify-content:center;font-size:10px}.css-media-queries-learn .css-media-queries-learn-stages button span{color:var(--cvg-ds-text-muted);font:10px var(--font-mono);flex:none}.css-media-queries-learn :is(.css-media-queries-learn-presets,.css-media-queries-learn-stages) button[aria-pressed=true]{color:var(--cvg-ds-text-primary);border-color:var(--cvg-ds-action);background:var(--cvg-ds-action-selected)}.css-media-queries-learn :is(button,input):focus-visible{outline:2px solid var(--cvg-ds-focus);outline-offset:2px}@media (width<=520px){.css-media-queries-learn .css-media-queries-learn-stages{grid-template-columns:minmax(0,1fr)}}.css-responsive-units-learn-demo{gap:12px;width:100%;min-width:0;display:grid}.css-responsive-units-learn-viewport-caption{color:var(--cvg-ds-text-secondary);font:550 12px/1.4 var(--font-mono);overflow-wrap:anywhere}.css-responsive-units-learn-canvas{overscroll-behavior-inline:contain;width:100%;min-width:0;overflow-x:auto}.css-responsive-units-learn-basis{min-width:0;max-width:100%}.css-responsive-units-learn-sample{overflow-wrap:anywhere;word-break:normal}.css-responsive-units-learn-sample-secondary{flex:none}.css-responsive-units-learn-facts{grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:8px;min-width:0;display:grid}.css-responsive-units-learn-facts>div{border:1px solid var(--cvg-ds-border);border-radius:var(--cvg-ds-radius-sm);background:var(--cvg-ds-inset);align-content:start;gap:5px;min-width:0;padding:9px 10px;display:grid}.css-responsive-units-learn-facts span{color:var(--cvg-ds-text-muted);font:650 10px/1.3 var(--font-ui);letter-spacing:.045em}.css-responsive-units-learn-facts strong{min-width:0;color:var(--cvg-ds-text-primary);font:550 12px/1.45 var(--font-mono);overflow-wrap:anywhere;word-break:normal}.css-responsive-units-learn-resolved strong+strong{margin-top:2px}.css-responsive-units-learn-basis-presets{min-width:0;color:var(--cvg-ds-text-secondary);font:12px/1.4 var(--font-ui);flex-wrap:wrap;align-items:center;gap:7px;display:flex}.css-responsive-units-learn-basis-presets>span{flex:100%}.css-responsive-units-learn-basis-presets button,.css-responsive-units-learn-stages button{border:1px solid var(--cvg-ds-border);border-radius:var(--cvg-ds-radius-sm);background:var(--cvg-ds-inset);min-width:0;color:var(--cvg-ds-text-primary);font:550 12px/1.35 var(--font-ui);cursor:pointer}.css-responsive-units-learn-basis-presets button{flex:100px;min-height:36px;padding:7px 9px}.css-responsive-units-learn-stages{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;min-width:0;display:grid}.css-responsive-units-learn-stages button{text-align:left;overflow-wrap:anywhere;align-items:center;gap:7px;min-height:38px;padding:6px 8px;display:flex}.css-responsive-units-learn-stages button>span{color:var(--cvg-ds-text-muted);font:10px/1 var(--font-mono);flex:none}.css-responsive-units-learn-stages button[aria-pressed=true],.css-responsive-units-learn-basis-presets button[aria-pressed=true]{border-color:var(--cvg-ds-action);background:var(--cvg-ds-action-selected)}.css-responsive-units-learn-stages button:focus-visible,.css-responsive-units-learn-basis-presets button:focus-visible{outline:3px solid var(--cvg-ds-focus);outline-offset:2px}.css-responsive-units-learn-guidance{min-width:0}.css-responsive-units-learn-guidance p{color:var(--cvg-ds-text-secondary);margin:0 0 11px}@media (width<=520px){.css-responsive-units-learn-demo{gap:9px}.css-responsive-units-learn-facts{grid-template-columns:minmax(0,1fr)}.css-responsive-units-learn-facts>div{padding:8px}.css-responsive-units-learn-facts strong{font-size:11px}.css-responsive-units-learn-stages{gap:6px}.css-responsive-units-learn-stages button{gap:5px;padding-inline:6px;font-size:11px}}.css-container-queries-learn{width:100%;min-width:0}.css-container-queries-learn-demo{gap:11px;width:100%;min-width:0;display:grid}.css-container-queries-learn-viewport-note{color:var(--cvg-ds-text-muted);font:550 11px/1.4 var(--font-mono)}.css-container-queries-learn-canvas{overscroll-behavior:contain;border:1px solid var(--cvg-ds-border);border-radius:var(--radius-sm);background:var(--cvg-ds-inset);place-items:center;min-width:0;min-height:184px;padding:14px;display:grid;overflow:auto}.css-container-queries-learn-scene{width:max(100%,520px);min-width:0}.css-container-queries-learn-width-control{min-width:0;color:var(--cvg-ds-text-secondary);font:550 12px/1.4 var(--font-ui);gap:6px;display:grid}.css-container-queries-learn-width-control span{flex-wrap:wrap;justify-content:space-between;gap:4px 12px;display:flex}.css-container-queries-learn-width-control b{color:var(--cvg-ds-text-primary);font:600 12px/1.4 var(--font-mono)}.css-container-queries-learn-width-control input{width:100%;accent-color:var(--cvg-ds-action)}.css-container-queries-learn-presets{flex-wrap:wrap;gap:7px;display:flex}.css-container-queries-learn-presets button,.css-container-queries-learn-stages button{border:1px solid var(--cvg-ds-border);border-radius:var(--radius-sm);background:var(--cvg-ds-inset);min-width:0;color:var(--cvg-ds-text-primary);font:550 12px/1.35 var(--font-ui);cursor:pointer}.css-container-queries-learn-presets button{flex:80px;min-height:36px;padding:7px 10px}.css-container-queries-learn-presets button[aria-pressed=true],.css-container-queries-learn-stages button[aria-pressed=true]{border-color:var(--cvg-ds-action);background:var(--cvg-ds-action-selected)}.css-container-queries-learn-presets button:focus-visible,.css-container-queries-learn-stages button:focus-visible{outline:3px solid var(--cvg-ds-focus);outline-offset:2px}.css-container-queries-learn-readouts{grid-template-columns:repeat(auto-fit,minmax(min(100%,205px),1fr));gap:8px;min-width:0;display:grid}.css-container-queries-learn-readouts>div{border:1px solid var(--cvg-ds-border);border-radius:var(--radius-sm);background:var(--cvg-ds-inset);align-content:start;gap:5px;min-width:0;padding:9px 10px;display:grid}.css-container-queries-learn-readouts span{color:var(--cvg-ds-text-muted);font:650 10px/1.3 var(--font-ui);letter-spacing:.045em}.css-container-queries-learn-readouts strong{min-width:0;color:var(--cvg-ds-text-primary);font:550 11px/1.45 var(--font-mono);overflow-wrap:anywhere}.css-container-queries-learn-guidance{min-width:0}.css-container-queries-learn-guidance p{color:var(--cvg-ds-text-secondary);margin:0 0 11px}.css-container-queries-learn-stages{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;min-width:0;display:grid}.css-container-queries-learn-stages button{text-align:left;overflow-wrap:anywhere;align-items:center;gap:7px;min-height:38px;padding:6px 8px;display:flex}.css-container-queries-learn-stages button>span{color:var(--cvg-ds-text-muted);font:10px/1 var(--font-mono);flex:none}@media (width<=760px){.css-container-queries-learn-canvas{justify-items:start;min-height:160px;padding:10px}.css-container-queries-learn-readouts{grid-template-columns:minmax(0,1fr)}.css-container-queries-learn-stages{gap:6px}.css-container-queries-learn-stages button{gap:5px;padding-inline:6px;font-size:11px}}.app:not(.is-playground) .main .js-topic-page{min-width:0;color:var(--cvg-ds-text-primary);padding:0 24px 24px}.js-topic-heading{justify-content:space-between;align-items:flex-start;gap:20px;min-width:0;margin:0 0 18px;display:flex}.js-topic-heading>div{min-width:0}.js-topic-heading>div>span{color:var(--cvg-ds-text-muted);font:600 11px/1.4 var(--font-ui);letter-spacing:.08em}.js-topic-heading h1{color:var(--cvg-ds-text-primary);font:650 clamp(24px, 3vw, 34px)/1.15 var(--font-ui);margin:5px 0 6px}.js-topic-heading p{max-width:68ch;color:var(--cvg-ds-text-secondary);margin:0;line-height:1.55}.js-topic-heading>.btn{flex:none}.app:not(.is-playground) .main .js-reference-workspace{box-sizing:border-box;grid-template-columns:minmax(0,1.5fr) minmax(320px,.9fr);align-items:start;gap:14px;min-width:0;padding:38px 0 18px;display:grid}.js-reference-primary,.js-reference-support,.js-reference-examples,.js-result,.js-code-panel,.js-run-card,.js-output,.js-docs,.js-example-picker{min-width:0}.js-reference-primary{align-content:start;gap:14px;display:grid}.js-reference-support{align-content:start;gap:12px;display:grid}.js-result,.js-code-panel,.js-run-card,.js-output,.js-docs{padding:16px}.js-result h2,.js-panel-heading h2,.js-docs h2,.js-example-picker h2{color:var(--cvg-ds-text-primary);font:600 15px/1.35 var(--font-ui);margin:0}.js-panel-heading{justify-content:space-between;align-items:center;gap:12px;min-width:0;display:flex}.js-panel-heading>span{color:var(--cvg-ds-text-muted);font-size:12px}.js-code-panel{overflow:hidden}.js-code-surface{border:1px solid var(--cvg-ds-border);background:var(--cvg-ds-inset);max-width:100%;max-height:440px;color:var(--cvg-ds-text-primary);font:13px/1.65 var(--font-mono);tab-size:2;border-radius:8px;margin:12px 0 8px;padding:12px 0;overflow:auto}.js-code-line{white-space:pre;grid-template-columns:42px minmax(0,1fr);min-width:0;padding-right:12px;display:grid}.js-line-number{color:var(--cvg-ds-text-muted);text-align:right;-webkit-user-select:none;user-select:none;padding-right:12px}.js-reviewed-note{color:var(--cvg-ds-text-muted);margin:0;font-size:12px}.js-code-panel .code-copy-btn{min-height:32px;color:var(--cvg-ds-text-secondary);background:var(--cvg-ds-panel);border:1px solid var(--cvg-ds-border);cursor:pointer;border-radius:7px;align-items:center;gap:6px;padding:4px 9px;display:inline-flex}.js-run-card>p{color:var(--cvg-ds-text-secondary);margin:0 0 12px;line-height:1.5}.js-run-controls{flex-wrap:wrap;gap:8px;display:flex}.js-run-controls .btn{min-width:0}.js-output-empty{color:var(--cvg-ds-text-muted);margin:12px 0 0;font-size:13px;line-height:1.5}.js-output-list{gap:7px;max-height:300px;margin:12px 0 0;padding:0;list-style:none;display:grid;overflow:auto}.js-output-entry{border:1px solid var(--cvg-ds-border);background:var(--cvg-ds-inset);border-radius:7px;grid-template-columns:100px minmax(0,1fr);gap:8px;min-width:0;padding:8px 9px;display:grid}.js-output-entry>span{color:var(--cvg-ds-text-muted);font:600 11px/1.5 var(--font-ui);text-transform:uppercase}.js-output-entry code{overflow-wrap:anywhere;min-width:0;color:var(--cvg-ds-text-primary);font:12px/1.5 var(--font-mono)}.js-output-entry.is-runtime-error code,.js-output-entry.is-unhandled-rejection code{color:var(--cvg-ds-error)}.js-docs p{color:var(--cvg-ds-text-secondary);margin:10px 0 0;font-size:13px;line-height:1.55}.js-docs h3{color:var(--cvg-ds-text-primary);font:600 13px/1.4 var(--font-ui);margin:14px 0 0}.js-docs pre{border:1px solid var(--cvg-ds-border);max-width:100%;color:var(--cvg-ds-text-primary);background:var(--cvg-ds-inset);font:11px/1.55 var(--font-mono);white-space:pre-wrap;overflow-wrap:anywhere;border-radius:7px;margin:8px 0 0;padding:10px;overflow:auto}.js-docs ul{color:var(--cvg-ds-text-secondary);gap:8px;margin:8px 0 0;padding-inline-start:18px;font-size:12px;line-height:1.5;display:grid}.js-reference-examples{padding:0 0 18px}.js-example-picker{border:1px solid var(--cvg-ds-border);background:var(--cvg-ds-panel);border-radius:10px;padding:14px}.js-example-list{gap:7px;max-height:330px;margin-top:10px;display:grid;overflow:auto}.js-example-list button{border:1px solid var(--cvg-ds-border);min-width:0;color:var(--cvg-ds-text-secondary);background:var(--cvg-ds-panel);text-align:left;cursor:pointer;border-radius:8px;gap:3px;padding:9px 10px;display:grid}.js-example-list button strong{color:var(--cvg-ds-text-primary);font:600 13px/1.4 var(--font-ui)}.js-example-list button span{color:var(--cvg-ds-text-secondary);font:12px/1.45 var(--font-ui)}.js-example-list button:hover,.js-example-list button.is-selected{border-color:var(--cvg-ds-action);background:var(--cvg-ds-action-selected)}.js-example-picker>p{color:var(--cvg-ds-text-muted);margin:9px 0 0;font-size:11px;line-height:1.45}.js-array-transformation{border:1px solid var(--cvg-ds-demo-border);min-width:0;color:var(--cvg-ds-demo-text);background:var(--cvg-ds-demo);border-radius:10px;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:14px;margin-top:12px;padding:16px;display:grid}.js-array-lane{align-content:start;gap:9px;min-width:0;display:grid}.js-array-lane>strong{font:600 12px/1.4 var(--font-ui)}.js-array-lane>div{flex-wrap:wrap;gap:6px;min-width:0;display:flex}.js-array-lane>div>span{border:1px solid var(--cvg-ds-demo-border);min-width:38px;min-height:38px;color:var(--cvg-ds-demo-text);background:var(--cvg-ds-demo-card);font:600 13px/1 var(--font-mono);border-radius:8px;place-items:center;padding:5px 8px;display:grid}.js-array-lane.is-output>div>span{background:color-mix(in srgb, var(--cvg-ds-demo-item) 20%, var(--cvg-ds-demo-card))}.js-array-arrow{color:var(--cvg-ds-action);font-size:22px}.js-array-transformation>p{color:var(--cvg-ds-text-secondary);grid-column:1/-1;margin:0;font-size:12px}.js-values-visual{border:1px solid var(--cvg-ds-demo-border);background:var(--cvg-ds-demo);border-radius:10px;grid-template-columns:minmax(0,1fr) auto minmax(0,1.2fr);align-items:center;gap:12px;padding:20px;display:grid}.js-binding-card{border:1px solid var(--cvg-ds-demo-border);background:var(--cvg-ds-demo-card);border-radius:9px;gap:8px;min-width:0;padding:14px;display:grid}.js-binding-card>span{color:var(--cvg-ds-text-muted);text-transform:uppercase;font-size:11px}.js-binding-card>strong{overflow-wrap:anywhere;color:var(--cvg-ds-demo-text);font:650 15px/1.4 var(--font-mono)}.js-binding-arrow{color:var(--cvg-ds-action);font-size:20px}.js-values-visual>p{color:var(--cvg-ds-text-secondary);grid-column:1/-1;margin:0;font-size:12px}.js-concept-visual{border:1px solid var(--cvg-ds-demo-border);min-width:0;min-height:176px;color:var(--cvg-ds-demo-text);background:var(--cvg-ds-demo);border-radius:10px;align-content:center;gap:12px;padding:18px;display:grid}.js-concept-visual>strong{color:var(--cvg-ds-text-primary);font:650 14px/1.4 var(--font-ui)}.js-concept-visual p{border:1px solid var(--cvg-ds-demo-border);background:var(--cvg-ds-demo-card);border-radius:8px;justify-content:space-between;align-items:center;gap:12px;min-width:0;margin:0;padding:9px 10px;display:flex}.js-concept-visual p b{text-align:right}.js-concept-visual code{overflow-wrap:anywhere;font:12px/1.5 var(--font-mono)}.js-concept-visual small{color:var(--cvg-ds-text-muted);font-size:11px}.js-concept-visual dl{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:5px 12px;margin:0;display:grid}.js-concept-visual dt{overflow-wrap:anywhere;color:var(--cvg-ds-text-secondary);font:12px/1.45 var(--font-mono)}.js-concept-visual dd{color:var(--cvg-ds-text-primary);margin:0;font-size:12px}.js-value-pairs{grid-template-columns:repeat(auto-fit,minmax(125px,1fr));gap:7px;display:grid}.js-value-pairs>span{border:1px solid var(--cvg-ds-demo-border);background:var(--cvg-ds-demo-card);border-radius:7px;justify-content:space-between;gap:8px;padding:8px;display:flex}.js-iteration-track{flex-wrap:wrap;align-items:center;gap:7px;display:flex}.js-iteration-track>*{border:1px solid var(--cvg-ds-demo-border);min-height:38px;color:var(--cvg-ds-demo-text);background:var(--cvg-ds-demo-card);font:600 12px/1.4 var(--font-mono);border-radius:8px;place-items:center;padding:7px 10px;display:grid}.js-selected-outcome{border-inline-start:3px solid var(--cvg-ds-action);color:var(--cvg-ds-text-primary);background:var(--cvg-ds-action-selected);border-radius:6px;padding:12px;font-weight:650}.js-flow-row{text-align:center;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px;display:grid}.js-flow-row>span{border:1px solid var(--cvg-ds-demo-border);background:var(--cvg-ds-demo-card);border-radius:8px;padding:9px;font-size:11px}.js-flow-row code{font-size:10px}.js-event-loop-steps{color:var(--cvg-ds-text-primary);gap:7px;margin:0;padding-inline-start:25px;display:grid}.js-event-loop-steps li{border:1px solid var(--cvg-ds-demo-border);background:var(--cvg-ds-demo-card);border-radius:8px;justify-content:space-between;align-items:baseline;gap:10px;min-width:0;padding:8px 10px;font-size:12px;line-height:1.4;display:flex}.js-event-loop-steps li b{flex:none}.js-event-loop-steps li span{min-width:0;color:var(--cvg-ds-text-secondary);text-align:right;overflow-wrap:anywhere}.js-iteration-track>.js-fetch-arrow{color:var(--cvg-ds-action);background:0 0;border:0;align-self:center;padding-inline:0}.js-scope-stack{justify-items:center;gap:7px;display:grid}.js-scope-stack>span{border:1px solid var(--cvg-ds-demo-border);background:var(--cvg-ds-demo-card);text-align:center;width:min(100%,430px);font:12px/1.4 var(--font-mono);border-radius:8px;padding:10px}.js-scope-stack>span:first-child{width:min(85%,360px)}.js-scope-binding{border:1px solid var(--cvg-ds-demo-border);background:var(--cvg-ds-demo-card);border-radius:8px;justify-content:space-between;gap:12px;padding:12px;display:flex}.js-array-indexed{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;display:grid}.js-array-indexed>span{border:1px solid var(--cvg-ds-demo-border);background:var(--cvg-ds-demo-card);text-align:center;border-radius:8px;gap:7px;min-width:0;padding:9px;display:grid}.js-array-indexed small{color:var(--cvg-ds-text-muted);font:11px/1.3 var(--font-mono)}.js-object-card{gap:6px;display:grid}.js-object-card>span{border:1px solid var(--cvg-ds-demo-border);background:var(--cvg-ds-demo-card);border-radius:7px;justify-content:space-between;gap:10px;min-width:0;padding:8px 10px;display:flex}.js-object-card b{overflow-wrap:anywhere;text-align:right}.js-copy-columns{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;display:grid}.js-copy-columns>div{border:1px solid var(--cvg-ds-demo-border);background:var(--cvg-ds-demo-card);border-radius:8px;gap:6px;min-width:0;padding:9px;display:grid}.js-copy-columns code{overflow-wrap:anywhere}.js-nullish-table{font:11px/1.4 var(--font-mono);grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;display:grid}.js-nullish-table>*{overflow-wrap:anywhere;border:1px solid var(--cvg-ds-demo-border);background:var(--cvg-ds-demo-card);text-align:center;border-radius:6px;min-width:0;padding:7px 5px}.js-error-path{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px;display:grid}.js-error-path>span{overflow-wrap:anywhere;border:1px solid var(--cvg-ds-demo-border);background:var(--cvg-ds-demo-card);text-align:center;border-radius:8px;min-width:0;padding:10px;font-size:12px}.js-error-path>span:last-child{border-inline-start:3px solid var(--cvg-ds-error)}.js-event-visual{gap:8px;min-width:0;display:grid}.js-dom-result{min-width:0;color:var(--cvg-ds-text-secondary);gap:9px;font-size:12px;display:grid}.js-event-visual>p{color:var(--cvg-ds-text-secondary);margin:0;font-size:12px}.js-event-current-result{border:1px solid var(--cvg-ds-border);overflow-wrap:anywhere;background:var(--cvg-ds-inset);border-radius:7px;min-height:40px;padding:10px;color:var(--cvg-ds-text-primary)!important}.js-runner-bin{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}.js-topic-page .learn-experience{min-width:0}.js-learn-visual,.js-learn-guidance{gap:12px;min-width:0;display:grid}.js-learn-guidance>p{color:var(--cvg-ds-text-secondary);margin:0;line-height:1.55}.js-learn-visual .js-array-transformation{margin:0}.js-topic-page :is(button,a):focus-visible{outline:3px solid var(--cvg-ds-action);outline-offset:3px}@media (width<=1200px){.app:not(.is-playground) .main .js-reference-workspace{grid-template-columns:minmax(0,1fr)}}@media (width<=700px){.app:not(.is-playground) .main .js-topic-page{padding:0 14px 18px}.js-topic-heading{flex-direction:column;gap:12px}.js-topic-heading h1{font-size:26px}.js-topic-heading>.btn{align-self:flex-start}.js-array-transformation{grid-template-columns:minmax(0,1fr);gap:10px;padding:12px}.js-array-arrow{justify-self:center;transform:rotate(90deg)}.js-array-transformation>p{grid-column:auto}.js-values-visual{grid-template-columns:minmax(0,1fr);padding:14px}.js-binding-arrow{justify-self:center;transform:rotate(90deg)}.js-values-visual>p{grid-column:auto}.js-concept-visual{padding:13px}.js-flow-row{grid-template-columns:minmax(0,1fr)}.js-flow-row>b{transform:rotate(90deg)}.js-output-entry{grid-template-columns:82px minmax(0,1fr)}}.ts-topic-page{min-width:0;color:var(--text-primary);gap:18px;display:grid}.ts-topic-heading{justify-content:space-between;align-items:center;gap:18px;min-width:0;display:flex}.ts-topic-heading span{color:var(--text-muted);letter-spacing:.08em;font-size:.72rem;font-weight:750}.ts-topic-heading h1{margin:5px 0;font-size:clamp(1.5rem,2.2vw,2rem)}.ts-topic-heading p{max-width:68ch;color:var(--text-secondary);margin:0}.ts-reference-workspace{grid-template-columns:minmax(0,1.5fr) minmax(300px,.8fr);align-items:start;gap:16px;min-width:0;display:grid}.ts-primary,.ts-support,.ts-type-panel{gap:14px;min-width:0;display:grid}.ts-support{align-content:start}.ts-panel,.ts-diagnostics,.ts-observations,.ts-output,.ts-example-picker{border:1px solid var(--border-subtle);border-radius:var(--radius-md,12px);background:var(--surface-raised);min-width:0;color:var(--text-primary);padding:16px}.ts-panel h2,.ts-diagnostics h2,.ts-observations h2,.ts-output h2,.ts-example-picker h2{margin:0;font-size:1rem}.ts-panel-heading{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;margin-bottom:12px;display:flex}.ts-panel-heading>span{color:var(--text-muted);font-size:.78rem}.ts-code{background:var(--surface-code,#111827);color:#e5e7eb;tab-size:2;border-radius:8px;max-width:100%;margin:0;font:.86rem/1.65 ui-monospace,SFMono-Regular,Consolas,monospace;overflow:auto}.ts-code code{min-width:max-content;padding:12px 0;display:block}.ts-code-line{white-space:pre;grid-template-columns:3.1em minmax(0,1fr);padding-right:14px;display:grid}.ts-line-number{color:#94a3b8;text-align:right;-webkit-user-select:none;user-select:none;padding-right:10px}.ts-line-source{border-left:2px solid #0000;padding-left:10px}.ts-code-line.has-diagnostic .ts-line-source{text-underline-offset:4px;background:#f871711a;border-left-color:#f87171;-webkit-text-decoration:underline wavy #f87171;text-decoration:underline wavy #f87171}.ts-token-keyword{color:#c4b5fd}.ts-token-dom-type{color:#7dd3fc}.ts-token-string{color:#86efac}.ts-token-number{color:#fcd34d}.ts-token-null{color:#fda4af}.ts-token-operator{color:#f0abfc}.ts-diagnostics{border-left:4px solid #16805d}.ts-diagnostics.has-errors{border-left-color:#c2413b}.ts-status-label{background:color-mix(in srgb, #16805d 14%, var(--surface-raised));border-radius:999px;padding:4px 8px;font-size:.72rem;font-weight:800}.ts-diagnostics.has-errors .ts-status-label{background:color-mix(in srgb, #c2413b 14%, var(--surface-raised))}.ts-diagnostics ul{gap:12px;margin:12px 0 0;padding:0;list-style:none;display:grid}.ts-diagnostics li{border-top:1px solid var(--border-subtle);grid-template-columns:auto auto 1fr;align-items:baseline;gap:8px;padding-top:10px;display:grid}.ts-diagnostics li>strong{font-family:ui-monospace,monospace}.ts-diagnostic-category{text-transform:uppercase;font-size:.7rem;font-weight:750}.ts-diagnostics li>span:last-of-type{color:var(--text-muted);text-align:right;font-size:.78rem}.ts-diagnostics li p{overflow-wrap:anywhere;grid-column:1/-1;margin:0}.ts-expected-note{margin:12px 0 0;font-size:.88rem}.ts-observation{flex-wrap:wrap;align-items:center;gap:10px;margin-top:10px;display:flex}.ts-observation code{overflow-wrap:anywhere}.ts-observation strong{border:1px solid var(--border-subtle);border-radius:7px;padding:4px 8px}.ts-output ol{gap:8px;padding-left:22px;display:grid}.ts-output li{overflow-wrap:anywhere}.ts-output li span{margin-right:8px;font-size:.72rem;font-weight:750}.ts-output p,.ts-notes p,.ts-example-picker>p{color:var(--text-secondary)}.ts-notes ul{color:var(--text-secondary);gap:8px;padding-left:20px;display:grid}.ts-notes li{padding-left:2px}.ts-notes a{width:fit-content;color:var(--accent-primary);font-weight:650}.ts-example-picker>div{gap:8px;margin-top:10px;display:grid}.ts-example-picker button{border:1px solid var(--border-subtle);background:var(--surface-base);min-width:0;color:inherit;text-align:left;cursor:pointer;border-radius:8px;gap:4px;padding:10px;display:grid}.ts-example-picker button[aria-pressed=true]{border-color:var(--accent-primary);box-shadow:inset 3px 0 var(--accent-primary)}.ts-example-picker button span{color:var(--text-secondary);font-size:.82rem}.ts-actions{flex-wrap:wrap;gap:8px;display:flex}.ts-flow{border:1px solid var(--border-subtle);background:var(--surface-raised);border-radius:12px;grid-template-columns:minmax(0,1fr);justify-items:stretch;gap:7px;padding:14px;display:grid}.ts-flow>div{border:1px solid var(--border-subtle);background:var(--surface-base);border-radius:8px;gap:3px;padding:10px 12px;display:grid}.ts-flow>div span{color:var(--text-muted);letter-spacing:.06em;font-size:.68rem;font-weight:800}.ts-flow>div small{color:var(--text-secondary)}.ts-flow>i{color:var(--text-muted);text-align:center;font-style:normal}.ts-topic-page .learn-experience{min-width:0}.ts-topic-page .learn-experience-stage-content{gap:14px;min-width:0;display:grid}.ts-topic-page .js-sandbox-fixture,.ts-topic-page .js-sandbox-frame{background:#fff;border-radius:8px;max-width:100%}@media (width<=1200px){.ts-reference-workspace{grid-template-columns:minmax(0,1fr)}}@media (width<=640px){.ts-topic-page{gap:14px}.ts-topic-heading{align-items:flex-start}.ts-panel,.ts-diagnostics,.ts-observations,.ts-output,.ts-example-picker{padding:13px}.ts-diagnostics li{grid-template-columns:auto 1fr}.ts-diagnostics li>span:last-of-type{text-align:left;grid-column:1/-1}.ts-actions{grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.ts-actions .btn{white-space:normal;min-width:0}.ts-actions .btn:last-child{grid-column:1/-1}}:root{--cvg-gray-950:oklch(14% .025 255);--cvg-gray-900:oklch(18% .028 255);--cvg-gray-850:oklch(21% .03 255);--cvg-gray-800:oklch(25% .035 255);--cvg-gray-700:oklch(34% .04 255);--cvg-gray-600:oklch(47% .035 255);--cvg-gray-400:oklch(63% .025 255);--cvg-gray-300:oklch(75% .02 255);--cvg-gray-200:oklch(87% .015 255);--cvg-gray-100:oklch(96% .01 255);--cvg-violet-500:oklch(58% .21 285);--cvg-violet-400:oklch(66% .19 285);--cvg-violet-300:oklch(74% .15 285);--cvg-green-400:oklch(75% .17 155);--cvg-yellow-400:oklch(80% .16 85);--cvg-red-400:oklch(68% .19 25);--cvg-blue-400:oklch(70% .14 245);--surface-canvas:var(--cvg-gray-950);--surface-panel:var(--cvg-gray-900);--surface-raised:var(--cvg-gray-850);--surface-hover:var(--cvg-gray-800);--surface-active:var(--cvg-gray-700);--surface:var(--surface-panel);--text-primary:var(--cvg-gray-100);--text-secondary:var(--cvg-gray-400);--text-muted:var(--cvg-gray-600);--text-on-accent:oklch(98% .002 285);--border-subtle:var(--cvg-gray-800);--border-default:var(--cvg-gray-700);--border-strong:var(--cvg-gray-600);--accent:var(--cvg-violet-500);--accent-hover:var(--cvg-violet-400);--accent-subtle-bg:oklch(58% .21 285/.16);--focus-ring:var(--cvg-violet-300);--status-success:var(--cvg-green-400);--status-warning:var(--cvg-yellow-400);--status-error:var(--cvg-red-400);--status-info:var(--cvg-blue-400);--lang-css:oklch(70% .14 245);--text:var(--text-primary);--border:var(--border-default);--accent-green:var(--status-success);--accent-blue:var(--status-info);--preview-bg:#f4f7fb;--preview-text:#17253b;--editor-bg:#101a2b;--code-surface:#101a2b;--code-gutter:#142238;--code-scrollbar-track:#101a2b;--code-scrollbar-thumb:#53677f;--code-scrollbar-thumb-hover:#7187a0;--syntax-text:var(--cvg-gray-200);--syntax-tag:oklch(72% .1 250);--syntax-attr:oklch(76% .1 220);--syntax-value:oklch(78% .11 145);--syntax-number:oklch(78% .11 145);--syntax-string:oklch(76% .12 45);--syntax-function:oklch(80% .11 85);--syntax-selector:oklch(80% .1 85);--syntax-property:oklch(76% .1 220);--syntax-punct:var(--cvg-gray-400);--syntax-comment:var(--cvg-gray-600);--font-ui:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;--font-mono:"JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, Menlo, monospace;--text-xs:.75rem;--text-sm:.8125rem;--text-base:.875rem;--text-md:1rem;--text-lg:1.25rem;--text-xl:1.5rem;--leading-prose:1.65;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.5rem;--space-6:2rem;--space-7:3rem;--radius-sm:4px;--radius-md:8px;--radius-pill:999px;--shadow-popover:0 8px 24px oklch(0% 0 0/.45);--duration-fast:.12s;--duration-base:.18s;--ease-out:cubic-bezier(0, 0, .2, 1);--focus-width:2px;--bp-tablet:1024px;--bp-mobile:768px;--cvg-ds-canvas:#171c1f;--cvg-ds-shell:#1c2226;--cvg-ds-panel:#22292d;--cvg-ds-inset:#1a2125;--cvg-ds-inset-strong:#303a3f;--cvg-ds-raised:#1c2226;--cvg-ds-text-primary:#edf2f2;--cvg-ds-text-secondary:#c7d1d3;--cvg-ds-text-muted:#a9b7bb;--cvg-ds-border:#394348;--cvg-ds-border-strong:#5b6a71;--cvg-ds-action:#7bbbe0;--cvg-ds-action-hover:#9bcfea;--cvg-ds-action-pressed:#4f9dc4;--cvg-ds-action-selected:#233e4c;--cvg-ds-action-on:#10242d;--cvg-ds-focus:#9bd7f1;--cvg-ds-success:#89c9a8;--cvg-ds-warning:#e0b16d;--cvg-ds-error:#e6928d;--cvg-ds-info:#92c7db;--cvg-ds-code:#171f23;--cvg-ds-code-gutter:#1a2429;--cvg-ds-demo:#222c29;--cvg-ds-demo-card:#303c37;--cvg-ds-demo-border:#85c7a7;--cvg-ds-demo-text:#edf2f2;--cvg-ds-demo-item:#4a9d83;--cvg-ds-demo-item-shadow:#286f58;--cvg-ds-type-page-title:1.75rem;--cvg-ds-type-section-title:1rem;--cvg-ds-type-body:.875rem;--cvg-ds-type-supporting:.875rem;--cvg-ds-type-label:.8125rem;--cvg-ds-type-caption:.75rem;--cvg-ds-type-code:.8125rem;--cvg-ds-type-action:.8125rem;--cvg-ds-space-0-5:2px;--cvg-ds-space-1:4px;--cvg-ds-space-2:8px;--cvg-ds-space-3:12px;--cvg-ds-space-4:16px;--cvg-ds-space-5:24px;--cvg-ds-space-6:32px;--cvg-ds-space-7:48px;--cvg-ds-control-height:36px;--cvg-ds-touch-target:40px;--cvg-ds-panel-padding:16px;--cvg-ds-control-gap:8px;--cvg-ds-card-gap:8px}[data-theme=light]{--surface-canvas:oklch(97.5% .008 255);--surface-panel:oklch(99.5% .003 255);--surface-raised:oklch(95.5% .012 255);--surface-hover:oklch(92.5% .018 255);--surface-active:oklch(90.5% .04 285);--surface:var(--surface-panel);--text-primary:oklch(23% .035 255);--text-secondary:oklch(40% .035 255);--text-muted:oklch(52% .025 255);--text-on-accent:oklch(99% .002 285);--border-subtle:oklch(87% .018 255);--border-default:oklch(79% .028 255);--border-strong:oklch(67% .035 255);--accent:oklch(53% .2 285);--accent-hover:oklch(48% .2 285);--accent-subtle-bg:oklch(59% .17 285/.14);--focus-ring:oklch(56% .19 285);--status-success:oklch(56% .14 155);--status-warning:oklch(66% .14 85);--status-error:oklch(56% .18 25);--status-info:oklch(53% .13 245);--scrollbar-track:oklch(94% .012 255);--scrollbar-thumb:oklch(69% .035 255);--scrollbar-thumb-hover:oklch(54% .045 255);--shadow-popover:0 10px 28px oklch(24% .035 255/.14);--cvg-ds-canvas:#f4f6f6;--cvg-ds-shell:#fff;--cvg-ds-panel:#fff;--cvg-ds-inset:#f0f3f3;--cvg-ds-inset-strong:#e8edef;--cvg-ds-raised:#fff;--cvg-ds-text-primary:#17252b;--cvg-ds-text-secondary:#50616a;--cvg-ds-text-muted:#687980;--cvg-ds-border:#d8dfe1;--cvg-ds-border-strong:#a9b6bb;--cvg-ds-action:#176f9f;--cvg-ds-action-hover:#125b82;--cvg-ds-action-pressed:#0e4d70;--cvg-ds-action-selected:#e4f1f7;--cvg-ds-action-on:#fff;--cvg-ds-focus:#429dc7;--cvg-ds-success:#2d8261;--cvg-ds-warning:#aa6a20;--cvg-ds-error:#bd4d49;--cvg-ds-info:#387fa0;--cvg-ds-code:#171f23;--cvg-ds-code-gutter:#1a2429;--cvg-ds-demo:#edf2ee;--cvg-ds-demo-card:#fff;--cvg-ds-demo-border:#3d9778;--cvg-ds-demo-text:#17342b;--cvg-ds-demo-item:#4a9a7d;--cvg-ds-demo-item-shadow:#2d765b}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}*{box-sizing:border-box}html,body,#root{height:100%}body{background:var(--surface-canvas);color:var(--text-primary);font-family:var(--font-ui);font-size:var(--text-base);-webkit-font-smoothing:antialiased;margin:0}html[data-theme=light],html[data-theme=light] *{scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track);scrollbar-width:thin}html[data-theme=light] ::-webkit-scrollbar{width:11px;height:11px}html[data-theme=light] ::-webkit-scrollbar-track{background:var(--scrollbar-track)}html[data-theme=light] ::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border:2px solid var(--scrollbar-track);border-radius:var(--radius-pill)}html[data-theme=light] ::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover)}html[data-theme=light] .code-textarea,html[data-theme=light] .playground-code-textarea{scrollbar-color:var(--code-scrollbar-thumb) var(--code-scrollbar-track)}html[data-theme=light] .code-textarea::-webkit-scrollbar-track{background:var(--code-scrollbar-track)}html[data-theme=light] .playground-code-textarea::-webkit-scrollbar-track{background:var(--code-scrollbar-track)}html[data-theme=light] .code-textarea::-webkit-scrollbar-thumb{background:var(--code-scrollbar-thumb);border-color:var(--code-scrollbar-track)}html[data-theme=light] .playground-code-textarea::-webkit-scrollbar-thumb{background:var(--code-scrollbar-thumb);border-color:var(--code-scrollbar-track)}html[data-theme=light] .code-textarea::-webkit-scrollbar-thumb:hover{background:var(--code-scrollbar-thumb-hover)}html[data-theme=light] .playground-code-textarea::-webkit-scrollbar-thumb:hover{background:var(--code-scrollbar-thumb-hover)}button{cursor:pointer;font-family:inherit}button:focus-visible,input:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:var(--focus-width) solid var(--focus-ring);outline-offset:2px;border-radius:var(--radius-sm)}a{color:var(--accent-hover);text-decoration:none}a:hover{text-decoration:underline}.app{flex-direction:column;height:100%;display:flex}.header{align-items:center;gap:var(--space-4);height:60px;padding:0 var(--space-4);border-bottom:1px solid var(--border-subtle);background:var(--surface-canvas);flex-shrink:0;display:flex}.brand{align-items:center;gap:var(--space-3);min-width:224px;display:flex}.brand-mark{border-radius:var(--radius-md);background:linear-gradient(135deg, #4facfe33, var(--accent-subtle-bg));width:32px;height:32px;color:var(--accent-hover);font-family:var(--font-mono);font-size:var(--text-sm);letter-spacing:-1px;place-items:center;font-weight:700;display:grid}.brand-name{font-weight:700;font-size:var(--text-md);color:var(--text-primary);line-height:1.2}.brand-tagline{font-size:var(--text-xs);color:var(--text-muted)}.search{flex:1;max-width:620px;position:relative}.search-input{border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--surface-panel);width:100%;height:38px;color:var(--text-primary);font-family:inherit;font-size:var(--text-sm);padding:0 76px 0 38px}.search-icon{color:var(--text-muted);pointer-events:none;position:absolute;top:50%;left:12px;transform:translateY(-50%)}.search-kbd{border:1px solid var(--border-default);border-radius:var(--radius-sm);background:var(--surface-raised);color:var(--text-secondary);font-family:var(--font-mono);padding:2px 7px;font-size:11px;position:absolute;top:50%;right:10px;transform:translateY(-50%)}.search-results{z-index:50;padding:var(--space-2);border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--surface-raised);box-shadow:var(--shadow-popover);position:absolute;top:calc(100% + 6px);left:0;right:0}.search-result{justify-content:space-between;align-items:center;gap:var(--space-3);width:100%;padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);color:var(--text-primary);text-align:left;font-size:var(--text-sm);background:0 0;border:none;display:flex}.search-result:hover:not([aria-disabled=true]),.search-result.selected{background:var(--surface-hover)}.search-result[aria-disabled=true]{color:var(--text-muted);cursor:default}.search-result-category{color:var(--text-muted);font-size:var(--text-xs)}.badge-soon{border:1px solid var(--border-default);border-radius:var(--radius-pill);color:var(--text-muted);white-space:nowrap;padding:1px 8px;font-size:11px}.mode-toggle{border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--surface-panel);gap:2px;padding:3px;display:flex}.mode-toggle button{border-radius:var(--radius-sm);color:var(--text-secondary);font-size:var(--text-sm);background:0 0;border:none;padding:5px 14px}.mode-toggle button[aria-pressed=true]{background:var(--accent);color:var(--text-on-accent);font-weight:600}.header-actions{align-items:center;gap:var(--space-2);min-width:0;margin-left:auto;display:flex}.theme-toggle{border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--surface-panel);min-height:34px;color:var(--text-secondary);font-size:var(--text-sm);justify-content:center;align-items:center;gap:6px;padding:5px 9px;font-weight:600;display:inline-flex}.body-row{flex:1;min-height:0;display:flex}.sidenav{border-right:1px solid var(--border-subtle);background:var(--surface-panel);flex-direction:column;flex-shrink:0;width:256px;display:flex;overflow-y:auto}.lang-tabs{margin:var(--space-3);border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--surface-raised);align-items:stretch;gap:2px;padding:4px;display:flex}.lang-tab{padding:var(--space-2) 0;border-radius:var(--radius-sm);color:var(--text-secondary);background:0 0;border:none;flex-direction:column;flex:1;align-items:center;gap:3px;font-size:11px;display:flex;position:relative}.lang-tab .lang-chip{border-radius:var(--radius-sm);background:var(--surface-hover);place-items:center;width:28px;height:28px;padding:3px;display:grid}.language-logo{width:100%;height:100%;display:block}.lang-tab[data-status=future]{color:var(--text-muted)}.lang-tab[aria-current=page]{color:var(--text-primary)}.lang-tab[aria-current=page] .lang-chip{background:var(--accent-subtle-bg);box-shadow:inset 0 0 0 1px var(--accent)}.lang-more-toggle .lang-chip{color:var(--text-secondary)}.lang-more-toggle .icon{transition:transform .15s}.lang-more-toggle[aria-expanded=true] .icon{color:var(--accent-hover)}.lang-tab:focus-visible,.roadmap-language:focus-visible{outline:2px solid var(--focus-ring);outline-offset:1px}.language-roadmap{max-height:min(390px,48vh);margin:0 var(--space-3) var(--space-3);border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--surface-raised);scrollbar-width:thin;flex:none;padding:8px;overflow:auto}.language-roadmap-heading{color:var(--text-primary);padding:2px 4px 7px;font-size:11px;font-weight:700}.language-roadmap-group+.language-roadmap-group{border-top:1px solid var(--border-subtle);margin-top:5px;padding-top:5px}.language-roadmap-group-title{color:var(--text-muted);letter-spacing:.06em;text-transform:uppercase;padding:2px 4px 3px;font-size:9px;font-weight:700}.roadmap-language{border-radius:var(--radius-sm);width:100%;min-height:28px;color:var(--text-secondary);text-align:left;cursor:pointer;background:0 0;border:0;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:7px;padding:3px 4px;display:grid;position:relative}.roadmap-language:hover{background:var(--surface-hover);color:var(--text-primary)}.roadmap-language-logo{width:20px;height:20px;display:block}.roadmap-language-name{text-overflow:ellipsis;white-space:nowrap;min-width:0;font-size:11px;overflow:hidden}.roadmap-status{border:1px solid var(--border-subtle);color:var(--text-muted);border-radius:999px;padding:2px 5px;font-size:9px;line-height:1.2}.roadmap-status.priority{border-color:color-mix(in srgb, var(--accent) 42%, var(--border-subtle));color:var(--accent-hover)}.roadmap-click-hint{z-index:2;border:1px solid var(--border-default);border-radius:var(--radius-sm);background:var(--surface-panel);color:var(--text-primary);white-space:nowrap;padding:4px 7px;font-size:10px;position:absolute;bottom:calc(100% - 2px);right:4px;box-shadow:0 3px 10px #0000002e}.language-roadmap-note{color:var(--text-muted);margin:7px 4px 2px;font-size:10px;line-height:1.4}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.nav-section-label{padding:var(--space-3) var(--space-4) var(--space-2);color:var(--text-secondary);font-size:13px;font-weight:600}.nav-list{padding:0 var(--space-2) var(--space-4);flex-direction:column;gap:1px;margin:0;list-style:none;display:flex}.nav-item{width:100%;padding:7px var(--space-3);border-radius:var(--radius-sm);color:var(--text-secondary);font-size:var(--text-sm);text-align:left;background:0 0;border:none;align-items:center;gap:10px;display:flex}.nav-item[aria-current=page]{background:var(--accent-subtle-bg);color:var(--text-primary);font-weight:600}.nav-item[aria-disabled=true]{color:var(--text-muted);cursor:default}.nav-icon{opacity:.85;flex-shrink:0;width:16px;height:16px}.nav-chevron{color:var(--text-muted);margin-left:auto;font-size:10px}.nav-children{flex-direction:column;gap:1px;margin:1px 0 3px;padding:0;list-style:none;display:flex}.nav-child{width:100%;padding:6px var(--space-3) 6px 38px;border-radius:var(--radius-sm);color:var(--text-secondary);font-size:var(--text-sm);text-align:left;background:0 0;border:none;align-items:center;display:flex}.nav-child[aria-current=page]{background:var(--accent-subtle-bg);color:var(--text-primary);font-weight:600}.nav-child[aria-disabled=true]{color:var(--text-muted);cursor:default}.sidenav-footer{padding:var(--space-3) var(--space-2);border-top:1px solid var(--border-subtle);margin-top:auto}@media (width>=1081px){.sidenav-footer{display:none}}.main{min-width:0;padding:var(--space-5) var(--space-5) var(--space-7);gap:var(--space-4);flex-direction:column;flex:1;display:flex;overflow-y:auto}.workspace{display:block}.main>*{flex-shrink:0}.topic-header{align-items:center;gap:var(--space-4);flex-wrap:wrap;display:flex}.topic-icon{border-radius:var(--radius-md);width:44px;height:44px;color:var(--status-success);font-family:var(--font-mono);font-size:var(--text-lg);background:oklch(75% .17 155/.15);place-items:center;font-weight:700;display:grid}.topic-title-block{flex:1;min-width:220px}.topic-title-row{align-items:baseline;gap:var(--space-3);flex-wrap:wrap;display:flex}.topic-title{font-family:var(--font-ui);letter-spacing:-.02em;margin:0;font-size:1.625rem;font-weight:700;line-height:1.15}.topic-summary{color:var(--text-secondary);font-size:var(--text-sm);margin:2px 0 0}.topic-actions{gap:var(--space-2);display:flex}.btn{align-items:center;gap:var(--space-2);padding:8px var(--space-4);border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--surface-raised);color:var(--text-primary);font-size:var(--text-sm);display:inline-flex}.btn:hover{background:var(--surface-hover)}.btn-primary{background:var(--accent);color:var(--text-on-accent);border-color:#0000;font-weight:600}.btn-primary:hover{background:var(--accent-hover)}.btn.copied{border-color:var(--status-success);color:var(--status-success)}.content-grid{gap:var(--space-3);grid-template-columns:minmax(0,36fr) minmax(0,34fr) 280px;display:grid}.reference-resizable-workspace{min-width:0;position:relative}.reference-resize-handle{z-index:20;cursor:col-resize;touch-action:none;touch-action:none;background:0 0;border:0;width:14px;padding:0;position:absolute;top:0;transform:translate(-50%)}.reference-resize-handle:after{content:"";background:var(--border-default);opacity:.45;border-radius:999px;width:2px;transition:background .15s,opacity .15s,box-shadow .15s;position:absolute;top:14%;bottom:14%;left:6px}.reference-resize-handle:hover:after,.reference-resize-handle:focus-visible:after{background:var(--accent);opacity:1;box-shadow:0 0 0 3px #8b5cf624}.reference-resize-handle:focus-visible{outline:0}.reference-layout-reset{z-index:21;min-height:26px;color:var(--text-secondary);background:var(--surface-raised);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);font:10px var(--font-ui);align-items:center;gap:5px;padding:4px 8px;display:inline-flex;position:absolute;top:6px;right:8px}.reference-layout-reset:hover,.reference-layout-reset:focus-visible{color:var(--text-primary);border-color:var(--accent);outline:none}@media (width<=1200px){.reference-resize-handle,.reference-layout-reset{display:none}}.primary-col{gap:var(--space-3);flex-direction:column;min-width:0;display:flex}.content-grid>.code-panel{align-self:stretch;min-width:0}.docs-col{min-width:0}.gallery-area{min-width:0;margin-top:var(--space-3)}.panel{border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--surface-panel);overflow:hidden;box-shadow:inset 0 1px oklch(90% .03 255/.025)}.panel-tabs{border-bottom:1px solid var(--border-subtle);padding:0 var(--space-2);align-items:center;display:flex}.panel-tab{padding:10px var(--space-4);color:var(--text-secondary);font-size:var(--text-sm);background:0 0;border:none;border-bottom:2px solid #0000}.panel-tab[aria-selected=true]{color:var(--text-primary);border-bottom-color:var(--accent);background:var(--accent-subtle-bg);font-weight:600}.panel-tab-spacer{flex:1}.playground-body{padding:10px var(--space-3) var(--space-3);gap:var(--space-2);flex-direction:column;display:flex}.preview-stage{border-radius:var(--radius-sm);min-height:170px;padding:var(--space-4);background:#eef0fb;place-items:center;display:grid;box-shadow:inset 0 0 0 1px oklch(98% .02 270/.45)}.demo-box{width:230px;max-width:100%;height:132px;padding:var(--space-3);color:#fff;text-align:center;transition:border-radius var(--duration-fast) var(--ease-out);background:linear-gradient(135deg,#3fa9e8,#7648ed);place-items:center;font-weight:600;display:grid}.compare-row{gap:var(--space-5);flex-wrap:wrap;justify-content:center;align-items:end;display:flex}.compare-item{align-items:center;gap:var(--space-2);flex-direction:column;display:flex}.compare-caption{color:var(--status-error);font-size:var(--text-xs);font-family:var(--font-mono)}.compare-caption.after{color:var(--status-success)}.radius-control-row{align-items:center;gap:var(--space-3);display:flex}.radius-label{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--text-secondary);white-space:nowrap}.radius-value{color:var(--status-success);font-family:var(--font-mono);min-width:56px;font-weight:600}.slider{appearance:none;border-radius:var(--radius-pill);background:linear-gradient(90deg, var(--accent), var(--surface-active));outline-offset:4px;flex:1;height:4px}.slider::-webkit-slider-thumb{appearance:none;background:var(--accent);cursor:pointer;border:2px solid #0b1220;border-radius:50%;width:18px;height:18px}.slider::-moz-range-thumb{background:var(--accent);cursor:pointer;border:2px solid #0b1220;border-radius:50%;width:18px;height:18px}.number-field{border:1px solid var(--border-default);border-radius:var(--radius-sm);background:var(--surface-raised);align-items:center;display:flex;overflow:hidden}.number-field input{width:58px;color:var(--text-primary);font-family:var(--font-mono);font-size:var(--text-sm);background:0 0;border:none;padding:7px 4px 7px 10px}.unit-suffix{color:var(--text-muted);font-family:var(--font-mono);font-size:var(--text-sm);padding:7px 10px 7px 4px}.preset-row{flex-wrap:wrap;gap:6px;display:flex}.preset-chip{border:1px solid var(--border-default);border-radius:var(--radius-sm);background:var(--surface-raised);color:var(--text-secondary);font-family:var(--font-mono);padding:4px 10px;font-size:12px}.preset-chip:hover{background:var(--surface-hover);color:var(--text-primary)}.preset-chip[aria-pressed=true]{border-color:var(--accent);background:var(--accent-subtle-bg);color:var(--text-primary);font-weight:600;box-shadow:0 0 0 1px oklch(74% .15 285/.2)}.subsection-title{font-size:var(--text-sm);color:var(--text-primary);margin:0;font-weight:600}.example-strip{gap:var(--space-2);flex-wrap:wrap;display:flex}.example-tile{min-width:64px;max-width:96px;padding:6px var(--space-1);border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--surface-raised);color:var(--text-secondary);flex-direction:column;flex:1 1 0;align-items:center;gap:4px;display:flex}.example-tile:hover:not(.static){border-color:var(--border-strong);background:var(--surface-hover)}.example-shape{background:#35c98e;width:40px;height:40px}.example-value{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-primary)}.example-caption{color:var(--text-muted);font-size:11px}.chip-row{flex-wrap:wrap;gap:6px;display:flex}@media (width>=1201px){.compare-row{gap:var(--space-2);flex-wrap:nowrap}.compare-row .demo-box{width:160px;height:96px}}.info-chip{border:1px solid var(--border-default);border-radius:var(--radius-sm);background:var(--surface-raised);color:var(--text-secondary);font-size:var(--text-xs);padding:4px 8px}.code-copy-btn{border-radius:var(--radius-sm);color:var(--text-secondary);font-size:var(--text-xs);background:0 0;border:none;align-items:center;gap:6px;padding:5px 10px;display:inline-flex}.code-copy-btn:hover{background:var(--surface-hover);color:var(--text-primary)}.codeblock{padding:var(--space-3) 0;font-family:var(--font-mono);background:var(--surface-canvas);margin:0;font-size:12.5px;line-height:1.6;overflow-x:auto}.codeblock code{min-width:max-content;display:block}.code-line{white-space:pre;display:flex}.code-line.highlight{background:var(--accent-subtle-bg);box-shadow:inset 2px 0 0 var(--accent)}.code-lineno{width:38px;padding-right:var(--space-3);text-align:right;color:var(--syntax-comment);-webkit-user-select:none;user-select:none;flex-shrink:0}.tok-selector{color:var(--syntax-selector)}.tok-property{color:var(--syntax-property)}.tok-value{color:var(--syntax-value)}.tok-punct{color:var(--syntax-punct)}.tok-plain{color:var(--syntax-text)}.code-section-label{padding:var(--space-3) var(--space-4) var(--space-1);color:var(--text-secondary);font-weight:600;font-size:var(--text-sm)}.show-in-row{align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-top:1px solid var(--border-subtle);color:var(--text-secondary);font-size:var(--text-sm);display:flex}.show-in-toggle{border:1px solid var(--border-default);border-radius:var(--radius-sm);gap:2px;padding:2px;display:flex}.show-in-toggle button{border-radius:var(--radius-sm);color:var(--text-secondary);font-size:var(--text-xs);background:0 0;border:none;padding:4px 12px}.show-in-toggle button[aria-pressed=true]{background:var(--accent);color:var(--text-on-accent)}.editable-hint{border-radius:var(--radius-sm);background:var(--accent-subtle-bg);color:var(--accent);align-items:center;gap:4px;padding:2px 8px;font-size:11px;font-weight:600;display:inline-flex}.code-panel{flex-direction:column;min-height:0;display:flex}.code-views,.code-editor-block{flex-direction:column;flex:1;min-height:0;display:flex;overflow:hidden}.code-editor-block+.code-editor-block{border-top:1px solid var(--border-subtle)}.code-editor-block .code-section-label{padding:var(--space-2) var(--space-4) 0;font-size:var(--text-xs)}.code-editor-wrapper{flex:1;min-height:0;display:flex;overflow:hidden}.code-lineno-gutter{width:38px;padding-top:var(--space-3);background:var(--code-gutter);border-right:1px solid var(--border-subtle);color:var(--syntax-comment);font-family:var(--font-mono);-webkit-user-select:none;user-select:none;flex-shrink:0;font-size:12.5px;line-height:1.6;overflow:hidden}.code-lineno-inner{will-change:transform}.code-lineno{text-align:right;height:1.6em;padding-right:var(--space-2);color:var(--syntax-comment);display:block}.code-editor-surface{background:var(--code-surface);flex:1;min-width:0;min-height:0;position:relative;overflow:hidden}.code-textarea{resize:none;color:#0000;width:100%;height:100%;caret-color:var(--syntax-text);font-family:var(--font-mono);tab-size:2;padding:var(--space-3) var(--space-4);white-space:pre;z-index:1;background:0 0;border:none;outline:none;margin:0;font-size:12.5px;line-height:20px;position:absolute;inset:0;overflow:auto}.code-highlight{width:100%;height:100%;padding:var(--space-3) var(--space-4);white-space:pre;font-family:var(--font-mono);tab-size:2;pointer-events:none;z-index:0;margin:0;font-size:12.5px;line-height:20px;position:absolute;inset:0;overflow:hidden}.code-highlight .code-line{white-space:pre;line-height:20px;display:block}.code-highlight .tok-selector{color:var(--syntax-selector)}.code-highlight .tok-property{color:var(--syntax-property)}.code-highlight .tok-value{color:var(--syntax-value)}.code-highlight .tok-unit,.code-highlight .tok-number{color:var(--syntax-number)}.code-highlight .tok-string{color:var(--syntax-string)}.code-highlight .tok-function{color:var(--syntax-function)}.code-highlight .tok-comment{color:var(--syntax-comment)}.code-highlight .tok-punctuation{color:var(--syntax-punct)}.code-highlight .tok-tag{color:var(--syntax-tag)}.code-highlight .tok-attribute{color:var(--syntax-attr)}.code-highlight .tok-attribute-value{color:var(--syntax-string)}.code-highlight .tok-text,.code-highlight .tok-plain{color:var(--syntax-text)}.code-highlight .tok-keyword{color:var(--syntax-function)}.code-highlight .tok-operator{color:var(--syntax-punct)}.code-textarea::placeholder{color:var(--syntax-comment)}.code-textarea:focus-visible{outline:none}.code-textarea.has-error{box-shadow:inset 3px 0 0 var(--status-error)}.code-error{bottom:var(--space-3);right:var(--space-4);z-index:2;border-radius:var(--radius-sm);background:var(--surface-raised);border:1px solid var(--status-error);color:var(--status-error);font-size:var(--text-xs);box-shadow:var(--shadow-popover);animation:slideIn .15s var(--ease-out);align-items:center;gap:6px;padding:6px 12px;display:inline-flex;position:absolute}@keyframes slideIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.editable-hint{margin-right:auto;margin-left:var(--space-2);border-radius:var(--radius-sm);background:var(--accent-subtle-bg);color:var(--accent-hover);align-items:center;gap:4px;padding:2px 8px;font-size:11px;font-weight:600;display:inline-flex}.docs-col{gap:var(--space-3);flex-direction:column;display:flex}.docs-card{flex-direction:column;gap:3px;padding:6px;display:flex;box-shadow:inset 0 1px oklch(90% .03 255/.025)}.docs-title{font-size:var(--text-sm);color:var(--text-primary);margin:0;font-weight:700}.docs-prose{color:var(--text-secondary);font-size:var(--text-sm);margin:0;line-height:1.35}.syntax-chip{border-radius:var(--radius-sm);background:var(--surface-raised);border:1px solid var(--border-subtle);font-family:var(--font-mono);font-size:var(--text-xs);color:var(--syntax-property);white-space:normal;word-break:break-word;padding:4px 8px}.value-doc-name{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--accent-hover);display:block}.value-doc-desc{color:var(--text-secondary);font-size:var(--text-xs);margin:2px 0 0;line-height:1.3}.docs-card[aria-label=About\ border-radius]>div:last-child p{margin-bottom:6px!important}.corner-diagram{height:104px;display:block;position:relative}.corner-row{display:contents}.corner-square{border:1.5px solid var(--status-warning);background:var(--surface-raised);width:88px;height:80px;position:absolute;top:4px;left:50%;transform:translate(-50%);box-shadow:inset 0 0 0 1px oklch(80% .16 85/.12)}.corner-handle{background:var(--text-primary);border:2px solid var(--status-warning);border-radius:50%;width:12px;height:12px;position:absolute;box-shadow:0 1px 3px oklch(0% 0 0/.4)}.corner-handle.tl{top:-6px;left:-6px}.corner-handle.tr{top:-6px;right:-6px}.corner-handle.br{bottom:-6px;right:-6px}.corner-handle.bl{bottom:-6px;left:-6px}.link-toggle{border-radius:var(--radius-pill);border:1px solid var(--border-subtle);background:var(--surface-raised);width:28px;height:28px;color:var(--text-secondary);place-items:center;padding:0;display:grid;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.link-toggle:hover,.link-toggle[aria-pressed=true]{color:var(--accent);border-color:var(--accent)}.corner-input-wrap{border:1px solid var(--border-default);border-radius:var(--radius-sm);background:var(--surface-raised);align-items:center;gap:3px;padding:2px 4px;display:inline-flex;position:absolute;box-shadow:0 0 0 1px oklch(80% .16 85/.06)}.corner-input-wrap:after{content:"";background:var(--status-warning);opacity:.7;width:14px;height:1px;position:absolute;top:50%}.corner-input-wrap[data-corner=topLeft]:after,.corner-input-wrap[data-corner=bottomLeft]:after{right:-15px}.corner-input-wrap[data-corner=topRight]:after,.corner-input-wrap[data-corner=bottomRight]:after{left:-15px}.corner-input-wrap[data-corner=topLeft]{top:4px;left:0}.corner-input-wrap[data-corner=topRight]{top:4px;right:0}.corner-input-wrap[data-corner=bottomLeft]{top:58px;left:0}.corner-input-wrap[data-corner=bottomRight]{top:58px;right:0}.corner-input-wrap:focus-within{border-color:var(--accent)}.corner-input{width:42px;color:var(--text-primary);font-family:var(--font-mono);font-size:var(--text-xs);text-align:right;background:0 0;border:none}.corner-input:focus{outline:none}.unit-suffix{color:var(--text-secondary);font-size:10px}.corner-value-display{text-align:center;font-family:var(--font-mono);font-size:var(--text-xs);color:var(--status-warning);margin-top:0;position:absolute;bottom:0;left:0;right:0}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.browser-support-row{gap:var(--space-2);flex-wrap:wrap;display:flex}.browser-badge{border:1px solid var(--border-default);border-radius:var(--radius-pill);font-size:var(--text-xs);color:var(--text-primary);align-items:center;gap:6px;padding:4px 8px;display:inline-flex}.browser-badge .check{color:var(--status-success);font-weight:700}.learn-sections{gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(280px,1fr));display:grid}.learn-card{padding:var(--space-4);gap:var(--space-3);flex-direction:column;display:flex}.learn-demo-row{gap:var(--space-4);align-items:center;display:flex}.mini-box{background:linear-gradient(135deg,#4facfe,#a78bfa);flex-shrink:0;width:72px;height:48px}.mini-box-label{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-secondary)}.corner-order-figure{border:2px solid var(--accent);flex-shrink:0;width:120px;height:80px;position:relative}.corner-order-figure span{background:var(--accent);width:22px;height:22px;color:var(--text-on-accent);font-size:var(--text-xs);border-radius:50%;place-items:center;font-weight:700;display:grid;position:absolute}.co-1{top:-11px;left:-11px}.co-2{top:-11px;right:-11px}.co-3{bottom:-11px;right:-11px}.co-4{bottom:-11px;left:-11px}.tip{gap:var(--space-2);padding:var(--space-3);border-left:3px solid var(--status-warning);border-radius:var(--radius-sm);color:var(--text-secondary);font-size:var(--text-xs);line-height:var(--leading-prose);background:oklch(80% .16 85/.08);display:flex}.tip strong{color:var(--status-warning)}.gallery-scroll{gap:var(--space-2);grid-template-columns:repeat(7,minmax(0,1fr));padding:8px;display:grid}.gallery-card{border-radius:var(--radius-md);color:#182235;background:#eef0fb;border:1px solid oklch(75% .02 255/.35);flex-direction:column;align-items:center;gap:6px;min-width:0;padding:6px 8px;display:flex}@media (width<=1200px){.gallery-scroll{display:flex;overflow-x:auto}.gallery-card{flex-shrink:0;width:146px}}.gallery-card:hover:not(.static){outline:2px solid var(--accent)}.gallery-shape{background:var(--status-success);width:64px;box-shadow:0 4px 12px oklch(20% .03 155/.16);height:48px!important}.gallery-code{font-family:var(--font-mono);word-break:break-all;text-align:center;font-size:11px;font-weight:600}.gallery-caption{color:#506079;font-size:11px}@media (width>=1201px){.header{gap:var(--space-3);height:56px}.brand{min-width:210px}.brand-mark{width:30px;height:30px}.search-input{height:34px}.mode-toggle button{padding:4px 12px}.main{gap:var(--space-3);padding:20px 20px 32px}.topic-icon{width:40px;height:40px}.topic-title{font-size:1.5rem}.btn{padding:7px 12px}.content-grid{gap:10px}.gallery-area{margin-top:10px}.panel-tab{padding:8px 12px}.playground-body{gap:6px;padding:8px 10px 10px}.preview-stage{min-height:160px;padding:12px}.demo-box{width:220px;height:124px}.code-section-label{padding:8px 12px 0}.code-lineno-gutter{width:34px;padding-top:10px;font-size:12px}.code-lineno{height:19px;padding-right:6px;line-height:19px}.code-textarea,.code-highlight{letter-spacing:0;tab-size:2;padding:10px 12px;font-size:12px;line-height:19px}.code-highlight .code-line{line-height:19px}.show-in-row{padding:10px 12px}.show-in-toggle button{padding:3px 10px}}.hamburger{display:none}@media (width<=1360px){.content-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.docs-col{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));align-items:start;display:grid}}@media (width<=1080px){.sidenav{z-index:90;transition:transform var(--duration-base) var(--ease-out);box-shadow:var(--shadow-popover);position:fixed;top:64px;bottom:0;left:0;transform:translate(-100%)}.sidenav.open{transform:translate(0)}.hamburger{display:inline-flex}.brand-tagline{display:none}}@media (width<=900px){.content-grid{grid-template-columns:minmax(0,1fr)}.search-kbd{display:none}.brand{min-width:0}.brand-name{display:none}}@media (width<=640px){.header{height:52px;padding:0 var(--space-3);gap:var(--space-2)}.main{padding:var(--space-3) var(--space-3) var(--space-6);gap:var(--space-3)}.sidenav{width:min(300px,86vw);top:52px}.mode-toggle button{padding:6px 10px}.header-actions{gap:4px}.theme-toggle{width:34px;min-height:34px;padding:0}.theme-toggle span,.search{display:none}.search.mobile-visible{z-index:80;top:56px;left:var(--space-3);right:var(--space-3);display:block;position:fixed}.search-toggle{display:inline-flex}.topic-actions{width:100%}.topic-actions .btn{flex:1;justify-content:center;min-height:44px;padding:11px}.demo-box{width:190px;height:110px}.preview-stage{min-height:170px;padding:var(--space-3)}.example-tile{flex-basis:30%;min-width:88px}.example-shape{width:36px;height:36px}.docs-col,.learn-sections{gap:var(--space-3)}.gallery-card{width:132px}}@media (width>=641px){.search-toggle{display:none}}@media (width>=1201px) and (height<=880px){.header{height:52px}.main{gap:12px;padding-top:16px}.gallery-area{margin-top:4px}.gallery-card{padding-top:4px;padding-bottom:4px}}@media (width>=1201px) and (height<=850px){.header{height:50px}.main{gap:10px;padding-top:14px}.gallery-area{margin-top:2px}.gallery-card{padding-top:3px;padding-bottom:3px}.docs-col{gap:10px}.docs-card{padding:5px}.corner-diagram{height:92px}.corner-square{height:68px}}@media (width>=1201px) and (height<=820px){.header{height:50px}.main{gap:8px;padding-top:10px}.gallery-area{margin-top:2px}.gallery-card{padding-top:2px;padding-bottom:2px}.preview-stage{min-height:150px}.playground-body{gap:5px}.docs-col{gap:8px}.docs-card{padding:4px}.corner-diagram{height:94px}.browser-support-row{gap:4px}.browser-badge{padding-top:3px;padding-bottom:3px}}@media (width>=1201px) and (height<=790px){.header{height:48px}.main{gap:6px;padding-top:8px}.gallery-area{margin-top:2px}.gallery-card{padding-top:1px;padding-bottom:1px}.preview-stage{min-height:140px}.playground-body{gap:4px}.docs-col{gap:6px}.docs-card{gap:2px}.docs-prose{line-height:1.25}.corner-diagram{height:90px}}.elements-workspace,.document-workspace{gap:var(--space-3);grid-template-columns:minmax(420px,1.2fr) minmax(360px,1fr) minmax(260px,.74fr);align-items:start;display:grid}.elements-primary-col,.elements-docs-col{gap:var(--space-3);flex-direction:column;min-width:0;display:flex}.elements-code-panel{align-self:stretch;min-height:0;display:flex}.elements-code-panel>.code-panel{flex:1;min-height:0}.elements-playground{min-height:286px}.elements-preview-stage{min-height:184px;margin:var(--space-2) var(--space-3) var(--space-3);padding:var(--space-4);border:1px solid var(--border-strong);border-radius:var(--radius-md);background:var(--preview-bg);overflow:auto}.elements-rendered{min-height:132px;padding:var(--space-4);color:var(--preview-text);border:1px dashed var(--border-strong);border-radius:var(--radius-sm);background:#ffffff8f}.elements-rendered [data-cvg-node]{outline-offset:3px;cursor:pointer;outline:1px solid #0000}.elements-rendered [data-cvg-selected=true]{outline-color:var(--accent-green);background:#51c99124}.elements-preview-label{padding:0 var(--space-3) var(--space-3);color:var(--text-muted);letter-spacing:.08em;text-align:center;font-size:10px}.elements-preview-label span{color:var(--accent);margin:0 var(--space-2)}.elements-compare{gap:var(--space-3);grid-template-columns:1fr 1fr;display:grid}.elements-compare-source{gap:var(--space-2);min-height:132px;padding:var(--space-3);color:var(--syntax-text);background:var(--editor-bg);border-radius:var(--radius-sm);font-family:var(--font-mono);flex-direction:column;font-size:12px;display:flex}.html-example-strip{gap:var(--space-2);padding:0 var(--space-3) var(--space-3);grid-template-columns:repeat(5,minmax(0,1fr));display:grid}.html-example-tile{min-width:0;min-height:92px;padding:var(--space-2);color:var(--text-secondary);background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:4px;display:flex}.html-example-tile:hover,.html-example-tile.active{color:var(--text);border-color:var(--accent);background:var(--surface-active)}.html-example-mark{color:var(--accent-green);font-family:var(--font-mono);font-size:18px}.html-anatomy{margin-top:var(--space-2)}.html-anatomy-code{padding:var(--space-3);color:var(--syntax-text);background:var(--editor-bg);border-radius:var(--radius-sm);font-family:var(--font-mono);white-space:nowrap;font-size:12px;line-height:1.8;display:block;overflow-x:auto}.anatomy-tag{color:var(--syntax-tag)}.anatomy-attr{color:var(--syntax-attr)}.anatomy-value{color:var(--syntax-string)}.anatomy-content{color:var(--syntax-text)}.anatomy-active{-webkit-text-decoration:underline 2px var(--accent-green);text-decoration:underline 2px var(--accent-green);text-underline-offset:3px}.html-anatomy-controls{margin-top:var(--space-2);flex-wrap:wrap;gap:5px;display:flex}.html-anatomy-controls button{color:var(--text-muted);background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;padding:4px 7px;font-size:10px}.html-anatomy-controls button.active{color:var(--text);border-color:var(--accent);background:var(--surface-active)}.html-tree,.html-tree ul{margin:0;padding-left:14px;list-style:none}.html-tree{padding-left:0}.html-tree-node button{width:100%;color:var(--text-secondary);border-radius:var(--radius-sm);text-align:left;font-family:var(--font-mono);cursor:pointer;background:0 0;border:1px solid #0000;padding:4px 6px;font-size:11px}.html-tree-node button:hover,.html-tree-node.selected>button{color:var(--text);background:var(--surface-active);border-color:var(--accent-green)}.tree-tag{color:var(--syntax-tag)}.tree-attrs{color:var(--syntax-attr)}.tree-text{color:var(--text-muted)}.elements-gallery-area{grid-column:1/-1}.elements-gallery-shape{min-height:72px;color:var(--accent-green);border-radius:var(--radius-sm);font-family:var(--font-mono);background:#51c9911f;border:1px solid #51c99166;place-items:center;font-size:13px;display:grid}.elements-gallery-area .gallery-card{min-height:116px;color:var(--text);cursor:pointer;background:linear-gradient(#182337f5,#111b2cfa);border-color:#7d91b247;gap:5px;padding:8px}.elements-gallery-area .gallery-card:hover,.elements-gallery-area .gallery-card:focus-visible,.elements-gallery-area .gallery-card.active{border-color:var(--accent);outline:none;box-shadow:0 0 0 1px #8b5cf657,0 8px 18px #050a1633}.elements-gallery-area .gallery-card.active{background:linear-gradient(#2a234ffa,#141d33fa)}.structure-preview{background:#e5ecf9f7;border:1px solid #91a5c673;border-radius:6px;width:100%;height:58px;padding:8px;display:block;position:relative;overflow:hidden}.structure-preview span,.structure-preview b,.structure-preview i,.structure-preview em{box-sizing:border-box;font-style:normal;display:block}.structure-preview-heading,.structure-preview b{background:#4c6ca5;border-radius:3px;width:58%;height:7px;margin-bottom:6px}.structure-preview-line,.structure-preview span:not(:first-child){background:#9aabc8;border-radius:2px;width:82%;height:4px;margin-top:5px}.structure-preview-line.short{width:62%}.structure-navigation-preview span{background:#536fa5;border-radius:3px;width:22%;height:7px;margin:2px 4% 10px 0;display:inline-block}.structure-navigation-preview i{background:#9aabc8;border-radius:2px;width:28%;height:4px;margin:4px 8% 0 0;display:inline-block}.structure-article-preview b{width:48%}.structure-article-preview span{background:#9aabc8;border-radius:2px;width:88%;height:4px;margin:5px 0}.structure-article-preview em{background:#7fb89e;border-radius:2px;width:72%;height:4px;margin-top:5px}.structure-list-preview span{background:#8197bd;border-radius:2px;width:78%;height:5px;margin:7px 0 0 12px}.structure-list-preview span:before{content:"";background:#5bc696;border-radius:50%;width:5px;height:5px;margin-left:-10px;display:block}.structure-profile-preview i{float:left;background:#73c89d;border-radius:50%;width:24px;height:24px;margin:3px 9px 0 0}.structure-profile-preview b{width:48%;margin-top:3px}.structure-profile-preview span{background:#9aabc8;border-radius:2px;width:68%;height:4px;margin:7px 0}.structure-form-preview b{background:#536fa5;width:30%;height:5px;margin-bottom:7px}.structure-form-preview span{background:#fff;border:1px solid #a8b5ca;border-radius:3px;width:74%;height:12px}.structure-form-preview i{background:#6b84b2;border-radius:3px;width:30%;height:5px;margin-top:7px}.structure-nested-preview{padding:6px 8px}.structure-nested-preview>span{background:#667eb033;border-left:3px solid #5c76ad;border-radius:2px;height:18px;margin:2px 0;padding:4px 5px}.structure-nested-preview>span b{background:#536fa5;width:40%;height:4px;margin:0}.structure-nested-preview>span i{background:#9aabc8;width:64%;height:3px;margin-top:3px}.structure-nested-preview>em{background:#75bf98;border-radius:2px;width:46%;height:4px;margin:5px 0 0 8px}.elements-gallery-area .gallery-code{color:var(--text);font-size:12px}.elements-gallery-area .gallery-caption{color:var(--text-muted);font-size:10px}.document-workspace{gap:var(--space-3);grid-template-columns:minmax(420px,1.2fr) minmax(360px,1fr) minmax(260px,.74fr);align-items:stretch;display:grid}.document-primary-col,.document-docs-col{gap:var(--space-3);flex-direction:column;min-width:0;display:flex}.document-code-panel{align-self:start;min-height:0;display:flex}.document-code-panel>.code-panel{flex:1;height:680px;min-height:0;max-height:calc(100vh - 150px)}.document-playground{min-height:520px}.document-anatomy-heading{justify-content:space-between;gap:var(--space-2);padding:var(--space-3) var(--space-3) 0;color:var(--text);font-size:var(--text-sm);font-weight:700;display:flex}.document-anatomy-heading span{color:var(--text-muted);font-size:10px;font-weight:500}.document-anatomy{margin:var(--space-3)}.document-anatomy-region,.document-anatomy-region>button{box-sizing:border-box}.document-anatomy-region{width:100%;color:var(--text);text-align:left;border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;background:#172337eb;padding:8px 10px;display:block}.document-anatomy-region:hover,.document-anatomy-region.selected{border-color:var(--accent);box-shadow:0 0 0 1px #8b5cf640}.document-anatomy-region strong{color:var(--syntax-tag);font-family:var(--font-mono);font-size:12px;display:block}.document-anatomy-region>span{color:var(--text-muted);margin-top:3px;font-size:10px;display:block}.document-root-region{border:1px solid var(--accent-green);border-radius:var(--radius-md);background:#1b3a3a57;padding:8px}.document-root-region>.document-anatomy-region{background:#113b33b8}.document-inner-regions{grid-template-columns:1fr 1fr;gap:8px;margin-top:8px;display:grid}.document-inner-regions>.document-anatomy-region{min-height:170px}.anatomy-head{border-color:var(--accent-blue);background:#1d385cdb}.anatomy-body{border-color:var(--status-warning);background:#373916bd}.anatomy-body strong{color:var(--status-warning)}.document-metadata-list{gap:5px;margin-top:10px;display:grid}.document-metadata-list .document-anatomy-region{background:#132640d1;border-color:#69b1ef80;padding:6px 8px}.document-metadata-list .document-anatomy-region strong{color:var(--accent-blue);font-size:10px}.document-body-structure{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:12px;display:grid}.document-semantic-node{min-width:0;color:var(--text);cursor:pointer;background:#323b18b8;border:1px solid #d7c95b8c;border-radius:5px;padding:7px}.document-semantic-node:hover,.document-semantic-node.selected{border-color:var(--accent);box-shadow:0 0 0 1px #8b5cf659}.document-semantic-node>strong{color:#e8dc8c;font:10px var(--font-mono);display:block}.document-semantic-children{border-left:1px dashed #e0cc5c80;gap:5px;margin-top:6px;padding-left:8px;display:grid}.document-semantic-children .document-semantic-node{background:#1c293ecc;border-color:#799acc8c;padding:5px}.document-semantic-children .document-semantic-node>strong{color:#9fc6ee}.document-semantic-leaf{color:var(--text-muted);margin-top:4px;font-size:9px;display:block}.semantic-header>strong{color:#78d5ae}.semantic-nav>strong{color:#78d5c1}.semantic-main{background:#1c3657d6;border-color:#67a6e4b3;grid-column:span 2}.semantic-main>strong{color:#9fc6ee}.semantic-aside{background:#564418b8;border-color:#e0b148b3}.semantic-aside>strong{color:#f1c76d}.semantic-article>strong{color:#d8a2f2}.semantic-figure{background:#13434fc7;border-color:#59c9dea6}.semantic-figure>strong{color:#8de0ee}.semantic-section>strong{color:#ef9ebc}.semantic-footer{background:#523022bd;border-color:#dc805bb3;grid-column:1/-1}.semantic-footer>strong{color:#f0aa89}.document-empty-body{color:var(--text-muted);grid-column:1/-1;font-size:10px}.document-browser-preview{margin:0 var(--space-3) var(--space-3);background:var(--preview-bg);border:1px solid var(--border-strong);border-radius:var(--radius-sm);overflow:hidden}.document-browser-bar{color:var(--text-secondary);background:var(--surface-raised);border-bottom:1px solid var(--border);justify-content:space-between;padding:7px 10px;font-size:10px;display:flex}.document-browser-bar small{color:var(--text-muted)}.document-browser-body{color:#16243b;background:#f2f6fcf5;min-height:88px;padding:14px}.document-browser-body h1,.document-browser-body h2{margin:0 0 6px;font-size:16px}.document-browser-body p{margin:5px 0;font-size:11px}.document-browser-body header,.document-browser-body main,.document-browser-body footer{border:1px solid #3c577c40;padding:5px}.document-browser-body footer{color:#52627c;margin-top:6px}.document-compare{margin:var(--space-3);grid-template-columns:1fr 1fr;gap:10px;display:grid}.document-compare>div{background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--radius-sm);min-width:0;padding:10px}.document-compare h3{font-size:var(--text-sm);margin:0 0 8px}.document-compare pre{color:var(--syntax-text);background:var(--editor-bg);font:11px/1.6 var(--font-mono);white-space:pre;margin:0;padding:9px;overflow:auto}.document-compare p{color:var(--text-muted);font-size:10px}.document-tree,.document-tree ul{margin:0;padding-left:14px;list-style:none}.document-tree{padding:0}.document-tree-node button{width:100%;color:var(--text-secondary);border-radius:var(--radius-sm);text-align:left;font-family:var(--font-mono);cursor:pointer;background:0 0;border:1px solid #0000;align-items:baseline;gap:6px;padding:5px 6px;font-size:10px;display:flex}.document-tree-node button:hover,.document-tree-node.selected>button{color:var(--text);background:var(--surface-active);border-color:var(--accent)}.document-tree-node small{color:var(--text-muted);font-family:var(--font-sans);text-overflow:ellipsis;white-space:nowrap;font-size:9px;overflow:hidden}.document-tree-dot{background:var(--accent-blue);border-radius:50%;flex:0 0 6px;width:6px;height:6px}.document-tree-dot.doctype{background:var(--accent)}.document-tree-dot.document{background:var(--accent-green)}.document-tree-dot.element{background:var(--accent-blue)}.document-selected-label{color:var(--text-secondary);font-size:11px}.document-selected-label strong{color:var(--accent);font-family:var(--font-mono)}.document-inspector dl{grid-template-columns:1fr 1.4fr;gap:5px 10px;margin:10px 0 0;font-size:10px;display:grid}.document-inspector dt{color:var(--text-muted)}.document-inspector dd{color:var(--text-secondary);margin:0}.document-common-list,.document-tips{color:var(--text-secondary);margin:0;padding-left:16px;font-size:10px;line-height:1.7}.document-gallery-area{grid-column:1/-1}.document-gallery-area .gallery-card{min-height:116px;color:var(--text);cursor:pointer;background:linear-gradient(#182337f5,#111b2cfa);border-color:#7d91b247;gap:5px;padding:8px}.document-gallery-area .gallery-card:hover,.document-gallery-area .gallery-card:focus-visible,.document-gallery-area .gallery-card.active{border-color:var(--accent);outline:none;box-shadow:0 0 0 1px #8b5cf657}.document-mini-preview{background:#e5ecf9f7;border:1px solid #91a5c673;border-radius:5px;grid-template-rows:4px 1fr;gap:3px;width:100%;height:58px;padding:5px;display:grid;position:relative}.document-mini-preview .mini-doctype{background:#855ad2;border-radius:2px;width:24%;display:block}.document-mini-preview .mini-html{background:#5574ab47;border:1px solid #5b78bd;border-radius:3px;grid-template-rows:9px 1fr;gap:3px;padding:3px;display:grid}.document-mini-preview .mini-head{background:#596caf;border-radius:2px;display:block}.document-mini-preview .mini-body{background:#164b6d;border-radius:2px;grid-template-columns:repeat(3,1fr);gap:3px;padding:3px;display:grid}.document-mini-preview .mini-body b{background:#4daf8b;border-radius:2px;display:block}.document-mini-minimal .mini-head{background:#855ad2}.document-mini-metadata-ready .mini-head,.document-mini-external-css .mini-head{background:linear-gradient(90deg,#5b78c3 0 30%,#805ad5 30%)}.document-mini-article-page .mini-body,.document-mini-full-layout .mini-body{grid-template-columns:1fr 2fr 1fr}.document-mini-app-shell .mini-body{grid-template-columns:1fr 1fr}.document-mini-multilingual .mini-head{background:#4da879}.document-gallery-area .gallery-code{color:var(--text);font-size:12px}.document-gallery-area .gallery-caption{color:var(--text-muted);font-size:10px}.document-example-strip{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;padding:8px 10px 4px;display:grid}.document-example-strip .html-example-tile{min-width:0;min-height:110px;padding:8px 6px}.quick-structure-preview{background:#0a1323b3;border:1px solid #6e88b059;border-radius:4px;width:100%;height:46px;margin-bottom:4px;padding:4px;display:block;position:relative}.quick-structure-preview i{border-radius:2px;display:block;position:absolute}.quick-html{border:1px solid #5b78bd;inset:4px}.quick-head{background:#5169a8;height:7px;top:10px;left:9px;right:9px}.quick-body{background:#16516d;inset:21px 9px 6px}.quick-detail{background:#55b38e;width:35%;height:5px;top:25px;left:14px}.quick-structure-minimal .quick-detail{display:none}.quick-structure-metadata .quick-head{background:linear-gradient(90deg,#5b78bd 0 36%,#805ad5 36%)}.quick-structure-responsive .quick-head{background:linear-gradient(90deg,#5b78bd 0 28%,#55b38e 28%)}.quick-structure-stylesheet .quick-head{background:linear-gradient(90deg,#805ad5 0 30%,#5b78bd 30%)}.quick-structure-full .quick-detail{background:#d5b95d;width:65%}@media (width<=1200px){.document-workspace{grid-template-columns:minmax(0,1fr) minmax(320px,410px)}.document-docs-col,.document-gallery-area{grid-column:1/-1}}@media (width<=900px){.document-workspace{flex-direction:column;display:flex}.document-primary-col,.document-code-panel,.document-docs-col,.document-gallery-area{width:100%}.document-code-panel>.code-panel{height:560px;max-height:none}.document-inner-regions,.document-compare{grid-template-columns:1fr}.document-inner-regions>.document-anatomy-region{min-height:0}.document-example-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.document-body-structure{grid-template-columns:1fr}.semantic-main,.semantic-footer{grid-column:auto}}@media (width<=1200px){.elements-workspace{grid-template-columns:minmax(0,1fr) minmax(320px,410px)}.elements-docs-col,.elements-gallery-area{grid-column:1/-1}}@media (width<=900px){.elements-workspace{flex-direction:column;display:flex}.elements-primary-col,.elements-code-panel,.elements-docs-col,.elements-gallery-area{width:100%}.html-example-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.elements-compare{grid-template-columns:1fr}}.phase2-workspace{gap:var(--space-3);grid-template-columns:minmax(0,1fr) minmax(360px,1.05fr) 280px;align-items:start;display:grid}.phase2-primary{gap:var(--space-3);grid-template-columns:minmax(0,1.3fr) minmax(190px,.7fr);min-width:0;display:grid}.phase2-playground,.phase2-control-panel,.phase2-code,.phase2-docs,.phase2-quick,.phase2-gallery{min-width:0}.phase2-playground{min-height:392px}.phase2-result{min-height:330px;padding:var(--space-3)}.phase2-controls{padding:var(--space-3);align-content:start;gap:7px;display:grid}.phase2-controls h3{color:var(--text-primary);font-size:var(--text-sm);margin:2px 0 3px}.phase2-field{color:var(--text-muted);gap:3px;font-size:10px;display:grid}.phase2-field input,.phase2-field select{box-sizing:border-box;width:100%;min-width:0;color:var(--text);background:var(--surface-raised);border:1px solid var(--border-subtle);font:11px var(--font-mono);border-radius:4px;padding:5px 6px}.phase2-field-row{grid-template-columns:1fr 1fr;gap:6px;display:grid}.phase2-toggle{color:var(--text-secondary);font:10px var(--font-mono);align-items:center;gap:6px;display:flex}.phase2-toggle input{accent-color:var(--accent)}.phase2-code{align-self:stretch;min-height:0;display:flex}.phase2-code>.code-panel{flex:1;height:430px;min-height:0;max-height:calc(100vh - 240px)}.phase2-docs{gap:var(--space-3);display:grid}.phase2-tree{padding:var(--space-3);border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--surface-panel)}.phase2-tree strong{color:var(--text-primary);font-size:var(--text-sm);margin-bottom:7px;display:block}.phase2-tree button{width:100%;color:var(--text-secondary);text-align:left;font:10px var(--font-mono);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:4px;align-items:center;gap:7px;padding:5px 6px;display:flex}.phase2-tree button:hover,.phase2-tree button.selected{color:var(--text);background:var(--surface-active);border-color:var(--accent)}.tree-dot{background:var(--accent-green);border-radius:50%;width:6px;height:6px}.phase2-inspector{padding:var(--space-3)}.phase2-selected{color:var(--text-secondary);font-size:11px}.phase2-selected strong{color:var(--accent);font-family:var(--font-mono)}.phase2-muted{color:var(--text-muted);font-size:10px}.phase2-state-line,.phase2-structure-note{color:var(--text-muted);margin-top:9px;font-size:10px}.attribute-anatomy{border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:#0d1a2dc2;padding:10px}.anatomy-caption{color:var(--text-muted);margin-bottom:7px;font-size:10px}.attribute-anatomy code{color:var(--syntax-text);font:12px/1.8 var(--font-mono);white-space:pre-wrap;display:block}.attribute-anatomy code button{color:inherit;font:inherit;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:3px;padding:2px 3px}.attribute-anatomy code button:first-child{color:var(--syntax-tag)}.attribute-anatomy code button:nth-child(2),.attribute-anatomy code button:nth-child(3),.attribute-anatomy code button:nth-child(4){color:var(--syntax-attr)}.attribute-anatomy code button:hover,.attribute-anatomy code button.selected{border-color:var(--accent);background:#8b5cf62e}.attribute-badges{flex-wrap:wrap;gap:5px;margin-top:9px;display:flex}.attribute-badges span{color:var(--accent-green);font:10px var(--font-mono);border:1px solid #51c99159;border-radius:10px;padding:3px 6px}.phase2-native-preview{color:#17253b;border-radius:var(--radius-sm);background:#eef0fb;min-height:110px;margin-top:12px;padding:18px;overflow:auto}.phase2-native-preview button{color:#fff;cursor:pointer;background:linear-gradient(135deg,#35bca0,#6454e8);border:0;border-radius:6px;padding:10px 18px;font-weight:700}.phase2-native-preview [contenteditable=true]{outline:2px dashed #6b5ce7}.phase2-native-preview [draggable=true]{cursor:grab}.phase2-article{color:#17253b;background:var(--preview-bg);border-radius:var(--radius-sm);min-height:220px;padding:14px 16px}.phase2-article h1,.phase2-article h2,.phase2-article h3{margin:0 0 7px}.phase2-article p{margin:7px 0}.phase2-article blockquote{background:#8d5cf61f;border-left:3px solid #8d5cf6;margin:10px 0;padding:8px 12px}.phase2-article pre{color:#b8d6f5;background:#101a2b;border-radius:4px;padding:8px;overflow:auto}.phase2-outline{color:var(--text-secondary);font:10px var(--font-mono);gap:4px;margin-top:10px;display:grid}.phase2-outline strong{color:var(--text-primary);font-family:var(--font-ui)}.phase2-outline span{padding-left:9px}.phase2-compare{gap:var(--space-3);padding:var(--space-3);grid-template-columns:1fr 1fr;display:grid}.phase2-compare>div{min-width:0}.phase2-compare .phase2-result{padding:0}.link-relationship{color:var(--text-secondary);background:var(--surface-raised);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;margin-top:12px;padding:10px;font-size:10px;display:grid}.link-relationship span,.link-relationship strong{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.link-relationship b{color:var(--accent)}.link-relationship small{color:var(--text-muted);grid-column:1/-1}.phase2-quick,.phase2-gallery{grid-column:1/-1;padding:10px}.phase2-example-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;display:grid}.phase2-example{min-width:0;color:var(--text-secondary);text-align:left;background:var(--surface-raised);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);cursor:pointer;gap:5px;padding:7px;display:grid}.phase2-example:hover,.phase2-example.active{color:var(--text);border-color:var(--accent);background:var(--surface-active)}.phase2-example strong{font-size:11px}.phase2-example small{color:var(--text-muted);font-size:9px}.phase2-mini{background:#10233a;border:1px solid #5d81b180;border-radius:4px;align-content:center;gap:4px;height:44px;padding:5px;display:grid;position:relative;overflow:hidden}.phase2-mini i,.phase2-mini span,.phase2-mini strong,.phase2-mini em,.phase2-mini b{display:block}.attributes-mini .mini-control{background:#43bd92;border-radius:3px;width:48%;height:12px}.attributes-mini .mini-line{background:#6380a7;width:70%;height:3px}.attributes-mini .mini-line.short{width:46%}.attributes-mini b{color:#86b2e7;font:8px var(--font-mono);position:absolute;top:5px;right:5px}.text-mini strong{background:#8c61e7;width:55%;height:10px}.text-mini i{background:#6684ad;width:90%;height:3px}.text-mini .short{width:68%}.text-mini em{background:#d1ad54;width:32%;height:7px}.list-mini i{background:#5c8fbd;width:78%;height:4px;margin-left:9px}.list-mini i:before{content:"•";color:#51c991;margin-top:-4px;margin-left:-9px;font-size:12px;position:absolute}.list-mini b{background:#51c991;width:58%;height:4px;margin-left:18px}.link-mini span{background:#51c991;width:45%;height:8px}.link-mini i{background:#6b83ad;width:65%;height:3px}.link-mini b{color:#a47cf1;position:absolute;right:28%}.link-mini em{background:#5f77ad;width:52%;height:5px}.phase2-gallery-card{min-height:112px}.phase2-gallery-card.active{border-color:var(--accent);box-shadow:0 0 0 1px #8b5cf652}.phase2-gallery-card .phase2-mini{width:100%}.phase2-gallery-card .gallery-code{font-size:11px}.phase2-gallery-card .gallery-caption{font-size:9px}.phase2-text .phase2-article{color:#17253b;background:#f4f6fb;min-height:280px;line-height:1.55}.phase2-text .phase2-article h1{color:#101c30;margin:0 0 6px;font-size:24px}.phase2-text .phase2-article h2{color:#1b2d47;margin:12px 0 5px;font-size:18px}.phase2-text .phase2-article h3{color:#2a3a53;margin:10px 0 4px;font-size:14px}.phase2-text .phase2-article p{color:#30415b;margin:7px 0}.phase2-text .phase2-article strong{color:#152238;font-weight:800}.phase2-text .phase2-article em{color:#314d72}.phase2-text .phase2-article mark{color:#342b0b;background:#f3d66c;border-radius:2px;padding:1px 3px}.phase2-text .phase2-article code{color:#075d67;font:11px var(--font-mono);background:#d5eff0;border-radius:3px;padding:2px 4px}.phase2-text .phase2-article pre{color:#c9e4ff;background:#102036;border:1px solid #2a6680}.phase2-text .phase2-article blockquote{color:#254a73;background:#e4effc;border-left-color:#3d8bd0}.phase2-text .phase2-article small{color:#566b85}.phase2-text .phase2-article del{color:#9b4f5c}.phase2-text .phase2-article ins{color:#26744e;text-decoration:underline}.phase2-text .phase2-article sub,.phase2-text .phase2-article sup{color:#59458c}.phase2-text .phase2-article q,.phase2-text .phase2-article abbr{color:#245c80}.phase2-text .phase2-outline{color:var(--text-secondary)}.phase2-text .phase2-outline button{color:inherit;text-align:left;font:10px var(--font-mono);cursor:pointer;background:0 0;border:1px solid #0000;padding:3px 5px;display:block}.phase2-text .phase2-outline button:hover,.phase2-text .phase2-outline button.selected{color:var(--text);background:var(--surface-active);border-color:var(--accent)}.phase2-control-label{color:var(--text-muted);margin-top:4px;font-size:10px}.phase2-format-grid{grid-template-columns:repeat(3,1fr);gap:5px;display:grid}.phase2-format-grid button,.phase2-action-row button{color:var(--text-secondary);background:var(--surface-raised);border:1px solid var(--border-subtle);cursor:pointer;border-radius:4px;padding:5px;font-size:10px}.phase2-format-grid button:hover,.phase2-format-grid button.selected,.phase2-action-row button:hover{color:var(--text);border-color:var(--accent);background:var(--surface-active)}.phase2-action-row{flex-wrap:wrap;gap:5px;display:flex}@media (width>=1366px){.phase2-text.phase2-workspace{grid-template-columns:minmax(440px,1.2fr) minmax(320px,.9fr) minmax(200px,.65fr)}}@media (width<=1100px){.phase2-workspace{grid-template-columns:minmax(0,1fr) minmax(300px,.8fr)}.phase2-docs,.phase2-quick,.phase2-gallery{grid-column:1/-1}.phase2-docs{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=760px){.phase2-workspace{flex-direction:column;display:flex}.phase2-primary{flex-direction:column;width:100%;display:flex}.phase2-code,.phase2-docs,.phase2-quick,.phase2-gallery{width:100%}.phase2-code>.code-panel{height:560px;max-height:none}.phase2-docs{grid-template-columns:1fr}.phase2-example-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.phase2-compare{grid-template-columns:1fr}.phase2-result{min-height:240px}}.phase3-primary{gap:var(--space-3);grid-template-columns:minmax(0,1.2fr) minmax(210px,.8fr);min-width:0;display:grid}.phase3-playground,.phase3-code,.phase3-docs-col,.phase3-examples{min-width:0}.phase3-playground{min-height:520px}.phase3-code{align-self:stretch;min-height:0;display:flex}.phase3-code>.code-panel{flex:1;height:565px;max-height:calc(100vh - 190px)}.phase3-docs-col{gap:var(--space-3);display:grid}.phase3-controls{padding:var(--space-3);align-content:start;gap:7px;display:grid}.phase3-controls .docs-title,.phase3-inspector .docs-title{margin-bottom:3px}.phase3-field{color:var(--text-muted);gap:3px;font-size:10px;display:grid}.phase3-field input,.phase3-field textarea,.phase3-field select,.phase3-candidate input,.phase3-track-row input{box-sizing:border-box;width:100%;min-width:0;color:var(--text-primary);background:var(--surface-raised);border:1px solid var(--border-subtle);font:11px var(--font-mono);border-radius:4px;padding:5px 6px}.phase3-field textarea{resize:vertical;min-height:42px}.phase3-field input[type=range]{accent-color:var(--accent);padding:0}.phase3-field output{color:var(--accent-green);font:10px var(--font-mono)}.phase3-field-row{grid-template-columns:1fr 1fr;gap:6px;display:grid}.phase3-button-row,.phase3-mode-row,.phase3-preset-row,.phase3-toggle-grid{flex-wrap:wrap;gap:5px;display:flex}.phase3-button-row button,.phase3-mode-row button,.phase3-preset-row button,.phase3-controls>button{color:var(--text-secondary);background:var(--surface-raised);border:1px solid var(--border-subtle);cursor:pointer;border-radius:4px;padding:5px 7px;font-size:10px}.phase3-button-row button:hover,.phase3-mode-row button:hover,.phase3-mode-row button.active,.phase3-preset-row button:hover,.phase3-preset-row button.active,.phase3-controls>button:hover{color:var(--text-primary);background:var(--surface-active);border-color:var(--accent)}.phase3-toggle-grid label{color:var(--text-secondary);background:var(--surface-raised);border:1px solid var(--border-subtle);font:10px var(--font-mono);border-radius:4px;align-items:center;gap:4px;padding:4px 6px;display:inline-flex}.phase3-toggle-grid input,.phase3-track-row input[type=checkbox]{accent-color:var(--accent)}.phase3-control-heading{color:var(--text-muted);margin-top:4px;font-size:10px}.phase3-candidate-list{gap:5px;display:grid}.phase3-candidate{grid-template-columns:1fr 66px;gap:4px;display:grid}.phase3-picture-candidate{grid-template-columns:1fr 1fr 1.25fr}.phase3-track-row{color:var(--text-muted);grid-template-columns:1fr auto auto;align-items:center;gap:5px;font-size:9px;display:grid}.phase3-result{min-height:470px;padding:var(--space-3);color:var(--text-primary)}.phase3-result-label{color:var(--text-primary);font-size:var(--text-sm);margin-bottom:8px;font-weight:700}.phase3-image-stage{border-radius:var(--radius-sm);background:#eef3fb;border:1px solid #a4b8d666;place-items:center;min-height:285px;padding:10px;display:grid;overflow:hidden}.phase3-image-stage img{object-fit:contain;color:#223554;max-width:100%;max-height:270px;font:12px var(--font-sans);display:block}.phase3-image-stage.has-error{background:#f4e9ec;border-color:#b4586a}.phase3-image-error{color:#7b2639;text-align:center;background:#f9dfe5;border:1px solid #c57b89;border-radius:4px;padding:8px;font-size:11px}.phase3-status-line{color:var(--text-secondary);background:var(--surface-raised);border-radius:4px;margin-top:9px;padding:6px 8px;font-size:10px}.phase3-success{color:var(--status-success)!important}.phase3-error{color:var(--status-error)!important}.phase3-inspector{padding:var(--space-3)}.phase3-info-list{grid-template-columns:minmax(74px,.7fr) minmax(0,1.3fr);gap:5px 8px;margin:8px 0 0;font-size:10px;display:grid}.phase3-info-list dt{color:var(--text-muted)}.phase3-info-list dd{overflow-wrap:anywhere;min-width:0;color:var(--text-secondary);font-family:var(--font-mono);margin:0}.phase3-muted{color:var(--text-muted);margin:9px 0 0;font-size:10px;line-height:1.35}.phase3-compare{gap:var(--space-3);min-height:470px;padding:var(--space-3);grid-template-columns:1fr 1fr;display:grid}.phase3-compare>div{min-width:0}.phase3-compare .phase3-result{min-height:0;padding:0}.phase3-compare-note{color:var(--text-secondary);grid-column:1/-1;margin:0;font-size:10px}.phase3-compare pre{max-height:100px;color:var(--syntax-text);background:var(--editor-bg);border:1px solid var(--border-subtle);font:10px/1.45 var(--font-mono);border-radius:4px;grid-column:1/-1;margin:0;padding:7px;overflow:auto}.phase3-compare .phase3-image-stage{min-height:210px}.phase3-viewport-ruler{color:var(--text-muted);font:9px var(--font-mono);justify-content:space-between;gap:3px;display:flex}.phase3-viewport-frame{width:var(--simulated-width,100%);background:#eaf2fb;border:1px solid #5b78bd;border-radius:5px;place-items:center;min-height:220px;margin:8px auto;padding:8px;transition:width .18s;display:grid;overflow:hidden}.phase3-viewport-frame img{object-fit:cover;width:100%;max-height:200px;display:block}.phase3-current-source{color:#1a3b45;background:#dff4ea;border:1px solid #63bf94;border-radius:4px;gap:3px;padding:7px 9px;font-size:10px;display:grid}.phase3-current-source span{color:#3f6171;font-family:var(--font-mono)}.phase3-compare .compare-frame{width:100%;min-height:160px}.phase3-compare .compare-frame img{max-height:145px}.phase3-compare p{color:var(--text-muted);font:10px var(--font-mono);overflow-wrap:anywhere;margin:6px 0 0}.phase3-media-stage{border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:#101c30;place-items:center;min-height:250px;padding:8px;display:grid}.phase3-media-stage video{background:#050a12;width:100%;max-height:235px;display:block}.phase3-media-stage audio{width:100%}.phase3-media-mini{background:#13243c;border:1px solid #5272a4;border-radius:4px;height:45px;padding:5px;display:block;position:relative}.phase3-media-mini .video,.phase3-media-mini .audio{background:linear-gradient(135deg,#31577e,#7359d6);border-radius:2px;height:26px;display:block}.phase3-media-mini .audio{background:#3cb698;height:12px;margin-top:7px}.phase3-media-mini i{background:#eef6ffbf;height:2px;position:absolute;bottom:7px;left:7px;right:7px}.phase3-media-mini b{color:#fff;font-size:12px;position:absolute;top:12px;left:12px}.phase3-image-mini{background:#eaf3fb;border:1px solid #647fa7;border-radius:4px;height:45px;display:block;position:relative;overflow:hidden}.phase3-image-mini span{background:linear-gradient(160deg,#8dcbe5 0 42%,#52708f 42% 59%,#1e5269 59%);height:100%;display:block}.phase3-image-mini span.broken{background:#f2e4e9;border:1px dashed #bb6477}.phase3-image-mini b{opacity:.8;background:#fff;width:28%;height:5px;position:absolute;bottom:5px;right:5px}.phase3-image-mini i{background:#755fe4;border-radius:50%;width:22px;height:22px;position:absolute;top:5px;left:5px}.phase3-responsive-mini{background:#12243b;border:1px solid #5878ac;border-radius:4px;height:45px;padding:5px;display:block;position:relative}.phase3-responsive-mini i{background:#487d9b;border-radius:2px;width:22%;height:25px;margin-right:4%;display:inline-block}.phase3-responsive-mini i:nth-child(2){background:#6c5bd3}.phase3-responsive-mini i:nth-child(3){background:#3eaf8c}.phase3-responsive-mini b{color:#e8efff;font:8px var(--font-mono);position:absolute;bottom:4px;right:5px}.phase3-example-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;display:grid}.phase3-examples{grid-column:1/-1;padding:8px}.phase3-example-card{min-width:0;color:var(--text-secondary);background:var(--surface-raised);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);text-align:left;cursor:pointer;gap:5px;padding:7px;display:grid}.phase3-example-card:hover,.phase3-example-card:focus-visible,.phase3-example-card.active{color:var(--text-primary);background:var(--surface-active);border-color:var(--accent);outline:none;box-shadow:0 0 0 1px #8b5cf640}.phase3-example-card strong{color:inherit;text-overflow:ellipsis;white-space:nowrap;font-size:11px;overflow:hidden}.phase3-example-card small{color:var(--text-muted);text-overflow:ellipsis;white-space:nowrap;font-size:9px;overflow:hidden}.phase3-gallery .phase3-example-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.phase3-gallery .phase3-example-card{min-height:92px}@media (width<=1200px){.phase3-code,.phase3-docs-col,.phase3-examples{grid-column:1/-1}.phase3-code{grid-row:2}.phase3-docs-col{grid-row:3;grid-template-columns:repeat(2,minmax(0,1fr))}.phase3-examples{grid-row:auto}}@media (width<=760px){.phase3-primary{flex-direction:column;width:100%;display:flex}.phase3-code,.phase3-docs-col,.phase3-examples{width:100%}.phase3-code>.code-panel{height:560px;max-height:none}.phase3-docs-col{grid-template-columns:1fr}.phase3-example-grid,.phase3-gallery .phase3-example-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.phase3-compare{grid-template-columns:1fr}.phase3-result{min-height:350px}.phase3-image-stage{min-height:220px}.phase3-viewport-frame{width:100%!important}.phase3-picture-candidate{grid-template-columns:1fr}}.html-learn-panel{gap:var(--space-3);min-width:0;display:grid}.html-learn-header{justify-content:space-between;align-items:flex-start;gap:var(--space-3);border:1px solid var(--border);border-radius:var(--radius-md);background:linear-gradient(135deg,#0e1d32f5,#121e36c7);padding:16px 18px;display:flex}.html-learn-kicker{color:var(--accent-green);font:10px var(--font-mono);letter-spacing:.08em;margin-bottom:5px;display:block}.html-learn-header h1{color:var(--text-primary);margin:0;font-size:clamp(21px,2vw,29px)}.html-learn-header p{color:var(--text-secondary);margin:6px 0 0;font-size:12px}.html-learn-replay,.html-learn-try button,.html-learn-stepper button,.learn-attribute-controls button,.learn-text-controls button,.learn-list-controls button,.learn-link-controls button,.learn-image-controls button,.learn-responsive-controls button,.learn-media-timeline button{color:var(--text-secondary);background:var(--surface-raised);border:1px solid var(--border-subtle);font:10px var(--font-ui);cursor:pointer;border-radius:5px;padding:6px 9px}.html-learn-replay:hover,.html-learn-try button:hover,.html-learn-stepper button:hover,.html-learn-stepper button:focus-visible,.learn-attribute-controls button:hover,.learn-text-controls button:hover,.learn-list-controls button:hover,.learn-link-controls button:hover,.learn-image-controls button:hover,.learn-responsive-controls button:hover,.learn-media-timeline button:hover{color:var(--text-primary);border-color:var(--accent);background:var(--surface-active)}.html-learn-replay:focus-visible,.html-learn-try button:focus-visible,.learn-attribute-controls button:focus-visible,.learn-text-controls button:focus-visible,.learn-list-controls button:focus-visible,.learn-link-controls button:focus-visible,.learn-image-controls button:focus-visible,.learn-responsive-controls button:focus-visible,.learn-media-timeline button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.html-learn-content{min-width:0;display:grid}.html-learn-lesson{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);min-width:0;padding:12px}.html-learn-lesson-heading{justify-content:space-between;align-items:end;gap:16px;padding:4px 4px 12px;display:flex}.html-learn-lesson-heading h2{color:var(--text-primary);margin:0;font-size:16px}.html-learn-lesson-heading p{max-width:52ch;color:var(--text-secondary);text-align:right;margin:0;font-size:11px;line-height:1.45}.html-learn-lesson-body{min-width:0}.html-learn-demo-grid{grid-template-columns:minmax(300px,.9fr) minmax(350px,1.1fr);gap:10px;display:grid}.html-learn-demo-visual,.html-learn-relationship,.html-learn-document-demo,.html-learn-attribute-demo,.html-learn-text-demo,.html-learn-list-demo,.html-learn-link-demo,.html-learn-image-demo,.html-learn-responsive-demo,.html-learn-media-demo{border:1px solid var(--border-subtle);border-radius:var(--radius-sm);background:#091424b8;min-width:0;padding:12px}.html-learn-demo-title{color:var(--text-primary);margin-bottom:10px;font-size:12px;font-weight:700}.html-learn-label{color:var(--text-muted);font:9px var(--font-mono);letter-spacing:.06em;margin-bottom:6px;display:block}.html-learn-code pre,.learn-list-stage pre,.learn-link-source,.learn-responsive-code,.learn-media-side>code{min-width:0;color:var(--syntax-text);background:var(--editor-bg);border:1px solid var(--border-subtle);font:11px/1.55 var(--font-mono);white-space:pre-wrap;border-radius:5px;margin:0;padding:10px;overflow:auto}.html-learn-arrow{color:var(--accent);place-items:center;font-size:20px;display:grid}.html-learn-result{min-width:0}.html-learn-relationship{grid-template-columns:minmax(0,1fr) 32px minmax(0,1fr);align-items:center;gap:9px;display:grid}.html-learn-relationship>p{color:var(--text-muted);grid-column:1/-1;margin:2px 0 0;font-size:10px;line-height:1.4}.learn-element-result{color:#17253b;background:var(--preview-bg);border-radius:5px;place-items:center;min-height:126px;padding:12px;display:grid}.learn-element-result article{background:#755fe41f;border:2px solid #755fe4;border-radius:5px;width:90%;padding:10px}.learn-element-result h3{margin:0;font-size:14px}.learn-element-result p{margin:7px 0 0;font-size:11px}.learn-tree-stage{place-items:center;min-height:174px;display:grid}.learn-tree-node{width:min(100%,245px);color:var(--text-primary);background:#1a304cdb;border:1px solid #5d8ccc;border-radius:6px;gap:3px;padding:9px;display:grid;position:relative}.learn-tree-node code{color:#a9cef5;font:11px var(--font-mono)}.learn-tree-node span{color:var(--text-muted);font-size:9px}.learn-tree-node.selected{border-color:var(--accent);box-shadow:0 0 0 2px #8b5cf633}.learn-tree-branch{border-left:1px dashed #7195c8;gap:6px;margin:8px 0 0 12px;padding-left:12px;display:grid}.learn-tree-node.learn-child{background:#1c4340db;border-color:#4ab78e;width:auto}.learn-tree-node.learn-child code{color:#8ee4bd}.learn-relationship-map{grid-template-rows:1fr 1fr;grid-template-columns:repeat(3,1fr);align-items:center;gap:8px;min-height:174px;display:grid}.learn-relationship-map span{min-height:35px;font:10px var(--font-mono);border-radius:5px;place-items:center;padding:5px;display:grid}.learn-map-parent{color:#e1bafa;background:#442d5be6;border:1px solid #c090ee;grid-column:1/-1}.learn-map-child{color:#93e7c2;background:#194342e6;border:1px solid #4ab78e}.learn-map-sibling{color:#f1d984;background:#523d19e6;border:1px solid #d6af4f;grid-column:1/-1}.html-learn-stepper{justify-content:space-between;align-items:center;gap:8px;margin-top:10px;display:flex}.html-learn-stepper-buttons{gap:5px;display:flex}.html-learn-stepper button:disabled{opacity:.45;cursor:default}.html-learn-step-indicator{text-align:right;gap:2px;display:grid}.html-learn-step-indicator span{color:var(--text-muted);font-size:9px}.html-learn-step-indicator strong{color:var(--accent-green);font-size:10px}.html-learn-concept-row{grid-template-columns:repeat(3,1fr);gap:7px;margin-top:9px;display:grid}.html-learn-concept-row span{color:var(--text-secondary);background:var(--surface-raised);border:1px solid var(--border-subtle);border-radius:5px;padding:8px;font-size:10px}.html-learn-concept-row code{color:var(--syntax-tag);font:10px var(--font-mono)}.learn-document-diagram{gap:8px;display:grid}.learn-doc-doctype,.learn-doc-html,.learn-doc-zone{border:1px solid var(--border-subtle);border-radius:6px;padding:10px;transition:border-color .18s,background .18s}.learn-doc-doctype{background:#3e2e639e;border-color:#876bd2}.learn-doc-doctype code,.learn-doc-title code{color:#d2b9ff;font:11px var(--font-mono)}.learn-doc-doctype span,.learn-doc-title span,.learn-doc-zone header span{color:var(--text-muted);margin-top:3px;font-size:9px;display:block}.learn-doc-html{background:#172337cc;border-color:#54779f}.learn-doc-title{padding-bottom:8px}.learn-doc-zones{grid-template-columns:1fr 1fr;gap:8px;display:grid}.learn-doc-head{background:#1a385cc7;border-color:#5d9ad7}.learn-doc-body{background:#403916c7;border-color:#c4a841}.learn-doc-zone header code{color:#a7cff1;font:11px var(--font-mono)}.learn-doc-body header code{color:#f2db75}.learn-doc-chips,.learn-doc-body-map{flex-wrap:wrap;gap:5px;margin-top:10px;display:flex}.learn-doc-chips span,.learn-doc-body-map span{font:9px var(--font-mono);opacity:.4;border-radius:4px;padding:5px 6px;transition:opacity .18s,transform .18s;transform:translateY(3px)}.learn-doc-chips span{color:#b5dbff;background:#4387c659;border:1px solid #81bef199}.learn-doc-body-map span{color:#f8e49c;background:#725e1cb3;border:1px solid #dcbe4899}.learn-doc-chips span.visible,.learn-doc-body-map span.visible{opacity:1;transform:none}.html-learn-head-body-callout{grid-template-columns:1fr 1fr;gap:8px;margin-top:9px;display:grid}.html-learn-head-body-callout div{border-radius:5px;gap:2px;padding:8px;display:grid}.html-learn-head-body-callout div:first-child{background:#1b416999;border:1px solid #5d9ad7}.html-learn-head-body-callout div:last-child{background:#534413a6;border:1px solid #c4a841}.html-learn-head-body-callout strong{font:10px var(--font-mono)}.html-learn-head-body-callout span{color:var(--text-secondary);font-size:10px}.learn-attribute-controls,.learn-text-controls,.learn-list-controls,.learn-link-controls,.learn-image-controls,.learn-responsive-controls{flex-wrap:wrap;align-items:center;gap:5px;margin-bottom:10px;display:flex}.learn-attribute-controls .html-learn-label,.learn-responsive-controls .html-learn-label{width:100%;margin-bottom:0}.learn-attribute-controls button.active,.learn-text-controls button.active,.learn-list-controls button.active,.learn-link-controls button.active,.learn-image-controls button.active,.learn-responsive-controls button.active,.learn-media-timeline button.active{color:var(--text-primary);border-color:var(--accent);background:#6f4ddc47}.learn-attribute-result{color:#18273d;background:var(--preview-bg);border-radius:5px;place-items:center;min-height:130px;padding:12px;display:grid}.learn-attribute-result button{color:#fff;background:linear-gradient(135deg,#32b796,#6656e5);border:0;border-radius:5px;padding:10px 20px;font-weight:700}.learn-attribute-result.is-hidden{background:repeating-linear-gradient(135deg,#e9edf7,#e9edf7 8px,#dce3f1 8px 16px)}.learn-attribute-result.is-hidden button{opacity:0}.learn-attribute-result span{color:#7e2945;font-size:10px}.html-learn-text-demo{grid-template-columns:minmax(170px,.65fr) minmax(0,1.35fr);gap:10px;display:grid}.learn-text-controls{align-content:start}.learn-text-controls>div{flex-wrap:wrap;gap:4px;margin-bottom:10px;display:flex}.learn-text-controls button{padding:5px 7px}.learn-text-result{background:var(--surface-raised);border:1px solid var(--border-subtle);border-radius:5px;min-width:0;padding:10px}.learn-heading-outline{background:#213351ad;border-radius:4px;gap:4px;padding:8px;display:grid}.learn-heading-outline strong{color:var(--text-muted);font:10px var(--font-mono)}.learn-heading-outline strong.selected{color:var(--accent-green)}.learn-rendered-text{color:#17253b;background:var(--preview-bg);border-radius:4px;margin-top:10px;padding:10px}.learn-rendered-text code{color:#245a80;font:10px var(--font-mono)}.learn-rendered-text h1,.learn-rendered-text h2,.learn-rendered-text h3{color:#142238;margin:8px 0 5px}.learn-rendered-text p{margin:5px 0 0;font-size:11px}.learn-inline-strong{font-weight:800}.learn-inline-em{font-style:italic}.learn-inline-mark{background:#f1d268;padding:1px 3px}.learn-inline-code{color:#085e67;font-family:var(--font-mono);background:#d7eff0;padding:2px 4px}.learn-inline-del{text-decoration:line-through}.learn-inline-ins{text-decoration:underline}.learn-inline-sub,.learn-inline-sup{color:#674c9f}.learn-list-stage{grid-template-columns:minmax(0,1fr) minmax(180px,.8fr);align-items:stretch;gap:10px;display:grid}.learn-list-rendered{color:#1b2b42;background:var(--preview-bg);border-radius:5px;min-height:150px;padding:13px 20px;font-size:12px}.learn-list-rendered ul,.learn-list-rendered ol{margin:0;padding-left:20px}.learn-list-rendered dl{margin:0}.learn-list-rendered dd{color:#456080;margin:3px 0 9px 16px}.learn-list-rendered li{margin:6px 0}.learn-link-controls{margin-bottom:12px}.learn-link-map{grid-template-columns:1fr 70px 1fr;align-items:center;gap:8px;display:grid}.learn-link-anchor,.learn-link-destination{border-radius:5px;gap:4px;min-width:0;padding:12px;display:grid}.learn-link-anchor{color:#18314a;background:#d8f1e8;border:1px solid #5bc291}.learn-link-destination{color:#e2d7ff;background:#432f68c2;border:1px solid #9b7ae5}.learn-link-anchor code,.learn-link-destination code{font:10px var(--font-mono)}.learn-link-anchor strong{font-size:12px}.learn-link-destination span{color:#c6b9e3;font-size:9px}.learn-link-arrow{color:var(--accent);font:12px var(--font-mono);text-align:center}.learn-link-source{color:var(--syntax-text);margin-top:9px}.learn-image-controls{margin-bottom:12px}.learn-image-relationship{grid-template-columns:minmax(190px,.8fr) minmax(0,1.2fr);align-items:center;gap:10px;display:grid}.learn-image-frame{background:#eaf2fb;border:1px solid #79a5ce;border-radius:5px;place-items:center;min-height:145px;display:grid;overflow:hidden}.learn-image-frame img{object-fit:cover;width:100%;height:145px;display:block}.learn-image-frame.broken{background:#fae7ec;border-color:#ba697b}.learn-image-fallback{color:#7d2944;font:11px var(--font-mono);text-align:center}.learn-image-fallback small{font:9px var(--font-ui)}.learn-image-source{gap:8px;min-width:0;display:grid}.learn-image-source code{color:var(--syntax-text);background:var(--editor-bg);border:1px solid var(--border-subtle);font:10px/1.5 var(--font-mono);border-radius:5px;padding:9px;overflow:auto}.learn-image-source span{color:var(--text-secondary);font-size:10px}.learn-responsive-stage{grid-template-columns:minmax(230px,1fr) minmax(230px,1fr);align-items:center;gap:12px;min-height:165px;display:grid}.learn-viewport-window{background:#eaf2fb;border:2px solid #7197ca;border-radius:5px;align-content:end;min-width:105px;min-height:120px;margin:auto;padding:7px;transition:width .18s;display:grid}.learn-viewport-window>span{color:#345476;font:10px var(--font-mono);text-align:center}.learn-viewport-image{background:linear-gradient(160deg,#8dcbe5 0 42%,#52708f 42% 59%,#1e5269 59%);border-radius:3px;height:70px;margin-top:5px}.learn-candidate-lanes{gap:8px;display:grid}.learn-candidate-lane{color:var(--text-muted);font:10px var(--font-mono);grid-template-columns:70px 1fr 76px;align-items:center;gap:7px;display:grid}.learn-candidate-lane i{background:#41698f;border-radius:3px;height:10px;display:block}.learn-candidate-lane small{text-align:right;font-size:9px}.learn-candidate-lane.selected{color:var(--accent-green)}.learn-candidate-lane.selected i{background:linear-gradient(90deg,#39b989,#715ee4);box-shadow:0 0 0 2px #51c9912e}.learn-responsive-code{justify-content:space-between;align-items:center;gap:10px;margin-top:10px;display:flex}.learn-responsive-code code{min-width:0;overflow:auto}.learn-responsive-code span{color:var(--accent-green);font:10px var(--font-mono);flex:none}.learn-media-demo{grid-template-columns:minmax(250px,1.1fr) minmax(240px,.9fr);gap:12px;display:grid}.learn-media-stage{border:1px solid var(--border-strong);background:#0a1527;border-radius:5px;padding:12px}.learn-media-screen{color:#e4edfb;background:linear-gradient(135deg,#1d5572,#604bb3);border-radius:4px;place-items:center;min-height:145px;display:grid}.learn-media-screen.state-playing{background:linear-gradient(135deg,#1c785c,#315ba6)}.learn-media-screen.state-paused{background:linear-gradient(135deg,#79602a,#5f4e9d)}.learn-media-screen.state-ended{background:#223653}.learn-media-icon{font-size:26px}.learn-media-screen strong{font:11px var(--font-mono);margin-top:5px}.learn-media-track{background:#1f2c43;border-radius:4px;height:5px;margin-top:10px}.learn-media-track i{background:var(--accent-green);border-radius:inherit;height:100%;transition:width .18s;display:block}.learn-media-options{flex-wrap:wrap;gap:5px;margin-top:10px;display:flex}.learn-media-options span{color:#a9b9d0;font:9px var(--font-mono);background:#14243b;border:1px solid #315075;border-radius:4px;padding:4px 6px}.learn-media-side{align-content:start;gap:10px;display:grid}.learn-media-timeline{flex-wrap:wrap;gap:4px;display:flex}.learn-media-timeline button.passed{color:var(--accent-green);border-color:#51c99180}.learn-media-side>code{color:#acd2f5}.html-learn-try{border:1px solid var(--border);border-radius:var(--radius-md);background:linear-gradient(90deg,#233d58cc,#342753b3);justify-content:space-between;align-items:center;gap:12px;padding:11px 13px;display:flex}.html-learn-try div{gap:3px;display:grid}.html-learn-try strong{color:var(--text-primary);font-size:12px}.html-learn-try span{color:var(--text-secondary);font-size:10px}.html-learn-try button{color:#fff;background:linear-gradient(135deg,#6851dc,#8a53e8);border-color:#0000}@media (prefers-reduced-motion:reduce){.learn-doc-doctype,.learn-doc-html,.learn-doc-zone,.learn-doc-chips span,.learn-doc-body-map span,.learn-viewport-window,.learn-media-track i{transition:none}}@media (width<=900px){.html-learn-demo-grid,.html-learn-text-demo,.learn-media-demo{grid-template-columns:1fr}.html-learn-lesson-heading{flex-direction:column;align-items:start}.html-learn-lesson-heading p{text-align:left;max-width:none}.html-learn-arrow{transform:rotate(90deg)}.html-learn-relationship,.learn-responsive-stage{grid-template-columns:1fr}.learn-viewport-window{width:min(80%,340px)!important}.learn-responsive-code{flex-direction:column;align-items:start}.learn-image-relationship,.learn-list-stage,.learn-link-map{grid-template-columns:1fr}.learn-link-arrow{transform:rotate(90deg)}.learn-image-frame{min-height:180px}.learn-image-frame img{height:180px}}@media (width<=760px){.html-learn-header{flex-direction:column}.html-learn-header h1{font-size:22px}.html-learn-lesson{padding:9px}.html-learn-concept-row,.html-learn-head-body-callout,.learn-doc-zones{grid-template-columns:1fr}.learn-doc-body-map{justify-content:start}.html-learn-try{flex-direction:column;align-items:stretch}.html-learn-try button{width:100%}.html-learn-stepper{flex-direction:column;align-items:stretch}.html-learn-step-indicator{text-align:left}.learn-candidate-lane{grid-template-columns:64px minmax(55px,1fr) 72px}.html-learn-panel{overflow:hidden}}.learn-element-result,.learn-attribute-result,.learn-rendered-text,.learn-list-rendered{background:#eef2fa}.phase4-primary{gap:var(--space-3);grid-template-columns:minmax(0,1.2fr) minmax(165px,.8fr);min-width:0;display:grid}.phase4-playground,.phase4-controls,.phase4-code,.phase4-docs-col{min-width:0}.phase4-playground{flex-direction:column;min-height:460px;display:flex;overflow:hidden}.phase4-result-body{min-height:0;padding:var(--space-3);gap:var(--space-3);flex-direction:column;flex:1;display:flex}.phase4-preview-label{color:var(--text-secondary);font-size:var(--text-xs);letter-spacing:.04em;text-transform:uppercase;font-weight:700}.phase4-preview-surface{color:#16263d;background:var(--preview-bg);border-radius:var(--radius-md);border:1px solid #b8c8db;min-height:280px;padding:18px;overflow:auto}.phase4-preview-surface form{gap:12px;max-width:440px;margin:0 auto;display:grid}.phase4-preview-surface form>label{color:#29415d;gap:5px;font-size:11px;font-weight:700;display:grid}.phase4-preview-surface input,.phase4-preview-surface textarea,.phase4-preview-surface select{color:#182a41;width:100%;min-height:32px;font:12px var(--font-ui);background:#fff;border:1px solid #a7b8cb;border-radius:5px;padding:7px 9px}.phase4-preview-surface textarea{resize:vertical;min-height:80px}.phase4-preview-surface button{color:#fff;background:linear-gradient(135deg,#245cae,#6851dc);border:0;border-radius:5px;width:fit-content;min-height:32px;padding:7px 13px;font-size:12px;font-weight:700}.phase4-preview-hint{color:var(--text-muted);font-size:var(--text-xs);line-height:1.45}.phase4-controls{padding:var(--space-3);align-content:start;gap:10px;display:grid}.phase4-controls h2{margin-bottom:2px}.phase4-field{min-width:0;color:var(--text-secondary);gap:4px;font-size:10px;display:grid}.phase4-field>label{color:var(--text-muted);cursor:pointer}.phase4-field>input,.phase4-field>select,.phase4-field>textarea{width:100%;min-width:0;min-height:30px;color:var(--text-primary);background:var(--surface-raised);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);font:11px var(--font-ui);padding:6px 8px}.phase4-field>textarea{resize:vertical;min-height:70px}.phase4-field small{color:var(--text-muted);font-size:9px}.phase4-field-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;min-width:0;display:grid}.phase4-field-row:has(>.phase4-field:nth-child(3)){grid-template-columns:repeat(3,minmax(0,1fr))}.phase4-toggle,.phase4-segmented button{color:var(--text-secondary);align-items:center;gap:6px;font-size:10px;display:flex}.phase4-toggle input{accent-color:var(--accent)}.phase4-toggle-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;display:grid}.phase4-control-heading{color:var(--text-secondary);justify-content:space-between;align-items:center;gap:6px;font-size:10px;font-weight:700;display:flex}.phase4-form-field-list,.phase4-option-editor{border-top:1px solid var(--border-subtle);gap:6px;padding-top:8px;display:grid}.phase4-field-chip{color:var(--text-secondary);background:var(--surface-canvas);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);justify-content:space-between;align-items:center;gap:7px;padding:6px 7px;font-size:10px;display:flex}.phase4-field-chip code{color:var(--syntax-property);font:10px var(--font-mono)}.phase4-segmented{gap:4px;display:flex}.phase4-segmented button{color:var(--text-secondary);background:var(--surface-canvas);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:6px 9px}.phase4-segmented button.active,.phase4-learn-controls button.active{color:#fff;background:var(--accent);border-color:var(--accent)}.phase4-option-row{grid-template-columns:minmax(0,1fr) 24px;gap:4px;display:grid}.phase4-option-row input{min-width:0;color:var(--text-primary);background:var(--surface-raised);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:5px 7px;font-size:10px}.phase4-option-row button{color:var(--text-muted);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);background:0 0}.phase4-code{min-height:0;display:flex}.phase4-code .code-panel{width:100%;min-height:460px}.phase4-docs-col{align-content:start;gap:var(--space-3);display:grid}.phase4-inspector,.phase4-docs{min-width:0;padding:var(--space-3)}.phase4-info-list{grid-template-columns:minmax(70px,.65fr) minmax(0,1.35fr);gap:7px 9px;margin:0;font-size:10px;display:grid}.phase4-info-list dt{color:var(--text-muted)}.phase4-info-list dd{overflow-wrap:anywhere;min-width:0;color:var(--text-secondary);font-family:var(--font-mono);margin:0}.phase4-status-submission-prepared,.phase4-valid{color:var(--accent-green)!important}.phase4-status-invalid,.phase4-status-submission-blocked,.phase4-invalid{color:#ff7e87!important}.phase4-payload{background:var(--editor-bg);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);gap:6px;margin-top:12px;padding:9px;display:grid}.phase4-payload span{color:var(--text-muted);font-size:9px}.phase4-payload code{color:var(--syntax-string);font:10px/1.45 var(--font-mono);white-space:pre-wrap;overflow:auto}.phase4-docs p{color:var(--text-secondary);margin:8px 0 0;font-size:10px;line-height:1.45}.phase4-examples{min-width:0;padding:var(--space-3);grid-column:1/-1}.phase4-example-grid{grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px;display:grid}.phase4-example-card{min-width:0;min-height:105px;color:var(--text-primary);text-align:left;background:var(--surface-raised);border:1px solid var(--border-subtle);border-radius:var(--radius-md);align-content:start;gap:5px;padding:8px;display:grid}.phase4-example-card:hover,.phase4-example-card.active{border-color:var(--accent);background:linear-gradient(135deg,#5a47b247,#1d3651ad)}.phase4-example-card.active{box-shadow:inset 0 0 0 1px #ae95ff80}.phase4-example-card strong{color:var(--text-primary);text-overflow:ellipsis;white-space:nowrap;font-size:10px;overflow:hidden}.phase4-example-card small{min-height:22px;color:var(--text-muted);font-size:9px;line-height:1.25}.phase4-mini{border-radius:var(--radius-sm);background:#edf3fb;border:1px solid #aabbd0;justify-content:center;align-items:center;gap:4px;min-height:48px;padding:6px;display:flex;overflow:hidden}.phase4-form-mini{flex-direction:column;align-items:stretch}.phase4-form-mini b{color:#3e5c7a;font:8px var(--font-mono)}.phase4-form-mini i,.phase4-form-mini em{background:#a8bad0;border-radius:2px;height:6px;display:block}.phase4-form-mini em{background:#58bd9a;width:55%}.phase4-input-mini input,.phase4-select-mini input,.phase4-select-mini select{color:#233a54;background:#fff;border:1px solid #8ea9c1;border-radius:3px;width:100%;min-width:0;height:23px;padding:2px 4px;font-size:8px}.phase4-input-mini input[type=range]{accent-color:#6554d8}.phase4-textarea-mini{flex-direction:column;align-items:stretch}.phase4-textarea-mini textarea{resize:none;color:#29415d;width:100%;height:25px;font-size:8px}.phase4-mini-button{color:#fff;background:#5274c3;border:0;border-radius:3px;align-self:end;padding:2px 5px;font-size:8px}.phase4-validation-mini input{color:#29415d;border:2px solid #86bf9f;border-radius:3px;width:100%;height:23px;padding:3px;font-size:8px}.phase4-validation-mini input.invalid{border-color:#e36c75}.phase4-compare{gap:var(--space-3);padding:var(--space-3);flex:1;grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.phase4-compare-pane{align-content:start;gap:8px;min-width:0;display:grid}.phase4-compare-pane .phase4-preview-surface{min-height:250px}.phase4-contrast-card{min-height:250px;color:var(--text-secondary);background:var(--surface-raised);border:1px solid var(--border-subtle);border-radius:var(--radius-md);align-content:start;gap:10px;padding:14px;font-size:11px;line-height:1.4;display:grid}.phase4-contrast-card strong{color:var(--text-primary);font-size:13px}.phase4-contrast-card code{color:var(--syntax-string);background:var(--editor-bg);font:10px/1.5 var(--font-mono);white-space:pre-wrap;padding:8px;overflow:auto}.phase4-compare-control,.phase4-validation-compare{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;display:grid}.phase4-contrast-card input,.phase4-contrast-card select{color:#273b52;background:#fff;border:1px solid #a9b9cc;border-radius:4px;min-width:0;padding:7px}.phase4-contrast-card button{width:fit-content;color:var(--text-primary);background:var(--surface-canvas);border:1px solid var(--border-subtle);border-radius:4px;padding:7px 10px}.phase4-contrast-card span{color:var(--text-muted)}.phase4-learn-panel{gap:16px;display:grid}.phase4-learn-badge{color:var(--accent-green);border-radius:var(--radius-sm);background:#2a917021;border:1px solid #52c49b59;align-self:start;padding:7px 10px;font-size:10px}.phase4-learn-visual{border:1px solid var(--border);border-radius:var(--radius-md);background:linear-gradient(135deg,#1b304bdb,#2e224fb8);gap:15px;padding:18px;display:grid}.phase4-flow{grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr) 30px minmax(0,1fr);align-items:center;gap:8px;display:grid}.phase4-flow-node{text-align:center;border-radius:var(--radius-md);background:#0c192ba6;border:1px solid #5275a4;align-content:center;gap:5px;min-height:90px;padding:12px;display:grid}.phase4-flow-node code{color:#ffc982;font:11px var(--font-mono)}.phase4-flow-node span{color:var(--text-muted);font-size:10px}.phase4-flow-node strong{color:var(--text-primary)}.phase4-flow-result{border-color:#7c66d6}.phase4-flow-result code{color:var(--accent-green);overflow-wrap:anywhere}.phase4-flow>i,.phase4-choice-arrow,.phase4-validation-flow>i{color:var(--accent);text-align:center;font-style:normal}.phase4-learn-controls{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.phase4-learn-controls>span{color:var(--text-muted);margin-right:5px;font-size:10px}.phase4-learn-controls button{color:var(--text-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);background:#08132299;padding:7px 9px;font-size:10px}.phase4-input-lesson-stage,.phase4-select-lesson-stage{grid-template-columns:minmax(0,1fr) minmax(180px,.9fr);align-items:center;gap:12px;display:grid}.phase4-input-source,.phase4-choice-box{border-radius:var(--radius-md);background:#071220a6;border:1px solid #5275a4;gap:8px;padding:14px;display:grid}.phase4-input-source code,.phase4-choice-box code{color:#ffc982;font:11px var(--font-mono)}.phase4-input-source span,.phase4-choice-box strong{color:var(--text-secondary);font-size:11px}.phase4-native-preview{color:var(--text-muted);gap:7px;font-size:10px;display:grid}.phase4-native-preview input,.phase4-choice-result input,.phase4-choice-result select{color:#1d344d;background:#fff;border:1px solid #a7b8cb;border-radius:5px;min-width:0;padding:9px}.phase4-state-lane{flex-wrap:wrap;grid-column:1/-1;gap:6px;display:flex}.phase4-state-lane span{color:var(--accent-green);font:10px var(--font-mono);background:#359d7526;border:1px solid #359d7559;border-radius:999px;padding:5px 8px}.phase4-button-lesson{gap:10px;max-width:520px;margin:auto;display:grid}.phase4-button-lesson textarea{color:#1d344d;background:#fff;border:1px solid #a7b8cb;border-radius:5px;min-height:100px;padding:10px}.phase4-button-lane button{color:#fff;background:#6554d8;border:0;border-radius:4px;padding:7px 10px}.phase4-button-lesson>strong{color:var(--accent-green);font:11px var(--font-mono)}.phase4-validation-flow{grid-template-columns:1fr 25px 1fr 25px 1fr;align-items:center;gap:8px;display:grid}.phase4-validation-flow>div{text-align:center;border-radius:var(--radius-md);background:#081221ad;border:1px solid #5275a4;align-content:center;gap:6px;min-height:78px;padding:11px;display:grid}.phase4-validation-flow code{color:#ffc982;font:10px var(--font-mono)}.phase4-validation-value strong{color:var(--text-primary);font-size:12px}.phase4-validation-value span{color:#ffbf73;font:10px var(--font-mono)}.phase4-validation-flow>div.valid{color:var(--accent-green);border-color:#4ccb99b3}.phase4-validation-flow>div.invalid{color:#ff8790;border-color:#ff727fb3}@media (width<=1180px){.phase4-docs-col{grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr))}.phase4-primary{grid-column:1/-1}.phase4-code{grid-column:1/-1;min-height:420px}.phase4-code .code-panel{min-height:420px}}@media (width<=760px){.phase4-primary{flex-direction:column;display:flex}.phase4-playground{min-height:0}.phase4-code,.phase4-code .code-panel{min-height:360px}.phase4-docs-col{grid-template-columns:1fr;display:grid}.phase4-example-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.phase4-compare,.phase4-flow,.phase4-input-lesson-stage,.phase4-select-lesson-stage,.phase4-validation-flow{grid-template-columns:1fr}.phase4-flow>i,.phase4-choice-arrow,.phase4-validation-flow>i{transform:rotate(90deg)}.phase4-state-lane{grid-column:auto}.phase4-example-card{min-height:100px}.phase4-learn-panel{padding:10px}.phase4-learn-visual{padding:11px}.phase4-field-row:has(>.phase4-field:nth-child(3)){grid-template-columns:1fr}}.native-controls-col,.native-inspector-col,.native-examples-col,.native-code-panel{min-width:0}.native-controls-col,.native-inspector-col,.native-examples-col{align-content:start;gap:var(--space-3);display:grid}.native-controls,.native-inspector,.native-docs,.native-examples{min-width:0;padding:var(--space-3)}.native-controls{align-content:start;gap:9px;display:grid}.native-section-title{color:var(--text-primary);letter-spacing:.02em;text-transform:uppercase;margin:0;font-size:11px;font-weight:700}.native-popover-heading{border-top:1px solid var(--border-subtle);padding-top:8px}.native-field{min-width:0;color:var(--text-muted);gap:4px;font-size:10px;display:grid}.native-field>span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.native-field input,.native-field select{width:100%;min-width:0;min-height:29px;color:var(--text-primary);background:var(--surface-raised);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);font:10px var(--font-ui);padding:6px 7px}.native-field input:focus,.native-field select:focus,.native-controls button:focus-visible,.native-example-card:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.native-toggle{color:var(--text-secondary);align-items:center;gap:6px;font-size:10px;display:flex}.native-toggle input{accent-color:var(--accent)}.native-action-row{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.native-action-row .btn{padding:6px 8px;font-size:10px}.native-state-note{color:var(--text-muted);font:9px var(--font-mono)}.native-number-row{grid-template-columns:minmax(0,1fr) 28px 28px;align-items:end;gap:5px;display:grid}.native-step-button{min-height:29px;color:var(--text-primary);background:var(--surface-raised);border:1px solid var(--border-subtle);border-radius:var(--radius-sm)}.native-result-panel{flex-direction:column;min-height:560px;display:flex;overflow:hidden}.native-result-panel>.panel-tabs{flex:none}.native-dialog-result,.native-value-result{min-height:0;padding:var(--space-3);flex:1;align-content:start;gap:14px;display:grid;overflow:auto}.native-result-heading{color:var(--text-primary);justify-content:space-between;align-items:baseline;gap:8px;font-size:11px;font-weight:700;display:flex}.native-result-heading small{color:var(--text-muted);font:9px var(--font-mono);font-weight:400}.native-result-actions{flex-wrap:wrap;gap:6px;display:flex}.native-result-actions .btn,.native-popover-result>.btn{padding:7px 10px;font-size:10px}.native-dialog-result dialog{z-index:4}.native-dialog{color:#1a2a40;background:#f7f9fc;border:0;border-radius:7px;width:min(320px,100vw - 40px);padding:0;box-shadow:0 22px 70px #00000080}.native-dialog::backdrop{background:#030b18a8}.native-dialog.no-backdrop::backdrop{background:0 0}.native-dialog form{gap:9px;padding:19px;display:grid;position:relative}.native-dialog h3{margin:0;font-size:15px}.native-dialog p{color:#334762;margin:0;font-size:11px;line-height:1.45}.native-dialog small{color:#697890;font-size:9px}.native-dialog menu{justify-content:end;gap:7px;margin:4px 0 0;padding:0;display:flex}.native-dialog menu button{color:#243653;background:#fff;border:1px solid #c9d3e1;border-radius:4px;padding:7px 10px;font-size:10px}.native-dialog menu button.danger,.native-popover button.danger{color:#fff;background:#c04450;border-color:#c04450}.native-dialog-x{color:#4c5c73;background:0 0;border:0;padding:0;font-size:18px;line-height:1;position:absolute;top:10px;right:12px}.native-popover-result{border-top:1px solid var(--border-subtle);align-content:start;gap:8px;min-height:180px;padding-top:13px;display:grid;position:relative}.native-popover{color:#243653;background:#fbfcff;border:1px solid #bdcadd;border-radius:6px;gap:2px;min-width:160px;margin:0;padding:7px;display:none;box-shadow:0 16px 46px #0000006b}.native-popover:popover-open{z-index:5;display:grid;position:fixed;inset:auto}.native-popover[open]{display:grid}.native-popover button{color:#263b58;text-align:left;background:0 0;border:0;border-radius:4px;padding:7px 8px;font-size:10px}.native-popover button:hover,.native-popover button:focus-visible{background:#eaf0fa;outline:none}.native-result-hint{color:var(--text-muted);font:9px var(--font-mono)}.native-progress-row{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;display:grid}.native-progress{accent-color:#4d85e5;width:100%;height:12px}.native-progress-green{accent-color:#41b889}.native-progress-red{accent-color:#d75c66}.native-progress-row strong{color:var(--text-primary);font:10px var(--font-mono)}.native-result-caption{color:var(--text-muted);margin:0;font-size:10px}.native-value-block{border:1px solid var(--border-subtle);border-radius:var(--radius-sm);background:#0712207a;gap:9px;padding:11px;display:grid}.native-value-block label{color:var(--text-secondary);font-size:10px}.native-meter-visual{gap:3px;display:grid}.native-meter-scale{border-radius:4px;grid-template-columns:1fr 1fr 1fr 1fr;height:16px;display:grid;position:relative;overflow:visible}.native-meter-scale i{border-right:1px solid #07122073;display:block}.native-meter-scale .low{background:#d4494c}.native-meter-scale .medium{background:#e4a738}.native-meter-scale .high{background:#71ba6d}.native-meter-scale .optimum{background:#4f9e78}.native-meter-scale b{color:var(--text-primary);font:10px var(--font-mono);position:absolute;top:-17px;transform:translate(-50%)}.native-meter-scale b:after{content:"";background:var(--text-primary);width:2px;height:23px;position:absolute;top:15px;left:50%}.native-meter-labels{color:var(--text-muted);font:8px var(--font-mono);justify-content:space-between;display:flex}.native-meter{accent-color:#65b27d;width:100%;height:11px}.native-output-line{grid-template-columns:minmax(70px,1fr) auto minmax(50px,.65fr);align-items:center;gap:8px;display:grid}.native-output-line input{color:#213752;background:#fff;border:1px solid #aebed0;border-radius:4px;min-width:0;padding:7px;font-size:11px}.native-output-line span{color:var(--text-muted);font:11px var(--font-mono)}.native-output-line output{color:#4cc398;font:12px var(--font-mono);text-align:center;background:#379b741f;border:1px solid #4cc39866;border-radius:4px;padding:7px 8px}.native-code-panel{min-height:0;display:flex}.native-code-panel>.code-panel{width:100%;height:560px;min-height:520px;max-height:calc(100vh - 180px)}.native-code-panel .code-views,.native-code-panel .code-editor-block,.native-code-panel .code-editor-wrapper,.native-code-panel .code-editor-surface{min-height:0}.native-info-list{grid-template-columns:minmax(75px,.9fr) minmax(0,1.1fr);gap:8px 9px;margin:10px 0 0;font-size:10px;display:grid}.native-info-list dt{color:var(--text-muted)}.native-info-list dd{overflow-wrap:anywhere;min-width:0;color:var(--text-secondary);font-family:var(--font-mono);margin:0}.native-docs ul{color:var(--text-secondary);gap:8px;margin:11px 0 0;padding-left:15px;font-size:10px;line-height:1.45;display:grid}.native-docs code,.native-compare code{color:var(--syntax-property);font-family:var(--font-mono)}.native-examples{align-content:start;gap:9px;display:grid}.native-example-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;display:grid}.native-example-card{min-width:0;min-height:94px;color:var(--text-primary);background:var(--surface-raised);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);text-align:left;align-content:start;gap:5px;padding:7px;display:grid}.native-example-card:hover,.native-example-card.active{border-color:var(--accent);background:linear-gradient(135deg,#5a47b252,#183551cc)}.native-example-card.active{box-shadow:inset 0 0 0 1px #ae95ff7a}.native-example-card strong{text-overflow:ellipsis;white-space:nowrap;font-size:9px;overflow:hidden}.native-example-card small{min-height:20px;color:var(--text-muted);font-size:8px;line-height:1.25}.native-card-preview{background:#edf3fb;border:1px solid #a9b9cc;border-radius:4px;height:43px;display:block;position:relative;overflow:hidden}.native-preview-anchor{background:#5a82c6;border-radius:2px;width:35%;height:7px;position:absolute;top:8px;left:9px}.native-preview-window{background:#dfe8f5;border:2px solid #755ed2;border-radius:3px;width:57%;height:17px;position:absolute;top:19px;left:22%}.native-preview-line{background:#7289a7;width:35%;height:2px;position:absolute;top:25px;left:30%}.native-preview-line.short{width:22%;top:30px}.native-card-preview.is-dialog:after{content:"";background:#232f4638;position:absolute;inset:0}.native-card-preview.is-popover .native-preview-window{border-color:#4f9b7b;width:40%;height:22px;left:42%}.native-card-preview.is-popover:after{content:"";background:#4f82c4;width:21%;height:3px;position:absolute;top:18px;left:18%}.native-card-preview.is-progress i{background:#d5dfed;border:1px solid #89a0bd;border-radius:4px;width:80%;height:7px;position:absolute;top:20px;left:10%}.native-card-preview.is-progress i:after{content:"";border-radius:inherit;background:#4f86e5;width:75%;height:100%;display:block}.native-card-preview.is-progress.indeterminate i:after{background:repeating-linear-gradient(135deg,#4f86e5 0 6px,#7eaaf2 6px 12px);width:100%}.native-card-preview.is-meter i{background:linear-gradient(90deg,#d65152 0 30%,#e4ad42 30% 60%,#63a86e 60%);border-radius:3px;width:80%;height:8px;position:absolute;top:19px;left:10%}.native-card-preview.is-meter b{background:#243d58;width:2px;height:18px;position:absolute;top:14px;left:60%}.native-card-preview.is-meter em{background:#8fa2bb;width:80%;height:2px;position:absolute;top:31px;left:10%}.native-card-preview.is-output i{background:#fff;border:1px solid #9fb1c8;border-radius:2px;width:27%;height:10px;position:absolute;top:17px;left:13%}.native-card-preview.is-output b{color:#58719c;font-size:12px;position:absolute;top:15px;left:46%}.native-card-preview.is-output strong{color:#3ea878;font:11px var(--font-mono);position:absolute;top:16px;right:13%}.native-compare{min-height:0;padding:var(--space-3);grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr);align-items:start;gap:8px;display:grid;overflow:auto}.native-compare-card{border:1px solid var(--border-subtle);border-radius:var(--radius-sm);background:#0712207a;align-content:start;gap:9px;min-height:300px;padding:12px;display:grid}.native-compare-kicker{color:var(--text-muted);letter-spacing:.06em;font-size:9px;font-weight:700}.native-compare-window{color:#253b57;font:11px var(--font-mono);text-align:center;background:#f3f6fb;border:2px solid #745bd2;border-radius:5px;gap:5px;padding:18px 9px;display:grid}.native-compare-window b{color:#9a5e66;font:9px var(--font-ui)}.native-compare-window small{color:#61728c;font:9px var(--font-ui)}.native-compare-trigger{color:var(--text-secondary);font:10px var(--font-mono);border:1px dashed #4a789c;border-radius:5px;gap:8px;padding:15px 8px;display:grid}.native-compare-trigger i{color:var(--accent);text-align:center}.native-compare-trigger b{color:#29415d;font:10px var(--font-ui);text-align:center;background:#f3f6fb;border-radius:4px;padding:8px}.native-compare-card ul{color:var(--text-secondary);gap:5px;margin:0;padding-left:15px;font-size:10px;line-height:1.45;display:grid}.native-compare-arrow{color:var(--accent);font:10px var(--font-mono);text-align:center;align-self:center}.native-compare-note{color:var(--text-muted);grid-column:1/-1;margin:0;font-size:10px}.native-value-compare{grid-template-columns:repeat(3,minmax(0,1fr))}.native-value-compare .native-compare-card{min-height:250px}.native-value-compare .native-compare-card code{color:var(--syntax-property);font:11px var(--font-mono)}.native-value-compare .native-compare-card strong{color:var(--text-primary);font-size:12px}.native-value-compare .native-compare-card small{color:var(--text-muted);font-size:10px;line-height:1.4}.mini-progress{background:#dbe4f0;border-radius:4px;height:9px}.mini-progress i{border-radius:inherit;background:#4f86e5;width:70%;height:100%;display:block}.mini-meter{background:linear-gradient(90deg,#d65152 0 30%,#e4ad42 30% 60%,#63a86e 60%);border-radius:3px;height:12px;position:relative}.mini-meter i{background:#253c58;width:2px;height:17px;position:absolute;left:70%}.mini-output{color:var(--text-secondary);border:1px solid var(--border-subtle);font:10px var(--font-mono);border-radius:4px;justify-content:center;gap:7px;padding:8px;display:flex}.mini-output b{color:var(--accent-green)}.native-learn-panel{gap:14px;display:grid}.native-learn-header{justify-content:space-between;align-items:end;gap:15px;display:flex}.native-learn-header h1{margin:3px 0 5px;font-size:25px}.native-learn-header p{color:var(--text-secondary);margin:0;font-size:12px}.native-learn-kicker{color:var(--accent-green);font:9px var(--font-mono);letter-spacing:.08em}.native-learn-visual{border:1px solid var(--border);border-radius:var(--radius-md);background:linear-gradient(135deg,#1b304bdb,#2e224fb8);gap:16px;padding:18px;display:grid}.native-learn-stepper{justify-content:space-between;align-items:start;gap:15px;display:flex}.native-learn-stepper h2{margin:4px 0;font-size:16px}.native-learn-stepper p{max-width:620px;color:var(--text-secondary);margin:0;font-size:11px;line-height:1.5}.native-step-buttons{flex-wrap:wrap;justify-content:end;gap:5px;display:flex}.native-step-buttons button{color:var(--text-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);background:#081322a6;padding:7px 8px;font-size:10px}.native-step-buttons button.active,.native-step-buttons button:hover{color:#fff;background:var(--accent);border-color:var(--accent)}.native-dialog-lesson-map{grid-template-columns:minmax(0,1fr) 28px minmax(150px,.8fr) 28px minmax(0,1fr);align-items:center;gap:9px;display:grid}.native-dialog-lesson-map>i{color:var(--accent);text-align:center}.native-lesson-page,.native-lesson-trigger,.native-lesson-popover{border-radius:var(--radius-md);background:#081322ad;border:1px solid #5375a4;align-content:center;gap:8px;min-height:110px;padding:13px;display:grid}.native-lesson-page>span,.native-lesson-trigger>span{color:var(--text-muted);font-size:10px}.native-lesson-page>div{color:var(--text-secondary);font:10px var(--font-mono);border:1px dashed #587da8;border-radius:4px;gap:4px;padding:12px 7px;display:grid}.native-lesson-page>div.lesson-dialog-open{color:#2b3b57;background:#f5f7fb;border-color:#7d64d4}.native-lesson-page small{font:9px var(--font-ui)}.native-lesson-trigger button{color:#fff;background:var(--accent);border:0;border-radius:4px;padding:8px;font-size:10px}.native-lesson-popover>b{color:var(--text-secondary);font:10px var(--font-mono)}.native-lesson-popover>div{color:var(--text-muted);border:1px dashed #5a86a5;border-radius:4px;padding:9px;font-size:10px}.native-lesson-popover>div.lesson-popover-open{color:#29415d;background:#eef3fb;border-color:#54b087}.native-learn-concepts{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;display:grid}.native-learn-concepts span{border:1px solid var(--border-subtle);border-radius:var(--radius-sm);background:#081322a6;gap:4px;padding:8px;display:grid}.native-learn-concepts code{color:var(--syntax-property);font:10px var(--font-mono)}.native-learn-concepts b{color:var(--text-secondary);font-size:10px;font-weight:500}.native-value-lesson-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;display:grid}.native-lesson-value-card{border-radius:var(--radius-md);background:#081322ad;border:1px solid #5275a4;gap:8px;padding:14px;display:grid}.native-lesson-value-card code{color:#ffc982;font:11px var(--font-mono)}.native-lesson-value-card strong{color:var(--text-primary)}.native-lesson-value-card small{color:var(--text-muted);font-size:10px;line-height:1.4}.native-lesson-value-card progress,.native-lesson-value-card meter{width:100%}.native-output-lesson-arrow{color:var(--text-secondary);font:11px var(--font-mono)}.native-output-lesson-arrow span{color:var(--accent)}.native-learn-try{border:1px solid var(--border);border-radius:var(--radius-md);background:linear-gradient(90deg,#233d58cc,#342753b3);justify-content:space-between;align-items:center;gap:12px;padding:11px 13px;display:flex}.native-learn-try div{gap:3px;display:grid}.native-learn-try strong{color:var(--text-primary);font-size:12px}.native-learn-try span{color:var(--text-secondary);font-size:10px}.native-learn-try button{color:#fff;background:linear-gradient(135deg,#6851dc,#8a53e8);border-color:#0000}@media (width<=1540px){.native-examples-col{grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr))}.native-examples-col .native-examples{min-width:0}}@media (width<=1000px){.native-controls-col{grid-column:1}.native-result-panel{grid-column:2}.native-code-panel,.native-inspector-col,.native-examples-col{grid-column:1/-1}.native-inspector-col{grid-template-columns:repeat(2,minmax(0,1fr))}.native-code-panel>.code-panel{max-height:none}}@media (width<=760px){.native-result-panel{min-height:470px}.native-code-panel>.code-panel{height:520px;min-height:420px}.native-inspector-col,.native-examples-col{flex-direction:column;display:flex}.native-example-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.native-compare,.native-value-compare,.native-dialog-lesson-map,.native-value-lesson-grid{grid-template-columns:1fr}.native-compare-arrow,.native-dialog-lesson-map>i{transform:rotate(90deg)}.native-learn-stepper{flex-direction:column;align-items:stretch}.native-step-buttons{justify-content:start}.native-learn-concepts{grid-template-columns:1fr}.native-learn-try{flex-direction:column;align-items:stretch}.native-learn-try .btn{width:100%}.native-popover-bottom,.native-popover-top,.native-popover-left,.native-popover-right{inset:auto 24px 22%}.native-output-line{grid-template-columns:minmax(70px,1fr) auto minmax(50px,.7fr)}}@media (prefers-reduced-motion:reduce){.native-card-preview.is-progress.indeterminate i:after{background:#5e8dde}}.data-workspace{gap:var(--space-3);grid-template-columns:minmax(188px,.82fr) minmax(320px,1.18fr) minmax(300px,1.08fr) minmax(190px,.8fr) minmax(250px,.96fr);align-items:stretch;min-width:0;display:grid}.data-controls-col,.data-inspector-col,.data-examples-col,.data-code-panel{min-width:0}.data-controls-col,.data-inspector-col,.data-examples-col{align-content:start;gap:var(--space-3);display:grid}.data-controls,.data-inspector,.data-tree-panel,.data-docs,.data-examples{min-width:0;padding:var(--space-3)}.data-controls{align-content:start;gap:9px;display:grid}.data-section-title{color:var(--text-primary);letter-spacing:.02em;text-transform:uppercase;margin:0;font-size:11px;font-weight:700}.data-control-group{border-top:1px solid var(--border-subtle);gap:7px;padding-top:8px;display:grid}.data-control-label{color:var(--text-secondary);font-size:10px;font-weight:700}.data-toggle{color:var(--text-secondary);align-items:center;gap:6px;font-size:10px;display:flex}.data-toggle input{accent-color:var(--accent)}.data-field{min-width:0;color:var(--text-muted);gap:4px;font-size:10px;display:grid}.data-field>span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.data-field input,.data-field select,.data-field textarea{width:100%;min-width:0;min-height:29px;color:var(--text-primary);background:var(--surface-raised);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);font:10px var(--font-ui);padding:6px 7px}.data-field textarea{resize:vertical;min-height:68px;line-height:1.35}.data-action-row{flex-wrap:wrap;gap:6px;display:flex}.data-action-row .btn,.data-controls>.btn{padding:6px 8px;font-size:10px}.data-hint,.data-muted,.data-empty{color:var(--text-muted);margin:4px 0 0;font-size:10px;line-height:1.45}.data-result-panel{flex-direction:column;min-height:560px;display:flex;overflow:hidden}.data-result-panel>.panel-tabs{flex:none}.data-result{min-height:0;padding:var(--space-3);flex:1;align-content:start;gap:13px;display:grid;overflow:auto}.data-result-heading{color:var(--text-primary);justify-content:space-between;align-items:baseline;gap:8px;font-size:11px;font-weight:700;display:flex}.data-result-heading small{color:var(--text-muted);font:9px var(--font-mono);font-weight:400}.data-code-panel{min-height:0;display:flex}.data-code-panel>.code-panel{width:100%;height:560px;min-height:520px;max-height:calc(100vh - 180px)}.data-code-panel .code-views,.data-code-panel .code-editor-block,.data-code-panel .code-editor-wrapper,.data-code-panel .code-editor-surface{min-height:0}.data-info-list{grid-template-columns:minmax(72px,.8fr) minmax(0,1.2fr);gap:8px 9px;margin:10px 0 0;font-size:10px;display:grid}.data-info-list>div{display:contents}.data-info-list dt{color:var(--text-muted)}.data-info-list dd{overflow-wrap:anywhere;min-width:0;color:var(--text-secondary);font-family:var(--font-mono);margin:0}.data-docs ul{color:var(--text-secondary);gap:8px;margin:10px 0 0;padding-left:15px;font-size:10px;line-height:1.45;display:grid}.data-docs code,.data-info-list dd,.data-compare code{color:var(--syntax-property);font-family:var(--font-mono)}.data-table-stage{grid-template-columns:minmax(0,1.25fr) minmax(150px,.75fr);align-items:start;gap:10px;display:grid}.table-result-wrap{border:1px solid var(--border-subtle);border-radius:var(--radius-sm);background:#07122080;min-width:0;padding:8px;overflow:auto}.data-table{border-collapse:collapse;width:100%;color:var(--text-secondary);font-size:10px}.data-table caption{color:var(--text-primary);caption-side:top;padding:0 0 9px;font-size:11px}.data-table th,.data-table td{text-align:left;border:1px solid #58749759;min-width:46px;padding:8px 7px}.data-table th{color:#f1f5ff;background:#3a527780;font-weight:700}.data-table td{background:#12274061}.data-table th[scope=row]{color:#b7d7ff;background:#2250687a}.data-table th:hover,.data-table td:hover,.data-table th.selected,.data-table td.selected{outline:2px solid var(--accent);outline-offset:-2px;cursor:pointer;background:#654fd152}.data-structure-tree{color:var(--text-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);font:9px/1.5 var(--font-mono);background:#07122080;align-content:start;gap:5px;padding:9px;display:grid;overflow:auto}.data-structure-tree>strong{color:var(--accent-green)}.data-structure-tree>span{color:var(--syntax-property)}.data-structure-tree .tree-row{gap:2px;display:grid}.data-structure-tree button{color:var(--text-muted);text-align:left;font:inherit;background:0 0;border:0;padding:2px 3px}.data-structure-tree button:hover,.data-structure-tree button.selected{color:var(--text-primary);background:var(--accent-subtle-bg)}.data-relationship{color:var(--text-muted);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);background:#244a662e;flex-wrap:wrap;align-items:center;gap:7px;padding:8px;font-size:9px;display:flex}.data-relationship code{color:var(--syntax-string);font:9px var(--font-mono)}.data-relationship span{color:var(--accent)}.semantic-result{gap:10px}.semantic-page{border-radius:var(--radius-md);background:#091525b8;border:1px solid #5275a4;grid-template-rows:auto auto auto;grid-template-columns:minmax(0,1fr) minmax(95px,.35fr);gap:7px;min-height:330px;padding:9px;display:grid}.semantic-region{min-width:0;min-height:54px;color:var(--text-primary);font:10px var(--font-mono);border:1px solid #88a5c26b;border-radius:5px;outline:none;align-content:start;gap:6px;padding:8px;display:grid}.semantic-region>span{color:#e9effc}.semantic-region>small{color:var(--text-muted);font:9px var(--font-ui)}.semantic-region.selected{border-color:var(--accent);box-shadow:inset 0 0 0 1px #ad96ff66}.semantic-region:focus-visible{outline:2px solid var(--focus-ring);outline-offset:1px}.semantic-header,.semantic-nav,.semantic-footer{grid-column:1/-1}.semantic-header{background:#276c5e6b;border-color:#3c9b81}.semantic-nav{background:#215b796b;border-color:#4b8db0}.semantic-main{background:#2a437e59;border-color:#5f80ce;grid-area:3/1;min-height:180px}.semantic-aside{background:#77562959;border-color:#c29a53;grid-area:3/2;min-height:180px}.semantic-footer{background:#82413d59;border-color:#c8756d}.semantic-article{background:#5139775c;border-color:#9a7ad4}.semantic-section{background:#74395759;border-color:#cf7e9c}.semantic-children{grid-template-columns:minmax(0,1fr);gap:6px;min-width:0;display:grid}.semantic-main>.semantic-children{grid-template-columns:minmax(0,1.5fr) minmax(80px,.7fr)}.semantic-main>.semantic-children>.semantic-aside{grid-column:2}.semantic-main>.semantic-children>.semantic-article,.semantic-main>.semantic-children>.semantic-section{grid-column:1}.semantic-landmarks{color:var(--text-muted);flex-wrap:wrap;align-items:center;gap:6px;font-size:9px;display:flex}.semantic-landmarks span{width:100%;color:var(--text-secondary);font-weight:700}.semantic-landmarks b{color:var(--accent-green);font:9px var(--font-mono);background:#2f937026;border:1px solid #4cc3984d;border-radius:4px;padding:4px 6px;font-weight:400}.data-tree-panel{min-height:150px}.semantic-tree-row{gap:2px;display:grid}.semantic-tree-row button{width:100%;color:var(--text-secondary);text-align:left;font:10px var(--font-mono);background:0 0;border:0;border-radius:3px;padding:4px 5px}.semantic-tree-row button:hover,.semantic-tree-row button.selected{color:var(--text-primary);background:var(--accent-subtle-bg)}.details-result{gap:10px}.details-result details{color:var(--text-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);background:#142a4580}.details-result details[open]{background:#2e397057;border-color:#6483cc}.details-result summary{color:var(--text-primary);cursor:pointer;padding:10px;font-size:11px;font-weight:700}.details-result details p{color:var(--text-secondary);margin:0;padding:0 10px 11px;font-size:10px;line-height:1.45}.details-flow{color:var(--text-muted);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);background:#244a662e;flex-wrap:wrap;align-items:center;gap:7px;padding:8px;font-size:9px;display:flex}.details-flow b{color:var(--accent)}.data-examples{align-content:start;gap:9px;display:grid}.data-example-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;display:grid}.data-example-card{min-width:0;min-height:94px;color:var(--text-primary);background:var(--surface-raised);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);text-align:left;align-content:start;gap:5px;padding:7px;display:grid}.data-example-card:hover,.data-example-card.active{border-color:var(--accent);background:linear-gradient(135deg,#5a47b252,#183551cc)}.data-example-card.active{box-shadow:inset 0 0 0 1px #ae95ff7a}.data-example-card strong{text-overflow:ellipsis;white-space:nowrap;font-size:9px;overflow:hidden}.data-example-card small{min-height:20px;color:var(--text-muted);font-size:8px;line-height:1.25}.data-mini{background:#edf3fb;border:1px solid #a9b9cc;border-radius:4px;height:43px;display:block;position:relative;overflow:hidden}.data-mini-table{grid-template-rows:8px repeat(2,8px);grid-template-columns:repeat(4,1fr);gap:2px;padding:6px;display:grid}.data-mini-table i,.data-mini-table b{background:#6886b2;border-radius:1px;display:block}.data-mini-table i{background:#526d97}.data-mini-table b{background:#b5c8df}.data-mini-table.has-row-head b:first-of-type{background:#68a98b}.data-mini-table.has-span i:nth-child(2){grid-column:span 2}.data-mini-semantic{grid-template-rows:7px 7px 18px 5px;grid-template-columns:1fr 2fr 1fr;gap:2px;padding:4px;display:grid}.data-mini-semantic i{background:#a5b7d0;border-radius:1px;display:block}.data-mini-semantic .mini-header,.data-mini-semantic .mini-nav,.data-mini-semantic .mini-footer{background:#5f82c4;grid-column:1/-1}.data-mini-semantic .mini-nav{background:#8d76d5}.data-mini-semantic .mini-main{background:#61a486;grid-column:1/3}.data-mini-semantic .mini-aside{background:#d2a44f}.data-mini-details{padding:6px}.data-mini-details i{background:#5e81c2;border-radius:2px;width:66%;height:7px;display:block}.data-mini-details b{background:#bccce0;border:1px solid #5a78be;border-radius:2px;width:54%;height:10px;position:absolute;top:17px;left:18%}.data-mini-details em{background:#7e95b5;width:40%;height:3px;position:absolute;top:30px;left:25%}.data-mini-details em.short{width:27%;top:35px}.data-compare{min-height:0;padding:var(--space-3);flex:1;grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr);align-items:start;gap:8px;display:grid;overflow:auto}.data-compare-card{border:1px solid var(--border-subtle);border-radius:var(--radius-sm);background:#0712207a;align-content:start;gap:9px;min-height:300px;padding:12px;display:grid}.data-kicker{color:var(--text-muted);letter-spacing:.06em;font-size:9px;font-weight:700}.data-compare-card p{color:var(--text-secondary);margin:0;font-size:10px;line-height:1.45}.data-compare-window{color:#29415d;font:10px var(--font-mono);background:#f3f6fb;border:2px solid #745bd2;border-radius:5px;grid-template-columns:repeat(2,1fr);gap:3px;padding:12px 7px;display:grid}.data-compare-window span,.data-compare-window b{background:#dce5f1;padding:6px}.data-compare-window b{color:#29415d;background:#cedcf1}.data-compare-window.semantic-table{border-color:#54a981}.data-compare-arrow{color:var(--accent);font:10px var(--font-mono);text-align:center;align-self:center}.generic-page-map,.semantic-page-map{border:1px dashed #5275a4;border-radius:5px;grid-template-columns:repeat(2,1fr);gap:5px;padding:11px;display:grid}.generic-page-map i,.semantic-page-map i{color:var(--text-secondary);font:10px var(--font-mono);text-align:center;background:#334d6e94;border-radius:3px;padding:9px 5px}.semantic-page-map i{color:#dce7ff;background:#49639b9e}.semantic-page-map i:nth-child(3),.semantic-page-map i:nth-child(4){grid-column:span 2}.details-compare-box{color:#29415d;background:#f3f6fb;border:2px solid #745bd2;border-radius:5px;gap:10px;min-height:110px;padding:13px;display:grid}.details-compare-box summary{color:#263d5b;font:11px var(--font-ui)}.details-compare-box small{color:#61728c;font:9px var(--font-ui)}.details-compare-box.open{border-color:#54a981}.details-compare-box.open small{background:#e4eef7;padding:8px}.data-learn-panel{gap:14px;display:grid}.data-learn-hero{justify-content:space-between;align-items:end;gap:15px;padding:0;display:flex}.data-learn-kicker{color:var(--accent-green);font:9px var(--font-mono);letter-spacing:.08em}.data-learn-hero h2{margin:4px 0;font-size:25px}.data-learn-hero p{color:var(--text-secondary);margin:0;font-size:12px}.data-step-buttons{flex-wrap:wrap;justify-content:end;gap:5px;display:flex}.data-step-buttons button{color:var(--text-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);background:#081322a6;padding:7px 8px;font-size:10px}.data-step-buttons button.active,.data-step-buttons button:hover{color:#fff;background:var(--accent);border-color:var(--accent)}.data-learn-visual{border:1px solid var(--border);border-radius:var(--radius-md);background:linear-gradient(135deg,#1b304bdb,#2e224fb8);grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr);align-items:center;gap:10px;min-height:260px;padding:18px;display:grid}.learn-visual-source,.learn-visual-result{border-radius:var(--radius-md);background:#081322ad;border:1px solid #5275a4;align-content:center;gap:9px;min-height:140px;padding:15px;display:grid}.learn-visual-source code{color:#ffc982;font:12px var(--font-mono)}.learn-visual-source span{color:var(--text-muted);font-size:11px}.learn-visual-arrow{color:var(--accent);font:18px var(--font-mono);text-align:center}.learn-visual-result{color:var(--text-primary)}.learn-mini-table{grid-template-columns:repeat(3,1fr);gap:4px;display:grid}.learn-mini-table i,.learn-mini-table b{background:#607fc3;border-radius:3px;height:24px}.learn-mini-table b{background:#6ab08f}.learn-mini-page{grid-template-columns:repeat(3,1fr);gap:5px;display:grid}.learn-mini-page i{color:var(--text-muted);font:10px var(--font-mono);text-align:center;background:#424f6a73;border-radius:3px;padding:14px 5px}.learn-mini-page i.on{color:#fff;background:#488471b8}.learn-mini-details{gap:9px;display:grid}.learn-mini-details b,.learn-mini-details span{color:#29415d;background:#f3f6fb;border-radius:4px;padding:10px;font-size:10px}.learn-mini-details span{background:#dfeaf5;display:none}.learn-mini-details.open span{display:block}.data-learn-footer{color:var(--text-secondary);border:1px solid var(--border);border-radius:var(--radius-md);background:linear-gradient(90deg,#233d58cc,#342753b3);justify-content:space-between;align-items:center;gap:12px;padding:11px 13px;font-size:10px;display:flex}.data-learn-footer .btn{color:#fff;background:linear-gradient(135deg,#6851dc,#8a53e8);border-color:#0000}@media (width<=1540px){.data-workspace{grid-template-columns:minmax(180px,.82fr) minmax(280px,1.1fr) minmax(280px,1fr) minmax(190px,.8fr)}.data-examples-col{grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=1000px){.data-workspace{grid-template-columns:minmax(0,1fr) minmax(300px,1fr)}.data-controls-col{grid-column:1}.data-result-panel{grid-column:2}.data-code-panel,.data-inspector-col,.data-examples-col{grid-column:1/-1}.data-inspector-col{grid-template-columns:repeat(2,minmax(0,1fr))}.data-code-panel>.code-panel{max-height:none}}@media (width<=760px){.data-workspace{flex-direction:column;display:flex}.data-result-panel{min-height:470px}.data-code-panel>.code-panel{height:520px;min-height:420px}.data-inspector-col,.data-examples-col{flex-direction:column;display:flex}.data-example-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.data-table-stage,.data-compare,.data-learn-visual{grid-template-columns:1fr}.semantic-page{grid-template-columns:1fr;min-height:360px}.semantic-main,.semantic-aside{grid-area:auto/1;min-height:110px}.semantic-main>.semantic-children{grid-template-columns:1fr}.semantic-main>.semantic-children>.semantic-aside,.semantic-main>.semantic-children>.semantic-article,.semantic-main>.semantic-children>.semantic-section{grid-column:1}.data-compare-arrow,.learn-visual-arrow{transform:rotate(90deg)}.data-learn-hero{flex-direction:column;align-items:stretch}.data-step-buttons{justify-content:start}.data-learn-footer{flex-direction:column;align-items:stretch}.data-learn-footer .btn{width:100%}.data-relationship{flex-direction:column;align-items:start}}@media (prefers-reduced-motion:reduce){.data-learn-visual *{transition:none!important;animation:none!important}}.final-controls-col,.final-code,.final-inspector-col,.final-examples-col{min-width:0}.final-controls-col,.final-inspector-col,.final-examples-col{align-content:start;gap:var(--space-3);display:grid}.final-controls,.final-inspector,.final-notes,.final-examples{padding:var(--space-3)}.final-controls{align-content:start;gap:8px;display:grid}.final-section-title{color:var(--text-primary);letter-spacing:.025em;text-transform:uppercase;margin:0;font-size:11px;font-weight:700}.final-field{min-width:0;color:var(--text-muted);gap:4px;font-size:10px;display:grid}.final-field>span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.final-field input,.final-field select,.final-field textarea{box-sizing:border-box;width:100%;min-width:0;min-height:29px;color:var(--text-primary);background:var(--surface-raised);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);font:10px var(--font-ui);padding:6px 7px}.final-field textarea{resize:vertical;min-height:58px;line-height:1.35}.final-field input[type=number]{font-family:var(--font-mono)}.final-field-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;display:grid}.final-toggle{color:var(--text-secondary);font:10px var(--font-mono);align-items:center;gap:6px;padding:4px 0;display:flex}.final-toggle input{accent-color:var(--accent)}.final-control-divider{color:var(--text-muted);border-top:1px solid var(--border-subtle);letter-spacing:.06em;text-transform:uppercase;margin-top:3px;padding-top:8px;font-size:9px;font-weight:700}.final-action-row{flex-wrap:wrap;gap:6px;display:flex}.final-action-row .btn{padding:6px 8px;font-size:10px}.final-segmented{border:1px solid var(--border-subtle);border-radius:var(--radius-sm);grid-template-columns:repeat(2,1fr);display:grid;overflow:hidden}.final-segmented button{color:var(--text-secondary);background:var(--surface-raised);border:0;border-right:1px solid var(--border-subtle);cursor:pointer;padding:7px;font-size:10px}.final-segmented button:last-child{border-right:0}.final-segmented button.active{color:#fff;background:var(--accent)}.final-result-panel{flex-direction:column;min-width:0;min-height:510px;display:flex;overflow:hidden}.final-result-panel>.panel-tabs{flex:none}.final-result{min-height:0;padding:var(--space-3);flex:1;display:grid;overflow:auto}.final-code{min-height:0;display:flex}.final-code>.code-panel{width:100%;min-width:0;height:510px;min-height:500px;max-height:calc(100vh - 178px)}.final-code .code-views,.final-code .code-editor-block,.final-code .code-editor-wrapper,.final-code .code-editor-surface{min-height:0}.final-info-list{grid-template-columns:minmax(74px,.76fr) minmax(0,1.24fr);gap:7px 8px;margin:9px 0 0;font-size:10px;display:grid}.final-info-list dt{color:var(--text-muted)}.final-info-list dd{overflow-wrap:anywhere;min-width:0;color:var(--text-secondary);font-family:var(--font-mono);margin:0}.final-notes p{color:var(--text-secondary);margin:8px 0 0;font-size:10px;line-height:1.45}.metadata-result{grid-template-columns:minmax(0,1.25fr) minmax(145px,.75fr);align-content:start;gap:10px}.metadata-browser{color:#1f2e46;border-radius:var(--radius-sm);background:#f1f5fb;border:1px solid #7c93b4;overflow:hidden}.metadata-browser-bar{color:#3d506c;min-height:28px;font:9px var(--font-mono);background:#d6e0ec;border-bottom:1px solid #9cacc3;align-items:center;gap:4px;padding:0 8px;display:flex}.metadata-browser-bar i{background:#e07178;border-radius:50%;width:7px;height:7px}.metadata-browser-bar i:nth-child(2){background:#e4b556}.metadata-browser-bar i:nth-child(3){background:#52b580}.metadata-browser-bar span{text-overflow:ellipsis;white-space:nowrap;min-width:0;margin-left:4px;overflow:hidden}.metadata-address{color:#61738d;font:8px var(--font-mono);background:#fff;border:1px solid #bcc9d9;border-radius:4px;margin:7px 8px;padding:4px 6px}.metadata-body{gap:10px;min-height:164px;padding:15px;display:grid}.metadata-body h2{color:#17243b;margin:0;font-size:18px}.metadata-body p{color:#496079;margin:0;font-size:11px;line-height:1.45}.metadata-body div{color:#fff;border-radius:4px;padding:11px;font-size:10px}.metadata-head-map{border-radius:var(--radius-sm);background:#1a44684d;border:1px solid #3c84b5;align-content:start;gap:5px;padding:9px;display:grid}.metadata-head-map>strong{color:#9dd7ff;font:11px var(--font-mono)}.metadata-head-map>small{color:#9eb0c6;margin-bottom:3px;font-size:9px}.metadata-head-map button{width:100%;color:var(--text-secondary);text-align:left;cursor:pointer;background:#0817287a;border:1px solid #638fb873;border-radius:4px;grid-template-columns:minmax(52px,auto) minmax(0,1fr);gap:5px;padding:6px;display:grid}.metadata-head-map button:hover,.metadata-head-map button.selected{color:#fff;border-color:var(--accent);background:#4c49aa61}.metadata-head-map code{color:#83d5ff;font:9px var(--font-mono)}.metadata-head-map span{color:#b5c5d7;min-width:0;font:8px var(--font-mono);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.metadata-impact-map{color:var(--text-muted);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);font:9px var(--font-mono);background:#172e4780;flex-wrap:wrap;grid-column:1/-1;align-items:center;gap:5px;padding:8px;display:flex}.metadata-impact-map span{color:#8dd2ff}.metadata-impact-map b{color:#c9d8ec;background:#5869ae47;border-radius:4px;padding:4px 6px;font-weight:400}.iframe-result{grid-template-columns:minmax(0,1.22fr) minmax(155px,.78fr);align-content:start;gap:10px}.iframe-parent{border-radius:var(--radius-sm);background:#16304a8f;border:1px solid #5078a6;min-width:0;padding:9px}.iframe-parent-label{color:#b9d6fa;font:10px var(--font-mono);margin-bottom:7px}.iframe-boundary{background:#0a1323a6;border:2px solid #765bd5;border-radius:5px;gap:6px;padding:8px;display:grid}.iframe-boundary>span{color:#baa9ff;font:9px var(--font-mono)}.iframe-boundary iframe{background:#fff;border:0;border-radius:3px;max-width:100%;display:block}.iframe-sandbox-map{border-radius:var(--radius-sm);background:#2b244875;border:1px solid #7967b9;align-content:start;gap:5px;padding:9px;display:grid}.iframe-sandbox-map button{color:#d3c8ff;font:9px var(--font-mono);text-align:left;cursor:pointer;background:#553d954d;border:1px solid #8c71d7;border-radius:4px;padding:7px}.iframe-sandbox-map button.selected{box-shadow:inset 0 0 0 1px #cbbfff}.iframe-sandbox-map div{color:var(--text-secondary);justify-content:space-between;align-items:center;gap:4px;font-size:9px;display:flex}.iframe-sandbox-map b{font:8px var(--font-mono);border-radius:3px;padding:3px 4px}.iframe-sandbox-map b.blocked{color:#ffb3bc;background:#b33f5540}.iframe-sandbox-map b.relaxed{color:#a8e4c5;background:#34916847}.iframe-sandbox-map small{color:var(--text-muted);margin-top:4px;font-size:9px;line-height:1.35}.templates-result{align-content:start;gap:10px}.template-flow{flex-wrap:wrap;align-items:stretch;gap:5px;display:flex}.template-flow button,.component-model button,.shadow-model button{min-width:88px;color:var(--text-secondary);text-align:left;cursor:pointer;background:#142b469e;border:1px solid #5178a9;border-radius:5px;flex:1;gap:4px;padding:8px;display:grid}.template-flow button:hover,.template-flow button.selected,.component-model button:hover,.component-model button.selected,.shadow-model button:hover,.shadow-model button.selected{color:#fff;border-color:var(--accent);background:#5c45a773}.template-flow code,.component-model code,.shadow-model code{color:#a9d4ff;font:10px var(--font-mono)}.template-flow span,.component-model span,.shadow-model span{color:var(--text-muted);font-size:9px}.template-flow>i{color:var(--accent);font:10px var(--font-mono);align-self:center}.template-inert{color:var(--text-secondary);border-radius:var(--radius-sm);background:#31465e40;border:1px dashed #6b89ad;gap:3px;padding:9px;display:grid}.template-inert strong{color:#c1d8f2;font-size:10px}.template-inert span{color:var(--text-muted);font-size:9px}.component-model{border-radius:var(--radius-sm);background:#2e275440;border:1px solid #7b6ac2;gap:7px;padding:9px;display:grid}.shadow-model{border:1px dashed #9a85d3;border-radius:4px;gap:6px;padding:8px;display:grid}.template-clones{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;display:grid}.component-card{color:#253954;background:#eef3fa;border:1px solid #aabbd0;border-radius:5px;gap:8px;min-width:0;padding:9px;display:flex}.component-avatar{color:#fff;width:28px;height:28px;font:11px var(--font-mono);background:linear-gradient(135deg,#5f63c8,#8b5bcf);border-radius:50%;flex:none;place-items:center;display:grid}.component-card>div:last-child{gap:2px;min-width:0;display:grid}.component-card strong{color:#20314b;text-overflow:ellipsis;white-space:nowrap;font-size:10px;overflow:hidden}.component-card span,.component-card small{color:#576b85;text-overflow:ellipsis;white-space:nowrap;font-size:8px;overflow:hidden}.final-muted{color:var(--text-muted);margin:0;font-size:10px}.graphics-result{align-content:start;gap:9px}.graphics-stage{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;display:grid}.graphics-stage>div{gap:6px;min-width:0;display:grid}.graphics-stage>div>span{color:var(--text-secondary);font:9px var(--font-mono)}.graphics-stage small{color:var(--text-muted);font-size:8px}.graphics-svg,.graphics-canvas,.graphics-empty{background:#f1f5fb;border:1px solid #9eb5ce;border-radius:5px;width:100%;max-width:100%;height:auto;min-height:168px;display:block}.graphics-svg{cursor:pointer}.graphics-svg .selected{filter:drop-shadow(0 0 4px #7259e7)}.graphics-canvas{image-rendering:auto}.graphics-empty{color:var(--text-muted);border-color:var(--border-subtle);text-align:center;background:#11273fa6;place-items:center;padding:14px;font-size:10px;display:grid}.graphics-tree{flex-wrap:wrap;gap:5px;display:flex}.graphics-tree button{color:var(--text-secondary);background:var(--surface-raised);border:1px solid var(--border-subtle);font:10px var(--font-mono);cursor:pointer;border-radius:4px;padding:5px 7px}.graphics-tree button.selected{color:#fff;background:var(--accent);border-color:var(--accent)}.final-examples-col{grid-column:5}.final-examples{align-content:start;gap:8px;display:grid}.final-example-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;display:grid}.final-example-card{min-width:0;min-height:92px;color:var(--text-primary);background:var(--surface-raised);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);text-align:left;cursor:pointer;align-content:start;gap:5px;padding:7px;display:grid}.final-example-card:hover,.final-example-card.active{border-color:var(--accent);background:linear-gradient(135deg,#5b49b652,#183551cc)}.final-example-card.active{box-shadow:inset 0 0 0 1px #ae95ff80}.final-example-card strong{text-overflow:ellipsis;white-space:nowrap;font-size:9px;overflow:hidden}.final-example-card small{min-height:20px;color:var(--text-muted);font-size:8px;line-height:1.25}.final-mini{background:#eef3fa;border:1px solid #a3b9d2;border-radius:4px;height:42px;display:block;position:relative;overflow:hidden}.final-mini i,.final-mini b,.final-mini em{font-style:normal;display:block}.final-mini-metadata{padding:5px}.final-mini-metadata i{background:#7c65c8;border-radius:2px;height:7px}.final-mini-metadata b{background:#5077a6;width:70%;height:4px;margin-top:5px}.final-mini-metadata em{background:#8ba2be;width:84%;height:3px;margin-top:4px}.final-mini-metadata em.short{width:52%}.final-mini-iframe{color:#273f5f;font:7px var(--font-mono);grid-template-columns:1fr 1.4fr;gap:3px;padding:5px;display:grid}.final-mini-iframe i{color:#496580;background:#d5e2f0;padding:7px 3px}.final-mini-iframe b{color:#694fbe;background:#e5dcfa;border:1px solid #9d84dc;place-items:center;display:grid}.final-mini-iframe em{color:#39765d;background:#d9f0e3;grid-column:2;padding:3px}.final-mini-template{padding:5px}.final-mini-template i{background:#9c82dc;border-radius:2px;height:7px}.final-mini-template b{background:#81a6cc;border-radius:3px;width:47%;height:18px;margin-top:5px}.final-mini-template b.second{background:#b1c5db;position:absolute;bottom:5px;right:5px}.final-mini-template em{color:#f5f6ff;font:7px var(--font-mono);position:absolute;bottom:9px;left:9px}.final-mini-graphics{background:#142a45}.final-mini-graphics i{background:#40b899;border-radius:50%;width:20px;height:20px;position:absolute;top:8px;left:16%}.final-mini-graphics b{background:#7d8df0;width:45%;height:3px;position:absolute;bottom:10px;right:13%;transform:rotate(-23deg)}.final-mini-graphics em{background:#e2b64f;border-radius:50%;width:9px;height:9px;position:absolute;top:6px;right:9px}.final-mini-graphics.canvas i{border-radius:0;width:53%;height:4px;transform:rotate(-22deg)}.final-mini-graphics.canvas b{background:#548bd4;width:28%;height:18px;transform:none}.final-mini-graphics.canvas em{background:#d78680}.final-compare,.graphics-compare{min-height:0;padding:var(--space-3);grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr);align-items:center;gap:8px;display:grid;overflow:auto}.final-compare article,.graphics-compare article{border:1px solid var(--border-subtle);border-radius:var(--radius-sm);background:#0712207a;align-content:start;gap:9px;min-width:0;min-height:260px;padding:11px;display:grid}.final-compare article.enhanced{border-color:#7862c7}.final-compare>i,.graphics-compare>i{color:var(--accent);font:10px var(--font-mono);text-align:center}.final-compare span,.graphics-compare span{color:var(--text-muted);letter-spacing:.05em;font-size:9px;font-weight:700}.final-compare code{min-height:85px;color:var(--syntax-property);background:var(--editor-bg);border:1px solid var(--border-subtle);font:10px/1.55 var(--font-mono);white-space:pre-wrap;border-radius:4px;padding:9px;overflow:auto}.final-compare p,.graphics-compare p{color:var(--text-secondary);margin:0;font-size:10px;line-height:1.45}.iframe-compare-window{color:#35516f;text-align:center;background:#eef3fa;border:2px solid #725dd0;border-radius:5px;place-items:center;min-height:105px;font-size:10px;display:grid}.iframe-compare-window b{color:#1e3858;background:#d6e4f1;border-radius:3px;padding:8px}.iframe-compare-window.sandboxed{border-style:dashed}.template-compare-inert{min-height:108px;color:var(--text-muted);border:1px dashed #7692b8;border-radius:5px;place-items:center;gap:6px;display:grid}.template-compare-inert code{color:#afcff5;background:0 0;border:0;min-height:auto}.final-learn{gap:13px;display:grid}.final-learn-heading{justify-content:space-between;align-items:end;gap:14px;display:flex}.final-learn-heading>div:first-child>span{color:var(--accent-green);font:9px var(--font-mono);letter-spacing:.08em}.final-learn-heading h2{color:var(--text-primary);margin:4px 0;font-size:25px}.final-learn-heading p{max-width:680px;color:var(--text-secondary);margin:0;font-size:12px;line-height:1.45}.final-learn-steps{flex-wrap:wrap;justify-content:end;gap:5px;display:flex}.final-learn-steps button{color:var(--text-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);cursor:pointer;background:#081322a6;padding:7px 8px;font-size:10px}.final-learn-steps button.active,.final-learn-steps button:hover{color:#fff;background:var(--accent);border-color:var(--accent)}.final-learn-visual{border:1px solid var(--border);border-radius:var(--radius-md);background:linear-gradient(135deg,#1b304bdb,#2e224fb8);grid-template-columns:minmax(0,.9fr) 32px minmax(0,1.1fr);align-items:center;gap:12px;min-height:270px;padding:18px;display:grid}.learn-node,.learn-stage{border-radius:var(--radius-md);background:#081322ad;border:1px solid #5275a4;align-content:center;gap:9px;min-height:140px;padding:16px;display:grid}.learn-node code{color:#ffc982;font:13px var(--font-mono)}.learn-node span{color:var(--text-muted);font-size:11px}.final-learn-visual>i{color:var(--accent);font:18px var(--font-mono);text-align:center}.learn-stage b,.learn-stage em,.learn-stage strong{color:#a8bbd1;font:10px var(--font-mono);background:#3e54706b;border-radius:4px;padding:9px;display:block}.learn-stage .on{color:#fff;background:#5484bbb8}.final-learn-footer{color:var(--text-secondary);border:1px solid var(--border);border-radius:var(--radius-md);background:linear-gradient(90deg,#233d58cc,#342753b3);justify-content:space-between;align-items:center;gap:12px;padding:11px 13px;font-size:10px;display:flex}.final-learn-footer .btn{color:#fff;background:linear-gradient(135deg,#6851dc,#8a53e8);border-color:#0000}@media (width<=1540px){.final-examples-col{grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr))}.final-examples-col .final-examples{min-height:0}.final-example-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.final-gallery .final-example-grid{grid-template-columns:repeat(7,minmax(0,1fr))}.final-example-card{min-height:88px}.metadata-result,.iframe-result{grid-template-columns:minmax(0,1.16fr) minmax(150px,.84fr)}}@media (width<=1000px){.final-controls-col{grid-column:1}.final-result-panel{grid-column:2}.final-code,.final-inspector-col,.final-examples-col{grid-column:1/-1}.final-inspector-col{grid-template-columns:repeat(2,minmax(0,1fr))}.final-examples-col{grid-template-columns:1fr}.final-example-grid,.final-gallery .final-example-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.final-code>.code-panel{max-height:none}.final-learn-heading{flex-direction:column;align-items:stretch}.final-learn-steps{justify-content:start}}@media (width<=760px){.final-controls-col,.final-result-panel,.final-code,.final-inspector-col,.final-examples-col{width:100%}.final-result-panel{min-height:460px}.final-code>.code-panel{height:520px;min-height:430px}.final-inspector-col,.final-examples-col{flex-direction:column;display:flex}.final-example-grid,.final-gallery .final-example-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.metadata-result,.iframe-result,.graphics-stage,.final-compare,.graphics-compare,.final-learn-visual{grid-template-columns:1fr}.metadata-impact-map{grid-column:1}.metadata-head-map{max-height:260px;overflow:auto}.graphics-svg,.graphics-canvas{min-height:150px}.template-clones{grid-template-columns:1fr}.final-compare>i,.graphics-compare>i,.final-learn-visual>i{transform:rotate(90deg)}.final-learn-footer{flex-direction:column;align-items:stretch}.final-learn-footer .btn{width:100%}}@media (prefers-reduced-motion:reduce){.final-learn *{transition:none!important;animation:none!important}}.playground-main{display:block;overflow:auto}.playground-page{gap:var(--space-3);flex-direction:column;min-width:0;display:flex}.playground-toolbar{justify-content:space-between;align-items:center;gap:var(--space-4);padding:var(--space-3) 0;display:flex}.playground-heading{min-width:160px}.playground-heading h1{font-size:var(--text-xl);margin:0;line-height:1.1}.playground-heading p{color:var(--text-secondary);font-size:var(--text-sm);margin:4px 0 0}.playground-toolbar-controls{justify-content:flex-end;align-items:center;gap:var(--space-2);flex-wrap:wrap;display:flex}.playground-suggestion-control,.playground-auto-preview,.playground-editor-toggles{align-items:center;gap:var(--space-2);min-height:34px;padding:4px var(--space-2);border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--surface-panel);color:var(--text-secondary);font-size:var(--text-xs);display:inline-flex}.playground-suggestion-control select{min-width:72px;color:var(--text-primary);font:inherit;background:0 0;border:0;outline:0}.playground-suggestion-control input{accent-color:var(--status-success)}.playground-suggestion-control b{color:var(--status-success);font-size:11px}.playground-suggestion-control select:disabled{color:var(--text-muted)}.playground-editor-toggles{min-width:0;margin:0}.playground-editor-toggles legend{color:var(--text-secondary);padding:0}.playground-editor-toggles label,.playground-auto-preview{color:var(--text-primary);white-space:nowrap}.playground-editor-toggles input,.playground-auto-preview input{accent-color:var(--status-success)}.playground-editor-toggles .is-locked{color:var(--text-muted)}.playground-toolbar .btn{min-height:34px;padding:7px var(--space-3)}.playground-workspace{grid-template-rows:minmax(280px, var(--playground-editor-area)) 8px minmax(240px, var(--playground-lower-area));gap:0;min-width:0;height:min(760px,100dvh - 190px);min-height:560px;display:grid}.playground-editor-grid{grid-template-columns:var(--playground-editor-columns);gap:0;min-width:0;min-height:0;display:grid}.playground-editor{border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--surface-panel);flex-direction:column;min-width:0;min-height:0;display:flex;overflow:hidden;box-shadow:inset 0 1px oklch(90% .03 255/.025)}.playground-editor.is-active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-subtle-bg), inset 0 1px 0 oklch(90% .03 255/.025)}.playground-editor-header,.playground-region-header,.playground-editor-footer{align-items:center;gap:var(--space-2);flex-shrink:0;display:flex}.playground-editor-header{min-height:36px;padding:0 var(--space-3);border-bottom:1px solid var(--border-subtle);color:var(--text-primary);font-size:var(--text-sm)}.playground-editor-status{color:var(--text-muted);margin-left:auto;font-size:11px}.playground-language-dot,.playground-live-dot{border-radius:var(--radius-pill);background:var(--status-success);width:9px;height:9px;display:inline-block}.playground-language-css{background:var(--status-info)}.playground-language-javascript{background:var(--status-warning)}.playground-editor-body{--playground-code-line-height:20px;--playground-code-padding-y:var(--space-3);--playground-code-padding-x:var(--space-4);--playground-code-font-size:12.5px;flex:1;min-width:0;min-height:0;display:flex;overflow:hidden}.playground-line-gutter{width:42px;padding-top:var(--playground-code-padding-y);border-right:1px solid var(--border-subtle);background:var(--code-gutter);color:var(--syntax-comment);font-family:var(--font-mono);font-size:var(--playground-code-font-size);line-height:var(--playground-code-line-height);text-align:right;-webkit-user-select:none;user-select:none;flex:0 0 42px;overflow:hidden}.playground-line-gutter span{height:var(--playground-code-line-height);line-height:var(--playground-code-line-height);padding-right:var(--space-2);display:block}.playground-code-surface{background:var(--code-surface);flex:1;min-width:0;min-height:0;position:relative;overflow:hidden}.playground-code-textarea,.playground-code-highlight{width:100%;height:100%;padding:var(--playground-code-padding-y) var(--playground-code-padding-x);font-family:var(--font-mono);font-size:var(--playground-code-font-size);line-height:var(--playground-code-line-height);tab-size:2;white-space:pre;background:0 0;border:0;outline:0;margin:0;position:absolute;inset:0}.playground-code-textarea{z-index:2;resize:none;color:#0000;caret-color:var(--syntax-text);overflow:auto}.playground-code-highlight{z-index:1;pointer-events:none;font-size:0;line-height:var(--playground-code-line-height);white-space:normal;overflow:hidden}.playground-code-highlight-content{transform-origin:0 0;min-width:100%;min-height:100%}.playground-code-highlight-content .code-line{width:max-content;min-width:100%;height:var(--playground-code-line-height);box-sizing:border-box;font-size:var(--playground-code-font-size);line-height:var(--playground-code-line-height);white-space:pre;display:block}.playground-code-highlight .tok-selector{color:var(--syntax-selector)}.playground-code-highlight .tok-property{color:var(--syntax-property)}.playground-code-highlight .tok-value{color:var(--syntax-value)}.playground-code-highlight .tok-unit,.playground-code-highlight .tok-number{color:var(--syntax-number)}.playground-code-highlight .tok-string{color:var(--syntax-string)}.playground-code-highlight .tok-function,.playground-code-highlight .tok-keyword{color:var(--syntax-function)}.playground-code-highlight .tok-comment{color:var(--syntax-comment)}.playground-code-highlight .tok-punctuation,.playground-code-highlight .tok-operator{color:var(--syntax-punct)}.playground-code-highlight .tok-tag{color:var(--syntax-tag)}.playground-code-highlight .tok-attribute{color:var(--syntax-attr)}.playground-code-highlight .tok-attribute-value{color:var(--syntax-string)}.playground-code-highlight .tok-text,.playground-code-highlight .tok-plain{color:var(--syntax-text)}.playground-editor-footer{min-height:28px;padding:0 var(--space-3);border-top:1px solid var(--border-subtle);color:var(--text-muted);justify-content:space-between;font-size:11px}.playground-suggestions{z-index:4;border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--surface-raised);width:min(245px,100% - 18px);box-shadow:var(--shadow-popover);position:absolute;overflow:hidden}.playground-suggestions button{gap:var(--space-2);width:100%;padding:8px var(--space-3);color:var(--text-primary);text-align:left;background:0 0;border:0;grid-template-columns:minmax(0,1fr) auto;display:grid}.playground-suggestions button:hover,.playground-suggestions button.is-selected{background:var(--accent-subtle-bg)}.playground-suggestions code{color:var(--syntax-function)}.playground-suggestions span{color:var(--text-muted);font-size:11px}.playground-resizer{z-index:5;color:var(--text-muted);background:0 0;border:0;position:relative}.playground-resizer:after{content:"";border-radius:var(--radius-pill);background:var(--border-default);transition:background var(--duration-fast) var(--ease-out);position:absolute}.playground-resizer:hover:after,.playground-resizer:focus-visible:after{background:var(--accent-hover)}.playground-editor-resizer{cursor:col-resize}.playground-editor-resizer:after{inset:42% 3px}.playground-row-resizer{cursor:row-resize}.playground-row-resizer:after{inset:3px 42%}.playground-lower-grid{grid-template-columns:minmax(0, var(--playground-preview-area)) 8px minmax(0, var(--playground-console-area));min-width:0;min-height:0;display:grid}.playground-console-resizer{cursor:col-resize}.playground-console-resizer:after{inset:42% 3px}.playground-preview-panel,.playground-console-panel{border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--surface-panel);flex-direction:column;min-width:0;min-height:0;display:flex;overflow:hidden}.playground-region-header{min-height:38px;padding:0 var(--space-3);border-bottom:1px solid var(--border-subtle);color:var(--text-primary);font-size:var(--text-sm);justify-content:space-between;font-weight:600}.playground-region-header>span{align-items:center;gap:6px;display:inline-flex}.playground-run{min-height:28px!important;padding:4px 8px!important}.playground-preview-frame{background:#fff;border:0;flex:1;width:100%;min-width:0;min-height:0}.playground-console-header [role=tablist]{align-self:stretch;gap:var(--space-3);display:flex}.playground-console-header [role=tab]{color:var(--text-secondary);font:inherit;background:0 0;border:0;padding:0;position:relative}.playground-console-header [role=tab][aria-selected=true]{color:var(--text-primary)}.playground-console-header [role=tab][aria-selected=true]:after{background:var(--accent-hover);content:"";height:2px;position:absolute;bottom:0;left:0;right:0}.playground-console-header b{border-radius:var(--radius-pill);background:var(--status-error);min-width:17px;height:17px;color:var(--surface-canvas);place-items:center;font-size:10px;display:inline-grid}.playground-clear-console{color:var(--text-secondary);font:inherit;font-size:var(--text-xs);background:0 0;border:0}.playground-console-list{flex:1;min-height:0;margin:0;padding:0;list-style:none;overflow:auto}.playground-console-entry{gap:var(--space-2);padding:9px var(--space-3);border-bottom:1px solid var(--border-subtle);color:var(--text-secondary);font-family:var(--font-mono);grid-template-columns:48px minmax(0,1fr) auto;font-size:11px;display:grid}.playground-console-entry>span{color:var(--status-info);text-transform:uppercase}.playground-console-entry>code{overflow-wrap:anywhere;color:var(--text-primary);font:inherit}.playground-console-entry>small{color:var(--text-muted);font-family:var(--font-ui)}.playground-console-entry.is-warn>span{color:var(--status-warning)}.playground-console-entry.is-error>span{color:var(--status-error)}.playground-console-empty{padding:var(--space-4);color:var(--text-muted);font-size:var(--text-sm)}.playground-safety-note{color:var(--text-muted);font-size:var(--text-xs);margin:0}.header-playground-button[aria-pressed=true]{background:var(--accent)!important;color:var(--text-on-accent)!important}@media (width<=1100px){.playground-workspace{gap:var(--space-3);grid-template-rows:auto auto;height:auto;min-height:0}.playground-editor-grid{gap:var(--space-3);grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}.playground-editor{min-height:320px}.playground-editor-resizer,.playground-row-resizer{display:none}.playground-lower-grid{min-height:310px}}@media (width<=820px){.playground-toolbar{flex-direction:column;align-items:flex-start}.playground-toolbar-controls{justify-content:flex-start}.playground-lower-grid{gap:var(--space-3);grid-template-columns:1fr}.playground-console-resizer{display:none}.playground-preview-panel,.playground-console-panel{min-height:280px}}@media (width<=640px){.playground-main{padding-top:var(--space-3)}.playground-toolbar-controls{width:100%}.playground-suggestion-control,.playground-editor-toggles,.playground-auto-preview{flex-wrap:wrap}.playground-editor-grid{grid-template-columns:1fr}.playground-editor{min-height:300px}.playground-editor-footer{font-size:10px}.playground-console-entry{grid-template-columns:42px minmax(0,1fr)}.playground-console-entry>small{grid-column:2}.mode-toggle .header-playground-button{min-width:42px;font-size:0;padding-inline:8px!important}.mode-toggle .header-playground-button:after{content:"Play";font-size:var(--text-sm)}}.phase2-code>.code-panel.code-panel--content,.phase3-code>.code-panel.code-panel--content,.phase4-code>.code-panel.code-panel--content,.native-code-panel>.code-panel.code-panel--content,.data-code-panel>.code-panel.code-panel--content,.final-code>.code-panel.code-panel--content{height:min(var(--code-panel-content-height), calc(100vh - 170px));align-self:start;min-height:min(300px,100vh - 170px);max-height:min(520px,100vh - 170px)}@media (width>=1201px){.final-iframe .iframe-result{grid-template-columns:minmax(0,1fr)}.final-iframe .iframe-sandbox-map{grid-template-columns:repeat(2,minmax(0,1fr))}.final-iframe .iframe-sandbox-map>button,.final-iframe .iframe-sandbox-map>small{grid-column:1/-1}.final-iframe .final-examples-col{grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr))}.final-iframe .final-example-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.final-iframe .final-gallery .final-example-grid{grid-template-columns:repeat(7,minmax(0,1fr))}}.route-not-found{min-height:calc(100dvh - 58px);padding:var(--space-6);place-items:center;display:grid}.route-not-found-card{width:min(100%,520px);padding:var(--space-6);border:1px solid var(--border-default);border-radius:var(--radius-lg);background:var(--surface-panel);box-shadow:var(--shadow-card);text-align:center}.route-not-found-code{color:var(--accent-hover);font-family:var(--font-mono);font-size:var(--text-sm);letter-spacing:.14em;font-weight:700}.route-not-found-card h1{margin:var(--space-2) 0;color:var(--text-primary);font-size:var(--text-xl)}.route-not-found-card p{margin:0 0 var(--space-4);color:var(--text-secondary)}.route-not-found-card code{color:var(--syntax-string);font-family:var(--font-mono)}.final-learn-actions{flex-wrap:wrap;gap:6px;display:flex}.final-learn-actions .btn:not(.btn-primary){color:var(--text-secondary);border-color:var(--border-subtle);background:#081322b3}.final-learn-visual>.learn-metadata-model,.final-learn-visual>.learn-iframe-model,.final-learn-visual>.learn-template-model,.final-learn-visual>.learn-graphics-model{grid-column:1/-1}.learn-metadata-model{grid-template-columns:minmax(0,1.2fr) minmax(190px,.8fr);gap:13px;width:100%;display:grid}.learn-document-shell{background:#0a182aa6;border:1px solid #718db4;border-radius:6px;gap:8px;padding:11px;display:grid}.learn-document-shell>code,.learn-html-shell>code{color:#c9d8ee;font:10px var(--font-mono)}.learn-html-shell{border:1px solid #899db899;border-radius:5px;gap:7px;padding:8px;display:grid}.learn-head-zone,.learn-body-zone{background:#1e4e7138;border:1px solid #477eaa;border-radius:4px;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;padding:8px;display:grid}.learn-head-zone.on{background:#1c6c995c;border-color:#5cb2df}.learn-body-zone{background:#4d5a2a33;border-color:#8b9b47}.learn-body-zone.on{background:#52773e57;border-color:#7dbb71}.learn-head-zone strong,.learn-body-zone strong{color:#bde8ff;font:10px var(--font-mono);grid-column:1/-1}.learn-body-zone strong{color:#dcf2b1}.learn-head-zone small,.learn-body-zone small{color:#a7b6c7;grid-column:1/-1;font-size:9px}.learn-head-zone span,.learn-body-zone b{color:#a6bbd1;font:8px var(--font-mono);background:#07122073;border-radius:3px;padding:5px}.learn-head-zone span.on{color:#e9f6ff;background:#418bbb8c}.learn-body-zone b{grid-column:1/-1}.learn-body-zone b.on{color:#ecffd9;background:#649a4a8c}.learn-consumer-flow{background:#2b25506b;border:1px solid #7967c0;border-radius:6px;align-content:center;gap:8px;padding:10px;display:grid}.learn-consumer-flow b{color:#c2b4ff;font:11px var(--font-mono)}.learn-consumer-flow i{color:var(--accent);font:10px var(--font-mono)}.learn-consumer-flow span{color:#9dacc0;background:#0e1e3399;border-radius:4px;padding:7px;font-size:9px}.learn-consumer-flow span.on{color:#fbf8ff;background:#5f4ba79e}.learn-iframe-model{grid-template-columns:minmax(0,1.2fr) minmax(180px,.8fr);gap:13px;width:100%;display:grid}.learn-parent-page{color:#b9d9fb;font:10px var(--font-mono);background:#13334d80;border:1px solid #4b7da9;border-radius:6px;gap:8px;padding:11px;display:grid}.learn-iframe-boundary{border:2px dashed #7862d0;border-radius:5px;gap:7px;padding:9px;display:grid}.learn-iframe-boundary.on{background:#503d9138;border-style:solid}.learn-iframe-boundary code{color:#c7b9ff}.learn-iframe-boundary small{color:#99aac0;font-size:9px}.learn-embedded-page{color:#5f6e83;background:#f1f5fb;border:1px solid #a1b5cf;border-radius:3px;gap:4px;min-height:70px;padding:9px;display:grid}.learn-embedded-page.on{color:#1c3554;background:#fff}.learn-embedded-page b{font-size:11px}.learn-embedded-page span{font-size:9px;line-height:1.35}.learn-permissions{background:#412b4959;border:1px solid #9b6d9c;border-radius:6px;align-content:start;gap:5px;padding:10px;display:grid}.learn-permissions strong{color:#e8c7ef;font:10px var(--font-mono)}.learn-permissions span{color:#daa2ae;font:9px var(--font-mono);background:#7d304152;border-radius:3px;padding:5px}.learn-permissions.on span{color:#eaf7ff;background:#516d9e73}.learn-permissions small{color:#acb5c7;margin-top:3px;font-size:9px;line-height:1.35}.learn-template-model{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);gap:9px;width:100%;display:grid}.learn-template-stage{color:#aab8cb;background:#11284199;border:1px dashed #6389b6;border-radius:5px;align-content:start;gap:7px;min-height:120px;padding:10px;display:grid}.learn-template-stage.on{color:#f6f2ff;background:#4c3b8f61;border-style:solid;border-color:#997ce0}.learn-template-stage code,.learn-component-stage code{color:#cfbbff;font:10px var(--font-mono)}.learn-template-stage span,.learn-component-stage span{color:#aab9cd;font-size:9px}.learn-template-model>i{color:var(--accent);font:12px var(--font-mono);place-items:center;display:grid}.learn-template-card{color:#293c56;background:#f0f5fb;border-radius:4px;gap:2px;padding:7px;font-size:9px;display:grid}.learn-template-card b{color:#263752}.learn-component-stage{background:#26214947;border:1px solid #6f61ad;border-radius:5px;grid-column:1/-1;grid-template-columns:1fr 1fr 1fr;gap:7px;padding:9px;display:grid}.learn-component-stage.on{background:#47327e73;border-color:#a18ae5}.learn-component-stage b{color:#a4ccf6;font:9px var(--font-mono);background:#102136b8;border:1px dashed #7297c4;border-radius:3px;padding:6px}.learn-graphics-model{grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr);gap:10px;width:100%;display:grid}.learn-svg-model,.learn-canvas-model{color:var(--text-secondary);background:#0e2238ad;border:1px solid #527ba7;border-radius:6px;gap:7px;padding:10px;display:grid}.learn-svg-model.on{background:#2c41805c;border-color:#6888e8}.learn-canvas-model.on{background:#1a56534f;border-color:#57b89c}.learn-svg-model strong,.learn-canvas-model strong{color:#d8e5f4;font:10px var(--font-mono)}.learn-svg-model svg{background:#f1f5fb;border-radius:4px;width:100%;height:106px}.learn-svg-model circle{fill:#5acb91;stroke:#6659e4;stroke-width:4px}.learn-svg-model path{fill:none;stroke:#3986be;stroke-width:5px}.learn-svg-model span,.learn-canvas-model span{color:#aebccd;font-size:9px;line-height:1.35}.learn-graphics-model>i{color:var(--accent);font:11px var(--font-mono);place-items:center;display:grid}.learn-pixel-surface{background:#0a1c31;border:1px solid #426e96;border-radius:4px;grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(5,1fr);gap:3px;min-height:106px;padding:8px;display:grid;position:relative;overflow:hidden}.learn-pixel-surface b{background:#56be9c;border-radius:2px}.learn-pixel-surface b:nth-child(2),.learn-pixel-surface b:nth-child(4){background:#5184d7}.learn-pixel-surface em{background:#ebbc63;height:3px;position:absolute;bottom:27%;left:11%;right:11%;transform:rotate(-20deg)}.learn-graphics-scale{color:var(--text-muted);background:#0f1f338c;border-radius:4px;grid-column:1/-1;grid-template-columns:auto 1fr 1fr;align-items:center;gap:6px;padding:7px;font-size:9px;display:grid}.learn-graphics-scale b{color:#a8b9d0;background:#39506f73;border-radius:3px;padding:5px;font-weight:400}.learn-graphics-scale b.on{color:#fff;background:#5563bc94}@media (width<=760px){.learn-metadata-model,.learn-iframe-model,.learn-graphics-model,.learn-template-model{grid-template-columns:1fr}.learn-template-model>i,.learn-graphics-model>i{min-height:20px;transform:rotate(90deg)}.learn-component-stage,.learn-graphics-scale{grid-template-columns:1fr}.final-learn-actions{width:100%}.final-learn-actions .btn{flex:1}}.learn-head-zone strong,.learn-body-zone strong,.learn-head-zone small,.learn-body-zone small{line-height:1.25;display:block}.playground-heading{align-items:center;gap:var(--space-2);display:flex}.playground-toolbar-collapse{place-items:center;width:30px;display:grid;min-height:30px!important;padding:0!important}.playground-compact-toolbar-controls,.playground-mobile-tabs,.playground-toolbar-controls.is-collapsed{display:none}.playground-page.is-toolbar-collapsed{gap:var(--space-2)}.playground-page.is-toolbar-collapsed .playground-toolbar{min-height:38px;padding-block:0}.playground-page.is-toolbar-collapsed .playground-heading-copy{align-items:center;display:flex}.playground-page.is-toolbar-collapsed .playground-heading h1{font-size:var(--text-md)}.playground-page.is-toolbar-collapsed .playground-heading p{display:none}.playground-page.is-toolbar-collapsed .playground-compact-toolbar-controls{align-items:center;gap:var(--space-2);margin-left:auto;display:inline-flex}.playground-main{min-height:0}.playground-main>.playground-page{flex:auto;min-height:calc(100dvh - 154px)}@media (width>=1101px){.playground-main{overflow:hidden}.playground-main>.playground-page{height:100%;min-height:0}.playground-workspace{flex:auto;height:auto;min-height:0}}.playground-workspace.is-console-hidden .playground-lower-grid{grid-template-columns:minmax(0,1fr)}.playground-workspace.is-console-hidden .playground-preview-panel{min-width:0}.app.is-playground-focus .header{display:none}.app.is-playground-focus .playground-main{min-height:100dvh;padding:var(--space-3);overflow:hidden}.app.is-playground-focus .playground-page{height:100%;min-height:0}.app.is-playground-focus .playground-workspace{flex:auto;height:auto;min-height:0}.app.is-playground-focus .playground-safety-note{display:none}@media (width<=640px){.playground-main>.playground-page{min-height:calc(100dvh - 126px)}.playground-toolbar{width:100%}.playground-page.is-toolbar-collapsed .playground-toolbar{flex-direction:row;align-items:center}.playground-page.is-toolbar-collapsed .playground-compact-toolbar-controls{flex-wrap:nowrap}.playground-mobile-tabs{border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--surface-panel);gap:4px;min-width:0;padding:4px;display:flex;overflow:hidden}.playground-mobile-tabs button{border-radius:var(--radius-sm);min-width:0;min-height:32px;color:var(--text-secondary);text-overflow:ellipsis;white-space:nowrap;background:0 0;border:0;flex:1 1 0;padding:5px 6px;font-size:11px;font-weight:600;overflow:hidden}.playground-mobile-tabs button[aria-selected=true],.playground-mobile-tabs button:hover{background:var(--accent-subtle-bg);color:var(--text-primary)}.playground-mobile-tabs .playground-mobile-console-toggle{color:var(--text-secondary);flex:0 auto}.playground-mobile-tabs .playground-mobile-console-toggle[aria-expanded=true]{background:var(--accent-subtle-bg);color:var(--text-primary)}.playground-workspace,.playground-page.is-toolbar-collapsed .playground-workspace{height:auto;min-height:min(560px,100dvh - 190px);display:block}.playground-editor-grid,.playground-lower-grid{min-height:0;display:none}.playground-page:not(.is-mobile-console-open)[data-mobile-panel=html] .playground-editor-grid,.playground-page:not(.is-mobile-console-open)[data-mobile-panel=css] .playground-editor-grid,.playground-page:not(.is-mobile-console-open)[data-mobile-panel=javascript] .playground-editor-grid{display:block}.playground-editor-grid .playground-editor{min-height:min(520px,100dvh - 230px);display:none}.playground-page[data-mobile-panel=html] .playground-editor[data-playground-language=html],.playground-page[data-mobile-panel=css] .playground-editor[data-playground-language=css],.playground-page[data-mobile-panel=javascript] .playground-editor[data-playground-language=javascript]{display:flex}.playground-page:not(.is-mobile-console-open)[data-mobile-panel=preview] .playground-lower-grid,.playground-page.is-mobile-console-open .playground-lower-grid{min-height:min(520px,100dvh - 230px);display:block}.playground-lower-grid .playground-preview-panel,.playground-lower-grid .playground-console-panel{min-height:min(520px,100dvh - 230px)}.playground-page[data-mobile-panel=preview] .playground-console-panel,.playground-page.is-mobile-console-open .playground-preview-panel{display:none}.playground-page.is-mobile-console-open .playground-console-panel{display:flex}.app.is-playground-focus .playground-main{min-height:100dvh;padding:var(--space-2);overflow:auto}}.playground-main,.app.is-playground-focus .playground-main{overflow:auto}.playground-main>.playground-page,.app.is-playground-focus .playground-page{flex:none;height:auto;min-height:0}.playground-workspace,.app.is-playground-focus .playground-workspace{grid-template-rows:var(--playground-editor-height) 8px auto;flex:none;height:auto;min-height:0}@media (width<=1100px){.playground-workspace,.app.is-playground-focus .playground-workspace{grid-template-rows:var(--playground-editor-height) auto}}.playground-editor-grid{height:var(--playground-editor-height);min-height:280px}.playground-lower-grid{align-items:start}.playground-preview-panel{align-self:start;height:auto;min-height:278px;overflow:visible}.playground-preview-frame{flex:none;min-height:240px;display:block;overflow:hidden}.playground-console-panel{align-self:start;min-height:280px;max-height:460px}.playground-preview-actions{align-items:center;gap:var(--space-2);display:inline-flex}.playground-download{min-height:28px!important;padding:4px 8px!important}@media (width<=640px){.playground-workspace,.playground-page.is-toolbar-collapsed .playground-workspace{min-height:0}.playground-editor-grid{height:min(360px,100dvh - 360px);min-height:280px;max-height:360px;display:block}.playground-lower-grid{min-height:0;display:block}.playground-lower-grid .playground-preview-panel{min-height:278px;display:flex}.playground-lower-grid .playground-console-panel{min-height:280px;max-height:none;margin-top:var(--space-3);display:none}.playground-page.is-mobile-console-open .playground-console-panel{display:flex}.playground-preview-actions .playground-mobile-console-toggle{display:inline-flex;min-height:28px!important;padding:4px 8px!important}.playground-download span{display:none}}.playground-preview-actions .playground-mobile-console-toggle{display:none}@media (width<=640px){.playground-page .playground-editor-grid{height:min(360px,100dvh - 360px);min-height:280px;max-height:360px;display:block}.playground-page .playground-editor-grid .playground-editor{height:100%;min-height:0}.playground-page .playground-lower-grid{min-height:0;display:block}.playground-page .playground-lower-grid .playground-preview-panel{min-height:278px;display:flex}.playground-page:not(.is-mobile-console-open) .playground-lower-grid .playground-console-panel{display:none}.playground-page.is-mobile-console-open .playground-lower-grid .playground-console-panel{display:flex}.playground-preview-actions .playground-mobile-console-toggle{display:inline-flex}}[data-theme=light] .html-learn-header,[data-theme=light] .html-learn-demo-visual,[data-theme=light] .html-learn-relationship,[data-theme=light] .html-learn-document-demo,[data-theme=light] .html-learn-attribute-demo,[data-theme=light] .html-learn-text-demo,[data-theme=light] .html-learn-list-demo,[data-theme=light] .html-learn-link-demo,[data-theme=light] .html-learn-image-demo,[data-theme=light] .html-learn-responsive-demo,[data-theme=light] .final-learn-visual,[data-theme=light] .data-learn-visual,[data-theme=light] .native-learn-visual{border-color:var(--border-default);background:linear-gradient(135deg,oklch(97.5% .012 255),oklch(94% .035 285))}[data-theme=light] .learn-heading-outline,[data-theme=light] .learn-tree-node,[data-theme=light] .learn-tree-node.learn-child,[data-theme=light] .learn-doc-html,[data-theme=light] .learn-doc-head,[data-theme=light] .learn-doc-body,[data-theme=light] .learn-document-shell,[data-theme=light] .learn-parent-page,[data-theme=light] .learn-template-stage,[data-theme=light] .learn-component-stage,[data-theme=light] .learn-svg-model,[data-theme=light] .learn-canvas-model,[data-theme=light] .learn-node,[data-theme=light] .learn-stage,[data-theme=light] .learn-visual-source,[data-theme=light] .learn-visual-result,[data-theme=light] .native-learn-concepts span,[data-theme=light] .native-lesson-value-card{color:var(--text-primary);background:var(--surface-panel);border-color:var(--border-default)}[data-theme=light] .learn-tree-node code,[data-theme=light] .learn-doc-doctype code,[data-theme=light] .learn-doc-title code,[data-theme=light] .learn-doc-zone header code,[data-theme=light] .learn-document-shell>code,[data-theme=light] .learn-html-shell>code,[data-theme=light] .learn-template-stage code,[data-theme=light] .learn-component-stage code,[data-theme=light] .learn-svg-model strong,[data-theme=light] .learn-canvas-model strong{color:var(--accent-hover)}[data-theme=light] .learn-doc-doctype,[data-theme=light] .learn-doc-head,[data-theme=light] .html-learn-head-body-callout div:first-child{background:oklch(93% .045 245/.58)}[data-theme=light] .learn-doc-body,[data-theme=light] .html-learn-head-body-callout div:last-child{background:oklch(94% .055 95/.52)}[data-theme=light] .learn-doc-chips span,[data-theme=light] .learn-doc-body-map span,[data-theme=light] .learn-head-zone span,[data-theme=light] .learn-body-zone b,[data-theme=light] .learn-consumer-flow span,[data-theme=light] .learn-component-stage b,[data-theme=light] .learn-graphics-scale,[data-theme=light] .learn-graphics-scale b{color:var(--text-secondary);background:var(--surface-raised);border-color:var(--border-subtle)}[data-theme=light] .html-learn-try,[data-theme=light] .final-learn-footer,[data-theme=light] .data-learn-footer,[data-theme=light] .native-learn-try{border-color:var(--border-default);background:linear-gradient(90deg,oklch(95% .025 245),oklch(94% .045 285))}.learn-table-anatomy{gap:7px;display:grid}.learn-table-caption{color:var(--accent-green);font:10px var(--font-mono)}.learn-table-anatomy table{border-collapse:separate;border-spacing:3px;width:100%;font:10px var(--font-mono)}.learn-table-anatomy th,.learn-table-anatomy td{color:var(--text-secondary);border:1px solid var(--border-subtle);text-align:left;background:#4e69974d;border-radius:3px;padding:7px 6px}.learn-table-anatomy th{color:var(--text-primary);background:#5b7ec39e}.learn-table-anatomy tfoot td{color:var(--accent-green);background:#2f7e664d}.learn-table-callouts{flex-wrap:wrap;gap:4px;display:flex}.learn-table-callouts span{color:var(--text-muted);background:var(--surface-canvas);border:1px solid var(--border-subtle);font:9px var(--font-mono);border-radius:3px;padding:4px 6px}.learn-table-callouts span.on{color:var(--text-primary);border-color:var(--accent);background:var(--surface-active)}.learn-semantic-anatomy{gap:8px;display:grid}.learn-semantic-shell{border:1px solid var(--border-strong);background:var(--surface-canvas);font:9px var(--font-mono);border-radius:5px;gap:5px;padding:7px;display:grid}.learn-semantic-shell>div,.learn-semantic-body>div{color:var(--text-muted);background:var(--surface-raised);border:1px dashed var(--border-subtle);border-radius:3px;gap:2px;padding:7px;display:grid}.learn-semantic-shell>div.on,.learn-semantic-body>div.on{color:var(--text-primary);border-style:solid;border-color:var(--accent);background:var(--surface-active)}.learn-semantic-shell span,.learn-semantic-body span{color:var(--text-secondary);font:9px var(--font-ui)}.learn-semantic-body{grid-template-columns:1fr 2fr 1fr;gap:5px;display:grid}.learn-semantic-body>div:first-child,.learn-semantic-body>div:last-child{grid-column:1/-1}.learn-semantic-body>div:nth-child(2){grid-column:1/3}.learn-semantic-body>div:nth-child(3){grid-area:2/3}.learn-semantic-body article{color:var(--text-secondary);background:#7e55b53d;border:1px solid #9e71d38c;border-radius:3px;gap:2px;margin-top:5px;padding:5px;display:grid}.learn-semantic-body article.on{color:var(--text-primary);background:#7e55b573}.learn-semantic-legend{flex-wrap:wrap;gap:5px;display:flex}.learn-semantic-legend span{color:var(--text-muted);background:var(--surface-canvas);border-radius:3px;padding:4px 6px;font-size:9px}.learn-semantic-legend span.on{color:var(--accent-green)}.learn-details-anatomy{gap:12px;display:grid}.learn-details-anatomy details{border:1px solid var(--border-strong);background:var(--surface-canvas);border-radius:5px;overflow:hidden}.learn-details-anatomy summary{color:var(--text-primary);background:var(--surface-active);cursor:pointer;font:11px var(--font-mono);padding:10px}.learn-details-content{color:var(--text-secondary);background:var(--surface-raised);gap:4px;padding:12px;font-size:10px;display:grid}.learn-details-content span{color:var(--accent-green);font:11px var(--font-mono)}.learn-details-content small{color:var(--text-muted)}.learn-details-state{color:var(--text-muted);font:9px var(--font-mono);justify-content:center;align-items:center;gap:8px;display:flex}.learn-details-state span{border:1px solid var(--border-subtle);border-radius:3px;padding:5px 7px}.learn-details-state span.on{color:var(--text-primary);border-color:var(--accent);background:var(--surface-active)}.learn-details-state b{color:var(--accent)}.phase4-button-lesson{grid-template-columns:minmax(100px,.65fr) minmax(230px,1.35fr);align-items:start;gap:10px;display:grid}.phase4-button-source{background:var(--surface-canvas);border:1px solid var(--border-subtle);border-radius:5px;gap:5px;padding:10px;display:grid}.phase4-button-source code{color:var(--syntax-tag);font:11px var(--font-mono)}.phase4-button-source span{color:var(--text-muted);font-size:9px}.phase4-button-lesson form{gap:7px;display:grid}.phase4-button-lesson textarea{box-sizing:border-box;width:100%;color:var(--text-primary);background:var(--surface-raised);border:1px solid var(--border-subtle);font:11px/1.45 var(--font-mono);resize:vertical;border-radius:4px;padding:8px}.phase4-button-lane{flex-wrap:wrap;gap:5px;display:flex}.phase4-button-lane button{color:var(--text-secondary);background:var(--surface-canvas);border:1px solid var(--border-subtle);border-radius:4px;padding:6px 9px;font-size:10px}.phase4-button-lane button:hover{color:var(--text-primary);border-color:var(--accent);background:var(--surface-active)}.phase4-button-state{border-left:2px solid var(--accent-green);background:var(--surface-raised);grid-column:2;gap:3px;padding:8px;display:grid}.phase4-button-state strong{color:var(--accent-green);font-size:11px}.phase4-button-state span{color:var(--text-secondary);font:10px var(--font-mono)}@media (width<=760px){.phase4-button-lesson{grid-template-columns:1fr}.phase4-button-state{grid-column:auto}.learn-semantic-body{grid-template-columns:1fr}.learn-semantic-body>div:first-child,.learn-semantic-body>div:last-child,.learn-semantic-body>div:nth-child(2),.learn-semantic-body>div:nth-child(3){grid-area:auto}}.border-primary,.border-controls,.border-result-card,.border-workspace .code-panel,.border-workspace .docs-col{min-width:0}.border-primary{gap:var(--space-3);align-content:start;display:grid}.border-controls{gap:12px;display:grid}.border-side-picker{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;display:grid}.border-side-picker button,.border-control-row select,.border-color-control input[type=text]{min-height:30px;color:var(--text-secondary);background:var(--surface-raised);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);font:11px var(--font-ui);padding:6px 8px}.border-side-picker button{cursor:pointer}.border-side-picker button.active,.border-side-picker button[aria-pressed=true]{color:var(--text-primary);border-color:var(--accent);background:#5d8cff33}.border-control-row{color:var(--text-secondary);gap:6px;font-size:11px;display:grid}.border-control-row span:first-child{justify-content:space-between;display:flex}.border-control-row strong{color:var(--text-primary);font-family:var(--font-mono)}.border-control-row input[type=range]{width:100%;accent-color:var(--accent)}.border-control-row select{width:100%}.border-color-control{grid-template-columns:38px minmax(0,1fr);gap:6px;display:grid}.border-color-control input[type=color]{background:var(--surface-raised);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);width:38px;height:30px;padding:2px}.border-color-control input[type=text]{box-sizing:border-box;width:100%}.border-control-note{color:var(--text-muted);margin:0;font-size:10px;line-height:1.45}.border-control-note strong{color:var(--accent-green)}.border-result-card{min-height:300px}.border-preview-stage{color:#17253b;background:var(--preview-bg);border-radius:var(--radius-md);place-items:center;min-height:240px;padding:18px;display:grid}.border-preview-box{box-sizing:border-box;text-align:center;background:#fff;place-items:center;width:min(100%,250px);min-height:145px;padding:18px;transition:border .16s;display:grid}.border-preview-box span{font-weight:700}.border-preview-box small{color:#526883;font:10px var(--font-mono);margin-top:7px}@media (width<=760px){.border-workspace{flex-direction:column;display:flex}.border-primary,.border-workspace .code-panel,.border-workspace .docs-col{width:100%}}.border-doc-value{gap:3px;margin:0 0 10px;display:grid}.border-doc-value strong{color:var(--syntax-property);font:11px var(--font-mono)}.border-doc-value span{color:var(--text-secondary);font-size:10px}.effect-primary,.effect-controls,.effect-result,.effect-workspace .code-panel,.effect-workspace .docs-col{min-width:0}.effect-primary{gap:var(--space-3);align-content:start;display:grid}.effect-controls{gap:11px;display:grid}.effect-control{color:var(--text-secondary);gap:5px;font-size:11px;display:grid}.effect-control span{justify-content:space-between;display:flex}.effect-control b{color:var(--text-primary);font-family:var(--font-mono)}.effect-control input[type=range]{width:100%;accent-color:var(--accent)}.effect-control input:not([type=range]),.effect-control select{min-height:30px;color:var(--text-secondary);background:var(--surface-raised);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);font:11px var(--font-ui);padding:6px 8px}.effect-check{color:var(--text-secondary);font-size:11px}.effect-check input{accent-color:var(--accent)}.effect-stage{color:#17253b;background:var(--preview-bg);border-radius:var(--radius-md);place-items:center;min-height:235px;padding:24px;display:grid}.effect-box{background:#fff;border-radius:8px;place-items:center;width:min(100%,220px);min-height:130px;padding:18px;font-weight:700;transition:box-shadow .16s;display:grid}.effect-learn,.outline-learn-visual{gap:16px;display:grid}.effect-learn{background:var(--surface-canvas);border:1px solid var(--border);border-radius:var(--radius-md);padding:20px}.effect-learn-heading{border:1px solid var(--border);border-radius:var(--radius-md);background:linear-gradient(135deg,#0e1d32f5,#2a224acc);padding:18px}.effect-learn-heading span,.effect-learn-heading p{color:var(--text-secondary);font-size:11px}.effect-learn-heading h1{color:var(--text-primary);margin:7px 0;font-size:25px}.effect-learn-heading p{margin:0}.shadow-learn-flow{grid-template-columns:minmax(220px,.8fr) minmax(0,1.2fr);align-items:center;gap:18px;display:grid}.effect-learn-steps{gap:8px;display:grid}.effect-learn-steps div{background:var(--surface-raised);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);grid-template-columns:27px 1fr;gap:2px 8px;padding:10px;display:grid}.effect-learn-steps b{color:#fff;background:var(--accent);border-radius:50%;grid-row:span 2;place-items:center;width:24px;height:24px;display:grid}.effect-learn-steps strong{color:var(--text-primary);font-size:11px}.effect-learn-steps span{color:var(--text-secondary);font-size:10px}.effect-learn-footer{color:var(--text-secondary);background:var(--surface-raised);border:1px solid var(--border-subtle);border-radius:var(--radius-md);justify-content:space-between;align-items:center;gap:12px;padding:11px;font-size:11px;display:flex}.effect-learn-footer code{color:var(--syntax-value);font-family:var(--font-mono)}.outline-compare{color:#17253b;background:var(--preview-bg);border-radius:var(--radius-md);grid-template-columns:1fr 1fr;gap:18px;padding:24px;display:grid}.outline-compare>div{place-items:center;gap:12px;display:grid}.outline-compare small{color:var(--text-muted);font:10px var(--font-mono)}.outline-box{box-sizing:border-box;background:#fff;border-radius:6px;place-items:center;width:min(100%,180px);min-height:100px;padding:15px;display:grid}.border-demo{border:3px solid #5d8cff}.outline-learn-visual{background:var(--preview-bg);border-radius:var(--radius-md);grid-template-columns:1fr 1fr;place-items:center;padding:32px}.outline-learn-sample{outline-offset:7px;outline:4px solid #ef8c68}@media (width<=760px){.effect-workspace{flex-direction:column;display:flex}.effect-primary,.effect-workspace .code-panel,.effect-workspace .docs-col{width:100%}.shadow-learn-flow,.outline-compare,.outline-learn-visual{grid-template-columns:1fr}.effect-learn-footer{flex-direction:column;align-items:flex-start}}.foundation-workspace{align-items:stretch}.foundation-controls{gap:10px;padding:12px;display:grid}.foundation-controls>label{color:var(--text-secondary);gap:5px;font-size:11px;display:grid}.foundation-controls input:not([type=range]),.foundation-controls select{width:100%;min-height:32px;color:var(--text-primary);background:var(--surface-raised);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:7px 9px}.foundation-controls input[type=range]{width:100%;accent-color:var(--accent)}.foundation-controls b{color:var(--text-primary);float:right;font-family:var(--font-mono);font-size:10px}.foundation-control-row{flex-wrap:wrap;gap:6px;display:flex}.foundation-control-row button{color:var(--text-secondary);background:var(--surface-raised);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:6px 8px}.foundation-result{overflow:hidden}.color-lab-result,.background-result{border-radius:var(--radius-md);color:#18243a;place-items:center;gap:8px;min-height:190px;padding:24px;transition:background .16s,color .16s,border .16s;display:grid}.color-lab-result code{color:inherit;font:11px var(--font-mono);background:#fff6;border-radius:4px;padding:4px 7px}.contrast-demo{background:var(--surface-raised);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);color:var(--text-secondary);gap:5px;margin:12px;padding:10px;font-size:11px;display:grid}.background-result{color:#fff;text-shadow:0 1px 4px #17253b99;background-color:#5d8cff;min-height:240px}.typography-result{color:#18243a;background:var(--preview-bg);border-radius:var(--radius-md);gap:14px;min-height:240px;padding:24px;display:grid}.typography-result .specimen-kind{color:#5d8cff;font:10px var(--font-mono);text-transform:uppercase;letter-spacing:.08em}.spacing-control-group{background:var(--surface-raised);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);gap:6px;padding:8px;display:grid}.spacing-control-group strong{color:var(--text-primary);font-size:11px}.spacing-result-stage{color:#18243a;border-radius:var(--radius-md);background:#f0b35b55;border:2px dashed #f0b35b;place-items:center;min-height:260px;padding:24px;display:grid}.spacing-box{color:#18243a;background:#55c99555;border:4px solid #5d8cff;min-width:170px;min-height:110px}.spacing-content{background:#fff;border-radius:4px;place-items:center;min-height:70px;padding:16px;font-weight:700;display:grid}.spacing-margin-label,.spacing-padding-label{font:10px var(--font-mono);text-transform:uppercase;letter-spacing:.08em}.spacing-gap-demo{color:#18243a;background:var(--preview-bg);justify-content:center;align-items:center;gap:16px;padding:14px;display:flex}.spacing-gap-demo span{font:11px var(--font-mono);background:#55c995;border-radius:4px;padding:7px 10px}.spacing-gap-demo span:nth-child(2){color:#55756b;background:0 0}.foundation-learn{background:var(--surface-canvas);border:1px solid var(--border);border-radius:var(--radius-md);gap:16px;padding:20px;display:grid}.foundation-learn-heading{color:#fff;border-radius:var(--radius-md);background:linear-gradient(135deg,#23324d,#5d8cff);padding:20px}.foundation-learn-heading span{font:10px var(--font-mono);opacity:.75}.foundation-learn-heading h1{margin:10px 0 4px;font-size:28px}.foundation-learn-heading p{color:#e6edff;margin:0;font-size:12px}.foundation-learn-flow{grid-template-columns:minmax(220px,.8fr) minmax(0,1.2fr);align-items:center;gap:18px;display:grid}.foundation-learn-stage{color:#18243a;background:var(--preview-bg);border-radius:var(--radius-md);place-items:center;min-height:240px;padding:24px;display:grid}.foundation-learn-steps{gap:8px;display:grid}.foundation-learn-steps div{background:var(--surface-raised);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);grid-template-columns:27px 1fr;gap:2px 8px;padding:10px;display:grid}.foundation-learn-steps button{color:inherit;text-align:left;background:var(--surface-raised);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);grid-template-columns:27px 1fr;gap:2px 8px;padding:10px;display:grid}.foundation-learn-steps button.active{border-color:var(--accent);background:var(--surface-hover)}.foundation-learn-steps b{color:#fff;background:var(--accent);border-radius:50%;grid-row:span 2;place-items:center;width:24px;height:24px;display:grid}.foundation-learn-steps strong{color:var(--text-primary);font-size:11px}.foundation-learn-steps span{color:var(--text-secondary);font-size:10px}.foundation-learn-footer{background:var(--surface-raised);border-radius:var(--radius-sm);justify-content:space-between;align-items:center;gap:12px;padding:12px;display:flex}.foundation-learn-footer code{color:var(--status-success);font:11px var(--font-mono)}.color-learn-sample{color:#fff;border-radius:var(--radius-md);background:linear-gradient(135deg,#5d8cff,#ba83f2);place-items:center;gap:10px;width:190px;padding:32px 18px;display:grid}.color-learn-sample span{background:#517df6;border:4px solid #fff;border-radius:50%;width:70px;height:70px}.color-learn-compare,.color-learn-formats,.color-learn-application{place-items:center;gap:10px;width:100%;display:grid}.color-learn-compare{grid-template-columns:repeat(2,1fr)}.color-learn-compare span{color:#fff;border-radius:8px;place-items:center;width:100%;min-height:82px;display:grid}.color-learn-compare code,.color-learn-formats code{color:#18243a;font:10px var(--font-mono);background:#fffa;border-radius:4px;padding:5px 7px}.color-learn-alpha{border-radius:var(--radius-md);background:repeating-linear-gradient(45deg,#eef2ff 0 10px,#d9e3ff 10px 20px);place-items:center;width:100%;min-height:150px;display:grid}.color-learn-alpha span{color:#18243a;background:#517df659;border:2px solid #5d8cff;border-radius:8px;padding:28px}.color-learn-formats{grid-template-columns:70px 1fr}.color-learn-formats span{background:#517df6;border-radius:50%;width:60px;height:60px}.color-learn-application span,.color-learn-application strong{border:3px solid;border-radius:8px;padding:14px 18px}.color-learn-application strong{color:#fff;border:0}.background-learn-sample{border-radius:var(--radius-md);background:linear-gradient(135deg,#23324d99,#5d8cff99),repeating-linear-gradient(45deg,#eef2ff 0 8px,#d9e3ff 8px 16px);width:220px;height:140px}.typography-learn-sample{color:#18243a;border-radius:var(--radius-md);background:#fff;gap:12px;width:100%;padding:24px;display:grid}.typography-learn-sample strong{font-size:28px}.typography-learn-sample span{font-size:15px;line-height:1.7}.typography-learn-sample small{color:#6b7890}.spacing-learn-sample{color:#55756b;border-radius:var(--radius-md);background:#f0b35b55;border:2px dashed #f0b35b;padding:28px}.spacing-learn-sample>div{color:#18243a;background:#55c99555;border:4px solid #5d8cff;gap:12px;padding:20px;display:grid}.spacing-learn-sample strong{background:#fff;padding:16px}.example-typography-preview{color:#18243a;border-radius:4px;place-items:center;display:grid;background:#eef2ff!important}.example-color-preview{color:#5d8cff;background:#eef2ff;border-radius:4px;place-items:center;font-weight:800;display:grid}.example-transparent-preview{background:repeating-linear-gradient(45deg,#eef2ff 0 6px,#d9e3ff 6px 12px);position:relative;overflow:hidden}.example-transparent-preview>span{background:#5d8cff88;border:2px solid #5d8cff;width:24px;height:24px}.example-spacing-preview{border:2px dashed #f0b35b;border-radius:4px;place-items:center;padding:5px;display:grid;background:#f0b35b55!important}.example-spacing-preview>span{background:#55c995;border:2px solid #5d8cff;width:24px;height:20px}.example-spacing-preview[data-spacing-variant=gap]{box-shadow:inset 0 -5px #55c995}.example-spacing-preview[data-spacing-variant=center]{margin-inline:8px}@media (width<=760px){.foundation-workspace{flex-direction:column;display:flex}.foundation-primary,.foundation-workspace .code-panel,.foundation-workspace .docs-col{width:100%}.foundation-learn-flow{grid-template-columns:1fr}.foundation-learn-footer{flex-direction:column;align-items:flex-start}}.layout-scene{border:2px solid var(--border-strong);border-radius:var(--radius-md);background:var(--surface-raised);min-height:180px;color:var(--text-primary);padding:18px;overflow:auto}.display-scene span{background:#5d8cff22;border:2px solid #5d8cff;border-radius:7px;margin:4px;padding:8px 12px}.box-model-scene{outline-offset:8px;background:#55c99533;outline:2px dashed #f0b35b;place-items:center;display:grid}.box-model-scene span{background:#5d8cff33;border:1px solid #5d8cff;place-items:center;width:100%;height:100%;display:grid}.box-model-scene small{font:11px var(--font-mono);position:absolute;bottom:6px;right:8px}.overflow-scene{border-color:#ef8c68}.overflow-scene p{width:420px;line-height:1.7}.overflow-scene p.overflow-y-content{width:auto}.flex-scene,.grid-scene{overflow:visible}.flex-scene>b,.grid-scene>b{color:#fff;background:#5d8cff;border-radius:8px;place-items:center;min-width:42px;min-height:42px;display:grid;box-shadow:0 4px 10px #17253b33}.layout-axis{font:10px var(--font-mono);color:var(--accent);pointer-events:none;position:absolute;top:6px;left:8px}.position-scene .position-anchor{border:1px dashed #55c995;padding:12px;display:block}.position-scene b{color:#fff;background:#ef8c68;border-radius:8px;place-items:center;min-width:110px;padding:12px;display:inline-grid}.layout-learn-comparison{grid-template-columns:1fr 1fr;gap:12px;display:grid}.layout-learn-comparison>div,.layout-learn-composition{border:2px solid var(--border-strong);background:var(--surface-raised);border-radius:10px;padding:14px}.layout-learn-comparison span,.layout-learn-composition span,.layout-learn-composition button{border:1px solid #5d8cff;border-radius:6px;margin:4px;padding:6px 9px}.layout-learn-composition nav{justify-content:space-between;align-items:center;gap:10px;display:flex}.grid-composition{grid-template-rows:38px 100px 30px;grid-template-columns:80px 1fr;gap:8px;display:grid}.grid-composition header,.grid-composition footer{background:#5d8cff33;grid-column:1/-1;padding:8px}.grid-composition aside,.grid-composition main{border:1px solid #5d8cff;padding:8px}.example-layout-preview{justify-content:center;align-items:center;gap:3px;min-width:64px;min-height:42px;padding:4px;display:inline-flex;overflow:hidden}.example-layout-preview i,.example-layout-preview b{color:#fff;min-width:14px;min-height:14px;font:9px var(--font-mono);background:#5d8cff;border-radius:3px;place-items:center;padding:2px;font-style:normal;display:grid}.example-display-preview{flex-wrap:wrap}.example-flex-preview{display:flex!important}.example-grid-preview{grid-template-columns:repeat(3,1fr)!important;display:grid!important}.example-overflow-preview{white-space:nowrap;width:72px;color:var(--text-primary);border:2px solid #ef8c68;font-size:9px;display:block}.example-position-preview{border:2px solid #55c995;display:block;position:relative}.example-position-preview b{position:absolute;top:2px;right:2px}.example-box-preview{border:3px solid #5d8cff;place-items:center;display:grid;box-shadow:0 0 0 4px #f0b35b}.example-box-preview i{border:2px dashed #55c995;padding:5px}.motion-scene{color:#18243a;border-radius:var(--radius-md);background:linear-gradient(135deg,#eef3ff,#d7e5ff);border:2px solid #745bd2;place-items:center;width:100%;min-height:220px;display:grid;position:relative;overflow:hidden}.motion-scene small{color:#536784;font:10px var(--font-mono);position:absolute;bottom:8px;right:10px}.transform-scene{isolation:isolate}.motion-reference,.motion-transform-box,.motion-transition-box,.motion-animation-box{color:#fff;min-width:116px;min-height:64px;font:11px var(--font-mono);background:#5d8cff;border:2px solid #233c78;border-radius:10px;place-items:center;padding:10px;font-weight:700;display:grid}.motion-reference{color:#456184;background:0 0;border-style:dashed;position:absolute}.motion-transform-box{z-index:1;position:relative}.motion-origin{z-index:2;background:#ef8c68;border:2px solid #fff;border-radius:50%;width:10px;height:10px;position:absolute;transform:translate(-50%,-50%)}.transform-scene small{z-index:3}.transition-scene{align-content:center;gap:12px;padding:20px}.transition-track{background:repeating-linear-gradient(90deg,#ffffff80 0 1px,#0000 1px 40px);border-bottom:2px dashed #745bd2;align-items:center;width:90%;min-height:80px;padding:10px;display:flex}.motion-transition-box{min-width:38%}.transition-multiple-track{background:repeating-linear-gradient(90deg,#ffffff80 0 1px,#0000 1px 40px);border-bottom:2px dashed #745bd2;place-items:center;gap:10px;width:90%;min-height:92px;padding:10px;display:grid}.transition-multiple-box,.transition-compare-box{color:#fff;min-width:130px;min-height:42px;font:10px var(--font-mono);background:#5d8cff;border:2px solid #233c78;border-radius:8px;place-items:center;padding:8px;font-weight:700;display:grid}.transition-multiple-box{animation:.9s ease-in-out motion-multiple-properties}.transition-property-tags{flex-wrap:wrap;justify-content:center;gap:5px;display:flex}.transition-property-tags span,.transition-compare-label{color:#314d72;font:9px var(--font-mono);background:#ffffffb8;border:1px solid #8ba4c7;border-radius:4px;padding:4px 6px}.transition-compare{grid-template-columns:1fr 1fr;gap:14px;width:90%;display:grid}.transition-compare>div{justify-items:center;gap:7px;display:grid}.transition-compare-box{background:#55c995}.transition-compare-box.shorthand{background:#ba83f2}.transition-practical-scene{background:linear-gradient(135deg,#eaf1ff,#d4ddf7)}.transition-practical-button{color:#fff;font:11px var(--font-mono);background:linear-gradient(135deg,#5d8cff,#745bd2);border:0;border-radius:9px;padding:13px 17px;font-weight:700;transition:transform .18s,box-shadow .18s;box-shadow:0 7px #3d55a0,0 12px 20px #506aa655}.transition-practical-button:hover,.transition-practical-button:focus-visible{transform:translateY(-5px);box-shadow:0 12px #3d55a0,0 18px 24px #506aa655}.transition-practical-button span{margin-left:8px;font-size:15px}.animation-scene{gap:16px}.motion-animation-box{animation-name:cvg-motion}.keyframe-track{color:#536784;width:80%;font:10px var(--font-mono);justify-content:space-between;display:flex}.keyframe-definition-scene{gap:9px}.keyframe-checkpoints{border-bottom:2px dashed #745bd2;justify-content:space-between;align-items:end;width:78%;min-height:105px;padding:12px 18px 18px;display:flex;position:relative}.keyframe-checkpoints>div{color:#536784;font:9px var(--font-mono);justify-items:center;gap:5px;display:grid}.keyframe-checkpoints i{color:#fff;background:#5d8cff;border:2px solid #233c78;border-radius:50%;place-items:center;width:34px;height:34px;font-style:normal;display:grid}.keyframe-checkpoints>div:nth-child(2) i{background:#55c995;transform:translateY(-28px)}.keyframe-checkpoints>div:nth-child(3) i{background:#ba83f2;transform:translateY(-7px)}.keyframe-path{border-top:2px dotted #745bd2;border-radius:50%;height:45px;position:absolute;bottom:52px;left:20%;right:20%;transform:rotate(-7deg)}.filter-scene{background:#b9c8e8}.filter-backdrop-art{color:#fff;background:linear-gradient(120deg,#ef8c68 0 28%,#5d8cff 28% 58%,#55c995 58%);border-radius:14px;place-items:center;width:74%;height:130px;display:grid;position:relative;overflow:hidden}.filter-backdrop-art span{z-index:1;background:#18243a99;border-radius:8px;padding:12px 18px;font-weight:800;position:relative}.filter-backdrop-art i,.filter-backdrop-art b{opacity:.8;background:#f6ca66;border-radius:50%;width:80px;height:80px;position:absolute}.filter-backdrop-art i{top:8%;right:12%}.filter-backdrop-art b{background:#ba83f2;bottom:5%;left:10%}.filter-glass{z-index:2;color:#1f3452;width:48%;height:72px;font:11px var(--font-mono);background:#ffffff80;border:1px solid #fff;border-radius:10px;place-items:center;display:grid;position:absolute}.filter-practical-scene{background:linear-gradient(135deg,#c9d9f4,#aebde2)}.filter-practical-art{background:linear-gradient(120deg,#ef8c68 0 30%,#5d8cff 30% 60%,#55c995 60%);border-radius:14px;place-items:center;width:82%;height:145px;display:grid;position:relative;overflow:hidden}.filter-practical-art>i,.filter-practical-art>b{opacity:.75;background:#f6ca66;border-radius:50%;width:100px;height:100px;position:absolute}.filter-practical-art>i{top:-20px;right:5%}.filter-practical-art>b{background:#ba83f2;bottom:-35px;left:-15px}.filter-practical-card{z-index:1;color:#1f3452;background:#fffa;border:1px solid #fff;border-radius:10px;gap:6px;width:62%;padding:12px;display:grid;position:relative;box-shadow:0 8px 18px #233c7840}.filter-practical-card strong{font:12px var(--font-mono)}.filter-practical-card span{font-size:9px;line-height:1.35}.filter-practical-card button{color:#fff;font:9px var(--font-mono);background:#745bd2;border:0;border-radius:4px;justify-self:start;padding:5px 8px}.example-motion-preview{color:#fff;background:linear-gradient(135deg,#23324d,#745bd2);border-radius:5px;place-items:center;width:100%;height:44px;display:grid;overflow:hidden}.example-motion-preview i{width:42px;height:24px;font:9px var(--font-mono);background:#5d8cff;border-radius:5px;place-items:center;font-style:normal;display:grid}.example-motion-preview.example-motion-filter i{background:linear-gradient(90deg,#ef8c68,#5d8cff,#55c995)}@keyframes cvg-motion{0%{transform:translate(-34px)rotate(-4deg)}50%{transform:translate(0)translateY(-18px)rotate(0)}to{transform:translate(34px)rotate(8deg)}}@keyframes motion-multiple-properties{0%{background-color:#5d8cff;transform:translate(0)}to{background-color:#ef8c68;transform:translate(56px)}}.motion-controls .motion-field{color:var(--text-secondary);gap:5px;margin:7px 0;font-size:11px;display:grid}.motion-field span{justify-content:space-between;display:flex}.motion-field b{color:var(--text-primary);font:10px var(--font-mono)}.motion-field input:not([type=range]),.motion-field select{width:100%;min-height:30px;color:var(--text-primary);background:var(--surface-raised);border:1px solid var(--border-subtle);border-radius:4px;padding:6px}.motion-field input[type=range]{width:100%;accent-color:var(--accent)}.motion-trigger{margin:6px 6px 0 0}@media (prefers-reduced-motion:reduce){.motion-animation-box,.example-motion-animation i,.transition-multiple-box{animation-iteration-count:1!important;animation-play-state:paused!important}.motion-transition-box,.transition-practical-button{transition:none!important}}@media (width<=760px){.motion-workspace{flex-direction:column;display:flex}.motion-primary,.motion-workspace .code-panel,.motion-workspace .docs-col{width:100%}.motion-scene{min-height:190px}.motion-field input[type=range]{min-width:0}}.responsive-controls{gap:9px;padding:12px;display:grid}.responsive-field{color:var(--text-secondary);gap:5px;font-size:11px;display:grid}.responsive-field span{justify-content:space-between;display:flex}.responsive-field b{color:var(--text-primary);font:10px var(--font-mono)}.responsive-field select{width:100%;min-height:30px;color:var(--text-primary);background:var(--surface-raised);border:1px solid var(--border-subtle);border-radius:4px;padding:6px}.responsive-field input[type=range]{width:100%;accent-color:var(--accent)}.responsive-scene{color:#18243a;border-radius:var(--radius-md);background:linear-gradient(135deg,#eef3ff,#d7e5ff);border:2px solid #745bd2;place-items:center;width:100%;min-height:220px;display:grid;position:relative;overflow:hidden}.responsive-scene small{color:#536784;max-width:90%;font:9px var(--font-mono);text-align:right;position:absolute;bottom:8px;right:10px}.responsive-frame-shell{width:100%;display:block;position:relative;overflow:hidden}.responsive-frame-shell iframe{transform-origin:top;border:1px solid #745bd2;border-radius:8px;display:block}.units-reference-row{justify-content:center;align-items:center;gap:12px;width:94%;display:flex;overflow:hidden}.units-parent{color:#345476;min-width:120px;font:9px var(--font-mono);background:#dce8ff;border:2px dashed #5d8cff;border-radius:8px;gap:7px;padding:10px;display:grid}.units-box{color:#fff;max-width:100%;min-height:42px;font:10px var(--font-mono);background:#745bd2;border-radius:6px;place-items:center;padding:6px;display:grid;overflow:hidden}.units-facts{color:#536784;max-width:160px;font:9px var(--font-mono);gap:6px;display:grid}.units-facts span{background:#ffffff9c;border-radius:4px;padding:5px}.units-isolated{flex:0 0 220px;gap:5px;width:220px;display:grid}.units-isolated iframe{background:#eef3ff;border:1px solid #9db5d9;border-radius:8px;width:100%;height:92px}.units-isolated small{color:#536784;font:8px var(--font-mono)}.container-outer{border:2px dashed #745bd2;border-radius:9px;justify-items:center;gap:7px;width:94%;padding:10px;display:grid}.container-viewport-label,.container-readout{color:#536784;font:9px var(--font-mono)}.responsive-container{background:#dce8ff;border:2px solid #5d8cff;border-radius:8px;max-width:100%;padding:8px}.responsive-card{color:#173250;background:#fff;border-radius:6px;grid-template-columns:1fr;gap:8px;padding:9px;transition:grid-template-columns .18s;display:grid}.responsive-card strong{font-size:11px;display:block}.responsive-card span{color:#536784;margin-top:4px;font-size:9px;line-height:1.35;display:block}.container-avatar{color:#fff;width:58px;height:42px;font:10px var(--font-mono);background:linear-gradient(135deg,#5d8cff,#745bd2);border-radius:6px;place-items:center;font-weight:800;display:grid}.responsive-learn-comparison{grid-template-columns:1fr 1fr;gap:8px;display:grid}.responsive-learn-comparison .responsive-scene{min-width:0}.example-responsive-preview{color:#fff;background:linear-gradient(135deg,#23324d,#745bd2);border-radius:5px;place-items:center;width:100%;height:44px;display:grid;overflow:hidden}.example-responsive-preview i{color:#fff;min-width:42px;height:24px;font:8px var(--font-mono);background:#5d8cff;border-radius:5px;place-items:center;padding:0 5px;font-style:normal;display:grid}.example-responsive-units i{background:#55c995}.example-responsive-container i{background:#ef8c68}.example-responsive-visibility{box-sizing:border-box}.example-responsive-visibility>i{min-width:0;height:18px}.example-visibility-state{background:#fff;border:1px solid #8194b8;border-radius:3px;flex:1 1 0;gap:2px;min-width:0;padding:3px;display:grid}.example-visibility-state b{background:#5d8cff;border-radius:2px;height:3px;display:block}.example-visibility-before b:last-child{background:#ef8c68}.example-visibility-arrow{color:#e2e8f4;font:10px var(--font-mono)}.example-responsive-visibility small{font:7px var(--font-mono);color:#d6e3ff}.container-boundary{outline-offset:4px;outline:1px dashed #ef8c68}.container-practical-grid{justify-content:center;align-items:start;gap:10px;width:100%;display:flex;overflow:hidden}.container-practical-grid .responsive-container{flex:none}.units-fluid-composition{color:#17253b;background:linear-gradient(135deg,#eef3ff,#e8fff4);border:2px solid #5d8cff;border-radius:12px;gap:10px;padding:14px;display:grid}.units-fluid-composition h3{margin:0;font-size:clamp(22px,5vw,42px)}.units-fluid-composition p{background:#ffffffb8;border-radius:8px;margin:0;padding:clamp(8px,2vw,24px)}.units-fluid-composition button{color:#fff;background:#745bd2;border:0;border-radius:999px;width:fit-content;padding:clamp(6px,1vw,12px) clamp(10px,2vw,18px)}@media (width<=760px){.responsive-workspace{flex-direction:column;display:flex}.responsive-primary,.responsive-workspace .code-panel,.responsive-workspace .docs-col{width:100%}.responsive-scene{min-height:190px}.units-reference-row{flex-direction:column;align-items:stretch}.units-parent{max-width:100%}.units-facts{max-width:none}.responsive-learn-comparison{grid-template-columns:1fr}.foundation-learn-stage .container-responsive-scene{justify-self:stretch;width:auto;min-height:260px}.container-responsive-scene .container-outer{box-sizing:border-box;width:100%;min-width:0;padding-bottom:28px}.container-responsive-scene .responsive-container{box-sizing:border-box;max-width:100%}.container-responsive-scene .responsive-card,.container-responsive-scene .responsive-card>div:last-child{min-width:0}.container-responsive-scene .responsive-card strong,.container-responsive-scene .responsive-card span{overflow-wrap:anywhere}}.data-tables-learn-demo,.data-semantic-learn-demo{width:100%;min-width:0;color:var(--cvg-ds-text-primary);font-family:var(--font-ui);gap:12px;display:grid}.data-tables-learn-focus,.data-semantic-learn-focus{border-left:3px solid var(--cvg-ds-action);background:var(--cvg-ds-action-selected);color:var(--cvg-ds-text-primary);font:600 13px/1.45 var(--font-ui);margin:0;padding:9px 11px}.data-tables-learn-scroll{overscroll-behavior-inline:contain;width:100%;max-width:100%;overflow-x:auto}.data-tables-learn-scroll table{border-collapse:collapse;width:100%;min-width:350px;color:var(--cvg-ds-text-primary);font:14px/1.45 var(--font-ui)}.data-tables-learn-scroll caption{color:var(--cvg-ds-text-primary);background:var(--cvg-ds-panel);border:1px solid var(--cvg-ds-border);text-align:left;border-bottom:0;padding:8px 10px;font-weight:650}.data-tables-learn-scroll th,.data-tables-learn-scroll td{border:1px solid var(--cvg-ds-border);text-align:left;min-width:125px;padding:10px 12px}.data-tables-learn-scroll th{color:var(--cvg-ds-text-primary);background:var(--cvg-ds-panel);font-weight:650}.data-tables-learn-scroll td{color:var(--cvg-ds-text-secondary);background:var(--cvg-ds-inset)}.data-tables-learn-scroll tr[data-lesson-focused=true]>:is(th,td){outline:2px solid var(--cvg-ds-action);outline-offset:-3px;background:var(--cvg-ds-action-selected)}.data-tables-learn-scroll [data-lesson-node=table-head][data-lesson-focused=true] th,.data-tables-learn-scroll [data-lesson-node=table-body][data-lesson-focused=true] td{border-top:2px solid var(--cvg-ds-action);border-bottom:2px solid var(--cvg-ds-action)}.data-tables-learn-steps,.data-semantic-learn-steps{gap:7px;display:grid}.learn-experience-guidance .data-tables-learn-steps button,.learn-experience-guidance .data-semantic-learn-steps button{min-width:0}.data-tables-learn-observation,.data-semantic-learn-observation{color:var(--cvg-ds-text-secondary);font:14px/1.55 var(--font-ui);margin:0}.data-semantic-learn-canvas{border:1px solid var(--cvg-ds-border);border-radius:var(--radius-sm);background:var(--cvg-ds-inset);gap:8px;width:min(100%,700px);padding:10px;display:grid}.data-semantic-learn-canvas [data-region-id]{border:1px solid var(--cvg-ds-border);border-radius:var(--radius-sm);background:var(--cvg-ds-panel);min-width:0;color:var(--cvg-ds-text-primary);font:14px/1.45 var(--font-ui);gap:8px;padding:28px 12px 12px;display:grid;position:relative}.data-semantic-learn-canvas [data-region-id]:before{content:attr(data-region-tag);color:var(--cvg-ds-text-muted);font:600 11px/1.3 var(--font-mono);position:absolute;top:6px;left:9px}.data-semantic-learn-canvas [data-region-id=nav]{flex-wrap:wrap;align-items:center;gap:8px 18px;display:flex}.data-semantic-learn-canvas [data-region-id=main]{background:var(--cvg-ds-inset);grid-template-columns:minmax(0,1.6fr) minmax(140px,.8fr);align-items:stretch}.data-semantic-learn-canvas [data-region-id=article]{background:var(--cvg-ds-panel);min-height:90px}.data-semantic-learn-canvas [data-region-id=aside]{background:var(--cvg-ds-inset)}.data-semantic-learn-canvas [data-region-id=nav] a{color:var(--cvg-ds-action);font:600 13px/1.4 var(--font-ui);text-underline-offset:3px}.data-semantic-learn-canvas [data-region-focused=true]{border:2px solid var(--cvg-ds-action);outline:2px solid var(--cvg-ds-focus);outline-offset:2px}.data-semantic-learn-caption{color:var(--cvg-ds-text-muted);font:12px/1.45 var(--font-ui);margin:0}@media (width<=760px){.data-tables-learn-scroll table{min-width:350px}.data-semantic-learn-canvas [data-region-id=main]{grid-template-columns:minmax(0,1fr)}}.app[data-design-specimen=border],.app[data-design-specimen=flexbox-learn]{--surface-canvas:var(--cvg-ds-canvas);--surface-panel:var(--cvg-ds-panel);--surface-raised:var(--cvg-ds-raised);--surface-hover:var(--cvg-ds-inset-strong);--surface-active:var(--cvg-ds-action-selected);--surface:var(--cvg-ds-panel);--text-primary:var(--cvg-ds-text-primary);--text-secondary:var(--cvg-ds-text-secondary);--text-muted:var(--cvg-ds-text-muted);--border-subtle:var(--cvg-ds-border);--border-default:var(--cvg-ds-border);--border-strong:var(--cvg-ds-border-strong);--accent:var(--cvg-ds-action);--accent-hover:var(--cvg-ds-action-hover);--accent-subtle-bg:var(--cvg-ds-action-selected);--focus-ring:var(--cvg-ds-focus);--status-success:var(--cvg-ds-success);--status-warning:var(--cvg-ds-warning);--status-error:var(--cvg-ds-error);--status-info:var(--cvg-ds-info);color:var(--cvg-ds-text-primary);background:var(--cvg-ds-canvas);font-size:var(--cvg-ds-type-body)}.app[data-design-specimen=border] .header,.app[data-design-specimen=flexbox-learn] .header,.app[data-design-specimen=border] .sidebar,.app[data-design-specimen=flexbox-learn] .sidebar{background:var(--cvg-ds-shell);border-color:var(--cvg-ds-border)}.app[data-design-specimen=border] .brand-mark,.app[data-design-specimen=flexbox-learn] .brand-mark{color:var(--cvg-ds-action);background:var(--cvg-ds-action-selected)}.app[data-design-specimen=border] .search-input,.app[data-design-specimen=flexbox-learn] .search-input{color:var(--cvg-ds-text-primary);background:var(--cvg-ds-inset);border-color:var(--cvg-ds-border)}.app[data-design-specimen=border] .search-input::placeholder,.app[data-design-specimen=flexbox-learn] .search-input::placeholder{color:var(--cvg-ds-text-muted)}.app[data-design-specimen=border] .mode-toggle,.app[data-design-specimen=flexbox-learn] .mode-toggle{background:var(--cvg-ds-inset);border-color:var(--cvg-ds-border)}.app[data-design-specimen=border] .mode-toggle button,.app[data-design-specimen=flexbox-learn] .mode-toggle button{color:var(--cvg-ds-text-secondary)}.app[data-design-specimen=border] .mode-toggle button[aria-pressed=true],.app[data-design-specimen=flexbox-learn] .mode-toggle button[aria-pressed=true]{color:var(--cvg-ds-action);background:var(--cvg-ds-action-selected)}.app[data-design-specimen=border] .theme-toggle,.app[data-design-specimen=flexbox-learn] .theme-toggle{color:var(--cvg-ds-text-secondary);border-color:var(--cvg-ds-border)}.app[data-design-specimen=border] .nav-item[aria-current=page],.app[data-design-specimen=flexbox-learn] .nav-item[aria-current=page]{color:var(--cvg-ds-action);background:var(--cvg-ds-action-selected)}.app[data-design-specimen=border] .main,.app[data-design-specimen=flexbox-learn] .main{background:var(--cvg-ds-canvas)}.app[data-design-specimen=border] .panel,.app[data-design-specimen=flexbox-learn] .panel{background:var(--cvg-ds-panel);border-color:var(--cvg-ds-border)}.app[data-design-specimen=border] button:focus-visible,.app[data-design-specimen=border] input:focus-visible,.app[data-design-specimen=border] select:focus-visible,.app[data-design-specimen=border] a:focus-visible,.app[data-design-specimen=flexbox-learn] button:focus-visible,.app[data-design-specimen=flexbox-learn] input:focus-visible,.app[data-design-specimen=flexbox-learn] a:focus-visible{outline-color:var(--cvg-ds-focus)}.app[data-design-specimen=border] .cvg-breadcrumbs{color:var(--cvg-ds-text-muted);font-size:var(--cvg-ds-type-caption);align-items:center;gap:9px;padding:14px 24px 2px;display:flex}.app[data-design-specimen=border] .cvg-breadcrumbs strong{color:var(--cvg-ds-text-secondary);font-weight:600}.app[data-design-specimen=border] .topic-header{gap:14px;min-height:76px;padding:8px 24px 16px}.app[data-design-specimen=border] .topic-icon{display:none}.app[data-design-specimen=border] .topic-title{color:var(--cvg-ds-text-primary);font-size:var(--cvg-ds-type-page-title);letter-spacing:-.025em}.app[data-design-specimen=border] .topic-summary{color:var(--cvg-ds-text-secondary);font-size:var(--cvg-ds-type-supporting)}.app[data-design-specimen=border] .topic-title-row a{color:var(--cvg-ds-action);font-size:var(--cvg-ds-type-caption)}.app[data-design-specimen=border] .topic-actions .btn{color:var(--cvg-ds-action);border-color:var(--cvg-ds-border-strong);font-size:var(--cvg-ds-type-action);background:0 0}.app[data-design-specimen=border] .topic-actions .btn-primary{color:#10242d;background:var(--cvg-ds-action);border-color:var(--cvg-ds-action)}.app[data-design-specimen=border] .topic-actions .btn-primary,.app[data-design-specimen=border] .border-mobile-playground,.app[data-design-specimen=flexbox-learn] .flexbox-lesson-actions .btn-primary,.app[data-design-specimen=flexbox-learn] .flexbox-composition-nav button{color:var(--cvg-ds-action-on)}.app[data-design-specimen=border] .border-workspace{grid-template-columns:minmax(0,1.72fr) minmax(300px,.88fr);align-items:start;gap:14px;padding:0 24px 18px;display:grid}.app[data-design-specimen=border] .border-main-column,.app[data-design-specimen=border] .border-support-column{align-content:start;gap:12px;min-width:0;display:grid}.app[data-design-specimen=border] .border-main-column .code-panel{background:var(--cvg-ds-code);border-color:var(--cvg-ds-border);width:100%;min-width:0;height:440px;min-height:400px;max-height:calc(100vh - 540px)}.app[data-design-specimen=border] .border-result-card{min-height:300px;padding:0}.app[data-design-specimen=border] .border-preview-stage{min-height:240px;color:var(--cvg-ds-text-primary);background:var(--cvg-ds-demo);border:1px solid var(--cvg-ds-border)}.app[data-design-specimen=border] .border-preview-box{color:var(--cvg-ds-demo-text);background:var(--cvg-ds-demo-card);border-color:var(--cvg-ds-demo-border)}.app[data-design-specimen=border] .border-preview-box small{color:var(--cvg-ds-text-secondary)}.app[data-design-specimen=border] .border-controls{gap:11px;padding:14px}.app[data-design-specimen=border] .border-side-picker{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}.app[data-design-specimen=border] .border-side-picker button,.app[data-design-specimen=border] .border-control-row select,.app[data-design-specimen=border] .border-color-control input[type=text]{min-height:36px;color:var(--cvg-ds-text-secondary);background:var(--cvg-ds-inset);border-color:var(--cvg-ds-border);font-size:var(--cvg-ds-type-label)}.app[data-design-specimen=border] .border-side-picker button.active,.app[data-design-specimen=border] .border-side-picker button[aria-pressed=true]{color:var(--cvg-ds-action);background:var(--cvg-ds-action-selected);border-color:var(--cvg-ds-action)}.app[data-design-specimen=border] .border-control-row{color:var(--cvg-ds-text-secondary);font-size:var(--cvg-ds-type-label)}.app[data-design-specimen=border] .border-control-row input[type=range]{accent-color:var(--cvg-ds-action)}.app[data-design-specimen=border] .border-color-control input[type=color]{background:var(--cvg-ds-inset);border-color:var(--cvg-ds-border);height:36px}.app[data-design-specimen=border] .border-control-note{color:var(--cvg-ds-text-muted);font-size:var(--cvg-ds-type-caption)}.app[data-design-specimen=border] .border-control-note strong{color:var(--cvg-ds-demo-border)}.app[data-design-specimen=border] .border-support-column>.panel:not(.border-controls){padding-bottom:12px}.app[data-design-specimen=border] .border-support-column .code-section-label,.app[data-design-specimen=border] .border-main-column .code-section-label{color:var(--cvg-ds-text-secondary);font-size:var(--cvg-ds-type-label)}.app[data-design-specimen=border] .border-support-column .example-strip{gap:8px}.app[data-design-specimen=border] .border-support-column .example-tile{min-width:90px;color:var(--cvg-ds-text-secondary);background:var(--cvg-ds-inset);border-color:var(--cvg-ds-border)}.app[data-design-specimen=border] .border-support-column .example-tile:hover{border-color:var(--cvg-ds-action)}.app[data-design-specimen=border] .border-support-column .example-value{color:var(--cvg-ds-text-primary);font-size:var(--cvg-ds-type-label)}.app[data-design-specimen=border] .border-support-column .example-caption,.app[data-design-specimen=border] .border-support-column .chip-row{color:var(--cvg-ds-text-muted);font-size:var(--cvg-ds-type-caption)}.app[data-design-specimen=border] .border-support-column .info-chip{color:var(--cvg-ds-text-secondary);background:var(--cvg-ds-inset);border-color:var(--cvg-ds-border)}.app[data-design-specimen=border] .border-support-column .docs-col{grid-template-columns:1fr;gap:10px;display:grid}.app[data-design-specimen=border] .border-support-column .docs-card{padding:14px}.app[data-design-specimen=border] .border-support-column .docs-title{color:var(--cvg-ds-text-primary);font-size:var(--cvg-ds-type-section-title)}.app[data-design-specimen=border] .border-support-column .docs-prose,.app[data-design-specimen=border] .border-support-column .value-doc-desc,.app[data-design-specimen=border] .border-support-column .border-doc-value span{color:var(--cvg-ds-text-secondary);font-size:var(--cvg-ds-type-supporting);line-height:1.55}.app[data-design-specimen=border] .border-support-column .subsection-title,.app[data-design-specimen=border] .border-support-column .border-doc-value strong{color:var(--cvg-ds-action);font-size:var(--cvg-ds-type-label)}.app[data-design-specimen=border] .border-support-column .syntax-chip{color:var(--cvg-ds-text-primary);background:var(--cvg-ds-inset);border-color:var(--cvg-ds-border)}.app[data-design-specimen=border] .border-workspace .reference-resize-handle:after{background:var(--cvg-ds-action)}.app[data-design-specimen=border] .border-workspace .reference-layout-reset{color:var(--cvg-ds-text-secondary);background:var(--cvg-ds-panel);border-color:var(--cvg-ds-border)}.app[data-design-specimen=border] .gallery-area{padding:0 24px 26px}.app[data-design-specimen=border] .gallery-area>.panel{background:var(--cvg-ds-panel);border-color:var(--cvg-ds-border)}.app[data-design-specimen=border] .gallery-scroll{gap:10px;padding:12px}.app[data-design-specimen=border] .gallery-card{min-width:142px;color:var(--cvg-ds-text-secondary);background:var(--cvg-ds-inset);border-color:var(--cvg-ds-border)}.app[data-design-specimen=border] .gallery-card:hover:not(.static){border-color:var(--cvg-ds-action)}.app[data-design-specimen=border] .gallery-code{color:var(--cvg-ds-text-primary);font-size:var(--cvg-ds-type-label)}.app[data-design-specimen=border] .gallery-caption{color:var(--cvg-ds-text-muted);font-size:var(--cvg-ds-type-caption)}.app[data-design-specimen=border] .border-mobile-playground,.app[data-design-specimen=flexbox-learn] .topic-header{display:none}.app[data-design-specimen=flexbox-learn] .flexbox-learn-page{width:min(100%,1440px);margin:0 auto;padding:22px 32px 36px}.app[data-design-specimen=flexbox-learn] .flexbox-learn-breadcrumb{color:var(--cvg-ds-text-muted);font-size:var(--cvg-ds-type-caption);align-items:center;gap:9px;display:flex}.app[data-design-specimen=flexbox-learn] .flexbox-learn-breadcrumb strong{color:var(--cvg-ds-text-secondary)}.app[data-design-specimen=flexbox-learn] .flexbox-learn-header{justify-content:space-between;align-items:end;gap:24px;margin:22px 0 24px;display:flex}.app[data-design-specimen=flexbox-learn] .flexbox-learn-kicker,.app[data-design-specimen=flexbox-learn] .flexbox-progress>span,.app[data-design-specimen=flexbox-learn] .flexbox-current-label,.app[data-design-specimen=flexbox-learn] .flexbox-scene-toolbar,.app[data-design-specimen=flexbox-learn] .flexbox-explanation-label{color:var(--cvg-ds-text-muted);font-size:var(--cvg-ds-type-caption);letter-spacing:.09em;margin:0;font-weight:650}.app[data-design-specimen=flexbox-learn] .flexbox-learn-header h1{color:var(--cvg-ds-text-primary);letter-spacing:-.035em;margin:5px 0 4px;font-size:30px}.app[data-design-specimen=flexbox-learn] .flexbox-learn-summary{max-width:670px;color:var(--cvg-ds-text-secondary);font-size:var(--cvg-ds-type-supporting);margin:0;line-height:1.55}.app[data-design-specimen=flexbox-learn] .flexbox-progress{flex:0 0 200px;width:200px}.app[data-design-specimen=flexbox-learn] .flexbox-progress strong{color:var(--cvg-ds-text-primary);font:600 18px var(--font-mono);margin:5px 0 8px;display:block}.app[data-design-specimen=flexbox-learn] .flexbox-progress strong i{color:var(--cvg-ds-text-muted);font-size:13px;font-style:normal}.app[data-design-specimen=flexbox-learn] .flexbox-progress>div{background:var(--cvg-ds-inset-strong);border-radius:8px;height:4px;overflow:hidden}.app[data-design-specimen=flexbox-learn] .flexbox-progress>div span{background:var(--cvg-ds-action);border-radius:inherit;height:100%;display:block}.app[data-design-specimen=flexbox-learn] .flexbox-current-lesson{border-bottom:1px solid var(--cvg-ds-border);align-items:center;gap:16px;margin:0 0 16px;padding-bottom:14px;display:flex}.app[data-design-specimen=flexbox-learn] .flexbox-lesson-index{color:var(--cvg-ds-action);font:600 24px var(--font-mono)}.app[data-design-specimen=flexbox-learn] .flexbox-lesson-index span{color:var(--cvg-ds-text-muted);font-size:13px}.app[data-design-specimen=flexbox-learn] .flexbox-current-label{margin-bottom:3px;display:block}.app[data-design-specimen=flexbox-learn] .flexbox-current-lesson h2{color:var(--cvg-ds-text-primary);text-transform:capitalize;margin:0;font-size:19px}.app[data-design-specimen=flexbox-learn] .flexbox-learn-grid{grid-template-columns:minmax(0,1.55fr) minmax(280px,.8fr);align-items:stretch;gap:18px;display:grid}.app[data-design-specimen=flexbox-learn] .flexbox-scene-panel{grid-template-rows:auto 1fr auto;min-height:448px;padding:16px;display:grid}.app[data-design-specimen=flexbox-learn] .flexbox-scene-toolbar{justify-content:space-between;align-items:center;display:flex}.app[data-design-specimen=flexbox-learn] .flexbox-live-indicator{color:var(--cvg-ds-demo-border)}.app[data-design-specimen=flexbox-learn] .flexbox-live-indicator i{background:currentColor;border-radius:50%;width:7px;height:7px;margin-right:5px;display:inline-block}.app[data-design-specimen=flexbox-learn] .flexbox-learn-visual{background:var(--cvg-ds-demo);border:1px solid var(--cvg-ds-border);border-radius:10px;grid-template-rows:auto auto 1fr;min-height:335px;margin:26px 12px 12px;padding:16px;display:grid}.app[data-design-specimen=flexbox-learn] .flexbox-axis-labels{color:var(--cvg-ds-demo-border);font:600 10px var(--font-mono);letter-spacing:.06em;align-items:start;gap:14px;display:flex}.app[data-design-specimen=flexbox-learn] .flexbox-main-axis-label{flex:1;align-items:center;gap:8px;display:flex}.app[data-design-specimen=flexbox-learn] .flexbox-main-axis-label b{background:var(--cvg-ds-demo-border);flex:1;height:1px;font-size:0;position:relative}.app[data-design-specimen=flexbox-learn] .flexbox-cross-axis-label b{background:0 0;flex:none;width:auto;height:auto;font-size:13px;position:static}.app[data-design-specimen=flexbox-learn] .flexbox-main-axis-label b:after{color:var(--cvg-ds-demo-border);content:"→";font:13px/1 var(--font-mono);position:absolute;top:50%;right:-1px;transform:translateY(-50%)}.app[data-design-specimen=flexbox-learn] .flexbox-direction-row-reverse .flexbox-main-axis-label b:after{content:"←";left:-1px;right:auto}.app[data-design-specimen=flexbox-learn] .flexbox-cross-axis-label{flex-direction:column;align-items:end;gap:3px;display:flex}.app[data-design-specimen=flexbox-learn] .flexbox-container-caption{background:var(--cvg-ds-demo);grid-row:2;margin:5px 12px -8px;padding:0 4px}.app[data-design-specimen=flexbox-learn] .flexbox-learn-container{background:color-mix(in srgb, var(--cvg-ds-demo-card) 16%, transparent);border:1px dashed var(--cvg-ds-demo-border);border-radius:7px;grid-row:3;min-width:0;min-height:210px;margin:8px 0;padding:18px;display:flex}.app[data-design-specimen=flexbox-learn] .flexbox-learn-item{color:#fff;background:var(--cvg-ds-demo-item);border:1px solid color-mix(in srgb, var(--cvg-ds-demo-border) 45%, transparent);min-width:48px;min-height:132px;box-shadow:0 4px 0 var(--cvg-ds-demo-item-shadow);border-radius:6px;flex:0 clamp(56px,8vw,110px);justify-content:center;align-items:center;padding:9px;display:flex}.app[data-design-specimen=flexbox-learn] .flexbox-learn-item strong{color:inherit;font:700 20px var(--font-mono)}.app[data-design-specimen=flexbox-learn] .flexbox-learn-item.is-primary{border-color:var(--cvg-ds-demo-border)}.app[data-design-specimen=flexbox-learn] .flexbox-composition-nav{width:100%;min-width:0;color:var(--cvg-ds-text-secondary);background:var(--cvg-ds-demo-card);border:1px solid var(--cvg-ds-demo-border);font-size:var(--cvg-ds-type-label);border-radius:6px;justify-content:space-between;align-items:center;padding:14px;display:flex}.app[data-design-specimen=flexbox-learn] .flexbox-composition-nav strong{color:var(--cvg-ds-text-primary);font-size:17px}.app[data-design-specimen=flexbox-learn] .flexbox-composition-nav button{background:var(--cvg-ds-action);min-height:34px;font-size:var(--cvg-ds-type-caption);border:0;border-radius:5px;padding:0 12px}.app[data-design-specimen=flexbox-learn] .flexbox-container-caption{color:var(--cvg-ds-demo-border);font:600 10px var(--font-mono);letter-spacing:.07em}.app[data-design-specimen=flexbox-learn] .flexbox-container-caption span{margin-right:5px;font-size:15px}.app[data-design-specimen=flexbox-learn] .flexbox-scene-footnote{color:var(--cvg-ds-text-muted);font-size:var(--cvg-ds-type-caption);margin:0;line-height:1.45}.app[data-design-specimen=flexbox-learn] .flexbox-lesson-explanation{background:var(--cvg-ds-panel);border:1px solid var(--cvg-ds-border);border-radius:10px;flex-direction:column;align-items:start;min-width:0;padding:20px;display:flex}.app[data-design-specimen=flexbox-learn] .flexbox-explanation-label{color:var(--cvg-ds-action)}.app[data-design-specimen=flexbox-learn] .flexbox-lesson-explanation h2{color:var(--cvg-ds-text-primary);text-transform:capitalize;margin:13px 0 8px;font-size:22px}.app[data-design-specimen=flexbox-learn] .flexbox-lesson-explanation>p{color:var(--cvg-ds-text-secondary);font-size:var(--cvg-ds-type-supporting);margin:0;line-height:1.65}.app[data-design-specimen=flexbox-learn] .flexbox-relevant-css{background:var(--cvg-ds-code);border:1px solid var(--cvg-ds-border);border-radius:7px;width:100%;margin:22px 0 18px;padding:14px}.app[data-design-specimen=flexbox-learn] .flexbox-relevant-css>span{color:var(--cvg-ds-text-muted);font-size:var(--cvg-ds-type-caption);letter-spacing:.08em;margin-bottom:9px;font-weight:650;display:block}.app[data-design-specimen=flexbox-learn] .flexbox-relevant-css code{color:var(--cvg-ds-demo-border);font:var(--cvg-ds-type-code) var(--font-mono);white-space:normal;overflow-wrap:anywhere}.app[data-design-specimen=flexbox-learn] .flexbox-relevant-css p{color:var(--cvg-ds-text-muted);font-size:var(--cvg-ds-type-caption);margin:10px 0 0;line-height:1.5}.app[data-design-specimen=flexbox-learn] .flexbox-lesson-actions{flex-wrap:wrap;gap:8px;margin-top:auto;display:flex}.app[data-design-specimen=flexbox-learn] .flexbox-lesson-actions .btn{min-height:38px;color:var(--cvg-ds-text-secondary);background:var(--cvg-ds-inset);border-color:var(--cvg-ds-border)}.app[data-design-specimen=flexbox-learn] .flexbox-lesson-actions .btn-primary{color:#10242d;background:var(--cvg-ds-action);border-color:var(--cvg-ds-action)}.app[data-design-specimen=flexbox-learn] .flexbox-lesson-actions button:disabled{opacity:.45;cursor:not-allowed}.app[data-design-specimen=flexbox-learn] .flexbox-try-reference{color:var(--cvg-ds-action);font-size:var(--cvg-ds-type-action);background:0 0;border:0;margin-top:14px;padding:0}.app[data-design-specimen=flexbox-learn] .flexbox-try-reference span{margin-left:6px}.app[data-design-specimen=flexbox-learn] .flexbox-stage-list{border:1px solid var(--cvg-ds-border);border-radius:8px;margin-top:14px}.app[data-design-specimen=flexbox-learn] .flexbox-stage-toggle{width:100%;color:var(--cvg-ds-text-secondary);background:var(--cvg-ds-panel);text-align:left;border:0;justify-content:space-between;padding:13px 16px;display:flex}.app[data-design-specimen=flexbox-learn] .flexbox-stage-list ol{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:0;padding:0 12px 12px;list-style:none;display:grid}.app[data-design-specimen=flexbox-learn] .flexbox-stage-list li button{width:100%;min-height:38px;color:var(--cvg-ds-text-secondary);background:var(--cvg-ds-inset);border:1px solid var(--cvg-ds-border);text-align:left;font-size:var(--cvg-ds-type-caption);text-transform:capitalize;border-radius:5px;justify-content:space-between;align-items:center;gap:6px;padding:7px;display:flex}.app[data-design-specimen=flexbox-learn] .flexbox-stage-list li button[aria-current=step]{color:var(--cvg-ds-action);border-color:var(--cvg-ds-action)}.app[data-design-specimen=flexbox-learn] .flexbox-stage-list li button>span:first-child{color:var(--cvg-ds-text-muted);font:10px var(--font-mono)}@media (width<=1000px){.app[data-design-specimen=border] .border-workspace{grid-template-columns:minmax(0,1.3fr) minmax(280px,.9fr);padding-inline:16px}.app[data-design-specimen=border] .border-support-column .docs-col{grid-template-columns:1fr}.app[data-design-specimen=flexbox-learn] .flexbox-learn-page{padding-inline:20px}.app[data-design-specimen=flexbox-learn] .flexbox-learn-grid{grid-template-columns:minmax(0,1.2fr) minmax(260px,.9fr)}}@media (width<=760px){.app[data-design-specimen=border] .cvg-breadcrumbs{padding:10px 14px 0}.app[data-design-specimen=border] .topic-header{min-height:0;padding:8px 14px 12px}.app[data-design-specimen=border] .topic-actions{display:none}.app[data-design-specimen=border] .border-workspace{grid-template-columns:minmax(0,1fr);grid-template-areas:"result""controls""code""playground""quick""docs";gap:10px;padding:0 12px 14px;display:grid}.app[data-design-specimen=border] .border-main-column,.app[data-design-specimen=border] .border-support-column{display:contents}.app[data-design-specimen=border] .border-result-card{grid-area:result;min-height:245px}.app[data-design-specimen=border] .border-preview-stage{min-height:188px;padding:12px}.app[data-design-specimen=border] .border-controls{grid-area:controls}.app[data-design-specimen=border] .border-main-column>.code-panel{grid-area:code;height:410px;min-height:380px;max-height:none}.app[data-design-specimen=border] .border-mobile-playground{background:var(--cvg-ds-action);min-height:44px;font-size:var(--cvg-ds-type-action);border:0;border-radius:7px;grid-area:playground;justify-content:space-between;align-items:center;padding:0 14px;font-weight:650;display:flex}.app[data-design-specimen=border] .border-support-column>.panel[aria-label=Quick\ examples]{grid-area:quick}.app[data-design-specimen=border] .border-support-column>.docs-col{grid-area:docs}.app[data-design-specimen=border] .border-support-column .docs-col{grid-template-columns:1fr;display:grid}.app[data-design-specimen=border] .border-side-picker button{min-height:38px;padding-inline:3px;font-size:11px}.app[data-design-specimen=border] .gallery-area{padding:0 12px 18px}.app[data-design-specimen=border] .gallery-scroll{overflow-x:auto}.app[data-design-specimen=border] .gallery-card{min-width:132px}.app[data-design-specimen=flexbox-learn] .flexbox-learn-page{padding:8px 14px 28px}.app[data-design-specimen=flexbox-learn] .flexbox-learn-header{flex-direction:column;align-items:start;gap:0;margin:8px 0 10px}.app[data-design-specimen=flexbox-learn] .flexbox-learn-kicker,.app[data-design-specimen=flexbox-learn] .flexbox-progress{display:none}.app[data-design-specimen=flexbox-learn] .flexbox-learn-header h1{margin:0 0 3px;font-size:27px}.app[data-design-specimen=flexbox-learn] .flexbox-progress{flex-basis:auto;width:100%}.app[data-design-specimen=flexbox-learn] .flexbox-current-lesson{align-items:baseline;gap:8px;margin-bottom:9px;padding-bottom:8px}.app[data-design-specimen=flexbox-learn] .flexbox-current-lesson>div:last-child{align-items:baseline;gap:6px;min-width:0;display:flex}.app[data-design-specimen=flexbox-learn] .flexbox-current-label{white-space:nowrap;margin:0}.app[data-design-specimen=flexbox-learn] .flexbox-lesson-index{white-space:nowrap;flex:none;font-size:14px}.app[data-design-specimen=flexbox-learn] .flexbox-lesson-index span{font-size:11px}.app[data-design-specimen=flexbox-learn] .flexbox-current-lesson h2{text-overflow:ellipsis;white-space:nowrap;min-width:0;font-size:15px;overflow:hidden}.app[data-design-specimen=flexbox-learn] .flexbox-learn-grid{grid-template-columns:minmax(0,1fr);gap:10px}.app[data-design-specimen=flexbox-learn] .flexbox-scene-panel{min-height:372px;padding:12px}.app[data-design-specimen=flexbox-learn] .flexbox-learn-visual{min-height:265px;margin:20px 0 10px;padding:10px}.app[data-design-specimen=flexbox-learn] .flexbox-learn-container{min-height:142px;padding:12px}.app[data-design-specimen=flexbox-learn] .flexbox-container-caption{margin-top:7px}.app[data-design-specimen=flexbox-learn] .flexbox-learn-item{flex-basis:54px;min-width:46px;min-height:86px;padding:8px}.app[data-design-specimen=flexbox-learn] .flexbox-learn-item strong{font-size:17px}.app[data-design-specimen=flexbox-learn] .flexbox-lesson-explanation{padding:16px}.app[data-design-specimen=flexbox-learn] .flexbox-lesson-actions{width:100%}.app[data-design-specimen=flexbox-learn] .flexbox-lesson-actions .btn{flex:1}.app[data-design-specimen=flexbox-learn] .flexbox-stage-list ol{grid-template-columns:1fr}}.app{--shell-action:var(--cvg-ds-action);--shell-action-hover:var(--cvg-ds-action-hover);--shell-action-selected:var(--cvg-ds-action-selected);--shell-focus:var(--cvg-ds-focus);--shell-border:var(--cvg-ds-border);--shell-border-strong:var(--cvg-ds-border-strong);--shell-canvas:var(--cvg-ds-canvas);--shell-surface:var(--cvg-ds-shell);--shell-raised:var(--cvg-ds-panel);--shell-text:var(--cvg-ds-text-primary);--shell-secondary:var(--cvg-ds-text-secondary);--shell-muted:var(--cvg-ds-text-muted)}.app :where(.header,.sidenav,.route-not-found) :focus-visible{outline:var(--focus-width) solid var(--shell-focus);outline-offset:2px}.header{z-index:100;border-color:var(--shell-border);background:var(--shell-surface);height:56px;color:var(--shell-text);gap:12px;position:relative}.brand{gap:10px;min-width:196px}.brand-mark{border:1px solid var(--shell-border);background:var(--shell-action-selected);width:30px;height:30px;color:var(--shell-action)}.brand-name{letter-spacing:-.015em;font-size:15px}.brand-tagline{color:var(--shell-muted)}.search{min-width:0;max-width:560px}.search-input{border-color:var(--shell-border);background:var(--shell-canvas);height:38px;color:var(--shell-text);padding-right:76px}.search-input:focus-visible{outline-color:var(--shell-focus)}.search-input::-webkit-search-cancel-button{appearance:none}.search-input::placeholder,.search-icon,.search-kbd{color:var(--shell-muted)}.search-kbd{border-color:var(--shell-border);background:var(--shell-surface)}.search-results{z-index:120;border-color:var(--shell-border-strong);background:var(--shell-raised);max-height:min(420px,100dvh - 84px);overflow-y:auto}.search-result{min-height:40px;color:var(--shell-text);border-left:2px solid #0000}.search-result:hover:not([aria-disabled=true]),.search-result.selected{border-left-color:var(--shell-action);background:var(--shell-action-selected)}.search-result-category{color:var(--shell-muted)}.search-empty{color:var(--shell-secondary);gap:8px;padding:12px;line-height:1.5;display:grid}.search-empty-action{border:1px solid var(--shell-border);background:var(--shell-surface);min-height:40px;color:var(--shell-action);font:inherit;border-radius:5px;justify-self:start;padding:0 10px}.search-empty-action:hover{background:var(--shell-action-selected)}.search-clear{width:30px;height:30px;color:var(--shell-muted);background:0 0;border:0;border-radius:4px;place-items:center;display:grid;position:absolute;top:50%;right:8px;transform:translateY(-50%)}.search-clear:hover{background:var(--shell-action-selected);color:var(--shell-text)}.header-actions{gap:8px}.theme-toggle{border-color:var(--shell-border);background:var(--shell-canvas);min-height:40px;color:var(--shell-secondary);padding-inline:10px}.theme-toggle:hover,.theme-toggle[aria-pressed=true]{border-color:var(--shell-action);background:var(--shell-action-selected);color:var(--shell-action-hover)}.mode-toggle{border-color:var(--shell-border);background:var(--shell-canvas);gap:2px;padding:3px}.mode-toggle button{min-height:36px;color:var(--shell-secondary);padding-inline:12px}.mode-toggle button[aria-pressed=true]{border:1px solid var(--shell-border-strong);background:var(--shell-action-selected);color:var(--shell-text);box-shadow:inset 0 -2px 0 var(--shell-action)}.hamburger,.search-toggle{border:1px solid var(--shell-border);background:var(--shell-canvas);min-width:40px;min-height:40px;color:var(--shell-secondary);border-radius:6px;justify-content:center;align-items:center}.hamburger:hover,.search-toggle:hover{color:var(--shell-action);border-color:var(--shell-action)}.sidenav{border-color:var(--shell-border);background:var(--shell-surface);width:248px;color:var(--shell-text)}.lang-tabs{border-color:var(--shell-border);background:var(--shell-canvas);gap:4px;margin:12px;padding:3px}.lang-tab{min-width:0;min-height:64px;color:var(--shell-muted);border:1px solid #0000;gap:4px;font-size:11px;font-weight:550}.lang-tab-label{text-overflow:ellipsis;white-space:nowrap;max-width:100%;overflow:hidden}.lang-tab[data-language=ts] .lang-tab-label{letter-spacing:-.025em;font-size:10px}.lang-tab .lang-chip{background:0 0}.lang-tab[data-language=css] .lang-chip{color:var(--cvg-blue-400)}.lang-tab[data-language=html] .lang-chip{color:var(--cvg-yellow-400)}.lang-tab[aria-current=page]{border-color:var(--shell-border);background:var(--shell-surface);color:var(--shell-text)}.lang-tab[aria-current=page] .lang-chip{box-shadow:none;background:0 0}.available-language-option[aria-current=page]{background:var(--shell-action-selected);color:var(--shell-text);box-shadow:inset 2px 0 var(--shell-action)}.roadmap-language-logo-wrap{width:22px;height:22px;display:block}.nav-section-label{color:var(--shell-muted);letter-spacing:.075em;text-transform:uppercase;padding:12px 16px 8px;font-size:11px;font-weight:650}.nav-list{gap:2px;padding-inline:8px}.nav-item{min-height:40px;color:var(--shell-secondary);border-left:2px solid #0000;gap:10px;padding:7px 10px;font-weight:520}.nav-item:hover:not([aria-disabled=true]){background:var(--shell-action-selected);color:var(--shell-text)}.nav-item[aria-expanded=true]{color:var(--shell-text)}.nav-item[aria-expanded=true] .nav-icon{color:var(--shell-action)}.nav-icon{opacity:1}.nav-chevron{color:var(--shell-muted);place-items:center;display:grid}.nav-children{gap:2px;margin:2px 0 6px}.nav-child{min-height:36px;color:var(--shell-muted);border-left:2px solid #0000;padding:6px 8px 6px 32px;position:relative}.nav-child:hover:not([aria-disabled=true]){background:var(--shell-action-selected);color:var(--shell-text)}.nav-child[aria-current=page]{border-left-color:var(--shell-action);background:var(--shell-action-selected);color:var(--shell-text);font-weight:650}.nav-child[aria-current=page]:before{background:var(--shell-action);content:"";border-radius:1px;width:5px;height:5px;position:absolute;left:18px}.sidenav-footer{border-color:var(--shell-border)}.sidenav-backdrop{display:none}.route-not-found{min-width:0;color:var(--shell-text);background:var(--shell-canvas)}.route-not-found-card{border-color:var(--shell-border);border-radius:var(--radius-md);background:var(--shell-surface)}.route-not-found-code{color:var(--shell-action)}.route-not-found-card h1{color:var(--shell-text)}.route-not-found-card p,.route-not-found-card code{color:var(--shell-secondary)}.route-not-found .btn-primary{border-color:var(--shell-action);background:var(--shell-action);color:var(--cvg-ds-action-on)}.route-not-found .btn-primary:hover{border-color:var(--shell-action-hover);background:var(--shell-action-hover)}.route-not-found .btn:not(.btn-primary){border-color:var(--shell-border);background:var(--shell-canvas);color:var(--shell-action)}.route-not-found .btn:not(.btn-primary):hover{background:var(--shell-action-selected)}.route-not-found-actions{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.route-not-found-actions .btn{justify-content:center;align-items:center;gap:8px;min-height:40px;display:inline-flex}@media (width<=1080px){.sidenav-backdrop{z-index:89;cursor:default;background:#0000007a;border:0;padding:0;display:block;position:fixed;inset:0}.sidenav-backdrop:not(:focus){animation:.14s ease-out shell-scrim-in}.sidenav{z-index:95;visibility:hidden;width:min(288px,100vw - 48px);top:56px}.sidenav.open{visibility:visible}.header{height:56px}.search.mobile-visible{z-index:110;top:64px}}@media (width<=640px){.header{gap:6px;height:56px;padding-inline:8px}.brand{gap:0;min-width:0}.brand-mark{width:28px;height:28px}.header-actions{gap:4px}.theme-toggle{width:40px;min-height:40px}.mode-toggle{gap:0;padding:2px}.mode-toggle button{min-width:48px;min-height:40px;padding-inline:7px;font-size:12px}.hamburger,.search-toggle{min-width:40px;min-height:40px}.sidenav{width:min(288px,100vw - 48px);top:56px}.search.mobile-visible{top:64px;left:8px;right:8px}.route-not-found{padding:20px 12px}.route-not-found-card{padding:24px 16px}.route-not-found-actions{flex-direction:column}.route-not-found-actions .btn{width:100%}}@media (width<=375px){.header{gap:2px}.header-actions{gap:0}.mode-toggle{min-width:0;padding:0}.mode-toggle button{white-space:nowrap;min-width:44px;padding-inline:2px;font-size:11px}}@media (width<=360px){.header{gap:1px;padding-inline:4px}.hamburger,.search-toggle{flex:0 0 40px;width:40px;min-width:40px;padding:0}}@keyframes shell-scrim-in{0%{opacity:0}to{opacity:1}}.app:not(.is-playground){--focus-ring:var(--cvg-ds-focus)}.app:not(.is-playground) .main .btn{min-height:var(--cvg-ds-control-height);border-radius:var(--radius-md);font:600 var(--cvg-ds-type-action)/1.2 var(--font-ui);gap:8px;padding:7px 12px;transition:color .14s,background-color .14s,border-color .14s,box-shadow .14s}.app:not(.is-playground) .main .btn:not(.btn-primary){border-color:var(--cvg-ds-border-strong);background:var(--cvg-ds-panel);color:var(--cvg-ds-text-primary)}.app:not(.is-playground) .main .btn:not(.btn-primary):hover:not(:disabled){border-color:var(--cvg-ds-action);background:var(--cvg-ds-action-selected)}.app:not(.is-playground) .main .btn-primary{border-color:var(--cvg-ds-action);background:var(--cvg-ds-action);color:var(--cvg-ds-action-on);font-weight:650}.app:not(.is-playground) .main .btn-primary:hover:not(:disabled){border-color:var(--cvg-ds-action-hover);background:var(--cvg-ds-action-hover)}.app:not(.is-playground) .main .btn:disabled,.app:not(.is-playground) .main .btn[aria-disabled=true]{cursor:not-allowed;opacity:.55}.app:not(.is-playground) .main .btn-quiet{color:var(--cvg-ds-text-secondary);background:0 0;border-color:#0000}.app:not(.is-playground) .main .btn-quiet:hover:not(:disabled){color:var(--cvg-ds-action);background:var(--cvg-ds-action-selected)}.app:not(.is-playground) .main .panel{border-color:var(--cvg-ds-border);border-radius:var(--radius-md);background:var(--cvg-ds-panel);box-shadow:none}.app:not(.is-playground) .main .code-panel{background:var(--cvg-ds-panel)}.app:not(.is-playground) .main .code-editor-surface{background:var(--cvg-ds-code)}.app:not(.is-playground) .main .code-lineno-gutter{background:var(--cvg-ds-code-gutter)}.app:not(.is-playground) .main .preview-stage{border:1px solid var(--cvg-ds-border);border-radius:var(--radius-md);background:var(--cvg-ds-inset);box-shadow:none}.app:not(.is-playground) .main .panel-tabs{border-color:var(--cvg-ds-border);gap:4px;min-height:44px;padding-inline:8px}.app:not(.is-playground) .main .panel-tab{min-height:40px;color:var(--cvg-ds-text-secondary);font:550 13px/1.2 var(--font-ui);border-radius:6px 6px 0 0;padding:8px 12px}.app:not(.is-playground) .main .panel-tab[aria-selected=true]{border-bottom-color:var(--cvg-ds-action);background:var(--cvg-ds-action-selected);color:var(--cvg-ds-text-primary)}.app:not(.is-playground) .main .show-in-toggle,.app:not(.is-playground) .main .border-side-picker,.app:not(.is-playground) .main .phase4-segmented{border:1px solid var(--cvg-ds-border);border-radius:var(--radius-md);background:var(--cvg-ds-inset);gap:2px;padding:3px}.app:not(.is-playground) .main .show-in-toggle button,.app:not(.is-playground) .main .border-side-picker button,.app:not(.is-playground) .main .phase4-segmented button{min-height:32px;color:var(--cvg-ds-text-secondary);font:550 13px/1.2 var(--font-ui);background:0 0;border:1px solid #0000;border-radius:5px;padding:6px 10px}.app:not(.is-playground) .main .show-in-toggle button[aria-pressed=true],.app:not(.is-playground) .main .border-side-picker button[aria-pressed=true],.app:not(.is-playground) .main .phase4-segmented button[aria-pressed=true],.app:not(.is-playground) .main .phase4-segmented button.active{border-color:var(--cvg-ds-border-strong);background:var(--cvg-ds-panel);color:var(--cvg-ds-text-primary);box-shadow:inset 0 -2px 0 var(--cvg-ds-action);font-weight:650}.app:not(.is-playground) .main .code-section-label{color:var(--cvg-ds-text-primary);font:650 14px/1.35 var(--font-ui);padding:12px 16px 8px}.app:not(.is-playground) .main .subsection-title{color:var(--cvg-ds-text-primary);font:650 14px/1.35 var(--font-ui)}.app:not(.is-playground) .main .cvg-section-header{border-bottom:1px solid var(--cvg-ds-border);justify-content:space-between;align-items:center;gap:12px;min-width:0;padding:12px 16px;display:flex}.app:not(.is-playground) .main .cvg-section-heading-copy{min-width:0}.app:not(.is-playground) .main .cvg-section-heading-copy h2{color:var(--cvg-ds-text-primary);font:650 14px/1.35 var(--font-ui);margin:0}.app:not(.is-playground) .main .cvg-section-heading-copy p{color:var(--cvg-ds-text-muted);font:400 12px/1.4 var(--font-ui);margin:3px 0 0}.app:not(.is-playground) .main .cvg-section-heading-action{flex:none}.app:not(.is-playground) .main :is(.foundation-controls,.effect-controls,.border-controls,.responsive-controls,.motion-controls,.phase2-controls,.phase3-controls,.phase4-controls,.native-controls,.data-controls,.final-controls){padding:var(--cvg-ds-panel-padding);gap:12px}.app:not(.is-playground) .main :is(.foundation-controls>label,.effect-control,.border-control-row,.responsive-field,.motion-field,.phase2-field,.phase3-field,.phase4-field,.native-field,.data-control-label,.final-field){min-width:0;color:var(--cvg-ds-text-secondary);font:500 13px/1.4 var(--font-ui);gap:6px}.app:not(.is-playground) .main :is(.foundation-controls,.effect-controls,.border-controls,.responsive-controls,.motion-controls,.phase2-controls,.phase3-controls,.phase4-controls,.native-controls,.data-controls,.final-controls) :is(input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=color]),select,textarea){min-width:0;min-height:var(--cvg-ds-control-height);border:1px solid var(--cvg-ds-border-strong);background:var(--cvg-ds-inset);color:var(--cvg-ds-text-primary);font:400 14px/1.35 var(--font-ui);border-radius:6px;padding:7px 10px;transition:border-color .14s,background-color .14s}.app:not(.is-playground) .main :is(.foundation-controls,.effect-controls,.border-controls,.responsive-controls,.motion-controls,.phase2-controls,.phase3-controls,.phase4-controls,.native-controls,.data-controls,.final-controls) :is(input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=color]),select,textarea):hover:not(:disabled){border-color:var(--cvg-ds-border-strong);background:var(--cvg-ds-panel)}.app:not(.is-playground) .main :is(.foundation-controls,.effect-controls,.border-controls,.responsive-controls,.motion-controls,.phase2-controls,.phase3-controls,.phase4-controls,.native-controls,.data-controls,.final-controls) :is(input[type=checkbox],input[type=radio]){accent-color:var(--cvg-ds-action)}.app:not(.is-playground) .main :is(.foundation-controls,.effect-controls,.border-controls,.responsive-controls,.motion-controls,.phase2-controls,.phase3-controls,.phase4-controls,.native-controls,.data-controls,.final-controls) input[type=range],.app:not(.is-playground) .main .slider{width:100%;min-height:24px;accent-color:var(--cvg-ds-action);cursor:pointer}.app:not(.is-playground) .main .slider{height:4px}.app:not(.is-playground) .main .slider::-webkit-slider-thumb{border:2px solid var(--cvg-ds-canvas);background:var(--cvg-ds-action);width:18px;height:18px;box-shadow:0 0 0 1px var(--cvg-ds-border-strong)}.app:not(.is-playground) .main .slider::-moz-range-thumb{border:2px solid var(--cvg-ds-canvas);background:var(--cvg-ds-action);width:14px;height:14px;box-shadow:0 0 0 1px var(--cvg-ds-border-strong)}.app:not(.is-playground) .main .number-field,.app:not(.is-playground) .main .preset-chip{border-color:var(--cvg-ds-border-strong);background:var(--cvg-ds-inset);border-radius:6px}.app:not(.is-playground) .main .number-field input{min-height:34px;color:var(--cvg-ds-text-primary);font:500 14px/1 var(--font-mono)}.app:not(.is-playground) .main .unit-suffix{color:var(--cvg-ds-text-muted);font:12px var(--font-ui)}.app:not(.is-playground) .main .preset-chip{min-height:32px;color:var(--cvg-ds-text-secondary);font:500 12px/1.2 var(--font-mono);padding:6px 10px}.app:not(.is-playground) .main .preset-chip[aria-pressed=true]{border-color:var(--cvg-ds-action);background:var(--cvg-ds-action-selected);color:var(--cvg-ds-text-primary);box-shadow:inset 0 -2px 0 var(--cvg-ds-action)}.app:not(.is-playground) .main .example-strip{gap:var(--cvg-ds-card-gap);grid-template-columns:repeat(auto-fill,minmax(min(100%,76px),1fr));display:grid}.app:not(.is-playground) .main .example-tile{border-color:var(--cvg-ds-border);border-radius:var(--radius-md);background:var(--cvg-ds-inset);min-width:0;min-height:104px;color:var(--cvg-ds-text-secondary);text-align:center;grid-template-rows:minmax(38px,auto) auto auto;align-content:center;justify-items:center;gap:4px;padding:8px 6px;transition:border-color .14s,background-color .14s,transform .14s;display:grid}.app:not(.is-playground) .main .example-tile:hover:not(.static){border-color:var(--cvg-ds-action);background:var(--cvg-ds-action-selected);transform:translateY(-1px)}.app:not(.is-playground) .main .example-tile[aria-pressed=true],.app:not(.is-playground) .main .gallery-card:is([aria-pressed=true],.active){border-color:var(--cvg-ds-action);background:var(--cvg-ds-action-selected);box-shadow:inset 0 -2px 0 var(--cvg-ds-action)}.app:not(.is-playground) .main .example-tile:focus-visible{z-index:1;outline:2px solid var(--cvg-ds-focus);outline-offset:2px}.app:not(.is-playground) .main .topic-doc-link{color:var(--cvg-ds-action);text-underline-offset:3px;text-decoration-thickness:1px}.app:not(.is-playground) .main .topic-doc-link:hover{color:var(--cvg-ds-action-hover)}.app:not(.is-playground) .main .topic-doc-link:focus-visible{outline:2px solid var(--cvg-ds-focus);outline-offset:3px;border-radius:2px}.app:not(.is-playground) .main .example-tile-preview{place-items:center;width:100%;min-height:38px;display:grid}.app:not(.is-playground) .main .example-shape{background:var(--cvg-ds-demo-item);width:36px;max-width:100%;height:36px;box-shadow:none;border-radius:6px}.app:not(.is-playground) .main .example-typography-preview{width:auto;height:auto;color:var(--cvg-ds-text-primary);background:0 0;justify-items:start;gap:3px;display:grid}.app:not(.is-playground) .main .example-typography-preview strong{font:700 14px/1.1 var(--font-ui)}.app:not(.is-playground) .main .example-typography-preview i{background:var(--cvg-ds-border-strong);border-radius:2px;width:30px;height:2px;display:block}.app:not(.is-playground) .main .example-typography-preview i:last-child{width:21px}.app:not(.is-playground) .main .example-value{-webkit-line-clamp:2;max-width:100%;color:var(--cvg-ds-text-primary);font:600 12px/1.25 var(--font-ui);overflow-wrap:break-word;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.app:not(.is-playground) .main .example-caption{max-width:100%;color:var(--cvg-ds-text-muted);font:400 12px/1.25 var(--font-ui);overflow-wrap:break-word}.app:not(.is-playground) .main .cvg-example-use-cases-title{margin:16px 0 8px}.app:not(.is-playground) .main .chip-row{gap:6px}.app:not(.is-playground) .main .info-chip{border-color:var(--cvg-ds-border);border-radius:var(--radius-pill);background:var(--cvg-ds-inset);color:var(--cvg-ds-text-secondary);font:500 12px/1.25 var(--font-ui);padding:5px 9px}.app:not(.is-playground) .main .gallery-scroll{grid-template-columns:repeat(auto-fit,minmax(min(100%,148px),1fr));gap:8px;padding:12px 16px 16px;display:grid}.app:not(.is-playground) .main .gallery-card{border-color:var(--cvg-ds-border);border-radius:var(--radius-md);background:var(--cvg-ds-panel);min-width:0;min-height:112px;color:var(--cvg-ds-text-primary);text-align:left;align-items:stretch;gap:6px;padding:8px;transition:border-color .14s,background-color .14s,transform .14s}.app:not(.is-playground) .main .gallery-card:hover:not(.static){border-color:var(--cvg-ds-action);background:var(--cvg-ds-action-selected);transform:translateY(-1px)}.app:not(.is-playground) .main .gallery-preview-frame{background:var(--cvg-ds-inset);border-radius:6px;place-items:center;width:100%;min-height:54px;display:grid;overflow:hidden}.app:not(.is-playground) .main .gallery-shape{background:var(--cvg-ds-demo-item);width:72px;max-width:100%;height:42px;max-height:52px;box-shadow:none;border-radius:5px}.app:not(.is-playground) .main .gallery-shape.example-typography-preview{background:0 0;width:auto;min-width:72px;padding:4px 6px;height:auto!important}.app:not(.is-playground) .main .example-scenario{background:var(--cvg-ds-panel);width:min(82px,100%);height:42px;color:var(--cvg-ds-text-secondary);align-content:center;display:grid;overflow:hidden}.app:not(.is-playground) .main .example-scenario-border{border:1px solid var(--cvg-ds-border-strong);border-radius:3px;gap:3px;padding:5px;position:relative}.app:not(.is-playground) .main .example-scenario-border i,.app:not(.is-playground) .main .example-scenario-border b{background:var(--cvg-ds-border-strong);width:72%;height:2px;display:block}.app:not(.is-playground) .main .example-scenario-border.input{border-color:var(--cvg-ds-action);background:var(--cvg-ds-inset);border-radius:4px;width:72px;height:23px}.app:not(.is-playground) .main .example-scenario-border.divider{border:0;grid-template-rows:1fr 1px 1fr}.app:not(.is-playground) .main .example-scenario-border.divider b{background:var(--cvg-ds-action);width:100%;height:1px}.app:not(.is-playground) .main .example-scenario-border.callout{border-inline-start:4px solid var(--cvg-ds-action)}.app:not(.is-playground) .main .example-scenario-border.accent{border-top:4px solid var(--cvg-ds-action)}.app:not(.is-playground) .main .example-scenario-grid{border:1px solid var(--cvg-ds-border);border-radius:3px;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:12px;gap:2px;padding:3px}.app:not(.is-playground) .main .example-scenario-grid i{background:var(--cvg-ds-demo-item);min-width:0;font:7px var(--font-ui);border-radius:2px;place-items:center;display:grid}.app:not(.is-playground) .main .example-scenario-grid[data-scenario="2-columns"]{grid-template-columns:repeat(2,minmax(0,1fr))}.app:not(.is-playground) .main .example-scenario-grid[data-scenario=sidebar],.app:not(.is-playground) .main .example-scenario-grid[data-scenario=sidebar\/content]{grid-template-columns:1fr 2fr}.app:not(.is-playground) .main .example-scenario-grid[data-scenario=dashboard]{grid-template-columns:repeat(4,minmax(0,1fr))}.app:not(.is-playground) .main .example-scenario-grid[data-scenario=span] i:first-child{grid-column:span 2}.app:not(.is-playground) .main .example-scenario-grid[data-scenario=magazine\ composition]{grid-template-columns:2fr 1fr}.app:not(.is-playground) .main .example-scenario-grid[data-scenario=gallery],.app:not(.is-playground) .main .example-scenario-grid[data-scenario=auto-fit]{grid-template-columns:repeat(4,minmax(0,1fr))}.app:not(.is-playground) .main .example-scenario-transform{background:0 0;place-items:center;overflow:visible}.app:not(.is-playground) .main .example-scenario-transform i{border:1px solid var(--cvg-ds-action);background:var(--cvg-ds-demo-item);width:36px;height:25px;color:var(--cvg-ds-text-primary);font:600 9px var(--font-ui);border-radius:4px;place-items:center;display:grid}.app:not(.is-playground) .main .example-scenario-responsive{border-bottom:1px solid var(--cvg-ds-border);grid-template-columns:auto 1fr;align-items:center;gap:3px}.app:not(.is-playground) .main .example-scenario-responsive i{background:var(--cvg-ds-demo-item);width:16px;height:24px;display:block}.app:not(.is-playground) .main .example-scenario-responsive b{font:8px var(--font-ui)}.app:not(.is-playground) .main .example-scenario-responsive.fluid-heading i{width:14px;height:30px}.app:not(.is-playground) .main .example-scenario-responsive.responsive-spacing{gap:8px}.app:not(.is-playground) .main .example-scenario-responsive.card-width i{width:30px}.app:not(.is-playground) .main .example-scenario-responsive.readable-measure b{max-width:36px}.app:not(.is-playground) .main .example-scenario-responsive.viewport-hero i{width:14px;height:34px}.app:not(.is-playground) .main .example-scenario-responsive.fluid-padding{padding:5px}.app:not(.is-playground) .main .example-scenario-responsive.fluid-heading{grid-template-columns:auto 1fr;gap:4px}.app:not(.is-playground) .main .example-scenario-responsive.fluid-heading strong{color:var(--cvg-ds-text-primary);font:700 17px/1 var(--font-ui)}.app:not(.is-playground) .main .example-scenario-responsive.responsive-spacing{justify-content:center;gap:8px;display:flex}.app:not(.is-playground) .main .example-scenario-responsive.responsive-spacing i{border-radius:3px;width:12px;height:12px}.app:not(.is-playground) .main .example-scenario-responsive.card-width{border:1px solid var(--cvg-ds-border-strong);border-radius:4px;justify-items:center}.app:not(.is-playground) .main .example-scenario-responsive.card-width b,.app:not(.is-playground) .main .example-scenario-responsive.readable-measure b,.app:not(.is-playground) .main .example-scenario-responsive.fluid-padding b{color:var(--cvg-ds-text-secondary);font:8px var(--font-ui)}.app:not(.is-playground) .main .example-scenario-responsive.readable-measure{grid-template-columns:1fr;justify-items:start;width:82px}.app:not(.is-playground) .main .example-scenario-responsive.readable-measure b{max-width:62px;line-height:1.2}.app:not(.is-playground) .main .example-scenario-responsive.viewport-hero{background:var(--cvg-ds-demo-item);grid-template-columns:auto 1fr;align-content:center}.app:not(.is-playground) .main .example-scenario-responsive.viewport-hero strong{color:var(--cvg-ds-text-primary);font:700 10px var(--font-ui)}.app:not(.is-playground) .main .example-scenario-responsive.fluid-padding{border:1px solid var(--cvg-ds-border);border-radius:4px;width:82px;padding:6px}.app:not(.is-playground) .main .gallery-shape.example-typography-preview strong{font-size:16px}.app:not(.is-playground) .main .gallery-code{-webkit-line-clamp:2;color:var(--cvg-ds-text-primary);font:600 13px/1.3 var(--font-ui);text-align:left;overflow-wrap:break-word;word-break:normal;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.app:not(.is-playground) .main .gallery-code.is-code{font:500 12px/1.4 var(--font-mono)}.app:not(.is-playground) .main .gallery-caption{color:var(--cvg-ds-text-muted);font:400 12px/1.35 var(--font-ui);text-align:left;overflow-wrap:anywhere;-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.app:not(.is-playground) .main .gallery-card.static{cursor:default}.app:not(.is-playground) .main .gallery-card:disabled{opacity:1}.app:not(.is-playground) .main :is(.phase4-example-grid,.phase2-example-grid,.phase3-example-grid,.final-example-grid,.data-example-grid,.native-example-grid){grid-template-columns:repeat(auto-fit,minmax(min(100%,148px),1fr));gap:8px}.app:not(.is-playground) .main :is(.phase4-example-card,.phase2-gallery-card,.phase3-example-card,.final-example-card,.data-example-card,.native-example-card){border:1px solid var(--cvg-ds-border);border-radius:var(--radius-md);background:var(--cvg-ds-inset);min-width:0;min-height:112px;color:var(--cvg-ds-text-primary);text-align:left;font-family:var(--font-ui);gap:6px;padding:8px;transition:border-color .14s,background-color .14s}.app:not(.is-playground) .main :is(.phase4-example-card,.phase2-gallery-card,.phase3-example-card,.final-example-card,.data-example-card,.native-example-card):hover:not(:disabled){border-color:var(--cvg-ds-action);background:var(--cvg-ds-action-selected)}.app:not(.is-playground) .main :is(.phase4-example-card,.phase2-gallery-card,.phase3-example-card,.final-example-card,.data-example-card,.native-example-card):is(.active,[aria-pressed=true]){border-color:var(--cvg-ds-action);background:var(--cvg-ds-action-selected);box-shadow:inset 0 -2px 0 var(--cvg-ds-action)}.app:not(.is-playground) .main :is(.phase4-example-card,.phase2-gallery-card,.phase3-example-card,.final-example-card,.data-example-card,.native-example-card)>strong{color:var(--cvg-ds-text-primary);font:600 13px/1.35 var(--font-ui);white-space:normal;overflow-wrap:break-word}.app:not(.is-playground) .main :is(.phase4-example-card,.phase2-gallery-card,.phase3-example-card,.final-example-card,.data-example-card,.native-example-card)>small{min-height:0;color:var(--cvg-ds-text-muted);font:400 12px/1.35 var(--font-ui);white-space:normal;overflow-wrap:break-word}.app:not(.is-playground) .main .foundation-learn{padding:var(--cvg-ds-panel-padding);border-color:var(--cvg-ds-border);border-radius:var(--radius-md);background:var(--cvg-ds-panel)}.app:not(.is-playground) .main .foundation-learn-heading{border:1px solid var(--cvg-ds-border);border-radius:var(--radius-md);background:var(--cvg-ds-inset);color:var(--cvg-ds-text-primary);padding:20px}.app:not(.is-playground) .main .foundation-learn-heading span,.app:not(.is-playground) .main .foundation-learn-heading p{color:var(--cvg-ds-text-secondary);font-family:var(--font-ui)}.app:not(.is-playground) .main .foundation-learn-heading h1{font:700 28px/1.2 var(--font-ui)}.app:not(.is-playground) .main .foundation-learn-stage{border:1px solid var(--cvg-ds-border);background:var(--cvg-ds-inset)}.app:not(.is-playground) .main .foundation-learn-steps button{border-color:var(--cvg-ds-border);border-radius:var(--radius-md);background:var(--cvg-ds-inset);min-height:56px;color:var(--cvg-ds-text-secondary)}.app:not(.is-playground) .main .foundation-learn-steps button.active{border-color:var(--cvg-ds-action);background:var(--cvg-ds-action-selected);box-shadow:inset 3px 0 0 var(--cvg-ds-action)}.app:not(.is-playground) .main .foundation-learn-steps b{background:var(--cvg-ds-action);color:var(--cvg-ds-action-on);font:650 13px/1 var(--font-ui);border-radius:6px}.app:not(.is-playground) .main .foundation-learn-steps strong{color:var(--cvg-ds-text-primary);font:600 14px/1.3 var(--font-ui)}.app:not(.is-playground) .main .foundation-learn-steps span{color:var(--cvg-ds-text-muted);font:400 12px/1.3 var(--font-ui)}.app:not(.is-playground) .main .foundation-learn-footer{background:var(--cvg-ds-inset)}.app:not(.is-playground) .main .foundation-learn-footer code{color:var(--cvg-ds-text-secondary);font:12px/1.5 var(--font-mono)}.app:not(.is-playground) .main .flexbox-stage-toggle,.app:not(.is-playground) .main .flexbox-stage-list ol button,.app:not(.is-playground) .main .html-learn-stepper button{border:1px solid var(--cvg-ds-border);background:var(--cvg-ds-inset);min-height:36px;color:var(--cvg-ds-text-secondary);font:550 13px/1.3 var(--font-ui);border-radius:6px}.app:not(.is-playground) .main .flexbox-stage-list ol button[aria-current=step]{border-color:var(--cvg-ds-action);background:var(--cvg-ds-action-selected);color:var(--cvg-ds-text-primary);box-shadow:inset 3px 0 0 var(--cvg-ds-action)}.app:not(.is-playground) .main .flexbox-try-reference{color:var(--cvg-ds-action);font:600 13px/1.35 var(--font-ui)}.app:not(.is-playground) .main :is(.docs-card,.foundation-result,.effect-result,.responsive-result,.motion-result,.border-result-card){padding:var(--cvg-ds-panel-padding)}.app:not(.is-playground) .main .docs-card{gap:10px}.app:not(.is-playground) .main .docs-title{color:var(--cvg-ds-text-primary);font:650 15px/1.35 var(--font-ui)}.app:not(.is-playground) .main .docs-prose{color:var(--cvg-ds-text-secondary);font:400 14px/1.5 var(--font-ui)}.app:not(.is-playground) .main .value-doc-name{color:var(--cvg-ds-action);font:600 13px/1.4 var(--font-mono)}.app:not(.is-playground) .main .value-doc-desc{color:var(--cvg-ds-text-secondary);font:400 13px/1.45 var(--font-ui)}.app:not(.is-playground) .main .syntax-chip{border-color:var(--cvg-ds-border);background:var(--cvg-ds-code);color:var(--cvg-ds-action-hover);font:400 13px/1.5 var(--font-mono)}.app:not(.is-playground) .main .editable-hint{border:1px solid var(--cvg-ds-border);background:var(--cvg-ds-action-selected);color:var(--cvg-ds-action);font:600 12px/1.3 var(--font-ui)}.app:not(.is-playground) .main .reference-resize-handle:hover:after,.app:not(.is-playground) .main .reference-resize-handle:focus-visible:after{background:var(--cvg-ds-action);box-shadow:0 0 0 3px var(--cvg-ds-action-selected)}.app:not(.is-playground) .main :is(.btn,.panel-tab,.code-copy-btn,.slider,.example-tile,.gallery-card,.preset-chip,.show-in-toggle button,.border-side-picker button,.phase4-segmented button,.reference-resize-handle,.foundation-controls input,.foundation-controls select,.effect-controls input,.effect-controls select,.border-controls input,.border-controls select,.responsive-controls input,.responsive-controls select,.motion-controls input,.motion-controls select,.phase2-controls input,.phase2-controls select,.phase3-controls input,.phase3-controls select,.phase4-controls input,.phase4-controls select,.native-controls input,.native-controls select,.data-controls input,.data-controls select,.final-controls input,.final-controls select):focus-visible,.app:not(.is-playground) .main :focus-visible:not(.code-textarea):not(.reference-resize-handle){outline:2px solid var(--cvg-ds-focus);outline-offset:2px}.app:not(.is-playground) .main :is(.html-learn-replay,.html-learn-try button,.html-learn-stepper button,.learn-attribute-controls button,.learn-text-controls button,.learn-list-controls button,.learn-link-controls button,.learn-image-controls button,.learn-responsive-controls button,.learn-media-timeline button,.flexbox-stage-toggle,.flexbox-stage-list button,.foundation-learn-steps button):focus-visible{border-color:var(--cvg-ds-action);background:var(--cvg-ds-action-selected);color:var(--cvg-ds-text-primary)}.app:not(.is-playground) .main .reference-resize-handle:focus-visible{outline-color:#0000}.app:not(.is-playground) .main :is(.code-copy-btn,.preset-chip,.show-in-toggle button,.border-side-picker button,.phase4-segmented button):disabled{cursor:not-allowed;opacity:.55}@media (width<=640px){.app:not(.is-playground) .main .cvg-section-header{align-items:flex-start;gap:8px;padding:12px}.app:not(.is-playground) .main .example-strip{grid-template-columns:repeat(auto-fill,minmax(min(100%,72px),1fr));gap:6px}.app:not(.is-playground) .main .example-tile{min-height:100px;padding-inline:4px}.app:not(.is-playground) .main .gallery-scroll{grid-template-columns:repeat(2,minmax(0,1fr));padding:10px 12px 12px}.app:not(.is-playground) .main :is(.phase4-example-grid,.phase2-example-grid,.phase3-example-grid,.final-example-grid,.data-example-grid,.native-example-grid){grid-template-columns:repeat(2,minmax(0,1fr))}.app:not(.is-playground) .main :is(.docs-card,.foundation-result,.effect-result,.responsive-result,.motion-result,.border-result-card){padding:12px}}html[data-theme=dark] .app:not(.is-playground):has(.css-reference-workspace){background:var(--cvg-ds-canvas)}html[data-theme=dark] .app:not(.is-playground):has(.css-reference-workspace) .main{background:var(--cvg-ds-canvas)}.app:not(.is-playground) .main .css-reference-workspace{box-sizing:border-box;grid-template-columns:minmax(0,1.6fr) minmax(320px,.9fr);align-items:start;gap:14px;min-width:0;padding:0 24px 18px;display:grid}.app:not(.is-playground) .main .responsive-family-reference :is(.responsive-result,.responsive-controls,.quick-examples-panel,.docs-col){min-width:0}.app:not(.is-playground) .main .responsive-family-reference .responsive-result{padding:16px}.app:not(.is-playground) .main .responsive-family-reference .responsive-scene{min-width:0;max-width:100%;color:var(--cvg-ds-text-primary);background:var(--cvg-ds-inset);border:1px solid var(--cvg-ds-border-strong)}.app:not(.is-playground) .main .responsive-family-reference .responsive-scene>small{color:var(--cvg-ds-text-secondary)}.app:not(.is-playground) .main .responsive-family-reference .media-responsive-scene:has(.responsive-match-status){box-sizing:border-box;grid-template-rows:auto 1fr auto;grid-template-columns:minmax(0,1fr);place-items:stretch stretch;gap:6px;padding:8px 10px;display:grid}.app:not(.is-playground) .main .responsive-family-reference .responsive-match-status{z-index:auto;max-width:100%;color:var(--cvg-ds-text-secondary);background:var(--cvg-ds-panel);border:1px solid var(--cvg-ds-border);font:11px/1.35 var(--font-ui);border-radius:5px;align-items:center;gap:8px;padding:5px 8px;display:flex;position:static}.app:not(.is-playground) .main .responsive-family-reference .media-responsive-scene:has(.responsive-match-status) .responsive-frame-shell{grid-row:2}.app:not(.is-playground) .main .responsive-family-reference .media-responsive-scene:has(.responsive-match-status)>small{text-align:right;grid-row:3;justify-self:end;max-width:100%;position:static}.app:not(.is-playground) .main .responsive-family-reference .responsive-match-status>span{font-variant-numeric:tabular-nums;white-space:nowrap}.app:not(.is-playground) .main .responsive-family-reference .responsive-match-status>strong{color:var(--cvg-ds-text-primary);font-weight:650}.app:not(.is-playground) .main .responsive-family-reference .media-responsive-scene[data-query-match=true] .responsive-match-status>strong{color:var(--cvg-ds-success)}.app:not(.is-playground) .main .responsive-family-reference .units-parent,.app:not(.is-playground) .main .responsive-family-reference .container-outer{border-color:var(--cvg-ds-border-strong);background:var(--cvg-ds-panel);min-width:0}.app:not(.is-playground) .main .responsive-family-reference .units-facts span{color:var(--cvg-ds-text-secondary);background:var(--cvg-ds-panel)}.app:not(.is-playground) .main .responsive-family-reference .container-viewport-label,.app:not(.is-playground) .main .responsive-family-reference .container-readout{color:var(--cvg-ds-text-secondary)}.app:not(.is-playground) .main .responsive-family-reference :is(.responsive-container,.responsive-card),.app:not(.is-playground) .main .css-reference-primary,.app:not(.is-playground) .main .css-reference-support,.app:not(.is-playground) .main .css-reference-slot{min-width:0}.app:not(.is-playground) .main .css-reference-primary{grid-template-rows:max-content max-content;align-content:start;gap:14px;display:grid}.app:not(.is-playground) .main .css-reference-support{grid-template-columns:minmax(0,1fr);align-content:start;gap:12px;display:grid}.app:not(.is-playground) .main .css-reference-slot>.docs-col{gap:10px;min-width:0;display:grid}.app:not(.is-playground) .main .layout-family-reference .layout-reference-controls>label{font-size:12px}.app:not(.is-playground) .main :is(.layout-flexbox-reference,.layout-grid-reference) .layout-reference-controls{grid-template-columns:repeat(2,minmax(0,1fr))}.app:not(.is-playground) .main :is(.layout-flexbox-reference,.layout-grid-reference) .layout-reference-controls>.code-section-label{grid-column:1/-1}.app:not(.is-playground) .main :is(.layout-flexbox-reference,.layout-grid-reference) .layout-reference-controls>label,.app:not(.is-playground) .main .layout-family-reference .layout-result-panel{min-width:0}.app:not(.is-playground) .main .layout-flexbox-reference .flex-scene[style*="flex-flow: wrap"]{width:min(100%,280px)}.app:not(.is-playground) .main .layout-family-reference .layout-scene-frame{border-radius:var(--radius-md);width:100%;min-width:0;overflow:hidden}.app:not(.is-playground) .main .layout-family-reference .overflow-scene-frame,.app:not(.is-playground) .main .layout-family-reference .overflow-scene,.app:not(.is-playground) .main .layout-family-reference .position-scene-frame,.app:not(.is-playground) .main .layout-family-reference .position-scene{max-width:100%}.app:not(.is-playground) .main:has(.layout-position-reference) :is(.example-tile-preview,.gallery-preview-frame){position:relative;overflow:hidden;transform:translateZ(0)}.app:not(.is-playground) .main:has(.layout-flexbox-reference) .example-flex-scenario{border:1px solid var(--cvg-ds-border-strong);background:var(--cvg-ds-inset);border-radius:5px;justify-content:flex-start;gap:4px;width:100%;min-width:0;max-width:none;height:42px;min-height:42px;padding:4px}.app:not(.is-playground) .main:has(.layout-flexbox-reference) .example-flex-scenario>:is(i,b){min-width:0;min-height:16px;color:var(--cvg-ds-text-secondary);background:var(--cvg-ds-panel);font:600 8px/1 var(--font-ui);padding:3px 4px}.app:not(.is-playground) .main:has(.layout-flexbox-reference) .example-flex-scenario .flex-preview-brand{color:var(--cvg-ds-text-primary);background:var(--cvg-ds-demo-item)}.app:not(.is-playground) .main:has(.layout-flexbox-reference) .example-flex-scenario .flex-preview-action{color:var(--cvg-ds-action-on);background:var(--cvg-ds-action);margin-left:auto}.app:not(.is-playground) .main:has(.layout-flexbox-reference) .example-flex-scenario .flex-preview-centered{margin:auto}.app:not(.is-playground) .main:has(.layout-flexbox-reference) .example-flex-scenario .flex-preview-card{min-height:24px;color:var(--cvg-ds-text-primary);background:var(--cvg-ds-demo-item);flex:1 1 0}.app:not(.is-playground) .main:has(.layout-flexbox-reference) .example-flex-scenario .flex-preview-pill{border:1px solid var(--cvg-ds-border-strong);background:var(--cvg-ds-panel);border-radius:999px}.app:not(.is-playground) .main:has(.layout-flexbox-reference) .example-flex-scenario .flex-preview-sidebar{min-height:28px;color:var(--cvg-ds-text-primary);background:var(--cvg-ds-demo-item);flex:0 0 24px}.app:not(.is-playground) .main:has(.layout-flexbox-reference) .example-flex-scenario .flex-preview-content{min-height:28px;color:var(--cvg-ds-text-primary);background:var(--cvg-ds-inset-strong);flex:auto}.app:not(.is-playground) .main .layout-family-reference .display-none-note{color:var(--text-secondary);border:1px dashed var(--border-strong);border-radius:var(--radius-sm);margin:0;padding:14px;font-size:14px}.app:not(.is-playground) .main .css-reference-code .code-panel{width:100%;height:min(var(--code-panel-content-height,380px), 440px);min-height:280px;max-height:440px}.app:not(.is-playground) .main .css-reference-code>.code-panel:has(>.code-panel){display:contents}.app:not(.is-playground) .main .css-reference-code .code-views,.app:not(.is-playground) .main .css-reference-code .code-editor-block,.app:not(.is-playground) .main .css-reference-code .code-editor-wrapper,.app:not(.is-playground) .main .css-reference-code .code-editor-surface{min-height:0}.app:not(.is-playground) .main .css-reference-mobile-action{display:none}.app:not(.is-playground) .main .css-reference-workspace .reference-resize-handle:after{background:var(--cvg-ds-action)}.app:not(.is-playground) .main .css-reference-workspace .reference-layout-reset{min-height:24px;color:var(--cvg-ds-text-secondary);background:var(--cvg-ds-panel);border-color:var(--cvg-ds-border);padding:3px 7px;top:24px;right:40px}.app:not(.is-playground) .main .css-reference-workspace .reference-layout-reset:focus-visible,.app:not(.is-playground) .main .css-reference-workspace .reference-resize-handle:focus-visible{outline:2px solid var(--cvg-ds-focus);outline-offset:2px}.app:not(.is-playground) .main .css-reference-workspace .radius-controls-panel .playground-body{gap:12px}.app:not(.is-playground) .main .css-reference-workspace .radius-result-panel .preview-stage{min-height:290px}.app:not(.is-playground) .main .css-reference-workspace .border-result-card{min-height:310px}.app:not(.is-playground) .main .css-reference-workspace .effect-result .effect-stage{min-height:230px}.app:not(.is-playground) .main .gallery-area{padding:0 24px 24px}.app:not(.is-playground) .main .motion-reference-family .motion-result{min-width:0;padding:16px}.app:not(.is-playground) .main .motion-reference-family .motion-scene{isolation:isolate;contain:layout paint;border-color:var(--cvg-ds-border-strong);width:100%;min-width:0;min-height:300px;overflow:hidden}.app:not(.is-playground) .main .motion-reference-family .motion-controls,.app:not(.is-playground) .main .motion-reference-family .motion-field,.app:not(.is-playground) .main .motion-reference-family .motion-field input,.app:not(.is-playground) .main .motion-reference-family .motion-field select{min-width:0}.app:not(.is-playground) .main .motion-reference-family .motion-trigger{min-height:36px}.app:not(.is-playground) .main .motion-reference-family .css-reference-code .code-panel{--code-panel-content-height:340px}.app:not(.is-playground) .main:has(.motion-reference-family) :is(.example-tile-preview,.gallery-preview-frame){position:relative;overflow:hidden;transform:translateZ(0)}.app:not(.is-playground) .main:has(.motion-reference-family) .example-motion-animation i{animation:none!important}.app:not(.is-playground) .main:has(.motion-reference-family) .example-scenario-transition{width:100%;min-width:0;color:var(--cvg-ds-text-secondary);background:var(--cvg-ds-inset);border:1px solid var(--cvg-ds-border);box-shadow:none;box-sizing:border-box;border-radius:5px;justify-content:center;align-items:center;gap:4px;padding:4px 6px;display:flex;position:relative;overflow:hidden;height:44px!important}:is(.app:not(.is-playground) .main:has(.motion-reference-family) .example-scenario-transition b,.app:not(.is-playground) .main:has(.motion-reference-family) .example-scenario-transition i){place-items:center;min-width:0;font-style:normal;display:grid}.app:not(.is-playground) .main:has(.motion-reference-family) .example-scenario-transition.button-hover b{min-height:22px;color:var(--cvg-ds-action-on);background:var(--cvg-ds-action);box-shadow:0 2px 0 var(--cvg-ds-action-pressed);border-radius:4px;padding:0 8px;font-size:8px}.app:not(.is-playground) .main:has(.motion-reference-family) .example-scenario-transition.button-hover i{color:var(--cvg-ds-action);font-size:12px}.app:not(.is-playground) .main:has(.motion-reference-family) .example-scenario-transition.card-lift{flex-direction:column;gap:2px}.app:not(.is-playground) .main:has(.motion-reference-family) .example-scenario-transition.card-lift b{width:34px;height:18px;color:var(--cvg-ds-text-primary);background:var(--cvg-ds-panel);border:1px solid var(--cvg-ds-border);box-shadow:0 3px 0 var(--cvg-ds-action);border-radius:3px;font-size:7px}.app:not(.is-playground) .main:has(.motion-reference-family) .example-scenario-transition.card-lift i{background:var(--cvg-ds-text-muted);width:28px;height:2px}.app:not(.is-playground) .main:has(.motion-reference-family) .example-scenario-transition.menu-indicator{justify-content:space-evenly;padding-bottom:8px}:is(.app:not(.is-playground) .main:has(.motion-reference-family) .example-scenario-transition.menu-indicator b,.app:not(.is-playground) .main:has(.motion-reference-family) .example-scenario-transition.menu-indicator i){color:var(--cvg-ds-text-secondary);font-size:7px}.app:not(.is-playground) .main:has(.motion-reference-family) .example-scenario-transition.menu-indicator em{background:var(--cvg-ds-action);border-radius:2px;width:22%;height:2px;position:absolute;bottom:9px;left:19%}.app:not(.is-playground) .main:has(.motion-reference-family) .example-scenario-transition.image-zoom i{border:2px solid var(--cvg-ds-panel);width:36px;height:28px;box-shadow:0 0 0 1px var(--cvg-ds-border-strong);background:linear-gradient(135deg,#64b998 0 35%,#78a9e8 36% 68%,#efaa76 69%);border-radius:3px}.app:not(.is-playground) .main:has(.motion-reference-family) .example-scenario-transition.image-zoom b{width:13px;height:13px;color:var(--cvg-ds-action-on);background:var(--cvg-ds-action);border-radius:50%;font-size:9px;position:absolute;top:6px;right:calc(50% - 23px)}.app:not(.is-playground) .main:has(.motion-reference-family) .example-scenario-transition.disclosure{grid-template-columns:1fr auto;place-content:center stretch;gap:3px 6px;padding:5px 9px;display:grid}.app:not(.is-playground) .main:has(.motion-reference-family) .example-scenario-transition.disclosure b{color:var(--cvg-ds-text-primary);justify-self:start;font-size:8px}.app:not(.is-playground) .main:has(.motion-reference-family) .example-scenario-transition.disclosure i{color:var(--cvg-ds-action);grid-area:1/2;font-size:11px}.app:not(.is-playground) .main:has(.motion-reference-family) .example-scenario-transition.disclosure em{background:var(--cvg-ds-text-muted);border-radius:2px;grid-column:1/-1;width:75%;height:2px}.app:not(.is-playground) .main:has(.motion-reference-family) .example-scenario-transition.focus-state i{height:24px;color:var(--cvg-ds-text-secondary);background:var(--cvg-ds-panel);border:1px solid var(--cvg-ds-action);box-shadow:0 0 0 2px var(--cvg-ds-action-selected);opacity:.75;border-radius:4px;flex:1;justify-content:start;padding:0 5px;font-size:7px}.app:not(.is-playground) .main:has(.motion-reference-family) .example-scenario-transition.focus-state b{width:16px;color:var(--cvg-ds-action);font-size:11px}@media (width>=1201px){.app:not(.is-playground) .main .motion-reference-family .motion-controls{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:8px 14px;display:grid}.app:not(.is-playground) .main .motion-reference-family .motion-controls>.code-section-label{grid-column:1/-1}.app:not(.is-playground) .main .motion-reference-family .motion-field:has(select[aria-label=Transform\ origin],select[aria-label=Function\ order]){grid-column:1/-1}.app:not(.is-playground) .main .motion-reference-family .motion-field{margin:2px 0}.app:not(.is-playground) .main .motion-reference-family .motion-trigger{align-self:end;margin:0}}@media (width<=1200px){.app:not(.is-playground) .main .css-reference-workspace{grid-template-columns:minmax(0,1fr);grid-template-areas:"result""controls""code""mobile-action""quickExamples""docs";gap:10px;padding:0 12px 14px;display:grid}.app:not(.is-playground) .main .css-reference-primary,.app:not(.is-playground) .main .css-reference-support{display:contents}.app:not(.is-playground) .main .css-reference-result{grid-area:result}.app:not(.is-playground) .main .css-reference-controls{grid-area:controls}.app:not(.is-playground) .main .css-reference-code{grid-area:code}.app:not(.is-playground) .main .css-reference-mobile-action{grid-area:mobile-action;display:block}.app:not(.is-playground) .main:has(.css-reference-workspace) .topic-actions{display:none}.app:not(.is-playground) .main .css-reference-quick{grid-area:quickExamples}.app:not(.is-playground) .main .css-reference-docs{grid-area:docs}.app:not(.is-playground) .main .css-reference-code .code-panel{height:400px;min-height:340px;max-height:none}.app:not(.is-playground) .main .css-reference-workspace .border-result-card{min-height:245px}.app:not(.is-playground) .main .css-reference-workspace .radius-result-panel .preview-stage{min-height:220px}.app:not(.is-playground) .main .css-reference-workspace .effect-result .effect-stage{min-height:190px}.app:not(.is-playground) .main .motion-reference-family .motion-scene{min-height:260px}.app:not(.is-playground) .main :is(.css-reference-playground-action,.border-mobile-playground){width:100%;min-height:44px;color:var(--cvg-ds-action-on);background:var(--cvg-ds-action);font:650 var(--cvg-ds-type-action)/1.2 var(--font-ui);border:0;border-radius:7px;justify-content:space-between;align-items:center;padding:0 14px;display:flex}.app:not(.is-playground) .main .gallery-area{padding:0 12px 18px}}@media (width<=560px){.app:not(.is-playground) .main .responsive-family-reference .css-reference-code .panel-tabs{flex-wrap:wrap;justify-content:flex-start;gap:0 4px;padding:0 6px}.app:not(.is-playground) .main .responsive-family-reference .css-reference-code .panel-tab-spacer{display:none}.app:not(.is-playground) .main :is(.layout-flexbox-reference,.layout-grid-reference) .layout-reference-controls{grid-template-columns:minmax(0,1fr)}.app:not(.is-playground) .main :is(.layout-flexbox-reference,.layout-grid-reference) .layout-reference-controls>.code-section-label{grid-column:auto}.app:not(.is-playground) .main .motion-reference-family .motion-scene{min-height:240px}}html[data-theme=dark] .app:not(.is-playground):has(.html-reference-workspace){background:var(--cvg-ds-canvas)}html[data-theme=dark] .app:not(.is-playground):has(.html-reference-workspace) .main{background:var(--cvg-ds-canvas)}.app:not(.is-playground) .main .html-reference-workspace{box-sizing:border-box;grid-template-columns:minmax(0,1.55fr) minmax(320px,.9fr);align-items:start;gap:14px;min-width:0;padding:0 24px 18px;display:grid}.app:not(.is-playground) .main .html-reference-primary,.app:not(.is-playground) .main .html-reference-support,.app:not(.is-playground) .main .html-reference-slot{min-width:0}.app:not(.is-playground) .main .html-reference-workspace.native-reference .native-result-panel,.app:not(.is-playground) .main .html-reference-workspace.data-reference .data-result-panel,.app:not(.is-playground) .main .html-reference-workspace.final-reference .final-result-panel{min-height:0}.app:not(.is-playground) .main .html-reference-primary{grid-template-rows:max-content max-content;align-content:start;gap:14px;display:grid}.app:not(.is-playground) .main .html-reference-support{grid-template-columns:minmax(0,1fr);align-content:start;gap:12px;display:grid}.app:not(.is-playground) .main .html-reference-no-support{grid-template-columns:minmax(0,1fr)}.app:not(.is-playground) .main .html-reference-no-support .html-reference-primary{width:100%}.app:not(.is-playground) .main .html-reference-code .code-panel{width:100%;min-width:0;height:min(var(--code-panel-content-height,330px), 400px);min-height:220px;max-height:400px}.app:not(.is-playground) .main .html-reference-code :is(.code-views,.code-editor-block,.code-editor-wrapper,.code-editor-surface){min-height:0}.app:not(.is-playground) .main .html-reference-workspace .reference-resize-handle:after{background:var(--cvg-ds-action)}.app:not(.is-playground) .main .html-reference-workspace .reference-layout-reset{color:var(--cvg-ds-text-secondary);background:var(--cvg-ds-panel);border-color:var(--cvg-ds-border)}.app:not(.is-playground) .main .html-reference-workspace .reference-resize-handle:focus-visible{outline:2px solid var(--cvg-ds-focus);outline-offset:2px}.app:not(.is-playground) .main .html-reference-mobile-action{display:none}.app:not(.is-playground) .main .html-reference-more{min-width:0;padding:0 24px 24px}.app:not(.is-playground) .main .html-reference-more .gallery-card{color:var(--cvg-ds-text-primary);background:var(--cvg-ds-panel);border-color:var(--cvg-ds-border)}.app:not(.is-playground) .main .html-reference-more .gallery-card:hover,.app:not(.is-playground) .main .html-reference-more .gallery-card:focus-visible,.app:not(.is-playground) .main .html-reference-more .gallery-card.active{color:var(--cvg-ds-text-primary);background:var(--cvg-ds-action-selected);border-color:var(--cvg-ds-action)}.app:not(.is-playground) .main .html-reference-more :is(.gallery-code,.gallery-caption){color:var(--cvg-ds-text-secondary)}.app:not(.is-playground) .main .html-reference-support .phase2-controls,.app:not(.is-playground) .main .html-reference-support .phase2-control-panel{min-width:0}.app:not(.is-playground) .main .html-reference-controls :is(.phase2-controls,.attribute-anatomy,.html-tree){color:var(--cvg-ds-text-primary);font-family:var(--font-ui)}.app:not(.is-playground) .main .html-reference-controls :is(input:not([type=checkbox]),select,textarea){min-width:0;color:var(--cvg-ds-text-primary);background:var(--cvg-ds-inset);border-color:var(--cvg-ds-border-strong);font:13px/1.4 var(--font-ui)}.app:not(.is-playground) .main .html-reference-controls :is(button,.phase2-example){color:var(--cvg-ds-text-secondary);background:var(--cvg-ds-panel);border-color:var(--cvg-ds-border-strong);font-family:var(--font-ui)}.app:not(.is-playground) .main .html-reference-controls :is(button:hover,button:focus-visible,button.selected,button.active,button[aria-pressed=true],.phase2-example:hover,.phase2-example.active){color:var(--cvg-ds-text-primary);background:var(--cvg-ds-action-selected);border-color:var(--cvg-ds-action)}.app:not(.is-playground) .main .html-reference-controls button:focus-visible,.app:not(.is-playground) .main .html-reference-quick button:focus-visible{outline:2px solid var(--cvg-ds-focus);outline-offset:2px}.app:not(.is-playground) .main .html-reference-quick :is(.html-example-strip,.document-example-strip){grid-template-columns:repeat(auto-fit,minmax(min(100%,92px),1fr))}.app:not(.is-playground) .main .html-reference-quick :is(.html-example-strip,.document-example-strip) :is(.example-value,.example-caption){overflow-wrap:normal;word-break:normal}.app:not(.is-playground) .main .html-reference-quick .phase2-example{color:var(--cvg-ds-text-secondary);background:var(--cvg-ds-panel);border-color:var(--cvg-ds-border)}.app:not(.is-playground) .main .html-reference-quick .phase2-example.active,.app:not(.is-playground) .main .html-reference-quick .phase2-example:hover{color:var(--cvg-ds-text-primary);background:var(--cvg-ds-action-selected);border-color:var(--cvg-ds-action)}.app:not(.is-playground) .main .html-reference-quick :is(strong,.phase2-example strong){color:var(--cvg-ds-text-primary)}.app:not(.is-playground) .main .html-reference-quick :is(small,.phase2-example small,.phase2-control-label){color:var(--cvg-ds-text-secondary)}.app:not(.is-playground) .main .html-reference-docs a{color:var(--cvg-ds-action)}.app:not(.is-playground) .main .html-reference-docs .document-tree button{color:var(--cvg-ds-text-secondary);background:var(--cvg-ds-panel);border-color:var(--cvg-ds-border)}.app:not(.is-playground) .main .html-reference-docs .document-tree button:hover,.app:not(.is-playground) .main .html-reference-docs .document-tree button:focus-visible,.app:not(.is-playground) .main .html-reference-docs .document-tree button.selected{color:var(--cvg-ds-text-primary);background:var(--cvg-ds-action-selected);border-color:var(--cvg-ds-action)}.app:not(.is-playground) .main :is(.phase3-reference,.phase4-reference) :is(.html-reference-result,.html-reference-controls,.html-reference-docs)>.panel{color:var(--cvg-ds-text-primary);background:var(--cvg-ds-panel);border-color:var(--cvg-ds-border)}.app:not(.is-playground) .main :is(.phase3-reference,.phase4-reference) :is(.html-reference-controls,.html-reference-docs) :is(h2,h3,.docs-title,.subsection-title,.phase3-control-heading,.phase4-control-heading){color:var(--cvg-ds-text-primary)}.app:not(.is-playground) .main :is(.phase3-reference,.phase4-reference) :is(.html-reference-controls,.html-reference-docs) :is(p,label,small,dt,dd,.phase3-muted,.phase3-field,.phase4-field){color:var(--cvg-ds-text-secondary)}.app:not(.is-playground) .main :is(.phase3-reference,.phase4-reference) .html-reference-controls :is(input:not([type=checkbox]):not([type=range]),select,textarea){color:var(--cvg-ds-text-primary);background:var(--cvg-ds-inset);border-color:var(--cvg-ds-border-strong);accent-color:var(--cvg-ds-action)}.app:not(.is-playground) .main :is(.phase3-reference,.phase4-reference) .html-reference-controls input[type=checkbox],.app:not(.is-playground) .main :is(.phase3-reference,.phase4-reference) .html-reference-controls input[type=range]{accent-color:var(--cvg-ds-action)}.app:not(.is-playground) .main :is(.phase3-reference,.phase4-reference) .html-reference-controls :is(button,.phase4-field-chip){color:var(--cvg-ds-text-secondary);background:var(--cvg-ds-panel);border-color:var(--cvg-ds-border-strong)}.app:not(.is-playground) .main :is(.phase3-reference,.phase4-reference) .html-reference-controls :is(button:hover,button:focus-visible,button.active,button[aria-pressed=true],.phase4-field-chip){color:var(--cvg-ds-text-primary);background:var(--cvg-ds-action-selected);border-color:var(--cvg-ds-action)}.app:not(.is-playground) .main :is(.phase3-reference,.phase4-reference) .html-reference-controls button:focus-visible{outline:2px solid var(--cvg-ds-focus);outline-offset:2px}.app:not(.is-playground) .main :is(.phase3-reference,.phase4-reference) .html-reference-controls a,.app:not(.is-playground) .main :is(.phase3-reference,.phase4-reference) .html-reference-docs a{color:var(--cvg-ds-action)}.app:not(.is-playground) .main .html-reference-quick .phase3-example-grid,.app:not(.is-playground) .main .html-reference-quick .phase4-example-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,118px),1fr))}.app:not(.is-playground) .main .html-reference-quick :is(.phase3-example-card,.phase4-example-card){min-width:0;color:var(--cvg-ds-text-secondary);background:var(--cvg-ds-panel);border-color:var(--cvg-ds-border)}.app:not(.is-playground) .main .html-reference-quick :is(.phase3-example-card,.phase4-example-card) :is(strong,small){color:inherit;text-overflow:clip;white-space:normal;overflow-wrap:normal;word-break:normal;overflow:visible}.app:not(.is-playground) .main .html-reference-quick :is(.phase3-example-card:hover,.phase3-example-card:focus-visible,.phase3-example-card.active,.phase4-example-card:hover,.phase4-example-card:focus-visible,.phase4-example-card.active){color:var(--cvg-ds-text-primary);background:var(--cvg-ds-action-selected);border-color:var(--cvg-ds-action);box-shadow:inset 0 0 0 1px var(--cvg-ds-action-selected)}.app:not(.is-playground) .main .html-reference-quick :is(.phase3-example-card,.phase4-example-card):focus-visible{outline:2px solid var(--cvg-ds-focus);outline-offset:2px}.app:not(.is-playground) .main .html-reference-quick :is(.phase3-example-card,.phase4-example-card) small{color:var(--cvg-ds-text-muted)}.app:not(.is-playground) .main .html-reference-quick .phase3-example-card.active small,.app:not(.is-playground) .main .html-reference-quick .phase4-example-card.active small{color:var(--cvg-ds-text-secondary)}.app:not(.is-playground) .main .html-reference-more :is(.phase3-examples,.phase4-examples){color:var(--cvg-ds-text-primary);background:var(--cvg-ds-panel);border-color:var(--cvg-ds-border)}.app:not(.is-playground) .main .html-reference-more :is(.phase3-example-card,.phase4-example-card){color:var(--cvg-ds-text-secondary);background:var(--cvg-ds-inset);border-color:var(--cvg-ds-border)}.app:not(.is-playground) .main .html-reference-more :is(.phase3-example-card:hover,.phase3-example-card:focus-visible,.phase3-example-card.active,.phase4-example-card:hover,.phase4-example-card:focus-visible,.phase4-example-card.active){color:var(--cvg-ds-text-primary);background:var(--cvg-ds-action-selected);border-color:var(--cvg-ds-action)}.app:not(.is-playground) .main .html-reference-more :is(.phase3-example-card,.phase4-example-card):focus-visible{outline:2px solid var(--cvg-ds-focus);outline-offset:2px}.app:not(.is-playground) .main .html-reference-more :is(.phase3-example-card,.phase4-example-card) small{color:var(--cvg-ds-text-muted)}.app:not(.is-playground) .main .html-reference-more :is(.phase3-example-card,.phase4-example-card) strong{white-space:normal;overflow-wrap:normal;word-break:normal}@media (width<=1200px){.app:not(.is-playground) .main .html-reference-workspace{grid-template-columns:minmax(0,1fr);gap:12px;padding:0 16px 18px;display:grid}.app:not(.is-playground) .main .html-reference-primary,.app:not(.is-playground) .main .html-reference-support{display:contents}.app:not(.is-playground) .main .html-reference-result{grid-row:1}.app:not(.is-playground) .main .html-reference-controls{grid-row:2}.app:not(.is-playground) .main .html-reference-code{grid-row:3}.app:not(.is-playground) .main .html-reference-mobile-action{grid-row:4;display:block}.app:not(.is-playground) .main .html-reference-quick{grid-row:5}.app:not(.is-playground) .main .html-reference-docs{grid-row:6}.app:not(.is-playground) .main .html-reference-no-controls .html-reference-code{grid-row:2}.app:not(.is-playground) .main .html-reference-no-controls .html-reference-mobile-action{grid-row:3}.app:not(.is-playground) .main .html-reference-no-controls .html-reference-quick{grid-row:4}.app:not(.is-playground) .main .html-reference-no-controls .html-reference-docs{grid-row:5}.app:not(.is-playground) .main .html-reference-no-controls.html-reference-no-mobile-action .html-reference-quick{grid-row:3}.app:not(.is-playground) .main .html-reference-no-controls.html-reference-no-mobile-action .html-reference-docs{grid-row:4}.app:not(.is-playground) .main .html-reference-no-controls.html-reference-no-mobile-action.html-reference-no-quick .html-reference-docs{grid-row:3}.app:not(.is-playground) .main .html-reference-no-controls.html-reference-no-quick .html-reference-docs{grid-row:4}.app:not(.is-playground) .main .html-reference-workspace.html-reference-no-quick:not(.html-reference-no-controls):not(.html-reference-no-mobile-action) .html-reference-docs{grid-row:5}.app:not(.is-playground) .main .html-reference-workspace.html-reference-no-quick:not(.html-reference-no-controls).html-reference-no-mobile-action .html-reference-docs,.app:not(.is-playground) .main .html-reference-workspace:not(.html-reference-no-controls).html-reference-no-mobile-action .html-reference-quick{grid-row:4}.app:not(.is-playground) .main .html-reference-workspace:not(.html-reference-no-controls).html-reference-no-mobile-action .html-reference-docs{grid-row:5}.app:not(.is-playground) .main .html-reference-workspace:not(.html-reference-no-controls).html-reference-no-mobile-action.html-reference-no-quick .html-reference-docs{grid-row:4}.app:not(.is-playground) .main .html-reference-workspace :is(.html-reference-slot,.reference-layout-reset){grid-column:1}.app:not(.is-playground) .main .html-reference-workspace .reference-layout-reset{justify-self:end}.app:not(.is-playground) .main .html-reference-code .code-panel{height:min(var(--code-panel-content-height,360px), 400px);min-height:280px;max-height:400px}.app:not(.is-playground) .main .html-reference-more{padding:0 16px 20px}.app:not(.is-playground) .main .html-reference-workspace .reference-resize-handle{display:none}.app:not(.is-playground):has(.html-reference-workspace) .topic-header .topic-actions .btn-primary{display:none}}@media (width<=640px){.app:not(.is-playground) .main .html-reference-workspace,.app:not(.is-playground) .main .html-reference-more{padding-left:12px;padding-right:12px}.app:not(.is-playground) .main .html-reference-quick .phase2-example-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}.app:not(.is-playground) .main .learn-experience{--learn-line:var(--cvg-ds-border);width:min(100%,1120px);min-width:0;color:var(--cvg-ds-text-primary);font-family:var(--font-ui);gap:14px;margin:0 auto;display:grid}.learn-experience-concept,.learn-experience-stage,.learn-experience-guidance,.learn-experience-code,.learn-experience-takeaway{border:1px solid var(--learn-line);border-radius:var(--radius-md);background:var(--cvg-ds-panel);min-width:0}.learn-experience-concept{border-left:3px solid var(--cvg-ds-action);padding:15px 18px 15px 20px;position:relative}.learn-experience-concept>span,.learn-experience-label{color:var(--cvg-ds-text-muted);font:600 11px/1.3 var(--font-ui);letter-spacing:.07em;text-transform:uppercase}.learn-experience-concept h2{color:var(--cvg-ds-text-primary);font:650 18px/1.35 var(--font-ui);margin:5px 0 0}.learn-experience-concept small{color:var(--cvg-ds-text-muted);font:12px/1.3 var(--font-ui);position:absolute;top:16px;right:18px}.learn-experience-main{grid-template-columns:minmax(0,1.45fr) minmax(250px,.8fr);align-items:stretch;gap:12px;display:grid}.learn-experience-stage,.learn-experience-guidance{padding:14px}.learn-experience-stage-content{border:1px solid var(--learn-line);border-radius:var(--radius-sm);background:var(--cvg-ds-inset);place-items:center;min-height:260px;margin-top:10px;padding:16px;display:grid;overflow:hidden}.learn-experience-guidance{flex-direction:column;gap:10px;display:flex}.learn-experience-guidance>:not(.learn-experience-label){min-width:0}.learn-experience-guidance button{border:1px solid var(--learn-line);border-radius:var(--radius-sm);background:var(--cvg-ds-panel);min-height:38px;color:var(--cvg-ds-text-primary);font:500 13px/1.3 var(--font-ui);text-align:left;cursor:pointer;padding:8px 10px}.learn-experience-guidance button:hover{border-color:var(--cvg-ds-action)}.learn-experience-guidance button:focus-visible,.learn-experience-takeaway button:focus-visible{outline:3px solid var(--cvg-ds-focus);outline-offset:2px}.learn-experience-guidance button[aria-pressed=true],.learn-experience-guidance button.active{border-color:var(--cvg-ds-action);background:var(--cvg-ds-action-selected)}.learn-experience-code pre{border:1px solid var(--learn-line);border-radius:var(--radius-sm);background:var(--cvg-ds-inset);max-width:100%;color:var(--cvg-ds-text-primary);font:13px/1.6 var(--font-mono);white-space:pre-wrap;overflow-wrap:anywhere;margin:10px 0 0;padding:12px;overflow-x:auto}.learn-experience-bottom{grid-template-columns:minmax(0,1.2fr) minmax(240px,.8fr);gap:12px;display:grid}.learn-experience-code,.learn-experience-takeaway{padding:14px}.learn-experience-takeaway p{color:var(--cvg-ds-text-secondary);font:400 14px/1.55 var(--font-ui);margin:9px 0 14px}.learn-experience-takeaway .btn{min-height:40px}.learn-experience .learn-experience-stage-content :is(.html-learn-stepper,.data-step-buttons,.final-learn-steps,.native-step-buttons,.foundation-learn-steps){font-family:var(--font-ui)}.learn-experience-stage-content>.layout-scene{width:100%;min-width:0}.learn-experience-stage-content>.grid-scene{min-height:230px}.radius-learn-demo{grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;gap:24px;width:min(100%,520px);display:grid}.radius-learn-sample{color:var(--cvg-ds-text-secondary);font:13px/1.35 var(--font-ui);text-align:center;justify-items:center;gap:10px;display:grid}.radius-learn-box{aspect-ratio:1.35;border:2px solid var(--cvg-ds-action);background:var(--cvg-ds-panel);width:min(100%,180px);color:var(--cvg-ds-text-primary);font:600 13px/1.3 var(--font-mono);place-items:center;transition:border-radius .16s;display:grid}.radius-learn-box i{display:none}.radius-learn-order{color:var(--cvg-ds-text-secondary);align-items:center;gap:10px;margin-top:auto;font-size:12px;display:flex}.radius-learn-order figure{flex:none}.elements-learn-stage{width:min(100%,620px);padding:12px}.elements-learn-stage article{border:2px solid var(--cvg-ds-action);border-radius:var(--radius-sm);background:var(--cvg-ds-panel);gap:12px;min-height:180px;padding:20px;display:grid}.elements-learn-tag{color:var(--cvg-ds-action);font:600 13px/1.4 var(--font-mono)}.elements-learn-child{border-left:3px solid var(--cvg-ds-action);background:var(--cvg-ds-inset);gap:4px;padding:12px;display:grid}.elements-learn-child h3,.elements-learn-child p{color:var(--cvg-ds-text-primary);font:600 15px/1.4 var(--font-ui);margin:0}.elements-learn-child small{color:var(--cvg-ds-text-muted);font:12px/1.4 var(--font-mono)}.app:not(.is-playground) .main .learn-experience-stage-content :is(.html-learn-document-demo,.html-learn-attribute-demo,.html-learn-text-demo,.html-learn-list-demo,.html-learn-link-demo){background:0 0;border:0;border-radius:0;width:100%;min-width:0;max-width:720px;margin-inline:auto;padding:0}.app:not(.is-playground) .main .learn-experience-stage-content .learn-document-diagram{width:100%}.app:not(.is-playground) .main .learn-experience-stage-content .learn-doc-doctype{background:var(--cvg-ds-action-selected);border-color:var(--cvg-ds-action)}.app:not(.is-playground) .main .learn-experience-stage-content .learn-doc-doctype code,.app:not(.is-playground) .main .learn-experience-stage-content .learn-doc-title code{color:var(--cvg-ds-action)}.app:not(.is-playground) .main .learn-experience-stage-content .learn-doc-html{background:var(--cvg-ds-panel);border-color:var(--cvg-ds-border)}.app:not(.is-playground) .main .learn-experience-stage-content .learn-doc-head{background:var(--cvg-ds-action-selected);border-color:var(--cvg-ds-action)}.app:not(.is-playground) .main .learn-experience-stage-content .learn-doc-body{background:var(--cvg-ds-inset);border-color:var(--cvg-ds-border-strong)}.app:not(.is-playground) .main .learn-experience-stage-content .html-learn-relationship{background:0 0;border:0;border-radius:0;width:100%;padding:0}.app:not(.is-playground) .main .learn-experience-stage-content .learn-attribute-result{color:var(--cvg-ds-text-primary);background:var(--cvg-ds-inset);border:1px solid var(--cvg-ds-border)}.app:not(.is-playground) .main .learn-experience-stage-content .learn-attribute-result button{color:buttontext;background:buttonface;border:2px outset buttonborder;border-radius:2px;padding:2px 6px;font:400 13.3333px Arial,sans-serif}.app:not(.is-playground) .main .learn-experience-stage-content .learn-attribute-result.is-hidden{background:var(--cvg-ds-inset)}.app:not(.is-playground) .main .learn-experience-stage-content .learn-attribute-result span{color:var(--cvg-ds-text-secondary);font:12px/1.4 var(--font-ui)}.app:not(.is-playground) .main .learn-experience-stage-content .html-learn-text-demo{display:block}.app:not(.is-playground) .main .learn-experience-stage-content .learn-text-result{width:100%}.app:not(.is-playground) .main .learn-experience-stage-content .learn-heading-outline{background:var(--cvg-ds-inset)}.app:not(.is-playground) .main .learn-experience-stage-content .learn-rendered-text :is(h1,h2,h3,h4,h5,h6){color:#142238;margin:8px 0 5px}.app:not(.is-playground) .main .learn-experience-stage-content .learn-list-stage{grid-template-columns:minmax(0,1fr) minmax(0,.8fr);width:100%}.app:not(.is-playground) .main .learn-experience-stage-content .learn-list-rendered{min-width:0}.app:not(.is-playground) .main .learn-experience-stage-content .learn-link-map{width:100%;max-width:680px;margin-inline:auto}.app:not(.is-playground) .main .learn-experience-stage-content .learn-link-destination{color:var(--cvg-ds-text-primary);background:var(--cvg-ds-action-selected);border-color:var(--cvg-ds-action)}.app:not(.is-playground) .main .learn-experience-stage-content .learn-link-destination span{color:var(--cvg-ds-text-secondary)}.app:not(.is-playground) .main .learn-experience-stage-content .learn-link-arrow{color:var(--cvg-ds-text-muted)}.learn-experience-guidance .html-attributes-guidance-controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;display:grid}.learn-experience-guidance .html-lists-guidance-controls,.learn-experience-guidance .html-links-guidance-controls{flex-wrap:wrap;gap:8px;display:flex}.learn-experience-guidance .html-lists-guidance-controls button,.learn-experience-guidance .html-links-guidance-controls button{flex:90px}.app:not(.is-playground) .main .learn-experience-stage-content .phase4-native-preview{width:min(100%,340px);color:var(--cvg-ds-text-secondary);font:500 14px/1.4 var(--font-ui);justify-items:start;gap:12px;display:grid}.app:not(.is-playground) .main .learn-experience-stage-content .phase4-native-preview input{max-width:100%}.app:not(.is-playground) .main .learn-experience-stage-content>details{width:min(100%,620px);color:var(--cvg-ds-text-primary);border:1px solid var(--learn-line);border-radius:var(--radius-md);background:var(--cvg-ds-panel);font:15px/1.55 var(--font-ui);padding:16px}.app:not(.is-playground) .main .learn-experience-stage-content>details summary{color:var(--cvg-ds-text-primary);cursor:pointer;font-weight:650}.app:not(.is-playground) .main .learn-experience-stage-content>details p{color:var(--cvg-ds-text-secondary);margin:14px 0 0}.learn-experience-guidance .learn-graphics-model{display:none}@media (width<=760px){.app:not(.is-playground) .main .learn-experience{gap:10px}.learn-experience-concept{padding:13px 14px}.learn-experience-concept small{margin-top:5px;display:block;position:static}.learn-experience-main,.learn-experience-bottom{grid-template-columns:minmax(0,1fr)}.learn-experience-stage-content{min-height:220px;padding:10px}.app:not(.is-playground) .main .learn-experience-stage-content .learn-list-stage,.app:not(.is-playground) .main .learn-experience-stage-content .learn-link-map{grid-template-columns:minmax(0,1fr)}.app:not(.is-playground) .main .learn-experience-stage-content .learn-link-arrow{font-size:0;transform:none}.app:not(.is-playground) .main .learn-experience-stage-content .learn-link-arrow:after{content:"↓";font:20px/1 var(--font-mono)}.radius-learn-demo{gap:10px}.radius-learn-box{width:min(100%,140px)}.radius-learn-order{flex-direction:column;align-items:flex-start}.learn-experience-guidance{gap:8px}.learn-experience-guidance button{min-height:42px}.learn-experience-code pre{font-size:12px}}.phase3-learn-image,.phase3-learn-responsive,.phase3-learn-media{width:100%;min-width:0;color:var(--cvg-ds-text-primary);font-family:var(--font-ui);gap:12px;display:grid}.phase3-learn-image-choices,.phase3-learn-media-modes{flex-wrap:wrap;gap:7px;display:flex}.phase3-learn-image-choices button,.phase3-learn-media-modes button,.phase3-learn-responsive-controls button{min-height:38px;color:var(--cvg-ds-text-primary);background:var(--cvg-ds-panel);border:1px solid var(--cvg-ds-border);border-radius:var(--radius-sm);font:500 13px/1.3 var(--font-ui);cursor:pointer;padding:8px 11px}.phase3-learn-image-choices button[aria-pressed=true],.phase3-learn-media-modes button[aria-pressed=true],.phase3-learn-responsive-controls button[aria-pressed=true]{border-color:var(--cvg-ds-action);background:var(--cvg-ds-action-selected)}.phase3-learn-image-choices button:focus-visible,.phase3-learn-media-modes button:focus-visible,.phase3-learn-responsive-controls button:focus-visible{outline:3px solid var(--cvg-ds-focus);outline-offset:2px}.phase3-learn-image-result{gap:9px;min-width:0;display:grid}.phase3-learn-image-frame{border:1px solid var(--cvg-ds-border);border-radius:var(--radius-sm);background:var(--cvg-ds-inset);place-items:center;min-height:170px;max-height:260px;display:grid;overflow:hidden}.phase3-learn-image-frame img{object-fit:contain;width:auto;max-width:100%;max-height:240px;display:block}.phase3-learn-status,.phase3-learn-note{color:var(--cvg-ds-text-secondary);font:13px/1.5 var(--font-ui);margin:0}.phase3-learn-markup-label{color:var(--cvg-ds-text-muted);font:600 11px/1.3 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;margin:2px 0 -6px}.phase3-learn-markup{border:1px solid var(--cvg-ds-border);border-radius:var(--radius-sm);background:var(--cvg-ds-inset);max-width:100%;color:var(--cvg-ds-text-primary);font:12px/1.55 var(--font-mono);white-space:pre-wrap;overflow-wrap:anywhere;margin:0;padding:11px;overflow:auto}.phase3-learn-responsive-controls{gap:12px;display:grid}.phase3-learn-responsive-controls>div{flex-wrap:wrap;align-items:center;gap:7px;display:flex}.phase3-learn-responsive-controls>div>span{color:var(--cvg-ds-text-secondary);font:600 12px/1.4 var(--font-ui);flex-basis:100%}.phase3-learn-simulation-label{color:var(--cvg-ds-text-secondary);background:var(--cvg-ds-action-selected);border-left:3px solid var(--cvg-ds-action);font:12px/1.45 var(--font-ui);margin:0;padding:8px 10px}.phase3-learn-responsive-stage{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center;gap:16px;min-width:0;display:grid}.phase3-learn-viewport{width:var(--phase3-simulated-width);border:2px solid var(--cvg-ds-action);border-radius:var(--radius-sm);background:var(--cvg-ds-panel);align-content:end;justify-self:center;min-width:110px;min-height:128px;padding:8px;transition:width .16s;display:grid}.phase3-learn-viewport>span{color:var(--cvg-ds-text-secondary);font:11px/1.4 var(--font-mono);text-align:center}.phase3-learn-viewport>div{background:linear-gradient(160deg,#8dcbe5 0 42%,#52708f 42% 59%,#1e5269 59%);border-radius:3px;height:70px;margin-top:6px}.phase3-learn-candidates{gap:9px;min-width:0;display:grid}.phase3-learn-candidate{min-width:0;color:var(--cvg-ds-text-secondary);font:11px/1.4 var(--font-mono);grid-template-columns:minmax(65px,auto) minmax(20px,1fr) minmax(90px,auto);align-items:center;gap:8px;display:grid}.phase3-learn-candidate>span{overflow-wrap:anywhere}.phase3-learn-candidate i{background:var(--cvg-ds-border-strong);border-radius:5px;max-width:100%;height:9px;display:block}.phase3-learn-candidate small{text-align:right}.phase3-learn-candidate.selected{color:var(--cvg-ds-action)}.phase3-learn-candidate.selected i{background:var(--cvg-ds-action)}.phase3-learn-evaluation,.phase3-learn-media-observation{gap:8px;min-width:0;margin:0;display:grid}.phase3-learn-evaluation>div,.phase3-learn-media-observation>div{border-top:1px solid var(--cvg-ds-border);grid-template-columns:minmax(125px,.7fr) minmax(0,1.3fr);gap:10px;padding:8px 0;display:grid}.phase3-learn-evaluation dt,.phase3-learn-media-observation dt{color:var(--cvg-ds-text-muted);font:600 12px/1.45 var(--font-ui)}.phase3-learn-evaluation dd,.phase3-learn-media-observation dd{min-width:0;color:var(--cvg-ds-text-primary);font:12px/1.5 var(--font-mono);overflow-wrap:anywhere;margin:0}.phase3-learn-native-media{border:1px solid var(--cvg-ds-border);border-radius:var(--radius-sm);background:var(--cvg-ds-inset);place-items:center;min-width:0;min-height:90px;padding:12px;display:grid;overflow:hidden}.phase3-learn-native-media :is(video,audio){width:min(100%,560px);max-height:315px;display:block}.phase3-learn-media-observation [role=status]{font-family:var(--font-ui)}.phase3-learn-media>.phase3-learn-note{padding-top:4px}@media (width<=760px){.phase3-learn-responsive-stage{grid-template-columns:minmax(0,1fr)}.phase3-learn-viewport{justify-self:start}.phase3-learn-candidate{grid-template-columns:minmax(58px,auto) minmax(20px,1fr) minmax(76px,auto);gap:6px;font-size:10px}.phase3-learn-evaluation>div,.phase3-learn-media-observation>div{grid-template-columns:minmax(105px,.65fr) minmax(0,1.35fr);gap:7px}.phase3-learn-image-frame{min-height:145px}.phase3-learn-image-frame img{max-height:210px}.phase3-learn-native-media{min-height:82px;padding:8px}.phase3-learn-native-media video{max-height:220px}}.app:not(.is-playground) .main .e2c-learn-demo{width:min(100%,680px);min-width:0;color:var(--cvg-ds-text-primary);font:14px/1.5 var(--font-ui);gap:14px;display:grid}.e2c-learn-demo form,.e2c-learn-demo label{gap:8px;min-width:0;display:grid}.e2c-learn-demo form{gap:12px}.e2c-learn-demo :is(input,select,textarea){max-width:100%}.e2c-learn-demo textarea{box-sizing:border-box;resize:vertical;width:100%}.e2c-learn-demo output,.e2c-live-source-note,.e2c-submission-observation,.e2c-validity-readout,.e2c-textarea-status{border:1px solid var(--cvg-ds-border);border-radius:var(--radius-sm);background:var(--cvg-ds-inset);min-width:0;color:var(--cvg-ds-text-secondary);overflow-wrap:anywhere;margin:0;padding:10px 12px}.e2c-form-fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.e2c-form-fields label:last-child{grid-column:1/-1}.e2c-forms-demo button,.e2c-textarea-demo button,.e2c-validation-demo button{border:1px solid var(--cvg-ds-border);border-radius:var(--radius-sm);background:var(--cvg-ds-panel);min-height:38px;color:var(--cvg-ds-text-primary);font:600 13px/1.3 var(--font-ui);cursor:pointer;justify-self:start;padding:8px 12px}.e2c-learn-demo :is(button,input,select,textarea):focus-visible{outline:3px solid var(--cvg-ds-focus);outline-offset:2px}.e2c-submission-observation,.e2c-validity-readout,.e2c-textarea-status{gap:7px;display:grid}.e2c-submission-observation code{color:var(--cvg-ds-text-primary);font:12px/1.5 var(--font-mono)}.e2c-live-source-note{font-size:12px}.e2c-select-demo>label{width:min(100%,360px)}.e2c-method-controls,.e2c-mode-controls,.e2c-button-row,.e2c-validation-samples{flex-wrap:wrap;gap:8px;display:flex}.e2c-method-controls button[aria-pressed=true],.e2c-mode-controls button[aria-pressed=true],.e2c-validation-samples button[aria-pressed=true]{border-color:var(--cvg-ds-action);background:var(--cvg-ds-action-selected)}.e2c-textarea-status strong{color:var(--cvg-ds-text-primary)}.e2c-textarea-status span,.e2c-validity-readout span{overflow-wrap:anywhere}@media (width<=760px){.e2c-form-fields{grid-template-columns:minmax(0,1fr)}.e2c-form-fields label:last-child{grid-column:auto}.e2c-learn-demo{gap:10px}.e2c-learn-demo :is(button,input,select,textarea){max-width:100%}}.app:not(.is-playground) .main .e3a-guidance-copy{color:var(--cvg-ds-text-secondary);font:13px/1.55 var(--font-ui);margin:0 0 2px}.app:not(.is-playground) .main .e3a-color-specimen{text-align:center;align-content:center;justify-items:center;gap:12px;width:min(100%,430px);min-height:200px;display:grid;box-shadow:0 12px 28px #1623371a}.e3a-color-specimen>span,.e3a-background-frame>code{font:600 10px/1.4 var(--font-mono);letter-spacing:.09em}.e3a-color-specimen>strong{font:700 clamp(20px, 3vw, 30px)/1.2 var(--font-ui)}.e3a-color-specimen>code{overflow-wrap:anywhere;max-width:100%;font:12px/1.5 var(--font-mono)}.e3a-color-specimen>small{overflow-wrap:anywhere;max-width:100%;font:12px/1.45 var(--font-ui)}.app:not(.is-playground) .main .e3a-color-specimen-color{color:#517df6;border-color:#517df6}.app:not(.is-playground) .main .e3a-color-specimen-background-color{color:#26364f}.app:not(.is-playground) .main .e3a-color-specimen-border-color{color:#517df6;border-color:currentColor}.e3a-range{color:var(--cvg-ds-text-primary);font:600 13px/1.4 var(--font-ui);grid-template-columns:1fr auto;align-items:center;gap:4px 12px;display:grid}.e3a-range output{color:var(--cvg-ds-action);font:600 12px/1.4 var(--font-mono)}.e3a-range input{width:100%;accent-color:var(--cvg-ds-action);grid-column:1/-1}.e3a-choice-row{flex-wrap:wrap;gap:7px;display:flex}.app:not(.is-playground) .main .e3a-choice-row button{text-align:center;flex:74px}.e3a-observation{border-left:3px solid var(--cvg-ds-action);background:var(--cvg-ds-action-selected);gap:5px;padding:10px 11px;display:grid}.e3a-observation>span{color:var(--cvg-ds-text-muted);font:650 10px/1.3 var(--font-ui);letter-spacing:.08em}.e3a-observation>strong{color:var(--cvg-ds-text-primary);font:600 13px/1.4 var(--font-ui)}.e3a-observation>code,.e3a-observation>small{color:var(--cvg-ds-text-secondary);font:11px/1.5 var(--font-mono);overflow-wrap:anywhere}.app:not(.is-playground) .main .e3a-background-frame{border:1px solid var(--cvg-ds-border-strong);border-radius:var(--radius-md);flex-direction:column;justify-content:space-between;align-items:flex-start;width:min(100%,560px);min-height:280px;padding:18px;display:flex;position:relative;overflow:hidden;box-shadow:0 14px 34px #1623371f}.e3a-background-frame>strong,.e3a-background-frame>code{z-index:1;color:var(--cvg-ds-text-primary);background:var(--cvg-ds-panel);border-radius:4px;padding:6px 8px;position:relative}.e3a-background-frame>strong{font:650 13px/1.4 var(--font-ui)}.e3a-background-frame>code{letter-spacing:.02em;font-size:10px}.e3a-layer-labels{z-index:1;gap:7px;display:grid;position:absolute;inset:50% auto auto 12px;transform:translateY(-50%)}.e3a-layer-labels span{border:1px solid var(--cvg-ds-border-strong);color:var(--cvg-ds-text-primary);background:var(--cvg-ds-panel);font:600 10px/1.4 var(--font-mono);border-radius:4px;padding:6px 8px}.app:not(.is-playground) .main .learn-experience-guidance .e3a-choice-row button:focus-visible,.app:not(.is-playground) .main .learn-experience-guidance>button:focus-visible{outline:3px solid var(--cvg-ds-focus);outline-offset:2px}@media (width<=760px){.app:not(.is-playground) .main .e3a-color-specimen{min-height:180px;padding:18px 12px}.app:not(.is-playground) .main .e3a-background-frame{min-height:220px;padding:12px}.e3a-layer-labels{inset-inline-start:7px}.e3a-layer-labels span{padding:5px;font-size:9px}}.app.is-playground .playground-page{--surface-canvas:var(--cvg-ds-canvas);--surface-panel:var(--cvg-ds-shell);--surface-raised:var(--cvg-ds-panel);--surface-hover:var(--cvg-ds-inset-strong);--surface-active:var(--cvg-ds-action-selected);--text-primary:var(--cvg-ds-text-primary);--text-secondary:var(--cvg-ds-text-secondary);--text-muted:var(--cvg-ds-text-muted);--text-on-accent:var(--cvg-ds-action-on);--border-subtle:var(--cvg-ds-border);--border-default:var(--cvg-ds-border-strong);--border-strong:var(--cvg-ds-border-strong);--accent:var(--cvg-ds-action);--accent-hover:var(--cvg-ds-action-hover);--accent-subtle-bg:var(--cvg-ds-action-selected);--focus-ring:var(--cvg-ds-focus);--status-info:var(--cvg-ds-info);--status-error:var(--cvg-ds-error);--code-surface:var(--cvg-ds-code);--code-gutter:var(--cvg-ds-code-gutter);color:var(--cvg-ds-text-primary)}.app.is-playground .playground-main{background:var(--cvg-ds-canvas)}.app.is-playground .playground-page,.app.is-playground .playground-page *{box-sizing:border-box}.app.is-playground .playground-toolbar{gap:12px;padding-block:8px}.app.is-playground .playground-heading{gap:8px}.app.is-playground .playground-heading h1{letter-spacing:-.02em;font-size:21px;font-weight:650}.app.is-playground .playground-heading p{margin-top:4px;font-size:12px}.app.is-playground .playground-project-state{min-width:0;color:var(--cvg-ds-text-secondary);align-items:center;gap:8px;margin-top:3px;font-size:11px;line-height:1.2;display:flex}.app.is-playground .playground-project-name,.app.is-playground .playground-save-status{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.app.is-playground .playground-project-name{color:var(--cvg-ds-text-primary);font-weight:600}.app.is-playground .playground-save-status.is-failed{color:var(--cvg-ds-danger,#b42318)}.app.is-playground .playground-project-dialog{border:1px solid var(--cvg-ds-border);background:var(--cvg-ds-panel);width:min(420px,100vw - 32px);color:var(--cvg-ds-text-primary);border-radius:14px;padding:20px;box-shadow:0 24px 64px #00000047}.app.is-playground .playground-project-dialog::backdrop{background:#0c12207a}.app.is-playground .playground-project-dialog h2{margin:0 0 16px;font-size:18px}.app.is-playground .playground-project-dialog label{color:var(--cvg-ds-text-secondary);margin-bottom:6px;font-size:13px;display:block}.app.is-playground .playground-project-dialog input{border:1px solid var(--cvg-ds-border);background:var(--cvg-ds-shell);width:100%;min-height:42px;color:var(--cvg-ds-text-primary);font:inherit;border-radius:8px;padding:8px 10px}.app.is-playground .playground-project-dialog input[aria-invalid=true]{border-color:var(--cvg-ds-danger,#b42318)}.app.is-playground .playground-project-dialog-error{color:var(--cvg-ds-danger,#b42318);margin:6px 0 0;font-size:12px}.app.is-playground .playground-project-dialog-actions{justify-content:flex-end;gap:8px;margin-top:18px;display:flex}.app.is-playground .playground-primary-actions{flex:none;align-items:center;gap:8px;display:inline-flex}.app.is-playground .playground-preview-mode{color:var(--cvg-ds-text-secondary);white-space:nowrap;font-size:12px}.app.is-playground .playground-run{border-color:var(--cvg-ds-action);background:var(--cvg-ds-action);color:var(--cvg-ds-action-on);font-weight:650;min-height:36px!important}.app.is-playground .playground-run:hover{border-color:var(--cvg-ds-action-hover);background:var(--cvg-ds-action-hover)}.app.is-playground .playground-mobile-options-toggle{display:none}.app.is-playground .playground-toolbar-controls{gap:8px}.app.is-playground .playground-suggestion-control,.app.is-playground .playground-auto-preview,.app.is-playground .playground-editor-toggles{border-color:var(--cvg-ds-border);background:var(--cvg-ds-shell);min-height:36px}.app.is-playground .playground-editor-toggles input,.app.is-playground .playground-auto-preview input,.app.is-playground .playground-suggestion-control input{accent-color:var(--cvg-ds-action)}.app.is-playground .playground-toolbar .btn,.app.is-playground .playground-preview-actions .btn{border-color:var(--cvg-ds-border);background:var(--cvg-ds-shell);min-height:36px;color:var(--cvg-ds-text-primary)}.app.is-playground .playground-toolbar .btn:hover,.app.is-playground .playground-preview-actions .btn:hover{border-color:var(--cvg-ds-border-strong);background:var(--cvg-ds-panel)}.app.is-playground .playground-page :is(button,input,select,[role=separator]):focus-visible{outline:2px solid var(--cvg-ds-focus);outline-offset:2px}.app.is-playground .playground-editor,.app.is-playground .playground-preview-panel,.app.is-playground .playground-console-panel{border-color:var(--cvg-ds-border);background:var(--cvg-ds-shell);box-shadow:none;border-radius:8px}.app.is-playground .playground-editor:hover,.app.is-playground .playground-preview-panel:hover,.app.is-playground .playground-console-panel:hover{border-color:var(--cvg-ds-border-strong)}.app.is-playground .playground-editor.is-active{border-color:var(--cvg-ds-action);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--cvg-ds-action) 26%, transparent)}.app.is-playground .playground-editor:focus-within{outline:2px solid var(--cvg-ds-focus);outline-offset:2px}.app.is-playground .playground-editor-header,.app.is-playground .playground-region-header{border-color:var(--cvg-ds-border);min-height:38px;color:var(--cvg-ds-text-primary);font-size:13px;font-weight:600}.app.is-playground .playground-editor-footer{border-color:var(--cvg-ds-border)}.app.is-playground .playground-language-dot{background:var(--cvg-ds-action)}.app.is-playground .playground-language-css,.app.is-playground .playground-language-javascript{background:var(--cvg-ds-action-hover)}.app.is-playground .playground-code-surface{background:var(--cvg-ds-code)}.app.is-playground .playground-line-gutter{background:var(--cvg-ds-code-gutter)}.app.is-playground .playground-mobile-tabs{border-color:var(--cvg-ds-border);background:var(--cvg-ds-shell);gap:8px;padding:4px}.app.is-playground .playground-mobile-tabs button{min-height:40px;color:var(--cvg-ds-text-secondary);border-radius:6px}.app.is-playground .playground-mobile-tabs button[aria-selected=true]{background:var(--cvg-ds-action-selected);color:var(--cvg-ds-text-primary);box-shadow:inset 0 -2px 0 var(--cvg-ds-action);font-weight:650}.app.is-playground .playground-mobile-tabs button:hover:not([aria-selected=true]){background:var(--cvg-ds-inset-strong);color:var(--cvg-ds-text-primary)}.app.is-playground .playground-resizer:after{background:var(--cvg-ds-border-strong)}.app.is-playground .playground-resizer:hover:after,.app.is-playground .playground-resizer:focus-visible:after{background:var(--cvg-ds-action)}.app.is-playground .playground-region-header{background:var(--cvg-ds-shell)}.app.is-playground .playground-preview-panel,.app.is-playground .playground-console-panel{background:var(--cvg-ds-panel)}.app.is-playground .playground-console-header [role=tab][aria-selected=true]{color:var(--cvg-ds-action)}@media (width<=1100px){.app.is-playground .playground-toolbar{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"heading primary""options options";align-items:center;gap:8px 12px;display:grid}.app.is-playground .playground-heading{grid-area:heading;min-width:0}.app.is-playground .playground-primary-actions{grid-area:primary}.app.is-playground .playground-mobile-options-toggle{border-color:var(--cvg-ds-border);background:var(--cvg-ds-shell);min-height:40px;color:var(--cvg-ds-text-primary);white-space:nowrap;justify-content:center;align-items:center;padding-inline:12px;display:inline-flex}.app.is-playground .playground-compact-toolbar-controls{display:none!important}.app.is-playground .playground-toolbar-controls{border-top:1px solid var(--cvg-ds-border);grid-area:options;justify-content:flex-start;padding:8px 0 0;display:none}.app.is-playground .playground-page.is-mobile-options-open .playground-toolbar-controls{display:flex!important}}@media (width<=640px){.app.is-playground .playground-toolbar{gap:8px;padding-block:4px}.app.is-playground .playground-toolbar-collapse{display:none}.app.is-playground .playground-heading h1{font-size:20px}.app.is-playground .playground-project-state{max-width:min(48vw,220px);margin-top:2px;font-size:10px}.app.is-playground .playground-heading p{display:none}.app.is-playground .playground-primary-actions{gap:4px}.app.is-playground .playground-preview-mode{font-size:11px}.app.is-playground .playground-toolbar .btn,.app.is-playground .playground-mobile-tabs button,.app.is-playground .playground-preview-actions .btn{min-height:40px}.app.is-playground .playground-preview-actions .btn{min-height:40px!important}.app.is-playground .playground-preview-actions .playground-download{justify-content:center;min-width:44px;min-height:44px!important}.app.is-playground .playground-mobile-tabs button{min-height:44px}.app.is-playground .playground-toolbar-controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding-top:8px;display:none}.app.is-playground .playground-page.is-mobile-options-open .playground-toolbar-controls{display:grid!important}.app.is-playground .playground-suggestion-control,.app.is-playground .playground-editor-toggles{flex-wrap:wrap;grid-column:1/-1;min-width:0}.app.is-playground .playground-editor-toggles{justify-content:space-between;display:flex}.app.is-playground .playground-toolbar-controls>.btn,.app.is-playground .playground-auto-preview{white-space:normal;justify-content:center;min-width:0}.app.is-playground .playground-auto-preview{min-height:40px}.app.is-playground .playground-page.is-mobile-options-open .playground-toolbar-controls{border-top-color:var(--cvg-ds-border)}}@media (width>=641px) and (width<=820px){.app.is-playground .playground-workspace{grid-template-rows:auto auto;align-content:start;height:auto;min-height:0}.app.is-playground .playground-editor-grid{grid-auto-rows:320px;align-content:start;height:auto}}.projects-nav{white-space:nowrap}.projects-nav.active{color:var(--text-primary);border-color:var(--border-default);background:var(--surface-active)}.projects-main{min-width:0;padding:clamp(18px,3vw,38px);overflow:auto}.projects-library{width:min(100%,1120px);color:var(--text-primary);margin-inline:auto}.projects-library-header{border-bottom:1px solid var(--border-subtle);justify-content:space-between;align-items:end;gap:24px;padding:6px 0 24px;display:flex}.projects-library-header h1{letter-spacing:-.035em;margin:0;font-size:clamp(27px,3vw,36px)}.projects-library-header p{color:var(--text-secondary);margin:8px 0 0}.projects-library-header .projects-eyebrow{color:var(--accent);font:10px var(--font-mono);letter-spacing:.12em;margin:0 0 7px}.projects-library-actions{gap:9px;display:flex}.projects-library-toolbar{align-items:center;gap:14px;padding:18px 0;display:flex}.projects-library-toolbar>label:first-child{flex:1;min-width:0}.projects-library-toolbar input,.projects-library-toolbar select{min-height:38px;color:var(--text-primary);background:var(--surface-panel);border:1px solid var(--border-default);border-radius:var(--radius-sm);font:inherit;padding:8px 11px}.projects-library-toolbar input{width:100%}.projects-sort-label{color:var(--text-secondary);font-size:var(--text-sm);white-space:nowrap;align-items:center;gap:8px;display:flex}.projects-count{color:var(--text-muted);font-size:var(--text-sm);white-space:nowrap}.projects-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,245px),1fr));gap:14px;display:grid}.project-card{background:var(--surface-panel);border:1px solid var(--border-subtle);border-radius:var(--radius-md);min-width:0;overflow:hidden}.project-card-open{width:100%;color:var(--text-primary);text-align:left;cursor:pointer;background:0 0;border:0;gap:8px;padding:12px;display:grid}.project-card-open:hover strong{color:var(--accent-hover)}.project-card-open strong{text-overflow:ellipsis;white-space:nowrap;font-size:14px;overflow:hidden}.project-card-open small{color:var(--text-muted)}.project-card.is-current{border-color:color-mix(in srgb, var(--accent) 60%, var(--border-default))}.project-card-open{text-align:left}.project-card-title{align-items:center;gap:8px;min-width:0;display:flex}.project-card-current{color:var(--text-secondary);border:1px solid var(--border-default);letter-spacing:.04em;text-transform:uppercase;border-radius:999px;flex:none;padding:2px 6px;font-size:10px;font-weight:600}.project-card-presence{color:var(--text-muted);font:10px var(--font-mono);flex-wrap:wrap;gap:5px 8px;margin-top:8px;display:flex}.project-card-presence .is-present{color:var(--text-secondary)}.project-card-presence .is-absent{color:var(--text-muted)}.project-card-preview{background:var(--surface-canvas);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);flex-direction:column;justify-content:center;gap:5px;height:118px;padding:18px;display:flex;overflow:hidden}.project-card-preview i{background:var(--border-default);border-radius:5px;width:76%;height:7px;display:block}.project-card-preview i:first-child{background:var(--accent);opacity:.8;width:42%;height:12px}.project-card-preview i:last-child{width:57%}.project-card-actions{gap:3px;padding:0 9px 9px;display:flex}.project-card-actions button{min-width:0;color:var(--text-secondary);border-radius:var(--radius-sm);font:inherit;cursor:pointer;background:0 0;border:1px solid #0000;flex:1;padding:7px 4px;font-size:11px}.project-card-actions button:hover{color:var(--text-primary);background:var(--surface-hover);border-color:var(--border-subtle)}.project-card-actions .project-delete:hover{color:var(--danger,#e27676)}.projects-empty{color:var(--text-secondary);text-align:center;background:var(--surface-panel);border:1px dashed var(--border-default);border-radius:var(--radius-md);justify-items:center;gap:10px;padding:64px 20px;display:grid}.projects-empty strong{color:var(--text-primary);font-size:17px}.projects-empty p{max-width:440px;margin:0 0 8px;line-height:1.55}.projects-library-error{color:var(--text-primary);background:color-mix(in srgb, var(--accent) 14%, var(--surface-panel));border:1px solid var(--accent);border-radius:var(--radius-sm);padding:10px 12px}.projects-library-success,.playground-h4-resolution{color:var(--text-primary);background:var(--surface-panel);border:1px solid var(--border-default);border-radius:var(--radius-sm);padding:9px 12px}.projects-import-input{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.projects-recovery{color:var(--text-primary);background:var(--surface-panel);border:1px solid var(--border-default);border-radius:var(--radius-md);gap:10px;margin:18px 0;padding:16px;display:grid}.projects-recovery h2,.projects-recovery p{margin:0}.projects-recovery p{color:var(--text-secondary)}.projects-recovery>div{flex-wrap:wrap;gap:8px;display:flex}.playground-h4-storage-error,.playground-h4-conflict{color:var(--text-primary);background:var(--surface-panel);border:1px solid var(--border-default);border-radius:var(--radius-md);flex-wrap:wrap;align-items:center;gap:9px 12px;margin:0 0 12px;padding:12px 14px;display:flex}.playground-h4-storage-error{border-color:var(--danger,#e27676)}.playground-h4-storage-error strong{color:var(--danger,#e27676)}.playground-h4-storage-error span{color:var(--text-secondary);flex:240px}.playground-h4-conflict{border-color:var(--accent);align-items:flex-start}.playground-h4-conflict h2{flex-basis:100%;margin:0;font-size:15px}.playground-h4-conflict p{color:var(--text-secondary);flex:260px;margin:0}.playground-h4-conflict>div{flex-wrap:wrap;gap:8px;display:flex}.projects-name-dialog{width:min(440px,100vw - 32px);color:var(--text-primary);background:var(--surface-panel);border:1px solid var(--border-default);border-radius:var(--radius-md);padding:0;box-shadow:0 24px 80px #00000061}.projects-name-dialog::backdrop{background:#040a14ad}.projects-name-dialog form{gap:12px;padding:22px;display:grid}.projects-name-dialog h2{margin:0 0 4px;font-size:19px}.projects-name-dialog label{color:var(--text-secondary);font-size:var(--text-sm)}.projects-name-dialog input{width:100%;min-height:40px;color:var(--text-primary);background:var(--surface-canvas);border:1px solid var(--border-default);border-radius:var(--radius-sm);font:inherit;padding:8px 10px}.projects-name-actions{justify-content:end;gap:8px;margin-top:4px;display:flex}.playground-route-state{max-width:620px;min-height:50vh;color:var(--text-primary);align-content:center;justify-items:start;gap:12px;margin:auto;padding:24px;display:grid}.playground-route-state h1,.playground-route-state p{margin:0}.playground-route-state p{color:var(--text-secondary)}.playground-route-state button+button{margin-left:5px}@media (width<=640px){.projects-main{padding:18px 14px 28px}.projects-library-header{flex-direction:column;align-items:stretch;gap:16px;padding-bottom:18px}.projects-library-actions{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;display:grid}.projects-library-actions .btn{min-width:0;padding-inline:5px;font-size:11px}.projects-library-toolbar{flex-wrap:wrap;align-items:stretch;gap:9px}.projects-library-toolbar>label:first-child{flex-basis:100%}.projects-sort-label{flex:1;justify-content:space-between}.projects-sort-label select{min-width:0;max-width:68%}.projects-count{align-self:center}.projects-grid{grid-template-columns:1fr}.project-card-preview{height:100px}.projects-nav{padding-inline:9px;font-size:12px}.project-card-actions{gap:0;padding-inline:5px}.project-card-actions button{padding-inline:1px;font-size:10px}.playground-h4-storage-error,.playground-h4-conflict{flex-direction:column;align-items:stretch}.playground-h4-storage-error>button,.playground-h4-conflict>div>button{width:100%}}