:root{--paper:#ecebf4;--paper-2:#e2e0ee;--ink:#1d1a38;--muted:#5d5878;--line:#c9c5dc;--focus:#3b2fd6;--card:#f7f6fb;--font:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;--gutter:clamp(16px,4vw,48px);color-scheme:light}@media (prefers-color-scheme:dark){:root{--paper:#16142a;--paper-2:#1f1c38;--ink:#eceaf8;--muted:#a9a4c6;--line:#34305a;--focus:#9d94ff;--card:#1c1a33;color-scheme:dark}}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:1.0625rem;line-height:1.5;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}a{color:inherit}h1,h2{font-weight:700;font-stretch:80%;letter-spacing:-.02em;line-height:.98}h1,h2,p{margin:0}:focus-visible{outline:3px solid var(--focus);outline-offset:2px}ul{list-style:none;margin:0;padding:0}.top{display:flex;gap:24px;flex-wrap:wrap;padding:14px var(--gutter);border-bottom:1px solid var(--line)}.mark,.top{align-items:center}.mark{display:inline-flex;gap:10px;font-weight:750;font-stretch:85%;text-decoration:none;font-size:1.15rem}.mark-grid{display:grid;grid-template-columns:repeat(3,6px);grid-gap:1px;gap:1px}.mark-grid i{width:6px;height:6px;background:var(--ink)}.mark-grid i:nth-child(2),.mark-grid i:nth-child(4),.mark-grid i:nth-child(9){background:transparent;box-shadow:inset 0 0 0 1px var(--ink)}.top nav{display:flex;gap:4px 18px;flex-wrap:wrap;margin-left:auto}.nav-group{display:inline-flex;gap:4px 16px;flex-wrap:wrap}.nav-group+.nav-group{padding-left:18px;border-left:1px solid var(--line)}.top nav a{text-decoration:none;color:var(--muted);padding:4px 0;border-bottom:2px solid transparent}.top nav a:hover{color:var(--ink)}.top nav a[aria-current=page]{color:var(--ink);border-color:var(--ink)}.piece{position:relative;overflow:hidden;background:var(--tile,var(--paper-2))}.piece,.piece img{display:block;width:100%}.piece img{height:100%;object-fit:cover;animation:appear .3s ease}@keyframes appear{0%{opacity:0}}.piece img.pixel{image-rendering:pixelated}.piece img.under{position:absolute;inset:0;animation:none}.piece.has-under img:not(.under){position:relative}.piece.has-under[data-state=loading]:after{z-index:1}.piece[data-state=loading]:after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,color-mix(in srgb,var(--paper) 55%,transparent) 50%,transparent 70%);background-size:250% 100%;animation:sheen 1.4s linear infinite}@keyframes sheen{0%{background-position:120% 0}to{background-position:-120% 0}}.piece-fail{position:absolute;inset:0;display:grid;place-items:center;font-size:.85rem;color:var(--muted);padding:8px;text-align:center}.hub{padding:0 var(--gutter) 64px}.hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-gap:clamp(24px,4vw,64px);gap:clamp(24px,4vw,64px);align-items:center;padding:clamp(32px,6vw,80px) 0 clamp(40px,6vw,88px)}.hero h1{font-size:clamp(3rem,7.4vw,6.6rem);font-stretch:75%;max-width:9ch}.hero p{margin-top:24px;max-width:46ch;color:var(--muted);font-size:1.15rem}.hero-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}.hero-links a{display:inline-block;padding:8px 14px;border:1.5px solid var(--ink);border-radius:999px;text-decoration:none;font-weight:600}.hero-links a:hover{background:var(--ink);color:var(--paper)}.mosaic{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-flow:dense;grid-gap:6px;gap:6px}.mosaic li.tall{grid-row:span 2}.mosaic a{display:block}.mosaic .piece,.mosaic a{height:100%}.mosaic li>.piece{aspect-ratio:1}.mosaic li.tall>.piece{aspect-ratio:auto}.mosaic li:not(.tall) .piece{aspect-ratio:1!important}.shelf{border-top:1px solid var(--line);padding:36px 0 44px;display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);grid-gap:32px;gap:32px}.shelf-head h2{font-size:clamp(2rem,3.4vw,2.9rem)}.shelf-head h2 a{text-decoration:none}.shelf-head p{margin:10px 0 18px;color:var(--muted);max-width:32ch}.strip{display:grid;grid-gap:8px;gap:8px;grid-template-columns:repeat(8,minmax(0,1fr));align-items:start}.strip.normal{grid-template-columns:repeat(6,minmax(0,1fr))}.strip.wide{grid-template-columns:repeat(5,minmax(0,1fr))}.gen-dashboards .wall.wide{grid-template-columns:repeat(auto-fill,minmax(380px,1fr))}.gen-dashboards .wall.wide.layout-phone{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}.shelf-dashboards .strip.wide{grid-template-columns:repeat(3,minmax(0,1fr))}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font:inherit;font-weight:600;font-size:.95rem;color:var(--ink);background:transparent;border:1.5px solid var(--ink);border-radius:8px;padding:8px 14px;cursor:pointer;text-decoration:none}.btn:hover{background:var(--paper-2)}.btn.solid{background:var(--ink);color:var(--paper)}.btn.solid:hover{opacity:.9}.gen{padding:0 var(--gutter) 64px}.gen-head{padding:clamp(28px,5vw,64px) 0 24px;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);grid-gap:24px 48px;gap:24px 48px;align-items:end}.gen-head h1{font-size:clamp(3rem,8vw,7rem);font-stretch:75%}.gen-head p{color:var(--muted);max-width:52ch}.controls{position:-webkit-sticky;position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;gap:12px 28px;align-items:flex-end;padding:12px 0;margin-bottom:16px;background:color-mix(in srgb,var(--paper) 92%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}.opt{border:0;margin:0;padding:0;min-width:0}.jump label,.opt legend{font-size:.8rem;color:var(--muted);padding:0;margin-bottom:6px;display:block}.seg{display:flex;flex-wrap:wrap;gap:4px}.chip{position:relative;cursor:pointer}.chip input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}.chip span{display:inline-block;padding:5px 11px;border-radius:999px;border:1px solid var(--line);font-size:.92rem;background:var(--card)}.chip input:checked+span{background:var(--ink);color:var(--paper);border-color:var(--ink)}.chip input:focus-visible+span{outline:3px solid var(--focus);outline-offset:2px}.chip.swatch .sw{width:30px;height:30px;padding:0;border-radius:6px;border:2px solid transparent;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}.chip.swatch input:checked+.sw{border-color:var(--ink);background-clip:padding-box;outline:2px solid var(--paper);outline-offset:-4px}.actions{display:flex;gap:10px;align-items:flex-end;margin-left:auto}.jump input{font:inherit;font-size:.95rem;width:9.5em;padding:7px 10px;border-radius:8px;border:1.5px solid var(--line);background:var(--card);color:var(--ink)}.jump input:focus{border-color:var(--ink);outline:none}.wall{display:grid;grid-gap:10px;gap:10px;align-items:start}.wall.dense{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.wall.normal{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}.wall.wide{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}.tile{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;text-align:left;color:inherit;font:inherit;text-decoration:none}.tile .piece{border-radius:4px}.gen-doodles .tile .piece,.shelf-doodles .tile .piece{border-radius:50%}.tile .num{display:block;font-size:.78rem;color:var(--muted);margin-top:4px}.tile:hover .num{color:var(--ink)}.sentinel{height:1px}.detail{border:0;padding:0;background:var(--card);color:var(--ink);width:min(1040px,calc(100vw - 32px));max-height:calc(100dvh - 32px);border-radius:12px;overflow:auto;display:grid;grid-template-columns:minmax(0,3fr) minmax(260px,2fr)}.detail:not([open]){display:none}.detail::-webkit-backdrop{background:rgba(14,12,30,.72)}.detail::backdrop{background:rgba(14,12,30,.72)}.detail-art{padding:20px;display:grid;place-items:center;background:var(--paper-2)}.detail-art .piece{max-width:640px;border-radius:4px}.detail.tall .detail-art .piece{width:auto;height:min(78dvh,900px);max-width:100%}.detail.tall .detail-art .piece img{object-fit:contain}.detail-side{padding:28px 24px 24px;display:flex;flex-direction:column;gap:20px}.detail h2 .kind{display:block;font-size:1rem;font-weight:500;color:var(--muted);font-stretch:100%;letter-spacing:0}.detail h2 .big{display:block;font-size:clamp(2.6rem,5vw,3.8rem)}.detail dl{margin:0;display:grid;grid-gap:6px;gap:6px}.detail dl div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding-bottom:6px}.detail dt{color:var(--muted)}.detail dd{margin:0;font-weight:600}.downloads{display:flex;flex-direction:column;gap:8px}.note{font-size:.85rem;color:var(--muted)}.stepper{display:flex;gap:8px;margin-top:auto}.stepper .btn{flex:1 1}.close{position:absolute;top:10px;right:12px;width:36px;height:36px;border-radius:50%;border:0;background:var(--card);color:var(--ink);font-size:1.5rem;line-height:1;cursor:pointer}.piece.vector img{animation:none}.gen-blobs .piece,.mosaic .piece.blob-tile,.shelf-blobs .piece{background:var(--card)}.colors{display:grid;grid-gap:8px;gap:8px}.colors-head{display:flex;justify-content:space-between;color:var(--muted)}.colors-row{display:grid;grid-template-columns:repeat(5,1fr);grid-gap:6px;gap:6px}.color{position:relative;height:40px;border-radius:8px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);cursor:pointer}.color input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0}.color:focus-within{outline:3px solid var(--focus);outline-offset:2px}.link{background:none;border:0;padding:0;font:inherit;color:var(--ink);text-decoration:underline;cursor:pointer}.foot{padding:28px var(--gutter) 40px;border-top:1px solid var(--line);color:var(--muted);font-size:.9rem}.foot p{max-width:70ch}@media (max-width:900px){.gen-head,.hero,.shelf{grid-template-columns:minmax(0,1fr)}.mosaic,.strip{grid-template-columns:repeat(4,minmax(0,1fr))}.strip.normal{grid-template-columns:repeat(3,minmax(0,1fr))}.strip.wide{grid-template-columns:repeat(2,minmax(0,1fr))}.detail{grid-template-columns:minmax(0,1fr)}.detail.tall .detail-art .piece{height:min(60dvh,700px)}.actions{margin-left:0}}@media (max-width:560px){.top nav{margin-left:0;gap:4px 14px;font-size:.95rem}.nav-group+.nav-group{border-left:0;padding-left:0}.gen-dashboards .wall.wide{grid-template-columns:minmax(0,1fr)}.wall.dense{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.wall.normal,.wall.wide{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.controls{position:static}}@media (prefers-reduced-motion:reduce){.piece img,.piece[data-state=loading]:after{animation:none}}