/* Site pages (about, privacy, terms, guidelines, licenses, a published design) and the home page's community
   gallery and footer. Same night palette as the home workshop. */
:root{
  --site-bg:#030a12;--site-panel:#08131e;--site-raised:#0d1b29;--site-line:#9cc9f21a;--site-line-strong:#9cc9f233;
  --site-text:#eef4f8;--site-text-2:#b9c9d6;--site-muted:#7f97aa;--site-faint:#56708a;
  --site-cyan:#72c8ff;--site-amber:#f2a65a;--site-amber-ink:#22140a;
  --site-font:"SF Pro Text",-apple-system,BlinkMacSystemFont,Inter,"Segoe UI",sans-serif;
  --site-display:"SF Pro Display",-apple-system,BlinkMacSystemFont,Inter,"Segoe UI",sans-serif;
  --site-mono:"SF Mono",ui-monospace,Menlo,Consolas,monospace;
}
body[data-site-page]{margin:0;background:var(--site-bg);color:var(--site-text-2);font:15px/1.65 var(--site-font);-webkit-font-smoothing:antialiased}
body[data-site-page] a{color:var(--site-cyan);text-underline-offset:3px}
body[data-site-page] :focus-visible{outline:2px solid var(--site-cyan);outline-offset:2px}
.site-top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:28px;height:64px;padding:0 5vw;background:#040c15ee;border-bottom:1px solid var(--site-line);backdrop-filter:blur(10px)}
.site-top .wordmark{color:var(--site-text);font:700 25px/1 var(--site-display);letter-spacing:-1.2px;text-decoration:none}
.site-top nav{display:flex;gap:22px}
.site-top nav a{color:var(--site-muted);font-size:14px;text-decoration:none}
.site-top nav a:hover{color:var(--site-text)}
.site-top .site-start{margin-left:auto;display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:999px;background:var(--site-amber);color:var(--site-amber-ink)!important;font-weight:600;font-size:14px;text-decoration:none}

