@import url("../tokens/fonts.css");

/* ==========================================================================
   Deco — gold linework on onyx; the ivory invitation by daylight.
   Colours, spacing, radii and shadows come from tokens.css; motion lives here.
   Rules: only transform/opacity move; entrance animations fill BACKWARDS;
   colour/edge changes only on one element's state. No blur, no gradient washes.
   ========================================================================== */

:root {
  /* the house curves (mirrors tokens.json → easing) */
  --dc-glide: cubic-bezier(.22, .8, .2, 1);
  --dc-settle: cubic-bezier(.3, 1.35, .45, 1);
  --dc-fan: cubic-bezier(.2, .9, .25, 1.12);
  --dc-press: cubic-bezier(.4, 0, .6, 1);
  --dc-exit: cubic-bezier(.55, 0, .75, .2);
  /* durations (mirrors tokens.json → duration) */
  --dc-t-press: 90ms;
  --dc-t-hover: 220ms;
  --dc-t-slide: 420ms;
  --dc-t-sheen: 760ms;
  --dc-t-doors: 760ms;
  --dc-t-reel: 1200ms;
  /* the ground we sit on (cut-out outlines read it) */
  --dc-surface: var(--onyx);
  /* the stepped corner: two 3px steps on every corner */
  --dc-clip: polygon(6px 0, calc(100% - 6px) 0, calc(100% - 6px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 6px, 100% 6px, 100% calc(100% - 6px), calc(100% - 3px) calc(100% - 6px), calc(100% - 3px) calc(100% - 3px), calc(100% - 6px) calc(100% - 3px), calc(100% - 6px) 100%, 6px 100%, 6px calc(100% - 3px), 3px calc(100% - 3px), 3px calc(100% - 6px), 0 calc(100% - 6px), 0 6px, 3px 6px, 3px 3px, 6px 3px);
  --dc-clip-top: polygon(6px 0, calc(100% - 6px) 0, calc(100% - 6px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 6px, 100% 6px, 100% 100%, 0 100%, 0 6px, 3px 6px, 3px 3px, 6px 3px);
  --dc-plaque: polygon(9px 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 9px 100%, 0 50%);
  --dc-pin: rgba(212, 175, 90, .04);
  --dc-scrim: rgba(4, 4, 6, .84);
  --dc-sheen-o: .5;
  color-scheme: dark;
}
[data-theme="light"] { color-scheme: light; --dc-pin: rgba(122, 91, 20, .055); --dc-scrim: rgba(36, 28, 10, .55); }

html { background-color: var(--onyx); }
body {
  margin: 0;
  background-color: var(--onyx);
  background-image: repeating-linear-gradient(90deg, var(--dc-pin) 0 1px, transparent 1px 64px);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 26px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
*, *::before, *::after { box-sizing: border-box; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
html.dc-locked { overflow: hidden; }

/* ---------- type ---------- */
.dc-display-xl { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(50px, 9vw, 88px); line-height: 1; letter-spacing: .02em; }
.dc-display { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(34px, 5vw, 48px); line-height: 1.08; letter-spacing: .02em; }
.dc-heading { margin: 0; font-family: var(--font-heading); font-weight: 400; font-size: 30px; line-height: 36px; letter-spacing: .03em; }
.dc-title { margin: 0; font-family: var(--font-heading); font-weight: 400; font-size: 22px; line-height: 28px; letter-spacing: .03em; }
.dc-body { margin: 0; font-size: 16px; line-height: 26px; }
.dc-small { font-size: 14px; line-height: 22px; }
.dc-label { font: 600 13px/16px var(--font-body); letter-spacing: .18em; text-transform: uppercase; }
.dc-overline { font: 600 11px/16px var(--font-body); letter-spacing: .32em; text-transform: uppercase; color: var(--gold-text); }
.dc-muted { color: var(--ink-soft); }
.dc-gold { color: var(--gold-text); }
.dc-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.dc-ic { width: 20px; height: 20px; flex: none; display: block; }

/* an ornamental divider: <div class="dc-divider"><span class="dc-divider__gem"></span></div> */
.dc-divider { display: flex; align-items: center; gap: 10px; color: var(--gold); }
.dc-divider::before, .dc-divider::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .7; }
.dc-divider__gem { width: 8px; height: 8px; background: currentColor; transform: rotate(45deg); flex: none; box-shadow: 14px -14px 0 -2px currentColor, -14px 14px 0 -2px currentColor; }

/* preview stage */
.dc-stage { padding: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; }
.dc-stage--col { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
.dc-stage--col > * { max-width: 100%; }
.dc-stage--top { align-items: flex-start; }
.dc-cap { width: 100%; font: 600 11px/16px var(--font-body); letter-spacing: .32em; text-transform: uppercase; color: var(--ink-soft); }

/* entrance: first ~8 blocks of a view, top to bottom */
.dc-enter { animation: dc-rise 760ms var(--dc-glide) backwards; animation-delay: calc(var(--i, 0) * 80ms); }
@keyframes dc-rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes dc-fadeup { from { opacity: 0; transform: translateY(8px); } }
@keyframes dc-spin { to { transform: rotate(360deg); } }
@keyframes dc-pop { from { opacity: 0; transform: scale(.5); } }

/* the sheen: a flat band of light that sweeps once across gold */
.dc-sheen { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.dc-sheen::before {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 34%;
  background: var(--gold-sheen); opacity: var(--dc-sheen-o);
  transform: translateX(-160%) skewX(-24deg);
}

/* ======================================================= Button */
.dc-btn {
  position: relative; display: inline-flex; padding: 0; margin: 0; border: 0; background: none; color: inherit;
  font: inherit; cursor: pointer; text-decoration: none; vertical-align: middle; -webkit-tap-highlight-color: transparent;
  --_h: 44px; --_px: 22px; --_fs: 12.5px;
}
.dc-btn::after { content: ""; position: absolute; inset: -2px -3px -6px -3px; z-index: -1; }
.dc-btn--sm { --_h: 36px; --_px: 16px; --_fs: 11.5px; }
.dc-btn--lg { --_h: 54px; --_px: 30px; --_fs: 14px; }
.dc-btn--block, .dc-btn--block .dc-btn__face { width: 100%; }
.dc-btn__face {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: var(--_h); padding: 0 var(--_px); clip-path: var(--dc-clip);
  background: var(--_bg, transparent); color: var(--_fg, var(--gold-text)); box-shadow: var(--_bevel, none);
  font: 600 var(--_fs)/1 var(--font-body); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap;
  transition: transform var(--dc-t-press) var(--dc-press), box-shadow var(--dc-t-press) var(--dc-press), background-color var(--dc-t-hover), color var(--dc-t-hover);
}
.dc-btn__face > :not(.dc-sheen) { position: relative; z-index: 2; }
.dc-btn__label { padding-top: .16em; }
.dc-btn__ic { width: 1.45em; height: 1.45em; }
.dc-btn:hover .dc-sheen::before, .dc-card--interactive:hover > .dc-sheen::before {
  transform: translateX(400%) skewX(-24deg);
  transition: transform var(--dc-t-sheen) var(--dc-glide);
}
.dc-btn:active:not(:disabled) .dc-btn__face { transform: translateY(2px); }

.dc-btn--primary { --_bg: var(--gold); --_fg: var(--on-gold); --_bevel: var(--shadow-bevel); }
.dc-btn--primary:active:not(:disabled) { --_bevel: var(--shadow-bevel-pressed); }
.dc-btn--primary .dc-btn__face::after, .dc-btn--emerald .dc-btn__face::after {
  content: ""; position: absolute; inset: 5px 5px 7px; border: 1px solid rgba(11, 11, 13, .26); pointer-events: none; z-index: 1;
  clip-path: var(--dc-clip); transition: transform var(--dc-t-press) var(--dc-press);
}
.dc-btn--emerald .dc-btn__face::after { border-color: var(--gold); opacity: .55; }
.dc-btn:active:not(:disabled) .dc-btn__face::after { transform: translateY(2px); }
.dc-btn--emerald { --_bg: var(--emerald); --_fg: var(--on-jewel); --_bevel: inset 0 1px 0 rgba(246, 239, 221, .28), inset 0 -2px 0 #0e3a2b, inset 0 -4px 0 #0a2c20; }
.dc-btn--emerald:active:not(:disabled) { --_bevel: inset 0 2px 0 #0e3a2b, inset 0 4px 0 #0a2c20, inset 0 -1px 0 rgba(246, 239, 221, .28); }
.dc-btn--emerald .dc-sheen::before, .dc-btn--danger .dc-sheen::before { opacity: .16; background: var(--on-jewel); }
.dc-btn--danger { --_bg: var(--ruby); --_fg: var(--on-jewel); --_bevel: inset 0 1px 0 rgba(246, 239, 221, .3), inset 0 -2px 0 #6e1f19, inset 0 -4px 0 #561712; }
.dc-btn--danger:active:not(:disabled) { --_bevel: inset 0 2px 0 #6e1f19, inset 0 4px 0 #561712, inset 0 -1px 0 rgba(246, 239, 221, .3); }

/* secondary: a gold outline cut from the ground it sits on */
.dc-btn--secondary { --_bg: var(--gold); --_fg: var(--gold-text); }
.dc-btn--secondary .dc-btn__face::before {
  content: ""; position: absolute; inset: 1px; background: var(--dc-surface); clip-path: var(--dc-clip); z-index: 0;
  transition: box-shadow var(--dc-t-press) var(--dc-press);
}
.dc-btn--secondary:hover .dc-btn__face::before { box-shadow: inset 0 0 0 3px var(--dc-surface), inset 0 0 0 4px var(--line-strong); }
.dc-btn--secondary:active:not(:disabled) .dc-btn__face::before { box-shadow: inset 0 2px 0 var(--line-strong), inset 0 4px 0 var(--line); }
.dc-btn--secondary .dc-sheen::before { background: var(--gold); opacity: .14; }

/* ghost: text with an underline that draws from the middle */
.dc-btn--ghost { --_px: 10px; }
.dc-btn--ghost .dc-btn__face { clip-path: none; }
.dc-btn--ghost .dc-btn__face::before {
  content: ""; position: absolute; left: var(--_px); right: var(--_px); bottom: calc(50% - .95em); height: 1px; background: currentColor;
  transform: scaleX(0); transition: transform 320ms var(--dc-glide);
}
.dc-btn--ghost:hover .dc-btn__face::before { transform: scaleX(1); }

.dc-btn:disabled, .dc-btn[aria-disabled="true"] { cursor: not-allowed; opacity: .42; }
.dc-btn:disabled .dc-sheen { display: none; }
.dc-btn.is-loading { cursor: progress; }
.dc-spin { width: 1.4em; height: 1.4em; fill: currentColor; animation: dc-spin 1.1s linear infinite; position: relative; z-index: 2; }

/* ======================================================= IconButton */
.dc-ibtn {
  position: relative; display: inline-grid; place-items: center; padding: 0; margin: 0; border: 0; background: none;
  color: var(--gold-text); cursor: pointer; vertical-align: middle; --_s: 44px; width: var(--_s); height: var(--_s); flex: none;
}
.dc-ibtn--sm { --_s: 36px; } .dc-ibtn--lg { --_s: 52px; }
.dc-ibtn::after { content: ""; position: absolute; inset: -2px -3px -5px; z-index: -1; }
.dc-ibtn__face {
  position: relative; display: grid; place-items: center; width: 100%; height: 100%; clip-path: var(--dc-clip);
  transition: transform var(--dc-t-press) var(--dc-press), box-shadow var(--dc-t-press) var(--dc-press), background-color var(--dc-t-hover), color var(--dc-t-hover);
}
.dc-ibtn__face .dc-ic { position: relative; z-index: 1; width: calc(var(--_s) * .46); height: calc(var(--_s) * .46); }
.dc-ibtn:active:not(:disabled) .dc-ibtn__face { transform: translateY(2px); }
.dc-ibtn--outline .dc-ibtn__face { background: var(--line-strong); }
.dc-ibtn--outline .dc-ibtn__face::before { content: ""; position: absolute; inset: 1px; clip-path: var(--dc-clip); background: var(--dc-surface); transition: box-shadow var(--dc-t-press); }
.dc-ibtn--outline:hover .dc-ibtn__face { background: var(--gold); }
.dc-ibtn--outline:active:not(:disabled) .dc-ibtn__face::before { box-shadow: inset 0 2px 0 var(--line-strong), inset 0 4px 0 var(--line); }
.dc-ibtn--solid { color: var(--on-gold); }
.dc-ibtn--solid .dc-ibtn__face { background: var(--gold); box-shadow: var(--shadow-bevel); }
.dc-ibtn--solid:active:not(:disabled) .dc-ibtn__face { box-shadow: var(--shadow-bevel-pressed); }
.dc-ibtn--ghost { color: var(--ink-soft); }
.dc-ibtn--ghost .dc-ibtn__face { clip-path: none; }
.dc-ibtn--ghost .dc-ibtn__face::before {
  content: ""; position: absolute; width: 64%; height: 64%; border: 1px solid var(--line-strong); background: var(--sunk);
  transform: rotate(45deg) scale(0); transition: transform 300ms var(--dc-settle);
}
.dc-ibtn--ghost:hover { color: var(--gold-text); }
.dc-ibtn--ghost:hover .dc-ibtn__face::before { transform: rotate(45deg) scale(1); }
.dc-ibtn[aria-pressed="true"] { color: var(--gold-text); }
.dc-ibtn[aria-pressed="true"] .dc-ic path { fill: currentColor; }
.dc-ibtn--outline[aria-pressed="true"] { color: var(--on-gold); }
.dc-ibtn--outline[aria-pressed="true"] .dc-ibtn__face { background: var(--gold); box-shadow: var(--shadow-bevel-pressed); }
.dc-ibtn--outline[aria-pressed="true"] .dc-ibtn__face::before { opacity: 0; }
.dc-ibtn[aria-pressed="true"] .dc-ic { animation: dc-pop 360ms var(--dc-settle) backwards; }
.dc-ibtn:disabled { opacity: .4; cursor: not-allowed; }
.dc-ibtn__count {
  position: absolute; top: -5px; right: -7px; z-index: 2; min-width: 22px; height: 18px; padding: 2px 6px 0;
  display: grid; place-items: center; background: var(--ruby); color: var(--on-jewel); clip-path: var(--dc-plaque);
  font: 700 10px/1 var(--font-body); letter-spacing: .04em;
}

/* ======================================================= Toggle */
.dc-toggle { position: relative; display: inline-flex; align-items: flex-start; gap: 14px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dc-toggle__input, .dc-check__input, .dc-radio__input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.dc-toggle__track {
  position: relative; flex: none; width: 58px; height: 30px; border-radius: var(--radius-round); background: var(--sunk);
  border: 1px solid var(--line-strong); transition: background-color var(--dc-t-hover), border-color var(--dc-t-hover);
}
.dc-toggle__track::before { content: ""; position: absolute; inset: 3px; border-radius: inherit; border: 1px solid var(--line); opacity: .8; }
.dc-toggle__on, .dc-toggle__off {
  position: absolute; top: 50%; margin-top: -5px; font: 700 8.5px/10px var(--font-body); letter-spacing: .14em; text-transform: uppercase;
  transition: opacity var(--dc-t-hover);
}
.dc-toggle__on { left: 9px; color: var(--on-jewel); opacity: 0; }
.dc-toggle__off { right: 8px; color: var(--ink-soft); }
.dc-toggle__knob {
  position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--gold);
  box-shadow: inset 0 1px 0 var(--gold-sheen), inset 0 -2px 0 var(--gold-deep);
  transition: transform var(--dc-t-slide) var(--dc-settle);
}
.dc-toggle__knob svg { display: block; width: 100%; height: 100%; fill: var(--gold-deep); }
.dc-toggle__input:checked + .dc-toggle__track { background: var(--emerald); border-color: var(--gold); }
.dc-toggle__input:checked + .dc-toggle__track .dc-toggle__knob { transform: translateX(28px) rotate(180deg); }
.dc-toggle__input:checked + .dc-toggle__track .dc-toggle__on { opacity: 1; }
.dc-toggle__input:checked + .dc-toggle__track .dc-toggle__off { opacity: 0; }
.dc-toggle:hover .dc-toggle__track { border-color: var(--gold); }
.dc-toggle__input:focus-visible + .dc-toggle__track { outline: 2px solid var(--focus); outline-offset: 3px; }
.dc-toggle__input:disabled ~ * { opacity: .45; } .dc-toggle:has(:disabled) { cursor: not-allowed; }
.dc-toggle__text, .dc-check__text, .dc-radio__text { display: flex; flex-direction: column; gap: 2px; padding-top: 3px; }
.dc-toggle__label, .dc-check__label, .dc-radio__label { font-size: 15px; line-height: 22px; color: var(--ink); }
.dc-toggle__desc, .dc-check__desc, .dc-radio__desc { font-size: 13px; line-height: 19px; color: var(--ink-soft); }

/* ======================================================= Checkbox — a diamond */
.dc-check { position: relative; display: inline-flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.dc-check__box { position: relative; flex: none; width: 28px; height: 28px; }
.dc-check__dia, .dc-check__fill { position: absolute; inset: 5px; transform: rotate(45deg); }
.dc-check__dia { border: 1px solid var(--line-strong); background: var(--sunk); transition: border-color var(--dc-t-hover); }
.dc-check__fill { background: var(--gold); box-shadow: inset 0 1px 0 var(--gold-sheen); transform: rotate(-45deg) scale(0); transition: transform 360ms var(--dc-settle); }
.dc-check__tick { position: absolute; inset: 0; width: 28px; height: 28px; fill: none; stroke: var(--on-gold); stroke-width: 2.2; stroke-linecap: square; transform: scale(0); transition: transform 240ms var(--dc-settle) 60ms; }
.dc-check__bar { position: absolute; left: 9px; right: 9px; top: 13px; height: 2px; background: var(--on-gold); transform: scaleX(0); transition: transform 240ms var(--dc-glide); }
.dc-check__input:checked + .dc-check__box .dc-check__fill, .dc-check__input:indeterminate + .dc-check__box .dc-check__fill { transform: rotate(45deg) scale(1); }
.dc-check__input:checked + .dc-check__box .dc-check__tick { transform: scale(1); }
.dc-check__input:indeterminate + .dc-check__box .dc-check__tick { transform: scale(0); }
.dc-check__input:indeterminate + .dc-check__box .dc-check__bar { transform: scaleX(1); }
.dc-check:hover .dc-check__dia { border-color: var(--gold); }
.dc-check__input:focus-visible + .dc-check__box .dc-check__dia { outline: 2px solid var(--focus); outline-offset: 3px; }
.dc-check__input:disabled ~ * { opacity: .45; } .dc-check:has(:disabled) { cursor: not-allowed; }

/* ======================================================= Radio — a tiny sunburst */
.dc-radios { border: 0; margin: 0; padding: 0; min-width: 0; }
.dc-radios__legend { padding: 0; margin-bottom: 12px; color: var(--ink-soft); }
.dc-radios__list { display: flex; flex-direction: column; gap: 12px; }
.dc-radios--inline .dc-radios__list { flex-direction: row; flex-wrap: wrap; gap: 12px 24px; }
.dc-radio { position: relative; display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.dc-radio__svg { flex: none; width: 30px; height: 30px; display: block; border-radius: 50%; }
.dc-radio__ring { fill: var(--sunk); stroke: var(--line-strong); stroke-width: 1; transition: stroke var(--dc-t-hover); }
.dc-radio__rays { fill: var(--gold); transform-box: view-box; transform-origin: 15px 15px; transform: scale(0) rotate(-60deg); transition: transform 460ms var(--dc-fan); }
.dc-radio__dot { fill: var(--gold); transform-box: view-box; transform-origin: 15px 15px; transform: scale(0); transition: transform 300ms var(--dc-settle); }
.dc-radio__input:checked + .dc-radio__svg .dc-radio__ring { stroke: var(--gold); }
.dc-radio__input:checked + .dc-radio__svg .dc-radio__rays { transform: none; }
.dc-radio__input:checked + .dc-radio__svg .dc-radio__dot { transform: none; }
.dc-radio:hover .dc-radio__ring { stroke: var(--gold); }
.dc-radio__input:focus-visible + .dc-radio__svg { outline: 2px solid var(--focus); outline-offset: 1px; }
.dc-radio__input:disabled ~ * { opacity: .45; } .dc-radio:has(:disabled) { cursor: not-allowed; }

/* ======================================================= TextField + Select (shared field look) */
.dc-field, .dc-select { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.dc-field__label { font: 600 11px/16px var(--font-body); letter-spacing: .28em; text-transform: uppercase; color: var(--ink-soft); transition: color var(--dc-t-hover); }
.dc-field__req { color: var(--gold-text); letter-spacing: 0; }
.dc-field__control, .dc-select__btn {
  position: relative; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px;
  background: var(--sunk); border: 0; border-bottom: 1px solid var(--line-strong); clip-path: var(--dc-clip-top);
  color: var(--ink); font: 400 16px/24px var(--font-body);
}
.dc-field__input {
  flex: 1; min-width: 0; width: 100%; border: 0; background: transparent; color: var(--ink); outline: none;
  font: 400 16px/24px var(--font-body); padding: 13px 0 10px; margin: 0;
}
.dc-field__input::placeholder { color: var(--ink-soft); opacity: 1; }
.dc-field--multi .dc-field__control { align-items: flex-start; }
.dc-field--multi .dc-field__input { resize: vertical; min-height: 84px; }
.dc-field__ic { width: 18px; height: 18px; color: var(--ink-soft); }
.dc-field__suffix { font: 600 11px/1 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); }
.dc-field__rule { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--gold-text); transform: scaleX(0); transition: transform 380ms var(--dc-glide); pointer-events: none; }
.dc-field__control:focus-within .dc-field__rule, .dc-select__btn:focus-visible .dc-field__rule, .dc-select.is-open .dc-field__rule { transform: scaleX(1); }
.dc-field:focus-within .dc-field__label { color: var(--gold-text); }
.dc-field__control:focus-within .dc-field__ic { color: var(--gold-text); }
.dc-field__msg { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 18px; color: var(--ink-soft); }
.dc-field__msg:empty { display: none; }
.dc-field__msg-ic { width: 15px; height: 15px; }
.dc-field.is-error .dc-field__rule { background: var(--ruby-text); transform: scaleX(1); }
.dc-field.is-error .dc-field__label, .dc-field.is-error .dc-field__msg { color: var(--ruby-text); }
.dc-field.is-error .dc-field__msg span { animation: dc-fadeup 260ms var(--dc-glide) backwards; }
.dc-field:has(:disabled) { opacity: .5; }

.dc-select__wrap { position: relative; }
.dc-select__btn { width: 100%; text-align: left; cursor: pointer; }
.dc-select__btn:focus-visible { outline: none; }
.dc-select__btn:hover { border-bottom-color: var(--gold); }
.dc-select__lead { width: 18px; height: 18px; color: var(--ink-soft); }
.dc-select__value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-top: 3px; }
.dc-select__value.is-placeholder { color: var(--ink-soft); }
.dc-select__chev { display: grid; color: var(--gold-text); transition: transform 320ms var(--dc-glide); }
.dc-select__chev .dc-ic { width: 18px; height: 18px; }
.dc-select.is-open .dc-select__chev { transform: rotate(180deg); }
.dc-select:focus-within .dc-field__label { color: var(--gold-text); }
.dc-select__menu {
  position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; right: 0; margin: 0; padding: 6px; list-style: none;
  max-height: 292px; overflow-y: auto; background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow-lift), inset 0 2px 0 var(--gold);
  transform-origin: 50% 0; opacity: 0; transform: translateY(-6px) scaleY(.96);
  transition: opacity 140ms var(--dc-exit), transform 140ms var(--dc-exit); outline: none;
}
.dc-select.is-open .dc-select__menu { opacity: 1; transform: none; transition: opacity 200ms var(--dc-glide), transform 260ms var(--dc-glide); }
.dc-select__opt { display: flex; align-items: center; gap: 12px; padding: 11px 12px 9px; cursor: pointer; color: var(--ink); font-size: 15px; line-height: 20px; }
.dc-select.is-open .dc-select__opt { animation: dc-fadeup 280ms var(--dc-glide) backwards; animation-delay: calc(var(--i) * 26ms); }
.dc-select__opt.is-active { background: var(--sunk); color: var(--gold-text); }
.dc-select__gem { flex: none; width: 7px; height: 7px; border: 1px solid var(--line-strong); transform: rotate(45deg); margin-top: -2px; }
.dc-select__opt[aria-selected="true"] .dc-select__gem { background: var(--gold); border-color: var(--gold); }
.dc-select__optlabel { flex: 1; min-width: 0; }
.dc-select__hint { font: 600 10.5px/1 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); }

/* ======================================================= Tabs — a gold bar slides */
.dc-tabs { min-width: 0; max-width: 100%; }
.dc-tabs__rail { position: relative; isolation: isolate; }
.dc-tabs__rail::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: var(--line); z-index: -1; }
.dc-tabs__list { position: relative; display: flex; gap: 2px; padding-bottom: 6px; overflow-x: auto; scrollbar-width: none; }
.dc-tabs__list::-webkit-scrollbar { display: none; }
.dc-tabs__tab {
  position: relative; flex: none; display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 3px 16px 0;
  border: 0; background: none; color: var(--ink-soft); cursor: pointer; font: 600 12.5px/1 var(--font-body); letter-spacing: .2em; text-transform: uppercase;
  transition: color var(--dc-t-hover);
}
.dc-tabs__tab .dc-ic { width: 17px; height: 17px; margin-top: -3px; }
.dc-tabs__tab:hover { color: var(--ink); }
.dc-tabs__tab[aria-selected="true"] { color: var(--gold-text); }
.dc-tabs__tab:focus-visible { outline-offset: -4px; }
.dc-tabs__count { font: 400 14px/1 var(--font-display); letter-spacing: 0; margin-top: -3px; }
.dc-tabs__bar { position: absolute; left: 0; bottom: 4px; width: 100px; height: 2px; background: var(--gold); transform-origin: 0 0; transform: scaleX(0); pointer-events: none; }
.dc-tabs__gem { position: absolute; left: 0; bottom: 1px; width: 8px; height: 8px; background: var(--gold); transform: scale(0); pointer-events: none; }
.dc-tabs.is-ready .dc-tabs__bar { transition: transform var(--dc-t-slide) var(--dc-glide); }
.dc-tabs.is-ready .dc-tabs__gem { transition: transform calc(var(--dc-t-slide) + 140ms) var(--dc-settle); }
.dc-tabs__panel { padding-top: 20px; outline: none; }
.dc-tabs__panel.is-shown { animation: dc-fadeup 380ms var(--dc-glide) backwards; }
.dc-tabs__panel:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }

/* ======================================================= SegmentedControl — the plate slides */
.dc-seg {
  position: relative; display: inline-grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); padding: 4px;
  background: var(--line-strong); clip-path: var(--dc-clip); isolation: isolate; vertical-align: middle; max-width: 100%;
}
.dc-seg::before { content: ""; position: absolute; inset: 1px; background: var(--sunk); clip-path: var(--dc-clip); z-index: -1; }
.dc-seg--block { display: grid; width: 100%; }
.dc-seg__plate {
  position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--n)); background: var(--gold);
  clip-path: var(--dc-clip); box-shadow: var(--shadow-bevel); overflow: hidden; transition: transform var(--dc-t-slide) var(--dc-glide);
}
.dc-seg__plate.is-shine .dc-sheen::before { animation: dc-sweep var(--dc-t-sheen) var(--dc-glide) 160ms backwards; }
@keyframes dc-sweep { from { transform: translateX(-160%) skewX(-24deg); } to { transform: translateX(400%) skewX(-24deg); } }
.dc-seg__opt {
  position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 0;
  height: 38px; padding: 3px 16px 0; border: 0; background: none; cursor: pointer; color: var(--ink-soft); white-space: nowrap;
  font: 600 12px/1 var(--font-body); letter-spacing: .18em; text-transform: uppercase; transition: color 200ms var(--dc-glide) 80ms;
}
.dc-seg__opt .dc-ic { width: 16px; height: 16px; margin-top: -3px; }
.dc-seg__opt:hover { color: var(--ink); }
.dc-seg__opt[aria-checked="true"] { color: var(--on-gold); }
.dc-seg__opt:focus-visible { outline-offset: -3px; outline-color: var(--focus); }
.dc-seg--sm .dc-seg__opt { height: 30px; padding: 3px 12px 0; font-size: 11px; }

/* ======================================================= Slider */
.dc-slider { display: flex; flex-direction: column; gap: 8px; min-width: 0; --p: 0; }
.dc-slider__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.dc-slider__out { font: 400 24px/1 var(--font-display); color: var(--gold-text); }
.dc-slider__wrap { position: relative; height: 30px; container-type: inline-size; }
.dc-slider__track { position: absolute; left: 11px; right: 11px; top: 14px; height: 2px; background: var(--line-strong); }
.dc-slider__track::before, .dc-slider__track::after { content: ""; position: absolute; top: -4px; width: 1px; height: 10px; background: var(--line-strong); }
.dc-slider__track::before { left: 0; } .dc-slider__track::after { right: 0; }
.dc-slider__fill { position: absolute; left: 0; right: 0; top: -1px; height: 4px; background: var(--gold); transform-origin: 0 50%; transform: scaleX(var(--p)); }
.dc-slider__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 2; -webkit-appearance: none; appearance: none; background: none; }
.dc-slider__input::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 30px; }
.dc-slider__input::-moz-range-thumb { width: 22px; height: 30px; border: 0; }
.dc-slider__glide { position: absolute; top: 0; bottom: 0; left: 11px; width: 0; pointer-events: none; transform: translateX(calc(var(--p) * (100cqw - 22px))); }
.dc-slider__thumb {
  position: absolute; left: -9px; top: 6px; width: 18px; height: 18px; background: var(--gold);
  box-shadow: inset 1px 1px 0 var(--gold-sheen), inset -2px -2px 0 var(--gold-deep); transform: rotate(45deg);
  transition: transform 220ms var(--dc-settle);
}
.dc-slider__thumb::after { content: ""; position: absolute; inset: 6px; background: var(--dc-surface); }
.dc-slider__input:hover ~ .dc-slider__glide .dc-slider__thumb { transform: rotate(45deg) scale(1.12); }
.dc-slider__input:active ~ .dc-slider__glide .dc-slider__thumb { transform: rotate(135deg) scale(1.2); }
.dc-slider__input:focus-visible ~ .dc-slider__glide .dc-slider__thumb { outline: 2px solid var(--focus); outline-offset: 4px; }
.dc-slider__input:disabled { cursor: not-allowed; } .dc-slider:has(:disabled) { opacity: .45; }
.dc-slider__ticks { display: flex; justify-content: space-between; }
.dc-slider__ticks span { width: 22px; text-align: center; font: 400 13px/1 var(--font-display); color: var(--ink-soft); white-space: nowrap; display: flex; justify-content: center; }

