/* Vantriq: notes pages. Same tokens, glass and rhythm as the home page. */
:root{
  --ink: 250, 247, 241;
  --vi: 109, 59, 232;
  --violet: #6D3BE8;
  --base: #08090D;
  --paper: 8, 9, 13;
  --ease: cubic-bezier(.22,.61,.36,1);
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 48px; --s6: 64px; --s7: 96px; --s8: 128px;
  --m: clamp(24px, 5.5vw, 96px);
  --edge: linear-gradient(180deg, transparent 0, #000 14vh, #000 calc(100% - 14vh), transparent 100%);
}
*{ margin:0; padding:0; box-sizing:border-box; }
html, body{ background-color: var(--base); }
html{ min-height:100%; } body{ min-height:100vh; min-height:100lvh; }
html{ -webkit-text-size-adjust:100%; color-scheme: dark; }
body{
  color: rgba(var(--ink), .86);
  font-family: "Hanken Grotesk", "Aptos", "Segoe UI", system-ui, sans-serif;
  font-weight:300; -webkit-font-smoothing: antialiased; overflow-x:hidden;
}
a{ color: inherit; }

/* behind everything: a quiet violet light, ribbed glass, grain; all kept off the screen edges for Safari */
.bg, .ribs, .grain{ position:fixed; inset:0; pointer-events:none; -webkit-mask-image: var(--edge); mask-image: var(--edge); }
.bg{ z-index:0; background:
  radial-gradient(55% 45% at 78% 22%, rgba(var(--vi), .13), transparent 70%),
  radial-gradient(45% 40% at 12% 78%, rgba(60, 50, 140, .12), transparent 70%); }
.ribs{ z-index:1; mix-blend-mode: overlay; background: repeating-linear-gradient(90deg,
  rgba(255,255,255,.05) 0, rgba(255,255,255,.012) 6px, rgba(0,0,0,0) 12px, rgba(0,0,0,.16) 21px, rgba(255,255,255,.07) 22px); }
.grain{ z-index:2; opacity:.05; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.meta{ font-size: .66rem; font-weight:400; letter-spacing:.22em; text-transform:uppercase; color: rgba(var(--ink), .52); }

/* glass, as on the home page */
.glass{
  position:relative; isolation:isolate; border-radius: var(--s3);
  background: linear-gradient(160deg, rgba(var(--ink), .07), rgba(var(--ink), .018) 60%, rgba(var(--ink), .03));
  box-shadow: 0 30px 80px rgba(0,0,0,.40), inset 0 1px 0 rgba(var(--ink), .06);
  -webkit-backdrop-filter: blur(24px) saturate(1.25); backdrop-filter: blur(24px) saturate(1.25);
}
.glass::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background: linear-gradient(150deg, rgba(var(--ink), .30), rgba(var(--ink), .07) 35%, rgba(var(--ink), .04) 65%, rgba(var(--ink), .14));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  transition: background 500ms var(--ease);
}

/* header */
.top{ position:relative; z-index:5; display:flex; justify-content:space-between; align-items:center;
      padding: calc(var(--s3) + env(safe-area-inset-top)) max(var(--m), calc((100vw - 1240px) / 2)) 0; }
.mark{ font-weight:200; font-size: 1.6rem; letter-spacing:-.03em; text-decoration:none;
       background-image: linear-gradient(97deg, rgba(var(--ink),1) 0%, rgba(var(--ink),1) 44%, var(--violet) 100%);
       -webkit-background-clip:text; background-clip:text; color:transparent; }
.nav{ display:flex; gap: var(--s4); }
.nav a{ text-decoration:none; transition: color 300ms var(--ease); }
.nav a:hover, .nav a[aria-current="page"]{ color: rgba(var(--ink), .95); }

main{ position:relative; z-index:3; padding: 0 var(--m); }
.wrap{ max-width: 1240px; margin: 0 auto; }

/* covers: the drawing, then ribbed glass over it */
.cover{ position:relative; overflow:hidden; border-radius: inherit; aspect-ratio: 16 / 9; background:#0B0B10; }
:root[data-theme="light"] .cover{ background:#F3F1EC; }
.cover canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }

/* cards */
.ncard{ display:flex; flex-direction:column; text-decoration:none; overflow:hidden; transition: transform 500ms var(--ease), box-shadow 500ms var(--ease); }
.ncard .cover{ border-radius: var(--s3) var(--s3) 0 0; }
.ncard .nb{ padding: var(--s3); display:flex; flex-direction:column; gap: var(--s1); flex:1; }
.ncard h2, .ncard h3{ font-weight:300; font-size: 1.3rem; line-height:1.25; letter-spacing:-.01em; color: rgba(var(--ink), .96); }
.ncard p{ font-size: .95rem; line-height:1.55; color: rgba(var(--ink), .62); }
.ncard .go{ margin-top:auto; padding-top: var(--s2); color: rgba(var(--ink), .5); }
.ncard .go i{ font-style:normal; color: var(--violet); margin-left: .4em; display:inline-block; transition: transform 500ms var(--ease); }
.ncard:hover{ transform: translateY(-3px); box-shadow: 0 40px 90px rgba(0,0,0,.5), 0 0 40px rgba(var(--vi), .14); }
.ncard:hover::before{ background: linear-gradient(150deg, rgba(var(--vi), .95), rgba(var(--vi), .25) 45%, rgba(var(--ink), .06) 70%, rgba(var(--vi), .35)); }
.ncard:hover .go i{ transform: translateX(4px); }
.ncard:focus-visible{ outline: 1px solid rgba(var(--vi), .9); outline-offset: 4px; }

/* the notes index */
.intro{ padding: var(--s7) 0 var(--s6); max-width: 760px; }
.intro h1{ font-weight:200; font-size: clamp(3rem, 8vw, 6rem); line-height:.95; letter-spacing:-.035em; color: rgba(var(--ink), 1); }
.intro p{ margin-top: var(--s3); font-size: clamp(1.1rem, 1.8vw, 1.35rem); line-height:1.5; color: rgba(var(--ink), .74); max-width: 40ch; }
.grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); padding-bottom: var(--s7); }
.ncard.wide{ grid-column: 1 / -1; display:grid; grid-template-columns: 7fr 5fr; }
.ncard.wide .cover{ border-radius: var(--s3) 0 0 var(--s3); aspect-ratio:auto; min-height: 340px; }
.ncard.wide .nb{ padding: var(--s5); justify-content:center; }
.ncard.wide h2, .ncard.wide h3{ font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight:200; letter-spacing:-.02em; }
.ncard.wide p{ font-size: 1.05rem; }

