@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root { color-scheme: light; --bg:#f5f6f3; --surface:#fcfcfa; --text:#202c28; --muted:#6c7872; --line:#dce2da; --accent:#296e58; --accent-soft:#e6eee6; --stage:#172b27; --stage-text:#92aaa1; --track:#d7dfd5; --shadow:0 8px 20px #203c2a06; }
:root[data-theme=dark] { color-scheme:dark; --bg:#111917; --surface:#17221e; --text:#e8eee8; --muted:#9aaa9e; --line:#2c3931; --accent:#a9d6a9; --accent-soft:#2c4031; --stage:#0d1815; --stage-text:#8da497; --track:#354638; --shadow:none; }
@media(prefers-color-scheme:dark) { :root:not([data-theme=light]) { color-scheme:dark; --bg:#111917; --surface:#17221e; --text:#e8eee8; --muted:#9aaa9e; --line:#2c3931; --accent:#a9d6a9; --accent-soft:#2c4031; --stage:#0d1815; --stage-text:#8da497; --track:#354638; --shadow:none; } }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--bg); color:var(--text); font-family:'DM Sans',sans-serif; font-size:14px; -webkit-font-smoothing:antialiased; } button,input,select { font:inherit; } button,select { cursor:pointer; } button,a,input,select { -webkit-tap-highlight-color:transparent; } button { color:inherit; } button { touch-action:manipulation; } a { color:inherit; text-decoration:none; } button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid var(--accent); outline-offset:4px; } svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; } .icon-defs { position:absolute; width:0; height:0; overflow:hidden; } .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .app-shell { max-width:1440px; padding:0 64px; margin:auto; }
.site-header { height:104px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); } .brand { display:flex; align-items:center; font-family:'Space Grotesk',sans-serif; font-size:25px; font-weight:600; letter-spacing:-1.3px; } .brand-icon { margin-right:11px; display:flex; color:var(--accent); } .brand-icon svg { width:29px; height:29px; stroke-width:1.4; } .brand-dot { color:var(--accent); } .header-right { display:flex; align-items:center; gap:28px; } .header-caption { color:var(--muted); font-size:13px; } .theme-control select { background:transparent; border:1px solid var(--line); border-radius:7px; color:var(--muted); padding:8px 10px; font-size:12px; } .intro { display:flex; justify-content:space-between; align-items:flex-end; padding:47px 0 35px; } .eyebrow { color:var(--muted); font-size:10px; font-weight:600; letter-spacing:1.6px; display:flex; align-items:center; gap:7px; margin:0 0 16px; } .status-dot { width:5px; height:5px; border-radius:50%; background:var(--accent); } h1 { font-family:'Space Grotesk',sans-serif; font-size:clamp(36px,3.4vw,49px); line-height:1.12; font-weight:500; letter-spacing:-2.3px; margin:0; } .intro-description { color:var(--muted); font-size:14px; line-height:1.9; margin:0 0 3px; }
.featured { display:grid; grid-template-columns:1.15fr 1fr; background:var(--surface); border:1px solid var(--line); border-radius:13px; overflow:hidden; box-shadow:var(--shadow); scroll-margin-top:24px; } .feature-stage { background-color:var(--stage); min-height:420px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; background-image:radial-gradient(#9bb5a51b .8px,transparent .8px); background-size:15px 15px; } .stage-label { position:absolute; top:24px; left:25px; font-size:9px; color:var(--stage-text); letter-spacing:1.4px; z-index:1; } .stage-label span { margin-left:8px; color:#c5d5ca; } .feature-stage canvas { width:325px; height:325px; max-width:78%; object-fit:contain; image-rendering:pixelated; position:relative; transition:opacity .12s; } .stage-bottom { position:absolute; bottom:21px; left:25px; right:25px; display:flex; align-items:center; justify-content:space-between; color:var(--stage-text); font-family:monospace; font-size:10px; } .stage-bottom .text-button { color:var(--stage-text); font-family:'DM Sans',sans-serif; font-size:10px; gap:6px; } .stage-bottom svg { width:13px; height:13px; } .stage-bottom [aria-pressed=true] { color:#ecf5ed; } .feature-info { padding:37px 40px 27px; display:flex; flex-direction:column; } .feature-info .eyebrow { font-size:9px; letter-spacing:1.35px; margin-bottom:12px; } h2 { font-family:'Space Grotesk',sans-serif; font-size:25px; letter-spacing:-1px; font-weight:500; line-height:1.25; margin:0; } #feature-number { color:var(--muted); margin-left:4px; } .muted { color:var(--muted); } .feature-description { margin:13px 0 21px; font-size:12px; line-height:1.8; } .flake-details { margin:0; display:flex; gap:28px; padding:0 0 22px; border-bottom:1px solid var(--line); } .flake-details dt { color:var(--muted); font-size:10px; margin-bottom:7px; } .flake-details dd { font-family:'Space Grotesk',monospace; font-size:12px; font-weight:500; margin:0; white-space:nowrap; } .palette { display:flex; align-items:center; gap:17px; border:0; padding:22px 0; margin:0; min-width:0; } .palette legend { float:left; font-size:11px; padding:0; margin-right:2px; color:var(--muted); } .swatches { display:flex; gap:9px; } .swatch { border:1px solid transparent; padding:3px; border-radius:50%; width:28px; height:28px; background:transparent; transition:transform .15s; } .swatch span { display:block; border-radius:50%; width:20px; height:20px; background:var(--swatch); box-shadow:inset 0 0 0 1px #00000010; } .swatch[aria-pressed=true] { border-color:var(--accent); } .swatch:hover { transform:translateY(-2px); } .color-name { font-size:10px; color:var(--muted); margin-left:auto; } .export-area { margin-top:auto; } .export-row { display:flex; gap:9px; } .export-scale { flex:1; min-width:0; } .export-scale select { width:100%; height:42px; padding:0 12px; color:var(--text); background:var(--surface); border:1px solid var(--line); border-radius:6px; font-size:11px; } .button { height:42px; padding:0 18px; display:inline-flex; align-items:center; justify-content:center; gap:9px; border-radius:6px; font-size:12px; font-weight:500; transition:background .15s,transform .15s; white-space:nowrap; } .button:active { transform:translateY(1px); } .button svg { width:16px; height:16px; } .primary { background:var(--accent); color:var(--bg); border:1px solid var(--accent); min-width:143px; } .primary:hover { filter:brightness(1.12); } .text-button { border:0; padding:0; background:transparent; display:inline-flex; align-items:center; gap:7px; font-size:11px; line-height:1.6; } .text-button:hover { text-decoration:underline; text-underline-offset:4px; } .text-button svg { width:13px; height:13px; } .export-secondary { display:flex; justify-content:space-between; padding:15px 0 0; color:var(--muted); } .export-secondary span { font-size:15px; } .export-note { margin:14px 0 0; color:var(--muted); font-size:9px; }
.collection { margin-top:46px; } .collection-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; gap:16px; } .collection-heading h2 { font-size:24px; display:flex; align-items:center; gap:12px; } .count { font-family:'DM Sans',sans-serif; letter-spacing:0; font-size:10px; padding:4px 8px; background:var(--accent-soft); color:var(--accent); border-radius:5px; font-weight:600; } .collection-heading p { margin:8px 0 0; font-size:12px; } .regenerate { background:var(--text); color:var(--bg); border:1px solid var(--text); } .regenerate:hover { background:var(--accent); border-color:var(--accent); } .regenerate.is-generating svg { animation:spin .4s ease; } .controls { display:grid; grid-template-columns:1fr 1fr 1.15fr; border:1px solid var(--line); border-radius:9px; background:var(--surface); padding:22px 0; margin-bottom:24px; } .control { padding:0 25px; min-width:0; } .control+.control { border-left:1px solid var(--line); } .control label { display:flex; align-items:center; justify-content:space-between; font-size:11px; margin-bottom:13px; font-weight:500; } .control output { font-family:'Space Grotesk',monospace; font-size:11px; color:var(--muted); font-weight:400; } input[type=range] { appearance:none; display:block; width:100%; height:3px; background:var(--track); accent-color:var(--accent); margin:18px 0 10px; border-radius:3px; } input[type=range]::-webkit-slider-thumb { appearance:none; border-radius:50%; width:12px; height:12px; background:var(--accent); cursor:ew-resize; box-shadow:0 0 0 4px var(--surface); } input[type=range]::-moz-range-thumb { border:0; width:12px; height:12px; background:var(--accent); border-radius:50%; cursor:ew-resize; } .range-labels { display:flex; justify-content:space-between; color:var(--muted); font-size:9px; } .seed-hint { font-size:9px; color:var(--muted); font-weight:400; } .seed-input { display:flex; height:31px; border:1px solid var(--line); border-radius:4px; overflow:hidden; } .seed-input input { width:100%; min-width:0; border:0; background:transparent; padding:0 9px; font-family:'Space Grotesk',monospace; color:var(--text); font-size:11px; } .seed-input button { background:transparent; border:0; border-left:1px solid var(--line); color:var(--muted); width:33px; flex-shrink:0; } .seed-input button:hover { background:var(--accent-soft); } .seed-help { display:block; color:var(--muted); font-size:9px; margin-top:8px; } .gallery { display:grid; grid-template-columns:repeat(auto-fit,minmax(155px,1fr)); gap:14px; } .flake-card { padding:0; border:1px solid var(--line); background:var(--surface); border-radius:8px; overflow:hidden; text-align:left; position:relative; transition:transform .18s,border-color .18s,box-shadow .18s; } .flake-card:hover { transform:translateY(-3px); border-color:var(--accent); box-shadow:0 8px 20px #10281a0a; } .flake-card[aria-pressed=true] { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); } .card-art { aspect-ratio:1.15; display:flex; align-items:center; justify-content:center; background:var(--stage); background-image:radial-gradient(#9bb5a514 .65px,transparent .65px); background-size:12px 12px; } .card-art canvas { width:80%; height:auto; image-rendering:pixelated; } .card-meta { display:flex; justify-content:space-between; align-items:center; padding:12px 13px; } .card-index { font-size:10px; font-weight:500; } .card-seed { color:var(--muted); font-family:'Space Grotesk',monospace; font-size:8px; letter-spacing:.3px; } .selected-check { position:absolute; top:9px; right:9px; display:none; width:17px; height:17px; background:#b8ddc6; color:#172b27; border-radius:50%; align-items:center; justify-content:center; } .selected-check svg { width:11px; height:11px; stroke-width:2; } .flake-card[aria-pressed=true] .selected-check { display:flex; } footer { display:flex; justify-content:space-between; gap:16px; padding:32px 0; margin-top:34px; border-top:1px solid var(--line); font-size:10px; color:var(--muted); } footer span { display:flex; gap:8px; align-items:center; } footer svg { width:14px; height:14px; color:var(--accent); } footer i { font-style:normal; margin:0 3px; } .toast { position:fixed; bottom:26px; left:50%; transform:translate(-50%,15px); opacity:0; pointer-events:none; padding:13px 20px; background:var(--text); color:var(--bg); border:1px solid var(--line); border-radius:8px; font-size:12px; box-shadow:0 8px 30px #0002; transition:opacity .18s,transform .18s; z-index:10; max-width:calc(100vw - 32px); text-align:center; } .toast.visible { opacity:1; transform:translate(-50%,0); } .noscript { padding:20px; text-align:center; } @keyframes spin { to { transform:rotate(180deg); } }
@media(min-width:1440px) { .gallery { grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); } }
@media(max-width:1050px) { .app-shell { padding:0 36px; } .feature-info { padding:30px 28px 26px; } .feature-stage { min-height:420px; } .flake-details { gap:20px; } .color-name { display:none; } .control { padding:0 18px; } .featured { grid-template-columns:1fr 1fr; } }
@media(max-width:760px) { .app-shell { padding:0 24px; } .site-header { height:80px; } .header-caption { display:none; } .intro { padding:34px 0 28px; } h1 { font-size:36px; letter-spacing:-1.9px; } .intro-description { font-size:11px; } .featured { grid-template-columns:1fr; } .feature-stage { min-height:380px; } .feature-stage canvas { width:300px; height:300px; } .feature-info { padding:28px; } .feature-info h2 { font-size:28px; } .feature-description br { display:none; } .flake-details { justify-content:space-between; gap:15px; } .palette { padding:20px 0; } .color-name { display:block; } .export-note { margin-top:13px; } .controls { grid-template-columns:1fr 1fr; row-gap:23px; } .seed-control { grid-column:1 / -1; border-top:1px solid var(--line); padding-top:20px; } .control.seed-control { border-left:0; } .seed-control label { margin-bottom:10px; } .collection { margin-top:35px; } .collection-heading h2 { font-size:21px; } .collection-heading p { font-size:11px; line-height:1.6; max-width:210px; } .regenerate { padding:0 12px; font-size:10px; gap:7px; } .gallery { grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; } footer { flex-direction:column; gap:13px; margin-top:28px; padding:25px 0; font-size:9px; } }
@media(max-width:430px) { .app-shell { padding:0 18px; } .intro-description { display:none; } .intro { padding-top:30px; } .eyebrow { font-size:9px; } .feature-stage { min-height:340px; } .feature-stage canvas { width:265px; height:265px; } .feature-info { padding:25px 23px; } .stage-label { left:20px; top:20px; font-size:8px; } .stage-bottom { left:20px; right:20px; } .collection-heading h2 { font-size:19px; gap:7px; letter-spacing:-.8px; } .count { padding:3px 6px; font-size:9px; } .regenerate { height:38px; } .regenerate svg { width:14px; height:14px; } .collection-heading { gap:10px; } .collection-heading p { font-size:10px; max-width:180px; } .gallery { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .control { padding:0 16px; } .card-meta { padding:11px 10px; } .card-seed { font-size:7px; } .color-name { font-size:9px; } .swatches { gap:7px; } .palette { gap:13px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none!important; animation:none!important; } }