:root{ --bg:#070a0f; --panel:#0b1220; --panel2:#0a0f18; --text:#e7eefc; --muted:#c8d3e8; --line:#17243b; --pill:#0b1528; --pill2:#0c1931; --accent:#f6c34a; --shadow: 0 10px 40px rgba(0,0,0,.55); color-scheme: dark; /* RGB triplets — used as rgba(var(--x-rgb), a) so theming preserves the site's alpha-layered depth. Defaults reproduce the original dark palette exactly. Each [data-theme] below swaps this whole set. */ --bg-rgb:7,10,15; --panel-rgb:11,21,40; --panel2-rgb:10,15,24; --text-rgb:231,238,252; --line-rgb:23,36,59; --line2-rgb:35,55,90; --pill2-rgb:12,25,49; --accent-rgb:246,195,74; --glow-rgb:30,60,120; --codebg-rgb:4,7,14; --accent-ink:#0b1220; /* text on an accent-colored surface */ --code-text:#c5d8f5; /* code-block text */ --code-inline-text:#a8c8ff; /* inline text */ } /* =========================================================================== THEMES — set (persisted in localStorage 'odt_theme'). Each theme redefines the full token set. Dark (above) is the default. =========================================================================== */ /* ---- DARK (explicit alias of the default) ---- */ [data-theme="dark"]{ color-scheme: dark; } /* ============================ LIGHT ============================ */ /* Daylight — clean neutral light */ [data-theme="light"]{ color-scheme: light; --bg:#f6f8fc; --panel:#ffffff; --panel2:#eef2f8; --text:#161c28; --muted:#3a4255; --line:#d5dceb; --pill:#eef2f8; --pill2:#e4ebf6; --accent:#a36b00; --shadow:0 8px 30px rgba(40,55,90,.14); --bg-rgb:246,248,252; --panel-rgb:226,233,244; --panel2-rgb:222,229,242; --text-rgb:27,34,48; --line-rgb:185,196,217; --line2-rgb:160,174,200; --pill2-rgb:210,221,240; --accent-rgb:163,107,0; --glow-rgb:120,150,210; --codebg-rgb:235,239,247; --accent-ink:#ffffff; --code-text:#243049; --code-inline-text:#7a3d00; } /* Solarized Light — classic developer palette */ [data-theme="solarized-light"]{ color-scheme: light; --bg:#fdf6e3; --panel:#fbf1d6; --panel2:#f3ead0; --text:#243136; --muted:#39464c; --line:#e3dab9; --pill:#f3ead0; --pill2:#eee2c4; --accent:#b58900; --shadow:0 8px 30px rgba(101,123,131,.16); --bg-rgb:253,246,227; --panel-rgb:238,228,196; --panel2-rgb:234,222,188; --text-rgb:58,77,84; --line-rgb:222,210,170; --line2-rgb:200,186,142; --pill2-rgb:236,224,192; --accent-rgb:181,137,0; --glow-rgb:38,139,210; --codebg-rgb:238,228,196; --accent-ink:#fdf6e3; --code-text:#586e75; --code-inline-text:#b04a00; } /* Sepia — warm, low-glare reading */ [data-theme="sepia"]{ color-scheme: light; --bg:#f3ead8; --panel:#fbf4e6; --panel2:#ece0c8; --text:#2f2418; --muted:#4c3c2a; --line:#ddccae; --pill:#ece0c8; --pill2:#e6d8ba; --accent:#9a5b1f; --shadow:0 8px 30px rgba(90,70,45,.16); --bg-rgb:243,234,216; --panel-rgb:233,221,196; --panel2-rgb:228,214,186; --text-rgb:59,47,35; --line-rgb:214,198,166; --line2-rgb:190,170,132; --pill2-rgb:230,216,186; --accent-rgb:154,91,31; --glow-rgb:170,130,80; --codebg-rgb:233,221,196; --accent-ink:#fbf4e6; --code-text:#4a3a2a; --code-inline-text:#8a4a14; } /* ============================ BRIGHT ============================ */ /* Synthwave — neon on deep indigo */ [data-theme="synthwave"]{ color-scheme: dark; --bg:#180a2b; --panel:#241043; --panel2:#1c0c36; --text:#fdf4ff; --muted:#e4cdf7; --line:#4a2a6e; --pill:#241043; --pill2:#311558; --accent:#ff5fd2; --shadow:0 10px 40px rgba(0,0,0,.55); --bg-rgb:24,10,43; --panel-rgb:46,18,82; --panel2-rgb:34,14,62; --text-rgb:253,244,255; --line-rgb:84,46,124; --line2-rgb:120,70,170; --pill2-rgb:55,24,92; --accent-rgb:255,95,210; --glow-rgb:120,40,200; --codebg-rgb:16,6,32; --accent-ink:#1b0533; --code-text:#8df0ff; --code-inline-text:#ff8ce0; } /* Dracula — the popular vivid dark theme */ [data-theme="dracula"]{ color-scheme: dark; --bg:#282a36; --panel:#343746; --panel2:#21222c; --text:#f8f8f2; --muted:#d7d9e8; --line:#454860; --pill:#343746; --pill2:#3c3f52; --accent:#bd93f9; --shadow:0 10px 40px rgba(0,0,0,.5); --bg-rgb:40,42,54; --panel-rgb:68,71,90; --panel2-rgb:33,34,44; --text-rgb:248,248,242; --line-rgb:68,71,99; --line2-rgb:98,102,140; --pill2-rgb:60,63,82; --accent-rgb:189,147,249; --glow-rgb:98,114,164; --codebg-rgb:24,25,33; --accent-ink:#21222c; --code-text:#8be9fd; --code-inline-text:#50fa7b; } /* Miami Sunset — vivid magenta/orange on teal-navy */ [data-theme="miami"]{ color-scheme: dark; --bg:#0a1626; --panel:#11243b; --panel2:#0c1c30; --text:#f3f7ff; --muted:#c0d5ec; --line:#27425f; --pill:#11243b; --pill2:#163052; --accent:#ff7a59; --shadow:0 10px 40px rgba(0,0,0,.5); --bg-rgb:10,22,38; --panel-rgb:17,36,59; --panel2-rgb:12,28,48; --text-rgb:243,247,255; --line-rgb:39,66,95; --line2-rgb:60,100,140; --pill2-rgb:22,48,82; --accent-rgb:255,122,89; --glow-rgb:255,90,150; --codebg-rgb:7,16,28; --accent-ink:#1a0a06; --code-text:#5ad1c7; --code-inline-text:#ffb088; } /* ========================= ACCESSIBILITY ========================= */ /* High Contrast (Dark) — near-AAA, black bg / white text / yellow accent */ [data-theme="contrast-dark"]{ color-scheme: dark; --bg:#000000; --panel:#000000; --panel2:#000000; --text:#ffffff; --muted:#e6e6e6; --line:#ffffff; --pill:#000000; --pill2:#1a1a1a; --accent:#ffe000; --shadow:0 0 0 1px #ffffff; --bg-rgb:0,0,0; --panel-rgb:0,0,0; --panel2-rgb:0,0,0; --text-rgb:255,255,255; --line-rgb:255,255,255; --line2-rgb:255,255,255; --pill2-rgb:40,40,40; --accent-rgb:255,224,0; --glow-rgb:0,0,0; --codebg-rgb:0,0,0; --accent-ink:#000000; --code-text:#ffffff; --code-inline-text:#ffe000; } /* High Contrast (Light) — near-AAA, white bg / black text / blue accent */ [data-theme="contrast-light"]{ color-scheme: light; --bg:#ffffff; --panel:#ffffff; --panel2:#ffffff; --text:#000000; --muted:#1a1a1a; --line:#000000; --pill:#ffffff; --pill2:#eaeaea; --accent:#0b3ea8; --shadow:0 0 0 1px #000000; --bg-rgb:255,255,255; --panel-rgb:255,255,255; --panel2-rgb:255,255,255; --text-rgb:0,0,0; --line-rgb:0,0,0; --line2-rgb:0,0,0; --pill2-rgb:225,225,225; --accent-rgb:11,62,168; --glow-rgb:255,255,255; --codebg-rgb:245,245,245; --accent-ink:#ffffff; --code-text:#11181f; --code-inline-text:#0b3ea8; } /* Light & accessibility themes: drop the dark ambient glow for a clean field */ [data-theme="light"] body::before, [data-theme="light"] body::after, [data-theme="solarized-light"] body::before, [data-theme="solarized-light"] body::after, [data-theme="sepia"] body::before, [data-theme="sepia"] body::after, [data-theme="contrast-dark"] body::before, [data-theme="contrast-dark"] body::after, [data-theme="contrast-light"] body::before, [data-theme="contrast-light"] body::after{ background:none; } *{box-sizing:border-box} html,body{height:100%} body{ margin:0; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace; background: var(--bg); color:var(--text); position: relative; } /* Ambient glow */ body::before{ content:""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(1200px 700px at 50% -10%, rgba(var(--glow-rgb),.22), transparent 60%), radial-gradient(900px 600px at 80% 10%, rgba(var(--accent-rgb),.10), transparent 55%); } body::after{ content:""; position: fixed; left: 0; right: 0; bottom: 0; height: 48px; pointer-events: none; z-index: 0; background: linear-gradient(to top, rgba(var(--glow-rgb),.18), transparent 70%); } /* Layout */ .page{ min-height:100vh; display:flex; flex-direction:column; position: relative; z-index: 1; } main{ flex:1 0 auto; } #site-header{position:relative;z-index:60} /* Header */ /* Header */ header{ position:sticky; top:0; z-index:10; /* Near-opaque solid background instead of a live backdrop-filter blur. A blurred sticky bar this tall forces a full re-composite on every scroll frame (visible jank on weaker GPUs); a solid bg looks nearly identical and scrolls smoothly. */ background: linear-gradient(to bottom, rgba(var(--bg-rgb),.985), rgba(var(--bg-rgb),.94)); border-bottom:0; /* no full-width line */ } /* the divider is now the same width as .wrap, and only 1px tall */ header .wrap{ border-bottom:1px solid rgba(var(--line-rgb),.55); } /* REMOVE default h1/h2 spacing inside header */ header h1, header h2{ margin:0; } .wrap{ width:min(1100px, 92vw); margin:0 auto; } .topbar{ padding:10px 0 8px; display:flex; flex-direction:row; gap:12px; align-items:center; } .brand{ display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.2px; } .dot{ width:10px; height:10px; border-radius:999px; background:var(--accent); box-shadow:0 0 0 6px rgba(var(--accent-rgb),.10); } .subtitle{ margin-top:0; color:var(--muted); font-size:11px; flex:1; } /* Infrastructure link (default: normal flow) */ .infra-link{ font-size:11px; text-decoration:none; color:var(--muted); opacity:.75; white-space:nowrap; margin-top:0; } .infra-link:hover{ opacity:1; text-decoration:underline; color:var(--text); } /* Nav */ .navcenter{ display:flex; gap:6px; justify-content:center; flex-wrap:wrap; padding-bottom:6px; overflow:visible; position:relative; z-index:50; } .navcenter-break{flex-basis:100%;height:0;pointer-events:none} .pill{ display:inline-flex; align-items:center; justify-content:center; padding:5px 11px; border-radius:999px; border:1px solid rgba(var(--line-rgb),.85); background: linear-gradient(to bottom, rgba(var(--panel-rgb),.85), rgba(var(--panel-rgb),.55)); color:var(--text); text-decoration:none; font-size:12px; } .pill:hover{ background: linear-gradient(to bottom, rgba(var(--pill2-rgb),.9), rgba(var(--pill2-rgb),.55)); } .pill.active{ border-color: rgba(var(--accent-rgb),.55); } .category-nav{padding-bottom:10px;overflow-x:auto;overflow-y:visible;scrollbar-width:thin;position:relative;z-index:50} .category-nav-track{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:2px 0} .category-nav-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px} .mega-tab{position:relative;display:inline-flex;flex:0 0 auto} .mega-tab summary{list-style:none !important;display:inline-flex !important;align-items:center;justify-content:center} .mega-tab summary::-webkit-details-marker{display:none} .mega-tab summary::marker{content:""} .category-tab{ cursor:pointer; white-space:nowrap; gap:8px; } .category-tab::after{ content:""; width:8px; height:8px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg) translateY(-1px); transform-origin:center; opacity:.78; } .mega-tab[open] .category-tab::after{ transform:rotate(225deg) translateY(-1px); } .mega-panel{ display:none; position:absolute; top:calc(100% + 8px); left:0; min-width:280px; max-width:min(92vw, 360px); max-height:min(70vh,520px); overflow:auto; padding:10px; border-radius:12px; border:1px solid rgba(var(--line-rgb),.8); background:rgba(var(--panel2-rgb),.97); box-shadow:var(--shadow); z-index:9999 } .mega-panel a,.mega-item{display:block;padding:8px 10px;border-radius:8px;text-decoration:none;color:var(--text);font-size:12px;white-space:normal} .mega-panel a:hover{background:rgba(var(--pill2-rgb),.55)} .mega-item.disabled{opacity:.62;cursor:not-allowed} .mega-tab[open] .mega-panel{display:block} .pill:focus-visible, .mega-tab summary:focus-visible, .mega-panel a:focus-visible{ outline:2px solid rgba(var(--accent-rgb),.85); outline-offset:2px; } /* Cards */ .grid{ display:grid; grid-template-columns: 1.2fr .8fr; gap:16px; padding:22px 0 26px; } .card{ background: linear-gradient(to bottom, rgba(11,18,32,.75), rgba(var(--panel2-rgb),.55)); border:1px solid rgba(var(--line-rgb),.8); border-radius:16px; box-shadow: var(--shadow); } .card .pad{padding:18px} .h1{ font-size:18px; font-weight:800; margin:0 0 10px; } .h2{ font-size:15.5px; font-weight:700; margin:0 0 8px; } .muted{ color:var(--muted); font-size:14px; line-height:1.62; } .hr{ height:1px; background:rgba(var(--line-rgb),.8); margin:14px 0; } /* Footer */ footer{ border-top:1px solid rgba(var(--line-rgb),.55); background: rgba(var(--bg-rgb),.65); margin-top:26px; } .footerwrap{ width:min(1100px, 92vw); margin:0 auto; padding:14px 0; display:flex; gap:10px; align-items:center; justify-content:space-between; color:var(--muted); font-size:12px; flex-wrap:wrap; } .footerlinks{ display:flex; gap:10px; flex-wrap:wrap; } .footerlinks a{ color:var(--muted); text-decoration:none; } .footerlinks a:hover{ color:var(--text); } /* ---------------- RESPONSIVE ---------------- */ @media (max-width: 900px){ .grid{ grid-template-columns:1fr; } } /* Desktop: infra-link sits inline at the end of the topbar row */ @media (min-width: 641px){ .topbar{ position: relative; } .infra-link{ margin-left:auto; } } /* Mobile */ @media (max-width: 640px){ .topbar{ padding:8px 0 6px; flex-wrap:wrap; } .navcenter{ align-items:stretch; } .brand{ font-size:13px; } .subtitle{ display:none; } .pill{ font-size:11px; padding:5px 10px; } .navcenter > .pill, .navcenter > .mega-tab{ width:100%; } .mega-tab{ width:100%; } .mega-tab summary{ width:100%; justify-content:space-between; } .mega-panel{ position:static; width:100%; min-width:0; max-width:none; max-height:none; margin-top:8px; } .infra-link{ position: static; display:block; text-align:center; margin-top:6px; } .card .pad{ padding:16px; } } /*1*/ .breadcrumbs{ margin: 0 0 12px; font-size:12px; color:var(--muted); } .breadcrumbs a{color:var(--muted);text-decoration:none} .breadcrumbs a:hover{color:var(--text);text-decoration:underline} .tool-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px} textarea,input,select{font-family:inherit} .in{width:100%;border-radius:12px;border:1px solid rgba(var(--line-rgb),.8);background:rgba(var(--panel-rgb),.35);color:var(--text);padding:10px 12px;font-size:13.5px;line-height:1.4;outline:none;} .row{display:flex;gap:10px;flex-wrap:wrap} .col{flex:1 1 220px} .small{font-size:12.5px;color:var(--muted)} .tools-layout-fix{position:relative; z-index:2} .tools-search-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px} .tools-search-row .in{flex:1 1 300px} .tool-action{cursor:pointer} .category-jump-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;position:relative;z-index:3} .tool-category{margin-top:14px;position:relative;z-index:2} .tool-chip.disabled{opacity:.62;cursor:not-allowed;pointer-events:none} .hidden-tool{display:none !important} header{z-index:40} /* ============================================================ BLOG — shared reading container ============================================================ */ .container{ width:min(760px,92vw); margin:0 auto; padding:40px 0 64px; } /* ============================================================ BLOG INDEX — header ============================================================ */ .blog-index-eyebrow{ font-size:11px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--accent); margin:0 0 12px; } .blog-index-headline{ font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:clamp(26px,4vw,36px); font-weight:800; color:var(--text); margin:0 0 12px; line-height:1.15; letter-spacing:-.02em; } .blog-index-sub{ font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--muted); font-size:15px; margin:0 0 44px; line-height:1.7; max-width:54ch; } /* ============================================================ BLOG INDEX — article list ============================================================ */ .blog-list{ list-style:none; margin:0; padding:0; } .blog-list-item{ border-top:1px solid rgba(var(--line-rgb),.8); padding:32px 0; position:relative; } .blog-list-item:last-child{ border-bottom:1px solid rgba(var(--line-rgb),.8); } /* hover state — subtle left accent */ .blog-list-item::before{ content:""; position:absolute; left:-16px; top:32px; bottom:32px; width:2px; background:var(--accent); border-radius:2px; opacity:0; transition:opacity .2s; } .blog-list-item:hover::before{opacity:1} .blog-list-item a{ display:block; text-decoration:none; color:var(--text); font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:20px; font-weight:700; line-height:1.3; margin-bottom:10px; transition:color .15s; } .blog-list-item a strong{font-weight:inherit} .blog-list-item a:hover{color:var(--accent)} .blog-list-meta{ display:flex; align-items:center; gap:12px; margin-bottom:10px; } .blog-list-meta time{ font-size:12px; color:var(--muted); opacity:.8; } .blog-list-meta .read-time{ font-size:12px; color:var(--muted); opacity:.65; } .blog-list-meta .read-time::before{ content:"·"; margin-right:12px; opacity:.5; } .blog-list-item p{ font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--muted); font-size:14px; line-height:1.7; margin:0 0 14px; max-width:60ch; } .blog-list-read-more{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--accent); text-decoration:none; opacity:.8; transition:opacity .15s, gap .15s; } .blog-list-read-more:hover{opacity:1;gap:10px} .blog-list-read-more::after{content:"→"} /* ============================================================ BLOG POST — back link ============================================================ */ .post-back{ display:inline-flex; align-items:center; gap:6px; color:var(--muted); text-decoration:none; font-size:12px; font-weight:500; margin-bottom:32px; padding:6px 12px 6px 10px; border:1px solid rgba(var(--line-rgb),.7); border-radius:999px; background:rgba(var(--panel-rgb),.4); transition:color .15s, border-color .15s, background .15s; } .post-back:hover{ color:var(--text); border-color:rgba(var(--line-rgb),1); background:rgba(var(--panel-rgb),.7); } .post-back::before{content:"←"} /* ============================================================ BLOG POST — title + meta ============================================================ */ .blog-post>header{margin-bottom:0} .blog-post>header h1{ font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:clamp(26px,4.5vw,38px); font-weight:800; line-height:1.18; color:var(--text); margin:0 0 20px; letter-spacing:-.02em; } .post-meta{ display:flex; align-items:center; flex-wrap:wrap; gap:0; color:var(--muted); font-size:13px; margin:0; line-height:1.5; } .post-meta .post-author{color:var(--accent);font-weight:600} .post-meta time,.post-meta .post-reading{opacity:.75} /* divider between meta and body */ .post-divider{ border:none; border-top:1px solid rgba(var(--line-rgb),.7); margin:28px 0 36px; } /* ============================================================ BLOG POST — body typography ============================================================ */ .blog-post article{ font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:17px; line-height:1.8; color:rgba(var(--text-rgb),.88); } .blog-post article>*+*{margin-top:1.25em} .blog-post article p{margin:0 0 1.25em} /* H2 — section breaks */ .blog-post article h2{ font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:22px; font-weight:700; color:var(--text); margin:2.5em 0 .7em; padding-left:16px; border-left:3px solid var(--accent); line-height:1.25; letter-spacing:-.01em; } /* H3 — sub-sections */ .blog-post article h3{ font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:13px; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:.1em; margin:2em 0 .6em; } /* H4 */ .blog-post article h4{ font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:16px; font-weight:700; color:var(--text); margin:1.6em 0 .4em; } /* inline code */ .blog-post article :not(pre)>code{ font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; font-size:.8em; background:rgba(var(--line-rgb),.9); border:1px solid rgba(var(--line2-rgb),.9); border-radius:5px; padding:2px 7px; color:var(--code-inline-text); white-space:nowrap; } /* code blocks */ .blog-post article pre{ background:rgba(var(--codebg-rgb),.95); border:1px solid rgba(var(--line-rgb),.9); border-left:3px solid rgba(var(--accent-rgb),.55); border-radius:12px; padding:20px 22px; overflow-x:auto; margin:1.8em 0; line-height:1.65; } .blog-post article pre code{ font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; font-size:13px; color:var(--code-text); background:none; border:none; padding:0; white-space:pre; } /* links in body */ .blog-post article a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; text-decoration-color:rgba(var(--accent-rgb),.45); transition:text-decoration-color .15s; } .blog-post article a:hover{text-decoration-color:var(--accent)} /* lists */ .blog-post article ul,.blog-post article ol{ padding-left:1.5em; margin:.6em 0 1.4em; } .blog-post article li{ margin:.45em 0; line-height:1.7; color:rgba(var(--text-rgb),.85); } .blog-post article li strong{color:var(--text)} /* tables */ .blog-post article table{ width:100%; border-collapse:collapse; margin:2em 0; font-size:13px; border:1px solid rgba(var(--line-rgb),.8); border-radius:12px; overflow:hidden; } .blog-post article th{ background:rgba(var(--panel-rgb),.95); color:var(--text); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:11px 16px; text-align:left; border-bottom:1px solid rgba(var(--line-rgb),.9); } .blog-post article td{ padding:11px 16px; border-bottom:1px solid rgba(var(--line-rgb),.4); vertical-align:top; line-height:1.55; } .blog-post article tr:last-child td{border-bottom:none} .blog-post article tr:nth-child(even) td{background:rgba(var(--panel-rgb),.2)} /* blockquote */ .blog-post article blockquote{ border-left:3px solid var(--accent); margin:2em 0; padding:14px 22px; background:rgba(var(--panel-rgb),.5); border-radius:0 10px 10px 0; color:var(--muted); } .blog-post article blockquote p{margin:0;font-style:italic;font-size:16px} .blog-post article strong{color:var(--text);font-weight:700} /* ============================================================ BLOG POST — sources ============================================================ */ .post-sources{ margin-top:52px; padding-top:24px; border-top:1px solid rgba(var(--line-rgb),.6); } .post-sources h2{ font-family:system-ui,-apple-system,sans-serif; font-size:10px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); margin:0 0 16px; opacity:.7; } .post-sources ol{padding-left:1.4em;margin:0} .post-sources li{ font-size:12px; color:var(--muted); margin:.5em 0; line-height:1.6; opacity:.8; } .post-sources a{ color:var(--muted); text-decoration:underline; text-underline-offset:2px; transition:color .15s; } .post-sources a:hover{color:var(--text);opacity:1} /* ============================================================ BLOG — responsive ============================================================ */ @media(max-width:640px){ .container{padding:24px 0 48px} .blog-list-item{padding:24px 0} .blog-list-item a{font-size:17px} .blog-post>header h1{font-size:24px} .blog-post article{font-size:16px} .blog-post article h2{font-size:19px} .blog-post article pre{padding:14px 16px;border-radius:8px} } /* ============================================================ DATA-HANDLING BADGES (per-tool privacy labels) ============================================================ */ .badges{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 2px} .badge{ display:inline-flex;align-items:center;gap:6px; font-size:11px;line-height:1;font-weight:600; padding:5px 9px;border-radius:999px; border:1px solid rgba(var(--line-rgb),.85); background:rgba(var(--panel-rgb),.5); color:var(--muted); white-space:nowrap;cursor:default; } .badge::before{content:"";width:7px;height:7px;border-radius:999px;background:var(--muted);opacity:.85} .badge.local::before{background:#5cff9d} .badge.external::before{background:#f2cc60} .badge.caution::before{background:#ff7b72} .badge.info::before{background:#7aa2ff} /* ============================================================ AFFILIATE "Recommended reading" callout ============================================================ */ .aff-box{ margin:16px 0 0; padding:18px 20px; border:1px solid rgba(var(--accent-rgb),.32); border-left:4px solid var(--accent); border-radius:14px; background:linear-gradient(to bottom, rgba(var(--accent-rgb),.09), rgba(var(--accent-rgb),.025)); box-shadow:var(--shadow); } .aff-title{ display:flex;align-items:center;gap:8px; font-size:15.5px;font-weight:800;color:var(--text); margin:0 0 12px; } .aff-title .aff-tag{ font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase; color:var(--accent-ink);background:var(--accent); padding:3px 8px;border-radius:999px; } .aff-list{list-style:none;margin:0;padding:0} .aff-list li{ padding:9px 0; border-top:1px solid rgba(var(--accent-rgb),.14); font-size:14px;line-height:1.5;color:var(--text); } .aff-list li:first-child{border-top:none} .aff-link{color:var(--accent);font-weight:700;text-decoration:none} .aff-link:hover{text-decoration:underline} .aff-why{color:var(--muted)} .aff-note{ margin:12px 0 0;font-size:12px;line-height:1.5;color:var(--muted); border-top:1px solid rgba(var(--line-rgb),.6);padding-top:10px; } .aff-note a{color:var(--accent)} /* Bottom-of-page "Related tools" + "Recommended reading" as a 2-column row */ .endgrid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:stretch; margin-top:12px; } .endgrid > *{margin-top:0 !important} .endgrid > .card{margin-top:0} @media (max-width:900px){ .endgrid{grid-template-columns:1fr} } /* Safety net: a section placed directly under
must not render full-bleed */ main > section.card{ width:min(1100px, 92vw); margin-left:auto; margin-right:auto; } /* ============================================================ COMMAND PALETTE (Cmd-K / Ctrl-K quick search) ============================================================ */ .cmdk-trigger{ display:inline-flex;align-items:center;gap:8px;cursor:pointer; font-family:inherit;font-size:12px;color:var(--muted); background:linear-gradient(to bottom, rgba(var(--accent-rgb),.10), rgba(var(--panel-rgb),.55)); border:1px solid rgba(var(--accent-rgb),.55);border-radius:999px;padding:6px 12px;white-space:nowrap; min-width:210px;justify-content:space-between; } .cmdk-trigger:hover{border-color:rgba(var(--accent-rgb),.95);color:var(--text);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.10)} .cmdk-trigger .cmdk-mag{color:var(--accent);font-size:15px;line-height:1} .cmdk-trigger .cmdk-tlabel{flex:1;text-align:left} .cmdk-trigger .cmdk-kbd{font-size:10px;color:var(--muted);border:1px solid rgba(var(--line2-rgb),.9);border-radius:5px;padding:1px 6px;background:rgba(var(--line-rgb),.7)} /* lead the primary nav and stand out */ .navcenter > .cmdk-trigger{order:-1;margin-right:4px} @media (max-width:640px){ .navcenter > .cmdk-trigger{width:100%;min-width:0;margin-right:0} } .cmdk-overlay{position:fixed;inset:0;background:rgba(3,6,12,.78);z-index:9998;display:none} .cmdk-overlay.open{display:block} .cmdk-modal{ position:fixed;left:50%;top:12vh;transform:translateX(-50%); width:min(620px,92vw);background:var(--panel); border:1px solid rgba(var(--accent-rgb),.25);border-radius:14px;box-shadow:var(--shadow);z-index:9999;overflow:hidden; } .cmdk-input{ width:100%;box-sizing:border-box;padding:16px 18px;border:0;border-bottom:1px solid rgba(var(--line-rgb),.9); background:transparent;color:var(--text);font-family:inherit;font-size:16px;outline:none; } .cmdk-list{max-height:55vh;overflow:auto;padding:6px} .cmdk-item{ display:flex;justify-content:space-between;align-items:center;gap:12px; padding:10px 12px;border-radius:10px;color:var(--text);text-decoration:none;font-size:14px; } .cmdk-item .cmdk-cat{font-size:11px;color:var(--muted);opacity:.7;letter-spacing:.04em} .cmdk-item.sel{background:rgba(var(--accent-rgb),.16)} .cmdk-empty{padding:18px;color:var(--muted);font-size:13px} .cmdk-hint{display:flex;gap:16px;padding:9px 16px;border-top:1px solid rgba(var(--line-rgb),.9);font-size:11px;color:var(--muted)} .cmdk-hint kbd{font-family:ui-monospace,monospace;font-size:10px;background:rgba(var(--line-rgb),.9);border:1px solid rgba(var(--line2-rgb),.9);border-radius:5px;padding:1px 5px;margin-right:3px} /* ============================================================ Theme switcher (header picker) ============================================================ */ .theme-wrap{position:relative;display:inline-flex} .theme-trigger{ display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-family:inherit;font-size:11px; color:var(--muted);background:rgba(var(--panel-rgb),.5); border:1px solid rgba(var(--accent-rgb),.4);border-radius:999px;padding:6px 11px;white-space:nowrap; transition:color .15s,border-color .15s; } .theme-trigger:hover{color:var(--text);border-color:rgba(var(--accent-rgb),.9)} .theme-trigger:focus-visible{outline:2px solid rgba(var(--accent-rgb),.85);outline-offset:2px} .theme-trigger .tt-sw{width:12px;height:12px;border-radius:999px;background:var(--accent);box-shadow:0 0 0 2px rgba(var(--accent-rgb),.22)} .theme-pop{ position:absolute;top:calc(100% + 8px);right:0;width:290px;max-width:86vw; background:var(--panel);border:1px solid rgba(var(--accent-rgb),.3);border-radius:14px; box-shadow:var(--shadow);z-index:9999;padding:8px;display:none;max-height:74vh;overflow:auto; } .theme-pop.open{display:block} .theme-grp{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin:10px 8px 3px;opacity:.8} .theme-grp:first-child{margin-top:2px} .theme-opt{ display:flex;align-items:center;gap:11px;width:100%;text-align:left;cursor:pointer; font-family:inherit;font-size:13px;color:var(--text);background:transparent;border:0;border-radius:9px;padding:8px 10px; } .theme-opt:hover{background:rgba(var(--accent-rgb),.12)} .theme-opt:focus-visible{outline:2px solid rgba(var(--accent-rgb),.85);outline-offset:-2px} .theme-opt .sw{width:28px;height:19px;border-radius:5px;border:1px solid rgba(var(--text-rgb),.25);flex:0 0 auto;position:relative;overflow:hidden} .theme-opt .sw i{position:absolute;right:3px;top:3px;width:8px;height:8px;border-radius:999px} .theme-opt .nm{flex:1} .theme-opt .ck{color:var(--accent);font-weight:800;opacity:0} .theme-opt.active .ck{opacity:1} .theme-opt.active{background:rgba(var(--accent-rgb),.10)} @media (max-width:640px){ .theme-pop{right:auto;left:0} }