/* Long-form pages */
.doc-page{max-width:720px;margin:0 auto;padding:64px 24px 96px}
.doc-page h1{margin:0 0 6px;color:var(--site-text);font:600 40px/1.15 var(--site-display);letter-spacing:-.02em}
.doc-page .doc-meta{margin:0 0 36px;color:var(--site-muted);font-size:14px}
.doc-page .doc-lede{margin:0 0 32px;color:var(--site-text);font-size:18px;line-height:1.55}
.doc-page h2{margin:44px 0 10px;color:var(--site-text);font:600 21px/1.3 var(--site-display);letter-spacing:-.01em}
.doc-page h3{margin:26px 0 6px;color:var(--site-text);font-size:16px;font-weight:600}
.doc-page p,.doc-page li{max-width:68ch}
.doc-page ul,.doc-page ol{padding-left:22px}
.doc-page li{margin:6px 0}
.doc-page strong{color:var(--site-text);font-weight:600}
.doc-page table{width:100%;border-collapse:collapse;margin:14px 0 6px;font-size:14px}
.doc-page th{text-align:left;color:var(--site-muted);font-weight:500;border-bottom:1px solid var(--site-line-strong);padding:8px 10px 8px 0}
.doc-page td{border-bottom:1px solid var(--site-line);padding:9px 10px 9px 0;vertical-align:top}
.doc-page td:first-child{color:var(--site-text)}
.doc-page .doc-toc{margin:0 0 8px;padding:16px 20px;border:1px solid var(--site-line);border-radius:12px;background:var(--site-panel);font-size:14px}
.doc-page .doc-toc ol{margin:8px 0 0;columns:2;column-gap:28px}
.doc-page .doc-toc li{margin:0 0 6px;break-inside:avoid}
.doc-page .doc-toc a{color:var(--site-text-2);text-decoration:none}
.doc-page .doc-toc a:hover{color:var(--site-cyan)}
.tbd{padding:0 4px;border-radius:4px;background:#f2a65a26;color:var(--site-amber)!important;font-style:normal}

/* Footer: site pages and the home page */
.site-footer{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:14px 32px;padding:28px 5vw 36px;border-top:1px solid var(--site-line);background:var(--site-bg);font-family:var(--site-font)}
.site-footer nav{display:flex;flex-wrap:wrap;gap:8px 22px}
.site-footer a{color:var(--site-muted);font-size:13.5px;text-decoration:none}
.site-footer a:hover,.site-footer a[aria-current=page]{color:var(--site-text)}
.site-legal{margin:0;color:var(--site-faint);font-size:13px}

/* Community gallery on the home page */
.community{padding:72px 5vw 88px;background:linear-gradient(#030a12,#05101a 40%,#030a12);font-family:var(--site-font);color:var(--site-text-2)}
.community-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 40px;margin:0 auto 28px;max-width:1280px}
.community-head h2{margin:0 0 8px;color:var(--site-text);font:600 34px/1.1 var(--site-display);letter-spacing:-.02em}
.community-head p{margin:0;max-width:56ch;color:var(--site-muted);font-size:15px}
.community-filters{display:flex;gap:4px;padding:4px;border-radius:999px;border:1px solid var(--site-line-strong);background:#07111b}
.community-filters button{height:32px;padding:0 14px;border:0;border-radius:999px;background:none;color:var(--site-muted);font:500 13.5px var(--site-font);cursor:pointer}
.community-filters button:hover{color:var(--site-text)}
.community-filters button[aria-pressed=true]{background:#14273a;color:var(--site-text)}
.community-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:22px;max-width:1280px;margin:0 auto;padding:0;list-style:none}
.design-card{position:relative;display:flex;flex-direction:column;border-radius:16px;overflow:hidden;border:1px solid var(--site-line);background:var(--site-panel);transition:border-color .15s,transform .15s}
.design-card:hover{border-color:#72c8ff55;transform:translateY(-2px)}
.design-card:focus-within{border-color:var(--site-cyan)}
.design-card .design-picture{aspect-ratio:4/3;background:radial-gradient(120% 90% at 50% 38%,#16212c,#06101a 70%);display:grid;place-items:center;overflow:hidden}
.design-card img{width:100%;height:100%;object-fit:cover;display:block}
.design-card .design-monogram{color:#72c8ff44;font:600 64px var(--site-display)}
.design-card .design-body{display:flex;flex-direction:column;gap:6px;padding:14px 16px 16px}
.design-card h3{margin:0;color:var(--site-text);font:600 16px/1.3 var(--site-display)}
.design-card h3 a{color:inherit;text-decoration:none}
.design-card h3 a::after{content:"";position:absolute;inset:0}
.design-card .design-by{margin:0;color:var(--site-muted);font-size:13px}
.design-tags{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 0;padding:0;list-style:none}
.design-tags li{padding:2px 9px;border-radius:999px;border:1px solid var(--site-line-strong);color:var(--site-text-2);font-size:12px}
.community-empty{max-width:1280px;margin:0 auto;padding:44px 28px;border:1px dashed var(--site-line-strong);border-radius:16px;text-align:center;color:var(--site-muted)}
.community-empty strong{display:block;margin-bottom:6px;color:var(--site-text);font:600 18px var(--site-display)}
.community-scope{max-width:1280px;margin:18px auto 0;color:var(--site-faint);font-size:12.5px}
body:not(:has(.workspace.home-active)) :is(#community,#home-footer){display:none!important}

/* A published design */
.design-page{display:grid;grid-template-columns:minmax(0,1fr) 420px;height:calc(100dvh - 64px);min-height:520px}
.design-stage{position:relative;background:radial-gradient(120% 90% at 50% 38%,#16212c 0,#030a12 62%);min-height:420px}
.design-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;outline:none}
.design-stage .stage-note{position:absolute;left:20px;bottom:18px;margin:0;color:var(--site-muted);font:12px var(--site-mono)}
.design-stage .stage-status{position:absolute;inset:0;display:grid;place-items:center;margin:0;color:var(--site-muted)}
.design-side{padding:32px 28px 40px;border-left:1px solid var(--site-line);background:var(--site-panel);overflow:auto}
.design-side h1{margin:0 0 6px;color:var(--site-text);font:600 28px/1.15 var(--site-display);letter-spacing:-.015em}
.design-side .design-by{margin:0 0 16px;color:var(--site-muted);font-size:14px}
.design-side .design-description{margin:0 0 18px;color:var(--site-text-2);white-space:pre-line}
.design-actions{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 26px}
.design-actions a,.design-actions button{display:inline-flex;align-items:center;height:38px;padding:0 15px;border-radius:999px;border:1px solid var(--site-line-strong);background:var(--site-raised);color:var(--site-text);font:500 14px var(--site-font);text-decoration:none;cursor:pointer}
.design-actions a{color:var(--site-text)!important}
.design-actions .primary-action{background:var(--site-amber);border-color:var(--site-amber);color:var(--site-amber-ink)!important}
.design-section{margin:24px 0 0}
.design-section h2{margin:0 0 10px;color:var(--site-text);font:600 15px var(--site-display)}
.design-prompt{margin:0;padding:12px 14px;border-radius:12px;background:#0b1825;border:1px solid var(--site-line);color:var(--site-text-2);font-size:14px}
.design-parts{width:100%;border-collapse:collapse;font-size:13.5px;table-layout:fixed}
.design-parts td{padding:7px 8px 7px 0;border-bottom:1px solid var(--site-line);vertical-align:top}
.design-parts td:first-child{color:var(--site-text)}
.design-parts td:last-child{width:42%;color:var(--site-muted);text-align:right;overflow-wrap:anywhere}
.design-facts{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0;font-size:13.5px}
.design-facts dt{color:var(--site-muted)}.design-facts dd{margin:0;color:var(--site-text)}
.design-report{margin-top:28px;font-size:13px;color:var(--site-faint)}
.site-dialog{width:min(420px,calc(100vw - 32px));padding:0;border:1px solid var(--site-line-strong);border-radius:16px;background:var(--site-panel);color:var(--site-text-2);font-family:var(--site-font)}
.site-dialog::backdrop{background:#000a}
.site-dialog form{padding:22px}
.site-dialog h2{margin:0 0 8px;color:var(--site-text);font:600 20px var(--site-display)}
.site-dialog .qr{width:220px;margin:14px auto;border-radius:12px;overflow:hidden;background:#fff}
.site-dialog .qr svg{display:block;width:100%;height:auto}
.site-dialog .dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
.site-dialog button{height:36px;padding:0 15px;border-radius:999px;border:1px solid var(--site-line-strong);background:var(--site-raised);color:var(--site-text);font:500 14px var(--site-font);cursor:pointer}

@media (max-width:900px){
  .design-page{grid-template-columns:1fr;height:auto}.design-stage{min-height:52vh}.design-side{border-left:0;border-top:1px solid var(--site-line)}
  .site-top{gap:16px;padding:0 16px}.site-top nav{display:none}
  .doc-page{padding:40px 16px 72px}.doc-page h1{font-size:32px}.doc-page .doc-toc ol{columns:1}
  .community{padding:56px 16px 64px}.community-head h2{font-size:28px}
  .community-filters{max-width:100%;overflow-x:auto;scrollbar-width:none}.community-filters button{flex:0 0 auto}
}
@media (prefers-reduced-motion:reduce){.design-card{transition:none}.design-card:hover{transform:none}}
body[data-site-page] [hidden],.community [hidden]{display:none!important}
.wordmark .beta-tag{display:inline-block;margin-left:7px;padding:2px 6px 1px;border:1px solid #2d3b4a;border-radius:5px;font:600 9.5px/1.3 -apple-system,BlinkMacSystemFont,Inter,"Segoe UI",sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#8291a0;vertical-align:3px}
.doc-faq{margin:0 0 28px}.doc-faq dt{margin:18px 0 6px;font-weight:600;color:var(--site-text,#e9eef1)}.doc-faq dd{margin:0;line-height:1.65;opacity:.85}
.how-it-works{padding:64px 5vw 8px;background:#030a12;font-family:var(--site-font);color:var(--site-text-2)}.how-it-works h2{max-width:1280px;margin:0 auto 22px;color:var(--site-text);font:600 28px/1.1 var(--site-display);letter-spacing:-.02em}.how-it-works ol{max-width:1280px;margin:0 auto;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;counter-reset:step}.how-it-works li{counter-increment:step;padding:18px 20px;border:1px solid #1d2a37;border-radius:12px;background:#07111b;display:flex;flex-direction:column;gap:6px;line-height:1.55}.how-it-works li::before{content:counter(step);font:600 12px/1 ui-monospace,monospace;color:#6fd6e8}.how-it-works strong{color:var(--site-text);font-size:16px}.how-it-works p{max-width:1280px;margin:16px auto 0;font-size:14px}.how-it-works a{color:#6fd6e8}