@font-face { font-family: "Syne"; src: url("fonts/syne-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
:root {
  --bg: #0a0808;
  --ink: #f2efec;
  --muted: #a39d98;   /* 7.4:1 on the backdrop */
  --line: #3b3534;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; background: var(--bg); color: var(--ink); }
body { font: 700 .75rem/1.5 "Syne", "Helvetica Neue", Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase;
       -webkit-font-smoothing: antialiased; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; visibility: hidden; }
canvas.ready { visibility: visible; }
canvas.turning { cursor: grabbing; }
.embed canvas, .square canvas { cursor: default; }
/* ?square: the export frame, one centred square with nothing but the mark */
.square canvas { margin: auto; width: min(100vw, 100vh); height: min(100vw, 100vh); }
.embed .hud, .square .hud, .square .loading { display: none; }

.hud { position: fixed; left: 0; right: 0; z-index: 10; pointer-events: none;
       padding-left: max(28px, env(safe-area-inset-left)); padding-right: max(28px, env(safe-area-inset-right)); }
.hud > * { pointer-events: auto; }
.top { top: 0; padding-top: max(26px, env(safe-area-inset-top)); }
.bottom { bottom: 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: max(24px, env(safe-area-inset-bottom)); }
h1 { font-size: .875rem; font-weight: 700; line-height: 1.2; letter-spacing: .22em; }
.hint { margin-top: 8px; color: var(--muted); font-size: .6875rem; pointer-events: none; }
.coarse { display: none; }
@media (pointer: coarse) { .fine { display: none; } .coarse { display: inline; } }

.pill { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1px solid var(--line); border-radius: 999px;
        background: var(--bg); color: var(--ink); font: inherit; font-size: .6875rem; letter-spacing: inherit; text-transform: inherit; text-decoration: none; }
button.pill { min-width: 96px; justify-content: center; cursor: pointer; }
.badge svg { width: auto; height: 12px; }
@media (hover: hover) {
  .pill:hover { border-color: var(--ink); }
}

.msg { position: fixed; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; font-size: .875rem; line-height: 1.7; }
.loading { position: fixed; inset: 0; display: grid; place-items: center; color: var(--muted); pointer-events: none; }
.loading[hidden], .msg[hidden] { display: none; }

@media (max-width: 640px) {
  .hud { padding-left: max(18px, env(safe-area-inset-left)); padding-right: max(18px, env(safe-area-inset-right)); }
  .top { padding-top: max(20px, env(safe-area-inset-top)); }
  .bottom { padding-bottom: max(18px, env(safe-area-inset-bottom)); gap: 10px; }
  .pill { padding: 0 14px; }
  button.pill { min-width: 84px; }
}