/* NoteKill — design system.
 *
 * The look has to do a job: read as a serious security tool to a sceptical
 * engineer. That means dense, precise, hairline-ruled, no drop shadows, no
 * decoration that isn't carrying information. Monospace is reserved strictly
 * for machine-produced values — ciphertext, keys, hashes, headers, byte
 * counts — so that when you see mono, you know you are looking at real data
 * rather than styling. Terminal-green hacker cosplay is deliberately absent:
 * it is the visual language of the phishing clones in this category.
 */

/* Dark, always — not a preference-following theme.
 *
 * The palette is violet rather than corporate blue because the subject is
 * cryptography, and violet is the colour that field has claimed. Mint is
 * reserved exclusively for cryptographic success — decrypted, verified,
 * hash matched — so that seeing it anywhere carries information rather than
 * decoration. Amber means "about to be destroyed". Nothing else gets a colour.
 *
 * Terminal-green-on-black is deliberately avoided: it is the visual language
 * of the phishing clones in this category, and it reads as costume rather
 * than competence.
 */
:root {
  color-scheme: dark;

  --bg:          #0A0912;   /* near-black, violet-shifted */
  --bg-deep:     #06050C;
  --panel:       #14121F;
  --panel-code:  #0D0B16;
  --hairline:    #272238;
  --hairline-hi: #3A3352;
  --ink:         #EDEAF5;
  --ink-2:       #9C95B8;   /* 6.5:1 on --bg */
  --accent:      #A78BFA;   /* 7.3:1 on --bg — safe for body links */
  --accent-down: #C4B5FD;
  --accent-solid:#6D28D9;   /* button fills; white text sits on top */
  --accent-glow: rgba(139, 92, 246, .16);
  --ok:          #34D399;   /* cryptographic success only */
  --burn:        #F59E0B;   /* will be, or has been, destroyed */
  --error:       #FB7185;

  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, "Liberation Mono", monospace;

  --r-sm: 4px;
  --r-md: 8px;
  --wrap: 1080px;
  --prose: 720px;
}

/* The wallpaper is ciphertext.
 *
 * Not an ornament: this is the same shape of data the server actually holds
 * for every note. It sits behind everything at very low contrast, fixed so it
 * does not move with the content, and hidden from assistive technology. */
.cipher-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  contain: strict;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.65;
  letter-spacing: .04em;
  color: var(--accent);
  opacity: .05;
  word-break: break-all;
  padding: 8px 12px;
}

/* The wallpaper text itself, kept here rather than inlined into every page.
   It is generated from a fixed seed, so it is the same on every build: shipping
   it 16 times in the HTML cost 18 KB per page - over half the raw bytes of each
   one - to deliver identical characters. In the stylesheet it is fetched once
   and reused. Purely decorative; .cipher-bg is aria-hidden. */
