:root{color-scheme:dark;--bg:#0b1118;--surface:#151e27;--surface2:#1c2833;--surface3:#25323d;--border:#2b3843;--mint:#83edc9;--mint-strong:#53d9b0;--text:#f5f9f8;--muted:#a0adb5;--low:#73828b;--amber:#f3cb84;--danger:#ff988f;--blue:#91caff;--radius:20px}*{box-sizing:border-box}html{font-size:16px;scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP","Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}button,input{font:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent;color:inherit}button:disabled{cursor:default}button:focus-visible,input:focus-visible{outline:2px solid var(--mint);outline-offset:3px}h1,h2,h3,h4,p{margin:0}h2{font-weight:760;letter-spacing:-.045em}h3{letter-spacing:-.025em}small{font-size:.78rem}p{line-height:1.52}b,strong{font-weight:710}img{max-width:100%;display:block}.app-shell{max-width:680px;margin:0 auto;min-height:100dvh;padding-bottom:calc(90px + env(safe-area-inset-bottom));position:relative;background:var(--bg)}.top{height:68px;padding:env(safe-area-inset-top) 22px 0;box-sizing:content-box;display:flex;align-items:center;justify-content:space-between;gap:12px;position:sticky;top:0;z-index:10;background:linear-gradient(to bottom,#0b1118 84%,rgba(11,17,24,.97));border-bottom:1px solid rgba(255,255,255,.025)}.top h1{font-size:1rem;font-weight:720;flex:1;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.top .back{margin-left:-9px}.brand{display:flex;align-items:center;gap:11px}.brand img{width:42px;height:42px;border-radius:13px;border:1px solid rgba(255,255,255,.12)}.brand strong{display:block;font-size:1.38rem;letter-spacing:-.05em}.small-spark{font-size:.75rem;color:var(--mint);vertical-align:top}.brand small{display:block;font-size:.72rem;color:var(--muted);margin-top:-3px}.round{width:40px;height:40px;border-radius:50%;background:var(--surface);border:1px solid rgba(255,255,255,.055)}.iconbtn{width:36px;height:36px;border:0;background:transparent;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;border-radius:12px}.iconbtn:active{transform:scale(.95)}.ico{flex-shrink:0;display:inline-block;vertical-align:middle}main{padding:11px 18px 28px}button{touch-action:manipulation}.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:680px;height:calc(68px + env(safe-area-inset-bottom));padding:8px 7px calc(5px + env(safe-area-inset-bottom));display:flex;justify-content:space-around;align-items:flex-start;gap:2px;background:rgba(14,22,29,.97);border-top:1px solid #26333d;z-index:20;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}.nav-item{border:0;background:transparent;color:#90a0aa;display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:5px;height:52px;border-radius:11px;font-size:.65rem;font-weight:620}.nav-item.active{color:var(--mint)}.nav-item.active .ico{filter:drop-shadow(0 0 8px rgba(116,235,197,.17))}.nav-item:active{background:var(--surface)}.loading{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}.loading-penguin{font-size:4rem}.loading strong{font-size:2.5rem}.loading span{color:var(--muted)}
/* Shared primitives */
.flex{display:flex}.between{justify-content:space-between}.center{align-items:center}.gap{gap:10px}.tight{gap:2px}.grow{flex:1}.full{width:100%}.spaced{margin-top:20px}.spaced-small{margin-top:10px}.mini{font-size:.73rem}.muted,.subtle{color:var(--muted)}.subtle{font-size:.78rem}.accent{color:var(--mint)}.eyebrow,.tiny-label{font-size:.64rem;font-weight:760;letter-spacing:.12em;text-transform:uppercase;color:var(--mint)}.tiny-label{color:#9daeb8;letter-spacing:.085em}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:24px 0 12px}.section-heading h3{font-size:1.075rem}.link{display:inline-flex;align-items:center;gap:4px;padding:4px 0;border:0;background:transparent;color:var(--mint);font-size:.79rem;font-weight:650}.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px}.meter{width:100%;height:8px;border-radius:99px;background:#2c3b44;overflow:hidden;margin:12px 0}.meter>div{height:100%;background:linear-gradient(90deg,#4bd9ad,#9df5d8);border-radius:99px;transition:width .3s}.btn{display:inline-flex;justify-content:center;align-items:center;gap:8px;min-height:45px;border-radius:13px;border:1px solid transparent;padding:11px 16px;font-size:.84rem;font-weight:740;white-space:nowrap}.btn-primary{color:#071a18;background:linear-gradient(135deg,#79eac6,#91f2d3);box-shadow:0 5px 20px rgba(85,222,180,.12)}.btn-primary:active{background:#60d7b0;transform:translateY(1px)}.btn-outline{border-color:#344650;background:#1a2730;color:#e5f0f0}.btn-outline:active{background:#293945}.btn-dark{background:#0c181f;color:var(--mint);border-color:rgba(0,0,0,.1)}.btn-quiet{background:none;color:var(--muted)}.intro{padding:19px 4px 15px}.intro.compact{padding-top:12px}.intro h2{font-size:2.2rem;line-height:1.07;margin:9px 0 10px}.intro p{color:var(--muted);font-size:.86rem;max-width:480px}.hscroll{display:flex;overflow-x:auto;gap:8px;scrollbar-width:none;margin:14px -18px;padding:3px 18px 6px}.hscroll::-webkit-scrollbar{display:none}.chip{border:1px solid var(--border);background:#17222b;color:#becbd0;padding:10px 14px;border-radius:50px;white-space:nowrap;font-size:.75rem;font-weight:660}.chip.active{border-color:var(--mint);background:var(--mint);color:#0c2523}.tabs{display:flex;background:#17222b;border:1px solid var(--border);border-radius:14px;padding:4px;gap:4px;margin:10px 0 18px}.tabs.two>button{width:50%}.tabs button{min-height:39px;flex:1;padding:7px;border:0;border-radius:11px;background:transparent;color:var(--muted);font-weight:680;font-size:.84rem}.tabs button span{font-size:.66rem;display:none}.tabs button.selected{background:var(--mint);color:#102522;box-shadow:0 2px 12px rgba(73,225,173,.2)}.empty-small{color:var(--muted);font-size:.84rem;padding:16px}.empty-state{text-align:center;border:1px dashed #30404b;border-radius:19px;margin:20px 0;padding:35px 22px;background:linear-gradient(135deg,#121d25,#111821)}.empty-state>span{font-size:2.8rem}.empty-state h3{margin:13px 0 7px}.empty-state p{color:var(--muted);font-size:.83rem;max-width:280px;margin:0 auto}.empty-state .btn{margin-top:12px}.feature-panel{border:1px solid #2d4650;background:linear-gradient(140deg,#1b3236,#152329);border-radius:17px;padding:17px;margin-top:19px}.feature-panel b{font-size:.86rem;color:#a1f1d4}.feature-panel p{font-size:.78rem;color:#adbec3;margin-top:7px}
/* Home hero & mascot */
.home-hero{position:relative;overflow:hidden;min-height:244px;display:flex;align-items:center;padding:24px 16px;border-radius:22px;background:linear-gradient(115deg,#84efd0 0%,#6edfb8 58%,#4fbf99 100%);color:#092522}.hero-shine{position:absolute;width:340px;height:340px;border:1px solid rgba(255,255,255,.32);border-radius:50%;right:-155px;top:-124px}.hero-shine:after{content:"";position:absolute;border:1px solid rgba(255,255,255,.25);inset:22px;border-radius:50%}.hero-copy{position:relative;z-index:2;flex:1;max-width:75%}.hero-kicker{font-size:.61rem;letter-spacing:.10em;font-weight:780}.hero-kicker .dot{display:inline-block;width:4px;height:4px;background:#2a6955;border-radius:50%;vertical-align:middle}.hero-copy h2{font-size:clamp(1.6rem,5vw,2.35rem);line-height:1.05;margin:15px 0 10px;letter-spacing:-.06em}.hero-copy em{font-style:normal;color:#fafffb;text-shadow:0 2px 10px rgba(4,59,39,.08)}.hero-copy p{font-size:.75rem;color:#255145;line-height:1.4;max-width:188px;margin-bottom:17px;font-weight:520}.hero-copy .btn{min-height:36px;font-size:.75rem;padding:9px 13px;border-radius:10px}.mascot{position:absolute;right:-5px;bottom:-21px;width:44%;height:83%;pointer-events:none}.mascot-body{position:absolute;right:1px;bottom:0;width:157px;max-width:100%;height:194px;background:#091618;border:4px solid #081719;border-radius:50% 50% 24% 24%;transform:rotate(-9deg)}.penguin-eye{position:absolute;top:49px;width:16px;height:19px;background:#fff;border-radius:50%;border:4px solid #fff}.penguin-eye.left{left:42px}.penguin-eye.right{right:34px}.penguin-beak{position:absolute;top:77px;left:66px;width:24px;height:13px;background:#f1b654;border-radius:4px 4px 13px 13px;transform:rotate(-4deg)}.penguin-belly{position:absolute;width:98px;height:126px;background:#f5fffa;border-radius:60% 60% 12% 12%;top:107px;left:27px}.penguin-wing{position:absolute;right:-13px;top:99px;width:45px;height:20px;background:#0b191a;border-radius:70% 50% 90% 15%;transform:rotate(-35deg)}.mascot .bubble{position:absolute;z-index:2;top:-7px;right:4px;transform:rotate(8deg);padding:11px 12px;border-radius:16px;background:#fff;color:#12221b;font-size:.75rem;font-weight:900;box-shadow:0 4px 0 rgba(0,0,0,.1)}.mascot .bubble:after{content:"";position:absolute;bottom:-10px;left:31px;border:11px solid transparent;border-top-color:#fff;border-bottom:0}.mascot-spark{position:absolute;color:#fff;font-size:22px}.mascot-spark.s1{left:15px;top:7px}.mascot-spark.s2{right:13px;bottom:54px}.statrow{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:15px 0 20px}.stat{background:#16212a;border:1px solid var(--border);padding:14px 10px;border-radius:16px;display:flex;flex-direction:column;align-items:center;gap:3px}.stat span{font-size:1.3rem}.stat b{font-size:1.2rem;font-variant-numeric:tabular-nums}.stat small{color:var(--muted);font-size:.68rem}.daily .flex strong{font-size:.81rem;color:var(--mint)}.daily .meter{margin:14px 0 11px}.daily .mini{font-size:.69rem}.placement-cta,.recommendation{width:100%;display:flex;align-items:center;gap:12px;border:1px solid #405449;background:#1c2c2a;border-radius:17px;padding:15px;margin-top:14px;text-align:left}.placement-cta>span:nth-child(2),.recommendation>span:nth-child(2){flex:1;display:flex;flex-direction:column;gap:4px}.placement-cta b,.recommendation b{font-size:.85rem}.placement-cta small,.recommendation small{color:#adc6bd;font-size:.7rem;line-height:1.4}.placement-icon,.pulse-icon{width:39px;height:39px;display:grid;place-items:center;border-radius:13px;background:#30483e;font-size:1.35rem}.home-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.home-tile{position:relative;min-height:126px;display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:5px;padding:14px;background:#18242d;border:1px solid #2c3b44;border-radius:18px;overflow:hidden}.tile-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:#2e5149;font-size:1.5rem;margin-bottom:7px}.home-tile.blue .tile-icon{background:#253d50}.home-tile.peach .tile-icon{background:#4f3b39}.home-tile.purple .tile-icon{background:#3f3150}.home-tile.yellow .tile-icon{background:#514634}.home-tile.pink .tile-icon{background:#513746}.tile-title{font-size:.91rem;font-weight:720}.home-tile small{font-size:.7rem;color:#9aadb4}.home-tile .ico{position:absolute;right:12px;top:16px;color:var(--low)}.home-tile:active{background:#25333d}.tips-card{display:flex;gap:13px;padding:17px 15px;border:1px solid #3d3c3b;border-radius:17px;background:linear-gradient(110deg,#25272a,#202529);margin-top:18px}.tips-icon{font-size:1.6rem}.tips-card b{font-size:.84rem}.tips-card p{color:#a9b3b7;font-size:.78rem;margin-top:4px}
/* Learn overview */
.learn-categories{display:flex;flex-direction:column;gap:10px;margin:10px 0}.learn-categories button,.practice-links button{display:flex;gap:14px;align-items:center;width:100%;padding:14px 13px;background:var(--surface);border:1px solid var(--border);border-radius:16px;text-align:left}.learn-categories button>span:nth-child(2),.practice-links button>span:nth-child(2){flex:1;display:flex;flex-direction:column;gap:5px}.learn-categories b,.practice-links b{font-size:.91rem}.learn-categories small,.practice-links small{color:var(--muted);font-size:.72rem;line-height:1.35}.category-emoji{display:grid;place-items:center;background:#2b3a3d;width:48px;height:48px;border-radius:14px;font-size:1.45rem}.kana-emoji{font-size:1.8rem;color:var(--mint)}.learn-categories button>.ico,.practice-links button>.ico{color:#95aab3}
/* Kana Academy */
.progress-card{padding:14px 17px;margin:0}.progress-card b{font-size:.81rem}.progress-card .meter{margin:12px 0 2px}.feature-kana{background:radial-gradient(ellipse at 50% 30%,#27383c 0%,#1a242d 60%,#17212a 100%);border:1px solid #38504e;border-radius:22px;padding:16px;margin:12px 0}.feature-kana .audio-btn{background:#314742;color:var(--mint)}.big-kana{font-size:clamp(7rem,29vw,11rem);height:190px;display:flex;align-items:center;justify-content:center;text-shadow:0 10px 30px rgba(0,0,0,.17);line-height:1;font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif}.kana-reading{display:flex;align-items:center;flex-direction:column;margin:-3px 0 19px;gap:5px}.kana-reading .romaji{font-size:1.25rem;font-weight:720;color:#e8faf3}.kana-reading small{font-size:.73rem;color:var(--muted)}.kana-pagination{display:flex;align-items:center;justify-content:center;gap:24px;margin-top:15px;color:var(--muted);font-size:.75rem}.kana-pagination button{width:35px;height:35px;border:1px solid var(--border);background:#2a3841;border-radius:50%;display:grid;place-items:center}.kana-chart{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.kana-cell{min-width:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;min-height:71px;padding:6px 1px;border:1px solid #2d3b45;border-radius:13px;background:#18232c}.kana-cell b{font-size:1.8rem;font-family:"Hiragino Kaku Gothic ProN",sans-serif;font-weight:680}.kana-cell .romaji{font-size:.65rem;color:#9eafb7}.kana-cell.picked{border-color:var(--mint);background:#223e37;box-shadow:0 0 0 1px #4dcba4 inset}.kana-cell.learned:after{content:'•';color:var(--mint);position:absolute;margin-top:-55px;margin-left:40px}.kana-cell{position:relative}.kana-cell:active{transform:scale(.96)}
/* Vocab/phrases */
.category-banner{background:linear-gradient(110deg,#1b342d,#1b262e);border:1px solid #30564b;border-radius:18px;display:flex;align-items:center;gap:14px;padding:16px;margin:8px 0 15px}.category-banner>span{font-size:2.4rem}.category-banner h3{font-size:1.15rem}.category-banner small{color:#a8c5bb}.searchbox{height:47px;border:1px solid var(--border);background:#1b2730;border-radius:14px;display:flex;align-items:center;gap:10px;padding:0 14px;color:#8499a3;margin:12px 0}.searchbox input{border:0;outline:none;background:none;color:var(--text);min-width:0;width:100%;font-size:.85rem}.searchbox input::placeholder{color:#81919c}.word-list{display:flex;flex-direction:column;gap:8px}.word-row{display:flex;align-items:center;gap:10px;padding:13px 14px;background:var(--surface);border:1px solid var(--border);border-radius:14px;min-height:94px}.word-main{flex:1;min-width:0}.word-main .jp{font-size:1.15rem;font-weight:660;overflow-wrap:anywhere}.word-main .audio-btn{color:var(--mint);width:31px;height:31px;background:#2b433e}.romaji,.romaji-wrap .romaji{display:block;color:#a0c6bb;font-size:.78rem;margin-top:2px}.word-main .meaning{font-size:.76rem;color:#b9c3c7;display:block;margin-top:5px}.learn-add{display:grid;place-items:center;width:38px;height:38px;background:#263b37;border:1px solid #335d4e;color:var(--mint);border-radius:50%}.learn-add.done{background:#80e7c2;color:#102821}.phrase-card{background:#17212a;border:1px solid #30404a;border-radius:17px;padding:15px;margin:10px 0}.phrase-card .audio-btn{color:var(--mint);background:#2b433e}.phrase-card .fav{color:#8a9eaa}.phrase-card .fav.on{color:#ff9d9d}.phrase-jp{font-size:1.13rem;letter-spacing:.01em;line-height:1.5;margin:7px 0 1px}.phrase-card>p{font-size:.86rem;color:#edf2f2;margin:7px 0}.phrase-card .note{color:var(--muted);font-size:.74rem;line-height:1.46;margin-top:6px}.phrase-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px;padding-top:10px;border-top:1px solid #2b3944}.phrase-actions button{display:flex;align-items:center;gap:5px;padding:7px 8px;border:0;border-radius:8px;background:#223039;color:#b9d0cb;font-size:.7rem;flex:1;justify-content:center;white-space:nowrap}.phrase-actions button:active{background:#2e4844}
/* Practice */
.big-practice-card{position:relative;display:flex;align-items:center;overflow:hidden;background:linear-gradient(125deg,#29463f,#1c343a 65%,#19262f);border:1px solid #456258;padding:22px 20px;border-radius:19px;min-height:211px}.big-practice-card>div{z-index:1;max-width:72%}.big-practice-card h3{font-size:1.75rem;line-height:1.13;margin:10px 0}.big-practice-card p{font-size:.74rem;color:#b5cbc5;margin:0 0 14px}.practice-blob{font-size:5.6rem;position:absolute;right:-16px;bottom:10px;transform:rotate(-16deg);filter:drop-shadow(0 15px 12px rgba(0,0,0,.2))}.practice-links{display:flex;flex-direction:column;gap:9px;margin:13px 0}.practice-emoji{background:#2f3f40;display:grid;place-items:center;font-size:1.5rem;border-radius:12px;width:45px;height:45px}.scenarios{display:grid;gap:10px}.scenario-card{display:flex;width:100%;align-items:center;gap:12px;text-align:left;border:1px solid var(--border);background:var(--surface);border-radius:17px;padding:14px}.scenario-card>span:nth-child(2){flex:1;display:flex;flex-direction:column;gap:4px}.sc-emoji{width:48px;height:48px;display:grid;place-items:center;background:#2a383e;border-radius:13px;font-size:1.7rem}.scenario-card b{font-size:.87rem}.scenario-card small{color:var(--muted);font-size:.72rem;line-height:1.35}.scenario-card em{font-style:normal;color:var(--mint);font-size:.68rem;margin-top:5px;font-weight:690}.scenario-card>.ico{color:#8499a3}.scenario-mini{display:flex;align-items:center;gap:14px;margin:8px 0 20px}.scenario-graphic{font-size:2.5rem;width:67px;height:67px;display:grid;place-items:center;border-radius:19px;background:#263a38}.scenario-mini h3{margin:5px 0;font-size:1.18rem}.scenario-mini p{font-size:.71rem;color:var(--muted)}.chat-thread{margin:25px 0}.speaker-label{font-size:.65rem;color:#8fa5b0;font-weight:760;letter-spacing:.1em;margin-bottom:10px}.chat-bubble{max-width:95%;border:1px solid #375046;background:#21362f;border-radius:5px 18px 18px 18px;padding:18px}.chat-bubble strong{font-size:1.25rem;line-height:1.5;overflow-wrap:anywhere}.chat-bubble .audio-btn{color:var(--mint);background:#304d43}.chat-bubble small{display:block;margin-top:9px;color:#c9d8d4;font-size:.82rem}.chat-bubble .romaji{color:#a0d3bf}.question-options{display:grid;gap:10px;margin:14px 0}.option,.mini-drill .question-options button{display:flex;align-items:center;gap:11px;text-align:left;min-height:55px;background:#1b2730;border:1px solid #344550;border-radius:13px;padding:13px;color:#f1f5f4;font-size:.89rem}.option>span:nth-child(2){flex:1}.option-letter{display:grid;place-items:center;background:#2b3a45;border-radius:9px;width:29px;height:29px;flex:0 0 auto;color:#a4b6bf;font-size:.68rem;font-weight:800}.option.correct{border-color:#4acda1;background:#1b3832}.option.incorrect{border-color:#bd6a66;background:#38292d}.option.correct .option-letter{background:#3b6757;color:#b0ffe1}.option.incorrect .option-letter{background:#774d4e;color:#fff}.option-phrase{align-items:flex-start;padding:13px}.option-phrase b{display:block;font-size:.94rem;margin:0 0 3px}.option-phrase small{display:block;color:#a1b1b7;font-size:.73rem;margin-top:5px}.option-phrase .romaji{font-size:.72rem}.feedback{display:flex;flex-direction:column;gap:5px;padding:14px;border-radius:13px;font-size:.82rem;margin-top:15px}.feedback.success{background:#1f3d34;border:1px solid #406f59}.feedback.failure{background:#3a292a;border:1px solid #724442}.feedback.success b{color:#9df0cb}.feedback.failure b{color:#ffb6aa}.feedback span{color:#d0dfd8;line-height:1.5}
/* Quizzes and placement */
.quiz-head{display:flex;justify-content:space-between;align-items:center;margin:14px 2px 7px}.quiz-head b{font-size:.8rem;color:#cddbd8}.question-card{min-height:240px;padding:21px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:radial-gradient(ellipse at center,#263c3b,#19262d 65%);border:1px solid #36534e;border-radius:22px;margin-top:18px;gap:10px}.quiz-front{font-size:clamp(3rem,10vw,5.4rem);font-weight:740;overflow-wrap:anywhere;letter-spacing:-.045em}.quiz-front.smaller{font-size:clamp(1.5rem,6vw,2.4rem);line-height:1.38}.question-card .audio-btn,.srs-card .audio-btn{background:#2f5147;color:var(--mint)}.completion,.placement-welcome{text-align:center;padding:36px 12px 12px}.completion-emoji,.target-emoji{font-size:4.7rem;margin-bottom:18px}.completion h2,.placement-welcome h2{font-size:2.3rem;line-height:1.1;margin:12px 0}.completion p,.placement-welcome p{font-size:.9rem;color:var(--muted);line-height:1.6;margin:0 auto 23px;max-width:360px}.completion .btn{margin-top:12px}.reward{border:1px solid #4b6657;border-radius:14px;background:#203c33;color:#b5ffdb;padding:16px;margin:0 0 16px;font-size:.85rem;font-weight:690}.placement-stats{display:flex;justify-content:space-around;padding:17px 0;margin:18px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.placement-stats div{display:flex;flex-direction:column;font-weight:800;font-size:1.65rem}.placement-stats small{color:var(--muted);font-size:.72rem;font-weight:500;margin-top:5px}
/* Review */
.review-overview{display:flex;align-items:center;gap:18px;background:#1c3432;border:1px solid #33584e;border-radius:20px;padding:21px;margin:14px 0}.review-number{font-size:3.25rem;font-weight:850;color:var(--mint);min-width:65px;text-align:center}.review-overview b{display:block;font-size:1rem}.review-overview small{display:block;font-size:.78rem;line-height:1.5;color:#a8c4bb;margin-top:5px}.card-explainer{display:flex;gap:12px;padding:15px;margin-bottom:15px;background:#18242d;border:1px solid var(--border);border-radius:16px}.card-explainer>span{font-size:1.8rem}.card-explainer b{font-size:.83rem}.card-explainer p{font-size:.74rem;color:var(--muted);margin-top:5px}.srs-card{min-height:325px;border:1px solid #3a584e;background:radial-gradient(ellipse at 50% 25%,#2a413d 0%,#1b2b31 60%,#17232b 100%);border-radius:22px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:13px;text-align:center;padding:23px;margin:22px 0}.srs-card h2{font-size:clamp(3.1rem,10vw,5.7rem);line-height:1.25;overflow-wrap:anywhere;letter-spacing:-.02em}.srs-card p{font-size:1.06rem;color:#f0f7f2}.srs-card .romaji{font-size:1rem}.review-ratings{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.review-ratings button{border:1px solid #415e5a;background:#21372f;border-radius:14px;padding:14px 4px;display:flex;flex-direction:column;gap:5px}.review-ratings button:first-child{background:#402c2d;border-color:#744b4a}.review-ratings button:nth-child(2){background:#29343b;border-color:#4b5b64}.review-ratings b{font-size:.9rem}.review-ratings small{font-size:.68rem;color:var(--muted)}.disclaimer{text-align:center;color:var(--low);font-size:.7rem;margin:13px 0}
/* Formality */
.register-head{display:flex;justify-content:space-between;padding:12px 16px 3px;color:#a3eace;font-size:.71rem;font-weight:800;letter-spacing:.09em}.register-head span:last-child{color:#e4b9fb}.register-list{display:flex;flex-direction:column;gap:10px}.register-row{display:grid;grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr);column-gap:7px;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:14px 11px}.register-row>div{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:6px}.register-row strong{font-size:.9rem;line-height:1.45;overflow-wrap:anywhere}.register-row .tone{font-size:.6rem;letter-spacing:.06em;font-weight:820}.tone.polite{color:var(--mint)}.tone.casual{color:#e6aef3}.register-row .audio-btn{width:28px;height:28px;background:#283b39;color:#8be9c7}.register-divider{align-self:center;color:#8ca9a1;font-size:1.1rem;text-align:center}.register-row>p{grid-column:1/-1;color:#aab9bf;font-size:.72rem;border-top:1px solid #30404a;padding-top:10px;margin-top:10px}.mini-drill{margin:26px 0;background:#1c282f;border:1px solid var(--border);border-radius:18px;padding:18px}.mini-drill h3{font-size:1rem;margin:9px 0;line-height:1.5}.mini-drill .question-options{grid-template-columns:1fr 1fr}.mini-drill .question-options button{font-size:.8rem;justify-content:center}.mini-drill p{font-size:.76rem;line-height:1.5}.text-success{color:#87e9bc}.text-warning{color:var(--amber)}
/* Handwriting */
.write-character{display:flex;justify-content:space-between;align-items:center;margin:10px 0}.write-character h3{font-size:1.75rem;margin-top:6px}.write-character h3 small{color:var(--muted);font-size:1rem;font-weight:500}.write-character .audio-btn{background:#294139;color:var(--mint)}.drawing-wrap{position:relative;aspect-ratio:1;border-radius:20px;border:2px solid #35544d;background:#16242b;overflow:hidden;max-width:520px;margin:0 auto;touch-action:none}.drawing-guides{pointer-events:none;position:absolute;inset:0}.drawing-guides div:first-child{position:absolute;top:50%;width:100%;border-top:1px dashed #3c5655}.drawing-guides div:last-child{position:absolute;left:50%;height:100%;border-left:1px dashed #3c5655}.drawing-ghost{pointer-events:none;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:clamp(11rem,48vw,18rem);line-height:1;color:rgba(195,219,211,.23);font-family:"Hiragino Kaku Gothic ProN",sans-serif;user-select:none}.drawing-wrap canvas{position:absolute;inset:0;touch-action:none;width:100%;height:100%;z-index:2}.draw-hint{pointer-events:none;position:absolute;bottom:14px;width:100%;text-align:center;font-size:.62rem;letter-spacing:.1em;font-weight:700;color:#6f8e86}.write-buttons{margin-top:15px}.write-note{border:1px solid #374b4d;background:#1a2d2f;border-radius:14px;margin-top:15px;padding:15px}.write-note b{font-size:.86rem}.write-note p{font-size:.76rem;color:var(--muted);margin-top:6px}.write-grid{margin-bottom:20px}
/* Progress */
.level-panel{display:flex;align-items:center;gap:18px;padding:20px;border:1px solid #366353;background:linear-gradient(115deg,#1c3d33,#1a292b);border-radius:19px;margin:8px 0 14px}.level-circle{width:83px;height:83px;border-radius:50%;border:7px solid #7de6c2;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:inset 0 0 0 4px rgba(19,55,40,.3)}.level-circle span{font-size:.64rem;color:#b3edda;font-weight:820;letter-spacing:.1em}.level-circle strong{font-size:2rem;line-height:1}.level-info{flex:1}.level-info h3{font-size:1.5rem;margin:7px 0 3px}.level-info .meter{margin:10px 0 7px}.level-info small{font-size:.72rem;color:#b5d0c5}.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.stats-grid>div{display:flex;flex-direction:column;align-items:center;gap:5px;border:1px solid var(--border);border-radius:16px;background:var(--surface);padding:16px}.stats-grid span{font-size:1.6rem;color:var(--mint)}.stats-grid b{font-size:1.45rem}.stats-grid small{color:var(--muted);font-size:.71rem}.activity-chart{display:flex;justify-content:space-around;gap:14px;height:140px}.activity-day{flex:1;display:flex;align-items:center;flex-direction:column;gap:6px}.activity-track{width:100%;flex:1;max-width:30px;background:#25323d;border-radius:8px;display:flex;align-items:flex-end;overflow:hidden}.activity-fill{width:100%;background:linear-gradient(#9cf2d5,#3bab8c);border-radius:8px;min-height:4px}.activity-day b{font-size:.69rem;color:#b5c2c8;font-weight:600}.activity-day small{color:#788c94;font-size:.65rem}.achievements{display:grid;gap:9px}.achievement{display:flex;align-items:center;gap:14px;background:#18232c;border:1px solid #34434c;border-radius:14px;padding:12px}.achievement>span{width:43px;height:43px;background:#334c41;border-radius:12px;display:grid;place-items:center;font-size:1.55rem}.achievement>div{flex:1;display:flex;flex-direction:column;gap:4px}.achievement b{font-size:.86rem}.achievement small{color:var(--muted);font-size:.73rem}.achievement>.ico{color:var(--mint)}.achievement.locked{opacity:.57;filter:grayscale(.6)}
/* Settings & dialogs */
.setting-section{background:var(--surface);border:1px solid var(--border);border-radius:18px;margin:12px 0;padding:17px}.setting-section h3{font-size:1rem;margin-bottom:14px}.setting-section>p{font-size:.78rem;margin:0 0 13px}.setting-section .tabs{margin-top:10px}.setting-row{display:flex;justify-content:space-between;align-items:center;gap:12px}.setting-row b{font-size:.85rem;display:block}.setting-row small{display:block;color:var(--muted);font-size:.71rem;margin-top:5px;line-height:1.45}.toggle{position:relative;border:0;border-radius:30px;background:#43515b;width:51px;height:30px;flex:0 0 auto;padding:3px}.toggle span{display:block;width:24px;height:24px;background:#fff;border-radius:50%;transition:transform .2s}.toggle.on{background:#6edcbb}.toggle.on span{transform:translateX(21px);background:#12392c}.small-button{background:#29463f;border:1px solid #426956;color:var(--mint);font-size:.72rem;font-weight:720;border-radius:9px;padding:10px}.setting-action{display:flex;justify-content:flex-start;align-items:center;gap:11px;padding:15px 0;background:transparent;border:0;border-bottom:1px solid #34414b;width:100%;font-size:.85rem}.setting-action:last-child{border-bottom:0}.setting-action>.ico:last-child{margin-left:auto;color:var(--muted)}.danger-text{color:#ffaba6!important}.about{display:flex;flex-direction:column;gap:7px;align-items:center;text-align:center;padding:20px 0;color:var(--muted)}.about img{width:65px;height:65px;border-radius:15px}.about b{color:var(--text);font-size:.9rem;margin-top:5px}.about p{font-size:.7rem;max-width:270px}.modal-backdrop{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.76);display:flex;justify-content:center;align-items:center;padding:22px;backdrop-filter:blur(8px)}.modal{position:relative;width:100%;max-width:500px;max-height:90dvh;overflow-y:auto;border:1px solid #455c61;border-radius:24px;background:#1c2932;padding:28px 22px;box-shadow:0 15px 60px rgba(0,0,0,.45)}.modal-close{position:absolute;right:13px;top:13px;background:#32434b}.modal h2{font-size:1.7rem;margin:5px 0 8px}.modal>p{color:var(--muted);font-size:.85rem;margin-bottom:17px}.modal form{display:flex;flex-direction:column;gap:16px;margin-top:18px}.modal label{display:flex;flex-direction:column;gap:7px;font-size:.77rem;font-weight:660;color:#bfcecf}.modal input{height:46px;border:1px solid #43515e;background:#141f28;border-radius:11px;padding:0 12px;color:#fff;font-size:.86rem;min-width:0;max-width:100%}.modal input::placeholder{color:#81929d}.show-modal{text-align:center;padding-top:48px}.show-modal .show-japanese{font-size:clamp(2.1rem,9vw,3.65rem);font-weight:740;line-height:1.4;margin:33px 0 12px;overflow-wrap:anywhere}.show-modal>p{font-size:1.08rem;color:#e6f1ec;margin:12px 0 27px}.show-modal .audio-btn{width:45px;height:45px;background:#315b49;color:var(--mint)}.toast{position:fixed;left:50%;transform:translateX(-50%) translateY(20px);bottom:calc(91px + env(safe-area-inset-bottom));z-index:100;max-width:min(90vw,450px);width:max-content;background:#e9fff5;color:#193a2d;border-radius:50px;padding:11px 17px;font-size:.8rem;font-weight:650;box-shadow:0 8px 28px rgba(0,0,0,.36);opacity:0;pointer-events:none;transition:all .2s}.toast.visible{opacity:1;transform:translateX(-50%) translateY(0)}
@media(min-width:700px){body{background:radial-gradient(ellipse at center top,#1a3534,#0b1118 68%)}.app-shell{border-left:1px solid #23333e;border-right:1px solid #23333e;box-shadow:0 0 90px rgba(0,0,0,.4)}main{padding-left:26px;padding-right:26px}.home-hero{min-height:270px}.hero-copy h2{font-size:2.6rem}.mascot{right:5px;width:34%}.hscroll{margin-left:-26px;margin-right:-26px;padding-left:26px;padding-right:26px}.home-tile{min-height:143px}.kana-chart{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(max-width:360px){main{padding:10px 12px 24px}.top{padding-left:14px;padding-right:14px}.hero-copy h2{font-size:1.55rem}.home-hero{min-height:235px}.mascot{transform:scale(.81);transform-origin:bottom right;right:-12px}.stat{padding:12px 6px}.stat small{font-size:.6rem}.hero-copy p{max-width:170px}.btn{font-size:.75rem;padding-left:10px;padding-right:10px}.feature-kana .flex.gap{flex-direction:column}.hscroll{margin-left:-12px;margin-right:-12px;padding-left:12px;padding-right:12px}.kana-cell{min-height:62px}.kana-cell b{font-size:1.5rem}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}

/* Pengo 2 — minimal editorial refresh. All existing lesson layout semantics preserved. */
:root{--bg:#0a0e12;--surface:#11181e;--surface2:#172027;--surface3:#1d282f;--border:#28343c;--mint:#8ee6c8;--mint-strong:#6ed4b1;--text:#f4f7f5;--muted:#a0aeb4;--low:#72828a;--radius:16px}
body{background:var(--bg);letter-spacing:-.008em}
.app-shell{background:var(--bg);padding-bottom:calc(82px + env(safe-area-inset-bottom))}
.top{height:61px;padding-left:20px;padding-right:20px;background:rgba(10,14,18,.96);border-color:#1b252a;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.top h1{font-size:.96rem;font-weight:660;letter-spacing:-.016em}
.brand{gap:10px}.brand img{width:35px;height:35px;border-radius:11px;border:1px solid #39464e}.brand strong{font-size:1.21rem;font-weight:750;letter-spacing:-.045em}.brand small{font-size:.65rem;margin-top:0;color:#94a4ab}.small-spark{display:none}
.round{background:transparent;border:1px solid #26343b;width:35px;height:35px}
main{padding:15px 18px 24px}
.bottom-nav{height:calc(63px + env(safe-area-inset-bottom));padding:5px 6px calc(4px + env(safe-area-inset-bottom));background:rgba(11,17,22,.96);border-color:#273138}
.nav-item{height:51px;font-size:.62rem;font-weight:550;gap:4px;color:#82929b}.nav-item.active{color:var(--mint);font-weight:700}.nav-item.active .ico{filter:none}
.section-heading{margin:22px 0 11px}.section-heading h3{font-size:1.015rem;font-weight:720;letter-spacing:-.03em}
.panel{background:var(--surface);border-color:var(--border);border-radius:17px;padding:17px}
.meter{height:5px;background:#2b373d;margin:12px 0}.meter>div{background:var(--mint);transition:width .25s}
.btn{border-radius:12px;font-weight:680;min-height:43px;font-size:.82rem}
.btn-primary{background:var(--mint);color:#0c231d;box-shadow:none}
.btn-primary:active{background:#6acda9}.btn-outline{background:var(--surface2);border-color:#2e3d43;color:var(--text)}
.btn-dark{background:var(--mint);color:#0b2420;border-color:transparent}
.btn-quiet{background:none}
.eyebrow,.tiny-label{font-weight:700;letter-spacing:.10em}
.chip{background:#141e24;border-color:var(--border);color:#b6c4c7;padding:9px 13px;font-weight:560}.chip.active{background:var(--mint);border-color:var(--mint);color:#0d2420}
.tabs{background:#10171c;border-color:#28343a;border-radius:13px;margin-bottom:17px}.tabs button{min-height:37px;font-size:.8rem;font-weight:620}.tabs button.selected{background:var(--mint);box-shadow:none}
.intro{padding:12px 1px 13px}.intro h2{font-size:1.88rem;font-weight:740;letter-spacing:-.05em;line-height:1.12;margin:8px 0}.intro p{color:#a7b5bb}
.home-hero{min-height:218px;padding:22px 20px;border-radius:19px;background:#152520;color:var(--text);border:1px solid #315147}
.hero-shine{width:230px;height:230px;right:-105px;top:-121px;opacity:.35;border-color:#54766a}.hero-shine:after{border-color:#537467}
.hero-copy{max-width:70%}.hero-kicker{font-size:.57rem;color:var(--mint);letter-spacing:.11em;font-weight:720}.hero-kicker .dot{background:#709487}
.hero-copy h2{font-size:clamp(1.65rem,6.4vw,2.22rem);line-height:1.06;margin:11px 0 9px;font-weight:760;letter-spacing:-.055em;color:#f5f9f5}.hero-copy em{color:var(--mint);text-shadow:none}
.hero-copy p{font-size:.77rem;color:#b3c8bf;line-height:1.47;max-width:215px;margin-bottom:15px;font-weight:450}
.hero-copy .btn{font-size:.71rem;min-height:36px;padding:8px 11px;border-radius:10px;font-weight:700}
.mascot{right:-18px;bottom:-36px;width:40%;height:83%;transform:scale(.83);transform-origin:bottom right}.mascot-body{background:#060e10;border:3px solid #d5f4e5}.penguin-wing{background:#071315}.mascot .bubble{right:0;top:-3px;padding:8px 10px;font-size:.69rem;transform:rotate(5deg);border-radius:12px;box-shadow:none}.mascot-spark{display:none}
.statrow{gap:8px;margin:11px 0 16px}.stat{background:#111a20;border:1px solid #25323a;border-radius:13px;padding:12px 7px 11px;gap:2px}.stat span{font-size:1.03rem}.stat b{font-size:1.05rem;font-weight:730}.stat small{font-size:.62rem;letter-spacing:-.01em}
.daily .flex strong{color:var(--mint)}.daily .meter{margin:13px 0 10px}
.placement-cta,.recommendation{background:#13221e;border:1px solid #2c493f;border-radius:14px;padding:13px;margin-top:12px}.placement-cta small,.recommendation small{color:#adbbb6}.placement-icon,.pulse-icon{width:36px;height:36px;background:#253f34;border-radius:10px;font-size:1.15rem}
.home-grid{gap:9px}.home-tile{background:#121b21;border:1px solid #29353d;border-radius:15px;min-height:117px;padding:12px;gap:3px}
.home-tile:active{background:#18252b}.tile-icon,.home-tile.blue .tile-icon,.home-tile.peach .tile-icon,.home-tile.purple .tile-icon,.home-tile.yellow .tile-icon,.home-tile.pink .tile-icon{width:35px;height:35px;border-radius:10px;background:#213930;color:var(--mint);font-size:1.17rem;margin-bottom:7px}
.tile-title{font-size:.86rem;font-weight:680}.home-tile small{font-size:.67rem;color:#94a6ac}.home-tile .ico{right:11px;top:14px}
.tips-card{background:#151b1e;border:1px solid #303a3b;border-radius:14px;padding:14px}
.learn-categories button,.practice-links button,.scenario-card{background:#11191e;border:1px solid #29353d;border-radius:14px;padding:13px}
.category-emoji,.practice-emoji,.sc-emoji{background:#21332f;border-radius:11px}
.feature-panel{background:#13241f;border:1px solid #2c473c;border-radius:14px}
.big-practice-card{background:#15251f;border:1px solid #2f4b41;border-radius:17px;min-height:188px;padding:19px}.big-practice-card h3{font-size:1.57rem}.practice-blob{font-size:4.8rem;opacity:.8;right:-9px}
.phrase-card{background:#11191f;border:1px solid #28363d;border-radius:15px;padding:14px;margin:9px 0}.phrase-card .audio-btn{background:#233b32;color:var(--mint)}.phrase-jp{font-size:1.10rem}
.phrase-actions{border-top-color:#2a363d}.phrase-actions button{background:#1b282d}
.kana-cell{background:#121c22;border:1px solid #29373d;border-radius:11px;min-height:67px}.kana-cell.picked{background:#20362e;border-color:var(--mint);box-shadow:none}
.category-banner,.question-card,.srs-card,.progress-card{background:var(--surface);border-color:var(--border)}
.quiz-front{font-weight:650}
.btn:focus-visible,.iconbtn:focus-visible,.home-tile:focus-visible,.nav-item:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
@media(min-width:700px){body{background:#080d11}.app-shell{border-color:#223039;box-shadow:0 8px 70px rgba(0,0,0,.35)}.home-hero{min-height:233px}.hero-copy h2{font-size:2.4rem}.mascot{right:9px;width:34%}}
@media(max-width:360px){.home-hero{padding:17px 15px}.hero-copy h2{font-size:1.55rem}.hero-copy p{font-size:.70rem;max-width:166px}.mascot{transform:scale(.72);right:-28px}.home-tile{min-height:111px;padding:10px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:0.01ms!important;animation-duration:0.01ms!important}}
/* V7: Japanese counters — compact dark-first lesson design */
.counter-hero{padding:22px;border:1px solid rgba(115,237,200,.20);border-radius:20px;background:linear-gradient(145deg,#1a2628,#11191e);margin:16px 0 12px}
.counter-hero h3{font-size:42px;margin:14px 0 8px;line-height:1.15;letter-spacing:-.035em;color:#8debcf}
.counter-hero h3 span{font-size:18px;color:#f3f6f5;font-weight:600;letter-spacing:-.01em;vertical-align:middle}
.counter-hero p{color:#b5c2c5;font-size:14px;line-height:1.65;margin:0 0 18px}
.counter-example{border:1px solid var(--line, #303c42);background:#192127;border-radius:18px;padding:18px;margin:14px 0 24px}
.counter-example strong{font-size:23px;line-height:1.5;color:#f7faf9;overflow-wrap:anywhere}
.counter-example p{font-size:14px;color:#bdcacc;margin:10px 0 0}
.counter-list{display:grid;gap:8px;margin-bottom:14px}
.counter-row{display:flex;align-items:center;gap:13px;padding:13px 12px;background:#181f25;border:1px solid #2c363c;border-radius:15px;min-width:0}
.counter-number{flex:none;display:grid;place-items:center;width:39px;height:42px;border-radius:11px;background:#253532;color:#99e8d0;font-weight:800}
.counter-word{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}
.counter-word strong{color:#f5f7f7;font-size:21px;line-height:1.3;font-weight:650}
.counter-word>span:not(.romaji){color:#b6c5c8;font-size:13px}
.counter-word .romaji{font-size:12px;color:#91d8c5}
.counter-row .iconbtn,.counter-row .learn-add{flex:none}
@media(max-width:350px){.counter-row{gap:7px;padding:10px 8px}.counter-hero{padding:16px}.counter-word strong{font-size:19px}}

/* v8: reversible immersion mode; meanings hidden, quiz answers still playable */
.english-hidden .english-translation{display:none!important}
.english-quick{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:10px 13px;margin:2px 0 18px;border:1px solid rgba(148,163,184,.15);border-radius:14px;background:rgba(255,255,255,.025);color:var(--muted,#9aa5ac);font-size:12px;font-weight:600}
.english-quick>span{display:flex;align-items:center;gap:8px}
.english-switch{border:1px solid rgba(148,163,184,.18);background:#222b31;color:#c9d2d7;border-radius:999px;padding:7px 11px;min-width:77px;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;font-size:11px;font-weight:800;letter-spacing:.06em}
.english-switch.on{background:rgba(100,237,200,.11);color:#73e6c4;border-color:rgba(100,237,200,.3)}
.english-switch-track{display:block;width:9px;height:9px;border-radius:50%;background:#76858c}
.english-switch.on .english-switch-track{background:#73e6c4}
.english-switch:focus-visible{outline:2px solid #73e6c4;outline-offset:2px}

/* Pengo v9: kana recall and personalized trouble list */
.recall-shortcuts{display:flex;gap:9px;margin:12px 0 14px}.recall-shortcuts .btn{flex:1;white-space:normal;font-size:.73rem;padding:10px 7px}.focus-inline{display:block;border:1px solid #3d4b56;background:#17242d;color:#b7c7d0;border-radius:12px;margin:13px auto;padding:10px 13px;font-size:.78rem}.focus-inline.active{border-color:#6abfa9;color:#9ff2d3;background:#1a3531}.recall-prompt{border:1px solid #314b49;background:#182a2d;border-radius:19px;padding:20px 16px;margin:12px 0;text-align:center}.recall-prompt h2{font-size:clamp(3rem,15vw,4.5rem);margin:7px 0;font-weight:780;letter-spacing:-.035em;color:#e9fcf6}.recall-prompt p{color:#a8b9be;font-size:.77rem}.recall-canvas{background:#111c24;border-color:#2f4b4d}.recall-answer{margin:17px 0;padding:18px;border:1px solid #3a6658;background:#1a302d;border-radius:18px}.recall-character{font-size:clamp(6rem,30vw,9rem);line-height:1.3;text-align:center;font-family:'Hiragino Kaku Gothic ProN','Hiragino Sans',sans-serif}.recall-grade{margin:14px 0}.recall-grade p{font-size:.85rem;color:#bbceca;margin:0 0 11px}.recall-grade .btn{font-size:.78rem}.recall-disclaimer{line-height:1.5;text-align:center;padding:8px 12px}.focus-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:18px}.focus-tile{position:relative;min-width:0;min-height:94px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;background:#17232d;border:1px solid #31414a;border-radius:13px}.focus-tile b{font-size:2rem}.focus-tile small{color:#a1b1ba;font-size:.7rem}.focus-tile span{position:absolute;right:7px;top:4px;font-size:1rem;color:#748996}.focus-tile.active{background:#1b3832;border-color:#65d3ae}.focus-tile.active span{color:#8df1cc}.drawing-wrap.recall-canvas .draw-hint{color:#6e868b}.recall-canvas canvas{touch-action:none}@media(max-width:360px){.focus-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}