:root {
  
  --navy: #0b1f3a;
  --blue: #2563eb;
  --sky: #60a5fa;
  --frost: #eaf7ff;
  --vacuum: #050b16;
  --photon: #7dd3fc;
  --violet: #8b5cf6;
  --teal: #14b8a6;

  
  --r-xs: 6px;
  --r-sm: 9px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-2xl: 30px;
  --r-pill: 999px;

  
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --spring: cubic-bezier(0.34, 1.36, 0.64, 1);
  --t-fast: 140ms;
  --t: 240ms;
  --t-slow: 420ms;
  --t-instant: 90ms;
  --t-teach: 900ms;
  --t-cinema: 1200ms;
  --ease-teach: cubic-bezier(0.45, 0, 0.2, 1);

  
  --fs-mega: clamp(46px, 6.4vw, 96px);
  --fs-h2: clamp(34px, 4.2vw, 60px);
  --fs-h3: clamp(22px, 2vw, 28px);
  --fs-lede: clamp(17px, 1.45vw, 20px);
  --fs-label: 12px;
}





:root {
  color-scheme: light;

  
  --bg: #f3f6fa;
  --bg2: #e8eef7;
  --surf: #ffffff;
  --surf2: #f7f9fc;
  --surf3: #eef2f8;

  
  --tx: #0b1f3a;
  --tx2: #3a4c66;
  --tx3: #56657a;
  --tx4: #5e6d83;

  
  --line: rgb(11 31 58 / 8%);
  --line2: rgb(11 31 58 / 14%);
  --line3: rgb(11 31 58 / 24%);
  --wire: #a9b5cb;

  
  --fill: rgb(11 31 58 / 5%);
  --fill2: rgb(11 31 58 / 8%);
  --fill3: rgb(11 31 58 / 12%);

  
  --acc: #2563eb;
  --acc2: #1d4ed8;
  --accdeep: #1e40af;
  --acctx: #1d4ed8;
  --accsoft: rgb(37 99 235 / 10%);
  --accsoft2: rgb(37 99 235 / 18%);
  --accfill: #2563eb;
  --accfill2: #1d4ed8;
  --onacc: #ffffff;
  --focus: rgb(37 99 235 / 45%);

  
  --ok: #15803d;
  --oksoft: rgb(22 163 74 / 12%);
  --warn: #b45309;
  --warnsoft: rgb(217 119 6 / 13%);
  --bad: #dc2626;
  --err: #dc2626;
  --badtx: #b91c1c;
  --badsoft: rgb(220 38 38 / 10%);

  
  --sim: #0e7490;
  --simsoft: rgb(14 116 144 / 10%);
  --lv-beginner: #0d9488;
  --lv-intermediate: #2563eb;
  --lv-advanced: #7c3aed;
  --phase: #7c3aed;

  
  --seq-0: #e7eef8;
  --seq-1: #bfd4f6;
  --seq-2: #8ab2f2;
  --seq-3: #4f86ec;
  --seq-4: #2563eb;
  --seq-5: #1a47b0;

  
  --glass: rgb(255 255 255 / 64%);
  --glass-strong: rgb(255 255 255 / 82%);
  --glass-thin: rgb(255 255 255 / 42%);
  --glass-border: rgb(255 255 255 / 75%);
  --glass-edge: rgb(11 31 58 / 7%);
  --glass-shine: rgb(255 255 255 / 90%);
  --scrim: rgb(11 20 38 / 32%);

  
  --shadow-1: 0 1px 2px rgb(11 31 58 / 6%), 0 1px 1px rgb(11 31 58 / 3%);
  --shadow-2: 0 2px 6px rgb(11 31 58 / 5%), 0 8px 24px -6px rgb(11 31 58 / 10%);
  --shadow-3: 0 4px 12px rgb(11 31 58 / 6%), 0 24px 60px -12px rgb(11 31 58 / 22%);
  --shadow-glow: 0 10px 30px -8px rgb(37 99 235 / 45%);

  
  --aurora-1: rgb(96 165 250 / 32%);
  --aurora-2: rgb(37 99 235 / 16%);
  --aurora-3: rgb(167 199 255 / 40%);
}

