/* Periodic Table Explorer: one stylesheet (the old polish layer is merged in).
 * Theme colors are tokens on :root; the site's dark mode swaps them with [data-theme="dark"].
 * There are no forced-priority overrides. Animation is declared only inside prefers-reduced-motion: no-preference,
 * so reduced-motion users get a static page without any override rules.
 */

/* ---------- tokens ---------- */
:root {
  --pt-bg: #f3f6fb;
  --pt-surface: #ffffff;
  --pt-surface-2: #eef2f8;
  --pt-border: #d3dceb;
  --pt-border-strong: #8393ab;
  --pt-text: #0f172a;
  --pt-text-2: #334155;
  --pt-muted: #56637a;
  --pt-accent: #1d4ed8;
  --pt-accent-hover: #1e40af;
  --pt-accent-ink: #ffffff;
  --pt-accent-soft: #e7eeff;
  --pt-accent-text: #1e3a8a;
  --pt-focus: #1d4ed8;
  --pt-good: #166534; --pt-good-bg: #ecfdf3; --pt-good-bd: #7fcf9c; --pt-good-ring: #15803d; --pt-good-ring-ink: #ffffff;
  --pt-bad: #991b1b; --pt-bad-bg: #fef2f2; --pt-bad-bd: #f0a8a8;
  --pt-warn-bg: #fff6dc; --pt-warn-bd: #e6b94f; --pt-warn-text: #6b4200;
  --pt-shadow: 0 8px 26px rgba(15, 23, 42, .07);
  --pt-selected: #0f172a;
  --pt-cmp: #4338ca;
  --pt-mission: #b45309; --pt-mission-glow: rgba(217, 119, 6, .45);
  --pt-spot: #0e7490;
  --pt-electron: #d97706; --pt-electron-line: #78350f;
  --pt-electron-core: #2563eb; --pt-electron-core-line: #1e3a8a;
  --pt-orbit: #9db5dd; --pt-orbit-valence: #d97706;
  --pt-nucleus: #1e40af; --pt-nucleus-line: #1e3a8a;
  --pt-chart-line: #2f5fd0; --pt-chart-grid: #dde4ef; --pt-chart-axis: #56637a; --pt-chart-cur: #c2410c;
  --pt-hero-title: #1e3a8a;
  --pt-mission-a: #0f2557; --pt-mission-b: #1d3a8a; --pt-mission-ink: #f1f6ff; --pt-mission-soft: #c6d6fb;
  /* tile colors: lightness for background / text, saturation */
  --pt-tile-sat: 78%; --pt-tile-bgl: 90%; --pt-tile-inkl: 17%; --pt-tile-bdl: 40%;
  --pt-tile-neutral: #dfe6f1;
}
:root[data-theme="dark"] {
  --pt-bg: #0b1220;
  --pt-surface: #131c2f;
  --pt-surface-2: #1a2540;
  --pt-border: #2c3a57;
  --pt-border-strong: #71819f;
  --pt-text: #f1f5f9;
  --pt-text-2: #cbd5e5;
  --pt-muted: #9fb0c9;
  --pt-accent: #3560d8;
  --pt-accent-hover: #2a50be;
  --pt-accent-ink: #ffffff;
  --pt-accent-soft: #1b2b55;
  --pt-accent-text: #bcd0ff;
  --pt-focus: #9fc0ff;
  --pt-good: #a7f0c1; --pt-good-bg: #0e2f1d; --pt-good-bd: #237a45; --pt-good-ring: #4ade80; --pt-good-ring-ink: #04210f;
  --pt-bad: #ffc7c7; --pt-bad-bg: #3a1212; --pt-bad-bd: #8f2d2d;
  --pt-warn-bg: #3a2c0a; --pt-warn-bd: #9b7420; --pt-warn-text: #fde3a4;
  --pt-shadow: 0 8px 26px rgba(0, 0, 0, .35);
  --pt-selected: #ffffff;
  --pt-cmp: #a5b4fc;
  --pt-mission: #fbbf24; --pt-mission-glow: rgba(251, 191, 36, .5);
  --pt-spot: #5eead4;
  --pt-electron: #fbbf24; --pt-electron-line: #fff3c4;
  --pt-electron-core: #7cb0ff; --pt-electron-core-line: #dbe8ff;
  --pt-orbit: #47608f; --pt-orbit-valence: #fbbf24;
  --pt-nucleus: #3b6ce0; --pt-nucleus-line: #c9dafc;
  --pt-chart-line: #86aaff; --pt-chart-grid: #263453; --pt-chart-axis: #9fb0c9; --pt-chart-cur: #fdba74;
  --pt-hero-title: #cfe0ff;
  --pt-mission-a: #0a1a45; --pt-mission-b: #1b2f75; --pt-mission-ink: #f1f6ff; --pt-mission-soft: #bcd0ff;
  --pt-tile-sat: 42%; --pt-tile-bgl: 21%; --pt-tile-inkl: 93%; --pt-tile-bdl: 62%;
  --pt-tile-neutral: #2a3550;
}

/* ---------- base ---------- */
body { background: var(--pt-bg); font-family: Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; -webkit-font-smoothing: antialiased; }
.pt-app { max-width: 1500px; margin: 0 auto; padding: 1rem 1.25rem 3rem; color: var(--pt-text); }
.pt-app button, .pt-app select, .pt-app input { font: inherit; color: inherit; }
.pt-app code { font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; }
.pt-app :focus-visible { outline: 3px solid var(--pt-focus); outline-offset: 2px; }
.pt-app [hidden] { display: none; }
.pt-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pt-card { background: var(--pt-surface); border: 1px solid var(--pt-border); border-radius: 18px; box-shadow: var(--pt-shadow); }

/* ---------- progress ---------- */

.pt-progress-wrap { position: relative; margin-bottom: 1rem; display: flex; align-items: center; gap: .6rem; }
.pt-progress-wrap > .pt-progress { flex: 1; min-width: 0; }
.pt-ab-slot { display: inline-flex; align-items: center; }
.pt-ab-slot:empty { display: none; }
.pt-progress { display: flex; align-items: center; gap: .8rem; width: 100%; min-height: 44px; text-align: left; background: var(--pt-surface); border: 1px solid var(--pt-border); border-radius: 14px; padding: .55rem .9rem; cursor: pointer; }
.pt-progress-label { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--pt-muted); white-space: nowrap; }
.pt-progress-track { height: 8px; flex: 1; background: var(--pt-surface-2); border: 1px solid var(--pt-border); border-radius: 99px; overflow: hidden; }
.pt-progress-track i { display: block; height: 100%; width: 4%; background: linear-gradient(90deg, #2563eb, #7c3aed); border-radius: 99px; }
.pt-progress strong { font-size: .8rem; color: var(--pt-accent-text); white-space: nowrap; }
.pt-progress-caret { color: var(--pt-muted); font-size: .8rem; }
.pt-progress-panel { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); max-width: 520px; padding: 1rem 1.1rem; background: var(--pt-surface); border: 1px solid var(--pt-border-strong); border-radius: 14px; box-shadow: var(--pt-shadow); }
.pt-progress-panel h2 { font-size: .9rem; margin-bottom: .5rem; }
.pt-progress-panel ul { list-style: none; display: grid; gap: .55rem; }
.pt-progress-panel li { display: flex; gap: .6rem; align-items: flex-start; font-size: .82rem; }
.pt-progress-panel li small { display: block; color: var(--pt-muted); font-size: .74rem; margin-top: .1rem; }
.pt-progress-panel em { font-style: normal; color: var(--pt-muted); font-weight: 700; }
.pt-check { flex: 0 0 20px; height: 20px; border-radius: 50%; border: 2px solid var(--pt-border-strong); display: grid; place-items: center; font-size: .7rem; font-weight: 900; color: var(--pt-accent-ink); }
.pt-progress-panel li.done .pt-check { background: var(--pt-good-ring); border-color: var(--pt-good-ring); color: var(--pt-good-ring-ink); }
.pt-progress-note { margin-top: .7rem; font-size: .72rem; color: var(--pt-muted); }

/* ---------- tabs ---------- */
.pt-tabs { display: flex; gap: .45rem; flex-wrap: wrap; margin-bottom: 1rem; }
.pt-tab { min-height: 44px; border: 1px solid var(--pt-border); border-radius: 12px; padding: .6rem 1rem; background: var(--pt-surface); color: var(--pt-text-2); font-weight: 700; cursor: pointer; }
.pt-tab:hover { border-color: var(--pt-accent); }
.pt-tab.active { background: var(--pt-accent); border-color: var(--pt-accent); color: var(--pt-accent-ink); }
.pt-tab .lbl-short { display: none; }
@media (max-width: 680px) { .pt-tab .lbl-short { display: inline; } }
.pt-pane { display: none; }
.pt-pane.active { display: block; }

/* ---------- buttons and form controls ---------- */
.pt-btn { min-height: 44px; border: 1px solid var(--pt-border-strong); background: var(--pt-surface); color: var(--pt-text-2); border-radius: 10px; padding: .5rem .85rem; font-weight: 700; font-size: .82rem; cursor: pointer; }
.pt-btn:hover:not(:disabled) { border-color: var(--pt-accent); background: var(--pt-accent-soft); }
.pt-btn.on, .pt-btn.primary { color: var(--pt-accent-ink); border-color: var(--pt-accent); background: var(--pt-accent); }
.pt-btn.primary:hover:not(:disabled), .pt-btn.on:hover:not(:disabled) { background: var(--pt-accent-hover); }
.pt-btn:disabled { opacity: .5; cursor: not-allowed; }
.pt-seg { display: inline-flex; }
.pt-seg .pt-btn { border-radius: 0; margin-left: -1px; }
.pt-seg .pt-btn:first-child { border-radius: 10px 0 0 10px; margin-left: 0; }
.pt-seg .pt-btn:last-child { border-radius: 0 10px 10px 0; }
.pt-seg-sm .pt-btn { min-height: 44px; font-size: .78rem; }
.pt-mini { position: relative; border: 1px solid var(--pt-border-strong); background: var(--pt-surface); color: var(--pt-text-2); width: 26px; height: 26px; border-radius: 8px; cursor: pointer; font-size: .8rem; line-height: 1; padding: 0; margin-left: .35rem; }
.pt-mini::after { content: ""; position: absolute; inset: -9px; }
.pt-mini.txt { width: auto; padding: 0 .55rem; font-size: .72rem; font-weight: 700; margin-left: auto; height: 30px; }
.pt-mini:hover { border-color: var(--pt-accent); background: var(--pt-accent-soft); }
.pt-toolbar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .75rem; background: var(--pt-surface); border: 1px solid var(--pt-border); border-radius: 15px; margin-bottom: 1rem; }
.pt-toolbar input, .pt-toolbar select, .pt-mission-tier select, .pt-chart-pick select { min-height: 44px; border: 1px solid var(--pt-border-strong); border-radius: 10px; background: var(--pt-surface); color: var(--pt-text); padding: .4rem .7rem; font-size: .85rem; }
.pt-search { min-width: 220px; flex: 1; }
.pt-tool-label { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--pt-muted); }