/* ======================================================= Card */
.dc-card {
  position: relative; display: flex; flex-direction: column; gap: 18px; padding: 24px; min-width: 0;
  background: var(--surface); --dc-surface: var(--surface); color: var(--ink); border: 1px solid var(--line);
  box-shadow: var(--shadow-card); text-decoration: none;
}
.dc-card::before { content: ""; position: absolute; inset: 5px; border: 1px solid var(--line); pointer-events: none; opacity: .7; }
.dc-card--framed { border: 0; padding: 34px 32px 30px; }
.dc-card--framed::before { inset: 10px; opacity: .45; }
.dc-card--emerald {
  background: var(--emerald); border-color: var(--gold-deep);
  --surface: #17543f; --dc-surface: #17543f; --sunk: #0f3f2f; --ink: var(--on-jewel); --ink-soft: #cfdccf; --gold-text: #f0d48f;
  --line: #2f6a54; --line-strong: #8db6a3; --focus: #f6efdd; --emerald-text: #a8ecc9; --emerald: #0f3f2f;
}
.dc-card--emerald::before { border-color: var(--gold); opacity: .35; }
.dc-card--gold {
  background: var(--gold); border-color: var(--gold-deep); overflow: hidden;
  --ink: var(--on-gold); --ink-soft: #2a2210; --gold-text: #2a2210; --line: rgba(11, 11, 13, .22); --line-strong: #4a3a12; --dc-surface: var(--gold);
}
.dc-card--gold::before { border-color: rgba(11, 11, 13, .3); }
.dc-card--gold > .dc-sheen { --dc-sheen-o: .55; }
.dc-card--interactive { cursor: pointer; transition: transform 300ms var(--dc-glide), box-shadow 300ms var(--dc-glide), border-color var(--dc-t-hover); }
.dc-card--interactive::after { content: ""; position: absolute; left: -2px; right: -6px; top: 0; bottom: -8px; z-index: -1; }
.dc-card--interactive:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--line-strong); }
.dc-card--interactive > .dc-sheen { --dc-sheen-o: .07; }
[data-theme="light"] .dc-card--interactive > .dc-sheen { --dc-sheen-o: .4; }
.dc-card__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; position: relative; z-index: 2; }
.dc-card__titles { min-width: 0; }
.dc-card__over { margin-bottom: 6px; }
.dc-card__title { margin: 0; font: 400 24px/30px var(--font-heading); letter-spacing: .03em; color: var(--ink); }
.dc-card__body { position: relative; z-index: 2; min-width: 0; color: var(--ink); }
.dc-card__body p { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 24px; }
.dc-card__foot { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 18px; border-top: 1px solid var(--line); margin-top: auto; }
.dc-card__crest { position: absolute; left: calc(50% - 36px); top: -30px; width: 72px; pointer-events: none; }

