/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--spacing:.25rem;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before{box-sizing:border-box;border:0 solid;margin:0;padding:0}::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){-webkit-appearance:button;appearance:button}::file-selector-button{-webkit-appearance:button;appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.start{inset-inline-start:var(--spacing)}}:root{--navy:#073b55;--deep:#07506f;--ocean:#0b7fa3;--aqua:#43d6d0;--sun:#ffd35a;--ink:#123d4c;--display:"Kaiti TC","DFKai-SB","PingFang TC",serif;--body:"PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif}*{box-sizing:border-box}html{background:var(--navy);min-width:320px}body{color:var(--ink);font-family:var(--body);margin:0}button,input{font:inherit}button{color:inherit}:is(button:focus-visible,input:focus-visible){outline-offset:3px;outline:4px solid #ffd35ab8}.app-shell{background:linear-gradient(#dcfff6 0,#f8fffc 36rem,#e7fbf6 100%);min-height:100vh;position:relative;overflow-x:hidden}.ocean-glow{pointer-events:none;background:radial-gradient(circle at 11% 6%,#ffffffeb 0 2%,#0000 22%),radial-gradient(circle at 90% 10%,#3dd0d33d,#0000 25%),linear-gradient(123deg,#ffffff54,#0000 35%);height:38rem;position:absolute;inset:0 0 auto}.bubble-field{pointer-events:none;opacity:.68;height:34rem;position:absolute;inset:5rem 0 auto;overflow:hidden}.bubble-field i{border:2px solid #129baf33;border-radius:50%;width:24px;height:24px;animation:9s ease-in infinite bubble;position:absolute}.bubble-field i:first-child{top:70%;left:4%}.bubble-field i:nth-child(2){width:11px;height:11px;animation-delay:-2s;top:34%;left:16%}.bubble-field i:nth-child(3){width:16px;height:16px;animation-delay:-4s;top:45%;left:62%}.bubble-field i:nth-child(4){width:38px;height:38px;animation-delay:-6s;top:66%;left:87%}.bubble-field i:nth-child(5){width:9px;height:9px;animation-delay:-3s;top:15%;left:74%}.bubble-field i:nth-child(6){width:18px;height:18px;animation-delay:-7s;top:81%;left:37%}@keyframes bubble{0%,to{opacity:0;transform:translateY(35px)scale(.8)}28%,70%{opacity:1}78%{opacity:0;transform:translateY(-110px)translate(18px)scale(1.1)}}.topbar{z-index:30;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#f1fffbe0;border-bottom:1px solid #085b691a;grid-template-columns:1fr auto 1fr;align-items:center;height:82px;padding:0 max(24px,50vw - 590px);display:grid;position:sticky;top:0}.brand{cursor:pointer;text-align:left;background:0 0;border:0;align-items:center;gap:11px;width:fit-content;padding:0;display:flex}.brand-mark{color:#fff;width:47px;height:47px;font:700 25px var(--display);background:var(--ocean);border:4px solid #fff;border-radius:52% 48% 55% 45%;place-items:center;display:grid;transform:rotate(-5deg);box-shadow:0 4px #075e78,0 7px 18px #025b7233}.brand strong{font:800 20px var(--display);letter-spacing:.08em;display:block}.brand small{color:#4d7d85;letter-spacing:.16em;margin-top:1px;font-size:10px;display:block}.nav-tabs{background:#ffffffad;border:1px solid #085b691a;border-radius:18px;gap:7px;padding:5px;display:flex;box-shadow:0 4px 18px #10636e0f}.nav-tabs button{color:#49747c;cursor:pointer;background:0 0;border:0;border-radius:13px;padding:9px 18px;font-weight:750}.nav-tabs button.active{color:#fff;background:var(--deep);box-shadow:0 4px #043f59}.header-actions{justify-self:end;align-items:center;gap:10px;display:flex}.streak-pill{background:#fff;border:1px solid #f1e5c1;border-radius:999px;align-items:baseline;gap:4px;padding:8px 13px;display:flex;box-shadow:0 5px 16px #3a594a14}.streak-pill b{color:#e86c3e;font-size:18px}.streak-pill em{color:#678187;font-size:11px;font-style:normal}.round-button,.close-button{cursor:pointer;background:#fff;border:1px solid #085b691f;border-radius:50%;place-items:center;width:42px;height:42px;display:grid;box-shadow:0 5px 16px #3a594a14}.map-view,.parent-view,.practice-view{z-index:2;width:min(1180px,100% - 40px);margin:28px auto 70px;position:relative}.hero-card{color:#fff;background:linear-gradient(125deg,#075b78,#078ba3 58%,#3ccac3);border:7px solid #fff;border-radius:38px;grid-template-columns:51% 49%;min-height:370px;display:grid;position:relative;overflow:hidden;box-shadow:0 24px 55px #024f6233,inset 0 0 60px #ffffff14}.hero-card:after{content:"";opacity:.72;background:#57dbc2;border-radius:50% 50% 0 0;width:58%;height:180px;position:absolute;bottom:-85px;right:-5%;box-shadow:-120px 42px #2ebfb6}.hero-copy{z-index:3;align-self:center;padding:48px 15px 55px 54px;position:relative}.eyebrow{color:#0e91a2;letter-spacing:.18em;text-transform:uppercase;margin:0 0 7px;font-size:11px;font-weight:900}.hero-copy .eyebrow{color:#9ff7e6}.hero-copy h1{font:900 clamp(36px,4.7vw,61px)/1.08 var(--display);letter-spacing:.02em;text-shadow:0 4px #03485633;margin:0}.hero-copy h1 span{color:var(--sun)}.hero-copy>p:not(.eyebrow){color:#dcfffa;max-width:560px;margin:19px 0 25px;font-size:15px;line-height:1.75}.hero-actions{align-items:center;gap:22px;display:flex}.hero-actions>span{color:#d8fffa;font-size:13px}.hero-actions>span b{color:var(--sun);font-size:19px}.primary-button,.secondary-button{cursor:pointer;border:0;border-radius:15px;padding:14px 24px;font-weight:900;transition:transform .18s,box-shadow .18s}.primary-button{color:#714c00;background:var(--sun);box-shadow:0 5px #d99b26,0 10px 22px #033a402e}.secondary-button{color:var(--deep);background:#e7f8f5;box-shadow:0 4px #bdded8}.primary-button:hover,.secondary-button:hover{transform:translateY(-2px)}.primary-button:active,.secondary-button:active{box-shadow:none;transform:translateY(3px)}.submarine-scene{z-index:2;min-height:340px;position:relative}.sun-rays{background:repeating-conic-gradient(from 10deg,#ffffff24 0 9deg,transparent 9deg 23deg);border-radius:50%;width:520px;height:520px;position:absolute;inset:-100px -80px auto auto}.submarine{z-index:3;background:#ffd34f;border:7px solid #fff4b2;border-radius:52% 44% 48% 52%;width:280px;height:136px;animation:4.5s ease-in-out infinite float-sub;position:absolute;top:30%;left:17%;transform:rotate(-4deg);box-shadow:inset -18px -14px #eeb235,0 18px #02545e1f,0 25px 50px #03414f42}.submarine:before{content:"";background:#ffcd43;border:6px solid #fff4b2;border-bottom:0;border-radius:35px 35px 0 0;width:68px;height:51px;position:absolute;top:-46px;left:92px}.submarine:after{content:"";border-top:8px solid #ffd34f;border-bottom:0;border-left:0;border-right:8px solid #ffd34f;border-radius:0 13px 0 0;width:15px;height:40px;position:absolute;top:-67px;right:40px}.window{background:#a7f4ed;border:8px solid #fff;border-radius:50%;place-items:center;width:80px;height:80px;font-size:46px;font-style:normal;display:grid;position:absolute;top:21px;left:72px;box-shadow:inset 0 0 0 5px #44bbc0}.fin{background:#efad2d;border-radius:9px 9px 70% 70%;width:87px;height:34px;position:absolute;bottom:-25px;left:110px;transform:skew(-24deg)}.propeller{color:#ffec9e;font-size:65px;font-style:normal;animation:1.4s linear infinite spin;position:absolute;top:36px;left:-49px}.light{clip-path:polygon(0 38%,100% 0,100% 100%,0 62%);background:linear-gradient(90deg,#fff4a380,#0000);width:78px;height:43px;position:absolute;top:48px;right:-55px}.fish{z-index:1;color:#c9fff2;letter-spacing:-5px;opacity:.8;font-size:29px;position:absolute}.fish-one{top:18%;right:8%}.fish-two{bottom:24%;left:2%;transform:scale(.7)}.coral{z-index:2;color:#ff8e7a;font-size:90px;font-weight:900;position:absolute;bottom:-13px}.coral-one{right:9%}.coral-two{color:#a68bef;font-size:64px;right:31%}@keyframes float-sub{50%{transform:translateY(-11px)rotate(-2deg)}}@keyframes spin{to{transform:rotate(360deg)}}.daily-card{z-index:5;color:var(--ink);background:#ffffffe8;border:2px solid #fff;border-radius:16px;grid-template-columns:auto auto;align-items:center;gap:0 9px;padding:10px 13px;display:grid;position:absolute;top:25px;right:27px;transform:rotate(2deg);box-shadow:0 10px 24px #01465629}.daily-card>span{grid-row:span 2;font-size:29px}.daily-card small{color:#66858b;font-size:9px;display:block}.daily-card strong{font-size:16px}.daily-card i{color:#e56b39;grid-column:1/-1;margin-top:5px;font-size:9px;font-style:normal;font-weight:800}.keyboard-guide-card{background:#ffffffe6;border:2px solid #fff;border-radius:26px;grid-template-columns:270px 1fr;align-items:center;gap:22px;margin:26px 0 0;padding:25px 28px;display:grid;box-shadow:0 10px 27px #1f635e17}.guide-copy h2{color:var(--navy);font:900 27px/1.2 var(--display);margin:0}.guide-copy>p:not(.eyebrow){color:#5d7d82;margin:9px 0 14px;font-size:12px;line-height:1.65}.guide-example{background:#eaf8f3;border-radius:13px;align-items:center;gap:10px;width:max-content;padding:8px 12px;display:flex}.guide-example b{color:#704a00;background:var(--sun);border-radius:10px;place-items:center;width:42px;height:42px;font-size:24px;display:grid}.guide-example span{color:#719095;font-size:10px}.guide-example strong{color:#078b8e;font-size:26px}.guide-grid{grid-template-columns:repeat(11,1fr);gap:7px;display:grid}.guide-key{color:#255d66;background:#f9fffd;border:1px solid #b8dcd8;border-radius:9px;place-items:center;min-width:36px;height:46px;display:grid;box-shadow:0 3px #b2d2cf}.guide-key b{font-size:16px;line-height:1}.guide-key small{color:#709196;margin-top:2px;font-size:10px;line-height:1}.section-heading{justify-content:space-between;align-items:flex-end;gap:24px;display:flex}.section-heading h1,.section-heading h2{color:var(--navy);font:900 clamp(27px,3.4vw,40px)/1.2 var(--display);margin:0}.section-heading>div>p:last-child{color:#5a7e84}.map-heading{margin:46px 5px 22px}.map-heading h2{font-size:31px}.map-legend{color:#6a858a;font-size:11px}.map-legend i{background:var(--aqua);border-radius:50%;width:9px;height:9px;margin:0 5px 0 10px;display:inline-block}.map-legend i:last-of-type{background:#b9c8c9}.level-map{grid-template-columns:repeat(3,1fr);gap:22px;padding:10px 0 34px;display:grid;position:relative}.route-line{z-index:-1;border:3px dashed #169a9f33;border-left:0;border-right:0;border-radius:30%;height:50%;position:absolute;inset:23% 8% auto;transform:rotate(2deg)}.level-card{text-align:left;cursor:pointer;background:#ffffffe0;border:2px solid #fff;border-radius:24px;grid-template-columns:74px 1fr;gap:14px;min-height:153px;padding:20px;transition:transform .22s,box-shadow .22s;display:grid;position:relative;box-shadow:0 9px #127f8614,0 17px 36px #2065641c}.level-card:hover:not(:disabled){transform:translateY(-5px)rotate(-.4deg);box-shadow:0 13px #127f8614,0 23px 42px #20656424}.level-card.locked{filter:saturate(.35);opacity:.57;cursor:not-allowed}.level-card.next{border-color:#8de7d4;box-shadow:0 0 0 5px #58ddbe29,0 11px #127f8617,0 20px 40px #20656421}.next-flag{color:#714c00;background:var(--sun);border-radius:999px;padding:5px 11px;font-size:10px;font-weight:900;position:absolute;top:-13px;right:15px;box-shadow:0 3px #d9a22b}.level-icon{background:var(--level-color);place-items:center;width:70px;height:70px;display:grid}@supports (color:color-mix(in lab, red, red)){.level-icon{background:color-mix(in srgb,var(--level-color) 22%,white)}}.level-icon{border:3px solid var(--level-color)}@supports (color:color-mix(in lab, red, red)){.level-icon{border:3px solid color-mix(in srgb,var(--level-color) 45%,white)}}.level-icon{border-radius:50% 44% 53% 47%;font-size:36px;box-shadow:inset 0 -7px #045a590f}.level-copy small,.level-copy strong,.level-copy em{display:block}.level-copy small{color:#55909a;letter-spacing:.05em;font-size:10px;font-weight:800}.level-copy strong{color:var(--navy);font:900 21px var(--display);margin:6px 0 3px}.level-copy em{color:#6c8c8f;font-size:11px;font-style:normal;line-height:1.5}.level-stars{color:#f2b82e;letter-spacing:3px;grid-column:1/-1;font-size:17px}.level-7{grid-column:2}.practice-view{margin-top:20px}.practice-topline{grid-template-columns:1fr auto 1fr;align-items:center;margin-bottom:13px;display:grid}.back-button{color:#346d77;cursor:pointer;background:#ffffffb8;border:0;border-radius:12px;justify-self:start;padding:9px 13px;font-weight:800}.mission-name{align-items:center;gap:9px;display:flex}.mission-name>span{font-size:30px}.mission-name small,.mission-name strong{display:block}.mission-name small{color:#55818a;font-size:9px}.mission-name strong{font:900 19px var(--display)}.round-count,.timer{color:#426d74;background:#fff;border-radius:12px;justify-self:end;padding:8px 13px;font-weight:900;box-shadow:0 5px 15px #1b646014}.timer{color:#d35a3d}.progress-rail{background:#ccece5;border:2px solid #fff;border-radius:99px;height:10px;margin-bottom:15px;overflow:hidden}.progress-rail span{border-radius:inherit;background:linear-gradient(90deg,#42d5bd,#ffd45a);height:100%;transition:width .35s;display:block}.mission-console{background:linear-gradient(135deg,#067893,#0ba4ad);border:7px solid #fff;border-radius:31px;grid-template-columns:245px 1fr;min-height:310px;transition:background .2s;display:grid;overflow:hidden;box-shadow:0 20px 45px #0453622e}.mission-console.correct{background:linear-gradient(135deg,#087f87,#39b98b)}.mission-console.wrong{background:linear-gradient(135deg,#9b5873,#e88271)}.companion-card{background:#0341543d;border-right:1px solid #ffffff29;flex-direction:column;justify-content:center;align-items:center;padding:24px;display:flex}.companion-portrait{background:#ffd45a;border:7px solid #fff;border-radius:48% 52% 45% 55%;place-items:center;width:120px;height:120px;font-size:72px;animation:3s ease-in-out infinite companion;display:grid;box-shadow:0 11px #033b4b24}@keyframes companion{50%{transform:translateY(-5px)rotate(2deg)}}.speech{text-align:center;color:var(--ink);background:#fff;border-radius:15px;margin-top:22px;padding:13px;position:relative;box-shadow:0 6px #033b4b1f}.speech:before{content:"";border:10px solid #0000;border-top:0;border-bottom-color:#fff;position:absolute;top:-9px;left:calc(50% - 9px)}.speech small{color:#55909a;font-size:9px;font-weight:900}.speech p{margin:5px 0 0;font-size:12px;font-weight:750;line-height:1.5}.target-zone{text-align:center;color:#fff;flex-direction:column;justify-content:center;align-items:center;padding:30px;display:flex}.target-zone .eyebrow{color:#9effeb}.target-zone h1{color:#fff;font:900 clamp(30px,4vw,48px) var(--display);margin:0 0 16px}.target-keys{flex-wrap:wrap;justify-content:center;gap:9px;display:flex}.target-keys span{color:#315c64;background:#ffffff8c;border:3px solid #0000;border-radius:15px;place-items:center;min-width:58px;height:67px;padding:0 13px;font-size:29px;font-weight:900;transition:all .2s;display:grid;box-shadow:0 5px #03424a1f}.target-keys span.current{color:#714c00;background:var(--sun);border-color:#fff4b1;transform:translateY(-4px)scale(1.06)}.target-keys span.done{color:#fff;opacity:.72;background:#2bc49b}.key-hint{color:#d6fff8;margin:18px 0 8px;font-size:11px}.live-feedback{color:#c9fff6;border-radius:99px;min-height:30px;padding:6px 13px;font-size:12px;font-weight:900}.live-feedback.correct{color:#164f3c;background:#caffd9}.live-feedback.wrong{color:#722f34;background:#ffe2d8}.screen-keyboard{touch-action:manipulation;background:#ffffffd6;border:2px solid #fff;border-radius:24px;margin-top:16px;padding:16px 12px 12px;box-shadow:0 12px 30px #256a661f}.keyboard-row{justify-content:center;gap:clamp(4px,.7vw,9px);margin-bottom:7px;display:flex}.keyboard-row button{color:#255d66;cursor:pointer;-webkit-tap-highlight-color:transparent;background:#f9fffd;border:1px solid #b8dcd8;border-radius:11px;flex-direction:column;justify-content:center;align-items:center;width:clamp(36px,7.1vw,66px);height:52px;display:flex;box-shadow:0 4px #b2d2cf}.keyboard-row button b{font-size:clamp(17px,2vw,24px);line-height:1}.keyboard-row button small{color:#709196;margin-top:3px;font-size:clamp(9px,1vw,11px);line-height:1}.keyboard-row button:hover,.keyboard-row button.wanted{color:#704a00;background:#fff4b6;border-color:#f0c552}.keyboard-row button:hover small,.keyboard-row button.wanted small{color:#8b6c26}.keyboard-row button:active{transform:translateY(3px);box-shadow:0 1px #b2d2cf}.parent-view{margin-top:47px}.local-badge{color:#32776d;background:#dff8ef;border:1px solid #bde8dc;border-radius:999px;padding:10px 15px;font-size:11px;font-weight:900}.metric-grid{grid-template-columns:repeat(4,1fr);gap:16px;margin:30px 0 18px;display:grid}.metric-grid article{background:#ffffffe6;border:2px solid #fff;border-radius:20px;grid-template-columns:48px 1fr;padding:20px;display:grid;box-shadow:0 9px 24px #1f635e17}.metric-grid article>span{grid-row:span 2;font-size:30px}.metric-grid small{color:#6d898d;font-size:10px}.metric-grid strong{color:var(--navy);font-size:27px}.metric-grid em{color:#638087;font-size:11px;font-style:normal}.analytics-grid{grid-template-columns:1.4fr 1fr;gap:18px;display:grid}.chart-card,.mistake-card,.level-summary{background:#ffffffeb;border:2px solid #fff;border-radius:24px;padding:25px;box-shadow:0 10px 27px #1f635e17}.card-title{justify-content:space-between;align-items:center;display:flex}.card-title small{color:#669097;letter-spacing:.08em;font-size:9px;font-weight:900}.card-title h2{font:900 22px var(--display);margin:3px 0 0}.card-title>span{color:#48747b;background:#e8f7f3;border-radius:99px;padding:6px 10px;font-size:9px;font-weight:800}.bar-chart{background:repeating-linear-gradient(#0000 0 48px,#2d7c7a12 49px 50px);border-bottom:1px solid #cce4df;justify-content:space-around;align-items:flex-end;gap:13px;height:210px;padding:25px 12px 0;display:flex}.bar-item{flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;width:10%;height:100%;display:flex}.bar-item b{background:linear-gradient(#50d7be,#078e9f);border-radius:10px 10px 3px 3px;width:100%;min-height:12px;position:relative;box-shadow:inset 0 0 0 2px #ffffff42}.bar-item i{color:#386b72;font-size:8px;font-style:normal;position:absolute;top:-22px;left:50%;transform:translate(-50%)}.bar-item small{color:#6f8e92;font-size:9px}.empty-chart{color:#6f8e92;text-align:center;place-content:center;justify-items:center;min-height:210px;display:grid}.empty-chart span{font-size:43px}.empty-chart p{max-width:250px;font-size:12px;line-height:1.6}.empty-chart.compact{min-height:160px}.mistake-row{grid-template-columns:22px 36px 1fr 45px;align-items:center;gap:8px;margin-top:18px;display:grid}.mistake-row .rank{color:#4d777c;background:#e7f5f1;border-radius:50%;place-items:center;width:20px;height:20px;font-size:8px;display:grid}.mistake-row b{font-size:25px}.mistake-row div{background:#e3f0ed;border-radius:9px;height:8px;overflow:hidden}.mistake-row i{border-radius:inherit;background:linear-gradient(90deg,#ffb14e,#ff7d64);height:100%;display:block}.mistake-row small{color:#789297;text-align:right;font-size:9px}.level-summary{margin-top:18px}.summary-list{grid-template-columns:repeat(4,1fr);gap:10px;margin-top:20px;display:grid}.summary-list>div{background:#eff9f6;border-radius:14px;grid-template-columns:39px 1fr;align-items:center;gap:8px;padding:10px;display:grid}.summary-list>div.locked{opacity:.48;filter:grayscale(.8)}.summary-list>div>span{border-radius:12px;place-items:center;width:37px;height:37px;display:grid}.summary-list p{margin:0}.summary-list p b,.summary-list p small{display:block}.summary-list p b{font-size:11px}.summary-list p small{color:#708b8f;font-size:8px}.summary-list em{color:#edb72f;letter-spacing:2px;grid-column:1/-1;font-size:11px;font-style:normal}.modal-backdrop,.completion-layer{z-index:80;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0330409e;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.settings-panel{background:#f8fffc;border:5px solid #fff;border-radius:28px;width:min(460px,100%);padding:32px;position:relative;box-shadow:0 25px 70px #0025314d}.settings-panel h2{font:900 30px var(--display);margin:0 0 22px}.close-button{font-size:23px;position:absolute;top:16px;right:16px}.setting-row{cursor:pointer;border-top:1px solid #d8ebe7;justify-content:space-between;align-items:center;padding:15px 2px;display:flex}.setting-row b,.setting-row small{display:block}.setting-row small{color:#718a8f;margin-top:4px;font-size:10px}.setting-row input{accent-color:#0a9e94;width:47px;height:27px}.settings-panel fieldset{border:0;border-top:1px solid #d8ebe7;margin:15px 0 0;padding:15px 0 0}.settings-panel legend{font-weight:900}.difficulty-options{grid-template-columns:repeat(3,1fr);gap:7px;margin-top:10px;display:grid}.difficulty-options button{color:#59777c;cursor:pointer;background:#fff;border:1px solid #c8dfdb;border-radius:11px;padding:10px 5px;font-size:10px;font-weight:800}.difficulty-options button.active{color:#fff;background:var(--deep);border-color:var(--deep)}.save-note{color:#478177;text-align:center;margin:20px 0 0;font-size:10px}.completion-layer{overflow:hidden}.completion-card{z-index:2;text-align:center;background:#f9fffc;border:6px solid #fff;border-radius:34px;width:min(550px,100%);padding:42px 38px 34px;animation:.55s cubic-bezier(.2,1.5,.4,1) pop-in;position:relative;box-shadow:0 28px 80px #00232f5c}.badge-burst{background:var(--sun);border:7px solid #fff;border-radius:50%;place-items:center;width:96px;height:96px;margin:-92px auto 24px;font-size:55px;display:grid;box-shadow:0 10px #dba52d,0 18px 35px #023c4633}.completion-card h2{max-width:430px;font:900 29px/1.25 var(--display);margin:4px auto 10px}.earned-stars{color:#f5b929;letter-spacing:7px;text-shadow:0 4px #d78f23;font-size:43px}.complete-stats{grid-template-columns:repeat(3,1fr);gap:9px;margin:25px 0 16px;display:grid}.complete-stats div{background:#eaf8f4;border-radius:14px;padding:13px 5px}.complete-stats strong,.complete-stats small{display:block}.complete-stats strong{color:var(--deep);font-size:23px}.complete-stats small{color:#718b8f;font-size:9px}.unlock-message{color:#4e6f3c;background:#f0f8c9;border-radius:12px;padding:10px;font-size:11px;font-weight:850}.complete-actions{justify-content:center;gap:10px;margin-top:22px;display:flex}.confetti{color:#ffd34f;word-spacing:15vw;font-size:55px;animation:1.5s ease-in-out infinite alternate confetti;position:absolute;inset:10%}.confetti i{color:#50d9ba}.confetti b{color:#ff7d64}.confetti em{color:#a98df5}.confetti i,.confetti b,.confetti em{font-style:normal}@keyframes pop-in{0%{opacity:0;transform:translateY(25px)scale(.82)}}@keyframes confetti{to{transform:translateY(18px)rotate(4deg)}}.loading-card{z-index:2;text-align:center;background:#fff;border-radius:24px;width:min(600px,100% - 40px);margin:20vh auto;padding:32px;position:relative;box-shadow:0 20px 50px #034b5121}footer{z-index:2;color:#588087;border-top:1px solid #0e61671a;justify-content:space-between;width:min(1180px,100% - 40px);margin:0 auto;padding:24px 4px 34px;font-size:10px;display:flex;position:relative}footer i{color:#43c49d;font-style:normal}.reduce-motion *{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}@media (max-width:900px){.topbar{grid-template-columns:1fr auto;padding:0 20px}.nav-tabs{z-index:35;position:fixed;bottom:12px;left:50%;transform:translate(-50%);box-shadow:0 9px 28px #03414b42}.brand small{display:none}.hero-card{grid-template-columns:1fr}.hero-copy{padding:42px 40% 50px 38px}.hero-copy h1{font-size:clamp(34px,6vw,51px)}.submarine-scene{width:50%;position:absolute;bottom:-30px;right:-75px;transform:scale(.78)}.daily-card{top:16px;right:16px}.level-map{grid-template-columns:repeat(2,1fr)}.level-7{grid-column:auto}.mission-console{grid-template-columns:190px 1fr}.companion-portrait{width:100px;height:100px;font-size:58px}.metric-grid{grid-template-columns:repeat(2,1fr)}.analytics-grid{grid-template-columns:1fr}.summary-list{grid-template-columns:repeat(3,1fr)}}@media (max-width:620px){.topbar{height:70px;padding:0 14px}.brand-mark{width:41px;height:41px;font-size:21px}.brand strong{font-size:17px}.streak-pill{display:none}.round-button{width:39px;height:39px}.map-view,.parent-view,.practice-view{width:min(100% - 24px,1180px);margin-top:14px}.hero-card{border-width:5px;border-radius:28px;min-height:485px;display:block}.hero-copy{padding:33px 23px 210px}.hero-copy h1{font-size:38px}.hero-copy>p:not(.eyebrow){margin:15px 0 20px;font-size:13px}.hero-actions{display:block}.hero-actions>span{margin-top:17px;display:block}.submarine-scene{transform-origin:100% 100%;width:110%;height:280px;bottom:-62px;right:-9%;transform:scale(.69)}.daily-card{transform-origin:100% 0;transform:scale(.84)rotate(2deg)}.map-heading{margin-top:34px}.map-legend{display:none}.level-map{grid-template-columns:1fr;gap:14px}.level-card{min-height:135px}.route-line{display:none}.practice-topline{grid-template-columns:1fr auto}.mission-name{display:none}.mission-console{display:block}.companion-card{border:0;flex-direction:row;gap:13px;padding:14px}.companion-portrait{border-width:4px;flex:0 0 62px;width:62px;height:62px;font-size:38px}.speech{text-align:left;margin:0}.speech:before{border:9px solid #0000;border-left:0;border-right-color:#fff;top:calc(50% - 8px);left:-9px}.target-zone{min-height:285px;padding:24px 14px}.target-keys{gap:5px}.target-keys span{min-width:43px;height:53px;padding:0 8px;font-size:23px}.screen-keyboard{border-radius:17px;padding:10px 5px 7px;overflow-x:auto}.keyboard-row{justify-content:flex-start;gap:4px;min-width:442px;margin-bottom:5px}.keyboard-row button{border-radius:7px;flex:0 0 36px;width:36px;min-width:36px;height:42px;font-size:17px;box-shadow:0 3px #b2d2cf}.section-heading{align-items:flex-start}.section-heading h1{font-size:29px}.local-badge{display:none}.metric-grid{gap:9px;margin-top:20px}.metric-grid article{grid-template-columns:38px 1fr;padding:14px 11px}.metric-grid article>span{font-size:23px}.metric-grid strong{font-size:22px}.chart-card,.mistake-card,.level-summary{padding:18px}.summary-list{grid-template-columns:repeat(2,1fr)}.complete-actions{flex-direction:column-reverse}.complete-actions button{width:100%}.completion-card{padding:37px 19px 24px}.completion-card h2{font-size:24px}.earned-stars{font-size:35px}.complete-stats strong{font-size:19px}footer{flex-direction:column;gap:5px;padding-bottom:95px}}.target-keys span b{font-size:29px;line-height:1}.target-keys span small{opacity:.78;margin-top:4px;font-size:12px;line-height:1}@media (max-width:900px){.keyboard-guide-card{grid-template-columns:1fr}.guide-grid{grid-template-columns:repeat(11,minmax(30px,1fr))}}@media (max-width:620px){.keyboard-guide-card{gap:15px;margin-top:15px;padding:18px}.guide-copy h2{font-size:23px}.guide-copy>p:not(.eyebrow){font-size:11px}.guide-grid{grid-template-columns:repeat(11,34px);padding:4px 2px 8px;overflow-x:auto}.guide-key{min-width:34px;height:43px}.guide-key b{font-size:14px}.guide-key small{font-size:9px}}