.filter-row { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.filter-chip { border:1px solid var(--line); background:transparent; color:var(--muted); border-radius:24px; padding:8px 17px; font-size:13px; }
.filter-chip[aria-pressed="true"] { background:var(--green); border-color:var(--green); color:var(--white); }
.card-art.numbers { background:#e6e4ce; }
.card-art.search { background:#e7dce6; }
.card-art.route { background:#d6e4e3; }
.number-art { display:flex; align-items:center; gap:16px; font-size:20px; font-weight:500; transform:rotate(-7deg); }
.number-art .serif { font-size:38px; }
.glyph-art { font:26px/1.25 ui-monospace,monospace; letter-spacing:9px; transform:rotate(-7deg); }
.route-art { font:30px/1.1 ui-monospace,monospace; letter-spacing:8px; transform:rotate(-7deg); }
.expression-pair { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:28px; width:100%; }
.expression-pair > div { display:grid; gap:15px; text-align:center; }
.expression-pair strong { font-size:clamp(24px,5vw,38px); font-weight:500; font-variant-numeric:tabular-nums; }
.search-board,.route-board { display:grid; grid-template-columns:repeat(5,1fr); width:min(100%,340px); gap:7px; }
.glyph-tile,.route-tile { aspect-ratio:1; border:1px solid var(--line); border-radius:7px; background:var(--paper); color:var(--ink); min-width:0; }
.glyph-tile { font-family:Arial,sans-serif; font-size:27px; font-weight:500; line-height:1; }
.glyph-tile:disabled { opacity:1; }
.glyph-tile.correct-choice { background:var(--lime); border:2px solid var(--right); }
.glyph-tile.wrong-choice { background:var(--peach); border:2px solid var(--wrong); }
.route-tile { font-size:19px; opacity:1!important; }
.route-tile:enabled { background:var(--lime); }
.route-tile.blocked { background:#d6d8ce; color:#637061; }
.route-tile.trail { background:#dce7d3; }
.route-tile.current { background:var(--green); color:var(--white); }
.route-tile.optimal { outline:2px solid var(--right); outline-offset:-4px; }
.progress-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:16px; margin:0 0 24px; }
.progress-toolbar label { display:flex; gap:10px; align-items:center; font-size:13px; }
.progress-toolbar select { font:inherit; color:var(--ink); border:1px solid var(--line); padding:9px 32px 9px 12px; background:var(--white); border-radius:7px; max-width:240px; }
.result-facts { display:flex; flex-wrap:wrap; gap:28px; font-size:12px; color:var(--muted); margin:14px 0; }
.result-facts strong { display:block; font-size:23px; font-weight:500; color:var(--ink); }
.trend-summary { margin:18px 0; max-width:620px; }
.trend-summary > strong { font-size:21px; font-weight:500; display:block; margin-bottom:5px; }
.score-details { margin-top:22px; font-size:13px; }
.score-details summary { cursor:pointer; color:var(--muted); padding:8px 0; }
.results-table { overflow-x:auto; }
.results-table table { border-collapse:collapse; width:100%; margin-top:10px; font-size:12px; text-align:left; }
.results-table th,.results-table td { padding:9px 12px 9px 0; border-bottom:1px solid var(--line); }
.results-table th { font-weight:500; }
.account-layout { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
.account-layout h1 { font-size:clamp(35px,5vw,54px); }
.auth-panel { padding:32px; border:1px solid var(--line); border-radius:16px; background:var(--white); }
.auth-panel h2 { font-size:26px; margin-bottom:24px; }
#account-form { display:grid; gap:16px; }
#account-form label { display:grid; gap:7px; font-size:13px; color:var(--ink); }
#account-form input { width:100%; border:1px solid var(--line); border-radius:7px; font:inherit; padding:12px; font-size:16px; color:var(--ink); background:var(--white); }
#account-form input:focus-visible { outline:2px solid var(--green); outline-offset:2px; }
.auth-status { font-size:13px; min-height:24px; overflow-wrap:anywhere; }
.auth-links { display:flex; flex-direction:column; gap:13px; margin-top:15px; align-items:start; }
.auth-links button { border:0; background:none; padding:0; color:var(--green); font-size:13px; text-decoration:underline; }
.account-actions { justify-content:start; }
.import-section { padding-top:28px; border-top:1px solid var(--line); margin-top:28px; }
.import-section p { margin:12px 0 20px; font-size:14px; }
@media(max-width:760px) {
  .topbar nav { gap:13px; }
  .topbar nav a { font-size:11px; }
  .account-layout { grid-template-columns:1fr; gap:32px; }
  .auth-panel { padding:24px; }
  .number-art { flex-direction:column; gap:0; font-size:17px; }
  .number-art .serif { font-size:26px; }
  .glyph-art { font-size:20px; letter-spacing:4px; }
  .route-art { font-size:24px; letter-spacing:3px; }
  .expression-pair { gap:16px; }
  .progress-toolbar select { max-width:190px; }
  .progress-toolbar label { width:100%; }
  .glyph-tile { font-size:25px; }
  .filter-chip { min-height:40px; padding:7px 13px; }
}

.challenge-prompt {max-width:660px;margin:0 auto 28px;text-align:left;font-size:1.15rem;line-height:1.75}
.challenge-choices {display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:24px auto}
.challenge-choices .btn {min-width:100px;min-height:52px;font-size:1.15rem}
.challenge-choices .correct-choice {border:2px solid #214b3b;background:#e3edde;color:#173d30;opacity:1}
.challenge-choices .wrong-choice {border:2px solid #a54635;opacity:1}
.sequence-terms {font-size:clamp(1.2rem,4vw,1.8rem);font-variant-numeric:tabular-nums;text-align:center;padding:24px 0;line-height:1.8}

.daily-card {display:flex;align-items:center;justify-content:space-between;gap:28px;border:1px solid var(--line);border-radius:16px;padding:30px;background:#e8eddf;margin:0 0 48px}
.daily-card h2 {font-size:32px;margin:8px 0 12px}
.daily-card p {max-width:650px;line-height:1.7;margin-bottom:10px}
.daily-card .btn {flex-shrink:0}
.daily-intro {max-width:760px;margin-bottom:32px}
.daily-intro h1 {margin:20px 0}
.daily-stages {list-style:none;padding:0;margin:0 0 28px}
.daily-stage {display:flex;align-items:center;gap:24px;padding:24px 0;border-bottom:1px solid var(--line)}
.daily-stage>div {flex:1}
.daily-stage h2 {font-size:26px;margin:7px 0}
.daily-stage p {font-size:14px;color:var(--muted)}
.daily-step {display:grid;place-items:center;flex:0 0 44px;height:44px;border:1px solid var(--line);border-radius:50%;font-size:20px}
.daily-stage.is-complete .daily-step {background:var(--green);color:white}
.daily-actions {justify-content:flex-start}
.daily-complete {margin-top:24px;color:var(--green)}
@media(max-width:760px) {.daily-card{flex-direction:column;align-items:flex-start;padding:22px}.daily-card .btn{white-space:normal}.daily-stage{gap:12px}.daily-stage h2{font-size:22px}.daily-stage>.quiet{font-size:11px}.topbar{flex-wrap:wrap}.topbar nav{flex-wrap:wrap;row-gap:8px}}

.daily-records{padding:24px 0 40px;margin-bottom:28px;border-bottom:1px solid var(--line)}

/* Pointer-following layers preserve the original orbital drawing at rest. */
.orbital::before,.orbital::after,.orbital .core,.orbital .satellite {
  pointer-events:none;
  transition:transform 280ms cubic-bezier(.2,.75,.25,1);
}
.orbital::before {transform:translate(calc(var(--orbit-x,0px) * .3),calc(var(--orbit-y,0px) * .3)) scaleX(1.5) rotate(calc(35deg + var(--orbit-turn,0deg)))}
.orbital::after {transform:translate(calc(var(--orbit-x,0px) * -.35),calc(var(--orbit-y,0px) * -.35)) scaleX(.65) rotate(calc(-35deg - var(--orbit-turn,0deg)))}
.orbital .core {transform:translate(calc(var(--orbit-x,0px) * .45),calc(var(--orbit-y,0px) * .45))}
.orbital .satellite {transform:translate(calc(var(--orbit-x,0px) * 1.35),calc(var(--orbit-y,0px) * 1.35))}
@media(prefers-reduced-motion:reduce) {
  .orbital::before {transform:scaleX(1.5) rotate(35deg)}
  .orbital::after {transform:scaleX(.65) rotate(-35deg)}
  .orbital .core,.orbital .satellite {transform:none}
  .orbital::before,.orbital::after,.orbital .core,.orbital .satellite {transition:none}
}
