/* ══════════════════════════════════════════════════════════════════════════ METARCH GLOSSARY · shared stylesheet · 16 Sep 2026 ONE FILE FOR EVERY GLOSSARY PAGE. Each page is plain static HTML with no JavaScript at all, and that is deliberate: several AI crawlers do not run JavaScript, so anything drawn by a script is fetched as an empty shell and can never be quoted. Everything on these pages is real markup. PATHS ARE ../ BECAUSE THESE PAGES LIVE IN /glossary/. The fonts and the shield are the same files home.html loads, one directory up. THE DESIGN RULES THIS FOLLOWS, from CLAUDE.md: 2px corners everywhere · flat #FFF200, never a gradient · #030303 page, #0c0b09 card · hairline rgba(240,236,220,0.09) · no boxes, structure comes from rules and hairlines · Mont 800 at 0.17em tracking uppercase for labels · Exodus Display for display type. ══════════════════════════════════════════════════════════════════════════ */ @font-face{font-family:'Mont';src:url('../ASSETS/fonts/Mont-Regular.woff2') format('woff2');font-weight:400;font-display:swap;} @font-face{font-family:'Mont';src:url('../ASSETS/fonts/Mont-Bold.woff2') format('woff2');font-weight:700;font-display:swap;} @font-face{font-family:'Exodus Display';src:url('../ASSETS/fonts/ExodusDisplay-SharpenBold.woff2') format('woff2');font-weight:normal;font-display:swap;} /* The same digits-only trick home.html uses. One font file, consulted only for 0 to 9, so numbers come from Exodus and every letter stays Mont. */ @font-face{font-family:'Exodus Numerals';src:url('../ASSETS/fonts/ExodusDisplay-SharpenBold.woff2') format('woff2'); font-weight:100 900;font-display:swap;unicode-range:U+0030-0039;} *{margin:0;padding:0;box-sizing:border-box;} :root{ --gold:#FFF200; --ink:#f3eede; --mut:rgba(243,238,222,.5); --bg:#030303; --card:#0c0b09; --line:rgba(240,236,220,0.09); --ui:'Mont',-apple-system,sans-serif; --disp:'Exodus Display','Mont',sans-serif; /* THE LOGO IS ONE LINE AND THIS IS IT. Copied byte for byte from :root in home.html. Never trace, redraw or re-export the mark: paint this. */ --mx-mark:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20756'%3E%3Cpath%20d='M424,306,537,219,618,154,424,0ZM923,69,649,226,501,417,379,259,351,225,156,114,117,90,78,69,499,754ZM97,146,79,436,0,756,188,616,196,496,376,634ZM903,146,881,181,659,569,624,633,803,496,813,616,1000,756,921,436Z'/%3E%3C/svg%3E"); } html{-webkit-text-size-adjust:100%;} body{ background:var(--bg); color:var(--ink); font-family:'Exodus Numerals',var(--ui); font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; } .wrap{max-width:760px;margin:0 auto;padding:0 24px;} /* ── HEADER ─────────────────────────────────────────────────────────────── */ .gh{border-bottom:1px solid var(--line);padding:22px 0;} .gh .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;} .gh-lock{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);} /* The shield. -webkit-mask plus currentColor is what makes every mark on every surface follow the ink colour of the thing it sits in. */ .gh-mk{width:22px;height:17px;background-color:var(--gold); -webkit-mask:var(--mx-mark) no-repeat center/contain; mask:var(--mx-mark) no-repeat center/contain;flex:none;} .gh-wm{font-family:var(--disp);font-size:17px;letter-spacing:.01em;} .gh-back{font-family:var(--ui);font-weight:700;font-size:10px;letter-spacing:.17em; text-transform:uppercase;color:var(--mut);text-decoration:none;} .gh-back:hover{color:var(--gold);} /* ── PAGE HEAD ──────────────────────────────────────────────────────────── */ main{padding:52px 0 0;} .eyebrow{font-family:var(--ui);font-weight:700;font-size:10px;letter-spacing:.17em; text-transform:uppercase;color:var(--gold);margin-bottom:14px;} h1{font-family:var(--disp);font-weight:normal;font-size:clamp(30px,5.4vw,46px); line-height:1.08;letter-spacing:-0.01em;margin-bottom:20px;} /* THE ANSWER SITS FIRST AND IT IS BUILT TO BE LIFTED. An AI retrieves chunks, not pages, so the first thing under the heading has to BE the answer rather than build towards it. This is the paragraph that gets quoted. */ .lede{font-size:18px;line-height:1.6;color:var(--ink);padding-bottom:26px; border-bottom:1px solid var(--line);margin-bottom:30px;} .lede strong{color:var(--gold);font-weight:700;} /* ── BODY ───────────────────────────────────────────────────────────────── */ .body p{margin-bottom:17px;color:rgba(243,238,222,.86);} .body p:last-child{margin-bottom:0;} .body strong{color:var(--gold);font-weight:700;} .body em{font-style:italic;color:var(--ink);} /* ⛔ A LINK INSIDE A PARAGRAPH HAD NO RULE AT ALL. 16 Sep 2026. With nothing to paint it, the browser used its own default: blue, on a black page, which is close to unreadable. Three pages carry links inside the prose, authority-channel, breakthrough-channel and youtube-niche, and every one of them had it. The underline is a hairline in the gold rather than the browser underline, so a link reads as a link without cutting through the letters. */ .body a{color:var(--gold);text-decoration:none; border-bottom:1px solid rgba(255,242,0,.35);} .body a:hover{border-bottom-color:var(--gold);} h2{font-family:var(--disp);font-weight:normal;font-size:clamp(21px,3.2vw,27px); line-height:1.2;margin:42px 0 16px;padding-top:30px;border-top:1px solid var(--line);} h2:first-child{border-top:none;padding-top:0;margin-top:0;} /* ── THE LADDER. A table, because a table survives being chunked and a paragraph of the same numbers does not. ─────────────────────────────── */ .tbl{width:100%;border-collapse:collapse;margin:22px 0 8px;font-size:15px;} .tbl th{font-family:var(--ui);font-weight:700;font-size:9px;letter-spacing:.17em; text-transform:uppercase;color:var(--mut);text-align:left; padding:0 14px 9px 0;border-bottom:1px solid var(--line);} .tbl td{padding:11px 14px 11px 0;border-bottom:1px solid var(--line); color:rgba(243,238,222,.86);vertical-align:top;} .tbl tr:last-child td{border-bottom:none;} .tbl .b{font-family:var(--ui);font-weight:700;font-size:11px;letter-spacing:.14em; text-transform:uppercase;color:var(--ink);white-space:nowrap;} .tbl .n{color:var(--gold);font-weight:700;white-space:nowrap;} .tw{overflow-x:auto;} /* ══ THE TIER CHIPS. 16 Sep 2026. ══════════════════════════════════════════ THE LADDER WAS PRINTED IN FLAT GOLD, so Hyper, Ultra, Mega, Super, Normal and Chalk all looked identical. Every one of those words is a COLOUR in the product, and a page that defines the score while ignoring its own colours teaches the reader the wrong thing. ⛔ THESE VALUES ARE COPIED BYTE FOR BYTE FROM home.html, which took them from app.html. app.html IS THE AUTHORITY: scoreTier() and virTier() decide the band, mxshTierInk() decides the ink. If a colour ever changes it changes in app.html first, then home.html, then here. Do not invent one. THE TWO LADDERS ARE DIFFERENT SCALES AND THE SAME COLOURS, on purpose: ZYRA, 0 to 100 · virTier() · 100+ / 90 / 80 / 60 / 35 / below Multiples, x · scoreTier() · 30x / 10x / 5x / 2x / 1x / below A 94 score and a 34x multiple are both purple because both are Ultra. HYPER IS WHITE WITH RED INK, NOT GOLD. Corrected on home.html 14 Sep for exactly this reason. Carried across unchanged. */ .ov-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:2px; font-family:var(--disp);font-size:11px;font-weight:700;letter-spacing:.02em;line-height:1; background:rgba(240,236,220,.04);border:1px solid rgba(240,236,220,.15);color:#f0ecdc; text-transform:uppercase;white-space:nowrap;} .ov-chip.t-chalk{color:#050505;background:#f0ecdc;border-color:#f0ecdc;} .ov-chip.t-normal{color:#050505;background:#FFF200;border-color:#FFF200;} .ov-chip.t-super{color:#fff;background:#3d7cd6;border-color:#5a99f3;box-shadow:0 0 8px rgba(120,180,255,.35);} .ov-chip.t-mega{color:#fff;background:#d63d3d;border-color:#ff5a5a;box-shadow:0 0 8px rgba(255,107,107,.4);} .ov-chip.t-ultra{color:#fff;background:#7a3dc8;border-color:#a566ff;box-shadow:0 0 14px rgba(200,150,255,.5);} .ov-chip.t-sub{color:rgba(240,236,220,.5);background:rgba(240,236,220,.03);border-color:rgba(240,236,220,.15);} .ov-chip.t-hyper{color:#B01B24;background:#ffffff;border-color:#B01B24;box-shadow:0 0 8px rgba(176,27,36,.45);} /* The cell a chip sits in. No wrapping, and a touch of room above and below so the glow on Ultra and Super is not clipped by the hairline rule. */ .tbl td.c{padding-top:9px;padding-bottom:9px;white-space:nowrap;} /* ══ THE RAW OUTLIER SCORE. 16 Sep 2026. ═══════════════════════════════════ The same symbolic shape home.html shows in its score section, in plain HTML rather than the home page's flex equation, because an AI crawler reads this page as text and a row of nested spans reads as gibberish. ⛔ NO NUMBERS. NOT ONE, NOT EVEN A DECOY. home.html carried three decoy ZYRA constants behind a CSS blur until 15 Sep, and they came out because blur is paint and not privacy: anyone reading the page source had the real shape of the thing. The letters M, v, k and s and the two Greek letters are the SHAPE and name no constant. If the finished equation is ever shown, it goes in as a picture. DO NOT PUT NUMBERS HERE AS TEXT. */ .eq{margin:24px 0 8px;padding:22px 0;border-top:1px solid var(--line); border-bottom:1px solid var(--line);} .eq-l{font-family:var(--ui);font-weight:700;font-size:10px;letter-spacing:.17em; text-transform:uppercase;color:var(--mut);margin-bottom:16px;} .eq-r{display:flex;flex-wrap:wrap;align-items:flex-start;gap:14px;} .eq-t{flex:1 1 170px;min-width:150px;} /* ⛔ A SERIF, NOT Exodus Display. Exodus has no lowercase, so it rendered the formula as MAX(0, A LN V/K) and turned every variable into a capital. In a formula the case IS the meaning: v is views and V is nothing. This is the same stack home.html uses on its own equation, minus Vollkorn, which this folder does not load. Georgia is on every machine and has real italics. */ .eq-m{font-family:'Exodus Numerals',Georgia,'Times New Roman',serif; font-size:21px;color:var(--ink);line-height:1.3; padding-bottom:9px;border-bottom:1px solid rgba(255,242,0,.32);margin-bottom:9px;} /* Variables lean, the way they do in the equation on home.html. */ .eq-m i{font-style:italic;} /* The two masked constants. Gold, because they are the part that is withheld. */ .eq-m b{color:var(--gold);opacity:.9;font-weight:normal;font-style:italic;} .eq-c{font-family:var(--ui);font-weight:700;font-size:9.5px;letter-spacing:.18em; text-transform:uppercase;color:rgba(255,242,0,.62);line-height:1.7;} .eq-p{flex:0 0 auto;font-family:'Exodus Numerals',Georgia,serif;font-size:21px; color:var(--mut);padding-top:1px;} .eq-n{font-size:14px;color:var(--mut);margin-top:18px;line-height:1.55;} /* ── THE OTHER TERMS ────────────────────────────────────────────────────── */ .more{margin-top:52px;padding-top:30px;border-top:1px solid var(--line);} .more-l{font-family:var(--ui);font-weight:700;font-size:10px;letter-spacing:.17em; text-transform:uppercase;color:var(--mut);margin-bottom:16px;} .more a{display:block;text-decoration:none;color:var(--ink);padding:12px 0; border-bottom:1px solid var(--line);font-size:16px;} .more a:last-child{border-bottom:none;} .more a:hover{color:var(--gold);} .more a span{display:block;font-size:13px;color:var(--mut);margin-top:2px;} /* ── FOOT ───────────────────────────────────────────────────────────────── */ .gf{margin-top:56px;border-top:1px solid var(--line);padding:26px 0 46px;} .gf p{font-size:13px;color:var(--mut);margin-bottom:9px;} .gf a{color:var(--gold);text-decoration:none;} .gf a:hover{text-decoration:underline;} /* ⛔ THE SELECTOR IS `.gf a.cta` AND NOT `.cta`. 16 Sep 2026. `.gf a{color:var(--gold)}` sits a few lines above this one and is a class PLUS a type, which outranks a bare `.cta` no matter which is written later. So the gold footer-link colour won, painted the label gold on a gold fill, and the button rendered as a blank yellow rectangle with the words invisible inside it. Kai saw it before anybody tested it. This is the cascade trap CLAUDE.md already records: an override wins on SPECIFICITY, never on being further down the file. `.gf a.cta` outranks it. CENTRED with width:fit-content plus margin auto, which is what centres a block that is only as wide as its own label. It used to be an inline-block sitting flush against the left edge under two paragraphs of prose. */ .gf a.cta{display:block;width:fit-content;margin:26px auto 0; background:var(--gold);color:#070707; font-family:var(--ui);font-weight:700;font-size:11px;letter-spacing:.17em; /* The trailing gap after the last letter drags a letter-spaced centred label left of centre. text-indent equal to the letter-spacing puts it back. */ text-indent:.17em;text-transform:uppercase;text-decoration:none; text-align:center;padding:14px 26px;border-radius:2px;} .gf a.cta:hover{background:#fffa4d;color:#070707;text-decoration:none;} @media (max-width:600px){ .wrap{padding:0 18px;} main{padding:36px 0 0;} .lede{font-size:17px;} /* ON A PHONE THE EQUATION IS ONE COLUMN. Left to wrap on its own, each term took a row and the + that followed it was pushed to the far right of that same row, reading as a stray mark rather than as an operator. Stacking the row puts every + on its own centred line between the terms it joins. */ .eq-r{flex-direction:column;align-items:stretch;gap:12px;} .eq-t{flex:1 1 auto;min-width:0;} .eq-p{padding-top:0;text-align:center;} }