/* ============================================================ PaddySpeaks Interview Studio — unified design language Token system + article skin, matching the data-modeling Studio. Applied to a page by: + this stylesheet loaded AFTER /style.css, plus the Inter font. Dark mode via [data-theme] or prefers-color-scheme. ============================================================ */ :root{ --font-display:'Playfair Display',Georgia,serif; --font-ui:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --font-read:'Source Serif 4',Georgia,serif; --font-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',monospace; --bg:#faf8f4; --surface:#fff; --surface-2:#f6f1e9; --surface-3:#ece4d6; --border:#e7ded0; --border-strong:#d8cbb5; --text:#1c1917; --text-2:#57534e; --text-3:#78716c; --muted:#a8a29e; --accent:#c08a2e; --accent-2:#a9761f; --accent-weak:#f7efdd; --on-accent:#1c1917; --note-bg:#ecf6ef; --note-bd:#b5e0c2; --note-fg:#1b6b43; --trap-bg:#fdf0f1; --trap-bd:#f3c9cf; --trap-fg:#9f1239; --warn-bg:#fbf3e2; --warn-bd:#ecd49b; --warn-fg:#8a5a16; --code-bg:#211d18; --code-fg:#f0ebe2; --shadow:0 1px 2px rgba(28,25,23,.05),0 10px 26px -14px rgba(28,25,23,.22); --shadow-lg:0 14px 34px -16px rgba(28,25,23,.30); --radius:13px; --radius-sm:8px; } :root[data-theme="dark"]{ --bg:#15120d; --surface:#1f1a13; --surface-2:#271f16; --surface-3:#30271b; --border:#3a3023; --border-strong:#4d4030; --text:#f1ebe0; --text-2:#c8bfae; --text-3:#9c9284; --muted:#6f675a; --accent:#d8a23f; --accent-2:#e6b75c; --accent-weak:#2a2114; --on-accent:#15120d; --note-bg:#13271d; --note-bd:#2c5340; --note-fg:#8fe0b2; --trap-bg:#2c1518; --trap-bd:#5e2730; --trap-fg:#f3a9b6; --warn-bg:#2a2110; --warn-bd:#564019; --warn-fg:#e6b75c; --code-bg:#100d09; --code-fg:#ece4d6; --shadow:0 1px 2px rgba(0,0,0,.45),0 12px 30px -14px rgba(0,0,0,.65); --shadow-lg:0 16px 38px -16px rgba(0,0,0,.7); } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --bg:#15120d; --surface:#1f1a13; --surface-2:#271f16; --surface-3:#30271b; --border:#3a3023; --border-strong:#4d4030; --text:#f1ebe0; --text-2:#c8bfae; --text-3:#9c9284; --muted:#6f675a; --accent:#d8a23f; --accent-2:#e6b75c; --accent-weak:#2a2114; --on-accent:#15120d; --note-bg:#13271d; --note-bd:#2c5340; --note-fg:#8fe0b2; --trap-bg:#2c1518; --trap-bd:#5e2730; --trap-fg:#f3a9b6; --warn-bg:#2a2110; --warn-bd:#564019; --warn-fg:#e6b75c; --code-bg:#100d09; --code-fg:#ece4d6; --shadow:0 1px 2px rgba(0,0,0,.45),0 12px 30px -14px rgba(0,0,0,.65); --shadow-lg:0 16px 38px -16px rgba(0,0,0,.7); } } /* ---- base, scoped to skinned pages so global site chrome is untouched ---- */ body.studio-skin{background:var(--bg)!important;color:var(--text);font-family:var(--font-ui);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} body.studio-skin a{color:var(--accent);text-decoration:none} body.studio-skin a:hover{text-decoration:underline} body.studio-skin :focus-visible{outline:3px solid var(--accent-2);outline-offset:2px;border-radius:6px} body.studio-skin ::selection{background:var(--accent-weak)} /* ---- the deep-dive article wrapper (.netflix-prep), retokenized + dark-aware ---- */ .netflix-prep{max-width:980px;margin:0 auto;padding:0 24px 96px;font-family:var(--font-read);line-height:1.75;color:var(--text);font-size:18px} .netflix-prep h1.hero-title{font-family:var(--font-display);font-weight:700;font-size:clamp(34px,5vw,52px);line-height:1.05;margin:24px 0 12px;color:var(--text);letter-spacing:-.01em} .netflix-prep .hero-sub{font-family:var(--font-read);font-size:20px;line-height:1.5;color:var(--text-2);margin:0 0 28px} .netflix-prep .hero-meta{font-family:var(--font-mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--text-3);margin-bottom:24px} .netflix-prep h2.part-title{font-family:var(--font-display);font-weight:700;font-size:clamp(28px,3.5vw,36px);line-height:1.15;margin:80px 0 8px;color:var(--text);padding-top:28px;border-top:1px solid var(--border)} .netflix-prep .part-eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--accent-2);margin-bottom:6px} .netflix-prep h3.section-head{font-family:var(--font-display);font-weight:700;font-size:26px;line-height:1.2;margin:48px 0 12px;color:var(--text)} .netflix-prep h4.sub-head{font-family:var(--font-ui);font-size:17px;font-weight:600;margin:28px 0 8px;color:var(--text);letter-spacing:.01em} .netflix-prep p{margin:0 0 16px} .netflix-prep ul,.netflix-prep ol{margin:0 0 18px;padding-left:24px} .netflix-prep li{margin:6px 0} .netflix-prep code{font-family:var(--font-mono);font-size:.86em;background:var(--surface-3);padding:2px 6px;border-radius:5px;color:var(--text)} .netflix-prep pre{background:var(--code-bg);color:var(--code-fg);font-family:var(--font-mono);font-size:13.5px;line-height:1.6;padding:18px 20px;border-radius:var(--radius-sm);overflow-x:auto;margin:18px 0;border:1px solid var(--border);box-shadow:var(--shadow)} .netflix-prep pre code{background:transparent;color:inherit;padding:0;font-size:inherit} .netflix-prep table{width:100%;border-collapse:collapse;margin:20px 0;font-size:15px;font-family:var(--font-ui);box-shadow:var(--shadow);border-radius:var(--radius-sm);overflow:hidden} .netflix-prep table th{text-align:left;background:var(--surface-3);color:var(--text);padding:11px 13px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;border-bottom:1px solid var(--border)} .netflix-prep table td{padding:11px 13px;border-bottom:1px solid var(--border);vertical-align:top;color:var(--text-2)} .netflix-prep table tr:nth-child(even) td{background:var(--surface-2)} .netflix-prep .callout{background:var(--warn-bg);border-left:4px solid var(--accent);padding:14px 18px;margin:18px 0;border-radius:var(--radius-sm);color:var(--text)} .netflix-prep .callout strong{color:var(--warn-fg)} .netflix-prep .senior-signal{background:var(--note-bg);border-left:4px solid var(--note-fg);padding:14px 18px;margin:18px 0;border-radius:var(--radius-sm);font-style:italic;color:var(--text-2)} .netflix-prep .senior-signal strong{color:var(--note-fg);font-style:normal} .netflix-prep .trap-box{background:var(--trap-bg);border-left:4px solid var(--trap-fg);padding:14px 18px;margin:18px 0;border-radius:var(--radius-sm);color:var(--text)} .netflix-prep .trap-box strong{color:var(--trap-fg)} .netflix-prep .toc{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);padding:22px 28px;margin:28px 0 40px} .netflix-prep .toc h4{margin:0 0 14px;font-family:var(--font-mono);font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--text-3)} .netflix-prep .toc ol{margin:0;padding-left:22px} .netflix-prep .toc li{font-family:var(--font-read)} .netflix-prep .toc a{color:var(--text);border-bottom:1px dotted var(--border-strong)} .netflix-prep .toc a:hover{color:var(--accent);border-bottom-color:var(--accent)} .netflix-prep .ascii-diagram{background:var(--code-bg);color:var(--code-fg);font-family:var(--font-mono);font-size:12px;line-height:1.45;padding:18px 20px;border-radius:var(--radius-sm);overflow-x:auto;margin:18px 0;white-space:pre;border:1px solid var(--border)} .netflix-prep .qa{border-left:3px solid var(--accent);padding:4px 0 4px 18px;margin:22px 0} .netflix-prep .qa .q{font-family:var(--font-ui);font-weight:600;color:var(--text);margin:0 0 6px} .netflix-prep .qa .a{margin:0;color:var(--text-2)} .netflix-prep .top-bar{font-family:var(--font-ui)} /* ---- floating theme toggle (matches the Studio) ---- */ .studio-themetoggle{position:fixed;right:18px;bottom:18px;z-index:60;display:inline-flex;align-items:center;gap:7px;font-family:var(--font-ui);font-size:13px;font-weight:600;color:var(--text-2);background:color-mix(in srgb,var(--surface) 90%,transparent);border:1px solid var(--border);border-radius:999px;padding:9px 14px;cursor:pointer;box-shadow:var(--shadow);backdrop-filter:blur(6px)} .studio-themetoggle:hover{border-color:var(--accent);color:var(--text)} /* ---- floating top / bottom jump buttons (long deep-dive pages) ---- */ .studio-jump{position:fixed;right:18px;bottom:64px;z-index:60;display:flex;flex-direction:column;gap:8px} .studio-jump button{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:var(--font-ui);font-size:12px;font-weight:600;color:var(--text-2);background:color-mix(in srgb,var(--surface) 90%,transparent);border:1px solid var(--border);border-radius:999px;padding:8px 13px;cursor:pointer;box-shadow:var(--shadow);backdrop-filter:blur(6px);transition:border-color .15s,color .15s} .studio-jump button:hover{border-color:var(--accent);color:var(--text)} @media (max-width:520px){.studio-jump{right:12px;bottom:60px}} /* ====== App-family palette: remap the global /style.css --color-* tokens (currently a COOL BLUE scheme) to the warm Studio palette + dark mode. Applies anywhere studio.css is loaded — the deep-dive global chrome AND the question-bank / playground / quiz UI — so the whole site reads as one. ====== */ :root{ --color-paper:#faf8f4; --color-cream:#f6f1e9; --color-border:#e7ded0; --color-border-light:#ece4d6; --color-ink:#1c1917; --color-muted:#57534e; --color-light-muted:#78716c; --color-gold:#c08a2e; --color-gold-dark:#a9761f; --color-gold-light:#f7efdd; --color-rust:#b4530a; --color-sage:#1b6b43; } :root[data-theme="dark"]{ --color-paper:#15120d; --color-cream:#1f1a13; --color-border:#3a3023; --color-border-light:#30271b; --color-ink:#f1ebe0; --color-muted:#c8bfae; --color-light-muted:#9c9284; --color-gold:#d8a23f; --color-gold-dark:#e6b75c; --color-gold-light:#2a2114; --color-rust:#e0794a; --color-sage:#8fe0b2; } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --color-paper:#15120d; --color-cream:#1f1a13; --color-border:#3a3023; --color-border-light:#30271b; --color-ink:#f1ebe0; --color-muted:#c8bfae; --color-light-muted:#9c9284; --color-gold:#d8a23f; --color-gold-dark:#e6b75c; --color-gold-light:#2a2114; --color-rust:#e0794a; --color-sage:#8fe0b2; } }