.cipher-bg::before {
  content:
    "PLJqZ0/AJlFTTfVV3baYtCWZmjLBINPSbiJn/1HpCZ6kFkMPs5nGUpoBqin9yNk8Btsd5j050vd0tSloHD31kCQVRA+hhDw8k+trH1JLYrDvHJH6R3DpsgubT6Cxh5jBKZEek4tX4Rxk+yG1ry2VAFCKo//6xuKWnhr7aicc/3EXzwEuOC94f55OV2kCw+Yia1bjhqap "
    "07XBRjUevPv8JfEUsQcLSw34M+Li8CaoCwvgMUzpRoZwxoQq+uhNyt9BvOMSKqXy4WSFRYNuHN4rf7PNyIK3a5GeJihpiFWLQeK7wmSI3GzjbI4qeg4heUhmfthKZRmdOMWaw0wD6z0bes8a1SmqRo4nUFf1wrazceOMV8TuS9mqMOpvyoRVoTTdptebFuhBwgi1vDDD "
    "BMhQisiFXGnC2JPIp2JC9MWaP8OI8hmUXnRLQcl41Gnj2wZGPrYNOMGiR+L3RDaIYou+HMn8BZNBVaYi7cwi5DOjxjJ0I0QcM85JMYOtJjGj1mZZ0FwPSSBdhR7bd6fchKYEdVgnq7ftkXS00GxjeGtGfwyNBrNkGjFBIoL9QTXK61DEydbig0AqqYK47/n4+zqeYiYE "
    "U7dtw0oXFr4E0rGRaH3T4P0MqjOCh6gQxO8fHapOjGRMGKdzFuGRVs2MJ+Ch9AzKMegiXCK6waWEk2eM2nf/y7345/JmelfseUVlkYk2D3bUbF06tQ4u/sR0HFP9wxygYM1tdEf4jU44l9zKvj4tA1+gZKRNn9S85/mMRatthEfX7iUzwzo0/XywAQxHtt6ewuuylsok "
    "mUunl3m4wBpSy2zFAZcdaT/BypUy9Wqg3JTZVngYCdlcDtnRbLuNGtoMlBh1NMlIDH+3YW6locL7TM7OhC27lnY2hm1vKkxevyrG3JQJ1IP+nDXeVTmlNAmQMMmczUcOCONzLCYg67/CYAQLi2oLERAvalMgncv7spcpIXWfnIPxhntx3nY2QR+/cSEK3rplBEyWXMKb "
    "CJLVZXParZqMROJxSaRV/cegmgJkOIbgVaXd9WOBqC3z+sC9Knxj1xyWPF3m/AI5nS8bVRVia2XdQb3ToUDEk62hQaXHbX2gc9v+J3cGEHaYwS2442zxd3RFnpNIsPJryxp6cahKqNwT4F7w60xcOiYUZ9nmvc/JBGnG7sRcWjjkb5LJdxXb0bbd23YEoXnhdSOEg8Fa "
    "eIlRXVwA11Kta6EX/8KI+67zzcpSxeOI6mrbTpNPzRz2+Yjzvdexz+GYeOg+deTm/hLCtwldrjKTW4XFpweqmJe5vApDt3cYCGny78zkNImf+ou4HOClDRVV33dwgHXjYD9+WJNB3iFF8O5W8oSflvvd9hbGTb4qxBR4TJmTINxtZgUB58IYFkVm8rM9UExhe6V7jzv8 "
    "tLwTr/zasNqQ+qaEbS6O9gt8bOH6cLSI04MbnTVeog+l5vPIU6XkT1D9nWZ9F4IGezZdSUiCckmNKd1N4h4KXdmJeKZvLs5mzt6xehfbGp9SpTQx8kbbGPsG28Xt+GxesP+thsducDokjSyzvlGkvAJFhLYLsvFaiIdW8qLN+Dx3UdnbJxuS8QJpRFISM5/igVQe1rKo "
    "g3QAXHF4sHZM14SNyEH9IorfuxRRzvQnGhFtYy50tFALUQsb3+ooeCz3/FvMmgLf1rHBjeu5J+68BXdP6MNPRVWegvWLOUNQunCI/hRcopjpF45SCr1aEbZ+C9feLEOl13VxW5lAmjDpVSZmYMLNOQMzAZb6j+Tx3eiYCdH/EQUNUffjSyszQEbP6At9CAUKtB4FBd+e "
    "6eJNYV4qBOQvrHe70yaUh5j5OSNvuGDpsiKR5sspWOdA8U6K5ge+Ik7T0NFK7He/wW+PX1dpznye7YkDBXPwNfYO5LXKGymr2T2+Jk/KQm8A2amObOFLQu/WpcCh+EHzXzAjfVL65aTJCZu2WXMIj5eC8lgWCoErp2IhcBS1wFUC8de2NipaSb66Mo87JHRP7+GOE/4x "
    "rfmY78gdrtaBrW56gEGmwesbinAOxP+KcgxMi5EDprqvrDD6KZWZupRjMwkVWdfxb0g+ZZNwr0pUUCIZ9CRUo9SSsFs62IgxA2GkPn2YdIJcHSAYXYGpy/YYFGz0PFFpk4w7hmRUO+eYU4Qw+67IgX+c44BJ5o1IgWb7YrhkrDMpdpHz8aiVCN2tKpdvGoRib1cFso9S "
    "Q08QIuz7FZkHA8+jvVijuCzxP4KCFUIs1BBjlbPMWTx9dhHr7vsoVRqPUJhDEfmX1gZoBzmjKHHuaPiDR1XVMDy+H/hjkdIL+4cTYwZVNnt8TnMI90ta2IGn/e+fc+pdME5E0SnEmINUOGB/5YB9h3ciEQRQUdbVIYBSs9XZMieGSdtC77n8BXMBi6OLiE9S4XNcRCU9 "
    "fLAFwWWDT+Cs8GEP6VcRf+P+LpEV871pWFOQbbpEQ/01pKwN607gwsECQO5Mv+obLTdyWhelOwMy60la3ozIybAUPX0iSP7cizEVdkYwgIsLxWlqOWQAuPOKL4B4zn2c7TtfwYKkDXkECE6wwUj2V7HphvXcoEqIDhqNCrtPDw1Pz8cmTlhr6eTvUxPGc/gHvfDDqhV3 "
    "XagndBFwhpEywYOLii22CHg46o0aJa1f5Y9E8yzGsudBsIWOs4aJgf82/B45XDf0uKUPCOm0F7zGuWuKkpczZ3PQiqgJjQWqGbeggmWgyflWBQrN64aRR4EofA3jTi7/v6w5+83LLFMxYtssQcaumuyAsmDjJqAu0Qgt2CG6Xr7WxsHWgJu2J1OQ8UFZGsAWopekdtCn "
    "3SxYUPXX3ECK0O2Zb0qhUofHSvGowb3bIQoeQkraQ1BlhgTAEeAilE1gr+egzQ3o69DwDD2rErsL9KrHXSakRsofLTYuSav5rDYrDs1cDLMUnAKmrRqMVX1cJ+IAtPtB9ZvjFk15oSJJeW0mL04p8sB32yUjE3gQFaiHBx5WzHvuy3f+EWJr5mu/si/rUr5JYe5CMpm8 "
    "DI2mKvqGsxgG5oDTudHZGh0Z7tcHL5k+VeqJyy0eENUjCtKhYMwpTWYoNKmvotDluWo1BZxdRDDqYD768CM3HwgpABPZNtMt1tomXg9UsxDYpSf1KlgyJCJSdmczzizoKr2iMOfU6VYy/d950s3TPW1IkhbNmPkf7kj+uDt9+doOMfAGK/U9eLLqrWeUeoKmai+6Y56V "
    "Uugwfx72URVTcl7g5uHFIWEH8bSe3y2xOogdjk2ZC5DiJq4PibNNgsQTFeaG+cNzfg9dQI3RAoOqRURXDN/RZ+EAp3ipDmmg8PNcKCd9erqvwHPhpyJXtm3JnPoxbmFWY3YuvpQlDB3cSBfhfL2SY8B/HgLzR9bHZk5Eo4tpR5nrLURasL0bQ8gipRxdr98Rn36bfT46 "
    "USwlZyTUj8cZWafmYgXlif7FJwVeS4Jjsx/AnMmTfpy6Yjv/CqpuHdMpNki37IR2K4QdEHj7FjTDoA/1+MCHhaMODIsJZvB6MjNYtFW324gBE51yif7zfBCbTYG8LKUfiIAmpgGgwdtH56jFd/wu+CEFrlACu7PKArN0N370S/zbeWkWgUhDeA+NdMyI/W7PAv7BKXmX "
    "/bLYZdjglSs7zy2yo/OH7hC/4+WIEjk6XnPZn3l97AGEEb7yrSpEaPSDvbtFZip/9sgoASecltR2mgIAINJV+Be9q9cY/58wTKj7OBSNIJ+HDO9hr6twdnm1nNsjQH/wZ/idEuQF8gi9Y1Gw0VhlDG0xZ+MfmYUzrfsaOZN0nimx3qZDTHfNdUqYuEAxo3Pw/FKUR5RX "
    "S6DotaF/3r6rvzydcPiJ+LdRleIj5VdRpXxOCTKeNHsV/rjZRSUqPMPL4rEZiV00qUkmdLRVQSmMQszHV4g/6uMQyD9X9b9IE+zj21vBZIMuINup+beNZYZ4Jaf51s6wcAZx+gG9HsP8uuZG0k7I6o1CcMttcsD+IiJQMz56z6Z3eW2/kbNEi2IuppDcTBbBYkvkK9jO "
    "O6I6Bz7hYZrB20Y1e6D3zwVfmsCBCpD0grVVBA5nnNAz83BC2R66oiS2dkltrKxtvaUhv3RTYdpTcBNyC70p3UTJzR3TNmEmU+eDeyzmj96mxkaltrDt5MJdcZSa9ycJ3lZbI1rRPclcys7c9yKfAj0N6Vlu4gWir/jxjodPQtA2YM+DJmehmjk52tAfD50fWTFcp44s "
    "PEksCKmAM/5gnoGA2T2ufSOCIdSD1EILvtj3l2YatzKwxcR4yGCrDBmezVGc7SdpN1N/GyWV6RWtyE+tJ/VbpC2v6oigwAylz1e2U4IwPqMXn1ZPhuqcrpqZwgWP/8BmACzuFAQiT1bRs/MuczZIkA0qUBCAmHx3z123E8kHmZR7IOc7F1g0y9/049BZ7VuFYjYq5d7t "
    "f/deCb7SOPP4fWo7TJKwMzgUhLaVAkBDB5CiN6k57zFO2GKfZNtrm0vozjNr/KrM5O9zEVC9eGzG6EKIqlz1W6+2/RRFq3ci0XFzAMKtuclXF7JGY66f8bmyXW76R1lIELh1UZG8vOcYnxu2cIaD5ABklyQsYMv1cjB/MHm9U5QckmYufrc7T9RcDxAvdmtw2pdfi0Xs "
    "EdBoq20+cleQRcZcREiBfbW7Ejy2eXj7CMVmRDANmFKMSI7PXmGOqdlSIXyrfUlmV59D7yjB10GZ4Pl/YohV/ChK0tarDocTx0H79sd4PwcEBEiR/uLLhh07UFJroXpw/wkljrV2v132JkBbCRoaiBeWXu7sG7eF0fmHypoFPzB/Dn8+oBfFVDPUUMNxuU34tPGc2sMi "
    "c68HNtHsihzlo1zpue3zIFyFSKf0k/UWvBPZQN3ksAVRqd/VQxdTIUGoRWvZBBQ8l17xs1KIxC1t5hJo0t6Byi/MuVvllTXGD5tVkzoBehso05Oj3lIpGgQi1J/JzP5a9zdRPPwA79o8SVbjI8FAnP2+uXd6ZVfgVyFu/PgwifgKrN5yZMM9c6sJRPvPEbGGabuaMJ/o "
    "5HMow4Mz1oKYQzX+5BuiQmpOJjhRrOoyHDlLpAEvT+5B+eNTVsvwfCYARnGriBXvqENS34yBzdFF/brSzldcttW+I61c1bD1rAP/8KB5/GYeMo0BlZBzqhBjojex4JONEMVlfHEkC1lySOJefNsUE95IR4a4THr19K4EY79Zp3EiHHrEIBZYF6D/GTtXbZGZsGRpGIvn "
    "dXfeRUNZ8t5ZrkYvO1zo1ky30zeKPnONzNXsCXUiKGz/82l3FVEjfPuiTO8PMz5yShJKQH52f5xU4EcYBWAvr1wJyX4CmE+fh3y6/H2rLOCWFV3vRJVlBJUh9E4wt6U29/S0nv3+U6+w2XdmXW6KDadS4Qp74Ard8MBmI+0RqU/BI1+z7L/0vS4gK3tDpxc1NAWMdCts "
    "fNzay4tSa81Gaa+FZi1H9ubH3ywzRb8B0dGgJrlN4zlVMNo4ggZsbKN4K/hKc9RuHwdcqx5Bkh+G1MnoVKMJwGn4jySUJrgGaWVoPjfvS31QCcAyMCMnyBHEs17WmAJKIUl3kvf2BQzC18K541JU/qRbg3XExEfhOBu4WdbgXWsC+fQRhHqZ+TFo8eCw6Fjz2GTcTd8Z "
    "a7czzbKZOTXKt2cdGSOQNDBko6kcfbon0ykWO++PuC+iLKVFZcoBYfaEKUMK8jv2r/RzghzY3rKV6HapGLMSPhmDFF9cD3rMnZKNOFlM1GeYAI1PKjRf/kBWTCmWnrGE9Yr3WbKqCZh2b6k0KxpIQyBF+wIxAtP05d9ttP54z+0Rozkn7HBpw7p/LhaQsOiv7dcLEe1G "
    "+yNdIM9QSw3BaEuEc30oCwfo6SoSrlOfmQck5lvqSZBaeYbTWwN9zjmcpi7bFgVu+tONgH1HcfhuzF3a9cGG86eS02nMFIVo4TIXS+ofQO2bb6bcJasnqnDHFK0VX8nOL9RDtdPRa6cyjWTmsJVoNfr0TJ1KdMPiysDEhbv0OzC+HMihcv1hihXLFWc2dGVr7c7Xd7Hr "
    "i1xTdzeTOmsc1HXxuJB/yZs0SkaM9dRLVYsqjpqRNxXqDdHhQiCWmDDHoWDzU9CwaVadlwjXpCgqnhivHcQRIgRNfnqKB8lJaj8Vl3v+kXaau/75hUD5POcYLaNfB0vgjqFZxec6L1C08vLl2VbiSMPps1RB4DClzq53omlqQW7zlauKT69Ql9wXqnpMaM6M4ioT9sVL "
    "uYJ9wCle+AQ7EzNIFrJk07/O44uGhFW3PCuRsYUH2poBLpLX/dchldc+COnDhipbJBJyHDuvVIx/SHqZaUlSsLlX8U97Jti0pvTP5U1c03EUVpYsuZlx4YwGWDJde/zri6ooaqqtM+II3s4FfiJf4QOz7cE91rfOlZc0dZUf/jpxLMGhZwH5POlMcZRaWKDL/sP6VSt1 "
    "8VYjL4CSLEZyW8XbEtyIaonQ/VrAlze0km7pk5xoFO/0Ar4NDPmx6jC7sBED2nDN3j/afArA02k9hxJuXchvTdoJhsUubitJIsOkSzcKErSSDCrySxABmZ3XAY5NVJVhA1qNMMwcearRhTqVR+8WNgXcCHZ6n86MocmIyJ9//hJCfgJhidRaN0QF7tctFZgw2hz0WxX2 "
    "X5zIrlM6rvxE56VBOBZXwfkvrInThDJZPzXua77lmyBwvvHUeOBm5KWY2DFPcnLkspOXiWR31oy+6iY+rXoQIh+IarLbwZeywLmRcsHv/dQwjbg9oYXlYECqdpZm0K8Zp9MVVQZH6YTKXZMI7sO8zpEUsNIVVGqPixJjQGNRVUw5KjmPWbXCDMdhge2Fphf8mer9aQC4 "
    "JdYTQe+/+H+nMAq5TrOR6utZyvh4tgj8xHI32DUdYJ8ZhCvVLJugo+xX7tJ78aHVu4+nJ39VIAsjZwaxafwpqKanzXT0mUt9ckSluLxAc3M2wWdAwYAHSJcZvlBBr86htasfVw0UdJC7Y1szIopv9PJDkMjIMJX3SXs+Uy0vp/VPdvwJ+aBeI1d0L+yqleR96Z65I0wS "
    "+2ohU7w5wVaLzTfieUJpRk6PPVhd9HA3QcGNR8DVo/YKM2JPG4oCMaZcGGHSAfjI5m5CHEVUYggrV1s/ygScMNM6Te/J1OWcFa+ylNHSZ/r7jHJHk5ztqud/KmTfsjNROiYssCiy09EnIoC2yYvOiQpSM2C+a/GaH5P8QjSqDBFktW8x4Ehbo5PSj5TMHQqr0QNXN5Ck "
    "lqdiij9xSnHtaRaNUlGP095AqQnEmoicVpZJvlLfBYqIIiQFOxhbtikF0k5uOKS3ypH/9Vu/1JWDoK6Db07RZJjDIf+HaaIPv6IG445eRf6Ilc8lxKHxCJ9LxopVk1CY90m2CofRH7AapQFkXtGRid5BmCTyGgtisuDTry4tC9H9FCo+h+uRe0EUHeb6WBI+N/sorHhg "
    "dH69MBJwaIUm82E26IGp3NoynMIa1ybfKd7cV+vNY9BSe6AsyWlAANYcRzNRNbaegdKI2ZG9RVzZqBMG1sMizce9TKuWMFGs7KuLGhQ6F/IkYZKjWcOTfiuU9D7pLH9q5BR0Kc7yRdXM1bKFy7FKudV2/dRlaO3f2g6dy4iEkwlKVJeLykbsbiHWHvepzxCiBRyD2xmw "
    "lmnGdxUg3jPZJ80qZ9MMSiaOu5YLekF0sRo+wyK9LqXsdNOUnYEHKr33H+ob0CCT68MkrXWRIf8kGU6BpeEASCsRoRPe97P6vPYhsqHqW8N4IgyNFzkScg2CFToqHW8qjnrKjmpf5J3oHVa97X1uTJWRrvxyznFKwFto8+KDOZmEWnNfiVyCk9tFvbz5VG7RowIe4T5Y "
    "siB7M7RFww5oA06F8CLn8x+lKAOGEOHM8sI17PEHOt8Eg2QCTKbsSI15B2fBNS4nPBVA8MuL+pPu88x7C9J/h9PWXePyKnOWWMS39cZKzuhF1bAhTnxvJMQlC6gm3HAwsHMgwsXA7QWMguQqL7APlKitZHrT38cO4AHVmH2GIb9L4TQVvPqY7pcR/l719JEjVcxK+z12 "
    "NH63rZEat2/Zepq7r6qxB6BztcJj8rDkTt0IcmdB+2nxRUCaHxsW+oKFteoWzlbJ9X0m7e+ygLWfj6hDdjSH9I+hSNtIcvXqOD6fBp8/NiEK7rTW+GILiyIgUhxU11V9JNYPt4ESMJFHVbPrW0J4UkAAkP8XFcXQQujf6Xy0FMogdWpjgZQ4dZm0/xbbOV8Q7Radw+Z4 "
    "C7NB5hQyD5BsEvwTso0pVQ83RNJe1MDFzG3p8sp69gvloYUjucYPhWej0Sp534ZKdLOk3xEn3GPVPzkuzFzqqkUveP1/vXwKuHsmpDk3L/t+Y3uIrBGPQKlBbjuWd6SuI02sjfwlLfYV/+oCiCIvGxTUJ2uE9iUwi6NKUQETFIjUcWjK1qrX6qwWM5ceuMfZBUSSlpsA "
    "mHYU8cQnBEGDaFWtHXVGQbBHJf5WaeJYGonPdnH6Po2QwQCN/FuUOTFOcNWuq812wPrdFbSoGqjVdLSARfDaK2o0pDfZ2CX4o8vrklLSNBN5iuzWKhAPa5YCI4O5YPYa41eyqhlBH7m8JomJcpodMD79+2E1AGSlWbtp2z6K82osLDsErqBfvV75GngA0XOgyr/sfzvP "
    "VsLCf1ERTDhNgQMDYruJRhCPj7Zaix5ck8C+G2NuXLWkdJJNVfqIOtfLJYPb+DrHUWSlET0m5uMQQg1XwVFBMiayIZV3BBypy1iEM/fRpJRo3oX09ZQhAEZeIbVt3rJIrSUsQSw1JQvjYNJY1ONlqyyXCCoYTOXRRtX5FTSalPfZIcT09aq4ntU0lwn2vhDio5axDz9/ "
    "JpycIhgcTf2H57InC9nHalF3iN89Ny3wuqZdaRYaOcRUnDpbDcyGjKNsQBzVS6/YDncDw7Bdb5rfCdix0BjgcyRrW52OiEdjq6tJiICJjzWV99B+dWI7nRG0/yZch2N6aRD+cu96xPTyS2dzl2QjBNHoyd1Wf+NGQZOPhEbF98Wdg117iIJhThjaUfxhKUNiO6UHPBrB "
    "BFe/ZjV4bXLyn+bSuhEuWM+KlQwkFpJXenKJ0w8kLrKJdNb6MkkPbWEIEDTs5zkmXs8s2pPAfA3g4hgMq7zUlMbyTKZnahD0DYRwEyzNwsmT/4ljyMbkAWw8SRS3k42+PT0qxF5ebVbJlNl6rOOO09Nza1NbVL66L2HrofyrWa8VWzaWBwskpOcHnbzdJxDw3bu70DOc "
    "WqptXW8NB9pgxZzYsYImJ4YGUgkp5tdod7ahbAnapcyjJLfwMQvqfO0bdiShY0qyCPxspjmP9kMA7tgcRqWXidagdv2//7gZ9opD9iEVlMvH0ntT89qYblw0nyk/jKTtt/JncNHu1+hB582tWCBD4Kkcw9OhU/cLJr18jlTaxorCbkM7ORlIvNh6lPGrrPQRsBd8xOvq "
    "VSb2fvoi/A0vhBZD3xUFvZjyyptaBvGMqexkfL+1/V+ecLrvZ09P8thuVcTO3hplKwGzyRdWwR1Sz/TKL5zzPQEXeDEld8yR9ATq/f3EW32W949Whq1fNNs27SaoBqTn0N0NHXUOUTyjt+RylnEnTdSuJwp09RD3/nydvPk6h7D42mZSM2z+X+xZCTMjYDr6rzue36M5 "
    "UjLtUpwxtN4POOj6lTdfMFQFC/0zUVqpabZTeDh3Ng+s85DR405uAZjOHEIgC8ymeCtvFRmLeNg+eYVMU+lBA/tmaZNfUEwClXKMCwASwjcG7x8ORa0RAmM1MCwtk3e6DYdvAX2OJ7+FRxkkPdoBiaf53+5/mGGnhLeJMHnD4+lHqAboDguwwo7lzGku0d4YLc0a5Cbg "
    "KL/B5gkwWKDDeT+NsdpbWJIPXxWX2mz3sC1ocFVfsp8V4mbwzN8u9MrhJ3selpdTG1jXo3Q7e+5IaE1WVwfFWc+Ml+kmogLV76Yhckwg7UhgXPSR+B+RvebfZi7sLY742RuAueBTxhVlf6P6evOkQuEHkIqKA53m/Un4tVgzUXL+HPwIJuTc+RjXVeFq+qLk1OslhoP5 "
    "hpXzwIxw0LFdcYXDa/irwL51+aIEaOc/iDLo4rtWnqJZrxJCI4wCcOxBwpZvilO7BBt27HC43VY1zgIj2E1R/zdYYJr9u++ltOKeec7/sXmBIWtNu/E+/en6Qpi4BLdu81jsD+NImnAk5aBHAASuQ1AEt+JTwzuC9QTON1K0fTBtsVYKjFJH7xME2IXfWaVbZffU0T15 "
    "dPAl7Q/yaPCI77kmaheUXra30ngjo70+DbGPQyWG29rdNEhBR2ZHA+NYO18TdrMlBjCU4yg8y8fGBHsWWMFPLcR+fb7V8hloJDaDlA+bNvryxL4C4CtLQJ7QJ5ybCHRitMVP1nT5zaTUvrnR2jNKZD5CwBbzA0eQcBv1gEBZpHzBn/J/uavZ4syJjATaSHmBuZplJtIQ "
    "ejDQWLBcp8dZ/s6oqZ36II5+TWGNmYgV81xVPcCTB7mAHjr6+VjntJVRX/l+y9Rs8guUHILiwQW/MtaOxvN4Feu52YLFXa+UqcGNLcLc3nPS4gQoxUo3K78GcwO4hJXpOt4iq54NAj0HSWvz2UXXJcaZTdFZBpLee+dLcaucheSqOmyeHs6zc7OC7BkgzvYP4lzYuAgH "
    "MdyBEj3bxhTqBv+mT8/5CZM9Q2/BPu/H5PedtDrJ7L2odPHA/ibhSQwxyBmPBwxICPtft5d64LnRRj3ZKi7UElmvQe/S1DNiT9zb5SVz5+KX4LMxMqB09KUFkfYNCTrtmLM0HOraXKVmrQ89x8lIVk2zFvh+ARKlm7D1p0k/TX5UvBr6F3tXLidWiuzm8NxTtgGz/fgr "
    "2EuyqEejNszkB0Ar8EpYEqHZ8BUOl15Xf1i/oES96CMyhB4nNV1RTZREh+ql1SoMC5oqbBZNeWDZPyvmXmiIN8q6tQKfUl7e2wkyivgXJf+rydoyBtZIzcGmnk3BOSzwDbLtl9L8mdR3zguW2IRRo39LyEFG3ALGMc4BXYSX1yWrIejqLABux00Ausur3bfUYQVn4Glm "
    "AHrBJf0/0qGN9Cy1u4DOLgd8BtdALBsHSemmDfwM4emjuqHEINcIbu6jVhjaZN+pFFK4MWAkPfGUBc/2gLz+oXRj+A39eN3y8CNysgB6jJ8vK2xX6QIpxoolwkc1tnJQf3xnSoLWc2yrbdO66tkD/ZWNg4NoDgYluVsVVXYKg7HsMo+r6pgJ0nGiJA5HgD7mn0tUl2Ye "
    "6qw9mubaE6Y6ZfvOjyRMPVTiOgmWFzn1FlQU4b33pj33eAYLG3XDa+iQ67GB6+MB6Lb27j0nqkWAWHEWhzJcKBrI6pnlhglqB5pPbPIBVaF/6jf+4TANveqdOZDCW9A91jYTwMRSc3lC65dXHYN03cx8lfvn5SSPmfcUf+m35+13OVlRDKsxRrxZD8X7cNVZdtS2p7dh "
    "Q/2zHKU6AqpjT0WDJomHwohsXG3J5UNLR8d+lFBymTJmkcFoHUgE2U9YpPOB2NclFvHjyCG64cXG1CvvvG2BX6MAYfr2HEYweHL7bPo7dwumTFlQzx3dj0mLrz1n7HOx3VTAqO0xcVoNdNtfiJ1JzD8OuHgeyZki6dTgxcllmv1vs0ZaH/KPmMGGuzTKLPME18rmWqJm "
    "fyuS+gze07bjs/UiCD3mH/3OsNNkX8uSjCnde7EdwAeMO9udfdS3tciwmVeehJqP+brvlx3SI2ayOQ6zxlY/UrnMVXOLs1xL9ZP4kV73IRZAxfeqt4rCT91ddL9iubkvlfCnzYMkFYMB7OR6vJ+ZKDpYrQMKgJuOrQaWYFUZf1WdtVjGvUunV+T3fG/IswT7ITIebC1a "
    "rYeg26qwXoeSfJlLSKcIVMkDK+Z5pd/0EZ1PNPsg4crBNJrwAJW4AfOhYOqzXLEwJZfjwvyGcO5ifGvcFLAZtFQke40Ha1l5eSFNPSzqOuYZB2Cjl/SbzaVuArMgJ5QtF5Fjvu2UO9KMZZDtTKrq9ZCXmdUDJpgJV9GqxrjPSyZO+mWn1w9hq1IP/rmffEqOaVPDE+Tm "
    "YHdqP5ygxrmLwv8ZorRgc9Rn4WANCN4X9YXFD6CT0AiLIQbz7Cy0LVABEedDdOL06Izl5pocqSpM6oj3ZCBitgdVEeSHITaH0l4rnjUX637Gzve1w0kOZAXAxl3WeXc+QlldRvUAnY3ry8WZg9wWNt20P97TZifBEj5U69MWMa77YMnk7lVL6AWa5NS9Lg5C9TvBLm8s "
    "ITojqoA/A0HUqd2l+HYKp9x67VAvqgIf81/nfmqjkfKRY+35rJfCr/iTDmAVA1G3wCYOCbdSBvKV8aL/h/bSkZZbw0XwHhV3bVMC0LOrfkKaVgPP6Tuh8Ur3ByN/g03ys0PwOl+MuS4UT3kfHUecmSqDhw462WqSNgJZk2Qk0okkDLYowxvUC8JzPu159xnd9FPqv0Ld "
    "TL9oxJtB7xmPaS652jo7sdrKhmbPdFQBEPumjErGudwqY3bIG8oNgPys7H6PcXKUIOSRTN3hiaqUpyBrDiYNrOEpSHBnvR01zsIYkrdWjCVRaq0OP8T9fOMGJnWLRdHMS8An8+AVOFSK0G1AN3oqqlhhgBkW6g01yekz0SoVU8xP8yUb7aliJAgQWIe+Cp2QkG9UvtOG "
    "T5vNZAVlEuhBO9Zu+482KxQXuGZKdZ1//1ATTiCWr3yHXwPuHSkPL2jeznINQ+cm5J9VaV7M9kvfFe2wFJ+PAq1JqlS1fZ+2PWk999eeiLMNVVAWJa8D8OmFkF+bY2EfC2PQ93ReV+2Olg6qwgJ3bnKyfsDnORphOktee/cIs9SivGNQ5L1a+S37Ar0i0qONkt5N59NA "
    "afYT7rcVbh8HShD1fhiDCty2AzACsrzpMziTvb2ZnKTGlWsNEZxj+3y0AH51MfieE9zanID+7Rv8F0Js2UUjh1lRyzlOc5In1UEjL6FZPwXH6SKQccZV/WcqmkHrblX8IqOaeDijO8u3rCKeG+kMZcs3oz3dr1qbD4NbWWQe0OtpLIJWcBaRUhaEvVx8vyOIxBi27rWV "
    "5oNaYN3oDt7koBcaiDWtH3qHkiiTSD1FkwsoNbMDqKnMjXiWOafhHAEdj59MdmM8amRnr68vEBzCWNVulUHAosgh9BUVo43PloB62hyJxzxDvl23St1Heend2wM9zHBmSQhqANJAuBDxuhykuO9fLL74Mc135VlaOAT/HWU4lXXkVO+3FGQwbCB8YazMStLSiu5Q9lqB "
    "vZLOxZBQYmKKn2wIlGZRaSA77teISTqZ8xDQgY41tmPVg54AStHUCHpVrFJvr5a2aK0uorMN1UBu3jWtvL1evKz0Xxo2QRwb3bIQoeQkraQ1BlhgTAEeAilE1gr+egzQ3o69DwDD2rErsL9KrHXSakRsofLTYuSav5rDYrDs1cDLMUnAKmrRqMVX1cJ+IAtPtB9ZvjFk "
    "15oSJJeW0mL04p8sB32yUjE3gQFaiHBx5WzHvuy3f+EWJr5mu/si/rUr5JYe5CMpm8DI2mKvqGsxgG5oDTudHZGh0Z7tcHL5k+VeqJyy0eENUjCtKhYMwpTWYoNKmvotDluWo1BZxdRDDqYD768CM3HwgpABPZNtMt1tomXg9UsxDYpSf1KlgyJCJSdmczzizoKr2iMO "
    "fU6VYy/d950s3TPW1IkhbNmPkf7kj+uDt9+doOMfAGK/U9eLLqrWeUeoKmai+6Y56VUugwfx72URVTcl7g5uHFIWEH8bSe3y2xOogdjk2ZC5DiJq4PibNNgsQTFeaG+cNzfg9dQI3RAoOqRURXDN/RZ+EAp3ipDmmg8PNcKCd9erqvwHPhpyJXtm3JnPoxbmFWY3Yuvp "
    "QlDB3cSBfhfL2SY8B/HgLzR9bHZk5Eo4tpR5nrLURasL0bQ8gipRxdr98Rn36bfT46USwlZyTUj8cZWafmYgXlif7FJwVeS4Jjsx/AnMmTfpy6Yjv/CqpuHdMpNki37IR2K4QdEHj7FjTDoA/1+MCHhaMODIsJZvB6MjNYtFW324gBE51yif7zfBCbTYG8LKUfiIAmpg "
    "GgwdtH56jFd/wu+CEFrlACu7PKArN0N370S/zbeWkWgUhDeA+NdMyI/W7PAv7BKXmX/bLYZdjglSs7zy2yo/OH7hC/4+WIEjk6XnPZn3l97AGEEb7yrSpEaPSDvbtFZip/9sgoASecltR2mgIAINJV+Be9q9cY/58wTKj7OBSNIJ+HDO9hr6twdnm1nNsjQH/wZ/idEu "
    "QF8gi9Y1Gw0VhlDG0xZ+MfmYUzrfsaOZN0nimx3qZDTHfNdUqYuEAxo3Pw/FKUR5RXS6DotaF/3r6rvzydcPiJ+LdRleIj5VdRpXxOCTKeNHsV/rjZRSUqPMPL4rEZiV00qUkmdLRVQSmMQszHV4g/6uMQyD9X9b9IE+zj21vBZIMuINup+beNZYZ4Jaf51s6wcAZx+g "
    "G9HsP8uuZG0k7I6o1CcMttcsD+IiJQMz56z6Z3eW2/kbNEi2IuppDcTBbBYkvkK9jOO6I6Bz7hYZrB20Y1e6D3zwVfmsCBCpD0grVVBA5nnNAz83BC2R66oiS2dkltrKxtvaUhv3RTYdpTcBNyC70p3UTJzR3TNmEmU+eDeyzmj96mxkaltrDt5MJdcZSa9ycJ3lZbI1 "
    "rRPclcys7c9yKfAj0N6Vlu4gWir/jxjodPQtA2YM+DJmehmjk52tAfD50fWTFcp44sPEksCKmAM/5gnoGA2T2ufSOCIdSD1EILvtj3l2YatzKwxcR4yGCrDBmezVGc7SdpN1N/GyWV6RWtyE+tJ/VbpC2v6oigwAylz1e2U4IwPqMXn1ZPhuqcrpqZwgWP/8BmACzuFA "
    "QiT1bRs/MuczZIkA0qUBCAmHx3z123E8kHmZR7IOc7F1g0y9/049BZ7VuFYjYq5d7tf/deCb7SOPP4fWo7TJKwMzgUhLaVAkBDB5CiN6k57zFO2GKfZNtrm0vozjNr/KrM5O9zEVC9eGzG6EKIqlz1W6+2/RRFq3ci0XFzAMKtuclXF7JGY66f8bmyXW76R1lIELh1UZ "
    "G8vOcYnxu2cIaD5ABklyQsYMv1cjB/MHm9U5QckmYufrc7T9RcDxAvdmtw2pdfi0XsEdBoq20+cleQRcZcREiBfbW7Ejy2eXj7CMVmRDANmFKMSI7PXmGOqdlSIXyrfUlmV59D7yjB10GZ4Pl/YohV/ChK0tarDocTx0H79sd4PwcEBEiR/uLLhh07UFJroXpw/wkljr "
    "V2v132JkBbCRoaiBeWXu7sG7eF0fmHypoFPzB/Dn8+oBfFVDPUUMNxuU34tPGc2sMic68HNtHsihzlo1zpue3zIFyFSKf0k/UWvBPZQN3ksAVRqd/VQxdTIUGoRWvZBBQ8l17xs1KIxC1t5hJo0t6Byi/MuVvllTXGD5tVkzoBehso05Oj3lIpGgQi1J/JzP5a9zdRPP "
    "wA79o8SVbjI8FAnP2+uXd6ZVfgVyFu/PgwifgKrN5yZMM9c6sJRPvPEbGGabuaMJ/o5HMow4Mz1oKYQzX+5BuiQmpOJjhRrOoyHDlLpAEvT+5B+eNTVsvwfCYARnGriBXvqENS34yBzdFF/brSzldcttW+I61c1bD1rAP/8KB5/GYeMo0BlZBzqhBjojex4JONEMVlfH "
    "EkC1lySOJefNsUE95IR4a4THr19K4EY79Zp3EiHHrEIBZYF6D/GTtXbZGZsGRpGIvndXfeRUNZ8t5ZrkYvO1zo1ky30zeKPnONzNXsCXUiKGz/82l3FVEjfPuiTO8PMz5yShJKQH52f5xU4EcYBWAvr1wJyX4CmE+fh3y6/H2rLOCWFV3vRJVlBJUh9E4wt6U29/S0nv "
    "3+U6+w2XdmXW6KDadS4Qp74Ard8MBmI+0RqU/BI1+z7L/0vS4gK3tDpxc1NAWMdCtsfNzay4tSa81Gaa+FZi1H9ubH3ywzRb8B0dGgJrlN4zlVMNo4ggZsbKN4K/hKc9RuHwdcqx5Bkh+G1MnoVKMJwGn4jySUJrgGaWVoPjfvS31QCcAyMCMnyBHEs17WmAJKIUl3kv "
    "f2BQzC18K541JU/qRbg3XExEfhOBu4WdbgXWsC+fQRhHqZ+TFo8eCw6Fjz2GTcTd8Za7czzbKZOTXKt2cdGSOQNDBko6kcfbon0ykWO++PuC+iLKVFZcoBYfaEKUMK8jv2r/RzghzY3rKV6HapGLMSPhmDFF9cD3rMnZKNOFlM1GeYAI1PKjRf/kBWTCmWnrGE9Yr3Wb "
    "KqCZh2b6k0KxpIQyBF+wIxAtP05d9ttP54z+0Rozkn7HBpw7p/LhaQsOiv7dcLEe1G+yNdIM9QSw3BaEuEc30oCwfo6SoSrlOfmQck5lvqSZBaeYbTWwN9zjmcpi7bFgVu+tONgH1HcfhuzF3a9cGG86eS02nMFIVo4TIXS+ofQO2bb6bcJasnqnDHFK0VX8nOL9RDtd "
    "PRa6cyjWTmsJVoNfr0TJ1KdMPiysDEhbv0OzC+HMihcv1hihXLFWc2dGVr7c7Xd7Hri1xTdzeTOmsc1HXxuJB/yZs0SkaM9dRLVYsqjpqRNxXqDdHhQiCWmDDHoWDzU9CwaVadlwjXpCgqnhivHcQRIgRNfnqKB8lJaj8Vl3v+kXaau/75hUD5POcYLaNfB0vgjqFZxe "
    "c6L1C08vLl2VbiSMPps1RB4DClzq53omlqQW7zlauKT69Ql9wXqnpMaM6M4ioT9sVLuYJ9wCle+AQ7EzNIFrJk07/O44uGhFW3PCuRsYUH2poBLpLX/dchldc+COnDhipbJBJyHDuvVIx/SHqZaUlSsLlX8U97Jti0pvTP5U1c03EUVpYsuZlx4YwGWDJde/zri6ooaq "
    "qtM+II3s4FfiJf4QOz7cE91rfOlZc0dZUf/jpxLMGhZwH5POlMcZRaWKDL/sP6VSt18VYjL4CSLEZyW8XbEtyIaonQ/VrAlze0km7pk5xoFO/0Ar4NDPmx6jC7sBED2nDN3j/afArA02k9hxJuXchvTdoJhsUubitJIsOkSzcKErSSDCrySxABmZ3XAY5NVJVhA1qNMM "
    "wcearRhTqVR+8WNgXcCHZ6n86MocmIyJ9//hJCfgJhidRaN0QF7tctFZgw2hz0WxX2X5zIrlM6rvxE56VBOBZXwfkvrInThDJZPzXua77lmyBwvvHUeOBm5KWY2DFPcnLkspOXiWR31oy+6iY+rXoQIh+IarLbwZeywLmRcsHv/dQwjbg9oYXlYECqdpZm0K8Zp9MVVQ "
    "ZH6YTKXZMI7sO8zpEUsNIVVGqPixJjQGNRVUw5KjmPWbXCDMdhge2Fphf8mer9aQC4JdYTQe+/+H+nMAq5TrOR6utZyvh4tgj8xHI32DUdYJ8ZhCvVLJugo+xX7tJ78aHVu4+nJ39VIAsjZwaxafwpqKanzXT0mUt9ckSluLxAc3M2wWdAwYAHSJcZvlBBr86htasfVw "
    "0UdJC7Y1szIopv9PJDkMjIMJX3SXs+Uy0vp/VPdvwJ+aBeI1d0L+yqleR96Z65I0wS+2ohU7w5wVaLzTfieUJpRk6PPVhd9HA3QcGNR8DVo/YKM2JPG4oCMaZcGGHSAfjI5m5CHEVUYggrV1s/ygScMNM6Te/J1OWcFa+ylNHSZ/r7jHJHk5ztqud/KmTfsjNROiYssC "
    "iy09EnIoC2yYvOiQpSM2C+a/GaH5P8QjSqDBFktW8x4Ehbo5PSj5TMHQqr0QNXN5Cklqdiij9xSnHtaRaNUlGP095AqQnEmoicVpZJvlLfBYqIIiQFOxhbtikF0k5uOKS3ypH/9Vu/1JWDoK6Db07RZJjDIf+HaaIPv6IG445eRf6Ilc8lxKHxCJ9LxopVk1CY90m2Co "
    "fRH7AapQFkXtGRid5BmCTyGgtisuDTry4tC9H9FCo+h+uRe0EUHeb6WBI+N/sorHhgdH69MBJwaIUm82E26IGp3NoynMIa1ybfKd7cV+vNY9BSe6AsyWlAANYcRzNRNbaegdKI2ZG9RVzZqBMG1sMizce9TKuWMFGs7KuLGhQ6F/IkYZKjWcOTfiuU9D7pLH9q5BR0Kc ";
}

