/* ============================================================
   DreamLand Design System — /design
   The resolved vocabulary shared by the site (dreamland.rocks)
   and the /play web client (mudjs, Parchment skin).

   This sheet is the SOURCE OF TRUTH. It is self-contained on
   purpose: it carries the decisions, not the current live state
   of theme.css / theme-parchment.css. Live surfaces migrate onto
   it in a later pass.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700;800&family=Alegreya+Sans:wght@400;500;700&family=Fira+Code:wght@400;600&display=swap');

/* ---------- Tokens ---------- */
:root {
  /* ground — deep obsidian, identical on site + client */
  --obsidian:#08070c; --stone-950:#0d0b12; --stone-900:#131019;
  --stone-850:#191521; --stone-800:#201a2b; --stone-700:#2b2338; --stone-600:#3a3049;

  /* arcane purple — THE accent, shared */
  --arcane:#bb86fc; --arcane-lo:#8043ca; --arcane-deep:#4c2a7a; --arcane-glow:rgba(187,134,252,.55);
  /* darker purple for cross-refs ON parchment (the bright accent washes out on light) */
  --arcane-ink:#6a2fa6; --arcane-ink-hi:#8f3fd6;

  /* gold TEXT — panel titles, gilded words. Bright, shiny is fine here. */
  --gold-bright:#e6cd86; --gold:#c6a24e; --gold-dim:#856632; --gold-deep:#55411d;
  /* gold SURFACE — the matte antique metal for button + control faces ONLY.
     Never lit the way gold text is. This split is the whole point of the gem decision. */
  --gold-metal-hi:#b8973f; --gold-metal:#7e6127; --gold-metal-lo:#40300f;

  /* gems — faceted-stone accents (searcher tabs, marketing cards) */
  --ruby:#c0384f; --ruby-lo:#7c1f30; --emerald:#2fa36b; --emerald-lo:#17603d;
  --sapphire:#4a74d4; --sapphire-lo:#274384; --amethyst:#9159c8;

  /* parchment — reading surfaces ONLY (articles, news, hints, modals) */
  --parchment:#e4d6b2; --parchment-2:#d5c398; --parch-edge:#96793f; --ink:#2b2213; --ink-dim:#665736;

  /* text on dark */
  --text:#e3d8c0; --text-dim:#a49a84; --text-faint:#6f6857;

  /* type */
  --display:'Playfair Display','Times New Roman',serif;   /* headings, gilded titles */
  --body:'Alegreya Sans','Segoe UI',sans-serif;           /* UI + prose */
  /* one monospace, Fira Code, for everything: UI labels, code spans AND game text.
     --article kept as an alias for game-text bodies (ligatures ON); --mono = UI (labels). */
  --mono:'Fira Code',ui-monospace,monospace;
  --article:'Fira Code',ui-monospace,monospace;
  --mono-track:-.014em;

  --radius:5px;

  /* ONE gem recipe. Every gold control points here so the matte never drifts glossy. */
  --gem-face:radial-gradient(140% 140% at 50% 0%,var(--gold-metal-hi),var(--gold-metal) 55%,var(--gold-metal-lo));
  --gem-face-hover:radial-gradient(140% 140% at 50% 0%,#6c3aa8,var(--arcane-deep) 60%,#24123f);
  --gem-shadow:inset 0 1px 1px rgba(255,255,255,.6),0 1px 2px rgba(0,0,0,.5),0 0 0 1px var(--gold-deep);

  /* fractal-noise grain for stone + parchment texture (identical on both surfaces) */
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");

  /* ornate gold octagon bevel-rail (opt-in FEATURE frame: hero, login) */
  --rail:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2260%22%20height%3D%2260%22%20viewBox%3D%220%200%2060%2060%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23f6e3ab%22%2F%3E%3Cstop%20offset%3D%220.16%22%20stop-color%3D%22%23e6cd86%22%2F%3E%3Cstop%20offset%3D%220.46%22%20stop-color%3D%22%23c6a24e%22%2F%3E%3Cstop%20offset%3D%220.74%22%20stop-color%3D%22%237e6127%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2333250b%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20fill-rule%3D%22evenodd%22%20fill%3D%22url%28%23g%29%22%20d%3D%22M%2014.8%200.8%20L%2045.2%200.8%20A%2014%2014%200%200%200%2059.2%2014.8%20L%2059.2%2045.2%20A%2014%2014%200%200%200%2045.2%2059.2%20L%2014.8%2059.2%20A%2014%2014%200%200%200%200.8%2045.2%20L%200.8%2014.8%20A%2014%2014%200%200%200%2014.8%200.8%20Z%20M%2018%2012%20L%2042%2012%20A%206%206%200%200%200%2048%2018%20L%2048%2042%20A%206%206%200%200%200%2042%2048%20L%2018%2048%20A%206%206%200%200%200%2012%2042%20L%2012%2018%20A%206%206%200%200%200%2018%2012%20Z%22%2F%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23241a08%22%20stroke-width%3D%221.1%22%20d%3D%22M%2014.8%200.8%20L%2045.2%200.8%20A%2014%2014%200%200%200%2059.2%2014.8%20L%2059.2%2045.2%20A%2014%2014%200%200%200%2045.2%2059.2%20L%2014.8%2059.2%20A%2014%2014%200%200%200%200.8%2045.2%20L%200.8%2014.8%20A%2014%2014%200%200%200%2014.8%200.8%20Z%22%2F%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23f8ecc4%22%20stroke-width%3D%220.7%22%20opacity%3D%220.6%22%20d%3D%22M%2015.2%202.2%20L%2044.8%202.2%20A%2013%2013%200%200%200%2057.8%2015.2%20L%2057.8%2044.8%20A%2013%2013%200%200%200%2044.8%2057.8%20L%2015.2%2057.8%20A%2013%2013%200%200%200%202.2%2044.8%20L%202.2%2015.2%20A%2013%2013%200%200%200%2015.2%202.2%20Z%22%2F%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%234a3818%22%20stroke-width%3D%220.8%22%20d%3D%22M%2018%2012%20L%2042%2012%20A%206%206%200%200%200%2048%2018%20L%2048%2042%20A%206%206%200%200%200%2042%2048%20L%2018%2048%20A%206%206%200%200%200%2012%2042%20L%2012%2018%20A%206%206%200%200%200%2018%2012%20Z%22%2F%3E%3C%2Fsvg%3E");

  /* engraved white inner-frame ornament (rides a step inside the rail) */
  --rail-frame:url("data:image/svg+xml,%3Csvg%20width%3D%22185%22%20height%3D%22229%22%20viewBox%3D%220%200%20185%20229%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M180.3%20218.3L180.3%20221.3L182.3%20223.3L179.3%20226.3L176.3%20223.3L178.3%20221.3L178.3%20218.3L174.3%20214.3L178.3%20210.3L178.3%2018.3L174.3%2014.3L178.3%2010.3L178.3%207.3L176.3%205.3L179.3%202.3L182.3%205.3L180.3%207.3L180.3%2010.3L184.3%2014.3L180.3%2018.3L180.3%20210.3L184.3%20214.3L180.3%20218.3Z%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M174.3%205.3L169.3%2010.3L165.3%206.3L19.2998%206.3L15.2998%2010.3L10.2998%205.3L15.2998%200.300003L19.2998%204.3L165.3%204.3L169.3%200.300004L174.3%205.3ZM13.1279%205.3L15.2998%207.47188L17.4717%205.3L15.2998%203.12813L13.1279%205.3ZM167.128%205.3L169.3%207.47188L171.472%205.3L169.3%203.12813L167.128%205.3Z%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M6.29979%20218.3L6.29979%20221.3L8.29979%20223.3L5.29979%20226.3L2.29979%20223.3L4.29979%20221.3L4.29979%20218.3L0.299795%20214.3L4.29979%20210.3L4.2998%2018.3L0.299804%2014.3L4.2998%2010.3L4.2998%207.3L2.2998%205.3L5.2998%202.3L8.2998%205.3L6.2998%207.3L6.2998%2010.3L10.2998%2014.3L6.2998%2018.3L6.29979%20210.3L10.2998%20214.3L6.29979%20218.3Z%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M174.3%20223.3L169.3%20228.3L165.3%20224.3L19.2998%20224.3L15.2998%20228.3L10.2998%20223.3L15.2998%20218.3L19.2998%20222.3L165.3%20222.3L169.3%20218.3L174.3%20223.3ZM13.1279%20223.3L15.2998%20225.472L17.4717%20223.3L15.2998%20221.128L13.1279%20223.3ZM167.128%20223.3L169.3%20225.472L171.472%20223.3L169.3%20221.128L167.128%20223.3Z%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M77.2998%20223.3L92.2998%20208.3L107.3%20223.3%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M156.3%20219.3H28.2998%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M156.3%2010.3H28.2998%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M10.2998%2027.3L10.2998%20201.3%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M174.3%2027.3L174.3%20201.3%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M5.2998%20196.3L32.2998%20223.3%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M5.2998%2032.3L32.2998%205.3%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M179.3%20196.3L152.3%20223.3%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M179.3%2032.3L152.3%205.3%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M5.2998%20202.3L26.2998%20223.3%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M5.2998%2026.3L26.2998%205.3%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M179.3%20202.3L158.3%20223.3%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M179.3%2026.3L158.3%205.3%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E");

  /* chevron ornament kit -- the modular shape set from Figma DL_desktop
     1124:7090. Each is a thin nested double-stroke meander unit (~14px tall,
     stroke-only -> fill='none' on the root so the open zigzag stays a delicate
     line, NOT an auto-closed filled triangle). Ridden as a currentColor mask:
     the element paints currentColor, the stroke shape carves it. middle = the
     repeating tooth; *-line = the tooth->rule transition; tl/rt = end caps
     (bl/rb flipped via scaleY). Windowlet top + frame chev side ride --chev-middle. */
  --chev-middle:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2036.5918%2014'%20fill='none'%20preserveAspectRatio='none'%3E%3Cpath%20id='Vector%2031'%20d='M10.7959%208.5L11.9423%207.35355C12.1376%207.15829%2012.4542%207.15829%2012.6495%207.35355L17.4423%2012.1464C17.7573%2012.4614%2017.5342%2013%2017.0888%2013H12.2959H6.2959H1.50301C1.05755%2013%200.834471%2012.4614%201.14945%2012.1464L11.9423%201.35355C12.1376%201.15829%2012.4542%201.15829%2012.6495%201.35355L23.9423%2012.6464C24.1376%2012.8417%2024.4542%2012.8417%2024.6495%2012.6464L35.4423%201.85355C35.7573%201.53857%2035.5342%201%2035.0888%201H19.503C19.0576%201%2018.8345%201.53857%2019.1495%201.85355L23.9423%206.64645C24.1376%206.84171%2024.4542%206.84171%2024.6495%206.64645L25.7959%205.5'%20stroke='%2308070C'%20stroke-width='2'%20stroke-linecap='round'/%3E%3C/svg%3E");
  --chev-middle-rev:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2036.5918%2014'%20fill='none'%20preserveAspectRatio='none'%3E%3Cpath%20id='Vector%2031'%20d='M10.7959%205.5L11.9423%206.64645C12.1376%206.84171%2012.4542%206.84171%2012.6495%206.64645L17.4423%201.85355C17.7573%201.53857%2017.5342%201%2017.0888%201H12.2959L6.2959%201L1.50301%201C1.05755%201%200.834471%201.53857%201.14945%201.85355L11.9423%2012.6464C12.1376%2012.8417%2012.4542%2012.8417%2012.6495%2012.6464L23.9423%201.35355C24.1376%201.15829%2024.4542%201.15829%2024.6495%201.35355L35.4423%2012.1464C35.7573%2012.4614%2035.5342%2013%2035.0888%2013L19.503%2013C19.0576%2013%2018.8345%2012.4614%2019.1495%2012.1464L23.9423%207.35355C24.1376%207.15829%2024.4542%207.15829%2024.6495%207.35355L25.7959%208.5'%20stroke='%2308070C'%20stroke-width='2'%20stroke-linecap='round'/%3E%3C/svg%3E");
  --chev-left-line:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2027.7959%2013.7929'%20fill='none'%20preserveAspectRatio='none'%3E%3Cpath%20id='Vector%2031'%20d='M10.0888%207.58579C9.69827%207.97631%209.69827%208.60948%2010.0888%209C10.4793%209.39052%2011.1125%209.39052%2011.503%209L10.7959%208.29289L10.0888%207.58579ZM26.7959%2013.7929H27.7959V11.7929H26.7959V12.7929V13.7929ZM1.14945%2011.9393L0.442347%2011.2322L1.14945%2011.9393ZM11.9423%201.14645L11.2352%200.43934L11.9423%201.14645ZM12.6495%201.14645L13.3566%200.43934L12.6495%201.14645ZM11.9423%207.14645L11.2352%206.43934L11.9423%207.14645ZM12.6495%207.14645L13.3566%206.43934L12.6495%207.14645ZM10.7959%208.29289L11.503%209L12.6495%207.85355L11.9423%207.14645L11.2352%206.43934L10.0888%207.58579L10.7959%208.29289ZM12.6495%207.14645L11.9423%207.85355L16.7352%2012.6464L17.4423%2011.9393L18.1495%2011.2322L13.3566%206.43934L12.6495%207.14645ZM17.0888%2012.7929V11.7929H12.2959V12.7929V13.7929H17.0888V12.7929ZM12.2959%2012.7929V11.7929H6.2959V12.7929V13.7929H12.2959V12.7929ZM6.2959%2012.7929V11.7929H1.50301V12.7929V13.7929H6.2959V12.7929ZM1.14945%2011.9393L1.85656%2012.6464L12.6495%201.85355L11.9423%201.14645L11.2352%200.43934L0.442347%2011.2322L1.14945%2011.9393ZM12.6495%201.14645L11.9423%201.85355L23.4423%2013.3536L24.1495%2012.6464L24.8566%2011.9393L13.3566%200.43934L12.6495%201.14645ZM24.503%2012.7929V13.7929H26.7959V12.7929V11.7929H24.503V12.7929ZM1.50301%2012.7929V11.7929C1.94846%2011.7929%202.17154%2012.3315%201.85656%2012.6464L1.14945%2011.9393L0.442347%2011.2322C-0.5026%2012.1772%200.166649%2013.7929%201.50301%2013.7929V12.7929ZM24.1495%2012.6464L23.4423%2013.3536C23.7236%2013.6349%2024.1052%2013.7929%2024.503%2013.7929V12.7929V11.7929C24.6356%2011.7929%2024.7628%2011.8456%2024.8566%2011.9393L24.1495%2012.6464ZM17.4423%2011.9393L16.7352%2012.6464C16.4203%2012.3315%2016.6433%2011.7929%2017.0888%2011.7929V12.7929V13.7929C18.4252%2013.7929%2019.0944%2012.1772%2018.1495%2011.2322L17.4423%2011.9393ZM11.9423%201.14645L12.6495%201.85355C12.4542%202.04882%2012.1376%202.04881%2011.9423%201.85355L12.6495%201.14645L13.3566%200.43934C12.7708%20-0.146446%2011.821%20-0.146448%2011.2352%200.43934L11.9423%201.14645ZM11.9423%207.14645L12.6495%207.85355C12.4542%208.04882%2012.1376%208.04882%2011.9423%207.85355L12.6495%207.14645L13.3566%206.43934C12.7708%205.85355%2011.821%205.85355%2011.2352%206.43934L11.9423%207.14645Z'%20fill='%2308070C'/%3E%3C/svg%3E");
  --chev-right-line:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2027.7959%2013.7929'%20fill='none'%20preserveAspectRatio='none'%3E%3Cpath%20id='Vector%2031'%20d='M17.7071%206.20711C18.0976%205.81658%2018.0976%205.18342%2017.7071%204.79289C17.3166%204.40237%2016.6834%204.40237%2016.2929%204.79289L17%205.5L17.7071%206.20711ZM1%200H0V2H1V1V0ZM26.6464%201.85355L27.3536%202.56066L26.6464%201.85355ZM15.8536%2012.6464L16.5607%2013.3536L15.8536%2012.6464ZM15.1464%2012.6464L14.4393%2013.3536L15.1464%2012.6464ZM15.8536%206.64645L16.5607%207.35355L15.8536%206.64645ZM15.1464%206.64645L14.4393%207.35355L15.1464%206.64645ZM17%205.5L16.2929%204.79289L15.1464%205.93934L15.8536%206.64645L16.5607%207.35355L17.7071%206.20711L17%205.5ZM15.1464%206.64645L15.8536%205.93934L11.0607%201.14645L10.3536%201.85355L9.64645%202.56066L14.4393%207.35355L15.1464%206.64645ZM10.7071%201V2H15.5V1V0H10.7071V1ZM15.5%201V2H21.5V1V0H15.5V1ZM21.5%201V2H26.2929V1V0H21.5V1ZM26.6464%201.85355L25.9393%201.14645L15.1464%2011.9393L15.8536%2012.6464L16.5607%2013.3536L27.3536%202.56066L26.6464%201.85355ZM15.1464%2012.6464L15.8536%2011.9393L4.35355%200.439341L3.64645%201.14645L2.93934%201.85355L14.4393%2013.3536L15.1464%2012.6464ZM3.29289%201V0H1V1V2H3.29289V1ZM26.2929%201V2C25.8474%202%2025.6244%201.46143%2025.9393%201.14645L26.6464%201.85355L27.3536%202.56066C28.2985%201.61571%2027.6293%200%2026.2929%200V1ZM3.64645%201.14645L4.35355%200.439341C4.07225%200.158037%203.69072%200%203.29289%200V1V2C3.16028%202%203.03311%201.94732%202.93934%201.85355L3.64645%201.14645ZM10.3536%201.85355L11.0607%201.14645C11.3756%201.46143%2011.1526%202%2010.7071%202V1V0C9.37075%200%208.7015%201.61571%209.64645%202.56066L10.3536%201.85355ZM15.8536%2012.6464L15.1464%2011.9393C15.3417%2011.7441%2015.6583%2011.7441%2015.8536%2011.9393L15.1464%2012.6464L14.4393%2013.3536C15.0251%2013.9393%2015.9749%2013.9393%2016.5607%2013.3536L15.8536%2012.6464ZM15.8536%206.64645L15.1464%205.93934C15.3417%205.74408%2015.6583%205.74408%2015.8536%205.93934L15.1464%206.64645L14.4393%207.35355C15.0251%207.93934%2015.9749%207.93934%2016.5607%207.35355L15.8536%206.64645Z'%20fill='%2308070C'/%3E%3C/svg%3E");
  --chev-tl:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2025.2959%2014'%20fill='none'%20preserveAspectRatio='none'%3E%3Cpath%20id='Vector%2030'%20d='M14.5%205.5L13.3536%206.64645C13.1583%206.84171%2012.8417%206.84171%2012.6464%206.64645L7.85355%201.85355C7.53857%201.53857%207.76166%201%208.20711%201H23.7929C24.2383%201%2024.4614%201.53857%2024.1464%201.85355L13.3536%2012.6464C13.1583%2012.8417%2012.8417%2012.8417%2012.6464%2012.6464L1.85355%201.85355C1.53857%201.53857%201%201.76165%201%202.20711V12.5C1%2012.7761%201.22386%2013%201.5%2013H6.79289C7.23835%2013%207.46143%2012.4614%207.14645%2012.1464L6%2011'%20stroke='%2308070C'%20stroke-width='2'%20stroke-linecap='round'/%3E%3C/svg%3E");
  --chev-rt:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2025.2959%2014'%20fill='none'%20preserveAspectRatio='none'%3E%3Cpath%20id='Vector%2030'%20d='M10.7959%208.5L11.9423%207.35355C12.1376%207.15829%2012.4542%207.15829%2012.6495%207.35355L17.4423%2012.1464C17.7573%2012.4614%2017.5342%2013%2017.0888%2013H1.50301C1.05756%2013%200.834472%2012.4614%201.14945%2012.1464L11.9423%201.35355C12.1376%201.15829%2012.4542%201.15829%2012.6495%201.35355L23.4423%2012.1464C23.7573%2012.4614%2024.2959%2012.2383%2024.2959%2011.7929V1.5C24.2959%201.22386%2024.072%201%2023.7959%201H18.503C18.0576%201%2017.8345%201.53857%2018.1495%201.85355L19.2959%203'%20stroke='%2308070C'%20stroke-width='2'%20stroke-linecap='round'/%3E%3C/svg%3E");
  /* --chev-band: seamless tiling period for the fluid BAND (windowlet top,
     frame chev side, .ds-chev-row). 30px advance = the middle's 36px box minus the
     Figma mr:-6 overlap; the previous unit's tail (translate -30) is baked in so the
     meander interlocks seamlessly across tiles. Tile at 30px. */
  --chev-band:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2030%2014'%20fill='none'%20preserveAspectRatio='none'%3E%3Cpath%20transform='translate(-30%200)'%20id='Vector%2031'%20d='M10.7959%208.5L11.9423%207.35355C12.1376%207.15829%2012.4542%207.15829%2012.6495%207.35355L17.4423%2012.1464C17.7573%2012.4614%2017.5342%2013%2017.0888%2013H12.2959H6.2959H1.50301C1.05755%2013%200.834471%2012.4614%201.14945%2012.1464L11.9423%201.35355C12.1376%201.15829%2012.4542%201.15829%2012.6495%201.35355L23.9423%2012.6464C24.1376%2012.8417%2024.4542%2012.8417%2024.6495%2012.6464L35.4423%201.85355C35.7573%201.53857%2035.5342%201%2035.0888%201H19.503C19.0576%201%2018.8345%201.53857%2019.1495%201.85355L23.9423%206.64645C24.1376%206.84171%2024.4542%206.84171%2024.6495%206.64645L25.7959%205.5'%20stroke='%2308070C'%20stroke-width='2'%20stroke-linecap='round'/%3E%3Cpath%20id='Vector%2031'%20d='M10.7959%208.5L11.9423%207.35355C12.1376%207.15829%2012.4542%207.15829%2012.6495%207.35355L17.4423%2012.1464C17.7573%2012.4614%2017.5342%2013%2017.0888%2013H12.2959H6.2959H1.50301C1.05755%2013%200.834471%2012.4614%201.14945%2012.1464L11.9423%201.35355C12.1376%201.15829%2012.4542%201.15829%2012.6495%201.35355L23.9423%2012.6464C24.1376%2012.8417%2024.4542%2012.8417%2024.6495%2012.6464L35.4423%201.85355C35.7573%201.53857%2035.5342%201%2035.0888%201H19.503C19.0576%201%2018.8345%201.53857%2019.1495%201.85355L23.9423%206.64645C24.1376%206.84171%2024.4542%206.84171%2024.6495%206.64645L25.7959%205.5'%20stroke='%2308070C'%20stroke-width='2'%20stroke-linecap='round'/%3E%3C/svg%3E");
  /* --chev-lcluster / --chev-rcluster: the divider end clusters (Figma row-line
     1124:7148): cap + full tooth + tooth->rule transition, mr:-6 overlaps baked in
     via nested <svg> placement. .ds-chev-rowline brackets a plain rule with these. */
  --chev-lcluster:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2074.5%2014'%20fill='none'%20preserveAspectRatio='none'%3E%3Csvg%20x='0'%20y='0'%20width='24'%20height='14'%20viewBox='0%200%2025.2959%2014'%20preserveAspectRatio='none'%3E%3Cpath%20id='Vector%2030'%20d='M14.5%205.5L13.3536%206.64645C13.1583%206.84171%2012.8417%206.84171%2012.6464%206.64645L7.85355%201.85355C7.53857%201.53857%207.76166%201%208.20711%201H23.7929C24.2383%201%2024.4614%201.53857%2024.1464%201.85355L13.3536%2012.6464C13.1583%2012.8417%2012.8417%2012.8417%2012.6464%2012.6464L1.85355%201.85355C1.53857%201.53857%201%201.76165%201%202.20711V12.5C1%2012.7761%201.22386%2013%201.5%2013H6.79289C7.23835%2013%207.46143%2012.4614%207.14645%2012.1464L6%2011'%20stroke='%2308070C'%20stroke-width='2'%20stroke-linecap='round'/%3E%3C/svg%3E%3Csvg%20x='18'%20y='0'%20width='36'%20height='14'%20viewBox='0%200%2036.5918%2014'%20preserveAspectRatio='none'%3E%3Cpath%20id='Vector%2031'%20d='M10.7959%208.5L11.9423%207.35355C12.1376%207.15829%2012.4542%207.15829%2012.6495%207.35355L17.4423%2012.1464C17.7573%2012.4614%2017.5342%2013%2017.0888%2013H12.2959H6.2959H1.50301C1.05755%2013%200.834471%2012.4614%201.14945%2012.1464L11.9423%201.35355C12.1376%201.15829%2012.4542%201.15829%2012.6495%201.35355L23.9423%2012.6464C24.1376%2012.8417%2024.4542%2012.8417%2024.6495%2012.6464L35.4423%201.85355C35.7573%201.53857%2035.5342%201%2035.0888%201H19.503C19.0576%201%2018.8345%201.53857%2019.1495%201.85355L23.9423%206.64645C24.1376%206.84171%2024.4542%206.84171%2024.6495%206.64645L25.7959%205.5'%20stroke='%2308070C'%20stroke-width='2'%20stroke-linecap='round'/%3E%3C/svg%3E%3Csvg%20x='48'%20y='0'%20width='26.5'%20height='14'%20viewBox='0%200%2027.7959%2013.7929'%20preserveAspectRatio='none'%3E%3Cpath%20id='Vector%2031'%20d='M10.0888%207.58579C9.69827%207.97631%209.69827%208.60948%2010.0888%209C10.4793%209.39052%2011.1125%209.39052%2011.503%209L10.7959%208.29289L10.0888%207.58579ZM26.7959%2013.7929H27.7959V11.7929H26.7959V12.7929V13.7929ZM1.14945%2011.9393L0.442347%2011.2322L1.14945%2011.9393ZM11.9423%201.14645L11.2352%200.43934L11.9423%201.14645ZM12.6495%201.14645L13.3566%200.43934L12.6495%201.14645ZM11.9423%207.14645L11.2352%206.43934L11.9423%207.14645ZM12.6495%207.14645L13.3566%206.43934L12.6495%207.14645ZM10.7959%208.29289L11.503%209L12.6495%207.85355L11.9423%207.14645L11.2352%206.43934L10.0888%207.58579L10.7959%208.29289ZM12.6495%207.14645L11.9423%207.85355L16.7352%2012.6464L17.4423%2011.9393L18.1495%2011.2322L13.3566%206.43934L12.6495%207.14645ZM17.0888%2012.7929V11.7929H12.2959V12.7929V13.7929H17.0888V12.7929ZM12.2959%2012.7929V11.7929H6.2959V12.7929V13.7929H12.2959V12.7929ZM6.2959%2012.7929V11.7929H1.50301V12.7929V13.7929H6.2959V12.7929ZM1.14945%2011.9393L1.85656%2012.6464L12.6495%201.85355L11.9423%201.14645L11.2352%200.43934L0.442347%2011.2322L1.14945%2011.9393ZM12.6495%201.14645L11.9423%201.85355L23.4423%2013.3536L24.1495%2012.6464L24.8566%2011.9393L13.3566%200.43934L12.6495%201.14645ZM24.503%2012.7929V13.7929H26.7959V12.7929V11.7929H24.503V12.7929ZM1.50301%2012.7929V11.7929C1.94846%2011.7929%202.17154%2012.3315%201.85656%2012.6464L1.14945%2011.9393L0.442347%2011.2322C-0.5026%2012.1772%200.166649%2013.7929%201.50301%2013.7929V12.7929ZM24.1495%2012.6464L23.4423%2013.3536C23.7236%2013.6349%2024.1052%2013.7929%2024.503%2013.7929V12.7929V11.7929C24.6356%2011.7929%2024.7628%2011.8456%2024.8566%2011.9393L24.1495%2012.6464ZM17.4423%2011.9393L16.7352%2012.6464C16.4203%2012.3315%2016.6433%2011.7929%2017.0888%2011.7929V12.7929V13.7929C18.4252%2013.7929%2019.0944%2012.1772%2018.1495%2011.2322L17.4423%2011.9393ZM11.9423%201.14645L12.6495%201.85355C12.4542%202.04882%2012.1376%202.04881%2011.9423%201.85355L12.6495%201.14645L13.3566%200.43934C12.7708%20-0.146446%2011.821%20-0.146448%2011.2352%200.43934L11.9423%201.14645ZM11.9423%207.14645L12.6495%207.85355C12.4542%208.04882%2012.1376%208.04882%2011.9423%207.85355L12.6495%207.14645L13.3566%206.43934C12.7708%205.85355%2011.821%205.85355%2011.2352%206.43934L11.9423%207.14645Z'%20fill='%2308070C'/%3E%3C/svg%3E%3C/svg%3E");
  --chev-rcluster:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2074.5%2014'%20fill='none'%20preserveAspectRatio='none'%3E%3Csvg%20x='0'%20y='0'%20width='26.5'%20height='14'%20viewBox='0%200%2027.7959%2013.7929'%20preserveAspectRatio='none'%3E%3Cpath%20id='Vector%2031'%20d='M17.7071%206.20711C18.0976%205.81658%2018.0976%205.18342%2017.7071%204.79289C17.3166%204.40237%2016.6834%204.40237%2016.2929%204.79289L17%205.5L17.7071%206.20711ZM1%200H0V2H1V1V0ZM26.6464%201.85355L27.3536%202.56066L26.6464%201.85355ZM15.8536%2012.6464L16.5607%2013.3536L15.8536%2012.6464ZM15.1464%2012.6464L14.4393%2013.3536L15.1464%2012.6464ZM15.8536%206.64645L16.5607%207.35355L15.8536%206.64645ZM15.1464%206.64645L14.4393%207.35355L15.1464%206.64645ZM17%205.5L16.2929%204.79289L15.1464%205.93934L15.8536%206.64645L16.5607%207.35355L17.7071%206.20711L17%205.5ZM15.1464%206.64645L15.8536%205.93934L11.0607%201.14645L10.3536%201.85355L9.64645%202.56066L14.4393%207.35355L15.1464%206.64645ZM10.7071%201V2H15.5V1V0H10.7071V1ZM15.5%201V2H21.5V1V0H15.5V1ZM21.5%201V2H26.2929V1V0H21.5V1ZM26.6464%201.85355L25.9393%201.14645L15.1464%2011.9393L15.8536%2012.6464L16.5607%2013.3536L27.3536%202.56066L26.6464%201.85355ZM15.1464%2012.6464L15.8536%2011.9393L4.35355%200.439341L3.64645%201.14645L2.93934%201.85355L14.4393%2013.3536L15.1464%2012.6464ZM3.29289%201V0H1V1V2H3.29289V1ZM26.2929%201V2C25.8474%202%2025.6244%201.46143%2025.9393%201.14645L26.6464%201.85355L27.3536%202.56066C28.2985%201.61571%2027.6293%200%2026.2929%200V1ZM3.64645%201.14645L4.35355%200.439341C4.07225%200.158037%203.69072%200%203.29289%200V1V2C3.16028%202%203.03311%201.94732%202.93934%201.85355L3.64645%201.14645ZM10.3536%201.85355L11.0607%201.14645C11.3756%201.46143%2011.1526%202%2010.7071%202V1V0C9.37075%200%208.7015%201.61571%209.64645%202.56066L10.3536%201.85355ZM15.8536%2012.6464L15.1464%2011.9393C15.3417%2011.7441%2015.6583%2011.7441%2015.8536%2011.9393L15.1464%2012.6464L14.4393%2013.3536C15.0251%2013.9393%2015.9749%2013.9393%2016.5607%2013.3536L15.8536%2012.6464ZM15.8536%206.64645L15.1464%205.93934C15.3417%205.74408%2015.6583%205.74408%2015.8536%205.93934L15.1464%206.64645L14.4393%207.35355C15.0251%207.93934%2015.9749%207.93934%2016.5607%207.35355L15.8536%206.64645Z'%20fill='%2308070C'/%3E%3C/svg%3E%3Csvg%20x='20.5'%20y='0'%20width='36'%20height='14'%20viewBox='0%200%2036.5918%2014'%20preserveAspectRatio='none'%3E%3Cpath%20id='Vector%2031'%20d='M10.7959%205.5L11.9423%206.64645C12.1376%206.84171%2012.4542%206.84171%2012.6495%206.64645L17.4423%201.85355C17.7573%201.53857%2017.5342%201%2017.0888%201H12.2959L6.2959%201L1.50301%201C1.05755%201%200.834471%201.53857%201.14945%201.85355L11.9423%2012.6464C12.1376%2012.8417%2012.4542%2012.8417%2012.6495%2012.6464L23.9423%201.35355C24.1376%201.15829%2024.4542%201.15829%2024.6495%201.35355L35.4423%2012.1464C35.7573%2012.4614%2035.5342%2013%2035.0888%2013L19.503%2013C19.0576%2013%2018.8345%2012.4614%2019.1495%2012.1464L23.9423%207.35355C24.1376%207.15829%2024.4542%207.15829%2024.6495%207.35355L25.7959%208.5'%20stroke='%2308070C'%20stroke-width='2'%20stroke-linecap='round'/%3E%3C/svg%3E%3Csvg%20x='50.5'%20y='0'%20width='24'%20height='14'%20viewBox='0%200%2025.2959%2014'%20preserveAspectRatio='none'%3E%3Cpath%20id='Vector%2030'%20d='M10.7959%208.5L11.9423%207.35355C12.1376%207.15829%2012.4542%207.15829%2012.6495%207.35355L17.4423%2012.1464C17.7573%2012.4614%2017.5342%2013%2017.0888%2013H1.50301C1.05756%2013%200.834472%2012.4614%201.14945%2012.1464L11.9423%201.35355C12.1376%201.15829%2012.4542%201.15829%2012.6495%201.35355L23.4423%2012.1464C23.7573%2012.4614%2024.2959%2012.2383%2024.2959%2011.7929V1.5C24.2959%201.22386%2024.072%201%2023.7959%201H18.503C18.0576%201%2017.8345%201.53857%2018.1495%201.85355L19.2959%203'%20stroke='%2308070C'%20stroke-width='2'%20stroke-linecap='round'/%3E%3C/svg%3E%3C/svg%3E");
  /* modular frame CORNER (mask; currentColor fills it). Top-left orientation;
     flip via scaleX/Y for the other three. Chamfered bracket + a small diamond. */
  --frame-corner:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='42'%20height='42'%20viewBox='0%200%2042%2042'%3E%3Cg%20fill='none'%20stroke='%23000'%20stroke-width='1.5'%3E%3Cpath%20d='M6.75%2042%20V20.25%20M6.75%2012.75%20V6.75%20H12.75%20M20.25%206.75%20H42'/%3E%3Cpath%20d='M11.25%2042%20V29.5%20M29.5%2011.25%20H42%20M6.75%2034%20L34%206.75'/%3E%3Cpath%20d='M6.75%2027.75%20L27.75%206.75'/%3E%3C/g%3E%3Cpath%20d='M6.75%203.75%20L9.75%206.75%20L6.75%209.75%20L3.75%206.75%20Z'%20fill='%23000'/%3E%3Cpath%20fill-rule='evenodd'%20fill='%23000'%20d='M6.75%2012%20L11.25%2016.5%20L6.75%2021%20L2.25%2016.5%20Z%20M6.75%2014.1%20L9.15%2016.5%20L6.75%2018.9%20L4.35%2016.5%20Z%20M16.5%202.25%20L21%206.75%20L16.5%2011.25%20L12%206.75%20Z%20M16.5%204.35%20L18.9%206.75%20L16.5%209.15%20L14.1%206.75%20Z'/%3E%3C/svg%3E");
  --frame-keystone:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%209%209'%3E%3Cpath%20d='M4.5%200%20L9%204.5%20L4.5%209%20L0%204.5%20Z'/%3E%3C/svg%3E");
  /* torn/deckled parchment edge (mask; feTurbulence-displaced rounded rect,
     preserveAspectRatio none so it stretches to any block). */
  --torn:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1000'%20height='300'%20viewBox='0%200%201000%20300'%20preserveAspectRatio='none'%3E%3Cfilter%20id='t'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.016'%20numOctaves='2'%20seed='4'%20result='n'/%3E%3CfeDisplacementMap%20in='SourceGraphic'%20in2='n'%20scale='11'/%3E%3C/filter%3E%3Crect%20x='7'%20y='7'%20width='986'%20height='286'%20rx='8'%20fill='%23fff'%20filter='url(%23t)'/%3E%3C/svg%3E");
}

/* ============================================================
   PAGE CHROME (this reference page's own shell)
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--body); font-size:17px; line-height:1.6;
  color:var(--text); background:var(--obsidian); -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::before{
  content:""; position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(1100px 640px at 50% -8%, rgba(76,42,122,.35) 0%, transparent 62%),
    radial-gradient(820px 820px at 92% 112%, rgba(128,67,202,.16) 0%, transparent 55%),
    var(--obsidian);
}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.14;margin:0 0 .4em;letter-spacing:.005em}
em,i{font-style:normal;color:var(--gold-bright)}
a{color:var(--arcane);text-decoration:none}
a:hover{color:#d9b8ff}
code,kbd{font-family:var(--mono);font-size:.82em;letter-spacing:var(--mono-track);
  background:rgba(0,0,0,.4);color:var(--arcane);padding:.1em .45em;border-radius:4px;
  border:1px solid rgba(187,134,252,.28)}

.ds-shell{display:grid;grid-template-columns:230px 1fr;gap:0;max-width:1360px;margin:0 auto}

/* left rail nav */
.ds-rail{position:sticky;top:0;align-self:start;height:100vh;overflow-y:auto;
  padding:26px 18px 40px;border-right:1px solid var(--stone-700)}
.ds-rail__brand{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.ds-rail__brand img{height:20px;width:auto;filter:drop-shadow(0 0 6px var(--arcane-glow))}
.ds-rail__tag{color:var(--text-dim);font-size:.72rem;letter-spacing:.06em;
  text-transform:uppercase;margin:0 0 22px}
/* the rail's nav IS the .ds-menu component (accordion groups + item links) */
.ds-rail .ds-menu{margin-top:2px}
.ds-rail .ds-menu__item{font-size:.86rem;padding:5px 12px}

.ds-main{padding:34px clamp(20px,4vw,64px) 120px;min-width:0}

/* page hero */
.ds-hero{padding:26px 0 34px;border-bottom:1px solid var(--gold-deep);margin-bottom:12px}
.ds-hero h1{font-size:clamp(2.4rem,6vw,4rem);color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.6);margin:0}
.ds-hero__sub{font-family:var(--display);font-weight:600;color:var(--gold-bright);
  font-size:clamp(1.05rem,2.4vw,1.5rem);letter-spacing:.02em;margin:4px 0 16px}
.ds-hero p{color:var(--text-dim);font-size:1.1rem;max-width:70ch}

/* section scaffolding */
.ds-sec{padding:44px 0;border-bottom:1px solid var(--stone-800);scroll-margin-top:20px}
.ds-sec > h2{font-size:1.9rem;color:#fff;display:flex;align-items:baseline;gap:12px}
.ds-sec > h2 .ds-sec__no{font-family:var(--mono);font-size:.9rem;color:var(--gold);font-weight:400}
.ds-sec > .ds-lede{color:var(--text-dim);max-width:74ch;margin:0 0 24px;font-size:1.05rem}
.ds-sub{font-family:var(--display);color:var(--gold-bright);font-size:1.15rem;margin:26px 0 12px}

/* demo surface — a neutral stage to show a component on */
.ds-demo{position:relative;border-radius:var(--radius);padding:26px;
  background:linear-gradient(180deg,var(--stone-900),var(--stone-950));
  border:1px solid var(--stone-700);
  display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.ds-demo + .ds-note,.ds-demo + .ds-code{margin-top:10px}
.ds-demo--col{flex-direction:column;align-items:stretch}
.ds-demo--parch{background:var(--noise),linear-gradient(172deg,var(--parchment),var(--parchment-2));
  background-blend-mode:multiply,normal;border-color:var(--parch-edge);color:var(--ink)}
.ds-grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:18px}

.ds-note{color:var(--text-dim);font-size:.92rem;margin:8px 0 0}
.ds-note strong{color:var(--gold-bright);font-weight:700}
.ds-tag{display:inline-block;font-family:var(--mono);font-size:.66rem;letter-spacing:.04em;
  text-transform:uppercase;padding:.15em .5em;border-radius:4px;vertical-align:middle;
  border:1px solid var(--stone-600);color:var(--text-dim);background:rgba(0,0,0,.3)}
.ds-tag--site{color:#9fd0ff;border-color:#2a4a6a}
.ds-tag--client{color:var(--gold-bright);border-color:var(--gold-deep)}
.ds-tag--both{color:var(--arcane);border-color:var(--arcane-deep)}
.ds-tag--fixed{color:#e39b9b;border-color:#5a2a2a}
.ds-label{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-dim);margin-bottom:8px;display:block}

/* code block */
.ds-code{font-family:var(--mono);font-size:.78rem;line-height:1.55;letter-spacing:var(--mono-track);
  background:#0b0a12;border:1px solid var(--stone-700);border-radius:6px;
  padding:12px 14px;color:var(--text-dim);overflow-x:auto;white-space:pre}
.ds-code .k{color:var(--arcane)} .ds-code .v{color:var(--gold-bright)} .ds-code .c{color:var(--text-dim)}

/* callout */
.ds-callout{border-left:3px solid var(--arcane);background:rgba(187,134,252,.06);
  border-radius:0 6px 6px 0;padding:16px 18px;margin:18px 0}
.ds-callout--warn{border-left-color:#c4674a;background:rgba(196,103,74,.08)}
.ds-callout h4{margin:0 0 6px;color:#fff;font-size:1.05rem}
.ds-callout p{margin:0;color:var(--text-dim);font-size:.95rem}
.ds-callout code{font-size:.8em}

/* ============================================================
   TOKEN SWATCHES
   ============================================================ */
.ds-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.ds-swatch{border:1px solid var(--stone-700);border-radius:6px;overflow:hidden;background:var(--stone-950)}
.ds-swatch__chip{height:56px}
.ds-swatch__meta{padding:8px 10px}
.ds-swatch__name{font-family:var(--mono);font-size:.72rem;color:var(--text);display:block}
.ds-swatch__hex{font-family:var(--mono);font-size:.68rem;color:var(--text-dim)}

/* type specimens */
.ds-spec{padding:16px 0;border-bottom:1px dashed var(--stone-700)}
.ds-spec:last-child{border-bottom:0}
.ds-spec__meta{font-family:var(--mono);font-size:.72rem;color:var(--gold);margin-bottom:6px}
.ds-spec__sample{color:var(--text)}
.ds-spec--display .ds-spec__sample{font-family:var(--display);font-size:2rem;color:#fff}
.ds-spec--body .ds-spec__sample{font-family:var(--body);font-size:1.15rem}
.ds-spec--article .ds-spec__sample{font-family:var(--article);font-size:1rem;letter-spacing:var(--mono-track)}
.ds-spec--mono .ds-spec__sample{font-family:var(--mono);font-size:1rem;letter-spacing:var(--mono-track)}
.ds-lig-on{font-family:var(--article);font-variant-ligatures:contextual}
.ds-lig-off{font-family:var(--article);font-variant-ligatures:none}

/* ============================================================
   BUTTONS — matte gem (the resolved finish)
   ============================================================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--display);font-weight:600;font-size:1rem;line-height:1.4;
  padding:.5rem 1.1rem;border-radius:3px;border:0;cursor:pointer;white-space:nowrap;
  color:#1c1206;text-shadow:0 1px 0 rgba(255,255,255,.3);
  background:var(--gem-face);box-shadow:var(--gem-shadow);
  transition:background .16s,box-shadow .16s,color .16s,transform .16s,filter .16s}
.btn:hover{color:#f3ecff;text-shadow:0 1px 2px rgba(0,0,0,.7);transform:translateY(-1px);
  background:var(--gem-face-hover);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.28),0 1px 2px rgba(0,0,0,.5),0 0 0 1px #2a1650,0 0 22px var(--arcane-glow)}
.btn:focus-visible{outline:none;box-shadow:inset 0 1px 1px rgba(255,255,255,.6),0 0 0 2px color-mix(in srgb,var(--gold-bright) 55%,transparent)}
.btn:disabled{opacity:.45;cursor:default;filter:grayscale(.4);box-shadow:none}
.btn--lg{padding:.8rem 1.7rem;font-size:1.25rem}
.btn--sm{padding:.3rem .75rem;font-size:.85rem;gap:5px;font-family:var(--body);font-weight:700}
/* accent = arcane. Its own recipe on purpose: the arcane accent is glossy in BOTH
   sources (client .btn-primary / site .btn--arcane). The "one gem recipe" rule below
   governs the GOLD controls; the arcane accent is the one lit exception. Values match
   the client .btn-primary line for line. */
.btn--arcane{color:#f3ecff;text-shadow:0 1px 2px rgba(0,0,0,.6);
  background:linear-gradient(180deg,rgba(255,255,255,.16) 0%,transparent 46%),
    radial-gradient(140% 140% at 50% 0%,#a172e0 0%,var(--arcane-lo) 55%,var(--arcane-deep) 100%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.28),0 4px 12px rgba(0,0,0,.55),0 0 0 1px #2a1650,0 0 20px var(--arcane-glow)}
.btn--arcane:hover{filter:brightness(1.08);transform:translateY(-1px);color:#fff}
/* ghost / outline */
.btn--ghost{color:var(--gold-bright);text-shadow:none;background:rgba(19,16,25,.6);
  border:1px solid var(--gold-dim);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.btn--ghost:hover{color:#fff;border-color:var(--arcane-deep);background:rgba(19,16,25,.6);
  box-shadow:0 0 18px var(--arcane-glow);transform:none}

/* ============================================================
   INPUTS + FOCUS ORBIT (resolved: orbit everywhere)
   ============================================================ */
.ds-input{display:block;width:100%;max-width:320px;font-family:var(--body);font-size:1rem;
  padding:.5rem .75rem;color:var(--text);background:#0b0a12;
  border:1px solid var(--gold-deep);border-radius:var(--radius);
  box-shadow:inset 0 1px 5px rgba(0,0,0,.6);transition:border-color .15s}
.ds-input:focus{outline:none;border-color:var(--gold);
  box-shadow:inset 0 1px 5px rgba(0,0,0,.6),0 0 0 2px rgba(198,162,78,.25);
  animation:pc-focus-orbit 2.6s linear infinite}
@keyframes pc-focus-orbit{
  0%   {filter:drop-shadow(0 -5px 7px rgba(187,134,252,.75)) drop-shadow(0 5px 6px rgba(128,67,202,.42))}
  25%  {filter:drop-shadow(6px 0 8px rgba(187,134,252,.75)) drop-shadow(-6px 0 6px rgba(128,67,202,.42))}
  50%  {filter:drop-shadow(0 5px 7px rgba(187,134,252,.75)) drop-shadow(0 -5px 6px rgba(128,67,202,.42))}
  75%  {filter:drop-shadow(-6px 0 8px rgba(187,134,252,.75)) drop-shadow(6px 0 6px rgba(128,67,202,.42))}
  100% {filter:drop-shadow(0 -5px 7px rgba(187,134,252,.75)) drop-shadow(0 5px 6px rgba(128,67,202,.42))}
}
@media (prefers-reduced-motion:reduce){
  .ds-input:focus{animation:none;filter:drop-shadow(0 0 7px rgba(187,134,252,.6))}
}

/* dropdown — dark well + gold-deep frame + custom gold chevron; orbit focus like the input */
.ds-select{-webkit-appearance:none;appearance:none;display:block;width:100%;max-width:320px;
  font-family:var(--body);font-size:1rem;color:var(--text);cursor:pointer;
  padding:.5rem 2.2rem .5rem .75rem;background-color:#0b0a12;
  border:1px solid var(--gold-deep);border-radius:var(--radius);box-shadow:inset 0 1px 5px rgba(0,0,0,.6);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23c6a24e' stroke-width='2' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right .8rem center;transition:border-color .15s}
.ds-select:focus{outline:none;border-color:var(--gold);
  box-shadow:inset 0 1px 5px rgba(0,0,0,.6),0 0 0 2px rgba(198,162,78,.25);
  animation:pc-focus-orbit 2.6s linear infinite}
.ds-select option{background:var(--stone-950);color:var(--text)}
@media (prefers-reduced-motion:reduce){.ds-select:focus{animation:none;filter:drop-shadow(0 0 7px rgba(187,134,252,.6))}}

/* toggle switch — small rounded corners (like a small button, not a pill).
   OFF = muted dark-gold (reads inactive/disabled); ON = arcane. */
.ds-switch{position:relative;width:48px;height:26px;border-radius:6px;padding:2px;cursor:pointer;
  border:1px solid var(--gold-deep);
  background:linear-gradient(180deg,#463714,#241b0b);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.6);transition:background .2s,border-color .2s,box-shadow .2s}
.ds-switch__knob{display:block;position:relative;width:20px;height:20px;border-radius:4px;
  background:radial-gradient(140% 140% at 50% 0%,var(--gold-metal-hi),var(--gold-metal-lo));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 1px 2px rgba(0,0,0,.5);
  transition:transform .2s cubic-bezier(.32,.72,0,1),background .2s}
/* grip: three short vertical ridges engraved down the knob (a grabber affordance).
   --grip is dark on the gold OFF face; the ON rule below reflavours it to arcane. */
.ds-switch__knob::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:10px;
  transform:translate(-50%,-50%);opacity:.85;
  background:repeating-linear-gradient(to right,var(--grip,rgba(28,17,4,.55)) 0 1px,transparent 1px 3px)}
.ds-switch[aria-pressed="true"]{border-color:var(--arcane-deep);
  background:radial-gradient(140% 140% at 50% 0%,#6c3aa8,var(--arcane-deep) 70%,#24123f);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.5),0 0 12px var(--arcane-glow)}
.ds-switch[aria-pressed="true"] .ds-switch__knob{transform:translateX(22px);
  background:linear-gradient(180deg,#efe1ff,#c79dff)}
.ds-switch[aria-pressed="true"] .ds-switch__knob::after{--grip:rgba(58,32,96,.5)}
.ds-switch:disabled{opacity:.45;cursor:default}

/* segmented control — ghost track, ghost-off segments, a sliding PRIMARY (gold gem)
   indicator that animates to the active one. Flat tabs reuse this exact component. */
.ds-seg{position:relative;display:inline-flex;padding:3px;border-radius:6px;
  background:var(--stone-950);border:1px solid var(--stone-700);
  box-shadow:inset 0 1px 4px rgba(0,0,0,.6)}
.ds-seg__ind{position:absolute;top:3px;bottom:3px;left:0;width:0;border-radius:4px;z-index:0;pointer-events:none;
  background:var(--gem-face);box-shadow:var(--gem-shadow);
  transform:translateX(3px);
  transition:transform .26s cubic-bezier(.32,.72,0,1),width .26s cubic-bezier(.32,.72,0,1)}
.ds-seg button{position:relative;z-index:1;padding:6px 16px;border:0;border-radius:4px;background:transparent;cursor:pointer;
  font-family:var(--body);font-weight:700;font-size:.92rem;white-space:nowrap;
  color:var(--gold-dim);transition:color .2s}
.ds-seg button:hover{color:var(--gold-bright)}
.ds-seg button[aria-pressed="true"],.ds-seg button[aria-selected="true"]{color:#1c1206;text-shadow:0 1px 0 rgba(255,255,255,.3)}
@media (prefers-reduced-motion:reduce){.ds-seg__ind{transition:none}}

/* pop: jewel pills + toggle-chips SNAP in on select — a quick over-scale that
   settles, not the segmented control's sliding indicator. Fires when the element
   enters its selected state (the rule newly matches). Reduced-motion kills it. */
@keyframes ds-pop{0%{transform:scale(1)}45%{transform:scale(1.07)}100%{transform:scale(1)}}

/* ============================================================
   TABS — both by context
   ============================================================ */
/* pill-gem, user-facing. Carries the SAME faceted jewel as the vital bars
   (svg use #dl-gem). OFF = ghost; hover = ghost lit; ACTIVE = primary gold gem. */
.ds-tabs-pill{display:flex;gap:8px;flex-wrap:wrap}
.ds-tab-pill{display:inline-flex;align-items:center;gap:9px;padding:8px 18px 8px 10px;cursor:pointer;
  font-family:var(--body);font-weight:700;font-size:.95rem;color:var(--gold-dim);
  background:rgba(19,16,25,.5);border:1px solid var(--gold-dim);border-radius:999px;
  transition:color .18s,border-color .18s,background .18s,box-shadow .18s}
.ds-tab-pill:hover{color:var(--gold-bright);border-color:var(--gold);box-shadow:0 0 16px var(--arcane-glow)}
.ds-tab-pill[aria-selected="true"]{color:#1c1206;border-color:transparent;text-shadow:0 1px 0 rgba(255,255,255,.3);
  background:var(--gem-face);box-shadow:var(--gem-shadow);
  animation:ds-pop .2s cubic-bezier(.34,1.56,.64,1)}
.ds-tab-pill[aria-selected="true"]:hover{box-shadow:var(--gem-shadow),0 0 16px var(--arcane-glow)}
/* the shared jewel: faceted currentColor gem + gold rim (from mudjs gem.svg) */
.ds-tgem{width:20px;height:20px;flex:none;line-height:0}
.ds-tgem svg{width:100%;height:100%;display:block}
.ds-tgem--ruby{color:var(--ruby)} .ds-tgem--emerald{color:var(--emerald)}
.ds-tgem--sapphire{color:var(--sapphire)} .ds-tgem--amethyst{color:var(--amethyst)}

/* ============================================================
   CARDS — both, by surface
   ============================================================ */
/* Figma windowlet (client) — the one card body */
.ds-card-windowlet{position:relative;padding:16px 16px 18px;border-radius:6px;overflow:hidden;
  background:
    radial-gradient(72% 16px at 50% 0%,rgba(187,134,252,.40) 0%,transparent 100%),
    var(--noise),
    radial-gradient(80% 66% at 48% -4%,rgba(187,134,252,.24) 0%,rgba(8,7,12,0) 68%),
    var(--stone-850);
  background-blend-mode:screen,overlay,normal,normal;
  box-shadow:inset 0 -4px 12px rgba(8,7,12,.55),0 4px 12px rgba(36,28,15,.32)}
.ds-card-windowlet::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;z-index:3;
  pointer-events:none;background:linear-gradient(to bottom,#856632,#40300f);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.ds-card-windowlet::after{content:"";position:absolute;left:0;right:0;top:0;height:14px;z-index:0;pointer-events:none;
  background:#e6cd86;-webkit-mask:var(--chev-band) repeat-x left top/30px 14px;mask:var(--chev-band) repeat-x left top/30px 14px;
  mix-blend-mode:overlay;opacity:.4}
.ds-card-windowlet > *{position:relative;z-index:1}
.ds-card__title{font-family:var(--display);font-weight:700;color:var(--gold-bright);
  text-shadow:0 1px 0 #2a1c00,0 0 14px rgba(198,162,78,.22);margin:0 0 8px}
.ds-card p{color:var(--text-dim);margin:0;font-size:.95rem}

/* opt-in feature card — wears the modular frame (add class ds-frame; JS injects the
   corner/side/keystone parts). Dark stone panel; gold frame via --dl-frame. */
.ds-railed{position:relative;--dl-frame:var(--gold);padding:32px 36px;border-radius:6px;
  background:radial-gradient(120% 80% at 50% 0%,rgba(187,134,252,.06),transparent 60%),
    linear-gradient(180deg,var(--stone-850),var(--stone-950));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),inset 0 0 40px rgba(0,0,0,.35),0 16px 34px rgba(0,0,0,.5)}
.ds-railed > .ds-card__title,.ds-railed > p{position:relative;z-index:1}

/* opt-in hover — only for cards that are actually clickable (list rows, feature
   tiles). Static content cards omit .ds-card--hover, so they carry no pointer
   affordance and no lift. Windowlet lifts + blooms; railed also lights its frame. */
.ds-card--hover{cursor:pointer;transition:transform .16s ease,box-shadow .16s ease}
.ds-card-windowlet.ds-card--hover:hover{transform:translateY(-2px);
  box-shadow:inset 0 -4px 12px rgba(8,7,12,.55),0 8px 20px rgba(0,0,0,.42),0 0 20px var(--arcane-glow)}
.ds-railed.ds-card--hover:hover{transform:translateY(-2px);--dl-frame:var(--gold-bright);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 0 40px rgba(0,0,0,.35),0 20px 40px rgba(0,0,0,.55),0 0 26px var(--arcane-glow)}

/* big inset feature card — the login-grade panel. An ornate octagon gold rail
   (9-slice border-image of --rail) over an obsidian body, an engraved inner rule
   (--rail-frame at 10%), and a living arcane portal swelling behind it. The top
   tier: hero / login / one crowned feature. Heavier than the railed card. */
.ds-inset{position:relative;isolation:isolate;padding:22px;display:flex;justify-content:center}
.ds-inset__card{position:relative;z-index:1;width:min(440px,100%);padding:39px 45px 45px;
  border:5.6px solid transparent;border-radius:6px;border-image:var(--rail) 16 stretch;
  background:var(--noise),
    radial-gradient(120% 70% at 50% 0%,rgba(187,134,252,.12),transparent 55%),
    linear-gradient(180deg,var(--stone-850),var(--stone-950) 60%,var(--obsidian));
  background-clip:padding-box;background-blend-mode:overlay,normal,normal;
  filter:drop-shadow(0 20px 46px rgba(0,0,0,.7)) drop-shadow(0 0 30px var(--arcane-glow));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),inset 0 0 44px rgba(0,0,0,.5);
  animation:ds-inset-rim 9.3s ease-in-out infinite}
/* modular ornate frame hugging just inside the octagon rail (Kit's call: same corner
   diamonds / double strokes / keystones as the railed card, but sitting 4-6px off the
   rail at very low opacity, like the old engraved inner rule). A real element so the
   frame JS injects its parts; sits behind the content (z0). */
.ds-inset__card > .ds-inset__frame{position:absolute;inset:5px;z-index:0;pointer-events:none;
  --dl-frame:#efe6cf;opacity:.16}
.ds-inset__card > *{position:relative;z-index:1}
@keyframes ds-inset-rim{
  0%{filter:drop-shadow(0 20px 46px rgba(0,0,0,.7)) drop-shadow(0 0 22px rgba(187,134,252,.26))}
  37%{filter:drop-shadow(0 20px 46px rgba(0,0,0,.7)) drop-shadow(0 0 46px rgba(206,158,255,.60))}
  61%{filter:drop-shadow(0 20px 46px rgba(0,0,0,.7)) drop-shadow(0 0 30px rgba(187,134,252,.36))}
  100%{filter:drop-shadow(0 20px 46px rgba(0,0,0,.7)) drop-shadow(0 0 22px rgba(187,134,252,.26))}
}
/* the portal: an arcane wormhole swelling behind the card (two layers on coprime-ish
   periods so the swell never settles into an even pulse -- the same trick as login) */
.ds-inset__portal{position:absolute;top:50%;left:50%;width:min(520px,86%);height:min(340px,116%);
  transform:translate(-50%,-50%);z-index:0;pointer-events:none;
  animation:ds-inset-swell 9.3s ease-in-out infinite}
.ds-inset__portal::before,.ds-inset__portal::after{content:"";position:absolute;inset:0;border-radius:50%}
.ds-inset__portal::before{filter:blur(30px);animation:ds-inset-outer 11.1s ease-in-out infinite;
  background:radial-gradient(58% 46% at 50% 50%,rgba(150,96,240,.55),rgba(123,70,210,.30) 34%,rgba(80,40,150,0) 72%)}
.ds-inset__portal::after{filter:blur(16px);mix-blend-mode:screen;animation:ds-inset-core 7.3s ease-in-out infinite;
  background:radial-gradient(40% 32% at 50% 46%,rgba(214,178,255,.78),rgba(187,134,252,.42) 40%,rgba(150,96,240,0) 74%)}
@keyframes ds-inset-swell{0%{filter:brightness(.8) hue-rotate(-6deg)}37%{filter:brightness(1.2) hue-rotate(8deg)}61%{filter:brightness(.92) hue-rotate(-3deg)}100%{filter:brightness(.8) hue-rotate(-6deg)}}
@keyframes ds-inset-outer{0%{opacity:.5;transform:rotate(0) scale(1.02)}29%{opacity:.82;transform:rotate(40deg) scale(1.12)}55%{opacity:.58;transform:rotate(150deg) scale(.96)}78%{opacity:.9;transform:rotate(240deg) scale(1.08)}100%{opacity:.5;transform:rotate(360deg) scale(1.02)}}
@keyframes ds-inset-core{0%{opacity:.35;transform:scale(.86)}22%{opacity:.85;transform:scale(1.06)}48%{opacity:.5;transform:scale(.94)}71%{opacity:.96;transform:scale(1.12)}100%{opacity:.35;transform:scale(.86)}}

/* ============================================================
   MAP / SEGMENTED CONTROLS — gold-gem (resolved)
   ============================================================ */
.ds-mapctrl{display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border:0;border-radius:5px;cursor:pointer;
  color:#1c1206;font-size:15px;font-weight:700;background:var(--gem-face);box-shadow:var(--gem-shadow)}
.ds-mapctrl:hover{color:#fff;background:var(--gem-face-hover)}
/* active = arcane AND physically pressed in (depth is a non-colour cue: reads
   selected even in greyscale / for low vision, not by hue alone) */
.ds-mapctrl.is-on{color:#fff;transform:translateY(1px);
  background:radial-gradient(140% 140% at 50% 0%,#6c3aa8,var(--arcane-deep) 60%,#24123f);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.8),inset 0 0 0 1px rgba(0,0,0,.55)}

/* ============================================================
   CHIPS — toggle-chip vs data-chip (two named components)
   ============================================================ */
/* toggle-chip — same visual grammar as the segmented control: ghost when off,
   primary gold gem when on. Independent (multi-select), so no sliding indicator. */
.ds-chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--body);font-weight:700;font-size:.88rem;
  color:var(--gold-dim);padding:6px 14px;background:rgba(19,16,25,.5);
  border:1px solid var(--gold-dim);border-radius:999px;cursor:pointer;
  transition:color .18s,border-color .18s,background .18s,box-shadow .18s}
.ds-chip:hover{color:var(--gold-bright);border-color:var(--gold);box-shadow:0 0 14px var(--arcane-glow)}
.ds-chip.is-on{color:#1c1206;border-color:transparent;text-shadow:0 1px 0 rgba(255,255,255,.3);
  background:var(--gem-face);box-shadow:var(--gem-shadow);
  animation:ds-pop .2s cubic-bezier(.34,1.56,.64,1)}
.ds-chip.is-on:hover{box-shadow:var(--gem-shadow),0 0 14px var(--arcane-glow)}

/* data-chip — read-only stat/affect pill. Colour-coded per affect type via
   --chip-accent (border + label); no dot. This is what the affects widget uses. */
.ds-datachip{--chip-accent:var(--gold-bright);
  display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:200px;
  font-size:.78rem;line-height:1.5;color:var(--text);background:var(--stone-900);
  border:1px solid color-mix(in srgb,var(--chip-accent) 50%,var(--gold-metal-lo));
  box-shadow:0 1px 2px rgba(8,7,12,.25)}
.ds-datachip b{font-weight:600;color:var(--chip-accent)}
.ds-datachip .cur{color:var(--text-dim);margin-left:1px}
.ds-datachip--buff{--chip-accent:var(--emerald)}
.ds-datachip--debuff{--chip-accent:var(--ruby)}
.ds-datachip--magic{--chip-accent:var(--amethyst)}
.ds-datachip--mind{--chip-accent:var(--sapphire)}
.ds-datachip--gold{--chip-accent:var(--gold-bright)}

/* ============================================================
   MENU — left navigation (categories + items, optional accordion)
   ============================================================ */
/* One menu language for the site's zone rail, the /play nav and this showcase's own
   rail. A category is a static .ds-menu__cat eyebrow OR an accordion <details> whose
   summary is that eyebrow; it holds .ds-menu__item links/buttons. An item carries an
   optional trailing .ds-menu__meta. Active = the arcane power state with a left accent
   bar (a non-colour cue for low vision). */
.ds-menu{display:flex;flex-direction:column;font-family:var(--body)}
.ds-menu__search{margin-bottom:12px}
.ds-menu__search input{width:100%;font-family:var(--body);font-size:.95rem;color:var(--text);
  padding:.5rem .85rem;background:#0b0a12;border:1px solid var(--gold-deep);border-radius:var(--radius);
  box-shadow:inset 0 1px 5px rgba(0,0,0,.6);transition:border-color .15s}
.ds-menu__search input::placeholder{color:var(--text-faint)}
.ds-menu__search input:focus{outline:none;border-color:var(--gold);
  box-shadow:inset 0 1px 5px rgba(0,0,0,.6),0 0 0 2px rgba(198,162,78,.25);
  animation:pc-focus-orbit 2.6s linear infinite}
@media (prefers-reduced-motion:reduce){.ds-menu__search input:focus{animation:none;filter:drop-shadow(0 0 7px rgba(187,134,252,.6))}}

/* category eyebrow — same gilded uppercase whether static label or accordion summary */
.ds-menu__cat{display:flex;align-items:center;gap:10px;
  font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold-dim);padding:11px 6px;margin:0}
.ds-menu__count{margin-left:auto;font-family:var(--mono);font-size:.68rem;font-weight:400;
  letter-spacing:0;color:var(--text-faint)}

/* accordion mode — a <details> group whose <summary> is the eyebrow, with a caret
   that rotates open. Reduced-motion drops the spin. */
.ds-menu__group{border-bottom:1px solid var(--stone-800)}
.ds-menu__group > summary{cursor:pointer;list-style:none;outline:none}
.ds-menu__group > summary::-webkit-details-marker{display:none}
.ds-menu__group > summary:hover,.ds-menu__group[open] > summary{color:var(--gold-bright)}
.ds-menu__group > summary:focus-visible{color:var(--gold-bright);text-shadow:0 0 10px var(--arcane-glow)}
/* caret sits at the right; with a count present, both take margin-left:auto so the
   count pushes right and the caret rides just after it (the gap comes from flex gap). */
.ds-menu__caret{margin-left:auto;width:8px;height:8px;flex:none;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(-45deg);transition:transform .2s;opacity:.7}
.ds-menu__group[open] > summary .ds-menu__caret{transform:translateY(-1px) rotate(45deg)}
@media (prefers-reduced-motion:reduce){.ds-menu__caret{transition:none}}
.ds-menu__group > :last-child{margin-bottom:10px}

/* item — link or button; name + optional meta. Hover = stone wash; active = arcane
   power state + a left accent bar (non-colour cue). */
.ds-menu__item{position:relative;display:flex;align-items:baseline;gap:10px;width:100%;
  background:transparent;border:0;cursor:pointer;text-align:left;text-decoration:none;
  font-family:var(--body);font-size:.95rem;color:var(--text-dim);
  padding:6px 12px;border-radius:6px;transition:background .15s,color .15s}
.ds-menu__item:hover{background:var(--stone-850);color:var(--text)}
.ds-menu__item.is-on{background:color-mix(in srgb,var(--arcane-deep) 72%,transparent);color:#fff}
.ds-menu__item.is-on::before{content:"";position:absolute;left:2px;top:4px;bottom:4px;width:3px;
  border-radius:2px;background:var(--arcane);box-shadow:0 0 8px var(--arcane-glow)}
.ds-menu__name{flex:1 1 auto}
.ds-menu__meta{flex:none;font-family:var(--mono);font-size:.72rem;color:var(--text-faint)}
.ds-menu__item.is-on .ds-menu__meta{color:#d9c7f5}

/* ============================================================
   PARCHMENT reading surfaces
   ============================================================ */
/* parchment reading sheet: a torn/worn deckled edge with the modular frame sitting a
   step inside the rag. The frame stays crisp at the box edge; the paper bleeds a ragged
   margin past it (frame + ragged edge no longer clash). The sheet + its aged vignette
   ride a masked ::before so --torn shapes them; the drop shadow is a filter on the
   parent so it follows the ragged silhouette, not a rectangle. Frame = parch-edge.
   NOTE: --torn is authored at real px scale (viewBox 1000-wide) so preserveAspectRatio
   =none does not blow the displacement up and eat the text (see the token). */
.ds-parch{position:relative;padding:34px 40px;color:var(--ink);--dl-frame:var(--parch-edge);
  filter:drop-shadow(0 12px 22px rgba(0,0,0,.5))}
.ds-parch::before{content:"";position:absolute;inset:-9px;z-index:0;pointer-events:none;
  background:var(--noise),linear-gradient(172deg,var(--parchment),var(--parchment-2));
  background-blend-mode:multiply,normal;box-shadow:inset 0 0 44px rgba(120,95,50,.18);
  -webkit-mask:var(--torn) no-repeat center/100% 100%;mask:var(--torn) no-repeat center/100% 100%}
.ds-parch > h4,.ds-parch > .ds-parch__body{position:relative;z-index:1}
.ds-parch h4{font-family:var(--display);color:#241809;margin:0 0 8px;font-size:1.3rem}
.ds-parch__body{font-family:var(--article);font-size:.96rem;line-height:1.62;letter-spacing:var(--mono-track);color:var(--ink)}
.ds-parch a{color:var(--arcane-ink);border-bottom:1px solid rgba(106,47,166,.38)}
/* parchment-tuned ANSI (light ground) */
.c-fgby{color:#8a6a10;font-weight:600} .c-fgbg{color:#3f6b1c;font-weight:600}
.c-fgbr{color:#a3202c;font-weight:600} .c-fgbc{color:#17696e;font-weight:600}
.c-fgbb{color:#2a55a0;font-weight:600} .c-fgbm{color:#7a3597;font-weight:600}

/* ============================================================
   DARK game surfaces — terminal, ANSI, vitals
   ============================================================ */
.ds-terminal{background:#0c0b11;border:1px solid var(--gold-deep);border-radius:var(--radius);
  padding:14px 16px;box-shadow:inset 0 1px 8px rgba(0,0,0,.5);position:relative;
  font-family:var(--article);font-variant-ligatures:none;font-size:.95rem;color:var(--text);
  white-space:pre-wrap;line-height:1.4}
.ds-ansi{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}
.ds-ansi span{padding:8px 4px;text-align:center;font-family:var(--article);font-variant-ligatures:none;
  font-size:.74rem;border-radius:4px;background:#0c0b11;border:1px solid var(--stone-800)}
/* dark ANSI (terminal ground) */
.fgdr{color:#cc0000}.fgdg{color:#4e9a06}.fgdy{color:#c4a000}.fgdb{color:#3465a4}
.fgdm{color:#75507b}.fgdc{color:#06989a}.fgdw{color:#d3d7cf}.fgdd{color:#2e3436}
.fgbr{color:#ed2330}.fgbg{color:#8ee34f}.fgby{color:#fdea56}.fgbb{color:#55a3f2}
.fgbm{color:#d384cb}.fgbc{color:#2cf4eb}.fgbw{color:#fff}.fgbd{color:#555753}

/* vital bars (client) */
.ds-pbars{display:flex;flex-direction:column;gap:8px;width:100%;max-width:420px}
.ds-pbarrow{display:flex;align-items:center;gap:12px}
.ds-pbarrow .ds-pbar{flex:1 1 auto}
.ds-pbarlab{font-family:var(--mono);font-size:.72rem;letter-spacing:.02em;color:var(--text-dim);
  min-width:104px;white-space:nowrap}
.ds-pbarlab b{color:var(--text);font-weight:600}
.ds-pbar{position:relative;height:14px;border-radius:200px;overflow:hidden;
  --fill-edge:#7c1f30;--fill-mid:#c0384f;--glow:rgba(255,0,0,.40);
  background:linear-gradient(180deg,rgba(13,11,18,.92),#241d30 50%,rgba(5,4,8,.98));
  box-shadow:inset 0 0 0 1px rgba(212,215,207,.22),inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.6)}
.ds-pbar__fill{position:absolute;top:0;bottom:0;left:0;border-radius:200px;
  background:linear-gradient(180deg,var(--fill-edge),var(--fill-mid) 48%,color-mix(in srgb,var(--fill-edge) 62%,#000));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30),inset 0 3px 5px var(--glow),0 0 7px var(--glow)}
.ds-pbar.mana{--fill-edge:#3d2a63;--fill-mid:#bb86fc;--glow:rgba(187,134,252,.45)}
.ds-pbar.move{--fill-edge:#5c4413;--fill-mid:#c6a24e;--glow:rgba(230,205,134,.42)}
/* the shared faceted jewel (#dl-gem), tinted to the bar's resource colour. Same
   component the pill tabs wear. Overhangs the left cap like the client's pbar-gem. */
.ds-pbar__gem{position:absolute;left:-3px;top:50%;transform:translateY(-50%);z-index:3;
  width:18px;height:18px;line-height:0;color:var(--fill-mid)}
.ds-pbar__gem svg{width:100%;height:100%;display:block}

/* ============================================================
   ORNAMENTS
   ============================================================ */
.ds-filigree{display:flex;align-items:center;justify-content:center;gap:16px;color:var(--gold);margin:6px 0}
.ds-filigree::before,.ds-filigree::after{content:"";height:1px;width:min(180px,22vw);
  background:linear-gradient(90deg,transparent,var(--gold-dim))}
.ds-filigree::after{background:linear-gradient(90deg,var(--gold-dim),transparent)}
.ds-filigree svg{width:28px;height:28px;fill:var(--arcane);filter:drop-shadow(0 0 8px var(--arcane-glow));flex:none}

/* --- reusable chevron ornament kit (Figma DL_desktop 1124:7090). Every shape is a
   nested double-stroke unit ridden as a currentColor mask: the element paints
   currentColor, the shape carves it. Nine named modules (below) plus two ready
   compositions: .ds-chev-row (the tooth tiled = a full band) and .ds-chev-rowline
   (caps bracketing a plain rule = a divider). One chevron system everywhere. --- */
.ds-chev{display:inline-block;height:14px;color:var(--gold-dim);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}
.ds-chev--middle,.ds-chev--middle-rev,.ds-chev--left-line,.ds-chev--right-line,
.ds-chev--tl,.ds-chev--bl,.ds-chev--rt,.ds-chev--rb{background:currentColor}
.ds-chev--middle{width:36px;-webkit-mask-image:var(--chev-middle);mask-image:var(--chev-middle);-webkit-mask-size:36px 14px;mask-size:36px 14px}
.ds-chev--middle-rev{width:36px;-webkit-mask-image:var(--chev-middle-rev);mask-image:var(--chev-middle-rev);-webkit-mask-size:36px 14px;mask-size:36px 14px}
.ds-chev--left-line{width:27px;-webkit-mask-image:var(--chev-left-line);mask-image:var(--chev-left-line);-webkit-mask-size:27px 14px;mask-size:27px 14px}
.ds-chev--right-line{width:27px;-webkit-mask-image:var(--chev-right-line);mask-image:var(--chev-right-line);-webkit-mask-size:27px 14px;mask-size:27px 14px}
.ds-chev--tl{width:25px;-webkit-mask-image:var(--chev-tl);mask-image:var(--chev-tl);-webkit-mask-size:25px 14px;mask-size:25px 14px}
.ds-chev--bl{width:25px;-webkit-mask-image:var(--chev-tl);mask-image:var(--chev-tl);-webkit-mask-size:25px 14px;mask-size:25px 14px;transform:scaleY(-1)}
.ds-chev--rt{width:25px;-webkit-mask-image:var(--chev-rt);mask-image:var(--chev-rt);-webkit-mask-size:25px 14px;mask-size:25px 14px}
.ds-chev--rb{width:25px;-webkit-mask-image:var(--chev-rt);mask-image:var(--chev-rt);-webkit-mask-size:25px 14px;mask-size:25px 14px;transform:scaleY(-1)}
/* the plain line-segment module (a bare bottom rule the caps flatten into) */
.ds-chev--line{display:inline-block;width:26px;height:14px;border-bottom:2px solid currentColor}
/* composition 1 — the interlocking meander band (seamless --chev-band tile) */
.ds-chev-row{height:14px;background:currentColor;color:var(--gold-dim);
  -webkit-mask:var(--chev-band) repeat-x left center/30px 14px;mask:var(--chev-band) repeat-x left center/30px 14px}
/* composition 2 — the "row with line" divider (Figma 1124:7148): a tooth cluster
   (cap + tooth + tooth->rule transition) at each end, bracketing a plain rule. The
   rule runs full width along the bottom; the clusters sit over its ends, same
   currentColor, so teeth rise off a continuous baseline at any width. */
.ds-chev-rowline{position:relative;display:flex;align-items:flex-end;justify-content:space-between;height:14px;color:var(--gold-dim);
  background:linear-gradient(currentColor,currentColor) no-repeat left bottom/100% 2px}
.ds-chev-rowline::before,.ds-chev-rowline::after{content:"";width:74.5px;height:14px;flex:none;background:currentColor}
.ds-chev-rowline::before{-webkit-mask:var(--chev-lcluster) no-repeat left center/74.5px 14px;mask:var(--chev-lcluster) no-repeat left center/74.5px 14px}
.ds-chev-rowline::after{-webkit-mask:var(--chev-rcluster) no-repeat right center/74.5px 14px;mask:var(--chev-rcluster) no-repeat right center/74.5px 14px}

/* --- modular ornate frame: 4 fixed corner modules + repeatable side modules ---
   The corner is ONE mask (--frame-corner), flipped for the other three via
   scaleX/scaleY, so it never scales or distorts. Sides are consistent-weight
   rules (or a chevron run) that span between the corners at any frame size.
   Colour via currentColor -> gold on dark, parch-edge on light. */
/* frame colour = --dl-frame (gold on dark, parch-edge on parchment), currentColor fallback */
.ds-frame{position:relative;color:var(--gold);--dl-frame:currentColor}
.ds-frame__c{position:absolute;width:42px;height:42px;z-index:2;pointer-events:none;
  background:var(--dl-frame);-webkit-mask:var(--frame-corner) center/contain no-repeat;mask:var(--frame-corner) center/contain no-repeat}
.ds-frame__c.tl{top:0;left:0}
.ds-frame__c.tr{top:0;right:0;transform:scaleX(-1)}
.ds-frame__c.bl{bottom:0;left:0;transform:scaleY(-1)}
.ds-frame__c.br{bottom:0;right:0;transform:scale(-1,-1)}
/* DOUBLE-stroke side rules: two thin currentColor lines with a gap, via gradient
   (consistent weight at any length, recolours with currentColor). */
/* DOUBLE-stroke side rules: two 1.5px currentColor lines with a gap, aligned to
   the corner's two rails at the seam (lines at 6.0-7.5 and 10.5-12.0). */
.ds-frame__s{position:absolute;z-index:1;pointer-events:none}
.ds-frame__s.top,.ds-frame__s.bottom{left:34px;right:34px;height:6px;
  background:linear-gradient(to bottom,var(--dl-frame) 0 1.5px,transparent 1.5px 4.5px,var(--dl-frame) 4.5px 6px)}
.ds-frame__s.left,.ds-frame__s.right{top:34px;bottom:34px;width:6px;
  background:linear-gradient(to right,var(--dl-frame) 0 1.5px,transparent 1.5px 4.5px,var(--dl-frame) 4.5px 6px)}
.ds-frame__s.top{top:6px} .ds-frame__s.bottom{bottom:6px}
.ds-frame__s.left{left:6px} .ds-frame__s.right{right:6px}
/* ornamented side option: a chevron run instead of the double rule. Starts at 42px
   (past the corner's inner stub) so the stub reads as the lead-in. */
.ds-frame__s.chev{background:var(--dl-frame);height:14px;bottom:5px;left:42px;right:42px;
  -webkit-mask:var(--chev-band) repeat-x center/30px 14px;mask:var(--chev-band) repeat-x center/30px 14px}
/* optional centre keystone — one size-independent diamond bridging both rails
   (the reference's centre-chevron slot). Solid, at 50% of top and/or bottom. */
.ds-frame__k{position:absolute;z-index:2;left:50%;top:4.5px;width:9px;height:9px;margin-left:-4.5px;pointer-events:none;
  background:var(--dl-frame);-webkit-mask:var(--frame-keystone) center/contain no-repeat;mask:var(--frame-keystone) center/contain no-repeat}
.ds-frame__k.bottom{top:auto;bottom:4.5px}

/* alias table */
.ds-table{width:100%;border-collapse:collapse;font-size:.9rem}
.ds-table th,.ds-table td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--stone-700);vertical-align:top}
.ds-table th{font-family:var(--display);color:var(--gold-bright);font-weight:600;font-size:.82rem;
  text-transform:uppercase;letter-spacing:.06em}
.ds-table td code{font-size:.78rem}
.ds-table tr:last-child td{border-bottom:0}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .ds-shell{grid-template-columns:1fr}
  .ds-rail{position:static;height:auto;border-right:0;border-bottom:1px solid var(--stone-700);padding:16px 20px}
  .ds-rail__tag{margin-bottom:12px}
  .ds-main{padding:22px 20px 90px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}