:root {
  color-scheme: dark;
  --ink: #13191e;
  --muted: #647079;
  --paper: #e8e9e4;
  --dark: #0a1015;
  --cyan: #68f2e3;
  --orange: #ff8059;
  --line: #c8ccc8;
  --line-dark: #2a353d;
  --content: 1220px;
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body: "Manrope", "Avenir Next", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 78px; }
body { margin: 0; color: var(--ink); background: #f4f4ef; font: 15px/1.65 var(--body); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
::selection { color: var(--dark); background: var(--cyan); }

.skip-link { position: fixed; z-index: 1000; top: -60px; left: 16px; padding: 10px 14px; background: #f4f4ef; }
.skip-link:focus { top: 12px; }
.site-header { position: sticky; z-index: 100; top: 0; height: 68px; border-bottom: 1px solid #263139; background: rgba(10, 16, 21, .96); color: #f0f2ed; }
.header-inner { width: min(var(--content), calc(100% - 64px)); height: 100%; margin: auto; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand-mark { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--cyan); color: var(--cyan); font: 600 17px/1 var(--display); }
.brand-copy { min-width: 0; display: grid; gap: 3px; }
.brand-name { font: 700 22px/1 var(--display); }
.brand-description { color: #aab4b8; font-size: 12px; font-weight: 700; line-height: 1.25; }
.primary-nav { display: flex; align-items: center; gap: 31px; font-size: 13px; font-weight: 700; }
.primary-nav a { color: #aab4b8; transition: color .18s ease; }
.primary-nav a:hover, .primary-nav a:focus-visible { color: #fff; }
.primary-nav .nav-github { color: var(--cyan); }
.nav-github span { margin-left: 4px; }
.menu-toggle { display: none; }

.hero { position: relative; isolation: isolate; height: min(730px, calc(100svh - 138px)); min-height: 570px; overflow: hidden; border-bottom: 1px solid #223039; background: var(--dark); color: #f2f4ee; }
.hero::before { position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, var(--dark) 0%, rgba(10,16,21,.96) 32%, rgba(10,16,21,.34) 73%, rgba(10,16,21,.04)); content: ""; }
.hero-grid { position: absolute; z-index: -2; inset: 0; opacity: .25; background-image: linear-gradient(rgba(181,211,209,.11) 1px, transparent 1px), linear-gradient(90deg, rgba(181,211,209,.11) 1px, transparent 1px); background-size: 54px 54px; mask-image: linear-gradient(#000, transparent 92%); }
.hero-content { position: relative; z-index: 2; width: min(var(--content), calc(100% - 64px)); margin: auto; padding-top: 91px; }
.eyebrow, .section-index { margin: 0; color: #87949a; font: 500 10px/1.4 var(--mono); text-transform: uppercase; }
.eyebrow { display: flex; align-items: center; gap: 10px; }
.signal-dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px rgba(104,242,227,.75); }
.eyebrow-divider, .section-index span { color: var(--orange); }
.hero h1 { margin: 23px 0 0 -5px; color: #f2f4ee; font: 800 138px/.82 var(--display); }
.hero-subtitle { margin: 19px 0 0; color: var(--cyan); font: 600 32px/1.15 var(--display); }
.hero-copy { max-width: 525px; margin: 16px 0 0; color: #aab4b8; font-size: 14px; line-height: 1.85; }
.hero-links { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 27px; }
.text-link { display: inline-flex; align-items: center; gap: 9px; min-height: 30px; color: #b9c2c4; font-size: 12px; font-weight: 800; }
.text-link span { color: var(--orange); transition: transform .18s ease; }
.text-link:hover span { transform: translate(2px, 2px); }
.text-link-bright { color: var(--cyan); }
.hero-footnote { margin: 43px 0 0; color: #78868c; font: 10px/1.5 var(--mono); }
.hero-footnote span { margin: 0 6px; color: var(--orange); }
.hero-index { position: absolute; right: max(32px, calc((100% - var(--content))/2)); bottom: 20px; left: max(32px, calc((100% - var(--content))/2)); display: flex; justify-content: space-between; color: #718087; font: 9px/1.4 var(--mono); }

/* The keep, curtain wall, and towers are assembled from bounded blocks. */
.castle-scene { position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; width: min(60%, 900px); overflow: hidden; opacity: .96; mask-image: linear-gradient(90deg, transparent, #000 34%); }
.scene-glow { position: absolute; right: 4%; bottom: 3%; width: 62%; height: 63%; background: radial-gradient(ellipse, rgba(50,193,184,.14), transparent 69%); }
.fortress { position: absolute; right: 0; bottom: 4%; width: min(760px, 100%); height: 91%; filter: drop-shadow(0 0 22px rgba(104,242,227,.12)); }
.fortress-wall, .fortress-tower, .fortress-keep { position: absolute; border: 1px solid rgba(104,242,227,.62); background-color: rgba(18,34,40,.76); background-image: linear-gradient(90deg, transparent calc(100% - 1px), rgba(104,242,227,.22) calc(100% - 1px)), linear-gradient(0deg, transparent calc(100% - 1px), rgba(104,242,227,.19) calc(100% - 1px)); background-size: 42px 100%, 100% 35px; box-shadow: inset 0 0 34px rgba(42,164,160,.06), 0 0 18px rgba(104,242,227,.08); }
.fortress-wall { right: 9%; bottom: 0; left: 8%; height: 34%; clip-path: polygon(0 9%,5% 9%,5% 0,13% 0,13% 9%,21% 9%,21% 0,29% 0,29% 9%,37% 9%,37% 0,45% 0,45% 9%,53% 9%,53% 0,61% 0,61% 9%,69% 9%,69% 0,77% 0,77% 9%,85% 9%,85% 0,93% 0,93% 9%,100% 9%,100% 100%,0 100%); }
.fortress-tower { bottom: 20%; width: 19%; height: 43%; }
.fortress-tower::before, .fortress-keep::before { position: absolute; top: -19px; right: -1px; left: -1px; height: 19px; border: 1px solid rgba(104,242,227,.72); background: repeating-linear-gradient(90deg, rgba(27,58,62,.95) 0 24px, transparent 24px 38px); content: ""; }
.fortress-tower .scene-tag { top: -37px; right: auto; left: 50%; transform: translateX(-50%); font-size: 8px; white-space: nowrap; }
.tower-west { left: 10%; }
.tower-east { right: 10%; height: 46%; }
.fortress-keep { z-index: 1; bottom: 25%; left: 37%; width: 27%; height: 60%; border-color: rgba(104,242,227,.82); background-color: rgba(14,28,34,.92); background-size: 47px 100%, 100% 39px; box-shadow: inset 0 0 45px rgba(48,190,180,.09), 0 0 27px rgba(104,242,227,.1); }
.fortress-keep::before { top: -21px; height: 21px; background: repeating-linear-gradient(90deg, rgba(28,64,67,.98) 0 27px, transparent 27px 43px); }
.fortress-keep span, .fortress-tower span { position: absolute; right: 0; left: 0; height: 1px; }
.fortress-keep span { top: 19%; background: rgba(104,242,227,.7); box-shadow: 0 0 12px rgba(104,242,227,.4); }
.fortress-tower span { top: 31%; background: rgba(255,128,89,.75); box-shadow: 0 0 11px rgba(255,128,89,.4); }
.fortress-gate { position: absolute; z-index: 2; bottom: 0; left: 44%; width: 12%; height: 17%; border: 1px solid rgba(255,128,89,.76); border-bottom: 0; border-radius: 60px 60px 0 0; background: rgba(6,13,18,.94); box-shadow: 0 0 20px rgba(255,128,89,.1); }
.fortress-foundation { position: absolute; right: 0; bottom: 0; left: 0; height: 1px; background: var(--cyan); box-shadow: 0 0 22px rgba(104,242,227,.7); }
.scene-tag, .scene-coordinate { position: absolute; color: rgba(155,190,191,.75); font: 9px/1.4 var(--mono); text-transform: uppercase; }
.tag-one { color: var(--cyan); }
.scene-coordinate { right: 7%; bottom: 15%; color: rgba(255,128,89,.8); }
.architecture { position: relative; width: min(625px, 100%); margin: 22px 0 0; display: grid; grid-template-columns: minmax(0, 1fr); filter: drop-shadow(0 0 18px rgba(104,242,227,.1)); }
.architecture-layer { min-width: 0; display: grid; gap: 4px; padding: 10px 16px 11px; border: 1px solid rgba(104,242,227,.48); border-left: 3px solid rgba(104,242,227,.76); background: linear-gradient(110deg, rgba(17,34,40,.94), rgba(13,24,30,.84)); box-shadow: inset 0 0 26px rgba(42,164,160,.06), 0 0 14px rgba(104,242,227,.05); }
.layer-kicker { color: #8da7a7; font: 8px/1.3 var(--mono); text-transform: uppercase; }
.architecture-layer strong { color: #e5efea; font: 600 17px/1.15 var(--display); }
.layer-detail { color: #9aabad; font: 8px/1.45 var(--mono); }
.applications-layer { border-left-color: #a5c9c3; }
.architecture-middle-row, .architecture-relationships { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.architecture-middle-row { align-items: stretch; }
.architecture-relationships { min-height: 33px; align-items: center; text-align: center; }
.castle-relationship { color: #d9a18e; font: 7px/1.45 var(--mono); text-transform: uppercase; }
.architecture-link, .architecture-foundation-link { display: flex; flex-direction: column-reverse; align-items: center; justify-content: center; gap: 2px; color: #9aabad; font: 7px/1.35 var(--mono); text-align: center; text-transform: uppercase; }
.architecture-link { min-width: 0; }
.castle-layer { border-color: rgba(255,128,89,.7); border-left-color: var(--orange); background: linear-gradient(110deg, rgba(48,34,31,.95), rgba(26,28,29,.92)); }
.castle-layer .layer-kicker { color: #d9a18e; }
.castle-layer .layer-detail { color: #d5b2a5; }
.middleware-layer { border-left-color: #a5c9c3; }
.platform-layer { border-color: rgba(133,157,169,.55); border-left-color: #849ba8; background: rgba(19,28,34,.94); }
.bsp-layer { border-left-color: #84a9b7; }
.architecture-foundation-link { min-height: 33px; }
.architecture-connector { position: relative; width: 1px; height: 9px; flex: 0 0 9px; align-self: center; background: rgba(104,242,227,.62); box-shadow: 0 0 8px rgba(104,242,227,.35); }
.architecture-connector::before { position: absolute; top: -1px; left: 50%; transform: translateX(-50%); border-right: 3px solid transparent; border-bottom: 4px solid var(--cyan); border-left: 3px solid transparent; content: ""; }

.section-wrap, .specimen-inner, .footer-main, .footer-bottom { width: min(var(--content), calc(100% - 64px)); margin: 0 auto; }
.section-light { background: var(--paper); }
.design-section { padding-top: 101px; }
.design-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 92px; padding-bottom: 86px; }
.section-index { color: #65737a; }
.section-index span { margin: 0 5px; }
.section-heading h2, .modules-heading h2, .start-copy h2 { margin: 22px 0 0; font: 700 62px/.94 var(--display); }
.design-copy .lead { max-width: 610px; margin: 27px 0 0; color: #293238; font-size: 18px; font-weight: 600; line-height: 1.7; }
.etl-credit { max-width: 570px; margin: 15px 0 0; color: #667279; font-size: 12px; line-height: 1.8; }
.etl-credit a { color: #126b65; font-weight: 800; text-decoration: underline; text-decoration-color: rgba(18,107,101,.35); text-underline-offset: 3px; }
.principle-rows { margin-top: 31px; border-top: 1px solid #c4c9c5; }
.principle-row { display: grid; grid-template-columns: 43px 1fr; gap: 13px; padding: 15px 0; border-bottom: 1px solid #c4c9c5; }
.principle-code { padding-top: 3px; color: #e76b4b; font: 500 10px/1.5 var(--mono); }
.principle-row h3 { margin: 0; font-size: 13px; font-weight: 800; }
.principle-row p { margin: 3px 0 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
.specimen-strip { border-top: 1px solid #c4c9c5; background: #dcdfda; }
.specimen-inner { min-height: 105px; display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; }
.specimen-inner > div { min-height: 46px; padding-left: 22px; border-left: 1px solid #bfc5c0; }
.specimen-inner > div:first-child { padding-left: 0; border-left: 0; }
.specimen-value, .specimen-label { display: block; }
.specimen-value { font: 700 26px/.95 var(--display); }
.specimen-label { margin-top: 6px; color: #657078; font: 9px/1.3 var(--mono); text-transform: uppercase; }

.modules-section { overflow: hidden; padding: 100px 0 80px; background: var(--dark); color: #eff2ec; }
.modules-heading { display: flex; align-items: end; justify-content: space-between; gap: 48px; margin-bottom: 47px; }
.section-index-dark { color: #7d8b91; }
.modules-heading h2 { margin-top: 20px; color: #f0f3ed; }
.modules-intro { max-width: 340px; margin: 0 4px 5px 0; color: #95a1a5; font-size: 14px; line-height: 1.8; }
.module-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line-dark); }
.module-item { min-width: 0; min-height: 77px; display: grid; grid-template-columns: 32px minmax(125px,.72fr) minmax(170px,1.5fr) 105px 17px; gap: 11px; align-items: center; border-bottom: 1px solid var(--line-dark); transition: background .18s ease, padding .18s ease; }
.module-item:nth-child(odd) { padding-right: 18px; }
.module-item:nth-child(even) { padding-left: 18px; border-left: 1px solid var(--line-dark); }
.module-item:hover, .module-item:focus-visible { padding-right: 10px; padding-left: 10px; background: #101a20; outline: 0; }
.module-number { color: #68767e; font: 10px/1 var(--mono); }
.module-name { color: #e7ece7; font-size: 12px; font-weight: 800; }
.module-desc { color: #88969b; font-size: 12px; line-height: 1.45; }
.module-path { color: #6c8386; font: 9px/1 var(--mono); }
.module-arrow { color: var(--orange); font-size: 13px; transition: transform .18s ease; }
.module-item:hover .module-arrow { transform: translate(2px,-2px); }
.module-footnote { display: flex; align-items: center; gap: 9px; margin: 23px 0 0; color: #829095; font: 9px/1.4 var(--mono); text-transform: uppercase; }
.module-footnote .signal-dot { width: 6px; height: 6px; flex-basis: 6px; }
.module-footnote-separator { color: var(--orange); }

.start-section { padding: 104px 0 112px; }
.start-layout { display: grid; grid-template-columns: .82fr 1.18fr; gap: 80px; align-items: center; }
.start-copy h2 { margin-top: 22px; }
.start-copy > p:not(.section-index) { max-width: 420px; margin: 20px 0 18px; color: #606d73; font-size: 14px; line-height: 1.8; }
.text-link-dark { color: #172329; }
.text-link-dark span { color: #e76b4b; }
.code-panel { min-width: 0; border: 1px solid #26343c; background: #0d151b; color: #d9e3e0; box-shadow: 12px 12px 0 #d1d4cf; }
.code-panel-top, .code-panel-bottom { min-height: 40px; display: flex; align-items: center; justify-content: space-between; padding: 0 17px; color: #7e8c91; font: 9px/1 var(--mono); }
.code-panel-top { border-bottom: 1px solid #26343c; text-transform: uppercase; }
.code-lights { display: flex; gap: 5px; }
.code-lights i { width: 6px; height: 6px; border-radius: 50%; background: #44545a; }
.code-lights i:first-child { background: var(--orange); }
.code-panel-body { position: relative; padding: 23px 20px 25px; }
.code-panel pre { margin: 0; overflow-x: auto; color: #d7e0dc; font: 11px/1.9 var(--mono); tab-size: 4; }
.code-muted { color: #8e9a9b; }
.code-string { color: var(--cyan); }
.code-number { color: #ffad76; }
.code-keyword { color: #ffa283; }
.copy-button { position: absolute; top: 13px; right: 13px; padding: 5px 8px; border: 1px solid #34444a; background: #121d23; color: #bac6c6; cursor: pointer; font: 9px/1.3 var(--mono); transition: border-color .18s ease, color .18s ease; }
.copy-button:hover, .copy-button:focus-visible { border-color: var(--cyan); color: var(--cyan); }
.code-panel-bottom { min-height: 36px; border-top: 1px solid #26343c; color: #829096; }
.code-panel-bottom span:last-child { color: var(--cyan); }

.site-footer { padding: 35px 0 20px; background: var(--dark); color: #e5eae4; }
.footer-main { display: flex; justify-content: flex-end; padding-bottom: 17px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 20px; color: #aeb9ba; font-size: 12px; font-weight: 700; }
.footer-links a:hover { color: var(--cyan); }
.footer-links span { color: var(--orange); }
.footer-bottom { display: flex; justify-content: flex-start; padding-top: 13px; border-top: 1px solid #263139; color: #87949a; font: 10px/1.4 var(--mono); }
.copy-status { position: fixed; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.reveal { animation: rise-in .7s both; }
@keyframes rise-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 1000px) {
  .design-layout { grid-template-columns: .8fr 1.2fr; gap: 46px; }
  .module-item { grid-template-columns: 25px minmax(115px,.8fr) minmax(100px,1.3fr) 17px; gap: 8px; }
  .module-path { display: none; }
  .start-layout { gap: 46px; }
  .footer-main { justify-content: flex-start; }
}

@media (max-width: 700px) {
  html { scroll-padding-top: 65px; }
  .site-header { height: 60px; }
  .header-inner, .section-wrap, .specimen-inner, .footer-main, .footer-bottom { width: calc(100% - 40px); }
  .brand { gap: 8px; }
  .brand-mark { width: 27px; height: 27px; }
  .brand-name { font-size: 18px; }
  .brand-description { max-width: 210px; font-size: 9px; }
  .menu-toggle { width: 40px; height: 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border: 1px solid #344149; background: transparent; cursor: pointer; }
  .menu-toggle span { width: 15px; height: 1px; background: #e2e8e2; transition: transform .18s ease; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }
  .primary-nav { position: absolute; top: 59px; right: 0; left: 0; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 7px 20px 12px; border-bottom: 1px solid #344149; background: #0d151b; }
  .primary-nav.open { display: flex; }
  .primary-nav a { padding: 12px 0; border-bottom: 1px solid #1d2a31; }
  .primary-nav a:last-child { border: 0; }
  .hero { height: min(660px, calc(100svh - 126px)); min-height: 510px; }
  .hero::before { background: linear-gradient(90deg, rgba(10,16,21,.98), rgba(10,16,21,.71) 73%, rgba(10,16,21,.42)); }
  .hero-content { width: calc(100% - 40px); padding-top: 66px; }
  .hero h1 { margin-top: 28px; font-size: 102px; }
  .hero-subtitle { max-width: 290px; font-size: 28px; }
  .hero-copy { max-width: 430px; font-size: 12px; }
  .hero-footnote { margin-top: 31px; font-size: 9px; }
  .castle-scene { top: 21%; width: 100%; opacity: .55; mask-image: linear-gradient(180deg, transparent, #000 43%); }
  .fortress { right: -17%; bottom: 3%; width: 112%; height: 76%; }
  .scene-tag, .scene-coordinate { display: none; }
  .architecture { width: min(625px, 100%); }
  .architecture-layer { gap: 2px; padding: 6px 10px 7px; }
  .layer-kicker { font-size: 7px; }
  .architecture-layer strong { font-size: 14px; }
  .layer-detail { font-size: 8px; }
  .architecture-middle-row, .architecture-relationships { gap: 6px; }
  .architecture-relationships, .architecture-foundation-link { min-height: 30px; }
  .castle-relationship, .architecture-link, .architecture-foundation-link { font-size: 6px; }
  .architecture-connector { height: 7px; flex-basis: 7px; }
  .hero-index { right: 20px; bottom: 13px; left: 20px; font-size: 8px; }
  .design-section { padding-top: 68px; }
  .design-layout { grid-template-columns: 1fr; gap: 31px; padding-bottom: 56px; }
  .section-heading h2, .modules-heading h2, .start-copy h2 { font-size: 52px; }
  .design-copy .lead { font-size: 16px; }
  .principle-rows { margin-top: 24px; }
  .specimen-inner { min-height: 0; grid-template-columns: repeat(2, 1fr); padding: 20px 0; row-gap: 19px; }
  .specimen-inner > div { min-height: 42px; padding-left: 15px; }
  .specimen-inner > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .modules-section { padding: 70px 0 56px; }
  .modules-heading { display: block; margin-bottom: 30px; }
  .modules-intro { max-width: 440px; margin-top: 19px; }
  .module-list { grid-template-columns: 1fr; }
  .module-item { min-height: 69px; grid-template-columns: 27px minmax(120px,.8fr) minmax(110px,1.4fr) 16px; gap: 8px; }
  .module-item:nth-child(odd), .module-item:nth-child(even) { padding-right: 0; padding-left: 0; border-left: 0; }
  .module-item:hover, .module-item:focus-visible { padding-right: 5px; padding-left: 5px; }
  .module-desc { font-size: 11px; }
  .start-section { padding: 71px 0 79px; }
  .start-layout { grid-template-columns: 1fr; gap: 34px; }
  .code-panel { box-shadow: 6px 6px 0 #d1d4cf; }
  .code-panel-body { padding: 23px 13px; }
  .code-panel pre { font-size: 9px; }
  .footer-links { gap: 16px; }
  .footer-bottom { font-size: 9px; }
}

@media (max-width: 390px) {
  .hero h1 { font-size: 86px; }
  .hero-links { gap: 18px; }
  .module-item { grid-template-columns: 22px 118px minmax(85px,1fr) 13px; gap: 6px; }
  .module-name { font-size: 11px; }
  .module-desc { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e5ece8;
  --muted: #9aa7ab;
  --paper: #10181e;
  --line: #2a363d;
  --line-strong: #43515a;
  --accent-soft: #162b2d;
}
html[data-theme="dark"] body { background: #0a1015; color: var(--ink); }
html[data-theme="dark"] .design-copy .lead { color: #dce6df; }
html[data-theme="dark"] .etl-credit, html[data-theme="dark"] .principle-row p, html[data-theme="dark"] .start-copy > p:not(.section-index) { color: #a0adb0; }
html[data-theme="dark"] .etl-credit a { color: var(--cyan); }
html[data-theme="dark"] .section-index { color: #9aa7ab; }
html[data-theme="dark"] .specimen-strip { border-color: #2a363d; background: #151e24; }
html[data-theme="dark"] .specimen-inner > div { border-color: #344149; }
html[data-theme="dark"] .specimen-label { color: #9aa7ab; }
html[data-theme="dark"] .text-link-dark { color: #e5ece8; }
html[data-theme="dark"] .code-panel { box-shadow: 10px 10px 0 #263139; }