/* Still — landing wall. One sheet; each module appends its own marked section. */
:root {
  --bg: #eeedeb; --surface: #fff; --fg: #111; --fg-2: #6b6b6b; --fg-3: #a3a3a3;
  --line: rgba(0, 0, 0, .08); --radius: 12px; --radius-out: 17px; --inset: 5px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  font-family: -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--fg);
  -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* ==== layers ==== */
#intro { position: fixed; inset: 0; z-index: 30; }
#frame { position: fixed; inset: 12px; z-index: 10; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-out); padding: var(--inset);
  overflow: hidden; }
#wall { position: absolute; inset: var(--inset); border-radius: var(--radius); overflow: hidden;
  background: var(--bg);
  background-image: radial-gradient(circle, rgba(0, 0, 0, .09) .5px, transparent .9px);
  background-size: 40px 40px; touch-action: none; }
#dock { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 12; }
#peek { position: absolute; inset: var(--inset); z-index: 20; border-radius: var(--radius); }
#sheet { position: absolute; inset: var(--inset); z-index: 25; border-radius: var(--radius); }
#saved { position: fixed; inset: 0; z-index: 40; }
@media (max-width: 640px) { #frame { inset: 8px; } }