/* A soft violet bloom above the fold, and a deepening toward the footer, so the
   page has somewhere to look rather than being a flat slab. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(80rem 40rem at 50% -12rem, var(--accent-glow), transparent 70%),
    linear-gradient(180deg, transparent 0%, var(--bg-deep) 100%);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* Focus is never removed without a replacement — a security tool that fails
   basic keyboard accessibility undermines its own credibility. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 8px; top: -48px;
  background: var(--accent); color: #fff;
  padding: 8px 14px; border-radius: var(--r-sm);
  z-index: 100; transition: top .15s ease-out;
}
.skip-link:focus { top: 8px; }

/* ---------------------------------------------------------------- masthead */

.masthead {
  background: var(--panel);
  border-bottom: 1px solid var(--hairline);
}
.masthead-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: 16px;
  color: var(--ink); text-decoration: none;
  letter-spacing: -0.01em;
}
.brand svg { width: 22px; height: 22px; flex: none; color: var(--accent); }
.brand small {
  display: block; font-weight: 400; font-size: 11px;
  color: var(--ink-2); letter-spacing: .06em; text-transform: uppercase;
}
nav.tabs { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; }
nav.tabs a {
  color: var(--ink-2); text-decoration: none;
  font-size: 15px; font-weight: 500;
  padding: 8px 14px; border-radius: var(--r-sm);
  min-height: 44px; display: inline-flex; align-items: center;
  transition: background-color .15s ease-out, color .15s ease-out;
}
nav.tabs a:hover { background: var(--panel-code); color: var(--ink); }
nav.tabs a[aria-current="page"] { color: var(--accent); font-weight: 600; }

