/* Mobile-first interaction layer: white, powder blue, generous touch targets. */
:root{--paper:#f5f8fd;--ink:#2b4669;--muted:#62758f;--green:#3f70af;--lime:#e6f0ff;--line:#dfe7f2;--nav-clearance:90px;color-scheme:light}
body{background:#f7faff;background-image:none;color:#2b4669;font-family:ui-rounded,-apple-system,BlinkMacSystemFont,'Hiragino Kaku Gothic ProN','Yu Gothic','Malgun Gothic',sans-serif;overflow-x:clip}main{min-width:0}header{position:relative;gap:16px}.header-actions{display:flex;align-items:center;gap:12px;margin-left:auto}.menu-toggle,.menu-close{display:grid;place-items:center;flex-shrink:0;width:46px;height:46px;border:1px solid #dce7f5;border-radius:15px;background:#fff;color:#426d9e}.menu-bars{width:19px;display:grid;gap:5px}.menu-bars i{display:block;height:2px;border-radius:2px;background:currentColor}.menu-bars i:nth-child(2){width:14px;margin-left:auto}.menu-close{font-size:25px}.sidebar{background:#fff;border-right:1px solid #e2eaf5;overflow-y:auto}.sidebar .side-foot{position:relative}.sidebar .nav-item.active{background:#eaf2ff;border-color:#dbe7f8;box-shadow:none}.sidebar .nav-item{margin-bottom:6px}.welcome{background:#edf4ff;border-color:#e1ebfa;box-shadow:none}.welcome::before{background:#d5e5fb99}.art-circle{background:#f9fcff;border-color:#c6d9f1;color:#6485b1}.art-square{background:#fff;border-color:#c7daf4;color:#5077ab}.letter-art i{color:#87a6cb}.daisy{filter:grayscale(.3)}.card,.stats,.exam-overview,.scene,.learn-lesson,.word-flashcard{box-shadow:0 5px 20px #31598706;border-color:#dfe8f4}.btn{min-height:44px;border-radius:14px;color:#365f91;background:#f3f7ff;border-color:#dce7f6}.btn.primary{background:#3f70af;border-color:#3f70af;color:#fff;box-shadow:none}.btn.lime{background:#e6f0ff;border-color:#d2e3fc;color:#3d689d;box-shadow:none}.pill{background:#edf4ff;color:#486a99}.hint-card,.exam-field.writing{background:#f1f6ff;border-color:#dde8f8;box-shadow:none}.hint-card h3{color:#4f6c97}.hint-card .phrase{color:#42618a}.hint-card .btn{color:#4c709f;border-color:#dbe6f5}.tip-box{background:#f5f9ff;border-color:#d2e0f3;color:#536e92}.tip-box strong{color:#43628c}.ai-banner{background:#edf4ff;border-color:#dce8f9;box-shadow:none}.scene:nth-child(n),.exam-field:nth-child(n){background:#fff}.scene.selected{background:#edf4ff;border-color:#7d9fc9;box-shadow:none}.learn-shortcuts button,.learn-shortcuts button:nth-child(2){background:#fff;border-color:#dfe8f4;box-shadow:none}.learn-shortcuts button small{color:#677e9d}.learn-lesson.learn-done{background:#edf6ff;border-color:#cddff4}.grammar-accordions{display:grid;gap:13px;margin:18px 0 27px}.grammar-accordion{border:1px solid #dfe8f4;border-radius:19px;background:white;overflow:hidden}.grammar-accordion summary{display:flex;align-items:center;justify-content:space-between;gap:18px;list-style:none;cursor:pointer;min-height:66px;padding:19px 22px;font-size:15px;line-height:1.8;font-weight:650;color:#3e5d88}.grammar-accordion summary::-webkit-details-marker{display:none}.accordion-plus{font-size:22px;flex-shrink:0;color:#7393be;transition:transform .2s}.grammar-accordion[open] .accordion-plus{transform:rotate(45deg)}.grammar-accordion[open] summary{background:#f2f7ff;border-bottom:1px solid #e1eaf8}.grammar-content{padding:3px 22px 23px}.grammar-lead{font-size:14px;line-height:2;color:#58718f}.grammar-content article{padding-top:15px;margin-top:17px;border-top:1px dashed #dfe7f2}.grammar-content h3{font-size:21px;line-height:1.8;margin:4px 0 12px;color:#3e608e;overflow-wrap:anywhere}.grammar-content .translation{margin:10px 0}.conversation-speak{margin-top:24px}.conversation-speak h3{font-size:18px}.conversation-speak textarea{min-height:130px}.learning-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;padding:5px;background:#e9f1fc;border:1px solid #e0eaf8;border-radius:18px;margin:24px 0}.learning-tabs button{display:flex;align-items:center;justify-content:center;gap:8px;border:0;background:transparent;border-radius:13px;min-height:47px;color:#617c9e;font-size:14px;font-weight:600}.learning-tabs button[aria-selected="true"]{background:#fff;color:#315e99;box-shadow:0 2px 8px #284d7e0d}.learning-tabs button span{font-size:18px}#study-panel{outline:none;min-width:0}.word-tools{grid-template-columns:repeat(3,minmax(0,1fr))}.word-tools select{min-height:46px}.word-difficulty-note{margin:7px 0 15px;font-size:11px;line-height:1.8;color:#6e829d}.word-flashcard{max-width:none;transition:transform .16s ease;outline-offset:4px;will-change:transform}.word-flash-main{touch-action:pan-y pinch-zoom;min-height:265px;user-select:none;-webkit-user-select:none;cursor:grab}.word-flash-main:active{cursor:grabbing}.word-flash-main h3{color:#426da6}.word-meaning{color:#42658d}.word-spark{color:#afc8e8}.word-swipe-hint{font-size:11px;color:#748eae;text-align:center;margin:19px 0 0}.word-paging{align-items:center}.word-flashcard>.button-row{justify-content:center}.word-flashcard .card-top{font-size:12px}.word-list .card{background:#fff}.word-list .btn{min-height:44px}.word-tools input,.word-tools select,textarea{font-size:16px}.menu-dialog{position:fixed;inset:12px 12px auto auto;margin:0;width:min(355px,calc(100vw - 24px));max-height:calc(100dvh - 24px);border:1px solid #dce7f7;border-radius:25px;padding:22px;box-shadow:0 18px 65px #23477524}.menu-dialog::backdrop{background:#24466c50;backdrop-filter:blur(4px)}.menu-dialog .modal-head{margin-bottom:16px}.menu-dialog h2{font-size:21px;color:#345985}.menu-link{display:flex;align-items:center;gap:13px;width:100%;text-align:left;padding:13px 12px;border:0;border-radius:13px;background:transparent;color:#526e92;font-size:14px;min-height:46px}.menu-link>span:first-child{display:grid;place-items:center;width:23px;font-size:20px}.menu-link>span:last-child{margin-left:auto;color:#9eb5d2;font-size:13px}.menu-link.selected{background:#edf4ff;color:#38649e}.menu-secondary{border-top:1px solid #e4ebf5;margin-top:17px;padding-top:13px;display:grid;gap:4px}.menu-secondary button{border:0;background:transparent;text-align:left;padding:11px 12px;color:#6c829f;min-height:44px;font-size:13px}html:has(dialog[open]){overflow:hidden}.confirm-dialog{width:min(430px,calc(100% - 34px));padding:27px;border-radius:24px;border:1px solid #dce6f5;background:#fff;box-shadow:0 24px 80px #2a4b7329}.confirm-dialog h2{font-size:20px;line-height:1.6;color:#35577e;margin-bottom:15px}.confirm-dialog p{font-size:14px;line-height:1.95;color:#657a94}.confirm-actions{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:25px}.confirm-actions button{min-height:47px}.confirm-actions .danger{background:#a14c5a;color:white;border-color:#a14c5a}.confirm-dialog::backdrop{background:#27466966;backdrop-filter:blur(4px)}#toast{display:flex;gap:10px;align-items:center;background:#294f80;color:#fff;z-index:100;max-width:min(90vw,460px);line-height:1.6;box-shadow:0 10px 35px #18395925;bottom:28px;padding:13px 18px}.toast-icon{width:23px;height:23px;border-radius:50%;background:#ffffff24;display:grid;place-items:center;flex-shrink:0;font-size:12px}.note{line-height:1.9}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #83a9da;outline-offset:3px}button:disabled{cursor:default}#mobile-nav .nav-item{margin:0}
@media(max-width:1100px) and (min-width:761px){.word-tools{grid-template-columns:1fr 1fr}.word-search-label{grid-column:1/-1}}
@media(max-width:760px){:root{--nav-clearance:calc(85px + env(safe-area-inset-bottom,0px))}body{background:#f6f9fe}main{padding:0 18px calc(var(--nav-clearance) + 20px);margin:0;width:100%;max-width:100%}header{padding:16px 0 18px;min-height:126px;gap:17px;align-content:start;border-bottom:1px solid #e4ecf7}.mobile-brand{width:100%;padding-right:57px;min-height:44px;letter-spacing:1px;font-size:20px;gap:10px}.mobile-brand::before{width:39px;height:39px;font-size:25px;box-shadow:0 2px 0 #dbe7f7}.mobile-brand span{font-size:10px;line-height:1.5;letter-spacing:0}.header-actions{margin-left:auto;gap:0}.menu-toggle{position:absolute;right:0;top:16px;width:45px;height:45px;border-radius:14px}.language-control{max-width:56%;min-width:0}.language-control select{max-width:100%;padding:11px 27px 11px 13px;min-height:44px;font-size:12px}.help-button{font-size:10px;min-height:44px;padding:10px 11px}.welcome{margin:21px 0 19px;border-radius:25px}.welcome h1{font-size:27px}.stats{margin-bottom:24px}.stats div div>span{font-size:9px}.scene strong{font-size:13px}.scene small{font-size:10px}.exam-levels{gap:9px}.exam-levels .quiz-level{min-height:65px}.exam-field{min-height:168px}.exam-field-action{font-size:12px}.exam-info{font-size:11px}.learning-tabs{position:sticky;top:0;z-index:5;margin:18px 0 22px;background:#eaf2fdf5;backdrop-filter:blur(14px);border-radius:17px;padding:5px}.learning-tabs button{font-size:14px;min-height:46px}.learning-tabs button span{font-size:18px}html[data-view="5"] .welcome,html[data-view="6"] .welcome,html[data-view="7"] .welcome,html[data-view="5"] .stats,html[data-view="6"] .stats,html[data-view="7"] .stats{display:none}html[data-view="4"] .welcome{min-height:175px;padding:22px}html[data-view="4"] .welcome h1{font-size:25px}html[data-view="4"] .welcome .letter-art{opacity:.45;top:27px}#study-panel>.section-heading{margin-top:0}#study-panel .section-heading{gap:10px}.word-tools{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 11px;margin-top:23px}.word-tools label{font-size:11px;gap:8px;min-width:0}.word-tools select{font-size:14px;padding:12px 25px 12px 11px;min-height:46px}.word-tools .word-search-label{grid-column:1/-1}.word-search-label input{font-size:16px;min-height:49px}.word-mode .btn{font-size:13px;min-height:44px}.word-flashcard{padding:21px 18px;border-radius:25px}.word-flash-main{min-height:247px;padding:25px 2px;gap:12px}.word-flash-main h3{font-size:33px}.word-flash-main .reading{font-size:13px;line-height:1.9}.word-meaning{font-size:22px}.word-flashcard>.button-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.word-flashcard>.button-row>.btn:first-child{grid-column:1/-1}.word-flashcard>.button-row>.btn{font-size:12px;padding:12px 9px;min-height:46px}.word-paging .btn{font-size:12px;min-height:44px}.word-swipe-hint{font-size:11px;margin-top:17px}.word-list .btn{font-size:12px}.word-list .button-row{gap:9px}.grammar-accordion{border-radius:18px}.grammar-accordion summary{font-size:14px;min-height:64px;padding:18px}.grammar-content{padding:1px 18px 20px}.grammar-lead{font-size:14px}.grammar-content h3{font-size:21px}.grammar-content .note{font-size:12px}.conversation-speak{padding:22px 18px}.conversation-speak textarea{font-size:16px}.conversation-speak .btn{width:100%}.section-heading>.btn{align-self:flex-start;font-size:11px}#mobile-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));position:fixed;inset:auto 0 0;margin:0;gap:0;padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px));background:#ffffffed;backdrop-filter:blur(18px);border:0;border-top:1px solid #dbe6f6;border-radius:0;box-shadow:0 -5px 25px #31578109;z-index:20}#mobile-nav .nav-item{min-height:52px;padding:7px 2px;gap:5px;line-height:1.3;border-radius:14px;color:#7489a4;font-size:10px;white-space:nowrap}#mobile-nav .nav-item.active{color:#32639f;background:#edf4ff}#mobile-nav .nav-icon{font-size:20px;line-height:1.2}#toast{bottom:calc(var(--nav-clearance) + 12px);font-size:13px;max-width:calc(100vw - 28px);width:max-content;padding:13px 16px}.menu-dialog{max-height:calc(100dvh - 24px);max-height:calc(100svh - 24px);padding:21px 19px;border-radius:25px;inset:12px 12px auto auto}.menu-link{min-height:47px}.menu-secondary button{font-size:13px}footer{padding-bottom:10px}.confirm-dialog{padding:25px 22px}.confirm-actions{gap:10px}.confirm-actions button{padding-left:9px;padding-right:9px;font-size:13px}.learn-shortcuts strong{font-size:14px}.learn-shortcuts small{font-size:11px}.learn-character-grid small,.learn-kana small{font-size:10px}}
@media(max-width:360px){main{padding-left:13px;padding-right:13px}.mobile-brand{font-size:19px;gap:8px}.mobile-brand span{font-size:9px}.help-button{font-size:9px}.language-control select{font-size:11px}.word-tools select{font-size:12px}.word-flash-main h3{font-size:29px}.word-flashcard>.button-row>.btn{font-size:11px}#mobile-nav{padding-left:7px;padding-right:7px}.stats div div>span{font-size:8px}}
@media(prefers-reduced-motion:reduce){.word-flashcard,.accordion-plus{transition:none}.word-flashcard{will-change:auto}}