/* VirtuaTilt Wiki — sketchy wireframe aesthetic */ .wiki-version-badge{ position: fixed; top: 12px; right: 14px; z-index: 9999; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; height: 24px; padding: 0 10px; border-radius: 999px; display: inline-flex; align-items: center; line-height: 1; background: #111; color: #fff; border: 1px solid rgba(255,255,255,0.12); box-sizing: border-box; box-shadow: 0 2px 6px rgba(0,0,0,0.18); text-transform: uppercase; pointer-events: none; } .lang-picker{ position: fixed; top: 44px; right: 14px; z-index: 9999; display: flex; gap: 4px; background: rgba(255,255,255,0.96); padding: 4px; border-radius: 999px; box-shadow: 0 2px 10px rgba(0,0,0,0.22); backdrop-filter: blur(6px); border: 1px solid rgba(0,0,0,0.10); } .lang-btn{ min-width: 32px; height: 24px; border-radius: 12px; border: 1px solid transparent; background: transparent; font-size: 11px; font-weight: 700; line-height: 1; color: #111; cursor: pointer; padding: 0 6px; display: flex; align-items: center; justify-content: center; letter-spacing: 0.04em; transition: transform .12s, background .12s, color .12s; } .lang-btn:hover{ transform: scale(1.08); background: rgba(0,0,0,0.06); } .lang-btn.active{ background: #111; color: #fff; } @media (max-width: 640px){ .lang-picker{ top: 42px; right: 8px; } .wiki-version-badge{ right: 8px; } .tweaks-launcher{ right: 64px !important; } } @import url('https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Caveat:wght@500;700&family=Kalam:wght@400;700&family=JetBrains+Mono:wght@400;600&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap'); :root { --ink: #1a1a1a; --ink-soft: #3a3a3a; --ink-faint: #888; --paper: #fafaf7; --paper-shade: #f0eee8; --paper-line: #d8d4c7; --neon-blue: oklch(0.68 0.18 240); --neon-blue-soft: oklch(0.92 0.06 240); --neon-red: oklch(0.62 0.22 25); --neon-red-soft: oklch(0.94 0.06 25); --shadow-sketch: 3px 3px 0 rgba(0,0,0,0.08); --shadow-sketch-lg: 6px 6px 0 rgba(0,0,0,0.1); --font-hand: 'Kalam', 'Architects Daughter', cursive; --font-display: 'Caveat', cursive; --font-mono: 'JetBrains Mono', ui-monospace, monospace; } /* Technical font theme — clean sans + clear mono. Activated by adding `data-font="technical"` on . */ html[data-font="technical"] { --font-hand: 'IBM Plex Sans', -apple-system, system-ui, sans-serif; --font-display: 'IBM Plex Sans', -apple-system, system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; } html[data-font="technical"] body { line-height: 1.55; } html[data-font="technical"] h1, html[data-font="technical"] h2, html[data-font="technical"] h3, html[data-font="technical"] h4 { font-weight: 700; letter-spacing: -0.01em; } html[data-font="technical"] h1 { font-size: clamp(2.1rem, 3.6vw, 3rem); line-height: 1.1; } html[data-font="technical"] h2 { font-size: clamp(1.55rem, 2.6vw, 2rem); } html[data-font="technical"] h3 { font-size: clamp(1.2rem, 2vw, 1.4rem); } html[data-font="technical"] .sk-wobble { transform: none; } html[data-font="technical"] .sk-step-num { border-radius: 8px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 1rem; } html[data-font="technical"] .docx-body { font-size: 0.98rem; line-height: 1.62; } html[data-font="technical"] .sk-pill { font-weight: 500; } html[data-font="technical"] .sk-note { font-style: normal; } html[data-font="technical"] .sk-tab { font-weight: 600; } html[data-font="technical"] .toc { font-size: 0.95rem; } html[data-font="technical"] .sk-underline { background-size: 100% 2px; background-position: 0 100%; } html[data-font="technical"] .toc-section { text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.08em; color: var(--ink); } html[data-font="technical"] .layout-badge { font-family: 'IBM Plex Mono', ui-monospace, monospace; } [data-mode="dark"] { --ink: #ececec; --ink-soft: #c0c0c0; --ink-faint: #777; --paper: #131418; --paper-shade: #1c1d22; --paper-line: #2a2c33; --neon-blue-soft: oklch(0.28 0.10 240); --neon-red-soft: oklch(0.28 0.12 25); /* On dark backgrounds, black offset shadows vanish — use a subtle light offset to preserve the "raised paper" depth cue. */ --shadow-sketch: 3px 3px 0 rgba(255,255,255,0.10); --shadow-sketch-lg: 6px 6px 0 rgba(255,255,255,0.14); } /* Dark-mode override for highlights/colors baked into wiki content (docx export). These inline styles can't theme-flip on their own, so we rewrite them. */ [data-mode="dark"] [style*="background:#fff59d"], [data-mode="dark"] [style*="background: #fff59d"] { background: #4a3a0a !important; color: #fef3a3 !important; } [data-mode="dark"] [style*="color:#EE0000"], [data-mode="dark"] [style*="color: #EE0000"] { color: #ff6b6b !important; } [data-mode="dark"] [style*="color:#C00000"], [data-mode="dark"] [style*="color: #C00000"] { color: #ff8888 !important; } * { box-sizing: border-box; } html, body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-hand); font-size: 16px; line-height: 1.5; /* subtle paper grain via repeating gradient */ background-image: radial-gradient(circle at 20% 30%, rgba(0,0,0,0.015) 0, transparent 50%), radial-gradient(circle at 80% 70%, rgba(0,0,0,0.015) 0, transparent 50%); } [data-mode="dark"] body { background-image: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.02) 0, transparent 50%), radial-gradient(circle at 80% 70%, rgba(255,255,255,0.02) 0, transparent 50%); } a { color: var(--neon-blue); text-decoration: none; border-bottom: 1px dashed currentColor; } a:hover { color: var(--neon-red); } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; margin: 0 0 0.4em; letter-spacing: 0.01em; } h1 { font-size: clamp(2.4rem, 4vw, 3.4rem); line-height: 1.05; } h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1.1; } h3 { font-size: clamp(1.4rem, 2.4vw, 1.7rem); } h4 { font-size: 1.15rem; font-family: var(--font-hand); font-weight: 700; } p, li { font-size: 1.02rem; } code, kbd, pre, .mono { font-family: var(--font-mono); font-size: 0.9em; } kbd { display: inline-block; padding: 1px 6px; border: 1.5px solid var(--ink); border-radius: 4px; background: var(--paper-shade); box-shadow: 1px 1px 0 var(--ink); font-size: 0.78em; margin: 0 1px; } /* ─── Sketchy primitives ─── */ /* Hand-drawn box: irregular border via SVG filter */ .sk-box { position: relative; border: 1.5px solid var(--ink); border-radius: 6px; background: var(--paper); padding: 16px 18px; box-shadow: var(--shadow-sketch); } .sk-box.tilt-l { transform: rotate(-0.4deg); } .sk-box.tilt-r { transform: rotate(0.3deg); } /* Double-stroke border to look like inked-twice sketch */ .sk-box::after { content: ''; position: absolute; inset: 2px 3px 1px 2px; border: 1px solid var(--ink-soft); border-radius: 5px; pointer-events: none; opacity: 0.4; } .sk-card { border: 1.5px solid var(--ink); border-radius: 8px; background: var(--paper); padding: 18px; box-shadow: var(--shadow-sketch); position: relative; } .sk-card-accent-blue { border-left: 5px solid var(--neon-blue); } .sk-card-accent-red { border-left: 5px solid var(--neon-red); } .sk-divider { height: 0; border: 0; border-top: 2px dashed var(--paper-line); margin: 28px 0; } .sk-pill { display: inline-block; padding: 2px 10px; border: 1.5px solid var(--ink); border-radius: 999px; font-size: 0.85em; background: var(--paper); font-family: var(--font-mono); font-weight: 600; } .sk-pill.blue { background: var(--neon-blue-soft); border-color: var(--neon-blue); color: oklch(0.4 0.18 240); } .sk-pill.red { background: var(--neon-red-soft); border-color: var(--neon-red); color: oklch(0.42 0.22 25); } [data-mode="dark"] .sk-pill.blue { background: oklch(0.25 0.1 240); color: oklch(0.85 0.18 240); } [data-mode="dark"] .sk-pill.red { background: oklch(0.25 0.12 25); color: oklch(0.85 0.18 25); } .sk-arrow-d { font-family: var(--font-display); font-size: 1.4em; color: var(--neon-red); } /* Sketchy button */ .sk-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1.5px solid var(--ink); border-radius: 6px; background: var(--paper); color: var(--ink); font-family: var(--font-hand); font-size: 0.95rem; font-weight: 700; box-shadow: 2px 2px 0 var(--ink); cursor: pointer; transition: transform 0.08s, box-shadow 0.08s; } .sk-btn:hover { transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--ink); } .sk-btn:active { transform: translate(1px,1px); box-shadow: 0 0 0 var(--ink); } .sk-btn.primary { background: var(--neon-blue); color: white; border-color: var(--ink); } .sk-btn.danger { background: var(--neon-red); color: white; } .sk-btn-ghost { background: transparent; border: 1.5px dashed var(--ink-soft); box-shadow: none; } .sk-tab { padding: 7px 14px; border: 1.5px solid var(--ink); border-bottom: none; border-radius: 8px 8px 0 0; background: var(--paper-shade); cursor: pointer; font-family: var(--font-hand); font-weight: 700; font-size: 0.95rem; color: var(--ink-soft); margin-right: -1px; position: relative; white-space: nowrap; } .sk-tab.active { background: var(--paper); color: var(--ink); z-index: 2; box-shadow: 0 -2px 0 var(--neon-blue) inset; } /* Hand-drawn underline */ .sk-underline { background-image: linear-gradient(90deg, var(--neon-red), var(--neon-red)); background-repeat: no-repeat; background-position: 0 92%; background-size: 100% 4px; padding-bottom: 2px; } /* Numbered step circle */ .sk-step-num { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 2px solid var(--ink); border-radius: 50% 49% 51% 50% / 49% 50% 50% 51%; /* slight wobble */ font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; background: var(--paper); flex-shrink: 0; } .sk-step-num.blue { background: var(--neon-blue); color: white; border-color: var(--ink); } .sk-step-num.red { background: var(--neon-red); color: white; } /* Annotation note */ .sk-note { font-family: var(--font-hand); color: var(--ink-soft); font-style: italic; font-size: 0.95em; display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-left: 3px solid var(--neon-blue); background: var(--neon-blue-soft); border-radius: 0 6px 6px 0; margin: 12px 0; } .sk-note.warn { border-left-color: var(--neon-red); background: var(--neon-red-soft); } [data-mode="dark"] .sk-note { background: oklch(0.22 0.07 240); } [data-mode="dark"] .sk-note.warn { background: oklch(0.22 0.08 25); } .sk-note::before { content: '✏️'; font-size: 1em; flex-shrink: 0; } .sk-note.warn::before { content: '⚠️'; } /* Image placeholder */ .sk-placeholder { border: 1.5px dashed var(--ink-soft); background: repeating-linear-gradient( 45deg, transparent 0, transparent 8px, var(--paper-line) 8px, var(--paper-line) 9px ), var(--paper-shade); border-radius: 6px; padding: 20px; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 0.82em; color: var(--ink-faint); text-align: center; min-height: 80px; } /* Subtle wobble for headings */ .sk-wobble { display: inline-block; transform: rotate(-0.6deg); } /* Sidebar TOC */ .toc { font-family: var(--font-hand); font-size: 0.98rem; } .toc a { display: block; padding: 4px 10px 4px 16px; border: none; border-left: 2px solid transparent; color: var(--ink-soft); border-radius: 0 4px 4px 0; } .toc a:hover { background: var(--paper-shade); color: var(--ink); border-left-color: var(--neon-blue); } .toc a.active { border-left-color: var(--neon-red); color: var(--ink); font-weight: 700; background: var(--paper-shade); } .toc-section { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; margin: 14px 10px 4px; color: var(--ink); } .toc-section:first-child { margin-top: 0; } /* Toggle button on the Setup Guide entry */ .toc a { position: relative; } .toc-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border-radius: 4px; border: 1px solid var(--paper-line); background: var(--paper); font-family: var(--font-mono); font-size: 0.95rem; line-height: 1; color: var(--ink-soft); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; } .toc-toggle:hover { background: var(--paper-shade); color: var(--ink); border-color: var(--neon-blue); } /* Sub-list of chapters under Setup Guide */ .toc-sublist { margin: 4px 0 8px 8px; padding: 6px 0 6px 8px; border-left: 1px dashed var(--paper-line); } .toc-subhead { font-family: var(--font-mono); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint); margin: 6px 0 4px 8px; } .toc-subhead:first-child { margin-top: 0; } .toc-sub { display: flex !important; align-items: flex-start; gap: 8px; padding: 3px 8px 3px 6px !important; font-size: 0.82rem !important; line-height: 1.25; border-left: 2px solid transparent !important; color: var(--ink-soft); border-bottom: none !important; } .toc-sub:hover { background: var(--paper-shade); border-left-color: var(--neon-blue) !important; color: var(--ink); } .toc-num { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 18px; padding: 0 4px; border-radius: 3px; background: var(--paper-shade); border: 1px solid var(--paper-line); font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600; color: var(--ink-soft); line-height: 1; } .toc-num.appendix { background: rgba(11, 92, 168, 0.08); border-color: rgba(11, 92, 168, 0.3); color: var(--neon-blue); } .toc-sub-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html[data-font="technical"] .toc-sub { font-family: var(--font-body); font-size: 0.78rem !important; } html[data-font="technical"] .toc-subhead { font-family: var(--font-mono); } /* Marker over neon */ .neon-blue { color: var(--neon-blue); } .neon-red { color: var(--neon-red); } /* Box viewer chrome */ .viewer-frame { position: relative; border: 2px solid var(--ink); border-radius: 12px; background: radial-gradient(ellipse at center top, var(--paper-shade), var(--paper)), var(--paper); box-shadow: var(--shadow-sketch-lg); overflow: hidden; } .viewer-frame canvas { display: block; outline: none; } .viewer-controls { position: absolute; top: 12px; right: 12px; display: flex; flex-direction: column; gap: 6px; z-index: 5; } .viewer-themes { position: absolute; bottom: 12px; left: 12px; display: flex; gap: 6px; z-index: 5; } .viewer-hint { position: absolute; bottom: 12px; right: 12px; font-family: var(--font-hand); font-size: 0.85rem; color: var(--ink-faint); background: var(--paper); border: 1px solid var(--paper-line); border-radius: 4px; padding: 3px 8px; z-index: 5; } .viewer-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--ink-faint); font-family: var(--font-display); font-size: 1.4rem; z-index: 1; } /* Layout */ .app-shell { display: grid; min-height: 100vh; } .layout-classic { grid-template-columns: 260px 1fr; } .layout-classic .sidebar { border-right: 2px dashed var(--paper-line); padding: 24px 16px; position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--paper); } .layout-classic .main { padding: 32px 48px 64px; max-width: 1180px; } .layout-hero { grid-template-rows: auto 1fr; } .layout-hero .hero-zone { height: 70vh; border-bottom: 2px dashed var(--paper-line); padding: 24px 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; } .layout-hero .main { padding: 32px 48px 64px; max-width: 1000px; margin: 0 auto; } .layout-split { grid-template-columns: 1fr 520px; } .layout-split .main { padding: 32px 40px 64px; max-width: 720px; margin-left: auto; } .layout-split .right-rail { position: sticky; top: 0; height: 100vh; padding: 24px; border-left: 2px dashed var(--paper-line); display: flex; flex-direction: column; gap: 16px; } .layout-cards .main { padding: 32px 48px 64px; max-width: 1200px; margin: 0 auto; } .layout-cards .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; margin-top: 24px; } @media (max-width: 900px) { .app-shell { grid-template-columns: 1fr !important; grid-template-rows: auto auto; } .layout-classic .sidebar, .layout-split .right-rail { position: static; height: auto; border-right: none; border-left: none; border-bottom: 2px dashed var(--paper-line); } .layout-hero .hero-zone { grid-template-columns: 1fr; height: auto; } } /* Layout variant indicator */ .layout-badge { position: fixed; top: 12px; left: 12px; font-family: var(--font-mono); font-size: 0.75rem; background: var(--ink); color: var(--paper); padding: 4px 10px; border-radius: 4px; letter-spacing: 0.05em; z-index: 100; opacity: 0.8; } /* Hand-drawn feature box */ .feature { display: flex; gap: 14px; padding: 14px; border: 1.5px solid var(--ink); border-radius: 8px; background: var(--paper); box-shadow: var(--shadow-sketch); } .feature .icon-blob { width: 44px; height: 44px; border: 2px solid var(--ink); border-radius: 50% 47% 53% 49% / 48% 52% 48% 52%; background: var(--neon-blue-soft); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 1.4rem; flex-shrink: 0; } /* Compatibility table */ .compat { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 0.85rem; } .compat th, .compat td { border: 1.5px solid var(--ink); padding: 8px 10px; text-align: left; vertical-align: top; } .compat th { background: var(--paper-shade); font-family: var(--font-hand); font-weight: 700; } .compat td.yes { background: oklch(0.95 0.08 140); color: oklch(0.4 0.15 140); font-weight: 700; text-align: center; } .compat td.no { background: var(--neon-red-soft); color: oklch(0.4 0.22 25); text-align: center; } [data-mode="dark"] .compat td.yes { background: oklch(0.3 0.1 140); color: oklch(0.85 0.18 140); } [data-mode="dark"] .compat td.no { background: oklch(0.3 0.12 25); color: oklch(0.85 0.18 25); } /* Setup guide formats */ .guide-tabs .tab-row { display: flex; flex-wrap: wrap; border-bottom: 1.5px solid var(--ink); padding-left: 8px; } .guide-tabs .tab-content { border: 1.5px solid var(--ink); border-top: none; padding: 24px 26px; background: var(--paper); border-radius: 0 0 8px 8px; } .accordion-item { border: 1.5px solid var(--ink); border-radius: 6px; margin-bottom: 10px; background: var(--paper); overflow: hidden; } .accordion-head { padding: 12px 16px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; background: var(--paper-shade); font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; } .accordion-head:hover { background: var(--neon-blue-soft); } .accordion-body { padding: 16px 18px 20px; } .scroll-section { margin-bottom: 32px; } /* Theme swatch */ .theme-swatch { width: 36px; height: 28px; border: 1.5px solid var(--ink); border-radius: 4px; cursor: pointer; background-size: cover; background-position: center; position: relative; transition: transform 0.1s; } .theme-swatch:hover { transform: translateY(-2px); } .theme-swatch.active { box-shadow: 0 0 0 2px var(--neon-red); transform: translateY(-2px); } /* Section header with hand-drawn underline */ .section-h { position: relative; display: inline-block; margin-bottom: 16px; } .section-h::after { content: ''; position: absolute; left: -2px; right: -8px; bottom: -2px; height: 6px; background: radial-gradient(circle at 6px 4px, var(--neon-red) 1.5px, transparent 2px), radial-gradient(circle at 18px 4px, var(--neon-red) 1.5px, transparent 2px); /* approximation of squiggly underline using gradient */ background: linear-gradient(90deg, var(--neon-red) 0%, var(--neon-red) 30%, transparent 30%, transparent 35%, var(--neon-red) 35%, var(--neon-red) 70%, transparent 70%, transparent 75%, var(--neon-red) 75%, var(--neon-red) 100%); height: 3px; border-radius: 2px; bottom: -4px; } /* ── DOCX-imported body styling ── */ .docx-body { font-family: var(--font-hand); font-size: 1.02rem; line-height: 1.55; color: var(--ink); } .docx-body h1 { font-family: var(--font-display); font-size: 1.9rem; margin: 1.2em 0 0.4em; color: var(--ink); border-bottom: 2px dashed var(--paper-line); padding-bottom: 6px; } .docx-body h1:first-child { margin-top: 0; } .docx-body h2 { font-family: var(--font-display); font-size: 1.5rem; margin: 1em 0 0.4em; } .docx-body h3 { font-family: var(--font-display); font-size: 1.25rem; margin: 1em 0 0.3em; color: var(--ink); } .docx-body p { margin: 0.6em 0; } .docx-body p.empty { margin: 0.3em 0; height: 0.4em; } /* ── Original bullet/list treatment ── */ .docx-body ul, .docx-body ol { list-style: none; padding-left: 0; margin: 0.7em 0; counter-reset: docx-li; } .docx-body li { position: relative; padding: 6px 12px 6px 38px; margin: 4px 0; border-radius: 6px; border-left: 2px solid var(--paper-line); background: linear-gradient(90deg, var(--paper-shade) 0%, transparent 60%); transition: background 0.15s, border-left-color 0.15s; counter-increment: docx-li; } .docx-body li:hover { border-left-color: var(--neon-blue); background: linear-gradient(90deg, rgba(11, 92, 168, 0.08) 0%, transparent 60%); } /* Custom marker — diamond + chapter ink for unordered lists */ .docx-body ul > li::before { content: ""; position: absolute; left: 14px; top: 50%; width: 8px; height: 8px; background: var(--neon-blue); transform: translateY(-50%) rotate(45deg); border-radius: 1px; box-shadow: 0 0 0 2px var(--paper); } /* Numbered chip for ordered lists */ .docx-body ol > li::before { content: counter(docx-li); position: absolute; left: 8px; top: 6px; width: 22px; height: 22px; background: var(--ink); color: var(--paper); font-family: var(--font-mono); font-size: 0.75rem; font-weight: 700; border-radius: 4px; display: flex; align-items: center; justify-content: center; line-height: 1; } /* Nested levels — indent deeper, lighter marker */ .docx-body li[data-ilvl="1"] { margin-left: 28px; border-left-color: var(--paper-line); } .docx-body li[data-ilvl="1"]::before { background: var(--ink-faint); width: 6px; height: 6px; } .docx-body li[data-ilvl="2"] { margin-left: 56px; } .docx-body li[data-ilvl="2"]::before { background: var(--ink-faint); width: 5px; height: 5px; border-radius: 50%; transform: translateY(-50%); } .docx-body strong { font-weight: 700; color: var(--ink); } .docx-body em { font-style: italic; } .docx-body u { text-decoration-thickness: 1.5px; text-underline-offset: 2px; } .docx-body a { color: var(--neon-blue); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 2px; word-break: break-word; } .docx-body a:hover { color: var(--accent-red, #c0392b); } .docx-body img { max-width: 100%; height: auto; display: block; margin: 14px auto; border: 1.5px solid var(--ink); border-radius: 6px; box-shadow: var(--shadow-sketch); background: white; } .docx-body p[style*="text-align:center"] img { margin-left: auto; margin-right: auto; } .docx-body p[style*="text-align:center"] img + img { margin-top: 8px; } /* Inline highlights & colored runs come through as inline style attrs. Make sure they're readable on dark mode. */ [data-mode="dark"] .docx-body span[style*="background-color:#ffeb3b"] { color: #1a1a1a; } .docx-body span[style*="background-color"] { padding: 1px 3px; border-radius: 2px; } .docx-body table.docx-table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 0.92rem; background: var(--paper); } .docx-body table.docx-table td, .docx-body table.docx-table th { border: 1.5px solid var(--ink); padding: 8px 12px; vertical-align: top; text-align: left; } .docx-body table.docx-table th { background: var(--paper-shade); font-family: var(--font-display); font-weight: 700; font-size: 0.86rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink); border-bottom: 2.5px solid var(--ink); } .docx-body table.docx-table tbody tr:nth-child(even) td { background: rgba(0, 0, 0, 0.02); } .docx-body table.docx-table tbody tr:hover td { background: rgba(11, 92, 168, 0.06); } .docx-body code { font-family: var(--font-mono); font-size: 0.86em; background: var(--paper-shade); padding: 1px 6px; border-radius: 3px; border: 1px solid var(--paper-line); color: var(--ink); white-space: nowrap; } html[data-font="technical"] .docx-body table.docx-table th { font-family: 'IBM Plex Sans', system-ui, sans-serif; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.78rem; } /* Scrollbar styling */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--paper-shade); } ::-webkit-scrollbar-thumb { background: var(--ink-faint); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--ink-soft); } /* ─── Wiki-wide support-boundary footer ──────────────────────── */ .wiki-footer { display: block; width: 100%; clear: both; box-sizing: border-box; margin: 48px 0 0; padding: 20px 24px 28px; border-top: 1.5px dashed var(--paper-line); background: var(--paper-shade); font-family: var(--font-ui, 'IBM Plex Sans', system-ui, sans-serif); grid-column: 1 / -1; /* span all columns if the parent is a grid (defensive) */ } .wiki-footer-inner { max-width: 1080px; margin: 0 auto; font-size: 0.82rem; line-height: 1.55; color: var(--ink-soft); box-sizing: border-box; } .wiki-footer-inner p { margin: 0; } .wiki-footer-inner strong { color: var(--ink); font-weight: 600; } .wiki-footer-inner a { color: var(--neon-blue); text-decoration: underline; text-underline-offset: 2px; font-weight: 500; word-break: break-word; /* let long URLs wrap on tiny screens */ overflow-wrap: anywhere; } .wiki-footer-inner a:hover { text-decoration-thickness: 2px; } [data-mode="dark"] .wiki-footer { background: var(--paper-shade); border-top-color: var(--paper-line); } [data-mode="dark"] .wiki-footer-inner { color: var(--ink-soft); } /* Mobile: tighter padding + smaller font so the disclaimer reads cleanly without horizontal scroll and uses the full viewport width. */ @media (max-width: 640px) { .wiki-footer { margin-top: 24px; padding: 14px 12px 20px; } .wiki-footer-inner { font-size: 0.78rem; line-height: 1.5; } } /* ─── Chat bubble + panel ─────────────────────────────────────── */ .chat-bubble { position: fixed; bottom: 24px; right: 24px; z-index: 9000; width: 60px; height: 60px; border-radius: 50%; background: var(--neon-blue); color: #fff; border: 2px solid var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow-sketch-lg); transition: transform .15s ease, box-shadow .15s ease; padding: 0; } .chat-bubble:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 rgba(0,0,0,0.18); } .chat-bubble-dot { position: absolute; top: 6px; right: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--neon-red); border: 1.5px solid var(--ink); } .chat-panel { position: fixed; bottom: 24px; right: 24px; z-index: 9000; width: 560px; max-width: calc(100vw - 48px); height: 640px; max-height: calc(100vh - 48px); background: var(--paper); color: var(--ink); border: 2px solid var(--ink); border-radius: 12px; box-shadow: var(--shadow-sketch-lg); display: flex; flex-direction: column; overflow: hidden; font-family: var(--font-ui, 'IBM Plex Sans', system-ui, sans-serif); } @media (max-width: 480px) { .chat-panel { right: 12px; left: 12px; bottom: 12px; width: auto; height: 80vh; } .chat-bubble { right: 16px; bottom: 16px; } } .chat-header { background: #1a1a1a; color: #fff; padding: 12px 14px; display: flex; align-items: center; gap: 8px; border-bottom: 2px solid #1a1a1a; } .chat-header-titlewrap { flex: 1; min-width: 0; } .chat-header-title { font-family: var(--font-display); font-size: 1.4rem; line-height: 1; } .chat-header-status { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 0.7rem; color: rgba(255,255,255,0.55); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 3px; } .chat-live { color: #6dd86d; } .chat-live.offline { color: #ff6b6b; animation: chat-live-pulse 1.6s ease-in-out infinite; } @keyframes chat-live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .chat-close, .chat-reset { background: transparent; border: none; color: #fff; cursor: pointer; font-size: 18px; width: 28px; height: 28px; border-radius: 6px; line-height: 1; display: flex; align-items: center; justify-content: center; padding: 0; } .chat-close { font-size: 22px; } .chat-close:hover, .chat-reset:hover { background: rgba(255,255,255,0.12); } .chat-log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: linear-gradient(transparent 23px, var(--paper-line) 24px) 0 0 / 100% 24px, var(--paper); } .chat-msg { max-width: 88%; padding: 9px 13px; border-radius: 12px; font-size: 0.92rem; line-height: 1.5; border: 1.5px solid var(--ink); background: #fff; word-wrap: break-word; } .chat-msg.chat-bot { align-self: flex-start; } .chat-msg.chat-user { align-self: flex-end; background: var(--neon-blue); color: #fff; } .chat-msg.chat-typing { color: var(--ink-faint); font-style: italic; } .chat-msg.chat-error { background: #ffe3e3; border-color: var(--neon-red); color: #b22; align-self: stretch; max-width: 100%; } .chat-msg p { margin: 0 0 0.5em; } .chat-msg p:last-child { margin: 0; } .chat-msg ul, .chat-msg ol { margin: 0.3em 0 0.5em; padding-left: 1.3em; } .chat-msg li { margin-bottom: 0.2em; } .chat-msg code { background: rgba(0,0,0,0.08); padding: 1px 5px; border-radius: 3px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 0.88em; } .chat-msg.chat-user code { background: rgba(255,255,255,0.18); } .chat-msg strong { font-weight: 600; } .chat-msg .chat-disclaimer { font-size: 0.82rem; color: var(--ink-faint); border-top: 1px dashed var(--paper-line); margin-top: 8px !important; padding-top: 8px; line-height: 1.4; } [data-mode="dark"] .chat-msg .chat-disclaimer { color: var(--ink-soft); border-top-color: var(--paper-line); } .chat-msg a { color: var(--neon-blue); text-decoration: underline; text-underline-offset: 2px; word-break: break-word; } .chat-msg.chat-user a { color: #fff; } .chat-msg a:hover { text-decoration-thickness: 2px; } .chat-table-wrap { overflow-x: auto; margin: 0.5em 0; border: 1px solid var(--paper-line); border-radius: 6px; -webkit-overflow-scrolling: touch; } .chat-msg table { border-collapse: collapse; font-size: 0.82rem; width: 100%; min-width: 100%; } .chat-msg th, .chat-msg td { padding: 6px 10px; border-bottom: 1px solid var(--paper-line); border-right: 1px solid var(--paper-line); text-align: left; vertical-align: top; white-space: nowrap; } .chat-msg th:last-child, .chat-msg td:last-child { border-right: none; } .chat-msg tbody tr:last-child td { border-bottom: none; } .chat-msg th { background: var(--paper-shade); font-weight: 600; } .chat-msg.chat-user th { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.3); } .chat-msg.chat-user td { border-color: rgba(255,255,255,0.3); } .chat-msg.chat-user .chat-table-wrap { border-color: rgba(255,255,255,0.4); } .chat-suggestions { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0 6px; } .chat-sugg { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 0.72rem; background: transparent; color: var(--ink-soft); border: 1.5px solid var(--paper-line); border-radius: 999px; padding: 5px 10px; cursor: pointer; transition: background .12s, border-color .12s; } .chat-sugg:hover { background: #fff; border-color: var(--ink); } .chat-input-row { display: flex; gap: 8px; padding: 10px; border-top: 1.5px solid var(--paper-line); background: var(--paper-shade); } .chat-input { flex: 1; font-family: inherit; font-size: 0.95rem; padding: 9px 11px; border: 1.5px solid var(--ink); border-radius: 8px; background: #fff; color: var(--ink); resize: none; min-height: 38px; max-height: 100px; line-height: 1.4; } .chat-input:focus { outline: 2px solid var(--neon-blue); outline-offset: 1px; } .chat-input:disabled { opacity: 0.6; } .chat-send { background: var(--neon-blue); color: #fff; border: 1.5px solid var(--ink); border-radius: 8px; padding: 0 14px; cursor: pointer; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; min-width: 64px; } .chat-send:hover:not(:disabled) { transform: translate(-1px, -1px); } .chat-send:disabled { opacity: 0.5; cursor: not-allowed; } .chat-footer { padding: 6px 12px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 0.62rem; color: var(--ink-faint); text-align: center; background: var(--paper-shade); border-top: 1px dashed var(--paper-line); letter-spacing: 0.03em; } /* Dark-mode adjustments — variables flip via [data-mode="dark"], but the chat bubble's neon-blue + white text already reads correctly. */ [data-mode="dark"] .chat-msg { background: var(--paper-shade); } [data-mode="dark"] .chat-msg.chat-user { background: var(--neon-blue); } [data-mode="dark"] .chat-msg.chat-error { background: #4a1c1c; color: #ffb3b3; } [data-mode="dark"] .chat-input { background: var(--paper-shade); color: var(--ink); border-color: var(--ink-soft); } [data-mode="dark"] .chat-sugg:hover { background: var(--paper-shade); }