/* ============================================ OUT-OF-WORLD DESIGN SYSTEM For analytical/meta pages outside the narrative frame. Default: light mode (white background). Toggle: dark mode uses standard site colors. Only colors change between modes — fonts, sizes, spacing, and layout are identical. ============================================ */ /* ─── LIGHT MODE (DEFAULT) ─── */ :root { /* Backgrounds */ --ow-bg: #ffffff; --ow-bg2: #f5f4f1; --ow-bg3: #eae8e4; --ow-bg4: #e0ddd8; /* Accents — tuned for white backgrounds */ --ow-accent: #6c47d6; /* deep violet — the primary data accent */ --ow-accent2: #0e8a6f; /* dark teal — secondary accent */ --ow-accent-dim: rgba(108,71,214,0.10); --ow-accent-glow:rgba(108,71,214,0.05); --ow-ember: #d45a14; /* warm orange for highlights */ --ow-gold: #b8860b; /* dark gold for tertiary */ /* Text */ --ow-text: #1a1a1a; --ow-text-soft: #3a3a3a; --ow-muted: #6b6b6b; --ow-muted2: #999999; /* Rules & borders */ --ow-rule: 1px solid rgba(0,0,0,0.10); --ow-rule-accent:1px solid rgba(108,71,214,0.20); /* Charts */ --ow-chart-grid: rgba(0,0,0,0.06); --ow-chart-tick: #6b6b6b; --ow-chart-line1:#6c47d6; --ow-chart-line2:#0e8a6f; --ow-chart-fill1:rgba(108,71,214,0.08); --ow-chart-fill2:rgba(14,138,111,0.08); --ow-tooltip-bg: #ffffff; --ow-tooltip-border:#6c47d6; --ow-tooltip-title:#6b6b6b; --ow-tooltip-body:#1a1a1a; /* Number line reference colors */ --ow-nl-ref: #0e8a6f; --ow-nl-ref2: #6c47d6; --ow-nl-ref3: #d45a14; --ow-nl-sim: #b8860b; /* Slider */ --ow-slider-track:rgba(0,0,0,0.12); --ow-slider-thumb-bg:#ffffff; --ow-slider-thumb-border:#6c47d6; --ow-slider-thumb-shadow:rgba(108,71,214,0.15); /* Cube visuals */ --ow-cube-bg: rgba(108,71,214,0.08); --ow-cube-border:rgba(108,71,214,0.25); --ow-cube-top: rgba(108,71,214,0.12); --ow-cube-right: rgba(108,71,214,0.06); --ow-cube-sim-bg:rgba(108,71,214,0.18); /* Toggle button */ --ow-toggle-border:rgba(0,0,0,0.15); --ow-toggle-text: #6b6b6b; --ow-toggle-hover:#6c47d6; --ow-toggle-active-bg:rgba(108,71,214,0.06); /* Misc */ --ow-radius: 8px; } /* ─── DARK MODE ─── */ /* Activated by [data-theme="dark"] on or */ [data-theme="dark"] { /* Backgrounds — standard site colors */ --ow-bg: #0a0e17; --ow-bg2: #111827; --ow-bg3: #1a1f2e; --ow-bg4: #222840; /* Accents — standard site accents */ --ow-accent: #00d4aa; /* site teal */ --ow-accent2: #ff5e1a; /* site hot orange */ --ow-accent-dim: rgba(0,212,170,0.12); --ow-accent-glow:rgba(0,212,170,0.06); --ow-ember: #ff5e1a; --ow-gold: #f5c542; /* Text */ --ow-text: #e8e6e1; --ow-text-soft: #c0bdb6; --ow-muted: #8a8d96; --ow-muted2: #555a66; /* Rules & borders */ --ow-rule: 1px solid rgba(255,255,255,0.08); --ow-rule-accent:1px solid rgba(0,212,170,0.20); /* Charts */ --ow-chart-grid: rgba(255,255,255,0.06); --ow-chart-tick: #8a8d96; --ow-chart-line1:#00d4aa; --ow-chart-line2:#ff5e1a; --ow-chart-fill1:rgba(0,212,170,0.08); --ow-chart-fill2:rgba(255,94,26,0.08); --ow-tooltip-bg: #111827; --ow-tooltip-border:#00d4aa; --ow-tooltip-title:#8a8d96; --ow-tooltip-body:#e8e6e1; /* Number line */ --ow-nl-ref: #00d4aa; --ow-nl-ref2: #f5c542; --ow-nl-ref3: #ff5e1a; --ow-nl-sim: #f5c542; /* Slider */ --ow-slider-track:rgba(255,255,255,0.12); --ow-slider-thumb-bg:#0a0e17; --ow-slider-thumb-border:#00d4aa; --ow-slider-thumb-shadow:rgba(0,212,170,0.15); /* Cube visuals */ --ow-cube-bg: rgba(0,212,170,0.08); --ow-cube-border:rgba(0,212,170,0.25); --ow-cube-top: rgba(0,212,170,0.12); --ow-cube-right: rgba(0,212,170,0.05); --ow-cube-sim-bg:rgba(0,212,170,0.18); /* Toggle */ --ow-toggle-border:rgba(255,255,255,0.15); --ow-toggle-text: #8a8d96; --ow-toggle-hover:#00d4aa; --ow-toggle-active-bg:rgba(0,212,170,0.06); } /* ─── SHARED STRUCTURAL STYLES ─── */ /* These do NOT change between light and dark mode. */ .ow-body { font-family: 'Source Serif 4', Georgia, serif; background: var(--ow-bg); color: var(--ow-text); min-height: 100vh; transition: background 0.3s, color 0.3s; } /* Header */ .ow-header { padding: 2rem 2.5rem 1.5rem; border-bottom: var(--ow-rule); display: flex; justify-content: space-between; align-items: flex-start; transition: border-color 0.3s; } .ow-header-left { flex: 1; } .ow-breadcrumb { font-family: 'Bebas Neue', sans-serif; font-size: 0.7rem; letter-spacing: 0.2em; color: var(--ow-muted); margin-bottom: 1rem; text-transform: uppercase; transition: color 0.3s; } .ow-breadcrumb a { color: var(--ow-muted); text-decoration: none; transition: color 0.2s; } .ow-breadcrumb a:hover { color: var(--ow-accent); } .ow-breadcrumb .ow-bc-active { color: var(--ow-accent); } .ow-page-title { font-family: 'Bebas Neue', sans-serif; font-size: clamp(1.4rem, 3vw, 2.2rem); font-weight: 400; color: var(--ow-text); letter-spacing: 0.02em; margin-bottom: 0.5rem; line-height: 1.15; transition: color 0.3s; } .ow-page-title em { color: var(--ow-accent); font-style: normal; } .ow-page-desc { font-size: 1rem; color: var(--ow-muted); max-width: 580px; line-height: 1.7; transition: color 0.3s; } /* Theme toggle */ .ow-theme-toggle { background: transparent; border: 1px solid var(--ow-toggle-border); border-radius: 4px; color: var(--ow-toggle-text); font-family: 'Bebas Neue', sans-serif; font-size: 0.7rem; letter-spacing: 0.1em; padding: 0.45rem 0.75rem; cursor: pointer; transition: all 0.25s; white-space: nowrap; flex-shrink: 0; margin-top: 0.25rem; } .ow-theme-toggle:hover { border-color: var(--ow-toggle-hover); color: var(--ow-toggle-hover); } /* Layout: controls LEFT, main RIGHT */ .ow-layout { display: grid; grid-template-columns: 290px 1fr; min-height: calc(100vh - 140px); } @media (max-width: 900px) { .ow-layout { grid-template-columns: 1fr; } } /* Controls sidebar */ .ow-controls { background: var(--ow-bg2); border-right: var(--ow-rule); padding: 2rem 1.75rem; overflow-y: auto; position: sticky; top: 0; height: 100vh; transition: background 0.3s, border-color 0.3s; } @media (max-width: 900px) { .ow-controls { position: static; height: auto; border-right: none; border-bottom: var(--ow-rule); } } .ow-controls-header { font-family: 'Bebas Neue', sans-serif; font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ow-accent); padding-bottom: 1.25rem; margin-bottom: 1.25rem; border-bottom: var(--ow-rule); transition: color 0.3s, border-color 0.3s; } .ow-control-group { margin-bottom: 1.75rem; padding-bottom: 1.75rem; border-bottom: var(--ow-rule); transition: border-color 0.3s; } .ow-control-group:last-of-type { border-bottom: none; margin-bottom: 0; } .ow-group-label { font-family: 'Bebas Neue', sans-serif; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ow-accent2); margin-bottom: 1.1rem; transition: color 0.3s; } .ow-slider-row { margin-bottom: 1.1rem; } .ow-slider-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.45rem; } .ow-slider-top label { font-size: 0.9rem; color: var(--ow-text-soft); line-height: 1.3; transition: color 0.3s; } .ow-slider-top .ow-val { font-family: 'Bebas Neue', sans-serif; font-size: 0.85rem; color: var(--ow-accent); white-space: nowrap; margin-left: 0.5rem; transition: color 0.3s; } .ow-slider { -webkit-appearance: none; width: 100%; height: 2px; background: var(--ow-slider-track); outline: none; cursor: pointer; border-radius: 2px; transition: background 0.3s; } .ow-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 15px; height: 15px; background: var(--ow-slider-thumb-bg); border: 2px solid var(--ow-slider-thumb-border); border-radius: 50%; cursor: pointer; transition: box-shadow 0.2s, background 0.3s, border-color 0.3s; } .ow-slider::-webkit-slider-thumb:hover { box-shadow: 0 0 0 5px var(--ow-slider-thumb-shadow); } .ow-log-toggle { width: 100%; background: transparent; border: 1px solid var(--ow-toggle-border); border-radius: 4px; color: var(--ow-toggle-text); font-family: 'Bebas Neue', sans-serif; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.6rem 1rem; cursor: pointer; transition: all 0.25s; text-align: left; } .ow-log-toggle:hover { border-color: var(--ow-toggle-hover); color: var(--ow-toggle-hover); } .ow-log-toggle.active { border-color: var(--ow-accent); color: var(--ow-accent); background: var(--ow-toggle-active-bg); } /* Main content */ .ow-main { padding: 2rem 2.5rem; display: flex; flex-direction: column; gap: 1.75rem; overflow-y: auto; } /* Stats grid */ .ow-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .ow-stat-card { background: var(--ow-bg2); border: 1px solid var(--ow-accent-dim); border-radius: var(--ow-radius); padding: 1.75rem 1.5rem; position: relative; overflow: hidden; transition: border-color 0.35s, background 0.3s; } .ow-stat-card:hover { border-color: var(--ow-accent); } .ow-stat-card.primary { border-left: 3px solid var(--ow-accent); } .ow-stat-label { font-family: 'Bebas Neue', sans-serif; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ow-muted); margin-bottom: 0.85rem; transition: color 0.3s; } .ow-stat-value { font-family: 'Bebas Neue', sans-serif; font-size: clamp(1.8rem, 3.5vw, 3rem); line-height: 1; letter-spacing: -0.02em; transition: color 0.3s; } .ow-stat-card.primary .ow-stat-value { color: var(--ow-accent); } .ow-stat-card:not(.primary) .ow-stat-value { color: var(--ow-text); } .ow-stat-unit { font-size: 0.85rem; color: var(--ow-muted); margin-top: 0.6rem; transition: color 0.3s; } /* Charts */ .ow-chart-panel { background: var(--ow-bg2); border: 1px solid var(--ow-accent-dim); border-radius: var(--ow-radius); overflow: hidden; transition: background 0.3s, border-color 0.3s; } .ow-chart-header { padding: 1.1rem 1.5rem 0.75rem; border-bottom: var(--ow-rule); display: flex; justify-content: space-between; align-items: baseline; transition: border-color 0.3s; } .ow-chart-title { font-family: 'Bebas Neue', sans-serif; font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ow-muted); transition: color 0.3s; } .ow-chart-unit { font-size: 0.8rem; color: var(--ow-muted2); transition: color 0.3s; } .ow-chart-container { padding: 1rem 1.25rem 1.25rem; height: 200px; } /* Scale section */ .ow-scale-section { border: 1px solid var(--ow-accent-dim); border-radius: var(--ow-radius); background: var(--ow-bg2); overflow: hidden; transition: background 0.3s, border-color 0.3s; } .ow-scale-header { padding: 1.25rem 1.75rem; border-bottom: var(--ow-rule); background: var(--ow-accent-glow); transition: background 0.3s, border-color 0.3s; } .ow-scale-header h2 { font-family: 'Bebas Neue', sans-serif; font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ow-muted); margin-bottom: 0.3rem; transition: color 0.3s; } .ow-scale-header p { font-size: 0.9rem; color: var(--ow-muted2); transition: color 0.3s; } .ow-scale-body { display: grid; grid-template-columns: 1fr 1fr; } @media (max-width: 700px) { .ow-scale-body { grid-template-columns: 1fr; } } /* Number line */ .ow-number-line-wrap { grid-column: 1 / -1; padding: 1.75rem; border-bottom: var(--ow-rule); transition: border-color 0.3s; } .ow-nl-label { font-family: 'Bebas Neue', sans-serif; font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ow-accent2); margin-bottom: 1.25rem; transition: color 0.3s; } .ow-nl-container { position: relative; height: 80px; margin-bottom: 0.5rem; } .ow-nl-track { position: absolute; bottom: 28px; left: 0; right: 0; height: 1px; background: var(--ow-accent-dim); transition: background 0.3s; } .ow-nl-marker { position: absolute; bottom: 22px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; } .ow-nl-dot { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid; background: var(--ow-bg); flex-shrink: 0; transition: background 0.3s; } .ow-nl-line { width: 1px; height: 12px; background: currentColor; opacity: 0.5; } .ow-nl-label-text { position: absolute; top: -2px; left: 50%; transform: translateX(-50%); font-family: 'Bebas Neue', sans-serif; font-size: 0.58rem; white-space: nowrap; text-align: center; line-height: 1.3; letter-spacing: 0.06em; } .ow-nl-marker.sim-marker .ow-nl-dot { width: 10px; height: 10px; } .ow-nl-legend { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; margin-top: 0.5rem; } .ow-legend-item { display: flex; align-items: center; gap: 0.4rem; font-family: 'Bebas Neue', sans-serif; font-size: 0.62rem; letter-spacing: 0.06em; color: var(--ow-muted); transition: color 0.3s; } .ow-legend-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } /* Cube comparison */ .ow-cube-col { padding: 1.5rem 1.75rem; border-right: var(--ow-rule); transition: border-color 0.3s; } .ow-sub-header { font-family: 'Bebas Neue', sans-serif; font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ow-accent2); margin-bottom: 1.25rem; transition: color 0.3s; } .ow-cube-intro { font-size: 0.88rem; color: var(--ow-muted); margin-bottom: 1.25rem; line-height: 1.5; transition: color 0.3s; } .ow-cube-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; align-items: end; margin-bottom: 1.25rem; } .ow-cube-item { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; } .ow-cube-visual { background: var(--ow-cube-bg); border: 1px solid var(--ow-cube-border); border-radius: 2px; width: 100%; flex-shrink: 0; position: relative; transition: background 0.3s, border-color 0.3s; } .ow-cube-visual::before { content: ''; position: absolute; top: -5px; left: 5px; right: -5px; height: 5px; background: var(--ow-cube-top); border: 1px solid var(--ow-cube-border); border-bottom: none; clip-path: polygon(0 100%, 15% 0, 100% 0, 85% 100%); transition: background 0.3s, border-color 0.3s; } .ow-cube-visual::after { content: ''; position: absolute; top: -5px; right: -5px; bottom: 0; width: 5px; background: var(--ow-cube-right); border: 1px solid var(--ow-cube-border); border-left: none; clip-path: polygon(0 8%, 100% 0, 100% 100%, 0 100%); transition: background 0.3s, border-color 0.3s; } .ow-cube-item.sim-cube .ow-cube-visual { background: var(--ow-cube-sim-bg); border-color: var(--ow-accent); } .ow-cube-item.sim-cube .ow-cube-visual::before { background: var(--ow-cube-sim-bg); border-color: var(--ow-accent); } .ow-cube-item.sim-cube .ow-cube-visual::after { background: var(--ow-cube-bg); border-color: var(--ow-accent); } .ow-cube-label { font-family: 'Bebas Neue', sans-serif; font-size: 0.58rem; letter-spacing: 0.06em; color: var(--ow-muted); text-align: center; line-height: 1.3; transition: color 0.3s; } .ow-cube-item.sim-cube .ow-cube-label { color: var(--ow-accent); } .ow-cube-note { font-size: 0.85rem; color: var(--ow-muted); line-height: 1.6; padding-top: 0.75rem; border-top: var(--ow-rule); transition: color 0.3s, border-color 0.3s; } .ow-cube-note strong { color: var(--ow-text-soft); font-weight: 600; } /* Analogies */ .ow-analogy-col { padding: 1.5rem 1.75rem; } .ow-analogy-cards { display: flex; flex-direction: column; gap: 0.75rem; } .ow-analogy-card { background: var(--ow-bg3); border: 1px solid var(--ow-accent-dim); border-radius: 6px; padding: 1rem 1.1rem; transition: background 0.3s, border-color 0.3s; } .ow-analogy-label { font-family: 'Bebas Neue', sans-serif; font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ow-muted2); margin-bottom: 0.4rem; transition: color 0.3s; } .ow-analogy-value { font-size: 1rem; color: var(--ow-text); margin-bottom: 0.25rem; line-height: 1.3; transition: color 0.3s; } .ow-analogy-value strong { color: var(--ow-accent); font-weight: 600; } .ow-analogy-sub { font-size: 0.82rem; color: var(--ow-muted); line-height: 1.4; transition: color 0.3s; } /* ─── RESPONSIVE ─── */ @media (max-width: 900px) { .ow-header { padding: 1.5rem; flex-direction: column; gap: 1rem; } .ow-main { padding: 1.5rem; } .ow-stats-grid { grid-template-columns: 1fr; } }