:root{font-family:Arial,Helvetica,sans-serif;color:#263449;background:#f6f8fb;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button{font:inherit;cursor:pointer}button:disabled{opacity:.5;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #6e54cf;outline-offset:4px}[hidden]{display:none!important}.app{max-width:1100px;margin:auto;padding:20px}nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}nav a,.result-actions a{font-size:1rem;color:#61748c;text-underline-offset:4px}.help{width:34px;height:34px;border-radius:50%;background:#fff;border:1px solid #d7e0eb;color:#64778e;font-weight:700}.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;border:1px solid #e2e8ee;border-radius:12px;background:white;padding:17px 21px;box-shadow:0 3px 4px #1e2a3e12}.topbar h1{font:700 26px Georgia,serif;margin:0 0 5px}.topbar p{font-size:.875rem;line-height:1.6;color:#61758e;margin:0}.badge{font-size:.875rem;font-weight:700;letter-spacing:.6px;background:#e9e6ff;color:#5748bd;padding:7px 11px;border-radius:10px}.progress{height:4px;background:#e5ebf2;margin:16px 2px 12px;border-radius:6px;overflow:hidden}.progress>div{height:100%;width:0;background:#7762d2;transition:width .2s ease}.task-panel{padding:26px;background:#f0f5fa;border:1px solid #dfe7ef;border-radius:20px;box-shadow:0 2px 4px #1e2a3e0a}.face-stage{min-height:310px;height:clamp(310px,43vh,430px);background:white;border-radius:15px;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:20px}.face-sprite{background-repeat:no-repeat;background-size:700% 300%;width:min(300px,100%);aspect-ratio:1;flex-shrink:0}.face-stage.paused .face-sprite{visibility:hidden}.face-stage.waiting .face-sprite{opacity:.25}.options{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px;margin:21px 0 15px}.emotion-button{min-height:71px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:1px solid #d9e3ed;border-radius:11px;background:#fff;color:#263449;font-size:.875rem;font-weight:700;padding:12px 4px;box-shadow:0 1px 2px #18233e05}.emotion-button span{max-width:100%;overflow-wrap:anywhere}.emotion-button kbd{font:400 .875rem Arial;border:1px solid #91a0b2;color:#536278;border-radius:3px;padding:1px 5px}.emotion-button:hover:enabled{background:#f6f2ff;border-color:#aa98e7}.emotion-button.selected{background:#eee7ff;border:2px solid #8870d9}.task-hint,.status{font-size:.875rem;line-height:1.6;color:#62768f;text-align:center;margin:0}.status{min-height:23px;margin-top:5px}.start-actions{text-align:center;margin:20px 0}.primary{background:#7660ca;color:white;border:0;border-radius:10px;font-weight:700;min-height:46px;padding:13px 23px}.primary:hover:enabled{background:#6048b4}.pause-panel{background:#eee8fc;border-radius:12px;text-align:center;padding:20px;margin:20px 0}.pause-panel p{font-size:1rem;color:#596b82}.asset-error{text-align:center;font-size:1rem;color:#596b82}.results{margin-top:20px;padding:28px;background:white;border:1px solid #e0e7ee;border-radius:18px}.eyebrow{font-size:.875rem;font-weight:700;letter-spacing:1px;color:#667991}.results h2{font:700 30px Georgia,serif;margin:12px 0}.results p{font-size:1rem;line-height:1.6;color:#5c7089}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin:24px 0}.stat{background:#f3effc;border-radius:12px;padding:20px}.stat strong{display:block;font-size:28px;color:#483665}.stat span{font-size:.875rem;color:#66768e}.practice-note{font-size:.875rem!important;line-height:1.6;color:#5f7189;background:#f5f2fb;border-radius:10px;padding:14px}.level-results{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0}.level-results span{background:#f0f5fa;border-radius:8px;padding:10px 14px;font-size:.875rem;color:#53667e}.table-wrap{overflow:auto;margin:24px 0 10px}.matrix{width:100%;border-collapse:collapse;text-align:center;font-size:.875rem;min-width:760px}.matrix caption{text-align:left;font:700 22px Georgia,serif;margin-bottom:16px}.matrix th,.matrix td{padding:13px 10px;border-bottom:1px solid #e0e7ef}.matrix th{color:#5f7189}.matrix th:first-child{text-align:left}.matrix .match{background:#eef7f3;color:#05765b;font-weight:700}.matrix .confusion{background:#fff0f3;color:#a63355;font-weight:700}.matrix .zero{color:#9ca8b7}.matrix-hint{font-size:.875rem!important}.results h3{font:700 23px Georgia,serif;margin:28px 0 15px}.filter{display:flex;align-items:center;gap:10px;font-size:1rem;margin-bottom:18px}.filter input{width:18px;height:18px;accent-color:#7660ca}.reviews{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.review{border:1px solid #dfe7f0;border-radius:12px;overflow:hidden}.review summary{cursor:pointer;font-size:.875rem;font-weight:700;line-height:1.5;padding:15px;display:flex;gap:12px;align-items:center;list-style:none}.review summary::-webkit-details-marker{display:none}.review summary:after{content:'+';font-size:23px;margin-left:auto;font-weight:400}.review[open] summary:after{content:'−'}.review .mini-face{width:74px;height:74px;flex-shrink:0;border-radius:6px;background-color:white}.review-body{padding:0 17px 15px}.review-body p{font-size:.875rem;margin:8px 0}.review .full-face{width:220px;max-width:100%;margin:0 auto}.review .label-match{color:#05765b}.review .label-mismatch{color:#a63355}.result-actions{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin-top:28px}footer{text-align:center;color:#75859a;font-size:.875rem;line-height:1.6;margin:25px 0}dialog{width:calc(100% - 32px);max-width:590px;border:0;border-radius:20px;padding:32px;color:#263449;box-shadow:0 20px 80px #0003}dialog::backdrop{background:#202b4770}dialog h2{font:700 27px Georgia,serif;margin:15px 0}dialog p,dialog li{font-size:1rem;line-height:1.6;color:#5d6e84}dialog ol{padding-left:22px}dialog li{margin:8px 0}.close-help{position:absolute;top:12px;right:14px;background:none;border:0;color:#62748b;font-size:28px}.home-expressions-image{object-fit:contain}
@media(max-width:800px){.options{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.options .emotion-button:last-child{grid-column:span 2}.reviews{grid-template-columns:1fr}}
@media(max-width:500px){.app{padding:14px}.topbar{padding:16px;align-items:flex-start;gap:10px}.badge{font-size:.75rem;padding:6px 8px}.task-panel{padding:16px}.face-stage{min-height:270px;height:34vh;padding:10px}.face-sprite{width:240px;max-width:100%}.options{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:15px}.emotion-button{min-height:66px;font-size:.875rem}.stats{grid-template-columns:1fr;gap:10px}.stat{padding:16px}.results{padding:20px}.topbar h1{font-size:24px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}