/* THE HOMEPAGE. Near-black with one muted gold; no neon and no purple. Text on the left, the two doors on the right, the board's own picture beside them (drawn in js/home.js). */
:root { --bg: #080c12; --panel: rgba(15, 21, 30, .82); --line: rgba(255, 255, 255, .1); --ink: #f2f4f7; --mute: #9aa5b5; --gold: #d9b44a; --gold-d: #b8923a; --slate: #3b4656; --slate-d: #2e3846; --radius: 20px; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--ink); font-family: "Nunito", ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; overflow-x: hidden; position: relative; }
a { color: inherit; }

/* the background: a deep gradient, faint roundabout rings, and two gold curves at the bottom corners */
.bg { position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 0; pointer-events: none; background:
  radial-gradient(900px 620px at 76% 42%, rgba(217, 180, 74, .07), transparent 62%),
  radial-gradient(1100px 700px at 10% 10%, rgba(60, 84, 120, .16), transparent 60%),
  linear-gradient(180deg, #0b1118 0%, #070a10 100%); }
.bg::before { content: ""; position: absolute; left: -14vmin; bottom: -22vmin; width: 74vmin; height: 74vmin; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .05); box-shadow: 0 0 0 7vmin rgba(255, 255, 255, 0), inset 0 0 0 7vmin rgba(255, 255, 255, 0); background: repeating-radial-gradient(circle at center, transparent 0 5vmin, rgba(255, 255, 255, .035) 5vmin calc(5vmin + 1px)); }
.swoosh { position: absolute; bottom: 0; width: min(46vw, 620px); height: 22vh; max-height: 200px; } .swoosh.left { left: 0; } .swoosh.right { right: 0; }

.top { position: relative; z-index: 2; padding: max(16px, env(safe-area-inset-top)) max(28px, env(safe-area-inset-left)) 14px; border-bottom: 1px solid var(--line); background: rgba(8, 12, 18, .5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.word { font-weight: 800; font-size: 19px; line-height: 1; letter-spacing: .01em; } .word small { display: block; margin-top: 4px; font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); font-weight: 800; }

.stage { position: relative; z-index: 2; flex: 1; width: min(1360px, 100%); margin: 0 auto; padding: clamp(18px, 4vh, 48px) max(28px, env(safe-area-inset-left)) clamp(30px, 6vh, 70px); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 60px); align-items: center; }
.intro { max-width: 600px; }
.chip { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 22px; padding: 7px 14px; border-radius: 10px; background: rgba(217, 180, 74, .09); border: 1px solid rgba(217, 180, 74, .3); color: var(--gold); font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(32px, 3.3vw, 50px); line-height: 1.08; font-weight: 850; letter-spacing: -.02em; text-wrap: balance; } h1 span { display: block; color: var(--gold); }
.lede { margin: 22px 0 0; max-width: 34em; color: #c3cbd8; font-size: clamp(16px, 1.45vw, 19px); line-height: 1.6; }
.soon { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 30px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--mute); }
.soon .lbl { margin-right: 4px; text-transform: uppercase; letter-spacing: .2em; font-weight: 800; font-size: 11px; } .soon li:not(.lbl) { padding: 5px 12px; border-radius: 999px; border: 1px dashed rgba(255, 255, 255, .2); }

.panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 14px; border-radius: 26px; border: 1px solid rgba(217, 180, 74, .4); background: linear-gradient(160deg, rgba(20, 28, 40, .85), rgba(10, 14, 20, .88)); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 40px 90px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .06); }
.doors { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.door { padding: 20px; border-radius: var(--radius); background: rgba(8, 12, 18, .55); border: 1px solid var(--line); animation: rise .6s cubic-bezier(.2, .8, .2, 1) both; } .door.student { animation-delay: .08s; }
.door-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; }
.badge { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; color: #17130a; background: var(--gold); } .student .badge { background: #8794a6; color: #0d121a; }
.door h2 { margin: 2px 0 0; font-size: 21px; letter-spacing: -.01em; } .door-head p { margin: 5px 0 0; color: var(--mute); font-size: 14px; line-height: 1.45; }

.btn { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; min-height: 50px; border: 0; border-radius: 12px; font: inherit; font-size: 16px; font-weight: 800; cursor: pointer; text-decoration: none; transition: filter .15s, transform .12s; }
.btn.green { color: #fff; background: linear-gradient(180deg, #2f9a5a, #1f7a45); margin-bottom: 4px; } .practice-note { margin: 0 0 10px; font-size: 13px; opacity: .75; text-align: center; }
.btn.gold { color: #17130a; background: linear-gradient(180deg, #e3c35f, var(--gold)); } .btn.slate { color: #eef1f5; background: linear-gradient(180deg, #465366, var(--slate)); }
.btn:hover { filter: brightness(1.08); transform: translateY(-1px); } .btn:active { transform: none; } .btn[disabled] { filter: grayscale(.5) brightness(.8); cursor: progress; transform: none; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

form { margin-top: 2px; } form[hidden], .welcome[hidden], .btn[hidden] { display: none; }
.field { display: block; margin-bottom: 13px; } .field > span:first-child { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 700; color: #cfd6e2; }
input { width: 100%; min-height: 50px; padding: 0 15px; border-radius: 12px; border: 1.5px solid rgba(255, 255, 255, .14); background: rgba(5, 8, 13, .75); color: var(--ink); font: inherit; font-size: 16px; outline: none; transition: border-color .15s, box-shadow .15s; }
input::placeholder { color: #667284; } input.code { letter-spacing: .26em; font-weight: 800; text-transform: uppercase; } input.code::placeholder { letter-spacing: .06em; font-weight: 500; }
.door.instructor input:focus { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(217, 180, 74, .2); } .door.student input:focus { border-color: #8794a6; box-shadow: 0 0 0 4px rgba(135, 148, 166, .22); }
input[aria-invalid="true"] { border-color: #e2776c; }
.pw { position: relative; display: block; } .pw input { padding-right: 76px; }
.ghost { font: inherit; cursor: pointer; border: 1.5px solid rgba(255, 255, 255, .16); background: transparent; color: var(--mute); border-radius: 9px; } .ghost:hover { color: var(--ink); border-color: rgba(255, 255, 255, .38); }
.pw .ghost { position: absolute; right: 8px; top: 8px; height: 34px; padding: 0 12px; font-size: 13px; font-weight: 700; }
.msg { min-height: 1.4em; margin: 12px 2px 0; font-size: 14px; line-height: 1.45; color: var(--mute); } .msg.bad { color: #f0a198; }
.alt { margin: 8px 0 0; text-align: center; font-size: 13.5px; color: var(--mute); } .alt a { text-underline-offset: 3px; } .alt a:hover { color: var(--ink); }
.link { font: inherit; font-size: 13.5px; cursor: pointer; border: 0; background: none; color: var(--mute); text-decoration: underline; text-underline-offset: 3px; padding: 4px 2px; } .link:hover { color: var(--ink); } .link.block { display: block; margin: 8px auto 0; }
.welcome .hello { margin: 0 0 14px; font-size: 17px; }

.nojs { position: relative; z-index: 3; text-align: center; color: #f0a198; }

@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (max-width: 899px) {
  .stage { grid-template-columns: 1fr; gap: 28px; padding-top: 16px; } .intro { max-width: none; } .door.student { order: -1; } .top { padding-left: 20px; padding-right: 20px; }          /* a phone or a small tablet: one column, and the student's door first */
  .chip { margin-bottom: 16px; } .lede { margin-top: 16px; } .soon { margin-top: 20px; }
}
@media (max-width: 899px) { h1 { font-size: clamp(32px, 8.6vw, 50px); } }
@media (max-height: 560px) and (orientation: landscape) { .stage { grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; } .door.student { order: 0; } .lede, .soon { display: none; } h1 { font-size: 30px; } .chip { margin-bottom: 10px; } .door { padding: 14px; } .door-head { margin-bottom: 12px; } .door-head p { display: none; } }
@media (prefers-reduced-motion: reduce) { .door { animation: none; } .btn { transition: none; } }

.mark { flex: none; width: 46px; height: 46px; filter: drop-shadow(0 2px 10px rgba(217, 180, 74, .25)); }

/* Install the app (js/pwa.js): a button where the browser offers it, a short how-to on an iPhone or iPad */
.top { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.get-app { display: flex; align-items: center; } .install[hidden], .install-ios[hidden] { display: none; }
.install { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border-radius: 12px; border: 1px solid rgba(217, 180, 74, .55); background: rgba(217, 180, 74, .12); color: #ecd079; font: inherit; font-weight: 800; font-size: 15px; cursor: pointer; }
.install:hover { background: rgba(217, 180, 74, .2); } .install-ios { margin: 0; max-width: 260px; color: #b8c1cf; font-size: 13px; line-height: 1.35; text-align: right; }
.my-results { display: inline-block; margin-top: 12px; color: #ecd079; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; } .my-results[hidden] { display: none; }
/* the user guide (guide.html), from the homepage */
.guide-link { display: inline-flex; align-items: center; gap: 10px; margin: 24px 0 0; padding: 13px 18px; border-radius: 14px; background: rgba(217, 180, 74, .1); border: 1.5px solid rgba(217, 180, 74, .55); color: #f3dc94; font-weight: 800; font-size: 16px; text-decoration: none; }
.guide-link:hover { background: rgba(217, 180, 74, .18); } .guide-link span { transition: transform .2s; } .guide-link:hover span { transform: translateX(3px); }
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.top-guide { margin-left: auto; padding: 8px 14px; border-radius: 12px; border: 1px solid var(--line); text-decoration: none; font-weight: 700; font-size: 14px; color: #dfe5ee; } .top-guide:hover { border-color: var(--gold); }

/* the phones the board supports (the same line as the "too old" message, js/oldbrowser.js) */
.works-on { display: flex; align-items: flex-start; gap: 8px; margin: 18px 0 0; padding: 10px 12px; max-width: 34em; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); color: var(--mute, #9aa5b5); font-size: 13.5px; line-height: 1.5; }
.works-on svg { flex: none; margin-top: 2px; color: var(--gold, #d9b44a); } .works-on b { color: #dfe5ee; }

/* THE STUDENT VIDEO: a big button that cannot be missed, under the title (also on a phone held sideways), and the player over the page (js/tutorial.js) */
.howto { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 24px 0 0; }
.watch { display: inline-flex; align-items: center; gap: 14px; padding: 12px 22px 12px 12px; border: 0; border-radius: 18px; cursor: pointer; text-align: left; font: inherit; color: #17130a; background: linear-gradient(180deg, #ecd077, var(--gold)); box-shadow: 0 10px 30px rgba(217, 180, 74, .28); animation: watchPulse 2.6s ease-in-out infinite; }
.watch .play { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: #17130a; color: var(--gold); flex: none; }
.watch .w b { display: block; font-size: 18px; font-weight: 850; line-height: 1.15; } .watch .w small { display: block; margin-top: 3px; font-size: 13px; font-weight: 700; opacity: .8; }
.watch:hover { filter: brightness(1.05); } .watch:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@keyframes watchPulse { 0%, 100% { box-shadow: 0 10px 30px rgba(217, 180, 74, .25); } 50% { box-shadow: 0 10px 34px rgba(217, 180, 74, .5), 0 0 0 6px rgba(217, 180, 74, .14); } }
@media (prefers-reduced-motion: reduce) { .watch { animation: none; } }
.guide-link { display: inline-flex; align-items: center; gap: 8px; padding: 8px 4px; font-weight: 800; font-size: 15px; color: #dfe5ee; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(217, 180, 74, .6); }
.guide-link svg { color: var(--gold); }
@media (max-height: 560px) and (orientation: landscape) { .howto { margin-top: 14px; } .watch { padding: 9px 16px 9px 9px; } .watch .play { width: 40px; height: 40px; } .watch .w b { font-size: 16px; } }
.tut-modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: start center; overflow-y: auto; padding: max(10px, env(safe-area-inset-top)) 10px 10px; background: rgba(3, 6, 10, .86); }
.tut-modal[hidden] { display: none; }
.tut-box { width: min(1100px, 100%); padding: 12px; border-radius: 20px; background: #0e1520; border: 1px solid rgba(217, 180, 74, .4); }
.tut-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 2px 10px; font-size: 17px; }
.tut-x { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: transparent; color: #fff; font-size: 24px; cursor: pointer; }
body.tut-open { overflow: hidden; }
.tut-video { display: block; width: 100%; max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px); border-radius: 12px; background: #000; }
.tut-video::cue { font-size: 1.15em; line-height: 1.35; background: rgba(0, 0, 0, .78); color: #fff; }
.tut-bar { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 10px 0 4px; } .tut-group { display: flex; flex-wrap: wrap; gap: 10px; }
.tut-cc { min-height: 46px; padding: 0 18px; border-radius: 12px; border: 2px solid var(--gold, #d9b44a); background: transparent; color: #f2f4f7; font: inherit; font-weight: 800; font-size: 15px; cursor: pointer; }
.tut-cc[aria-pressed="true"] { background: var(--gold, #d9b44a); color: #17130a; }
.tut-chapters { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.tut-chapters button { width: 100%; min-height: 46px; display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); color: #e6ebf2; font: inherit; font-weight: 700; font-size: 14px; text-align: left; cursor: pointer; }
.tut-chapters .n { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: rgba(217, 180, 74, .18); color: #ecd077; font-size: 13px; } .tut-chapters .t { flex: 1; } .tut-chapters .at { opacity: .6; font-size: 12.5px; }

.help-line { margin: 8px 0 0; font-size: 14px; color: var(--mute, #9aa5b5); }