/* Unlost — shared shell for the document pages (privacy, security, terms)
   and for the guides under /guides/.
   Same tokens, type and chrome as the landing page in /index.html. */

@font-face{font-family:Archivo;src:url(/fonts/archivo-var.woff2) format("woff2");font-weight:400 700;font-stretch:75% 100%;font-display:optional;font-style:normal}
@font-face{font-family:Atkinson;src:url(/fonts/atkinson-var.woff2) format("woff2");font-weight:200 800;font-display:optional;font-style:normal}

/* Same tokens, same values, same reasoning as the landing page — see the
   comments in /index.html. Keep the two blocks in step: a dark home page and a
   white guide is a worse defect than no dark appearance at all. */
:root{
  --s0:oklch(0.98 0.003 250);
  --s1:oklch(0.955 0.005 250);
  --s2:oklch(1 0 0);
  --ink:oklch(0.25 0.012 255);
  --ink-2:oklch(0.50 0.014 255);
  --ink-3:oklch(0.545 0.012 255);
  --blue:oklch(0.54 0.17 255);
  --blue-hover:oklch(0.47 0.16 255);
  --blue-active:oklch(0.42 0.15 255);
  --on-blue:oklch(0.99 0.002 250);
  --blue-wash:oklch(0.95 0.03 255);
  --green:oklch(0.52 0.13 150);
  --clay:oklch(0.80 0.028 62);
  --clay-ink:oklch(0.54 0.035 60);
  --clay-wash:oklch(0.80 0.028 62/.22);
  --cell:oklch(0.925 0.004 250);
  --line:oklch(0.90 0.006 250);
  --line-soft:oklch(0.90 0.006 250/.7);
  --line-strong:oklch(0.655 0.014 250);
  --scrim:oklch(0.28 0.02 258/.36);
  --glass:oklch(0.99 0.004 250/.62);
  --glass-solid:oklch(0.987 0.004 250);
  /* The SmartScreen box in the download dialog is a picture of a Windows
     window, not a surface of this site. Windows draws it in its own blue with
     white text in both appearances, so these two do not move. */
  --diag-face:oklch(0.54 0.17 255);
  --diag-mark:oklch(0.43 0.15 255);
  --r-container:14px; --r-panel:12px; --r-card:10px; --r-control:8px; --r-pill:999px;
  --bloom:oklch(1 0 0/.9);
  --bloom-accent:oklch(1 0 0/.28);
  --bloom-accent-press:oklch(1 0 0/.2);
  --cast:oklch(0.28 0.02 258/.08);
  --cast-soft:oklch(0.28 0.02 258/.06);
  --cast-hover:oklch(0.28 0.02 258/.11);
  --cast-deep:oklch(0.28 0.02 258/.12);
  --glow:oklch(0.54 0.17 255/.26);
  --glow-hover:oklch(0.54 0.17 255/.32);
  --glow-press:oklch(0.54 0.17 255/.24);
  --shadow-card:0 1px 0 var(--bloom) inset, 0 8px 24px var(--cast);
  --shadow-lift:0 1px 0 var(--bloom) inset, 0 2px 6px var(--cast-soft), 0 20px 56px var(--cast-deep);
  color-scheme:light dark;
}

