:root{
  --bg:#f8fafc; --panel:#ffffff; --muted:#64748b; --accent:#06b6d4; --accent-2:#ff48c4; --accent-dark:#0ea5b6; --ok:#16a34a; --warn:#f59e0b; --err:#dc2626; --text:#0f172a; --text-2:#334155;
  /* Program brand colors */
  --ps:#31A8FF; --ai:#FF9A00; --id:#FF3366; --pr:#9966FF; --ae:#7E7BF6;
}
/* Dark theme overrides */
[data-theme="dark"]{
  --bg:#0c0a1a; --panel:#120f1f; --muted:#a3a3b0; --accent:#5b21b6; --accent-2:#a78bfa; --accent-dark:#3b0764; --ok:#22c55e; --warn:#f59e0b; --err:#f87171; --text:#e5e7eb; --text-2:#cbd5e1;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--text); background:var(--bg);
}
#app{min-height:100%; display:flex; align-items:center; justify-content:center; padding:24px}
.app-top{align-items:flex-start}
/* Top align when play screen is present */
#app:has(.container.play){align-items:flex-start}
.container{width:100%; max-width:980px}
.header{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:24px}
.header h1{color:#0b1220}
[data-theme="dark"] .header h1{color:var(--text-2)}
.brand{display:flex; align-items:center; gap:12px}
.brand .logo{width:40px; height:40px; border-radius:10px; position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden}
.brand .logo svg{width:22px; height:22px; color:var(--text); stroke:currentColor}
[data-theme="dark"] .brand .logo svg{color:#fff}
@keyframes blobFlow{0%{background-position:0% 0%, 100% 0%, 50% 100%} 50%{background-position:100% 100%, 0% 100%, 50% 0%} 100%{background-position:0% 0%, 100% 0%, 50% 100%}}
.brand .logo::before{content:""; position:absolute; inset:0; filter:blur(8px);
  background-image:
    radial-gradient(120% 120% at 15% 25%, rgba(255,255,255,.22) 0 30%, transparent 60%),
    radial-gradient(120% 120% at 85% 30%, color-mix(in srgb, var(--accent) 85%, white 15%) 0 35%, transparent 65%),
    radial-gradient(120% 120% at 50% 85%, color-mix(in srgb, var(--accent-2) 85%, white 15%) 0 35%, transparent 65%);
  background-size:200% 200%, 200% 200%, 200% 200%;
  background-position:0% 0%, 100% 0%, 50% 100%;
  animation:blobFlow 12s ease-in-out infinite;
  animation-delay: var(--logoAnimDelay, 0s);
}
/* Darker, punchier glow in dark mode (more black in mix) */
[data-theme="dark"] .brand .logo::before{
  background-image:
    radial-gradient(120% 120% at 15% 25%, rgba(0,0,0,.35) 0 30%, transparent 60%),
    radial-gradient(120% 120% at 85% 30%, color-mix(in srgb, var(--accent) 65%, black 35%) 0 35%, transparent 65%),
    radial-gradient(120% 120% at 50% 85%, color-mix(in srgb, var(--accent-2) 65%, black 35%) 0 35%, transparent 65%);
}
.brand .logo{box-shadow:0 10px 26px rgba(6,182,212,.28), 0 0 26px rgba(255,72,196,.20), 0 0 2px rgba(255,255,255,.6) inset}

/* Home: center title and icon, stronger glow */
.container.home .header{justify-content:center}
.container.home .brand{flex-direction:column; align-items:center; text-align:center; gap:10px}
.container.home .brand h1{font-size:clamp(26px, 5.2vw, 40px)}
.container.home .brand .logo{width:88px; height:88px; border-radius:22px; box-shadow:0 16px 48px rgba(6,182,212,.28), 0 0 36px rgba(255,72,196,.22)}
.container.home .brand .logo::before{filter:blur(10px)}
.brand h1{margin:0; font-size:20px; letter-spacing:.2px; font-family:Sora, Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial}

/* Center brand layout for other screens */
.container.center-brand .header{justify-content:center}
.container.center-brand .brand{flex-direction:column; align-items:center; text-align:center; gap:10px}
.container.center-brand .brand h1{font-size:clamp(26px, 5.2vw, 40px)}
.container.center-brand .brand .logo{width:88px; height:88px; border-radius:22px; box-shadow:0 16px 48px rgba(6,182,212,.28), 0 0 36px rgba(255,72,196,.22)}
.container.center-brand.small .brand h1{font-size:clamp(22px, 4.4vw, 32px)}
.container.center-brand.small .brand .logo{width:72px; height:72px; border-radius:18px}
.brand h1{margin:0; font-size:20px; letter-spacing:.2px; font-family:Sora, Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial}
.muted{color:var(--muted)}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px}
.hero{display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; padding:24px}
.btn{appearance:none; border:1px solid #e2e8f0; background:#ffffff; color:var(--text);
  padding:12px 16px; border-radius:999px; cursor:pointer; font-weight:600; width:auto; text-align:center; transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease}
.btn.primary{background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff; border-color:transparent; box-shadow:0 10px 24px rgba(6,182,212,.18)}
.btn.ghost{background:transparent}
.btn:hover{transform:translateY(-1px); box-shadow:0 8px 22px rgba(2,6,23,.10)}
.btn:active{transform:translateY(0); box-shadow:0 4px 12px rgba(2,6,23,.08)}
.btn.primary:hover{filter:saturate(1.05) brightness(1.02)}
.btn.primary:active{filter:saturate(0.98)}
.btn:focus-visible{outline:3px solid #93c5fd; outline-offset:2px}
.btn.huge{font-size:20px; padding:18px 28px; min-width:220px}
.btn.selected{background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff; border-color:transparent; box-shadow:0 10px 24px rgba(6,182,212,.18)}
.btn.huge:hover{background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff; border-color:transparent; box-shadow:0 10px 24px rgba(6,182,212,.18); transform:translateY(-1px) scale(1.01)}
.btn.huge:active{transform:translateY(0) scale(.995)}
.section-title{margin:4px 0 12px 0; font-size:14px; color:var(--text-2)}
.row{display:flex; gap:10px; align-items:center}
.center{display:flex; align-items:center; justify-content:center}
.badge{font-size:12px; color:#0f172a; background:#e2e8f0; border:1px solid #e2e8f0; padding:4px 8px; border-radius:999px}
.spacer{height:12px}
.footer{margin-top:24px; color:var(--muted); font-size:12px}
.center-tip{display:flex; justify-content:center; text-align:center; margin-top:36px; opacity:.8; max-width:780px; margin-left:auto; margin-right:auto}
@media (min-width: 768px){
  .center-tip{margin-top:56px; font-size:13px; opacity:.75}
}

.keyboard{display:flex; gap:8px; flex-wrap:wrap}
.keyboard.focus{justify-content:center; align-items:center; min-height:42vh}
.key{min-width:56px; padding:14px 16px; border-radius:14px; background:#ffffff; border:1px solid #e2e8f0; text-align:center; font-weight:700; color:#0f172a; transition:all .12s ease; font-size:18px}
.key.big{padding:22px 28px; font-size:28px; border-radius:18px; box-shadow:0 8px 22px rgba(2,6,23,.06)}
.keyboard.focus .key.big{min-width:200px}
.key.big:hover{transform:translateY(-1px); box-shadow:0 10px 26px rgba(2,6,23,.10)}
.key.big:active{transform:translateY(0); box-shadow:0 6px 16px rgba(2,6,23,.08)}
.key.mod{color:#2563eb}
.key.active{border-color:var(--ok); background:#f0fdf4; box-shadow:0 0 0 3px rgba(16,185,129,.15) inset}
.key.error{border-color:var(--err); background:#fef2f2}
.key.ok{border-color:var(--ok); background:#ecfdf5}

/* Success pulse when combo correct */
@keyframes okPulse{0%{transform:scale(1); box-shadow:0 8px 22px rgba(16,185,129,.00)} 40%{transform:scale(1.02); box-shadow:0 14px 32px rgba(16,185,129,.20)} 100%{transform:scale(1); box-shadow:0 8px 22px rgba(16,185,129,.00)}}
.key.big.ok{animation:okPulse 380ms ease-out}

.prompt{font-size:18px; font-weight:700; font-family:Sora, Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial}
.sub{color:var(--text-2); font-size:13px}
.progress{height:6px; background:#e2e8f0; border:0; border-radius:999px; overflow:hidden}
.progress > span{display:block; height:100%; background:linear-gradient(90deg, var(--accent), var(--accent-2))}
@keyframes gradientFlow{0%{background-position:0% 50%}100%{background-position:200% 50%}}
.container.play .progress > span{background:linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent)); background-size:200% 100%; animation:gradientFlow 6.8s linear infinite; animation-delay: var(--progressPhase, 0s)}
/* subtle shine overlay on progress */
.progress > span{position:relative; overflow:hidden}
.progress > span::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.22), rgba(255,255,255,0)); transform:translateX(-140%) skewX(18deg);}
@keyframes progressShine{0%{transform:translateX(-140%) skewX(18deg)} 55%{transform:translateX(160%) skewX(18deg)} 100%{transform:translateX(160%) skewX(18deg)}}
.container.play .progress > span::after{animation:progressShine 7.2s ease-in-out infinite; animation-delay: var(--progressShinePhase, 0s)}

/* Dark mode variant for progressbar */
[data-theme="dark"] .progress{background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.08)}
[data-theme="dark"] .container.play .progress > span{
  background:linear-gradient(
    90deg,
    color-mix(in srgb, var(--accent) 70%, black 30%),
    color-mix(in srgb, var(--accent-2) 70%, black 30%),
    color-mix(in srgb, var(--accent) 70%, black 30%)
  );
  background-size:200% 100%;
  animation:gradientFlow 6.8s linear infinite;
  animation-delay: var(--progressPhase, 0s);
  box-shadow: 0 0 20px color-mix(in srgb, var(--accent) 22%, transparent), 0 0 16px color-mix(in srgb, var(--accent-2) 16%, transparent);
}
[data-theme="dark"] .container.play .progress > span::after{
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.14), rgba(255,255,255,0));
}

/* Play layout tweaks */
.container.play{padding-top:0}
.container.play .header{margin-bottom:12px}
.container.play .prompt{letter-spacing:.2px}
.container.play .keyboard.focus{min-height:44vh}

/* Home hero inspired by the reference */
.home-hero{display:flex; flex-direction:column; align-items:center; text-align:center; padding:28px 12px 12px; gap:10px}
.home-hero .app-title{font-family:Sora, Inter, system-ui; font-weight:900; font-size:clamp(28px, 5.4vw, 48px); letter-spacing:.2px}
.home-hero .app-sub{color:var(--text-2); font-size:14px; margin-top:6px}
.hero-logo{width:96px; height:96px; border-radius:24px; position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden}
.hero-logo svg{width:44px; height:44px; color:#fff; stroke:#fff}
@keyframes blobFlow{0%{background-position:0% 0%, 100% 0%, 50% 100%} 50%{background-position:100% 100%, 0% 100%, 50% 0%} 100%{background-position:0% 0%, 100% 0%, 50% 100%}}
.hero-logo::before{content:""; position:absolute; inset:0; filter:blur(10px);
  background-image:
    radial-gradient(120% 120% at 15% 25%, rgba(255,255,255,.28) 0 30%, transparent 60%),
    radial-gradient(120% 120% at 85% 30%, color-mix(in srgb, var(--accent) 85%, white 15%) 0 35%, transparent 65%),
    radial-gradient(120% 120% at 50% 85%, color-mix(in srgb, var(--accent-2) 85%, white 15%) 0 35%, transparent 65%);
  background-size:200% 200%, 200% 200%, 200% 200%;
  background-position:0% 0%, 100% 0%, 50% 100%;
  animation:blobFlow 20s ease-in-out infinite;
}
/* subtle outer glow adapting to gradient tones */
.hero-logo{box-shadow:0 12px 36px rgba(6,182,212,.20), 0 0 28px rgba(255,72,196,.18)}

/* Play head: bigger centered task */
.play-head{display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px}
.play-head .prompt.big{font-size:18px; font-weight:800}
.play-head .action-title{font-family:Sora, Inter, system-ui; font-weight:900; letter-spacing:.2px; font-size:clamp(24px, 4.6vw, 40px)}
.play-head .stats{justify-content:center}

/* hover shine on start buttons (OS/Mode) */
.center-stage .btn{position:relative; overflow:hidden}
.center-stage .btn::after{content:""; position:absolute; top:-20%; bottom:-20%; width:45%; left:-60%; background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.35), rgba(255,255,255,0)); transform:skewX(20deg); opacity:0}
@keyframes btnShine{0%{left:-60%} 100%{left:160%}}
.center-stage .btn:hover::after{opacity:1; animation:btnShine 900ms ease-out 1}

