:root{color-scheme:light;font-family:Segoe UI,Arial,sans-serif;line-height:1.5;font-weight:400;color:#243042;background:#f4f5f7;--card: #ffffff;--line: #e5e7eb;--muted: #7b8794;--accent: #6b74ff;--success: #2c9a71;--error: #cf6c6c}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}body{margin:0;min-width:320px;min-height:100vh}button{font:inherit;-webkit-tap-highlight-color:transparent}summary{-webkit-tap-highlight-color:transparent}.app-shell{width:min(1100px,calc(100vw - 32px));margin:0 auto;padding:32px 0 48px}.page{min-height:calc(100vh - 80px)}.page-home,.page-auth{display:grid;place-items:center}.page-quiz,.page-history{display:grid;align-content:center;justify-items:center}.is-hidden{display:none!important}.home-card,.auth-card,.quiz-panel,.option-panel{background:var(--card);border:1px solid var(--line);border-radius:18px}.home-card{width:min(600px,100%);padding:56px 48px;text-align:center}.auth-card{width:min(460px,100%);padding:48px 32px 34px;text-align:center}.auth-tools{position:fixed;top:20px;right:20px;z-index:15}.gesture-pad{position:relative;width:min(320px,78vw);aspect-ratio:1;margin:28px auto 0;padding:18px;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;touch-action:none}.gesture-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}.gesture-svg polyline{fill:none;stroke:#6b74ff;stroke-width:10;stroke-linecap:round;stroke-linejoin:round}.gesture-node{position:relative;z-index:1;border:0;border-radius:50%;background:#f7f8fa;box-shadow:inset 0 0 0 1px #d9dee7;touch-action:none}.gesture-node:hover{background:#eef2f6}.gesture-node.is-selected{background:#e8edff;box-shadow:inset 0 0 0 2px #6b74ff}.page-kicker{margin:0 0 10px;color:var(--muted);font-size:13px;letter-spacing:.08em;text-transform:uppercase}.home-card h1,.result-item h4{margin:0}.page-desc,.example-item p+p{color:var(--muted)}.page-desc{max-width:460px;margin:14px auto 0}.home-mode-list{display:grid;gap:14px;margin-top:36px;justify-items:center}.home-divider{width:min(320px,100%);height:1px;margin:28px auto 0;background:var(--line)}.home-extra{margin-top:22px;display:grid;justify-items:center}.home-secondary-btn{min-width:180px;padding:13px 18px;border:1px solid var(--line);border-radius:18px;background:#f8f9fb;color:#344256;cursor:pointer}.home-secondary-btn:hover{background:#eef1f5}.home-mode-btn,.primary-btn,.tool-btn,.option-btn,.slot-btn,.icon-btn{border:0;border-radius:20px;cursor:pointer;transition:background-color .15s ease,box-shadow .15s ease,filter .15s ease;-webkit-user-select:none;user-select:none}.home-mode-btn,.tool-btn{background:none;border:2px solid var(--line);color:#344256}.home-mode-btn,.primary-btn,.tool-btn{padding:14px 16px}.home-mode-btn{width:240px;font-size:20px;font-weight:600}.primary-btn{background:var(--accent);color:#fff}.home-mode-btn:hover,.primary-btn:hover,.tool-btn:hover,.option-btn:hover,.slot-btn:hover,.icon-btn:hover{box-shadow:none}.home-mode-btn:hover,.tool-btn:hover,.icon-btn:hover{background:#c2ddfc;transition:background .15s ease}.primary-btn:hover{background:#5e67f5}.option-list{display:flex;flex-wrap:wrap;gap:12px}.tool-btn{min-width:64px;padding:10px 14px;border-radius:999px;border:1.5px solid var(--line)}.quiz-board{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%}.history-board{width:min(760px,100%);display:grid;gap:14px}.history-header{background:var(--card);border:1px solid var(--line);border-radius:18px}.history-header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 22px}.history-header h2{margin:0;font-size:24px}.history-list{display:grid;gap:14px}.history-list::-webkit-scrollbar{width:8px}.history-list::-webkit-scrollbar-track{background:transparent}.history-list::-webkit-scrollbar-thumb{background:#cfd6e2;border-radius:999px}.history-list::-webkit-scrollbar-button{display:none;width:0;height:0}.history-empty,.history-item{border-radius:18px;border:1px solid var(--line);background:#fbfbfc}.history-empty{padding:28px 20px;text-align:center;color:var(--muted)}.history-empty p{margin:0}.history-empty p+p{margin-top:8px}.history-item{overflow:hidden}.history-summary-row{display:grid;gap:10px;padding:14px 16px;cursor:pointer;list-style:none}.history-summary-row::-webkit-details-marker{display:none}.history-summary-top,.history-summary-side{display:flex;gap:10px}.history-summary-top{align-items:center;justify-content:space-between;gap:12px}.history-summary-meta{display:flex;align-items:center;gap:10px;min-width:0;flex-wrap:wrap}.history-summary-side{flex:0 0 auto;align-items:center;gap:10px;color:var(--muted)}.history-mode{font-weight:700;color:#344256}.history-time,.history-status{color:var(--muted)}.history-summary-score{font-size:16px;color:#344256}.history-item[open] .history-summary-row{border-bottom:1px solid var(--line);background:#f8f9fb}.history-item[open] .history-status{color:#344256}.history-detail{padding:12px 16px 16px}.history-word-row{display:flex;flex-wrap:wrap;gap:6px}.history-word-chip{display:inline-flex;align-items:center;justify-content:center;min-height:30px;padding:5px 10px;border-radius:999px;font-size:13px;font-weight:700}.history-word-chip.is-correct{background:#dff4e9;color:#257d5d}.history-word-chip.is-wrong{background:#fde7e7;color:#c04a4a}.history-questions{display:grid;gap:10px}.history-question{width:100%;padding:12px 14px;border-radius:14px;border:0;background:#f6f7f9;text-align:left;cursor:pointer}.history-question:hover{background:#eef2f6}.history-def,.history-answer{margin:0}.history-answer{margin-top:6px;font-weight:600;color:#344256}.loading-view{width:min(760px,100%);display:grid;place-items:center}.loading-panel{width:min(520px,100%);padding:28px 24px;background:var(--card);border:1px solid var(--line);border-radius:18px}.loading-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}.loading-text{margin:0;color:#344256;font-size:18px;font-weight:600}.loading-percent{color:var(--accent);font-size:16px;font-weight:700}.loading-track{width:100%;height:12px;border-radius:999px;background:#eceff4}.loading-bar{width:0;height:100%;border-radius:999px;background:linear-gradient(90deg,#7a82ff,#5e67f5);transition:width .18s ease}.quiz-panel,.option-panel{width:min(760px,100%);padding:18px}.question-list{display:grid;gap:12px}.question-row{display:grid;grid-template-columns:minmax(0,1fr) 160px;gap:12px;align-items:center}.question-card{padding:18px;border-radius:20px;background:#f6f7f9}.question-card p{margin:0;font-size:18px;line-height:1.65}.slot-btn{position:relative;width:100%;min-height:72px;padding:14px 16px;background:#fafafa;color:#344256;border:1px dashed #d4d7de;font-size:18px}.slot-btn.filled{display:flex;align-items:center;justify-content:space-between;gap:12px;border-style:solid;font-weight:700}.slot-btn:hover{background:#f3f5f8}.slot-btn.correct{background:#dff4e9;border-color:transparent}.slot-btn.wrong{background:#fde7e7;border-color:transparent}.slot-word-text,.slot-placeholder-text{display:block}.slot-word-text{flex:1;min-width:0}.slot-result-icon{flex:0 0 auto;display:grid;place-items:center;width:24px;height:24px;border-radius:999px}.slot-result-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}.slot-result-icon.is-correct{color:#2c9a71;background:#2c9a711f}.slot-result-icon.is-wrong{color:#f04438;background:#f044381f}.option-panel{padding-top:16px}.option-btn{min-width:118px;padding:14px 18px;color:#344256;font-size:18px;font-weight:600}.empty-note{margin:0;color:var(--muted);text-align:center;width:100%}.submit-wrap{width:min(760px,100%);display:grid;grid-template-columns:auto auto auto;justify-content:center;align-items:center;gap:12px}.submit-btn{min-width:200px}.back-home-btn,.next-btn{min-width:84px;padding:10px 14px;text-align:center}.toast{position:fixed;top:20px;left:50%;z-index:20;transform:translate(-50%,-12px);opacity:0;pointer-events:none;min-width:180px;max-width:min(420px,calc(100vw - 32px));padding:12px 16px;border-radius:14px;background:#243042eb;color:#fff;text-align:center;transition:opacity .18s ease,transform .18s ease}.toast.is-visible{opacity:1;transform:translate(-50%)}.toast.success{background:#2c9a71f0}.toast.error{background:#cf6c6cf0}.tone-blue,.tone-purple,.tone-cyan,.tone-orange,.tone-pink{border:2px solid transparent}.tone-blue{background:#ebf2ff}.tone-blue:hover,.tone-blue.is-active{background:#c9d9ff;border-color:#97b5ff;filter:saturate(1.14)}.tone-purple{background:#f1edff}.tone-purple:hover,.tone-purple.is-active{background:#dccfff;border-color:#b7a0ff;filter:saturate(1.14)}.tone-cyan{background:#e9f7fb}.tone-cyan:hover,.tone-cyan.is-active{background:#caebf5;border-color:#8ebfd0;filter:saturate(1.14)}.tone-orange{background:#fcf0e6}.tone-orange:hover,.tone-orange.is-active{background:#f1d7c2;border-color:#dea982;filter:saturate(1.14)}.tone-pink{background:#faedf3}.tone-pink:hover,.tone-pink.is-active{background:#edcedb;border-color:#dd9fba;filter:saturate(1.14)}.result-dialog{width:min(760px,calc(100vw - 32px));max-height:calc(100vh - 48px);border:0;border-radius:24px;padding:0;overflow:hidden}.result-dialog::backdrop{background:#23304252}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:8px 16px;border-bottom:1px solid var(--line);background:#fff}.dialog-header h3{margin:0;font-size:18px;line-height:1.2}.icon-btn{width:32px;height:32px;display:grid;place-items:center;background:#f2f3f5;border-radius:999px;color:#445066}.icon-btn:hover{background:#e9edf3}.icon-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}.result-list{display:grid;gap:14px;padding:18px 22px 22px;background:#fbfbfc;max-height:calc(100vh - 132px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:#cfd6e2 transparent}.result-list::-webkit-scrollbar{width:8px}.result-list::-webkit-scrollbar-track{background:transparent}.result-list::-webkit-scrollbar-thumb{background:#cfd6e2;border-radius:999px}.result-list::-webkit-scrollbar-thumb:hover{background:#bcc6d5}.result-list::-webkit-scrollbar-button{display:none;width:0;height:0}.result-item{padding:16px 18px;border-radius:18px;background:#fff;border:1px solid var(--line)}.result-item h4,.result-item p,.example-item p{margin:0}.result-item p+p{margin-top:8px}.example-list{display:grid;gap:10px;margin-top:14px}.example-item{padding:12px 14px;border-radius:14px;background:#f7f8fa}.example-hit{font-weight:700}@media(max-width:900px){.app-shell{width:100%;padding:16px 12px 20px}.page{min-height:calc(100dvh - 36px)}.page-home,.page-auth,.page-quiz,.page-history{align-content:center}.home-card{padding:40px 24px}.auth-card{width:min(420px,100%);margin:0 auto;padding:32px 20px 24px}.page-auth{place-items:center}.gesture-pad{width:min(300px,calc(100vw - 88px));margin-top:22px;padding:14px;gap:22px}.page-quiz{justify-items:stretch}.quiz-board,.loading-view,.loading-panel,.quiz-panel,.option-panel,.submit-wrap{width:100%}.loading-panel,.quiz-panel,.option-panel{padding:10px;border-radius:16px}.question-row{grid-template-columns:1fr;gap:6px}.question-list{gap:6px}.question-card{padding:12px;border-radius:14px}.question-card p{font-size:15px;line-height:1.45}.slot-btn{min-height:48px;padding:9px 10px;font-size:15px;border-radius:14px}.option-list{justify-content:flex-start;gap:6px}.option-btn{min-width:0;padding:8px 10px;font-size:14px;border-radius:14px}.submit-wrap{grid-template-columns:1fr 1.35fr 1fr;gap:6px}.submit-btn,.back-home-btn,.next-btn{min-width:0;width:100%;padding:9px 10px;font-size:14px}.submit-btn{min-width:0}.history-header{padding:16px 18px}.history-header h2{font-size:22px}.history-item{border-radius:16px}.history-summary-row{gap:8px;padding:12px 14px}.history-summary-top{gap:8px}.history-summary-meta,.history-summary-side{gap:8px;font-size:13px}.history-mode{font-size:14px}.history-summary-score{font-size:15px}.history-word-row{gap:5px}.history-word-chip{min-height:28px;padding:4px 9px;font-size:12px}.history-detail{padding:10px 14px 14px}}@media(min-width:901px){.option-list{justify-content:center}}