:root{
  --bg:#070b09;--bg2:#0b120e;--card:#101914;--card2:#0c1410;--line:#203128;
  --text:#e2ece5;--muted:#93a59a;--dim:#62736a;--green:#2ae6a3;
  --cyan:#62dce5;--amber:#f0b65c;--red:#f17878;--violet:#ae94ff;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif
}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(circle at 78% -10%,rgba(42,230,163,.08),transparent 34%),var(--bg);color:var(--text);font:15px/1.67 var(--sans)}
a{color:var(--cyan);text-decoration:none}a:hover{text-decoration:underline}
header{position:sticky;top:0;z-index:10;background:rgba(7,11,9,.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
nav{max-width:1180px;margin:auto;padding:13px 24px;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.logo{font:700 14px var(--mono);letter-spacing:.1em;color:var(--green)}.spacer{flex:1}nav a{font:12px var(--mono);color:var(--muted)}
main{max-width:1180px;margin:auto;padding:66px 24px 90px}.hero{padding-bottom:58px}
.eyebrow{font:700 11px var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--green)}
h1{font-size:clamp(42px,7vw,78px);line-height:.99;letter-spacing:-.05em;max-width:1050px;margin:16px 0 24px}
.lead{max-width:970px;color:var(--muted);font-size:19px}.lead strong{color:var(--text)}
.decision{margin-top:30px;padding:22px 24px;border:1px solid rgba(42,230,163,.42);border-left:4px solid var(--green);border-radius:10px;background:linear-gradient(110deg,rgba(42,230,163,.08),rgba(98,220,229,.03))}
.decision b{display:block;font:700 11px var(--mono);letter-spacing:.12em;color:var(--green);text-transform:uppercase;margin-bottom:8px}.decision span{font-size:18px}
.badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}.badge{padding:5px 9px;border:1px solid var(--line);border-radius:4px;font:700 10px var(--mono);letter-spacing:.06em}.green{color:var(--green);border-color:rgba(42,230,163,.45)}.cyan{color:var(--cyan);border-color:rgba(98,220,229,.45)}.amber{color:var(--amber);border-color:rgba(240,182,92,.45)}
section{padding:54px 0;border-top:1px solid var(--line)}h2{font-size:29px;letter-spacing:-.02em;margin:0 0 12px}.sub{color:var(--muted);max-width:930px;margin:0 0 28px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.card{background:linear-gradient(145deg,var(--card),var(--card2));border:1px solid var(--line);border-radius:10px;padding:21px}.card h3{margin:4px 0 9px;font-size:18px}.card p{color:var(--muted);margin:8px 0}.kicker{font:700 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--green)}
.metric{font:700 clamp(26px,4vw,42px)/1.1 var(--mono);margin:11px 0}.metric.good{color:var(--green)}.metric.bad{color:var(--red)}.metric.warn{color:var(--amber)}
.rule{border-left:3px solid var(--line)}.rule.good{border-left-color:var(--green)}.rule.bad{border-left-color:var(--red)}.rule.warn{border-left-color:var(--amber)}.rule strong{display:block;font:700 11px var(--mono);letter-spacing:.06em;margin-bottom:8px}.rule.good strong{color:var(--green)}.rule.bad strong{color:var(--red)}.rule.warn strong{color:var(--amber)}
.scroll{overflow-x:auto;border-radius:9px}table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);font-variant-numeric:tabular-nums}th,td{padding:12px 13px;border-bottom:1px solid var(--line);text-align:left}th{font:700 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}td{color:var(--muted)}td:first-child{color:var(--text);font-weight:650}tr:last-child td{border-bottom:0}.yes{color:var(--green)!important}.no{color:var(--red)!important}.conditional{color:var(--amber)!important}
.note{margin-top:19px;padding:15px 17px;border-left:3px solid var(--amber);background:rgba(240,182,92,.06);color:var(--muted)}.note strong{color:var(--text)}
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.flow div{position:relative;background:var(--card);border:1px solid var(--line);border-radius:9px;padding:17px}.flow b{display:block;color:var(--green);font:700 10px var(--mono);letter-spacing:.1em;text-transform:uppercase}.flow span{display:block;color:var(--muted);margin-top:7px}.flow div:not(:last-child):after{content:"→";position:absolute;right:-10px;top:50%;z-index:2;color:var(--dim);background:var(--bg);padding:0 3px}
.steps{counter-reset:step;display:grid;gap:11px}.step{counter-increment:step;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:16px 17px 16px 58px;position:relative}.step:before{content:counter(step);position:absolute;left:17px;top:15px;width:25px;height:25px;border:1px solid var(--green);color:var(--green);border-radius:50%;display:grid;place-items:center;font:700 11px var(--mono)}.step strong{display:block;margin-bottom:4px}.step span{color:var(--muted)}
.tool{display:flex;flex-direction:column}.tool .link{margin-top:auto;padding-top:12px;font:700 12px var(--mono)}
.map{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.map a{display:block;border:1px solid var(--line);border-radius:9px;padding:17px;background:var(--card)}.map a:hover{border-color:rgba(98,220,229,.5);text-decoration:none}.map b{display:block;color:var(--text);margin-bottom:5px}.map span{color:var(--muted)}
code{font-family:var(--mono);font-size:.92em;color:#c8b6ff}.fine{font-size:12px;color:var(--dim)}
footer{border-top:1px solid var(--line);padding:28px 24px;color:var(--dim);font:11px var(--mono)}
@media(max-width:900px){.grid2,.grid3,.flow,.map{grid-template-columns:1fr}.flow div:not(:last-child):after{content:"↓";right:auto;left:22px;top:auto;bottom:-15px}.spacer{display:none}}

/* Storage guide additions to the shared knlp page style. */
section { scroll-margin-top: 90px; }
p { max-width: 1030px; }
h3 { margin-top: 28px; }
.grid2, .grid3 { margin: 24px 0; }
.grid2 > *, .grid3 > * { min-width: 0; }
.label { font: 700 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--green); }
.toc { display: flex; flex-wrap: wrap; gap: 10px 20px; margin: 28px 0; font: 12px var(--mono); }
td { vertical-align: top; font-size: 14px; }
code { overflow-wrap: anywhere; }
pre { background: var(--card2); border: 1px solid var(--line); border-radius: 9px; padding: 22px; overflow: auto; line-height: 1.7; }
pre code { white-space: pre; color: var(--text); }
li { margin: .65em 0; }
details { padding: 18px 0; border-top: 1px solid var(--line); }
summary { cursor: pointer; font-weight: 650; }
.flow { margin: 24px 0; }
.flow .node { text-align: left; font-size: 14px; color: var(--muted); }
.flow .node strong { display: block; margin-bottom: 7px; color: var(--green); }
svg { display: block; width: 100%; height: auto; }
.sub { margin-top: 14px; font-size: 14px; }
.history { list-style: none; margin: 28px 0; padding: 0; }
.history li { display: grid; grid-template-columns: 155px minmax(0, 1fr); gap: 24px; margin: 0; padding: 22px 0; border-top: 1px solid var(--line); }
.history-meta { font: 12px/1.8 var(--mono); color: var(--dim); }
.history-meta a { display: block; }
.history h3 { font-size: 18px; margin: 0 0 8px; }
.history p { color: var(--muted); margin: 0; }
.source-list { color: var(--muted); }
footer { margin-top: 30px; padding-left: 0; padding-right: 0; }
@media (max-width: 600px) {
  main { padding: 38px 18px 60px; }
  nav { padding: 12px 18px; gap: 12px; }
  .hero { padding-bottom: 30px; }
  section { padding: 36px 0; scroll-margin-top: 120px; }
  h2 { font-size: 26px; }
  .lead { font-size: 18px; }
  .history li { grid-template-columns: minmax(0, 1fr); gap: 7px; }
  .history-meta a { display: inline; margin-left: 12px; }
  .card { padding: 18px; }
  th, td { padding: 10px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.flow { grid-template-columns: repeat(var(--flow-columns, 4), minmax(0, 1fr)); }
.flow.two-way > div:not(:last-child)::after { content: "⇄"; }
@media (max-width: 900px) {
  .flow { grid-template-columns: 1fr; }
  .flow.two-way > div:not(:last-child)::after { content: "⇅"; }
}

/* Shared navigation for the storage guide. */
nav a[aria-current="page"] { color: var(--green); text-decoration: underline; text-underline-offset: 5px; }
.skip { position: absolute; top: -100px; left: 18px; z-index: 100; padding: 12px; background: var(--card); }
.skip:focus { top: 8px; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
.hero h1 { max-width: 950px; font-size: clamp(38px, 6vw, 68px); line-height: 1.06; }
.page-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.page-links h3 { margin-top: 0; }
.page-links a { display: inline-block; }
.page-links .card p { margin-bottom: 16px; }
.card pre { padding: 12px; }
.card pre code { white-space: pre-wrap; }
.toc { line-height: 1.8; }
.pager { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px; padding: 30px 0; border-top: 1px solid var(--line); }
caption { text-align: left; padding: 0 0 12px; font-weight: 650; color: var(--text); }
th { color: var(--muted); }
.scroll table { min-width: 650px; }
.fragment-alias { scroll-margin-top: 140px; }
.question-list { margin: 0; padding-left: 20px; }
@media (max-width: 700px) { .page-links { grid-template-columns: 1fr; } }