/* ============================================================================ The Forge Ledger — Report Explorer design system Instrument-grade editorial archival. Warm metal-on-anthracite (dark) / ink-on-aged-paper (light). Ember accent. Theme set on . ========================================================================== */ @import url("vendor/fonts.css"); /* ---- tokens ------------------------------------------------------------- */ :root { /* type — clean Google sans; mono reserved for the data/label layer */ --font-display: "Roboto Condensed", ui-sans-serif, -apple-system, "Segoe UI", sans-serif; --font-sans: "Inter", ui-sans-serif, -apple-system, "Segoe UI", sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; /* geometry */ --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --maxw: 1280px; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --t: 0.34s var(--ease); /* DARK — hot metal on anthracite (default) */ --bg: #15110d; --bg-2: #1c1712; --bg-grad: radial-gradient(120% 90% at 88% -8%, rgba(255, 138, 61, 0.13), transparent 55%), radial-gradient(90% 70% at -10% 105%, rgba(214, 86, 15, 0.08), transparent 60%); --ink: #efe6d7; --ink-dim: #b4a896; --ink-faint: #7c715f; --glass: rgba(255, 247, 236, 0.045); --glass-2: rgba(255, 247, 236, 0.07); --glass-hi: rgba(255, 247, 236, 0.1); --hair: rgba(245, 233, 215, 0.1); --hair-strong: rgba(245, 233, 215, 0.17); --shadow: 0 18px 50px -22px rgba(0, 0, 0, 0.7), 0 2px 8px -4px rgba(0, 0, 0, 0.6); --shadow-lift: 0 30px 70px -28px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 138, 61, 0.16); --blur: 18px; --ember: #ff8a3d; --ember-deep: #e0641a; --gold: #f5b545; --ember-soft: rgba(255, 138, 61, 0.16); /* trust-label palette (the envelope made visible) */ --tl-indexer: #84b4ea; --tl-verified: #6fd49a; --tl-decode: #d9c27a; --tl-heuristic: #ff9a6a; --tl-policy: #bca0f2; --depth-quick: #84b4ea; --depth-standard: #f5b545; --depth-deep: #ff8a3d; color-scheme: dark; } :root[data-theme="light"] { /* LIGHT — ink on aged ledger paper */ --bg: #efe7d6; --bg-2: #e7dcc6; --bg-grad: radial-gradient(120% 90% at 88% -8%, rgba(194, 71, 10, 0.1), transparent 55%), radial-gradient(90% 80% at -8% 108%, rgba(181, 120, 15, 0.07), transparent 60%); --ink: #2a201a; --ink-dim: #5e5044; --ink-faint: #8c7c69; --glass: rgba(255, 253, 248, 0.55); --glass-2: rgba(255, 253, 248, 0.7); --glass-hi: rgba(255, 253, 248, 0.85); --hair: rgba(58, 43, 28, 0.13); --hair-strong: rgba(58, 43, 28, 0.22); --shadow: 0 18px 44px -24px rgba(74, 52, 30, 0.4), 0 2px 6px -4px rgba(74, 52, 30, 0.25); --shadow-lift: 0 28px 60px -26px rgba(74, 52, 30, 0.5), 0 0 0 1px rgba(194, 71, 10, 0.2); --blur: 14px; --ember: #c2470a; --ember-deep: #9c3306; --gold: #a86e0c; --ember-soft: rgba(194, 71, 10, 0.12); --tl-indexer: #2f6db0; --tl-verified: #1f7a4d; --tl-decode: #946c12; --tl-heuristic: #c2470a; --tl-policy: #6a45b8; --depth-quick: #2f6db0; --depth-standard: #a86e0c; --depth-deep: #c2470a; color-scheme: light; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-sans); background: var(--bg); color: var(--ink); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-optical-sizing: auto; min-height: 100vh; overflow-x: hidden; } /* atmosphere: forge glow + film grain + vignette */ body::before { content: ""; position: fixed; inset: 0; background: var(--bg-grad); pointer-events: none; z-index: 0; } body::after { content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.4; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); } #app { position: relative; z-index: 2; } a { color: inherit; text-decoration: none; } ::selection { background: var(--ember-soft); color: var(--ink); } /* thin ember scrollbars */ * { scrollbar-width: thin; scrollbar-color: var(--hair-strong) transparent; } *::-webkit-scrollbar { width: 9px; height: 9px; } *::-webkit-scrollbar-thumb { background: var(--hair-strong); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; } *::-webkit-scrollbar-thumb:hover { background: var(--ember); } /* ---- shared atoms ------------------------------------------------------- */ .mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1, "zero" 1; } .label { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); } .glass { background: var(--glass); backdrop-filter: blur(var(--blur)) saturate(1.4); -webkit-backdrop-filter: blur(var(--blur)) saturate(1.4); border: 1px solid var(--hair); box-shadow: var(--shadow); } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(18px, 4vw, 48px); } /* ---- top bar ------------------------------------------------------------ */ .topbar { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); border-bottom: 1px solid var(--hair); } .topbar-in { max-width: var(--maxw); margin: 0 auto; padding: 13px clamp(18px, 4vw, 48px); display: flex; align-items: center; gap: 18px; } .brand { display: flex; align-items: center; gap: 11px; cursor: pointer; } .brand svg { width: 26px; height: 26px; display: block; flex: none; filter: drop-shadow(0 0 6px var(--ember-soft)); } .brand b { font-family: var(--font-mono); font-weight: 600; letter-spacing: 0.04em; font-size: 0.94rem; } .brand b .accent { color: var(--ember); } .brand .sub { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.2em; color: var(--ink-faint); text-transform: uppercase; } .topbar .spacer { flex: 1; } .root-path { font-family: var(--font-mono); font-size: 0.68rem; color: var(--ink-faint); max-width: 38ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: rtl; text-align: right; } @media (max-width: 720px) { .root-path { display: none; } } .icon-btn { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--hair); background: var(--glass); color: var(--ink-dim); cursor: pointer; transition: var(--t); } .icon-btn:hover { color: var(--ember); border-color: var(--ember-soft); transform: translateY(-1px); } .icon-btn svg { width: 18px; height: 18px; } .icon-btn .moon { display: none; } :root[data-theme="light"] .icon-btn .sun { display: none; } :root[data-theme="light"] .icon-btn .moon { display: block; } /* ---- page masthead ------------------------------------------------------ */ .masthead { padding: clamp(34px, 7vw, 76px) 0 26px; } .masthead .kicker { margin-bottom: 14px; display: flex; align-items: center; gap: 12px; } .masthead .kicker::after { content: ""; height: 1px; flex: 1; background: linear-gradient(90deg, var(--hair-strong), transparent); } .masthead h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.6rem, 7vw, 5rem); line-height: 0.98; letter-spacing: -0.02em; margin: 0; } .masthead h1 em { font-style: normal; color: var(--ember); } .masthead .tagline { margin-top: 18px; max-width: 54ch; font-size: 1.12rem; color: var(--ink-dim); } /* ---- controls (filter/sort) -------------------------------------------- */ .controls { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 6px 0 30px; } .search { display: flex; align-items: center; gap: 9px; padding: 9px 15px; border-radius: 99px; border: 1px solid var(--hair); background: var(--glass); flex: 1; min-width: 220px; max-width: 420px; } .search svg { width: 15px; height: 15px; color: var(--ink-faint); flex: none; } .search input { border: 0; background: transparent; outline: none; color: var(--ink); font-family: var(--font-mono); font-size: 0.82rem; width: 100%; } .search input::placeholder { color: var(--ink-faint); } .chips { display: flex; gap: 7px; } .chip-btn { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 8px 13px; border-radius: 99px; border: 1px solid var(--hair); background: transparent; color: var(--ink-dim); cursor: pointer; transition: var(--t); } .chip-btn:hover { border-color: var(--hair-strong); color: var(--ink); } .chip-btn.on { background: var(--ember); border-color: var(--ember); color: #1a120b; font-weight: 600; } :root[data-theme="light"] .chip-btn.on { color: #fff; } .count { font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-faint); margin-left: auto; letter-spacing: 0.1em; } /* ---- report grid -------------------------------------------------------- */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 22px; padding-bottom: 80px; } .card { position: relative; border-radius: var(--r-lg); padding: 24px 24px 20px; cursor: pointer; overflow: hidden; display: flex; flex-direction: column; gap: 14px; background: var(--glass); backdrop-filter: blur(var(--blur)) saturate(1.4); -webkit-backdrop-filter: blur(var(--blur)) saturate(1.4); border: 1px solid var(--hair); box-shadow: var(--shadow); transition: transform var(--t), box-shadow var(--t), border-color var(--t), background var(--t); animation: rise 0.6s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 60ms); } .card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, transparent, var(--ember), transparent); opacity: 0; transition: opacity var(--t); } .card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); border-color: var(--ember-soft); background: var(--glass-2); } .card:hover::before { opacity: 0.8; } .card-top { display: flex; align-items: center; gap: 10px; } .badge { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; padding: 4px 9px; border-radius: 6px; font-weight: 600; border: 1px solid currentColor; } .badge.quick { color: var(--depth-quick); } .badge.standard { color: var(--depth-standard); } .badge.deep { color: var(--depth-deep); } .date { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-faint); letter-spacing: 0.05em; } .audio-pill { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 0.68rem; color: var(--ink-dim); padding: 3px 9px 3px 7px; border-radius: 99px; border: 1px solid var(--hair); } .audio-pill svg { width: 11px; height: 11px; color: var(--ember); } .card h2 { font-family: var(--font-display); font-weight: 600; font-optical-sizing: auto; font-size: 1.42rem; line-height: 1.12; letter-spacing: -0.012em; margin: 0; } .card .excerpt { color: var(--ink-dim); font-size: 0.96rem; line-height: 1.5; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .card-stats { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--hair); display: flex; flex-wrap: wrap; gap: 7px 14px; } .stat { display: flex; align-items: baseline; gap: 5px; font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-faint); } .stat b { color: var(--ink); font-weight: 600; } .stat .ember { color: var(--ember); } /* ---- empty / loading ---------------------------------------------------- */ .empty { text-align: center; padding: 90px 20px; color: var(--ink-dim); border: 1px dashed var(--hair-strong); border-radius: var(--r-lg); } .empty h3 { font-family: var(--font-display); font-size: 1.6rem; margin: 0 0 8px; color: var(--ink); } .empty code { font-family: var(--font-mono); font-size: 0.82rem; color: var(--ember); } .spinner { width: 30px; height: 30px; margin: 80px auto; border-radius: 50%; border: 2px solid var(--hair); border-top-color: var(--ember); animation: spin 0.8s linear infinite; } /* ============================================================================ DETAIL VIEW ========================================================================== */ .back { display: inline-flex; align-items: center; gap: 8px; margin: 26px 0 6px; font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim); transition: var(--t); } .back:hover { color: var(--ember); gap: 12px; } .back svg { width: 14px; height: 14px; } .detail-head { padding: 8px 0 30px; border-bottom: 1px solid var(--hair); margin-bottom: 34px; } .meta-row { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin-bottom: 20px; } .anchor-pill { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-dim); padding: 5px 11px; border-radius: 99px; border: 1px solid var(--hair); background: var(--glass); } .anchor-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--tl-verified); box-shadow: 0 0 8px var(--tl-verified); } .anchor-pill b { color: var(--ink); } .cmd { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ember); } .detail-head h1 { font-family: var(--font-display); font-optical-sizing: auto; font-weight: 600; font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1.02; letter-spacing: -0.02em; margin: 0; } .lede { margin: 22px 0 0; font-size: clamp(1.1rem, 2.4vw, 1.4rem); line-height: 1.5; color: var(--ink); max-width: 70ch; } .q { color: var(--ember); } .grounding { margin-top: 16px; max-width: 76ch; color: var(--ink-dim); font-size: 0.98rem; } /* instrument stat tiles */ .tiles { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } .tile { border-radius: var(--r-md); padding: 13px 18px; min-width: 96px; border: 1px solid var(--hair); background: var(--glass); } .tile .v { font-family: var(--font-mono); font-size: 1.32rem; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; } .tile .v.ember { color: var(--ember); } .tile .k { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); margin-top: 3px; } /* layout: article + sidebar */ .detail-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 46px; padding-bottom: 100px; align-items: start; } @media (max-width: 940px) { .detail-body { grid-template-columns: 1fr; } .sidebar { order: -1; } } .sidebar { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 18px; } .panel { border-radius: var(--r-md); padding: 18px; background: var(--glass); border: 1px solid var(--hair); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); } .panel h4 { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 13px; font-weight: 600; } /* audio player */ .player { display: flex; flex-direction: column; gap: 13px; } .player-main { display: flex; align-items: center; gap: 13px; } .play-btn { width: 46px; height: 46px; flex: none; border-radius: 50%; cursor: pointer; border: none; display: grid; place-items: center; background: linear-gradient(145deg, var(--ember), var(--ember-deep)); color: #1a120b; box-shadow: 0 6px 18px -6px var(--ember), 0 0 0 1px var(--ember-soft); transition: var(--t); } .play-btn:hover { transform: scale(1.06); } .play-btn svg { width: 18px; height: 18px; } .play-btn .ic-pause { display: none; } .player.playing .ic-play { display: none; } .player.playing .ic-pause { display: block; } .player-meta { flex: 1; min-width: 0; } .player-meta .pt { font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-dim); display: flex; justify-content: space-between; } .scrub { -webkit-appearance: none; appearance: none; width: 100%; height: 5px; border-radius: 99px; margin-top: 8px; cursor: pointer; background: linear-gradient(90deg, var(--ember) var(--pct, 0%), var(--hair-strong) var(--pct, 0%)); } .scrub::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 0 4px var(--ember-soft); cursor: pointer; } .scrub::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--ember); cursor: pointer; } .voices { display: flex; flex-wrap: wrap; gap: 6px; } .voice { font-family: var(--font-mono); font-size: 0.62rem; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--hair); color: var(--ink-dim); } .voice b { color: var(--ink); } .voice .v-narrator { color: var(--ember); } /* trust legend */ .legend { display: flex; flex-direction: column; gap: 9px; } .tl { display: flex; align-items: flex-start; gap: 9px; font-size: 0.8rem; line-height: 1.35; } .tl .dot { width: 8px; height: 8px; border-radius: 2px; margin-top: 5px; flex: none; box-shadow: 0 0 7px currentColor; } .tl .tl-name { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.06em; display: block; } .tl .tl-desc { color: var(--ink-faint); font-size: 0.74rem; } .tl.indexer { color: var(--tl-indexer); } .tl.verified { color: var(--tl-verified); } .tl.decode { color: var(--tl-decode); } .tl.heuristic { color: var(--tl-heuristic); } .tl.policy { color: var(--tl-policy); } .tl .tl-name, .tl .tl-desc { color: var(--ink-dim); } .tl .tl-name { color: var(--ink); } .taglist { display: flex; flex-wrap: wrap; gap: 6px; } .tag { font-family: var(--font-mono); font-size: 0.66rem; padding: 4px 9px; border-radius: 6px; background: var(--glass-2); border: 1px solid var(--hair); color: var(--ink-dim); } .srcgroup { margin-bottom: 12px; } .srcgroup:last-child { margin-bottom: 0; } .srcgroup .sg-h { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 6px; display: flex; gap: 7px; align-items: center; } .srcgroup .sg-h .n { color: var(--ember); } .srcgroup.corpus .sg-h { color: var(--tl-indexer); } .srcgroup.web .sg-h { color: var(--ink-dim); } .srcgroup ul { margin: 0; padding-left: 16px; } .srcgroup li { font-size: 0.78rem; color: var(--ink-dim); margin-bottom: 4px; line-height: 1.4; word-break: break-word; } .verif { font-size: 0.82rem; color: var(--ink-dim); line-height: 1.5; } .verif .ok { color: var(--tl-verified); font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; display: block; margin-bottom: 6px; } .dl-row { display: flex; flex-direction: column; gap: 8px; } .dl-link { display: flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 0.74rem; color: var(--ink-dim); transition: var(--t); } .dl-link:hover { color: var(--ember); } .dl-link svg { width: 14px; height: 14px; flex: none; } .dl-link .sz { margin-left: auto; color: var(--ink-faint); font-size: 0.68rem; } /* ============================================================================ RENDERED REPORT (markdown) ========================================================================== */ .report { font-size: 1.06rem; line-height: 1.72; max-width: 74ch; } .report > *:first-child { margin-top: 0; } .report h2 { font-family: var(--font-display); font-optical-sizing: auto; font-weight: 600; font-size: clamp(1.5rem, 3.2vw, 2.1rem); line-height: 1.12; letter-spacing: -0.015em; margin: 2.6em 0 0.7em; padding-top: 0.7em; border-top: 1px solid var(--hair); scroll-margin-top: 80px; } .report h2::before { content: "◆"; color: var(--ember); font-size: 0.6em; margin-right: 0.6em; vertical-align: middle; opacity: 0.8; } .report h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.32rem; margin: 1.8em 0 0.5em; letter-spacing: -0.01em; } .report p { margin: 1.1em 0; } .report strong { color: var(--ink); font-weight: 700; } .report em { font-style: italic; } .report a { color: var(--ember); text-decoration: underline; text-decoration-color: var(--ember-soft); text-underline-offset: 3px; } .report a:hover { text-decoration-color: var(--ember); } .report ul, .report ol { margin: 1.1em 0; padding-left: 1.4em; } .report li { margin: 0.5em 0; } .report ol > li::marker { font-family: var(--font-mono); color: var(--ember); font-weight: 600; } .report hr { border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--hair-strong), transparent); margin: 2.6em 0; } .report code { font-family: var(--font-mono); font-size: 0.86em; background: var(--glass-2); border: 1px solid var(--hair); border-radius: 5px; padding: 1px 6px; color: var(--ember); } .report blockquote { margin: 1.6em 0; padding: 14px 20px; border-left: 3px solid var(--ember); background: var(--ember-soft); border-radius: 0 var(--r-sm) var(--r-sm) 0; color: var(--ink-dim); font-style: italic; font-size: 0.98rem; } .report blockquote p { margin: 0.3em 0; } /* the BLUF section: first ol after "Bottom line up front" reads as a lede list */ .report .bluf { counter-reset: bluf; padding-left: 0; list-style: none; } .report .bluf > li { position: relative; padding: 16px 18px 16px 56px; margin: 12px 0; border-radius: var(--r-md); background: var(--glass); border: 1px solid var(--hair); } .report .bluf > li::before { counter-increment: bluf; content: counter(bluf, decimal-leading-zero); position: absolute; left: 16px; top: 16px; font-family: var(--font-mono); font-size: 0.86rem; font-weight: 700; color: var(--ember); } /* ledger tables — high legibility for dense financial data */ .table-wrap { margin: 1.8em 0; overflow-x: auto; border-radius: var(--r-md); border: 1px solid var(--hair); background: var(--glass); box-shadow: var(--shadow); } .report table { border-collapse: collapse; width: 100%; font-size: 0.84rem; min-width: 520px; } .report thead th { position: sticky; top: 0; z-index: 1; font-family: var(--font-mono); font-weight: 600; font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim); text-align: left; padding: 12px 14px; white-space: nowrap; background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--hair-strong); } .report tbody td { padding: 10px 14px; border-bottom: 1px solid var(--hair); vertical-align: top; } .report tbody tr:last-child td { border-bottom: 0; } .report tbody tr { transition: background 0.16s; } .report tbody tr:hover { background: var(--glass-2); } .report td.num, .report th.num { text-align: right; font-family: var(--font-mono); font-feature-settings: "tnum" 1, "zero" 1; white-space: nowrap; } .report table strong { color: var(--ember); } /* mermaid diagram frames */ .diagram { margin: 2em 0; padding: 24px; border-radius: var(--r-md); background: var(--glass); border: 1px solid var(--hair); box-shadow: var(--shadow); text-align: center; overflow-x: auto; animation: fade 0.7s var(--ease) backwards; } .diagram svg { max-width: 100%; height: auto; } .diagram-fail { font-family: var(--font-mono); font-size: 0.78rem; color: var(--tl-heuristic); text-align: left; } .diagram-fail pre { white-space: pre-wrap; color: var(--ink-faint); margin-top: 10px; } /* footer */ .report-foot { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--hair); font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-faint); line-height: 1.7; } /* ---- animations --------------------------------------------------------- */ @keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } @keyframes fade { from { opacity: 0; } to { opacity: 1; } } @keyframes spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto; } } /* view transitions (progressive enhancement) */ ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.32s; }