:root{color-scheme:dark;--bg:#07100f;--panel:#0d1817;--text:#f2f7f6;--muted:#9fb3af;--line:rgba(255,255,255,.09);--accent:#4ae0b2;--radius:20px}
    *{box-sizing:border-box} html,body{min-height:100%}
    body{margin:0;color:var(--text);font:16px/1.65 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:radial-gradient(circle at 20% 0%,rgba(45,202,154,.10),transparent 28rem),radial-gradient(circle at 100% 30%,rgba(62,117,111,.10),transparent 30rem),var(--bg)}
    a{color:var(--accent);text-decoration:none}.shell{width:min(860px,calc(100% - 32px));margin:0 auto;padding:44px 0 34px}
    .topbar{display:flex;justify-content:space-between;align-items:flex-start;gap:18px}.brand{display:flex;align-items:center;gap:13px;margin-bottom:30px}.brand img{width:48px;height:48px;display:block}.brand-name{font-size:16px;font-weight:800}.brand-sub{font-size:12px;color:var(--muted);margin-top:2px}
    .language-switcher{display:flex;gap:7px;align-items:center;margin-top:12px;color:var(--muted);font-size:12px;font-weight:700}.lang-btn{border:0;background:transparent;color:var(--muted);font:inherit;cursor:pointer;padding:4px 2px}.lang-btn.active,.lang-btn:hover,.lang-btn:focus-visible{color:var(--accent)}.lang-btn.active{text-decoration:underline;text-underline-offset:4px}
    .card{padding:38px;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(180deg,rgba(255,255,255,.025),transparent 35%),var(--panel);box-shadow:0 28px 80px rgba(0,0,0,.28)}
    .eyebrow{display:inline-flex;align-items:center;gap:8px;color:#bcd0cc;font-size:13px;font-weight:650;margin-bottom:18px}.dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px rgba(74,224,178,.08)}
    h1{margin:0;font-size:clamp(30px,4.2vw,38px);line-height:1.08;letter-spacing:-.035em}h2{margin:34px 0 10px;font-size:21px;line-height:1.25}p{margin:0 0 14px;color:#d8e3e0}.lead{margin:16px 0 4px;color:var(--muted)}
    .note{padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.02)}.summary{margin-top:30px;padding-top:24px;border-top:1px solid var(--line);color:var(--muted);font-size:13px;text-align:center}.back{display:inline-flex;margin-top:24px;padding:11px 14px;border:1px solid var(--line);border-radius:10px;color:#d7e2df}.back:hover{background:rgba(255,255,255,.03)}
    footer{padding:18px 4px 0;text-align:center;color:#667a76;font-size:11px}@media(max-width:620px){.shell{width:min(100% - 20px,860px);padding-top:22px}.brand{margin-bottom:18px}.card{padding:24px 20px;border-radius:16px}h1{font-size:30px}h2{font-size:19px}}


/* v4.6.74: explanation-first layout. Visuals are used only where they clarify functionality. */
.card section{margin-top:34px}
.explain-section{padding-top:30px;border-top:1px solid var(--line)}
.explain-section:first-of-type{margin-top:28px}
.explain-section h2{margin-top:0}
.plain-example,.stored-grid,.feature-list{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0}
.plain-example>div,.stored-box,.feature-list>div{padding:16px;border:1px solid var(--line);border-radius:12px;background:#091513}
.plain-example strong,.stored-box strong,.feature-list strong{display:block;margin-bottom:5px}
.plain-example p,.stored-box p,.feature-list p{margin:0;color:var(--muted);font-size:14px;line-height:1.55}
.steps{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.step{display:flex;gap:13px;padding:16px;border:1px solid var(--line);border-radius:12px;background:#091513}
.step p{margin:5px 0 0;color:var(--muted);font-size:14px;line-height:1.55}
.step-no{flex:0 0 30px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;border:1px solid #287c66;color:#53dbb6;font-weight:800}
.password-demo{margin:16px 0 12px;padding:17px;border:1px solid var(--line);border-radius:12px;background:#091311}
.demo-line{font-size:15px;line-height:1.75}
.demo-password{font-family:Consolas,"Courier New",monospace;font-weight:400}
.demo-password span:nth-child(2),.demo-password span:nth-child(4),.demo-password span:nth-child(6),.demo-digit{color:#ffd36e}
.demo-password span:nth-child(7),.demo-special{color:#78b7ff}
.demo-legend{display:flex;flex-wrap:wrap;gap:8px 15px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line);color:var(--muted);font-size:11px}
.demo-legend>span{display:inline-flex;align-items:center;gap:5px}.demo-legend b{color:var(--text);font-size:13px}
.small-copy{color:var(--muted);font-size:13px;line-height:1.6}
.use-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.use-tags span{padding:7px 10px;border:1px solid var(--line);border-radius:999px;color:#cbd8d5;background:#091513;font-size:12px}
@media(max-width:720px){
  .plain-example,.stored-grid,.feature-list,.steps{grid-template-columns:1fr}
  .card section{margin-top:26px}
  .explain-section{padding-top:24px}
}

/* v4.6.74: legend uses exactly the same character colors as password highlighting. */
.demo-legend b:not(.demo-digit):not(.demo-special) { color: var(--text); }
.demo-digit { color: #ffd36e !important; }
.demo-special { color: #78b7ff !important; }


/* v4.6.85: make the browser/server boundary explicit. */
.browser-server-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:16px 0;
}
.browser-box,.server-box{
  padding:17px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#091513;
}
.browser-box{border-color:rgba(74,224,178,.24)}
.browser-box strong,.server-box strong{display:block;margin-bottom:9px}
.browser-box ul,.server-box ul{margin:0;padding-left:20px;color:var(--muted);font-size:14px;line-height:1.55}
.browser-box li+li,.server-box li+li{margin-top:7px}
.browser-callout{
  padding:14px 16px;
  border:1px solid rgba(74,224,178,.28);
  border-radius:12px;
  background:rgba(74,224,178,.055);
  color:#dff9f1;
  font-weight:750;
}
.verify-steps{
  margin:16px 0;
  padding-left:22px;
  color:#d8e3e0;
}
.verify-steps li+li{margin-top:8px}
.verify-shot-link{display:block;margin:18px 0 10px}
.verify-shot{
  display:block;
  width:100%;
  height:auto;
  border:1px solid var(--line);
  border-radius:12px;
  background:#08100f;
}
.verify-shot-link:hover .verify-shot,
.verify-shot-link:focus-visible .verify-shot{
  border-color:rgba(74,224,178,.45);
}
@media(max-width:720px){
  .browser-server-grid{grid-template-columns:1fr}
  .verify-shot{border-radius:10px}
}


/* v4.6.85: compact browser-side security callout */
.browser-callout{
  max-width:760px;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
  line-height:1.45;
  text-wrap:balance;
}


/* v4.7.15: concise password-generator explanation */
.generator-info{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:14px;
}
.generator-info>div{
  padding:15px 16px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(255,255,255,.025);
}
.generator-info strong{display:block;margin-bottom:5px}
.generator-info p{margin:0}
@media(max-width:620px){
  .generator-info{grid-template-columns:1fr}
}