@media (prefers-color-scheme:dark){
  :root{
    --s0:oklch(0.19 0.007 255);
    --s1:oklch(0.235 0.008 255);
    --s2:oklch(0.275 0.009 255);

    --ink:oklch(0.96 0.004 255);
    --ink-2:oklch(0.80 0.010 255);
    --ink-3:oklch(0.715 0.010 255);

    --blue:oklch(0.74 0.145 253);
    --blue-hover:oklch(0.80 0.13 253);
    --blue-active:oklch(0.68 0.15 253);
    --on-blue:oklch(0.17 0.02 258);
    --blue-wash:oklch(0.36 0.07 256);

    --green:oklch(0.78 0.15 152);
    --clay:oklch(0.515 0.045 70);
    --clay-ink:oklch(0.87 0.04 70);
    --clay-wash:oklch(0.72 0.05 70/.2);

    --cell:oklch(0.30 0.010 255);
    --line:oklch(0.96 0.004 255/.13);
    --line-soft:oklch(0.96 0.004 255/.09);
    --line-strong:oklch(0.96 0.004 255/.4);
    --scrim:oklch(0.09 0.008 258/.62);
    --glass:oklch(0.235 0.008 255/.68);
    --glass-solid:oklch(0.235 0.008 255);

    --bloom:oklch(1 0 0/.06);
    --bloom-accent:oklch(1 0 0/.16);
    --bloom-accent-press:oklch(1 0 0/.1);
    --cast:oklch(0 0 0/.5);
    --cast-soft:oklch(0 0 0/.4);
    --cast-hover:oklch(0 0 0/.55);
    --cast-deep:oklch(0 0 0/.6);
    --glow:oklch(0 0 0/.45);
    --glow-hover:oklch(0 0 0/.55);
    --glow-press:oklch(0 0 0/.4);
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--s0);color:var(--ink);
  font-family:Atkinson,"Segoe UI",system-ui,sans-serif;
  font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.btn,.eyebrow,.wordmark{font-family:Archivo,"Arial Narrow",system-ui,sans-serif;font-variant-numeric:tabular-nums}
h1,h2,h3{margin:0;font-weight:650;letter-spacing:-0.02em;line-height:1.08;text-wrap:balance}
p{margin:0}
a{color:inherit}
img,svg{display:block;max-width:100%}
::selection{background:var(--blue-wash)}
/* `--focus-r` rounds the ring to whatever the element already is; without it
   the 4px here squares off a button for as long as it is focused. */
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:var(--focus-r,4px)}

.skip{position:absolute;left:16px;top:-60px;z-index:20;background:var(--s2);color:var(--ink);--focus-r:var(--r-control);
  padding:10px 16px;border-radius:var(--r-control);box-shadow:var(--shadow-card);transition:top .16s ease}
.skip:focus{top:16px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
main[id],section[id],h2[id],h3[id]{scroll-margin-top:76px}

.wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 24px}

/* ---------- top bar ---------- */
.topbar{position:sticky;top:0;z-index:10;background:var(--glass);
  backdrop-filter:blur(12px) saturate(150%);-webkit-backdrop-filter:blur(12px) saturate(150%);
  border-bottom:1px solid var(--line);box-shadow:0 1px 0 var(--bloom) inset}
/* the point of the material is that the backdrop varies; asked to stop varying
   it, the answer is an opaque surface rather than a weaker blur */
@supports not (backdrop-filter:blur(1px)){.topbar{background:var(--s0)}}
@media (prefers-reduced-transparency:reduce){
  .topbar{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--s0)}
}
.topbar-in{display:flex;align-items:center;gap:24px;height:56px}
/* the mark is a link home, so it owes the 24px a target owes; at 20px of type
   that is a few pixels of padding rather than a bigger wordmark */
.wordmark{display:inline-flex;align-items:center;font-weight:700;font-stretch:87%;font-size:20px;
  letter-spacing:-0.015em;text-decoration:none;line-height:1;
  min-height:26px;padding:3px 2px;margin-left:-2px;border-radius:6px;--focus-r:6px}
.wordmark::after{content:"";display:inline-block;width:6px;height:6px;margin-left:5px;vertical-align:2px;
  background:var(--blue);border-radius:1px}
.topnav{display:flex;gap:20px;margin-left:auto;font-size:14px}
.topnav a{display:inline-flex;align-items:center;min-height:26px;color:var(--ink-2);text-decoration:none;
  padding:4px 0;border-radius:4px;transition:color .16s ease}
.topnav a:hover{color:var(--ink)}
/* a press has to survive a finger on top of it and forced colours, so it is a
   colour change and an underline, never a shadow */
