/* Sudoku Unbound public pages — same palette as the app (DESIGN_SYSTEM.md §2, SU-DEC-005/013). */
:root{color-scheme:light dark;--canvas:#f6f2e9;--tint:#eee7d7;--sage:#e7ebe2;--surface:#fffcf6;--text:#111318;--text2:#4a4f5c;--accent:#0b4f4c;--on-accent:#ffffff;--soft:#4f9a90;--stroke:rgba(17,19,24,.12);--outline:#6b7080;font:16px/1.65 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",sans-serif;background:var(--canvas);color:var(--text)}
@media(prefers-color-scheme:dark){:root{--canvas:#101413;--tint:#18201e;--sage:#1d1c17;--surface:#1a201f;--text:#f4f5f8;--text2:#b4b9c6;--accent:#72d3c6;--on-accent:#04211e;--soft:#3e8c82;--stroke:rgba(255,255,255,.14);--outline:#8a90a2}}
@media(prefers-contrast:more){:root{--canvas:#fffdf8;--surface:#fff;--text:#000;--text2:#30343e;--accent:#063735;--stroke:rgba(0,0,0,.55)}}
@media(prefers-contrast:more) and (prefers-color-scheme:dark){:root{--canvas:#000;--surface:#070a0a;--text:#fff;--text2:#d5d9e2;--accent:#a9ede3;--stroke:rgba(255,255,255,.65)}}
*{box-sizing:border-box}body{margin:0;min-height:100vh}a{color:var(--accent)}a:focus-visible{outline:3px solid var(--accent);outline-offset:4px;border-radius:4px}
.canvas{position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 15% 0,var(--tint),transparent 55%),radial-gradient(ellipse at 95% 70%,var(--sage),transparent 50%),var(--canvas)}
.shell{max-width:1040px;margin:auto;padding:26px 28px}.top{display:flex;justify-content:space-between;align-items:center;gap:22px;flex-wrap:wrap}
.brand{display:inline-flex;align-items:center;gap:12px;font-weight:750;font-size:1.12rem;letter-spacing:-.02em;text-decoration:none;color:var(--text)}
.brand img{width:40px;height:40px;border-radius:9px;box-shadow:0 1px 0 var(--stroke),0 4px 14px rgba(0,0,0,.08)}
.top nav{display:flex;flex-wrap:wrap;gap:18px}.top nav a,.locale a{text-decoration:none;color:var(--text2);font-size:.91rem}.top nav a:hover,.locale a:hover{color:var(--text)}
.top nav [aria-current],.locale [aria-current]{color:var(--text);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:4px}
.locale{display:flex;justify-content:flex-end;gap:14px;margin-top:26px}.locale a{font-size:.78rem}
.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:.75rem;color:var(--accent);font-weight:700}
main{max-width:820px;padding:68px 0 100px}
h1{font-family:ui-rounded,"SF Pro Rounded",-apple-system,sans-serif;font-size:clamp(2.7rem,6.5vw,5.3rem);letter-spacing:-.04em;line-height:1.04;margin:16px 0 28px;font-weight:760}
h1 em{font-style:normal;color:var(--accent)}h2{font-family:ui-rounded,"SF Pro Rounded",-apple-system,sans-serif;letter-spacing:-.02em}
.tag{font-size:clamp(1.25rem,2.2vw,1.75rem);font-weight:550;letter-spacing:-.015em}main>p:not(.eyebrow){color:var(--text2);max-width:690px}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:40px}
.card,.notice{border:.5px solid var(--stroke);border-radius:22px;background:var(--surface);padding:22px 23px;margin:16px 0;color:var(--text)}
.card p{margin:0}.symbol{display:block;width:22px;height:22px;border-radius:6px;background:linear-gradient(45deg,var(--soft),var(--accent));margin-bottom:13px;font-size:0;color:transparent}
.notice{border:1px dashed var(--outline);color:var(--text2)}
.button{display:inline-block;background:var(--accent);color:var(--on-accent);text-decoration:none;border-radius:14px;padding:12px 21px;margin-top:14px;font-weight:700}
footer{border-top:.5px solid var(--stroke);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:25px 0;color:var(--text2);font-size:.82rem}
@media(max-width:700px){.shell{padding:20px 16px}.cards{grid-template-columns:1fr}main{padding:48px 0 70px}.top{display:block}.top nav{margin-top:16px}.locale{justify-content:flex-start}}
@media(prefers-reduced-motion:no-preference){a{transition:color .15s ease}}
@media(forced-colors:active){.canvas{display:none}.card,.notice{border:1px solid CanvasText;background:Canvas;color:CanvasText}.symbol{background:CanvasText}}
/* Document pages (guide, support, privacy, terms). Same tokens; only what long-form text needs. */
:root{--warn:#9a4a12}
@media(prefers-color-scheme:dark){:root{--warn:#f0a46b}}
.skip{position:absolute;left:16px;top:-60px;background:var(--accent);color:var(--on-accent);padding:10px 16px;border-radius:10px;z-index:2;font-weight:700;text-decoration:none}.skip:focus{top:12px}
.doc main{padding-top:48px}
.doc h1{font-size:clamp(2.2rem,5.5vw,3.6rem);overflow-wrap:break-word;hyphens:auto}
.doc h2{font-size:1.45rem;line-height:1.25;margin:48px 0 12px;scroll-margin-top:16px}
.doc h3{font-size:1.08rem;line-height:1.35;margin:28px 0 6px}
.doc section p,.doc section li{max-width:690px}
.doc ul,.doc ol{padding-left:1.35em}.doc li{margin:6px 0}
.meta{font-size:.9rem;color:var(--text2)}
.toc{border:.5px solid var(--stroke);border-radius:22px;background:var(--surface);padding:18px 23px;margin:28px 0}
.toc ol{margin:8px 0 0;columns:2 260px;column-gap:28px}.toc li{break-inside:avoid;margin:4px 0}
.steps{list-style:none;padding-left:0!important;counter-reset:step}
.steps>li{counter-increment:step;position:relative;padding-left:44px;margin:16px 0}
.steps>li::before{content:counter(step);position:absolute;left:0;top:-1px;width:30px;height:30px;border-radius:50%;background:var(--accent);color:var(--on-accent);font-weight:700;font-size:.9rem;display:flex;align-items:center;justify-content:center}
.callout{border:.5px solid var(--stroke);border-left:4px solid var(--accent);border-radius:14px;background:var(--surface);padding:12px 18px;margin:14px 0;max-width:690px}
.callout p{margin:0}.callout>b:first-child{display:block;margin-bottom:2px}
.callout.warn{border-left-color:var(--warn)}.callout.tip{border-left-color:var(--soft)}
.notice b{color:var(--text)}
@media(forced-colors:active){.callout,.toc{border:1px solid CanvasText;background:Canvas}.steps>li::before{border:1px solid CanvasText;background:Canvas;color:CanvasText}}