/* DeduCube — the site's only stylesheet. From the reference chosen on 5 November 2026 (variant C),
   moved out of the page: the Content-Security-Policy allows no inline style. */

/* Manrope, served from this site (OFL, fonts/OFL.txt): never from Google. Latin subset, weights
   200-800 in one variable file. */
@font-face {
  font-family: Manrope;
  src: url("/fonts/manrope-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #F7F8FC;
  --fg: #151821;
  --muted: #565C6B;
  --cube-top: #D9DCE2;
  --cube-left: #60ACE4;
  --cube-right: #CD3A1E;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #101218; --fg: #F2F3F7; --muted: #A6ACBA; }
}
html, body { margin: 0; }
body {
  /* The screen less Safari's bars, so that the footer is not under them; 100vh where dvh is not
     known. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--fg);
  font-family: Manrope, system-ui, -apple-system, sans-serif;
}
header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 28px 40px;
}
header a { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
header img { width: 30px; height: 39px; object-fit: contain; display: block; }
header span { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }
main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 36px;
  padding: 32px 24px 72px;
  text-align: center;
}
h1 {
  margin: 0;
  font-size: 52px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
p { margin: 0; font-size: 18px; line-height: 1.5; color: var(--muted); }
.tagline { margin-top: 14px; }
footer { padding: 24px 40px; font-size: 13px; color: var(--muted); }

/* Isometric cube: a third of a turn every ~2 s, with a pause; still with "Reduce motion". */
.cube .turn {
  stroke: var(--bg);
  stroke-width: 4;
  stroke-linejoin: round;
  transform-box: view-box;
  transform-origin: 0 0;
  animation: turn 6s cubic-bezier(.65, 0, .35, 1) infinite;
}
.cube .top { fill: var(--cube-top); }
.cube .left { fill: var(--cube-left); }
.cube .right { fill: var(--cube-right); }
@keyframes turn {
  0%, 22%   { transform: rotate(0deg); }
  33%, 55%  { transform: rotate(120deg); }
  66%, 88%  { transform: rotate(240deg); }
  100%      { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .cube .turn { animation: none; }
}

/* The page of a missing address. */
.home-link { color: var(--fg); font-size: 18px; font-weight: 700; }

/* The page of a shared level (link.html): the code, "Copy code", and the App Store to come. */
[hidden] { display: none !important; }
.level {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 340px;
}
.level-label { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.level-code {
  color: var(--fg);
  font-size: 34px;
  font-weight: 800;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  -webkit-user-select: all;
  user-select: all;
}
.copy {
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  color: var(--bg);
  background: var(--fg);
  border: 0;
  border-radius: 999px;
  padding: 12px 28px;
  min-height: 44px;
  cursor: pointer;
}
.level-help { font-size: 15px; }
.store {
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
  border: 1.5px solid currentColor;
  border-radius: 999px;
  padding: 10px 22px;
}

@media (max-width: 480px) {
  header { padding: 20px 24px; }
  h1 { font-size: 44px; }
}

/* The page of a shared level on short screens (iPhone SE): a smaller cube and closer spaces, so that
   the code, "Copy code", the words on the app and the App Store to come show without scrolling.
   Taller screens keep the layout above. */
@media (max-height: 700px) {
  .link-page header { padding: 12px 24px; }
  .link-page main { gap: 16px; padding: 4px 24px 12px; }
  .link-page .cube { width: 96px; height: 96px; }
  .link-page h1 { font-size: 34px; }
  .link-page .level { gap: 6px; }
  .link-page .level-label { font-size: 12px; }
  .link-page .level-code { font-size: 30px; }
  .link-page .copy { margin: 4px 0; }
  .link-page .level-help { font-size: 14px; line-height: 1.4; }
  .link-page .store { padding: 8px 18px; }
  .link-page footer { padding: 12px 24px; }
}