/* an article */
.head{ padding: var(--s7) 0 var(--s5); max-width: 900px; }
.head .meta a{ text-decoration:none; }
.head .meta a:hover{ color: rgba(var(--ink), .9); }
.head h1{ margin-top: var(--s3); font-weight:200; font-size: clamp(2.4rem, 6vw, 4.6rem); line-height:1.02; letter-spacing:-.03em; color: rgba(var(--ink), 1); }
.head .sub{ margin-top: var(--s3); font-size: clamp(1.1rem, 1.9vw, 1.4rem); line-height:1.45; color: rgba(var(--ink), .70); max-width: 44ch; }
.head .by{ margin-top: var(--s4); display:flex; flex-wrap:wrap; gap: var(--s1) var(--s3); }
.hero{ border-radius: var(--s3); overflow:hidden; }
.hero .cover{ aspect-ratio: 21 / 8; }

.layout{ display:grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s6); padding: var(--s6) 0 var(--s7); align-items:start; }
.side{ position:sticky; top: var(--s4); display:flex; flex-direction:column; gap: var(--s2); }
.short{ padding: var(--s3); }
.short ul{ list-style:none; margin-top: var(--s2); display:flex; flex-direction:column; gap: var(--s2); counter-reset: k; }
.short li{ position:relative; padding-left: var(--s4); font-size: .92rem; line-height:1.5; color: rgba(var(--ink), .80); counter-increment: k; }
.short li::before{ content: counter(k, decimal-leading-zero); position:absolute; left:0; top:.2em; font-size:.62rem; letter-spacing:.14em; color: var(--violet); }
.toc{ padding: var(--s3); }
.toc ol{ list-style:none; margin-top: var(--s2); display:flex; flex-direction:column; gap: var(--s1); }
.toc a{ text-decoration:none; font-size:.88rem; line-height:1.4; color: rgba(var(--ink), .58); transition: color 300ms var(--ease); display:block; padding-left: var(--s2); border-left: 1px solid rgba(var(--ink), .10); }
.toc a:hover{ color: rgba(var(--ink), .95); }
.toc a.on{ color: rgba(var(--ink), 1); border-left-color: var(--violet); }

