:root{--navy:#102a43;--blue:#28679f;--brick:#c6542c;--bg:#f3f7fa;--paper:#fff;--text:#172433;--muted:#66798a;--line:#d7e1e8;--good:#e6f6eb;--goodb:#4d9866;--bad:#fde9e6;--badb:#c45e54;--shadow:0 14px 38px rgba(16,42,67,.08)}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;background:linear-gradient(180deg,#edf3f7 0,#fafcfd 420px,#f3f7fa 100%);color:var(--text);font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif}button,input{font:inherit}.topbar{background:var(--navy);color:white}.topbar-inner{max-width:1180px;margin:auto;padding:9px 18px;display:flex;justify-content:space-between;align-items:center;gap:12px}.back{color:white;text-decoration:none;font-weight:800}.brand{font-size:13px;opacity:.9}.hero{padding:24px 18px 0}.hero-inner{max-width:1140px;margin:auto;background:linear-gradient(135deg,#fff,#f8fafc);border:1px solid var(--line);border-radius:24px;padding:28px 30px;box-shadow:var(--shadow)}.eyebrow{text-transform:uppercase;letter-spacing:.09em;font-size:12px;font-weight:950;color:var(--brick)}h1{font-size:clamp(34px,5vw,52px);line-height:1.04;color:var(--navy);margin:7px 0 10px}.hero p{max-width:900px;color:var(--muted);font-size:16.5px;line-height:1.55;margin:0}.hero-stats{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px}.stat{min-width:130px;background:#f4f8fa;border:1px solid var(--line);border-radius:13px;padding:10px 13px}.stat span{display:block;color:var(--muted);font-size:12px}.stat strong{font-size:22px;color:var(--navy)}.page{max-width:1140px;margin:auto;padding:18px 18px 60px}.intro,.task-card,.result,.game-card{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow)}.intro{padding:22px}.intro h2,.result h2,.game-card h2{color:var(--navy);margin:0 0 8px}.intro>p{color:var(--muted);line-height:1.5}.level-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:17px 0}.level-card{border:2px solid var(--line);background:#fff;border-radius:15px;padding:15px;text-align:left;cursor:pointer;min-height:104px}.level-card b{display:block;font-size:19px;color:var(--navy);margin-bottom:6px}.level-card span{display:block;color:var(--muted);line-height:1.35;font-size:13px}.level-card:hover{border-color:#91adc2}.level-card.selected{border-color:var(--blue);box-shadow:0 0 0 3px rgba(40,103,159,.12)}.level-card.easy.selected{background:#f1faf4}.level-card.medium.selected{background:#eef6fb}.level-card.hard.selected{background:#fff5ef}.rulebox{background:#f8fafb;border:1px solid var(--line);border-left:5px solid var(--brick);border-radius:12px;padding:11px 13px;margin:10px 0 16px;line-height:1.45}.btn{border:0;border-radius:11px;padding:11px 15px;font-weight:900;cursor:pointer}.btn.primary{background:var(--blue);color:#fff}.btn.secondary{background:#fff;border:1px solid var(--line);color:var(--navy)}.btn:disabled{opacity:.48;cursor:default}.workbar{display:none;position:sticky;top:0;z-index:20;margin:14px 0;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:15px;padding:10px 12px;box-shadow:var(--shadow);align-items:center;gap:12px}.workbar.show{display:flex}.clock{font-variant-numeric:tabular-nums;font-size:23px;font-weight:950;color:var(--navy);min-width:76px}.clock.urgent{color:#b83e32}.answered{font-size:13px;color:var(--muted);font-weight:800}.level-pill{background:#eef4f8;color:#31566f;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:900}.spacer{flex:1}.task-area{display:none;gap:14px}.task-area.show{display:grid}.task-card{padding:20px}.task-heading{display:flex;align-items:center;gap:10px;margin-bottom:12px}.task-heading>span{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#edf3f7;color:var(--navy);font-weight:950}.task-heading h2{margin:0;color:var(--navy);font-size:21px}.task-heading p{margin:2px 0 0;color:var(--muted);font-size:12px}.task-heading.small h2{font-size:18px}.input-grid{display:grid;gap:9px}.input-grid.four{grid-template-columns:repeat(4,1fr)}.input-grid.two{grid-template-columns:repeat(2,1fr)}.answer-item{background:#f8fafb;border:1px solid var(--line);border-radius:12px;padding:10px 11px}.answer-item label{display:block;font-weight:850;margin-bottom:6px;line-height:1.35}.answer-item input{width:100%;border:2px solid #b9cad7;border-radius:9px;padding:9px;text-align:center;font-size:18px;font-weight:900;background:#fff}.answer-item input:focus{outline:3px solid rgba(40,103,159,.12);border-color:#5e91b7}.answer-item.correct,.choice.correct{background:var(--good);border-color:var(--goodb)}.answer-item.wrong,.choice.wrong{background:var(--bad);border-color:var(--badb)}.dataset{background:#f5f8fa;border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:11px;font-size:17px;font-weight:850;line-height:1.55}.help-note{background:#fff7df;border:1px solid #ead489;border-radius:10px;padding:9px 11px;margin-bottom:10px;color:#6f5811}.frequency-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.freq-item{border:1px solid var(--line);border-radius:12px;padding:10px;text-align:center;background:#f8fafb}.freq-item b{display:block;font-size:18px;margin-bottom:6px}.freq-item input{width:100%;max-width:100px;border:2px solid #b9cad7;border-radius:9px;padding:8px;text-align:center;font-weight:900;font-size:18px}.chartbox{border:1px solid var(--line);border-radius:14px;padding:9px;background:#fff;overflow:auto;margin-bottom:12px}.chartbox svg{display:block;width:100%;min-width:520px;height:auto}.split-card{display:grid;grid-template-columns:1fr 1fr;gap:16px}.half+.half{border-left:1px solid var(--line);padding-left:16px}.choice-list{display:grid;gap:8px}.choice{border:1px solid #bdcbd7;background:#fff;border-radius:10px;padding:10px 12px;font-weight:800;cursor:pointer;text-align:left}.choice.selected{border-color:var(--blue);background:#edf5fb}.mini-chart{max-width:340px;margin:5px auto 10px}.mini-chart svg{width:100%;height:auto}.draw-instruction{font-weight:800;color:#34566d}.tap-chart{display:grid;grid-template-columns:48px repeat(2,minmax(100px,180px));gap:8px;justify-content:center;align-items:end;margin:14px auto;max-width:520px}.axis-labels{height:260px;display:grid;grid-template-rows:repeat(10,1fr);font-size:11px;color:var(--muted);text-align:right;padding-right:3px}.axis-labels span{align-self:start;transform:translateY(-7px)}.tap-column{height:260px;border:1px solid var(--line);border-bottom:3px solid #506679;border-radius:8px 8px 0 0;display:flex;flex-direction:column-reverse;background:#fafcfd;overflow:hidden;position:relative}.tap-cell{height:10%;border-top:1px solid #e0e7ec;cursor:pointer}.tap-cell.filled{background:#7faac9}.tap-label{text-align:center;font-weight:850;color:var(--navy);margin-top:7px}.tap-wrap{display:grid;grid-template-rows:260px auto}.tap-hint{text-align:center;color:var(--muted);font-size:13px}.result,.game-card{display:none;padding:22px;margin-top:14px}.result.show,.game-card.show{display:block}.result-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:14px 0}.result-box{background:#f7fafb;border:1px solid var(--line);border-radius:12px;padding:11px}.result-box span{display:block;color:var(--muted);font-size:12px}.result-box strong{display:block;font-size:22px;color:var(--navy);margin-top:2px}.reward-text{border-radius:12px;padding:12px 14px;font-weight:850;line-height:1.45}.reward-text.good{background:var(--good);color:#27623c}.reward-text.bad{background:var(--bad);color:#8f382f}.actions{margin-top:12px}.game-card{text-align:center;background:#f3fbf5;border-color:#bee1c8}.snake-stats{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:12px 0}.snake-stat{min-width:160px;background:#fff;border:1px solid #b9dec9;border-radius:12px;padding:9px 12px}.snake-stat span{display:block;font-size:.76rem;color:#607266}.snake-stat strong{font-size:1.25rem}.snake-wrap{width:min(100%,520px);margin:14px auto 0}.snake-wrap canvas{display:block;width:100%;height:auto;aspect-ratio:1/1;background:#f7fbf7;border:2px solid #9bd4b5;border-radius:16px}.snake-controls{display:grid;grid-template-columns:repeat(3,64px);grid-template-rows:repeat(2,54px);gap:7px;justify-content:center;margin:12px auto 0}.snake-control{border:1px solid #b9cfc0;background:#fff;border-radius:12px;font-size:1.35rem;font-weight:900}.snake-up{grid-column:2;grid-row:1}.snake-left{grid-column:1;grid-row:2}.snake-down{grid-column:2;grid-row:2}.snake-right{grid-column:3;grid-row:2}.snake-message{min-height:26px;margin-top:9px;font-weight:800;color:#365a46}
@media(max-width:760px){.hero{padding:12px 10px 0}.hero-inner{padding:21px 18px}.page{padding:12px 10px 42px}.level-grid{grid-template-columns:1fr}.workbar{flex-wrap:wrap}.workbar .spacer{display:none}.workbar .btn{margin-left:auto}.input-grid.four,.input-grid.two,.frequency-grid{grid-template-columns:repeat(2,1fr)}.split-card{grid-template-columns:1fr}.half+.half{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:15px}.result-grid{grid-template-columns:repeat(2,1fr)}.task-card{padding:16px}.tap-chart{grid-template-columns:40px repeat(2,minmax(88px,150px))}.chartbox svg{min-width:470px}}
@media(max-width:430px){.input-grid.four,.input-grid.two,.frequency-grid{grid-template-columns:1fr}.topbar-inner{padding:8px 10px}.brand{display:none}.clock{font-size:21px}.answered{font-size:12px}.result-grid{grid-template-columns:1fr 1fr}}

.draw-instruction{font-weight:850;color:#34566d;font-size:16px}.draw-data{display:flex;justify-content:center;margin:10px 0}.draw-data table{border-collapse:collapse;min-width:300px;text-align:center}.draw-data th,.draw-data td{border:1px solid var(--line);padding:8px 16px}.draw-data th{background:#eef4f7;color:var(--navy)}.draw-data td{font-size:18px;font-weight:900}.draw-canvas-wrap{max-width:820px;margin:8px auto;border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden}.draw-canvas-wrap canvas{display:block;width:100%;height:auto;touch-action:none;user-select:none}.draw-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:13px}.short-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.statement-card{background:#f8fafb;border:1px solid var(--line);border-radius:12px;padding:12px}.statement-card p{font-weight:800;margin:0 0 9px}.statement-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}.extra-input .answer-item{margin-top:8px}
@media(max-width:760px){.short-grid{grid-template-columns:1fr}.draw-actions .btn{width:100%}}