@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&display=swap');
  :root{
    --bg:#0d1017;
    --panel:#131823;
    --panel-2:#1a212e;
    --line:#2a3444;
    --ink:#e6ecf5;
    --ink-dim:#8b98ad;
    --ink-faint:#5c6a80;
    --gold:#c9a24b;
    --gold-soft:#e3c884;
    --coffee:#c9a24b;
    --steel:#5b8fb0;
    --danger:#c0564b;
    --green:#5bb07a;
    --bg-glow:#1a2233;
    --veil-1:rgba(13,16,23,.5);
    --veil-2:rgba(13,16,23,.3);
    /* how opaque panel surfaces are — under 100% lets the page background
       (and the blurred portrait banner, when present) show through faintly.
       Shared by section.block, .abil, .tab-body.active and .main-tab so
       they all read as the same kind of surface. */
    --panel-alpha:75%;
  }
  /* ---- Light mode — toggled via html[data-theme="light"], see .theme-toggle ---- */
  html[data-theme="light"]{
    --bg:#f3efe4;
    --panel:#ffffff;
    --panel-2:#f2ede0;
    --line:#ddd4bd;
    --ink:#2b2519;
    --ink-dim:#6d6350;
    --ink-faint:#a29679;
    --gold:#9c6f1f;
    --gold-soft:#b9862c;
    --coffee:#8a6a2f;
    --steel:#33627f;
    --danger:#a13d31;
    --green:#3d7a4c;
    --bg-glow:#e6d9bd;
    --veil-1:rgba(243,239,228,.6);
    --veil-2:rgba(243,239,228,.3);
  }
  /* ===== "WEDDING SCRIPT" palette — swap this :root in to use it =====
  :root{
    --bg:#141414;              Chinese black - main background
    --panel:#1a2421;           dark jungle green - boxes/sections
    --panel-2:#212e2a;         lighter jungle green - inner elements
    --line:#343434;            Jet - dividers
    --ink:#e6ecf5;
    --ink-dim:#98a39b;
    --ink-faint:#6b756c;
    --gold:#cd9575;            antique brass - main accent
    --gold-soft:#e0b9a3;       lighter antique brass
    --coffee:#a3785c;          coffee - section/box titles
    --steel:#5b8fb0;
    --danger:#c0564b;
    --green:#5bb07a;
  }
  ==================================================================== */
  *{box-sizing:border-box;margin:0;padding:0}
  html{-webkit-text-size-adjust:100%;scrollbar-gutter:stable;overflow-y:scroll}
  /* ---- Scrollbars: every scrollbar on the site (page, Settings panel, pop-ups, lists, notes windows) ----
     Chrome, Edge and Safari: a 6px rounded --line thumb on a clear track, the same colour on hover.
     Firefox cannot set an exact width or corner shape, so it gets its own thin scrollbar in the same colours
     (its thumbs are already rounded). The standard properties are given to Firefox only, because in Chrome
     they switch off the ::-webkit-scrollbar rules that set the width and the rounded ends. */
  ::-webkit-scrollbar{width:6px;height:6px}
  ::-webkit-scrollbar-track,::-webkit-scrollbar-corner{background:transparent}
  ::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px!important;border:0}
  ::-webkit-scrollbar-thumb:hover,::-webkit-scrollbar-thumb:active{background:var(--line)}
  ::-webkit-scrollbar-button{display:none;width:0;height:0}
  @supports (-moz-appearance:none){
    *{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
  }
  /* full-width blurred banner behind the top of the sheet */
  .page-banner{
    position:absolute;top:0;left:0;right:0;height:280px;z-index:0;
    background-size:cover;background-position:center 28%;
    filter:blur(5px) saturate(1.1);
    opacity:0;transition:opacity .4s;
    pointer-events:none;
  }
  .page-banner.show{opacity:.4}
  /* veil + fade to page background at the bottom (--veil-1/-2 flip for light mode) */
  .page-banner::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg, var(--veil-1) 0%, var(--veil-2) 15%, var(--bg) 100%);
  }
  .wrap{position:relative;z-index:1}
  body{
    background:
      radial-gradient(1150px 600px at 50% -10%, var(--bg-glow) 0%, transparent 60%),
      var(--bg);
    color:var(--ink);
    font-family:'Cinzel','Segoe UI',system-ui,sans-serif;
    line-height:1.5;
    min-height:100vh;
    padding:24px 16px 64px;
    transition:background-color .2s,color .2s;
  }
  .wrap{max-width:1100px;margin:0 auto;padding:0 8px}
  /* shrink the content density (text + boxes) without narrowing the container */
  #sheet, .loader{zoom:0.82}
  @supports not (zoom:1){
    #sheet, .loader{transform:scale(0.82);transform-origin:top left;width:122%}
  }

  /* utility face */
  .u{font-family:'Segoe UI',system-ui,sans-serif}

  /* ---- upload bar ---- */
  .loader{
    display:flex;align-items:center;gap:14px;flex-wrap:wrap;
    background:var(--panel);border:1px solid transparent;border-radius:12px;
    padding:14px 18px;margin-top:24px;margin-bottom:16px;
  }
  .loader label{font-family:'Segoe UI',sans-serif;font-size:13px;color:var(--ink-dim);letter-spacing:.02em}
  .btn{
    font-family:'Segoe UI',sans-serif;font-size:13px;font-weight:600;
    letter-spacing:.03em;cursor:pointer;
    background:var(--gold);color:#1a1405;border:none;border-radius:8px;
    padding:9px 16px;transition:filter .15s;
  }
  .btn:hover{filter:brightness(1.08)}
  .btn.ghost{background:var(--panel);color:var(--ink-dim);border:none}
  .btn.ghost:hover{color:var(--ink);border-color:var(--gold)}
  .btn.ghost.btn-add{background:var(--panel-2)}
  .btn.ghost.btn-add:hover{background:#535a34;color:#ffffff;border:none}
  input[type=file]{display:none}
  #charSelect{
    font-family:'Segoe UI',sans-serif;font-size:11px;font-weight:500;
    letter-spacing:.03em;
    background:var(--panel);color:var(--ink);
    border:1px solid var(--line);border-radius:8px;
    padding:5px 5px;
  }
  .hint{font-size:12px;color:var(--ink-faint);margin-left:auto;font-family:'Segoe UI',sans-serif}
  .drop-hot{outline:2px dashed var(--gold);outline-offset:3px}

  /* ---- header ---- */
  header.sheet-head{
    border-bottom:1px solid rgba(255,255,255,.55);
    padding-bottom:18px;margin-bottom:24px;
    display:flex;align-items:flex-end;justify-content:space-between;gap:22px;flex-wrap:wrap;
  }
  header.sheet-head.has-banner{
    position:relative;
    border-bottom:1px solid rgba(255,255,255,.55);
    padding-bottom:18px;margin-bottom:24px;
  }
  header.sheet-head.has-banner .portrait-btn,
  header.sheet-head.has-banner .head-text{position:relative;z-index:2}
  .portrait-btn{
    background:none;border:none;padding:0;margin:0;cursor:pointer;
    border-radius:14px;flex:0 0 auto;line-height:0;transition:opacity .15s;
  }
  .portrait-btn:hover{opacity:.85}
  .portrait-btn:focus-visible{outline:2px solid var(--gold-soft);outline-offset:2px}
  .portrait{
    width:104px;height:104px;flex:0 0 auto;border-radius:14px;
    object-fit:cover;border:none;
    background:var(--panel-2);
  }
  .head-text{
    min-width:0;flex:1;
    display:grid;grid-template-rows:var(--hrow1) var(--hrow2) var(--hrow3);
    align-content:start;
  }
  /* shared header row heights so A (name block) and B (vitals) baselines align */
  :root{--hrow1:17px; --hrow2:56px; --hrow3:22px;}
  .eyebrow{
    font-family:'Segoe UI',sans-serif;
    font-size:11px;letter-spacing:.28em;text-transform:uppercase;
    color:var(--gold);align-self:end;margin-bottom:-4px;line-height:1;
  }
  h1{
    font-family:'Cinzel','Segoe UI',sans-serif;
    font-size:clamp(30px,6vw,50px);font-weight:600;letter-spacing:.01em;
    line-height:1;color:var(--ink);align-self:end;
  }
  .subline{
    font-family:'Segoe UI',sans-serif;
    font-size:14px;color:var(--ink-dim);letter-spacing:.02em;align-self:end;
  }
  @media (max-width:640px){
    header.sheet-head{gap:14px}
    .head-vitals{width:100%}
  }
  @media (max-width:520px){
    .portrait{width:88px;height:88px}
  }
  .subline b{color:var(--green);font-weight:600}

  /* ---- vitals card (AC / Init / Speed / Vision) in the header, top-right ---- */
  .vitals{
    display:grid;grid-template-columns:repeat(4,minmax(84px,1fr));
    gap:0;border-radius:12px;overflow:hidden;
  }
  .head-vitals{
    background:transparent;border:none;
    flex:0 0 auto;
  }
  .vital{
    background:transparent;padding:0 16px;text-align:center;
    display:grid;grid-template-rows:var(--hrow1) var(--hrow2) var(--hrow3);
  }
  .vital .lab{font-family:'Segoe UI',sans-serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);align-self:end;margin-bottom:-4px;line-height:1}
  .vital .val{font-size:clamp(30px,5vw,46px);font-weight:600;color:var(--ink);line-height:1;align-self:end}
  .vital .val.hp{color:var(--gold-soft)}
  .vital .sub{font-family:'Segoe UI',sans-serif;font-size:12px;color:var(--ink-dim);align-self:end}

  /* ---- ability score band (sits above the tabs in the right column) ---- */
  .ability-band{
    margin-bottom:18px;padding:0 0 6px;
  }
  .ability-row{
    display:grid;grid-template-columns:repeat(6,1fr);gap:10px;
  }
  @media (max-width:760px){
    .ability-row{grid-template-columns:repeat(3,1fr)}
  }

  /* ability score box (borderless, filled, slightly inset) */
  .abil{
    background:color-mix(in srgb, var(--panel) var(--panel-alpha), transparent);
    border:none;border-radius:12px;
    padding:12px 8px;margin:0 2.5px;text-align:center;position:relative;
  }
  .abil .name{font-family:'Segoe UI',sans-serif;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim)}
  .abil .mod{font-size:32px;font-weight:600;color:var(--gold-soft);line-height:1.1}
  .abil .score{
    font-family:'Segoe UI',sans-serif;font-size:12px;color:var(--ink-faint);
    border-top:1px solid var(--line);margin-top:6px;padding-top:5px;
  }

  /* three-column body: left rail (saves/passives/profs) | skills | main content */
  .grid3{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:stretch}
  .rail-pair{display:grid;grid-template-columns:244px 240px;gap:22px;align-items:stretch;align-self:start}
  .col-right{display:flex;flex-direction:column;min-width:0}
  .col-mid{display:flex;flex-direction:column}
  .col-mid > .skills-box{flex:1;display:flex;flex-direction:column;margin-bottom:0}
  /* left rail also stretches: its last box grows to match the taller column */
  .col-left{display:flex;flex-direction:column;gap:22px}
  .col-left > .block{margin-bottom:0}
  .col-left > .block:last-child{flex:1}
  @media (max-width:1040px){
    .grid3{grid-template-columns:1fr}
    .rail-pair{grid-template-columns:1fr 1fr}
    .col-right{grid-column:auto}
  }
  @media (max-width:680px){
    .rail-pair{grid-template-columns:1fr}
  }
  /* ---- bottom bar: rest buttons at the left, page actions (Settings) at the right end; pinned to the bottom of the window.
     position:sticky keeps it at the bottom of the window while the sheet is taller than the window, and lets it settle in its
     own place under the sheet at the end of the page, so it never covers the last items. z-index stays below the pop-ups. ---- */
  .bottom-bar{
    position:sticky;bottom:12px;z-index:30;
    will-change:transform; /* always its own layer, so its text is drawn the same way before and after the sheet is rebuilt */
    display:flex;align-items:center;gap:12px;flex-wrap:wrap;
    margin-top:22px;padding:13px 16px; /* 13 + 29 (the buttons) + 13 = a 55px bar */
    background:var(--panel);border-radius:8px!important; /* same corners as .skills-box (8px) */
    box-shadow:0 0 0 rgba(0,0,0,0);transition:box-shadow .2s ease; /* no shadow while the bar rests in its own place under the sheet */
  }
  /* shadow only while the bar is floating over the sheet (stuck to the bottom of the screen); index.html toggles .is-stuck on scroll */
  .bottom-bar.is-stuck{box-shadow:0 4px 16px rgba(0,0,0,.35)}
  .bb-btn{
    display:inline-flex;align-items:center;gap:7px;box-sizing:border-box;height:29px;padding:0 14px;line-height:1;border:none;border-radius:6px!important; /* fixed height: does not depend on the font's line height. 6px in the sheet's 82% zoom = 8px on screen, the same corners as .btn-add */
    background:var(--gold);color:#1a1405;font:600 13px/1 'Segoe UI',system-ui,sans-serif;cursor:pointer;white-space:nowrap;
    transition:background-color .12s,transform .12s;
  }
  :root[data-theme="light"] .bb-btn{color:#fff}
  .bb-btn svg{width:14px;height:14px;fill:currentColor;stroke:none;flex:0 0 auto}
  .bb-btn:hover{background:var(--gold-soft)}
  .bb-btn:active{transform:translateY(1px)}
  .bb-btn:focus-visible,.bar-settings:focus-visible{outline:2px solid var(--gold-soft);outline-offset:2px}
  .bb-end{margin-left:auto;display:flex;align-items:center;gap:8px}
  .bar-settings{
    display:inline-flex;align-items:center;gap:7px;box-sizing:border-box;height:29px;min-width:104px;justify-content:center;padding:0 14px;line-height:1;border-radius:6px!important; /* same height, padding and corners as the rest buttons; min-width brings it close to their width */
    border:1px solid var(--line);background:transparent;color:var(--gold-soft);
    font:600 13px/1 'Segoe UI',system-ui,sans-serif;cursor:pointer;white-space:nowrap;transition:background-color .12s,color .12s;
  }
  .bar-settings svg{width:14px;height:14px;stroke:currentColor;fill:none;flex:0 0 auto}
  .bar-settings:hover{background:var(--gold);color:#1a1405;border-color:var(--gold)}
  /* the light theme's own palette is too pale for the Settings label on the bar (about 2.6:1), so it uses its darker ink (5.6:1) */
  :root[data-theme="light"] .bar-settings{color:var(--gold)}
  :root[data-theme="light"] .bar-settings:hover{color:#fff}
  /* phones: the buttons tighten, and below 400px Settings shows only its icon */
  @media (max-width:640px){
    .bottom-bar{gap:8px;padding:11px 12px}
    .bb-btn{padding:0 11px}
  }
  @media (max-width:400px){
    .bar-settings span{display:none}
    .bar-settings{padding:0 9px;min-width:0}
  }
  /* left and middle columns run narrower — keep their inner two-col grids single-column */
  .col-left .rows,.col-mid .rows{grid-template-columns:1fr}
  .col-left .track-grid{grid-template-columns:1fr}
  .insp-grid{grid-template-columns:1fr !important}
  .insp-box .track-row{padding:6px 0}

  /* ---- tabbed panel (right column) — vertical icon rail docked outside the card,
     flush with the top of the active tab panel ---- */
     .tabpanel{display:flex;flex-direction:column;flex:1;min-width:0;position:relative}
       .main-tabs{
         position:absolute;top:0;right:-45px;
         display:flex;flex-direction:column;gap:10px;
         border:none;margin:0;padding:0;
       }
       .main-tab{
         width:38px;height:38px;flex:0 0 auto;padding:0;
         display:flex;align-items:center;justify-content:center;cursor:pointer;
         background:transparent;border:none;color:var(--ink-faint);
         transition:color .12s,transform .12s;
       }
       .main-tab svg{width:16px;height:16px;stroke:currentColor;fill:none}
       .main-tab:hover{color:var(--gold-soft);transform:scale(1.15)}
       .main-tab.active{background:transparent;color:var(--gold)}
       .main-tab:focus-visible{outline:2px solid var(--gold-soft);outline-offset:2px}
     @media (max-width:760px){
       .main-tabs{position:static;flex-direction:row;flex-wrap:wrap;margin-bottom:16px}
     }
     .tab-body{display:none}
     .tab-body.active{
       display:flex;flex-direction:column;flex:1;min-width:0;
       background:color-mix(in srgb, var(--panel) var(--panel-alpha), transparent);border-radius:14px;padding:24px 26px;
     }
  /* blocks inside a tab don't get their own box — they're spaced sections of the one tab panel */
  .tab-body section.block{
    background:transparent;border:none;border-radius:0;padding:0;margin-bottom:33px;
  }
  .tab-body section.block:last-child{margin-bottom:0}
  /* Tracking: extra space away from the section above, tighter title-to-content gap */
  .tracking-box{margin-top:28px}
  .tracking-box h2{margin-bottom:9px}
  /* the Home top row (HP | Conditions) and spell pair keep their spacing, no nested boxes */
  .tab-body .home-top > section.block{margin-bottom:0}
  /* inside a tab, the tracking grid can use two columns again (wide area) */
  .tab-body .track-grid{grid-template-columns:1fr 1fr}
  @media (max-width:560px){.tab-body .track-grid{grid-template-columns:1fr}}
  /* Home tab: HP box (A) and Conditions box (B) side by side, Tracking (C) full-width below */
  /* ===== Home tab: top row — vitals box (A) + Conditions box (B) ===== */
  .home-top{display:grid;grid-template-columns:1fr 1.1fr;gap:27px;align-items:stretch}
  .home-top > section.block{margin-bottom:22px;min-width:0}
  @media (max-width:820px){.home-top{grid-template-columns:1fr}}

  /* combined vitals box: HP on top, hit dice + death saves below */
  .vitals-box{display:flex;flex-direction:column}
  .vitals-box .hp-block{padding-bottom:18px;margin-bottom:18px}

  /* inside the vitals box, hit dice + death saves always sit side by side */
  .vitals-box .pair{grid-template-columns:1fr 1.2fr;margin-bottom:0}
  .vitals-box .pair > .sub-block{margin-bottom:0}
  .vitals-box .pair .ds-standalone{padding-left:22px}

  /* ===== shared block/pair primitives (used across other tabs too) ===== */
  section.block{
    background:color-mix(in srgb, var(--panel) var(--panel-alpha), transparent);border:1px solid transparent;border-radius:14px;
    padding:18px 20px;margin-bottom:22px;
  }
  .sub-block{background:transparent;border:none;padding:0}
  .pair{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
  .pair > section.block{margin-bottom:22px}
  @media (max-width:640px){.pair{grid-template-columns:1fr;gap:0}}

  /* passive senses */
  .passives{display:flex;flex-direction:column;margin-top:4px}
  .passive{
    display:flex;align-items:center;justify-content:space-between;
    padding:3px 2px;
  }
  .passive .plab{font-family:'Segoe UI',sans-serif;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-dim)}
  .passive .pval{font-size:20px;font-weight:600;color:var(--gold-soft)}

  /* tracking */
  .track-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 32px}
  @media (max-width:560px){.track-grid{grid-template-columns:1fr}}
  .track-row{
    display:flex;align-items:center;gap:14px;flex-wrap:wrap;
    padding:11px 0;min-height:56px;
  }
  .track-info{display:flex;flex-direction:column;justify-content:center;min-width:140px;flex:1;min-height:34px}
  .track-name{font-family:'Segoe UI',sans-serif;font-size:15px;color:var(--ink)}
  .track-restore{font-family:'Segoe UI',sans-serif;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);margin-top:2px}
  .track-dots{display:flex;gap:7px;flex-wrap:wrap}
  .track-row.wrap-dots{row-gap:6px}
  .track-row.wrap-dots .track-info{order:1}
  .track-row.wrap-dots .track-count{order:2}
  .track-row.wrap-dots .track-dots{order:3;flex:1 1 100%}
  .use-dot{
    width:19px;height:19px;border-radius:50%;cursor:pointer;padding:0;
    background:var(--gold);border:1px solid var(--gold);transition:all .12s;
  }
  .use-dot:hover{filter:brightness(1.1)}
  .use-dot.spent{background:transparent;border-color:var(--ink-faint)}
  .use-dot:focus-visible{outline:2px solid var(--gold-soft);outline-offset:2px}
  .track-count{font-family:'Segoe UI',sans-serif;font-size:14px;color:var(--ink-dim);min-width:20px;text-align:right}
  .track-count .tc-avail{color:var(--gold-soft);font-size:14px}
  .track-special{font-family:'Segoe UI',sans-serif;font-size:12px;font-style:italic;color:var(--ink-dim);text-align:right;max-width:55%}
  .track-stepper{display:flex;align-items:center;gap:5px}
  .ts-btn{
    font-family:'Segoe UI',sans-serif;font-size:18px;font-weight:700;cursor:pointer;
    width:30px;height:30px;border-radius:7px;border:0px solid var(--line);background:none;
    line-height:1;transition:all .12s;display:flex;align-items:center;justify-content:center;
  }
  .ts-minus{color:var(--danger)}
  .ts-minus:hover{border-color:var(--danger);transform:scale(1.25)}
  .ts-plus{color:var(--gold-soft);gap:0px;}
  .ts-plus:hover{border-color:var(--gold-soft);transform:scale(1.25)}
  .ts-cur{font-family:'Segoe UI',sans-serif;font-size:14px;color:var(--ink-dim);min-width:44px;text-align:center}
  .ts-cur .tc-avail{font-size:14px;color:var(--gold-soft);font-family:'Segoe UI',sans-serif;}

  /* interactive hit points */
  .hp-main{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
  .hp-btn{
    font-family:'Segoe UI',sans-serif;font-size:15px;font-weight:600;cursor:pointer;
    min-width:46px;height:44px;border-radius:9px;border:1px solid var(--line);transition:all .12s;
  }
  .hp-dmg{background:var(--panel-2);color:var(--danger)}
  .hp-dmg:hover{border-color:var(--danger)}
  .hp-heal{background:var(--panel-2);color:var(--green)}
  .hp-heal:hover{border-color:var(--green)}
  .hp-btn:focus-visible{outline:2px solid var(--gold-soft);outline-offset:2px}
  .hp-bar{height:8px;background:var(--panel-2);border-radius:6px;overflow:hidden;border:1px solid var(--line)}
  .hp-fill{height:100%;width:100%;background:var(--green);transition:width .2s,background .2s}
  .hp-fill.mid{background:var(--gold)}
  .hp-fill.low{background:var(--danger)}
  /* HP: big number on top, input boxes with labels below */
  .hp-stats{display:flex;align-items:flex-start;gap:0px 20px;justify-content:center;flex-wrap:wrap}
  .hp-bignum{order:-1;flex-basis:100%;text-align:center;margin-bottom:0px}
  .hp-bignum .hp-cur{font-size:46px;font-weight:600;color:var(--green);line-height:1}
  .hp-bignum .hp-slash{font-size:22px;color:var(--ink-faint);font-weight:400}
  .hp-stat{display:flex;flex-direction:column;align-items:center;gap:6px}
  .hp-stat-lab{font-family:'Segoe UI',sans-serif;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
  .formula-lab{color:var(--green)}
  .hp-cur-wrap{display:flex;align-items:center}
  .hp-adjust{
      width:58px;height:44px;text-align:center;font-size:18px;font-weight:600;
      background:none;color:var(--ink);border:none;border-radius:9px;
      font-family:'Segoe UI',sans-serif;
    }
    .hp-adjust:focus{outline:none;box-shadow:0 0 0 1px var(--gold-soft)}
    .hp-adjust::placeholder{color:var(--ink-faint)}
    .hp-adjust::-webkit-outer-spin-button,
    .hp-adjust::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
    .hp-adjust{-moz-appearance:textfield}
    .temp-input{
      width:58px;height:44px;text-align:center;font-size:18px;font-weight:600;
      background:none;color:var(--steel);border:none;border-radius:9px;
      font-family:'Segoe UI',sans-serif;
    }
    .temp-input::-webkit-outer-spin-button,
    .temp-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
    .temp-input{-moz-appearance:textfield}
  .temp-input:focus{outline:none;box-shadow:0 0 0 2px var(--steel)}
  /* hit dice box */
  .hd-main{display:flex;align-items:center;justify-content:center;gap:10px;padding:5px 0}
  .hd-cur{font-size:44px;font-weight:600;color:var(--ink);line-height:1;min-width:60px;text-align:center}
  .hd-btn{
    font-family:'Segoe UI',sans-serif;font-size:28px;font-weight:700;cursor:pointer;
    width:44px;height:44px;border-radius:9px;border:1px solid var(--line);background:var(--panel-2);
    line-height:1;transition:all .12s;display:flex;align-items:center;justify-content:center;
  }
  /* the + and − are drawn with bars instead of font glyphs (glyphs sit off-centre in their line box), so the zoom grows from the true middle */
  .hd-btn{position:relative;font-size:0;transform-origin:50% 50%}
  .hd-btn::before,.hd-btn::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:3px;border-radius:2px;background:currentColor;transform:translate(-50%,-50%)}
  .hd-minus::after{display:none}
  .hd-plus::after{width:3px;height:16px}
  .hd-minus{color:var(--danger)}
  .hd-minus:hover{border-color:var(--danger);transform:scale(1.25)}
  .hd-plus{color:var(--green)}
  .hd-plus:hover{border-color:var(--green);transform:scale(1.25)}
  .hd-btn:focus-visible{outline:2px solid var(--gold-soft);outline-offset:2px}
  /* make hit dice + death saves boxes equal height */
  .pair:has(.hd-box){align-items:stretch}
  .hd-box, .pair .ds-standalone{display:flex;flex-direction:column;min-width:0}
  .hd-box .hd-main{flex:1}
  .ds-standalone .ds-groups{display:flex;flex-direction:row;gap:20px;justify-content:center;align-items:center;flex:1}
  /* the pips row is what gets centred, on the same line as the - 16 + counter; the Success/Failure label hangs above it,
     so the two boxes read as one row instead of the pips sitting lower than the number */
  .ds-standalone .ds-group{position:relative}
  .ds-standalone .ds-lab{position:absolute;bottom:calc(100% + 5px);left:0;right:0;text-align:center;white-space:nowrap;line-height:1}
  .hd-box .hd-main {
    padding: 0;
    align-items: center;
    transform: translateY(-5px);
    flex: 1;
  }
  .ds-pips{align-items:center}
  /* standalone death saves box */
  .ds-group{display:flex;flex-direction:column;align-items:center;gap:5px}
  .ds-lab{font-family:'Segoe UI',sans-serif;font-size:10px;letter-spacing:.1em;text-transform:uppercase}
  .ds-lab.success{color:var(--green)}
  .ds-lab.failure{color:var(--danger)}
  .ds-pips{display:flex;gap:7px}
  .ds-pip{
    width:15px;height:15px;border-radius:50%;cursor:pointer;padding:0;
    background:transparent;border:1px solid var(--ink-faint);transition:all .12s;
  }
  .ds-pip.success.on{background:var(--green);border-color:var(--green)}
  .ds-pip.failure.on{background:var(--danger);border-color:var(--danger)}
  .ds-pip:hover{border-color:var(--ink-dim)}
  .ds-pip:focus-visible{outline:2px solid var(--gold-soft);outline-offset:2px}
  /* conditions + resistances/immunities */
  .cond-wrap{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px}
  .cond-chip{
    font-family:'Segoe UI',sans-serif;font-size:12.5px;cursor:pointer;
    background:var(--panel-2);color:var(--ink-dim);border:1px solid var(--line);border-radius:999px;
    padding:5px 12px;transition:all .12s;
  }
  .cond-chip:hover{color:var(--ink);border-color:var(--gold-soft)}
  .cond-chip.on{background:var(--danger);color:#fff;border-color:var(--danger)}
  .def-head{margin-top:16px}
  .def-wrap{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px;min-height:4px}
  .def-chip{
    display:inline-flex;align-items:center;gap:6px;
    font-family:'Segoe UI',sans-serif;font-size:12.5px;
    background:var(--panel-2);color:var(--ink-dim);border:1px solid var(--line);border-radius:999px;
    padding:5px 12px;transition:all .12s;
  }
  .def-chip:hover{color:var(--ink);border-color:var(--gold-soft)}
  h2{
    font-family:'Segoe UI',sans-serif;
    font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--coffee);
    padding-bottom:10px;margin-bottom:14px;border-bottom:1px solid var(--line);
    display:flex;justify-content:space-between;align-items:baseline;
  }
  h2 .meta{font-family:'Segoe UI',sans-serif;color:var(--ink-faint);font-size:11px;letter-spacing:.06em}

  /* skills legend pinned to the bottom of the Skills box, centered */
  .skills-box .rows{flex:0 0 auto}
  .skills-legend{
    margin-top:auto;padding-top:16px;text-align:center;
    font-family:'Segoe UI',sans-serif;
    font-size:11px;letter-spacing:.06em;color:var(--ink-faint);
  }

  /* skills / saves */
  .rows{display:grid;grid-template-columns:1fr 1fr;gap:2px 26px}
  @media (max-width:520px){.rows{grid-template-columns:1fr}}
  .row{
    display:flex;align-items:center;gap:8px;
    padding:6px 0;border-bottom:1px solid var(--line);
    font-family:'Segoe UI',sans-serif;font-size:13.5px;
  }
  .dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;border:1px solid var(--ink-faint)}
  .dot.prof{background:var(--gold);border-color:var(--gold)}
  .dot.expert{background:var(--steel);border-color:var(--steel);box-shadow:0 0 0 2px rgba(91,143,176,.25)}
  .dot.half{background:linear-gradient(90deg,var(--gold) 50%,transparent 50%)}
  .row .rn{color:var(--ink);flex:1}
  .row .rn-glow{color:var(--steel);text-shadow:0 0 6px var(--steel),0 0 14px rgba(91,143,176,.5);font-weight:600}
  .row .ra{color:var(--ink-faint);font-size:11px;text-transform:uppercase;letter-spacing:.08em;width:26px}
  .row .rv{color:var(--gold-soft);font-weight:600;min-width:30px;text-align:right}

  .pills{display:flex;flex-wrap:wrap;gap:7px}
  .pill{
    font-family:'Segoe UI',sans-serif;font-size:12.5px;
    background:var(--panel-2);border:1px solid var(--line);border-radius:999px;
    padding:5px 12px;color:var(--ink-dim);
  }
  .pill b{color:var(--ink);font-weight:600}

  /* proficiencies & languages — plain labeled lines (no rounded box) */
  .prof-lines{display:flex;flex-direction:column}
  .prof-columns{display:grid;grid-template-columns:1fr 1fr;gap:0 28px}
  .prof-line{
    display:grid;grid-template-columns:64px 1fr;gap:10px;align-items:baseline;
    padding:6px 0;
    font-family:'Segoe UI',sans-serif;font-size:13px;line-height:1.45;
  }
  .prof-lab{
    font-size:10px;letter-spacing:.08em;text-transform:uppercase;
    color:var(--gold);
  }
  .prof-val{color:var(--ink-dim);font-family:'Segoe UI',sans-serif;}

  /* spell slots */
  .slots{display:flex;flex-wrap:wrap;gap:12px}
  .slot{
    background:var(--panel-2);border:none;border-radius:50%;
    padding:10px 14px;text-align:center;min-width:70px;
  }

  .slot .lv{font-family:'Segoe UI',sans-serif;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
  .slot-pips{display:flex;gap:5px;justify-content:center;flex-wrap:wrap;margin-top:6px}
  .slot-pip{
    width:14px !important;
    height:14px !important;
    min-width:14px !important;
    min-height:14px !important;
    padding:0 !important;
    border-radius:50% !important;
    box-sizing:border-box;
    background:var(--gold);border:1px solid var(--gold);transition:all .12s;
    cursor:pointer;
  }
  .slot-pip:hover{filter:brightness(1.12)}
  .slot-pip.spent{background:transparent;border-color:var(--ink-faint)}
  .slot-pip:focus-visible{outline:2px solid var(--gold-soft);outline-offset:2px}
  .dc-line{font-family:'Segoe UI',sans-serif;font-size:13px;color:var(--ink-dim);margin-bottom:14px}
  .dc-line b{color:var(--steel);font-weight:600}

  /* spell list */
  .spell-group{margin-bottom:16px}
  .spell-group:last-child{margin-bottom:0}
  .spell-group-head{
    font-family:'Segoe UI',sans-serif;font-size:12px;
    letter-spacing:.14em;text-transform:uppercase;color:var(--steel);
    margin:4px 0 4px;display:flex;align-items:center;gap:8px;
  }
  .sg-count{color:var(--ink-faint);font-size:11px}
  .feat.spell summary .sname{color:var(--ink);font-weight:600;overflow-wrap:break-word}
  /* unprepared spells are dimmed; prepared keep normal color */
  .feat.spell.unprepared summary .sname{color:var(--ink-faint)}
  .stag{
    font-family:'Segoe UI',sans-serif;font-size:9px;
    letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);
    border:1px solid var(--line);border-radius:2px;padding:2px 6px;margin-left:6px;
  }
  /* tag group floated right; spell title text wraps around it */
  .feat.spell summary .stag-group{float:right;margin-left:8px;display:inline-flex;flex-wrap:wrap;gap:0;align-items:center}
  /* "always prepared" pill, sits to the left of the spell name */
  .stag-prep{
    font-family:'Segoe UI',sans-serif;font-size:9px;font-weight:700;
    color:var(--bg);background:var(--gold);border:1px solid var(--gold);
    border-radius:999px;padding:1px 6px;margin-right:6px;
    display:inline-block;vertical-align:middle;
  }
  .stag.conc{color:var(--steel);border-color:var(--steel)}
  .stag.act-bonus{color:var(--green);border-color:var(--green)}
  .stag.act-react{color:var(--gold-soft);border-color:var(--gold-soft)}
  .feat.spell summary{overflow:hidden}
  .spell-meta{
    font-family:'Segoe UI',sans-serif;font-size:12px;
    color:var(--ink-faint);margin:0 0 8px;line-height:1.7;
    overflow-wrap:anywhere;word-break:break-word;
    list-style:none;padding:0;
  }
  .spell-meta li{padding:1px 0}
  .spell-meta b{color:var(--ink-dim);font-weight:600}
  .feat .body, .spell-items, .lvl-panel, .lvl-panels{min-width:0}
  .feat .body{overflow-wrap:anywhere}

  /* two-box spell layout: cantrips | leveled-with-tabs */
  .spell-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:27px;align-items:start}
  @media (max-width:640px){.spell-pair{grid-template-columns:1fr}}
  .spellbox{display:flex;flex-direction:column;margin-bottom:22px;min-width:0}
  /* merged spellcasting summary at top of the cantrips box */
  .spellcast-summary{
    background:var(--panel-2);border:1px solid var(--line);border-radius:10px;
    padding:12px 14px;margin-bottom:16px;
  }
  .sc-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
  .sc-title{font-family:'Segoe UI',sans-serif;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
  .sc-ability{font-family:'Segoe UI',sans-serif;font-size:11px;letter-spacing:.06em;color:var(--ink-faint)}
  .spellcast-summary .dc-line{margin-bottom:5px}
  .spellcast-summary .slots{gap:8px}
  .spellcast-summary .slot{min-width:56px;padding:8px 10px;}
  .cantrip-head{margin-top:2px}

  /* Actions tab (default) */
  .tab-body section.block.sc-summary{margin-bottom:0}

  /* Spells tab: gap between the spell slots and the divider below */
  .tab-body:has(.spell-pair) section.block.sc-summary{margin-bottom:20px}

  .spell-items{display:flex;flex-direction:column}
  .lvl-panels{flex:1}
  .lvl-panel{display:none}
  /* switching spell levels: the old panel fades out (JS adds .fade-out), then the new one fades in */
  .lvl-panel.active{display:block;animation:lvlFadeIn .18s ease}
  .lvl-panel.active.fade-out{opacity:0;animation:none;transition:opacity .15s ease}
  @keyframes lvlFadeIn{from{opacity:0}to{opacity:1}}
  @media (prefers-reduced-motion:reduce){.lvl-panel.active{animation:none}.lvl-panel.active.fade-out{transition:none}}
  .lvl-tabs{
    display:flex;gap:8px;flex-wrap:wrap;
    margin-top:0px;padding-top:5px;border-top:0px;
  }
  .lvl-tab{
    font-family:'Segoe UI',sans-serif;font-size:15px;font-weight:600;
    width:38px;height:38px;border-radius:9px;cursor:pointer;
    background:var(--panel-2);color:var(--ink-dim);
    border:0px;transition:all .12s;
  }
  .lvl-tab:hover{color:var(--ink);border-color:var(--gold-soft)}
  .lvl-tab.active{background:var(--gold);color:#1a1405;border-color:var(--gold)}
  .lvl-tab:focus-visible{outline:2px solid var(--gold-soft);outline-offset:2px}

  /* features */
  .two-col{display:grid;grid-template-columns:1fr 1fr;gap:0 32px;align-items:start}
  .two-col > *{min-width:0}
  @media (max-width:640px){.two-col{grid-template-columns:1fr;gap:0}}
  .feat{padding:2px 0}
  .feat summary{
    cursor:pointer;list-style:none;padding:10px 0 10px 22px; /* left padding = +/- icon width + gap, so wrapped title lines line up with the first line */
    font-size:13px;color:var(--ink);
    overflow:hidden; /* clearfix: lets this row's height include the floated icon/tag */
  }
  .feat summary::-webkit-details-marker{display:none}
  .feat summary::before{
    content:"+";float:left;margin-left:-22px;margin-right:8px; /* sits in the summary's left padding */
    font-family:'Segoe UI',sans-serif;color:var(--gold);
    font-size:13px;width:14px;text-align:center;transition:transform .15s;
    position:relative;top:-3px;
  }
  .feat[open] summary::before{content:"\2013"}

  .feat summary .fname,
  .feat summary .iname{
    overflow-wrap:break-word;
  }

  .feat .tag{
    font-family:'Segoe UI',sans-serif;
    font-size:9px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--ink-faint);
    border:1px solid var(--line);
    border-radius:2px;
    padding:2px 7px;
    float:right;
    margin-left:8px;
    white-space:nowrap;

  }

  .feat .body{
    padding:0 0 14px 24px;color:var(--ink-dim);font-size:14px;line-height:1.6;
    font-family:"Segoe UI",system-ui,sans-serif;
  }
  .feat .body p{margin-bottom:8px}
  .feat .body a{color:var(--steel);text-decoration:none;border-bottom:1px dotted var(--steel)}
  .feat .body table{border-collapse:collapse;width:100%;margin:6px 0 12px;font-size:13px}
  .feat .body th,.feat .body td{border:1px solid var(--line);padding:5px 9px;text-align:left;vertical-align:top}
  .feat .body th{background:var(--panel-2);color:var(--ink);font-weight:600}

  /* reference tab (rules glossary) */
  .ref-search{display:flex;align-items:center;gap:12px;margin-bottom:16px}
  .ref-input {
    flex: 1;
    min-width: 0;
    -webkit-appearance: none;
    appearance: none;
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-size: 14px;
    color: var(--ink);
    background: var(--panel-2);
    border: 0;
    border-radius: 8px !important;
    padding: 9px 12px;
    outline: none;
    color-scheme: dark;
    overflow: hidden;
  }
  html[data-theme="light"] .ref-input{color-scheme:light}
  .ref-input::placeholder{color:var(--ink-faint)}
  .ref-input:focus{border-color:var(--gold)}
  .ref-count{font-family:'Segoe UI',sans-serif;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);white-space:nowrap}
  .ref-empty{padding:30px 20px}
  .ref-item summary .fname{font-family:'Segoe UI',system-ui,sans-serif}
  .ref-body{overflow-x:auto}
  .ref-body table{border-collapse:collapse;width:100%;margin:6px 0 10px;font-size:13px}
  .ref-body th,.ref-body td{border:1px solid var(--line);padding:5px 8px;text-align:left;vertical-align:top;overflow-wrap:normal;word-break:normal}
  .ref-body th{background:var(--panel-2);color:var(--ink);font-weight:600}
  .ref-body ul,.ref-body ol{margin:0 0 8px 20px}
  .ref-body li{margin-bottom:3px}

  /* items */
  .item{border-bottom:1px solid var(--line);padding:12px 0}
  .item:last-child{border-bottom:none}
  .item .head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
  .item .iname{font-size:15px;color:var(--ink);font-weight:600}
  .item .itype{font-family:'Segoe UI',sans-serif;font-size:11px;color:var(--ink-faint);letter-spacing:.06em}
  .item .eq, .feat summary .eq{font-family:'Segoe UI',sans-serif;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:#1a1405;background:var(--gold);border:1px solid var(--gold);border-radius:2px;padding:2px 6px;margin-left:2px}
  .feat summary .att{font-family:'Segoe UI',sans-serif;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--steel);border:1px solid var(--steel);border-radius:2px;padding:2px 6px;margin-left:2px}
  .feat summary .att.attq{color:var(--steel);background:transparent;border:1px solid var(--steel)}
  /* inventory pills (Equipped / Attuned / Attunable / type tag) grouped and floated right, like the spell tag group */
  .feat summary .inv-tags{float:right;margin-left:8px;display:inline-flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:6px}
  .feat summary .inv-tags .eq,.feat summary .inv-tags .att,.feat summary .inv-tags .tag{float:none;margin-left:0}
  /* inventory rows: name on the left, pills on the right. When the name is too long to leave room for the pills, the pill group wraps onto its own line under the name, left-aligned. */
  .feat.inv-item summary{display:flex;align-items:flex-start;padding-left:0}
  .feat.inv-item summary::before{float:none;flex:0 0 14px;margin-left:0}
  .feat.inv-item .inv-row{flex:1 1 auto;min-width:0;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 8px}
  .feat.inv-item summary .inv-tags{float:none;margin-left:0;justify-content:flex-start}
  .feat summary .atk-hit{font-family:'Segoe UI',sans-serif;font-size:11px;font-weight:600;color:var(--green);margin-left:8px;white-space:nowrap}
  .feat summary .atk-dmg{font-family:'Segoe UI',sans-serif;font-size:11px;color:var(--gold-soft);margin-left:10px;white-space:nowrap}
  .action-group{margin-bottom:22px}
  .action-group:last-child{margin-bottom:0}
  .action-head{
    font-family:'Segoe UI',sans-serif;font-size:11px;font-weight:600;
    letter-spacing:.14em;text-transform:uppercase;color:var(--gold-soft);
    padding:4px 0 6px;margin-bottom:4px;border-bottom:1px solid var(--line);
  }
  .inv-group{margin-bottom:22px}
  .inv-group:last-child{margin-bottom:0}
  .inv-cat{
    font-family:'Segoe UI',sans-serif;font-size:11px;font-weight:600;
    letter-spacing:.14em;text-transform:uppercase;color:var(--gold-soft);
    padding:4px 0 6px;margin-bottom:4px;border-bottom:1px solid var(--line);
  }
  .item .idesc{color:var(--ink-dim);font-size:14px;margin-top:6px}
  .item .idesc p{margin-bottom:6px}

  .note-entry{padding:2px 0 14px}
  .note-entry:last-child{padding-bottom:0}
  .note-entry + .note-entry{border-top:1px solid var(--line);padding-top:14px}
  .note-title{
    font-family:'Segoe UI',sans-serif;
    font-size:13px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--gold-soft);font-weight:600;margin-bottom:8px;
  }
  .notes-body{color:var(--ink-dim);font-size:14px;line-height:1.6;font-family:"Segoe UI",system-ui,sans-serif;}
  .notes-body p{margin-bottom:10px}
  .notes-body a{color:var(--steel)}
  /* rich-text note elements */
  .note-h{color:var(--ink);font-weight:700;letter-spacing:.02em;margin:14px 0 8px;line-height:1.3;}
  .note-h:first-child{margin-top:0}
  h1.note-h{font-size:20px} h3.note-h{font-size:16px}
  h4.note-h,h5.note-h,h6.note-h{font-size:14px}
  .note-hr{border:none;border-top:1px solid var(--line);margin:16px 0;}
  /* catch-all: any markdown-rendered hr (___) in the live preview gets a thin line */
  #sheet hr{border:none;border-top:1px solid var(--line);margin:16px 0;}
  /* markdown bold rendered in the live preview */
  #sheet strong,#sheet b{color:#fff;font-weight:700;}
  :root[data-theme="light"] #sheet strong,
  :root[data-theme="light"] #sheet b{color:var(--danger);}
  :root[data-theme="dark"] #sheet strong,
  :root[data-theme="dark"] #sheet b{color:var(--gold);}
  .notes-body ul,.notes-body ol{margin:0 0 10px 22px;}
  .notes-body li{margin-bottom:4px;}
  .notes-body li p{margin-bottom:2px;}
  .note-table{border-collapse:collapse;width:100%;margin:10px 0;font-size:13px;}
  .note-table th,.note-table td{border:1px solid var(--line);padding:6px 10px;text-align:left;vertical-align:top;}
  .note-table th{background:var(--panel-2);color:var(--ink);font-weight:600;}

  .empty{color:var(--ink-faint);font-family:'Segoe UI',sans-serif;font-size:13px;text-align:center;padding:60px 20px}
  footer{margin-top:40px;text-align:center;font-family:'Segoe UI',sans-serif;font-size:11px;color:var(--ink-faint);letter-spacing:.04em}
  @media print{.loader{display:none}body{background:#fff;color:#000}}

  /* ---- theme toggle (night mode / light mode) ---- */
  /* a pill with a round thumb. The thumb slides to the active side and shows that mode's icon (sun left, moon right). */
  .theme-toggle{
    --trk-w:48px;--trk-h:26px;--inset:4px;
    --thumb:calc(var(--trk-h) - var(--inset)*2);
    position:relative;display:inline-grid;grid-template-columns:1fr 1fr;grid-template-rows:var(--trk-h);
    width:var(--trk-w);border:none;background:transparent;
  }
  /* the pill */
  .theme-toggle::before{
    content:"";position:absolute;top:0;left:0;
    width:var(--trk-w);height:var(--trk-h);box-sizing:border-box;border:1px solid var(--line);border-radius:999px!important;background:var(--panel-2);
  }
  /* the thumb: the same two colors the active button used to have */
  .theme-toggle::after{
    content:"";position:absolute;top:var(--inset);left:var(--inset);
    width:var(--thumb);height:var(--thumb);border-radius:999px!important;background:#872d25;
    transition:transform .22s cubic-bezier(.22,1,.36,1),background-color .22s ease;
  }
  .theme-toggle:has(.theme-btn[data-theme-choice="dark"].active)::after{
    transform:translateX(calc(var(--trk-w) - var(--thumb) - var(--inset)*2));background:#2a3444;
  }
  .theme-toggle:has(.theme-btn:focus-visible)::before{outline:2px solid currentColor;outline-offset:2px}
  /* each button covers its half of the pill, so clicking either side switches to it */
  .theme-btn{
    position:relative;z-index:1;display:block;
    margin:0;padding:0;border:0px;background:transparent;
    font-size:0;line-height:0;cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .theme-btn:focus-visible{outline:none}
  /* the icon sits exactly on the thumb's resting spot for its side, and only the active one shows */
  .theme-btn::before{
    content:"";position:absolute;top:var(--inset);width:var(--thumb);height:var(--thumb);
    background:currentColor;opacity:0;transition:opacity .18s ease;
    -webkit-mask:var(--icon) center/62% no-repeat;mask:var(--icon) center/62% no-repeat;
  }
  .theme-btn.active::before{opacity:1}
  .theme-btn[data-theme-choice="light"]{grid-column:1;grid-row:1;color:#decdb5;--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41'/%3E%3C/svg%3E")}
  .theme-btn[data-theme-choice="light"]::before{left:var(--inset)}
  .theme-btn[data-theme-choice="dark"]{grid-column:2;grid-row:1;color:#e6ecf5;--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z'/%3E%3Cpath d='M20 3v4'/%3E%3Cpath d='M22 5h-4'/%3E%3C/svg%3E")}
  .theme-btn[data-theme-choice="dark"]::before{right:var(--inset)}

  /* ---- character profile pop-up (opened by clicking the portrait) ---- */
  .profile-modal-backdrop{
    position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:45;
    opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s;
  }
  .profile-modal-backdrop.open{opacity:1;visibility:visible}
  .profile-modal{
    position:fixed;top:50%;left:50%;
    transform:translate(-50%,-50%) scale(1);
    transform-origin:var(--tx,50%) var(--ty,50%);
    width:min(640px,92vw);max-height:100vh;
    background:var(--panel);border-radius:16px;
    z-index:46;box-shadow:0 20px 60px rgba(0,0,0,.5);
    display:flex;flex-direction:column;overflow:hidden;
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .18s ease,transform .28s cubic-bezier(.22,1,.36,1),visibility .28s;
  }
  .profile-modal.open{
    opacity:1;visibility:visible;pointer-events:auto;
    transform:translate(calc(-50% - -50px),calc(-50% - -150px)) scale(1);
  }
  .profile-modal-head{display:flex;justify-content:space-between;align-items:center;padding:16px 22px;border-bottom:1px solid var(--line);flex:0 0 auto}
  .profile-modal-title{font-family:'Segoe UI',sans-serif;font-size:13px;letter-spacing:.06em;color:var(--coffee)}
  .modal-close{background:transparent;border:none;color:var(--ink-dim);font-size:20px;line-height:1;cursor:pointer;padding:4px 6px;border-radius:6px}
  .modal-close:hover{color:var(--ink);background:var(--panel-2)}
  .profile-modal-intro{
    display:flex;align-items:center;gap:30px;
    padding:20px 26px 20px 22px;border-bottom:0px solid var(--line);flex:0 0 auto;
  }
  .profile-modal-portrait{
    width:112px;height:112px;flex:0 0 auto;border-radius:14px;
    object-fit:cover;background:var(--panel-2);
  }
  .profile-modal-quote{
    font-family:'Segoe UI',serif;font-style:italic;
    font-size:16px;line-height:1.5;color:var(--ink);min-width:0;
    flex:1 1 auto;text-align:left;text-indent:2.2em;
  }
  .profile-modal-quote-name{
    display:block;margin-top:6px;font-style:normal;font-size:12px;
    letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);
    text-align:right;text-indent:0;
  }
  .profile-modal-body{padding:20px 22px 24px;overflow-y:auto;flex:1 1 auto}
  .profile-modal-body section.block{background:transparent;border:none;border-radius:0;padding:0;margin-bottom:24px}
  .profile-modal-body section.block:last-child{margin-bottom:0}

  /* ============================================================
     Phones and tablets. These rules apply only to narrow windows or touch screens,
     except .md-table, which only changes anything when a table is wider than its card.
     ============================================================ */
  /* tables in notes, features and spells scroll sideways instead of squeezing their words apart (render.js md() adds the wrapper) */
  .md-table{max-width:100%;overflow-x:auto}
  .md-table > table{overflow-wrap:normal;word-break:normal}

  /* Tab icons: on touch tablets the rail beside the card ran past the right edge of the screen (it sits 45px outside the card,
     and the page only leaves about 24px there), which made the page wider than the screen. Touch tablets up to 1160px wide,
     and touch tablets with Settings open, get the same row above the card that phones use. Desktop with a mouse is unchanged. */
  @media (pointer:coarse) and (max-width:1160px){
    .main-tabs{position:static;flex-direction:row;flex-wrap:wrap;margin-bottom:16px}
  }
  @media (pointer:coarse) and (min-width:761px){
    body.settings-open .main-tabs{position:static;flex-direction:row;flex-wrap:wrap;margin-bottom:16px;
      display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:2px}
    body.settings-open .main-tab{width:auto;height:auto;min-height:46px;flex-direction:column;gap:4px;padding:6px 0}
    body.settings-open .main-tab-label{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
      font:600 10px/1.1 'Segoe UI',system-ui,sans-serif;letter-spacing:0}
  }

  /* tab names under the icons, shown only while the tabs are a row above the card */
  .main-tab-label{display:none}
  @media (max-width:760px),(pointer:coarse) and (max-width:1160px){
    .main-tabs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:2px}
    .main-tab{width:auto;height:auto;min-height:46px;flex-direction:column;gap:4px;padding:6px 0}
    .main-tab-label{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
      font:600 10px/1.1 'Segoe UI',system-ui,sans-serif;letter-spacing:0}
  }
  /* on narrow phones seven labels do not fit on one line: two rows of four */
  @media (max-width:439px){
    .main-tabs{grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr));row-gap:8px}
  }

  /* header, phones and touch tablets: each line takes the height it needs, so the species line sits just above the name
     (the fixed 56px name row left a gap above a 30px name) and wrapped lines no longer overlap */
  @media (max-width:640px),(pointer:coarse){
    .head-text{grid-template-rows:auto auto auto;row-gap:0}
    .head-text .eyebrow{margin-bottom:5px}
    .head-text h1{overflow-wrap:anywhere}
    .head-text .subline{margin-top:4px}
  }
  /* phones: the name scales down a little on narrow screens (30px at 400px wide, 24px at 320px), so long words fit whole */
  @media (max-width:640px){
    .head-text h1{font-size:clamp(24px,7.5vw,30px)}
  }
  /* touch tablets: the name keeps whole words. When a long name can't fit beside AC / Initiative / Speed / Vision,
     those move down to their own line (right-aligned) instead of squeezing the name into a narrow column. */
  @media (min-width:641px) and (pointer:coarse){
    .head-text{min-width:min-content}
    .head-text h1{overflow-wrap:normal}
    .head-vitals{margin-left:auto}
  }
  /* header vitals, phones and touch tablets: short labels (AC, INIT., SPD, VIS) and all four on one line */
  .vital .lab-short{display:none}
  @media (max-width:760px),(pointer:coarse){
    .vital .lab-full{display:none}
    .vital .lab-short{display:inline}
    .vitals{grid-template-columns:repeat(4,minmax(0,1fr))}
    .vital{padding:0 6px;grid-template-rows:var(--hrow1) var(--hrow2) minmax(var(--hrow3),auto)}   /* a two-line "darkvision · truesight" gets room */
  }
  /* Hit Dice above Death Saves on narrow phones */
  @media (max-width:480px){
    .vitals-box .pair{grid-template-columns:minmax(0,1fr);gap:22px}
    .vitals-box .pair .ds-standalone{padding-left:0}
    .vitals-box .pair .ds-standalone .ds-groups{padding-top:16px}   /* room for the Success / Failure labels above the pips */
  }
  /* profile pop-up: the appearance list is one column on phones */
  @media (max-width:560px){
    .profile-modal .prof-columns{grid-template-columns:minmax(0,1fr)}
  }

  /* touch screens keep the last-tapped control in its :hover state, so the hover zoom would stay on after a tap */
  @media (hover:none){
    .main-tab:hover,.ts-btn:hover,.hd-btn:hover{transform:none}
    .main-tab:not(.active):hover{color:var(--ink-faint)}
  }
  /* iOS zooms the page in on any field with text under 16px. The sheet is shown at 82%, so 16 / 0.82 = 19.6px reaches 16px on screen. */
  @media (pointer:coarse){
    .ref-input,.hp-adjust,.temp-input{font-size:19.6px}
  }

  /* Character profile pop-up on phones and touch tablets: it opened 50px right and 150px down from its place, which pushed the end
     of a long profile off the bottom of the screen. It now opens centred and is never taller than the visible screen (dvh: the
     area not covered by the browser's toolbars). Its content scrolls inside it. */
  @media (max-width:760px),(pointer:coarse){
    .profile-modal{left:50%!important;top:50%!important;max-height:calc(100vh - 32px)}
    .profile-modal.open{transform:translate(-50%,-50%) scale(1)}
  }
  @supports (height:100dvh){
    @media (max-width:760px),(pointer:coarse){.profile-modal{max-height:calc(100dvh - 32px)}}
  }
  /* smaller portrait and gap beside the quote, so the quote keeps a readable width on phones */
  @media (max-width:480px){
    .profile-modal-intro{gap:16px;padding:16px 18px}
    .profile-modal-portrait{width:80px;height:80px}
    .profile-modal-body{padding:16px 18px 20px}
  }

  /* Phones and touch tablets: after the header (name, AC, Initiative, Speed, Vision) the sheet runs in this order:
     ability scores, the tabs and the open tab, saving throws, skills, passive senses, then proficiencies & languages.
     The column wrappers step aside (display:contents) so their boxes can be ordered one after another; the page's HTML is unchanged.
     Touch tablets wider than 1040px keep the three-column layout, as does a desktop browser at any width. */
  @media (max-width:760px),(pointer:coarse) and (max-width:1040px){
    .grid3{display:flex;flex-direction:column;gap:22px}
    .grid3 .rail-pair,.grid3 .col-left,.grid3 .col-mid,.grid3 .col-right{display:contents}
    .grid3 .ability-band{order:1;margin-bottom:0;padding-bottom:0}
    .grid3 .tabpanel{order:2;flex:none}
    .col-left > .block:nth-child(1){order:3}                 /* saving throws */
    .col-mid > .skills-box{order:4;flex:none}                /* skills */
    .col-left > .block:nth-child(2){order:5}                 /* passive senses */
    .col-left > .block:nth-child(3){order:6}                 /* proficiencies & languages */
    .col-left > .block,.col-mid > .skills-box{flex:none;min-width:0}
  }
  /* with the full width to themselves, saving throws and skills use two columns again once there is room */
  @media (min-width:521px) and (max-width:760px),(min-width:521px) and (pointer:coarse) and (max-width:1040px){
    .col-left .rows,.col-mid .rows{grid-template-columns:1fr 1fr}
  }

  /* Tablets the width of an iPad mini to an iPad Pro in portrait (700 to 1040px): below the tabs, saving throws, passive senses
     and proficiencies share the left column and skills take the right column, as on the desktop sheet. Phones keep one column. */
  @media (pointer:coarse) and (min-width:700px) and (max-width:1040px){
    .grid3 .rail-pair{display:grid;order:3;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:stretch;align-self:stretch}
    .grid3 .col-left{display:flex;flex-direction:column;gap:22px;min-width:0}
    .grid3 .col-mid{display:flex;flex-direction:column;min-width:0}
    .col-left > .block:nth-child(n){order:0}
    .col-left > .block:last-child{flex:1}
    .col-mid > .skills-box{order:0;flex:1}
    .col-left .rows,.col-mid .rows{grid-template-columns:1fr}
  }
  /* touch tablets: the four vitals beside the name have room to be spaced out (comes after the phone rule above on purpose) */
  @media (min-width:641px) and (pointer:coarse){
    .vital{padding:0 16px}
  }

  /* ============================================================
     Phones (640px wide and under): the sheet and the Settings toolbar are shown at full size. Everywhere else they stay at 82%
     (#sheet, .loader zoom near the top of this file). The rules below re-tune the sizes that were set with the 82% in mind.
     ============================================================ */
  @media (max-width:640px){
    #sheet,.loader{zoom:1}
    .vital .val{font-size:clamp(24px,7.5vw,30px)}   /* four vitals still fit on one line at 320px */
  }
  @supports not (zoom:1){
    @media (max-width:640px){ #sheet,.loader{transform:none;width:auto} }
  }
  /* iOS zooms in on fields under 16px. At full size 16px is enough (the 19.6px above made up for the 82%). */
  @media (pointer:coarse) and (max-width:640px){
    .ref-input{font-size:16px}
    .hp-adjust,.temp-input{font-size:18px}
  }
  /* narrow phones, at full size: a little less padding inside the tab card, and headings that keep to one line */
  @media (max-width:400px){
    .tab-body.active{padding:18px 14px}
    h2 .meta{font-size:10px;letter-spacing:0}
    .hp-stats{gap:0 10px}
  }
  /* 360px and under (small Android phones, iPhone SE at 320px) */
  @media (max-width:360px){
    .head-text h1{font-size:22px}
    .portrait{width:64px;height:64px}
    .ability-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
    .abil{padding:10px 4px}
    .abil .name{font-size:8px;letter-spacing:.03em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .bottom-bar{gap:6px;padding:10px}
    .bb-btn{padding:0 8px;gap:5px;font-size:12px}
  }