figure{margin:0}figcaption{color:var(--muted);margin-top:.35rem;font-size:.85rem}.chosen{font-family:var(--mono);font-size:.75rem}.gallery{grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:1rem;display:grid}.gallery img{aspect-ratio:16/10;object-fit:cover;border-radius:var(--radius);background:var(--line);width:100%;height:auto;display:block}.fit-row{flex-wrap:wrap;gap:1rem;margin-bottom:1.25rem;display:flex}.fit{aspect-ratio:1;border:1px solid var(--line);background:repeating-conic-gradient(var(--line) 0 25%, transparent 0 50%) 0 0 / 16px 16px;border-radius:8px;width:9rem;display:block}.fit.cover{object-fit:cover}.fit.contain{object-fit:contain}.fit.fill{object-fit:fill}.fit.top{object-position:top}.shape-row{flex-wrap:wrap;align-items:center;gap:1.25rem;margin-bottom:1.25rem;display:flex}.shape{aspect-ratio:1;object-fit:cover;width:8rem}.shape.circle{clip-path:circle(50%)}.shape.hexagon{clip-path:polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0 50%)}.shape.faded{-webkit-mask-image:radial-gradient(circle,#000 45%,#0000 72%);mask-image:radial-gradient(circle,#000 45%,#0000 72%)}.blend{aspect-ratio:1;border-radius:var(--radius);background:linear-gradient(135deg,#f59e0b,#ef4444);place-items:center;width:10rem;display:grid;position:relative;overflow:hidden}.blend img{object-fit:cover;mix-blend-mode:multiply;width:100%;height:100%;position:absolute;inset:0}.blend span{font-family:var(--heading);color:#fff;mix-blend-mode:overlay;font-size:1.6rem;position:relative}.filter-demo img{aspect-ratio:16/10;object-fit:cover;border-radius:var(--radius);width:100%;max-width:34rem;transition:filter .3s;display:block}.filter-demo button[aria-pressed=true]{background:var(--accent);color:var(--accent-text)}.svg-row{flex-wrap:wrap;align-items:end;gap:2rem;display:flex}.orbit{offset-path:path("M 22 60 A 58 22 0 1 0 138 60 A 58 22 0 1 0 22 60");animation:4s linear infinite orbit}@keyframes orbit{to{offset-distance:100%}}.chart svg{width:20rem;max-width:100%;height:auto;display:block}.chart rect{fill:var(--accent);transition:opacity .15s}.chart rect:hover{opacity:.6}.chart text{fill:var(--muted);font-family:system-ui,sans-serif;font-size:9px}#sketch{aspect-ratio:3;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);touch-action:none;cursor:crosshair;width:100%;max-width:45rem;display:block}.player{border-radius:var(--radius);background:#000;max-width:40rem;position:relative;overflow:hidden}.player video{aspect-ratio:16/9;object-fit:contain;width:100%;display:block}.caption-line{color:#fff;text-align:center;background:#000000b3;border-radius:4px;max-width:90%;margin:0;padding:.2rem .6rem;font-size:1rem;position:absolute;bottom:3.6rem;left:50%;translate:-50%}.caption-line:empty{display:none}.controls{color:#eee;background:#111;flex-wrap:wrap;align-items:center;gap:.4rem;padding:.5rem;display:flex}.controls .ghost{color:#cbd5ff;border-color:#4b5a8a}.controls input[type=range]{accent-color:var(--accent);flex:8rem}.controls output{font-family:var(--mono);min-width:7.5em;font-size:.8rem}.controls [aria-pressed=false]{opacity:.6}.limits{padding-left:1.6rem}