[data-surface=drill]{--d-bg:#eef2f6;--d-panel:#fffdf6;--d-panel-2:#f4f1e7;--d-accent:#8fc97f;--d-accent-2:#a9d89c;--d-accent-deep:#3f8a64;--d-accent-soft:#e8f5e2;--d-accent-soft-border:#d2e8c8;--d-bg-grad-1:#e6f5ea;--d-bg-grad-2:#e3f4ec;--d-bg-base:#e8eef2;--d-text:#3a3a44;--d-muted:#7a7a88;--d-good:#3fae6b;--d-warn:#b9801f;--d-danger:#e06666;--d-border:#e7e1d3;--d-shadow:0 18px 40px #505a7829;--d-hand:var(--font-patrick-hand), ui-rounded, cursive;--d-body:var(--font-quicksand), system-ui, -apple-system, sans-serif;font-family:var(--d-body);color:var(--d-text)}[data-surface=drill] .ic{justify-content:center;align-items:center;display:inline-flex}[data-surface=drill] .ic svg{width:1em;height:1em;display:block}[data-surface=drill] .d-hidden{display:none!important}[data-surface=drill] .d-config{max-width:760px;margin:0 auto}[data-surface=drill] .d-title{font-family:var(--d-hand);align-items:center;gap:12px;margin-bottom:6px;font-size:40px;font-weight:700;display:flex}[data-surface=drill] .d-title .ic{color:var(--d-accent);font-size:34px;transform:rotate(-4deg)}[data-surface=drill] .d-title .word{background:linear-gradient(90deg, var(--d-accent), var(--d-accent-2));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}[data-surface=drill] .d-subtitle{color:var(--d-muted);margin-bottom:32px;font-size:15px}[data-surface=drill] .d-card{background:var(--d-panel);border:2px solid var(--d-border);box-shadow:var(--d-shadow);border-radius:22px;margin-bottom:20px;padding:24px}[data-surface=drill] .d-card h2{text-transform:uppercase;letter-spacing:1px;color:var(--d-accent);align-items:center;gap:8px;margin-bottom:16px;font-size:13px;display:flex}[data-surface=drill] .d-card h2 .ic{font-size:16px}[data-surface=drill] .data-info{font-size:15px}[data-surface=drill] .data-info b{color:var(--d-text)}[data-surface=drill] .data-counts{color:var(--d-muted);margin-top:6px;font-size:13px}[data-surface=drill] .time-row{flex-wrap:wrap;align-items:center;gap:16px;display:flex}[data-surface=drill] .time-input{text-align:center;background:var(--d-panel-2);width:110px;color:var(--d-text);border:1px solid var(--d-border);border-radius:10px;padding:10px;font-size:24px;font-weight:700}[data-surface=drill] .time-muted{color:var(--d-muted)}[data-surface=drill] .time-input.sm{width:76px;padding:8px;font-size:20px}[data-surface=drill] .time-presets{flex-wrap:wrap;gap:8px;display:flex}[data-surface=drill] .preset{background:var(--d-panel-2);border:1px solid var(--d-border);color:var(--d-muted);cursor:pointer;border-radius:999px;padding:8px 14px;font-size:14px;transition:all .15s}[data-surface=drill] .preset:hover{border-color:var(--d-accent);color:var(--d-text)}[data-surface=drill] .preset.active{background:var(--d-accent);color:#fff;border-color:var(--d-accent);font-weight:700}[data-surface=drill] .level-list{flex-direction:column;gap:12px;display:flex}[data-surface=drill] .level{background:var(--d-panel-2);border:2px solid var(--d-border);text-align:left;border-radius:12px;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:16px;transition:all .15s;display:flex}[data-surface=drill] .level:hover{border-color:var(--d-accent-2)}[data-surface=drill] .level-main{cursor:pointer;text-align:left;min-width:0;color:inherit;font:inherit;background:0 0;border:none;flex:1;align-items:center;gap:14px;margin:0;padding:0;display:flex}[data-surface=drill] .level-main:disabled{cursor:not-allowed}[data-surface=drill] .level-time{flex-shrink:0;align-items:center;gap:8px;display:flex}[data-surface=drill] .level.on{border-color:var(--d-accent);background:var(--d-accent-soft)}[data-surface=drill] .level .check{border:2px solid var(--d-muted);color:#fff;border-radius:7px;flex-shrink:0;justify-content:center;align-items:center;width:24px;height:24px;font-size:15px;display:flex}[data-surface=drill] .level .check .ic{opacity:0}[data-surface=drill] .level.on .check{background:var(--d-accent);border-color:var(--d-accent)}[data-surface=drill] .level.on .check .ic{opacity:1}[data-surface=drill] .level .info{flex:1}[data-surface=drill] .level .name{font-size:16px;font-weight:700}[data-surface=drill] .level .desc{color:var(--d-muted);margin-top:2px;font-size:13px}[data-surface=drill] .level .count{background:var(--d-accent-soft);color:var(--d-accent-deep);white-space:nowrap;border-radius:999px;padding:4px 12px;font-size:13px;font-weight:700}[data-surface=drill] .level.disabled{opacity:.45;cursor:not-allowed}[data-surface=drill] .level.disabled:hover{border-color:var(--d-border)}[data-surface=drill] .opt-row{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:10px;display:flex}[data-surface=drill] .opt-row input{width:18px;height:18px;accent-color:var(--d-accent)}[data-surface=drill] .opt-icon{color:var(--d-muted);font-size:16px}[data-surface=drill] .opt-hint{color:var(--d-muted);margin-bottom:8px;font-size:14px}[data-surface=drill] .seg{background:var(--d-panel-2);border:1px solid var(--d-border);border-radius:999px;flex-wrap:wrap;gap:4px;padding:4px;display:inline-flex}[data-surface=drill] .seg-btn{cursor:pointer;color:var(--d-muted);border-radius:999px;padding:8px 16px;font-size:14px;transition:all .15s}[data-surface=drill] .seg-btn:hover{color:var(--d-text)}[data-surface=drill] .seg-btn.active{background:var(--d-accent);color:#fff;font-weight:700}[data-surface=drill] .start-btn{background:linear-gradient(90deg, var(--d-accent), var(--d-accent-2));color:#fff;cursor:pointer;width:100%;box-shadow:0 6px 0 var(--d-accent-deep), var(--d-shadow);border:none;border-radius:16px;justify-content:center;align-items:center;gap:10px;margin-top:8px;padding:18px;font-size:18px;font-weight:800;transition:all .15s;display:flex}[data-surface=drill] .start-btn:hover{filter:brightness(1.08);transform:translateY(-1px)}[data-surface=drill] .start-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}[data-surface=drill] .drill-search{background:var(--d-panel);border:2px solid var(--d-border);width:100%;font-size:15px;font-family:var(--d-body);color:var(--d-text);border-radius:14px;margin-bottom:16px;padding:14px 18px}[data-surface=drill] .drill-search:focus{border-color:var(--d-accent);outline:none}[data-surface=drill] .drill-search::placeholder{color:var(--d-muted)}[data-surface=drill] .set-grid{flex-direction:column;gap:14px;display:flex}[data-surface=drill] .set-card{background:var(--d-panel);border:2px solid var(--d-border);box-shadow:var(--d-shadow);color:inherit;border-radius:18px;padding:20px 22px;text-decoration:none;transition:all .15s;display:block}[data-surface=drill] .set-card:hover{border-color:var(--d-accent);transform:translateY(-2px)}[data-surface=drill] .set-card .set-title{font-family:var(--d-hand);color:var(--d-accent-deep);font-size:26px;font-weight:700}[data-surface=drill] .set-card .set-desc{color:var(--d-muted);margin-top:6px;font-size:14px}[data-surface=drill] .set-card .set-meta{flex-wrap:wrap;gap:8px;margin-top:14px;display:flex}[data-surface=drill] .set-chip{background:var(--d-accent-soft);color:var(--d-accent-deep);border-radius:999px;padding:4px 12px;font-size:12px;font-weight:700}[data-surface=drill] .set-level{background:var(--d-accent-deep);color:#fff;white-space:nowrap;border-radius:999px;padding:4px 12px;font-size:12px;font-weight:700;display:inline-block}[data-surface=drill] .data-info .set-level{vertical-align:middle;margin-left:8px}[data-surface=drill] .d-empty{background:var(--d-panel);border:2px dashed var(--d-border);text-align:center;color:var(--d-muted);border-radius:18px;padding:32px}[data-surface=drill] .d-player{z-index:60;background:radial-gradient(circle at 18% 12%, var(--d-bg-grad-1), transparent 42%), radial-gradient(circle at 82% 88%, var(--d-bg-grad-2), transparent 42%), var(--d-bg-base);flex-direction:column;display:flex;position:fixed;inset:0}[data-surface=drill] .topbar{border-bottom:1px solid var(--d-border);align-items:center;gap:16px;padding:16px 24px;display:flex}[data-surface=drill] .badge{text-transform:uppercase;letter-spacing:1px;background:var(--d-panel-2);color:var(--d-accent);border-radius:999px;padding:6px 14px;font-size:12px;font-weight:700}[data-surface=drill] .progress-text{color:var(--d-muted);font-size:14px}[data-surface=drill] .progress-bar-wrap{background:var(--d-panel-2);border-radius:999px;flex:1;height:6px;overflow:hidden}[data-surface=drill] .progress-bar-fill{background:var(--d-accent-2);width:0%;height:100%;transition:width .3s}[data-surface=drill] .stage{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:28px;padding:40px;display:flex;position:relative}[data-surface=drill] .vi-prompt{max-width:1100px;font-size:clamp(28px,5vw,56px);font-weight:700;line-height:1.35}[data-surface=drill] .vi-prompt .ans-word,[data-surface=drill] .vi-prompt .line{color:var(--d-text)}[data-surface=drill] .vi-prompt .ans-list{gap:8px}[data-surface=drill] .base-hint{color:var(--d-warn);background:#fdf0d9;border:1px solid #f0dcc0;border-radius:999px;align-items:center;gap:8px;padding:6px 16px;font-size:18px;display:inline-flex}[data-surface=drill] .base-hint b{text-decoration:line-through}[data-surface=drill] .answer{border-top:1px dashed var(--d-border);max-width:1000px;margin-top:8px;padding-top:24px}[data-surface=drill] .answer .lbl{text-transform:uppercase;letter-spacing:1px;color:var(--d-good);align-items:center;gap:6px;margin-bottom:10px;font-size:12px;display:inline-flex}[data-surface=drill] .answer .en{color:var(--d-good);font-size:clamp(22px,3.5vw,38px);font-weight:700;line-height:1.4}[data-surface=drill] .ans-list{flex-direction:column;align-items:center;gap:12px;display:flex}[data-surface=drill] .ans-row{flex-wrap:wrap;justify-content:center;align-items:baseline;gap:14px;display:flex}[data-surface=drill] .ans-word{color:var(--d-good);font-size:clamp(22px,3vw,34px);font-weight:700}[data-surface=drill] .ans-ipa{color:var(--d-muted);font-size:clamp(15px,2vw,20px);font-style:normal}[data-surface=drill] .pos{color:var(--d-accent-deep);background:var(--d-accent-soft);border:1px solid var(--d-accent-soft-border);border-radius:999px;align-self:center;padding:2px 9px;font-size:13px;font-weight:700}[data-surface=drill] .ring-wrap{width:84px;height:84px;position:absolute;top:24px;right:32px}[data-surface=drill] .ring-wrap svg{transform:rotate(-90deg)}[data-surface=drill] .ring-bg{fill:none;stroke:var(--d-panel-2);stroke-width:8px}[data-surface=drill] .ring-fg{fill:none;stroke:var(--d-accent);stroke-width:8px;stroke-linecap:round;transition:stroke-dashoffset .25s linear,stroke .3s}[data-surface=drill] .ring-num{font-family:var(--d-hand);color:var(--d-accent-deep);justify-content:center;align-items:center;font-size:32px;font-weight:700;display:flex;position:absolute;inset:0}[data-surface=drill] .controls{border-top:1px solid var(--d-border);flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;padding:18px;display:flex}[data-surface=drill] .ctrl{background:var(--d-panel-2);border:1px solid var(--d-border);color:var(--d-text);cursor:pointer;border-radius:10px;align-items:center;gap:7px;padding:11px 18px;font-size:14px;font-weight:600;transition:all .15s;display:inline-flex}[data-surface=drill] .ctrl .ic{font-size:17px}[data-surface=drill] .ctrl:hover{border-color:var(--d-accent)}[data-surface=drill] .ctrl.primary{background:var(--d-accent);color:#fff;border-color:var(--d-accent)}[data-surface=drill] .ctrl.answer-on{background:var(--d-good);color:#fff;border-color:var(--d-good)}[data-surface=drill] .ctrl kbd{background:var(--d-bg);border:1px solid var(--d-border);color:var(--d-muted);border-radius:5px;padding:1px 6px;font-size:11px}[data-surface=drill] .paused-flag{color:var(--d-warn);align-items:center;gap:6px;font-size:14px;font-weight:700;display:flex;position:absolute;top:24px;left:32px}[data-surface=drill] .d-finish{z-index:60;text-align:center;background:radial-gradient(circle at 18% 12%, var(--d-bg-grad-1), transparent 42%), radial-gradient(circle at 82% 88%, var(--d-bg-grad-2), transparent 42%), var(--d-bg-base);flex-direction:column;justify-content:center;align-items:center;gap:20px;padding:40px;display:flex;position:fixed;inset:0}[data-surface=drill] .d-finish .big{color:var(--d-accent);font-size:64px}[data-surface=drill] .d-finish h1{font-family:var(--d-hand);color:var(--d-accent-deep);font-size:42px;font-weight:700}[data-surface=drill] .d-finish p{color:var(--d-muted)}
[data-palette=sky]{--d-accent:#6fb7e8;--d-accent-2:#9fd0f0;--d-accent-deep:#2f73a6;--d-accent-soft:#e3f1fb;--d-accent-soft-border:#c8e2f3;--d-bg-grad-1:#e6f1fb;--d-bg-grad-2:#e3edfc;--d-bg-base:#e8ecf2;--d-panel:#fcfdff;--d-panel-2:#eef3f7}[data-palette=violet]{--d-accent:#b39ae0;--d-accent-2:#cdb8ee;--d-accent-deep:#6f54a6;--d-accent-soft:#efe9fb;--d-accent-soft-border:#ddd2f0;--d-bg-grad-1:#efe9fb;--d-bg-grad-2:#ece3fc;--d-bg-base:#ece8f2;--d-panel:#fdfcff;--d-panel-2:#f2eef7}