.center-stage .btn.huge{background:#ffffff; color:var(--text); border:1px solid #e2e8f0; box-shadow:0 8px 22px rgba(6,182,212,.10), 0 0 18px rgba(255,72,196,.10)}
/* Use the same blob-like gradient motion as the logo, with a touch of white */
.center-stage .btn.huge:hover{
  /* Soft, logo-like blob mix with white touch; start already mixed */
  background-image:
    radial-gradient(130% 130% at 15% 25%, rgba(255,255,255,.22) 0 30%, transparent 60%),
    radial-gradient(130% 130% at 85% 30%, color-mix(in srgb, var(--accent) 55%, var(--accent-2) 45%) 0 35%, transparent 65%),
    radial-gradient(130% 130% at 50% 85%, color-mix(in srgb, var(--accent-2) 55%, var(--accent) 45%) 0 35%, transparent 65%),
    linear-gradient(135deg, var(--accent), var(--accent-2));
  background-size:200% 200%, 200% 200%, 200% 200%, 100% 100%;
  background-position:20% 30%, 80% 30%, 50% 80%, 0% 0%;
  animation:blobFlow 8s ease-in-out infinite;
  animation-delay:-3s;
  will-change: background-position;
  color:#fff; border-color:transparent;
  /* Keep strong glow */
  box-shadow:0 18px 44px rgba(6,182,212,.35), 0 0 42px rgba(255,72,196,.32), 0 0 2px rgba(255,255,255,.5) inset;
}
/* Dark mode: add more black to make gradient shapes pop */
[data-theme="dark"] .center-stage .btn.huge:hover{
  background-image:
    radial-gradient(130% 130% at 15% 25%, rgba(0,0,0,.35) 0 30%, transparent 60%),
    radial-gradient(130% 130% at 85% 30%, color-mix(in srgb, var(--accent) 70%, black 30%) 0 35%, transparent 65%),
    radial-gradient(130% 130% at 50% 85%, color-mix(in srgb, var(--accent-2) 70%, black 30%) 0 35%, transparent 65%),
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 65%, black 35%), color-mix(in srgb, var(--accent-2) 65%, black 35%));
}
.center-stage .btn.huge:active{transform:translateY(0) scale(.995); filter:none}
.combo-preview{font-size:clamp(40px, 12vw, 120px); font-weight:800; letter-spacing:.5px; text-align:center; color:var(--text);}
.combo-preview .muted{color:var(--text-2); font-weight:600}
.container.play .row + .spacer{height:6px}
.container.play .progress + .spacer{height:24px}

