/* The Rosetta stone's page: the picture first, the controls under it. */
:root { color-scheme: light; --ink: #111827; --dim: #6b7280; --paper: #faf8f4; --line: #d6d3d1; }
html, body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.45 ui-sans-serif, system-ui, sans-serif; }
main.rosetta { max-width: 1400px; margin: 0 auto; padding: 16px; outline: none; }
h1 { font-size: 1.5rem; margin: 0.2rem 0 0.4rem; font-weight: 600; }
.lead { color: var(--dim); margin: 0 0 0.8rem; }
/* The stone fills the window's shorter way at scale 1; the zoom buttons
   set --scale, and the picture, being vector, grows with it. */
.stone { width: calc(min(96vw, 78vh) * var(--scale, 1)); max-width: 100%; margin: 0 auto; aspect-ratio: 1 / 1; touch-action: none; cursor: grab; user-select: none; background: var(--paper); }
.stone:fullscreen { width: 100vh; max-width: 100vw; display: flex; align-items: center; justify-content: center; }
.zoom { display: flex; gap: 8px; align-items: center; justify-content: center; margin: 4px 0 8px; font-size: 0.85rem; color: var(--dim); }
.zoom button { font: inherit; color: var(--ink); background: white; border: 1px solid var(--line); border-radius: 6px; padding: 2px 10px; cursor: pointer; }
.zoom .scale { min-width: 3.5em; text-align: center; }
.stone:active { cursor: grabbing; }
.stone svg { width: 100%; height: 100%; display: block; }
.controls { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: end; justify-content: center; margin: 12px 0; }
.controls label { display: flex; flex-direction: column; font-size: 0.85rem; color: var(--dim); gap: 4px; }
.controls select { font: inherit; color: var(--ink); padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; background: white; min-width: 10em; }
.controls .keys { flex-basis: 100%; text-align: center; font-size: 0.8rem; color: var(--dim); }
.err { color: #b91c1c; white-space: pre-wrap; background: #fff1f2; padding: 8px; border-radius: 6px; }
.foot { color: var(--dim); font-size: 0.85rem; text-align: center; margin-top: 1.5rem; }
.foot a { color: #1d4ed8; }
@media (prefers-reduced-motion: reduce) { .stone { cursor: default; } }
/* The site's footer, as the live demo styles it. */
footer {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center;
  padding: 10px 12px; border-top: 1px solid var(--line); color: var(--dim); font-size: 12px; margin-top: 1rem;
}
footer a { color: var(--dim); } footer a:hover { color: var(--ink); }
footer .sep { opacity: 0.6; }
/* The tour's mode: a dot that is green while touring, amber paused. */
.mode { text-align: center; margin: 6px 0 0; font-size: 0.85rem; color: var(--dim); }
.mode .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #16a34a; margin-right: 6px; vertical-align: middle; }
.mode.paused .dot { background: #d97706; }