/* ------------------------------------------------------------------ layout */

main { width: 100%; }
.wrap  { max-width: var(--wrap);  margin: 0 auto; padding: 0 24px; }
.prose { max-width: var(--prose); }
.section { padding: 48px 0; border-top: 1px solid var(--hairline); }
.section:first-child { border-top: 0; }
#app { max-width: var(--prose); margin: 0 auto; padding: 32px 24px; width: 100%; }
/* Vertical padding only. This element also carries .wrap, and a padding
   shorthand here would silently reset that class's horizontal padding —
   invisible above 1080px where the max-width centres the column anyway,
   and flush against the screen edge on every device below it. */
.page-head { padding-top: 48px; padding-bottom: 8px; }

h1, h2, h3 { line-height: 1.25; letter-spacing: -0.02em; margin: 0 0 12px; font-weight: 600; }
h1 { font-size: 30px; }
.hero h1 { font-size: 38px; }
h2 { font-size: 24px; margin-top: 0; }
h3 { font-size: 20px; }
p  { margin: 0 0 16px; max-width: var(--prose); }
.lede  { font-size: 18px; color: var(--ink-2); margin-bottom: 24px; }
.small { font-size: 13px; color: var(--ink-2); }
a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--accent-down); }
ul, ol { max-width: var(--prose); }