/* Desktop sizing */
@media (min-width: 1024px){
  .keyboard.focus{min-height:46vh}
  .keyboard.focus .key.big{min-width:240px; padding:26px 32px; font-size:34px}
}

.chips{display:flex; gap:8px; flex-wrap:wrap}
.chip{padding:8px 12px; background:#ffffff; border:1px solid #e2e8f0; border-radius:999px; font-weight:600; color:#0f172a}
.chip.ok{background:rgba(34,197,94,.12); border-color:rgba(34,197,94,.5)}
.chip.error{background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.5)}
.score{font-weight:800}

/* Icon grid */
.grid.icons{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
.icon-card{position:relative; display:flex; align-items:center; justify-content:center; background:transparent; border:0; border-radius:18px; padding:18px; cursor:pointer; transition:transform .18s ease, filter .18s ease}
.icon-card{--brand: var(--accent)}
.icon-card:hover{transform:translateY(-2px); filter:drop-shadow(0 6px 14px rgba(2,6,23,.08))}
.icon-card.selected{transform:translateY(-2px); filter:drop-shadow(0 0 0 rgba(0,0,0,0)) drop-shadow(0 10px 28px rgba(6,182,212,.28)) drop-shadow(0 0 22px rgba(255,72,196,.22))}
.icon-card:focus-visible{outline:3px solid rgba(6,182,212,.35); outline-offset:6px}
.icon-card:active{filter:drop-shadow(0 10px 24px rgba(255,72,196,.25))}
.icon-card img{width:80px; height:80px; object-fit:contain}

/* Shiny ring + glare */
@keyframes ringPulse{0%{opacity:.0; transform:scale(.98)} 35%{opacity:.35; transform:scale(1)} 70%{opacity:.25; transform:scale(1.02)} 100%{opacity:0; transform:scale(1.06)}}
@keyframes spinRing{to{transform:rotate(360deg)}}
@keyframes glareSweep{0%{transform:translateX(-130%) rotate(20deg); opacity:.0} 20%{opacity:.35} 50%{opacity:.55} 100%{transform:translateX(130%) rotate(20deg); opacity:0}}
.icon-card{position:relative}
/* Thin (2px) brand ring directly around the logo image */
.icon-card .img-wrap{position:relative; display:inline-block; border-radius:16px}
/* Thin (2px) brand ring directly around the logo image */
.icon-card .img-wrap::before{content:""; position:absolute; inset:0; border-radius:16px; pointer-events:none; opacity:0; transform:rotate(0deg);
  /* Rotating bright arc (swipe around the logo) */
  background:
    conic-gradient(from 0deg,
      transparent 0 78%,
      color-mix(in srgb, var(--brand) 85%, white 15%) 78% 96%,
      rgba(255,255,255,.95) 96% 100%);
  -webkit-mask: radial-gradient(circle, transparent calc(100% - 3px), #000 calc(100% - 3px));
          mask: radial-gradient(circle, transparent calc(100% - 3px), #000 calc(100% - 3px));
  box-shadow: 0 0 12px color-mix(in srgb, var(--brand) 55%, transparent);
}
.icon-card:hover .img-wrap::before{opacity:1; animation:spinRing 900ms ease-out 1}
.icon-card.selected .img-wrap::before{opacity:1; animation:spinRing 1400ms ease-out 2}
/* Dark mode: subtler arc (less white), brand-mixed glow, calmer timing */
[data-theme="dark"] .icon-card .img-wrap::before{
  background:
    conic-gradient(from 0deg,
      transparent 0 80%,
      color-mix(in srgb, var(--brand) 80%, black 20%) 80% 98%,
      rgba(255,255,255,.25) 98% 100%);
  box-shadow: 0 0 10px color-mix(in srgb, var(--brand) 35%, transparent);
  filter: saturate(1.05);
}
[data-theme="dark"] .icon-card:hover .img-wrap::before{animation-duration:1100ms}
[data-theme="dark"] .icon-card.selected .img-wrap::before{animation-duration:1600ms}
/* Soft pulse close to the image (subtle) */
.icon-card .img-wrap::after{content:""; position:absolute; inset:2px; border-radius:14px; pointer-events:none; opacity:0}
.icon-card.selected .img-wrap::after{opacity:.35; animation:ringPulse 1600ms ease-in-out}
/* Glare sweep over the SVG */
.icon-card .glare{display:none}
.icon-card::marker{display:none}
.icon-card > img::after{content:""}
.icon-card > span.glare{content:""}
.icon-card::selection{background:transparent}
.icon-card .shine{display:none}
.icon-card .img-wrap{position:relative}
.icon-card .img-wrap::after{content:""; position:absolute; top:0; left:0; right:0; bottom:0; border-radius:14px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent);
  transform:translateX(-130%) rotate(20deg); opacity:0; pointer-events:none}
.icon-card:hover .img-wrap::after{animation:glareSweep 1200ms ease-out 1}
.icon-card.selected .img-wrap::after{animation:glareSweep 1200ms ease-out 3}
/* Dark mode: reduce glare intensity so it doesn't look harsh */
[data-theme="dark"] .icon-card .img-wrap::after{background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent)}

/* Program-specific glow colors */
.icon-card.prog-photoshop:hover img{filter:drop-shadow(0 6px 16px color-mix(in srgb, var(--ps) 55%, transparent))}
.icon-card.prog-illustrator:hover img{filter:drop-shadow(0 6px 16px color-mix(in srgb, var(--ai) 55%, transparent))}
.icon-card.prog-indesign:hover img{filter:drop-shadow(0 6px 16px color-mix(in srgb, var(--id) 55%, transparent))}
.icon-card.prog-premiere:hover img{filter:drop-shadow(0 6px 16px color-mix(in srgb, var(--pr) 55%, transparent))}
.icon-card.prog-aftereffects:hover img{filter:drop-shadow(0 6px 16px color-mix(in srgb, var(--ae) 55%, transparent))}
.icon-card.prog-photoshop.selected img{filter:drop-shadow(0 12px 28px var(--ps)) drop-shadow(0 0 26px rgba(49,168,255,.45))}
.icon-card.prog-illustrator.selected img{filter:drop-shadow(0 12px 28px var(--ai)) drop-shadow(0 0 26px rgba(255,154,0,.45))}
.icon-card.prog-indesign.selected img{filter:drop-shadow(0 12px 28px var(--id)) drop-shadow(0 0 26px rgba(255,51,102,.45))}
.icon-card.prog-premiere.selected img{filter:drop-shadow(0 12px 28px var(--pr)) drop-shadow(0 0 26px rgba(153,102,255,.45))}
.icon-card.prog-aftereffects.selected img{filter:drop-shadow(0 12px 28px var(--ae)) drop-shadow(0 0 26px rgba(126,123,246,.45))}
/* remove old thick outer halos */

/* Program color variable for shiny ring */
.icon-card.prog-photoshop{--brand: var(--ps)}
.icon-card.prog-illustrator{--brand: var(--ai)}
.icon-card.prog-indesign{--brand: var(--id)}
.icon-card.prog-premiere{--brand: var(--pr)}
.icon-card.prog-aftereffects{--brand: var(--ae)}

/* Results */
.mistakes{display:flex; flex-direction:column; gap:10px}
.mistake{display:block; padding:0; border:0; background:transparent}
.mistake-head{font-weight:700; color:var(--text); margin-bottom:2px}
.mistakes.simple .line{display:flex; gap:12px; align-items:baseline; flex-wrap:wrap; line-height:1.4}
.mistake-row .action{font-weight:800}
.mistakes.simple .expected{color:var(--text); font-weight:700}
.mistakes.simple .typed{color:#dc2626; font-weight:700}
.results-hero{display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; margin-bottom:18px}
.results-hero .title{font-family:Sora, Inter, system-ui; font-weight:800; font-size:28px}
.results-hero .stats{display:flex; gap:8px; flex-wrap:wrap; justify-content:center}
.mistakes .chips{margin-top:8px}
/* Program display in results */
.results-hero .prog{display:flex; align-items:center; gap:10px}
.results-hero .prog .prog-icon{width:48px; height:48px; border-radius:10px}
.results-hero .prog .prog-name{font-weight:800}
/* Results table */
.results-table{display:flex; flex-direction:column; gap:12px; max-width:860px; margin:0 auto}
.results-table .results-head{display:grid; grid-template-columns:1.5fr 1.5fr 1fr; gap:14px; font-weight:800; color:var(--text-2); font-size:13px}
.results-table .results-row{display:grid; grid-template-columns:1.5fr 1.5fr 1fr; gap:14px; align-items:baseline; padding:6px 0}
.results-table .cell.action{font-weight:800; color:var(--text)}
.results-table .cell.expected{color:var(--text); font-weight:700}
.results-table .cell.typed{color:#dc2626; font-weight:700}
.results-table .results-row.skip .cell.typed{color:var(--muted); font-weight:600}
@media (max-width:640px){
  .results-table .results-head{display:none}
  .results-table .results-row{grid-template-columns:1fr; gap:4px; padding:8px 0; border-top:1px solid #e2e8f0}
  .results-table .cell.expected::before{content:"Erwartet: "; color:var(--text-2); font-weight:600}
  .results-table .cell.typed::before{content:"Deine Eingabe: "; color:var(--text-2); font-weight:600}
}

/* OS toggle tweaks */
.os-toggle .btn{width:auto; min-width:120px}

/* Bottom-left dock for App-Mode/Icons */
.corner-left{position:fixed; left:24px; bottom:24px; display:flex; align-items:center; gap:10px}

/* Slide switch */
.switch{position:relative; display:inline-flex; align-items:center; gap:8px; cursor:pointer; user-select:none}
.switch input{position:absolute; opacity:0; width:0; height:0}
.switch .track{width:46px; height:26px; background:#e2e8f0; border-radius:999px; position:relative; transition:all .18s ease}
.switch .thumb{position:absolute; top:3px; left:3px; width:20px; height:20px; background:#fff; border-radius:50%; box-shadow:0 2px 8px rgba(2,6,23,.12); transition:all .18s ease}
.switch input:checked + .track{background:linear-gradient(135deg, var(--accent), var(--accent-2))}
.switch input:checked + .track .thumb{left:23px}
.switch .label{font-size:12px; color:var(--text-2); font-weight:600}

/* Header theme toggle - stylish slider */
.header .switch.theme .track{width:56px; height:30px; background:linear-gradient(135deg, #e2e8f0, #cbd5e1)}
[data-theme="dark"] .header .switch.theme .track{background:linear-gradient(135deg, #0f172a, #1e293b)}
.header .switch.theme .thumb{width:24px; height:24px; top:3px; left:3px}
.header .switch.theme input:checked + .track{background:conic-gradient(from 0deg, var(--accent), var(--accent-2), var(--accent)); box-shadow:0 8px 24px rgba(6,182,212,.25), 0 0 26px rgba(255,72,196,.22)}
.header .switch.theme input:checked + .track .thumb{left:29px}
.header .header-actions{gap:10px}

/* Floating theme toggle bottom-right */
#themeFab.theme-fab{position:fixed; right:18px; bottom:18px; z-index:1000}
.theme-fab .switch.theme.small .track{width:48px; height:26px; border-radius:999px; box-shadow:0 6px 16px rgba(2,6,23,.10);
  background-image:
    radial-gradient(120% 120% at 20% 30%, rgba(255,255,255,.18) 0 30%, transparent 60%),
    radial-gradient(120% 120% at 78% 35%, color-mix(in srgb, var(--accent) 70%, white 30%) 0 36%, transparent 64%),
    radial-gradient(120% 120% at 50% 80%, color-mix(in srgb, var(--accent-2) 70%, white 30%) 0 36%, transparent 64%),
    linear-gradient(135deg, #e2e8f0, #cbd5e1);
  background-size:200% 200%, 200% 200%, 200% 200%, 100% 100%;
  background-position:18% 28%, 82% 28%, 52% 78%, 0% 0%;
  animation: blobFlow 10s ease-in-out infinite;
  position:relative; overflow:hidden;
}
[data-theme="dark"] .theme-fab .switch.theme.small .track{
  box-shadow:0 6px 16px rgba(2,6,23,.35);
  background-image:
    radial-gradient(120% 120% at 20% 30%, rgba(255,255,255,.10) 0 28%, transparent 60%),
    radial-gradient(120% 120% at 78% 35%, color-mix(in srgb, var(--accent) 75%, black 25%) 0 36%, transparent 64%),
    radial-gradient(120% 120% at 50% 80%, color-mix(in srgb, var(--accent-2) 75%, black 25%) 0 36%, transparent 64%),
    linear-gradient(135deg, #0f172a, #1e293b);
  background-size:200% 200%, 200% 200%, 200% 200%, 100% 100%;
  background-position:18% 28%, 82% 28%, 52% 78%, 0% 0%;
  animation: blobFlow 10s ease-in-out infinite;
}
.theme-fab .switch.theme.small .thumb{width:20px; height:20px; top:3px; left:3px}
.theme-fab .switch.theme.small input:checked + .track{
  background-image:
    radial-gradient(120% 120% at 20% 30%, rgba(255,255,255,.18) 0 30%, transparent 60%),
    radial-gradient(120% 120% at 78% 35%, color-mix(in srgb, var(--accent) 85%, white 15%) 0 36%, transparent 64%),
    radial-gradient(120% 120% at 50% 80%, color-mix(in srgb, var(--accent-2) 85%, white 15%) 0 36%, transparent 64%),
    linear-gradient(135deg, var(--accent), var(--accent-2));
  background-size:200% 200%, 200% 200%, 200% 200%, 100% 100%;
  background-position:22% 32%, 78% 26%, 50% 74%, 0% 0%;
  animation: blobFlow 8s ease-in-out infinite;
}
.theme-fab .switch.theme.small input:checked + .track .thumb{left:25px; box-shadow:0 0 0 2px rgba(255,255,255,.35) inset, 0 0 16px rgba(6,182,212,.35), 0 0 18px rgba(255,72,196,.28)}

/* Shine sweep */
.theme-fab .switch.theme.small .track::after{content:""; position:absolute; top:-30%; bottom:-30%; width:40%; left:-60%; background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.35), rgba(255,255,255,0)); transform:skewX(20deg); opacity:0}
.theme-fab .switch.theme.small:hover .track::after{opacity:.9; animation:btnShine 900ms ease-out 1}
.theme-fab .switch.theme.small .icon{position:absolute; top:50%; transform:translateY(-50%); pointer-events:none; color:var(--text-2); transition:opacity .18s ease}
.theme-fab .switch.theme.small .icon.sun{left:7px; opacity:.95; color:#f59e0b}
.theme-fab .switch.theme.small .icon.moon{right:7px; opacity:.35}
.theme-fab .switch.theme.small input:checked + .track .icon.sun{opacity:.35}
.theme-fab .switch.theme.small input:checked + .track .icon.moon{opacity:1}

/* Icons on the knob itself */
.theme-fab .switch.theme.small .thumb{display:flex; align-items:center; justify-content:center}
.theme-fab .switch.theme.small .thumb .icon{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; transform:none; top:auto; left:auto; right:auto; color:currentColor}
.theme-fab .switch.theme.small .thumb .icon svg{width:16px; height:16px; display:block}
.theme-fab .switch.theme.small .thumb .icon.sun{opacity:1; color:#f59e0b}
.theme-fab .switch.theme.small .thumb .icon.moon{opacity:0}
.theme-fab .switch.theme.small input:checked + .track .thumb .icon.sun{opacity:0}
.theme-fab .switch.theme.small input:checked + .track .thumb .icon.moon{opacity:1; color:#e2e8f0}

/* Small icon buttons */
.icon-btn{appearance:none; border:none; background:#ffffff; border:1px solid #e2e8f0; color:var(--text); width:34px; height:34px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:all .18s ease}
.icon-btn:hover{transform:translateY(-1px); box-shadow:0 8px 18px rgba(2,6,23,.08)}
.icon-btn:active{transform:translateY(0)}
/* Dark mode button adaptations */
[data-theme="dark"] .center-stage .btn.huge{background:var(--panel); color:var(--text); border:1px solid rgba(255,255,255,.10); box-shadow:0 8px 22px rgba(0,0,0,.35), 0 0 18px rgba(167,139,250,.10)}
[data-theme="dark"] .icon-btn{background:var(--panel); border:1px solid rgba(255,255,255,.10); color:var(--text)}
[data-theme="dark"] .icon-btn:hover{box-shadow:0 8px 18px rgba(0,0,0,.45)}
[data-theme="dark"] .back-fab{background:var(--panel); border:1px solid rgba(255,255,255,.10); color:var(--text); box-shadow:0 10px 24px rgba(0,0,0,.45)}
[data-theme="dark"] .icon-card{background:var(--panel); border:1px solid rgba(255,255,255,.08); box-shadow:0 10px 24px rgba(0,0,0,.35)}
[data-theme="dark"] .icon-card.selected{box-shadow:0 16px 36px rgba(0,0,0,.45), 0 0 28px rgba(167,139,250,.24)}

/* Bottom toolbar for play controls */
.toolbar{display:flex; gap:12px; align-items:center; justify-content:center}

/* Centered hero for OS/Mode with large buttons */
.center-stage{display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:48px 24px; gap:18px}
.center-stage .prompt{font-size:28px}
.center-stage .buttons{display:flex; gap:16px}

/* Programs: title below grid centered */
.section-title.below{margin-top:16px; text-align:center}

@media (max-width:640px){.brand h1{font-size:18px} .grid{grid-template-columns:1fr}}

/* Bottom-left back button */
.back-fab{position:fixed; left:24px; bottom:24px; background:transparent; border:none; color:var(--text-2); font-weight:600; padding:10px 12px; border-radius:999px}
.back-fab:hover{background:#e2e8f0; color:var(--text); transform:translateY(-1px)}
.back-fab:focus{outline:none}
.back-fab:focus-visible{outline:2px solid #93c5fd; outline-offset:2px}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important}
}