.site-header{width:100%;border-bottom:1px solid var(--gray-300);background-color:var(--white);box-sizing:border-box}.site-header__inner{width:min(100%,1200px);margin:0 auto;padding:.85rem clamp(1rem,4vw,2rem);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.75rem;box-sizing:border-box}.site-header__brand{display:flex;align-items:center;gap:.5rem}.site-header__logo{height:40px}.site-header__title{justify-self:center;font-weight:700;font-size:1.05rem;letter-spacing:.02em}.site-header__actions{display:flex;justify-self:end}.site-header__link{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1.2rem;border-radius:8px;border:none;background-color:var(--blue-100);color:var(--blue-700);font-weight:600;text-decoration:none;cursor:pointer;box-shadow:0 3px 6px #0000001f;transition:background-color .2s ease,color .2s ease,box-shadow .2s ease}.site-header__link:hover{background-color:var(--blue-200);color:var(--blue-800);box-shadow:0 5px 12px #00000029}.site-header__link:focus-visible{outline:3px solid var(--blue-400);outline-offset:2px}.site-header__link-icon{font-size:1rem;line-height:1}:root{--bottom-nav-height: 3.75rem;--bottom-nav-padding: .35rem;--bottom-nav-offset: calc( var(--bottom-nav-height) + (var(--bottom-nav-padding) * 2) + env(safe-area-inset-bottom) + .65rem )}.app-shell{min-height:100dvh;background-color:var(--app-background-color);background-image:var(--app-background-image);background-repeat:var(--app-background-repeat);background-size:var(--app-background-size);display:flex;flex-direction:column}@supports not (height: 100dvh){.app-shell{height:var(--app-height, 100vh);min-height:var(--app-height, 100vh)}}html,body{height:100%}body.has-bottom-nav{padding-bottom:var(--bottom-nav-offset);scroll-padding-bottom:var(--bottom-nav-offset)}.app-header{padding:clamp(1.5rem,4vw,2.25rem) clamp(1.5rem,5vw,2.25rem) 1rem;display:flex;justify-content:center;align-items:flex-start;gap:1rem}.app-header-content{width:min(960px,100%)}.app-header h1{font-size:1.75rem}.app-main{flex:1;padding:0 clamp(1.25rem,4vw,2.25rem) var(--bottom-nav-offset);display:flex;justify-content:center;box-sizing:border-box}.content-area{width:min(960px,100%);display:flex;flex-direction:column;gap:1.25rem}.tab-panel{display:none}.tab-panel--active{display:block}.panel-card{background:var(--white);border-radius:16px;padding:clamp(1.5rem,4vw,2.5rem);box-shadow:0 10px 28px #00000014;border:1px solid var(--gray-300);display:flex;flex-direction:column;gap:1rem}.community-challenge-card{gap:.75rem}.challenge-progress{margin:0;font-weight:600;color:var(--blue-900)}.settings-card{gap:1.25rem}.intensity-selector{margin-bottom:.5rem}.intensity-label{font-weight:600;color:var(--blue-900);display:block;margin-bottom:.75rem}.intensity-options{display:flex;flex-direction:column;gap:.5rem}.intensity-option{display:flex;align-items:baseline;gap:.35rem;padding:.6rem .85rem;border:1px solid var(--gray-300);border-radius:8px;cursor:pointer;transition:border-color .2s ease,background-color .2s ease;background:var(--white);font-size:1rem;text-align:left;width:100%}.intensity-option:hover{border-color:var(--blue-400);background:var(--blue-50)}.intensity-option.selected{border-color:var(--blue-600);background:var(--blue-100)}.intensity-option strong{font-weight:700;color:var(--blue-900)}.intensity-option.selected strong{color:var(--blue-700)}.intensity-option-desc{color:var(--gray-600);font-size:.9rem;font-weight:500}.intensity-option-desc:before{content:"("}.intensity-option-desc:after{content:")"}.section-header p{margin:0 0 .35rem}.eyebrow{font-size:.95rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--blue-700);margin:0 0 .35rem}.subdued{margin:0;color:var(--gray-600)}.settings-form{display:flex;flex-direction:column;gap:1rem}.form-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}label{font-weight:600;color:var(--blue-900);display:flex;flex-direction:column;gap:.4rem}.helper-text{margin:0;color:var(--gray-600);font-size:.95rem}.action-row{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}.align-end{justify-content:flex-end}.action-card{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.75rem;align-items:center;padding:1rem 1.25rem;border-radius:12px;border:1px solid var(--gray-300);background:var(--gray-100)}.study-panel{gap:1.5rem}.study-action{align-items:center}.study-action p{margin:0;font-weight:600;color:var(--blue-900)}.study-alerts{display:flex;flex-direction:column;gap:1rem}.study-alerts .error-message{margin:0}.progress-card{border:1px dashed var(--gray-300);border-radius:14px;padding:1.25rem;display:flex;flex-direction:column;gap:1rem;background:var(--white)}.progress-header{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap}.progress-header-left{display:flex;flex-direction:column;gap:.35rem}.progress-chart{--graph-padding: .75rem;display:flex;flex-direction:column;gap:.6rem}.progress-graph-area{position:relative;border:1px solid var(--gray-200);border-radius:12px;background:linear-gradient(180deg,var(--gray-50),var(--white));overflow:hidden;padding:var(--graph-padding)}.progress-axis{position:relative;min-height:3.75rem;padding:0 var(--graph-padding);overflow:visible}.axis-label{position:absolute;top:0;font-weight:600;color:var(--blue-900);font-size:.95rem;white-space:nowrap}.axis-label.start{left:0}.axis-label.exam{transform:translate(0);text-align:right}.axis-date-picker{display:flex;flex-direction:column;align-items:flex-end;gap:.35rem;font-weight:600;color:var(--blue-900)}.axis-date-picker input{border:1px solid var(--gray-300);border-radius:8px;padding:.35rem .6rem;font-size:.9rem;color:var(--blue-900);background:var(--white);width:clamp(6.5rem,15vw,8.5rem);box-sizing:border-box;-webkit-user-select:none;user-select:none;caret-color:transparent}.axis-date-picker input::-webkit-clear-button,.axis-date-picker input::-webkit-inner-spin-button{display:none}.axis-date-picker input::-ms-clear{display:none}.progress-path{position:relative;width:100%;height:100%;z-index:1}.progress-segment{position:absolute;background:#ef4444;border-radius:4px}.progress-segment.vertical{transform:translate(-50%)}.progress-segment.horizontal{height:4px;border-radius:0}.progress-segment.goal{background:var(--blue-400)}.progress-segment.goal.vertical{width:2px}.progress-segment.goal.horizontal{height:2px}.progress-scale{position:absolute;top:.75rem;right:.75rem;background:#0066fd1a;color:var(--blue-900);padding:.35rem .75rem;border-radius:999px;font-weight:600;font-size:.95rem}.progress-legend{display:flex;flex-direction:column;align-items:flex-start;gap:.35rem;color:var(--blue-900);font-weight:600;text-transform:lowercase}.progress-legend-overlay{position:absolute;top:var(--graph-padding);left:var(--graph-padding);z-index:2}.legend-item{display:flex;align-items:center;gap:.5rem}.legend-line{width:38px;height:4px;background:#ef4444;border-radius:12px;display:inline-flex}.legend-line.progress{background:#ef4444}.legend-line.target{background:var(--blue-400);height:3px}@media(max-width:600px){.progress-card{padding:1rem;gap:.75rem}.progress-header{gap:.75rem}.progress-header-left{gap:.25rem}.progress-header .eyebrow{font-size:.75rem}.progress-legend{font-size:.85rem}.legend-item span:not(.legend-line){font-size:.85rem}.progress-axis{min-height:3.4rem}.axis-label{font-size:.8rem}.axis-date-picker span{font-size:.75rem}.axis-date-picker input{width:min(100%,7.5rem);font-size:.7rem;padding:.15rem;border-radius:6px}.progress-chart{--graph-padding: .6rem}}.words-list{display:flex;flex-direction:column;gap:.75rem}.word-row{display:grid;grid-template-columns:1.2fr 2fr 1.6fr;gap:.65rem;column-gap:clamp(1rem,4vw,1.75rem);align-items:center}.word-row--header{font-weight:700;color:var(--gray-700)}.word-column-label{display:flex;align-items:center}.word-label{font-weight:700;color:var(--blue-900)}.strength-meter{width:100%;height:14px;background:var(--gray-300);border-radius:999px;overflow:hidden;position:relative}.strength-meter__fill{height:100%;background:linear-gradient(90deg,#22c55e,#16a34a);transition:width .25s ease}.next-review{margin:0;color:var(--gray-600);font-weight:500}@media(max-width:720px){.word-row{grid-template-columns:1fr}.word-row--header{display:none}.next-review{font-size:.95rem}}.password-panel{padding:1rem 1.25rem;border-radius:12px;border:1px solid var(--gray-300);background:var(--white);display:flex;flex-direction:column;gap:.75rem}.danger{border-color:#f5c2c7;background:#ffe5e5}.danger-button{background:#b00020;color:var(--white)}.mission-text{padding:.5rem 0 1rem;text-align:center;background:transparent}.mission-text p{margin:0 auto;max-width:800px;font-size:.9rem;line-height:1.5}.bottom-nav{position:fixed;bottom:0;left:0;right:0;min-height:var(--bottom-nav-height);background:var(--white);border-top:1px solid var(--gray-300);display:flex;gap:.5rem;padding:var(--bottom-nav-padding) clamp(1rem,4vw,1.25rem);padding-bottom:calc(var(--bottom-nav-padding) + env(safe-area-inset-bottom));box-shadow:0 -6px 20px #0000000f;z-index:10}.nav-button{flex:1;border-radius:12px;background:transparent;color:var(--gray-600);border:1px solid transparent;box-shadow:none;padding:.65rem .75rem;font-weight:700;transition:background-color .2s ease,color .2s ease,border-color .2s ease}.nav-button:hover{background:var(--blue-100);color:var(--blue-700)}.nav-button.active{background:var(--blue-100);border-color:var(--blue-400);color:var(--blue-700)}@media(min-width:768px){.action-card{flex-wrap:nowrap}}.mafy-info-content{display:grid;gap:.75rem}.mafy-info-content p{margin:0}.mafy-info-actions{margin-top:1.5rem;display:flex;flex-direction:column;gap:.75rem;align-items:center}.practice-card{gap:1.25rem}.practice-progress{font-weight:600}.practice-progress-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap}.practice-header-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.practice-report-button{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:999px;border:1px solid var(--gray-200);background:transparent;color:var(--gray-500);padding:0;cursor:pointer;transition:border-color .2s ease,color .2s ease,background .2s ease}.practice-report-button:hover{border-color:var(--gray-300);color:var(--gray-700);background:var(--gray-100)}.practice-report-button:focus-visible{outline:2px solid var(--blue-400);outline-offset:2px}.practice-report-icon{width:18px;height:18px}.practice-sentence-card{border:1px solid var(--gray-300);border-radius:14px;padding:clamp(1rem,3vw,1.25rem);display:flex;flex-direction:column;gap:.75rem;background:var(--white)}.practice-audio-section{display:flex;flex-direction:column;gap:.35rem;align-items:flex-end}.practice-audio-controls{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.5rem}.practice-audio-button{display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;padding:0;cursor:pointer}.practice-audio-button:disabled{cursor:not-allowed;opacity:.5}.practice-audio-button:focus-visible{outline:2px solid var(--blue-400);outline-offset:2px;border-radius:6px}.practice-audio-icon{width:44px;height:44px;display:block}.practice-audio-error{margin:0;font-size:.9rem;color:#b00020;font-weight:600}.practice-sentence,.practice-translation{margin:0;line-height:1.8;color:var(--blue-900)}.practice-whitespace{white-space:pre-wrap}.practice-word{display:inline;line-height:inherit;vertical-align:baseline}.practice-input{display:inline-flex;width:auto;min-width:110px;max-width:200px;padding:.3rem .5rem;font-size:1rem;line-height:1.4;border:1px solid var(--gray-400);border-radius:8px;background:var(--white)}.practice-blank{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:.35rem;max-width:100%}.practice-feedback{border-radius:10px;padding:.75rem .9rem;font-weight:700;color:var(--blue-900)}.practice-feedback-hint{margin-top:.4rem;font-weight:600}.practice-feedback.success{background:#e7f6ed;border:1px solid #c1e4cf;color:#0f5132}.practice-feedback.warning{background:#fff8e5;border:1px solid #ffe2a8;color:#8a5700}.practice-feedback.error{background:#fff0e4;border:1px solid #ffd7b5}.practice-word-translation{color:var(--gray-600);font-weight:600;font-size:.95rem}.practice-translation-wrapper{position:relative;display:inline-flex;align-items:baseline}.practice-translation-trigger{border:none;padding:0;background:none;color:inherit;font:inherit;cursor:pointer}.practice-translation-trigger:focus-visible{outline:2px solid var(--blue-400);outline-offset:2px;border-radius:6px}.practice-definition-tooltip{position:absolute;left:50%;top:calc(100% + .4rem);transform:translate(-50%);z-index:2;width:min(360px,calc(100vw - 3rem));min-width:220px;max-width:100%;padding:.5rem .6rem;border-radius:10px;border:1px solid var(--gray-300);background:var(--white);color:var(--blue-900);font-size:.9rem;font-weight:500;box-shadow:0 8px 18px #141e321f;white-space:normal}.practice-custom-hint{display:flex;flex-direction:column;gap:.5rem}.practice-custom-hint-title{margin:0;font-weight:700;color:var(--blue-900)}.practice-custom-hint-input{width:100%;padding:.6rem .75rem;font-size:1rem;border:1px solid var(--gray-400);border-radius:10px;background:var(--white)}.practice-report-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0b162c59;display:flex;align-items:center;justify-content:center;padding:1.5rem;z-index:10}.practice-report-dialog{width:min(420px,100%);background:var(--white);border:1px solid var(--gray-200);border-radius:16px;padding:1.25rem;box-shadow:0 18px 45px #0f1e372e;display:flex;flex-direction:column;gap:1rem}.practice-report-dialog h2{margin:0;font-size:1.2rem;color:var(--blue-900)}.practice-report-dialog .intensity-change-info{margin:.25rem 0 0;padding:.75rem;background:var(--gray-100);border-radius:8px;font-size:.95rem;color:var(--gray-700);text-align:center}.practice-report-options{display:flex;flex-direction:column;gap:.6rem}.practice-report-option{display:grid;grid-template-columns:auto 1fr;align-items:start;column-gap:.6rem;font-weight:600;color:var(--blue-900)}.practice-report-option input{width:16px;height:16px;margin-top:.15rem}.practice-report-success{border-radius:10px;padding:.75rem .9rem;font-weight:600;background:#e7f6ed;border:1px solid #c1e4cf;color:#0f5132}.study-reader-card{gap:1.25rem}.study-text-block{display:grid;gap:.75rem}.study-text-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem}.study-text-header h2{margin:0}.study-audio-controls{display:flex;flex-wrap:wrap;gap:.5rem}.study-audio-button{display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;padding:0;cursor:pointer}.study-audio-button:disabled{cursor:not-allowed;opacity:.5}.study-audio-button:focus-visible{outline:2px solid var(--blue-400);outline-offset:2px;border-radius:6px}.study-audio-icon{width:44px;height:44px;display:block}.study-audio-error{margin:0;font-size:.9rem;color:#b00020;font-weight:600}.study-text-content{display:block;color:var(--blue-900)}.study-text-flow{line-height:1.8;margin:0}.study-word{position:relative;display:inline-block;line-height:inherit;vertical-align:baseline}.study-word.selected{padding-top:1.1em}.study-word-original{padding:.05rem .15rem;background:transparent;color:inherit;font:inherit;line-height:1.6;border-radius:6px}.study-word.selectable .study-word-original{cursor:pointer;transition:background-color .15s ease,color .15s ease}.study-word.selectable .study-word-original:hover,.study-word.selectable .study-word-original:focus-visible{background:var(--blue-50);outline:none}.study-word.selected .study-word-original,.study-word.selected .study-word-original:hover,.study-word.selected .study-word-original:focus-visible{background:var(--blue-100)}.study-word.guest-hint .study-word-original,.study-word.guest-hint .study-word-original:hover,.study-word.guest-hint .study-word-original:focus-visible{background:#cde4ff80}.study-word.inert,.study-word.non-selectable{color:inherit}.study-word.inert{display:inline;line-height:inherit;vertical-align:baseline}.study-whitespace{white-space:pre-wrap}.study-word-translation{position:absolute;left:50%;top:0;transform:translate(-50%,.1rem);font-size:.75em;color:var(--blue-700);line-height:1;pointer-events:none;white-space:nowrap}:root{--blue-900: #01317d;--blue-700: #0043a8;--blue-600: #0066fd;--blue-400: #54a2fd;--blue-100: #cde4ff;--accent-100: #faeed9;--accent-300: #f7ca73;--accent-500: #fdab04;--accent-700: #884e04;--accent-900: #683d05;--green-600: #16a34a;--green-700: #15803d;--white: #ffffff;--gray-100: #f7f9fc;--gray-300: #e2e8f0;--gray-600: #475569;--app-background-color: var(--white);--app-background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' opacity='0.06'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"), linear-gradient(180deg, #ffffff 0%, #cde4ff 50%, #ffffff 100%);--app-background-repeat: repeat, no-repeat;--app-background-size: 180px 180px, cover;font-family:Poppins,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html,body{margin:0;padding:0;background-color:var(--app-background-color);background-image:var(--app-background-image);background-repeat:var(--app-background-repeat);background-size:var(--app-background-size);color:var(--blue-900);height:100%}#root{width:100%;height:100%;display:flex;flex-direction:column;align-items:stretch;box-sizing:border-box;background-color:transparent}h1,h2,h3,h4,h5,h6{margin:0 0 .75rem;font-weight:600;color:var(--blue-900)}h1{font-size:2.4rem;line-height:1.2}p{margin:0 0 1rem;color:var(--gray-600)}a{font-weight:500;color:var(--blue-600);text-decoration:none}a:hover{text-decoration:underline}input{width:100%;padding:.6rem .9rem;margin-bottom:.75rem;border-radius:8px;border:1px solid var(--gray-300);font-family:inherit;font-size:1rem;box-sizing:border-box}input:focus{outline:none;border-color:var(--blue-400);box-shadow:0 0 0 3px var(--blue-100)}button{border-radius:8px;border:none;padding:.6rem 1.2rem;font-size:1rem;font-weight:600;font-family:inherit;cursor:pointer;background-color:var(--blue-600);color:var(--white);box-shadow:0 3px 6px #0000001f;transition:background-color .2s ease,box-shadow .2s ease,transform .05s ease}button:hover{background-color:var(--blue-700);box-shadow:0 5px 12px #00000029}button:disabled,button[disabled]{background-color:var(--gray-300);color:var(--gray-600);cursor:not-allowed;opacity:.6;transform:none}button:active{transform:translateY(1px)}button:focus-visible{outline:3px solid var(--blue-400);outline-offset:2px}button.secondary{background-color:transparent;color:var(--blue-600)}button.secondary:hover{background-color:var(--blue-100)}button.success{background-color:var(--green-600)}button.success:hover{background-color:var(--green-700)}.container{width:min(100%,540px);margin:2.5rem auto;padding:clamp(1.5rem,4vw,2.5rem) clamp(1.25rem,5vw,2.5rem);box-sizing:border-box}.card{background-color:var(--white);border-radius:12px;padding:1.75rem clamp(1.5rem,5vw,2.25rem);box-shadow:0 8px 24px #0000000f;width:100%;box-sizing:border-box}.message{margin-top:1rem;padding:.75rem 1rem;border-radius:8px;background-color:var(--accent-100);color:var(--accent-900);font-weight:500}.error-message{margin-top:1rem;padding:.75rem 1rem;border-radius:8px;background-color:#ffe5e5;color:#b00020;font-weight:600;text-align:center;border:1px solid #f5c2c7}.success-message{margin-top:1rem;padding:.75rem 1rem;border-radius:8px;background-color:#e6f4ea;color:#1e7e34;font-weight:600;text-align:center;border:1px solid #c3e6cb}.button-secondary{background-color:transparent;color:var(--blue-600)}.button-secondary:hover{background-color:var(--blue-100)}.button-danger{background-color:var(--accent-700)}.button-danger:hover{background-color:var(--accent-900)}.form{display:grid;gap:.75rem}.form-actions{display:grid;gap:.5rem;margin-top:.5rem}.help-text{font-size:.95rem;color:var(--gray-600)}.input-error{border-color:#b00020!important}.field-error-text{margin-top:-.25rem;margin-bottom:.5rem;font-size:.85rem;color:#b00020}