/* A list of links with a sentence each: the bullet adds nothing, the breathing
   room does. */
.plain { list-style: none; padding: 0; margin: 0 0 20px; }
.plain li { padding: 12px 0; border-bottom: 1px solid var(--hairline); }
.plain li:last-child { border-bottom: 0; }

footer {
  border-top: 1px solid var(--hairline);
  background: var(--panel);
  padding: 32px 0;
  font-size: 13px;
  color: var(--ink-2);
  /* The spare height on a short page belongs to the footer, not to main.
     Growing main instead left the gap on the page background, so a tall window
     showed a huge empty band with a thin strip of footer beneath it. Absorbing
     it here means the footer's own panel colour runs to the bottom edge. On a
     page taller than the window there is no spare height and this is inert. */
  flex: 1 0 auto;
}
/* Replaces a style attribute that used to sit in the footer of every page.
   With style-src 'self' and no unsafe-inline that attribute was a CSP
   violation on 100% of page loads - on the site that invites people to open
   DevTools and check the CSP. */
.footnote { margin: 0; max-width: 34rem; }

footer .wrap { display: flex; gap: 24px; flex-wrap: wrap; justify-content: space-between; }
footer nav { display: flex; gap: 16px; flex-wrap: wrap; }

/* ------------------------------------------------------- content components */

