/* Skin: Aurora. Near-black with soft glows, glassy hairline panels, silver pill buttons, small mono labels.
   Every coloured part is built from one hue, --h (0 to 360), so the hue slider in the admin picker can recolour the whole skin at once.
   Admin preview only. */

html:root[data-skin="aurora"] {
  --h: 250;
  --paper: hsl(var(--h) 38% 4.5%);
  --card: hsl(var(--h) 30% 8%);
  --ink: hsl(var(--h) 40% 94%);
  --muted: hsl(var(--h) 12% 66%);
  --line: rgba(255, 255, 255, .1);
  --accent: hsl(var(--h) 100% 74%);
  --accent-dark: hsl(var(--h) 100% 83%);
  --tint: hsla(var(--h) 100% 74% / .1);
  --ok: #4ade80;
  --bad: #ff7a90;
  --info: #7cc0ff;
  --warn: #fbbf24;
  --ok-tint: rgba(74, 222, 128, .1);
  --bad-tint: rgba(255, 122, 144, .1);
  --info-tint: rgba(124, 192, 255, .1);
  --warn-tint: rgba(251, 191, 36, .1);
  --serif: "Inter", "Instrument Sans", "Helvetica Neue", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sans: "Inter", "Instrument Sans", "Helvetica Neue", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;
  --radius: 16px;
  --shadow: 0 24px 60px -36px rgba(0, 0, 0, .9);
  color-scheme: dark;
}
html[data-skin="aurora"] #theme-toggle { display: none; }
html[data-skin="aurora"] body {
  font-size: 16.5px; line-height: 1.65; letter-spacing: -.005em;
  background:
    radial-gradient(46rem 32rem at 12% 14rem, hsla(var(--h) 100% 60% / .26), transparent 65%),
    radial-gradient(40rem 34rem at 92% 48rem, hsla(calc(var(--h) + 28) 75% 50% / .2), transparent 65%),
    radial-gradient(60rem 30rem at 50% 100%, hsla(var(--h) 80% 50% / .16), transparent 70%),
    var(--paper);
}

