html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  /* the page around a non-square canvas wears the specimen's own backdrop (set by embed-app.js) */
  background: radial-gradient(circle at 50% 42%, var(--bgA, #3a4a48), var(--bgB, #2a3735) 62%, var(--bgC, #1d2726));
  color: #17251a;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
main { position: relative; display: grid; width: 100%; height: 100%; place-items: center; }
canvas { display: block; width: min(96vw, 96vh); height: min(96vw, 96vh); touch-action: none; cursor: grab; }
canvas:active { cursor: grabbing; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); }
[hidden] { display: none !important; }
aside { position: absolute; top: 18px; left: 18px; display: grid; gap: 7px; max-width: calc(100vw - 68px); padding: 14px 16px; border: 1px solid #28563d; border-radius: 4px; background: #17251ae8; color: #f4f0e6; }
aside b { color: #d9ff5c; font-size: 17px; letter-spacing: -.3px; }
aside span { color: #d6decf; font-size: 12px; }
#source { font-size: 10px; opacity: .85; }
#source[data-status="unavailable"] { color: #ffc58b; }
progress { width: 100%; height: 5px; overflow: hidden; border: 0; border-radius: 9px; accent-color: #d9ff5c; }
progress::-webkit-progress-bar { background: #455244; }
progress::-webkit-progress-value { background: #d9ff5c; }
button { justify-self: start; padding: 6px 9px; border: 1px solid #657160; border-radius: 2px; background: transparent; color: #f4f0e6; font: inherit; font-size: 10px; cursor: pointer; }
button:disabled { opacity: .4; }
button:focus-visible { outline: 2px solid #ff704d; outline-offset: 3px; }
.hint { position: absolute; bottom: 12px; margin: 0; color: #17251a; font-size: 11px; opacity: .7; pointer-events: none; }
html[data-embed] aside,
html[data-embed] .hint,
html[data-embed] .living-panel { display: none !important; }
html[data-embed] canvas#scene { width: min(100vw, 100vh) !important; height: min(100vw, 100vh) !important; }
@media (max-width: 450px) {
  aside { top: 10px; left: 10px; padding: 10px 12px; }
  aside b { font-size: 14px; }
  .hint { font-size: 10px; }
}

/* Loading curtain: paints instantly in the token's own colours while the 3D wakes up, then lifts. */
#curtain { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(circle at 50% 42%, var(--bgA, #e9e4cf), var(--bgB, #c9c3a8) 62%, var(--bgC, #8f8a72)); transition: opacity .7s ease .05s, visibility 0s linear .8s; pointer-events: none; }
#curtain svg { width: 34%; max-width: 220px; animation: curtain-breathe 1.6s ease-in-out infinite; filter: blur(1.5px); }
#curtain path { fill: var(--skin, #8a5a36); opacity: .55; }
#curtain .eye { fill: #fff; opacity: .7; animation: curtain-blink 3.2s infinite; transform-origin: center 76px; transform-box: view-box; }
@keyframes curtain-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.04, .96) translateY(2%); } }
@keyframes curtain-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
html.ready #curtain { opacity: 0; visibility: hidden; }
canvas#scene { transition: opacity .7s ease, filter .9s ease; }
html[data-curtain]:not(.ready) canvas#scene { opacity: 0; filter: blur(8px); }
@media (prefers-reduced-motion: reduce) { #curtain svg, #curtain .eye { animation: none; } }

/* Corner badge: health + YSHET in the vault (live from the chain when reachable). */
.hud { position: absolute; top: 10px; left: 10px; z-index: 3; display: flex; gap: 6px; pointer-events: none; font: 600 12px/1 system-ui, -apple-system, "Segoe UI", sans-serif; }
.hud span { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 999px; background: rgba(10, 14, 14, .62); color: #f2f5f2; backdrop-filter: blur(4px); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hud .hud-health::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--hud-dot, #8fd39a); }
.hud .hud-vault::before { content: ""; width: 9px; height: 9px; border-radius: 3px; background: #cf8d55; }


.hud { right: 10px; flex-wrap: wrap; gap: 6px; }
.hud span { min-height: 28px; height: auto; padding: 7px 10px; border: 1px solid #ffffff30; }
.hud-health { position: relative; overflow: hidden; }
.hud-health::after { content: ''; position: absolute; bottom: 0; left: 0; height: 3px; width: var(--hud-health, 0%); background: var(--hud-dot); transition: width .3s; }
.hud .hud-vault { white-space: normal; overflow-wrap: anywhere; line-height: 1.2; }
.hud[data-chain-state="stale"]::after { content: 'Last read · update unavailable'; width: 100%; color: #ffe0a0; font-size: 10px; text-shadow: 0 1px 2px #000; }
@media (max-width: 260px) { .hud { font-size: 10px; left: 6px; right: 6px; top: 6px; } .hud span { padding: 6px 8px; } }