.topnav a:active{color:var(--blue);text-decoration:underline;text-underline-offset:4px}
.topnav a[aria-current="page"]{color:var(--ink)}
.topbar .btn{margin-left:24px}
@media (max-width:800px){.topnav{display:none}.topbar .btn{margin-left:auto}}

/* ---------- buttons ---------- */
/* solid accent fill, never glass: this is content, and a translucent control
   trades the contrast that makes its purpose legible for a material that has
   nothing moving underneath to sample */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:38px;padding:0 16px;border:0;border-radius:var(--r-control);--focus-r:var(--r-control);
  background:var(--blue);color:var(--on-blue);font-size:14px;font-weight:600;font-stretch:95%;letter-spacing:-0.005em;
  text-decoration:none;cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent;
  box-shadow:0 1px 0 var(--bloom-accent) inset, 0 4px 12px var(--glow);
  transition:background .18s ease, box-shadow .18s ease, transform .18s ease}
a.btn:hover,button.btn:hover{background:var(--blue-hover);box-shadow:0 1px 0 var(--bloom-accent) inset, 0 8px 20px var(--glow-hover);transform:translateY(-1px)}
/* the press is a fill change, not only a shadow: a shadow alone is invisible
   under a finger, and invisible in forced colours */
a.btn:active,button.btn:active{background:var(--blue-active);transform:translateY(0);
  box-shadow:0 1px 0 var(--bloom-accent-press) inset, 0 2px 8px var(--glow-press)}
span.btn{cursor:default}
@media (forced-colors:active){
  .btn,.doc-body a.btn{border:1px solid ButtonBorder;background:ButtonFace;color:ButtonText}
  .btn:hover,.btn:active,.doc-body a.btn:hover,.doc-body a.btn:active{background:Highlight;color:HighlightText}
}

/* ---------- document page ---------- */
.doc{padding:40px 0 96px}
.crumbs{font-size:13px;color:var(--ink-3);margin-bottom:24px}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center}
.crumbs li{display:inline-flex;align-items:center;min-height:26px}
.crumbs li+li::before{content:"/";margin-right:8px;color:var(--line)}
/* the way back up is a target, and on a phone it is the only one there is */
.crumbs a{display:inline-flex;align-items:center;min-height:26px;padding:3px 0;border-radius:4px;
  color:var(--ink-2);text-underline-offset:3px}
