panels. So `:nth-of-type` counts the inputs among
inputs and the panels among sections, the tabs is invisible to both,
and the Nth radio can address the Nth tab and the Nth panel through a plain
sibling combinator. Native radios also come with arrow-key navigation, a
focus ring and a working state when scripts are blocked, which is the whole
reason this section ships no JS.
Six groups are written where four are used: the routes come from
dd_lrnh_lanes(), and a fifth silo should light up rather than fail silently.
---------------------------------------------------------------------- */
/* Selected: a tint, a hairline and a lit icon tile. No bar, no rail - see
DESIGN-BANS ban 2 for why none of those three is available here. */
.dd-lrx__radio:nth-of-type(1):checked ~ .dd-lrx__tabs .dd-lrx__tab:nth-of-type(1),
.dd-lrx__radio:nth-of-type(2):checked ~ .dd-lrx__tabs .dd-lrx__tab:nth-of-type(2),
.dd-lrx__radio:nth-of-type(3):checked ~ .dd-lrx__tabs .dd-lrx__tab:nth-of-type(3),
.dd-lrx__radio:nth-of-type(4):checked ~ .dd-lrx__tabs .dd-lrx__tab:nth-of-type(4),
.dd-lrx__radio:nth-of-type(5):checked ~ .dd-lrx__tabs .dd-lrx__tab:nth-of-type(5),
.dd-lrx__radio:nth-of-type(6):checked ~ .dd-lrx__tabs .dd-lrx__tab:nth-of-type(6) {
background-image: linear-gradient(180deg,
rgb(var(--ga1) var(--ga2) var(--ga3) / 0.17),
rgb(var(--ga1) var(--ga2) var(--ga3) / 0.06));
border-color: var(--lx-hair);
color: var(--lx-gold-ink);
}
.dd-lrx__radio:nth-of-type(1):checked ~ .dd-lrx__tabs .dd-lrx__tab:nth-of-type(1) .dd-lrx__tab-ic,
.dd-lrx__radio:nth-of-type(2):checked ~ .dd-lrx__tabs .dd-lrx__tab:nth-of-type(2) .dd-lrx__tab-ic,
.dd-lrx__radio:nth-of-type(3):checked ~ .dd-lrx__tabs .dd-lrx__tab:nth-of-type(3) .dd-lrx__tab-ic,
.dd-lrx__radio:nth-of-type(4):checked ~ .dd-lrx__tabs .dd-lrx__tab:nth-of-type(4) .dd-lrx__tab-ic,
.dd-lrx__radio:nth-of-type(5):checked ~ .dd-lrx__tabs .dd-lrx__tab:nth-of-type(5) .dd-lrx__tab-ic,
.dd-lrx__radio:nth-of-type(6):checked ~ .dd-lrx__tabs .dd-lrx__tab:nth-of-type(6) .dd-lrx__tab-ic {
background-image: linear-gradient(150deg,
rgb(var(--ga1) var(--ga2) var(--ga3)),
rgb(var(--gc1) var(--gc2) var(--gc3)));
border-color: rgb(var(--gc1) var(--gc2) var(--gc3) / 0.6);
color: rgb(var(--gt1) var(--gt2) var(--gt3));
}
/* The radio is off-screen, so the focus ring has to be drawn on its label or a
keyboard visitor cannot see where they are. */
.dd-lrx__radio:nth-of-type(1):focus-visible ~ .dd-lrx__tabs .dd-lrx__tab:nth-of-type(1),
.dd-lrx__radio:nth-of-type(2):focus-visible ~ .dd-lrx__tabs .dd-lrx__tab:nth-of-type(2),
.dd-lrx__radio:nth-of-type(3):focus-visible ~ .dd-lrx__tabs .dd-lrx__tab:nth-of-type(3),
.dd-lrx__radio:nth-of-type(4):focus-visible ~ .dd-lrx__tabs .dd-lrx__tab:nth-of-type(4),
.dd-lrx__radio:nth-of-type(5):focus-visible ~ .dd-lrx__tabs .dd-lrx__tab:nth-of-type(5),
.dd-lrx__radio:nth-of-type(6):focus-visible ~ .dd-lrx__tabs .dd-lrx__tab:nth-of-type(6) {
outline: 2px solid var(--lx-gold-ink);
outline-offset: 2px;
}
/* Only the selected route's panel is in the layout. All four are in the DOM,
so every route stays crawlable and nothing is cloaked. */
.dd-lrx__panel {
display: none;
padding: clamp(16px, 2.4vw, 28px);
}
.dd-lrx__radio:nth-of-type(1):checked ~ .dd-lrx__panel:nth-of-type(1),
.dd-lrx__radio:nth-of-type(2):checked ~ .dd-lrx__panel:nth-of-type(2),
.dd-lrx__radio:nth-of-type(3):checked ~ .dd-lrx__panel:nth-of-type(3),
.dd-lrx__radio:nth-of-type(4):checked ~ .dd-lrx__panel:nth-of-type(4),
.dd-lrx__radio:nth-of-type(5):checked ~ .dd-lrx__panel:nth-of-type(5),
.dd-lrx__radio:nth-of-type(6):checked ~ .dd-lrx__panel:nth-of-type(6) {
display: block;
}
/* ---------- panel head --------------------------------------------------- */
.dd-lrx__ph {
margin-bottom: clamp(14px, 1.8vw, 20px);
}
.dd-lrx .dd-lrx__h3 {
display: block !important;
text-align: right !important;
margin: 0 0 6px !important;
font-size: clamp(1.08rem, 1.75vw, 1.34rem) !important;
font-weight: 800 !important;
line-height: 1.5 !important;
color: var(--lx-ink) !important;
}
.dd-lrx .dd-lrx__psub {
margin: 0 !important;
font-size: clamp(0.9rem, 1.15vw, 0.99rem) !important;
line-height: 1.9 !important;
font-weight: 400 !important;
color: var(--lx-mut);
text-align: right;
max-width: 74ch;
}
/* ---------- the route figure --------------------------------------------- */
.dd-lrx-route {
position: relative;
height: clamp(152px, 15.4vw, 236px);
margin: 0 0 clamp(16px, 2.2vw, 24px);
border-radius: 20px;
border: 1px solid var(--lx-brd);
/* The gold half is spelled out from the integers here rather than carried
in a token: a gradient inside a custom property comes back brown. */
background-image:
radial-gradient(115% 130% at 6% 4%,
rgb(var(--ga1) var(--ga2) var(--ga3) / 0.2),
rgb(var(--ga1) var(--ga2) var(--ga3) / 0) 56%),
var(--lx-ground);
overflow: hidden;
/* Perf: ~30 absolutely positioned dots and two stretched paths, isolated so
nothing here can force layout or paint outside the box. */
contain: layout paint style;
}
.dd-lrx-trail {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
/* Built vs planned is carried by the DASH ARRAY first and the stroke colour
second, on purpose: the dark mode plugin resolves and repaints every SVG
paint value it can reach, so a route that separated the two by colour alone
would read as one flat line the moment a visitor toggles dark. Geometry is
the half of the signal the plugin cannot touch. */
.dd-lrx-trail__done {
stroke: var(--lx-trail-done);
stroke-width: 2.4;
stroke-linecap: round;
}
.dd-lrx-trail__todo {
stroke: var(--lx-trail-todo);
stroke-width: 1.6;
stroke-linecap: round;
stroke-dasharray: 3 7;
}
.dd-lrx-dot {
position: absolute;
left: var(--x);
top: var(--y);
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--lx-dot);
transform: translate(-50%, -50%);
}
.dd-lrx-dot--live {
width: 11px;
height: 11px;
background: var(--lx-dot-live);
box-shadow:
0 0 0 3px var(--lx-dot-halo),
0 3px 10px -3px var(--lx-dot-glow);
}
.dd-lrx-dot--next {
width: 13px;
height: 13px;
background: transparent;
border: 2px solid var(--lx-dot-next);
box-shadow: 0 0 0 3px var(--lx-dot-halo);
}
/* The one lesson currently being written, breathing. This ::after carries a
colour and is NOT a rail: it is a ring on a single marker whose whole job is
to say "this one is in progress", the same way the gift card hub's step
connector encodes sequence. Compositor-only (transform + opacity), so it
costs nothing on the main thread. */
.dd-lrx-dot--next::after {
content: "";
position: absolute;
inset: -5px;
border-radius: 50%;
border: 1px solid var(--lx-dot-next);
opacity: 0;
animation: dd-lrx-pulse 2.8s ease-out infinite;
will-change: transform, opacity;
}
@keyframes dd-lrx-pulse {
0% { transform: scale(0.72); opacity: 0.65; }
70% { transform: scale(1.5); opacity: 0; }
100% { transform: scale(1.5); opacity: 0; }
}
.dd-lrx-tag {
position: absolute;
left: var(--x);
top: var(--y);
transform: translate(var(--tx), var(--ty));
white-space: nowrap;
font-size: 0.72rem;
font-weight: 600 !important;
line-height: 1.6;
color: var(--lx-mut);
pointer-events: none;
}
.dd-lrx-tag--end {
display: grid;
line-height: 1.45;
}
.dd-lrx-tag--end b {
font-weight: 800 !important;
font-size: 0.9rem;
color: var(--lx-gold-ink);
}
.dd-lrx-tag--next {
color: var(--lx-gold-ink);
}
/* The caption sits in the corner the climb leaves empty - the RTL start, top.
Its width is capped so it can never reach the trail: at x > 60% the curve is
already below y 61%, and this box ends well above that. */
/* `div.text figcaption` (0,0,1,2) is the theme's, and it centres this box,
shrinks it to 13px, stretches it to width:100% and fades it to 0.85. Two
classes out-specify it; the rest is reset outright. */
.dd-lrx .dd-lrx-route__cap {
display: grid !important;
width: auto !important;
opacity: 1 !important;
text-align: right !important;
margin: 0 !important;
position: absolute;
top: 12%;
right: 3.4%;
gap: 3px;
max-width: 36%;
pointer-events: none;
}
.dd-lrx-route__big {
font-size: clamp(0.94rem, 1.5vw, 1.2rem);
font-weight: 800 !important;
line-height: 1.5;
color: var(--lx-gold-ink);
font-variant-numeric: tabular-nums;
}
.dd-lrx-route__sm {
font-size: clamp(0.74rem, 0.95vw, 0.85rem);
font-weight: 500 !important;
line-height: 1.75;
color: var(--lx-mut);
}
/* ---------- body: entry plate + list ------------------------------------- */
.dd-lrx__body {
display: grid;
grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
gap: clamp(14px, 1.8vw, 22px);
align-items: start;
}
.dd-lrx__body--empty,
.dd-lrx__body--nolist {
grid-template-columns: minmax(0, 1fr);
}
/* A route whose first lesson is its only lesson: the plate turns on its side
and takes the whole width, and the desk tile drops underneath it. Otherwise
the grid keeps a column open for a list that does not exist yet. */
.dd-lrx__body--nolist .dd-lrx-plate,
.dd-lrx-plate--wide {
display: grid;
grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
align-items: stretch;
}
.dd-lrx__body--nolist .dd-lrx-plate .dd-lrx-plate__art {
border-bottom: 0;
border-left: 1px solid var(--lx-brd);
aspect-ratio: auto;
}
.dd-lrx__body--nolist .dd-lrx-plate__txt {
align-self: center;
}
.dd-lrx-plate {
border-radius: 20px;
border: 1px solid var(--lx-brd);
background: var(--lx-tile);
box-shadow: var(--lx-hi);
overflow: hidden;
}
.dd-lrx-plate__art {
display: block;
position: relative;
aspect-ratio: 4 / 3;
background: rgba(255, 255, 255, 0.6);
border-bottom: 1px solid var(--lx-brd);
}
.dd-lrx-plate__art img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
/* The theme gold-frames featured images at 550px elsewhere on the site;
this one is already inside a framed card, so it keeps none of that. */
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
margin: 0 !important;
}
/* The Learn cover engine renders every plate twice and the dd-learn plugin
wraps the featured image in .dd-lrn-cover carrying the dark render's URL as
a custom property (includes/single.php). Its stylesheet only loads on the
lesson and the hub, so the swap is repeated here, scoped: same mechanism,
two rules, and the dark file is never downloaded in light mode. */
.dd-lrx-plate__art .dd-lrn-cover {
display: block;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
}
.dd-lrx-plate__none {
position: absolute;
inset: 0;
display: grid;
place-items: center;
color: rgba(154, 125, 0, 0.45);
}
.dd-lrx-plate__none svg {
width: 44px;
height: 44px;
}
.dd-lrx-plate__txt {
padding: 15px 17px 17px;
}
.dd-lrx .dd-lrx-plate__k {
margin: 0 0 6px !important;
font-size: 0.79rem !important;
line-height: 1.6 !important;
font-weight: 700 !important;
color: var(--lx-gold-ink);
text-align: right;
}
.dd-lrx .dd-lrx-plate__t {
display: block !important;
text-align: right !important;
margin: 0 0 9px !important;
font-size: clamp(1rem, 1.35vw, 1.14rem) !important;
font-weight: 800 !important;
line-height: 1.72 !important;
color: var(--lx-ink) !important;
}
.dd-lrx-plate__t a {
color: inherit !important;
text-decoration: none;
}
.dd-lrx-plate__t a:hover,
.dd-lrx-plate__t a:focus-visible {
color: var(--lx-gold-ink) !important;
}
.dd-lrx .dd-lrx-plate__m {
display: flex;
align-items: center;
gap: 9px;
margin: 0 !important;
font-size: 0.82rem !important;
line-height: 1.6 !important;
font-weight: 500 !important;
color: var(--lx-mut);
text-align: right;
}
.dd-lrx-sep {
width: 3px;
height: 3px;
border-radius: 50%;
background: var(--lx-dot);
flex: none;
}
/* ---------- the rest of the route, as a list ----------------------------- */
.dd-lrx__side {
display: grid;
gap: clamp(10px, 1.2vw, 14px);
align-content: start;
}
.dd-lrx-list {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
display: grid;
gap: 6px;
}
.dd-lrx-list__i {
margin: 0 !important;
padding: 0 !important;
/*
is one of the two tags the mobile Additional CSS block resizes, so
this size is important and therefore a clamp - see the file header. */
font-size: clamp(0.9rem, 1.15vw, 0.98rem) !important;
line-height: 1.7;
}
.dd-lrx-list__i::before,
.dd-lrx-list__i::marker {
content: none !important;
}
.dd-lrx-list__i a {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: start;
gap: 11px;
padding: 10px 12px;
border-radius: 14px;
border: 1px solid transparent;
color: var(--lx-ink) !important;
text-decoration: none !important;
transition: background-color 0.16s ease, border-color 0.16s ease;
}
.dd-lrx-list__i a:hover,
.dd-lrx-list__i a:focus-visible {
background: rgba(255, 255, 255, 0.72);
border-color: var(--lx-brd);
}
.dd-lrx-list__n {
display: grid;
place-items: center;
width: 25px;
height: 25px;
border-radius: 9px;
background: var(--lx-tile);
border: 1px solid var(--lx-brd);
font-size: 0.79rem;
font-weight: 700 !important;
color: var(--lx-mut);
font-variant-numeric: tabular-nums;
}
/* Two lines, not an ellipsis. A truncated lesson title is a lesson nobody
clicks - and these titles are written to be read, not to fit a column. */
.dd-lrx-list__t {
font-weight: 600 !important;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
}
.dd-lrx-list__m {
font-size: 0.79rem;
font-weight: 500 !important;
color: var(--lx-mut);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.dd-lrx__more {
justify-self: start;
display: inline-flex;
align-items: center;
gap: 7px;
padding: 6px 4px;
font-size: 0.87rem;
font-weight: 700 !important;
color: var(--lx-gold-ink) !important;
text-decoration: none;
}
.dd-lrx__more svg {
width: 15px;
height: 15px;
}
.dd-lrx__more:hover {
text-decoration: underline;
}
/* ---------- what is being written ---------------------------------------- */
.dd-lrx-desk {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 12px;
padding: 14px 15px;
border-radius: 18px;
border: 1px solid var(--lx-brd);
background: var(--lx-tile);
}
.dd-lrx-desk__ic {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 11px;
background-image: linear-gradient(
rgb(var(--gc1) var(--gc2) var(--gc3) / 0.15),
rgb(var(--gc1) var(--gc2) var(--gc3) / 0.15));
border: 1px solid rgb(var(--gc1) var(--gc2) var(--gc3) / 0.26);
color: var(--lx-gold-ink);
}
.dd-lrx-desk__ic svg {
width: 18px;
height: 18px;
}
.dd-lrx .dd-lrx-desk__h {
margin: 0 0 8px !important;
font-size: 0.87rem !important;
line-height: 1.6 !important;
font-weight: 700 !important;
color: var(--lx-ink);
text-align: right;
}
.dd-lrx-desk__l {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.dd-lrx-desk__l li {
margin: 0 !important;
padding: 4px 10px !important;
font-size: 0.78rem !important;
line-height: 1.7;
font-weight: 500 !important;
color: var(--lx-mut);
background: rgba(255, 255, 255, 0.7);
border: 1px solid var(--lx-brd);
border-radius: 999px;
}
.dd-lrx-desk__l li::before,
.dd-lrx-desk__l li::marker {
content: none !important;
}
/* ---------- destination -------------------------------------------------- */
/* A hairline INSIDE the panel separating the route from where it arrives: the
one border DESIGN-BANS keeps, and physical rather than logical so the dark
mode plugin cannot re-emit it as currentColor (trap #10). */
/* flex-start, not text-align: the button has to sit at the RTL start under the
panel's own headings, and a flex line is the one way to say that without
guessing which of the theme's alignment rules reaches this box. */
.dd-lrx-dest {
display: flex;
justify-content: flex-start;
margin-top: clamp(16px, 2vw, 22px);
padding-top: clamp(14px, 1.8vw, 20px);
border-top: 1px solid var(--lx-brd);
}
.dd-lrx-dest__go {
display: inline-flex;
align-items: center;
gap: 9px;
white-space: nowrap;
padding: 13px 22px;
border-radius: 999px;
background-image: linear-gradient(135deg,
rgb(var(--ga1) var(--ga2) var(--ga3)) 0%,
rgb(var(--gb1) var(--gb2) var(--gb3)) 46%,
rgb(var(--gc1) var(--gc2) var(--gc3)) 100%);
border: 1px solid rgb(var(--gk1) var(--gk2) var(--gk3) / 0.32);
color: rgb(var(--gt1) var(--gt2) var(--gt3)) !important;
font-weight: 800 !important;
font-size: 0.97rem;
text-decoration: none !important;
box-shadow: 0 12px 26px -16px rgba(154, 125, 0, 0.9);
transition: box-shadow 0.18s ease, filter 0.18s ease;
}
.dd-lrx-dest__go svg {
width: 17px;
height: 17px;
flex: none;
}
.dd-lrx-dest__go:hover,
.dd-lrx-dest__go:focus-visible {
filter: brightness(1.06);
box-shadow: 0 16px 32px -14px rgba(154, 125, 0, 0.95);
}
/* =========================================================================
* Responsive ladder
* ====================================================================== */
@media (max-width: 1080px) {
.dd-lrx__body {
grid-template-columns: minmax(0, 1fr);
}
.dd-lrx-plate {
display: grid;
grid-template-columns: minmax(0, 210px) minmax(0, 1fr);
align-items: stretch;
}
.dd-lrx-plate__art {
border-bottom: 0;
border-left: 1px solid var(--lx-brd);
aspect-ratio: auto;
}
}
@media (max-width: 860px) {
.dd-lrx__head {
grid-template-columns: minmax(0, 1fr);
}
.dd-lrx__all {
justify-self: start;
}
.dd-lrx__tabs {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 600px) {
.dd-lrx-plate,
.dd-lrx__body--nolist .dd-lrx-plate {
grid-template-columns: minmax(0, 1fr);
}
.dd-lrx-plate__art,
.dd-lrx__body--nolist .dd-lrx-plate .dd-lrx-plate__art {
aspect-ratio: 16 / 9;
border-left: 0;
border-bottom: 1px solid var(--lx-brd);
}
.dd-lrx__tab {
column-gap: 9px;
padding: 9px 10px;
}
.dd-lrx__tab-ic {
width: 33px;
height: 33px;
border-radius: 10px;
}
.dd-lrx__tab-ic svg {
width: 18px;
height: 18px;
}
.dd-lrx__tab-n {
font-size: 0.92rem;
}
.dd-lrx__tab-c {
font-size: 0.73rem;
}
/* At this width the trail's three labels cannot all sit clear of the dots.
The start marker is the one a reader can infer from the shape, so it is
the one that goes; «در حال نوشتن» and the destination stay, because they
are the two the figure exists to say. */
.dd-lrx-tag--start {
display: none;
}
.dd-lrx-tag {
font-size: 0.67rem;
}
.dd-lrx .dd-lrx-route__cap {
max-width: 52%;
top: 9%;
}
.dd-lrx-tag--end b {
font-size: 0.82rem;
}
.dd-lrx-dest {
display: block;
}
.dd-lrx-dest__go {
display: flex;
justify-content: center;
}
/* The dots have to shrink with the box or a 30 stop route packs eleven
pixels of gap with seventeen pixels of disc and reads as one gold blob.
Measured at 430px: 11px between centres, so 10px is the ceiling. */
.dd-lrx-dot--live {
width: 6px;
height: 6px;
box-shadow:
0 0 0 2px var(--lx-dot-halo),
0 2px 7px -3px var(--lx-dot-glow);
}
.dd-lrx-dot--next {
width: 9px;
height: 9px;
box-shadow: 0 0 0 2px var(--lx-dot-halo);
}
.dd-lrx-dot--plan {
width: 4px;
height: 4px;
}
.dd-lrx-dot--next::after {
inset: -4px;
}
.dd-lrx-list__i a {
gap: 9px;
padding: 9px 10px;
}
}
@media (prefers-reduced-motion: reduce) {
.dd-lrx-dot--next::after {
animation: none;
opacity: 0.4;
}
.dd-lrx * {
transition-duration: 0.01ms !important;
}
}
/* =========================================================================
* Dark mode
*
* Two halves, and both are required (DESIGN-BANS trap #9). The !important
* makes this file's value beat the plugin's re-emitted copy of the same
* declaration; the --dracula-*-- twin catches the CONSUMING rules, which the
* plugin rewrites to read its own darkened copy of the token. Every twin
* repeats the LITERAL value - `var(--lx-brd)` resolves into a cycle, the
* property drops out, and what wins instead is the plugin's copy of the LIGHT
* rule, which is how a 9%-black hairline ends up on a black card.
*
* Verify in the browser with dark mode ON, toggled by clicking
* .dracula-toggle-wrap, and read the value at least ~1.5s after the toggle.
* ====================================================================== */
html[data-dracula-scheme="dark"] .dd-lrx {
--lx-card: rgba(255, 255, 255, 0.045) !important;
--lx-tile: rgba(255, 255, 255, 0.05) !important;
--lx-brd: rgba(255, 255, 255, 0.15) !important;
--lx-hair: rgba(253, 184, 55, 0.5) !important;
--lx-lift: 0 22px 55px -26px rgba(0, 0, 0, 0.85) !important;
--lx-lift-up: 0 26px 60px -24px rgba(0, 0, 0, 0.95) !important;
--lx-hi: inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
--lx-ink: rgb(244, 241, 232) !important;
--lx-mut: rgb(163, 163, 174) !important;
--lx-gold-ink: rgb(255, 205, 106) !important;
--lx-ground: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)) !important;
--lx-trail-done: rgba(253, 184, 55, 0.9) !important;
--lx-trail-todo: rgba(255, 255, 255, 0.26) !important;
--lx-dot: rgba(255, 255, 255, 0.22) !important;
--lx-dot-live: rgb(253, 184, 55) !important;
--lx-dot-halo: rgba(24, 20, 12, 0.85) !important;
--lx-dot-next: rgb(255, 191, 47) !important;
--lx-dot-glow: rgba(253, 184, 55, 0.5) !important;
/* The ink that sits ON gold, and the one gold value that is NOT reached by
the integers alone. For `color` the plugin resolves the computed value
first (the same way it does SVG paint), keys on the resulting hex and
re-emits `color: var(--dracula-text-2a2000, #e3daca)`, which is why the
CTA and the lit tab icon came back cream on gold. Pinning its own
variable is the fix; the integers make it safe to write with a var()
because a lone integer's twin is the same integer, so no cycle forms.
Same pin, same reason, as .dd-mk in dd-markets.css. */
--dracula-text-2a2000: rgb(var(--gt1) var(--gt2) var(--gt3)) !important;
/* the twins */
--dracula-bg--lx-card: rgba(255, 255, 255, 0.045) !important;
--dracula-bg--lx-tile: rgba(255, 255, 255, 0.05) !important;
--dracula-bgimg--lx-tile: rgba(255, 255, 255, 0.05) !important;
--dracula-border--lx-brd: rgba(255, 255, 255, 0.15) !important;
--dracula-bg--lx-brd: rgba(255, 255, 255, 0.15) !important;
--dracula-border--lx-hair: rgba(253, 184, 55, 0.5) !important;
--dracula-bg--lx-hi: inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
--dracula-bg--lx-lift: 0 22px 55px -26px rgba(0, 0, 0, 0.85) !important;
--dracula-bg--lx-lift-up: 0 26px 60px -24px rgba(0, 0, 0, 0.95) !important;
--dracula-text--lx-ink: rgb(244, 241, 232) !important;
--dracula-text--lx-mut: rgb(163, 163, 174) !important;
--dracula-text--lx-gold-ink: rgb(255, 205, 106) !important;
--dracula-border--lx-gold-ink: rgb(255, 205, 106) !important;
--dracula-bgimg--lx-ground: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)) !important;
--dracula-border--lx-trail-done: rgba(253, 184, 55, 0.9) !important;
--dracula-border--lx-trail-todo: rgba(255, 255, 255, 0.26) !important;
--dracula-bg--lx-dot: rgba(255, 255, 255, 0.22) !important;
--dracula-bg--lx-dot-live: rgb(253, 184, 55) !important;
--dracula-bg--lx-dot-halo: rgba(24, 20, 12, 0.85) !important;
--dracula-border--lx-dot-next: rgb(255, 191, 47) !important;
--dracula-bg--lx-dot-glow: rgba(253, 184, 55, 0.5) !important;
}
/* Gold that must stay gold. The plugin resolves a literal to
var(--dracula-background-, ); these declarations repeat
the gradient with the brand's own channels so the fallback is never reached,
and the whole block is scoped to the section. */
html[data-dracula-scheme="dark"] .dd-lrx .dd-lrx__h2 {
background-image: linear-gradient(100deg,
rgb(var(--gl1) var(--gl2) var(--gl3)) 0%,
rgb(var(--ga1) var(--ga2) var(--ga3)) 55%,
rgb(var(--gb1) var(--gb2) var(--gb3)) 100%) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
color: rgb(var(--ga1) var(--ga2) var(--ga3)) !important;
}
html[data-dracula-scheme="dark"] .dd-lrx .dd-lrx__tabs {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015)) !important;
}
html[data-dracula-scheme="dark"] .dd-lrx .dd-lrx__tab:hover {
background: rgba(255, 255, 255, 0.06) !important;
}
html[data-dracula-scheme="dark"] .dd-lrx .dd-lrx__all:hover,
html[data-dracula-scheme="dark"] .dd-lrx .dd-lrx__all:focus-visible {
background: rgba(255, 255, 255, 0.09) !important;
}
html[data-dracula-scheme="dark"] .dd-lrx .dd-lrx-list__i a:hover,
html[data-dracula-scheme="dark"] .dd-lrx .dd-lrx-list__i a:focus-visible {
background: rgba(255, 255, 255, 0.07) !important;
}
html[data-dracula-scheme="dark"] .dd-lrx .dd-lrx-desk__l li {
background: rgba(255, 255, 255, 0.05) !important;
}
html[data-dracula-scheme="dark"] .dd-lrx .dd-lrx-route {
background-image:
radial-gradient(115% 130% at 6% 4%,
rgb(var(--ga1) var(--ga2) var(--ga3) / 0.17),
rgb(var(--ga1) var(--ga2) var(--ga3) / 0) 58%),
var(--lx-ground) !important;
}
html[data-dracula-scheme="dark"] .dd-lrx .dd-lrx-plate__art {
background: rgba(255, 255, 255, 0.04) !important;
}
html[data-dracula-scheme="dark"] .dd-lrx .dd-lrx-plate__art .dd-lrn-cover {
background-image: var(--ddl-cover-dark) !important;
}
html[data-dracula-scheme="dark"] .dd-lrx .dd-lrx-plate__art .dd-lrn-cover > img {
visibility: hidden;
}
/* The button's fill and its ink are the same brand object in both schemes, so
only the shadow is redeclared here. */
html[data-dracula-scheme="dark"] .dd-lrx .dd-lrx-dest__go {
box-shadow: 0 14px 30px -16px rgba(0, 0, 0, 0.95) !important;
}