*{box-sizing:border-box;margin:0;padding:0}
  :root{
    --joia-bg:#FFFFFF; --joia-surface:#FFFFFF; --joia-surface-2:#F3F3F1; --joia-surface-3:#E7E7E2;
    --joia-border:#EAEAE5; --joia-border-2:#DADAD3;
    --joia-text:#2B2A26; --joia-text-2:#5D5C55; --joia-text-3:#8E8D84;
    --joia-accent:#7A5230; --joia-accent-strong:#5E3E22; --joia-accent-soft:#EFEEEA; --joia-accent-ink:#2B2A26;
    --joia-gold:#A9842F; --joia-gold-soft:#F4ECD9;
    --joia-danger:#B23A2B; --joia-danger-soft:#F8E8E3; --joia-ok:#5E7B3A; --joia-warn:#B8810D;
    --joia-shadow:0 1px 2px rgba(40,28,14,.05),0 8px 24px -12px rgba(40,28,14,.18);
    --joia-shadow-lg:0 12px 48px -16px rgba(40,28,14,.30);
    --r:12px; --r-sm:8px; --r-lg:18px;
    --gem-a:#C08C4E; --gem-b:#8A5E33; --gem-c:#4A3119; --gem-glint:#E0BE7A;
  }
  html[data-joia-theme="dark"]{
    --joia-bg:#1A1815; --joia-surface:#221F1B; --joia-surface-2:#2B2823; --joia-surface-3:#36322C;
    --joia-border:#39352F; --joia-border-2:#47423A;
    --joia-text:#ECEAE3; --joia-text-2:#ABA89E; --joia-text-3:#79766D;
    --joia-accent:#C99A62; --joia-accent-strong:#DCB482; --joia-accent-soft:#2B2823; --joia-accent-ink:#ECEAE3;
    --joia-gold:#D8B863; --joia-gold-soft:#2C2416;
    --joia-danger:#E0796A; --joia-danger-soft:#37211D; --joia-ok:#9BB36A; --joia-warn:#E0AE3E;
    --joia-shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px -14px rgba(0,0,0,.6);
    --joia-shadow-lg:0 16px 56px -18px rgba(0,0,0,.7);
    --gem-a:#D6A766; --gem-b:#A9763F; --gem-c:#5E3F24; --gem-glint:#E8CE84;
  }
  body{font-family:'Hanken Grotesk',system-ui,sans-serif;background:var(--joia-bg);color:var(--joia-text);-webkit-font-smoothing:antialiased}
  ::selection{background:var(--joia-accent-soft);color:var(--joia-accent-ink)}
  .joia-scroll{scrollbar-width:thin;scrollbar-color:var(--joia-border-2) transparent}
  .joia-scroll::-webkit-scrollbar{width:9px;height:9px}
  .joia-scroll::-webkit-scrollbar-thumb{background:var(--joia-border-2);border-radius:99px;border:2px solid transparent;background-clip:padding-box}
  .joia-scroll::-webkit-scrollbar-track{background:transparent}
  @keyframes joia-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  @keyframes joia-pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
  @keyframes joia-blink{0%,100%{opacity:1}50%{opacity:.15}}
  @keyframes joia-shimmer{0%{background-position:-450px 0}100%{background-position:450px 0}}
  @keyframes joia-spin{to{transform:rotate(360deg)}}
  @keyframes joia-rise{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
  @keyframes joia-slidein{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
  @keyframes joia-pulse{0%,100%{transform:scaleY(.5);opacity:.5}50%{transform:scaleY(1);opacity:1}}
  .joia-skel{background:linear-gradient(90deg,var(--joia-surface-2) 25%,var(--joia-surface-3) 37%,var(--joia-surface-2) 63%);background-size:900px 100%;animation:joia-shimmer 1.4s infinite linear;border-radius:8px}
  [data-joia-focus]:focus-visible{outline:2px solid var(--joia-accent);outline-offset:2px;border-radius:6px}
  button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
  input,textarea,select{font-family:inherit;color:inherit}
  a{color:inherit;text-decoration:none}
  .joia-md p{margin:0 0 11px;line-height:1.62}.joia-md p:last-child{margin-bottom:0}
  .joia-md ul,.joia-md ol{margin:0 0 11px;padding-left:22px}.joia-md li{margin:4px 0;line-height:1.55}
  .joia-md h3{font-size:16px;font-weight:700;margin:14px 0 8px}
  .joia-md strong{font-weight:700}
  .joia-md table{border-collapse:collapse;width:100%;margin:6px 0 13px;font-size:13.5px}
  .joia-md th,.joia-md td{border:1px solid var(--joia-border-2);padding:8px 11px;text-align:left}
  .joia-md th{background:var(--joia-surface-2);font-weight:700}
  .joia-md code{font-family:'JetBrains Mono',monospace;font-size:12.5px;background:var(--joia-surface-2);padding:1.5px 5px;border-radius:5px}
  .joia-hover{transition:filter .12s,background .12s,transform .08s,border-color .12s}
  .joia-hover:hover{filter:brightness(.97)}
  html[data-joia-theme="dark"] .joia-hover:hover{filter:brightness(1.14)}
  .joia-press:active{transform:scale(.97)}