/* Matter family: blue field-guide shell with readable paper surfaces. */
:root { --matter-blue:#1f5fe0; --matter-navy:#0a1430; --matter-paper:#f3f7fc; --matter-line:#c4d5e8; }
body.periodic-page { background:linear-gradient(180deg,#dceafa 0,#f3f7fc 500px);color:#0a1430; }
.periodic-page .pt-header { border-color:var(--matter-line);color:var(--matter-blue); }
.periodic-page .pt-intro h1 em,.periodic-page .pt-kicker { color:var(--matter-blue); }
.periodic-page .range-badge { background:#e7f0fb;border-color:var(--matter-line); }
.periodic-page .workbench { background:#f7faff;border-color:var(--matter-line);box-shadow:0 12px 35px #0a143009; }
.periodic-page .element[aria-pressed=true] { outline-color:var(--matter-blue); }
.periodic-page .view-buttons button[aria-pressed=true],.periodic-page .mission-actions button:first-child { background:var(--matter-blue);border-color:var(--matter-blue);color:white; }
.periodic-page .atom-stage { background:radial-gradient(ellipse at 50% 44%,#24418a,#0a1430 75%);border-color:#426c96; }
.ma-hero { background:linear-gradient(180deg,#e4effc 0%,#f3f7fc 65%,#e7eff8 100%); }
.ma-hero .lede em,.hero-atom-kicker,.hero-atom-link { color:var(--matter-blue); }
.hero-atom-link { border-color:var(--matter-blue); }
.ma-atoms { background:linear-gradient(180deg,#f3f7fc,#e5eef9); }
.matter-building-page { --green:var(--matter-blue);background:linear-gradient(180deg,#dceafa,#f3f7fc 500px);color:#0a1430;font-family:Satoshi,system-ui,sans-serif; }
.matter-building-page header { border-color:var(--matter-line);font-family:var(--font-mono,monospace);font-size:12px; }
.matter-building-page h1,.matter-building-page h2,.matter-building-page h3 { font-family:var(--font-display,'Clash Display'),system-ui,sans-serif; }
.matter-building-page .activity { background:#f7faff;border-color:var(--matter-line); }
.matter-building-page .hotspot[aria-current=true] { border-color:var(--matter-blue); }
.mr-u-card { box-sizing:border-box;max-width:620px;padding:20px 24px;margin:0 0 28px;border:1px solid var(--matter-line);border-radius:18px;background:#fff;color:#0a1430;box-shadow:0 8px 24px #0a143008;font:15px/1.6 var(--font-body,system-ui,sans-serif); }
.mr-u-heading { display:flex;gap:14px;align-items:center; }
.mr-u-heading img { width:56px;height:56px;object-fit:cover;object-position:50% 30%;border-radius:50%;border:3px solid #dceafa;flex-shrink:0; }
.mr-u-card .mr-u-kicker { font:10px/1.5 var(--font-mono,monospace);letter-spacing:.13em;margin:0 0 3px;color:var(--matter-blue); }
.mr-u-card h2 { font:600 23px/1.2 var(--font-display,system-ui,sans-serif);margin:0;letter-spacing:-.02em; }
.mr-u-card p { margin:12px 0; }
.mr-u-card summary { cursor:pointer;font-weight:700;padding:10px 0;color:var(--matter-blue); }
.mr-u-card a { color:var(--matter-blue);text-decoration:underline;text-underline-offset:4px; }
.mr-u-watch { display:inline-block;padding:8px 0;font-size:13px; }
.mr-u-ask { border-top:1px solid #dceafa;margin-top:6px; }
.mr-u-card :focus-visible { outline:3px solid var(--matter-blue);outline-offset:4px; }
@media(max-width:600px) { .mr-u-card { padding:16px;margin-bottom:22px; } .mr-u-card h2 { font-size:21px; } }
/* Periodic table intro: Mr. U portrait + speech bubble replace the range badge; video opens in a dialog (mr-u-video.js). */
.mr-u-intro { flex-shrink:0;display:flex;align-items:center;gap:14px;max-width:400px; }
.mr-u-portrait { position:relative;flex-shrink:0;display:block;width:96px;height:96px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 2px var(--matter-blue),0 10px 24px #0a143022;overflow:hidden;background:#dceafa;transition:transform .2s ease; }
.mr-u-portrait img { display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%; }
.mr-u-portrait:hover { transform:scale(1.04); }
.mr-u-bubble { position:relative;background:#fff;border:1px solid var(--matter-line);border-radius:16px;padding:12px 16px;box-shadow:0 8px 24px #0a143010;color:#0a1430; }
.mr-u-bubble::before { content:'';position:absolute;left:-8px;top:50%;width:14px;height:14px;margin-top:-7px;background:#fff;border-left:1px solid var(--matter-line);border-bottom:1px solid var(--matter-line);transform:rotate(45deg); }
.mr-u-line { font:600 17px/1.3 var(--font-display,system-ui,sans-serif);letter-spacing:-.01em;margin:0 0 10px; }
.mr-u-actions { display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0;font-size:13px; }
.mr-u-watch-btn { display:inline-block;padding:7px 13px;border-radius:999px;background:var(--matter-blue);color:#fff;font-weight:700;text-decoration:none; }
.mr-u-watch-btn:hover { background:#174bb5; }
.mr-u-intro :focus-visible { outline:3px solid var(--matter-blue);outline-offset:3px; }
.mr-u-dialog { width:min(920px,calc(100vw - 32px));padding:0;border:0;border-radius:16px;background:var(--matter-navy);color:#fff;box-shadow:0 30px 80px #0008; }
.mr-u-dialog::backdrop { background:#0a1430cc; }
.mr-u-dialog-bar { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px 10px 18px; }
.mr-u-dialog-title { margin:0;font:12px/1.4 var(--font-mono,monospace);letter-spacing:.08em; }
.mr-u-close { width:36px;height:36px;border-radius:50%;border:1px solid #ffffff44;background:transparent;color:#fff;font-size:16px;cursor:pointer; }
.mr-u-close:hover { background:#ffffff1a; }
.mr-u-dialog-player { aspect-ratio:16/9;background:#000; }
.mr-u-dialog-player iframe { display:block;width:100%;height:100%;border:0; }
@media(max-width:800px) { .pt-intro:has(.mr-u-intro) { flex-direction:column;align-items:flex-start;gap:16px; } .mr-u-intro { max-width:none;width:100%; } .mr-u-portrait { width:76px;height:76px; } .mr-u-line { font-size:16px; } }
@media(prefers-reduced-motion:reduce) { .mr-u-portrait { transition:none; } .mr-u-portrait:hover { transform:none; } }
@media print { .mr-u-intro,.mr-u-dialog { display:none; } }
@media print { .mr-u-card { display:none; } .periodic-page,.matter-building-page,.ma-atoms { background:white; } }