/* Shared by the hand-written pages (index, compare, known-issues). Help, FAQ and Legal use pages.css from Tools/HelpBuilder. */
:root{
  --bg:#F7F5F0; --bg2:#EFECE5; --surface:#FFFFFF; --surface2:#F3F1EC;
  --ink:#16161A; --ink2:#55555D; --ink3:#8C8B92;
  --line:rgba(22,22,26,.10); --line2:rgba(22,22,26,.16); --field:rgba(22,22,26,.05);
  --accent:#0A64D6; --accentInk:#0A64D6; --accentSoft:rgba(10,100,214,.10);
  --kw:#AD3DA4; --typ:#3F6E74; --str:#C41A16; --com:#8A8F96;
  --ai:linear-gradient(90deg,#FF9F0A,#FF375F,#BF5AF2,#0A84FF);
  --glass:rgba(255,255,255,.66);
  --glassEdge:0 0 0 .5px rgba(0,0,0,.08),0 8px 28px -8px rgba(30,25,20,.14),inset 0 1px 0 rgba(255,255,255,.9);
  --shot:0 0 0 .5px rgba(0,0,0,.12),0 40px 90px -30px rgba(40,30,20,.30),0 14px 30px -14px rgba(40,30,20,.18);
  --glowA:#F3D7C2; --glowB:#C9D8F2; --glowC:#DCE8D6;
  --grain:.35;
  --display:"Instrument Serif","New York",ui-serif,Georgia,serif;
  --prose:ui-serif,"New York","Newsreader","Iowan Old Style",Georgia,serif;
  --ui:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Inter,system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#0C0C0E; --bg2:#121215; --surface:#17171B; --surface2:#1E1E23;
  --ink:#F3F2EE; --ink2:#A6A5A1; --ink3:#6E6D6B;
  --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.15); --field:rgba(255,255,255,.07);
  --accent:#0A64D6; --accentInk:#5B9DFF; --accentSoft:rgba(77,148,255,.16);
  --kw:#FF7AB2; --typ:#78C2B3; --str:#D9C97C; --com:#7F8C98;
  --glass:rgba(30,30,36,.62);
  --glassEdge:0 0 0 .5px rgba(255,255,255,.12),0 8px 28px -8px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.07);
  --shot:0 0 0 .5px rgba(255,255,255,.12),0 40px 90px -30px rgba(0,0,0,.8),0 14px 30px -14px rgba(0,0,0,.6);
  --glowA:#3B2A22; --glowB:#1D2A44; --glowC:#1D2C22;
  --grain:.5;
  color-scheme:dark;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0C0C0E; --bg2:#121215; --surface:#17171B; --surface2:#1E1E23;
    --ink:#F3F2EE; --ink2:#A6A5A1; --ink3:#6E6D6B;
    --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.15); --field:rgba(255,255,255,.07);
    --accent:#0A64D6; --accentInk:#5B9DFF; --accentSoft:rgba(77,148,255,.16);
    --kw:#FF7AB2; --typ:#78C2B3; --str:#D9C97C; --com:#7F8C98;
    --glass:rgba(30,30,36,.62);
    --glassEdge:0 0 0 .5px rgba(255,255,255,.12),0 8px 28px -8px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.07);
    --shot:0 0 0 .5px rgba(255,255,255,.12),0 40px 90px -30px rgba(0,0,0,.8),0 14px 30px -14px rgba(0,0,0,.6);
    --glowA:#3B2A22; --glowB:#1D2A44; --glowC:#1D2C22;
    --grain:.5;
    color-scheme:dark;
  }
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font:16px/1.6 var(--ui);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:var(--accentInk);text-decoration:none}
::selection{background:var(--accentSoft)}
code{font:.86em var(--mono);background:var(--field);padding:1px 6px;border-radius:6px}
kbd{font:600 .82em var(--ui);padding:2px 8px;border-radius:7px;background:var(--surface);box-shadow:0 0 0 .5px var(--line2),0 1px 0 var(--line2);color:var(--ink);white-space:nowrap}
.wrap{max-width:1200px;margin:0 auto;padding:0 28px}
.narrow{max-width:880px}
.glass{background:var(--glass);-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);box-shadow:var(--glassEdge)}
.ai-text{background:var(--ai);-webkit-background-clip:text;background-clip:text;color:transparent}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h1,h2,h3{text-wrap:balance}
.display{font-family:var(--display);font-weight:400;letter-spacing:-.02em;line-height:.98}
.display em{font-style:italic}

