/* Cube Guru site — static, no web fonts, no scripts. Look: the game's black stage, white pills, a soft blue-white glow. */
:root { --bg: #0b0b0c; --panel: #161618; --line: #2a2a2e; --ink: #f4f4ef; --muted: #a9a9b0; --glow: #9fd8ff;
  --w: #f4f4ef; --y: #f2d21b; --g: #22b14c; --b: #2a72e8; --r: #e2312d; --o: #f08a1c; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 17px/1.55 -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink); background: var(--bg); }
a { color: var(--glow); text-underline-offset: 3px; }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--bg); padding: 8px 14px; border-radius: 999px; }
.skip:focus { left: 12px; }
header, main, footer { max-width: 980px; margin: 0 auto; padding: 0 20px; }
header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 18px; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 750; letter-spacing: .02em; text-decoration: none;
  color: var(--ink); font-size: 20px; }
.brand img { width: 28px; height: 28px; }
nav { display: flex; gap: 6px; }
nav a { color: var(--muted); text-decoration: none; padding: 6px 12px; border-radius: 999px; }
nav a:hover { color: var(--ink); }
nav a[aria-current="page"] { color: var(--ink); background: var(--panel); }
h1 { font-size: clamp(32px, 6.4vw, 58px); line-height: 1.06; letter-spacing: -.02em; margin: 20px 0 14px; }
.hero { margin-top: 28px; }
h2 { font-size: clamp(24px, 3.4vw, 32px); letter-spacing: -.01em; margin: 56px 0 12px; }
h3 { margin: 0 0 4px; font-size: 18px; }
.lead { font-size: 20px; color: var(--muted); max-width: 620px; }
.pill { display: inline-block; margin-top: 10px; padding: 8px 16px; border-radius: 999px; background: var(--panel);
  border: 1px solid var(--line); color: var(--ink); font-size: 15px; }
.stickers { display: inline-flex; gap: 5px; margin: 0 0 4px; }
.stickers i { width: 12px; height: 12px; border-radius: 3px; display: block; }
.stickers i:nth-child(1) { background: var(--w); } .stickers i:nth-child(2) { background: var(--y); }
.stickers i:nth-child(3) { background: var(--g); } .stickers i:nth-child(4) { background: var(--b); }
.stickers i:nth-child(5) { background: var(--r); } .stickers i:nth-child(6) { background: var(--o); }
.hero { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; }
@media (min-width: 820px) { .hero { grid-template-columns: 1.15fr .85fr; gap: 40px; } }
figure { margin: 0; }
.screen img, .screen video { width: 100%; height: auto; display: block; border-radius: 22px; background: #000;
  border: 1px solid var(--line); box-shadow: 0 0 0 1px rgba(159,216,255,.06), 0 18px 60px -20px rgba(159,216,255,.28); }
.hero .screen { max-width: 340px; margin: 0 auto; }
.hero > *, .shots > *, .fold > *, .features > * { min-width: 0; }
figcaption { font-size: 14px; color: var(--muted); margin-top: 10px; }
.shots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 20px 0; }
@media (min-width: 820px) { .shots { grid-template-columns: repeat(4, 1fr); } }
.shots figcaption strong { color: var(--ink); font-weight: 650; display: block; font-size: 15px; }
.fold { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 700px) { .fold { grid-template-columns: 1fr 1fr; } }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px; }
.card p { margin: 6px 0 0; color: var(--muted); }
.card .screen { max-width: 240px; margin: 16px auto 0; }
.features { display: grid; grid-template-columns: 1fr; gap: 12px; padding: 0; list-style: none; }
@media (min-width: 700px) { .features { grid-template-columns: 1fr 1fr; } }
.features li { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 14px 18px; color: var(--muted); }
.features strong { color: var(--ink); display: block; }
.prose { max-width: 700px; }
.prose p, .prose li { color: #d4d4d8; }
details { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 4px 18px; margin: 12px 0; max-width: 760px; }
summary { cursor: pointer; font-weight: 650; padding: 12px 0; }
details p { color: #d4d4d8; margin: 0 0 14px; }
.note { color: var(--muted); font-size: 15px; }
footer { color: var(--muted); font-size: 14px; padding-top: 28px; padding-bottom: 40px; border-top: 1px solid var(--line); margin-top: 64px; }
footer a { color: var(--muted); }
@media (prefers-reduced-motion: no-preference) { a, nav a { transition: color .15s, background-color .15s; } }
@media (prefers-contrast: more) { :root { --muted: #d8d8de; --line: #55555c; } }