.crumbs a:hover{color:var(--ink)}
.crumbs a:active{color:var(--blue)}
.eyebrow{font-weight:650;font-stretch:80%;font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
.doc h1{font-size:clamp(2rem,4.4vw,3rem);font-weight:700;font-stretch:90%;letter-spacing:-0.03em;line-height:1.02}
.doc-lede{margin-top:20px;font-size:1.0625rem;line-height:1.55;color:var(--ink-2);max-width:60ch}
.doc-meta{margin-top:20px;font-size:14px;color:var(--ink-3);font-variant-numeric:tabular-nums}

.doc-body{margin-top:56px;max-width:68ch}
.doc-body section+section{margin-top:48px}
.doc-body h2{font-size:clamp(1.375rem,2.4vw,1.75rem);font-stretch:92%;letter-spacing:-0.025em}
.doc-body h3{font-size:1.0625rem;font-stretch:94%;font-weight:650;letter-spacing:-0.01em;margin-top:28px}
.doc-body p{margin-top:16px;color:var(--ink-2)}
.doc-body h2+p,.doc-body h3+p{margin-top:12px}
.doc-body a{color:var(--blue);text-underline-offset:3px}
.doc-body a:hover{color:var(--blue-hover)}
/* `.doc-body a` outweighs `.btn`, and the download button at the foot of every
   document page sits inside `.doc-body` — so without this the label is the
   accent colour on the accent fill, which is a button with no text on it. The
   button's own two colours are restated here rather than raising `.btn`
   everywhere, because the clash belongs to this one container. */
.doc-body a.btn,.doc-body a.btn:hover{color:var(--on-blue)}
.doc-body a.btn-elsewhere,.doc-body a.btn-elsewhere:hover{color:var(--ink)}
.doc-body ul,.doc-body ol{margin:16px 0 0;padding-left:0;list-style:none;color:var(--ink-2)}
.doc-body ul li{position:relative;padding:6px 0 6px 20px}
.doc-body ul li::before{content:"";position:absolute;left:0;top:15px;width:7px;height:7px;border-radius:1px;
  background:var(--cell)}
.doc-body ol{counter-reset:step}
.doc-body ol li{position:relative;padding:6px 0 6px 28px;counter-increment:step}
.doc-body ol li::before{content:counter(step);position:absolute;left:0;top:6px;
  font-family:Archivo,system-ui,sans-serif;font-weight:650;font-size:13px;color:var(--ink-3);
  font-variant-numeric:tabular-nums}
.doc-body strong{font-weight:700;color:var(--ink)}
.doc-body code{font-family:ui-monospace,"Cascadia Mono",Menlo,Consolas,monospace;font-size:.9em;
  background:var(--s1);border-radius:4px;padding:2px 6px;word-break:break-word}

.panel{margin-top:24px;background:var(--s2);border-radius:var(--r-panel);padding:24px;
  box-shadow:var(--shadow-card)}
.panel h3{margin-top:0}
.panel p:first-of-type{margin-top:8px}
.panel-warn h3{color:var(--clay-ink)}
.placeholder{font-family:Archivo,system-ui,sans-serif;font-weight:600;font-stretch:92%;font-size:.92em;
  color:var(--clay-ink);background:var(--clay-wash);border-radius:4px;padding:1px 6px;
  overflow-wrap:break-word}

.doc-foot-cta{margin-top:56px;padding-top:32px;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:20px;flex-wrap:wrap}
/* this is the page's own main action, so it is sized like one rather than like
   the reminder in the top bar */
.doc-foot-cta .btn{height:48px;padding:0 22px;font-size:16px;border-radius:10px;--focus-r:10px}
.doc-foot-cta p{margin:0;font-size:14px;color:var(--ink-2)}
/* `order` so the note can sit next to the button in the source and still read
   last on the page, under the line that describes the download */
.doc-foot-cta .os-note{order:1;flex-basis:100%;font-size:14px;color:var(--clay-ink)}
.os-note[hidden]{display:none}

/* ---------- guides ---------- */
/* The lede on a guide is the answer, not an introduction to one, so it is set
   at the weight of body text the reader has come for rather than as a caption. */
.doc-lede.answer{color:var(--ink);font-size:1.125rem;line-height:1.5}

.guide-index{margin-top:48px;max-width:74ch;display:grid;gap:16px}
.guide-card{display:block;background:var(--s2);border-radius:var(--r-panel);--focus-r:var(--r-panel);
  padding:20px 22px;
  box-shadow:var(--shadow-card);text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease}
.guide-card:hover{transform:translateY(-1px);
  box-shadow:0 1px 0 var(--bloom) inset, 0 12px 28px var(--cast-hover)}
/* a card that only lifts has no press: under a finger the lift and the shadow
   are both hidden, so the pressed card changes its own fill and sits back down */
.guide-card:active{transform:translateY(0);background:var(--s1);box-shadow:var(--shadow-card)}
.guide-card:active h3{color:var(--blue-active)}
@media (forced-colors:active){
  .guide-card{border:1px solid ButtonBorder}
  .guide-card:hover,.guide-card:active{border-color:Highlight}
}
.guide-card h3{font-size:1.125rem;font-stretch:94%;font-weight:650;letter-spacing:-0.015em;
  line-height:1.25;color:var(--blue)}
.guide-card:hover h3{text-decoration:underline;text-underline-offset:3px}
.guide-card p{margin-top:8px;font-size:15px;line-height:1.5;color:var(--ink-2)}

.guide-group{margin-top:48px}
.guide-group>h2{font-size:1.0625rem;font-stretch:94%;letter-spacing:-0.01em}
.guide-group .guide-index{margin-top:16px}

/* A table wide enough to need scrolling scrolls inside itself; the page never
   scrolls sideways. */
.tablewrap{margin-top:20px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  border-radius:var(--r-card);box-shadow:var(--shadow-card);background:var(--s2)}
.doc-body table{border-collapse:collapse;width:100%;min-width:34rem;font-size:15px}
.doc-body th,.doc-body td{text-align:left;vertical-align:top;padding:12px 16px;
  border-bottom:1px solid var(--line);color:var(--ink-2)}
.doc-body thead th{font-family:Archivo,system-ui,sans-serif;font-weight:650;font-stretch:92%;
  font-size:13px;letter-spacing:.02em;color:var(--ink)}
.doc-body tbody tr:last-child th,.doc-body tbody tr:last-child td{border-bottom:0}
.doc-body tbody th{font-weight:700;color:var(--ink)}

.related{margin-top:56px;padding-top:32px;border-top:1px solid var(--line)}
.related h2{font-size:1.0625rem;font-stretch:94%;letter-spacing:-0.01em}
.related ul{margin-top:12px}
.related li{padding-left:0}
.related li::before{display:none}
.related a{display:inline-flex;align-items:center;min-height:26px;color:var(--blue);text-underline-offset:3px}
.related a:hover{color:var(--blue-hover)}
.related a:active{color:var(--blue-active)}
.related .why{color:var(--ink-3);font-size:15px}
/* a link that leaves for another site says so; the marker is text, so it
   survives forced colours and a stylesheet that never loads */
.doc-body a[target="_blank"]::after{content:"\2197";margin-left:.2em;font-size:.85em;
  text-decoration:none;display:inline-block}

@media (max-width:600px){
  .doc-body{margin-top:40px}
  .doc-body section+section{margin-top:40px}
  .panel{padding:20px}
}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:32px 0 48px;font-size:14px;color:var(--ink-2)}
.foot-mark{font-family:Archivo,"Arial Narrow",system-ui,sans-serif;font-weight:700;font-stretch:87%}
.foot-in{display:flex;gap:12px 24px;flex-wrap:wrap;align-items:baseline}
footer a{color:var(--ink-2)}
.foot-links{display:flex;gap:8px 20px;flex-wrap:wrap;margin:0;padding:0;list-style:none}
/* every one of these is a target on its own, so each gets the 24px a target
   owes rather than the 18px a 14px line box happens to be */
