/* ============================================================
   Microsoft Encarta Encyclopedia 99 — application chrome
   ============================================================ */
:root {
  --enc-dark: #101a3c;
  --enc-darker: #0a1128;
  --enc-deep: #060a1a;
  --enc-mid: #22366e;
  --enc-gold: #ffd447;
  --enc-gold-dim: #c8a428;
  --enc-cream: #f7f3e8;
  --enc-link: #1a3aa8;
  --enc-red: #8a1a1a;
}

.encarta-root {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  background: var(--enc-dark);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  overflow: hidden;
}

/* ---------- splash ---------- */
.enc-splash {
  position: absolute; inset: 0; z-index: 50;
  background: radial-gradient(ellipse at 50% 35%, #22366e 0%, #101a3c 55%, #060a1a 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px;
  color: #fff;
}
.enc-splash .enc-logo-big { width: 190px; height: 190px; }
.enc-splash .enc-title {
  font-family: "Times New Roman", Georgia, serif;
  text-align: center;
}
.enc-splash .enc-title .t1 { font-size: 20px; letter-spacing: 2px; color: #d8dff2; }
.enc-splash .enc-title .t2 {
  font-size: 44px; font-weight: bold; letter-spacing: 3px;
  color: #fff;
  text-shadow: 0 0 18px rgba(255, 212, 71, .45), 2px 2px 0 #000;
}
.enc-splash .enc-title .t2 .n99 { color: var(--enc-gold); }
.enc-splash .load-zone { width: 300px; text-align: center; }
.enc-splash .load-text { color: #aab4d8; font-size: 11px; margin-bottom: 6px; min-height: 14px; }
.enc-splash .load-bar {
  height: 12px; border: 1px solid #46528a; background: #0a1128;
  padding: 1px;
}
.enc-splash .load-bar .fill {
  height: 100%; width: 0%;
  background: repeating-linear-gradient(90deg, var(--enc-gold) 0 7px, #c8a428 7px 9px);
  transition: width .18s;
}
.enc-splash .copyright { position: absolute; bottom: 12px; font-size: 10px; color: #6a76a8; }

/* ---------- toolbar ---------- */
.enc-toolbar {
  flex: 0 0 40px;
  background: linear-gradient(180deg, #2a3a72 0%, var(--enc-dark) 55%, var(--enc-darker) 100%);
  border-bottom: 2px solid var(--enc-gold-dim);
  display: flex; align-items: stretch;
  padding: 0 4px;
  gap: 1px;
  z-index: 10;
}
.enc-toolbar .enc-brand {
  display: flex; align-items: center; gap: 7px;
  padding: 0 10px 0 4px;
  border-right: 1px solid #3a4a8a;
  margin-right: 4px;
}
.enc-toolbar .enc-brand svg { width: 26px; height: 26px; }
.enc-toolbar .enc-brand .b-text {
  font-family: "Times New Roman", serif;
  font-weight: bold; font-size: 15px; letter-spacing: 1px;
  color: #fff;
}
.enc-toolbar .enc-brand .b-text span { color: var(--enc-gold); }
.enc-tb-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 52px;
  padding: 3px 7px 2px 7px;
  color: #d8dff2;
  font-size: 10px;
  gap: 2px;
  border: 1px solid transparent;
  position: relative;
}
.enc-tb-btn svg { width: 17px; height: 17px; }
.enc-tb-btn:hover { border-color: #5a6ab2 #0a1128 #0a1128 #5a6ab2; color: #fff; background: rgba(90,106,178,.18); }
.enc-tb-btn:active, .enc-tb-btn.down { border-color: #0a1128 #5a6ab2 #5a6ab2 #0a1128; background: rgba(6,10,26,.5); }
.enc-tb-btn.current { border-color: #0a1128 #5a6ab2 #5a6ab2 #0a1128; background: rgba(6,10,26,.55); color: var(--enc-gold); }
.enc-tb-btn.disabled { opacity: .35; pointer-events: none; }
.enc-tb-sep { width: 1px; margin: 6px 3px; background: #3a4a8a; box-shadow: 1px 0 0 #0a1128; }
.enc-tb-spring { flex: 1; }

/* ---------- main layout ---------- */
.enc-main {
  flex: 1;
  display: flex;
  min-height: 0;
  position: relative;
  background: var(--enc-darker);
}
.enc-content {
  flex: 1; min-width: 0;
  position: relative;
  display: flex; flex-direction: column;
  overflow: hidden;
}

/* transition wipe */
.enc-loading-veil {
  position: absolute; inset: 0; z-index: 30;
  background: var(--enc-darker);
  display: flex; align-items: center; justify-content: center;
  color: #aab4d8; font-size: 12px;
  gap: 10px;
}
.enc-loading-veil .spin {
  width: 14px; height: 14px;
  border: 3px solid #3a4a8a; border-top-color: var(--enc-gold);
  border-radius: 50%;
  animation: encspin .7s linear infinite;
}
@keyframes encspin { to { transform: rotate(360deg); } }

/* ---------- Pinpointer ---------- */
.enc-pinpointer {
  flex: 0 0 230px;
  background: linear-gradient(180deg, #1a2a5c, var(--enc-dark) 30%);
  border-right: 2px solid var(--enc-gold-dim);
  display: flex; flex-direction: column;
  min-height: 0;
  color: #d8dff2;
}
.enc-pinpointer .pp-head {
  padding: 8px 10px 6px 10px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid #3a4a8a;
}
.enc-pinpointer .pp-head .pp-title {
  font-family: "Times New Roman", serif;
  font-size: 15px; font-weight: bold; color: var(--enc-gold);
  letter-spacing: .5px;
}
.enc-pinpointer .pp-close {
  width: 16px; height: 14px; padding: 0;
  background-color: var(--silver);
  background-repeat: no-repeat;
  background-position: center;
}
.enc-pinpointer .pp-hint { padding: 7px 10px 3px 10px; font-size: 10px; color: #aab4d8; line-height: 1.4; }
.enc-pinpointer .pp-search { padding: 4px 10px 6px 10px; }
.enc-pinpointer .pp-search input {
  width: 100%;
  font-size: 12px;
  padding: 3px 4px;
}
.enc-pinpointer .pp-filters { padding: 0 10px 6px 10px; display: flex; flex-direction: column; gap: 4px; }
.enc-pinpointer .pp-filters select { width: 100%; font-size: 11px; }
.enc-pinpointer .pp-count {
  padding: 2px 10px 4px 10px; font-size: 10px; color: #8a96c8;
  border-bottom: 1px solid #3a4a8a;
}
.enc-pinpointer .pp-list {
  flex: 1; overflow-y: auto;
  background: #fdfcf6;
  color: #000;
  min-height: 0;
}
.enc-pinpointer .pp-item {
  padding: 3px 9px;
  font-size: 12px;
  border-bottom: 1px dotted #d8d2bc;
  display: flex; align-items: center; gap: 6px;
  line-height: 1.25;
}
.enc-pinpointer .pp-item .pp-typeico { width: 13px; height: 13px; flex: 0 0 auto; opacity: .8; }
.enc-pinpointer .pp-item .pp-typeico svg { width: 13px; height: 13px; }
.enc-pinpointer .pp-item:hover { background: #eef0e0; }
.enc-pinpointer .pp-item.kbd, .enc-pinpointer .pp-item.current { background: var(--enc-mid); color: #fff; }
.enc-pinpointer .pp-empty {
  padding: 16px 12px; color: #666; font-size: 11px; line-height: 1.6;
  font-style: italic;
}

/* ---------- Home screen ---------- */
.enc-home {
  flex: 1; overflow-y: auto;
  background:
    radial-gradient(ellipse 900px 480px at 78% -10%, #2c4288 0%, transparent 55%),
    radial-gradient(ellipse 700px 500px at -10% 110%, #1c2c60 0%, transparent 50%),
    var(--enc-darker);
  color: #fff;
  padding: 26px 34px 30px 34px;
}
.enc-home .home-head { display: flex; align-items: center; gap: 18px; margin-bottom: 6px; }
.enc-home .home-head svg.logo { width: 84px; height: 84px; flex: 0 0 auto; filter: drop-shadow(0 3px 8px rgba(0,0,0,.6)); }
.enc-home .home-title .h1 {
  font-family: "Times New Roman", serif; font-size: 15px; letter-spacing: 2px; color: #aab4d8;
}
.enc-home .home-title .h2 {
  font-family: "Times New Roman", serif; font-size: 34px; font-weight: bold; letter-spacing: 2px;
  color: #fff; text-shadow: 2px 2px 0 #000;
}
.enc-home .home-title .h2 span { color: var(--enc-gold); }
.enc-home .home-rule {
  height: 2px; margin: 12px 0 18px 0;
  background: linear-gradient(90deg, var(--enc-gold), rgba(255,212,71,.05));
}
.enc-home .home-cols { display: flex; gap: 26px; align-items: flex-start; }
.enc-home .home-menu { flex: 0 0 250px; display: flex; flex-direction: column; gap: 6px; }
.enc-home .hm-item {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 10px;
  border: 1px solid #2c3c74;
  background: linear-gradient(180deg, rgba(44,66,136,.55), rgba(16,26,60,.55));
  color: #e8ecf8;
}
.enc-home .hm-item:hover {
  border-color: var(--enc-gold);
  color: #fff;
  background: linear-gradient(180deg, rgba(60,86,166,.7), rgba(24,38,84,.7));
}
.enc-home .hm-item svg { width: 26px; height: 26px; flex: 0 0 auto; }
.enc-home .hm-item .hm-name { font-size: 14px; font-family: "Times New Roman", serif; font-weight: bold; letter-spacing: .4px; }
.enc-home .hm-item .hm-desc { font-size: 10px; color: #aab4d8; margin-top: 1px; }
.enc-home .hm-item:hover .hm-desc { color: #d8dff2; }

.enc-home .home-feature { flex: 1; min-width: 0; }
.enc-home .feat-card {
  border: 1px solid #3a4a8a;
  background: rgba(10, 17, 40, .75);
  padding: 14px 16px 16px 16px;
}
.enc-home .feat-label {
  font-size: 10px; letter-spacing: 2px; color: var(--enc-gold);
  margin-bottom: 8px;
}
.enc-home .feat-art { border: 1px solid #46528a; margin-bottom: 10px; background: #000; }
.enc-home .feat-art svg { width: 100%; height: auto; }
.enc-home .feat-title {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 21px; color: #fff; margin-bottom: 6px;
}
.enc-home .feat-blurb { color: #c2cbe8; line-height: 1.55; font-size: 12px; margin-bottom: 10px; }
.enc-home .feat-go {
  display: inline-block;
  color: var(--enc-gold);
  border: 1px solid var(--enc-gold-dim);
  padding: 4px 14px;
  font-size: 11px; letter-spacing: 1px;
}
.enc-home .feat-go:hover { background: var(--enc-gold); color: #101a3c; }
.enc-home .home-cats { margin-top: 14px; }
.enc-home .home-cats .cats-label { font-size: 10px; letter-spacing: 2px; color: #8a96c8; margin-bottom: 7px; }
.enc-home .cat-chip {
  display: inline-block;
  margin: 0 5px 5px 0;
  padding: 3px 9px;
  font-size: 11px;
  color: #d8dff2;
  border: 1px solid #2c3c74;
  background: rgba(44,60,116,.35);
}
.enc-home .cat-chip:hover { border-color: var(--enc-gold); color: var(--enc-gold); }

/* ---------- Article view ---------- */
.enc-article {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  background: var(--enc-cream);
}
.enc-art-band {
  flex: 0 0 auto;
  background: linear-gradient(90deg, var(--enc-dark), var(--enc-mid) 70%, #35509c);
  color: #fff;
  padding: 9px 18px 8px 18px;
  border-bottom: 3px solid var(--enc-gold);
  display: flex; align-items: baseline; gap: 14px;
}
.enc-art-band .a-title {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 23px; font-weight: bold;
  letter-spacing: .4px;
}
.enc-art-band .a-cat { font-size: 10.5px; color: #aab4d8; letter-spacing: 1px; }
.enc-art-band .a-cat b { color: var(--enc-gold); font-weight: normal; }
.enc-art-cols { flex: 1; display: flex; min-height: 0; }

.enc-outline {
  flex: 0 0 195px;
  background: #efe9d8;
  border-right: 1px solid #c8bfa0;
  overflow-y: auto;
  padding: 10px 0 16px 0;
}
.enc-outline .o-head {
  font-size: 10px; letter-spacing: 2px; color: #7a6a3a;
  padding: 0 12px 6px 12px;
  border-bottom: 1px solid #d8d0b8;
  margin-bottom: 5px;
  display: flex; justify-content: space-between; align-items: center;
}
.enc-outline .o-item {
  padding: 3px 12px 3px 14px;
  font-size: 11.5px;
  color: #28407a;
  line-height: 1.3;
}
.enc-outline .o-item:hover { text-decoration: underline; color: #1a3aa8; }
.enc-outline .o-item.active { background: #dcd2ae; color: #101a3c; font-weight: bold; }
.enc-outline .o-sub { padding-left: 26px; font-size: 11px; }
.enc-outline .o-expander { margin-right: 4px; font-family: monospace; color: #7a6a3a; }
.enc-outline .o-media-head {
  font-size: 10px; letter-spacing: 2px; color: #7a6a3a;
  padding: 10px 12px 4px 12px;
  border-top: 1px solid #d8d0b8;
  margin-top: 8px;
}
.enc-outline .o-media-item {
  display: flex; gap: 6px; align-items: center;
  padding: 3px 12px 3px 14px;
  font-size: 11px; color: #28407a;
}
.enc-outline .o-media-item svg { width: 13px; height: 13px; flex: 0 0 auto; }
.enc-outline .o-media-item:hover { text-decoration: underline; }

.enc-art-scroll {
  flex: 1; min-width: 0;
  overflow-y: auto;
  background: #fdfcf6;
}
.enc-art-body {
  max-width: 780px;
  margin: 0 auto;
  padding: 20px 30px 60px 30px;
  color: #111;
  font-size: 12.5px;
  line-height: 1.62;
  font-family: Arial, Helvetica, sans-serif;
  user-select: text;
}
.enc-art-body .factbox {
  float: right;
  width: 215px;
  margin: 4px 0 12px 18px;
  border: 1px solid #b8ac84;
  background: #f2ecd8;
  font-size: 11px;
}
.enc-art-body .factbox .fb-head {
  background: var(--enc-mid);
  color: var(--enc-gold);
  font-size: 10px; letter-spacing: 1.6px;
  padding: 3px 8px;
}
.enc-art-body .factbox table { border-collapse: collapse; width: 100%; }
.enc-art-body .factbox td { padding: 4px 8px; vertical-align: top; border-bottom: 1px dotted #d0c8a8; }
.enc-art-body .factbox td.fl { font-weight: bold; color: #5a4a1a; width: 40%; }
.enc-art-body h2.sec {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px; color: #1a2a6c;
  margin: 22px 0 8px 0;
  padding-bottom: 2px;
  border-bottom: 1px solid #c8bfa0;
  clear: none;
}
.enc-art-body h3.subsec {
  font-family: Georgia, serif;
  font-size: 13.5px; color: #35509c;
  margin: 14px 0 6px 0;
}
.enc-art-body .secnum { color: #b09a50; font-size: 12px; margin-right: 7px; }
.enc-art-body p { margin-bottom: 9px; text-align: justify; }
.enc-art-body a.enc-link {
  color: var(--enc-link);
  text-decoration: none;
  border-bottom: 1px dotted #7a90d8;
  cursor: pointer;
}
.enc-art-body a.enc-link:hover { color: #c02020; border-bottom-style: solid; }
.enc-art-body .art-intro-rule { border: none; border-top: 2px solid var(--enc-gold); margin: 2px 0 12px 0; width: 90px; }

.enc-art-body .media-thumb {
  float: right; clear: right;
  width: 200px;
  margin: 4px 0 12px 18px;
  border: 1px solid #98906a;
  background: #fff;
  box-shadow: 2px 2px 0 rgba(90, 80, 40, .25);
  cursor: pointer;
}
.enc-art-body .media-thumb .mt-img { border-bottom: 1px solid #c8bfa0; position: relative; background: #dde4f0; }
.enc-art-body .media-thumb .mt-img svg { width: 100%; height: auto; }
.enc-art-body .media-thumb .mt-cap {
  font-size: 10px; line-height: 1.4; padding: 4px 6px; color: #333;
}
.enc-art-body .media-thumb .mt-kind {
  font-size: 9px; letter-spacing: 1px; color: #7a6a2a;
  padding: 2px 6px 3px 6px;
  background: #f2ecd8;
  border-top: 1px solid #e0d8b8;
  display: flex; align-items: center; gap: 5px;
}
.enc-art-body .media-thumb .mt-kind svg { width: 11px; height: 11px; }
.enc-art-body .media-thumb:hover { border-color: var(--enc-mid); box-shadow: 2px 2px 0 rgba(26,42,108,.4); }
.enc-art-body .media-badge {
  position: absolute; right: 4px; bottom: 4px;
  background: rgba(16,26,60,.85);
  color: var(--enc-gold);
  font-size: 9px; letter-spacing: 1px;
  padding: 2px 6px;
}

.enc-art-body .related-box {
  clear: both;
  margin-top: 26px;
  border-top: 2px solid var(--enc-gold);
  padding-top: 8px;
}
.enc-art-body .related-box .r-head {
  font-size: 10px; letter-spacing: 2px; color: #7a6a3a; margin-bottom: 6px;
}
.enc-art-body .related-box a.rel {
  display: inline-block;
  margin: 0 6px 6px 0;
  padding: 3px 10px;
  border: 1px solid #b8ac84;
  background: #f2ecd8;
  color: var(--enc-link);
  font-size: 11.5px;
  cursor: pointer;
}
.enc-art-body .related-box a.rel:hover { border-color: var(--enc-mid); background: #e8e0c4; }
.enc-art-body .art-footer {
  clear: both;
  margin-top: 18px; padding-top: 8px;
  border-top: 1px dotted #c8bfa0;
  font-size: 10px; color: #888;
}

/* ---------- Category browser ---------- */
.enc-catview { flex: 1; overflow-y: auto; background: var(--enc-darker); color: #fff; padding: 22px 30px; }
.enc-catview .cv-title { font-family: Georgia, serif; font-size: 24px; margin-bottom: 2px; }
.enc-catview .cv-sub { color: #8a96c8; font-size: 11px; margin-bottom: 16px; }
.enc-catview .cv-rule { height: 2px; background: linear-gradient(90deg, var(--enc-gold), transparent); margin-bottom: 16px; }
.enc-catview .cv-item {
  padding: 6px 10px;
  border-bottom: 1px solid #1c2c60;
  display: flex; align-items: baseline; gap: 10px;
}
.enc-catview .cv-item:hover { background: rgba(44,66,136,.4); }
.enc-catview .cv-item .cvt { color: #e8ecf8; font-size: 13px; }
.enc-catview .cv-item:hover .cvt { color: var(--enc-gold); }
.enc-catview .cv-item .cvs { color: #6a76a8; font-size: 10px; }

/* ---------- Media Gallery ---------- */
.enc-gallery { flex: 1; overflow-y: auto; background: var(--enc-darker); color: #fff; padding: 20px 26px; }
.enc-gallery .g-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 4px; flex-wrap: wrap; }
.enc-gallery .g-title { font-family: Georgia, serif; font-size: 24px; }
.enc-gallery .g-filters { display: flex; gap: 6px; margin: 10px 0 16px 0; flex-wrap: wrap; }
.enc-gallery .g-filter {
  padding: 3px 11px; font-size: 11px;
  border: 1px solid #2c3c74; color: #d8dff2;
  background: rgba(44,60,116,.35);
}
.enc-gallery .g-filter.on { border-color: var(--enc-gold); color: var(--enc-gold); background: rgba(255,212,71,.08); }
.enc-gallery .g-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}
.enc-gallery .g-cell {
  border: 1px solid #3a4a8a;
  background: #0d1533;
}
.enc-gallery .g-cell:hover { border-color: var(--enc-gold); }
.enc-gallery .g-cell .g-img { background: #1a2246; position: relative; min-height: 90px; }
.enc-gallery .g-cell .g-img svg { width: 100%; height: auto; display: block; }
.enc-gallery .g-cell .g-img .g-kind {
  position: absolute; right: 4px; top: 4px;
  background: rgba(16,26,60,.85); color: var(--enc-gold);
  font-size: 9px; letter-spacing: 1px; padding: 2px 6px;
}
.enc-gallery .g-cell .g-label { font-size: 11px; padding: 5px 7px; color: #d8dff2; line-height: 1.35; }
.enc-gallery .g-cell .g-from { font-size: 9.5px; padding: 0 7px 6px 7px; color: #6a76a8; }
.enc-gallery .g-none { color: #8a96c8; font-style: italic; padding: 30px 0; }

/* audio/animation placeholder art in gallery */
.g-audio-art, .g-anim-art {
  height: 90px; display: flex; align-items: center; justify-content: center;
}

/* ---------- Media viewer overlay ---------- */
.enc-mviewer {
  position: absolute; inset: 0; z-index: 40;
  background: rgba(4, 6, 16, .72);
  display: flex; align-items: center; justify-content: center;
}
.enc-mviewer .mv-frame {
  background: var(--enc-dark);
  border: 2px solid var(--enc-gold-dim);
  box-shadow: 0 10px 40px rgba(0,0,0,.7);
  width: min(560px, 92%);
  max-height: 94%;
  display: flex; flex-direction: column;
}
.enc-mviewer .mv-title {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px;
  background: linear-gradient(90deg, var(--enc-mid), var(--enc-dark));
  border-bottom: 1px solid var(--enc-gold-dim);
}
.enc-mviewer .mv-title .t {
  color: #fff; font-family: Georgia, serif; font-size: 15px;
}
.enc-mviewer .mv-title .mv-close {
  background-color: var(--silver);
  background-repeat: no-repeat;
  background-position: center;
  width: 18px; height: 16px; padding: 0;
}
.enc-mviewer .mv-media {
  background: #000;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  position: relative;
}
.enc-mviewer .mv-media svg { width: 100%; height: auto; max-height: 46vh; }
.enc-mviewer .mv-media canvas { width: 100%; display: block; }
.enc-mviewer .mv-caption {
  padding: 9px 12px 4px 12px;
  color: #d8dff2; font-size: 11.5px; line-height: 1.55;
  overflow-y: auto;
}
.enc-mviewer .mv-credit {
  padding: 2px 12px 8px 12px;
  color: #6a76a8; font-size: 9.5px; font-style: italic;
}
.enc-mviewer .mv-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px 10px 12px;
}
.enc-mviewer .mv-bar button {
  min-width: 60px;
}
.enc-mviewer .mv-progress {
  flex: 1; height: 10px;
  border: 1px solid #46528a; background: #0a1128;
}
.enc-mviewer .mv-progress .p {
  height: 100%; width: 0%;
  background: var(--enc-gold);
}
.enc-mviewer .mv-artlink {
  color: var(--enc-gold); font-size: 11px; cursor: pointer;
  padding: 0 12px 10px 12px;
}
.enc-mviewer .mv-artlink:hover { text-decoration: underline; }

/* ---------- Timeline ---------- */
.enc-timeline { flex: 1; display: flex; flex-direction: column; min-height: 0; background: #0a0f24; color: #fff; }
.enc-timeline .tl-head { padding: 14px 24px 4px 24px; display: flex; align-items: baseline; gap: 16px; }
.enc-timeline .tl-title { font-family: Georgia, serif; font-size: 22px; }
.enc-timeline .tl-sub { color: #8a96c8; font-size: 11px; }
.enc-timeline .tl-scroll {
  flex: 1; overflow-x: auto; overflow-y: hidden;
  position: relative;
  margin: 8px 0 6px 0;
}
.enc-timeline .tl-canvas { position: relative; height: 100%; min-height: 260px; }
.enc-timeline .tl-era {
  position: absolute; top: 0; bottom: 0;
  border-right: 1px solid rgba(255,255,255,.08);
}
.enc-timeline .tl-era .era-label {
  position: absolute; top: 6px; left: 8px;
  font-size: 10px; letter-spacing: 2px; opacity: .8;
  white-space: nowrap;
}
.enc-timeline .tl-axis {
  position: absolute; left: 0; right: 0; top: 50%;
  height: 4px; background: linear-gradient(90deg, #c8a428, var(--enc-gold), #c8a428);
}
.enc-timeline .tl-tick {
  position: absolute; top: calc(50% - 6px);
  width: 1px; height: 16px; background: rgba(255,255,255,.35);
}
.enc-timeline .tl-tick span {
  position: absolute; top: 18px; left: -18px; width: 40px;
  text-align: center; font-size: 9px; color: #8a96c8;
}
.enc-timeline .tl-event {
  position: absolute;
  width: 138px;
  font-size: 10.5px;
  line-height: 1.35;
  cursor: pointer;
}
.enc-timeline .tl-event .ev-dot {
  position: absolute;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--enc-gold); border: 2px solid #0a0f24;
  box-shadow: 0 0 0 1px var(--enc-gold);
}
.enc-timeline .tl-event .ev-stem { position: absolute; width: 1px; background: rgba(255,212,71,.4); }
.enc-timeline .tl-event .ev-card {
  position: absolute; left: 0; width: 132px;
  background: rgba(16,26,60,.92);
  border: 1px solid #3a4a8a;
  padding: 4px 6px;
}
.enc-timeline .tl-event:hover .ev-card { border-color: var(--enc-gold); background: #1c2c60; }
.enc-timeline .tl-event .ev-year { color: var(--enc-gold); font-weight: bold; font-size: 10px; }
.enc-timeline .tl-event .ev-title { color: #e8ecf8; }
.enc-timeline .tl-legend { padding: 4px 24px 12px 24px; font-size: 10px; color: #6a76a8; }

/* ---------- Atlas ---------- */
.enc-atlas { flex: 1; display: flex; flex-direction: column; min-height: 0; background: #06101e; color: #fff; }
.enc-atlas .at-head { padding: 14px 24px 6px 24px; display: flex; align-items: baseline; gap: 16px; }
.enc-atlas .at-title { font-family: Georgia, serif; font-size: 22px; }
.enc-atlas .at-sub { color: #7a92b8; font-size: 11px; }
.enc-atlas .at-map { flex: 1; min-height: 0; position: relative; }
.enc-atlas .at-map svg { width: 100%; height: 100%; display: block; }
.enc-atlas .at-status {
  padding: 6px 24px 10px 24px; font-size: 11px; color: #9ab0cc;
  display: flex; justify-content: space-between; align-items: center;
}
.enc-atlas .at-back {
  color: var(--enc-gold); cursor: pointer; border: 1px solid var(--enc-gold-dim);
  padding: 2px 10px; font-size: 10px; letter-spacing: 1px;
}
.enc-atlas .at-back:hover { background: var(--enc-gold); color: #06101e; }
.at-continent { cursor: pointer; }
.at-continent path, .at-continent polygon { transition: fill .15s; }
.at-marker { cursor: pointer; }
.at-marker text { font-family: Arial; font-size: 7.5px; fill: #fff; paint-order: stroke; stroke: rgba(0,0,0,.65); stroke-width: 2px; }
.at-marker:hover circle { fill: #fff; }
.at-marker:hover text { fill: var(--enc-gold); }

/* ---------- Quiz / InterActivities ---------- */
.enc-quiz { flex: 1; overflow-y: auto; background: var(--enc-darker); color: #fff; padding: 22px 30px; }
.enc-quiz .q-title { font-family: Georgia, serif; font-size: 24px; margin-bottom: 4px; }
.enc-quiz .q-sub { color: #8a96c8; font-size: 11px; margin-bottom: 18px; }
.enc-quiz .q-menu { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.enc-quiz .q-card {
  border: 1px solid #3a4a8a; background: rgba(16,26,60,.7);
  padding: 14px;
}
.enc-quiz .q-card:hover { border-color: var(--enc-gold); }
.enc-quiz .q-card .qc-name { font-family: Georgia, serif; font-size: 15px; color: var(--enc-gold); margin-bottom: 5px; }
.enc-quiz .q-card .qc-desc { font-size: 11px; color: #aab4d8; line-height: 1.5; }
.enc-quiz .q-progress { font-size: 11px; color: #8a96c8; margin-bottom: 10px; letter-spacing: 1px; }
.enc-quiz .q-question {
  font-family: Georgia, serif; font-size: 18px; line-height: 1.45;
  margin-bottom: 16px; max-width: 620px;
}
.enc-quiz .q-choice {
  display: block;
  margin-bottom: 8px;
  max-width: 540px;
  padding: 8px 13px;
  border: 1px solid #3a4a8a;
  background: rgba(16,26,60,.7);
  color: #e8ecf8; font-size: 13px;
}
.enc-quiz .q-choice:hover { border-color: var(--enc-gold); }
.enc-quiz .q-choice.correct { border-color: #3fc06a; background: rgba(30,110,60,.5); }
.enc-quiz .q-choice.wrong { border-color: #d04040; background: rgba(130,30,30,.5); }
.enc-quiz .q-choice.dim { opacity: .5; pointer-events: none; }
.enc-quiz .q-feedback { margin: 12px 0; font-size: 12px; min-height: 34px; max-width: 540px; line-height: 1.5; }
.enc-quiz .q-feedback .fb-good { color: #6ae08a; font-weight: bold; }
.enc-quiz .q-feedback .fb-bad { color: #f08a8a; font-weight: bold; }
.enc-quiz .q-next {
  padding: 5px 20px; border: 1px solid var(--enc-gold-dim); color: var(--enc-gold);
  background: transparent; font-size: 12px; letter-spacing: 1px; box-shadow: none;
}
.enc-quiz .q-next:hover { background: var(--enc-gold); color: #101a3c; }
.enc-quiz .q-score-big { font-size: 42px; font-family: Georgia, serif; color: var(--enc-gold); margin: 10px 0; }
.enc-quiz a.q-artlink { color: #9ab0e8; cursor: pointer; }
.enc-quiz a.q-artlink:hover { color: var(--enc-gold); }

/* generic clickable */
.enc-clickable { cursor: pointer; }

/* Encarta scroll styling reuses .scroll98; dark variant */
.enc-scrolldark::-webkit-scrollbar { width: 16px; height: 16px; }
.enc-scrolldark::-webkit-scrollbar-track { background: #101a3c; }
.enc-scrolldark::-webkit-scrollbar-thumb { background: #2c3c74; border: 1px solid #46528a; }