.body{ max-width: 68ch; font-size: clamp(1.04rem, 1.3vw, 1.14rem); line-height: 1.72; color: rgba(var(--ink), .80); }
.body > * + *{ margin-top: 1.1em; }
.body p.lede{ font-size: 1.22em; line-height:1.55; color: rgba(var(--ink), .94); }
.body h2{ margin-top: 2.4em; font-weight:300; font-size: clamp(1.4rem, 2.2vw, 1.8rem); line-height:1.25; letter-spacing:-.015em; color: rgba(var(--ink), .98); scroll-margin-top: var(--s5); }
.body h2::before{ content:""; display:block; width: var(--s4); height:1px; background: var(--violet); margin-bottom: var(--s3); box-shadow: 0 0 10px rgba(var(--vi), .7); }
.body strong{ font-weight:500; color: rgba(var(--ink), .98); }
.body em{ font-style: italic; }
.body ul, .body ol{ padding-left: 1.3em; }
.body li + li{ margin-top: .5em; }
.body li::marker{ color: var(--violet); }
.body a{ color: rgba(var(--ink), .95); text-decoration: underline; text-decoration-color: rgba(var(--vi), .8); text-underline-offset: 3px; }
.body a:hover{ text-decoration-color: var(--violet); }

.sources{ margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid rgba(var(--ink), .10); max-width: 68ch; }
.sources ol{ margin-top: var(--s2); padding-left: 1.6em; display:flex; flex-direction:column; gap: var(--s1); }
.sources li{ font-size: .86rem; line-height:1.5; color: rgba(var(--ink), .56); }
.sources li::marker{ color: rgba(var(--ink), .32); font-size:.8em; }
.sources a{ text-decoration:none; border-bottom: 1px solid rgba(var(--ink), .14); transition: border-color 300ms var(--ease), color 300ms var(--ease); word-break: break-word; }
.sources a:hover{ color: rgba(var(--ink), .95); border-color: var(--violet); }

