/* Sandrone: ivory lace, garnet ribbons, antique metal and warm charcoal. */
:root {
  --bg: #171316;
  --ink: #f0e7da;
  --muted: #b2a39b;
  --purple: #cfb58d;
  --purple-dark: #e6cfab;
  --soft: #37282c;
  --line: #4b3d40;
  --white: #241e22;
  --surface: #241e22;
  --surface2: #30272c;
  --shadow: 0 16px 40px #07050638;
  --sd-wine: #7d2438;
  --sd-ivory: #f0e4ce;
  --sd-metal: #bda27b;
}
body { background: radial-gradient(ellipse at 85% 0,#72253816,transparent 43%),radial-gradient(ellipse at 0 50%,#b29a6b06,transparent 40%),var(--bg); }
::selection { background: #8c3c50; color: #fff0da; }
.site-header { background: #191519f2; border-color: #49383c; box-shadow: 0 6px 28px #07040617; }
.brand-icon { background: linear-gradient(145deg,#8c3346,#5f1c2c); color: #eddac1; border: 1px solid #bb9575; border-radius: 11px 4px 11px 4px; transform: rotate(-4deg); box-shadow: inset 0 0 0 3px #27182055; }
.brand-light { color: #e0c5a0; }
.brand small { color: #a08c83; letter-spacing: 2.5px; }
.header-inner nav a { color: #b1a4a3; }
.header-inner nav a.active, .header-inner nav .dg-team-nav-toggle.active, .header-inner nav .dg-team-nav-toggle[aria-expanded="true"] { color: #eed3aa; }
.header-inner nav a.active:after, .dg-team-nav-toggle.active::after { background: linear-gradient(90deg,#974354,#d5b487); height: 2px; }
.header-inner nav .dg-team-nav-toggle { color: #b1a4a3; }
.favorites-link { background: #2c2329; border-color: #514047; color: #d3c0bb; }
.favorites-link b { background: #522c37; color: #eddac2; }
.nav-new { background: #452831; color: #ddbd9d; border-color: #79505b; }
.button { background: #30272d; border-color: #59464d; color: #eadbcf; box-shadow: 0 3px 10px #0503040a; transition: background .18s,border-color .18s,box-shadow .18s,transform .18s; }
.button:hover { background: #413038; border-color: #9e7776; }
.button.primary, .build-selector button.active { background: linear-gradient(135deg,#94354a,#6c1e33); border-color: #bd7880; color: #fff0dc; box-shadow: 0 6px 20px #7e263029,inset 0 1px #f3c8bb18; }
.button.primary:hover, .build-selector button.active:hover { background: linear-gradient(135deg,#aa4157,#842a40); border-color: #dc9b9e; color: #fff4e6; }
.small-link, .text-button { color: #d4b795; }
.small-link:hover, .text-button:hover { color: #ffe0b8; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline-color: #e3b992; }
select, .inline-select { color: #f0e4d7; background-color: #241c23; border-color: #685057; }
select option { background: #241c23; color: #f0e4d7; }
.search-box { background: #231d24; border-color: #544049; }
.search-box input { color: #eadccf; }
.search-box svg { color: #ac9697; }
.page-top h1 { font-family: Georgia,'Times New Roman',serif; font-weight: 400; letter-spacing: -1px; color: #f0e3d1; line-height: 1.2; }
.page-top > p { color: #b8a59f; }
.eyebrow { color: #c6a68c; }
.eyebrow:before { background: #a04c5b; }
.char-card, .dg-team-card, .dg-plan-example, .dg-plan-candidate { transition: border-color .2s,box-shadow .2s,transform .2s; }
.char-card:hover, .dg-team-card:hover, .dg-plan-example:hover { border-color: #a27d73; box-shadow: 0 14px 35px #0503052c; transform: translateY(-2px); }
.char-portrait { background-color: #30272c; }
.card-info { background: #231e23; }
.card-info h3 { color: #efe2d5; }
.dg-card-team { border-color: #503e46; background: #2d222a; color: #d1b599; }
.team-promo { background: radial-gradient(ellipse at 92% 40%,#7a2c3d40,transparent 65%),#2b2027; border-color: #66434b; }
.team-promo h3 { color: #ecdbc3; }
.dg-team-modes > a.active { border-color: #ae7d74; background: linear-gradient(110deg,#74334730,#2d222b); box-shadow: inset 3px 0 #a65161; }
.dg-team-modes .active strong { color: #f0d9bc; }
.active .dg-mode-icon { background: #552b38; border-color: #996b70; color: #e7c8a7; }
.dg-member-art { background-color: #30272e; border-color: #675059; }
.team-member.dg-focus-member .dg-member-art, .dg-plan-example .dg-plan-shared .dg-member-art { border-color: #bd8b83; box-shadow: 0 0 0 1px #c49c7933; background-color: #4e303a; }
.dg-team-desk { background: linear-gradient(115deg,#3b26302f,#251f26); border-color: #5d424d; }
.dg-draft-portraits img, .dg-draft-portraits i { background: #4c323d; border-color: #88636e; }
.dg-team-desk > .button b { background: #613441; color: #f1dbc3; }
.dg-workshop { background: linear-gradient(150deg,#33262e,#221d23 56%); border-color: #694953; }
.dg-workshop .dg-plan-slot { background: radial-gradient(ellipse at 50% 75%,color-mix(in srgb,var(--el,#ad9c93) 9%,transparent),transparent 85%),#2c222b !important; border-color: #6a505c; }
.dg-workshop .dg-plan-slot .slot-name { color: #f3e6d9; }
.dg-workshop .dg-plan-slot-role { color: #b8a2a3; }
.dg-plan-slot .remove-slot { background: #291c25; border-color: #7a5664; }
.dg-plan-tips { background: radial-gradient(ellipse at top left,#823e3d17,transparent 80%),#2d2226; border-color: #785249; }
.dg-plan-tips > h3 { color: #e7c8a2; }
.dg-plan-example-head .dg-team-tag { background: #4e2d37; color: #e1bd9c; }
.dg-plan-example-delta { background: #241a24; border-color: #61414f; }
#dg-teams-menu { background: linear-gradient(135deg,#38262e,#211a22); border-color: #926774; box-shadow: 0 20px 60px #080407b0; }
.dg-nav-choice-icon { color: #eed9bb; background: #653341; }
.dg-nav-choice:hover, .dg-nav-choice.active { background: #562d3d55; border-color: #ad807d; }
.dg-nav-choice strong { color: #f0dac0; }
.dg-nav-choice small { color: #c1a7a7; }
.dg-compare-column.is-example { background: linear-gradient(150deg,#6b304033,#2d232b); border-color: #ad797a; }
#toast { background: #ead9be; color: #432733; border-color: #c4a38a; }
.detail-hero { border-color: #70505a; background: radial-gradient(ellipse at 90% 50%,color-mix(in srgb,var(--el) 8%,transparent),transparent 60%),#2b222a; }
footer { border-color: #49343f; }
footer .brand-icon { color: #eddac1; }

.sd-hero { position: relative; display: grid; grid-template-columns: 51% 49%; min-height: 526px; border: 1px solid #72505a; border-radius: 19px; margin-top: 30px; overflow: hidden; background: radial-gradient(ellipse at 83% 38%,#9b655625,transparent 46%),linear-gradient(115deg,#2a1e26,#201b22 50%,#37222c); box-shadow: 0 15px 50px #09050730,inset 0 0 0 5px #ad85650a; }
.sd-hero::before { content: ''; position: absolute; inset: 14px; border: 1px solid #c9a58418; border-radius: 10px; pointer-events: none; }
.sd-hero-seam { position: absolute; left: 0; top: 0; width: 5px; bottom: 0; background: linear-gradient(180deg,#b28571,#6c2437 35%,#411d2a 70%,#a87b67); }
.sd-copy { padding: 43px 0 35px 44px; position: relative; z-index: 3; }
.sd-edition { display: flex; align-items: center; gap: 13px; font-size: 9px; font-weight: 600; letter-spacing: 2.1px; color: #c3a88f; }
.sd-edition > span { display: grid; place-items: center; height: 31px; width: 31px; font: 14px Georgia,serif; letter-spacing: 1px; border: 1px solid #86606a; background: #5b2b3b77; border-radius: 50%; color: #ecd3b0; }
.sd-edition > i { width: 45px; height: 1px; background: #8e6d66; }
.sd-copy h1 { font: 400 clamp(43px,4.7vw,66px)/1.08 Georgia,'Times New Roman',serif; letter-spacing: -1.9px; color: #f3e8d4; margin: 28px 0 23px; }
.sd-copy h1 em { color: #d7aa9f; font-weight: 400; }
.sd-copy > p { color: #c0ada5; font-size: 13px; line-height: 1.95; max-width: 450px; }
.sd-copy .button-row { margin-top: 27px; gap: 10px; }
.sd-copy .button { min-height: 46px; font-size: 12px; padding: 12px 16px; }
.sd-copy .button svg { width: 16px; height: 16px; }
.sd-copy .sd-secondary { background: #e5d2ad09; border-color: #886662; color: #e4d0b6; }
.sd-signature { display: flex; gap: 14px; align-items: center; margin-top: 29px; padding-top: 22px; border-top: 1px solid #71534e55; width: fit-content; padding-right: 32px; }
.sd-signature-mark { color: #b68c70; font: 42px/1 Georgia,serif; }
.sd-signature strong { display: block; font: italic 18px Georgia,serif; color: #d5bba4; }
.sd-signature div > span { display: block; margin-top: 6px; font-size: 9px; letter-spacing: .6px; color: #9e8884; }
.sd-stage { min-width: 0; position: relative; isolation: isolate; }
.sd-dial { position: absolute; width: 384px; height: 384px; border: 1px solid #b9916d48; border-radius: 50%; top: 59px; left: calc(50% - 192px); box-shadow: 0 0 0 28px #aa82660b,0 0 0 29px #bb94701f,inset 0 0 0 26px #aa826604,inset 0 0 0 27px #bb947018; background: repeating-conic-gradient(from 0deg,#b9916d33 0deg .3deg,transparent .3deg 10deg); mask-image: radial-gradient(circle,transparent 65%,#000 65%); }
.sd-dial > span { position: absolute; top: 13px; left: calc(50% - 8px); font: 16px Georgia,serif; color: #c7a17d; }
.sd-strings { position: absolute; inset: 0; background: linear-gradient(100deg,transparent 22%,#cba48616 22.1%,transparent 22.3%,transparent 68%,#cba48618 68.1%,transparent 68.3%); mask-image: linear-gradient(0deg,transparent,#000 65%); }
.sd-stage-caption { position: absolute; font: 72px Georgia,serif; color: #ead3b309; left: -5px; top: 24px; letter-spacing: 7px; user-select: none; white-space: nowrap; }
.sd-sandrone { position: absolute; left: 50%; transform: translateX(-50%); bottom: -4px; height: 518px; width: 590px; max-width: none; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 18px 22px #08040866); z-index: 2; }
.sd-character-label { position: absolute; z-index: 3; right: 25px; bottom: 24px; padding: 17px 19px; min-width: 216px; border: 1px solid #b78a7c7a; background: #2c2028e8; backdrop-filter: blur(14px); border-radius: 10px 3px 10px 3px; box-shadow: 0 12px 25px #0b050c55; }
.sd-character-label > span { display: flex; align-items: center; gap: 8px; color: #c9ab9e; font-size: 8px; letter-spacing: 1.2px; }
.sd-character-label .element { width: 14px; height: 14px; color: #bdd2cf; }
.sd-character-label strong { display: flex; align-items: center; justify-content: space-between; font: 27px Georgia,serif; color: #f1dfc5; margin: 8px 0; }
.sd-character-label i { font: 18px var(--sans); color: #d0aa97; }
.sd-character-label small { color: #b29a94; font-size: 10px; }
.sd-stage-number { position: absolute; top: 36px; right: 17px; writing-mode: vertical-rl; font-size: 7px; letter-spacing: 2.2px; color: #b58b8266; }
.sd-statbar { background: linear-gradient(90deg,#302229,#292029); border-color: #60424b; margin: 0 13px; padding: 20px 28px; }
.sd-statbar strong { font-family: Georgia,serif; font-weight: 400; color: #e0c6a2; font-size: 28px; }
.sd-statbar > div > span { color: #a78d87; font-size: 8px; }
.sd-statbar .dg-data-chip { color: #b8978e; background: #482a341f; border-color: #76525a; }
.dg-quick-pick:first-child { border-color: #a57775; background: linear-gradient(135deg,#6b344645,#30252c); }
@media(min-width:1440px) { .sd-copy h1 { font-size: 68px; } }
@media(max-width:1100px) {
  .sd-hero { min-height: 495px; grid-template-columns: 53% 47%; }
  .sd-copy { padding: 35px 0 30px 32px; }
  .sd-copy h1 { font-size: 51px; }
  .sd-copy > p { font-size: 12px; max-width: 360px; }
  .sd-sandrone { height: 490px; width: 535px; left: 47%; }
  .sd-character-label { right: 18px; bottom: 22px; min-width: 198px; padding: 15px; }
  .sd-character-label strong { font-size: 24px; }
  .sd-dial { width: 330px; height: 330px; left: calc(50% - 165px); top: 72px; }
  .sd-copy .button { padding: 11px 13px; font-size: 11px; }
}
@media(max-width:820px) {
  .sd-hero { grid-template-columns: 54% 46%; min-height: 466px; }
  .sd-copy { padding: 31px 0 27px 25px; }
  .sd-copy h1 { font-size: 42px; letter-spacing: -1.5px; margin: 25px 0 19px; }
  .sd-copy > p { font-size: 11px; max-width: 280px; }
  .sd-copy > p br { display: none; }
  .sd-edition { font-size: 7px; letter-spacing: 1.2px; gap: 9px; }
  .sd-edition > i { width: 22px; }
  .sd-copy .button-row { flex-wrap: wrap; max-width: 280px; gap: 8px; margin-top: 22px; }
  .sd-copy .button { min-height: 40px; font-size: 10px; padding: 10px 12px; }
  .sd-signature { margin-top: 23px; padding-top: 17px; padding-right: 10px; gap: 10px; }
  .sd-signature strong { font-size: 16px; }
  .sd-signature div > span { font-size: 8px; }
  .sd-sandrone { width: 480px; height: 457px; left: 48%; }
  .sd-character-label { min-width: 182px; bottom: 21px; right: 13px; }
  .sd-character-label strong { font-size: 23px; }
  .sd-character-label > span { font-size: 7px; }
  .sd-character-label small { font-size: 8px; }
  .sd-dial { width: 270px; height: 270px; left: calc(50% - 135px); top: 90px; }
  .sd-stage-caption { font-size: 53px; top: 38px; }
  .sd-statbar { padding: 17px 20px; }
}
@media(max-width:600px) {
  .sd-hero { display: flex; flex-direction: column; min-height: 0; border-radius: 13px; margin-top: 20px; background: radial-gradient(ellipse at 65% 70%,#9b65562b,transparent 55%),linear-gradient(125deg,#30212a,#211a21 65%,#3b2630); }
  .sd-hero::before { inset: 10px; border-radius: 7px; }
  .sd-copy { padding: 28px 22px 0; }
  .sd-edition { font-size: 7px; letter-spacing: 1.3px; gap: 9px; }
  .sd-edition > span { width: 26px; height: 26px; font-size: 12px; }
  .sd-edition > i { width: 28px; }
  .sd-copy h1 { font-size: clamp(33px,10.5vw,49px); letter-spacing: -1.2px; margin: 21px 0 17px; line-height: 1.08; }
  .sd-copy > p { font-size: 12px; line-height: 1.9; max-width: 320px; }
  .sd-copy .button-row { display: grid; grid-template-columns: 1.12fr 1fr; max-width: none; gap: 8px; margin-top: 22px; }
  .sd-copy .button { min-height: 43px; font-size: 11px; padding: 10px 9px; gap: 6px; }
  .sd-copy .button.primary svg:last-child { display: none; }
  .sd-copy .button svg { width: 14px; height: 14px; }
  .sd-signature { margin-top: 21px; padding-top: 17px; width: 100%; padding-right: 0; }
  .sd-signature-mark { font-size: 32px; }
  .sd-signature strong { font-size: 17px; }
  .sd-signature div > span { font-size: 9px; }
  .sd-stage { height: 352px; width: 100%; margin-top: 9px; }
  .sd-sandrone { height: 352px; width: 405px; left: 49%; bottom: -3px; }
  .sd-dial { width: 270px; height: 270px; left: calc(50% - 135px); top: 31px; }
  .sd-stage-caption { font-size: 48px; top: 12px; left: 4%; letter-spacing: 3px; }
  .sd-stage-number { right: 13px; top: 29px; font-size: 6px; }
  .sd-character-label { right: 16px; bottom: 16px; min-width: 181px; padding: 12px 14px; }
  .sd-character-label strong { font-size: 23px; margin: 6px 0; }
  .sd-character-label > span { font-size: 6px; }
  .sd-character-label small { font-size: 8px; }
  .sd-statbar { margin: 0 8px; padding: 16px 9px; gap: 9px; }
  .sd-statbar strong { font-size: 23px; }
  .sd-statbar > div > span { font-size: 6px; letter-spacing: .6px; }
  .page-top h1 { font-size: 31px; letter-spacing: -.6px; }
}
@media(prefers-reduced-motion:reduce) {
  .button,.char-card,.dg-team-card,.dg-plan-example,.dg-plan-candidate { transition: none; }
  .char-card:hover,.dg-team-card:hover,.dg-plan-example:hover { transform: none; }
}