*{box-sizing:border-box}body{margin:0;background:#eaf5fa;color:#294b58;font:17px/1.6 system-ui,-apple-system,Segoe UI,sans-serif}a{color:#35676f}button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #bd702b;outline-offset:4px}button:disabled{cursor:default}button{touch-action:manipulation}.colors-header{max-width:1040px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:12px 22px;gap:15px}.colors-header a{text-decoration:none;font-weight:700}.colors-brand{display:flex;align-items:center;gap:9px;font-size:1.2rem}.colors-brand img{object-fit:contain}.colors-wrap{max-width:960px;margin:auto;padding:18px 22px 25px}.colors-title{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:18px}.colors-title h1{font-size:1.6rem;line-height:1.25;margin:0}.colors-title button{border:0;background:#ffffffb0;color:#52717c;border-radius:12px;padding:10px 15px;font-size:.85rem}.colors-app{background:white;border:4px solid white;border-radius:30px;padding:24px 30px;box-shadow:0 8px 24px #35636e09}.colors-welcome{display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:20px;padding:12px}.colors-welcome h2{font-size:2rem;line-height:1.2;margin:0 0 15px;letter-spacing:-.03em}.colors-welcome p{color:#607983;margin:0 0 25px}.colors-welcome>img{width:100%;height:265px;object-fit:contain}.color-primary,.color-secondary{border:0;border-radius:17px;min-height:54px;padding:13px 21px;font-weight:750;font-size:1.05rem}.color-primary{background:#dd873c;color:white;box-shadow:0 4px 0 #b56c2e}.color-primary:hover{background:#cf7b32}.color-secondary{color:#3b606f;background:#eaf3f7}.colors-parent-note{font-size:.84rem;color:#6c8089;text-align:center;margin:20px 0 0}.colors-progress-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.85rem;color:#6a7f85}.colors-progress-row b{font-weight:650}progress{width:100%;height:7px;display:block;appearance:none;border:0;border-radius:20px;overflow:hidden;margin-top:10px;background:#e6eef0}progress::-webkit-progress-bar{background:#e6eef0}progress::-webkit-progress-value{background:#75b29b}progress::-moz-progress-bar{background:#75b29b}#color-prompt{font-size:2rem;line-height:1.2;text-align:center;margin:24px 0 8px}#color-instruction{text-align:center;color:#758790;font-size:.95rem;margin:0 0 14px}.color-model{display:block;margin:0 auto;border:0;border-radius:24px;background:#f7faf8;width:min(100%,330px);height:265px;padding:8px}.color-model svg{width:100%;height:100%;display:block}.color-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;max-width:700px;margin:20px auto 0}.color-options[data-count="2"]{grid-template-columns:repeat(2,minmax(0,1fr));max-width:500px}.color-options[data-count="3"]{grid-template-columns:repeat(3,minmax(0,1fr));max-width:650px}.color-option{border:3px solid #e3edf0;border-radius:22px;background:#f6f9fc;padding:10px;min-height:160px}.color-option svg{display:block;width:100%;height:185px}.color-option:hover:not(:disabled){border-color:#adc1c8}.color-option.hint{border-color:#d49b3a;outline:3px solid #f3dba2;outline-offset:3px}.color-option.correct{border-color:#5aab88;background:#e5f6eb}.color-option.try-again{opacity:.65}#color-feedback{text-align:center;min-height:28px;font-weight:700;color:#3a8063;margin:14px 0 10px}.color-actions{display:flex;gap:14px;justify-content:center;align-items:center;margin-top:12px}.color-arrow{min-width:140px;font-size:2.4rem;line-height:1;min-height:70px}.colors-audio-status{font-size:.8rem;color:#8b6547;margin:15px 0 0}.colors-audio-status:empty{display:none}.colors-settings{border-top:1px solid #e4ecee;margin-top:25px;padding-top:14px;font-size:.83rem;color:#6d818c}.colors-settings summary{cursor:pointer;font-weight:650}.color-blocks{display:flex;gap:10px;flex-wrap:wrap}.color-blocks button{border:1px solid #d1e0e5;background:#f6fafb;color:#456873;border-radius:10px;padding:10px 13px;font-size:.8rem;text-align:left}.colors-film,.learning-guide{max-width:800px;margin:35px auto;font-size:.95rem;line-height:1.8}.colors-film h2,.learning-guide h2{font-size:1.4rem;line-height:1.3;margin-bottom:12px}.learning-guide h3{font-size:1.12rem;line-height:1.35;margin-top:26px}.colors-film details{background:white;border-radius:15px;padding:15px 20px}.colors-film summary{cursor:pointer;font-weight:650}.learning-video{aspect-ratio:16/9;margin-top:16px}.learning-video iframe{width:100%;height:100%;border:0}.colors-footer{text-align:center;font-size:.85rem;padding:15px 20px 30px}#color-finish h2{font-size:1.9rem;text-align:center;line-height:1.3}#color-finish-colors{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin:20px 0}#color-finish-colors>div{text-align:center;font-size:.88rem}#color-finish-colors svg{height:140px;width:100%;display:block}#color-result{text-align:center;color:#617d85;font-size:.95rem}[hidden]{display:none!important}@media(max-width:600px){body{font-size:16px}.colors-header{padding:10px 15px}.colors-brand{font-size:1rem}.colors-brand img{width:32px;height:32px}.colors-wrap{padding:14px 12px 20px}.colors-title{gap:8px}.colors-title h1{font-size:1.25rem}.colors-title button{padding:9px 11px}.colors-app{padding:20px 16px;border-radius:24px}.colors-welcome{grid-template-columns:1fr;gap:10px;padding:0}.colors-welcome h2{font-size:1.65rem}.colors-welcome p{margin-bottom:20px}.colors-welcome>img{height:165px;grid-row:2}.colors-welcome .color-primary{font-size:1rem;padding:14px 17px;width:100%}.colors-parent-note{font-size:.78rem;margin-top:14px}#color-prompt{font-size:1.7rem;margin-top:20px}#color-instruction{font-size:.88rem}.color-model{height:235px}.color-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin-top:15px}.color-options[data-count="3"]{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.color-option{min-height:120px;padding:5px;border-radius:17px}.color-option svg{height:130px}.color-options[data-count="3"] .color-option{min-height:115px}.color-options[data-count="3"] svg{height:120px}.color-arrow{min-width:115px;min-height:64px}.color-actions{gap:11px}.color-secondary{font-size:.93rem;padding:12px 15px}.colors-progress-row{font-size:.75rem}#color-finish-colors{grid-template-columns:1fr 1fr;gap:12px}#color-finish-colors svg{height:105px}.colors-film,.learning-guide{font-size:.9rem;margin-top:28px}}
#color-game{scroll-margin-top:70px}