/* Plot Twist: Sudoku — app pages. Paper and plum, taken from the app icon. Light by default, dark when the device is. */
:root{
  --paper:#FDFBFB; --card:#FFFFFF; --ink:#1F1620; --muted:#6A5C68; --line:#E3D8DF;
  --plum:#6B4A68; --plum-2:#8A5C86; --tint:#D9B8D2; --tint-soft:#F3E9F1; --pencil:#E8B730;
  --display:"Archivo","Avenir Next","Helvetica Neue",sans-serif;
  --mono:"JetBrains Mono","SF Mono",ui-monospace,Menlo,monospace;
  --body:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root{
  --paper:#141015; --card:#1D171E; --ink:#F4EEF3; --muted:#B3A4B0; --line:#342A35;
  --plum:#D9B8D2; --plum-2:#C79BC1; --tint:#4A3448; --tint-soft:#251C26; color-scheme:dark }}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.65 var(--body);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display);font-stretch:112%;margin:0;line-height:1.02;letter-spacing:-.015em;text-wrap:balance}
p{margin:0}
a{color:var(--plum)}
:focus-visible{outline:2px solid var(--plum);outline-offset:3px;border-radius:4px}
.wrap{max-width:1080px;margin:0 auto;padding-inline:22px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Studio bar */
.studio{border-bottom:1px solid var(--line);background:var(--paper)}
.studio .wrap{display:flex;align-items:center;gap:18px;min-height:56px}
.studio a{text-decoration:none;color:var(--ink)}
.crumb{font:500 14px/1 var(--mono);margin-right:auto;display:flex;align-items:center;gap:8px;min-width:0}
.crumb b{font-weight:700}
.crumb .dot{color:#E25BBE}
.crumb .sep{color:var(--muted)}
.studio nav{display:flex;gap:20px}
.studio nav a{font:500 14px/1 var(--mono);color:var(--muted)}
.studio nav a:hover,.studio nav a[aria-current]{color:var(--ink)}
@media (max-width:480px){.crumb .home{display:none}.crumb .sep{display:none}}

/* Hero */
.hero{padding-block:clamp(48px,8vw,96px) clamp(48px,7vw,84px)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,6vw,72px);align-items:center}
.app-id{display:flex;align-items:center;gap:18px}
.app-id img{width:84px;height:84px;border-radius:22.5%;box-shadow:0 10px 26px rgba(60,30,60,.18),0 0 0 1px var(--line)}
.app-id span{font:500 13px/1.4 var(--mono);color:var(--muted)}
.hero h1{font-size:clamp(46px,7vw,86px);font-weight:900;margin-top:26px}
.hero h1 em{font-style:normal;color:var(--plum)}
.hero .lede{font-size:clamp(18px,2vw,21px);color:var(--muted);max-width:40ch;margin-top:22px}
.get{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:30px}
.store{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:var(--paper);text-decoration:none;font:600 16px/1 var(--body);padding:14px 20px;border-radius:12px}
.store svg{width:18px;height:18px}
.store.soon{background:var(--tint-soft);color:var(--plum);border:1px dashed var(--plum-2)}
.get small{font:500 13px/1 var(--mono);color:var(--muted)}
@media (max-width:860px){.hero .wrap{grid-template-columns:1fr}}

/* Try-it board. Colors come from the app's own theme palettes (ThemePalette+Themes.swift),
   set as --t-* variables by the script. Tints follow ThemePalette's rules. */
.demo{--t-page:#F3E6EA;--t-board:#FFFBFB;--t-ink:#6A3560;--t-onink:#FFFFFF;--t-hl:#B0509E;--t-given:#241B21;--t-hint:#2F8F83;--t-err:#B3261E;--t-frame:#B0509E;--t-scheme:light;
  color-scheme:var(--t-scheme);display:flex;flex-direction:column;gap:14px;width:min(100%,430px);margin-inline:auto}
.screen{background:var(--t-page);border-radius:26px;padding:16px;display:flex;flex-direction:column;gap:12px;box-shadow:0 24px 60px rgba(60,30,60,.18),0 0 0 1px rgba(0,0,0,.06);transition:background .3s}
.board{display:grid;grid-template-columns:repeat(9,1fr);width:100%;aspect-ratio:1;background:var(--t-board);border:3px solid var(--t-frame);border-radius:6px;overflow:hidden;transition:background .3s,border-color .3s}
.board button{all:unset;box-sizing:border-box;display:grid;place-items:center;font:500 clamp(16px,3.6vw,23px)/1 ui-rounded,"SF Pro Rounded",var(--body);color:var(--t-ink);
  border-right:1px solid color-mix(in srgb,var(--t-ink) 30%,transparent);border-bottom:1px solid color-mix(in srgb,var(--t-ink) 30%,transparent);cursor:default;transition:background .2s,color .3s}
.board button.g{cursor:pointer;color:var(--t-given);font-weight:600}
.board button:nth-child(9n){border-right:0}
.board button:nth-child(9n+3),.board button:nth-child(9n+6){border-right:2px solid var(--t-ink)}
.board button:nth-child(n+19):nth-child(-n+27),.board button:nth-child(n+46):nth-child(-n+54){border-bottom:2px solid var(--t-ink)}
.board button:nth-child(n+73){border-bottom:0}
.board button.house{background:color-mix(in srgb,var(--t-hl) 10%,transparent)}
.board button.match{background:color-mix(in srgb,var(--t-hl) 40%,transparent)}
.board button.sel{background:color-mix(in srgb,var(--t-hl) 45%,transparent);box-shadow:inset 0 0 0 2px var(--t-hl)}
.board button.hpat{background:color-mix(in srgb,var(--t-hint) 20%,transparent)}
.board button.htarget{background:color-mix(in srgb,var(--t-hint) 42%,transparent)}
.board button.placed{animation:pop .35s ease-out}
@keyframes pop{0%{transform:scale(.6);opacity:0}100%{transform:none;opacity:1}}
.board button:focus-visible{outline:2px solid var(--t-hl);outline-offset:-3px}
.tools{display:flex;gap:10px}
.tool{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:1;padding:11px 12px;border-radius:14px;cursor:pointer;
  font:600 15px/1 var(--body);color:var(--t-ink);background:var(--t-board);border:1px solid color-mix(in srgb,var(--t-ink) 35%,transparent);transition:background .2s,color .2s}
.tool svg{width:17px;height:17px}
.tool:hover{border-color:var(--t-ink)}
.tool[aria-pressed="true"]{background:var(--t-ink);color:var(--t-onink);border-color:var(--t-ink)}
.tool:focus-visible{outline:2px solid var(--t-hl);outline-offset:2px}
.hintcard{background:var(--t-board);border-radius:16px;padding:14px 16px;border:1px solid color-mix(in srgb,var(--t-hint) 45%,transparent);display:flex;flex-direction:column;gap:8px}
.hintcard[hidden]{display:none}
.hc-top{display:flex;align-items:center;gap:8px;color:var(--t-hint);font:700 16px/1.2 var(--body)}
.hc-top svg{width:16px;height:16px;flex:none}
.hc-top .step{margin-left:auto;font:500 12.5px/1 var(--body);color:color-mix(in srgb,var(--t-given) 60%,transparent)}
.hc-msg{color:var(--t-given);font-size:15.5px;line-height:1.5;min-height:3em}
.hc-nav{display:flex;gap:8px;justify-content:flex-end}
.hc-nav button{all:unset;box-sizing:border-box;cursor:pointer;font:600 14px/1 var(--body);padding:9px 14px;border-radius:10px;color:var(--t-ink);border:1px solid color-mix(in srgb,var(--t-ink) 35%,transparent)}
.hc-nav button.primary{background:var(--t-ink);color:var(--t-onink);border-color:var(--t-ink)}
.hc-nav button[disabled]{opacity:.35;cursor:default}
.hc-nav button:focus-visible{outline:2px solid var(--t-hl);outline-offset:2px}
.demo-cap{font:500 13px/1.45 var(--mono);color:var(--muted);text-align:center}
/* Theme picker */
.picker{display:flex;flex-direction:column;gap:10px}
.picker-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.picker-head span{font:500 13px/1 var(--mono);color:var(--muted)}
.modes{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:3px;background:var(--card)}
.modes button{all:unset;cursor:pointer;font:600 12.5px/1 var(--body);color:var(--muted);padding:6px 11px;border-radius:999px}
.modes button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.modes button:focus-visible{outline:2px solid var(--plum);outline-offset:1px}
.swatches{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
@media (max-width:520px){.swatches{grid-template-columns:repeat(5,minmax(0,1fr))}}
.sw{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 1px 7px;min-width:0;border-radius:12px;border:1px solid transparent}
.sw:hover{background:var(--card);border-color:var(--line)}
.sw[aria-checked="true"]{background:var(--card);border-color:var(--plum)}
.sw:focus-visible{outline:2px solid var(--plum);outline-offset:1px}
.chip{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.chip i{width:16px;height:16px;border-radius:50%;box-shadow:5px 5px 0 -1px var(--c2)}
.sw b{font:600 11px/1.15 var(--body);letter-spacing:-.01em;color:var(--ink);text-align:center}
.sw small{font:600 9.5px/1 var(--mono);color:var(--plum);letter-spacing:.04em;text-transform:uppercase;min-height:10px}
.picker p{font-size:13.5px;color:var(--muted)}

/* Sections */
.band{border-top:1px solid var(--line);padding-block:clamp(56px,8vw,96px)}
.label{font:500 13px/1 var(--mono);color:var(--muted)}
.label::before{content:"// "}
.band h2{font-size:clamp(32px,4.8vw,54px);font-weight:900;margin-top:16px}
.band h2 em{font-style:normal;color:var(--plum)}
.twist p{font-size:clamp(18px,2vw,21px);max-width:58ch;margin-top:20px;color:var(--muted)}
.twist p:first-of-type{color:var(--ink)}
.features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:40px}
.features article{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px 26px 28px;display:flex;flex-direction:column;gap:12px}
.features h3{font-size:22px;font-weight:800}
.features p{color:var(--muted)}
.features p+p{margin-top:4px}
@media (max-width:760px){.features{grid-template-columns:1fr}}
.list{columns:2;column-gap:40px;margin:32px 0 0;padding:0;list-style:none}
.list li{break-inside:avoid;padding:12px 0 12px 28px;border-top:1px solid var(--line);position:relative}
.list li::before{content:"";position:absolute;left:4px;top:21px;width:10px;height:10px;border-radius:3px;background:var(--tint);box-shadow:inset 0 0 0 2px var(--plum)}
@media (max-width:760px){.list{columns:1}}
.free{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,64px);align-items:start}
.free p{color:var(--muted)}
.free p+p{margin-top:14px}
.closer{font:800 clamp(26px,3.6vw,38px)/1.15 var(--display);font-stretch:112%;margin-top:40px}
@media (max-width:760px){.free{grid-template-columns:1fr}}

/* Support */
.faq{margin-top:32px;display:grid;gap:10px}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:4px 20px}
.faq summary{cursor:pointer;list-style:none;padding:16px 0;font:700 18px/1.3 var(--display);font-stretch:108%;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:500 22px/1 var(--mono);color:var(--plum)}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--muted);padding-bottom:18px}
.faq details p+p{margin-top:-6px}
.faq b{color:var(--ink);font-weight:600}
form{display:grid;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px;margin-top:28px;max-width:720px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
label{display:flex;flex-direction:column;gap:7px;font:500 14px/1.2 var(--body);color:var(--muted);min-width:0}
input,textarea{font:400 16px/1.4 var(--body);color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:12px 13px;width:100%}
input:focus,textarea:focus{outline:none;border-color:var(--plum);box-shadow:0 0 0 3px color-mix(in srgb,var(--plum) 22%,transparent)}
textarea{min-height:140px;resize:vertical}
.hp{position:absolute;left:-9999px}
.send{justify-self:end;font:700 16px/1 var(--body);color:var(--paper);background:var(--plum);border:0;border-radius:12px;padding:14px 22px;cursor:pointer}
.send:hover{filter:brightness(1.08)}
.send[disabled]{opacity:.6;cursor:wait}
.msg{border:1px solid var(--line);background:var(--tint-soft);border-radius:10px;padding:12px 14px;font-size:15px}
.msg.err{border-color:#C0392B}
.hint{font-size:14px;color:var(--muted)}
@media (max-width:480px){.two{grid-template-columns:1fr}}

footer{border-top:1px solid var(--line);padding-block:24px 32px;font:500 13px/1.5 var(--mono);color:var(--muted)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px}
footer nav{display:flex;gap:18px}
footer a{color:var(--muted);text-decoration:none}
footer a:hover{color:var(--ink)}