.foot-links a{display:inline-flex;align-items:center;min-height:26px;padding:3px 0;border-radius:4px;
  text-decoration-color:var(--line);text-underline-offset:3px}
.foot-links a:hover{color:var(--ink);text-decoration-color:currentColor}
.foot-links a:active{color:var(--blue);text-decoration-color:var(--blue)}
.foot-links a[aria-current="page"]{color:var(--ink)}
.foot-note{flex-basis:100%;color:var(--ink-3)}

/* ---------- the counter switch on /privacy.html ----------
   Hidden in the markup and revealed by /assets/analytics.js, so a page with
   scripting off does not offer a button that cannot do anything. */
.optout{display:flex;gap:12px 16px;align-items:center;flex-wrap:wrap;
  margin:16px 0 0;padding:14px 16px;border:1px solid var(--line);
  border-radius:var(--r-panel);background:var(--s1)}
.optout[hidden]{display:none}
.optout .btn-quiet{margin-left:0;flex:0 0 auto}
.optout-said{font-size:14px;color:var(--ink-2)}

/* ==========================================================================
 * Download companion dialog — built by /assets/smartscreen.js.
 * Same block as the one in /index.html; keep the two in step.
 * ======================================================================== */
.sheet{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:24px}
.sheet[hidden]{display:none}
.sheet:not(.in){pointer-events:none}
.sheet-scrim{position:absolute;inset:0;background:var(--scrim);
  opacity:0;transition:opacity .19s cubic-bezier(.2,.7,.3,1)}