/* Grain over the whole page: keeps large flat areas from looking digital. */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:200;opacity:var(--grain);mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Nav */
.nav{position:sticky;top:14px;z-index:60;display:flex;justify-content:space-between;align-items:center;gap:12px;max-width:1200px;margin:14px auto 0;padding:0 14px;transition:transform .4s var(--ease)}
.cap{display:flex;align-items:center;gap:2px;height:46px;padding:4px;border-radius:999px}
.brand{display:flex;align-items:center;gap:10px;padding:0 14px 0 6px;font:650 15px var(--ui);color:var(--ink);letter-spacing:-.01em}
.brand img{width:30px;height:30px;border-radius:8px}
.cap a.link{position:relative;padding:0 14px;height:38px;display:flex;align-items:center;border-radius:999px;font-size:14px;color:var(--ink);transition:background .25s var(--ease)}
.cap a.link:hover,.cap a.link[aria-current]{background:var(--field)}
.theme-btn{display:none;width:38px;height:38px;border:0;border-radius:50%;background:transparent;color:var(--ink);cursor:pointer;place-items:center;transition:background .25s var(--ease),transform .5s var(--spring)}
.js .theme-btn{display:grid}
.theme-btn:hover{background:var(--field)}
.theme-btn:active{transform:rotate(-30deg) scale(.92)}
.theme-btn svg{width:18px;height:18px}
.theme-btn .sun{display:none}
[data-resolved="dark"] .theme-btn .sun{display:block}
[data-resolved="dark"] .theme-btn .moon{display:none}
@media (max-width:860px){.nav .hide-s{display:none!important}}

/* Buttons */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;height:38px;padding:0 17px;border-radius:999px;font:600 14px var(--ui);border:0;cursor:pointer;color:var(--ink);white-space:nowrap;transition:transform .35s var(--spring),background .25s,box-shadow .25s,filter .25s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn svg{width:17px;height:17px;flex:none}
.btn-ink{background:var(--ink);color:var(--bg)}
.btn-ink:hover{box-shadow:0 10px 30px -10px rgba(0,0,0,.45)}
.btn-accent{background:#0A64D6;color:#fff}
.btn-accent:hover{filter:brightness(1.08);box-shadow:0 12px 30px -12px rgba(10,100,214,.7)}
.btn-field{background:var(--field);color:var(--ink);box-shadow:inset 0 0 0 .5px var(--line)}
.btn-field:hover{background:var(--surface)}
.btn-lg{height:50px;padding:0 24px;font-size:15.5px}
.btn-xl{height:58px;padding:0 26px 0 22px;font-size:16px;gap:12px}
.btn-xl .lbl{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15}
.btn-xl .lbl small{font:500 12px var(--ui);opacity:.68}
.arrow{transition:transform .35s var(--spring)}
a:hover>.arrow,.btn:hover .arrow{transform:translateX(3px)}

/* Page heroes run under the floating nav. */
.hero{margin-top:-60px}

/* Section scaffolding */
section{position:relative;padding:136px 0}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font:600 12.5px var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);margin-bottom:18px}
.eyebrow::before{content:"";width:18px;height:1px;background:currentColor;opacity:.6}
.head{max-width:760px;margin-bottom:64px}
.head.center{margin-left:auto;margin-right:auto;text-align:center}
.head.center .eyebrow::after{content:"";width:18px;height:1px;background:currentColor;opacity:.6}
.head h2{font-family:var(--display);font-weight:400;font-size:clamp(42px,6vw,76px);line-height:1;letter-spacing:-.02em;margin-bottom:20px}
.head h2 em{font-style:italic;color:var(--ink2)}
.head p{font:clamp(17px,1.8vw,20px)/1.6 var(--ui);color:var(--ink2);text-wrap:pretty}
.band{background:var(--bg2)}
.rule-top{border-top:1px solid var(--line)}

