body[data-site="pixmosa"] { --bg:#faf7f2; --card:#fff; --ink:#163e3a; --muted:#57534e; --line:#ddd6cc; --accent:#b8482d; --ok:#276749; --warn:#925020; --bad:#a42626; color-scheme:light; background:var(--bg); }
body[data-site="pixmosa"] .wrap { max-width:1160px; padding-left:24px; padding-right:24px; }
body[data-site="pixmosa"] header.site .brand img { display:block; width:180px; height:60px; object-fit:contain; }
body[data-site="pixmosa"] header.site nav { display:flex; gap:24px; flex-wrap:wrap; }
body[data-site="pixmosa"] header.site nav a { margin:0; font-size:.9rem; }
body[data-site="pixmosa"] main { padding-top:40px; }
body[data-site="pixmosa"] .btn { min-height:46px; display:inline-flex; align-items:center; justify-content:center; background:var(--accent); font-weight:600; border-radius:10px; }
body[data-site="pixmosa"] :is(a,button,input,select,summary,canvas):focus-visible { outline:3px solid var(--ink); outline-offset:4px; }
body[data-site="pixmosa"] .mt-fields select { padding:10px; min-height:46px; background:#fff; border:1px solid var(--line); border-radius:8px; }
body[data-site="pixmosa"] .mt-steps { grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); }
body[data-site="pixmosa"] .mt-preview.empty { display:none; }
body[data-site="pixmosa"] .mt-advanced { margin-top:20px; border-top:1px solid var(--line); padding-top:16px; }
body[data-site="pixmosa"] .mt-advanced summary { cursor:pointer; font-weight:600; padding:8px 0; }
body[data-site="pixmosa"] .mt-advanced .mt-fields { margin-top:16px; }
body[data-site="pixmosa"] .mt-error { color:var(--bad); background:#fff0ed; border-left:3px solid var(--bad); padding:12px; }
body[data-site="pixmosa"] .mt-loupe { overflow:auto; width:min(720px,calc(100% - 24px)); max-height:calc(100dvh - 24px); box-sizing:border-box; padding:16px; border:1px solid var(--line); border-radius:16px; color:var(--ink); background:var(--card); }
body[data-site="pixmosa"] .mt-loupe::backdrop { background:#102b28b3; }
body[data-site="pixmosa"] .mt-loupe-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
body[data-site="pixmosa"] .mt-loupe-heading h3 { margin:0; }
body[data-site="pixmosa"] .mt-loupe canvas { width:100%; max-height:calc(100dvh - 210px); object-fit:contain; }
body[data-site="pixmosa"] .mt-loupe .mt-row { justify-content:center; gap:8px; }
body[data-site="pixmosa"] .mt-loupe .mt-row .btn { padding-inline:12px; }
body[data-site="pixmosa"] .mt-count + .btn { margin-top:12px; }
body[data-site="pixmosa"] progress { width:100%; accent-color:var(--accent); }
body[data-site="pixmosa"] #mosaic-preview { scroll-margin-top:16px; }
body[data-site="pixmosa"] #tool { scroll-margin-top:24px; }
.px-hero { display:grid; grid-template-columns:1.1fr 1fr; gap:64px; align-items:center; padding:12px 0 64px; }
.px-kicker { text-transform:uppercase; letter-spacing:.16em; font-size:.72rem; font-weight:700; color:var(--accent); }
.px-hero h1 { font-size:clamp(2.4rem,4.6vw,4.2rem); line-height:1.08; letter-spacing:-.045em; max-width:12ch; margin:18px 0 24px; font-weight:650; }
.px-hero .lead { font-size:1.1rem; max-width:43ch; }
.px-price { font-size:.84rem; color:var(--muted); margin-top:14px; max-width:45ch; }
.px-proof { display:flex; flex-wrap:wrap; gap:8px 18px; font-size:.8rem; color:var(--muted); margin-top:24px; }
.px-art { margin:0; background:#e4ece6; padding:28px 38px 18px; border-radius:120px 120px 16px 16px; }
.px-art img { width:100%; max-height:490px; object-fit:contain; display:block; filter:drop-shadow(0 12px 12px #163e3a22); }
.px-art figcaption { font-size:.75rem; text-align:center; margin-top:16px; color:var(--muted); }
.px-how { border-block:1px solid var(--line); padding:26px 0; display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-bottom:60px; }
.px-how b { display:block; margin-bottom:8px; }
.px-how p { margin:0; font-size:.9rem; color:var(--muted); }
.px-section { padding-bottom:24px; }
.px-section h2 { font-size:2rem; letter-spacing:-.03em; margin:0 0 12px; }
.px-uses { display:flex; flex-wrap:wrap; gap:10px; padding:0; list-style:none; margin:22px 0 40px; }
.px-uses li { padding:8px 15px; border:1px solid var(--line); border-radius:30px; font-size:.86rem; }
.px-notice { padding:14px 18px; border-radius:10px; background:#e4ece6; color:var(--ink); font-size:.92rem; margin-bottom:24px; }
.px-faq { margin:48px 0; max-width:760px; }
.px-faq details { border-bottom:1px solid var(--line); padding:18px 0; }
.px-faq summary { cursor:pointer; font-weight:600; }
.px-faq p { color:var(--muted); }
@media(max-width:700px) { body[data-site="pixmosa"] .wrap { padding-inline:16px; } body[data-site="pixmosa"] header.site .wrap { flex-wrap:wrap; gap:8px; } body[data-site="pixmosa"] header.site .brand img { width:150px; height:50px; } body[data-site="pixmosa"] header.site nav { gap:14px; } .px-hero { grid-template-columns:1fr; gap:28px; padding-bottom:36px; } .px-hero h1 { max-width:16ch; } .px-art { max-width:440px; padding:20px 30px; margin:auto; } .px-how { grid-template-columns:1fr; gap:20px; margin-bottom:36px; } }