.sheet.in .sheet-scrim{opacity:1}
.sheet-box{position:relative;display:flex;flex-direction:column;width:100%;max-width:560px;
  max-height:min(86vh,780px);background:var(--s0);border-radius:var(--r-container);
  box-shadow:var(--shadow-lift), 0 0 0 1px var(--line);overflow:hidden;
  opacity:0;transform:scale(.97) translateY(10px);transform-origin:50% 64%;
  transition:opacity .19s cubic-bezier(.2,.7,.3,1),transform .19s cubic-bezier(.2,.7,.3,1)}
.sheet.in .sheet-box{opacity:1;transform:none}

.sheet-head{display:flex;align-items:center;gap:12px;padding:16px 20px;background:var(--glass-solid);
  border-bottom:1px solid var(--line);box-shadow:0 1px 0 var(--bloom) inset}
.sheet-head h2{font-size:1.125rem;font-stretch:94%;letter-spacing:-0.015em}
.sheet-x{margin-left:auto;flex:none;width:38px;height:38px;display:inline-flex;align-items:center;
  justify-content:center;border:0;border-radius:var(--r-control);--focus-r:var(--r-control);background:transparent;
  color:var(--ink-2);cursor:pointer;transition:background .16s ease,color .16s ease}
.sheet-x:hover{background:var(--s1);color:var(--ink)}
.sheet-x:active{background:var(--blue-wash);color:var(--ink)}
@media (forced-colors:active){
  .sheet-x{border:1px solid ButtonBorder}
  .sheet-x:hover,.sheet-x:active{background:Highlight;color:HighlightText}
}
/* the body of the dialog scrolls, and a scrolling region a keyboard cannot
   reach is a region a keyboard user cannot read: it takes focus itself, and
   the ring goes inside so the rounded box does not clip it */
.sheet-scroll{overflow-y:auto;overscroll-behavior:contain;padding:20px}
.sheet-scroll:focus-visible{outline:2px solid var(--blue);outline-offset:-3px;border-radius:0}
.sheet-foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:12px 20px;
  background:var(--glass-solid);border-top:1px solid var(--line);box-shadow:0 1px 0 var(--bloom) inset}
.sheet-foot a{display:inline-flex;align-items:center;min-height:26px;color:var(--blue);font-size:14px;
  text-underline-offset:3px}
.sheet-foot a:hover{color:var(--blue-hover)}
.sheet-foot a:active{color:var(--blue-active)}
/* the secondary button's edge is the only thing that says it is a button, so
   it is held at the 3:1 a control edge owes rather than at a rule's weight */
/* The download, seen from a system it will not run on.
   Not removed and not disabled: somebody on a phone is usually deciding
   whether to fetch this on the computer that has the problem, and they still
   need the link. It only stops presenting itself as this page's one bright
   action, and says which system it is for. The `.os-note` beside it carries
   the rest. */
.btn-elsewhere{background:transparent;color:var(--ink);
  border:1px solid var(--line-strong);box-shadow:none}
a.btn-elsewhere:hover{background:var(--s1);border-color:var(--ink-3);
  box-shadow:none;transform:none}
a.btn-elsewhere:active{background:var(--s0);border-color:var(--ink)}

@media (forced-colors: active){
  .btn-elsewhere{border-color:ButtonBorder;color:ButtonText}

}

/* Refused on a system it cannot run on. Still focusable and still answers a
   click — it copies the address instead of a file. */
a[data-windows-only]{cursor:default}
a[data-windows-only]:hover{transform:none}
.os-said{margin-top:8px;color:var(--ink-2)}

