:root{--bg:#f2f6fb;--surface:#fff;--text:#1b2840;--muted:#7a8699;--border:#dae4f2;--accent:#2f6fde;--accent-dark:#1f4fa8;--accent-soft:#e0eafb;--accent-ink:#2459b8;--accent-line:#c3d5f5;--accent-text:#fff;--success:#1f7a48;--success-bg:#dff3e7;--wrong:#c62828;--tag-bg:#e9eef6;--tag-text:#5f6b7f;--radius:16px;--radius-button:14px;--flag-edge:#00000047;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}@media (prefers-color-scheme:dark){:root{--bg:#0f1726;--surface:#18233a;--text:#e6edf8;--muted:#8d9ab0;--border:#26365a;--accent:#4d8af0;--accent-dark:#2a5cc0;--accent-soft:#1e2d4d;--accent-ink:#9dbcf5;--accent-line:#2f4677;--accent-text:#fff;--success:#5fd394;--success-bg:#153a28;--wrong:#ef5350;--tag-bg:#1f2a40;--tag-text:#8d9ab0;--flag-edge:#ffffff4d;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);margin:0;font-family:system-ui,-apple-system,Segoe UI,sans-serif;line-height:1.4}button{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}.screen{flex-direction:column;gap:12px;max-width:720px;margin:0 auto;padding:24px 16px 48px;display:flex}h1{margin:8px 0 12px;font-size:1.6rem;font-weight:700}h2{margin:0 0 12px;font-size:1.15rem;font-weight:700}.detail{color:var(--muted);font-size:.95rem}.primary,.outline,.secondary,.link,.big,.tab,.tag,.pill,.badge,.see-all,.topbar-label,.topbar-counters{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}input::placeholder{text-overflow:ellipsis}.primary,.outline,.secondary{border-radius:var(--radius-button);padding:12px 18px;font-size:1.05rem;font-weight:600}.primary{border:2px solid var(--accent);background:var(--accent);color:var(--accent-text);box-shadow:0 4px 0 var(--accent-dark)}.outline{border:2px solid var(--accent);background:var(--surface);color:var(--accent-ink);box-shadow:0 4px 0 var(--accent-line)}.secondary{border:2px solid var(--border);background:var(--surface);color:var(--text);box-shadow:0 4px 0 var(--border)}.big{border:2px solid var(--border);border-radius:var(--radius-button);background:var(--surface);box-shadow:0 4px 0 var(--border);padding:16px 20px;font-size:1.1rem;font-weight:600}.primary:active:not(:disabled),.outline:active:not(:disabled),.secondary:active:not(:disabled),.big:active:not(:disabled){box-shadow:none;transform:translateY(4px)}.link{max-width:100%;color:var(--accent-ink);background:0 0;border:none;align-self:center;padding:8px 0;font-weight:600}.card{border:2px solid var(--accent-soft);border-radius:var(--radius);background:var(--surface);box-shadow:0 4px 0 var(--accent-soft);padding:12px}.tab{background:var(--accent-soft);color:var(--accent-ink);border:none;border-radius:999px;flex:none;padding:6px 12px;font-size:.9rem;font-weight:600}.tab small{opacity:.75;font-size:.8rem;font-weight:600}.tab.on{background:var(--accent);color:var(--accent-text);box-shadow:0 3px 0 var(--accent-dark)}.tag{background:var(--tag-bg);max-width:100%;color:var(--tag-text);border-radius:999px;padding:2px 8px;font-size:.75rem;font-weight:600;display:inline-block}.tag.ok{background:var(--success-bg);color:var(--success)}.pill{background:#ffffff38;border-radius:999px;padding:2px 10px;font-size:.85rem;font-weight:600}.badge{background:var(--tag-bg);max-width:100%;color:var(--muted);vertical-align:middle;border-radius:999px;padding:1px 6px;font-size:.75rem;font-weight:600;display:inline-block}.question{flex-direction:column;gap:12px;display:flex}.question[inert]{opacity:.6}.stage{flex-direction:column;gap:16px;display:flex}.flag{width:auto;max-width:100%;height:auto;max-height:100%;box-shadow:0 0 0 1px var(--flag-edge);margin:auto;display:block}.figure{background:var(--surface);border:2px solid var(--accent-soft);border-radius:var(--radius);height:200px;padding:8px;display:flex}.crop-frame{border-radius:var(--radius);border:2px solid var(--accent-soft);width:100%;max-width:420px;margin:0 auto;overflow:hidden}.crop-frame .flag{width:100%;max-height:none;box-shadow:none}.flag-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.flag-option,.pair-flag{border:2px solid var(--border);border-radius:var(--radius-button);background:var(--surface);box-shadow:0 4px 0 var(--border);flex-direction:column;gap:6px;padding:8px;display:flex}.flag-option .flag,.pair-flag .flag{max-height:90px}.name-list{flex-direction:column;gap:10px;display:flex}.name-option{border:2px solid var(--border);border-radius:var(--radius-button);background:var(--surface);text-align:left;box-shadow:0 4px 0 var(--border);padding:12px 16px;font-weight:500}.chosen{border-color:var(--accent);background:var(--accent-soft)}.selected{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 2px var(--accent)}.name-option.linked{opacity:.5}.pair-flag.linked{border-color:var(--accent)}.pair-flags{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.pair-label{color:var(--text);min-height:1.3em;font-size:.95rem;font-weight:500}.yes-no{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;display:grid}.type-form{flex-direction:column;gap:10px;display:flex}.type-form input{font:inherit;border:2px solid var(--accent-line);background:var(--surface);color:var(--text);border-radius:12px;padding:12px 14px;font-size:1.1rem}.feedback{border-radius:var(--radius);border:2px solid var(--border);background:var(--surface);flex-direction:column;gap:12px;padding:16px;display:flex}.feedback.right{border-color:var(--success)}.feedback.wrong{border-color:var(--wrong)}.verdict{margin:0;font-size:1.2rem;font-weight:700}.feedback.right .verdict{color:var(--success)}.feedback.wrong .verdict{color:var(--wrong)}.solution-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));align-items:start;gap:10px;display:grid}.solution-card{flex-direction:column;gap:6px;margin:0;display:flex}.flag-box{aspect-ratio:4/3;display:flex;overflow:hidden}.flag-box .flag{object-fit:contain;width:100%;height:100%;margin:0}.solution-card figcaption{font-size:.95rem;font-weight:500;line-height:1.25}.solution-name{-webkit-line-clamp:2;line-clamp:2;overflow-wrap:anywhere;-webkit-box-orient:vertical;min-height:2.5em;display:-webkit-box;overflow:hidden}.solution-card .badge{width:fit-content;margin-top:4px;display:block}@media (width>=560px){.flag-grid.count-6{grid-template-columns:repeat(3,minmax(0,1fr))}.figure{height:260px}}.type-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.type-item{border:2px solid var(--accent-soft);border-radius:var(--radius-button);background:var(--surface);flex-direction:column;gap:6px;padding:8px;display:flex}.type-item .flag{max-height:80px}.type-item input{width:100%;min-width:0}[data-hint]{position:relative}[data-hint]:after{content:attr(data-hint);color:var(--muted);font-variant-numeric:tabular-nums;font-size:.75rem;position:absolute;top:6px;right:8px}@media (hover:none){[data-hint]:after{content:none}}.quiz-message{color:var(--wrong);margin:0;font-weight:600}.quiz-message[hidden]{visibility:hidden;display:block}.quiz-screen{height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));padding-bottom:16px}.quiz-grid{flex:auto;grid-template-columns:repeat(auto-fill,minmax(60px,1fr));align-content:start;align-items:start;gap:6px;min-height:0;padding:4px;display:grid;overflow-y:auto}.quiz-cell{background:var(--surface);border:2px solid #0000;border-radius:8px;flex-direction:column;gap:4px;padding:4px;display:flex}.quiz-cell:disabled{opacity:1;cursor:default}.quiz-cell.current{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}.quiz-thumb{aspect-ratio:4/3;display:flex;position:relative}.quiz-cell.answered .flag{opacity:.35}.quiz-cell.answered .quiz-thumb:after{content:"✓";color:var(--success);place-items:center;font-size:1.6rem;font-weight:800;display:grid;position:absolute;inset:0}.quiz-cell.missed .quiz-thumb:after{content:"";background:var(--wrong);border-radius:50%;width:10px;height:10px;position:absolute;top:-3px;right:-3px}.quiz-name{-webkit-line-clamp:2;line-clamp:2;text-align:center;overflow-wrap:anywhere;-webkit-box-orient:vertical;font-size:.7rem;font-weight:500;line-height:1.2;display:-webkit-box;overflow:hidden}.quiz-name:empty{display:none}.quiz-dock{border:2px solid var(--accent-soft);border-radius:var(--radius);background:var(--surface);flex-direction:column;gap:8px;padding:10px;display:flex}.quiz-dock .figure{border:none;height:110px;padding:0}.quiz-dock .type-form{flex-direction:row}.quiz-dock .type-form input{flex:1;min-width:0}.quiz-dock .type-form button{flex:none;padding:10px 12px;font-size:.95rem}@media (width>=560px){.quiz-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}.quiz-dock .figure{height:160px}}@media (height<=520px){.quiz-dock .figure{height:64px}}.record{color:var(--success);margin:0;font-weight:600}.screen.wide{max-width:1200px}.table-head{align-items:baseline;gap:12px;min-width:0;display:flex}.table-head h1{white-space:nowrap;margin:0}.table-head .detail{white-space:nowrap}.table-head .link{margin-left:auto}.flag-table-item{border:2px solid var(--accent-soft);border-radius:var(--radius-button);background:var(--surface);text-align:left;box-shadow:0 4px 0 var(--accent-soft);padding:8px}.flag-dialog{border:2px solid var(--accent-soft);border-radius:var(--radius);background:var(--surface);max-width:min(90vw,900px);color:var(--text);cursor:pointer;padding:16px}.flag-dialog::backdrop{background:#0009}.flag-dialog .flag{object-fit:contain;width:min(80vw,860px);max-height:70vh;box-shadow:none}.flag-dialog p{text-align:center;margin:12px 0 0;font-size:1.3rem;font-weight:600}.hub{padding-top:0}.hub-header{border-radius:0 0 var(--radius) var(--radius);background:var(--accent);color:var(--accent-text);align-items:center;gap:8px;margin:0 -16px;padding:16px;display:flex}.hub-header h1{white-space:nowrap;margin:0;font-size:1.3rem}.hub-header .pill{margin-left:auto}.tabs{scrollbar-width:none;gap:6px;margin:0 -16px;padding:4px 16px 8px;display:flex;overflow-x:auto}.levels{flex-direction:column;gap:14px;display:flex}.level-card{flex-direction:column;gap:8px;display:flex}.level-head{align-items:center;gap:8px;display:flex}.level-head h2{white-space:nowrap;margin:0;font-size:1.05rem}.level-head .meta{color:var(--muted);white-space:nowrap;font-size:.85rem}.thumbs{gap:4px;margin-left:auto;display:flex}.thumbs .flag{border-radius:2px;height:16px;margin:0}.tags{gap:6px;min-width:0;display:flex}.tags .tag{min-width:0}.level-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;display:grid}.see-all{border:2px dashed var(--accent-line);border-radius:var(--radius-button);color:var(--accent-ink);background:0 0;padding:12px 8px;font-size:.9rem;font-weight:600}.topbar{flex-direction:column;gap:8px;display:flex}.topbar-row{font-variant-numeric:tabular-nums;align-items:center;gap:10px;font-weight:600;display:flex}.topbar-close{background:var(--accent-soft);width:32px;height:32px;color:var(--accent-ink);border:none;border-radius:50%;flex:none;padding:0;font-weight:700}.topbar-label{flex:auto;min-width:0}.topbar-counters{flex:none;gap:10px;display:flex}.topbar-bar{background:var(--accent-soft);border-radius:999px;height:8px;overflow:hidden}.topbar-fill{background:var(--accent);border-radius:999px;height:100%;transition:width .2s;display:block}.heart{color:var(--wrong)}.heart.lost{color:var(--muted)}.result h1{text-align:center;margin:16px 0 0;font-size:1.5rem}.result>.detail{text-align:center;margin:0}.result .record{text-align:center}.result h2{margin:12px 0 0}.stats{grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;gap:8px;display:grid}.stat{flex-direction:column;align-items:center;padding:8px;display:flex}.stat b{font-variant-numeric:tabular-nums;font-size:1.4rem}.stat span{color:var(--muted);font-size:.8rem}.result-actions{flex-direction:column;gap:12px;margin:8px 0;display:flex}
