:root{color-scheme:dark;--brand:#00aae4;--bg:#052c48;--bg2:#073651;--surface:#0b3d58;--line:rgba(154,217,242,.15);--muted:#99bdce;--text:#f2f8fa;--accent:#74d6ef;--success:#8ce1b5;--danger:#ffaea3;--panel:rgba(6,44,67,.9);font-family:Inter,"Segoe UI",Arial,sans-serif;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-size:14px}button,input,select{font:inherit}button,a,input,select{touch-action:manipulation}button{cursor:pointer;border:0;color:inherit;background:none}button:disabled{cursor:wait;opacity:.4}button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:5px}a{color:inherit;text-decoration:none}button{transition:background .18s,color .18s,transform .18s}button:hover{color:white}button:active{transform:translateY(1px)}[hidden]{display:none!important}#app{min-height:100dvh;display:flex;flex-direction:column;background:radial-gradient(ellipse at 38% 40%,#075174 0%,#063956 38%,#052b45 76%)}.topbar{height:88px;display:flex;align-items:center;justify-content:space-between;padding:0 38px;border-bottom:1px solid var(--line);gap:24px}.brand{display:flex;gap:12px;align-items:center;white-space:nowrap;font-size:11px;letter-spacing:2px;font-weight:600}.brand b{font-weight:400}.brand small{display:block;font-size:9px;letter-spacing:2.4px;color:var(--muted);margin-top:7px}.brand-icon{font-family:Georgia,serif;font-size:42px;line-height:1;font-weight:bold;color:white;letter-spacing:-6px}.brand-icon span{color:var(--brand)}nav{display:flex;background:#052c4480;padding:5px;border:1px solid var(--line);border-radius:10px;gap:4px}nav button{padding:11px 18px;color:var(--muted);font-size:12px;border-radius:6px;white-space:nowrap}nav button[aria-current=page]{color:white;background:#1a5a77;box-shadow:0 2px 6px #001c3026}.header-actions{display:flex;align-items:center;gap:13px}.daily-btn{padding:9px 12px;font-size:12px;white-space:nowrap}.daily-btn>span:first-child{color:#f3d79d;margin-right:7px}.daily-btn>span:last-child{display:inline-block;background:#174b61;color:#b4d2df;border-radius:5px;padding:3px 6px;margin-left:8px;font-size:10px}.icon-btn{font-size:20px;color:var(--muted);height:34px;width:34px;border-radius:8px}.icon-btn:hover{background:#ffffff10}main{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 420px;min-height:670px;max-height:calc(100dvh - 130px)}#viewer{position:relative;min-height:650px;overflow:hidden}#canvasWrap{position:absolute;inset:0}canvas{width:100%;height:100%;display:block;outline:0;touch-action:none}.scene-heading{position:absolute;z-index:2;left:38px;top:30px;display:flex;align-items:center;gap:9px;font-size:12px;color:#c0d8e4;pointer-events:none}.status-dot{width:5px;height:5px;background:#73c6df;border-radius:50%;box-shadow:0 0 9px #55d5fc55}.scene-tag{font-size:8px;letter-spacing:1.4px;color:#6a9fb7;border-left:1px solid var(--line);padding-left:12px;margin-left:5px}.view-orientation{position:absolute;right:27px;top:29px;display:flex;align-items:center;gap:13px;color:#719ab1;font-size:8px;letter-spacing:2px;pointer-events:none}.axis-marker{font-size:9px;letter-spacing:0;border:1px solid var(--line);border-radius:50%;width:30px;height:30px;display:grid;place-content:center;position:relative}.axis-marker i{position:absolute;right:5px;top:-11px;font-style:normal;font-size:14px}.viewer-bottom{position:absolute;bottom:44px;left:38px;right:27px;display:flex;align-items:center;justify-content:space-between;gap:15px;pointer-events:none}.gesture{font-size:10px;color:#8ab1c7}.gesture span{margin:0 7px;color:#557f97}.view-tools{display:flex;gap:4px;padding:5px;background:#08324bcc;border:1px solid var(--line);border-radius:8px;pointer-events:auto}.view-tools button{width:32px;height:31px;font-size:15px;border-radius:5px;color:#b2cfdd}.view-tools button:hover,.view-tools button[aria-pressed=true]{background:#1c5b76;color:#fff}.model-credit{position:absolute;bottom:16px;left:38px;font-size:9px;color:#7199b0}.model-credit a{border-bottom:1px solid #7199b044}#panel{background:linear-gradient(155deg,rgba(7,46,69,.92),rgba(4,34,53,.96));border-left:1px solid var(--line);padding:42px 32px 28px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#2b6279 transparent}h1,h2,h3,p{margin:0}h1{font-weight:400;letter-spacing:-1.7px;font-size:39px;line-height:1.12}h1 em{font-style:normal;color:var(--accent)}h2{font-size:29px;font-weight:400;letter-spacing:-1px;line-height:1.2}h3{font-size:17px;font-weight:500;line-height:1.3}.eyebrow{font-size:9px;letter-spacing:2.2px;color:var(--accent);font-weight:600;margin-bottom:16px;text-transform:uppercase}.intro{font-size:12px;color:var(--muted);line-height:1.8;margin-top:17px;max-width:290px}.section-label{font-size:9px;letter-spacing:1.5px;color:#a5c0ce;display:flex;justify-content:space-between;margin:31px 0 13px}.section-label span{letter-spacing:0;color:#688fa4}.region-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.region-card{display:flex;align-items:center;gap:11px;border:1px solid var(--line);border-radius:9px;padding:12px 11px;text-align:left;min-height:62px;background:#0c3a521f}.region-card .symbol{font-family:Georgia,serif;font-size:23px;line-height:1;color:#a6bfc8;width:24px;text-align:center}.region-card b{font-size:12px;font-weight:500;display:block}.region-card small{font-size:9px;display:block;color:#749caf;margin-top:5px}.region-card:hover{background:#174f68;border-color:#73d6ef50}.region-card.active{background:#0e5875;border-color:#40bbe4;box-shadow:inset 0 0 14px #169ed610}.region-card.active .symbol{color:#bde6f0}.selection-info{display:flex;justify-content:space-between;align-items:center;padding:19px 0 15px}.selection-info strong{font-size:16px;font-weight:500}.selection-info small{font-size:10px;color:var(--muted)}.stars{font-size:12px;color:#f2d995;letter-spacing:3px}.primary{display:flex;align-items:center;justify-content:space-between;width:100%;padding:15px 18px;border-radius:8px;background:var(--brand);font-size:12px;font-weight:600;color:#002a42;box-shadow:0 4px 14px #001e3b22}.primary:hover{background:#62cff0;color:#002a42}.primary .arrow{font-size:18px;font-weight:400}.secondary{border:1px solid var(--line);padding:12px 16px;border-radius:8px;display:flex;align-items:center;justify-content:center;gap:8px;color:#bcdae6;font-size:12px}.secondary:hover{background:#ffffff09;border-color:#91cce544}.wide{width:100%;margin-top:9px}.bottom-note{display:flex;align-items:center;gap:11px;border-top:1px solid var(--line);margin-top:27px;padding-top:18px;color:#779db1;font-size:10px;line-height:1.7}.bottom-note span:first-child{font-size:22px;color:#77c3d9}.mini-progress{height:3px;background:#173f55;border-radius:4px;margin-top:12px;overflow:hidden}.mini-progress div{height:100%;background:var(--accent);border-radius:4px;transition:width .4s}footer{height:42px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 38px;color:#6e98af;font-size:9px;letter-spacing:.1px}footer>span:first-child{letter-spacing:1.8px;font-size:8px}footer button{font-size:10px;color:#9bbdce}footer button span{border:1px solid #52798d;border-radius:50%;width:14px;height:14px;display:inline-grid;place-content:center;margin-left:5px;font-size:8px}#loading{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;background:radial-gradient(ellipse,#084966,#052e49);gap:12px;z-index:4;color:#91bdcf;font-size:12px}#loading b{color:white;font-size:18px;font-weight:400}.loader{height:30px;width:30px;border:1px solid #73d4ed33;border-top-color:#73d4ed;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:8px}@keyframes spin{to{transform:rotate(360deg)}}#boneTooltip{position:absolute;left:50%;bottom:125px;transform:translateX(-50%);padding:10px 16px;max-width:85%;border:1px solid #b7e5f53b;border-radius:7px;background:#05283fe6;box-shadow:0 6px 18px #001c3022;font-size:12px;color:#e1eef4;text-align:center;pointer-events:none}.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.text-btn{font-size:11px;color:#9acbde}.text-btn:hover{color:#fff}.region-select{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:7px;background:#09344e;color:var(--text);outline:0;font-size:12px;margin:18px 0 12px}input.search{width:100%;background:#03263e80;border:1px solid var(--line);border-radius:7px;padding:12px;color:white;font-size:12px;outline:0;margin-bottom:12px}input.search:focus{border-color:#60c7e2}.bone-list{display:grid;gap:3px;max-height:210px;overflow:auto;scrollbar-width:thin;scrollbar-color:#2b6279 transparent}.bone-row{display:flex;justify-content:space-between;align-items:center;text-align:left;padding:10px 12px;border-radius:6px;color:#9fbdcb;font-size:11px}.bone-row:hover{background:#ffffff06}.bone-row.selected{background:#18536c;color:#fff}.bone-row .bone-check{color:#8dd7ae}.bone-card{border-top:1px solid var(--line);padding-top:22px;margin-top:20px}.latin{color:#719eb2;font-style:italic;font-size:11px;margin:7px 0 16px}.bone-card p{font-size:12px;line-height:1.8;color:#b5cfdb}.fact-box{background:#0c425b;border-left:2px solid var(--brand);padding:12px 14px;margin-top:15px;border-radius:0 6px 6px 0}.fact-box small{font-size:8px;letter-spacing:1.3px;color:var(--accent);display:block;margin-bottom:5px}.fact-box p{font-size:11px}.level-grid{display:flex;gap:6px;margin:20px 0}.level-grid button{flex:1;min-width:0;border:1px solid var(--line);border-radius:7px;padding:11px 3px;font-size:11px;color:#85acbf}.level-grid button.active{border-color:var(--brand);color:white;background:#124b66}.level-grid small{display:block;font-size:9px;color:#d2c08c;letter-spacing:1px;margin-top:6px}.level-about{background:#0d3d55;border:1px solid var(--line);padding:17px;border-radius:8px;margin-bottom:20px}.level-about p{font-size:12px;color:var(--muted);line-height:1.8;margin:9px 0}.rounds{display:flex;flex-direction:column;gap:12px;margin:22px 0}.rounds div{display:flex;gap:13px;align-items:center}.rounds i{border:1px solid #58829a;border-radius:50%;width:25px;height:25px;display:grid;place-content:center;font-size:10px;font-style:normal;color:#a0c7d9}.rounds b{font-size:12px;font-weight:400}.rounds small{font-size:10px;color:#7d9fb1;display:block;margin-top:4px}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:20px 0;margin-bottom:22px;border-bottom:1px solid var(--line)}.metric b{font-size:25px;font-weight:300;display:block;font-variant-numeric:tabular-nums}.metric small{color:#8db3c6;font-size:9px;display:block;margin-top:5px}.prompt{color:#7eaabe;font-size:10px;margin:27px 0 10px}.target-word{font-size:24px;line-height:1.45;font-weight:400;min-height:70px;letter-spacing:.3px}.target-word.mask{letter-spacing:3px;font-family:monospace;font-size:19px}.answer-wrap{margin:18px 0 12px;position:relative}.answer-wrap input{padding:14px;width:100%;border:1px solid #50859e;border-radius:8px;background:#02263d;color:white;outline:0;font-size:15px}.answer-wrap input:focus{border-color:#75d8f0;box-shadow:0 0 0 3px #70d6ef12}.answer-wrap input.invalid{border-color:var(--danger)}.feedback{font-size:12px;line-height:1.7;min-height:46px;padding:4px 0 12px;color:var(--muted)}.feedback.correct{color:var(--success)}.feedback.error{color:var(--danger)}.answer-actions{display:flex;gap:9px}.answer-actions .secondary{flex:1}.answer-actions .primary{flex:2}.keyboard-hint{font-size:9px;color:#6f9ab0;margin-top:14px;text-align:center}.round-indicator{display:flex;gap:5px;margin-top:20px}.round-indicator i{flex:1;height:3px;background:#17465f;border-radius:3px}.round-indicator i.done{background:#53acc8}.round-indicator i.current{background:#a1e5f5}.result-star{font-size:35px;color:#ecd59c;letter-spacing:10px;margin:25px 0}.result-title{font-size:30px;font-weight:400;margin-top:15px}.result-list{margin:10px 0 22px;display:grid;gap:8px}.result-list>div{display:flex;justify-content:space-between;font-size:11px;color:#9bbdce;padding:8px 0;border-bottom:1px solid #ffffff09}.lesson-progress{display:flex;gap:5px;margin:20px 0}.lesson-progress i{height:3px;flex:1;background:#17465f}.lesson-progress i.done{background:var(--accent)}.lesson-body{font-size:15px;line-height:1.9;color:#d4e3eb;margin:25px 0}.lesson-step{color:var(--accent);font-size:11px}.lesson-question{font-size:19px;line-height:1.6;margin:25px 0 16px}.option{display:block;text-align:left;width:100%;padding:14px;border:1px solid var(--line);border-radius:7px;margin:8px 0;font-size:12px}.option:hover{background:#ffffff09}.option.chosen{border-color:#90dbaf;color:#a7edc1;background:#8ce1b510}.option.wrong{border-color:#ffaea3;color:var(--danger)}dialog{border:1px solid #46758d;border-radius:15px;background:#07334e;color:var(--text);width:min(590px,calc(100vw - 28px));padding:26px 30px;box-shadow:0 35px 120px #00152288;max-height:88dvh;overflow:auto}dialog::backdrop{background:#001625b3;backdrop-filter:blur(6px)}.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px;color:#7fb7ce;font-size:9px;letter-spacing:2px}.modal-head button{color:#b2cfdd;font-size:16px}.modal-intro{font-size:12px;color:var(--muted);line-height:1.8;margin:13px 0 23px}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:17px 0;border-bottom:1px solid var(--line);font-size:12px}.settings-row small{font-size:10px;color:var(--muted);display:block;margin-top:5px}.toggle{border:1px solid var(--line);border-radius:20px;padding:6px 10px;color:var(--muted);font-size:10px}.toggle[aria-pressed=true]{background:#146b88;color:white;border-color:#3aa9cc}.progress-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:25px 0}.progress-summary>div{border:1px solid var(--line);border-radius:8px;padding:17px}.progress-summary strong{display:block;font-weight:300;font-size:27px}.progress-summary small{font-size:9px;color:var(--muted);display:block;margin-top:7px}.progress-region{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 0;border-bottom:1px solid var(--line);font-size:12px}.progress-region small{font-size:10px;color:var(--muted)}.help-steps{display:grid;gap:22px;margin:24px 0}.help-steps>div{display:grid;grid-template-columns:30px 1fr;gap:15px}.help-steps span{color:var(--accent);font-size:22px;font-weight:300}.help-steps p{color:var(--muted);font-size:12px;line-height:1.7;margin-top:6px}#toast{position:fixed;bottom:60px;left:50%;transform:translateX(-50%);border:1px solid #74c8e250;padding:13px 20px;background:#083951;box-shadow:0 5px 25px #00172266;border-radius:8px;color:#d5edf5;font-size:12px;z-index:30;max-width:90vw}.danger-btn{color:var(--danger)!important}.sync-error{color:#f7c7a2!important}.storage-row{display:flex;gap:10px;margin-top:18px}.storage-row>*{flex:1}.light{--bg:#c8eefa;--text:#163b4f;--muted:#47778c;--line:#3a839633;--accent:#007ba4;--panel:#e6f7fc;color-scheme:light}.light #app{background:radial-gradient(ellipse at 35% 45%,#e7faff,#b9e6f6 80%)}.light #panel{background:linear-gradient(145deg,#effaff,#d2ecf6)}.light .brand-icon,.light nav button[aria-current=page]{color:#11465d}.light .brand small,.light .scene-heading{color:#3c748d}.light nav{background:#a1d7e733}.light nav button[aria-current=page]{background:#b6e2f1}.light .region-card.active{background:#a2dced}.light .region-card b{color:#154358}.light .region-card small,.light .bottom-note{color:#46798f}.light .bone-row.selected,.light .level-about,.light .fact-box{background:#b5dfea;color:#254f63}.light .bone-card p,.light .lesson-body{color:#315b6f}.light .answer-wrap input,.light input.search,.light select{background:#effbff;color:#204b60}.light .bone-row{color:#3c738a}.light .view-tools{background:#b7dfed}.light .view-tools button{color:#315a70}.light .gesture,.light .model-credit,.light footer{color:#3c738a}.light .text-btn{color:#23647f}.light #boneTooltip{background:#eaf9ff;color:#16435a}.light #loading{background:#c2e7f5}.light #loading b{color:#13445c}.large-text{font-size:16px}.large-text .intro,.large-text .bone-card p,.large-text .bone-row,.large-text .primary,.large-text .secondary{font-size:14px}
@media(min-width:1600px){main{grid-template-columns:minmax(0,1fr) 470px}#panel{padding:48px 42px 30px}.region-card{min-height:70px}.intro{font-size:13px}.region-card b{font-size:13px}.scene-heading{font-size:13px}}
@media(max-width:1100px){.topbar{padding:0 22px;gap:12px}.brand{font-size:9px;letter-spacing:1.2px}.brand small{font-size:8px}.header-actions{gap:2px}nav button{padding:10px 11px}main{grid-template-columns:minmax(0,1fr) 350px}#panel{padding:32px 25px}.scene-heading{left:22px}.scene-tag{display:none}.viewer-bottom{left:22px;bottom:45px}.gesture{display:none}.model-credit{left:22px}h1{font-size:34px}.region-card{padding:10px 8px;gap:8px}.region-card b{font-size:11px}}
@media(max-width:760px){.topbar{height:auto;min-height:118px;flex-wrap:wrap;padding:15px 18px 12px;gap:12px}.brand{flex:1}.brand-icon{font-size:35px}.header-actions{gap:3px}.daily-btn{font-size:11px;padding:7px}.daily-btn>span:last-child{display:none}.icon-btn{font-size:18px;width:28px}nav{order:3;flex-basis:100%;justify-content:center;border:0;padding:0;background:none}nav button{flex:1;font-size:11px;padding:10px}main{display:flex;flex-direction:column;max-height:none;min-height:0}#viewer{height:48dvh;min-height:340px;max-height:550px;flex:none}#panel{border-left:0;border-top:1px solid var(--line);padding:27px 23px 30px;overflow:visible}.scene-heading{left:20px;top:18px;font-size:10px}.view-orientation{right:17px;top:15px}.axis-marker{display:none}.viewer-bottom{right:15px;bottom:34px;justify-content:flex-end}.view-tools button{height:26px;width:29px}.model-credit{left:20px;bottom:12px;font-size:8px}.view-tools{padding:3px}.intro{max-width:100%;font-size:12px;margin-top:12px}h1{font-size:32px}.region-grid{grid-template-columns:repeat(3,1fr)}.region-card{gap:7px;padding:11px 8px}.region-card .symbol{font-size:19px;width:18px}.region-card b{font-size:10px}.region-card small{font-size:8px}.section-label{margin-top:24px}.selection-info{padding-top:17px}.bottom-note{margin-top:20px}.bone-list{max-height:180px}.metrics{padding-top:10px;margin-bottom:10px}.target-word{min-height:45px}.prompt{margin-top:15px}footer{height:auto;min-height:55px;padding:12px 20px;gap:15px;flex-wrap:wrap}footer>span:first-child{font-size:7px}footer>span:nth-child(2){order:3;width:100%;font-size:8px}dialog{padding:23px}.progress-summary{gap:6px}.progress-summary>div{padding:12px}.progress-summary strong{font-size:23px}#boneTooltip{bottom:85px;font-size:11px}.lesson-body{font-size:14px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}.loader{animation-duration:2s}}
.save-status{display:flex;align-items:center;gap:10px}.save-status #retrySync{color:var(--accent);text-decoration:underline;text-underline-offset:3px}.bone-row small{display:block;font-size:9px;color:var(--muted);margin-top:4px}
@media(max-width:760px){.practice-active #viewer,.lesson-active #viewer{position:sticky;top:0;z-index:3;height:30svh;min-height:190px;max-height:300px;background:radial-gradient(ellipse,#075174,#052b45)}.practice-active.light #viewer,.lesson-active.light #viewer{background:radial-gradient(ellipse,#e7faff,#b9e6f6)}.practice-active #panel{padding:20px 20px 28px}.practice-active #panel h2{font-size:24px}.practice-active .metrics{padding:10px 0;margin-bottom:8px}.practice-active .metric b{font-size:21px}.practice-active .section-label{margin:15px 0 9px}.practice-active .target-word{font-size:20px;min-height:35px;line-height:1.45}.practice-active .prompt{margin:13px 0 9px}.practice-active .answer-wrap{margin:10px 0}.practice-active .feedback{font-size:11px;min-height:39px}.practice-active .viewer-bottom,.lesson-active .viewer-bottom{bottom:25px}.practice-active .view-orientation,.lesson-active .view-orientation{display:none}.practice-active .scene-heading,.lesson-active .scene-heading{top:14px}.view-tools button{height:36px;width:36px}.practice-active .view-tools button,.lesson-active .view-tools button{height:30px;width:30px}.save-status{flex-wrap:wrap}.bone-row{min-height:42px}#modal .secondary{min-height:44px}}