.mono { font-family: var(--font-mono); font-size: .92em; word-break: break-all; }

.microlabel {
  font-family: var(--font-mono);
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-2);
}

.panel {
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: 20px;
  margin: 0 0 20px;
  max-width: var(--prose);
}
.panel-code {
  background: var(--panel-code);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
  overflow-x: auto;
}
.panel-code .microlabel { display: block; margin-bottom: 6px; }

.pullquote {
  margin: 24px 0;
  padding: 16px 0 16px 20px;
  border-left: 3px solid var(--accent);
  font-size: 20px;
  line-height: 1.4;
  color: var(--ink);
  max-width: var(--prose);
}

/* Callouts are typeset as instrument readouts rather than tinted boxes.
 *
 * A coloured strip down the left edge is the default every template ships
 * with, and it looks like one. Instead: corner brackets, a mono label that
 * names what kind of statement this is, and a tint that comes from the state
 * colour rather than from grey. The bracket is drawn with gradients so it
 * costs no extra element and no image request. */
.callout {
  position: relative;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--cl, var(--accent)) 7%, transparent), transparent 60%),
    var(--panel);
  padding: 22px 20px 18px;
  margin: 28px 0 20px;
  max-width: var(--prose);
}
.callout > :last-child { margin-bottom: 0; }

