:root{color:#2b1e28;background:#fff4f8;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:url("data:image/svg+xml,%3Csvg width='360' height='360' viewBox='0 0 360 360' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' opacity='.72'%3E%3Cpath d='M71 73c11-21 38-21 49 0-10 20-39 20-49 0Z' fill='%23ffd4df'/%3E%3Cpath d='M95 49c21 11 21 38 0 49-20-10-20-39 0-49Z' fill='%23ffc3d4'/%3E%3Ccircle cx='95' cy='73' r='7' fill='%23e989a6'/%3E%3Cpath d='M257 260c10-19 35-19 45 0-10 18-35 18-45 0Z' fill='%23ffd4df'/%3E%3Cpath d='M279 238c19 10 19 35 0 45-18-10-18-35 0-45Z' fill='%23ffc3d4'/%3E%3Ccircle cx='279' cy='260' r='6' fill='%23e989a6'/%3E%3Cpath d='M124 256c26-28 58-37 93-27' stroke='%238fbc9c' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M171 237c-4-22 9-39 31-42 4 21-10 39-31 42Z' fill='%23cbe6cf'/%3E%3Cpath d='M143 247c-18-12-20-33-5-47 18 12 20 33 5 47Z' fill='%23d6ecd8'/%3E%3C/g%3E%3C/svg%3E"),linear-gradient(135deg,#fff4f8,#fff9ed 48%,#f4fff8);background-attachment:fixed}button,input,select,textarea{font:inherit}button{cursor:pointer}.app-shell{display:grid;grid-template-columns:320px minmax(0,1fr);min-height:100vh}.sidebar{display:flex;flex-direction:column;gap:22px;padding:24px;color:#fff8fb;background:#4b2439;box-shadow:18px 0 40px #8b476724}.brand{display:flex;gap:14px;align-items:center}.brand-mark{display:grid;width:46px;height:46px;place-items:center;color:#6e2f50;background:#ffd4df;border-radius:8px}.brand h1,.brand p,.view-header h2,.view-header p,.practice-stats p,.report-metrics p,.chart-panel h3,.miss-table h3{margin:0}.brand h1{font-size:1.2rem;line-height:1.2}.brand p{margin-top:4px;color:#f2cbd8;font-size:.88rem;line-height:1.35}.nav-tabs{display:grid;gap:8px}.nav-tabs button,.secondary-button,.primary-button,.hint-row button,.segmented button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;border:0;border-radius:8px;font-weight:700}.nav-tabs button{justify-content:flex-start;width:100%;padding:0 12px;color:#f6dce6;background:transparent}.nav-tabs button.active,.nav-tabs button:hover{color:#4b2439;background:#ffd4df}.auth-panel{display:grid;gap:10px;margin-top:auto;padding-top:18px;border-top:1px solid rgba(255,255,255,.12)}.auth-panel p{margin:0;color:#bfd1cb;font-size:.9rem}.sync-panel{display:grid;gap:10px}.sync-heading{display:flex;align-items:center;justify-content:space-between}.sync-code{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-width:0;padding:9px 10px;border:1px solid rgba(255,255,255,.28);border-radius:6px;background:#ffffff1a;color:inherit;cursor:pointer}.sync-code span{min-width:0;overflow-wrap:anywhere;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11px;letter-spacing:0;text-align:left}.sync-code-entry input{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11px;letter-spacing:0;text-transform:uppercase}.text-button{border:0;background:transparent;color:inherit;cursor:pointer;font:inherit;font-size:12px;text-decoration:underline;text-underline-offset:3px}.auth-panel label{display:flex;align-items:center;gap:8px;min-height:42px;padding:0 10px;color:#8a6074;background:#fff8fb;border-radius:8px}.auth-panel input,.tool-card input,.answer-form input,.view-header select{width:100%;min-width:0;border:0;outline:0;background:transparent}.segmented{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;background:#ffffff1f;border-radius:8px}.segmented button{min-height:34px;color:#e7f2ee;background:transparent}.segmented button.active{color:#10231f;background:#f7fbf9}.status-pill{width:fit-content;padding:5px 9px;border-radius:999px;color:#10231f;font-weight:800;font-size:.78rem}.status-pill.local{background:#ffd4df}.status-pill.cloud{background:#bfe5c8}.workspace{position:relative;min-width:0;padding:28px}.workspace:before,.workspace:after{content:"";position:fixed;z-index:-1;pointer-events:none;opacity:.55}.workspace:before{right:4vw;top:42px;width:180px;height:180px;background:radial-gradient(circle at 50% 22%,#ffc3d4 0 16px,transparent 17px),radial-gradient(circle at 78% 50%,#ffd4df 0 16px,transparent 17px),radial-gradient(circle at 50% 78%,#ffc3d4 0 16px,transparent 17px),radial-gradient(circle at 22% 50%,#ffd4df 0 16px,transparent 17px),radial-gradient(circle at 50% 50%,#e989a6 0 13px,transparent 14px)}.workspace:after{right:11vw;bottom:36px;width:140px;height:140px;background:radial-gradient(circle at 50% 23%,#ffe0e9 0 14px,transparent 15px),radial-gradient(circle at 77% 50%,#ffc9da 0 14px,transparent 15px),radial-gradient(circle at 50% 77%,#ffe0e9 0 14px,transparent 15px),radial-gradient(circle at 23% 50%,#ffc9da 0 14px,transparent 15px),radial-gradient(circle at 50% 50%,#e8a84f 0 10px,transparent 11px)}.panel-stack{display:grid;gap:22px;max-width:1180px;margin:0 auto}.view-header{display:flex;align-items:center;justify-content:space-between;gap:16px}.view-header p{color:#9c5a76;font-size:.88rem;font-weight:800;text-transform:uppercase}.view-header h2{margin-top:4px;font-size:clamp(1.8rem,3vw,3rem);line-height:1.05}.view-header select{width:auto;min-width:180px;padding:10px 12px;background:#fffafd;border:1px solid #f0cbd8;border-radius:8px}.primary-button{padding:0 16px;color:#fff;background:#c05b82}.secondary-button{padding:0 14px;color:#6e2f50;background:#ffe0e9}.primary-button:disabled,.hint-row button:disabled,.secondary-button:disabled,.icon-button:disabled{cursor:not-allowed;opacity:.55}.tool-grid,.practice-layout,.chart-grid{display:grid;grid-template-columns:minmax(240px,.8fr) minmax(0,1.6fr);gap:18px}.tool-card,.practice-main,.practice-stats,.chart-panel,.miss-table{padding:20px;background:#fffafdf0;border:1px solid #f0d7e0;border-radius:8px;box-shadow:0 16px 40px #8b47671a}.tool-card{display:grid;align-content:start;gap:14px}.tool-card.wide{min-height:520px}.field-label,.card-title{color:#7d425e;font-weight:800}.tool-card input{min-height:44px;padding:0 12px;border:1px solid #efd1dc;border-radius:8px}.file-drop{display:grid;min-height:112px;width:100%;padding:16px 12px;text-align:center;place-items:center;gap:8px;color:#6e2f50;background:#fff1f6;border:2px dashed #e7a8bf;border-radius:8px;font-weight:800}.import-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.file-drop span{overflow-wrap:anywhere}.file-drop:hover:not(:disabled),.file-drop:focus-visible{border-color:#b94c77;background:#ffe3ed}.file-drop:focus-visible{outline:3px solid #b94c77;outline-offset:3px}.file-drop:disabled{cursor:wait;opacity:.6}.import-status{display:flex;align-items:center;gap:8px;margin:0;overflow-wrap:anywhere}.import-spinner{flex-shrink:0;animation:import-spin 1s linear infinite}.import-errors{color:#a0254c;overflow-wrap:anywhere}.import-errors p{margin:0 0 8px}.list-manager{display:grid;gap:16px;padding:20px;background:#fffafdf0;border:1px solid #f0d7e0;border-radius:8px;box-shadow:0 16px 40px #8b47671a}.list-manager-heading,.saved-list-row,.dialog-actions{display:flex;align-items:center;justify-content:space-between;gap:14px}.list-manager-heading h3,.list-manager-heading p,.list-manager-empty,.confirm-dialog h3,.confirm-dialog p{margin:0}.section-label{color:#9c5a76;font-size:.78rem;font-weight:800;text-transform:uppercase}.list-manager-heading h3{margin-top:3px;font-size:1.25rem}.list-manager-heading>span,.saved-list-row span{color:#8a6074;font-size:.88rem}.saved-list-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.saved-list-row{min-width:0;padding:13px 14px;background:#fff7fa;border:1px solid #efd1dc;border-radius:8px}.saved-list-row>div{display:grid;min-width:0;gap:3px}.saved-list-row strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.delete-icon-button,.dialog-close{display:grid;flex:0 0 auto;width:42px;height:42px;place-items:center;color:#a0254c;background:#ffe5ed;border:0;border-radius:8px}.delete-icon-button:hover,.delete-icon-button:focus-visible,.dialog-close:hover,.dialog-close:focus-visible{color:#7e1738;background:#ffd2df}.dialog-backdrop{position:fixed;z-index:20;inset:0;display:grid;place-items:center;padding:20px;background:#2d18257a}.confirm-dialog{position:relative;display:grid;width:min(100%,430px);gap:14px;padding:24px;color:#2b1e28;background:#fffafd;border:1px solid #e8b8c9;border-radius:8px;box-shadow:0 24px 70px #4b243947}.dialog-close{position:absolute;top:14px;right:14px}.dialog-danger-icon{display:grid;width:46px;height:46px;place-items:center;color:#a0254c;background:#ffe5ed;border-radius:8px}.confirm-dialog h3{padding-right:44px;font-size:1.3rem}.confirm-dialog>p{color:#765365;line-height:1.5}.dialog-error{padding:10px;color:#861b3d!important;background:#ffe5ed;border-radius:8px}.dialog-actions{justify-content:flex-end;margin-top:4px}.danger-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:0 16px;color:#fff;background:#a0254c;border:0;border-radius:8px;font-weight:800}.danger-button:disabled,.dialog-close:disabled{cursor:wait;opacity:.58}@keyframes import-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.import-spinner{animation:none}}.card-title{display:flex;align-items:center;gap:8px}textarea{width:100%;min-height:420px;resize:vertical;padding:14px;color:#2b1e28;background:#fffafd;border:1px solid #efd1dc;border-radius:8px;outline:0}.muted,.error-text{margin:0;color:#8a6074}.error-text{color:#b2435c}.practice-layout{grid-template-columns:minmax(0,1fr) 220px}.practice-main{display:grid;gap:18px}.prompt-row,.hint-row,.answer-form,.voice-row{display:flex;flex-wrap:wrap;gap:10px}.icon-button{display:grid;width:52px;height:52px;place-items:center;color:#6e2f50;background:#ffe0e9;border:0;border-radius:8px}.answer-form{display:grid;grid-template-columns:minmax(0,1fr) auto}.answer-form input{min-height:58px;padding:0 16px;font-size:1.25rem;background:#fffafd;border:1px solid #efd1dc;border-radius:8px}.hint-row button{padding:0 12px;color:#6e2f50;background:#fffafd;border:1px solid #efd1dc}.voice-row{align-items:center;padding:12px;background:#fff6fa;border:1px solid #efd1dc;border-radius:8px}.voice-row label{color:#7d425e;font-weight:800}.voice-row select{min-width:min(100%,320px);min-height:40px;padding:0 10px;color:#2b1e28;background:#fff;border:1px solid #efd1dc;border-radius:8px}.hint-box,.result-box{padding:16px;background:#fff6fa;border-radius:8px;line-height:1.5}.result-box.correct{background:#f1fbf2;border:1px solid #a7dcb2}.result-box.missed{background:#fff1f6;border:1px solid #e7a8bf}.result-title{display:flex;align-items:center;gap:10px}.result-box ul{margin:12px 0 0;padding-left:22px}.practice-stats,.report-metrics{display:grid;gap:12px}.practice-stats>div,.report-metrics>div{padding:16px;background:#fff6fa;border-radius:8px}.metric,.report-metrics span{display:block;color:#b54d79;font-size:2rem;font-weight:900}.report-metrics{grid-template-columns:repeat(5,minmax(0,1fr))}.chart-panel h3,.miss-table h3{margin-bottom:14px}.chart-panel.wide{grid-column:1 / -1}.usage-note{margin:-6px 0 0;color:#8a6074;font-weight:800}.game-shell{display:grid;grid-template-columns:minmax(220px,.6fr) minmax(0,1.4fr);gap:18px}.game-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-content:start}.game-card{display:grid;min-height:92px;place-items:center;gap:8px;padding:12px 8px;color:#6e2f50;background:#fffafdf2;border:1px solid #f0d7e0;border-radius:8px;box-shadow:0 12px 28px #8b476714;font-weight:900}.game-card.active,.game-card:hover{background:#ffd4df;border-color:#e989a6}.game-board{display:grid;gap:18px;min-height:560px;padding:22px;background:#fffafdf2;border:1px solid #f0d7e0;border-radius:8px;box-shadow:0 16px 40px #8b47671a}.game-board-header,.speed-bar{display:flex;align-items:center;justify-content:space-between;gap:14px}.game-title-line{display:flex;align-items:center;gap:10px;font-size:1.35rem}.game-board-header p,.game-feedback{margin:6px 0 0;color:#8a6074}.game-score{display:grid;min-width:78px;min-height:78px;place-items:center;color:#4b2439;background:#fff1f6;border-radius:8px}.game-score span{color:#b54d79;font-size:2rem;font-weight:900;line-height:1}.game-score small{margin-top:-12px;color:#7d425e;font-weight:800}.speed-bar{padding:12px;background:#fff8e7;border:1px solid #efd39a;border-radius:8px}.speed-bar strong{color:#b06b22;font-size:1.6rem}.big-prompt{display:grid;min-height:140px;place-items:center;padding:20px;color:#4b2439;background:#fff6fa;border:1px solid #efd1dc;border-radius:8px;font-size:clamp(2rem,5vw,4.2rem);font-weight:900;text-align:center;word-break:break-word}.big-prompt.quiet{color:#b54d79;font-size:clamp(1.6rem,3vw,2.6rem)}.letter-space{letter-spacing:.08em}.ladder-panel,.tile-game{display:grid;gap:12px}.tile-row,.choice-grid{display:flex;flex-wrap:wrap;gap:10px}.letter-tile,.chunk-tile,.choice-grid button{min-height:54px;padding:0 18px;color:#6e2f50;background:#fff1f6;border:1px solid #efd1dc;border-radius:8px;font-size:1.2rem;font-weight:900}.letter-tile{min-width:54px;text-transform:uppercase}.choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.choice-grid button{justify-content:center;background:#fffafd}.choice-grid button:hover,.letter-tile:hover,.chunk-tile:hover{background:#ffd4df}.built-answer{min-height:58px;padding:14px 16px;color:#b54d79;background:#fff;border:1px solid #efd1dc;border-radius:8px;font-size:1.6rem;font-weight:900}.game-answer-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px}.game-answer-form input{min-height:58px;min-width:0;padding:0 16px;color:#2b1e28;background:#fffafd;border:1px solid #efd1dc;border-radius:8px;outline:0;font-size:1.2rem}.game-feedback{min-height:48px;padding:14px;background:#fff6fa;border-radius:8px;font-weight:800}.miss-table{display:grid;gap:10px}.miss-table article{display:grid;gap:6px;padding:12px;background:#fff6fa;border-radius:8px}.spelling-compare{display:grid;gap:10px}.compare-row{display:grid;grid-template-columns:70px minmax(0,1fr);align-items:center;gap:10px}.compare-label{color:#8a6074;font-size:.82rem;font-weight:800}.letter-row{display:flex;flex-wrap:wrap;gap:4px}.letter-chip{display:inline-grid;min-width:26px;height:30px;place-items:center;color:#4b2439;background:#fff;border:1px solid #efd1dc;border-radius:6px;font-weight:900}.letter-chip.typed{color:#7d425e;background:#fff1f6}.letter-chip.issue{color:#9b2537;background:#ffe4eb;border-color:#e58ba3}.miss-table article p{margin:0;color:#8a6074}.empty-state{display:grid;min-height:260px;place-items:center;color:#8a6074;background:#fffafd;border:1px solid #efd1dc;border-radius:8px}@media(max-width:860px){.app-shell{grid-template-columns:1fr}.sidebar{padding:14px}.brand{align-items:flex-start}.nav-tabs{grid-template-columns:repeat(4,minmax(0,1fr))}.nav-tabs button{justify-content:center;padding:0 8px}.workspace{padding:16px}.view-header,.tool-grid,.practice-layout,.chart-grid,.game-shell,.report-metrics{grid-template-columns:1fr}.game-picker{grid-template-columns:repeat(2,minmax(0,1fr))}.saved-list-grid{grid-template-columns:1fr}.view-header{display:grid}.view-header select{width:100%}.answer-form,.game-answer-form,.choice-grid{grid-template-columns:1fr}}@media(max-width:460px){.brand h1{font-size:1rem}.brand p,.nav-tabs button{font-size:.82rem}.tool-card,.practice-main,.practice-stats,.chart-panel,.miss-table,.game-board{padding:14px}.game-picker{grid-template-columns:1fr}.list-manager,.confirm-dialog{padding:16px}.dialog-actions{display:grid;grid-template-columns:1fr 1fr}}