/* Library shares the app's faceted hexagon, jewel faces, and circular actions. */
html.ke-rebrand-mode #scr-library {
  --ke-library-gold: conic-gradient(from 0deg,#ffe9a0 0 16.666%,#c28c35 16.666% 33.333%,#79501a 33.333% 50%,#9f7127 50% 66.666%,#f0ce78 66.666% 83.333%,#fff0ad 83.333% 100%);
  background: transparent;
  padding: 0 20px max(36px,env(safe-area-inset-bottom));
  color: #fff;
}
html.ke-rebrand-mode #scr-library .ke-library-main { width: min(100%,680px); margin: 0 auto; padding: 24px 0 40px; }
.ke-library-hex { position: relative; width: min(300px,100%); aspect-ratio: .8660254; margin: 0 auto 40px; display: grid; place-items: center; isolation: isolate; }
.ke-library-hex::before,.ke-library-hex::after { content: ''; position: absolute; inset: 0; clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); z-index: -1; background: var(--ke-library-gold); }
.ke-library-hex::after { inset: 4px; background: var(--ke-jewel-garnet-surface,linear-gradient(145deg,#71344e,#341828)); background-color: var(--ke-jewel-garnet,#522039); }
.ke-library-hex-copy { width: 100%; box-sizing: border-box; text-align: center; padding: 16%; }
.ke-library-hex h1 { color: #fff; font: 600 clamp(30px,8vw,40px)/1.12 'Playfair Display',serif; margin: 12px 0; }
.ke-library-hex p { color: #fff; font: 500 clamp(12px,3.3vw,14px)/1.4 'DM Sans',sans-serif; margin: 0; }
.ke-library-circle-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 30px 24px; width: 100%; }
.ke-library-video-circle { --circle-face: var(--ke-jewel-garnet-surface,linear-gradient(145deg,#71344e,#341828)); position: relative; display: grid; aspect-ratio: 1; width: 100%; padding: 4px; border: 0; border-radius: 50%; cursor: pointer; background: conic-gradient(from 215deg,#82591f,#d5aa50 18%,#fff0b4 31%,#b7802c 49%,#f0d488 69%,#916323 84%,#d7b56d); box-shadow: 0 3px 0 #694818,0 10px 20px #0004; color: #fff; }
.ke-library-video-circle:nth-child(4n+2) { --circle-face: var(--ke-jewel-teal-surface,linear-gradient(145deg,#245e63,#12363d)); }
.ke-library-video-circle:nth-child(4n+3) { --circle-face: var(--ke-jewel-amethyst-surface,linear-gradient(145deg,#604074,#2d1f3e)); }
.ke-library-video-circle:nth-child(4n+4) { --circle-face: var(--ke-jewel-ember-surface,linear-gradient(145deg,#985334,#522d1b)); }
.ke-library-circle-face { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; width: 100%; height: 100%; border-radius: 50%; background: var(--circle-face); padding: 15%; box-sizing: border-box; text-align: center; }
.ke-library-circle-face strong { font: 600 clamp(14px,3.8vw,25px)/1.18 'Playfair Display',serif; overflow-wrap: anywhere; }
.ke-library-video-circle:focus-visible { outline: 3px solid #fff0ad; outline-offset: 5px; }
.ke-library-video-circle:hover { filter: brightness(1.12); }
.ke-library-toast { position: fixed; bottom: 110px; left: 50%; transform: translateX(-50%); padding: 12px 20px; background: #182d35; color: #fff; border: 1px solid #d7b56d; border-radius: 24px; z-index: 2500; }
@media(max-width:360px) { html.ke-rebrand-mode #scr-library { padding-inline: 12px; } .ke-library-circle-grid { gap: 24px 14px; } .ke-library-circle-face { padding: 12%; gap: 5px; } .ke-library-circle-face strong { font-size: 13px; } }
html.ke-rebrand-mode #t-library { display: flex !important; }
html.ke-rebrand-mode #t-why,
html.ke-rebrand-mode #t-break { display: none !important; }
html.ke-rebrand-mode #scr-library.active { display: flex !important; }
html.ke-rebrand-mode #scr-library { flex-direction: column; overflow-x: hidden; overflow-y: auto; transform: none !important; }
html.ke-rebrand-mode #scr-library .ke-library-hex :is(h1,p) { color: #fff !important; }
/* Full-screen shared player: title above the frame, picture flush with its inner edge. */
html.ke-rebrand-mode #video-modal { background: #0c2029; padding: max(68px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(30px,env(safe-area-inset-bottom)); box-sizing: border-box; }
html.ke-rebrand-mode #video-modal .vm-wrap { position: relative; width: min(96vw,calc((100dvh - 170px) * 2.25)); max-width: 1600px; padding: 0; box-sizing: border-box; }
html.ke-rebrand-mode #video-modal .vm-title { color: #fff; font-size: clamp(14px,2.2vw,24px); line-height: 1.25; width: 82%; margin: 0 auto 18px; }
html.ke-rebrand-mode #video-modal .vm-hex-frame { position: relative; isolation: isolate; width: 100%; padding-block: 6px; }
html.ke-rebrand-mode #video-modal .vm-hex-frame::before,
html.ke-rebrand-mode #video-modal .vm-hex-frame::after { content: ''; position: absolute; inset: 0; z-index: -1; clip-path: polygon(12% 0,88% 0,100% 50%,88% 100%,12% 100%,0 50%); background: conic-gradient(from 0deg,#ffe9a0 0 16.666%,#c28c35 16.666% 33.333%,#79501a 33.333% 50%,#9f7127 50% 66.666%,#f0ce78 66.666% 83.333%,#fff0ad 83.333% 100%); }
html.ke-rebrand-mode #video-modal .vm-hex-frame::after { inset: 6px; background: #10242d; }
html.ke-rebrand-mode #video-modal .vm-player { padding: 0; aspect-ratio: 16 / 9; width: 74%; margin-inline: auto; border-radius: 0; background: #000; }
html.ke-rebrand-mode #video-modal .vm-player video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
html.ke-rebrand-mode #video-modal .vm-close { background: #182d35; border: 2px solid #d7b56d; color: #fff0ad; top: max(12px,env(safe-area-inset-top)); right: max(16px,env(safe-area-inset-right)); margin: 0; }
html.ke-rebrand-mode #video-modal .vm-complete { bottom: 12px; padding: 8px 18px; width: min(300px,70%); }
html.ke-rebrand-mode #video-modal .ke-video-sound-prompt { min-width: 130px; top: 8px; padding: 9px 12px; font-size: 11px; }
@media(orientation:landscape) and (max-height:500px) {
  html.ke-rebrand-mode #video-modal { padding-block: 12px; }
  html.ke-rebrand-mode #video-modal .vm-wrap { width: min(90vw,calc((100dvh - 70px) * 2.25)); }
  html.ke-rebrand-mode #video-modal .vm-title { font-size: 13px; margin-bottom: 10px; }
}
/* Branch from the hexagon's lower sides, then continue vertically down each column. */
html.ke-rebrand-mode #scr-library .ke-library-main { position: relative; isolation: isolate; }
#ke-library-connectors { position: absolute; inset: 0; overflow: visible; pointer-events: none; z-index: 0; }
#ke-library-connectors line { stroke: #d7b56d; stroke-width: 2; stroke-linecap: round; opacity: .72; filter: drop-shadow(0 0 5px rgba(241,220,167,.28)); }
html.ke-rebrand-mode #scr-library .ke-library-hex,
html.ke-rebrand-mode #scr-library .ke-library-video-circle { z-index: 1; }

/* Keep the shared hexagon and controls together during phone landscape playback. */
html.ke-rebrand-mode #video-modal.vm-library-landscape .vm-wrap { display: block; height: auto; }
html.ke-rebrand-mode #video-modal.vm-library-landscape .vm-title { position: static; padding: 0; border-radius: 0; background: none; white-space: normal; max-width: none; }
html.ke-rebrand-mode #video-modal.vm-library-landscape .vm-player { height: auto; }
@media (max-width: 920px) and (orientation: portrait) {
  html.ke-rebrand-mode #video-modal.vm-library-landscape .vm-wrap { position: absolute; left: 50%; top: 50%; width: min(90dvh,calc((100dvw - 90px) * 2.25)); max-width: none; }
  html.ke-rebrand-mode #video-modal.vm-library-landscape .vm-title { font-size: 13px; margin-bottom: 10px; }
}

.vm-sequence-button { display: none; }
html.ke-rebrand-mode #video-modal .vm-sequence-button {
  display: grid; place-items: center; position: absolute; top: 50%; transform: translateY(-50%);
  width: 10%; height: clamp(32px,5vw,48px); padding: 2px; border: 0; border-radius: 999px;
  background: conic-gradient(from 215deg,#82591f,#d5aa50 18%,#fff0b4 31%,#b7802c 49%,#f0d488 69%,#916323 84%,#d7b56d);
  color: #fff; font: 600 clamp(10px,1.8vw,18px)/1 'Playfair Display',serif;
  isolation: isolate; z-index: 15; cursor: pointer;
}
html.ke-rebrand-mode #video-modal .vm-sequence-button::before {
  content: ''; position: absolute; inset: 2px; border-radius: inherit; z-index: -1;
  background: var(--ke-jewel-garnet-surface,linear-gradient(145deg,#71344e,#341828));
}
html.ke-rebrand-mode #video-modal .vm-back { left: 2%; }
html.ke-rebrand-mode #video-modal .vm-next { right: 2%; }
html.ke-rebrand-mode #video-modal .vm-sequence-button:disabled { opacity: .42; cursor: default; }
html.ke-rebrand-mode #video-modal .vm-sequence-button:focus-visible { outline: 2px solid #fff0ad; outline-offset: 2px; }

/* Full Library: a continuous stem with paired circles in each swipeable row. */
html.ke-rebrand-mode #scr-library .ke-library-main { max-width: 540px; }
html.ke-rebrand-mode #scr-library .ke-library-hex::after { background: var(--ke-jewel-azure-surface,linear-gradient(145deg,#135f8a,#06243a)); }
html.ke-rebrand-mode #scr-library .ke-library-video-circle { --circle-face: var(--ke-category-surface,var(--ke-jewel-azure-surface,linear-gradient(145deg,#135f8a,#06243a))); }
html.ke-rebrand-mode #scr-library .ke-library-category { position: relative; margin: 0 0 40px; min-width: 0; }
html.ke-rebrand-mode #scr-library .ke-library-category h2 { position: relative; z-index: 1; margin: 0 auto 12px; text-align: center; }
html.ke-rebrand-mode #scr-library :is(.ke-library-category-button,.ke-library-footer a) {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; box-sizing: border-box;
  border: 1px solid #d7b56d; border-radius: 999px; padding: 12px 22px;
  background: linear-gradient(145deg,#1a303a,#10242d); color: #fff !important;
  font: 600 18px/1.2 'Playfair Display',serif; text-align: center; text-decoration: none; cursor: pointer;
}
html.ke-rebrand-mode #scr-library .ke-library-category .ke-library-category-button { max-width: 84%; min-width: 180px; background: var(--ke-category-surface); background-color: var(--ke-category-color); }
html.ke-rebrand-mode #scr-library .ke-library-row-hint { position: relative; z-index: 1; width: fit-content; max-width: 100%; margin: 0 auto 6px; padding: 3px 8px; background: #10242d; color: #eee1c4 !important; text-align: center; font: 400 12px/1.4 'DM Sans',sans-serif; }
html.ke-rebrand-mode #scr-library .ke-library-video-row {
  --ke-library-gap: 24px;
  position: relative; display: flex; gap: var(--ke-library-gap); overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity; overscroll-behavior-x: contain; touch-action: pan-x pan-y;
  padding: 10px 6px 20px; scroll-padding-inline: 6px; -ms-overflow-style: none; scrollbar-width: none;
  background: linear-gradient(#d7b56db8,#d7b56db8) center calc(50% - 5px) / 100% 2px no-repeat;
}
html.ke-rebrand-mode #scr-library .ke-library-video-row::-webkit-scrollbar { display: none; height: 0; width: 0; }
html.ke-rebrand-mode #scr-library .ke-library-video-row .ke-library-video-circle { flex: 0 0 calc((100% - var(--ke-library-gap)) / 2); scroll-snap-align: start; min-width: 0; }
html.ke-rebrand-mode #scr-library [data-ke-library-long-title="true"] { --ke-circle-label-size: min(18px,4.6153846154vw); }
html.ke-rebrand-mode #scr-library .ke-library-duration { font: 500 12px/1.25 'DM Sans',sans-serif; color: #fff0d2; }
html.ke-rebrand-mode #scr-library .ke-library-inventory-note { position: relative; z-index: 1; width: 100%; margin: 0; padding: 20px 24px; border: 1px solid #d7b56d80; border-radius: 18px; background: #10242d; text-align: center; color: #eee1c4 !important; font: 400 15px/1.5 'DM Sans',sans-serif; }
html.ke-rebrand-mode #scr-library .ke-library-footer { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; padding-top: 12px; padding-bottom: 24px; }
html.ke-rebrand-mode #scr-library .ke-library-footer a { width: 100%; min-height: 76px; margin: 0; padding: 14px 16px; border-color: #d9b671; background: linear-gradient(145deg,#123555,#081c34); color: #fff0cf !important; font-size: clamp(15px,3.8vw,17px); }
html.ke-rebrand-mode #scr-library :is(.ke-library-category-button,.ke-library-footer a,.ke-library-video-row):focus-visible { outline: 3px solid #fff0ad; outline-offset: 3px; }
@media(max-width:360px) {
  html.ke-rebrand-mode #scr-library .ke-library-video-row { --ke-library-gap: 18px; }
  html.ke-rebrand-mode #scr-library .ke-library-duration { font-size: 11px; }
  html.ke-rebrand-mode #scr-library .ke-library-footer { gap: 14px; }
  html.ke-rebrand-mode #scr-library .ke-library-footer a { padding: 14px 12px; }
}