/* Staging reskin for the existing card database. The original markup and
   interactions stay intact; this file only changes its visual theme. */
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,wght@6..96,400;6..96,500;6..96,600;6..96,700&family=UnifrakturCook:wght@700&display=swap');
:root {
  --ink: #25242F;
  --night: #374881;
  --panel: #303246;
  --line: rgba(110, 133, 172, .32);
  --line2: rgba(196, 181, 130, .48);
  --text: #D9E2CF;
  --muted: #98B4D7;
  --dim: #9197A8;
  --jade: #4CA4F6;
  --blue: #4CA4F6;
  --gold: #BC9D52;
  --gold-dim: rgba(196, 181, 130, .36);
  --f-riv: #6E85AC;
  --f-cen: #98B4D7;
  --f-zhu: #C4B582;
  --f-thr: #BC9D52;
  --f-sun: #4CA4F6;
  --f-non: #9197A8;
  --chip: rgba(110, 133, 172, .2);
  --sheet: #2A2B38;
  --shadow: 0 22px 58px rgba(18, 22, 39, .42);
  color-scheme: dark;
}

body {
  background-color: var(--ink);
  background-image:
    radial-gradient(80rem 42rem at 50% -18rem, rgba(76, 164, 246, .13), transparent 72%),
    linear-gradient(rgba(217, 226, 207, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(217, 226, 207, .025) 1px, transparent 1px);
  background-size: auto, 48px 48px, 48px 48px;
  font-family: 'Bodoni Moda', Georgia, serif;
}

:focus-visible { outline-color: var(--gold); }
.banner {
  border-color: var(--gold-dim);
  background:
    radial-gradient(ellipse at 78% 50%, rgba(76, 164, 246, .18), transparent 48%),
    linear-gradient(110deg, #303246, #25242F 72%);
}
.banner .inset { border-color: rgba(228, 216, 180, .22); }
.banner .orn { color: var(--gold); }
.banner .bar { background: linear-gradient(90deg, transparent, var(--gold)); }
.stickyhead { box-shadow: 0 12px 26px rgba(0, 0, 0, .14); }
.card:hover, .card:focus-within { border-color: var(--gold-dim); }
.detail { border-color: var(--gold-dim); }
.k-stage, .pm-sheet { background-color: var(--sheet); }

/* Shared site navigation, added above the original database page. */
.site-header {
  height: 74px;
  padding: 0 clamp(18px, 4vw, 58px);
  display: flex;
  align-items: center;
  gap: 30px;
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(37, 36, 47, .96);
  border-bottom: 1px solid rgba(196,181,130,.34);
  box-shadow: 0 8px 28px rgba(0,0,0,.22);
  backdrop-filter: blur(18px);
}
.site-header a { color: inherit; text-decoration: none; }
.brand { display: inline-flex; align-items: center; gap: 12px; min-width: 225px; }
.brand-mark {
  width: 40px; height: 40px; flex: 0 0 40px;
  object-fit: contain; border: 0; border-radius: 0; display: block; box-shadow: none;
}
.brand strong { display: block; color: var(--gold); font: 27px/1.05 'UnifrakturCook',Georgia,serif; letter-spacing: .025em; white-space: nowrap; }
.brand small { display: block; margin-top: 4px; color: var(--muted); font: 9px/1.2 'Bodoni Moda',Georgia,serif; letter-spacing: .2em; white-space: nowrap; }
.main-nav { display: flex; align-items: center; justify-content: center; gap: clamp(15px,2.2vw,32px); flex: 1; }
.main-nav>a,.studio-nav-trigger {
  position:relative; padding:10px 2px; color:#d5d8dc;
  font:15px 'Cormorant Garamond',Georgia,serif; white-space:nowrap; transition:color .2s ease;
}
.main-nav>a:hover,.studio-nav-trigger:hover { color:var(--gold); }
.main-nav>a[aria-current="page"] { color:var(--gold); }
.main-nav>a[aria-current="page"]::after { position:absolute; right:0; bottom:2px; left:0; height:2px; content:""; background:linear-gradient(90deg,transparent,var(--gold),transparent); }
.main-nav>a[aria-current="page"]::before { position:absolute; bottom:-3px; left:50%; width:6px; height:6px; content:""; background:var(--gold); transform:translateX(-50%) rotate(45deg); }
.studio-nav { position:relative; color:#d5d8dc; white-space:nowrap; }
.studio-nav-trigger { display:inline-flex; align-items:center; gap:9px; border:0; padding:10px 2px; background:transparent; color:inherit; cursor:pointer; }
.studio-nav-trigger::after { width:7px; height:7px; margin-top:-4px; border-right:1.5px solid var(--gold); border-bottom:1.5px solid var(--gold); content:""; transform:rotate(45deg); transition:transform .18s ease,margin .18s ease; }
.studio-nav:hover .studio-nav-trigger::after,.studio-nav:focus-within .studio-nav-trigger::after { margin-top:4px; transform:rotate(225deg); }
.studio-nav:hover .studio-nav-trigger,.studio-nav:focus-within .studio-nav-trigger { color:var(--gold); }
.studio-nav-menu { visibility:hidden; opacity:0; pointer-events:none; position:absolute; top:100%; left:-14px; z-index:70; min-width:210px; padding:9px; border:1px solid var(--line2); border-radius:14px; background:var(--panel); box-shadow:0 18px 44px rgba(0,0,0,.38); transform:translateY(7px); transition:opacity .16s ease,transform .16s ease,visibility .16s; }
.studio-nav:hover .studio-nav-menu,.studio-nav:focus-within .studio-nav-menu { visibility:visible; opacity:1; pointer-events:auto; transform:translateY(0); }
.studio-nav-menu a { display:block; padding:10px 12px; border-radius:9px; color:var(--text); font:13px 'Cormorant Garamond',Georgia,serif; }
.studio-nav-menu a:hover,.studio-nav-menu a[aria-current="page"] { color:var(--gold); background:rgba(196,181,130,.1); }
.nav-caret { margin-left: 6px; color: var(--gold-soft,#a88e5b); }
.header-tools { display: none; align-items: center; gap: 14px; }
.header-seal { width: 31px; height: 31px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; color: var(--gold); font-size: 14px; }
.mobile-menu { position: relative; }
.mobile-menu > summary { list-style: none; cursor: pointer; }
.mobile-menu > summary::-webkit-details-marker { display: none; }
.mobile-nav { display: none; position: absolute; top: calc(100% + 14px); right: 0; z-index: 60; width: min(270px, calc(100vw - 28px)); padding: 7px; border: 1px solid var(--line2); border-radius: 10px; background: var(--panel); box-shadow: 0 18px 48px rgba(0,0,0,.48); }
.mobile-menu[open] .mobile-nav { display: grid; }
.mobile-nav a { display: block; padding: 11px 13px; color: var(--text); font: 15px/1.3 'Bodoni Moda', Georgia, serif; }
.mobile-nav a + a { border-top: 1px solid var(--line); }
.mobile-nav a:hover, .mobile-nav a:focus-visible { color: var(--gold); background: rgba(76,164,246,.12); }
.mobile-nav a[aria-current="page"] { border-left:3px solid var(--gold); background:rgba(196,181,130,.08); color:var(--gold); }
.mobile-nav-group { padding:10px 13px 5px; color:var(--gold); font:700 10px/1.3 'Bodoni Moda',Georgia,serif; letter-spacing:.14em; text-transform:uppercase; }
.mobile-nav-group+a { border-top:0 !important; }
.stickyhead { top: 74px; }
@media (min-width:1001px) { .cols { height: calc(100vh - var(--stickyH,168px) - 98px); } }
@media (max-width:980px) {
  .brand { min-width: auto; }
  .brand small { display: none; }
  .main-nav { gap: 14px; }
  .main-nav>a,.studio-nav-trigger { font-size: 11px; }
}
@media (max-width:720px) {
  .site-header { height: auto; min-height: 68px; padding: 11px 17px; flex-wrap: wrap; gap: 7px 12px; }
  .brand { flex: 1; }
  .brand strong { font-size: 14px; }
  .brand-mark { width: 36px; height: 36px; flex-basis: 36px; }
  .header-tools { display: flex; margin-left: auto; }
  .main-nav { display: none; }
  .stickyhead { top: 68px; }
}

/* Compact collection cards with a consistent ornamental frame. */
.grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 9px; }
.card {
  display: flex; flex-direction: column; justify-content: flex-start;
  border-radius: 9px;
  border-color: rgba(228,216,180,.3);
  background: linear-gradient(155deg, rgba(228,216,180,.09), transparent 42%), #101018;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025), 0 7px 16px rgba(0,0,0,.2);
}
.card::before {
  content: ""; position: absolute; inset: 4px; z-index: 3; pointer-events: none;
  border-radius: 6px; opacity: .78;
  background:
    linear-gradient(var(--gold),var(--gold)) left top/14px 1px no-repeat,
    linear-gradient(var(--gold),var(--gold)) left top/1px 14px no-repeat,
    linear-gradient(var(--gold),var(--gold)) right top/14px 1px no-repeat,
    linear-gradient(var(--gold),var(--gold)) right top/1px 14px no-repeat,
    linear-gradient(var(--gold),var(--gold)) left bottom/14px 1px no-repeat,
    linear-gradient(var(--gold),var(--gold)) left bottom/1px 14px no-repeat,
    linear-gradient(var(--gold),var(--gold)) right bottom/14px 1px no-repeat,
    linear-gradient(var(--gold),var(--gold)) right bottom/1px 14px no-repeat,
    radial-gradient(circle at 10% 18%,rgba(228,216,180,.85) 0 1px,transparent 2px),
    radial-gradient(circle at 90% 32%,rgba(228,216,180,.75) 0 1px,transparent 2px),
    radial-gradient(circle at 16% 76%,rgba(228,216,180,.62) 0 1px,transparent 2px),
    radial-gradient(circle at 86% 82%,rgba(228,216,180,.8) 0 1px,transparent 2px);
}
.card::after {
  content: ""; position: absolute; z-index: 4; pointer-events: none;
  top: 1px; left: 50%; width: 8px; height: 8px; transform: translateX(-50%);
  background: var(--gold);
  clip-path: polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);
  filter: drop-shadow(0 0 4px rgba(228,216,180,.95)) drop-shadow(0 0 8px rgba(228,216,180,.6));
}
.card[aria-current="true"] { box-shadow: 0 0 0 1px rgba(228,216,180,.42), 0 9px 20px rgba(0,0,0,.3); }
.thumb { aspect-ratio: .84; background: radial-gradient(ellipse at 50% 35%, rgba(88,107,154,.22), #0b0d14 76%); }
.thumb img { object-fit: cover; object-position: center; }
.card-hero { min-height: 136px; justify-content: flex-end; }
.card-hero .thumb {
  position: absolute; inset: 0; aspect-ratio: auto; padding: 0; z-index: 0;
  background: linear-gradient(180deg,#111723,#080a10);
}
.card-hero .thumb img { object-fit: cover; object-position: center 20%; }
.card-hero .thumb::after {
  content: ""; position: absolute; inset: 24% 0 0; pointer-events: none;
  background: linear-gradient(180deg,transparent 0%,rgba(7,9,15,.16) 35%,rgba(7,9,15,.94) 100%);
}
.card-hero .tier, .card-hero .fdot { z-index: 5; }
.card-hero .cname {
  position: relative; z-index: 2; margin-top: auto; height: 63px; flex: 0 0 63px;
  padding: 29px 7px 7px; color: #f0eee7;
  text-shadow: 0 1px 3px rgba(0,0,0,.9);
}
.card-hero .cname-en { -webkit-line-clamp: 2; }
.card-talent .thumb, .card-equip .thumb, .card-effect .thumb, .card-summon .thumb {
  aspect-ratio: 1 / 1; padding: 6px;
  background: radial-gradient(ellipse at 50% 34%, rgba(228,216,180,.1), #0b0d14 78%);
}
.card-talent .thumb img, .card-equip .thumb img, .card-effect .thumb img, .card-summon .thumb img {
  object-fit: cover; object-position: center; border-radius: 5px;
  box-shadow: 0 0 0 1px rgba(228,216,180,.2);
}
.card-talent .thumb, .card-equip .thumb { padding: 5px; }
.card-summon .thumb { aspect-ratio: .92; padding: 3px; }
.cname {
  height: 65px; flex: 0 0 65px; padding: 6px 6px 7px;
  font-size: 10px; line-height: 1.25; overflow: hidden;
  overflow-wrap: normal; word-break: normal;
}
.cname-en {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow: hidden; overflow-wrap: normal; word-break: normal;
}
.cname em {
  display: block; max-width: 100%; margin-top: 1px; overflow: hidden;
  font-size: 9px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap;
}
.dart { isolation: isolate; }
.dart::after {
  content: ""; position: absolute; inset: 7px; z-index: 4; pointer-events: none;
  border: 1px solid rgba(228,216,180,.42);
  background:
    linear-gradient(var(--gold),var(--gold)) left top/18px 1px no-repeat,
    linear-gradient(var(--gold),var(--gold)) left top/1px 18px no-repeat,
    linear-gradient(var(--gold),var(--gold)) right top/18px 1px no-repeat,
    linear-gradient(var(--gold),var(--gold)) right top/1px 18px no-repeat,
    linear-gradient(var(--gold),var(--gold)) left bottom/18px 1px no-repeat,
    linear-gradient(var(--gold),var(--gold)) left bottom/1px 18px no-repeat,
    linear-gradient(var(--gold),var(--gold)) right bottom/18px 1px no-repeat,
    linear-gradient(var(--gold),var(--gold)) right bottom/1px 18px no-repeat;
  opacity: .72;
}
.dart img { position: relative; z-index: 1; border: 1px solid rgba(228,216,180,.72); box-shadow: 0 8px 28px rgba(0,0,0,.42); }
.dart { box-sizing: border-box; align-items: center; padding: 18px 18px 20px; }
.dart img { max-width: 100%; height: auto; object-fit: contain; }
.patch-note { padding:10px 12px;border-left:2px solid var(--gold);border-radius:0 9px 9px 0;background:rgba(201,177,112,.09);color:var(--muted);font-size:13px;line-height:1.65;white-space:pre-line; }
.cast-time { margin:4px 0 8px;color:var(--gold);font-size:11px;font-variant-numeric:tabular-nums; }
.dart-awakening {
  min-height: 310px;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(227,191,111,.22), transparent 55%),
    linear-gradient(155deg, rgba(32,25,22,.92), rgba(8,10,18,.98));
}
.dart-awakening .foil-frame {
  position: relative; z-index: 1; isolation: isolate; overflow: hidden;
  width: min(100%, 238px); padding: 8px; border-radius: 15px;
  background: linear-gradient(135deg, #fff1c1 0%, #a77c39 16%, #fff3cb 27%, #75532e 45%, #f7dea0 61%, #806037 78%, #fff0c1 100%);
  box-shadow: 0 0 0 1px rgba(255,246,213,.55), 0 0 24px rgba(246,209,127,.32), 0 14px 32px rgba(0,0,0,.62);
}
.dart-awakening .foil-frame::before,
.dart-awakening .foil-frame::after {
  content: ""; position: absolute; inset: 8px; z-index: 2; pointer-events: none;
  border-radius: 8px;
}
.dart-awakening .foil-frame::before {
  background:
    linear-gradient(118deg, transparent 18%, rgba(255,244,192,.06) 30%, rgba(255,255,255,.48) 37%, rgba(173,211,255,.18) 41%, transparent 51%),
    radial-gradient(ellipse at 18% 15%, rgba(255,255,220,.45), transparent 28%),
    radial-gradient(ellipse at 83% 78%, rgba(255,190,95,.22), transparent 34%);
  mix-blend-mode: screen; opacity: .8;
}
.dart-awakening .foil-frame::after {
  inset: 3px; z-index: 3; border: 1px solid rgba(255,243,201,.75);
  background:
    radial-gradient(circle at 9% 12%, #fff8d8 0 1px, transparent 2px),
    radial-gradient(circle at 91% 14%, #fff8d8 0 1px, transparent 2px),
    radial-gradient(circle at 10% 88%, #e8c777 0 1px, transparent 2px),
    radial-gradient(circle at 90% 89%, #e8c777 0 1px, transparent 2px);
}
.dart-awakening .foil-frame img {
  display: block; width: 100%; max-height: 345px; border: 1px solid rgba(255,243,201,.78);
  border-radius: 8px; box-shadow: 0 4px 18px rgba(0,0,0,.45);
}
.mobile-bottom-nav,.mobile-hub-overlay { display:none; }
@media(max-width:720px) {
  body { padding-bottom:calc(92px + env(safe-area-inset-bottom)); }
  .site-header .header-tools { display:none; }
  .mobile-bottom-nav { position:fixed; z-index:90; right:12px; bottom:calc(8px + env(safe-area-inset-bottom)); left:12px; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); align-items:stretch; min-height:68px; padding:5px 7px calc(5px + env(safe-area-inset-bottom)); border:1px solid rgba(196,181,130,.3); border-radius:20px; background:rgba(37,36,47,.96); color:#a7afb7; box-shadow:0 12px 34px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.04); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
  .mobile-bottom-item { position:relative; display:flex; min-width:0; min-height:52px; align-items:center; justify-content:center; flex-direction:column; gap:2px; border:0; border-radius:14px; padding:4px 1px; background:transparent; color:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; }
  .mobile-bottom-item svg,.mobile-bottom-item>img { width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
  .mobile-bottom-item>img { object-fit:contain; filter:drop-shadow(0 1px 3px rgba(188,157,82,.32)); }
  .mobile-bottom-item span { max-width:100%; overflow:hidden; font:600 9px/1.2 Inter,Arial,sans-serif; text-overflow:ellipsis; white-space:nowrap; }
  .mobile-bottom-item.is-active { background:linear-gradient(145deg,rgba(196,181,130,.16),rgba(196,181,130,.07)); color:#e4cc86; box-shadow:inset 0 0 0 1px rgba(196,181,130,.18); }
  .mobile-bottom-item.is-active::before { position:absolute; top:-1px; left:50%; width:16px; height:2px; border-radius:2px; background:#d3b661; content:""; transform:translateX(-50%); }
  .mobile-hub-overlay[hidden] { display:none; }
  .mobile-hub-overlay { position:fixed; z-index:89; inset:0; display:flex; align-items:flex-end; justify-content:center; padding:16px 12px calc(88px + env(safe-area-inset-bottom)); background:rgba(12,14,20,.58); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px); }
  .mobile-hub-backdrop { position:absolute; inset:0; width:100%; height:100%; border:0; background:transparent; }
  .mobile-hub-sheet { position:relative; z-index:1; width:min(100%,460px); max-height:min(72dvh,540px); overflow-y:auto; padding:16px 16px 18px; border:1px solid rgba(196,181,130,.34); border-radius:20px; background:linear-gradient(145deg,#343444,#25242f 72%); color:#d9e2cf; box-shadow:0 20px 65px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.05); animation:mobile-hub-rise .2s ease-out both; }
  .mobile-hub-eyebrow { display:flex; align-items:center; gap:6px; color:#c4b582; font:700 9px/1.3 Inter,Arial,sans-serif; letter-spacing:.1em; }
  .mobile-hub-eyebrow img { width:16px; height:16px; object-fit:contain; }
  .mobile-hub-eyebrow span { color:#9da5ae; font-weight:500; }
  .mobile-hub-sheet>header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:1px 0 13px; }
  .mobile-hub-sheet h2 { margin:0; color:#f0eee7; font:600 19px/1.25 Inter,Arial,sans-serif; }
  .mobile-hub-close { width:36px; height:36px; border:1px solid rgba(196,181,130,.22); border-radius:12px; background:rgba(255,255,255,.04); color:#c4b582; font-size:22px; line-height:1; cursor:pointer; }
  .mobile-hub-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
  .mobile-hub-tile { display:grid; min-width:0; min-height:70px; align-items:center; grid-template-columns:34px minmax(0,1fr); grid-template-rows:auto auto; column-gap:8px; row-gap:3px; padding:10px; border:1px solid rgba(196,181,130,.19); border-radius:13px; background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(12,14,20,.12)); text-align:left; }
  .mobile-hub-icon { display:grid; width:30px; height:30px; grid-row:1 / span 2; place-items:center; border:1px solid rgba(196,181,130,.2); border-radius:10px; background:rgba(196,181,130,.08); color:#d1b76b; font-size:19px; line-height:1; }
  .mobile-hub-tile strong { width:100%; overflow:hidden; color:#e3e6dc; font:600 10px/1.2 Inter,Arial,sans-serif; text-overflow:ellipsis; white-space:nowrap; }
  .mobile-hub-tile small { display:block; overflow:hidden; color:#9ca6b2; font:8px/1.25 Inter,Arial,sans-serif; text-overflow:ellipsis; white-space:nowrap; }
  .scroll-companion { right:10px; bottom:calc(98px + env(safe-area-inset-bottom)); z-index:40; }
}
@media(max-width:380px) { .mobile-bottom-item span { font-size:8px; } .mobile-hub-grid { gap:6px; } .mobile-hub-tile { min-height:78px; } .mobile-hub-tile strong { font-size:8px; } }
@keyframes mobile-hub-rise { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
.database-embedded body { padding-bottom:0 !important; }
.database-embedded body>.site-header,.database-embedded #mobileNavRoot { display:none !important; }
.database-embedded .wrap { padding-bottom:12px; }
.database-embedded .stickyhead { top:0; }
@media(min-width:1001px) {
  .database-embedded .cols { height:calc(100dvh - var(--stickyH,168px) - 24px); min-height:0; }
  .database-embedded #list { height:100%; min-height:0; overflow-y:auto; overflow-x:hidden; padding-right:10px; scrollbar-gutter:stable; }
  .database-embedded .cols>aside { height:100%; min-height:0; }
  .database-embedded .detail { position:static; top:auto; align-self:start; height:auto; min-height:0; max-height:100%; overflow-y:auto; overflow-x:hidden; scrollbar-gutter:stable; }
}
/* Distinct gold-and-teal rails for the independently scrolling database panes. */
.database-embedded #list,.database-embedded .detail {
  scrollbar-width:thin;
  scrollbar-color:#c7aa61 rgba(116,174,187,.1);
}
.database-embedded #list::-webkit-scrollbar,.database-embedded .detail::-webkit-scrollbar { width:10px; height:10px; }
.database-embedded #list::-webkit-scrollbar-track,.database-embedded .detail::-webkit-scrollbar-track {
  margin-block:5px;
  border:1px solid rgba(116,174,187,.12);
  border-radius:999px;
  background:linear-gradient(180deg,rgba(116,174,187,.08),rgba(196,170,97,.07));
}
.database-embedded #list::-webkit-scrollbar-thumb,.database-embedded .detail::-webkit-scrollbar-thumb {
  min-height:34px;
  border:2px solid transparent;
  border-radius:999px;
  background:linear-gradient(180deg,#e8d18c 0%,#b99a50 48%,#7ba6a4 100%);
  background-clip:padding-box;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
}
.database-embedded #list::-webkit-scrollbar-thumb:hover,.database-embedded .detail::-webkit-scrollbar-thumb:hover {
  background:linear-gradient(180deg,#fff0b3 0%,#d9b85c 52%,#8dc4c1 100%);
  background-clip:padding-box;
  box-shadow:0 0 9px rgba(205,180,105,.36),inset 0 0 0 1px rgba(255,255,255,.3);
}
.database-embedded #list::-webkit-scrollbar-corner,.database-embedded .detail::-webkit-scrollbar-corner { background:transparent; }
@media (prefers-reduced-motion: no-preference) {
  .dart-awakening .foil-frame::before { animation: foil-glint 5s ease-in-out infinite alternate; }
  @keyframes foil-glint { from { transform: translateX(-5%); } to { transform: translateX(5%); } }
}