/* A character SCREEN.
     The art is Conquer's: lacquer, brass, jade, ink. So the frame around it is
     warm black and gold rather than the cold slate of a dashboard, and the
     only thing allowed to be loud is the character standing in the light.
     Rarity keeps the game's own five colours. Everything else waits its turn. */
  :root{
    --ink:#0A0907; --ink-2:#100E0B; --panel:#151210; --panel-2:#1B1713;
    --line:#2B2519; --line-2:#3D3524; --hair:#4B4130;
    --text:#F0E8D8; --dim:#A99C84; --faint:#6F6552;
    --gold:#E2B75B; --gold-2:#F4DFA8; --gold-deep:#9C7228; --gold-ink:#1A1206;
    --jade:#5FBFA0; --jade-deep:#2C6F5B;
    --blood:#D8483C; --blood-deep:#7A231B;
    --sky:#6FA8DC;
    --q6:#7DD3FC; --q7:#4F7BE8; --q8:#A855F7; --q9:#EF4444;
    --disp:'Cinzel',Georgia,serif;
    --ui:'Public Sans',system-ui,sans-serif;
    --mono:'JetBrains Mono',ui-monospace,monospace;
    --r:14px;
  }
  *{box-sizing:border-box}
  /* The hidden attribute must beat display:flex on the bars it hides. */
  [hidden]{display:none!important}
  html{scroll-behavior:smooth}
  body{
    margin:0;font-family:var(--ui);font-size:15px;line-height:1.5;color:var(--text);
    background:var(--ink);min-height:100vh;
    background-image:
      radial-gradient(1100px 620px at 50% -140px, #1C1710 0%, transparent 62%),
      radial-gradient(800px 500px at 100% 100%, #14110C 0%, transparent 58%);
    background-attachment:fixed;
  }
  a{color:var(--gold);text-decoration:none}
  a:hover{text-decoration:underline}
  ::selection{background:var(--gold-deep);color:#fff}
  .wrap{max-width:1180px;margin:0 auto;padding:18px 18px 64px}
  button{font-family:inherit}
  button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

  /* ---- the bar. nav.js replaces it with the shared header; this is the
     shape it wears until then, and the shape a blocked script leaves behind. */
  .bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-bottom:12px;
    border-bottom:1px solid var(--line)}
  .mark{display:flex;align-items:center;gap:9px;color:inherit;text-decoration:none}
  .mark:hover{text-decoration:none}
  .logo{height:30px;width:auto;display:block}
  .wordmark{font-family:var(--disp);font-weight:700;font-size:1.05rem;letter-spacing:.04em}
  .wordmark b{color:var(--gold)}
  .logo:not([src=''])+.wordmark{display:none}
  .signin{margin-left:auto;font-size:.82rem;font-weight:700;color:var(--gold-ink);
    background:var(--gold);border-radius:99px;padding:.46rem .95rem}
  .signin:hover{text-decoration:none;filter:brightness(1.06)}

  /* ---- empty states ---- */
  .empty{margin-top:18px;border:1px solid var(--line);border-radius:var(--r);
    background:var(--panel);padding:44px 24px;text-align:center;color:var(--dim);line-height:1.6}
  .empty h3{font-family:var(--disp);font-size:1.35rem;color:var(--text);margin:0 0 8px;letter-spacing:.02em}
  .empty code{background:#0E0C09;border:1px solid var(--line);border-radius:6px;
    padding:.16rem .44rem;color:var(--gold);font-family:var(--mono);font-size:.86rem}

  /* =============================================================== STAGE ==
     One wide panel. The figure in the middle, in the light. The name plate on
     the left, the numbers on the right, both floating OVER the scene rather
     than beside it -- a character screen is a place, not a table. */
  .stage{
    position:relative;margin-top:16px;border:1px solid var(--line-2);border-radius:18px;
    min-height:640px;overflow:hidden;isolation:isolate;
    background:
      radial-gradient(520px 300px at 50% 88%, rgba(226,183,91,.20), transparent 70%),
      radial-gradient(700px 520px at 50% 40%, rgba(226,183,91,.06), transparent 62%),
      radial-gradient(1200px 700px at 50% 120%, #1A150E 0%, transparent 60%),
      linear-gradient(180deg,#171310 0%, #0D0B08 100%);
    box-shadow:0 30px 80px -40px rgba(0,0,0,.9), inset 0 1px 0 rgba(244,223,168,.08);
  }
  /* Grain, so the gradients stop looking like gradients. */
  .stage::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.055;z-index:0;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    background-size:160px 160px;mix-blend-mode:screen}
  /* A vignette, so the edges recede and the middle comes forward. */
  .stage::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
    background:radial-gradient(900px 560px at 50% 45%, transparent 55%, rgba(6,5,3,.72) 100%)}
  .embers{position:absolute;inset:0;z-index:1;pointer-events:none;width:100%;height:100%;display:block}

  /* The floor: two rings in brass, as if the figure stood on a summoning
     circle. Drawn with borders, so it costs nothing and scales with the stage. */
  .floor{position:absolute;left:50%;bottom:52px;width:min(520px,68%);height:130px;
    transform:translateX(-50%);z-index:1;pointer-events:none}
  .floor i{position:absolute;inset:0;border-radius:50%;
    border:1px solid rgba(226,183,91,.28);
    box-shadow:inset 0 0 40px rgba(226,183,91,.08), 0 0 30px rgba(226,183,91,.12)}
  .floor i:nth-child(2){inset:22px 12%;border-color:rgba(226,183,91,.16);box-shadow:none}
  .floor i:nth-child(3){inset:50px 30%;border-color:rgba(244,223,168,.10);box-shadow:none;
    background:radial-gradient(ellipse,rgba(226,183,91,.32),transparent 70%);filter:blur(6px)}

  .scene{position:relative;z-index:3;display:grid;
    grid-template-columns:270px minmax(0,1fr) 270px;gap:16px;
    padding:22px 22px 30px;min-height:640px;align-items:start}

  /* -- the figure and its slots -- */
  .rig{position:relative;display:grid;grid-template-columns:76px minmax(0,1fr) 76px;
    gap:6px;align-items:center;min-height:590px}
  .col{display:flex;flex-direction:column;gap:14px;justify-content:center}
  .figure{position:relative;width:100%;height:560px;max-width:520px;margin:0 auto}
  .figure canvas,.figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
  canvas#doll{cursor:grab}
  canvas#doll:active{cursor:grabbing}
  .fallback{position:absolute;inset:0;display:grid;place-items:center;color:var(--faint);
    font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase}
  .spin{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);
    font-family:var(--mono);font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;
    color:var(--faint);opacity:0;transition:opacity .2s;pointer-events:none;white-space:nowrap}
  .rig:hover .spin{opacity:1}

  /* A gear slot: a carved frame with a hairline leader toward the body. */
  .eq{position:relative;width:76px;height:76px;flex:none;border-radius:12px;
    border:1px solid var(--line-2);
    background:linear-gradient(180deg,#221C14,#14110C);
    box-shadow:inset 0 1px 0 rgba(244,223,168,.07), 0 10px 24px -14px rgba(0,0,0,.9);
    display:grid;place-items:center;transition:transform .16s,border-color .16s,box-shadow .16s;
    cursor:default}
  .eq[data-id]{cursor:pointer}
  .eq img{width:80%;height:80%;object-fit:contain;filter:drop-shadow(0 4px 6px rgba(0,0,0,.6))}
  .eq .none{font-family:var(--mono);font-size:.5rem;letter-spacing:.14em;text-transform:uppercase;color:#3E3627}
  .eq .plus{position:absolute;top:-7px;right:-6px;font-family:var(--mono);font-size:.62rem;
    font-weight:700;color:var(--gold-ink);background:var(--gold);border-radius:99px;
    padding:.06rem .34rem;line-height:1.35;box-shadow:0 2px 6px rgba(0,0,0,.6)}
  .eq .lbl{position:absolute;bottom:-15px;left:50%;transform:translateX(-50%);
    font-family:var(--mono);font-size:.5rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);white-space:nowrap}
  .eq::after{content:"";position:absolute;top:50%;width:26px;height:1px;
    background:linear-gradient(90deg,rgba(226,183,91,.45),transparent)}
  .col.l .eq::after{left:100%}
  .col.r .eq::after{right:100%;transform:scaleX(-1)}
  .eq:hover{transform:translateY(-2px) scale(1.03);border-color:var(--gold-deep)}
  .eq.q6{border-color:#3E6B87;box-shadow:0 0 0 1px #27455A,0 0 16px -4px var(--q6)}
  .eq.q7{border-color:#1D4ED8;box-shadow:0 0 0 1px #16307E,0 0 18px -4px var(--q7)}
  .eq.q8{border-color:#7A3FA8;box-shadow:0 0 0 1px #4E2A6C,0 0 20px -4px var(--q8)}
  .eq.q9{border-color:#B23A3A;box-shadow:0 0 0 1px #7A2727,0 0 24px -4px rgba(239,68,68,.9),inset 0 0 18px -10px var(--q9)}
  .eq.q9::before{content:"";position:absolute;inset:-1px;border-radius:12px;pointer-events:none;
    box-shadow:0 0 22px -6px var(--q9);animation:breathe 3.2s ease-in-out infinite}
  @keyframes breathe{0%,100%{opacity:.55}50%{opacity:1}}

  /* -- plates -- */
  .plate{border:1px solid var(--line-2);border-radius:var(--r);
    background:linear-gradient(180deg,rgba(27,23,19,.92),rgba(16,14,11,.92));
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    box-shadow:inset 0 1px 0 rgba(244,223,168,.07),0 24px 50px -30px rgba(0,0,0,.9);
    padding:16px 16px 14px}
  .plate + .plate{margin-top:12px}
  .who{font-family:var(--disp);font-weight:700;font-size:1.55rem;line-height:1.1;margin:0;
    letter-spacing:.01em;color:var(--gold-2);text-shadow:0 2px 12px rgba(226,183,91,.25);
    overflow-wrap:anywhere}
  .sub{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
    color:var(--gold);margin-top:6px}
  .bp{display:flex;align-items:baseline;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
  .bp span{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
  .bp b{font-family:var(--mono);font-size:1.6rem;color:var(--gold-2);line-height:1;font-variant-numeric:tabular-nums}
  .pills{display:flex;gap:5px;flex-wrap:wrap;margin-top:10px}
  .pill{font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;
    border:1px solid var(--line-2);color:var(--dim);padding:.16rem .46rem;border-radius:99px}
  .pill.era{border-color:var(--gold-deep);color:var(--gold)}

  /* The four bars. Thick, because they are the four numbers that decide
     whether you fight next, and a thin line is a decoration. */
  .vit{margin-top:12px;display:flex;flex-direction:column;gap:9px}
  .v{display:grid;grid-template-columns:1.1rem 1fr;gap:8px;align-items:center}
  .v .ic{font-size:.85rem;text-align:center}
  .v .t{position:relative;height:16px;border-radius:99px;background:#0C0A07;
    border:1px solid var(--line);overflow:hidden;
    box-shadow:inset 0 2px 6px rgba(0,0,0,.8)}
  .v .t i{position:absolute;inset:0;width:0;border-radius:99px;
    transition:width .9s cubic-bezier(.2,.8,.2,1)}
  .v .t i::after{content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(255,255,255,.28),transparent 55%,rgba(0,0,0,.25))}
  .v .t b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    font-family:var(--mono);font-size:.62rem;font-weight:700;color:#fff;
    text-shadow:0 1px 2px rgba(0,0,0,.9);letter-spacing:.04em;font-variant-numeric:tabular-nums}
  .v.hp .t i{background:linear-gradient(90deg,#8F2A22,#E24E40)}
  .v.mp .t i{background:linear-gradient(90deg,#2C5A8E,#6FA8DC)}
  .v.st .t i{background:linear-gradient(90deg,#9C7228,#E2B75B)}
  .v.xp .t i{background:linear-gradient(90deg,#2C6F5B,#5FBFA0)}
  .v .k{grid-column:2;display:flex;justify-content:space-between;margin-top:-3px;
    font-family:var(--mono);font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
  .v .k em{font-style:normal;color:var(--dim)}

  .acts{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
  .btn{font-size:.8rem;font-weight:700;border-radius:99px;padding:.5rem .95rem;cursor:pointer;
    border:1px solid var(--line-2);background:var(--panel-2);color:var(--text);transition:.14s;
    display:inline-flex;align-items:center;gap:.4rem;line-height:1}
  .btn:hover{border-color:var(--gold-deep);transform:translateY(-1px)}
  .btn.gold{background:var(--gold);color:var(--gold-ink);border-color:var(--gold)}
  .btn.gold:hover{filter:brightness(1.06)}
  .btn.jade{background:transparent;color:var(--jade);border-color:var(--jade-deep)}
  .btn.jade:hover{background:rgba(95,191,160,.08)}
  .btn.danger{color:#F0A29A;border-color:var(--blood-deep)}
  .btn.danger:hover{background:rgba(216,72,60,.08)}
  .btn[disabled]{opacity:.45;cursor:default;transform:none;filter:none}
  .btn.sm{font-size:.72rem;padding:.38rem .7rem}
  .btn.armed{background:var(--gold);color:var(--gold-ink);border-color:var(--gold-2);
    box-shadow:0 0 0 3px rgba(226,183,91,.22);animation:armed 1.1s ease-in-out infinite}
  @keyframes armed{0%,100%{box-shadow:0 0 0 3px rgba(226,183,91,.22)}50%{box-shadow:0 0 0 6px rgba(226,183,91,.08)}}

  /* -- attributes -- */
  h2{font-family:var(--mono);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;
    color:var(--gold-deep);margin:0 0 10px;font-weight:700}
  .rows{display:flex;flex-direction:column}
  .row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:.36rem 0}
  .row + .row{border-top:1px solid var(--line)}
  .row span{font-size:.84rem;color:var(--dim)}
  .row b{font-family:var(--mono);font-size:.95rem;font-variant-numeric:tabular-nums;color:var(--text)}
  .row .of{color:var(--faint);font-weight:400;font-size:.72rem}
  .row.hi b{color:var(--gold-2)}

  /* =========================================================== WORKBENCH ==
     Where the character is MANAGED. Tabs, because six things do not belong
     on one scroll, and a browser is where six things fit in the first place. */
  .bench{margin-top:18px;border:1px solid var(--line-2);border-radius:18px;background:var(--panel);
    box-shadow:inset 0 1px 0 rgba(244,223,168,.05);overflow:hidden}
  /* Ten tabs do not fit one row on most screens. A strip that scrolls with
     its scrollbar hidden clips the last two and shows no way to reach them
     -- the same trap the mobile nav fell into. So they WRAP. */
  .tabs{display:flex;flex-wrap:wrap;gap:2px;padding:8px;border-bottom:1px solid var(--line);
    background:var(--ink-2)}
  .tabs button{flex:none;font-size:.78rem;font-weight:600;color:var(--dim);background:transparent;
    border:1px solid transparent;border-radius:10px;padding:.5rem .72rem;cursor:pointer;transition:.13s;
    display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap}
  .tabs button .ic{font-size:.95rem}
  .tabs button:hover{color:var(--text);background:var(--panel-2)}
  .tabs button[aria-selected="true"]{color:var(--gold-2);background:var(--panel-2);border-color:var(--line-2);
    box-shadow:inset 0 1px 0 rgba(244,223,168,.08)}
  .tabs button .n{font-family:var(--mono);font-size:.62rem;color:var(--faint);
    background:var(--ink);border-radius:99px;padding:.05rem .4rem}
  .pane{padding:18px}
  .pane[hidden]{display:none}
  .phead{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:12px}
  .phead h3{font-family:var(--disp);font-weight:700;font-size:1.15rem;margin:0;letter-spacing:.02em}
  .phead .hint{font-size:.82rem;color:var(--faint)}
  .phead .right{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
  .toast{margin-top:12px;font-size:.84rem;color:var(--dim);min-height:1.3em}
  .toast.bad{color:#F0A29A}
  .toast.good{color:var(--jade)}

  /* condition */
  .cond{display:grid;gap:6px 14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-bottom:14px}
  .cbar{display:grid;grid-template-columns:4.6rem 1fr 2.6rem;gap:9px;align-items:center;font-size:.8rem}
  .cbar .s{font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
  .cbar .t{height:6px;border-radius:99px;background:#0C0A07;overflow:hidden;border:1px solid var(--line)}
  .cbar .t i{display:block;height:100%;border-radius:99px;background:var(--gold)}
  .cbar.low .t i{background:#E8834A}
  .cbar.dead .t i{background:var(--blood)}
  .cbar .p{font-family:var(--mono);font-size:.72rem;color:var(--dim);text-align:right}

  /* item grids */
  .grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(112px,1fr))}
  .cell{position:relative;border:1px solid var(--line);border-radius:12px;
    background:linear-gradient(180deg,var(--panel-2),var(--panel));padding:10px 6px 8px;text-align:center;
    cursor:pointer;color:var(--text);transition:transform .12s,border-color .12s,box-shadow .12s}
  .cell:hover{transform:translateY(-2px);border-color:var(--gold-deep)}
  /* A piece this character cannot wear. Dimmed AND labelled: colour alone is
     not an answer for anybody who cannot see it, and the label is the same
     sentence the game gives when it refuses the equip. */
  /* The shelf's filters. Plain checkboxes on purpose: this is a narrowing
     tool, not a control panel, and it has to read at a glance. */
  .mktfilter{display:flex;flex-wrap:wrap;align-items:center;gap:10px;
    margin:0 0 10px;font-family:var(--mono);font-size:.6rem;
    letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
  .mktfilter label{display:inline-flex;align-items:center;gap:5px;cursor:pointer}
  .mktfilter input{accent-color:var(--jade);cursor:pointer;margin:0}
  .mktfilter label:hover{color:var(--dim)}
  .mktfilter .sep{width:1px;height:12px;background:var(--line)}
  .mktfilter .mktcount{margin-left:auto;color:var(--dim)}
  .cell.nofit{opacity:.45;filter:grayscale(.7)}
  .cell.nofit:hover{opacity:.8;filter:none}
  .cell .nofitwhy{display:block;font-family:var(--mono);font-size:.52rem;
    line-height:1.3;color:var(--rose,#E2707F);margin-top:4px;text-wrap:balance}
  .cell .fit{position:absolute;top:6px;left:6px;font-size:.62rem;line-height:1;
    color:var(--jade);background:rgba(0,0,0,.45);border-radius:99px;padding:2px 4px}
  .cell img{width:52px;height:52px;object-fit:contain;display:block;margin:0 auto 6px;
    filter:drop-shadow(0 4px 6px rgba(0,0,0,.6))}
  .cell .nm{font-size:.72rem;line-height:1.25;color:var(--dim);
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .cell .lv{font-family:var(--mono);font-size:.56rem;color:var(--faint);margin-top:3px}
  .cell .pr{font-family:var(--mono);font-size:.64rem;color:var(--gold);margin-top:5px;font-weight:700}
  .cell .pl{position:absolute;top:6px;right:7px;font-family:var(--mono);font-size:.6rem;font-weight:700;
    color:var(--gold-ink);background:var(--gold);border-radius:99px;padding:.02rem .3rem}
  .cell .st{position:absolute;top:6px;left:7px;font-family:var(--mono);font-size:.52rem;
    letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
  .cell.q6{border-color:#3E6B87} .cell.q7{border-color:#1D4ED8}
  .cell.q8{border-color:#7A3FA8} .cell.q9{border-color:#B23A3A;box-shadow:0 0 16px -6px var(--q9)}
  .cell.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold-deep)}
  .cell.on::after{content:"worn";position:absolute;bottom:-1px;left:50%;transform:translateX(-50%);
    font-family:var(--mono);font-size:.5rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-ink);
    background:var(--gold);border-radius:99px 99px 0 0;padding:.04rem .36rem}
  .cell.busy{opacity:.5;pointer-events:none}
  .cell.pick{border-color:var(--jade);box-shadow:0 0 0 1px var(--jade-deep)}
  .cell.pick::after{content:"selected";position:absolute;bottom:-1px;left:50%;transform:translateX(-50%);
    font-family:var(--mono);font-size:.5rem;letter-spacing:.1em;text-transform:uppercase;color:#062A20;
    background:var(--jade);border-radius:99px 99px 0 0;padding:.04rem .36rem}
  .cell.dis{opacity:.45;cursor:default}
  .cell.dis:hover{transform:none;border-color:var(--line)}

  /* -- stones -- */
  .stones{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:18px}
  .worth{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
  .worth b{font-family:var(--mono);font-size:2.4rem;color:var(--gold-2);line-height:1;font-variant-numeric:tabular-nums}
  .worth span{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
  .rule{margin:10px 0 0;font-size:.9rem;color:var(--dim);line-height:1.5;max-width:52ch}
  .rule b{color:var(--gold-2)}
  .held{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
  .stone{display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:10px;
    background:var(--panel-2);padding:4px 8px 4px 4px;font-family:var(--mono);font-size:.72rem}
  .stone img{width:26px;height:26px;object-fit:contain}
  .stone b{color:var(--gold-2)} .stone em{font-style:normal;color:var(--faint);font-size:.6rem}
  .stone.zero{opacity:.35}
  /* The staircase. Widths are LOG scale on purpose: at linear scale the first
     eight steps would be invisible next to the twelfth. */
  .ladder{margin-top:16px;display:flex;flex-direction:column;gap:4px}
  .step{display:grid;grid-template-columns:5.6rem 1fr 3.6rem;gap:10px;align-items:center;font-family:var(--mono);font-size:.68rem}
  .step .f{color:var(--faint);letter-spacing:.06em}
  .step .t{height:9px;border-radius:99px;background:#0C0A07;border:1px solid var(--line);overflow:hidden}
  .step .t i{display:block;height:100%;background:linear-gradient(90deg,var(--gold-deep),var(--gold));opacity:.75}
  .step .w{text-align:right;color:var(--dim);font-variant-numeric:tabular-nums}
  .step.here .f{color:var(--gold-2)} .step.here .t i{opacity:1;background:linear-gradient(90deg,var(--gold),var(--gold-2))}
  .step.here .w{color:var(--gold-2);font-weight:700}
  .step.paid .t i{background:var(--jade-deep);opacity:.7}
  .pieces{display:flex;flex-direction:column;gap:8px}
  .piece{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;
    border:1px solid var(--line);border-radius:12px;background:var(--panel-2);padding:8px 10px}
  .piece img{width:44px;height:44px;object-fit:contain;filter:drop-shadow(0 3px 5px rgba(0,0,0,.6))}
  .piece .nm{font-weight:700;font-size:.88rem;line-height:1.2}
  .piece .nm em{font-style:normal;font-family:var(--mono);font-size:.62rem;color:var(--faint);margin-left:.4rem}
  .piece .cost{font-family:var(--mono);font-size:.68rem;color:var(--dim);margin-top:3px;line-height:1.4}
  .piece .cost b{color:var(--gold-2)}
  .piece .cost .no{color:var(--faint)}
  .piece .do{display:flex;flex-direction:column;gap:5px;align-items:stretch}
  .piece.q6 img{filter:drop-shadow(0 0 6px var(--q6))} .piece.q7 img{filter:drop-shadow(0 0 6px var(--q7))}
  .piece.q8 img{filter:drop-shadow(0 0 6px var(--q8))} .piece.q9 img{filter:drop-shadow(0 0 7px var(--q9))}

  /* -- shops -- */
  .shelf{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
  .good{border:1px solid var(--line);border-radius:12px;background:linear-gradient(180deg,var(--panel-2),var(--panel));
    padding:12px;display:flex;flex-direction:column;gap:6px;transition:border-color .12s,transform .12s}
  .good:hover{border-color:var(--gold-deep);transform:translateY(-1px)}
  .good .top{display:flex;gap:10px;align-items:center}
  .good img{width:44px;height:44px;object-fit:contain;flex:none;filter:drop-shadow(0 3px 5px rgba(0,0,0,.6))}
  #garments .good img{width:56px;height:56px}
  #garments .good.q9{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold-deep)}
  .good .nm{font-weight:700;font-size:.86rem;line-height:1.2}
  .good .meta{font-family:var(--mono);font-size:.6rem;color:var(--faint);letter-spacing:.06em;text-transform:uppercase;margin-top:2px}
  .good .stat{font-family:var(--mono);font-size:.68rem;color:var(--dim);line-height:1.5}
  .good .stat b{color:var(--text);font-weight:600}
  .good .buy{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:6px;border-top:1px solid var(--line)}
  .good .price{font-family:var(--mono);font-size:.72rem;color:var(--gold);font-weight:700}
  .good.q6{border-color:#3E6B87} .good.q7{border-color:#1D4ED8} .good.q8{border-color:#7A3FA8} .good.q9{border-color:#B23A3A}
  .good.own{border-color:var(--jade-deep)}
  /* A potion card carries a stepper as well as a price; on one line the "+"
     fell off the edge. The price takes the first line, the controls the next. */
  .good.pot .buy,.buy.pot{flex-wrap:wrap}
  .good.pot .buy .price,.buy.pot .price{flex:1 0 100%}
  .good.pot .buy .qty,.buy.pot .qty{margin-right:auto}
  .good.own .price{color:var(--jade)}
  .qty{display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:99px;overflow:hidden}
  .qty button{width:26px;height:26px;border:0;background:var(--panel-2);color:var(--text);cursor:pointer;font-weight:700}
  .qty output{font-family:var(--mono);font-size:.72rem;min-width:2ch;text-align:center;padding:0 4px}
  .twocol{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  .twocol h4{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;margin:0 0 10px;font-weight:700}
  .twocol h4.hp{color:#E24E40} .twocol h4.mp{color:var(--sky)}
  .bagmeter{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.72rem;color:var(--dim)}
  .bagmeter .t{width:120px;height:6px;border-radius:99px;background:#0C0A07;border:1px solid var(--line);overflow:hidden}
  .bagmeter .t i{display:block;height:100%;background:var(--gold)}
  .bagmeter.full .t i{background:var(--blood)}
  .sellbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px;padding:10px 12px;
    border:1px solid var(--line);border-radius:12px;background:var(--ink-2)}
  .sellbar b{font-family:var(--mono);color:var(--jade)}

  /* -- wardrobe -- */
  .ward{display:grid;grid-template-columns:260px minmax(0,1fr);gap:18px}
  .try{position:relative;border:1px solid var(--line-2);border-radius:14px;overflow:hidden;
    background:radial-gradient(300px 200px at 50% 90%,rgba(226,183,91,.16),transparent 70%),linear-gradient(180deg,#171310,#0D0B08);
    aspect-ratio:3/4}
  .try img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
  .try .cap{position:absolute;left:0;right:0;bottom:0;padding:8px 10px;font-family:var(--mono);font-size:.58rem;
    letter-spacing:.14em;text-transform:uppercase;color:var(--faint);background:linear-gradient(transparent,rgba(10,9,7,.9))}
  .swatches{display:flex;gap:8px;flex-wrap:wrap}
  .sw{width:34px;height:34px;border-radius:50%;border:2px solid var(--line-2);cursor:pointer;position:relative;
    box-shadow:inset 0 -4px 8px rgba(0,0,0,.35);transition:transform .12s}
  .sw:hover{transform:scale(1.08)}
  .sw.on{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold-deep),inset 0 -4px 8px rgba(0,0,0,.35)}
  .sw.own::after{content:"";position:absolute;right:-2px;bottom:-2px;width:10px;height:10px;border-radius:50%;background:var(--jade);border:2px solid var(--panel)}
  .sw.no{opacity:.25;cursor:default}
  .sw.no:hover{transform:none}
  .styles{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
  .sty{border:1px solid var(--line);border-radius:10px;background:var(--panel-2);padding:8px 10px;cursor:pointer;
    display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:.78rem;transition:border-color .12s}
  .sty:hover{border-color:var(--gold-deep)}
  .sty.on{border-color:var(--gold)}
  .sty .p{font-family:var(--mono);font-size:.6rem;color:var(--gold)}
  .sty.own .p{color:var(--jade)}
  .wsec + .wsec{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}

  /* -- market -- */
  .mkt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
  .tentlist{display:flex;flex-direction:column;gap:6px}
  .tentrow{display:flex;justify-content:space-between;align-items:center;gap:10px;border:1px solid var(--line);
    border-radius:10px;background:var(--panel-2);padding:8px 12px;cursor:pointer;font-size:.84rem;transition:border-color .12s}
  .tentrow:hover{border-color:var(--gold-deep)}
  .tentrow.on{border-color:var(--gold)}
  .tentrow em{font-style:normal;font-family:var(--mono);font-size:.66rem;color:var(--faint)}
  .tentrow b{font-family:var(--mono);color:var(--gold)}
  .priceq{display:inline-flex;align-items:center;gap:6px}
  .priceq input{font:inherit;font-family:var(--mono);font-size:.74rem;width:7ch;background:var(--ink);color:var(--text);
    border:1px solid var(--line-2);border-radius:8px;padding:.3rem .5rem}
  .cell .who{font-family:var(--mono);font-size:.52rem;color:var(--faint);margin-top:2px}
  @media (max-width:880px){.mkt{grid-template-columns:1fr}}

  /* -- jeweler -- */
  .sock{display:inline-flex;gap:6px;align-items:center}
  .hole{width:34px;height:34px;border-radius:50%;border:1px dashed var(--line-2);display:grid;place-items:center;
    background:#0C0A07;font-size:.6rem;color:var(--faint)}
  .hole.set{border:1px solid var(--gold-deep);background:radial-gradient(circle at 40% 35%,#2B2314,#0C0A07)}
  .hole img{width:26px;height:26px;object-fit:contain}
  .hole.none{opacity:.3;border-style:dotted}
  .gemrow{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;
    border:1px solid var(--line);border-radius:12px;background:var(--panel-2);padding:8px 10px}
  .gemrow img.it{width:44px;height:44px;object-fit:contain;filter:drop-shadow(0 3px 5px rgba(0,0,0,.6))}
  .gemrow .nm{font-weight:700;font-size:.88rem}
  .gemrow .cost{font-family:var(--mono);font-size:.66rem;color:var(--dim);margin-top:3px}
  .gemrow .do{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;align-items:center}
  .gemrow select{font:inherit;font-size:.74rem;background:var(--panel);color:var(--text);border:1px solid var(--line-2);
    border-radius:99px;padding:.34rem .6rem}
  .fx{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
  .fx span{font-family:var(--mono);font-size:.68rem;border:1px solid var(--gold-deep);color:var(--gold-2);
    border-radius:99px;padding:.22rem .6rem}
  /* -- mine -- */
  .mines{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
  .minec{border:1px solid var(--line);border-radius:14px;padding:14px;position:relative;overflow:hidden;
    background:radial-gradient(240px 120px at 50% 100%,rgba(226,183,91,.14),transparent 70%),linear-gradient(180deg,var(--panel-2),var(--panel))}
  .minec h4{font-family:var(--disp);font-size:1rem;margin:0 0 4px;letter-spacing:.02em}
  .minec p{margin:0 0 10px;font-size:.78rem;color:var(--dim);line-height:1.45;min-height:3.6em}
  .minec.shut{opacity:.55}
  .minec .lock{position:absolute;top:10px;right:12px;font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
  .haul{margin-top:14px;border:1px solid var(--line);border-radius:12px;background:var(--ink-2);padding:12px 14px;min-height:3em}
  .haul .line{display:flex;justify-content:space-between;gap:12px;font-size:.84rem;padding:.24rem 0}
  .haul .line + .line{border-top:1px solid var(--line)}
  .haul .rare{color:var(--gold-2);font-weight:700}
  .haul .line img{width:22px;height:22px;object-fit:contain;vertical-align:middle;margin-right:6px}
  .orebag{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
  .orebag .stone{cursor:pointer;transition:border-color .12s,box-shadow .12s}
  .orebag .stone:hover{border-color:var(--line-2)}
  /* Picked for the next sale. The jade edge is the same colour the sell
     button wears, so the connection is visible without a legend. */
  .orebag .stone.picked{border-color:var(--jade);box-shadow:inset 0 0 0 1px var(--jade-deep)}
  .orebag .stone.picked em{color:var(--jade)}

  /* -- arts -- */
  .arts{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
  .art{border:1px solid var(--line);border-radius:12px;background:var(--panel-2);padding:10px 12px;
    display:grid;grid-template-columns:auto 1fr;gap:4px 10px}
  .art .lv{font-family:var(--mono);font-size:.58rem;color:var(--faint);padding-top:.3rem}
  .art .nm{font-weight:700;font-size:.9rem}
  .art .bl{font-size:.78rem;color:var(--dim);line-height:1.4;grid-column:2}
  .art.her{border-color:var(--gold-deep)}
  .art.her .nm{color:var(--gold-2)}
  .art.her .nm::after{content:"past life";font-family:var(--mono);font-size:.5rem;letter-spacing:.1em;
    text-transform:uppercase;color:var(--gold-deep);border:1px solid var(--gold-deep);border-radius:99px;
    padding:.05rem .32rem;margin-left:.4rem;vertical-align:1px}

  /* -- the item menu: what you can do with a piece -- */
  #imenu{position:absolute;z-index:9600;width:min(300px,calc(100vw - 24px));border:1px solid var(--line-2);
    border-radius:14px;background:var(--panel);box-shadow:0 24px 60px rgba(0,0,0,.7),inset 0 1px 0 rgba(244,223,168,.07);
    padding:12px 14px 12px}
  #imenu[hidden]{display:none}
  #imenu .top{display:flex;gap:10px;align-items:center}
  #imenu img{width:48px;height:48px;object-fit:contain;flex:none;filter:drop-shadow(0 3px 5px rgba(0,0,0,.6))}
  #imenu h4{margin:0;font-size:1rem;font-weight:700;line-height:1.2}
  #imenu .sub{font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-top:3px}
  #imenu .rows{margin-top:8px;font-size:.8rem;color:var(--dim);line-height:1.5}
  #imenu .rows b{color:var(--text);font-family:var(--mono)}
  #imenu .swap{margin-top:8px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--ink-2);font-size:.78rem;color:var(--dim)}
  #imenu .swap b{color:var(--gold-2)}
  #imenu .acts{display:flex;flex-direction:column;gap:6px;margin-top:10px}
  #imenu .acts .btn{justify-content:center;width:100%}
  #imenu .x{position:absolute;top:8px;right:10px;background:none;border:0;color:var(--faint);font-size:1rem;cursor:pointer}
  #imenu .hint{margin-top:8px;font-size:.7rem;color:var(--faint);text-align:center}
  #imenu.q6{border-color:#3E6B87} #imenu.q7{border-color:#1D4ED8} #imenu.q8{border-color:#7A3FA8} #imenu.q9{border-color:#B23A3A}
  @media (max-width:560px){#imenu{position:fixed;left:12px!important;right:12px;top:auto!important;bottom:12px;width:auto}}

  /* -- the hover card -- */
  #tip{position:fixed;z-index:9500;pointer-events:none;opacity:0;transition:opacity .12s;max-width:270px;
    border:1px solid var(--line-2);border-radius:12px;background:var(--panel);
    box-shadow:0 18px 50px rgba(0,0,0,.65);padding:11px 13px}
  #tip.on{opacity:1}
  #tip h4{margin:0;font-size:.95rem;font-weight:700;line-height:1.25}
  #tip .sub{font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;margin-top:4px}
  #tip .rows{margin-top:8px;display:flex;flex-direction:column;gap:2px}
  #tip .r{display:flex;justify-content:space-between;gap:14px;font-size:.8rem}
  #tip .r span{color:var(--dim)}
  #tip .r b{font-family:var(--mono);font-variant-numeric:tabular-nums}
  #tip .r .up{color:var(--gold)}
  #tip .note{margin-top:8px;padding-top:7px;border-top:1px solid var(--line);font-size:.74rem;color:var(--faint);line-height:1.4}
  #tip .warn{color:#F0A29A}
  #tip.q6{border-color:#3E6B87} #tip.q6 .sub{color:var(--q6)}
  #tip.q7{border-color:#1D4ED8} #tip.q7 .sub{color:var(--q7)}
  #tip.q8{border-color:#7A3FA8} #tip.q8 .sub{color:var(--q8)}
  #tip.q9{border-color:#B23A3A} #tip.q9 .sub{color:var(--q9)}
  #tip.q3 .sub,#tip.q4 .sub,#tip.q5 .sub{color:var(--faint)}
  @media (hover:none){ #tip{display:none} }

  /* =============================================================== BANDS ==
     Everything under the workbench: the money, the boards, the how-to. */
  .bands{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;margin-top:18px}
  .band{border:1px solid var(--line);border-radius:18px;background:var(--panel);padding:20px}
  .band > h3{font-family:var(--disp);font-weight:700;font-size:1.2rem;margin:0 0 4px;letter-spacing:.02em}
  .band > .lede{color:var(--dim);margin:0 0 16px;max-width:62ch;line-height:1.55;font-size:.9rem}
  .band.wide{grid-column:1 / -1}
  .loop{display:grid;gap:8px;grid-template-columns:1fr;margin:0 0 14px}
  .lstep{display:grid;grid-template-columns:2.2rem 1fr;gap:10px;align-items:start;padding:8px 0}
  .lstep + .lstep{border-top:1px solid var(--line)}
  .lstep .k{font-family:var(--disp);font-size:1.1rem;color:var(--gold-deep);line-height:1.2}
  .lstep b{display:block;font-size:.92rem;margin-bottom:2px}
  .lstep p{margin:0;font-size:.8rem;color:var(--dim);line-height:1.45}
  .pot{border:1px solid var(--gold-deep);border-radius:14px;
    background:radial-gradient(300px 120px at 20% 0%,rgba(226,183,91,.14),transparent 70%),linear-gradient(180deg,#1A1610,#12100C);padding:16px}
  .pot .amt{font-family:var(--mono);font-size:1.8rem;color:var(--gold-2);font-variant-numeric:tabular-nums;line-height:1.1}
  .pot .cap{font-size:.82rem;color:var(--dim);margin-top:6px;line-height:1.5}
  .ripe{height:6px;border-radius:99px;background:#241D10;margin-top:12px;overflow:hidden}
  .ripe i{display:block;height:100%;background:linear-gradient(90deg,var(--gold-deep),var(--gold));border-radius:99px}
  .btabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
  .btabs button{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
    background:transparent;border:1px solid var(--line);border-radius:99px;padding:.36rem .72rem;cursor:pointer}
  .btabs button[aria-pressed="true"]{color:var(--gold-ink);background:var(--gold);border-color:var(--gold)}
  .lb{border:1px solid var(--line);border-radius:12px;background:var(--ink-2);overflow:hidden}
  .lb .blurb{padding:10px 14px;border-bottom:1px solid var(--line);font-size:.8rem;color:var(--faint)}
  .lb ol{list-style:none;margin:0;padding:0}
  .lb li{display:grid;grid-template-columns:2.1rem 1fr auto;gap:12px;align-items:baseline;padding:.56rem 14px}
  .lb li + li{border-top:1px solid var(--line)}
  .lb .n{font-family:var(--mono);font-size:.72rem;color:var(--faint);font-variant-numeric:tabular-nums}
  .lb li:nth-child(-n+3) .n{color:var(--gold)}
  .lb .nm{font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .lb .nm em{font-style:normal;color:var(--faint);font-size:.74rem;font-weight:400;margin-left:.4rem}
  .lb .v{font-family:var(--mono);font-size:.86rem;color:var(--gold);font-variant-numeric:tabular-nums;text-align:right}
  .lb .none{padding:16px 14px;color:var(--faint);font-size:.84rem}
  .groups{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
  .group{border:1px solid var(--line);border-radius:12px;background:var(--ink-2);padding:13px 14px}
  .group h4{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0 0 3px;font-weight:700}
  .group .why{font-size:.78rem;color:var(--faint);margin:0 0 10px;line-height:1.45}
  .cmd{padding:.4rem 0}
  .cmd + .cmd{border-top:1px solid var(--line)}
  .cmd code{font-family:var(--mono);font-size:.8rem;color:var(--text);background:#0A0907;border:1px solid var(--line);
    border-radius:6px;padding:.12rem .4rem;white-space:nowrap}
  .cmd p{margin:.32rem 0 0;font-size:.8rem;color:var(--dim);line-height:1.45}
  .foot{margin-top:22px;font-size:.78rem;color:var(--faint);line-height:1.6;max-width:70ch}

  /* ---- loading + transitions ---- */
  .pane.in{animation:pane-in .18s ease}
  @keyframes pane-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
  .skel{display:grid;gap:10px;padding:6px 0}
  .skel i{display:block;height:14px;border-radius:6px;
    background:linear-gradient(90deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,.09) 50%,rgba(255,255,255,.04) 100%);
    background-size:200% 100%;animation:skel 1.1s linear infinite}
  .skel i:nth-child(1){width:38%}.skel i:nth-child(2){width:72%}.skel i:nth-child(3){width:55%}.skel i:nth-child(4){width:64%;height:96px;border-radius:12px}
  @keyframes skel{from{background-position:200% 0}to{background-position:-200% 0}}

  /* ---- responsive ---- */
  @media (max-width:1040px){
    .scene{grid-template-columns:230px minmax(0,1fr) 230px;padding:18px}
    .figure{height:500px}
    .rig{grid-template-columns:64px 1fr 64px;min-height:520px}
    .eq{width:64px;height:64px}
  }
  @media (max-width:880px){
    .stage{min-height:0}
    .scene{grid-template-columns:1fr;min-height:0;padding:14px}
    .scene > .plates.l{order:2} .scene > .rig{order:1} .scene > .plates.r{order:3}
    .figure{height:440px}
    .rig{grid-template-columns:60px 1fr 60px;min-height:0}
    .eq{width:60px;height:60px}
    .eq::after{display:none}
    .stones,.twocol,.ward,.bands{grid-template-columns:1fr}
    .band.wide{grid-column:auto}
  }
  @media (max-width:520px){
    .wrap{padding:12px 12px 48px}
    .rig{grid-template-columns:1fr;gap:10px}
    .col{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:10px}
    .figure{height:380px}
    .eq .lbl{display:none}
    .pane{padding:14px}
    .piece{grid-template-columns:36px minmax(0,1fr)}
    .piece .do{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap}
  }
  @media (prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important}
    .embers{display:none}
    .spin{display:none}
  }

  /* ------------------------------------------------------------- the plot --
     The room art is the floor; the grid is an isometric lattice laid over it
     in the same 64x32 rhythm the client drew it in, scaled to whatever width
     the pane happens to be. */
  .estate-wrap{overflow-x:auto;margin:.6rem 0}
  .estate{position:relative;display:inline-block;min-width:min(100%,320px);
          border:1px solid var(--line);border-radius:12px;overflow:hidden;
          background:#0C0A07}
  .estate img#plotart{display:block;width:100%;height:auto}
  .estate .cells{position:absolute;inset:0}
  .cell-iso{position:absolute;padding:0;border:0;background:transparent;cursor:pointer;
            clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);transition:background .12s}
  .cell-iso:hover{background:rgba(212,175,55,.28)}
  .cell-iso:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
  .cell-iso.full{cursor:pointer}
  .cell-iso .piece{position:absolute;left:50%;bottom:35%;transform:translateX(-50%);
                   width:190%;height:auto;pointer-events:none;
                   filter:drop-shadow(0 3px 4px rgba(0,0,0,.55))}
  .estate-perks{display:flex;flex-wrap:wrap;gap:.4rem;margin:.5rem 0}
  .chip{font-size:.74rem;padding:.24rem .6rem;border-radius:99px;
        border:1px solid var(--line);background:rgba(212,175,55,.07);color:var(--ink)}
  .chip.quiet{background:transparent;color:var(--faint)}
  .cbar .btn.sm{white-space:nowrap}