:root {
    --bg:#090c12; --panel:#12161fcc; --panel-border:#232936; --hairline:#1c212c;
    --text:#e8ecf3; --text-dim:#8791a3; --text-faint:#545e70;
    --accent:#a78bfa; --accent-deep:#6d4bc7; --accent-bg:#2b1f52; --warn:#e0a458;
  }
  *{box-sizing:border-box}
  body{margin:0;background:var(--bg);color:var(--text);
    font-family:"IBM Plex Sans",system-ui,sans-serif;height:100vh;overflow:hidden;position:relative}
  canvas#c{display:block;width:100%;height:100%;cursor:grab;touch-action:none}
  canvas#c:active{cursor:grabbing}
  .panel{position:absolute;background:var(--panel);border:1px solid var(--panel-border);
    border-radius:10px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
  .info{top:20px;left:20px;max-width:360px;padding:18px 20px;overflow-y:auto;
    scrollbar-width:thin;scrollbar-color:var(--panel-border) transparent}
  .info::-webkit-scrollbar{width:7px}
  .info::-webkit-scrollbar-thumb{background:var(--panel-border);border-radius:4px}
  .home{display:inline-block;font-size:11.5px;color:var(--text-dim);text-decoration:none;
    margin:0 0 10px;border-bottom:1px solid transparent}
  .home:hover{color:var(--accent);border-bottom-color:var(--accent)}
  .home:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .eyebrow{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;
    letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);margin:0 0 6px}
  h1{font-size:19px;font-weight:600;margin:0 0 12px;text-wrap:balance}
  .stat-row{display:flex;justify-content:space-between;align-items:baseline;padding:6px 0;
    border-top:1px solid var(--hairline);gap:16px}
  .stat-row:first-of-type{border-top:none}
  .stat-label{font-size:12.5px;color:var(--text-dim)}
  .stat-value{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:13px;
    font-variant-numeric:tabular-nums}
  .sec{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10px;letter-spacing:.09em;
    text-transform:uppercase;color:var(--text-faint);margin:13px 0 3px}
  .caveat{margin-top:14px;padding:10px 12px;border-radius:7px;background:#e0a4581a;
    border:1px solid #e0a45840;font-size:11.5px;line-height:1.5;color:#e8c99a}
  .ctrl{bottom:20px;left:20px;padding:14px 16px;display:flex;flex-direction:column;gap:10px;
    min-width:300px}
  .btn{background:#1b2130;border:1px solid var(--panel-border);color:var(--text);
    border-radius:7px;padding:7px 12px;font-size:12.5px;cursor:pointer;font-family:inherit}
  .btn:hover{border-color:var(--accent)}
  .btn[aria-pressed="true"]{background:var(--accent-bg);border-color:var(--accent-deep);
    color:var(--accent)}
  .btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .row{display:flex;gap:8px;align-items:center}
  label{font-size:11.5px;color:var(--text-dim)}
  input[type=range]{flex:1;accent-color:var(--accent)}
  canvas#lc{width:100%;height:132px;display:block;border-radius:6px;background:#0d1119}
  .hint{margin:0;font-size:11px;line-height:1.45;color:var(--text-faint)}
  .btn[disabled]{opacity:.4;cursor:not-allowed}
  .legend{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--text-dim);
    font-family:"IBM Plex Mono",ui-monospace,monospace}
  .bar{flex:1;height:9px;border-radius:5px}
  @media (max-width:820px){ .info{max-width:260px;padding:12px 14px} }
.dl{display:flex;flex-direction:column;gap:4px;margin:2px 0 4px}
.dl a{font-size:11.5px;color:var(--accent);text-decoration:none;border-bottom:1px solid transparent}
.dl a:hover{border-bottom-color:var(--accent)}
.dl a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* qualitative label beside the numeric symmetry index in the solution panel */
.sym-note{opacity:.62;font-size:11px}

/* Lightcurve-only pages: no 3D canvas, so the page is a single readable column rather than
   the viewer's floating panels. Shares every other token with the full pages. */
.lconly{max-width:640px;margin:0 auto;padding:30px 22px 70px;position:relative;
  height:auto;overflow:visible}
.lconly h1{font-size:22px;margin:0 0 10px}
.lconly #lc{width:100%;height:220px;display:block;margin:6px 0 4px}
.lconly .caveat{margin-top:18px}
body:has(.lconly){overflow:auto;height:auto;position:static}

/* ---------------------------------------------------------------------------
   MOBILE. Desktop layout is untouched: every rule below is inside a max-width
   query, and the .open class it toggles has no styling outside it.

   The floating info panel does not work on a phone -- it covers most of the
   canvas. Collapsed it becomes a top bar showing the object name and the way
   back; tapping the name expands it over the canvas. The controls and the
   lightcurve stay pinned at the bottom, where a thumb can reach them.
   --------------------------------------------------------------------------- */
@media (max-width: 640px) {
  /* 100vh is wrong on mobile browsers whose chrome hides on scroll; dvh tracks it */
  body { height: 100dvh; }

  .info {
    top: 8px; left: 8px; right: 8px;
    max-width: none; width: auto;
    padding: 10px 13px;
    overflow: hidden;
  }
  /* collapsed: keep only the way back and the name */
  .info:not(.open) > *:not(.home):not(h1) { display: none; }
  .info:not(.open) h1 { margin: 0; }

  .info h1 {
    cursor: pointer; user-select: none;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    font-size: 17px;
  }
  .info h1::after {
    content: '▾';
    font-size: 13px; color: var(--text-faint); flex: 0 0 auto;
    transition: transform .15s ease;
  }
  .info.open h1::after { transform: rotate(180deg); }
  .info h1:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

  .info.open {
    overflow-y: auto;
    max-height: calc(100dvh - 230px);   /* leave the control panel visible */
  }

  .ctrl {
    left: 8px; right: 8px; bottom: 8px;
    min-width: 0; padding: 11px 13px; gap: 8px;
  }
  canvas#lc { height: 108px; }
  .hint { display: none; }             /* the gesture is discoverable; the text is not worth the height */
  .row { flex-wrap: wrap; }
  .btn { padding: 8px 13px; }          /* a comfortable tap target */

  /* lightcurve-only pages are already a single column; just tighten the margins */
  .lconly { padding: 18px 14px 50px; }
  .lconly h1 { font-size: 19px; }
  .lconly #lc { height: 190px; }
}