@media (prefers-color-scheme: dark) {




:root {
  color-scheme: dark;

  
  --bg: #050b16;
  --bg2: #081224;
  --surf: #0c1628;
  --surf2: #0f1b31;
  --surf3: #14223b;

  
  --tx: #edf2f9;
  --tx2: #b3c0d3;
  --tx3: #8090a8;
  --tx4: #7a8aa3;

  
  --line: rgb(255 255 255 / 7%);
  --line2: rgb(255 255 255 / 11%);
  --line3: rgb(255 255 255 / 20%);
  --wire: #4a5d82;

  
  --fill: rgb(255 255 255 / 5%);
  --fill2: rgb(255 255 255 / 8%);
  --fill3: rgb(255 255 255 / 12%);

  
  --acc: #3b82f6;
  --acc2: #5a97fa;
  --accdeep: #2f6fe0;
  --acctx: #8dbbff;
  --accsoft: rgb(96 165 250 / 14%);
  --accsoft2: rgb(96 165 250 / 24%);
  --accfill: #2563eb;
  --accfill2: #1d4ed8;
  --onacc: #ffffff;
  --focus: rgb(125 180 255 / 55%);

  
  --ok: #4ade80;
  --oksoft: rgb(74 222 128 / 13%);
  --warn: #fbbf24;
  --warnsoft: rgb(251 191 36 / 13%);
  --bad: #f87171;
  --err: #f87171;
  --badtx: #fca5a5;
  --badsoft: rgb(248 113 113 / 13%);

  
  --sim: #67e8f9;
  --simsoft: rgb(103 232 249 / 12%);
  --lv-beginner: #2dd4bf;
  --lv-intermediate: #60a5fa;
  --lv-advanced: #a78bfa;
  --phase: #a78bfa;

  
  --seq-0: #12213a;
  --seq-1: #173563;
  --seq-2: #1f4e98;
  --seq-3: #2f6fe0;
  --seq-4: #5a97fa;
  --seq-5: #a9ccff;

  
  --glass: rgb(14 26 47 / 58%);
  --glass-strong: rgb(16 28 50 / 82%);
  --glass-thin: rgb(14 26 47 / 38%);
  --glass-border: rgb(255 255 255 / 9%);
  --glass-edge: rgb(0 0 0 / 40%);
  --glass-shine: rgb(255 255 255 / 14%);
  --scrim: rgb(0 4 12 / 60%);

  
  --shadow-1: 0 1px 2px rgb(0 0 0 / 40%);
  --shadow-2: 0 2px 8px rgb(0 0 0 / 30%), 0 12px 32px -8px rgb(0 0 0 / 50%);
  --shadow-3: 0 8px 24px rgb(0 0 0 / 35%), 0 32px 80px -16px rgb(0 0 0 / 70%);
  --shadow-glow: 0 10px 34px -8px rgb(59 130 246 / 60%);

  
  --aurora-1: rgb(37 99 235 / 30%);
  --aurora-2: rgb(96 165 250 / 12%);
  --aurora-3: rgb(30 64 175 / 30%);
}

}
/*
Qourse: an interactive course that teaches quantum computing through
short lessons, graded exercises and a live qubit simulator.

Copyright 2026 Brightskies Technologies.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

/**
 * The public course pages (the catalogue and one page per skill). The build puts the design system's
 * tokens in front of this file; it adds only layout. Plain CSS with no script, no web fonts: the
 * pages read the same with scripts off and paint at once.
 */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--tx);
  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    sans-serif;
  font-size: 17px;
  line-height: 1.6;
}

a {
  color: var(--acctx);
  text-underline-offset: 3px;
}

:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: -100px;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-sm);
  background: var(--accfill);
  color: var(--onacc);
}

.skip-link:focus {
  top: var(--s-4);
  z-index: 10;
}

.site-header,
.site-footer,
main {
  width: min(100% - 2 * var(--s-4), 880px);
  margin-inline: auto;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-4);
}

.site-header__brand {
  display: inline-flex;
}

.site-header__brand img {
  display: block;
  width: 140px;
  height: auto;
}

.site-header__nav {
  display: flex;
  align-items: center;
  gap: var(--s-5);
}

main {
  padding-block: var(--s-8) var(--s-16);
}

h1 {
  margin: var(--s-3) 0;
  font-size: clamp(32px, 6vw, 48px);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

h2 {
  margin: var(--s-10) 0 var(--s-4);
  font-size: 24px;
  line-height: 1.25;
}

h3 {
  margin: 0;
  font-size: 18px;
}

.crumbs,
.facts {
  color: var(--tx3);
  font-size: 15px;
}

.crumbs {
  margin: 0;
}

.facts {
  margin: 0;
}

.level {
  display: inline-block;
  padding: 0 var(--s-3);
  border-radius: var(--r-pill);
  background: var(--accsoft);
  color: var(--acctx);
  font-weight: 600;
}

.lede {
  max-width: 62ch;
  margin: var(--s-4) 0 var(--s-6);
  color: var(--tx2);
  font-size: 19px;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin: 0;
}

.button {
  display: inline-block;
  padding: var(--s-3) var(--s-5);
  border: 1px solid var(--line3);
  border-radius: var(--r-pill);
  background: var(--surf);
  color: var(--tx);
  font-weight: 600;
  text-decoration: none;
}

.button--primary {
  border-color: transparent;
  background: var(--accfill);
  color: var(--onacc);
}

.button:hover {
  border-color: var(--acc);
}

.lessons,
.cards {
  display: grid;
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lessons {
  counter-reset: lesson;
}

.lesson,
.card {
  padding: var(--s-5);
  border: 1px solid var(--line2);
  border-radius: var(--r-lg);
  background: var(--surf);
}

.lesson {
  counter-increment: lesson;
}

.lesson h3::before {
  content: counter(lesson) ". ";
  color: var(--tx3);
}

.lesson p,
.card p {
  margin: var(--s-2) 0 0;
}

.card h2 {
  margin: 0;
  font-size: 20px;
}

.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-3) var(--s-6);
  padding-block: var(--s-6) var(--s-10);
  border-top: 1px solid var(--line2);
  color: var(--tx3);
  font-size: 15px;
}

.site-footer p {
  margin: 0;
}

.site-footer nav {
  display: flex;
  gap: var(--s-5);
}

@media (width <= 520px) {
  body {
    font-size: 16px;
  }

  .site-header__nav {
    gap: var(--s-3);
  }

  .site-header__brand img {
    width: 112px;
  }
}