/* Computer Club suite - shared look: deep indigo + bright accents.
   C/D/E/F/G colours: red / orange / yellow / green / teal. */
:root{
  --bg:#15163a; --panel:#1f2150; --panel-2:#272a63;
  --ink:#f5f4ff; --ink-dim:#b7b8de; --accent:#ffd23f; --good:#6bcb77;
  --radius:18px;
  --key-c:#ff5c72; --key-d:#ff9f45; --key-e:#ffd23f; --key-f:#6bcb77; --key-g:#22c6c6;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);
  font-family:"Trebuchet MS","Segoe UI",system-ui,sans-serif;overflow:hidden}
body{display:flex;flex-direction:column;align-items:center}
[hidden]{display:none !important}
button{font:inherit;color:inherit;cursor:pointer}

.screen,.mode{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;padding:8px 16px;overflow:auto}
.title{font-size:clamp(2rem,6vw,3.6rem);margin:4vh 0 0;text-align:center;color:var(--accent);text-shadow:0 4px 0 #0c0d26}
.foot{color:var(--ink-dim);margin-top:auto;padding-top:1em}

/* ---- top bar ---- */
.topbar{width:100%;max-width:1100px;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:50px;flex:none;margin-bottom:10px}
.topbar h2{margin:0;font-size:clamp(1.1rem,2.4vw,1.6rem);text-align:center}
.topbar .hint{color:var(--ink-dim);font-size:.9rem;text-align:right;max-width:34%}
.btn{background:var(--panel-2);border:3px solid #3a3e8a;border-radius:14px;padding:.55em 1em;font-weight:bold;
  text-decoration:none;display:inline-block;transition:transform .08s}
.btn:hover{background:#343a85}
.btn:active{transform:scale(.96)}
.btn:disabled{opacity:.4;cursor:default}
.btn.on{background:var(--accent);color:#1a1b3f;border-color:#fff3b0}
.btn.primary{background:var(--accent);color:#1a1b3f;border-color:#fff3b0}
.row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:8px 0}

/* ---- mode cards ---- */
.mode-cards{display:flex;flex-wrap:wrap;gap:22px;justify-content:center;max-width:1000px;margin-top:1vh}
.mode-card:hover{transform:translateY(-4px) scale(1.02)}
.mode-card{width:210px;padding:18px 12px;border-radius:24px;border:4px solid var(--c,#3a3e8a);background:var(--panel);
  display:flex;flex-direction:column;align-items:center;gap:4px;transition:transform .12s}
.mode-card .ic{font-size:3.4rem;line-height:1.1} .mode-card .nm{font-size:1.3rem;font-weight:bold}
.mode-card .ds{color:var(--ink-dim);font-size:.9rem;text-align:center}

/* ---- canvas stage (aspect ratio locked in CSS; no JS sizing) ---- */
.stage{position:relative;aspect-ratio:16/9;width:min(calc(100% - 6px),calc((100vh - 108px) * 16 / 9));background:#15163a;
  border-radius:14px;overflow:hidden;box-shadow:0 0 0 3px #3a3e8a;margin:3px;flex:none;--u:8px}
.stage canvas{display:block;width:100%;height:100%}
.overlay-root{position:absolute;inset:0;pointer-events:none}
.overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--u)*1.2);
  background:rgba(21,22,58,.72);pointer-events:auto;text-align:center;padding:calc(var(--u)*2)}
.overlay .o-emoji{font-size:calc(var(--u)*9);line-height:1;animation:bob 1.6s ease-in-out infinite}
.overlay .o-title{font-size:calc(var(--u)*4.6);font-weight:bold;color:var(--accent)}
.overlay .o-text{font-size:calc(var(--u)*2.4);color:var(--ink)}
.overlay .o-btns{display:flex;gap:calc(var(--u)*1.5);flex-wrap:wrap;justify-content:center}
.overlay .btn{font-size:calc(var(--u)*2.4)}
.overlay .btn small{opacity:.7;font-weight:normal;margin-left:.4em}
.overlay .o-levels{display:flex;gap:calc(var(--u)*.8)}
.overlay .o-levels button{width:calc(var(--u)*4);height:calc(var(--u)*4);border-radius:50%;font-size:calc(var(--u)*2);padding:0;
  background:var(--panel-2);border:3px solid #3a3e8a;font-weight:bold}
.overlay .o-levels button.cur{background:var(--accent);color:#1a1b3f}
.stars{display:flex;gap:calc(var(--u)*1)}
.stars span{font-size:calc(var(--u)*6);animation:pop .6s cubic-bezier(.3,1.6,.5,1) both}
.stars span:nth-child(2){animation-delay:.2s} .stars span:nth-child(3){animation-delay:.4s}
@keyframes bob{50%{transform:translateY(-6%)}}
@keyframes pop{from{transform:scale(0) rotate(-40deg)}to{transform:scale(1) rotate(0)}}

/* ---- piano ---- */
.piano-wrap{width:100%;max-width:900px;display:flex;flex-direction:column;align-items:center}
.piano{position:relative;display:flex;width:min(100%,760px);height:min(46vh,320px);border-radius:0 0 16px 16px;background:#0c0d26;padding:6px;gap:4px;margin-top:6px}
.key{flex:1;position:relative;background:linear-gradient(#fff,#f2f0ff 85%,#d9d6f5);border-radius:0 0 12px 12px;border:none;color:#1a1b3f;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:14px;gap:4px;
  box-shadow:inset 0 -8px 0 var(--accent),0 4px 0 #000;transition:transform .05s,background .1s}
.key .note{font-size:2rem;font-weight:bold} .key .kk{font-size:1.1rem;background:#e6e4fb;border-radius:8px;padding:2px 10px;color:#3a3e8a;font-weight:bold}
.key[data-note="C"]{--accent:var(--key-c)} .key[data-note="D"]{--accent:var(--key-d)} .key[data-note="E"]{--accent:var(--key-e)}
.key[data-note="F"]{--accent:var(--key-f)} .key[data-note="G"]{--accent:var(--key-g)}
.key.active{background:var(--accent);transform:translateY(4px)}
.key.guide{background:var(--accent);animation:glow 1s ease-in-out infinite}
@keyframes glow{50%{filter:brightness(1.25);transform:translateY(3px)}}
.black{position:absolute;top:6px;width:11%;height:58%;background:linear-gradient(#444,#111);border-radius:0 0 8px 8px;transform:translateX(-50%);
  box-shadow:0 4px 0 #000;pointer-events:none;z-index:2}
.piano-msg{min-height:2.2em;margin:10px 0;font-size:1.2rem;text-align:center;color:var(--accent)}
.warn{color:var(--ink-dim);font-size:.95rem;text-align:center;max-width:560px;margin:4px}
.rec-btn{border-color:#ff5c72}
.rec-btn.recording{background:#ff5c72;color:#fff}

/* ---- fruit keyboard hint ---- */
.kbd{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:8px;flex:none}
.kbd .kr{display:flex;gap:4px}
.kbd .kc{width:clamp(20px,3.4vw,34px);height:clamp(20px,3.4vw,34px);border-radius:7px;background:var(--panel-2);border:2px solid #3a3e8a;
  display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:.8rem;color:var(--ink-dim)}
.kbd .kc.hl{background:var(--accent);color:#1a1b3f;border-color:#fff;transform:scale(1.25);box-shadow:0 0 12px var(--accent)}

/* ---- word hunt ---- */
.words-wrap{display:flex;gap:24px;flex-wrap:wrap;justify-content:center;align-items:flex-start;width:100%;max-width:1100px;margin-top:6px}
.words-left{display:flex;flex-direction:column;align-items:center;max-width:100%}
.wh-grid{display:grid;gap:2px;background:transparent;padding:4px}

@media (max-width:700px){.topbar .hint{display:none}}

.stage.with-kbd{width:min(calc(100% - 6px),calc((100vh - 274px) * 16 / 9))}

/* ---- v2: chunky kid-friendly buttons, picture-first overlays ---- */
.btn{border-radius:18px;border-width:3px;border-bottom-width:6px;padding:.6em 1.1em;font-size:1.05rem}
.btn:active{transform:translateY(3px);border-bottom-width:3px}
.btn.big{display:inline-flex;align-items:center;gap:.4em;font-size:calc(var(--u)*3.2);padding:.35em .9em;border-radius:calc(var(--u)*2.4);border-bottom-width:calc(var(--u)*.8)}
.btn.big .bi{font-size:1.25em;line-height:1}
.btn.big.primary{background:linear-gradient(#ffe47a,#ffc92e);box-shadow:0 0 0 calc(var(--u)*.3) rgba(255,255,255,.35)}
.overlay .o-controls{display:flex;gap:calc(var(--u)*2.2);flex-wrap:wrap;justify-content:center;align-items:center}
.overlay .o-controls .cg{display:inline-flex;align-items:center;gap:calc(var(--u)*.5);background:rgba(255,255,255,.1);padding:calc(var(--u)*.6) calc(var(--u)*1.2);border-radius:calc(var(--u)*1.6)}
.overlay .o-controls .kc{background:#fff;color:#1a1b3f;border-radius:calc(var(--u)*.9);min-width:calc(var(--u)*3.6);padding:0 calc(var(--u)*.7);height:calc(var(--u)*3.6);display:inline-flex;align-items:center;justify-content:center;font-size:calc(var(--u)*2.1);box-shadow:0 calc(var(--u)*.4) 0 #9aa0d8}
.overlay .o-controls i{font-style:normal;font-size:calc(var(--u)*3.2);margin-left:calc(var(--u)*.5)}
.overlay .o-levels{flex-wrap:wrap;justify-content:center;max-width:90%;gap:calc(var(--u)*.6)}
.overlay .o-levels button{width:calc(var(--u)*3.2);height:calc(var(--u)*3.2);font-size:calc(var(--u)*1.6);border-width:2px}
.stars span.dim{filter:grayscale(1);opacity:.3}
.mode-card{width:200px;padding:20px 12px;border-width:5px;border-bottom-width:9px;border-radius:28px}
.mode-card .ic{font-size:4.4rem}
.mode-card .ds{display:none}
.foot{font-size:1.6rem}
.topbar h2{font-size:clamp(1.3rem,2.8vw,1.9rem)}

/* ---- word search ---- */
.words-wrap{position:relative;display:flex;gap:28px;flex-wrap:wrap;justify-content:center;align-items:flex-start;width:min(100%,1000px);margin-top:6px;--u:9px}
.words-left{display:flex;flex-direction:column;align-items:center}
.btn.ico{font-size:1.8rem;padding:.25em .7em;line-height:1.2}
.dots{display:flex;gap:6px;justify-content:flex-end;min-width:90px}
.dots i{width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,.2);display:block}
.dots i.on{background:var(--accent)}
.wh-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px;max-width:330px;align-content:flex-start}
.wh-list li{display:flex;align-items:center;gap:8px;background:var(--panel-2);border:3px solid #3a3e8a;border-bottom-width:5px;border-radius:16px;padding:6px 12px;font-weight:bold;font-size:1.05rem;letter-spacing:.05em}
.wh-list li .e{font-size:1.5rem}
.wh-list li.done{background:#2f7a4a;border-color:#6bcb77;text-decoration:line-through;opacity:.8}
.wh-grid{display:grid;gap:3px;padding:8px;background:rgba(255,255,255,.08);border-radius:18px;touch-action:none;user-select:none;-webkit-user-select:none}
.ws-cell{width:clamp(30px,6.2vmin,52px);height:clamp(30px,6.2vmin,52px);display:flex;align-items:center;justify-content:center;border-radius:10px;background:#f5f4ff;color:#1a1b3f;
  font-weight:bold;font-size:clamp(16px,3.4vmin,28px);cursor:pointer;box-shadow:0 3px 0 #9aa0d8;transition:transform .08s}
.ws-cell.sel{background:var(--accent);transform:scale(1.08)}
.ws-cell.cur{outline:4px solid #fff}
.ws-cell.found{color:#1a1b3f;box-shadow:0 3px 0 rgba(0,0,0,.25)}
.ws-cell.hint{animation:wsHint 1s ease-in-out 3}
@keyframes wsHint{50%{transform:scale(1.25);background:#8affea}}

.ws-cell{width:clamp(34px,8.2vmin,66px);height:clamp(34px,8.2vmin,66px);font-size:clamp(18px,4.4vmin,34px)}
.wh-list li{font-size:1.25rem}
.mode-card{width:230px;padding:30px 14px}
.mode-card .ic{font-size:5.4rem}
.mode-card .nm{font-size:1.5rem}

/* ---- v3: landing page ---- */
.landing{position:relative;overflow:hidden;justify-content:flex-start;background:radial-gradient(ellipse at 50% 0%,#2d2f78 0%,#15163a 60%) }
.drift{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.drift i{position:absolute;bottom:-60px;font-style:normal;width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:22px;color:#1a1b3f;
  background:var(--c);box-shadow:0 5px 0 rgba(0,0,0,.3),inset 0 3px 0 rgba(255,255,255,.4);opacity:.35;animation:floatUp var(--d) linear infinite;animation-delay:var(--w)}
@keyframes floatUp{0%{transform:translateY(0) rotate(-8deg)}100%{transform:translateY(-115vh) rotate(10deg)}}
.logo{margin:4vh 0 2vh;display:flex;flex-direction:column;gap:10px;align-items:center;position:relative;z-index:1}
.logo-row{display:flex;gap:7px;flex-wrap:nowrap}
.kcl{width:clamp(34px,7.2vw,70px);height:clamp(40px,8.4vw,82px);border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:clamp(22px,4.8vw,48px);font-weight:900;color:#1a1b3f;
  background:linear-gradient(var(--c),var(--c2));box-shadow:0 8px 0 rgba(0,0,0,.35),inset 0 4px 0 rgba(255,255,255,.45);border:3px solid rgba(26,27,63,.75);animation:bounceKey 3.2s ease-in-out infinite;animation-delay:var(--i)}
@keyframes bounceKey{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.landing .foot{margin-top:auto;position:relative;z-index:1;opacity:.7}
#screen-menu{background:radial-gradient(ellipse at 50% 0%,#2d2f78 0%,#15163a 60%)}
#screen-menu .mode-cards{margin-top:4vh}
.mode-card{background:linear-gradient(#272a63,#1b1d4d);position:relative}
.mode-card:hover{transform:translateY(-8px) scale(1.04)}
.mode-card .ic{filter:drop-shadow(0 6px 0 rgba(0,0,0,.3))}

/* ---- v6 final touches ---- */
.mode-cards{max-width:1240px}
.mode-card{width:214px}
.dots{margin-bottom:8px;min-width:0}
.topbar{padding-top:4px}
.btn:focus-visible{outline:3px solid #fff;outline-offset:2px}

/* ---- v8: word search layout + level pickers ---- */
.words-wrap{display:grid;grid-template-columns:auto minmax(250px,330px);gap:18px 44px;justify-content:center;align-items:start;width:100%;max-width:1100px;margin-top:6px;position:relative;--cell:46px;--u:9px}
.wh-levels{grid-column:1 / -1;display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.wh-lvl{position:relative;width:42px;height:42px;border-radius:50%;background:var(--panel-2);border:3px solid #3a3e8a;border-bottom-width:5px;font-weight:bold;font-size:1.05rem;color:var(--ink)}
.wh-lvl.cur{background:var(--accent);color:#1a1b3f;border-color:#fff3b0}
.wh-lvl i{position:absolute;right:-6px;top:-8px;font-size:.8rem;font-style:normal}
.words-left{display:flex;flex-direction:column;align-items:center;gap:6px}
.wh-board{position:relative;background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.05));box-shadow:0 0 0 3px rgba(255,255,255,.1),0 10px 24px rgba(0,0,0,.25);border-radius:26px;touch-action:none;user-select:none;-webkit-user-select:none}
.wh-grid{position:absolute;inset:18px;display:grid;gap:8px;padding:0;background:none}
.wh-svg{position:absolute;left:0;top:0;pointer-events:none;mix-blend-mode:multiply}
.ws-cell{width:var(--cell);height:var(--cell);font-size:calc(var(--cell) * .5);font-weight:800;letter-spacing:0;border-radius:calc(var(--cell) * .26);box-shadow:0 calc(var(--cell) * .07) 0 rgba(0,0,0,.2)}
.ws-cell.sel{background:#fff3b0;transform:none}
.wh-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;width:100%;position:sticky;top:8px}
.wh-list li{display:flex;align-items:center;gap:12px;margin:0;background:var(--panel-2);border:3px solid #3a3e8a;border-bottom-width:5px;border-radius:16px;padding:7px 14px;font-weight:bold;font-size:1.2rem;letter-spacing:.08em;min-height:50px}
.wh-list li .e{font-size:1.6rem;width:2rem;text-align:center}
.wh-list li .t{flex:1}
.wh-list li .ck{visibility:hidden;color:#fff}
.wh-list li.done{background:var(--wc,#2f7a4a);border-color:rgba(255,255,255,.6);color:#1a1b3f;text-decoration:none;opacity:1}
.wh-list li.done .ck{visibility:visible;color:#1a1b3f}
@media (max-width:820px){.words-wrap{grid-template-columns:1fr}.wh-list{flex-direction:row;flex-wrap:wrap;position:static}.wh-list li{font-size:1rem;padding:5px 10px;min-height:0}}
.lvl-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:calc(var(--u)*1);width:min(92%,calc(var(--u)*64))}
.lvl-btn{background:var(--panel-2);border:3px solid #3a3e8a;border-bottom-width:calc(var(--u)*.7);border-radius:calc(var(--u)*1.6);padding:calc(var(--u)*.5) 0;display:flex;flex-direction:column;align-items:center;line-height:1.1;color:var(--ink)}
.lvl-btn .li{font-size:calc(var(--u)*3.4)} .lvl-btn .ln{font-size:calc(var(--u)*2.4);font-weight:bold} .lvl-btn .ls{font-size:calc(var(--u)*1.5);min-height:1.2em}
.lvl-btn.cur{background:var(--accent);color:#1a1b3f;border-color:#fff3b0;transform:scale(1.06)}
.stage-btn{position:absolute;right:10px;bottom:10px;z-index:3;font-size:1.3rem;padding:.2em .6em;opacity:.9}

.wh-list.dense{gap:6px}
.wh-list.dense li{font-size:1rem;padding:3px 10px;min-height:38px;gap:10px}
.wh-list.dense li .e{font-size:1.3rem}

/* ---- christmas songs on the piano ---- */
.btn.xmas{border-color:#6bcb77;border-bottom-color:#2e9e45}
.btn.xmas.on{background:linear-gradient(#ff7a8a,#e03a50);color:#fff;border-color:#ffd9de}

/* ---- small windows: the big keycap title still fits on one line, and overlays never spill out of the stage ---- */
@media (max-width:480px){
  .kcl{width:clamp(26px,7.8vw,70px);height:clamp(32px,9.4vw,82px);font-size:clamp(17px,5.2vw,48px);border-radius:10px}
  .logo-row{gap:4px}
}
.overlay{overflow:hidden}

/* ---- piano: everything (songs, modes, keys, recorder) fits one screen ---- */
#mode-piano .piano{height:min(34vh,290px);margin-top:2px}
#mode-piano .row{margin:4px 0;gap:8px}
#mode-piano .btn{padding:.4em .85em;font-size:1rem}
#mode-piano .piano-msg{margin:6px 0;min-height:1.6em;font-size:1.1rem}
#mode-piano .warn{font-size:.85rem;margin:2px;max-width:640px}

/* ---- pause button ---- */
.pause-btn{font-size:1.2rem;padding:.3em .7em;min-width:2.4em}
.pause-btn.on{background:var(--accent);color:#1a1b3f}
.topbar{gap:8px}
/* every pop-up screen (intro, pause, level complete, try again) sits above everything else on the stage */
.overlay-root{z-index:10}

/* ---- landing page: one card per year ---- */
.year-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;width:min(900px,94vw);margin-top:2vh;position:relative;z-index:1}
.year-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 14px 16px;border-radius:30px;border:6px solid var(--c);border-bottom-width:11px;background:linear-gradient(#272a63,#1b1d4d);color:var(--ink);transition:transform .12s}
.year-card:hover{transform:translateY(-8px) scale(1.03)}
.year-card:active{transform:translateY(2px)}
.year-card .yk{width:78px;height:78px;border-radius:20px;background:var(--c);box-shadow:0 8px 0 rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;font-size:3rem;font-weight:900;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.25)}
.year-card .yn{font-size:1.6rem;font-weight:900;letter-spacing:.02em}
.year-card .yi{font-size:1.5rem;letter-spacing:.12em;white-space:nowrap}
.mode-card .tg{margin-top:4px;font-size:.72rem;font-weight:bold;padding:.15em .8em;border-radius:99px;background:rgba(255,255,255,.1);color:var(--ink-dim);text-align:center}
@media (max-width:700px){.year-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}}
@media (max-height:720px){.year-card{padding:10px 10px 8px;gap:4px}.year-card .yk{width:52px;height:52px;font-size:2rem;border-radius:14px}.year-card .yn{font-size:1.2rem}.year-card .yi{font-size:1.15rem}.year-cards{gap:14px}}

/* ---- Home / About menu and the About page ---- */
.top-nav{display:flex;gap:10px;z-index:3}
.landing .top-nav{position:absolute;top:12px;right:16px}
.top-nav .btn{font-size:1rem;padding:.45em 1em}
.top-nav .btn.on{background:var(--accent);color:#1a1b3f;border-color:#fff3b0}
.about{align-items:center;gap:14px;padding-top:12px}
.about .top-nav{align-self:flex-end}
.about-card{width:min(760px,100%);background:var(--panel);border:4px solid #3a3e8a;border-radius:24px;padding:24px 28px 28px;line-height:1.55;font-size:1.08rem}
.about-card h2{margin:0 0 6px;font-size:clamp(1.6rem,4vw,2.3rem);color:var(--accent);text-shadow:0 3px 0 #0c0d26}
.about-card h3{margin:20px 0 6px;font-size:1.25rem}
.about-card p{margin:.4em 0;color:var(--ink)}
.about-me{display:flex;gap:18px;align-items:flex-start}
.about-me .avatar{flex:none;width:76px;height:76px;border-radius:20px;background:linear-gradient(135deg,#ff5c72,#ff9f45);box-shadow:0 7px 0 rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:900;color:#fff}
.about-me .who{margin-top:0;font-size:1.2rem}
.about-me .who span{color:var(--ink-dim);font-size:.95rem}
.about-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px !important}
.about-links .btn{font-size:1.05rem}
@media (max-width:600px){.about-me{flex-direction:column}.landing .top-nav{position:static;margin:6px 0 -4px}}

.landing .logo{margin-top:70px}
.about-card .contact{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.about-card .contact a{color:var(--accent);font-weight:bold;word-break:break-all}
@media (max-height:700px){.landing .logo{margin-top:62px}}
@media (max-width:600px){.landing .logo{margin-top:10px}}
a.btn{color:var(--ink);text-decoration:none}
a.btn.primary{color:#1a1b3f}

.top-nav{flex-wrap:wrap;justify-content:flex-end}
.about-card ul,.about-card ol{margin:.4em 0;padding-left:1.4em}
.about-card li{margin:.35em 0}
.landing .foot{font-size:1.05rem;opacity:.85;text-align:center;padding:0 12px 8px}

/* ---- site header: small logo at the left, menu at the right ---- */
.site-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;width:100%;position:relative;z-index:3}
.landing .site-head{position:absolute;top:12px;left:16px;right:16px;width:auto}
.landing .top-nav,.about .top-nav{position:static;align-self:auto}
.brand{display:flex;align-items:center;gap:6px;background:none;border:0;padding:4px;color:var(--ink);cursor:pointer}
.brand .bkey{width:30px;height:30px;border-radius:8px;background:var(--c);box-shadow:0 4px 0 var(--d);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:1.05rem;color:#fff}
.brand .bkey+.bkey{color:#1a1b3f}
.brand .bname{margin-left:8px;font-size:1.15rem;font-weight:900;letter-spacing:.02em}
.brand:hover .bkey{transform:translateY(-2px)}
@media (max-width:600px){.landing .site-head{position:static;margin-top:6px}.brand .bname{font-size:1rem}}
@media (max-width:860px){.landing .site-head{position:static;margin-top:6px}.landing .logo{margin-top:14px}}

/* cleaner year cards: just the number and the year; and more room above the note */
.year-card{padding:22px 14px 20px;gap:10px}
.year-card .yk{width:92px;height:92px;font-size:3.6rem;border-radius:24px}
.year-card .yn{font-size:1.7rem}
.landing .foot{margin-top:auto;padding-top:34px;padding-bottom:18px}
@media (max-height:720px){.year-card{padding:12px 10px 10px}.year-card .yk{width:56px;height:56px;font-size:2.2rem;border-radius:16px}.year-card .yn{font-size:1.25rem}.landing .foot{padding-top:20px}}

/* the small Tech Explorers mark sits in a round badge */
.brand .bcircle{display:flex;align-items:center;justify-content:center;gap:3px;width:52px;height:52px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#3a3e8a,#1b1d4d);border:3px solid #6a6fd0;box-shadow:0 4px 0 rgba(0,0,0,.35)}
.brand .bcircle .bkey{width:19px;height:19px;border-radius:5px;font-size:.78rem;box-shadow:0 3px 0 var(--d)}
.brand:hover .bcircle{border-color:var(--accent)}
.brand:hover .bkey{transform:none}

/* ---- mobile friendly: the landing page scrolls, and the notes sit under the cards ---- */
.landing{overflow-x:hidden;overflow-y:auto}
@supports (height:100dvh){html,body{height:100dvh}}
.phone-note{display:none;position:relative;z-index:1;width:min(900px,94vw);margin:0 0 6px;padding:10px 14px;border-radius:14px;background:rgba(255,210,63,.14);border:2px solid var(--accent);color:var(--ink);font-size:.95rem;line-height:1.45;text-align:center}
@media (max-width:820px),(pointer:coarse){.phone-note{display:block}}
.ai-note{position:relative;z-index:1;width:min(900px,94vw);margin:6px 0 26px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ai-note>div{background:rgba(255,255,255,.06);border:2px solid #3a3e8a;border-radius:18px;padding:14px 16px;font-size:.92rem;line-height:1.5;color:var(--ink-dim)}
.ai-note h2{margin:0 0 6px;font-size:1.05rem;color:var(--accent)}
.ai-note p{margin:0}
.linklike{background:none;border:0;padding:0;font:inherit;color:var(--accent);font-weight:bold;text-decoration:underline;cursor:pointer}
@media (max-width:700px){.ai-note{grid-template-columns:1fr}.landing .logo{max-width:100%}}

.top-nav .qr-btn{background:var(--accent);color:#1a1b3f;border-color:#fff3b0}
.top-nav .qr-btn:hover{background:#ffe27a}

.mode-card .tg.cert{background:rgba(255,210,63,.18);color:var(--accent)}

/* ---- the two groups at the top of each year menu ---- */
.group-tabs{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:2px 0 6px}
.group-tab{display:inline-flex;align-items:center;gap:8px;font:inherit;font-weight:bold;font-size:1.1rem;padding:.6em 1.2em;border-radius:99px;border:3px solid #5a60b8;background:#2b3170;color:#e6e8ff;cursor:pointer;transition:transform .1s,background .12s}
.group-tab:hover{background:#3a418a;transform:translateY(-2px)}
.group-tab .gi{font-size:1.25em}
.group-tab .gc{min-width:1.6em;padding:.05em .45em;border-radius:99px;background:rgba(255,255,255,.18);font-size:.85em;text-align:center}
.group-tab.on{background:var(--accent);border-color:#fff3b0;color:#1a1b3f}
.group-tab.on .gc{background:rgba(26,27,63,.2)}
@media (max-width:760px){.group-tab{font-size:.95rem;padding:.5em .9em}.group-tabs{gap:8px}}
@media (max-width:600px){.group-tabs{flex-direction:column;align-items:stretch;width:100%;max-width:420px}.group-tab{justify-content:center}}