/* ---------- missions ---------- */
.pt-mission { margin-bottom: 1rem; border-radius: 16px; background: linear-gradient(100deg, var(--pt-mission-a), var(--pt-mission-b)); color: var(--pt-mission-ink); border: 1px solid transparent; }
.pt-mission-head { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; padding: .8rem 1rem; }
.pt-mission-icon { font-size: 1.6rem; }
.pt-mission-titles { flex: 1 1 220px; min-width: 0; }
.pt-mission-titles strong, .pt-mission-titles small { display: block; }
.pt-mission-titles strong { font-size: .95rem; }
.pt-mission-titles small { font-size: .78rem; color: var(--pt-mission-soft); line-height: 1.4; }
.pt-mission-stats { display: flex; gap: .4rem; }
.pt-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .6rem; border-radius: 99px; background: rgba(255, 255, 255, .14); color: var(--pt-mission-ink); font-size: .76rem; font-weight: 700; white-space: nowrap; }
.pt-mission-tier { display: flex; align-items: center; gap: .4rem; font-size: .76rem; font-weight: 700; color: var(--pt-mission-soft); }
.pt-mission-tier select { color: var(--pt-text); background: var(--pt-surface); }
.pt-mission .pt-btn { color: var(--pt-text); background: var(--pt-surface); border-color: transparent; }
.pt-mission .pt-btn:hover:not(:disabled) { background: var(--pt-accent-soft); }
.pt-mission .pt-btn.primary { background: #ffe08a; color: #3b2a00; }
.pt-mission .pt-btn.primary:hover:not(:disabled) { background: #ffd35c; }
.pt-mission-body { padding: 0 1rem 1rem; }
.pt-mission .pt-mtask .pt-btn { border-color: var(--pt-border-strong); }
.pt-mission .pt-mtask .pt-btn.primary { background: var(--pt-accent); color: var(--pt-accent-ink); border-color: var(--pt-accent); }
.pt-mission .pt-mtask .pt-btn.primary:hover:not(:disabled) { background: var(--pt-accent-hover); }
.pt-mission .pt-mtask .pt-btn:hover:not(:disabled) { border-color: var(--pt-accent); }
.pt-mission-status { margin: 0 1rem 1rem; padding: .65rem .85rem; border-radius: 10px; font-size: .86rem; line-height: 1.5; border: 1px solid var(--pt-border); background: var(--pt-surface); color: var(--pt-text-2); }
.pt-mission-status:empty { display: none; }
.pt-mission-status.bad { background: var(--pt-bad-bg); border-color: var(--pt-bad-bd); color: var(--pt-bad); }
.pt-mission-status.good { background: var(--pt-good-bg); border-color: var(--pt-good-bd); color: var(--pt-good); }
.pt-mission-status strong { display: block; margin-bottom: .1rem; }

.pt-mtask { background: var(--pt-surface); color: var(--pt-text); border-radius: 14px; padding: 1rem; display: grid; gap: .8rem; }
.pt-mtask-top { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.pt-tier { display: inline-flex; padding: .18rem .55rem; border-radius: 99px; font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; border: 1px solid currentColor; }
.pt-tier.explorer { color: #0f6b3a; } .pt-tier.analyst { color: #1d4ed8; } .pt-tier.ap { color: #9a3412; }
:root[data-theme="dark"] .pt-tier.explorer { color: #86efac; } :root[data-theme="dark"] .pt-tier.analyst { color: #93c5fd; } :root[data-theme="dark"] .pt-tier.ap { color: #fdba74; }
.pt-mtask h3 { font-size: 1.02rem; }
.pt-steps-nav { display: flex; gap: .3rem; margin-left: auto; }
.pt-steps-nav span { width: 26px; height: 8px; border-radius: 99px; background: var(--pt-border); }
.pt-steps-nav span.done { background: var(--pt-good-ring); }
.pt-steps-nav span.cur { background: var(--pt-accent); }
.pt-mprompt { font-size: .95rem; line-height: 1.55; }
.pt-mprompt b { color: var(--pt-accent-text); }
.pt-clues { list-style: none; display: grid; gap: .4rem; }
.pt-clues li { padding: .55rem .75rem; border-radius: 10px; background: var(--pt-surface-2); border: 1px solid var(--pt-border); font-size: .88rem; line-height: 1.45; }
.pt-clues li span { font-weight: 800; color: var(--pt-accent-text); margin-right: .35rem; }
.pt-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.pt-mchip { min-height: 44px; display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .8rem; border-radius: 12px; border: 2px solid var(--pt-border-strong); background: var(--pt-surface); color: var(--pt-text); font-weight: 800; cursor: pointer; }
.pt-mchip small { font-weight: 600; color: var(--pt-muted); }
.pt-mchip:hover:not(:disabled) { border-color: var(--pt-accent); }
.pt-mchip.used { opacity: .45; }
.pt-mchip.picked { border-color: var(--pt-good-ring); background: var(--pt-good-bg); }
.pt-slots { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.pt-slot { min-width: 74px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: .3rem; padding: .3rem .6rem; border: 2px dashed var(--pt-border-strong); border-radius: 12px; font-weight: 800; color: var(--pt-muted); background: var(--pt-surface-2); }
.pt-slot.filled { border-style: solid; border-color: var(--pt-accent); color: var(--pt-text); background: var(--pt-accent-soft); }
.pt-slot-cap { font-size: .72rem; font-weight: 800; color: var(--pt-muted); text-transform: uppercase; letter-spacing: .05em; }
.pt-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .5rem; }
.pt-choice { min-height: 44px; text-align: left; padding: .6rem .8rem; border: 2px solid var(--pt-border-strong); border-radius: 12px; background: var(--pt-surface); color: var(--pt-text); font-weight: 700; font-size: .86rem; line-height: 1.4; cursor: pointer; }
.pt-choice:hover:not(:disabled) { border-color: var(--pt-accent); background: var(--pt-accent-soft); }
.pt-choice.wrong { border-color: var(--pt-bad); background: var(--pt-bad-bg); color: var(--pt-bad); }
.pt-choice.right { border-color: var(--pt-good-ring); background: var(--pt-good-bg); color: var(--pt-good); }
.pt-textrow { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.pt-textrow input { min-height: 44px; min-width: 190px; border: 2px solid var(--pt-border-strong); border-radius: 10px; padding: .4rem .7rem; background: var(--pt-surface); color: var(--pt-text); font-size: 1rem; font-family: "SFMono-Regular", Consolas, monospace; }
.pt-mact { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.pt-hintbox { padding: .6rem .8rem; border-radius: 10px; background: var(--pt-warn-bg); border: 1px solid var(--pt-warn-bd); color: var(--pt-warn-text); font-size: .85rem; line-height: 1.5; }
.pt-mission-done { text-align: center; padding: 1.2rem 1rem; display: grid; gap: .5rem; justify-items: center; }
.pt-mission-done svg { width: 64px; height: 64px; }
.pt-mission-done .ring { fill: none; stroke: var(--pt-good-ring); stroke-width: 4; }
.pt-mission-done .tick { fill: none; stroke: var(--pt-good-ring); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.pt-mission-done h3 { font-size: 1.15rem; color: var(--pt-good); }
.pt-mission-done p { max-width: 560px; color: var(--pt-text-2); font-size: .9rem; line-height: 1.55; }
.pt-badge-new { display: inline-flex; gap: .4rem; padding: .3rem .7rem; border-radius: 99px; background: var(--pt-warn-bg); border: 1px solid var(--pt-warn-bd); color: var(--pt-warn-text); font-weight: 800; font-size: .8rem; }
.pt-mission .pt-mission-log .pt-btn { border-color: var(--pt-border-strong); }
.pt-mission-log { margin: 0 1rem 1rem; padding: 1rem; border-radius: 14px; background: var(--pt-surface); color: var(--pt-text); display: grid; gap: 1rem; }
.pt-log-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.pt-mission-log h3 { font-size: .85rem; margin-bottom: .4rem; }
.pt-log-types { list-style: none; display: grid; gap: .25rem; font-size: .8rem; }
.pt-log-types li { display: flex; justify-content: space-between; gap: .5rem; }
.pt-badges { display: flex; flex-wrap: wrap; gap: .4rem; }
.pt-bdg { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .6rem; border-radius: 99px; font-size: .76rem; font-weight: 700; border: 1px solid var(--pt-border-strong); color: var(--pt-muted); background: var(--pt-surface-2); }
.pt-bdg.got { background: var(--pt-warn-bg); border-color: var(--pt-warn-bd); color: var(--pt-warn-text); }
.pt-log-table { width: 100%; border-collapse: collapse; font-size: .76rem; }
.pt-log-table th, .pt-log-table td { text-align: left; padding: .3rem .4rem; border-bottom: 1px solid var(--pt-border); }
.pt-log-table th { color: var(--pt-muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; }
.pt-spot { display: flex; align-items: center; gap: .8rem; justify-content: space-between; flex-wrap: wrap; padding: .6rem .9rem; margin-bottom: 1rem; border-radius: 12px; background: var(--pt-surface); border: 2px solid var(--pt-spot); font-size: .85rem; font-weight: 700; }

/* ---------- table ---------- */
.pt-explore-layout { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 1rem; align-items: start; }
.pt-table-card { padding: 1rem; min-width: 0; }
.pt-table-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .8rem; }
.pt-table-head h2 { font-size: 1.05rem; }
.pt-table-head p { font-size: .78rem; color: var(--pt-muted); margin-top: .15rem; }
.pt-pill { display: inline-flex; padding: .3rem .6rem; border-radius: 99px; background: var(--pt-accent-soft); color: var(--pt-accent-text); font-size: .72rem; font-weight: 800; white-space: nowrap; }
.pt-table-scroll { overflow-x: auto; container-type: inline-size; container-name: ptt; padding: 4px 2px 6px; overscroll-behavior-x: contain; }
.pt-table {
  display: grid; gap: 3px; min-width: 880px; position: relative;
  grid-template-columns: 30px repeat(18, minmax(44px, 1fr));
  grid-template-rows: 28px repeat(7, minmax(54px, auto)) 12px repeat(2, minmax(54px, auto));
}
.pt-corner, .pt-group-label, .pt-period-label { position: sticky; z-index: 6; background: var(--pt-surface); }
.pt-corner { left: 0; top: 0; z-index: 8; grid-column: 1; grid-row: 1; }
.pt-group-label { top: 0; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 3px; font-size: .74rem; font-weight: 800; color: var(--pt-muted); }
.pt-period-label { left: 0; display: flex; align-items: center; justify-content: center; font-size: .74rem; font-weight: 800; color: var(--pt-muted); }
.pt-f-label { display: flex; align-items: center; justify-content: flex-end; padding-right: .5rem; text-align: right; font-size: .68rem; font-weight: 800; color: var(--pt-muted); line-height: 1.15; }
.pt-f-label small { display: block; font-weight: 600; }
.pt-table-note { margin-top: .7rem; font-size: .76rem; color: var(--pt-muted); line-height: 1.5; }

/* tile colors: hue comes from the mode, lightness from the theme tokens */
.pt-tile {
  --h: 215; --sk: 1;
  --bg: hsl(var(--h) calc(var(--pt-tile-sat) * var(--sk)) var(--pt-tile-bgl));
  --ink: hsl(var(--h) calc(70% * var(--sk) + 10%) var(--pt-tile-inkl));
  --bd: hsl(var(--h) calc(55% * var(--sk) + 8%) var(--pt-tile-bdl));
  position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;
  min-height: 54px; padding: 4px 5px 4px; text-align: left; cursor: pointer;
  border: 1.5px solid var(--bd); border-radius: 8px; background: var(--bg); color: var(--ink);
}
.pt-tile .t-z { font-size: .66rem; font-weight: 700; line-height: 1; }
.pt-tile .t-sym { font-size: 1.2rem; font-weight: 800; line-height: 1; letter-spacing: -.01em; }
.pt-tile .t-name { display: none; font-size: .6rem; font-weight: 600; line-height: 1.1; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-tile .t-val { font-size: .66rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.pt-tile .t-val:empty { display: none; }
.pt-table[data-mode="standard"] .pt-tile[data-cat="alkali-metal"] { --h: 4; }
.pt-table[data-mode="standard"] .pt-tile[data-cat="alkaline-earth"] { --h: 32; }
.pt-table[data-mode="standard"] .pt-tile[data-cat="transition-metal"] { --h: 212; }
.pt-table[data-mode="standard"] .pt-tile[data-cat="post-transition-metal"] { --h: 218; --sk: .16; }
.pt-table[data-mode="standard"] .pt-tile[data-cat="metalloid"] { --h: 92; }
.pt-table[data-mode="standard"] .pt-tile[data-cat="nonmetal"] { --h: 140; }
.pt-table[data-mode="standard"] .pt-tile[data-cat="halogen"] { --h: 180; }
.pt-table[data-mode="standard"] .pt-tile[data-cat="noble-gas"] { --h: 272; }
.pt-table[data-mode="standard"] .pt-tile[data-cat="lanthanide"] { --h: 334; }
.pt-table[data-mode="standard"] .pt-tile[data-cat="actinide"] { --h: 306; }
.pt-table[data-mode="blocks"] .pt-tile[data-block="s"] { --h: 30; }
.pt-table[data-mode="blocks"] .pt-tile[data-block="p"] { --h: 180; }
.pt-table[data-mode="blocks"] .pt-tile[data-block="d"] { --h: 212; }
.pt-table[data-mode="blocks"] .pt-tile[data-block="f"] { --h: 334; }
.pt-table[data-mode="families"] .pt-tile { --h: var(--gh); }
.pt-table[data-mode="families"] .pt-tile[data-block="f"] { --sk: .14; }
.pt-table:not([data-trend="none"]) .pt-tile { --bd: var(--pt-border-strong); }
.pt-tile.no-data { background: repeating-linear-gradient(135deg, var(--pt-tile-neutral) 0 5px, var(--pt-surface) 5px 8px); color: var(--pt-text-2); }
.pt-table:not([data-trend="none"]) .pt-tile:not(.no-data) .t-val { font-size: .7rem; }
.pt-table:not([data-trend="none"]) .pt-tile .t-name { display: none; }

@container ptt (min-width: 1040px) {
  .pt-tile .t-sym { font-size: 1.3rem; }
  .pt-tile .t-name { display: block; }
  .pt-table:not([data-trend="none"]) .pt-tile .t-name { display: none; }
}

/* tile states. Each one uses a different mechanism so they can stack:
 *   hover/focus = lift and outline, selected = solid ring, compare = dashed inner frame + A/B badge,
 *   mission target = glow ring + star badge, mission picked = green ring + check, spotlight = teal ring */
.pt-tile:hover { transform: translateY(-2px); box-shadow: 0 8px 16px rgba(15, 23, 42, .28); z-index: 3; }
.pt-tile:focus-visible { outline: 3px solid var(--pt-focus); outline-offset: 2px; box-shadow: 0 0 0 2px var(--pt-surface); z-index: 9; }
.pt-tile.is-selected { outline: 3px solid var(--pt-selected); outline-offset: 1px; z-index: 5; }
.pt-tile.is-selected:focus-visible { outline-color: var(--pt-focus); outline-offset: 2px; box-shadow: 0 0 0 2px var(--pt-surface), 0 0 0 5px var(--pt-selected); }
.pt-tile.is-compare::after { content: ""; position: absolute; inset: 3px; border: 2px dashed var(--pt-cmp); border-radius: 5px; pointer-events: none; }
.pt-tile.is-target { box-shadow: 0 0 0 3px var(--pt-mission), 0 0 12px 3px var(--pt-mission-glow); z-index: 4; }
.pt-tile.is-picked { box-shadow: 0 0 0 3px var(--pt-good-ring); z-index: 4; }
.pt-tile.is-spot { box-shadow: 0 0 0 3px var(--pt-spot), 0 0 10px 2px var(--pt-spot); z-index: 4; }
.pt-tile.is-selected.is-target, .pt-tile.is-selected.is-picked, .pt-tile.is-selected.is-spot { outline-offset: 4px; }
.pt-tile.is-muted { opacity: .2; filter: saturate(.2); }
.pt-tile.is-dim { opacity: .4; }
.pt-tile.is-muted.is-selected, .pt-tile.is-dim.is-selected, .pt-tile.is-dim.is-compare { opacity: .9; }
.pt-tile.is-muted:focus-visible, .pt-tile.is-dim:focus-visible { opacity: 1; filter: none; }
.pt-tile .t-badge { position: absolute; display: grid; place-items: center; min-width: 15px; height: 15px; padding: 0 2px; border-radius: 99px; font-size: .62rem; font-weight: 900; line-height: 1; }
.pt-tile .t-badge:empty { display: none; }
.pt-tile .t-cmp { top: 2px; right: 2px; background: var(--pt-cmp); color: var(--pt-surface); }
.pt-tile .t-mis { bottom: 2px; right: 2px; background: var(--pt-mission); color: var(--pt-surface); }
.pt-tile.is-picked .t-mis { background: var(--pt-good-ring); color: var(--pt-good-ring-ink); }
.pt-tile.is-spot .t-mis { background: var(--pt-spot); color: var(--pt-surface); }

/* key (legend) inside the table's empty middle */
.pt-key { align-self: stretch; padding: .55rem .75rem; border: 1px solid var(--pt-border); border-radius: 12px; background: var(--pt-surface-2); display: grid; align-content: start; gap: .3rem; min-width: 0; }
.pt-key-title { font-size: .78rem; font-weight: 800; color: var(--pt-text); }
.pt-key-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .15rem .6rem; }
.pt-key-chip { display: flex; align-items: center; gap: .4rem; font-size: .7rem; font-weight: 600; color: var(--pt-text-2); }
.pt-key-chip i { width: 14px; height: 14px; border-radius: 4px; flex: 0 0 14px; border: 1.5px solid var(--kbd); background: var(--kbg); }
.pt-key-chip { --h: 215; --sk: 1; --kbg: hsl(var(--h) calc(var(--pt-tile-sat) * var(--sk)) var(--pt-tile-bgl)); --kbd: hsl(var(--h) calc(55% * var(--sk) + 8%) var(--pt-tile-bdl)); }
.pt-key-chip[data-cat="alkali-metal"] { --h: 4; } .pt-key-chip[data-cat="alkaline-earth"] { --h: 32; } .pt-key-chip[data-cat="transition-metal"] { --h: 212; }
.pt-key-chip[data-cat="post-transition-metal"] { --h: 218; --sk: .16; } .pt-key-chip[data-cat="metalloid"] { --h: 92; } .pt-key-chip[data-cat="nonmetal"] { --h: 140; }
.pt-key-chip[data-cat="halogen"] { --h: 180; } .pt-key-chip[data-cat="noble-gas"] { --h: 272; } .pt-key-chip[data-cat="lanthanide"] { --h: 334; } .pt-key-chip[data-cat="actinide"] { --h: 306; }
.pt-key-chip[data-block="s"] { --h: 30; } .pt-key-chip[data-block="p"] { --h: 180; } .pt-key-chip[data-block="d"] { --h: 212; } .pt-key-chip[data-block="f"] { --h: 334; }
.pt-key-ramp { height: 14px; border-radius: 4px; border: 1px solid var(--pt-border-strong); }
.pt-key-scale { display: flex; justify-content: space-between; gap: .5rem; font-size: .68rem; font-weight: 700; color: var(--pt-text-2); }
.pt-key-row { display: flex; align-items: center; gap: .4rem; font-size: .68rem; color: var(--pt-muted); }
.pt-key-nodata { width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--pt-border-strong); background: repeating-linear-gradient(135deg, var(--pt-tile-neutral) 0 3px, var(--pt-surface) 3px 5px); }
.pt-key-why { font-size: .7rem; color: var(--pt-text-2); line-height: 1.4; }
.pt-key-cols { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .8rem; align-items: center; }
.pt-key-main { display: grid; gap: .3rem; min-width: 0; }
.pt-key-arrows { width: 190px; height: 54px; }
.pt-key-arrows.none { font-size: .7rem; color: var(--pt-muted); }
.pt-arrow { stroke: var(--pt-text); stroke-width: 2.2; fill: none; }
.pt-arrow-head { fill: var(--pt-text); }
.pt-arrow-text { fill: var(--pt-text-2); font-size: 9.5px; font-weight: 700; }

/* ---------- element detail ---------- */
.pt-detail { padding: 1.1rem; position: sticky; top: 72px; max-height: calc(100vh - 88px); overflow-y: auto; overscroll-behavior: contain; }
.pt-detail-top { display: none; }
.pt-empty { padding: 1.5rem .5rem; color: var(--pt-muted); font-size: .9rem; line-height: 1.6; text-align: center; }
.pt-empty-emoji { font-size: 2rem; }
.pt-detail-kicker { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; color: var(--pt-accent-text); }
.pt-detail-title { display: flex; align-items: center; gap: .8rem; margin: .35rem 0 .7rem; }
.pt-symbol { --h: 215; --sk: 1; display: grid; place-items: center; flex: 0 0 68px; height: 68px; border-radius: 16px; font-size: 1.9rem; font-weight: 800; border: 2px solid hsl(var(--h) calc(55% * var(--sk) + 8%) var(--pt-tile-bdl)); background: hsl(var(--h) calc(var(--pt-tile-sat) * var(--sk)) var(--pt-tile-bgl)); color: hsl(var(--h) calc(70% * var(--sk) + 10%) var(--pt-tile-inkl)); }
.pt-symbol[data-cat="alkali-metal"] { --h: 4; } .pt-symbol[data-cat="alkaline-earth"] { --h: 32; } .pt-symbol[data-cat="transition-metal"] { --h: 212; }
.pt-symbol[data-cat="post-transition-metal"] { --h: 218; --sk: .16; } .pt-symbol[data-cat="metalloid"] { --h: 92; } .pt-symbol[data-cat="nonmetal"] { --h: 140; }
.pt-symbol[data-cat="halogen"] { --h: 180; } .pt-symbol[data-cat="noble-gas"] { --h: 272; } .pt-symbol[data-cat="lanthanide"] { --h: 334; } .pt-symbol[data-cat="actinide"] { --h: 306; }
.pt-detail-title h2 { font-size: 1.35rem; letter-spacing: -.02em; }
.pt-detail-title p { font-size: .78rem; color: var(--pt-muted); margin-top: .15rem; }
.pt-detail-actions { margin-bottom: .8rem; }
.pt-facts { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: .4rem 0; }
.pt-fact { padding: .55rem .65rem; background: var(--pt-surface-2); border: 1px solid var(--pt-border); border-radius: 10px; }
.pt-fact label { display: block; font-size: .64rem; color: var(--pt-muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 800; line-height: 1.2; }
.pt-fact strong { display: block; color: var(--pt-text); font-size: .88rem; margin-top: .15rem; line-height: 1.25; overflow-wrap: anywhere; }
.pt-fact small { display: block; font-size: .68rem; color: var(--pt-muted); margin-top: .1rem; }
.pt-note { color: var(--pt-text-2); font-size: .8rem; line-height: 1.55; margin: .3rem 0; }
.pt-section { border-top: 1px solid var(--pt-border); padding-top: .85rem; margin-top: .9rem; }
.pt-section h3 { font-size: .85rem; margin-bottom: .5rem; }
.pt-h3-sub { font-weight: 600; color: var(--pt-muted); font-size: .72rem; margin-left: .3rem; }
.pt-props { display: grid; gap: 0; }
.pt-prop { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: .6rem; padding: .45rem 0; border-bottom: 1px solid var(--pt-border); align-items: start; }
.pt-prop dt { font-size: .78rem; color: var(--pt-text-2); display: flex; align-items: flex-start; justify-content: space-between; gap: .4rem; line-height: 1.25; }
.pt-prop dt > span { flex: 1 1 auto; min-width: 0; padding-top: 3px; }
.pt-prop dt .pt-mini { flex: 0 0 26px; margin-left: 0; }
.pt-prop dd strong { font-size: .86rem; color: var(--pt-text); }
.pt-prop dd small { display: block; font-size: .7rem; color: var(--pt-muted); line-height: 1.4; margin-top: .1rem; }
.pt-prop.none dd strong { color: var(--pt-muted); }
.pt-src { margin-top: .5rem; font-size: .74rem; color: var(--pt-muted); }
.pt-src summary { cursor: pointer; font-weight: 700; min-height: 32px; display: flex; align-items: center; }
.pt-src p { line-height: 1.5; margin-top: .2rem; }
.pt-size-wrap svg, .pt-shell-visual svg { display: block; width: 100%; height: auto; }
.pt-size-svg { max-height: 150px; }
.pt-size-ref { fill: none; stroke: var(--pt-border-strong); stroke-width: 1.2; stroke-dasharray: 4 4; }
.pt-size-atom { fill: var(--pt-electron-core); fill-opacity: .55; stroke: var(--pt-electron-core-line); stroke-width: 2; }
.pt-size-atom.b { fill: var(--pt-electron); stroke: var(--pt-electron-line); }
.pt-size-atomt { fill: var(--pt-text); font-size: 13px; font-weight: 800; }
.pt-size-refl, .pt-svg-note { fill: var(--pt-muted); font-size: 9px; font-weight: 700; }
.pt-shell-visual { padding: .3rem; border: 1px solid var(--pt-border); border-radius: 16px; background: radial-gradient(circle at 50% 50%, var(--pt-surface-2) 0, var(--pt-surface) 75%); margin-top: .6rem; }
.pt-shell-svg { max-width: 330px; margin: 0 auto; overflow: visible; }
.pt-shell-visual.sm .pt-shell-svg { max-width: 220px; }
.pt-orbit { fill: none; stroke: var(--pt-orbit); stroke-width: 1.3; stroke-dasharray: 3 3; }
.pt-orbit.valence { stroke: var(--pt-orbit-valence); stroke-width: 1.8; stroke-dasharray: none; }
.pt-electron { fill: var(--pt-electron-core); stroke: var(--pt-electron-core-line); stroke-width: 1; }
.pt-electron.valence { fill: var(--pt-electron); stroke: var(--pt-electron-line); }
.pt-nucleus { fill: var(--pt-nucleus); stroke: var(--pt-nucleus-line); stroke-width: 2; }
.pt-nucleus-text { fill: #ffffff; font-size: 13px; font-weight: 800; text-anchor: middle; }
.pt-nucleus-z { fill: #dbe7ff; font-size: 7.5px; font-weight: 700; text-anchor: middle; }
.pt-shell-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; margin-top: .5rem; font-size: .72rem; color: var(--pt-text-2); }
.pt-lg { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; }
.pt-lg i { width: 11px; height: 11px; border-radius: 50%; background: var(--pt-electron-core); border: 1px solid var(--pt-electron-core-line); }
.pt-lg.val i { background: var(--pt-electron); border-color: var(--pt-electron-line); }
.pt-shell-summary { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .5rem; }
.pt-shell-summary span { padding: .25rem .5rem; border-radius: 8px; background: var(--pt-accent-soft); color: var(--pt-accent-text); font-size: .72rem; font-weight: 700; }
.pt-shell-summary span.val { background: var(--pt-warn-bg); color: var(--pt-warn-text); }
.pt-caption { font-size: .74rem; color: var(--pt-muted); line-height: 1.5; margin-top: .5rem; }
.pt-check-row { display: flex; align-items: center; gap: .5rem; margin-top: .6rem; min-height: 44px; font-size: .8rem; color: var(--pt-text-2); }
.pt-check-row input { width: 20px; height: 20px; }
.pt-orb-wrap { margin-top: .2rem; padding: .6rem; border: 1px solid var(--pt-border); border-radius: 12px; background: var(--pt-surface-2); overflow-x: auto; }
.pt-orbitals { display: flex; flex-wrap: wrap; gap: .7rem .8rem; align-items: flex-end; }
.pt-orb-core { align-self: center; padding: .25rem .5rem; border: 1px dashed var(--pt-border-strong); border-radius: 8px; font-weight: 800; font-size: .78rem; color: var(--pt-text-2); }
.pt-orb-core small { display: block; font-size: .6rem; font-weight: 600; color: var(--pt-muted); }
.pt-orb-sub { display: flex; flex-direction: column; align-items: center; gap: .2rem; }
.pt-orb-boxes { display: flex; }
.pt-orb-box { display: flex; align-items: center; justify-content: center; width: 26px; height: 30px; margin-left: -1px; border: 1.5px solid var(--pt-border-strong); background: var(--pt-surface); font-style: normal; }
.pt-orb-box b { font-size: .95rem; line-height: 1; color: var(--pt-text); font-weight: 800; }
.pt-orb-sub.valence .pt-orb-box { border-color: var(--pt-electron); background: var(--pt-warn-bg); }
.pt-orb-sub.valence .pt-orb-box b { color: var(--pt-warn-text); }
.pt-orb-label { font-size: .7rem; font-weight: 800; color: var(--pt-text-2); }
.pt-orb-label sup { font-size: .6rem; }
.pt-config-block { display: grid; gap: .45rem; margin-top: .7rem; }
.pt-config-label { display: block; font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--pt-muted); margin-bottom: .15rem; }
.pt-config { display: block; padding: .5rem .65rem; border-radius: 9px; background: var(--pt-surface-2); border: 1px solid var(--pt-border); font-size: .82rem; color: var(--pt-accent-text); overflow-wrap: anywhere; }
.pt-exc { margin-top: .6rem; padding: .6rem .75rem; border-radius: 10px; background: var(--pt-warn-bg); border: 1px solid var(--pt-warn-bd); color: var(--pt-warn-text); font-size: .78rem; line-height: 1.5; }
.pt-exc.pred { background: var(--pt-surface-2); border-color: var(--pt-border); color: var(--pt-text-2); }
.pt-exc code { font-size: .78rem; }
.pt-chart-pick { display: flex; flex-direction: column; gap: .25rem; font-size: .72rem; font-weight: 800; color: var(--pt-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .4rem; }
.pt-chart-pick select { text-transform: none; letter-spacing: 0; font-weight: 600; font-size: .82rem; }
.pt-chart { display: block; width: 100%; height: auto; margin-top: .5rem; }
.pt-grid-line { stroke: var(--pt-chart-grid); stroke-width: 1; }
.pt-axis-line { stroke: var(--pt-chart-axis); stroke-width: 1.2; }
.pt-tick { stroke: var(--pt-chart-axis); stroke-width: 1.2; }
.pt-axis { fill: var(--pt-chart-axis); font-size: 8.5px; font-weight: 600; }
.pt-axis-title { fill: var(--pt-text-2); font-size: 8.5px; font-weight: 700; }
.pt-line { fill: none; stroke: var(--pt-chart-line); stroke-width: 2; stroke-linejoin: round; }
.pt-pt { fill: var(--pt-chart-line); stroke: var(--pt-surface); stroke-width: 1.2; }
.pt-pt.est { fill: var(--pt-surface); stroke: var(--pt-chart-line); stroke-width: 1.6; }
.pt-pt.cur { fill: var(--pt-chart-cur); stroke: var(--pt-surface); }
.pt-pt-ring { fill: none; stroke: var(--pt-chart-cur); stroke-width: 1.8; }
.pt-pt-label { fill: var(--pt-text-2); font-size: 8.5px; font-weight: 700; text-anchor: middle; }
.pt-pt-label.cur { fill: var(--pt-chart-cur); font-size: 10px; font-weight: 800; }
.pt-nodata { fill: var(--pt-muted); font-size: 8.5px; font-weight: 700; }
.pt-nodata.cur { fill: var(--pt-chart-cur); }
.pt-bar { fill: var(--pt-chart-line); }
.pt-pes { fill: var(--pt-chart-line); fill-opacity: .25; stroke: var(--pt-chart-line); stroke-width: 2; }
.pt-key-facts { display: grid; gap: .65rem; }
.pt-fact-card { display: flex; align-items: flex-start; gap: .65rem; padding: .7rem .75rem; border: 1px solid var(--pt-border); border-radius: 12px; background: var(--pt-surface-2); }
.pt-fact-icon { display: grid; place-items: center; flex: 0 0 26px; height: 26px; border-radius: 8px; background: var(--pt-accent-soft); color: var(--pt-accent-text); font-weight: 900; }
.pt-fact-card strong { display: block; color: var(--pt-accent-text); font-size: .76rem; }
.pt-fact-card p { margin-top: .2rem; color: var(--pt-text-2); font-size: .78rem; line-height: 1.5; }

/* ---------- compare ---------- */
.pt-compare-panel { margin-top: 1rem; padding: 1.1rem; }
.pt-compare-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: .8rem; }
.pt-compare-head h2 { font-size: 1.1rem; }
.pt-compare-head p { font-size: .8rem; color: var(--pt-muted); }
.pt-compare-btns { display: flex; gap: .4rem; }
.pt-compare-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.pt-compare-col { padding: .8rem; border: 2px solid var(--pt-border); border-radius: 14px; }
.pt-compare-col.a { border-color: var(--pt-cmp); } .pt-compare-col.b { border-style: dashed; border-color: var(--pt-cmp); }
.pt-compare-name { display: flex; align-items: center; gap: .6rem; }
.pt-compare-name strong { display: block; font-size: .95rem; } .pt-compare-name small { color: var(--pt-muted); font-size: .72rem; }
.pt-compare-name .pt-mini { margin-left: auto; }
.pt-ab { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--pt-cmp); color: var(--pt-surface); font-weight: 900; }
.pt-verdict { margin-top: 1rem; padding: .9rem 1rem; border-radius: 14px; background: var(--pt-accent-soft); border: 1px solid var(--pt-border); }
.pt-verdict h3 { font-size: .9rem; margin-bottom: .3rem; color: var(--pt-accent-text); }
.pt-verdict p, .pt-verdict li { font-size: .85rem; line-height: 1.55; color: var(--pt-text); }
.pt-verdict ul { margin: .5rem 0 0 1.1rem; display: grid; gap: .3rem; }
.pt-verdict li.none { color: var(--pt-muted); }
.pt-compare-grid { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 1.2rem; margin-top: 1rem; }
.pt-compare-grid h3 { font-size: .85rem; margin-bottom: .5rem; }
.pt-compare-deltas { display: grid; gap: .8rem; }
.pt-delta-label { display: flex; justify-content: space-between; gap: .5rem; font-size: .8rem; font-weight: 800; }
.pt-delta-d { color: var(--pt-accent-text); font-weight: 800; }
.pt-delta-line { display: grid; grid-template-columns: 26px minmax(0, 1fr) minmax(90px, auto); align-items: center; gap: .5rem; margin-top: .25rem; font-size: .76rem; }
.pt-delta-line b { text-align: center; }
.pt-delta-line span:last-child { font-variant-numeric: tabular-nums; color: var(--pt-text-2); text-align: right; }
.pt-bar-row { display: flex; height: 14px; background: var(--pt-surface-2); border-radius: 4px; overflow: hidden; border: 1px solid var(--pt-border); }
.pt-bar-zero { display: block; height: 100%; flex: 0 0 auto; }
.pt-delta-bar { display: block; height: 100%; flex: 0 0 auto; }
.pt-delta-bar.a { background: var(--pt-cmp); }
.pt-delta-bar.b { background: var(--pt-electron); }
.pt-delta-bar.neg { opacity: .55; }
.pt-delta.none .pt-delta-note { margin-top: .2rem; font-size: .76rem; color: var(--pt-muted); line-height: 1.45; }

/* ---------- learn ---------- */
.pt-learn-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .85rem; margin-bottom: 1rem; }
.pt-learn-card { padding: 1.1rem; cursor: pointer; text-align: left; color: var(--pt-text); }
.pt-learn-card:hover { border-color: var(--pt-accent); }
.pt-learn-card.active { border: 2px solid var(--pt-accent); background: var(--pt-accent-soft); }
.pt-learn-icon { display: block; font-size: 1.8rem; }
.pt-learn-card strong { display: block; font-size: .95rem; margin: .4rem 0 .3rem; }
.pt-learn-card small { display: block; font-size: .78rem; color: var(--pt-muted); line-height: 1.5; }
.pt-lesson { padding: 1.3rem; }
.pt-lesson h2 { font-size: 1.3rem; color: var(--pt-hero-title); margin-bottom: .45rem; }
.pt-lesson-intro { color: var(--pt-text-2); line-height: 1.65; font-size: .92rem; max-width: 880px; }
.pt-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .75rem; margin-top: 1rem; }
.pt-step { padding: .9rem; border-radius: 12px; background: var(--pt-surface-2); border: 1px solid var(--pt-border); }
.pt-step .num { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--pt-accent-soft); color: var(--pt-accent-text); font-size: .75rem; font-weight: 900; margin-bottom: .45rem; border: 1px solid var(--pt-accent); }
.pt-step h3 { font-size: .86rem; margin-bottom: .25rem; }
.pt-step p { font-size: .8rem; color: var(--pt-text-2); line-height: 1.55; }
.pt-callout { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: 1rem; padding: .85rem 1rem; border-radius: 12px; background: var(--pt-accent-soft); border: 1px solid var(--pt-border); color: var(--pt-text); font-size: .85rem; line-height: 1.55; }
.pt-ap { margin-top: 1rem; border: 1px solid var(--pt-warn-bd); border-radius: 12px; background: var(--pt-warn-bg); color: var(--pt-warn-text); }
.pt-ap summary { cursor: pointer; padding: .8rem 1rem; font-weight: 800; font-size: .88rem; min-height: 44px; display: flex; align-items: center; }
.pt-ap p { padding: 0 1rem 1rem; font-size: .84rem; line-height: 1.65; }
.pt-lesson-foot { margin-top: 1rem; }

/* ---------- quiz ---------- */
.pt-level { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .85rem 1rem; margin-bottom: 1rem; background: var(--pt-surface); border: 1px solid var(--pt-border); border-radius: 15px; }
.pt-level-copy strong { display: block; font-size: .92rem; }
.pt-level-copy span { display: block; font-size: .78rem; color: var(--pt-muted); margin-top: .1rem; max-width: 620px; line-height: 1.45; }
.pt-quiz-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 1rem; align-items: start; }
.pt-quiz-menu { padding: .95rem; position: sticky; top: 72px; }
.pt-quiz-menu h2 { font-size: .92rem; margin-bottom: .55rem; }
.pt-quiz-option { display: flex; justify-content: space-between; align-items: center; gap: .5rem; width: 100%; min-height: 48px; border: 1px solid var(--pt-border); background: var(--pt-surface); padding: .5rem .7rem; border-radius: 10px; color: var(--pt-text-2); font-weight: 700; font-size: .82rem; cursor: pointer; text-align: left; margin: .3rem 0; }
.pt-quiz-option:hover { border-color: var(--pt-accent); }
.pt-quiz-option.active { background: var(--pt-accent-soft); border-color: var(--pt-accent); color: var(--pt-accent-text); }
.pt-quiz-option small { font-size: .68rem; font-weight: 600; color: var(--pt-muted); text-align: right; line-height: 1.3; }
.pt-quiz-menu p { font-size: .74rem; color: var(--pt-muted); line-height: 1.5; margin-top: .8rem; }
.pt-quiz-content { padding: 1.3rem; min-width: 0; }
.pt-quiz-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.pt-quiz-top h2 { font-size: 1.15rem; }
.pt-lvl-tag { display: inline-flex; margin-left: .5rem; padding: .15rem .55rem; border-radius: 99px; font-size: .66rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; background: var(--pt-accent-soft); color: var(--pt-accent-text); border: 1px solid var(--pt-accent); vertical-align: middle; }
.pt-quiz-score { font-size: .78rem; color: var(--pt-muted); }
.pt-quiz-score strong { color: var(--pt-accent-text); font-size: 1rem; }
.pt-quiz-progress { height: 8px; background: var(--pt-surface-2); border: 1px solid var(--pt-border); border-radius: 99px; overflow: hidden; margin: .7rem 0 1.1rem; }
.pt-quiz-progress div { height: 100%; background: linear-gradient(90deg, #06b6d4, #2563eb); }
.pt-q-kicker { font-size: .72rem; font-weight: 800; color: var(--pt-accent-text); text-transform: uppercase; letter-spacing: .06em; }
.pt-question { font-size: 1.1rem; font-weight: 800; line-height: 1.45; margin: .35rem 0 1rem; }
.pt-figure { margin: 0 0 1rem; padding: .6rem; border: 1px solid var(--pt-border); border-radius: 12px; background: var(--pt-surface-2); max-width: 460px; overflow-x: auto; }
.pt-figure figcaption { font-size: .72rem; color: var(--pt-muted); margin-top: .3rem; }
.pt-table-data { border-collapse: collapse; font-size: .82rem; margin: 0 auto; }
.pt-table-data th, .pt-table-data td { padding: .3rem .7rem; border: 1px solid var(--pt-border-strong); text-align: center; font-variant-numeric: tabular-nums; }
.pt-table-data th { background: var(--pt-surface); color: var(--pt-text-2); }
.pt-answers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.pt-answer { display: flex; gap: .6rem; align-items: flex-start; min-height: 52px; padding: .75rem .85rem; text-align: left; border: 2px solid var(--pt-border-strong); background: var(--pt-surface); border-radius: 12px; color: var(--pt-text); font-weight: 700; font-size: .88rem; line-height: 1.45; cursor: pointer; }
.pt-answer .k { flex: 0 0 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--pt-surface-2); border: 1px solid var(--pt-border-strong); font-size: .72rem; font-weight: 800; color: var(--pt-text-2); }
.pt-answer:hover:not(:disabled) { border-color: var(--pt-accent); background: var(--pt-accent-soft); }
.pt-answer:disabled { cursor: default; }
.pt-answer.correct { border-color: var(--pt-good-ring); background: var(--pt-good-bg); color: var(--pt-good); }
.pt-answer.wrong { border-color: var(--pt-bad); background: var(--pt-bad-bg); color: var(--pt-bad); }
.pt-answer.correct .k::before { content: "✓"; } .pt-answer.wrong .k::before { content: "✗"; }
.pt-answer.correct .k, .pt-answer.wrong .k { font-size: 0; }
.pt-answer.correct .k::before, .pt-answer.wrong .k::before { font-size: .8rem; }
.pt-feedback-slot { min-height: 9.5rem; margin-top: 1rem; }
.pt-feedback { padding: .85rem 1rem; border-radius: 12px; font-size: .86rem; line-height: 1.6; border: 1px solid var(--pt-border); }
.pt-feedback.good { background: var(--pt-good-bg); color: var(--pt-good); border-color: var(--pt-good-bd); }
.pt-feedback.bad { background: var(--pt-bad-bg); color: var(--pt-bad); border-color: var(--pt-bad-bd); }
.pt-feedback .principle { display: block; margin-top: .35rem; font-size: .8rem; }
.pt-quiz-actions { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .8rem; }
.pt-complete { padding: 1rem .5rem; display: grid; gap: 1rem; }
.pt-score-head { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.pt-big-score { font-size: 3.2rem; font-weight: 800; color: var(--pt-accent-text); line-height: 1; }
.pt-complete h2 { font-size: 1.2rem; }
.pt-complete p { color: var(--pt-text-2); font-size: .9rem; line-height: 1.55; }
.pt-stats { display: flex; gap: .65rem; flex-wrap: wrap; }
.pt-stat { padding: .55rem .85rem; border-radius: 10px; background: var(--pt-surface-2); border: 1px solid var(--pt-border); font-size: .74rem; color: var(--pt-muted); }
.pt-stat strong { display: block; color: var(--pt-text); font-size: 1.1rem; }
.pt-result-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.pt-result-box { padding: .9rem 1rem; border: 1px solid var(--pt-border); border-radius: 12px; background: var(--pt-surface-2); }
.pt-result-box h3 { font-size: .88rem; margin-bottom: .6rem; }
.pt-obj { display: grid; grid-template-columns: 90px minmax(0, 1fr) 46px; align-items: center; gap: .5rem; font-size: .78rem; margin: .4rem 0; }
.pt-obj .track { height: 10px; border-radius: 99px; background: var(--pt-surface); border: 1px solid var(--pt-border); overflow: hidden; }
.pt-obj .fill { display: block; height: 100%; background: var(--pt-good-ring); }
.pt-obj .fill.low { background: var(--pt-mission); }
.pt-obj b { text-align: right; font-variant-numeric: tabular-nums; }
.pt-obj.none { color: var(--pt-muted); }
.pt-missed { list-style: none; display: grid; gap: .5rem; }
.pt-missed li { display: flex; gap: .5rem; align-items: center; justify-content: space-between; flex-wrap: wrap; font-size: .8rem; line-height: 1.4; }
.pt-missed .btn-row { display: flex; gap: .35rem; flex-wrap: wrap; }
.pt-missed .pt-btn { min-height: 44px; font-size: .74rem; }
.pt-result-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
/* .pt-app button { color/font: inherit } is more specific than the shared turn-in button's own class: restore its look */
.pt-app button.lgt-btn { color: #fff; font: 700 14px/1.2 "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; }
.pt-turnin-live { margin: 0 0 .8rem; }
.pt-turnhold { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.pt-turn-hint { margin: 0 0 .8rem; }
.pt-turnin { padding: 1rem 1.1rem; border: 2px dashed var(--pt-border-strong); border-radius: 14px; background: var(--pt-surface); }
.pt-turnin h3 { font-size: .95rem; margin-bottom: .2rem; }
.pt-turnin > p { font-size: .78rem; color: var(--pt-muted); margin-bottom: .7rem; }
.pt-turnin-name { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .7rem; }
.pt-turnin-name input { flex: 1 1 220px; min-height: 44px; border: 1px solid var(--pt-border-strong); border-radius: 10px; padding: .4rem .7rem; background: var(--pt-surface); color: var(--pt-text); font-size: .9rem; }
.pt-turnin-sheet { padding: .8rem 1rem; border-radius: 10px; background: var(--pt-surface-2); border: 1px solid var(--pt-border); font-size: .84rem; line-height: 1.7; }
.pt-turnin-sheet .code { display: inline-block; margin-top: .3rem; padding: .25rem .6rem; border-radius: 8px; background: var(--pt-selected); color: var(--pt-surface); font-family: "SFMono-Regular", Consolas, monospace; font-weight: 800; letter-spacing: .06em; font-size: 1rem; }
.pt-turnin-btns { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .7rem; }
.pt-copied { font-size: .78rem; color: var(--pt-good); font-weight: 700; }

/* mobile "details" shortcut */
.pt-jump { position: fixed; right: 14px; bottom: 16px; z-index: 40; min-height: 48px; padding: .6rem 1.1rem; border: 0; border-radius: 99px; background: var(--pt-accent); color: var(--pt-accent-ink); font-weight: 800; box-shadow: 0 8px 22px rgba(0, 0, 0, .35); cursor: pointer; }

/* ---------- responsive ---------- */
@media (max-width: 1050px) {
  .pt-explore-layout { grid-template-columns: 1fr; }
  .pt-detail { position: static; max-height: none; overflow: visible; }
  .pt-detail-top { display: block; margin-bottom: .5rem; }
  .pt-back { min-height: 44px; padding: .4rem .8rem; border: 1px solid var(--pt-border-strong); border-radius: 10px; background: var(--pt-surface); color: var(--pt-text-2); font-weight: 700; cursor: pointer; }
  .pt-quiz-menu { position: static; }
  .pt-learn-grid { grid-template-columns: repeat(2, 1fr); }
  .pt-compare-grid { grid-template-columns: 1fr; }
  .pt-table-scroll { max-height: min(82vh, 700px); overflow: auto; }
}
@media (max-width: 680px) {
  .pt-app { padding: .7rem .65rem 2rem; }
  .pt-progress-wrap, .pt-tabs { margin-bottom: .6rem; }
  .pt-toolbar { padding: .55rem; margin-bottom: .7rem; }
  .pt-tool-label { display: none; }
  .pt-mission-titles small { display: none; }
  .pt-quiz-layout { grid-template-columns: 1fr; }
  .pt-answers { grid-template-columns: 1fr; }
  .pt-learn-grid { grid-template-columns: 1fr; }
  .pt-toolbar input, .pt-toolbar select { flex: 1; min-width: 135px; }
  .pt-toolbar .pt-search { min-width: 100%; }
  .pt-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: .35rem; }
  .pt-tab { padding: .5rem .3rem; font-size: .8rem; text-align: center; }
  .pt-tab .lbl-long { display: none; }
  .pt-progress-label { display: none; }
  .pt-mission-tier { width: 100%; }
  .pt-mission-tier select { flex: 1; }
  .pt-table-card { padding: .7rem; }
}

/* ---------- motion (only when the student has not asked for less) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .pt-pane.active { animation: ptFade .3s ease; }
  .pt-progress-track i { transition: width .4s ease; }
  .pt-tile { transition: box-shadow .16s, transform .16s, opacity .2s; }
  .pt-tab, .pt-btn, .pt-answer, .pt-choice, .pt-mchip { transition: background-color .15s, border-color .15s, transform .15s; }
  .pt-orbit-g { animation: ptSpin var(--dur, 20s) linear infinite; transform-box: view-box; transform-origin: 160px 160px; }
  .pt-orbit-g.rev { animation-direction: reverse; }
  .pt-app.pt-paused .pt-orbit-g { animation-play-state: paused; }
  .pt-tile.is-target { animation: ptPulse 1.8s ease-in-out infinite; }
  .pt-feedback, .pt-mission-status:not(:empty) { animation: ptFeed .28s ease both; }
  .pt-answer.correct { animation: ptPop .35s ease; }
  .pt-answer.wrong { animation: ptShake .35s ease; }
  .pt-choice.right { animation: ptPop .35s ease; }
  .pt-choice.wrong { animation: ptShake .35s ease; }
  .pt-mission-done .ring { stroke-dasharray: 190; stroke-dashoffset: 190; animation: ptDraw .6s ease forwards; }
  .pt-mission-done .tick { stroke-dasharray: 44; stroke-dashoffset: 44; animation: ptDraw .4s .45s ease forwards; }
  .pt-mission-done { animation: ptRise .4s ease both; }
  .pt-chip.bump b { display: inline-block; animation: ptPop .5s ease; }
  .pt-jump { animation: ptRise .3s ease both; }
}
@keyframes ptFade { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes ptSpin { to { transform: rotate(360deg); } }
@keyframes ptPulse { 0%, 100% { box-shadow: 0 0 0 3px var(--pt-mission), 0 0 8px 2px var(--pt-mission-glow); } 50% { box-shadow: 0 0 0 3px var(--pt-mission), 0 0 18px 6px var(--pt-mission-glow); } }
@keyframes ptFeed { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes ptPop { 0% { transform: scale(1); } 40% { transform: scale(1.04); } 100% { transform: scale(1); } }
@keyframes ptShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@keyframes ptDraw { to { stroke-dashoffset: 0; } }
@keyframes ptRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- print: the turn-in sheet only ---------- */
@media print {
  body { background: #fff; }
  body * { visibility: hidden; }
  .pt-turnin-sheet, .pt-turnin-sheet * { visibility: visible; }
  .pt-turnin-sheet { position: absolute; left: 0; top: 0; width: 100%; color: #000; background: #fff; border: 1px solid #000; font-size: 14pt; }
  .pt-turnin-sheet .code { color: #000; background: #fff; border: 2px solid #000; }
}

/* ---------- Trends tab ("See the patterns"): periodic-table-trends.js ---------- */
:root { --ptt-slot-a: #4338ca; --ptt-slot-b: #c2410c; --ptt-jump: #b91c1c; }
:root[data-theme="dark"] { --ptt-slot-a: #6d6ff0; --ptt-slot-b: #ea7a3c; --ptt-jump: #ef5350; }
.ptt-root { display: grid; gap: 1rem; font-size: 1rem; }
.ptt-root > *, .ptt-grid2 > * { min-width: 0; }
.ptt-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.ptt-bar2 { gap: .5rem; }
.ptt-spacer { flex: 1; }
.ptt-props { display: flex; flex-wrap: wrap; gap: .4rem; flex: 1; }
.ptt-prop { min-height: 44px; padding: .5rem .9rem; border: 1px solid var(--pt-border-strong); border-radius: 999px; background: var(--pt-surface); color: var(--pt-text-2); font-weight: 700; font-size: 1rem; cursor: pointer; }
.ptt-prop:hover { border-color: var(--pt-accent); background: var(--pt-accent-soft); }
.ptt-prop.on { background: var(--pt-accent); border-color: var(--pt-accent); color: var(--pt-accent-ink); }
.ptt-prop[hidden] { display: none; }
.ptt-ap-tag { display: inline-block; padding: 0 .4rem; border-radius: 6px; background: var(--pt-warn-bg); border: 1px solid var(--pt-warn-bd); color: var(--pt-warn-text); font-size: 1rem; font-weight: 800; line-height: 1.35; vertical-align: 1px; }
.ptt-prop.on .ptt-ap-tag { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.5); color: inherit; }
.ptt-level { display: flex; align-items: center; gap: .5rem; }
.ptt-level-lbl { font-weight: 700; color: var(--pt-muted); }
.pt-app .ptt-btn { font-size: 1rem; }
.ptt-practice { display: inline-flex; align-items: center; text-decoration: none; }
.ptt-panel { padding: 1rem 1.25rem; }
.ptt-panel h2 { font-size: 1.15rem; margin-bottom: .5rem; }
.ptt-panel ul { margin: 0; padding-left: 1.2rem; display: grid; gap: .45rem; line-height: 1.5; color: var(--pt-text-2); }
.ptt-hero { padding: 1rem 1.1rem .8rem; }
.ptt-hero-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: .5rem 1.5rem; margin-bottom: .4rem; }
.ptt-hero-head h2 { font-size: 1.35rem; color: var(--pt-hero-title); }
.ptt-hero-head > div:first-child { flex: 1 1 380px; }
.ptt-hero-head p { margin-top: .2rem; color: var(--pt-text-2); max-width: 70ch; line-height: 1.45; }
.ptt-legend { flex: 0 1 auto; display: flex; align-items: center; gap: .6rem; color: var(--pt-text-2); font-weight: 600; flex-wrap: wrap; }
.ptt-ramp { width: 180px; height: 16px; border-radius: 6px; border: 1px solid var(--pt-border-strong); background: linear-gradient(90deg, #440154, #414487, #2a788e, #22a884, #7ad151, #fde725); }
.ptt-leg-txt { max-width: 30ch; line-height: 1.35; }
.ptt-stage { position: relative; overflow-x: auto; overflow-y: hidden; }
.ptt-table { display: block; touch-action: pan-x pan-y; border-radius: 12px; }
.ptt-table:focus { outline: none; }
.ptt-table:focus-visible { box-shadow: 0 0 0 3px var(--pt-focus); }
.ptt-tip { position: absolute; z-index: 5; display: flex; gap: .6rem; align-items: center; max-width: 340px; padding: .55rem .7rem; background: var(--pt-surface); border: 1px solid var(--pt-border-strong); border-radius: 12px; box-shadow: var(--pt-shadow); pointer-events: none; color: var(--pt-text); font-size: 1rem; line-height: 1.35; }
.ptt-tip[hidden] { display: none; }
.ptt-lens { width: 120px; height: 120px; flex: 0 0 120px; }
.ptt-lens[hidden] { display: none; }
.ptt-tip-body { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; }
.ptt-tip strong small { font-weight: 600; color: var(--pt-muted); font-size: 1rem; }
.ptt-tip-note { color: var(--pt-muted); }
.ptt-gtip { flex-direction: column; align-items: flex-start; gap: .1rem; }
.ptt-keys, .ptt-status, .ptt-note { margin-top: .45rem; color: var(--pt-text-2); line-height: 1.45; }
.ptt-status { font-weight: 600; min-height: 1.45em; }
.ptt-note { color: var(--pt-muted); }
.ptt-grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
.ptt-compare, .ptt-graph, .ptt-sie { padding: 1rem 1.1rem; min-width: 0; }
.ptt-sec-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .6rem; }
.ptt-sec-head h2 { font-size: 1.2rem; }
.ptt-slots, .ptt-sie-tools { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.ptt-slot { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; }
.ptt-slot select { min-height: 44px; max-width: 220px; font-size: 1rem; padding: .3rem .5rem; border-radius: 10px; border: 1px solid var(--pt-border-strong); background: var(--pt-surface); color: var(--pt-text); }
.ptt-badge { display: inline-grid; place-items: center; min-width: 1.6em; height: 1.6em; border-radius: 6px; color: #fff; font-weight: 800; font-size: 1rem; }
.ptt-badge.a { background: var(--ptt-slot-a); }
.ptt-badge.b { background: var(--ptt-slot-b); }
.ptt-next { color: var(--pt-text-2); margin-bottom: .4rem; }
.ptt-portraits { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.ptt-portrait { margin: 0; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.ptt-portrait figcaption { font-weight: 800; display: flex; align-items: center; gap: .4rem; margin-bottom: .2rem; text-align: center; }
.ptt-facts { width: 100%; display: grid; gap: .15rem; margin: .3rem 0 0; }
.ptt-facts > div { display: flex; justify-content: space-between; gap: .5rem; padding: .15rem .3rem; border-bottom: 1px dashed var(--pt-border); }
.ptt-facts dt { color: var(--pt-text-2); }
.ptt-facts dd { margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; }
.ptt-facts .ptt-cc dd { color: var(--pt-chart-cur); }
.ptt-facts .ptt-fact-note { border: 0; }
.ptt-facts .ptt-fact-note dd { font-weight: 600; color: var(--pt-muted); }
.ptt-why { margin-top: .7rem; padding: .6rem .8rem; border-radius: 12px; background: var(--pt-accent-soft); color: var(--pt-accent-text); font-weight: 700; line-height: 1.45; }
.ptt-check { margin-top: .5rem; line-height: 1.45; color: var(--pt-text-2); }
.ptt-check.ok { color: var(--pt-good); }
.ptt-check.no { color: var(--pt-warn-text); background: var(--pt-warn-bg); border: 1px solid var(--pt-warn-bd); border-radius: 10px; padding: .4rem .6rem; }
.ptt-cap { margin-top: .5rem; color: var(--pt-muted); line-height: 1.45; }
.ptt-gstage { position: relative; }
.ptt-gcanvas { display: block; max-width: 100%; border-radius: 10px; }
.ptt-gcanvas:focus { outline: none; }
.ptt-gcanvas:focus-visible { box-shadow: 0 0 0 3px var(--pt-focus); }
.ptt-reveal { margin-top: .5rem; font-size: 1.05rem; line-height: 1.5; color: var(--pt-text); }
.ptt-sie[hidden], .ptt-panel[hidden] { display: none; }
@media (max-width: 1100px) { .ptt-grid2 { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .ptt-portraits { grid-template-columns: 1fr; } .ptt-slot select { max-width: 150px; } }
@media (prefers-reduced-motion: no-preference) {
  .ptt-prop { transition: background-color .15s, border-color .15s; }
}