/* ======================================================= DecoFrame — stepped corners draw in */
.dc-frame { position: relative; padding: 36px 34px; }
.dc-frame__body { position: relative; z-index: 2; }
.dc-framed { --_fc: var(--gold); }
.dc-framed--emerald { --_fc: var(--emerald-text); }
.dc-framed--ivory { --_fc: var(--ink-soft); }
.dc-frame__parts { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.dc-frame__line { position: absolute; background: var(--_fc); }
.dc-frame__line--t, .dc-frame__line--b { left: 28px; right: 28px; height: 1px; }
.dc-frame__line--l, .dc-frame__line--r { top: 28px; bottom: 28px; width: 1px; }
.dc-frame__line--t { top: 0; } .dc-frame__line--b { bottom: 0; } .dc-frame__line--l { left: 0; } .dc-frame__line--r { right: 0; }
.dc-framed--double .dc-frame__line { background: none; }
.dc-framed--double .dc-frame__line--t, .dc-framed--double .dc-frame__line--b { height: 5px; border-top: 1px solid var(--_fc); border-bottom: 1px solid var(--_fc); }
.dc-framed--double .dc-frame__line--b { transform-origin: 50% 50%; }
.dc-framed--double .dc-frame__line--l, .dc-framed--double .dc-frame__line--r { width: 5px; border-left: 1px solid var(--_fc); border-right: 1px solid var(--_fc); }
.dc-frame__corner { position: absolute; width: 28px; height: 28px; }
.dc-frame__corner svg { display: block; width: 28px; height: 28px; overflow: visible; }
.dc-frame__corner--tl { top: 0; left: 0; transform-origin: 0 0; }
.dc-frame__corner--tr { top: 0; right: 0; transform-origin: 100% 0; } .dc-frame__corner--tr svg { transform: scaleX(-1); }
.dc-frame__corner--br { bottom: 0; right: 0; transform-origin: 100% 100%; } .dc-frame__corner--br svg { transform: scale(-1, -1); }
.dc-frame__corner--bl { bottom: 0; left: 0; transform-origin: 0 100%; } .dc-frame__corner--bl svg { transform: scaleY(-1); }
.dc-frame__step { fill: none; stroke: var(--_fc); stroke-width: 1; }
.dc-frame__step--in { display: none; }
.dc-framed--double .dc-frame__step--in { display: inline; }
.dc-frame__gem { fill: var(--_fc); }
.dc-frame__crest { position: absolute; left: calc(50% - 40px); top: -34px; width: 80px; height: 42px; transform-origin: 50% 100%; }
.dc-frame__fan { display: block; width: 100%; height: auto; fill: var(--_fc, var(--gold)); }
.dc-framed.is-waiting .dc-frame__line--t, .dc-framed.is-waiting .dc-frame__line--b { transform: scaleX(0); }
.dc-framed.is-waiting .dc-frame__line--l, .dc-framed.is-waiting .dc-frame__line--r { transform: scaleY(0); }
.dc-framed.is-waiting .dc-frame__corner, .dc-framed.is-waiting .dc-frame__crest { opacity: 0; }
.dc-framed.is-drawing .dc-frame__line--t, .dc-framed.is-drawing .dc-frame__line--b { animation: dc-drawx 720ms var(--dc-glide) backwards; }
.dc-framed.is-drawing .dc-frame__line--l, .dc-framed.is-drawing .dc-frame__line--r { animation: dc-drawy 720ms var(--dc-glide) 60ms backwards; }
.dc-framed.is-drawing .dc-frame__corner { animation: dc-corner 560ms var(--dc-settle) 460ms backwards; }
.dc-framed.is-drawing .dc-frame__corner .dc-frame__gem { animation: dc-gem 420ms var(--dc-settle) 860ms backwards; transform-box: fill-box; transform-origin: center; }
.dc-framed.is-drawing .dc-frame__crest { animation: dc-crest 620ms var(--dc-fan) 700ms backwards; }
@keyframes dc-drawx { from { transform: scaleX(0); } }
@keyframes dc-drawy { from { transform: scaleY(0); } }
@keyframes dc-corner { from { opacity: 0; transform: scale(.25); } }
@keyframes dc-gem { from { opacity: 0; transform: scale(0) rotate(-90deg); } }
@keyframes dc-crest { from { opacity: 0; transform: scaleY(.1) scaleX(.6); } }

/* ======================================================= Sunburst / Fan */
.dc-sun { position: relative; display: inline-block; width: var(--size); max-width: 100%; vertical-align: middle; --_ray: var(--gold); --_ray2: var(--gold-deep); --_hub: var(--gold); }
.dc-sun--ivory { --_ray: var(--ink-soft); --_ray2: var(--line-strong); --_hub: var(--ink-soft); }
.dc-sun--line { --_ray: var(--line-strong); --_ray2: var(--line); --_hub: var(--line-strong); }
.dc-sun--emerald { --_ray: var(--emerald-text); --_ray2: var(--emerald); --_hub: var(--gold); }
.dc-sun__svg { display: block; width: 100%; height: auto; overflow: visible; }
.dc-ray { transform-box: view-box; transform-origin: 0 0; }
.dc-ray--long { fill: var(--_ray); } .dc-ray--short { fill: var(--_ray2); }
.dc-sun__ring { fill: none; stroke: var(--_hub); stroke-width: 1.5; }
.dc-sun__hub { fill: var(--_hub); transform-box: view-box; transform-origin: 0 0; }
.dc-sun__hubin { fill: var(--dc-surface); }
.dc-sun__arc { fill: none; stroke: var(--_ray); stroke-width: 1; stroke-dasharray: 1.5 4.5; }
.dc-sun__base { stroke: var(--_ray); stroke-width: 1.5; }
.dc-sun.is-waiting .dc-ray { transform: scale(0); }
.dc-sun.is-waiting .dc-sun__hub, .dc-sun.is-waiting .dc-sun__ring, .dc-sun.is-waiting .dc-sun__arc { opacity: 0; }
.dc-sun.is-open .dc-ray { animation: dc-ray 820ms var(--dc-fan) backwards; animation-delay: calc(120ms + var(--i) * 34ms); }
.dc-sun.is-open .dc-sun__hub { animation: dc-hub 520ms var(--dc-settle) backwards; }
.dc-sun.is-open .dc-sun__ring, .dc-sun.is-open .dc-sun__arc { animation: dc-fade 900ms var(--dc-glide) 300ms backwards; }
@keyframes dc-ray { from { opacity: 0; transform: scale(0) rotate(-14deg); } }
@keyframes dc-hub { from { opacity: 0; transform: scale(.3); } }
@keyframes dc-fade { from { opacity: 0; } }
.dc-sun--spin .dc-sun__spin { transform-box: view-box; transform-origin: 0 0; animation: dc-spin 140s linear infinite; }
.dc-sun__center { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.dc-sun--interactive { cursor: pointer; }

/* ======================================================= Numeral — tall reels */
.dc-num { display: inline-flex; align-items: flex-end; font-family: var(--font-display); font-weight: 400; color: var(--gold-text); line-height: 1; white-space: nowrap; font-size: 40px; vertical-align: bottom; }
.dc-num--sm { font-size: 26px; } .dc-num--md { font-size: 40px; } .dc-num--lg { font-size: 60px; } .dc-num--xl { font-size: clamp(72px, 12vw, 120px); }
.dc-num__row { display: inline-flex; align-items: flex-end; }
.dc-num--tall { padding-top: .24em; }
.dc-num--tall .dc-num__row { transform: scaleY(1.22); transform-origin: 50% 100%; }
.dc-num__slot { display: inline-block; height: 1.1em; overflow: hidden; }
.dc-num__reel { display: flex; flex-direction: column; transition: transform var(--dc-t-reel) var(--dc-glide); }
.dc-num__reel > span, .dc-num__ch { display: block; height: 1.1em; line-height: 1.12em; text-align: center; }
.dc-num__ch { display: inline-block; padding: 0 .02em; }

/* ======================================================= ElevatorDial */
.dc-dial { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 340px; margin: 0 auto; }
.dc-dial__face { width: 100%; }
.dc-dial__face svg { display: block; width: 100%; height: auto; overflow: visible; }
.dc-dial__crown { fill: var(--line-strong); opacity: .55; }
.dc-dial__rim { fill: none; stroke: var(--gold); stroke-width: 1.5; }
.dc-dial__rim2 { fill: none; stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 3; }
.dc-dial__tick { stroke: var(--line); stroke-width: 2; transition: stroke 240ms var(--dc-glide); }
.dc-dial__tick.is-major { stroke-width: 3; stroke: var(--line-strong); }
.dc-dial__tick.is-lit { stroke: var(--gold-text); }
.dc-dial__lab { font: 400 12px var(--font-display); fill: var(--ink-soft); }
.dc-dial__needle { transform-box: view-box; transform-origin: 130px 142px; transition: transform var(--dc-t-reel) var(--dc-settle); }
.dc-dial__nd { fill: var(--gold); }
.dc-dial__ndgem { fill: var(--gold-sheen); stroke: var(--gold-deep); stroke-width: 1; }
.dc-dial__hubray { fill: var(--gold-deep); }
.dc-dial__hub { fill: var(--gold); }
.dc-dial__pivot { fill: var(--dc-surface); stroke: var(--gold-deep); }
.dc-dial__plinth { fill: var(--gold-deep); }
.dc-dial__read { display: flex; align-items: flex-end; gap: 8px; margin-top: 6px; }
.dc-dial__unit, .dc-dial__cap { font: 600 11px/16px var(--font-body); letter-spacing: .3em; text-transform: uppercase; color: var(--ink-soft); }
.dc-dial__unit { padding-bottom: .5em; }
.dc-dial__cap { margin-top: 6px; text-align: center; }

/* ======================================================= Badge — a plaque */
.dc-badge {
  position: relative; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 2px 15px 0; vertical-align: middle;
  clip-path: var(--dc-plaque); background: var(--_bg); color: var(--_fg); white-space: nowrap; isolation: isolate;
  font: 600 11px/1 var(--font-body); letter-spacing: .2em; text-transform: uppercase;
  transition: opacity 180ms var(--dc-exit), transform 180ms var(--dc-exit);
}
.dc-badge--sm { height: 22px; padding: 2px 12px 0; font-size: 10px; letter-spacing: .18em; }
.dc-badge--gold { --_bg: var(--gold); --_fg: var(--on-gold); }
.dc-badge--emerald { --_bg: var(--emerald); --_fg: var(--on-jewel); }
.dc-badge--ruby { --_bg: var(--ruby); --_fg: var(--on-jewel); }
.dc-badge--ivory { --_bg: var(--line); --_fg: var(--ink); }
.dc-badge--outline { --_bg: var(--line-strong); --_fg: var(--gold-text); }
.dc-badge--outline::before { content: ""; position: absolute; inset: 1px 1.6px; background: var(--dc-surface); clip-path: var(--dc-plaque); z-index: -1; }
.dc-badge__ic { width: 13px; height: 13px; margin-top: -2px; }
.dc-badge__dot { width: 6px; height: 6px; background: currentColor; transform: rotate(45deg); margin-top: -2px; }
.dc-badge__x { display: grid; place-items: center; width: 16px; height: 16px; padding: 0; margin: -2px -5px 0 2px; border: 0; background: none; color: inherit; cursor: pointer; }
.dc-badge__x .dc-ic { width: 12px; height: 12px; }
.dc-badge__x:focus-visible { outline: 1.5px solid currentColor; outline-offset: 0; }
.dc-badge.is-leaving { opacity: 0; transform: scale(.85); }
.dc-badge.is-new { animation: dc-pop 420ms var(--dc-settle) backwards; }

/* ======================================================= Avatar */
.dc-avatar { position: relative; display: inline-grid; place-items: center; flex: none; width: var(--_s); height: var(--_s); --_s: 44px; isolation: isolate; vertical-align: middle; }
.dc-avatar--sm { --_s: 32px; } .dc-avatar--lg { --_s: 64px; } .dc-avatar--xl { --_s: 96px; }
.dc-avatar__disc {
  width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
  background: var(--_bg); color: var(--_fg); box-shadow: 0 0 0 2px var(--dc-surface), 0 0 0 3px var(--gold);
}
.dc-avatar__disc img { width: 100%; height: 100%; object-fit: cover; }
.dc-avatar__in { font: 400 calc(var(--_s) * .4)/1 var(--font-display); letter-spacing: .02em; padding-top: .14em; }
.dc-avatar--emerald { --_bg: var(--emerald); --_fg: var(--on-jewel); }
.dc-avatar--onyx { --_bg: var(--sunk); --_fg: var(--gold-text); }
.dc-avatar--gold { --_bg: var(--gold); --_fg: var(--on-gold); }
.dc-avatar--ruby { --_bg: var(--ruby); --_fg: var(--on-jewel); }
.dc-avatar--more { --_bg: var(--sunk); --_fg: var(--ink-soft); }
.dc-avatar--more .dc-avatar__in { font: 600 calc(var(--_s) * .34)/1 var(--font-body); }
.dc-avatar__status {
  position: absolute; right: 0; bottom: 0; width: max(10px, calc(var(--_s) * .26)); height: max(10px, calc(var(--_s) * .26));
  transform: rotate(45deg); border: 2px solid var(--dc-surface); background: var(--line-strong); z-index: 2;
}
.dc-avatar__status--in { background: var(--emerald-text); animation: dc-pop 360ms var(--dc-settle) backwards; }
.dc-avatar__status--away { background: var(--gold); }
.dc-avatar__halo { position: absolute; inset: calc(var(--_s) * -.4); z-index: -1; pointer-events: none; width: auto; max-width: none; display: block; }
.dc-avatar__halo svg { display: block; width: 100%; height: 100%; }
.dc-avstack { display: inline-flex; align-items: center; }
.dc-avstack > .dc-avatar + .dc-avatar { margin-left: calc(var(--_s) * -.26); }

/* ======================================================= Tooltip */
.dc-tipwrap { position: relative; display: inline-flex; }
.dc-tip {
  position: absolute; left: 50%; bottom: calc(100% + 12px); z-index: 60; width: max-content; max-width: 240px;
  padding: 9px 14px 7px; background: var(--ink); color: var(--onyx); box-shadow: inset 0 2px 0 var(--gold), 0 14px 30px -12px rgba(0, 0, 0, .6);
  font: 600 13px/18px var(--font-body); letter-spacing: .04em; text-align: center; pointer-events: none;
  opacity: 0; transform: translateX(calc(-50% + var(--dx, 0px))) translateY(5px);
  transition: opacity 160ms var(--dc-glide), transform 220ms var(--dc-glide);
}
.dc-tip::after { content: ""; position: absolute; left: calc(50% - 4px - var(--dx, 0px)); bottom: -4px; width: 8px; height: 8px; background: var(--ink); transform: rotate(45deg); }
.dc-tip--bottom { bottom: auto; top: calc(100% + 12px); transform: translateX(calc(-50% + var(--dx, 0px))) translateY(-5px); }
.dc-tip--bottom::after { bottom: auto; top: -4px; background: var(--gold); }
.dc-tip.is-shown { opacity: 1; transform: translateX(calc(-50% + var(--dx, 0px))) translateY(0); }

/* ======================================================= Toast */
.dc-toasts { position: fixed; top: 16px; right: 16px; z-index: 200; display: flex; flex-direction: column; gap: 10px; width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.dc-toast {
  pointer-events: auto; position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 16px 8px 16px 14px; width: 100%;
  background: var(--surface); --dc-surface: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); box-shadow: var(--shadow-modal);
  overflow: hidden; transform-origin: 50% 0; --_tc: var(--gold);
  animation: dc-toastin 560ms var(--dc-glide) backwards;
  transition: opacity 240ms var(--dc-exit), transform 260ms var(--dc-exit);
}
.dc-toast--emerald { --_tc: var(--emerald-text); } .dc-toast--ruby { --_tc: var(--ruby-text); }
.dc-toast::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--_tc); }
.dc-toast__gem { position: absolute; top: -5px; left: calc(50% - 5px); width: 10px; height: 10px; background: var(--_tc); transform: rotate(45deg); }
@keyframes dc-toastin { from { opacity: 0; transform: translateY(-14px) scaleY(.6); } }
.dc-toast.is-leaving { opacity: 0; transform: translateX(28px); }
.dc-toast__ic { position: relative; flex: none; width: 38px; height: 38px; display: grid; place-items: center; color: var(--_tc); }
.dc-toast__ic::before { content: ""; position: absolute; inset: 6px; border: 1px solid currentColor; transform: rotate(45deg); }
.dc-toast__ic .dc-ic { width: 17px; height: 17px; }
.dc-toast__text { flex: 1; min-width: 0; padding-top: 4px; }
.dc-toast__title { font: 400 21px/26px var(--font-heading); letter-spacing: .03em; }
.dc-toast__msg { font-size: 14px; line-height: 21px; color: var(--ink-soft); margin-top: 2px; }
.dc-toast > .dc-ibtn { margin-top: -2px; }
.dc-toast__timer { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--_tc); opacity: .7; transform-origin: 0 50%; animation: dc-timer 5s linear; }
.dc-toast:hover .dc-toast__timer, .dc-toast:focus-within .dc-toast__timer { animation-play-state: paused; }
@keyframes dc-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ======================================================= Modal — lift doors */
.dc-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; overflow-y: auto; }
.dc-modal__scrim { position: fixed; inset: 0; background: var(--dc-scrim); opacity: 0; transition: opacity 300ms var(--dc-glide); }
.dc-modal.is-in .dc-modal__scrim { opacity: 1; }
.dc-modal__car {
  position: relative; width: min(520px, 100%); background: var(--surface); --dc-surface: var(--surface); color: var(--ink);
  box-shadow: var(--shadow-modal); overflow: hidden; outline: none;
  opacity: 0; transform: translateY(20px) scale(.98); transition: opacity 300ms var(--dc-glide), transform 460ms var(--dc-glide);
}
.dc-modal__car--sm { width: min(420px, 100%); } .dc-modal__car--lg { width: min(660px, 100%); }
.dc-modal.is-in .dc-modal__car, .dc-modal--inline .dc-modal__car { opacity: 1; transform: none; }
.dc-modal--inline { position: relative; inset: auto; z-index: auto; display: block; padding: 0; overflow: visible; }
.dc-modal--inline .dc-modal__car { margin: 0 auto; }
.dc-modal__content {
  position: relative; display: flex; flex-direction: column; gap: 14px; padding: 36px 36px 32px;
  opacity: 0; transform: translateY(10px); transition: opacity 200ms var(--dc-exit), transform 200ms var(--dc-exit);
}
.dc-modal.is-open .dc-modal__content { opacity: 1; transform: none; transition: opacity 460ms var(--dc-glide) 380ms, transform 700ms var(--dc-glide) 380ms; }
.dc-modal__lamp { align-self: center; display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 2px; border: 1px solid var(--line-strong); font: 400 14px/18px var(--font-display); color: var(--ink-soft); }
.dc-modal__arrow { width: 10px; height: 8px; background: var(--line-strong); clip-path: polygon(50% 0, 100% 100%, 0 100%); margin-top: -2px; transition: background-color 200ms 700ms; }
.dc-modal__floor { transition: color 200ms 700ms; }
.dc-modal.is-open .dc-modal__arrow { background: var(--gold); }
.dc-modal.is-open .dc-modal__floor { color: var(--gold-text); }
.dc-modal__over { text-align: center; }
.dc-modal__title { margin: 0; text-align: center; font: 400 30px/36px var(--font-heading); letter-spacing: .03em; color: var(--ink); }
.dc-modal__body { color: var(--ink-soft); font-size: 15px; line-height: 24px; }
.dc-modal__body > p { margin: 0; text-align: center; }
.dc-modal__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }
.dc-modal__actions:empty { display: none; }
.dc-modal__x { position: absolute; top: 12px; right: 12px; z-index: 1; }
.dc-modal__door {
  position: absolute; top: 0; bottom: 0; width: calc(50% + 1px); z-index: 2; overflow: hidden; background: var(--surface);
  transition: transform 460ms var(--dc-exit);
}
.dc-modal__door--l { left: 0; border-right: 1px solid var(--gold); }
.dc-modal__door--r { right: 0; border-left: 1px solid var(--gold-deep); }
.dc-modal.is-open .dc-modal__door { transition: transform var(--dc-t-doors) var(--dc-glide) 40ms; }
.dc-modal.is-open .dc-modal__door--l { transform: translateX(-102%); }
.dc-modal.is-open .dc-modal__door--r { transform: translateX(102%); }
.dc-door__panel { position: absolute; top: 14px; bottom: 14px; border: 1px solid var(--line-strong); background-image: repeating-linear-gradient(90deg, transparent 0 13px, var(--line) 13px 14px); }
.dc-modal__door--l .dc-door__panel { left: 14px; right: 10px; } .dc-modal__door--r .dc-door__panel { left: 10px; right: 14px; }
.dc-door__art { position: absolute; top: 50%; width: 260px; height: 260px; margin-top: -130px; }
.dc-modal__door--l .dc-door__art { right: -130px; } .dc-modal__door--r .dc-door__art { left: -130px; }
.dc-door__sun { display: block; width: 100%; height: 100%; }
.dc-door__r { fill: var(--gold); } .dc-door__r2 { fill: var(--gold-deep); }
.dc-door__ring { fill: var(--surface); stroke: var(--gold); stroke-width: 1.5; } .dc-door__hub { fill: var(--gold); }

