:root { --ink:#14232b; --paper:#f7f7f2; --accent:#e7773f; --soft:#dce7e5; --muted:#51616a; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font:16px/1.55 Inter,system-ui,sans-serif; }
a { color:inherit; }
.demo-bar { padding:.65rem 1rem; background:#111; color:#fff; text-align:center; font-size:.9rem; }
.demo-bar a { color:#fff; font-weight:800; }
.demo-nav,.demo-wrap { width:min(1120px,calc(100% - 2rem)); margin:auto; }
.demo-nav { min-height:74px; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.demo-nav a { text-decoration:none; }
.demo-brand { font-family:Georgia,serif; font-size:1.3rem; font-weight:800; }
.demo-links { display:flex; gap:1rem; align-items:center; font-size:.95rem; }
.demo-hero { padding:5.5rem 0 4rem; background:linear-gradient(120deg,var(--soft),var(--paper) 58%); }
.demo-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:2.5rem; align-items:center; }
.eyebrow { margin:0 0 .7rem; color:var(--accent); font-size:.82rem; font-weight:900; letter-spacing:.11em; text-transform:uppercase; }
h1,h2,h3 { line-height:1.05; margin:0 0 1rem; }
h1 { max-width:760px; font-size:clamp(2.8rem,7vw,5.3rem); letter-spacing:-.04em; }
h2 { font-size:clamp(2rem,4vw,3.2rem); }
h3 { font-size:1.25rem; }
.lead { max-width:640px; color:var(--muted); font-size:1.2rem; }
.actions { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.5rem; }
.button { display:inline-flex; min-height:44px; align-items:center; justify-content:center; padding:.75rem 1rem; border:1px solid var(--ink); border-radius:4px; background:var(--ink); color:#fff; font-weight:800; text-decoration:none; }
.button.alt { background:transparent; color:var(--ink); }
.demo-card { padding:1.5rem; border:1px solid color-mix(in srgb,var(--ink) 15%,transparent); border-radius:10px; background:rgba(255,255,255,.76); box-shadow:0 18px 42px rgba(20,35,43,.09); }
.demo-section { padding:4.6rem 0; }
.three { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.feature { min-height:170px; padding:1.25rem; border:1px solid color-mix(in srgb,var(--ink) 14%,transparent); border-radius:8px; background:#fff; }
.feature p { color:var(--muted); }
.demo-band { padding:4.6rem 0; background:var(--ink); color:var(--paper); }
.demo-band p { max-width:700px; color:color-mix(in srgb,var(--paper) 76%,transparent); }
.app .demo-band p { color:var(--muted); }
.app .demo-band .eyebrow { color:var(--accent); }
.demo-footer { padding:2rem 0; color:var(--muted); font-size:.94rem; }
.trade { --ink:#18212f; --paper:#fbf8f1; --accent:#d66729; --soft:#e4e9ec; }
.local { --ink:#0b414b; --paper:#f8fffd; --accent:#117f8d; --soft:#d3ece6; }
.maker { --ink:#40233c; --paper:#fffaf5; --accent:#b65c45; --soft:#f3ddd0; }
.maker h1,.maker .demo-brand,.publishing h1,.publishing .demo-brand { font-family:Georgia,serif; letter-spacing:-.02em; }
.professional { --ink:#263044; --paper:#f6f7fa; --accent:#6c7893; --soft:#e2e6ef; }
.professional .demo-hero { background:var(--paper); border-bottom:1px solid #d5d9e1; }
.app { --ink:#f4f7ff; --paper:#10162a; --accent:#7ae2b8; --soft:#1d2947; --muted:#c0cadf; background:var(--paper); color:var(--ink); }
.app .demo-nav,.app .demo-hero { background:#10162a; }
.app .demo-hero { background:radial-gradient(circle at 78% 20%,#233c62,transparent 33%),#10162a; }
.app .demo-card,.app .feature { background:#18213a; border-color:#334360; box-shadow:none; }
.app .demo-band { background:#0a0e1b; color:var(--ink); }
.app .button { background:var(--accent); border-color:var(--accent); color:#10162a; }
.app .button.alt { background:transparent; color:var(--ink); border-color:#7685a4; }
.publishing { --ink:#153747; --paper:#f9f5ed; --accent:#be694d; --soft:#d7e7e8; }
.gallery { padding:4rem 0; }
.gallery-list { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
.gallery-item { display:block; min-height:190px; padding:1.5rem; border:1px solid #cad4d3; border-radius:10px; background:#fff; text-decoration:none; }
.gallery-item:hover { transform:translateY(-2px); box-shadow:0 12px 30px rgba(20,35,43,.1); }
@media (max-width:760px) { .demo-nav { padding:1rem 0; align-items:flex-start; flex-direction:column; } .demo-links { width:100%; overflow:auto; } .demo-grid,.three,.gallery-list { grid-template-columns:1fr; } .demo-hero,.demo-section,.demo-band { padding:3.5rem 0; } }

/* Shared concept presentation: each existing palette retains its own character. */
:focus-visible{outline:3px solid currentColor;outline-offset:5px}
.skip-link{position:fixed;top:-6rem;left:1rem;z-index:40;padding:.8rem 1rem;background:#111;color:#fff}.skip-link:focus{top:1rem}
.demo-links{flex-wrap:wrap}.demo-links a{display:inline-flex;min-height:44px;align-items:center}
.demo-hero{background:var(--soft);border-block:1px solid var(--ink)}
.demo-hero .eyebrow,.gallery .eyebrow,.demo-section .eyebrow{color:var(--ink)}
.demo-card{border:1px solid var(--ink);border-radius:3px;box-shadow:8px 8px 0 var(--accent);background:var(--paper);padding:2rem}
.demo-card h2{font-size:2rem}.feature{border-radius:3px;border-top:5px solid var(--accent);min-height:0}
.demo-band{border-left:10px solid var(--accent)}
.gallery-item{position:relative;border-radius:3px;border-top:6px solid var(--accent);background:var(--paper);color:var(--ink)}
.gallery-item.app{background:#10162a;color:#f4f7ff}.gallery-item.app .eyebrow{color:#7ae2b8}
.gallery-item h2{font-size:2rem}.gallery-item::after{content:'↗';position:absolute;right:1rem;bottom:1rem;font-size:1.3rem}
.demo-footer{border-top:1px solid var(--soft)}
@media(max-width:760px){.demo-links{overflow:visible;gap:.2rem 1rem}.demo-card{padding:1.5rem}.demo-grid{min-width:0}.demo-grid>*{min-width:0}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}.gallery-item:hover{transform:none}}