/* Layout: an old PC dungeon screen. First-person view top left, party portraits in a 2×2 block on the
     right, movement pad and the floor under the view, and the message scroll along the bottom.
     Panels are chunky bevelled stone. Deliberately single-theme: always dark. */
  :root {
    color-scheme: dark;
    --void: #0b0c0f;
    --stone: #3b3e46;
    --stone-hi: #62666f;
    --stone-lo: #1f2126;
    --slot: #16171b;
    --parch: #ebdfc2;
    --muted: #a69f8d;
    --gold: #d9aa4b;
    --hp: #62b24e;
    --hp-low: #d4493b;
    --mp: #4d88d8;

    --display: "MedievalSharp", "Palatino Linotype", Georgia, serif;
    --body: "Crimson Pro", Georgia, "Times New Roman", serif;
    --pixel: "Pixelify Sans", "Courier New", ui-monospace, monospace;
  }
  * { box-sizing: border-box; }
  body {
    background: var(--void); color: var(--parch); font-family: var(--body); font-size: 17px; line-height: 1.45;
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
    padding-block: 12px 24px;
  }
  @media (min-width: 420px) { body { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); } }
  button { font: inherit; color: inherit; }
  :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

  .app { max-width: 1180px; margin: 0 auto; display: grid; gap: 10px; }
  .bevel {
    background: var(--stone);
    border: 3px solid; border-color: var(--stone-hi) var(--stone-lo) var(--stone-lo) var(--stone-hi);
  }
  .btn {
    background: var(--stone); border: 2px solid; border-color: var(--stone-hi) var(--stone-lo) var(--stone-lo) var(--stone-hi);
    padding: 4px 10px; cursor: pointer; font-family: var(--pixel); font-size: .85rem; color: var(--parch);
  }
  .btn:hover { color: var(--gold); }
  .btn:active, .btn.on { border-color: var(--stone-lo) var(--stone-hi) var(--stone-hi) var(--stone-lo); background: #34373e; }
  .btn:disabled { opacity: .45; cursor: not-allowed; }

  .bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; justify-content: space-between; padding: 6px 12px; }
  .bar__title { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
  .bar h1 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 1.9rem; line-height: 1; color: var(--gold); letter-spacing: .02em; }
  .bar__lvl { font-family: var(--pixel); font-size: .9rem; color: var(--muted); }
  .bar__btns { display: flex; flex-wrap: wrap; gap: 6px; }

  .main { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 10px; align-items: start; }
  @media (max-width: 960px) { .main { grid-template-columns: minmax(0, 1fr); } }
  .left, .right { display: grid; gap: 10px; min-width: 0; }

  .view-wrap { position: relative; padding: 6px; }
  .view-wrap canvas#view { width: 100%; aspect-ratio: 16 / 10; display: block; background: #000; cursor: pointer; image-rendering: auto; }
  #mapc { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); background: rgba(8,9,11,.94); }
  .overlay {
    position: absolute; inset: 6px; display: grid; place-items: center; text-align: center; padding: 20px;
    background: radial-gradient(ellipse at 50% 60%, rgba(40,26,12,.85), rgba(5,5,7,.96));
  }
  .overlay__box { max-width: 560px; display: grid; gap: 14px; justify-items: center; }
  .overlay h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(2.4rem, 7vw, 4rem); line-height: 1; color: var(--gold); text-shadow: 0 3px 0 #000; }
  .overlay p { margin: 0; color: #d7ccb2; max-width: 52ch; }
  .overlay .btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
  .overlay .btn { font-size: 1rem; padding: 8px 18px; }
  .overlay kbd, .help kbd { font-family: var(--pixel); font-size: .8rem; padding: 0 5px; border: 1px solid var(--stone-hi); background: var(--slot); }
  .help { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; text-align: left; font-size: .95rem; }
  .help dt { font-family: var(--pixel); color: var(--gold); font-size: .85rem; white-space: nowrap; }
  .help dd { margin: 0; color: #d7ccb2; }
  .toast {
    position: absolute; left: 50%; top: 18px; transform: translateX(-50%); max-width: calc(100% - 40px);
    padding: 6px 14px; background: rgba(10,10,12,.85); border: 1px solid var(--stone-hi); font-family: var(--pixel); font-size: .9rem;
    pointer-events: none; transition: opacity .3s; text-align: center;
  }

  .controls { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 10px; align-items: stretch; padding: 8px; }
  @media (max-width: 600px) { .controls { grid-template-columns: auto minmax(0, 1fr); } .floor { grid-column: 1 / -1; } }
  .compass { display: grid; place-items: center; align-content: center; gap: 2px; min-width: 74px; padding: 6px; background: var(--slot); border: 2px solid; border-color: var(--stone-lo) var(--stone-hi) var(--stone-hi) var(--stone-lo); }
  .compass b { font-family: var(--display); font-weight: 400; font-size: 2rem; line-height: 1; color: var(--gold); }
  .compass small { font-family: var(--pixel); font-size: .72rem; color: var(--muted); }
  .pad { display: grid; grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(2, 40px); gap: 4px; }
  .pad .btn { padding: 0; font-size: 1.1rem; touch-action: manipulation; }
  .floor { display: grid; gap: 6px; align-content: start; padding: 6px 8px; background: var(--slot); border: 2px solid; border-color: var(--stone-lo) var(--stone-hi) var(--stone-hi) var(--stone-lo); min-width: 0; }
  .floor__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-family: var(--pixel); font-size: .78rem; color: var(--muted); }
  .floor__row .label { min-width: 64px; }
  .floor__actions { display: flex; flex-wrap: wrap; gap: 6px; }
  .chest-tag { padding: 1px 7px; border: 1px solid #b08a3a; color: #d9b24a; }
  .ied__h { margin: 6px 0 0; font-family: var(--pixel); font-weight: 600; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
  .ied__chests { grid-template-columns: repeat(2, minmax(0, 200px)) !important; }
  .med__f input[type="color"] { padding: 2px; height: 34px; }

  .log { list-style: none; margin: 0; padding: 8px 12px; height: 132px; overflow-y: auto; font-family: var(--pixel); font-size: .88rem; line-height: 1.5; background: #101114; border: 2px solid; border-color: var(--stone-lo) var(--stone-hi) var(--stone-hi) var(--stone-lo); }
  .log li { color: #cfc6b0; }
  .log li.hit { color: #f0a090; }
  .log li.good { color: #a8d890; }
  .log li.magic { color: #9cc4f5; }
  .log li.gold { color: var(--gold); }
  .log li:last-child { color: #fff6df; }

  /* Party */
  .party { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 8px; }
  .rank { grid-column: 1 / -1; font-family: var(--pixel); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); display: flex; justify-content: space-between; }
  .card { position: relative; display: grid; gap: 5px; padding: 6px; background: #2b2d33; border: 2px solid; border-color: var(--stone-hi) var(--stone-lo) var(--stone-lo) var(--stone-hi); min-width: 0; }
  .card.hurt { animation: hurt .35s; }
  .card.healed { animation: healed .6s; }
  @keyframes healed { 30% { background: #2f5a30; } }
  .card.fx-ward { border-color: #d9aa4b; }
  .card.fx-shield { border-color: #78beff; }
  .card.fx-invis .portrait { opacity: .45; }
  .card__fx { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; min-height: 18px; }   /* kept even when empty, so a status doesn't move the hands under the mouse */
  .fx-tag { font-family: var(--pixel); font-size: .66rem; padding: 0 4px; color: #101114; background: #a69f8d; }
  .fx-tag--shield { background: #78beff; }
  .fx-tag--ward { background: #d9aa4b; }
  .fx-tag--invisible { background: #c8d2eb; }
  .fx-tag--poison { background: #78c850; }
  .fx-tag--slow { background: #5a8a40; }
  .fx-tag--cursed { background: #cd96ff; }
  .btn.card__pick { padding: 1px 7px; font-size: .7rem; color: #16171b; background: #d9aa4b; }
  .spelltest { position: fixed; z-index: 3; right: 8px; bottom: 8px; width: 214px; padding: 8px; display: grid; gap: 4px; background: #23252b; color: var(--parch, #e8dcbf); font-family: var(--pixel); font-size: .72rem; }
  .spelltest h3 { margin: 0; color: #d9aa4b; font-size: .85rem; }
  .spelltest label { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 4px; align-items: center; }
  .spelltest select { width: 100%; min-width: 0; font: inherit; }
  .spelltest__row { display: flex; flex-wrap: wrap; gap: 3px; }
  .spelltest .btn { padding: 1px 6px; font-size: .7rem; }
  @keyframes hurt { 30% { background: #6a2620; transform: translateX(-3px); } 60% { transform: translateX(3px); } }
  .card.dead .portrait { filter: grayscale(1) brightness(.45); }
  .card__top { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 7px; align-items: center; }
  .portrait { width: 52px; height: 52px; display: block; border: 2px solid var(--stone-lo); cursor: pointer; background: #000; }
  .card__name { display: flex; justify-content: space-between; gap: 4px; align-items: baseline; }
  .card__name { min-width: 0; }
  .card__name b { font-family: var(--display); font-weight: 400; font-size: 1.12rem; line-height: 1.1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .card__name small { font-family: var(--pixel); font-size: .68rem; color: var(--muted); white-space: nowrap; }
  .bars { display: grid; gap: 3px; margin-top: 3px; }
  .meter { position: relative; height: 11px; background: #0c0d10; border: 1px solid #000; }
  .meter i { position: absolute; inset: 0 auto 0 0; background: var(--hp); transition: width .25s; }
  .meter.low i { background: var(--hp-low); }
  .meter.mp i { background: var(--mp); }
  .meter span { position: absolute; inset: 0; font-family: var(--pixel); font-size: .62rem; line-height: 10px; text-align: center; color: #fff; text-shadow: 0 1px 0 #000; font-variant-numeric: tabular-nums; }
  .hands { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
  .hand {
    position: relative; height: 46px; display: grid; place-items: center; cursor: pointer; padding: 0;
    background: var(--slot); border: 2px solid; border-color: var(--stone-lo) var(--stone-hi) var(--stone-hi) var(--stone-lo); overflow: hidden;
  }
  .hand canvas { width: 40px; height: 40px; }
  .hand:hover { border-color: var(--gold); }
  .hand .cd { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: rgba(0,0,0,.65); pointer-events: none; }
  .hand .tag { position: absolute; top: 1px; left: 3px; font-family: var(--pixel); font-size: .58rem; color: var(--muted); }
  .card__tools { display: flex; gap: 4px; justify-content: flex-end; }
  .card__tools .btn { padding: 1px 7px; font-size: .7rem; }
  .pop { position: absolute; font-family: var(--pixel); font-size: 1.2rem; font-weight: 600; pointer-events: none; text-shadow: 0 2px 0 #000; animation: pop .9s ease-out forwards; }
  .pop.dmg { color: #ff8a70; } .pop.heal { color: #a8e890; }
  @keyframes pop { to { transform: translateY(-26px); opacity: 0; } }
  .spells { position: absolute; z-index: 5; left: 4px; right: 4px; top: 100%; margin-top: 4px; padding: 6px; display: grid; gap: 4px; background: #23252b; border: 2px solid var(--gold); box-shadow: 0 10px 24px rgba(0,0,0,.6); }
  .spells .btn { text-align: left; display: flex; justify-content: space-between; gap: 8px; font-size: .8rem; }
  .spells { max-height: 340px; overflow-y: auto; }
  .spells .btn.spells__pick { flex-wrap: wrap; }
  .spells--pick { min-width: 250px; }
  .card[data-i="1"] .spells--pick, .card[data-i="3"] .spells--pick { left: auto; right: 4px; }
  .spells__pick small { flex-basis: 100%; font-family: var(--pixel); font-size: .68rem; color: var(--muted); white-space: normal; }
  .spells p { margin: 0; font-family: var(--pixel); font-size: .72rem; color: var(--muted); }

  .pack { padding: 8px; display: grid; gap: 6px; }
  .pack__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-family: var(--pixel); font-size: .78rem; color: var(--muted); }
  .pack__head b { color: var(--parch); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: .72rem; }
  .pack__grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; }
  .slot { aspect-ratio: 1; display: grid; place-items: center; padding: 0; cursor: pointer; background: var(--slot); border: 2px solid; border-color: var(--stone-lo) var(--stone-hi) var(--stone-hi) var(--stone-lo); }
  .slot canvas { width: 80%; height: 80%; }
  .slot:hover { border-color: var(--gold); }
  .holding { padding: 6px 8px; background: #2a2418; border: 1px solid var(--gold); font-family: var(--pixel); font-size: .78rem; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
  .holding canvas { width: 28px; height: 28px; }
  .holding span { flex: 1 1 160px; min-width: 0; }
  .item-btn { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 3px; }
  .item-btn canvas { width: 24px; height: 24px; }

  .sheet { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; background: rgba(4,4,6,.7); padding: 16px; }
  .sheet__box { width: min(460px, 100%); max-height: calc(100% - 20px); overflow-y: auto; padding: 16px; display: grid; gap: 12px; }
  .sheet__head { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
  .sheet__head canvas { width: 72px; height: 72px; border: 2px solid var(--stone-lo); }
  .sheet h3 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 1.7rem; line-height: 1; color: var(--gold); }
  .sheet p { margin: 0; }
  .stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .stats div { padding: 6px; background: var(--slot); text-align: center; }
  .stats b { display: block; font-family: var(--pixel); font-size: 1.1rem; font-variant-numeric: tabular-nums; }
  .stats span { font-family: var(--pixel); font-size: .66rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
  .gear { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
  .gear li { display: grid; grid-template-columns: 80px 36px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 4px 6px; background: var(--slot); }
  .gear canvas { width: 32px; height: 32px; }
  .gear small { font-family: var(--pixel); font-size: .7rem; color: var(--muted); }
  .gear .btn { font-size: .72rem; padding: 2px 8px; }

  /* Party editor */
  .ped { width: min(620px, 100%); }
  .ped__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
  .ped__note { color: var(--muted); font-size: .95rem; }
  .ped__pic { position: relative; width: 100%; aspect-ratio: 1; padding: 0; border: 2px solid var(--stone-hi); background: #000; cursor: pointer; }
  .ped__pic canvas { width: 100%; height: 100%; display: block; }
  .ped__pic.drag { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); }
  .ped__pic span { position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 0; font-family: var(--pixel); font-size: .62rem; text-align: center; background: rgba(0,0,0,.65); color: var(--parch); }
  .ped__btns { display: flex; flex-wrap: wrap; gap: 6px; }
  .ped__btns .btn { font-size: .74rem; padding: 3px 9px; }
  .ped__msg { min-height: 1.3em; margin: 0; font-family: var(--pixel); font-size: .78rem; color: var(--hp); }
  .ped__msg.err { color: var(--hp-low); }

  /* Monster editor */
  .med { width: min(760px, 100%); }
  .med__top { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
  .med__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
  .med__item { background: var(--slot); border: 2px solid; border-color: var(--stone-lo) var(--stone-hi) var(--stone-hi) var(--stone-lo); }
  .med__item > summary { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 10px; cursor: pointer; list-style: none; }
  .med__item > summary::-webkit-details-marker { display: none; }
  .med__item > summary canvas { width: 44px; height: 44px; background: #000; border: 1px solid var(--stone-lo); }
  .med__item > summary b { font-family: var(--display); font-weight: 400; font-size: 1.15rem; line-height: 1.1; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .med__item > summary small { font-family: var(--pixel); font-size: .7rem; color: var(--muted); font-variant-numeric: tabular-nums; }
  .med__tag { font-family: var(--pixel); font-size: .64rem; padding: 1px 6px; border: 1px solid var(--stone-hi); color: var(--muted); white-space: nowrap; }
  .med__tag.new { border-color: var(--gold); color: var(--gold); }
  .med__item[open] > summary { border-bottom: 1px solid var(--stone-lo); }
  .med__body { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 14px; padding: 12px; }
  @media (max-width: 560px) { .med__body { grid-template-columns: minmax(0, 1fr); } }
  .med__pic { display: grid; gap: 6px; align-content: start; }
  .med__pic .ped__pic { max-width: 170px; }
  .med__pic .btn { font-size: .74rem; padding: 3px 8px; }
  .med__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px; min-width: 0; }
  @media (max-width: 760px) { .med__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .med__f { display: grid; gap: 3px; min-width: 0; font-family: var(--pixel); font-size: .66rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
  .med__f.wide { grid-column: 1 / -1; }
  .med__f input, .med__f select {
    width: 100%; min-width: 0; padding: 5px 7px; font-family: var(--pixel); font-size: .9rem; color: var(--parch); background: #0c0d10; text-transform: none; letter-spacing: 0;
    border: 2px solid; border-color: var(--stone-lo) var(--stone-hi) var(--stone-hi) var(--stone-lo);
  }
  .med__f input[type="text"] { font-family: var(--display); font-size: 1.05rem; }
  .med__f input:focus, .med__f select:focus { outline: none; border-color: var(--gold); }
  .med__f select:disabled { opacity: .6; }
  .med__check { display: flex; gap: 6px; align-items: center; font-family: var(--pixel); font-size: .78rem; color: var(--parch); cursor: pointer; }
  .med__check input { accent-color: var(--gold); width: 16px; height: 16px; }
  .med__levels { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px; padding-top: 6px; border-top: 1px solid var(--stone-lo); }
  .med__levels p { grid-column: 1 / -1; margin: 0; font-family: var(--pixel); font-size: .7rem; color: var(--muted); }
  .med__data { display: grid; gap: 6px; padding-top: 10px; border-top: 2px solid var(--stone-lo); }
  /* Admin page */
  .admin { max-width: 1180px; margin: 0 auto; display: grid; gap: 10px; }
  .adm-file { padding: 10px 14px; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; }
  .adm-file p { margin: 0; max-width: 70ch; font-size: .95rem; }
  .btn.primary { background: #6b5320; border-color: #b08a3a #3a2c10 #3a2c10 #b08a3a; color: #fff3d2; }
  .adm-migrate { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; padding: 10px 14px; border: 1px solid var(--gold); background: #2a2418; font-size: .95rem; }
  .is-admin .adm-body .sheet { position: static; inset: auto; background: none; padding: 0; display: block; }
  .is-admin .adm-body .sheet[hidden] { display: none !important; }
  .is-admin .adm-body .sheet__box { width: 100%; max-height: none; overflow: visible; }
  .is-admin .adm-body [data-done] { display: none; }
  #adm-tabs .btn { text-decoration: none; }

  /* Levels panel */
  .lvm { width: min(680px, 100%); }
  .lvm__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
  .lvm__row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 10px; background: var(--slot); border: 2px solid; border-color: var(--stone-lo) var(--stone-hi) var(--stone-hi) var(--stone-lo); }
  @media (max-width: 520px) { .lvm__row { grid-template-columns: 30px minmax(0, 1fr); } .lvm__row .ped__btns { grid-column: 2; } }
  .lvm__row.mine { border-left: 3px solid var(--gold); }
  .lvm__n { font-family: var(--pixel); color: var(--gold); text-align: center; font-variant-numeric: tabular-nums; }
  .lvm__t { display: grid; min-width: 0; }
  .lvm__t b { font-family: var(--display); font-weight: 400; font-size: 1.1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lvm__t small { font-family: var(--pixel); font-size: .7rem; color: var(--muted); }
  .lvm .ped__btns .btn { font-size: .72rem; padding: 2px 8px; }

  /* Dungeon look editor */
  .led { width: min(860px, 100%); }
  .led__tabs { display: flex; flex-wrap: wrap; gap: 6px; }
  .led__top { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 14px; align-items: start; }
  @media (max-width: 700px) { .led__top { grid-template-columns: minmax(0, 1fr); } }
  .led__view { display: grid; gap: 6px; min-width: 0; }
  .led__view canvas { width: 100%; aspect-ratio: 16 / 10; display: block; background: #000; border: 2px solid var(--stone-lo); }
  .led__cap { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
  .led__cap small { font-family: var(--pixel); font-size: .72rem; color: var(--muted); }
  .led__ctrls { display: grid; gap: 10px; align-content: start; min-width: 0; }
  .led__ctrls input[type="range"] { width: 100%; accent-color: var(--gold); padding: 0; border: 0; background: none; }
  .led__ctrls output { color: var(--parch); }
  .led__hint { margin: 0; font-size: .92rem; color: var(--muted); }
  .led__pics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  @media (max-width: 700px) { .led__pics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .led__pic { display: grid; gap: 4px; align-content: start; padding: 8px; background: var(--slot); border: 2px solid; border-color: var(--stone-lo) var(--stone-hi) var(--stone-hi) var(--stone-lo); min-width: 0; }
  .led__pic b { font-family: var(--display); font-weight: 400; font-size: 1.05rem; }
  .led__pic small { font-family: var(--pixel); font-size: .66rem; color: var(--muted); line-height: 1.35; }
  .led__pic .btn { font-size: .72rem; padding: 2px 8px; }
  .med__data textarea { width: 100%; min-height: 60px; padding: 6px 8px; font-family: var(--pixel); font-size: .72rem; color: var(--parch); background: #0c0d10; border: 2px solid; border-color: var(--stone-lo) var(--stone-hi) var(--stone-hi) var(--stone-lo); resize: vertical; }

  @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
body{margin:0}[hidden]{display:none!important}img{max-width:100%}