/* ======================================================= Progress — chevron bar */
.dc-progress { display: flex; flex-direction: column; gap: 8px; min-width: 0; --_pc: var(--gold); }
.dc-progress--emerald { --_pc: var(--emerald-text); }
.dc-progress__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.dc-progress__label { font-size: 14px; line-height: 20px; color: var(--ink); }
.dc-progress__val { font: 400 18px/1 var(--font-display); color: var(--gold-text); }
.dc-progress__track { position: relative; height: 14px; background: var(--line-strong); clip-path: var(--dc-plaque); overflow: hidden; }
.dc-progress--sm .dc-progress__track { height: 10px; }
.dc-progress__track::before { content: ""; position: absolute; inset: 1px 1.5px; background: var(--sunk); clip-path: var(--dc-plaque); }
.dc-progress__fill {
  position: absolute; top: 3px; bottom: 3px; left: 4px; right: 4px; background: var(--_pc); clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 0 100%);
  transform: translateX(-100%); transition: transform 1300ms var(--dc-glide);
}
.dc-progress--sm .dc-progress__fill { top: 2px; bottom: 2px; }
.dc-progress__chev { position: absolute; inset: 0; background-image: repeating-linear-gradient(115deg, transparent 0 6px, rgba(11, 11, 13, .2) 6px 8px); }
.dc-progress__ticks { position: absolute; inset: 0 4px; background-image: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), var(--sunk) calc(10% - 1px) 10%); pointer-events: none; }
.dc-progress.is-indeterminate .dc-progress__fill { right: auto; width: 34%; animation: dc-indet 1.7s var(--dc-glide) infinite; }
@keyframes dc-indet { from { transform: translateX(-110%); } to { transform: translateX(310%); } }