html[data-skin="aurora"] h1, html[data-skin="aurora"] h2, html[data-skin="aurora"] h3 { font-weight: 600; letter-spacing: -.035em; line-height: 1.12; }
html[data-skin="aurora"] .hero h1 { font-size: min(3.6rem, 6.9cqi); line-height: 1.06; }
html[data-skin="aurora"] .hero h1 .l1, html[data-skin="aurora"] .hero h1 .l2 { white-space: normal; text-wrap: balance; }
/* Headline: white fading to grey, with the key words in the accent hue */
html[data-skin="aurora"] .hero h1 .l1 { background: linear-gradient(180deg, #ffffff 25%, hsl(var(--h) 14% 66%) 120%); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-skin="aurora"] .hero h1 mark { background: linear-gradient(90deg, hsl(var(--h) 100% 90%), hsl(var(--h) 100% 74%)); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-skin="aurora"] mark { background: none; color: var(--accent-dark); }
html[data-skin="aurora"] .hero p { color: var(--muted); font-size: 1.05rem; }
html[data-skin="aurora"] a { color: var(--accent-dark); text-decoration-color: hsla(var(--h) 100% 83% / .4); }
html[data-skin="aurora"] a:hover { color: #fff; }
html[data-skin="aurora"] :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 10px; }

html[data-skin="aurora"] .site-header { background: transparent; border-bottom: 1px solid var(--line); }
html[data-skin="aurora"] .logo { font-family: var(--sans); font-weight: 600; letter-spacing: -.03em; font-size: 1.25rem; display: inline-flex; align-items: center; gap: .5rem; }
html[data-skin="aurora"] .logo, html[data-skin="aurora"] .logo:hover { color: var(--ink); }
html[data-skin="aurora"] .logo .mascot { width: 34px; height: auto; margin: 0; flex: none; animation: none; filter: drop-shadow(0 0 10px hsla(var(--h) 100% 65% / .6)); }
/* The original logo tag: the accent block behind the word, tilted a little */
html[data-skin="aurora"] .logo span { background: var(--accent); color: hsl(var(--h) 40% 6%); padding: .08em .38em .14em; border-radius: .32em; transform: rotate(-2deg); margin-left: .05em; display: inline-block; }
html[data-skin="aurora"] .navlink { color: var(--muted); font-weight: 500; }
html[data-skin="aurora"] .navlink:hover { color: #fff; }
html[data-skin="aurora"] .site-footer { background: transparent; border-top: 1px solid var(--line); margin-top: 2rem; }
html[data-skin="aurora"] .site-footer h2 { color: #fff; }

/* Nero takes the hue too: feelers in the accent hue, body in a warm contrast */
html[data-skin="aurora"] .mascot .nt, html[data-skin="aurora"] .mascot .tip { fill: hsl(var(--h) 90% 76%); }
html[data-skin="aurora"] .mascot .nts { stroke: hsl(var(--h) 90% 76%); }
html[data-skin="aurora"] .mascot .nu { fill: hsl(calc(var(--h) + 120) 82% 64%); }

html[data-skin="aurora"] .button, html[data-skin="aurora"] .ask button {
  border: 0; border-radius: 999px; background: linear-gradient(180deg, #ffffff, hsl(var(--h) 15% 82%)); color: hsl(var(--h) 40% 6%); font-weight: 600; letter-spacing: -.01em; min-height: 42px; padding: .55rem 1.3rem;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .55) inset, 0 10px 28px -10px hsla(var(--h) 100% 65% / .65); transition: transform .15s ease, box-shadow .15s ease;
}
html[data-skin="aurora"] .button:hover, html[data-skin="aurora"] .ask button:hover { color: hsl(var(--h) 40% 6%); transform: translateY(-1px); box-shadow: 0 0 0 1px #fff inset, 0 14px 34px -10px hsla(var(--h) 100% 65% / .9); }
html[data-skin="aurora"] .button:active, html[data-skin="aurora"] .ask button:active { transform: translateY(0); }
html[data-skin="aurora"] .button.ghost { background: transparent; color: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .3) inset; }
html[data-skin="aurora"] .button.ghost:hover { color: #fff; background: rgba(255, 255, 255, .06); box-shadow: 0 0 0 1px rgba(255, 255, 255, .55) inset; }
html[data-skin="aurora"] .button.small { min-height: 34px; padding: .35rem .9rem; }

html[data-skin="aurora"] .card, html[data-skin="aurora"] .tile, html[data-skin="aurora"] .versus, html[data-skin="aurora"] .steps li, html[data-skin="aurora"] .stat, html[data-skin="aurora"] .badge-list li {
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
  border: 1px solid rgba(255, 255, 255, .09); border-radius: 14px; box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
html[data-skin="aurora"] .tile { transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
html[data-skin="aurora"] .tile, html[data-skin="aurora"] .tile:hover { color: var(--ink); }
html[data-skin="aurora"] .tile:hover { transform: translateY(-2px); border-color: hsla(var(--h) 100% 74% / .65); box-shadow: 0 0 0 1px hsla(var(--h) 100% 74% / .25), 0 24px 50px -24px hsla(var(--h) 100% 60% / .6); }
html[data-skin="aurora"] .tile .t-subject { font-family: var(--sans); font-weight: 600; letter-spacing: -.025em; font-size: 1.15rem; }
html[data-skin="aurora"] .card h2, html[data-skin="aurora"] .kicker, html[data-skin="aurora"] .tile .t-in, html[data-skin="aurora"] .ask label {
  font-family: var(--mono); font-size: .68rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
}
html[data-skin="aurora"] .card h2, html[data-skin="aurora"] .kicker { color: var(--accent); }
html[data-skin="aurora"] .ask label, html[data-skin="aurora"] .tile .t-in { color: var(--muted); }
html[data-skin="aurora"] .ask input, html[data-skin="aurora"] .ask select, html[data-skin="aurora"] .ask textarea {
  background-color: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px; color: var(--ink); font-weight: 500;
}
html[data-skin="aurora"] .ask input:focus, html[data-skin="aurora"] .ask select:focus, html[data-skin="aurora"] .ask textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px hsla(var(--h) 100% 74% / .25); outline: none; }
html[data-skin="aurora"] .step-art { border-radius: 12px; background: hsla(var(--h) 100% 74% / .12); stroke: var(--accent-dark); }
html[data-skin="aurora"] .step-n { background: var(--accent); color: hsl(var(--h) 40% 6%); }
html[data-skin="aurora"] .topics a, html[data-skin="aurora"] .share-icon, html[data-skin="aurora"] .theme-toggle {
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; color: var(--ink); box-shadow: none; font-weight: 500;
}
html[data-skin="aurora"] .share-icon { border-radius: 12px; }
html[data-skin="aurora"] .topics a:hover, html[data-skin="aurora"] .share-icon:hover { border-color: var(--accent); color: #fff; background: hsla(var(--h) 100% 74% / .14); }
html[data-skin="aurora"] .ticker { background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); border-radius: 999px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
html[data-skin="aurora"] .tk-item a { color: var(--accent-dark); }
html[data-skin="aurora"] .notice { border-radius: 12px; border-width: 1px; border-left-width: 1px; color: var(--ink); }
html[data-skin="aurora"] .finder-toggle { color: var(--accent-dark); border-bottom: 1px dashed hsla(var(--h) 100% 83% / .5); }
html[data-skin="aurora"] .question-links li { border-bottom: 1px solid var(--line); }
html[data-skin="aurora"] .pbar { border-radius: 999px; }
html[data-skin="aurora"] .adminbar { background: rgba(255, 255, 255, .05); color: var(--ink); border: 1px solid rgba(255, 255, 255, .15); }

/* Softer versions of the components that are drawn with heavy outlines and hard shadows in the default look */
html[data-skin="aurora"] .explanation .hook { border-bottom: 1px solid var(--line); }
html[data-skin="aurora"] .explanation .breakdown { background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); border-left: 3px solid var(--accent); border-radius: 12px; box-shadow: none; }
html[data-skin="aurora"] .challenge-card, html[data-skin="aurora"] .made-banner {
  background: linear-gradient(135deg, hsla(var(--h) 100% 74% / .16), rgba(255, 255, 255, .03)); border: 1px solid hsla(var(--h) 100% 74% / .3); border-radius: 16px; box-shadow: var(--shadow);
}
html[data-skin="aurora"] .quiz, html[data-skin="aurora"] .versus { border: 1px solid rgba(255, 255, 255, .12); border-radius: 16px; box-shadow: var(--shadow); }
html[data-skin="aurora"] .engage { background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .09); border-radius: 14px; }
html[data-skin="aurora"] .vbtn { border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .04); }
html[data-skin="aurora"] .vbtn:hover:not(:disabled) { border-color: var(--accent); color: #fff; background: hsla(var(--h) 100% 74% / .14); }
html[data-skin="aurora"] .vbtn.on { background: var(--accent); border-color: var(--accent); color: hsl(var(--h) 40% 6%); }
html[data-skin="aurora"] .chip { border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); }
html[data-skin="aurora"] .chip:hover:not(:disabled) { border-color: var(--accent); background: hsla(var(--h) 100% 74% / .14); }
html[data-skin="aurora"] .search input { background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .14); }
html[data-skin="aurora"] .search button { border: 0; background: linear-gradient(180deg, #ffffff, hsl(var(--h) 15% 82%)); color: hsl(var(--h) 40% 6%); box-shadow: 0 10px 28px -10px hsla(var(--h) 100% 65% / .65); }
html[data-skin="aurora"] .suggest { background: var(--card); border: 1px solid rgba(255, 255, 255, .15); box-shadow: var(--shadow); }
html[data-skin="aurora"] .authtabs { background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .12); }
html[data-skin="aurora"] .authtabs a.on { background: var(--accent); color: hsl(var(--h) 40% 6%); box-shadow: none; }
html[data-skin="aurora"] .tabs a, html[data-skin="aurora"] .review .actions button, html[data-skin="aurora"] .streak-chip, html[data-skin="aurora"] .formula { border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .04); color: var(--ink); }
html[data-skin="aurora"] .tabs a.on { background: var(--accent); border-color: var(--accent); color: hsl(var(--h) 40% 6%); }
html[data-skin="aurora"] .vs-side { border: 1px solid rgba(255, 255, 255, .12); }
html[data-skin="aurora"] .nero-bubble, html[data-skin="aurora"] .nero-bubble::before, html[data-skin="aurora"] .nero-bubble::after { border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .05); }
html[data-skin="aurora"] .category-form select { border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .04); }
html[data-skin="aurora"] .embed-box textarea, html[data-skin="aurora"] .learned a { background: rgba(255, 255, 255, .04); }
html[data-skin="aurora"] .compare thead th { border-bottom: 1px solid var(--line); }
html[data-skin="aurora"] .look-btn { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .16); }
html[data-skin="aurora"] .look-btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: hsl(var(--h) 40% 6%); }
html[data-skin="aurora"] .hue-row .linkish { color: var(--accent-dark); }
html[data-skin="aurora"] .card h2 { font-size: .85rem; }
html[data-skin="aurora"] .kicker { font-size: .82rem; }