/* Oxly docs — Sauge du soir (dark, default) + Sauge (light). Same tokens as the dashboard. */
:root{
  --bg:#0E1110;--side:#151917;--surface:#212624;--surface-2:#2A302D;--surface-3:#3A423E;
  --line:#363E3A;--line-strong:#58615C;
  --text:#DCE2DE;--text-2:#A1AAA4;--text-3:#8F9993;
  --accent:#5DB880;--accent-hover:#6CCB8E;--accent-ink:#0F1F15;
  --accent-soft:#26382D;--accent-soft-ink:#9BE0B3;--accent-line:#4E8A63;
  --brand:#13B26F;--deep:#2F5A40;--deep-2:#3B6B4D;--deep-ink:#F1F5F2;--deep-text-2:#C7E8D2;
  --peach:#3A322B;--peach-ink:#E8C3A6;--peach-text:#D8C6B8;
  --warn:#453B24;--warn-ink:#E3C98A;--danger:#4F2C25;--danger-ink:#F0B3A4;--danger-line:#C9776A;
  --info:#27363E;--info-ink:#A3CBDF;
  --shadow:0 10px 30px rgba(0,0,0,.35);--overlay:rgba(5,8,7,.6);
  --r-xs:8px;--r-sm:14px;--r-md:20px;--r-lg:28px;--r-pill:999px;
  --f-title:'Fredoka',system-ui,sans-serif;--f-text:'Nunito Sans',system-ui,sans-serif;--f-mono:'JetBrains Mono',ui-monospace,monospace;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#DCDDD5;--side:#E7E7E0;--surface:#F1F0EA;--surface-2:#E4E5DD;--surface-3:#D3D5CC;
  --line:#D6D7CF;--line-strong:#A9ADA3;
  --text:#2A302C;--text-2:#59615B;--text-3:#555D57;
  --accent:#2E6B45;--accent-hover:#275C3B;--accent-ink:#F1F0EA;
  --accent-soft:#D5E3D3;--accent-soft-ink:#1F4A30;--accent-line:#7FA88A;
  --deep:#CFE0CC;--deep-2:#BDD3BA;--deep-ink:#1F2E24;--deep-text-2:#3D4A41;
  --peach:#EEDFD2;--peach-ink:#6B3A1F;--peach-text:#5A3A26;
  --warn:#EDE0BE;--warn-ink:#6A4E0E;--danger:#EED3CB;--danger-ink:#7A2614;--danger-line:#C2533F;
  --info:#D5E3EA;--info-ink:#1F4A60;
  --shadow:0 10px 30px rgba(42,48,44,.12);--overlay:rgba(42,48,44,.35);
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0}
html{scroll-padding-top:90px}
body{background:var(--bg);color:var(--text);font-family:var(--f-text);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--accent-soft-ink)}:root[data-theme="light"] a{color:var(--accent)}
button,input{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--f-title);font-weight:600;margin:0;line-height:1.2}
p{margin:0}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
kbd{font-family:var(--f-mono);font-size:12px;padding:2px 7px;border-radius:6px;background:var(--surface-3);color:var(--text-2)}
.logo{display:inline-flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-family:var(--f-title);font-weight:600;font-size:22px}
.logo small{font-family:var(--f-text);font-size:13px;font-weight:700;color:var(--text-3);padding:2px 10px;border-radius:var(--r-pill);background:var(--surface-2)}

/* ---------- Top bar ---------- */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:16px;padding:14px 24px;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top .grow{flex:1}
.search-btn{display:flex;align-items:center;gap:10px;min-width:280px;min-height:44px;padding:0 10px 0 16px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--surface);color:var(--text-3);cursor:pointer;text-align:left}
.search-btn:hover{border-color:var(--accent-line);color:var(--text-2)}
.search-btn span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.icon-btn{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--text-2);cursor:pointer}
.icon-btn:hover{color:var(--text);border-color:var(--line-strong)}
.menu-btn{display:none}

