:root {
  --apple-bg: #f4f6fb;
  --apple-surface: rgba(255,255,255,.78);
  --apple-surface-solid: #fff;
  --apple-text: #172033;
  --apple-muted: #6d7890;
  --apple-line: rgba(30,55,100,.12);
  --apple-blue: #246bfe;
  --apple-blue-2: #62a5ff;
  --apple-shadow: 0 20px 55px rgba(36,63,112,.12);
  --apple-radius: 24px;
  --apple-ease: cubic-bezier(.22,.61,.36,1);
}
:root[data-theme="dark"] {
  --apple-bg: #0d111b;
  --apple-surface: rgba(24,30,44,.82);
  --apple-surface-solid: #1a2130;
  --apple-text: #edf3ff;
  --apple-muted: #9aa8c2;
  --apple-line: rgba(210,225,255,.14);
  --apple-blue: #6da1ff;
  --apple-blue-2: #9ac6ff;
  --apple-shadow: 0 20px 55px rgba(0,0,0,.28);
}
*,*::before,*::after { box-sizing: border-box; }
html { background: var(--apple-bg); }
body {
  background: radial-gradient(800px 420px at 50% -8%, rgba(71,145,255,.18), transparent 68%), var(--apple-bg) !important;
  color: var(--apple-text) !important;
  min-height: 100vh;
}
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; background: radial-gradient(circle at 8% 74%,rgba(177,104,255,.08),transparent 28%), radial-gradient(circle at 92% 28%,rgba(56,181,255,.08),transparent 30%); }
a { color: var(--apple-blue); }
button,a,.card,.stage,.set-card,.case-card,input,textarea,select { transition: transform .22s var(--apple-ease), box-shadow .22s var(--apple-ease), border-color .22s ease, background .22s ease; }
button,.btn { border: 1px solid var(--apple-line) !important; border-radius: 999px !important; background: var(--apple-surface-solid) !important; color: var(--apple-text) !important; box-shadow: 0 5px 16px rgba(24,50,95,.08) !important; font-weight: 650 !important; }
button:hover,.btn:hover { transform: translateY(-2px); border-color: var(--apple-blue) !important; }
.btn.primary,.primary { background: linear-gradient(135deg,var(--apple-blue),var(--apple-blue-2)) !important; color: #fff !important; border-color: transparent !important; }
input,textarea,select { background: var(--apple-surface-solid) !important; color: var(--apple-text) !important; border: 1px solid var(--apple-line) !important; border-radius: 14px !important; }
input:focus,textarea:focus { outline: 0 !important; border-color: var(--apple-blue) !important; box-shadow: 0 0 0 4px rgba(36,107,254,.14) !important; }
.grad { background: linear-gradient(100deg,#246bfe,#a65bdf 56%,#f44c78); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.card,.panel .card,.stage,.set-card { background: var(--apple-surface) !important; border: 1px solid var(--apple-line) !important; border-radius: var(--apple-radius) !important; box-shadow: var(--apple-shadow), inset 0 1px rgba(255,255,255,.42) !important; backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%); }
.card:hover,.set-card:hover { transform: translateY(-4px); }

/* Home */
body > header:not(.top) { max-width: 1080px !important; margin: 0 auto !important; padding: clamp(70px,12vh,130px) 28px 18px !important; text-align: left !important; }
body > header:not(.top) h1 { font-size: clamp(2.8rem,8vw,5.2rem) !important; line-height: 1 !important; letter-spacing: .12em !important; font-weight: 800 !important; }
body > header:not(.top) + main { max-width: 1080px !important; margin: 0 auto !important; padding: 34px 28px 96px !important; display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px !important; }
body > header:not(.top) + main .card { min-height: 220px !important; padding: 32px !important; display: flex !important; flex-direction: column; justify-content: flex-end; overflow: hidden; }
body > header:not(.top) + main .card::before { content:""; position:absolute; width:220px; height:220px; right:-70px; bottom:-90px; border-radius:50%; background:linear-gradient(135deg,rgba(36,107,254,.2),rgba(166,91,223,.04)); }
body > header:not(.top) + main .card h2,body > header:not(.top) + main .card p { position:relative; z-index:1; }
.card h2 { font-size: 1.45rem !important; letter-spacing: .01em; }
.card p { color: var(--apple-muted) !important; }

/* Shared top navigation */
.top { width: 100%; min-height: 76px !important; height: auto !important; padding: 16px 28px !important; display: flex !important; align-items: center !important; gap: 26px !important; background: var(--apple-surface) !important; border-bottom: 1px solid var(--apple-line) !important; backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); position: sticky !important; top: 0; z-index: 20; }
.top .brand,.math-top .brand { display:flex !important; flex: 0 0 auto; align-items: baseline; gap: 10px; }
.logo { font-size: 23px !important; font-weight: 800; letter-spacing: .02em !important; }
.top .sub,.math-top .sub { color: var(--apple-muted) !important; font-size: 13px !important; white-space: nowrap; }
.top .tabs,.math-top .tabs { display:flex !important; flex: 1 1 auto; justify-content:flex-start !important; gap: 6px !important; margin: 0 !important; padding: 4px !important; background: rgba(127,150,190,.10) !important; border: 1px solid var(--apple-line) !important; border-radius: 999px !important; overflow-x: auto; }
.top .tabs .tab,.math-top .tabs .tab { flex: 0 0 auto; border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 9px 15px !important; white-space: nowrap; }
.top .tabs .tab.is-on,.math-top .tabs .tab.active { background: var(--apple-surface-solid) !important; color: var(--apple-blue) !important; box-shadow: 0 3px 12px rgba(30,60,110,.1) !important; }
.meta,.header-actions { display:flex !important; flex: 0 0 auto; align-items:center; gap: 10px; margin-left:auto; }
.pill { border-radius:999px !important; background: var(--apple-surface-solid) !important; border:1px solid var(--apple-line) !important; padding: 8px 12px; white-space:nowrap; }
.home-link { display:inline-flex !important; align-items:center; padding:9px 15px; border:1px solid var(--apple-line); border-radius:999px; background:var(--apple-surface-solid); color:var(--apple-text); text-decoration:none; font-weight:650; white-space:nowrap; }
.home-link:hover { transform:translateY(-2px); border-color:var(--apple-blue); }
.math-top { max-width:none !important; text-align:left !important; }
.math-top .tabs { flex: 1 1 auto !important; }

/* Theme switch: pinned to the viewport's bottom-right corner on every page.
   IMPORTANT: this element must stay a direct child of <body>. Any ancestor with
   backdrop-filter/transform/filter becomes the containing block for fixed-position
   descendants, which would park the switch inside the header and overlap the nav. */
.theme-switch { position: fixed !important; right: 22px !important; bottom: 22px !important; top: auto !important; left: auto !important; z-index: 120 !important; display:inline-flex !important; align-items:center; gap:8px; margin:0 !important; padding:9px 14px !important; border:1px solid var(--apple-line) !important; border-radius:999px !important; background:var(--apple-surface-solid) !important; color:var(--apple-text) !important; box-shadow:0 12px 30px rgba(20,45,90,.22) !important; }
.theme-switch:hover { transform: translateY(-2px); }
.theme-switch .track { flex:none; }
.theme-switch .switch-label { font-size:13px; white-space:nowrap; }

/* Content pages */
.view { max-width:1180px !important; margin:0 auto !important; padding-bottom:104px !important; }
.math-top + main { padding-top:32px !important; padding-bottom:104px !important; }
.stage { min-height:430px !important; padding:54px !important; }
.scramble { font-size:clamp(25px,4vw,44px) !important; letter-spacing:.02em; }
.answer { border-top:1px solid var(--apple-line) !important; }
.case-card { border-radius:18px !important; background:var(--apple-surface) !important; border-color:var(--apple-line) !important; }
.case-card:hover { transform:translateY(-3px) scale(1.01) !important; }

@keyframes apple-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.panel.active { animation:apple-in .35s var(--apple-ease); }
@media (max-width: 800px) {
  .top { padding:14px 16px !important; gap:12px !important; flex-wrap:wrap; }
  .top .brand,.math-top .brand { flex:1 1 auto; }
  .top .tabs,.math-top .tabs { order:3; flex-basis:100%; }
  .meta,.header-actions { margin-left:auto; }
  .stage { padding:28px 18px !important; }
  .math-top + main { padding-top:22px !important; padding-bottom:96px !important; }
  body > header:not(.top) { padding:44px 20px 14px !important; }
  body > header:not(.top) + main { grid-template-columns:1fr !important; padding:20px 20px 96px !important; }
  body > header:not(.top) + main .card { min-height:175px !important; padding:26px !important; }
  .theme-switch { right:14px !important; bottom:14px !important; padding:8px 12px !important; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation:none !important; transition:none !important; } }