1/* ==========================================================================2 NOSTR PROTOCOL — OFFICIAL INSTRUCTION MANUAL3 Visual identity: early-2000s printed game manual.4 Warm paper spreads on a dark desk, beveled chrome bars, safety-orange5 and steel-blue accents, Eurostile-style display type.6 ========================================================================== */78/* Self-hosted fonts (latin subset). font-display: optional -> no late swap,9 no layout shift; preload links in each page head fetch them by first paint. */10@font-face {11 font-family: 'Michroma'; font-style: normal; font-weight: 400;12 font-display: optional; src: url('fonts/michroma-400-latin.woff2') format('woff2');13 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;14}15@font-face {16 font-family: 'Saira Condensed'; font-style: normal; font-weight: 500;17 font-display: optional; src: url('fonts/sairacondensed-500-latin.woff2') format('woff2');18 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;19}20@font-face {21 font-family: 'Saira Condensed'; font-style: normal; font-weight: 600;22 font-display: optional; src: url('fonts/sairacondensed-600-latin.woff2') format('woff2');23 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;24}25@font-face {26 font-family: 'Saira Condensed'; font-style: normal; font-weight: 700;27 font-display: optional; src: url('fonts/sairacondensed-700-latin.woff2') format('woff2');28 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;29}30@font-face {31 font-family: 'Exo 2'; font-style: normal; font-weight: 400 700;32 font-display: optional; src: url('fonts/exo2-var-latin.woff2') format('woff2');33 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;34}35@font-face {36 font-family: 'Exo 2'; font-style: italic; font-weight: 400;37 font-display: optional; src: url('fonts/exo2-400i-latin.woff2') format('woff2');38 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;39}40@font-face {41 font-family: 'Share Tech Mono'; font-style: normal; font-weight: 400;42 font-display: optional; src: url('fonts/sharetechmono-400-latin.woff2') format('woff2');43 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;44}4546:root {47 /* palette */48 --desk: #14171c;49 --desk-2: #1d232b;50 --paper: #f2eee2;51 --paper-2: #e9e4d3;52 --paper-edge: #d8d2bd;53 --ink: #23262b;54 --ink-soft: #4b4f58;55 --chrome-hi: #f4f6f8;56 --chrome: #b8bfc9;57 --chrome-lo: #7d8794;58 --steel: #2e5f9e;59 --steel-deep: #1d3f6b;60 --orange: #f26a00;61 --orange-hot: #ff8a1f;62 --danger: #c0392b;63 --ok: #2c7a3f;64 --crt: #0d1410;65 --crt-green: #7dff9e;66 --crt-dim: #35513d;6768 --f-display: 'Michroma', 'Eurostile', sans-serif;69 --f-label: 'Saira Condensed', 'Arial Narrow', sans-serif;70 --f-body: 'Exo 2', 'Verdana', sans-serif;71 --f-mono: 'Share Tech Mono', 'Courier New', monospace;72}7374* { box-sizing: border-box; }75html { scroll-behavior: smooth; }7677body {78 margin: 0;79 background:80 radial-gradient(1200px 600px at 50% -100px, #262e39 0%, transparent 60%),81 repeating-linear-gradient(45deg, transparent 0 14px, rgba(255,255,255,.012) 14px 15px),82 var(--desk);83 color: var(--ink);84 font-family: var(--f-body);85 font-size: 16px;86 line-height: 1.62;87 padding: 34px 14px 70px;88}8990/* ---------- the booklet page ---------- */91.page {92 position: relative;93 max-width: 920px;94 margin: 0 auto;95 background:96 linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);97 border-radius: 6px 14px 14px 6px;98 box-shadow:99 0 1px 0 rgba(255,255,255,.06),100 0 22px 60px rgba(0,0,0,.55),101 inset 0 0 90px rgba(120,100,50,.07);102 padding: 0 0 26px;103 overflow: hidden;104}105/* paper grain */106.page::before {107 content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;108 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");109}110/* spine shading (booklet gutter, left edge) */111.page::after {112 content: ""; position: absolute; inset: 0 auto 0 0; width: 26px; z-index: 0;113 background: linear-gradient(90deg, rgba(0,0,0,.18), rgba(0,0,0,.05) 55%, transparent);114 pointer-events: none;115}116.page > * { position: relative; z-index: 1; }117118/* staples on the spine */119.staple {120 position: absolute; left: 9px; width: 5px; height: 40px; z-index: 2;121 background: linear-gradient(90deg, #cfd4da, #8d949c 50%, #666c74);122 border-radius: 3px; box-shadow: 0 1px 2px rgba(0,0,0,.45);123}124.staple.s1 { top: 14%; } .staple.s2 { bottom: 14%; }125126/* ---------- chrome header band ---------- */127.band {128 background:129 linear-gradient(180deg, #fdfeff 0%, var(--chrome) 46%, var(--chrome-lo) 52%, #a8b0ba 100%);130 border-bottom: 3px solid var(--steel-deep);131 padding: 14px 34px 12px 44px;132 display: flex; align-items: center; gap: 18px; flex-wrap: wrap;133 box-shadow: inset 0 -6px 12px rgba(0,0,0,.14), inset 0 2px 0 #fff;134}135.band .logo {136 font-family: var(--f-display); font-size: 15px; letter-spacing: .12em;137 color: var(--steel-deep); text-transform: uppercase;138 text-shadow: 0 1px 0 rgba(255,255,255,.8);139 text-decoration: none;140}141.band .logo b { color: var(--orange); }142.band .booklet-note {143 margin-left: auto; font-family: var(--f-label); font-weight: 600;144 font-size: 12.5px; letter-spacing: .22em; text-transform: uppercase;145 color: #3c4650; text-shadow: 0 1px 0 rgba(255,255,255,.7);146}147148/* section tab strip (like manual edge tabs) */149.tabs {150 display: flex; flex-wrap: wrap; gap: 2px; padding: 0 34px 0 44px;151 background: var(--steel-deep);152}153.tabs a {154 font-family: var(--f-label); font-weight: 600; font-size: 12px;155 letter-spacing: .14em; text-transform: uppercase; text-decoration: none;156 color: #cfe0f5; padding: 6px 14px 5px;157 background: linear-gradient(180deg, var(--steel) 0%, var(--steel-deep) 100%);158 border-radius: 0 0 6px 6px;159}160.tabs a:hover, .tabs a.on { background: linear-gradient(180deg, var(--orange-hot), var(--orange)); color: #fff; }161162/* ---------- chapter header ---------- */163.chapter {164 display: flex; align-items: flex-end; gap: 22px;165 padding: 30px 34px 18px 44px;166 border-bottom: 2px dotted var(--paper-edge);167}168.chapter .nipno {169 font-family: var(--f-display); font-size: 64px; line-height: .9;170 color: transparent;171 -webkit-text-stroke: 2px var(--steel-deep);172 text-stroke: 2px var(--steel-deep);173 position: relative; flex: 0 0 auto;174}175.chapter .nipno::after {176 content: attr(data-n); position: absolute; left: 3px; top: 3px; z-index: -1;177 -webkit-text-stroke: 0; color: var(--orange); opacity: .55;178}179.chapter .titles h1 {180 margin: 0; font-family: var(--f-display); font-size: 26px; line-height: 1.25;181 letter-spacing: .02em; color: var(--ink); text-transform: uppercase;182}183.chapter .titles .kicker {184 font-family: var(--f-label); font-weight: 600; font-size: 13px;185 letter-spacing: .3em; text-transform: uppercase; color: var(--steel);186 margin-bottom: 6px;187}188.chapter .titles .sub { color: var(--ink-soft); font-size: 15px; margin-top: 8px; max-width: 56ch; }189190/* deprecated / merged rubber stamp */191.stamp {192 align-self: center; margin-left: auto; flex: 0 0 auto;193 font-family: var(--f-display); font-size: 17px; letter-spacing: .1em;194 color: var(--danger); border: 3px double var(--danger); border-radius: 6px;195 padding: 8px 14px; transform: rotate(-8deg); text-transform: uppercase;196 opacity: .82; mix-blend-mode: multiply; background: rgba(192,57,43,.05);197}198.stamp.merged { color: var(--steel); border-color: var(--steel); background: rgba(46,95,158,.05); }199200/* ---------- layout ---------- */201.spread { display: grid; grid-template-columns: 1fr 250px; gap: 30px; padding: 26px 34px 10px 44px; }202.spread > .main { min-width: 0; }203@media (max-width: 900px) {204 .spread { grid-template-columns: 1fr; }205 .chapter { flex-wrap: wrap; row-gap: 10px; }206 .stamp { margin-left: 0; }207}208.chapter .titles { min-width: 0; flex: 1 1 240px; }209.chapter .titles h1 { overflow-wrap: break-word; }210@media (max-width: 480px) {211 .tabs { padding: 0 14px; }212 .tabs a { padding: 5px 10px 4px; font-size: 11px; letter-spacing: .08em; }213 .chapter { padding: 24px 20px 16px 24px; }214 .chapter .nipno { font-size: 48px; }215 .chapter .titles h1 { font-size: 20px; overflow-wrap: anywhere; }216}217218/* ---------- section headers: beveled bars ---------- */219h2.bar {220 display: flex; align-items: center; gap: 12px;221 font-family: var(--f-display); font-size: 15px; letter-spacing: .06em;222 text-transform: uppercase; color: #fff;223 background: linear-gradient(180deg, #4a7cc0 0%, var(--steel) 45%, var(--steel-deep) 50%, #274e83 100%);224 border: 1px solid var(--steel-deep); border-radius: 8px;225 box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 2px 4px rgba(0,0,0,.2);226 text-shadow: 0 1px 2px rgba(0,0,0,.5);227 padding: 9px 14px; margin: 40px 0 16px;228}229h2.bar:first-child { margin-top: 0; }230h2.bar .num {231 font-family: var(--f-label); font-weight: 700; font-size: 15px;232 background: var(--orange); color: #fff; border-radius: 4px;233 padding: 1px 8px; box-shadow: inset 0 1px 0 rgba(255,255,255,.4);234}235h3 {236 font-family: var(--f-label); font-weight: 700; font-size: 17px;237 letter-spacing: .12em; text-transform: uppercase; color: var(--steel-deep);238 border-bottom: 2px solid var(--paper-edge); padding-bottom: 4px; margin: 28px 0 12px;239}240h4 { font-family: var(--f-label); font-weight: 600; font-size: 15.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin: 20px 0 8px; }241242p { margin: 0 0 14px; }243a { color: var(--steel); text-decoration-color: rgba(46,95,158,.4); }244a:hover { color: var(--orange); }245strong { color: var(--ink); }246code {247 font-family: var(--f-mono); font-size: .92em; background: rgba(46,95,158,.08);248 border: 1px solid rgba(46,95,158,.18); border-radius: 4px; padding: 0 4px;249 color: var(--steel-deep); white-space: nowrap;250}251li { margin-bottom: 6px; }252ul, ol { padding-left: 24px; margin: 0 0 14px; }253254/* ---------- sidebar cartridge (spec box) ---------- */255.cartridge {256 position: sticky; top: 20px;257 background: linear-gradient(180deg, #2a3038, #1b2027);258 border-radius: 10px; padding: 4px; color: #dfe5ec;259 box-shadow: 0 6px 18px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.15);260}261.cartridge .inner { border: 1px solid #3c4650; border-radius: 7px; padding: 14px 14px 10px; }262.cartridge h3.cardhead {263 margin: 0 0 10px; font-family: var(--f-display); font-size: 11px;264 letter-spacing: .18em; color: var(--orange-hot); text-transform: uppercase;265 display: flex; align-items: center; gap: 8px;266}267.cartridge h3.cardhead::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--orange), transparent); }268.cartridge dl { margin: 0; font-size: 13.5px; }269.cartridge dt {270 font-family: var(--f-label); font-weight: 600; font-size: 11.5px;271 letter-spacing: .2em; text-transform: uppercase; color: #8fa2b8; margin-top: 10px;272}273.cartridge dd { margin: 2px 0 0; font-family: var(--f-mono); font-size: 13px; color: #eef2f7; overflow-wrap: anywhere; }274.cartridge dd a { color: #7db4ee; }275.cartridge .lights { display: flex; gap: 6px; margin: 12px 0 2px; }276.cartridge .led { width: 8px; height: 8px; border-radius: 50%; background: #39424d; }277.cartridge .led.on { background: var(--crt-green); box-shadow: 0 0 6px var(--crt-green); }278.cartridge .led.warn { background: var(--orange-hot); box-shadow: 0 0 6px var(--orange-hot); }279.cartridge .led.err { background: #ff5a48; box-shadow: 0 0 6px #ff5a48; }280281/* tag chips (draft/final/optional/…) */282.chip {283 display: inline-block; font-family: var(--f-label); font-weight: 700;284 font-size: 11px; letter-spacing: .14em; text-transform: uppercase;285 border-radius: 3px; padding: 2px 7px 1px; margin: 2px 3px 2px 0;286 background: #39424d; color: #cdd7e2; border: 1px solid #4a5561;287}288.chip.final { background: var(--ok); border-color: #1f5a2e; color: #eaffef; }289.chip.draft { background: var(--steel); border-color: var(--steel-deep); color: #e8f1fc; }290.chip.unrecommended, .chip.deprecated { background: var(--danger); border-color: #8e2a1f; color: #ffece9; }291.chip.mandatory { background: var(--orange); border-color: #b34e00; color: #fff; }292293/* ---------- callout boxes ---------- */294.box { border-radius: 10px; margin: 20px 0; padding: 14px 16px 12px 16px; position: relative; }295.box .tag {296 position: absolute; top: -11px; left: 14px;297 font-family: var(--f-display); font-size: 11px; letter-spacing: .14em;298 text-transform: uppercase; color: #fff; padding: 3px 10px; border-radius: 4px;299 box-shadow: 0 2px 3px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.35);300}301.box p:last-child, .box ul:last-child { margin-bottom: 2px; }302.box.hint { background: rgba(46,95,158,.07); border: 2px solid var(--steel); }303.box.hint .tag { background: linear-gradient(180deg, #4a7cc0, var(--steel-deep)); }304.box.warn { background: rgba(242,106,0,.08); border: 2px solid var(--orange); }305.box.warn .tag { background: linear-gradient(180deg, var(--orange-hot), #c85700); }306.box.danger { background: rgba(192,57,43,.07); border: 2px dashed var(--danger); }307.box.danger .tag { background: linear-gradient(180deg, #e05545, #96271b); }308.box.tech { background: rgba(35,38,43,.05); border: 2px solid var(--ink-soft); }309.box.tech .tag { background: linear-gradient(180deg, #5d636d, #33373e); }310311/* ---------- CRT terminal (code examples) ---------- */312.crt { margin: 20px 0; border-radius: 10px; overflow: hidden; box-shadow: 0 8px 22px rgba(0,0,0,.35); border: 1px solid #000; }313.crt .titlebar {314 display: flex; align-items: center; gap: 8px;315 background: linear-gradient(180deg, #454c55, #23272d);316 padding: 6px 12px; font-family: var(--f-label); font-weight: 600;317 font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: #b9c3ce;318}319.crt .titlebar::before { content: "▶"; color: var(--orange-hot); font-size: 10px; }320.crt pre {321 margin: 0; padding: 16px 18px; background:322 repeating-linear-gradient(0deg, rgba(125,255,158,.035) 0 1px, transparent 1px 3px),323 radial-gradient(120% 100% at 50% 0%, #101a13 0%, var(--crt) 70%);324 color: var(--crt-green); font-family: var(--f-mono); font-size: 13.5px;325 line-height: 1.55; overflow-x: auto; text-shadow: 0 0 4px rgba(125,255,158,.35);326}327.crt pre .c { color: var(--crt-dim); text-shadow: none; } /* comment */328.crt pre .k { color: #ffd45e; } /* key/keyword */329.crt pre .s { color: #9ecfff; } /* string val */330.crt pre .send { color: #ffab6b; } /* client→relay */331.crt pre .recv { color: #8fe3ff; } /* relay→client */332333/* ---------- reference tables (controller-mapping style) ---------- */334/* horizontal scroller for wide reference tables (every table.ref sits in one) */335.tscroll { overflow-x: auto; margin: 18px 0; }336table.ref { width: 100%; border-collapse: collapse; margin: 0; font-size: 14.5px; }337table.ref caption {338 caption-side: top; text-align: left; font-family: var(--f-label); font-weight: 700;339 letter-spacing: .18em; text-transform: uppercase; font-size: 12.5px;340 color: var(--ink-soft); padding-bottom: 6px;341}342table.ref th {343 font-family: var(--f-label); font-weight: 700; font-size: 12.5px;344 letter-spacing: .16em; text-transform: uppercase; text-align: left;345 background: linear-gradient(180deg, #474d56, #2e3238);346 color: #e8edf2; padding: 7px 12px; border: 1px solid #23272d;347}348table.ref td { padding: 7px 12px; border: 1px solid var(--paper-edge); vertical-align: top; }349table.ref tr:nth-child(even) td { background: rgba(46,95,158,.045); }350table.ref td.btn, td .kbd, .kbd {351 font-family: var(--f-mono); font-size: 13px; white-space: nowrap;352 background: linear-gradient(180deg, #fff, #dfe3e8); border: 1px solid #aab2bb;353 border-radius: 5px; padding: 1px 8px; box-shadow: 0 2px 0 #aab2bb; color: var(--ink);354 display: inline-block; margin: 1px 0;355}356357/* ---------- diagrams ---------- */358figure.diagram { margin: 22px 0; text-align: center; }359figure.diagram .frame {360 background: linear-gradient(180deg, #fbfaf4, #efeadb);361 border: 2px solid var(--paper-edge); border-radius: 10px;362 box-shadow: inset 0 0 30px rgba(120,100,50,.08); padding: 18px 10px;363}364figure.diagram svg { max-width: 100%; height: auto; }365figure.diagram figcaption {366 font-family: var(--f-label); font-weight: 600; font-size: 12.5px;367 letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); margin-top: 10px;368}369figure.diagram figcaption b { color: var(--orange); }370/* svg helper classes */371.d-actor { fill: #fff; stroke: var(--steel-deep); stroke-width: 2; }372.d-actor-label { font-family: var(--f-label); font-weight: 700; font-size: 13px; letter-spacing: .1em; fill: var(--steel-deep); text-transform: uppercase; }373.d-wire { stroke: var(--ink-soft); stroke-width: 2; fill: none; }374.d-msg { stroke: var(--orange); stroke-width: 2.5; fill: none; marker-end: url(#arr); }375.d-msg.blue { stroke: var(--steel); marker-end: url(#arrb); }376.d-flow { stroke-dasharray: 7 5; animation: march 1.1s linear infinite; }377.d-label { font-family: var(--f-mono); font-size: 12px; fill: var(--ink); }378.d-note { font-family: var(--f-body); font-size: 12px; fill: var(--ink-soft); }379@keyframes march { to { stroke-dashoffset: -12; } }380@media (prefers-reduced-motion: reduce) {381 .d-flow { animation: none; }382 html { scroll-behavior: auto; }383}384385/* ---------- version history (patch notes) ---------- */386.patchnotes { list-style: none; padding: 0; margin: 18px 0; border-left: 3px solid var(--paper-edge); }387.patchnotes li { position: relative; padding: 2px 0 14px 22px; margin: 0; }388.patchnotes li::before {389 content: ""; position: absolute; left: -8px; top: 8px; width: 11px; height: 11px;390 background: linear-gradient(180deg, var(--orange-hot), var(--orange));391 border: 2px solid var(--paper); border-radius: 50%; box-shadow: 0 0 0 2px var(--orange);392}393.patchnotes li.minor::before { background: var(--chrome); box-shadow: 0 0 0 2px var(--chrome-lo); }394.patchnotes .ver {395 font-family: var(--f-label); font-weight: 700; font-size: 12.5px;396 letter-spacing: .16em; text-transform: uppercase; color: var(--steel-deep);397 background: rgba(46,95,158,.1); border-radius: 3px; padding: 1px 7px; margin-right: 8px;398}399.patchnotes .when { font-family: var(--f-mono); font-size: 12.5px; color: var(--ink-soft); margin-right: 6px; }400401/* ---------- credits / original proposal ---------- */402.credits {403 background: linear-gradient(180deg, #2a3038, #1b2027); color: #dfe5ec;404 border-radius: 10px; padding: 18px 20px; margin: 20px 0;405 box-shadow: inset 0 1px 0 rgba(255,255,255,.12);406}407.credits h3.cardhead { margin: 0 0 10px; font-family: var(--f-display); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--orange-hot); }408.credits table { width: 100%; border-collapse: collapse; font-size: 13.5px; }409.credits td { padding: 4px 8px 4px 0; border: 0; vertical-align: top; }410.credits td:first-child { font-family: var(--f-label); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; font-size: 11.5px; color: #8fa2b8; white-space: nowrap; padding-right: 16px; }411.credits a { color: #7db4ee; }412.credits td { color: #eef2f7; }413414/* ---------- footer ---------- */415.pagefoot {416 display: flex; align-items: center; justify-content: space-between;417 margin-top: 44px; padding: 14px 34px 0 44px;418 border-top: 2px dotted var(--paper-edge);419 font-family: var(--f-label); font-weight: 600; font-size: 12px;420 letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft);421}422.pagefoot a { text-decoration: none; color: var(--steel); }423.pagefoot a:hover { color: var(--orange); }424.pagefoot .pageno { font-family: var(--f-display); font-size: 13px; }425426/* prev/next chunky buttons */427.navbtns { display: flex; gap: 12px; justify-content: space-between; padding: 26px 34px 0 44px; }428.navbtns a {429 font-family: var(--f-label); font-weight: 700; font-size: 13.5px;430 letter-spacing: .14em; text-transform: uppercase; text-decoration: none;431 color: #fff; padding: 9px 18px; border-radius: 8px;432 background: linear-gradient(180deg, #4a7cc0, var(--steel-deep));433 border: 1px solid var(--steel-deep);434 box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 3px 0 #17304f;435}436.navbtns a:hover { background: linear-gradient(180deg, var(--orange-hot), #c85700); border-color: #a04600; box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 3px 0 #7c3600; }437.navbtns a:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 1px 0 #17304f; }438439/* ---------- selection policy ----------440 UI chrome, buttons, and decorations are not selectable, so copied spec text441 stays clean. All content (prose, tables, code, cartridge, credits) remains442 copyable. */443.staple, .band .logo, .band .booklet-note, .tabs a, .chapter .nipno, .stamp,444h2.bar .num, .box .tag, .crt .titlebar, .navbtns a, .toc-tools .filterbtn,445.pagefoot .pageno {446 -webkit-user-select: none;447 user-select: none;448}449450/* ==========================================================================451 COVER + TABLE OF CONTENTS (index page)452 ========================================================================== */453.cover {454 position: relative; text-align: center; padding: 70px 30px 60px; overflow: hidden;455 background:456 radial-gradient(700px 340px at 50% -60px, rgba(242,106,0,.28), transparent 65%),457 repeating-linear-gradient(-35deg, transparent 0 26px, rgba(255,255,255,.03) 26px 27px),458 linear-gradient(180deg, #223a5c 0%, var(--steel-deep) 45%, #142b49 100%);459 color: #fff; border-bottom: 6px solid var(--orange);460}461.cover .kicker { font-family: var(--f-label); font-weight: 600; font-size: 14px; letter-spacing: .5em; text-transform: uppercase; color: #a9c4e6; }462/* one unbreakable word in Michroma: size must track the cover width all the way down */463.cover h1 { font-family: var(--f-display); font-size: clamp(19px, calc(7vw - 8px), 56px); margin: 14px 0 4px; letter-spacing: .04em; text-shadow: 0 3px 0 rgba(0,0,0,.35), 0 0 34px rgba(255,138,31,.35); }464.cover h1 b { color: var(--orange-hot); }465.cover .subtitle { font-family: var(--f-display); font-size: clamp(13px, 2.4vw, 18px); letter-spacing: .3em; text-transform: uppercase; color: #cfe0f5; }466.cover .blurb { max-width: 60ch; margin: 22px auto 0; color: #d7e3f2; font-size: 15.5px; }467.ratingbox {468 position: absolute; right: 26px; bottom: 22px; width: 84px;469 background: #fff; color: var(--ink); border-radius: 6px; padding: 8px 6px 6px;470 font-family: var(--f-label); font-weight: 700; font-size: 10px; letter-spacing: .08em;471 text-transform: uppercase; box-shadow: 0 4px 10px rgba(0,0,0,.4);472}473.ratingbox .letter { font-family: var(--f-display); font-size: 34px; line-height: 1; color: var(--ink); }474@media (max-width: 640px) { .ratingbox { display: none; } }475476.toc-tools { display: flex; gap: 12px; align-items: center; padding: 26px 34px 0 44px; flex-wrap: wrap; }477.toc-tools input {478 flex: 1; min-width: 220px; font-family: var(--f-mono); font-size: 14px;479 padding: 9px 14px; border-radius: 8px; border: 2px solid var(--chrome-lo);480 background: #fff; color: var(--ink); outline: none;481}482.toc-tools input:focus { border-color: var(--orange); }483.toc-tools .filterbtn {484 cursor: pointer; font-family: var(--f-label); font-weight: 700; font-size: 12px;485 letter-spacing: .14em; text-transform: uppercase; border-radius: 6px;486 border: 1px solid var(--chrome-lo); background: linear-gradient(180deg, #fff, #dfe3e8);487 padding: 7px 12px; color: var(--ink-soft); box-shadow: 0 2px 0 var(--chrome-lo);488}489.toc-tools .filterbtn.on { background: linear-gradient(180deg, var(--orange-hot), var(--orange)); color: #fff; border-color: #b34e00; box-shadow: 0 2px 0 #8a3c00; }490@media (max-width: 640px) {491 .toc-tools { padding: 22px 20px 0 24px; }492 .toc-tools input { flex-basis: 100%; min-width: 0; }493}494495.toc { list-style: none; margin: 10px 0 0; padding: 18px 34px 8px 44px; column-gap: 40px; }496@media (min-width: 720px) { .toc { columns: 2; } }497.toc li { break-inside: avoid; margin: 0 0 3px; }498.toc a {499 display: flex; align-items: baseline; gap: 10px; text-decoration: none;500 color: var(--ink); padding: 4px 6px; border-radius: 5px; font-size: 14.5px;501}502.toc a:hover { background: rgba(242,106,0,.1); color: var(--ink); }503.toc .no { font-family: var(--f-display); font-size: 12.5px; color: var(--steel-deep); flex: 0 0 34px; }504.toc .dots { flex: 1; border-bottom: 2px dotted var(--paper-edge); transform: translateY(-4px); min-width: 20px; }505.toc .flag { font-family: var(--f-label); font-weight: 700; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; border-radius: 3px; padding: 1px 5px; }506.toc .flag.dep { background: var(--danger); color: #fff; }507.toc .flag.mrg { background: var(--steel); color: #fff; }508.toc li.dim a { opacity: .55; }509.toc li.hidden { display: none; }510511/* generic utility */512.small { font-size: 13px; color: var(--ink-soft); }513hr.tear { border: 0; border-top: 2px dashed var(--paper-edge); margin: 30px 0; }