:root{--bg:#0f1226;--card:#1b1f3b;--ink:#f6f7ff;--dim:#c2c8e6;--good:#2ecc71;--bad:#ff4d6d;
        --gold:#ffcc33;--tile:#26305c;--tile2:#33407a}
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html,body{margin:0;min-height:100%;font-family:-apple-system,"PingFang SC","Noto Sans SC","Microsoft YaHei",sans-serif}
  body{background:linear-gradient(180deg,#0f1226,#171c3d 60%,#0f1226);color:var(--ink);
       display:flex;flex-direction:column;align-items:center;min-height:100dvh;padding:10px 10px 96px;
       touch-action:manipulation;-webkit-user-select:none;user-select:none}
  .wrap{width:100%;max-width:520px;flex:1;display:flex;flex-direction:column;gap:12px}
  header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 4px}
  .brand{font-weight:800;font-size:16px} .brand small{display:block;font-weight:500;font-size:12px;color:var(--dim)}
  .stars{background:#241d05;border:1px solid #6a5312;color:var(--gold);font-weight:800;border-radius:999px;padding:8px 14px;font-size:16px}
  .dots{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;min-height:22px;font-size:15px;color:var(--dim);
        align-items:center;text-align:center}
  .panel{background:var(--card);border:1px solid #2c3566;border-radius:20px;padding:16px;
         box-shadow:0 10px 30px #0006;display:flex;flex-direction:column;gap:14px;flex:1;
         justify-content:center}
  #stage{flex:1;display:flex;flex-direction:column}
  .prompt{font-size:19px;color:var(--ink);text-align:center;line-height:1.45;font-weight:600}
  .provenance{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center;font-size:13px}
  .chip{background:#26305c;border:1px solid #4a56a0;color:#dfe4ff;border-radius:999px;padding:3px 10px;font-size:12px}
  .chip.new{background:#3a2a05;border-color:#8a6a12;color:var(--gold);font-weight:700}
  .chip.rev{background:#16305c;border-color:#2f5aa8;color:#bcd2ff}
  .stimulus{display:flex;flex-direction:column;align-items:center;gap:10px;min-height:110px;justify-content:center}
  .bigword{font-size:40px;font-weight:800;letter-spacing:.5px;text-align:center;line-height:1.15;word-break:break-word}
  .speaker{width:104px;height:104px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#6fb1ff,#2a63c8);
           border:none;color:#fff;font-size:44px;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px #0a1a3a}
  .speaker.playing{animation:pulse .8s infinite} @keyframes pulse{50%{transform:scale(1.08)}}
  .tiles{display:grid;grid-template-columns:1fr;gap:10px}
  .tile{background:var(--tile);border:2px solid #3b4788;border-radius:16px;min-height:64px;color:var(--ink);
        font-size:22px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:12px;
        width:100%;font-family:inherit;text-align:center}
  .tile:active{transform:scale(.98)}
  .tile.good{background:#12452a;border-color:var(--good)}
  .tile.bad{background:#4a1424;border-color:var(--bad);animation:shake .2s}
  @keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
  .slots{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
  .slot{width:40px;height:50px;border-bottom:4px solid #4a56a0;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:800}
  .slot.px{border-color:var(--gold)}
  .tray{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
  .letter{background:var(--tile2);border:2px solid #4a56a0;border-radius:12px;height:60px;font-size:26px;
          font-weight:800;color:var(--ink);font-family:inherit}
  .letter.used{opacity:.25}
  .mini{background:#212a55;border:1px solid #3b4788;color:var(--ink);border-radius:14px;padding:12px 16px;font-size:16px;font-family:inherit;font-weight:600}
  .explain{background:#3a1f16;border:1px solid #7a4a2a;border-radius:16px;padding:14px;text-align:center}
  .explain .zh{font-size:20px;font-weight:700;line-height:1.5} .explain .why{font-size:16px;color:#ffd9a8;margin-top:6px}
  .known{background:#16305c;border:1px solid #2f5aa8;border-radius:14px;padding:12px;font-size:17px;color:#dce6ff;text-align:center}
  .cta{background:linear-gradient(180deg,#ffd75e,#f5a623);border:none;color:#3a2600;font-weight:900;font-size:19px;
       border-radius:16px;padding:18px;width:100%;font-family:inherit;min-height:60px}
  .ghost{background:#212a55;border:1px solid #3b4788;color:#dfe4ff;border-radius:16px;padding:16px;width:100%;font-size:17px;
         font-family:inherit;min-height:56px;font-weight:600}
  .field{display:flex;flex-direction:column;gap:6px}
  .field label{font-size:15px;color:var(--dim)}
  .field input{background:#131737;border:2px solid #3b4788;color:var(--ink);border-radius:14px;padding:14px;
               font-size:22px;letter-spacing:4px;text-align:center;font-family:inherit;width:100%}
  .err{color:#ff9db1;font-size:16px;text-align:center;min-height:20px}
  footer{position:fixed;bottom:0;left:0;right:0;display:flex;gap:8px;justify-content:center;padding:10px;
         background:#0d1024f2;backdrop-filter:blur(6px);border-top:1px solid #232a52}
  footer button{flex:1;max-width:160px;background:#212a55;border:1px solid #3b4788;color:#dfe4ff;border-radius:14px;
                padding:14px;font-size:15px;font-family:inherit;font-weight:600;min-height:52px}
  footer button:disabled{opacity:.3;filter:grayscale(1)}
  .hidden{display:none !important} .tag{font-size:13px;color:var(--dim);text-align:center;line-height:1.7}
  .end{text-align:center;display:flex;flex-direction:column;gap:12px}
  .end .score{font-size:54px;font-weight:900;color:var(--gold)}
  .list{text-align:left;font-size:16px;line-height:1.9;color:#eef1ff}
  .list .lesson{color:var(--dim);font-size:14px;margin-top:8px}
  .code{font-family:ui-monospace,monospace;font-size:34px;font-weight:900;letter-spacing:6px;color:var(--gold)}
  .busy{display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px 8px;text-align:center}
  .spin{width:42px;height:42px;border-radius:50%;border:5px solid #33407a;border-top-color:var(--gold);animation:sp 1s linear infinite}
  @keyframes sp{to{transform:rotate(360deg)}}
  .alert{background:#2a1520;border:1px solid #7a2a3a;border-radius:16px;padding:16px;text-align:center;display:flex;flex-direction:column;gap:12px}