/* ---------- Layout ---------- */
.layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:32px;max-width:1600px;margin:0 auto;padding:0 24px}
.sidebar{position:sticky;top:73px;align-self:start;max-height:calc(100vh - 73px);overflow:auto;padding:24px 4px 40px 0}
.sidebar h4{font-family:var(--f-text);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin:22px 12px 8px}
.sidebar h4:first-child{margin-top:4px}
.sidebar a{display:flex;align-items:center;gap:10px;padding:6px 12px;border-radius:var(--r-sm);color:var(--text-2);text-decoration:none;font-weight:600;font-size:14px;line-height:1.35}
.sidebar a:hover{background:var(--surface);color:var(--text)}
.sidebar a.on{background:var(--accent-soft);color:var(--accent-soft-ink)}
.sidebar a .soon{margin-left:auto;width:7px;height:7px;border-radius:50%;background:var(--line-strong);flex:none}
.sidebar a.ready .soon{display:none}
.content{padding:24px 0 64px;min-width:0}
/* ---------- Article ---------- */
.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;color:var(--text-3);margin-bottom:8px}
.crumbs .chip{margin-left:6px}
.crumbs a{color:var(--text-2);text-decoration:none}
.article h1{font-size:28px;letter-spacing:-.01em}
.lead{font-size:16px;color:var(--text-2);margin-top:6px;max-width:760px}
.meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:var(--r-pill);background:var(--surface-2);color:var(--text-2);font-size:12px;font-weight:700}
.chip.good{background:var(--accent-soft);color:var(--accent-soft-ink)}
.before{display:flex;gap:12px;align-items:flex-start;max-width:1100px;margin-top:14px;padding:10px 14px;font-size:14px;line-height:1.45;border-radius:var(--r-sm);background:var(--info);color:var(--info-ink)}
.before b{display:block;font-family:var(--f-title);font-weight:600}
.before a{color:inherit;font-weight:800}
.before.state{background:var(--warn);color:var(--warn-ink)}
.article h2{font-size:20px;margin:32px 0 12px}
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.steps li{display:flex;gap:12px;padding:10px 14px;border-radius:var(--r-sm);background:var(--surface);border:1px solid transparent;cursor:pointer;transition:border-color .25s,background .25s}
.steps li:hover{border-color:var(--line)}
.steps li .n{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--surface-2);color:var(--text-2);font-family:var(--f-title);font-weight:600;font-size:13px;transition:background .25s,color .25s}
.steps li b{display:block;font-family:var(--f-title);font-weight:600;font-size:15px;line-height:1.3}
.steps li p{color:var(--text-2);font-size:13.5px;line-height:1.45;margin-top:2px}
.steps li.on{border-color:var(--accent-line);background:var(--accent-soft)}
.steps li.on .n{background:var(--accent);color:var(--accent-ink)}
.steps li.on p{color:var(--text)}
.faq{display:flex;flex-direction:column;gap:6px;max-width:900px}
.faq details{border-radius:var(--r-md);background:var(--surface);padding:0 18px}
.faq summary{cursor:pointer;padding:11px 0;font-size:14.5px;font-weight:700;list-style:none;display:flex;align-items:center;gap:10px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;font-family:var(--f-title);font-size:22px;color:var(--text-3)}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 0 14px;color:var(--text-2);font-size:14px}
/* animation + steps seen together: the steps column takes the height of the animation and scrolls inside */
.howto{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(280px,1fr);gap:20px;margin-top:18px;align-items:stretch}
.howto .scene-wrap{margin-top:0}
.howto .howto-steps{position:relative;min-height:0}
.howto .howto-scroll{position:absolute;inset:0;overflow:auto;padding-right:4px}
.howto h2{margin-top:0}
.soon-box{margin-top:32px;padding:28px;border-radius:var(--r-lg);background:var(--surface);border:1px dashed var(--line-strong);color:var(--text-2)}
.soon-box b{display:block;font-family:var(--f-title);font-weight:600;font-size:19px;color:var(--text);margin-bottom:6px}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:1100px;margin-top:36px}
.pager a{padding:12px 16px;font-size:14px;border-radius:var(--r-md);border:1px solid var(--line);text-decoration:none;color:var(--text)}
.pager a:hover{border-color:var(--accent-line)}
.pager a small{display:block;color:var(--text-3);font-size:13px}
.pager a b{font-family:var(--f-title);font-weight:600}
.pager .next{text-align:right;grid-column:2}