.pager{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.pager a{ padding: var(--s3); text-decoration:none; display:flex; flex-direction:column; gap: var(--s1); transition: box-shadow 500ms var(--ease); }
.pager a.next{ text-align:right; }
.pager b{ font-weight:300; font-size: 1.15rem; line-height:1.3; color: rgba(var(--ink), .95); }
.pager a:hover::before{ background: linear-gradient(150deg, rgba(var(--vi), .95), rgba(var(--vi), .25) 45%, rgba(var(--ink), .06) 70%, rgba(var(--vi), .35)); }

.cta{ margin: var(--s2) 0 var(--s7); padding: var(--s5); display:flex; justify-content:space-between; align-items:center; gap: var(--s4); flex-wrap:wrap; }
.cta p{ font-weight:200; font-size: clamp(1.5rem, 3vw, 2.3rem); line-height:1.2; letter-spacing:-.02em; color: rgba(var(--ink), .96); max-width: 22ch; }
.ask{ display:inline-flex; align-items:center; gap: var(--s2); padding: var(--s2) var(--s3); border-radius:999px; text-decoration:none;
      font-size: 1.05rem; font-weight:400; color: rgba(var(--ink), .95); transition: box-shadow 600ms var(--ease); }
.ask i{ font-style:normal; color: var(--violet); transition: transform 600ms var(--ease); }
.ask:hover{ box-shadow: 0 30px 80px rgba(0,0,0,.40), 0 0 40px rgba(var(--vi), .22); }
.ask:hover i{ transform: translateX(4px); }

footer{ position:relative; z-index:3; padding: var(--s4) var(--m) calc(var(--s5) + env(safe-area-inset-bottom));
        display:flex; justify-content:space-between; gap: var(--s3); flex-wrap:wrap; }
footer a{ text-decoration:none; }
footer a:hover{ color: rgba(var(--ink), .9); }

/* reading progress, kept off the bottom edge */
.progress{ position:fixed; z-index:6; left: var(--m); right: var(--m); bottom: calc(var(--s3) + env(safe-area-inset-bottom)); height:1px; background: rgba(var(--ink), .08); pointer-events:none; }
.progress u{ display:block; height:100%; width:0; background: var(--violet); box-shadow: 0 0 8px rgba(var(--vi), .7); }

@media (max-width: 980px){
  .layout{ grid-template-columns: 1fr; gap: var(--s5); }
  .side{ position:static; order:-1; }
  .toc{ display:none; }
  .grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px){
  .grid{ grid-template-columns: 1fr; }
  .ncard.wide{ grid-template-columns: 1fr; }
  .ncard.wide .cover{ border-radius: var(--s3) var(--s3) 0 0; aspect-ratio: 16/9; min-height:0; }
  .ncard.wide .nb{ padding: var(--s3); }
  .hero .cover{ aspect-ratio: 16 / 9; }
  .pager{ grid-template-columns: 1fr; }
  .pager a.next{ text-align:left; }
  .cta{ padding: var(--s4) var(--s3); }
  .nav.meta{ gap: 10px; font-size: .6rem; letter-spacing: .05em; }
  .top .mark{ font-size: 1.35rem; }
  .top{ gap: var(--s2); }
  .meta{ color: rgba(var(--ink), .66); }
}
@media (prefers-reduced-motion: reduce){ *{ transition:none !important; } }

/* tables, sub-headings and code inside a note */
.body h3{ margin-top: 1.8em; font-weight:400; font-size: 1.08em; color: rgba(var(--ink), .96); }
.tablewrap{ overflow-x:auto; -webkit-overflow-scrolling: touch; margin: 1.6em 0; border-radius: var(--s2);
            border: 1px solid rgba(var(--ink), .10); background: rgba(var(--ink), .025); }
.body table{ border-collapse: collapse; width:100%; min-width: 640px; font-size: .82em; line-height:1.45; }
.body th{ text-align:left; font-weight:400; font-size:.78em; letter-spacing:.14em; text-transform:uppercase; color: rgba(var(--ink), .5);
          padding: 12px 14px; border-bottom: 1px solid rgba(var(--ink), .14); white-space:nowrap; position:sticky; top:0; background: var(--base); }
.body td{ min-width: 9em; padding: 10px 14px; border-bottom: 1px solid rgba(var(--ink), .06); vertical-align:top; color: rgba(var(--ink), .78); }
.body tr:last-child td{ border-bottom:0; }
.body tbody tr:hover td{ background: rgba(var(--vi), .07); }
.body td:first-child{ color: rgba(var(--ink), .96); white-space:nowrap; }
.body code{ font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size:.88em; padding: 1px 6px; border-radius: 4px; background: rgba(var(--ink), .07); }
.layout.widebody{ grid-template-columns: minmax(0, 1fr) 280px; }
.widebody .body{ max-width: 76ch; }

.body table:has(th:nth-child(6)){ min-width: 1280px; }

/* ---------- the open-model explorer ---------- */
.explorer{ margin: 2em 0 1.2em; padding: var(--s3); font-size: .9rem; max-width:none; }
.body .explorer{ width:100%; }
.xp-bar{ display:flex; justify-content:space-between; gap: var(--s2); flex-wrap:wrap; margin-bottom: var(--s3); }
.xp-chips, .xp-sort{ display:flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(var(--ink), .05); border: 1px solid rgba(var(--ink), .08); }
.xp-bar button{ -webkit-appearance:none; appearance:none; border:0; background:none; cursor:pointer; font: 400 .8rem/1 "Hanken Grotesk", system-ui, sans-serif;
                color: rgba(var(--ink), .6); padding: 8px 14px; border-radius: 999px; transition: background 300ms var(--ease), color 300ms var(--ease); }
.xp-bar button:hover{ color: rgba(var(--ink), .95); }
.xp-bar button[aria-pressed="true"]{ background: rgba(var(--vi), .9); color:#fff; box-shadow: 0 0 18px rgba(var(--vi), .45); }
.xp-head, .xp-main{ display:grid; grid-template-columns: 1.4fr 1.2fr 1.3fr .5fr .9fr; gap: var(--s2); align-items:center; }
.xp-head{ padding: 0 var(--s2) var(--s1); font-size:.58rem; border-bottom: 1px solid rgba(var(--ink), .10); }
.xp-head i{ display:block; font-style:normal; letter-spacing:.08em; text-transform:none; color: rgba(var(--ink), .32); margin-top: 3px; font-size:.62rem; }
.xp-row{ border-bottom: 1px solid rgba(var(--ink), .06); transition: background 300ms var(--ease); border-radius: var(--s1); }
.xp-row:hover, .xp-row.open{ background: rgba(var(--ink), .035); }
.xp-row.open{ background: linear-gradient(180deg, rgba(var(--vi), .10), rgba(var(--vi), .02)); }
.xp-main{ -webkit-appearance:none; appearance:none; border:0; background:none; width:100%; text-align:left; cursor:pointer; color:inherit; font:inherit;
          padding: 12px var(--s2); }
.xp-main:focus-visible{ outline: 1px solid rgba(var(--vi), .9); outline-offset: -1px; border-radius: var(--s1); }
.xp-name b{ display:block; font-weight:400; color: rgba(var(--ink), .97); }
.xp-name i{ display:block; font-style:normal; font-size:.78rem; color: rgba(var(--ink), .45); margin-top: 2px; }
.rag .xp-name b::after{ content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background: var(--violet); margin-left: 8px; vertical-align: 2px; box-shadow: 0 0 8px var(--violet); }
.xp-score, .xp-size{ display:flex; align-items:center; gap: 10px; }
.xp-score b, .xp-size b{ font-weight:400; font-size:.8rem; color: rgba(var(--ink), .85); white-space:nowrap; min-width: 2.2em; }
.xp-track{ position:relative; flex:1; height: 6px; border-radius: 3px; background: rgba(var(--ink), .07); overflow:visible; }
.xp-fill{ position:absolute; left:0; top:0; bottom:0; border-radius: 3px; background: linear-gradient(90deg, rgba(var(--ink), .25), rgba(var(--ink), .85)); }
.xp-row:first-child .xp-fill{ background: linear-gradient(90deg, rgba(var(--vi), .4), var(--violet)); box-shadow: 0 0 12px rgba(var(--vi), .6); }
.xp-ceil{ position:absolute; top:-4px; bottom:-4px; width:1px; background: var(--violet); box-shadow: 0 0 6px var(--violet); }
.xp-tot{ position:absolute; left:0; top:0; bottom:0; border-radius: 3px; background: rgba(var(--ink), .22); }
.xp-act{ position:absolute; left:0; top:0; bottom:0; border-radius: 3px; background: rgba(var(--ink), .85); }
.xp-size .xp-track:not(:has(.xp-act)) .xp-tot{ background: rgba(var(--ink), .85); }
.xp-none{ font-size:.76rem; color: rgba(var(--ink), .32); }
.xp-lic{ display:inline-flex; gap: 4px; }
.xp-lic u{ width: 7px; height: 7px; border-radius: 50%; border: 1px solid rgba(var(--ink), .35); }
.xp-lic u.on{ background: rgba(var(--ink), .85); border-color: transparent; }
.xp-runs{ font-size:.8rem; color: rgba(var(--ink), .66); }
.xp-more{ padding: 0 var(--s2) var(--s3); }
.xp-more dl{ display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2) var(--s3); padding: var(--s2); border-radius: var(--s2); background: rgba(var(--paper),.5); border: 1px solid rgba(var(--ink), .08); }
.xp-more dl .wide{ grid-column: 1 / -1; }
.xp-more dt{ font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; color: rgba(var(--ink), .4); }
.xp-more dd{ margin-top: 4px; font-size:.86rem; color: rgba(var(--ink), .88); }
.xp-badge{ display:inline-block; margin-top: var(--s2); color: var(--violet); }
.xp-foot{ margin-top: var(--s2); font-size:.6rem; }
.plain{ margin: 0 0 1.6em; }
.plain summary{ cursor:pointer; font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color: rgba(var(--ink), .45); list-style:none; }
.plain summary::-webkit-details-marker{ display:none; }
.plain summary::before{ content:"+ "; color: var(--violet); }
.plain[open] summary::before{ content:"\2212  "; }
.plain summary:hover{ color: rgba(var(--ink), .85); }
@media (max-width: 760px){
  .explorer{ padding: var(--s2); }
  .xp-head{ display:none; }
  .xp-main{ grid-template-columns: 1fr auto; grid-template-areas: "n l" "s s" "z z" "r r"; gap: 8px; }
  .xp-name{ grid-area:n; } .xp-licc{ grid-area:l; } .xp-score{ grid-area:s; } .xp-size{ grid-area:z; } .xp-runs{ grid-area:r; font-size:.74rem; }
  .xp-more dl{ grid-template-columns: 1fr 1fr; }
  .xp-bar{ flex-direction:column; align-items:flex-start; }
  .xp-chips{ overflow-x:auto; max-width:100%; }
}
@media (max-width: 980px){ .layout.widebody{ grid-template-columns: minmax(0, 1fr); } }

/* ---------- light: follows the device ---------- */
/* light: follows the device, or the switch */
  :root[data-theme="light"]{ --ink: 24, 22, 32; --base: #F3F1EC; --paper: 243, 241, 236; }
  html[data-theme="light"]{ color-scheme: light; }
  [data-theme="light"] body{ -webkit-font-smoothing: auto; }
  [data-theme="light"] .ribs{ opacity:.55; } [data-theme="light"] .grain{ opacity:.035; }
  [data-theme="light"] .bg{ background: radial-gradient(55% 45% at 78% 22%, rgba(var(--vi), .10), transparent 70%), radial-gradient(45% 40% at 12% 78%, rgba(120, 100, 220, .08), transparent 70%); }
  [data-theme="light"] .glass{ background: linear-gradient(160deg, rgba(255,255,255,.72), rgba(255,255,255,.38) 60%, rgba(255,255,255,.5));
          box-shadow: 0 24px 60px rgba(40,30,80,.10), inset 0 1px 0 rgba(255,255,255,.9); }
  [data-theme="light"] .glass::before{ background: linear-gradient(150deg, rgba(255,255,255,1), rgba(var(--ink), .08) 35%, rgba(var(--ink), .05) 65%, rgba(255,255,255,.9)); }
  [data-theme="light"] .ncard:hover{ box-shadow: 0 30px 70px rgba(40,30,80,.14), 0 0 40px rgba(var(--vi), .12); }


/* the light/dark switch: a small half-moon */
.tt{ -webkit-appearance:none; appearance:none; cursor:pointer; width:18px; height:18px; padding:0; border-radius:50%; flex:none;
  border:1px solid rgba(var(--ink), .55); background: linear-gradient(90deg, rgba(var(--ink), .85) 50%, transparent 50%);
  transition: transform 600ms var(--ease), border-color 300ms var(--ease); vertical-align:middle; }
.tt:hover{ border-color: rgba(var(--vi), 1); } [data-theme="light"] .tt{ transform: rotate(180deg); }
.tt:focus-visible{ outline:1px solid rgba(var(--vi), .9); outline-offset:3px; }
.swap, .swap *{ transition: background-color 600ms ease, color 600ms ease, border-color 600ms ease !important; }
@media (max-width: 340px){ .nav.meta{ gap: 7px; font-size: .56rem; letter-spacing: .02em; } .top .mark{ font-size: 1.2rem; } }