/* ======================================================= Widgets: StatTile */
.dc-stat { overflow: hidden; gap: 10px; container-type: inline-size; }
.dc-stat .dc-num--lg { font-size: min(60px, 27cqw); } .dc-stat .dc-num--md { font-size: min(40px, 17cqw); }
.dc-stat .dc-card__body { display: flex; flex-direction: column; gap: 10px; }
.dc-stat__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dc-stat__top .dc-overline { color: var(--ink-soft); }
.dc-stat__ic { position: relative; display: grid; place-items: center; width: 36px; height: 36px; color: var(--gold-text); flex: none; }
.dc-stat__ic::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--line-strong); transform: rotate(45deg); }
.dc-stat__ic .dc-ic { width: 17px; height: 17px; position: relative; }
.dc-stat__fig { display: flex; align-items: flex-end; gap: 4px; position: relative; z-index: 1; }
.dc-stat__affix { font: 400 30px/1 var(--font-heading); color: var(--gold-text); padding-bottom: .22em; }
.dc-stat__foot { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; line-height: 18px; color: var(--ink-soft); position: relative; z-index: 1; }
.dc-stat__delta { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; letter-spacing: .06em; }
.dc-stat__delta .dc-ic { width: 14px; height: 14px; margin-top: -2px; }
.dc-stat__delta.is-up { color: var(--emerald-text); } .dc-stat__delta.is-down { color: var(--ruby-text); }
.dc-stat__fan { position: absolute; right: -46px; bottom: -14px; width: 140px; pointer-events: none; z-index: 0; opacity: .7; }
.dc-stat__fansvg { display: block; width: 100%; fill: var(--line); }