/* ---------- Home ---------- */
.hero{padding:56px 0 36px;max-width:760px}
.hero h1{font-size:46px;letter-spacing:-.015em}
.hero p{font-size:19px;color:var(--text-2);margin-top:12px}
.hero .search-btn{margin-top:28px;min-height:58px;font-size:17px;width:100%;max-width:620px;box-shadow:var(--shadow)}
.quick{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.quick a{padding:6px 14px;border-radius:var(--r-pill);background:var(--surface);color:var(--text-2);text-decoration:none;font-size:14px;font-weight:700}
.quick a:hover{color:var(--text);background:var(--surface-2)}
.sections{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-top:20px}
.sec-card{display:flex;flex-direction:column;gap:10px;padding:22px;border-radius:var(--r-lg);background:var(--surface)}
.sec-card .ico{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:var(--accent-soft);color:var(--accent-soft-ink)}
.sec-card h3{font-size:19px}
.sec-card ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.sec-card a{color:var(--text-2);text-decoration:none;font-size:15px}
.sec-card a:hover{color:var(--text);text-decoration:underline}

/* ---------- Search ---------- */
.overlay{position:fixed;inset:0;z-index:50;background:var(--overlay);backdrop-filter:blur(4px);display:flex;justify-content:center;align-items:flex-start;padding:10vh 16px 16px}
.palette{width:100%;max-width:680px;max-height:78vh;display:flex;flex-direction:column;border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow);border:1px solid var(--line);overflow:hidden}
.palette .field{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line);color:var(--text-3)}
.palette input{flex:1;border:0;background:transparent;outline:none;font-size:18px;color:var(--text)}
.results{overflow:auto;padding:12px}
.results h5{margin:10px 8px 8px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.res{display:flex;gap:14px;align-items:center;padding:12px 14px;border-radius:var(--r-sm);color:var(--text);text-decoration:none}
.res span{display:block;color:var(--text-2);font-size:14px;line-height:1.4}
.res small{display:block;color:var(--text-3);font-size:12px;font-weight:700}
.res b{display:block}
.res .ico{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:var(--surface-2);color:var(--text-2)}
.res.best{padding:18px;border:1px solid var(--accent-line);background:var(--accent-soft)}
.res.best b{font-family:var(--f-title);font-weight:600;font-size:19px}
.res.best .ico{background:var(--accent);color:var(--accent-ink)}
.res.sel{background:var(--surface-2)}
.res.best.sel{background:var(--accent-soft);outline:2px solid var(--accent)}
.res mark{background:none;color:var(--accent-soft-ink);font-weight:800}
:root[data-theme="light"] .res mark{color:var(--accent)}
.empty{padding:28px 16px;text-align:center;color:var(--text-2)}
.palette .foot{display:flex;gap:16px;padding:10px 20px;border-top:1px solid var(--line);font-size:13px;color:var(--text-3)}

/* ---------- Responsive ---------- */
@media (max-width:1200px){.howto{grid-template-columns:minmax(0,1fr)}.howto .howto-steps{position:static}.howto .howto-scroll{position:static;overflow:visible;padding:0}}
@media (max-width:860px){
  .top{padding:12px 16px;gap:10px}
  .menu-btn{display:inline-grid}
  .search-btn{min-width:0;flex:1}
  .top .search-btn kbd,.top .logo small{display:none}
  .layout{grid-template-columns:minmax(0,1fr);padding:0 16px}
  /* phone: the animation stays on screen while the steps scroll under it */
  .howto .scene-wrap{position:sticky;top:69px;z-index:10;background:var(--bg);padding-bottom:8px}
  .sidebar{position:fixed;inset:69px 0 0 0;z-index:30;max-height:none;background:var(--bg);padding:16px;display:none}
  .sidebar.open{display:block}
  .article h1{font-size:24px}
  .hero h1{font-size:30px}
  .lead,.hero p{font-size:15px}
  .pager{grid-template-columns:1fr}.pager .next{grid-column:1}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Scrollbars: same as the dashboard (css/oxly.css) */
::-webkit-scrollbar{width:12px;height:0}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:99px;border:3px solid transparent;background-clip:padding-box;min-height:40px}
::-webkit-scrollbar-thumb:hover{background:var(--accent);border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:active{background:var(--accent)}
::-webkit-scrollbar-corner{background:transparent}
@supports not selector(::-webkit-scrollbar){html,*{scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}}