@layer design.system,demo.support;@layer design.system{:root{--surface: hsl(240 6% 10%);--surface-neutral: hsl(0 0% 22%);--typography-heading: hsl(0 0% 98%);--typography-body: hsl(240 5% 65%)}[data-theme=light]{--surface: hsl(0 0% 99%);--surface-neutral: hsl(0 0% 90%);--typography-heading: hsl(0 0% 0%);--typography-body: hsl(0 0% 50%)}}@layer demo.support{*:where(:not(html):not(iframe):not(canvas):not(img):not(svg):not(video):not(audio):not(svg *):not(symbol *)){all:unset;display:revert}*,*:before,*:after{box-sizing:border-box}:root{font:1rem/1.5 Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;color-scheme:dark}[data-theme=light]:root{color-scheme:light}@supports not (color-scheme: light){[data-theme=light]:root{background:hsl(0 0% 100%)}}body{max-block-size:100vh;background:transparent;color:var(--typography-heading)}:where(h1,h2,h3,h4,h5,h6){font-variation-settings:"opsz" 32}a{-webkit-text-decoration:underline;text-decoration:underline;cursor:pointer;color:inherit}.twitter{position:fixed;display:inline-flex;bottom:1em;right:1em;padding:.38em;border-radius:.5em;background:var(--surface);border:1px solid var(--surface);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.twitter>svg{fill:none;stroke:var(--typography-body);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.twitter:where(:hover,:focus-visible){background:var(--surface);border-color:var(--surface-neutral)}.sun-and-moon>:is(.sun,.moon){fill:none;visibility:var(--visibility, hidden)}[data-theme=light] .sun-and-moon>.moon{--visibility: visible}[data-theme=dark] .sun-and-moon>.sun{--visibility: visible}}@layer demo{.card{--_background: hsl(240 5% 12%);--_radius: 1.25rem;--_opacity: .7;--_opacity-hover: 1;--_border: hsl(240 4% 16%);--_border-hover: hsl(0 0% 22%);--_border-checked: hsl(240 5% 32%)}[data-theme=light] .card{--_background: hsl(0 0% 100%);--_border: hsl(0 0% 94%);--_border-hover: hsl(0 0% 90%);--_border-checked: hsl(0 0% 85%)}.card-thumbnail-window,.card-thumbnail-icon{--window-radial: hsl(0 0% 100% / .05);--window-border: hsl(240 4% 20%);--window-shadow: hsl(0 0% 0% / .04);--window-skeleton: 0 0% 100%}[data-theme=light] .card-thumbnail-window,[data-theme=light] .card-thumbnail-icon{--window-radial: hsl(0 0% 90% / .4);--window-border: hsl(0 0% 85%);--window-shadow: hsl(0 0% 85% / .1);--window-skeleton: 0 0% 20%}#app{display:grid;align-items:center;justify-items:center;place-items:center;min-block-size:100vh}.container{--_inline: 41rem;inline-size:var(--_inline);padding-block:1.5rem}.title{font-size:36px;font-weight:700;color:var(--typography-heading);letter-spacing:-.02em;line-height:1.35;background:linear-gradient(180deg,var(--typography-body),var(--typography-heading) 110%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.description{font-size:16px;font-weight:400;color:var(--typography-body);letter-spacing:-.02em;-webkit-margin-after:1.5rem;margin-block-end:1.5rem}.background{position:absolute;inline-size:140%;block-size:250%;top:-75%;left:-20%;background:var(--background);z-index:-1}.gridLine{--background: #ffffff;--color: rgba(255, 255, 255, .15);--height: 1px;--width: 5px;--fade-stop: 90%;--offset: -100px;position:absolute;width:calc(100% + var(--offset));height:var(--height);left:calc(var(--offset) / 2 * -1);background:linear-gradient(to right,var(--color),var(--color) 50%,transparent 0,transparent);background-size:var(--width) var(--height);-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask:linear-gradient(to left,var(--background) var(--fade-stop),transparent),linear-gradient(to right,var(--background) var(--fade-stop),transparent),linear-gradient(black,black)}.gridLine.line{width:var(--height);height:calc(100% + var(--offset));top:calc(var(--offset) / 2 * -1);background:linear-gradient(to bottom,var(--color),var(--color) 50%,transparent 0,transparent);background-size:var(--height) var(--width);-webkit-mask:linear-gradient(to top,var(--background) var(--fade-stop),transparent),linear-gradient(to bottom,var(--background) var(--fade-stop),transparent),linear-gradient(black,black)}.gridLine.top{-webkit-mask:linear-gradient(to bottom,var(--background) var(--fade-stop),transparent),linear-gradient(to bottom,var(--background) var(--fade-stop),transparent),linear-gradient(black,black)}[data-theme=light] .gridLine{--color: rgba(0, 0, 0, .15)}.cards{--sizing: 3;position:relative;display:grid;grid-template-columns:repeat(var(--sizing),1fr);grid-gap:1rem}.card{position:relative;display:flex;flex-direction:column;aspect-ratio:1;border-radius:var(--_radius);background:var(--_background);cursor:pointer;outline:var(--_outline, none);border:1px solid var(--_border);opacity:var(--_opacity);touch-action:pan-y;-webkit-tap-highlight-color:transparent}@media (prefers-reduced-motion: no-preference){.card{transition:all .2s ease-out}}.card:has(.card-input):has(:is(:hover)):where(:not(:has(:disabled,:checked))){--_border: var(--_border-hover)}.card:has(.card-input):has(:is(:focus-visible)):where(:not(:has(:disabled))){--_outline: 3px solid var(--_border)}.card:has(.card-input):has(:is(:active)):where(:not(:has(:disabled))){--_border: var(--_border-hover)}.card:has(.card-input):has(:where(:checked)){--_border: var(--_border-checked);opacity:var(--_opacity-hover)}.card:has(.card-input):has(:where(:disabled)){cursor:not-allowed}.card-thumbnail{position:relative;display:flex;justify-content:center;flex:1 1;block-size:100%;overflow:hidden;-webkit-mask-image:linear-gradient(to top,transparent 7%,black 50%);mask-image:linear-gradient(to top,transparent 7%,black 50%)}.card-content{padding:1rem;-webkit-padding-before:0;padding-block-start:0;flex:0 1}.card-content :is(h2,p){display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-wrap:balance}.card-content h2{font-size:16px;font-weight:600;color:var(--typography-heading);letter-spacing:-.02em;line-height:1.25;-webkit-margin-after:.2rem;margin-block-end:.2rem;background:linear-gradient(180deg,var(--typography-body),var(--typography-heading) 110%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.card-content p{font-size:.875rem;color:var(--typography-body);letter-spacing:-.01em}.card-thumbnail-window{display:flex;flex-direction:column;position:absolute;inline-size:var(--window-inline, 220px);block-size:var(--window-block, 100px);top:50%;left:50%;transform:translate(var(--window-x, -50%),var(--window-y, -50%));border-radius:8px;background:radial-gradient(at left top,var(--window-radial),var(--_background) 70%),var(--_background);border:1px solid var(--window-border);box-shadow:-2px -2px 2px var(--window-shadow),0 0 24px var(--window-shadow);padding:.6em;gap:.6em;-webkit-user-select:none;-moz-user-select:none;user-select:none}.card-thumbnail-header{display:flex;align-items:center;gap:.4em}.card-thumbnail-logo{display:inherit}.card-thumbnail-logo svg{fill:hsl(var(--window-skeleton) / .4)}.card-thumbnail-title{font-size:11px;font-weight:500;letter-spacing:.05em;color:hsl(var(--window-skeleton) / .7)}.card-thumbnail-main{flex:1 1}.card-thumbnail-line{inline-size:var(--w, 100%);block-size:var(--h, .25em);-webkit-margin-after:var(--mb, 0);margin-block-end:var(--mb, 0);background:hsl(var(--window-skeleton) / var(--a, .15));border-radius:999px}.card-thumbnail-line[data-outline]{background:transparent;border:1px solid hsl(var(--window-skeleton) / var(--a, .15))}.card-thumbnail-stack{display:flex;flex-direction:var(--flex-d, row);gap:var(--gap, .5em);inline-size:100%}.card-thumbnail-icon{position:absolute;inset:0;margin:auto;display:grid;align-content:center;justify-content:center;place-content:center;inline-size:2rem;block-size:2rem;color:var(--typography-body);background:radial-gradient(at left top,var(--window-radial),var(--_background) 70%),var(--_background);box-shadow:-2px -2px 2px var(--window-shadow),0 0 24px var(--window-shadow);border:1px solid var(--window-border);border-radius:999px}.card-thumbnail[data-thumbnail=advanced] .card-thumbnail-window{--window-x: -39%;--window-y: -45%;-webkit-padding-end:2.5em;padding-inline-end:2.5em}.card-thumbnail[data-thumbnail=simplified] .card-thumbnail-window{--window-y: 0%;--window-inline: 170px;--window-block: 70px}.card-thumbnail[data-thumbnail=nobanner] .card-thumbnail-window[data-window=advanced]{--window-y: 0%;--window-inline: 170px;--window-block: 70px;opacity:.8}.card-thumbnail[data-thumbnail=nobanner] .card-thumbnail-window[data-window=simplified]{--window-x:calc(-50% - 25px);--window-y: -45%;opacity:.4}}