/* ======================================================= Widgets: Skyline */
.dc-sky { display: flex; flex-direction: column; gap: 14px; }
.dc-sky__read { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.dc-sky__fig { display: flex; align-items: flex-end; gap: 8px; }
.dc-sky__unit, .dc-sky__day { font: 600 11px/16px var(--font-body); letter-spacing: .28em; text-transform: uppercase; color: var(--ink-soft); padding-bottom: 6px; }
.dc-sky__plot { position: relative; height: 196px; }
.dc-sky__grid { position: absolute; inset: 22px 0 0; display: flex; flex-direction: column; justify-content: space-between; }
.dc-sky__grid span { border-top: 1px dashed var(--line); }
.dc-sky__towers { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 10px; padding: 0 2px; }
.dc-sky__tower {
  position: relative; flex: 1; min-width: 0; height: var(--h); padding: 0; border: 0; background: none; cursor: pointer;
  display: flex; flex-direction: column; transform-origin: 50% 100%; --_tc: var(--line-strong);
}
.dc-sky__tower::after { content: ""; position: absolute; inset: -24px -5px 0; }
.dc-sky__crown {
  height: 24px; flex: none; background: var(--_tc); transition: background-color var(--dc-t-hover);
  clip-path: polygon(0 100%, 0 72%, 13% 72%, 13% 48%, 28% 48%, 28% 26%, 42% 26%, 50% 0, 58% 26%, 72% 26%, 72% 48%, 87% 48%, 87% 72%, 100% 72%, 100% 100%);
}
.dc-sky__body { flex: 1; background-color: var(--_tc); background-image: repeating-linear-gradient(90deg, transparent 0 5px, rgba(11, 11, 13, .2) 5px 6px); transition: background-color var(--dc-t-hover); }
.dc-sky__tower[aria-pressed="true"] { --_tc: var(--gold); }
.dc-sky__val { position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%) translateY(4px); font: 400 14px/1 var(--font-display); color: var(--gold-text); opacity: 0; transition: opacity 200ms, transform 300ms var(--dc-glide); pointer-events: none; }
.dc-sky__tower[aria-pressed="true"] .dc-sky__val { opacity: 1; transform: translateX(-50%); }
.dc-sky__tower:focus-visible { outline-offset: 4px; }
.dc-sky__towers.is-waiting .dc-sky__tower { transform: scaleY(0); }
.dc-sky__towers.is-rising .dc-sky__tower { animation: dc-risey 1000ms var(--dc-glide) backwards; animation-delay: calc(var(--i) * 70ms); }
@keyframes dc-risey { from { transform: scaleY(0); } }
.dc-sky__axis { display: flex; gap: 10px; padding: 9px 2px 0; border-top: 1px solid var(--gold); }
.dc-sky__axis span { flex: 1; min-width: 0; text-align: center; font: 600 10.5px/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); overflow: hidden; }

