.article-page .article-figure.ArticleDemo-module__XVjFRW__inlineFigure.ArticleDemo-module__XVjFRW__inlineFigure{inline-size:min(40rem,100vw - 3rem)}.ArticleDemo-module__XVjFRW__frame{--demo-accent:var(--accent);color:var(--foreground);background:var(--surface);box-shadow:inset 0 0 0 1px var(--border-color);border-radius:.75rem;overflow:hidden}.ArticleDemo-module__XVjFRW__caption{color:var(--muted);text-align:center;font-size:.8125rem;line-height:1.5}.ArticleDemo-module__XVjFRW__splitGrid{grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.ArticleDemo-module__XVjFRW__splitCell{min-inline-size:0}.ArticleDemo-module__XVjFRW__lightCell{--demo-accent:color-mix(in srgb,var(--accent)85%,black);color:#201f1c;background:#ebe8e2}.ArticleDemo-module__XVjFRW__preview{justify-content:center;align-items:center;min-block-size:12rem;padding:clamp(1.25rem,4vw,2rem);display:flex}.ArticleDemo-module__XVjFRW__footer{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;padding:.75rem 1.25rem 1.25rem;display:flex}.ArticleDemo-module__XVjFRW__hint,.ArticleDemo-module__XVjFRW__panelLabel{color:var(--text-secondary);font-size:.8125rem;line-height:1.5}.ArticleDemo-module__XVjFRW__panelLabel{text-align:center;padding:0 1rem 1.25rem}.ArticleDemo-module__XVjFRW__lightCell .ArticleDemo-module__XVjFRW__panelLabel{color:#625d56}.ArticleDemo-module__XVjFRW__toggle{background:var(--background);border-radius:.5rem;gap:.125rem;padding:.1875rem;display:inline-flex}.ArticleDemo-module__XVjFRW__toggleButton{min-block-size:2.25rem;color:var(--text-secondary);border-radius:.3125rem;padding-inline:.75rem;font-size:.8125rem;line-height:1.4}.ArticleDemo-module__XVjFRW__toggleButton[aria-pressed=true]{color:var(--foreground);background:var(--surface-raised);box-shadow:inset 0 0 0 1px var(--border-color)}.ArticleDemo-module__XVjFRW__toggleButton:focus-visible,.ArticleDemo-module__XVjFRW__geometryButton:focus-visible{outline:2px solid var(--demo-accent);outline-offset:3px}.ArticleDemo-module__XVjFRW__exampleRow{align-items:center;gap:1rem;display:flex}.ArticleDemo-module__XVjFRW__geometryButton{color:var(--foreground);background:var(--surface-raised);border:0;border-radius:.375rem;padding:.625rem .875rem;font-size:.875rem;line-height:1.4}.ArticleDemo-module__XVjFRW__geometryButton[data-selected=true][data-mode=border],.ArticleDemo-module__XVjFRW__geometryButton[data-mode=border]:focus-visible{border:2px solid var(--demo-accent)}.ArticleDemo-module__XVjFRW__geometryButton[data-selected=true][data-mode=shadow],.ArticleDemo-module__XVjFRW__geometryButton[data-mode=shadow]:focus-visible{box-shadow:0 0 0 2px var(--demo-accent)}.ArticleDemo-module__XVjFRW__neighbour{color:var(--text-secondary);font-size:.875rem}.ArticleDemo-module__XVjFRW__sampleCard{background:var(--surface-raised);border-radius:.5rem;place-items:center;min-block-size:6rem;inline-size:min(100%,15rem);padding:1.5rem;display:grid}.ArticleDemo-module__XVjFRW__sampleTitle{font-size:.875rem;font-weight:500;display:block}.ArticleDemo-module__XVjFRW__layerControls{justify-content:center;gap:1.5rem}.ArticleDemo-module__XVjFRW__checkboxLabel{min-block-size:2.5rem;color:var(--text-secondary);cursor:pointer;align-items:center;gap:.5rem;font-size:.8125rem;display:inline-flex}.ArticleDemo-module__XVjFRW__checkboxLabel input{block-size:1rem;inline-size:1rem;accent-color:var(--foreground)}.ArticleDemo-module__XVjFRW__field{inline-size:100%;max-inline-size:17rem}.ArticleDemo-module__XVjFRW__fieldLabel{color:var(--text-secondary);margin-block-end:.5rem;font-size:.8125rem;line-height:1.4;display:block}.ArticleDemo-module__XVjFRW__input,.ArticleDemo-module__XVjFRW__shiftInput{box-sizing:border-box;inline-size:100%;min-inline-size:0;color:var(--foreground);background:var(--background);border:0;border-radius:.375rem;padding:.6875rem .75rem;font-size:.875rem;display:block}.ArticleDemo-module__XVjFRW__input{box-shadow:inset 0 0 0 1px var(--muted)}.ArticleDemo-module__XVjFRW__input::placeholder,.ArticleDemo-module__XVjFRW__shiftInput::placeholder{color:var(--muted);opacity:1}.ArticleDemo-module__XVjFRW__input:focus{box-shadow:inset 0 0 0 2px var(--demo-accent);outline:none}.ArticleDemo-module__XVjFRW__shiftSlot{inline-size:100%;padding:2px}.ArticleDemo-module__XVjFRW__shiftFrame{box-sizing:content-box;border:1px solid var(--muted);background:var(--background);border-radius:.375rem;inline-size:calc(100% - 4px);display:block}.ArticleDemo-module__XVjFRW__shiftFrame:focus-within{border-color:var(--demo-accent);border-width:2px}.ArticleDemo-module__XVjFRW__shiftInput{outline:none}.ArticleDemo-module__XVjFRW__focusButton{--focus-gap:var(--surface);border:0;border-radius:.375rem;justify-content:center;align-items:center;min-block-size:2.5rem;padding-inline:1rem;font-size:.875rem;font-weight:500;display:inline-flex}.ArticleDemo-module__XVjFRW__focusButton:focus-visible{box-shadow:0 0 0 2px var(--focus-gap),0 0 0 4px var(--demo-accent);outline:2px solid #0000}.ArticleDemo-module__XVjFRW__focusButtonLight{--focus-gap:#ebe8e2;color:var(--foreground);background:var(--surface-raised)}.ArticleDemo-module__XVjFRW__focusButtonDark{color:var(--surface-raised);background:var(--foreground)}@media (hover:hover) and (pointer:fine){.ArticleDemo-module__XVjFRW__geometryButton[data-mode=border]:hover{border:2px solid var(--demo-accent)}.ArticleDemo-module__XVjFRW__geometryButton[data-mode=shadow]:hover{box-shadow:0 0 0 2px var(--demo-accent)}.ArticleDemo-module__XVjFRW__toggleButton:hover:not([aria-pressed=true]){color:var(--foreground);background:var(--bg-hover)}.ArticleDemo-module__XVjFRW__focusButtonLight:hover{background:#2b2925}.ArticleDemo-module__XVjFRW__focusButtonDark:hover{background:#fff}}@media (prefers-reduced-motion:no-preference){.ArticleDemo-module__XVjFRW__toggleButton:active,.ArticleDemo-module__XVjFRW__focusButton:active{transform:scale(.97)}}@media (max-width:34rem){.ArticleDemo-module__XVjFRW__splitGrid{grid-template-columns:minmax(0,1fr)}.ArticleDemo-module__XVjFRW__input,.ArticleDemo-module__XVjFRW__shiftInput{font-size:1rem}}@media (max-width:47.99rem){.article-page .article-figure.ArticleDemo-module__XVjFRW__inlineFigure.ArticleDemo-module__XVjFRW__inlineFigure{inline-size:calc(100vw - 2rem)}}@media (forced-colors:active){.ArticleDemo-module__XVjFRW__focusButton:focus-visible,.ArticleDemo-module__XVjFRW__input:focus,.ArticleDemo-module__XVjFRW__shiftInput:focus{outline-offset:2px;outline:2px solid canvastext}}