.djd-quiz-root{--djd-gold:#c9a227;--djd-gold-lift:#e3bd45;--djd-gold-soft:rgba(201,162,39,.13);--djd-gold-line:rgba(201,162,39,.38);--djd-ink:#0b0b0d;--djd-panel:#141418;--djd-panel-2:#191920;--djd-line:rgba(255,255,255,.10);--djd-text:#ece9e4;--djd-muted:#9d9890;--djd-red:#c96a4a;max-width:720px;margin:2.5rem auto;color:var(--djd-text);font-family:inherit}
.djd-q-card{position:relative;background:radial-gradient(120% 90% at 50% -10%,rgba(201,162,39,.10),transparent 60%),var(--djd-panel);border:1px solid var(--djd-line);border-radius:16px;padding:2.25rem 2rem 1.75rem;overflow:hidden}
.djd-q-card::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg,transparent,var(--djd-gold-line),transparent)}
@keyframes djdIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes djdInBack{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.djd-q-card.is-entering{animation:djdIn .32s cubic-bezier(.2,.7,.3,1) both}
.djd-q-card.is-entering-back{animation:djdInBack .32s cubic-bezier(.2,.7,.3,1) both}
.djd-q-progress{height:3px;background:rgba(255,255,255,.07);border-radius:2px;overflow:hidden;margin-bottom:1.5rem}
.djd-q-progress-fill{height:100%;background:linear-gradient(90deg,var(--djd-gold),var(--djd-gold-lift));transition:width .4s cubic-bezier(.2,.7,.3,1)}
.djd-q-eyebrow{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--djd-gold);margin:0 0 .7rem}
.djd-q-title{font-size:1.55rem;line-height:1.28;margin:0 0 1.4rem;letter-spacing:-.01em;outline:none}
.djd-q-sub{color:var(--djd-muted);margin:-.9rem 0 1rem}
.djd-q-body{color:var(--djd-muted);line-height:1.68;margin:0 0 1rem}
.djd-q-opts{display:flex;flex-direction:column;gap:.6rem;margin-bottom:1.35rem}
.djd-q-opt{position:relative;text-align:left;background:rgba(255,255,255,.028);border:1px solid var(--djd-line);border-radius:11px;padding:.95rem 1.1rem .95rem 2.6rem;color:var(--djd-text);font:inherit;font-size:.98rem;line-height:1.5;cursor:pointer;transition:border-color .18s ease,background .18s ease,transform .1s ease;animation:djdIn .3s cubic-bezier(.2,.7,.3,1) both}
.djd-q-opt:nth-child(1){animation-delay:.04s}.djd-q-opt:nth-child(2){animation-delay:.09s}.djd-q-opt:nth-child(3){animation-delay:.14s}.djd-q-opt:nth-child(4){animation-delay:.19s}
.djd-q-opt::before{content:"";position:absolute;left:1.05rem;top:1.18rem;width:9px;height:9px;border-radius:50%;border:1px solid var(--djd-muted);transition:background .18s ease,border-color .18s ease,box-shadow .18s ease}
.djd-q-opt:hover,.djd-q-opt:focus-visible{border-color:var(--djd-gold-line);background:var(--djd-gold-soft);outline:none}
.djd-q-opt:hover::before,.djd-q-opt:focus-visible::before{border-color:var(--djd-gold)}
.djd-q-opt:active{transform:translateY(1px)}
.djd-q-opt.is-chosen{border-color:var(--djd-gold);background:var(--djd-gold-soft)}
.djd-q-opt.is-chosen::before{background:var(--djd-gold);border-color:var(--djd-gold);box-shadow:0 0 0 3px var(--djd-gold-soft)}
.djd-q-back{background:none;border:none;color:var(--djd-muted);font:inherit;font-size:.86rem;padding:.4rem 0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.djd-q-back:hover{color:var(--djd-text)}
.djd-q-btn{display:inline-block;border:1px solid var(--djd-gold);border-radius:999px;padding:.72rem 1.55rem;font:inherit;font-size:.9rem;letter-spacing:.03em;cursor:pointer;text-decoration:none;margin:.4rem .45rem 0 0;transition:background .18s ease,color .18s ease,transform .1s ease}
.djd-q-btn:active{transform:translateY(1px)}
.djd-q-btn-primary{background:var(--djd-gold);color:var(--djd-ink)}
.djd-q-btn-primary:hover{background:var(--djd-gold-lift);color:var(--djd-ink)}
.djd-q-btn-ghost{background:transparent;color:var(--djd-gold)}
.djd-q-btn-ghost:hover{background:var(--djd-gold-soft)}
.djd-q-result-head{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.djd-q-result-head .djd-q-eyebrow{margin-bottom:0}
.djd-q-rarity{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--djd-muted);border:1px solid var(--djd-line);border-radius:999px;padding:.28rem .7rem;white-space:nowrap}
.djd-q-rarity.is-rare{color:var(--djd-gold);border-color:var(--djd-gold-line);background:var(--djd-gold-soft)}
.djd-q-glyph-wrap{display:flex;justify-content:center;margin:1.4rem 0 .9rem}
.djd-q-glyph{width:74px;height:74px;color:var(--djd-gold);stroke-dasharray:240;stroke-dashoffset:240;animation:djdDraw 1.1s cubic-bezier(.3,.7,.3,1) .15s forwards}
@keyframes djdDraw{to{stroke-dashoffset:0}}
.djd-q-result-name{font-size:2rem;line-height:1.18;margin:0 0 .45rem;color:var(--djd-gold);text-align:center;letter-spacing:-.015em;outline:none}
.djd-q-tagline{font-size:1.05rem;text-align:center;margin:0 0 1.6rem;color:var(--djd-text)}
.djd-q-meta{border-top:1px solid var(--djd-line);border-bottom:1px solid var(--djd-line);padding:1.1rem 0;margin:1.35rem 0;display:flex;flex-direction:column;gap:.85rem}
.djd-q-meta-row{display:flex;flex-direction:column;gap:.18rem}
.djd-q-meta-key{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--djd-gold)}
.djd-q-meta-val{line-height:1.55}
.djd-q-profile-head{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--djd-gold);margin:0 0 1rem}
.djd-q-profile{margin:1.6rem 0}
.djd-q-axis{margin-bottom:.95rem}
.djd-q-axis-head{display:flex;justify-content:space-between;align-items:baseline;font-size:.72rem;color:var(--djd-muted);margin-bottom:.35rem}
.djd-q-axis-name{color:var(--djd-text);letter-spacing:.1em;text-transform:uppercase;font-size:.64rem}
.djd-q-axis-track{position:relative;height:4px;background:rgba(255,255,255,.07);border-radius:2px}
.djd-q-axis-mid{position:absolute;left:50%;top:-3px;width:1px;height:10px;background:rgba(255,255,255,.16)}
.djd-q-axis-dot{position:absolute;top:50%;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:var(--djd-gold);box-shadow:0 0 0 4px var(--djd-gold-soft);transition:left .85s cubic-bezier(.2,.75,.25,1)}
.djd-q-compat{background:var(--djd-panel-2);border:1px solid var(--djd-line);border-radius:12px;padding:1.2rem 1.25rem 1.1rem;margin:1.6rem 0}
.djd-q-compat-line{display:flex;flex-direction:column;gap:.15rem;margin:0 0 .85rem}
.djd-q-compat-line:last-of-type{margin-bottom:0}
.djd-q-compat-key{font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--djd-muted)}
.djd-q-compat-val{font-size:1rem;line-height:1.45}
.djd-q-compat-good .djd-q-compat-val{color:var(--djd-gold)}
.djd-q-compat-bad .djd-q-compat-val{color:var(--djd-red)}
.djd-q-compat-why{color:var(--djd-muted);font-size:.86rem;margin:.5rem 0 0;line-height:1.5}
.djd-q-near{color:var(--djd-muted);font-size:.9rem;margin:0 0 .6rem}
@media(max-width:520px){.djd-quiz-root{margin:1.35rem auto}.djd-q-card{padding:1.6rem 1.2rem 1.35rem;border-radius:13px}.djd-q-title{font-size:1.28rem}.djd-q-result-name{font-size:1.6rem}.djd-q-glyph{width:58px;height:58px}.djd-q-opt{padding:.85rem .95rem .85rem 2.35rem;font-size:.94rem}.djd-q-opt::before{left:.9rem;top:1.05rem}.djd-q-btn{display:block;text-align:center;margin:.5rem 0 0}.djd-q-result-head{flex-direction:column;align-items:flex-start;gap:.6rem}.djd-q-axis-head{font-size:.66rem}}
@media(prefers-reduced-motion:reduce){.djd-q-card.is-entering,.djd-q-card.is-entering-back,.djd-q-opt{animation:none}.djd-q-glyph{animation:none;stroke-dashoffset:0}.djd-q-progress-fill,.djd-q-axis-dot,.djd-q-opt{transition:none}}
.djd-quiz-root{--djd-cyan:#34f5e1;--djd-cyan-soft:rgba(52,245,225,.15);--djd-magenta:#ff5fa8;--djd-violet:#a68cff;--djd-lime:#a8d84a}
.djd-q-card{background:radial-gradient(120% 90% at 15% -10%,rgba(49,230,214,.10),transparent 55%),radial-gradient(120% 90% at 85% -10%,rgba(201,162,39,.13),transparent 55%),var(--djd-panel)}
.djd-q-card::before{background:linear-gradient(90deg,transparent,var(--djd-cyan),var(--djd-gold),var(--djd-magenta),transparent)}
.djd-q-intro{text-align:center;padding-top:1.6rem}
.djd-q-intro .djd-q-body,.djd-q-intro .djd-q-sub{text-align:center}
.djd-q-hero{display:flex;flex-direction:column;align-items:center;margin:0 0 1rem}
.djd-q-deck{width:180px;height:180px;overflow:visible}
.djd-q-deck-glow{fill:rgba(49,230,214,.09);transform-origin:120px 120px;animation:djdPulse 4s ease-in-out infinite}
@keyframes djdPulse{0%,100%{opacity:.45;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}
.djd-q-deck-spin{transform-origin:120px 120px;animation:djdSpin 6s linear infinite}
@keyframes djdSpin{to{transform:rotate(360deg)}}
.djd-q-platter{fill:#17171c;stroke:rgba(201,162,39,.3)}
.djd-q-groove{fill:none;stroke:rgba(255,255,255,.06);stroke-width:1}
.djd-q-label{fill:var(--djd-cyan);opacity:.9}
.djd-q-spindle{fill:#0b0b0d}
.djd-q-arm-base{fill:#23232a;stroke:rgba(201,162,39,.4)}
.djd-q-arm-rod{stroke:#b9b4ab;stroke-width:3;stroke-linecap:round}
.djd-q-arm-head{fill:var(--djd-magenta)}
.djd-q-arm{transform-origin:196px 52px;animation:djdArm 7s ease-in-out infinite}
@keyframes djdArm{0%,100%{transform:rotate(0)}50%{transform:rotate(-7deg)}}
.djd-q-eq{display:flex;align-items:flex-end;gap:4px;height:24px;margin-top:-.3rem}
.djd-q-eq-bar{width:3px;transform-origin:bottom;background:linear-gradient(180deg,var(--djd-gold-lift),rgba(201,162,39,.25));border-radius:2px;animation:djdEq 1.1s ease-in-out infinite}
.djd-q-eq-bar:nth-child(odd){background:linear-gradient(180deg,var(--djd-cyan),rgba(49,230,214,.2))}
.djd-q-eq-bar:nth-child(3n){background:linear-gradient(180deg,var(--djd-magenta),rgba(224,85,155,.2))}
.djd-q-eq-bar:nth-child(1){height:40%;animation-delay:0s}
.djd-q-eq-bar:nth-child(2){height:75%;animation-delay:.13s}
.djd-q-eq-bar:nth-child(3){height:55%;animation-delay:.26s}
.djd-q-eq-bar:nth-child(4){height:95%;animation-delay:.39s}
.djd-q-eq-bar:nth-child(5){height:60%;animation-delay:.52s}
.djd-q-eq-bar:nth-child(6){height:85%;animation-delay:.65s}
.djd-q-eq-bar:nth-child(7){height:45%;animation-delay:.78s}
@keyframes djdEq{0%,100%{transform:scaleY(.35);opacity:.55}50%{transform:scaleY(1);opacity:1}}
.djd-q-intro .djd-q-title{background:linear-gradient(95deg,var(--djd-cyan),#ece9e4 45%,var(--djd-gold));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:.5rem}
.djd-q-facts{display:flex;margin:1.4rem 0 1.3rem;border-top:1px solid var(--djd-line);border-bottom:1px solid var(--djd-line)}
.djd-q-fact{flex:1;padding:.8rem .4rem;display:flex;flex-direction:column;gap:.1rem}
.djd-q-fact+.djd-q-fact{border-left:1px solid var(--djd-line)}
.djd-q-fact-n{font-size:1.35rem;color:var(--djd-gold);line-height:1}
.djd-q-fact:nth-child(1) .djd-q-fact-n{color:var(--djd-cyan)}
.djd-q-fact:nth-child(3) .djd-q-fact-n{color:var(--djd-magenta)}
.djd-q-fact-l{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--djd-muted)}
.djd-q-preview{display:grid;grid-template-columns:repeat(9,1fr);gap:.4rem;margin:0 0 .75rem}
.djd-q-preview-cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border:1px solid var(--djd-line);border-radius:9px;color:var(--djd-muted);opacity:0;animation:djdPop .5s cubic-bezier(.2,.8,.3,1) both;transition:color .25s ease,border-color .25s ease,transform .25s ease}
.djd-q-preview-cell:nth-child(3n+1){color:rgba(49,230,214,.6)}
.djd-q-preview-cell:nth-child(3n+2){color:rgba(201,162,39,.6)}
.djd-q-preview-cell:nth-child(3n){color:rgba(224,85,155,.55)}
.djd-q-preview-cell.is-rare{border-color:rgba(139,124,246,.45);color:var(--djd-violet);box-shadow:0 0 14px rgba(139,124,246,.18)}
.djd-q-preview-cell:hover{color:#fff;border-color:var(--djd-cyan);transform:translateY(-3px);box-shadow:0 0 16px rgba(49,230,214,.25)}
.djd-q-preview-cell .djd-q-glyph{width:60%;height:60%;animation:none;stroke-dashoffset:0}
.djd-q-preview-cell svg *{fill:none;stroke:currentColor;vector-effect:non-scaling-stroke}
.djd-q-preview-cell svg{overflow:visible}
/* The theme flips button text to a dark colour on hover. Hold ours light. */
.djd-q-opt,.djd-q-opt:link,.djd-q-opt:visited{color:var(--djd-text)}
.djd-q-opt:hover,.djd-q-opt:focus,.djd-q-opt:focus-visible,.djd-q-opt:active,.djd-q-opt.is-chosen{color:#fff}
.djd-q-back:hover,.djd-q-back:focus{color:var(--djd-text)}
.djd-q-btn-ghost:hover,.djd-q-btn-ghost:focus{color:var(--djd-cyan)}
.djd-q-btn-primary:hover,.djd-q-btn-primary:focus,.djd-q-btn-primary:active{color:#0b0b0d}
/* The theme paints links orange and underlines them, which wrecked the */
/* Read next button and the recommendation links. Hold our own styling. */
.djd-quiz-root a.djd-q-btn,.djd-quiz-root a.djd-q-btn:link,.djd-quiz-root a.djd-q-btn:visited,.djd-quiz-root a.djd-q-btn:hover,.djd-quiz-root a.djd-q-btn:focus,.djd-quiz-root a.djd-q-btn:active{text-decoration:none;box-shadow:none}
.djd-quiz-root a.djd-q-btn-primary,.djd-quiz-root a.djd-q-btn-primary:link,.djd-quiz-root a.djd-q-btn-primary:visited,.djd-quiz-root a.djd-q-btn-primary:focus{color:#0b0b0d;font-weight:600;background:linear-gradient(95deg,var(--djd-cyan),var(--djd-gold))}
.djd-quiz-root a.djd-q-btn-primary:hover{color:#0b0b0d;background:linear-gradient(95deg,#4af3e4,var(--djd-gold-lift))}
.djd-quiz-root a.djd-q-btn-ghost,.djd-quiz-root a.djd-q-btn-ghost:link,.djd-quiz-root a.djd-q-btn-ghost:visited,.djd-quiz-root a.djd-q-btn-ghost:hover{color:var(--djd-cyan);background:transparent}
.djd-quiz-root a:hover,.djd-quiz-root button:hover{text-decoration:none}
@keyframes djdPop{from{opacity:0;transform:translateY(8px) scale(.9)}to{opacity:.8;transform:none}}
.djd-q-preview-label{font-size:.78rem;color:var(--djd-muted);margin:0 0 1.3rem}
.djd-q-intro .djd-q-btn-primary{position:relative;overflow:hidden;padding-left:2rem;padding-right:2rem}
.djd-q-intro .djd-q-btn-primary::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);animation:djdSheen 3.2s ease-in-out infinite}
@keyframes djdSheen{0%{left:-60%}55%{left:130%}100%{left:130%}}
.djd-q-progress-fill{background:linear-gradient(90deg,var(--djd-cyan),var(--djd-gold),var(--djd-magenta))}
.djd-q-opt:nth-child(1):hover,.djd-q-opt:nth-child(1):focus-visible{border-color:var(--djd-cyan);background:var(--djd-cyan-soft)}
.djd-q-opt:nth-child(3):hover,.djd-q-opt:nth-child(3):focus-visible{border-color:var(--djd-magenta);background:rgba(224,85,155,.12)}
.djd-q-opt:nth-child(4):hover,.djd-q-opt:nth-child(4):focus-visible{border-color:var(--djd-violet);background:rgba(139,124,246,.12)}
.djd-q-btn-primary{background:linear-gradient(95deg,var(--djd-cyan),var(--djd-gold));border-color:transparent;color:#0b0b0d;font-weight:600}
.djd-q-btn-primary:hover{background:linear-gradient(95deg,#4af3e4,var(--djd-gold-lift));color:#0b0b0d}
.djd-q-btn-ghost{color:var(--djd-cyan);border-color:rgba(49,230,214,.5)}
.djd-q-glyph{color:var(--djd-cyan)}
.djd-q-result-name{background:linear-gradient(95deg,var(--djd-cyan),var(--djd-gold) 70%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.djd-q-rarity.is-rare{color:var(--djd-violet);border-color:rgba(139,124,246,.5);background:rgba(139,124,246,.12)}
.djd-q-axis:nth-child(2) .djd-q-axis-dot{background:var(--djd-cyan);box-shadow:0 0 0 4px rgba(49,230,214,.16)}
.djd-q-axis:nth-child(3) .djd-q-axis-dot{background:var(--djd-magenta);box-shadow:0 0 0 4px rgba(224,85,155,.16)}
.djd-q-axis:nth-child(4) .djd-q-axis-dot{background:var(--djd-violet);box-shadow:0 0 0 4px rgba(139,124,246,.16)}
.djd-q-axis:nth-child(5) .djd-q-axis-dot{background:var(--djd-lime);box-shadow:0 0 0 4px rgba(168,216,74,.16)}
.djd-q-compat-good .djd-q-compat-val{color:var(--djd-cyan)}
.djd-q-meta-key,.djd-q-profile-head{color:var(--djd-cyan)}
@media(max-width:520px){.djd-quiz-root{margin:1rem auto}.djd-q-intro{padding-top:1.2rem}.djd-q-deck{width:126px;height:126px}.djd-q-eq{height:18px}.djd-q-hero{margin-bottom:.7rem}.djd-q-facts{margin:1rem 0 .9rem}.djd-q-fact{padding:.6rem .3rem}.djd-q-fact-n{font-size:1.1rem}.djd-q-preview{grid-template-columns:repeat(5,1fr);gap:.35rem}.djd-q-preview-label{font-size:.74rem;margin-bottom:1rem}}
@media(prefers-reduced-motion:reduce){.djd-q-deck-spin,.djd-q-deck-glow,.djd-q-arm,.djd-q-eq-bar,.djd-q-intro .djd-q-btn-primary::after{animation:none}.djd-q-preview-cell{animation:none;opacity:.8}}
/* Brighter, higher chroma gold. The old ochre was low saturation, which is */
/* what made it read flat against the dark panels rather than lit. */
.djd-quiz-root{--djd-gold:#ffc93c;--djd-gold-lift:#ffe08a;--djd-gold-soft:rgba(255,201,60,.15);--djd-gold-line:rgba(255,201,60,.45)}
.djd-q-card{background:radial-gradient(120% 90% at 15% -10%,rgba(52,245,225,.12),transparent 55%),radial-gradient(120% 90% at 85% -10%,rgba(255,201,60,.16),transparent 55%),var(--djd-panel)}
.djd-q-glyph{filter:drop-shadow(0 0 9px rgba(52,245,225,.55))}
.djd-q-label{filter:drop-shadow(0 0 6px rgba(52,245,225,.5))}
.djd-q-axis-dot{box-shadow:0 0 0 4px rgba(255,201,60,.18),0 0 14px rgba(255,201,60,.6)}
.djd-q-fact-n{text-shadow:0 0 16px rgba(255,201,60,.4)}
.djd-q-preview-cell.is-rare{box-shadow:0 0 18px rgba(166,140,255,.3)}
.djd-q-eyebrow,.djd-q-profile-head,.djd-q-meta-key{text-shadow:0 0 12px rgba(255,201,60,.3)}
.djd-q-progress-fill{box-shadow:0 0 10px rgba(255,201,60,.5)}

/* The gradient fill rendered dim against the panel. Solid bright type with */
/* a glow reads far better and never depends on background-clip support. */
.djd-q-intro .djd-q-title,.djd-q-intro-title{background:none;-webkit-text-fill-color:currentColor;color:#fff;text-shadow:0 0 22px rgba(52,245,225,.35),0 0 44px rgba(255,201,60,.2)}
.djd-q-intro .djd-q-eyebrow{color:var(--djd-gold);text-shadow:0 0 14px rgba(255,201,60,.45)}
.djd-q-intro .djd-q-sub{color:#cfcac2}
.djd-q-result-name{background:none;-webkit-text-fill-color:currentColor;color:var(--djd-gold);text-shadow:0 0 26px rgba(255,201,60,.45)}

/* The theme fills SVG children, which turned the result glyph into a blob. */
.djd-q-glyph *{fill:none;stroke:currentColor}
.djd-q-glyph [fill="currentColor"]{fill:currentColor}
.djd-q-deck .djd-q-platter{fill:#17171c}
.djd-q-deck .djd-q-label{fill:var(--djd-cyan)}
.djd-q-deck .djd-q-spindle{fill:#0f0e1a}
.djd-q-deck .djd-q-arm-base{fill:#23232a}
.djd-q-deck .djd-q-arm-head{fill:var(--djd-magenta)}
.djd-q-deck .djd-q-deck-glow{fill:rgba(52,245,225,.10)}
.djd-q-deck .djd-q-groove{fill:none}

.djd-q-result .djd-q-tagline{font-size:1.28rem;line-height:1.35;color:#fff;font-weight:600;margin:0 0 1.4rem}
.djd-q-result .djd-q-body{color:#b9b4ab}
.djd-q-result .djd-q-body strong{color:#f3efe8;font-weight:600}
.djd-q-code{display:flex;flex-direction:column;align-items:center;gap:.35rem;margin:1.4rem 0 .3rem}
.djd-q-code-k{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--djd-muted)}
.djd-q-code-v{display:flex;gap:.28rem}
.djd-q-code-v b{display:inline-flex;align-items:center;justify-content:center;width:2.2rem;height:2.6rem;border-radius:9px;border:1px solid rgba(255,201,60,.4);background:rgba(255,201,60,.08);font:700 1.25rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--djd-gold);text-shadow:0 0 14px rgba(255,201,60,.5);opacity:0;animation:djdCode .45s cubic-bezier(.2,.8,.3,1) forwards}
.djd-q-code-v b:nth-child(2){animation-delay:.08s}.djd-q-code-v b:nth-child(3){animation-delay:.16s}.djd-q-code-v b:nth-child(4){animation-delay:.24s}.djd-q-code-v b:nth-child(5){animation-delay:.32s}.djd-q-code-v b:nth-child(6){animation-delay:.4s}
@keyframes djdCode{from{opacity:0;transform:translateY(8px) scale(.9)}to{opacity:1;transform:none}}
.djd-q-code-l{font-size:.74rem;color:var(--djd-muted);text-align:center;max-width:36ch;line-height:1.45}
.djd-q-tiles{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin:1.3rem 0}
.djd-q-tile{border:1px solid var(--djd-line);border-radius:12px;padding:1rem 1.05rem;background:rgba(255,255,255,.025)}
.djd-q-tile.is-good{border-color:rgba(52,245,225,.35);background:linear-gradient(180deg,rgba(52,245,225,.07),transparent)}
.djd-q-tile.is-bad{border-color:rgba(255,95,168,.35);background:linear-gradient(180deg,rgba(255,95,168,.07),transparent)}
.djd-q-tile-k{display:block;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:.35rem}
.djd-q-tile.is-good .djd-q-tile-k{color:var(--djd-cyan)}.djd-q-tile.is-bad .djd-q-tile-k{color:var(--djd-magenta)}
.djd-q-tile-v{font-size:.98rem;line-height:1.5;color:#f3efe8;font-weight:600}
.djd-q-meta{display:none}
.djd-q-mapwrap{margin:1.5rem 0 .4rem;border:1px solid var(--djd-line);border-radius:12px;padding:1rem .9rem .6rem;background:radial-gradient(120% 80% at 50% 0%,rgba(52,245,225,.07),transparent 60%),var(--djd-panel-2)}
.djd-q-map{width:100%;height:auto;display:block}
.djd-q-map .g{stroke:rgba(255,201,60,.32);stroke-width:.45}
.djd-q-map .f{fill:none;stroke:rgba(255,255,255,.08);stroke-width:.4}
.djd-q-map .lab{fill:var(--djd-gold);font-size:3.6px;text-anchor:middle;letter-spacing:.06em;text-transform:uppercase}
.djd-q-map .pt{fill:rgba(52,245,225,.85)}
.djd-q-map .pt.rare{fill:var(--djd-violet)}
.djd-q-map .pl{fill:#d8d3ca;font-size:3.1px;text-anchor:middle}
.djd-q-map .you{fill:var(--djd-gold)}
.djd-q-map .you-ring{fill:none;stroke:var(--djd-gold);stroke-width:.8;transform-origin:center;transform-box:fill-box;animation:djdRing 1.8s ease-out infinite}
@keyframes djdRing{0%{transform:scale(.6);opacity:1}100%{transform:scale(2.4);opacity:0}}
.djd-q-map .youl{fill:#fff;font-size:3.4px;font-weight:700;text-anchor:middle}
.djd-q-mapcap{font-size:.74rem;color:var(--djd-muted);text-align:center;margin:.5rem 0 0}
.djd-q-h{font-size:1rem;color:#fff;font-weight:600;margin:1.6rem 0 .7rem;text-transform:none;letter-spacing:0}
.djd-q-take ol{margin:0;padding-left:1.25rem}
.djd-q-take li{margin:0 0 .5rem;line-height:1.5}
.djd-q-take strong{color:#fff;font-weight:600}
.djd-q-vcol h4{font-size:.8rem;color:var(--djd-cyan);margin:.6rem 0 .3rem;font-weight:600}
.djd-q-vcol ul{list-style:none;margin:0 0 .5rem;padding:0}
.djd-q-vcol li{padding:.45rem 0;border-bottom:1px solid var(--djd-line);font-size:.92rem}
.djd-q-vcol li:last-child{border-bottom:0}
.djd-q-vcol b{color:#fff;font-weight:600}
.djd-q-vwhere{color:var(--djd-muted);font-size:.78rem;margin-left:.4rem}
.djd-q-vwhy{display:block;color:var(--djd-muted);font-size:.84rem;margin-top:.1rem;line-height:1.45}
.djd-q-nextlink{display:block;text-decoration:none;border:1px solid rgba(52,245,225,.4);border-radius:12px;padding:.95rem 1.05rem;background:linear-gradient(180deg,rgba(52,245,225,.08),transparent);transition:border-color .2s ease,transform .12s ease}
.djd-q-nextlink:hover{border-color:var(--djd-cyan);transform:translateY(-2px)}
.djd-q-nq-t{display:block;color:var(--djd-cyan);font-size:1.05rem;font-weight:600}
.djd-q-nq-w{display:block;color:var(--djd-muted);font-size:.84rem;margin-top:.2rem;line-height:1.45}
.djd-q-nq-others{font-size:.84rem;color:var(--djd-muted);margin:.7rem 0 0}
.djd-q-nq-others a{color:var(--djd-text);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.25)}
.djd-q-nq-others a:hover{color:var(--djd-cyan);border-color:var(--djd-cyan)}
.djd-q-alltypes{display:inline-block;margin-top:.8rem;font-size:.86rem;color:var(--djd-gold);text-decoration:none;border-bottom:1px solid rgba(255,201,60,.45)}
.djd-q-alltypes:hover{color:var(--djd-gold-lift)}
.djd-q-profile-head,.djd-q-compat .djd-q-profile-head{display:none}
.djd-q-compat{margin-top:1rem}
.djd-q-compat-key{color:var(--djd-muted)}
@media(max-width:520px){.djd-q-tiles{grid-template-columns:1fr}.djd-q-code-v b{width:2rem;height:2.4rem;font-size:1.1rem}.djd-q-map .pl{font-size:3.8px}.djd-q-map .lab{font-size:4px}}
@media(prefers-reduced-motion:reduce){.djd-q-code-v b{animation:none;opacity:1}.djd-q-map .you-ring{animation:none;opacity:.5}}