.btn-quiet{margin-left:auto;height:38px;padding:0 16px;border:1px solid var(--line-strong);border-radius:var(--r-control);
  --focus-r:var(--r-control);
  background:var(--s2);font-family:Archivo,system-ui,sans-serif;font-weight:600;font-stretch:95%;font-size:14px;
  color:var(--ink);cursor:pointer;transition:background .16s ease,border-color .16s ease}
.btn-quiet:hover{background:var(--s1);border-color:var(--ink-3)}
/* pressed reads as pushed in: the surface goes a step down instead of up, and
   the edge goes to full ink. Both survive a finger over the button. */
.btn-quiet:active{background:var(--s0);border-color:var(--ink);color:var(--ink)}
@media (forced-colors:active){
  .btn-quiet:hover,.btn-quiet:active{background:Highlight;color:HighlightText;border-color:HighlightText}
}

.sheet-d{font-size:15.5px;color:var(--ink-2)}
.sheet-sec{margin-top:28px}
.sheet-sec h3{font-size:1.0625rem;margin-top:0}
.sheet-sec p{margin-top:12px;font-size:15px;color:var(--ink-2)}
.sheet-sec strong{font-weight:700;color:var(--ink)}
.sheet-sec a{color:var(--blue);text-underline-offset:3px}
.sheet-sec a:hover{color:var(--blue-hover)}
.key{font-family:Archivo,system-ui,sans-serif;font-weight:650;font-stretch:92%;font-size:.94em;
  color:var(--ink);background:var(--s1);border-radius:5px;padding:1px 6px;white-space:nowrap}
.mono{font-family:ui-monospace,"Cascadia Mono",Menlo,Consolas,monospace;font-size:.88em;
  background:var(--s1);border-radius:4px;padding:2px 6px;word-break:break-word}

.hash-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;
  background:var(--s2);border-radius:var(--r-card);padding:10px 12px;box-shadow:var(--shadow-card)}
.hash{flex:1 1 200px;min-width:0;font-family:ui-monospace,"Cascadia Mono",Menlo,Consolas,monospace;
  font-size:12px;line-height:1.55;color:var(--ink);word-break:break-all}
.hash.placeholder{font-family:Archivo,system-ui,sans-serif;font-size:12.5px}
.copy{flex:none;height:30px;padding:0 12px;border:1px solid var(--line-strong);border-radius:6px;--focus-r:6px;
  background:var(--s2);
  font-family:Archivo,system-ui,sans-serif;font-weight:600;font-size:12.5px;color:var(--ink-2);cursor:pointer;
  transition:background .16s ease,color .16s ease,border-color .16s ease}
.copy:hover{background:var(--s1);color:var(--ink);border-color:var(--ink-3)}
.copy:active{background:var(--s0);color:var(--ink);border-color:var(--ink)}
@media (forced-colors:active){
  .copy:hover,.copy:active{background:Highlight;color:HighlightText;border-color:HighlightText}
}
.copy[hidden]{display:none}
.copy-msg{display:block;margin-top:8px;min-height:1.3em;font-size:13.5px;color:var(--green)}
.verify:not(.has-hash) .copy-msg{display:none}
.copy-buf{position:fixed;top:-9999px;left:-9999px;opacity:0}
/* wording swaps once a real checksum exists — see /assets/release.js */
.verify .when-hash{display:none}
.verify.has-hash .when-hash{display:block}
.verify.has-hash .when-nohash{display:none}

.ss-steps{margin:16px 0 0;padding:0;list-style:none;counter-reset:s}
.ss-steps li{position:relative;padding:6px 0 6px 28px;counter-increment:s;font-size:15px;color:var(--ink-2)}
.ss-steps li::before{content:counter(s);position:absolute;left:0;top:6px;
  font-family:Archivo,system-ui,sans-serif;font-weight:650;font-size:13px;color:var(--ink-3);
  font-variant-numeric:tabular-nums}