/* ======================================================= Widgets: Programme */
.dc-prog { list-style: none; margin: 0; padding: 0; container: prog / inline-size; }
.dc-prog__item { position: relative; display: grid; grid-template-columns: 58px 12px minmax(0, 1fr) auto; gap: 0 14px; align-items: start; padding: 14px 0; border-top: 1px solid var(--line); }
.dc-prog__item:first-child { border-top: 0; padding-top: 4px; }
.dc-prog__time { font: 400 18px/26px var(--font-display); color: var(--gold-text); white-space: nowrap; }
.dc-prog__mark { position: relative; align-self: stretch; }
.dc-prog__mark::before { content: ""; position: absolute; left: 5.5px; top: -14px; bottom: -14px; width: 1px; background: var(--line); }
.dc-prog__item:first-child .dc-prog__mark::before { top: 10px; } .dc-prog__item:last-child .dc-prog__mark::before { bottom: auto; height: 22px; }
.dc-prog__mark::after { content: ""; position: absolute; left: 1px; top: 8px; width: 10px; height: 10px; border: 1px solid var(--gold); background: var(--dc-surface); transform: rotate(45deg); }
.dc-prog__item.is-now .dc-prog__mark::after { background: var(--gold); box-shadow: 0 0 0 3px var(--dc-surface), 0 0 0 4px var(--gold); }
.dc-prog__item.is-past .dc-prog__mark::after { border-color: var(--line-strong); }
.dc-prog__line { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.dc-prog__title { font: 400 21px/26px var(--font-heading); letter-spacing: .02em; color: var(--ink); min-width: 0; }
.dc-prog__dots { flex: 1; min-width: 16px; border-bottom: 1px dotted var(--line-strong); transform: translateY(-5px); }
.dc-prog__where { font: 600 10.5px/1 var(--font-body); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }
.dc-prog__detail { margin-top: 4px; font-size: 14px; line-height: 21px; color: var(--ink-soft); }
.dc-prog__item.is-past .dc-prog__title { color: var(--ink-soft); }
.dc-prog__now { margin-top: 8px; }
.dc-prog__item > .dc-ibtn { margin-top: -4px; }
@container prog (max-width: 470px) {
  .dc-prog__item { grid-template-columns: 46px 12px minmax(0, 1fr) auto; gap: 0 10px; }
  .dc-prog__time { font-size: 16px; }
  .dc-prog__line { flex-wrap: wrap; }
  .dc-prog__dots { display: none; }
  .dc-prog__where { width: 100%; padding-top: 4px; }
}

/* ======================================================= Widgets: GuestList */
.dc-guests__sum { display: flex; flex-direction: column; gap: 10px; margin-bottom: 4px; }
.dc-guests__count { font: 600 11px/16px var(--font-body); letter-spacing: .28em; text-transform: uppercase; color: var(--ink-soft); }
.dc-guests { list-style: none; margin: 0; padding: 0; }
.dc-guests__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.dc-guests__who { display: flex; flex-direction: column; min-width: 0; }
.dc-guests__name { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; line-height: 22px; color: var(--ink); min-width: 0; }
.dc-guests__detail { font-size: 13px; line-height: 19px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-guests__table { display: flex; flex-direction: column; align-items: center; min-width: 44px; }
.dc-guests__tl { font: 600 9px/12px var(--font-body); letter-spacing: .24em; text-transform: uppercase; color: var(--ink-soft); }
.dc-guests__tn { font: 400 22px/24px var(--font-display); color: var(--gold-text); }
.dc-guests__act { display: flex; justify-content: flex-end; min-width: 112px; }
@media (max-width: 520px) {
  .dc-guests__table { display: none; }
  .dc-guests__row { grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; }
  .dc-guests__act { min-width: 0; }
}

/* ======================================================= reduced motion: keep states, drop travel */
@media (prefers-reduced-motion: reduce) {
  *:not(.dc-toast__timer), *::before, *::after {
    animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important;
    transition-duration: 1ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important;
  }
}
[data-theme="light"] .dc-btn--secondary { --_bg: var(--gold-deep); }

/* the mark (Deco.mark()) */
.dc-mark { display: block; }
.dc-mark__ray { fill: var(--gold); }
.dc-mark__ray2 { fill: var(--gold-deep); }
.dc-mark__plate { fill: var(--dc-surface); }