:root{
  --bleed:57px;
  --card-w:750px;
  --card-h:1125px;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,Arial,sans-serif;background:#f0f0f0;color:#111}
.toolbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:12px;padding:10px 12px;background:#fff;border-bottom:1px solid #ddd}
.toolbar button{padding:8px 14px;border:0;border-radius:8px;cursor:pointer;background:#2f7d32;color:#fff}
.toolbar .apikey,.toolbar .writekey{margin-left:auto;display:flex;align-items:center;gap:8px}
.toolbar .writekey{margin-left:0}
.toolbar input{padding:6px 8px;width:240px;border:1px solid #ccc;border-radius:6px}
.deck{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;padding:16px}
.card{width:var(--card-w);height:var(--card-h);padding:var(--bleed);border:none;border-radius:0;background:#fff;box-shadow:0 4px 8px rgba(0,0,0,.1);position:relative;overflow:hidden;display:flex;flex-direction:column}
.card h2{margin:0 0 8px;text-align:center;font-size:3.2em;line-height:1.1}
.card img{width:100%;height:auto;max-height:420px;object-fit:cover;border-radius:6px;align-self:center}
.class{font-size:27px;margin:6px 0 4px}
.text-area{background:rgba(255,255,250,.9);border-radius:8px;padding:8px;margin-top:6px;flex-grow:1;overflow:auto;display:flex;flex-direction:column}
.description{font-size:40px;line-height:1.15;flex-grow:1;overflow:auto}
.controls{position:absolute;bottom:calc(var(--bleed) + 5px);right:calc(var(--bleed) + 5px);display:flex;flex-direction:column;gap:6px}
.controls button{background:#1f4aa8;color:#fff;border:0;padding:6px 10px;border-radius:6px;cursor:pointer}
.controls button.secondary{background:#6b7280}
.controls button.warning{background:#b45309}
.controls button.success{background:#2f7d32}
.footnote{text-align:center;padding:12px;color:#555}


/* Corner badges inside the scrollable description box */
.text-area .description { position: relative; } /* anchor for absolute badges */

.text-area .description var,
.text-area .description samp {
  position: absolute;
  z-index: 2;
  display: inline-block;
  padding: 4px 8px;
  font: 700 22px/1.1 system-ui, Arial, sans-serif;
  color: #fff;
  background: rgba(0,0,0,0.7);
  border-radius: 6px;
  letter-spacing: .02em;
  pointer-events: none; /* clicks go through */
  -webkit-font-smoothing: antialiased;
  font-style: normal;   /* override <var> italics */
}

/* defaults */
.text-area .description var  { top: 6px; left: 6px; }
.text-area .description samp { top: 6px; right: 6px; }

/* bottom variants (either class or data attribute) */
.text-area .description var.bl,
.text-area .description samp.bl,
.text-area .description var[data-pos="bl"],
.text-area .description samp[data-pos="bl"] {
  top: auto; bottom: 6px; left: 6px; right: auto;
}

.text-area .description var.br,
.text-area .description samp.br,
.text-area .description var[data-pos="br"],
.text-area .description samp[data-pos="br"] {
  top: auto; bottom: 6px; right: 6px; left: auto;
}

/* optional subtle outline for contrast */
.text-area .description var::after,
.text-area .description samp::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 6px;
  pointer-events: none;
}


/* Only add space if a TOP badge exists */
.text-area .description:has(
  var:not(.bl):not([data-pos="bl"]):not(.br):not([data-pos="br"]),
  samp:not(.bl):not([data-pos="bl"]):not(.br):not([data-pos="br"])
){
  padding-top: 44px;
}

/* Only add space if a BOTTOM badge exists */
.text-area .description:has(
  var.bl, var[data-pos="bl"], var.br, var[data-pos="br"],
  samp.bl, samp[data-pos="bl"], samp.br, samp[data-pos="br"]
){
  padding-bottom: 44px;
}