/* the SmartScreen box, drawn — not a screenshot */
.ssdiag{margin:20px 0 0}
.ssdiag svg{width:100%;max-width:344px;height:auto;margin:0 auto}
.ssdiag figcaption{margin-top:10px;font-size:13px;line-height:1.45;color:var(--ink-3);text-align:center}
.ssdiag text{font-family:Archivo,"Arial Narrow",system-ui,sans-serif}
.ssdiag .d-h{font-size:15px;font-weight:650;fill:#fff}
.ssdiag .d-p{font-size:10.5px;fill:#fff;fill-opacity:.82}
.ssdiag .d-link{font-size:11.5px;font-weight:600;fill:#fff}
.ssdiag .d-btn{font-size:10.5px;font-weight:600;fill:#fff;fill-opacity:.9;text-anchor:middle}
.ssdiag .d-btn-on{font-size:10.5px;font-weight:700;fill:var(--diag-mark);text-anchor:middle}
.ssdiag .d-num{font-size:11px;font-weight:700;fill:#fff;text-anchor:middle}
/* the arrow marker belongs to prose links, not to the one inside the dialog */
.sheet a[target="_blank"]::after{content:""}

@media (max-width:560px){
  /* a sheet that rises from the bottom edge: the growth point is the edge it came from */
  .sheet{padding:0;align-items:flex-end}
  .sheet-box{max-width:none;max-height:90vh;max-height:90dvh;
    border-radius:var(--r-container) var(--r-container) 0 0;
    transform:translateY(18px);transform-origin:50% 100%}
  .sheet-head{padding:14px 16px}
  .sheet-scroll{padding:18px 16px}
  .sheet-foot{padding:12px 16px}
  .btn-quiet{margin-left:0;flex:1 1 auto}
}

html.sheet-lock,html.sheet-lock body{overflow:hidden}

/* ---------- print ----------
   Printers do not print backgrounds. On a dark page that leaves near-white
   text on white paper, so the whole appearance is put back to the light set
   before anything else is decided. A guide is a thing people print. */
@media print{
  :root{
    --s0:#fff; --s1:#fff; --s2:#fff;
    --ink:#000; --ink-2:#1a1a1a; --ink-3:#333;
    --blue:#0b4da2; --blue-hover:#0b4da2; --blue-active:#0b4da2; --on-blue:#fff;
    --blue-wash:#fff; --clay-ink:#5a3d17; --clay-wash:#fff;
    --line:#bbb; --line-soft:#ddd; --line-strong:#666; --cell:#ddd;
    --bloom:transparent; --bloom-accent:transparent;
    --cast:transparent; --cast-soft:transparent; --cast-hover:transparent; --cast-deep:transparent;
    --glow:transparent; --glow-hover:transparent; --glow-press:transparent;
    --shadow-card:none; --shadow-lift:none;
    color-scheme:light;
  }
  body{background:#fff;color:#000;font-size:11pt}
  /* a sticky bar repeats over every page; a skip link and a dialog have no
     meaning on paper */
  .topbar,.skip,.sheet{display:none!important}
  .doc{padding:0}
  .doc-body{max-width:none}
  .panel,.tablewrap,.guide-card,.doc-body table{box-shadow:none;border:1px solid #bbb}
  .doc-foot-cta .btn{border:1px solid #000;background:#fff;color:#000;box-shadow:none}
  h1,h2,h3{break-after:avoid}
  .panel,.guide-card,.doc-body li,.doc-body tr{break-inside:avoid}
  /* on paper a link is a dead end unless the address comes with it */
  .doc-body a[href^="/"]::after{content:" (tryunlost.com" attr(href) ")";font-size:.85em;color:#333;word-break:break-all}
  .doc-body a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em;color:#333;word-break:break-all}
  .doc-body a[href^="#"]::after,.doc-body a[href^="mailto"]::after,.doc-foot-cta .btn::after{content:""}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .btn:hover{transform:none}
  .guide-card:hover{transform:none}
  /* the dialog appears and leaves without the scale/rise, not just faster */
  .sheet-box{transform:none!important}
}