:root { --site-bg:#121626; --site-surface:#1c2338; --site-ink:#f4f4f6; --site-muted:#b8c0d1; --site-line:#37405a; --site-accent:#ffe15b; --site-link:#9ec8ff; }
.reading-page { margin:0; background:var(--site-bg); color:var(--site-ink); font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.reading-page * { box-sizing:border-box; }
.reading-page a,.site-footer a,.privacy-panel a,.studio-learn a { color:var(--site-link); text-underline-offset:4px; }
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible { outline:3px solid #ffe15b; outline-offset:4px; }
.skip-link { position:absolute; left:16px; top:-80px; background:#ffe15b; color:#121626!important; padding:10px 18px; z-index:20000; }
.skip-link:focus { top:10px; }
.reading-header { padding:26px max(24px,calc((100vw - 1160px)/2)); border-bottom:1px solid var(--site-line); display:flex; align-items:center; justify-content:space-between; gap:24px; }
.reading-brand,.footer-brand { color:var(--site-accent)!important; letter-spacing:.2em; font-weight:850; text-decoration:none; font-size:28px; }
.site-nav { display:flex; justify-content:center; flex-wrap:wrap; gap:8px 22px; line-height:1.5; }
.site-nav a { color:#c9d2e5; text-decoration:none; font-size:14px; padding:5px 0; border-bottom:2px solid transparent; }
.site-nav a:hover,.site-nav a[aria-current] { color:#ffe15b; border-color:#ffe15b; }
.reading-main { max-width:1120px; margin:0 auto; padding:58px 24px 80px; }
.page-heading { max-width:850px; margin-bottom:38px; }
.eyebrow { color:#ffe15b; letter-spacing:.12em; text-transform:uppercase; font-size:12px; font-weight:750; margin:0 0 14px; }
.page-heading h1 { font-size:clamp(32px,5vw,54px); line-height:1.08; letter-spacing:-.035em; margin:0 0 20px; }
.page-deck { color:var(--site-muted); font-size:19px; line-height:1.6; margin:0; }
.prose { max-width:780px; }
.prose h2 { font-size:25px; line-height:1.25; margin:38px 0 16px; letter-spacing:-.02em; }
.prose h3 { font-size:18px; margin:25px 0 10px; }
.prose p,.prose ul,.prose ol { margin:0 0 18px; }
.prose li { margin:8px 0; }
.prose strong { color:#fff; }
.prose code { background:#29314a; border-radius:4px; padding:2px 5px; }
.article-meta { color:var(--site-muted); font-size:13px; margin-bottom:26px; }
.resource-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.resource-card { background:var(--site-surface); border:1px solid var(--site-line); border-radius:16px; padding:28px; }
.resource-card .number { color:var(--site-accent); font:600 13px/1.5 monospace; letter-spacing:.12em; }
.resource-card h2 { font-size:23px; line-height:1.25; margin:18px 0 14px; }
.resource-card h2 a { color:var(--site-ink); text-decoration:none; }
.resource-card p { color:var(--site-muted); margin:0 0 18px; }
.resource-card:hover { border-color:#74809c; }
.feature-example { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:32px; padding:32px; margin:30px 0; border:1px solid var(--site-line); border-radius:16px; background:#1c2338; }
.feature-example h2 { margin-top:0; }
.feature-example img { display:block; width:100%; height:auto; border-radius:10px; }
.site-button { display:inline-block; background:#ffe15b; color:#151928!important; padding:11px 18px; border-radius:7px; text-decoration:none; font-weight:750; }
.article-figure { margin:28px 0; }
.article-figure img { display:block; width:100%; height:auto; border-radius:12px; background:#f4f0e7; }
.article-figure figcaption { font-size:13px; color:var(--site-muted); padding-top:10px; }
.callout { border-left:3px solid #ffe15b; background:#20273b; padding:18px 22px; margin:26px 0; }
.callout p:last-child { margin-bottom:0; }
.table-scroll { overflow-x:auto; margin:24px 0; }
.reading-page table { width:100%; border-collapse:collapse; text-align:left; font-size:15px; }
.reading-page th,.reading-page td { padding:13px 14px; border-bottom:1px solid var(--site-line); vertical-align:top; }
.reading-page th { color:#ffe15b; background:#1c2338; }
.reading-page .swatch { display:inline-block; width:15px; height:15px; border:1px solid #8290a6; border-radius:50%; vertical-align:middle; margin-right:7px; }
.guide-next { display:flex; gap:18px; justify-content:space-between; border-top:1px solid var(--site-line); margin-top:38px; padding-top:22px; }
.reading-page details,.studio-learn details { border-bottom:1px solid #37405a; padding:18px 0; }
.reading-page summary,.studio-learn summary { cursor:pointer; font-weight:700; }
.reading-page details p,.studio-learn details p { margin:14px 0 0; }
.site-footer { margin-top:0; padding:32px max(24px,calc((100vw - 1072px)/2)); border-top:1px solid #37405a; background:#101421; color:#b8c0d1; font:14px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.site-footer p { margin:8px 0 20px; }
.site-footer nav { display:flex; flex-wrap:wrap; gap:12px 22px; align-items:center; }
.site-footer button { appearance:none; border:0; background:none; font:inherit; padding:0; color:#9ec8ff; text-decoration:underline; text-underline-offset:4px; cursor:pointer; }
.site-footer .footer-note { color:#a3adc2; font-size:12px; margin:22px 0 0; }
.privacy-panel { position:fixed; bottom:16px; left:16px; right:16px; z-index:15000; display:flex; gap:24px; align-items:center; background:#f8f5ed; color:#1a2233; border:1px solid #d0cbbb; border-radius:12px; padding:20px 24px; box-shadow:0 8px 48px #0008; font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.privacy-panel[hidden] { display:none; }
.privacy-panel h2 { font-size:18px; line-height:1.3; margin:0 0 7px; color:#1a2233; }
.privacy-panel p { margin:0; max-width:780px; }
.privacy-panel a { color:#174d85; }
.privacy-panel .privacy-status { margin-top:6px; font-size:12px; }
.privacy-actions { display:flex; gap:10px; flex-wrap:wrap; flex-shrink:0; }
.privacy-actions button { border:1px solid #25324b; border-radius:6px; background:#25324b; color:white; padding:11px 15px; font:inherit; font-size:14px; font-weight:600; line-height:1.3; cursor:pointer; }
.privacy-actions #privacyClose { background:none; color:#25324b; }
.no-script-note { padding:16px 24px; font-size:13px; }
.studio > main { height:calc(100vh - 85px); min-height:620px; }
.studio .left-panel .upload-section { margin-bottom:20px; }
.studio-learn { max-width:1120px; margin:0 auto; padding:62px 24px; font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.studio-learn h2 { font-size:30px; line-height:1.25; margin:0 0 20px; }
.studio-learn > p { color:#b8c0d1; margin:0 0 28px; max-width:780px; }
.studio-learn .resource-card h3 { font-size:20px; margin:12px 0; }
.studio-learn .resource-card p { margin-bottom:0; }
.studio .tab-bar { overflow-x:auto; }
.studio .tab-btn { flex-shrink:0; }
.studio .account-bar { max-width:36%; }
.auth-legal { font-size:12px; line-height:1.5; color:#b8c0d1; margin:14px 0; }
.auth-legal a { color:#9ec8ff; }
.contact-form { margin:28px 0 38px; padding:28px; background:var(--site-surface); border:1px solid var(--site-line); border-radius:14px; }
.contact-form label { display:block; margin:0 0 8px; font-weight:650; }
.contact-form input,.contact-form select,.contact-form textarea { box-sizing:border-box; width:100%; padding:12px 14px; margin:0 0 20px; border:1px solid #66718b; border-radius:7px; background:#101625; color:#f5f7ff; font:inherit; }
.contact-form textarea { resize:vertical; min-height:160px; }
.contact-form select { appearance:none; min-height:50px; padding-right:38px; background-image:linear-gradient(45deg,transparent 50%,#ffe15b 50%),linear-gradient(135deg,#ffe15b 50%,transparent 50%); background-position:calc(100% - 19px) 22px,calc(100% - 13px) 22px; background-size:6px 6px; background-repeat:no-repeat; }
.contact-form input:focus-visible,.contact-form select:focus-visible,.contact-form textarea:focus-visible { outline:3px solid #ffe15b; outline-offset:3px; }
.contact-form [aria-invalid="true"] { border-color:#ffa4a4; }
.contact-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.contact-form .field-error { color:#ffb3b3; margin:-10px 0 20px; font-size:14px; }
.contact-form .form-help { color:var(--site-muted); font-size:14px; }
.contact-form button { border:0; cursor:pointer; font:inherit; font-weight:750; }
.contact-trap { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.contact-status,.contact-errors { border:1px solid #78bea7; background:#183830; padding:20px; border-radius:10px; scroll-margin-top:24px; }
.contact-errors { border-color:#d58585; background:#412329; }
.contact-status p,.contact-errors p { margin:8px 0 0; }
@media(max-width:640px) { .contact-row { grid-template-columns:1fr; gap:0; } .contact-form { padding:20px; } }
@media(max-width:900px) { .reading-header { flex-direction:column; gap:15px; } .privacy-panel { flex-direction:column; align-items:stretch; gap:14px; } .privacy-actions { flex-shrink:1; } }
@media(max-width:800px) { .studio>main { height:auto; min-height:0; } .studio .left-panel { max-height:240px; } .studio .right-panel { max-height:440px; } .studio .account-bar { max-width:none; } }
@media(max-width:640px) { .reading-main { padding:36px 20px 50px; } .resource-grid,.feature-example { grid-template-columns:1fr; } .resource-card,.feature-example { padding:22px; } .page-deck { font-size:17px; } .site-nav { gap:5px 15px; } .privacy-panel { bottom:8px; left:8px; right:8px; padding:16px; max-height:70vh; overflow-y:auto; } .privacy-actions button { flex:1; } .guide-next { flex-direction:column; } .studio-learn { padding:40px 20px; } }