/* Corner brackets, drawn as background gradients so both pseudo-elements stay
   free — one is needed for the label. Two bars per corner, top-left and
   bottom-right, like the crop marks on a technical drawing. */
.callout {
  background-image:
    linear-gradient(180deg, color-mix(in srgb, var(--cl, var(--accent)) 8%, transparent), transparent 55%),
    linear-gradient(var(--cl, var(--accent)), var(--cl, var(--accent))),
    linear-gradient(var(--cl, var(--accent)), var(--cl, var(--accent))),
    linear-gradient(var(--cl, var(--accent)), var(--cl, var(--accent))),
    linear-gradient(var(--cl, var(--accent)), var(--cl, var(--accent)));
  background-repeat: no-repeat;
  background-size: 100% 100%, 16px 2px, 2px 16px, 16px 2px, 2px 16px;
  background-position: 0 0, 0 0, 0 0, 100% 100%, 100% 100%;
}

/* A mono label riding the top border, naming what kind of statement this is. */
.callout[data-label] { padding-top: 26px; }
.callout[data-label]::before {
  content: attr(data-label);
  position: absolute;
  top: -8px; left: 18px;
  padding: 1px 8px;
  background: var(--bg);
  color: var(--cl, var(--accent));
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  border: 1px solid color-mix(in srgb, var(--cl, var(--accent)) 40%, transparent);
  border-radius: 3px;
}

.callout.warn { --cl: var(--burn); }
.callout.ok   { --cl: var(--ok); }

.steps { list-style: none; counter-reset: s; padding: 0; margin: 0 0 20px; }
.steps li {
  counter-increment: s;
  position: relative;
  padding: 0 0 16px 44px;
  margin: 0;
}
.steps li::before {
  content: counter(s);
  position: absolute; left: 0; top: 0;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 13px;
  color: var(--accent);
  border: 1px solid var(--hairline);
  border-radius: 50%;
}

.facts { list-style: none; padding: 0; margin: 0 0 20px; }
.facts li {
  display: flex; gap: 12px; align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline);
}
.facts li:last-child { border-bottom: 0; }
.facts .microlabel { flex: none; min-width: 172px; }

.deflist { margin: 0 0 20px; max-width: var(--prose); }
.deflist dt {
  font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-2);
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
}
.deflist dd { margin: 4px 0 12px; }

.cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin: 0 0 20px; max-width: var(--wrap); }
.cards .card {
  display: block;
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: 20px;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease-out;
}
.cards .card:hover { border-color: var(--accent); }
.cards .card h3 { margin-bottom: 6px; color: var(--accent); font-size: 17px; }
.cards .card p { font-size: 15px; color: var(--ink-2); margin: 0; }

.table-scroll { overflow-x: auto; margin: 0 0 20px; -webkit-overflow-scrolling: touch; }
table.matrix, table.guarantees {
  border-collapse: collapse;
  width: 100%;
  min-width: 560px;
  font-size: 15px;
}
table.matrix th, table.matrix td,
table.guarantees th, table.guarantees td {
  text-align: left;
  vertical-align: top;
  padding: 12px 14px;
  border-bottom: 1px solid var(--hairline);
}
table.matrix th, table.guarantees th {
  font-size: 11px; font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-2); font-weight: 400;
  border-bottom: 1px solid var(--ink-2);
}
table.guarantees td:last-child { font-family: var(--font-mono); font-size: 13px; }
table.matrix tbody tr:hover, table.guarantees tbody tr:hover { background: var(--panel-code); }

details.faq {
  border-bottom: 1px solid var(--hairline);
  max-width: var(--prose);
}
details.faq summary {
  cursor: pointer;
  padding: 16px 0;
  font-weight: 600;
  font-size: 17px;
  list-style: none;
  display: flex; align-items: baseline; gap: 10px;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::before {
  content: "+";
  font-family: var(--font-mono);
  color: var(--accent);
  flex: none;
}
details.faq[open] summary::before { content: "\2212"; }
.faq-body { padding: 0 0 16px 22px; }
.faq-body > :last-child { margin-bottom: 0; }

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: .06em;
  padding: 3px 8px; border-radius: var(--r-sm);
  border: 1px solid currentColor;
}
.badge.ok   { color: var(--ok); }
.badge.burn { color: var(--burn); }

/* --------------------------------------------------------------- app forms */

.card {
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: 24px;
}
.card + .card { margin-top: 20px; }

label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }

/* Every text-entry type, not just [type=text]. The narrower list left password,
   email and number inputs on the operator page rendering as unstyled browser
   defaults — visibly half the width of the fields beside them, which reads as a
   broken form rather than a deliberate one. */
textarea,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="url"],
select {
  width: 100%;
  max-width: 34rem;
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  transition: border-color .15s ease-out;
}
textarea { min-height: 170px; resize: vertical; line-height: 1.55; }
textarea:focus, input:focus, select:focus { border-color: var(--accent); }

.row { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 16px; }
.row > .field { flex: 1 1 10rem; min-width: 0; }

.btn {
  font: inherit; font-weight: 600; cursor: pointer;
  border: 1px solid var(--accent-solid);
  border-radius: var(--r-sm);
  padding: 10px 18px;
  min-height: 44px;
  background: var(--accent-solid); color: #fff;
  transition: background-color .15s ease-out, opacity .15s ease-out;
}
.btn:hover:not(:disabled) { background: #0077cc; border-color: #0077cc; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-wide { width: 100%; margin-top: 20px; }
.btn-ghost { background: transparent; color: var(--accent); border-color: var(--hairline); }
.btn-ghost:hover:not(:disabled) { background: var(--panel-code); color: var(--accent-down); }
.btn-danger { background: var(--error); border-color: var(--error); }
.btn-danger:hover:not(:disabled) { background: #8f1b12; border-color: #8f1b12; }
/* 44px, not 38: below that a thumb misses the target on a phone. */
.btn-sm { padding: 7px 13px; font-size: 14px; min-height: 44px; }

.linkbox { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.linkbox input {
  flex: 1 1 16rem;
  font-family: var(--font-mono); font-size: 13px;
  background: var(--panel-code);
}

.notice {
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-sm);
  background: var(--panel-code);
  padding: 14px 16px;
  font-size: 15px;
  margin: 18px 0 0;
}
.notice.warn { border-left-color: var(--burn); }

.revealed {
  white-space: pre-wrap;
  overflow-wrap: break-word;
  font-family: var(--font-mono);
  font-size: 14px;
  background: var(--panel-code);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  padding: 16px;
  max-height: 26rem;
  overflow-y: auto;
}

.meta { font-size: 13px; color: var(--ink-2); margin-top: 12px; }

.spinner {
  display: inline-block; width: 1em; height: 1em;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  vertical-align: -.125em; margin-right: 8px;
}
@keyframes spin { to { transform: rotate(360deg); } }

.progress { height: 4px; background: var(--hairline); border-radius: 999px; overflow: hidden; margin-top: 16px; }
.progress > span { display: block; height: 100%; background: var(--accent); transition: width .2s ease-out; }

.toast-host {
  position: fixed; inset-inline: 0; bottom: 20px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: none; z-index: 50; padding: 0 16px;
}
.toast {
  background: var(--ink); color: var(--bg);
  border-radius: var(--r-sm);
  padding: 10px 16px; font-size: 15px;
  max-width: 32rem;
  border: 1px solid var(--hairline);
}
.toast.err { background: var(--error); color: #fff; border-color: var(--error); }
.toast.ok  { background: var(--ok);    color: #fff; border-color: var(--ok); }

/* ----------------------------------------------------------------- app chat */

/* Who is in the room. The names here were decrypted in this browser; the
   server only ever held them as ciphertext. */
.roster {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 8px 12px; margin-bottom: 8px;
  border: 1px solid var(--hairline); border-radius: var(--r-sm);
  background: var(--panel-code);
}
.roster-names { font-size: 13px; color: var(--ink-2); }

/* Joined / left notices, kept visually distinct from real messages. */
.msg-system {
  align-self: center;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-2);
  padding: 2px 10px;
  border: 1px dashed var(--hairline); border-radius: 999px;
}

.chat-log {
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  background: var(--bg);
  height: min(56vh, 26rem);
  overflow-y: auto; overscroll-behavior: contain;
  padding: 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.msg { max-width: 82%; padding: 8px 12px; border-radius: var(--r-md); font-size: 15px; }
.msg .who { display: block; font-size: 11px; font-weight: 600; opacity: .8; font-family: var(--font-mono); }
.msg.them { background: var(--panel); border: 1px solid var(--hairline); align-self: flex-start; }
.msg.me   { background: var(--accent-solid); color: #fff; align-self: flex-end; }
.msg .when { font-size: 11px; opacity: .7; margin-left: 8px; }
.chat-compose { display: flex; gap: 8px; margin-top: 12px; }
.chat-compose input { flex: 1; }
.chat-empty { color: var(--ink-2); font-size: 15px; text-align: center; margin: auto; }

.dropzone {
  border: 1px dashed var(--hairline);
  border-radius: var(--r-md);
  padding: 32px 16px;
  text-align: center;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color .15s ease-out, background-color .15s ease-out;
}
.dropzone:hover, .dropzone.hot { border-color: var(--accent); background: var(--panel-code); }
.dropzone strong { color: var(--ink); display: block; font-size: 16px; margin-bottom: 4px; }
.dropzone .picked { color: var(--accent); font-weight: 600; word-break: break-all; }

.explain { font-size: 13px; color: var(--ink-2); margin-top: 24px; }
.explain ul { margin: 6px 0 0; padding-left: 18px; }
.explain li { margin: 3px 0; }

.center { text-align: center; }
.hidden { display: none !important; }
code { font-family: var(--font-mono); font-size: .9em; }

@media (max-width: 640px) {
  .hero h1 { font-size: 30px; }
  h1 { font-size: 26px; }
  .section { padding: 32px 0; }
  .facts li { flex-direction: column; gap: 2px; }
  .facts .microlabel { min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}