/* Media frames */
.frame{position:relative;border-radius:28px;padding:clamp(12px,2.2vw,28px);overflow:hidden;isolation:isolate;background:var(--surface2)}
.frame::before{content:"";position:absolute;inset:-30%;z-index:-1;background:radial-gradient(closest-side at 22% 28%,var(--glowA),transparent),radial-gradient(closest-side at 78% 30%,var(--glowB),transparent),radial-gradient(closest-side at 50% 92%,var(--glowC),transparent);filter:blur(10px);animation:drift 24s var(--ease) infinite alternate}
.frame img,.frame .shot{border-radius:clamp(10px,1.4vw,16px);box-shadow:var(--shot)}
.shot{position:relative;overflow:hidden;background:var(--surface)}
@keyframes drift{0%{transform:translate3d(0,0,0) rotate(0)}50%{transform:translate3d(3%,-2%,0) rotate(6deg)}100%{transform:translate3d(-3%,2%,0) rotate(-4deg)}}

/* Reveal on scroll; children of .stagger cascade. */
.js .rv{opacity:0;transform:translateY(26px);filter:blur(6px);transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease);transition-delay:var(--d,0s)}
.js .rv.in{opacity:1;transform:none;filter:none}
.js .rv-scale{opacity:0;transform:translateY(40px) scale(.96);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease);transition-delay:var(--d,0s)}
.js .rv-scale.in{opacity:1;transform:none}

/* Footer */
footer{position:relative;border-top:1px solid var(--line);padding:56px 0 64px;font-size:14px;color:var(--ink2)}
footer .wrap{display:grid;grid-template-columns:1.2fr 2fr;gap:40px}
footer .who{display:grid;gap:16px;align-content:start}
footer .who .brand{padding:0}
footer .cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
footer h4{font:600 12px var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin-bottom:12px}
footer ul{list-style:none;display:grid;gap:8px}
footer a{color:var(--ink2);transition:color .2s}
footer a:hover{color:var(--ink)}
.seg{display:inline-flex;padding:3px;border-radius:999px;background:var(--field);gap:2px;width:max-content}
.seg button{height:30px;padding:0 13px;border:0;border-radius:999px;background:transparent;color:var(--ink2);font:500 13px var(--ui);cursor:pointer;transition:background .25s var(--ease),color .25s}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 0 0 .5px var(--line2),0 2px 6px -2px rgba(0,0,0,.18)}
html:not(.js) .seg{display:none}
@media (max-width:760px){footer .wrap{grid-template-columns:1fr}footer .cols{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Theme switch: the new theme grows from the button. */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-new(root){z-index:2}

/* Accessibility */
:focus-visible{outline:3px solid var(--accentInk);outline-offset:3px;border-radius:8px}
.skip{position:absolute;left:12px;top:-60px;z-index:300;padding:10px 16px;border-radius:10px;background:#0A64D6;color:#fff;font-weight:600}
.skip:focus{top:12px}
main:focus{outline:none}
main p a:not(.btn),main li a:not(.btn),main td a:not(.btn){text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}

@media (max-width:600px){
  .wrap{padding:0 16px}
  section{padding:96px 0}
  .nav{padding:0 8px;top:10px}
  .cap a.link{padding:0 10px}
  .head{margin-bottom:44px}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .js .rv,.js .rv-scale{opacity:1;transform:none;filter:none}
}
@media print{.nav,body::after{display:none}}