:root{
  --bg:#0b0c10; --ink:#e9e6df; --dim:#8d92a0; --line:#2a2e38;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.stage{position:relative;height:calc(100% - 56px);min-height:320px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:0 16px}
#badge{display:block;width:100%;max-width:1200px;height:min(62vh,560px,48vw);opacity:0;transition:opacity .5s ease}
#badge.on{opacity:1}
.meaning{margin:0;font-size:clamp(14px,2.1vw,22px);letter-spacing:.16em;color:#c9ccd6;
  opacity:0;transform:translateY(6px);transition:opacity .7s ease,transform .7s ease}
.meaning b{font-weight:800;color:#fff}
.meaning.on{opacity:1;transform:none}
.still{font-size:clamp(48px,12vw,140px);font-weight:900;letter-spacing:.02em;margin:0;color:#d6dae2}
.hint{height:56px;margin:0;display:flex;align-items:center;justify-content:center;gap:14px;
  font-size:13px;color:var(--dim)}
.hint button{font:inherit;color:var(--ink);background:none;border:1px solid var(--line);border-radius:999px;
  padding:6px 14px;cursor:pointer}
.hint button:hover{border-color:#4a4f5c}
.hint button:focus-visible{outline:2px solid #9fb4ff;outline-offset:2px}
body.bare .meaning,body.bare .hint{display:none}
body.bare .stage{height:100%;min-height:0;padding:0}
body.bare #badge{height:100%;max-width:none}
@media (prefers-reduced-motion:reduce){
  #badge,.meaning{transition:opacity .4s ease}
  .meaning{transform:none}
}
body.capture #badge,body.capture .meaning{transition:none}
#badge{cursor:grab;touch-action:none}
#badge.over{cursor:move}
#badge.moving{cursor:grabbing}
#badge.grab{cursor:grabbing}
#badge:focus-visible{outline:2px solid #9fb4ff;outline-offset:4px;border-radius:8px}

/* Inside a site header (?embed): see-through, no hint, no meaning line (the page carries its own) */
html.embed{color-scheme:normal}
html.embed,html.embed body{background:transparent}
body.embed #badge:focus-visible{outline-offset:0}