:root{color:#e7e5e4;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#111;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(circle at 0 0,#3a4b6159,#0000 34rem),linear-gradient(135deg,#111 0%,#18181b 48%,#101312 100%);min-width:320px;min-height:100vh;margin:0}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}.app-shell{width:min(1480px,100%);min-height:100vh;margin:0 auto;padding:16px}.home-shell{place-items:center;width:min(1080px,100%);display:grid}.brand,.panel{background:#18181be0;border:1px solid #2b2b2f;border-radius:12px;box-shadow:0 18px 50px #00000038}.brand{padding:18px}.brand-label{color:#fff;margin:0;font-size:28px;font-weight:800}.brand-text{color:#a8a29e;margin:6px 0 0;font-size:14px}.panel{padding:14px}.panel h1,.panel h2,.panel h3,.page-header h1{color:#fafaf9;margin:0}.panel h2{font-size:17px}.panel p{margin:0}.home-page{gap:18px;width:100%;display:grid}.auth-page{width:min(680px,100%);display:grid}.auth-card{gap:20px;padding:22px;display:grid}.auth-card h1{color:#fafaf9;margin:0;font-size:clamp(26px,4vw,40px);line-height:1.1}.auth-actions{flex-wrap:wrap;gap:10px;display:flex}.home-header{grid-template-columns:280px minmax(0,1fr);align-items:stretch;gap:18px;display:grid}.home-brand{align-content:center;display:grid}.account-summary{border-top:1px solid #2b2b2f;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-top:16px;padding-top:14px;display:flex}.account-name{color:#fafaf9;overflow-wrap:anywhere;margin:0 0 6px;font-size:13px;font-weight:800}.sync-badge{color:#d6d3d1;white-space:nowrap;background:#101010;border:1px solid #3f3f46;border-radius:999px;align-items:center;min-height:26px;padding:4px 8px;font-size:12px;font-weight:800;display:inline-flex}.sync-badge.local{color:#e7e5e4;background:#44403c66;border-color:#57534e}.sync-badge.loading,.sync-badge.saving{color:#fde68a;background:#713f1242;border-color:#854d0e}.sync-badge.saved{color:#bbf7d0;background:#14532d3d;border-color:#166534}.sync-badge.error{color:#fecaca;background:#450a0a8c;border-color:#7f1d1d}.home-header h1{color:#fafaf9;margin:0;font-size:clamp(30px,5vw,52px);line-height:1.05}.home-game-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;display:grid}.home-game-button{color:#d6d3d1;text-align:left;background:#111113;border:1px solid #323237;border-radius:12px;grid-template-columns:86px minmax(0,1fr);gap:8px 14px;width:100%;padding:18px;text-decoration:none;display:grid}.home-game-button:hover{color:#151515;background:#e7e5e4;border-color:#d6d3d1}.game-title{overflow-wrap:anywhere;align-self:end;font-weight:700}.game-description{color:inherit;opacity:.72;grid-column:2;font-size:13px}.game-action{color:inherit;grid-column:2;margin-top:12px;font-size:13px;font-weight:800}.game-card-art{aspect-ratio:24/34;object-fit:cover;background:#eee3d3;border:1px solid #fafaf924;border-radius:8px;grid-row:1/span 3;width:86px;display:block}.main-content,.page-stack{min-width:0}.page-stack{gap:14px;display:grid}.page-header{background:#18181be0;border:1px solid #2b2b2f;border-radius:12px;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px;padding:14px;display:grid}.eyebrow{color:#a8a29e;margin:0 0 8px;font-size:13px;font-weight:700}.page-header h1{overflow-wrap:anywhere;font-size:clamp(22px,3vw,32px);line-height:1.05}.study-title{align-items:center;gap:12px;min-width:0;display:flex}.study-title-copy{min-width:0}.study-game-art{aspect-ratio:24/34;object-fit:cover;background:#eee3d3;border:1px solid #3f3f46;border-radius:6px;flex:none;width:44px}.page-description{color:#a8a29e;max-width:680px;margin:12px 0 0;line-height:1.7}.page-header-side{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px;display:flex}.notice-panel{line-height:1.5}.notice-panel.error{color:#fee2e2;background:#450a0ab8;border-color:#7f1d1d}.study-layout{grid-template-columns:minmax(0,1fr);align-items:start;gap:14px;display:grid}.study-main{gap:14px;min-width:0;display:grid}.study-main-grid{grid-template-columns:minmax(180px,240px) minmax(0,1fr);align-items:start;gap:14px;display:grid}.left-column,.right-column{gap:14px;display:grid}.word-panel{z-index:18;grid-template-columns:1fr;align-items:start;gap:8px;width:min(240px,100vw - 32px);max-height:calc(100vh - 32px);display:grid;position:fixed;top:50%;right:16px;overflow:auto;transform:translateY(-50%)}.word-panel-heading{justify-content:space-between;align-items:flex-start;gap:10px;display:flex}.word-panel-heading h2{color:#fafaf9;margin:0;font-size:15px}.word-panel-content{gap:6px;min-width:0;display:grid}.word-edit-button{width:100%}.word-entry-list{scrollbar-color:#57534e #18181b;scrollbar-width:thin;gap:3px;max-height:min(680px,100vh - 140px);padding-right:3px;display:grid;overflow:auto}.word-entry-list::-webkit-scrollbar{width:8px}.word-entry-list::-webkit-scrollbar-track{background:#18181b}.word-entry-list::-webkit-scrollbar-thumb{background:#57534e;border:2px solid #18181b;border-radius:999px}.word-entry{color:#d6d3d1;overflow-wrap:anywhere;margin:0;font-size:13px;line-height:1.35}.word-entry strong{color:#fafaf9;font-weight:800}.story-drawer-layer{z-index:34;background:#00000061;justify-content:flex-end;display:flex;position:fixed;inset:0}.story-drawer-panel{background:#18181b;border:1px solid #3f3f46;border-radius:12px;grid-template-rows:auto minmax(0,1fr);gap:12px;width:min(420px,100vw - 28px);min-height:0;max-height:calc(100vh - 32px);margin:16px;padding:14px;animation:.16s ease-out slide-drawer-in;display:grid;box-shadow:0 24px 80px #00000085}.drawer-form{grid-row:1/-1;grid-template-rows:auto minmax(0,1fr) auto;gap:12px;height:100%;min-height:0;display:grid}.drawer-form .panel-heading{margin-bottom:0}.story-drawer-panel textarea{color:#fafaf9;resize:none;background:#0f0f10;border:1px solid #3f3f46;border-radius:9px;outline:none;width:100%;min-height:min(460px,100vh - 160px);padding:9px 10px}.story-drawer-panel textarea:focus{border-color:#d6d3d1}@keyframes slide-drawer-in{0%{transform:translate(100%)}to{transform:translate(0)}}.panel-heading{justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px;display:flex}.panel-heading p{color:#a8a29e;margin-top:5px;font-size:13px;line-height:1.5}.small-badge{color:#d6d3d1;background:#292524;border-radius:999px;align-items:center;padding:5px 9px;font-size:12px;font-weight:700;display:inline-flex}.field{gap:6px;margin-bottom:10px;display:grid}.field span,.card-label{color:#a8a29e;font-size:13px;font-weight:700}.field input,.field select,.field textarea{color:#fafaf9;background:#0f0f10;border:1px solid #3f3f46;border-radius:9px;outline:none;width:100%;padding:9px 10px}.field textarea{resize:vertical}.field input:focus,.field select:focus,.field textarea:focus{border-color:#d6d3d1}.mission-list{gap:8px;display:grid}.mission-check,.practice-check{color:#d6d3d1;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:10px;display:flex}.mission-check{background:#101010;border:1px solid #2b2b2f;border-radius:10px;padding:8px 9px;font-size:13px}.toggle-input{opacity:0;pointer-events:none;width:1px;height:1px;margin:0;position:absolute}.toggle-track{background:#27272a;border:1px solid #3f3f46;border-radius:999px;flex:none;width:42px;height:24px;transition:background .14s,border-color .14s,box-shadow .14s;position:relative;box-shadow:inset 0 1px 2px #00000047}.toggle-track:after{content:"";background:#a8a29e;border-radius:999px;width:18px;height:18px;transition:background .14s,transform .14s;position:absolute;top:2px;left:2px;box-shadow:0 2px 7px #00000052}.mission-check:hover .toggle-track,.practice-check:hover .toggle-track{border-color:#d6d3d1}.toggle-input:checked+.toggle-track{background:#e7e5e4;border-color:#e7e5e4}.toggle-input:checked+.toggle-track:after{background:#151515;transform:translate(18px)}.toggle-input:focus-visible+.toggle-track{outline-offset:2px;outline:2px solid #d6d3d1}.toggle-copy{min-width:0;line-height:1.35}.sentence-form{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.sentence-form .field{margin-bottom:0}.full-width,.button-row{grid-column:1/-1}.button-row{flex-wrap:wrap;justify-content:flex-end;gap:10px;display:flex}.button{color:#fafaf9;background:#292524;border:1px solid #3f3f46;border-radius:9px;padding:9px 12px;font-weight:700}.button:hover{border-color:#d6d3d1}.button.primary{color:#151515;background:#e7e5e4}.button.secondary{background:#161616}.button.danger{color:#fee2e2;background:#450a0a;border-color:#7f1d1d}.button.small{padding:6px 9px;font-size:13px}.header-logout-button{white-space:nowrap;justify-content:center;align-items:center;height:38px;padding:0 12px;font-size:13px;line-height:1;display:inline-flex}.icon-button{place-items:center;width:38px;min-width:38px;height:38px;padding:0;font-size:18px;line-height:1;display:inline-grid}.list-tools{flex-wrap:wrap;flex:320px;justify-content:flex-end;gap:8px;display:flex}.sentence-list{gap:8px;display:grid}.sentence-card{background:#101010;border:1px solid #323237;border-radius:10px;padding:9px}.sentence-card.done{background:#14532d38;border-color:#166534}.sentence-top{grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:8px;display:grid}.sentence-copy{grid-template-columns:28px minmax(0,1fr);align-items:start;gap:8px;min-width:0;display:grid}.sentence-text{min-width:0}.sentence-top h3{overflow-wrap:anywhere;margin:2px 0 0;font-size:15px;line-height:1.3}.meaning{color:#a8a29e;margin-top:3px;font-size:13px;line-height:1.35}.sentence-card-tools{align-items:center;gap:6px;display:flex}.sentence-icon-action{color:#d6d3d1;background:#18181b;border:1px solid #3f3f46;border-radius:8px;place-items:center;width:28px;height:28px;padding:0;line-height:1;display:inline-grid}.sentence-icon-action:hover{color:#fafaf9;border-color:#d6d3d1}.sentence-icon-action.danger{color:#fecaca;border-color:#5f1b1b}.sentence-icon-action.danger:hover{background:#450a0a;border-color:#fecaca}.sentence-icon-action svg{width:15px;height:15px;display:block}.practice-check{white-space:nowrap;gap:7px;font-size:12px}.practice-check .toggle-track{width:34px;height:20px}.practice-check .toggle-track:after{width:14px;height:14px}.practice-check .toggle-input:checked+.toggle-track:after{transform:translate(14px)}.sentence-body{background:#27272ab8;border-radius:9px;margin-top:7px;padding:7px 8px}.sentence-body p:last-child{color:#e7e5e4;margin-top:3px;font-size:14px;line-height:1.35}.empty-message{color:#a8a29e;text-align:center;border:1px dashed #3f3f46;border-radius:12px;padding:18px}.family-tree-float{z-index:15;color:#fafaf9;text-align:left;background:#0f0f10f0;border:1px solid #3f3f46;border-radius:10px;gap:6px;width:176px;padding:8px;display:grid;position:fixed;bottom:16px;right:16px;box-shadow:0 18px 45px #0000006b}.family-tree-float:hover{border-color:#d6d3d1}.family-tree-float span{color:#d6d3d1;font-size:12px;font-weight:800}.family-tree-thumb{aspect-ratio:16/10;object-fit:cover;background:#0f0f10;border-radius:7px;width:100%;display:block}.reference-backdrop{z-index:30;background:#000000b8;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.reference-modal{background:#18181b;border:1px solid #3f3f46;border-radius:14px;gap:14px;width:min(1120px,100%);max-height:92vh;padding:16px;display:grid;box-shadow:0 24px 80px #0000008c}.reference-header{justify-content:space-between;align-items:flex-start;gap:14px;display:flex}.reference-header h2{color:#fafaf9;margin:0;font-size:22px}.reference-image-wrap{background:#0f0f10;border-radius:10px;place-items:center;min-height:0;display:grid;overflow:auto}.family-tree-large{object-fit:contain;width:100%;max-height:calc(92vh - 110px);display:block}.family-tree-missing{color:#a8a29e;text-align:center;border:1px dashed #57534e;place-items:center;display:grid}.family-tree-missing span{max-width:16rem;padding:12px;font-size:12px;font-weight:800}.modal-backdrop{z-index:20;background:#000000ad;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.modal-card{background:#18181b;border:1px solid #3f3f46;border-radius:16px;width:min(720px,100%);max-height:min(780px,90vh);padding:22px;overflow:auto;box-shadow:0 24px 80px #00000080}.modal-header{justify-content:space-between;align-items:flex-start;gap:16px;display:flex}.modal-header h2{color:#fafaf9;margin:0;font-size:22px}.modal-description{color:#c7c2bd;margin:14px 0 0;line-height:1.7}.stats-list{gap:10px;margin-top:16px;display:grid}.stat-row{background:#101010;border:1px solid #2b2b2f;border-radius:10px;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px;padding:12px;display:grid}.stat-row h3{color:#fafaf9;margin:0;font-size:15px}.stat-row p{color:#a8a29e;margin:5px 0 0;font-size:13px;line-height:1.45}.stat-row strong{color:#fafaf9;white-space:nowrap;font-size:24px}.modal-section{margin-top:22px}.modal-section h3{color:#fafaf9;margin:0 0 10px;font-size:16px}.modal-section ol,.modal-section ul{color:#d6d3d1;margin:0;line-height:1.7}.guide-step-list{gap:16px;padding-left:22px;display:grid}.guide-step h4{color:#fafaf9;margin:0 0 7px;font-size:15px}.guide-step ul{padding-left:18px}.guide-example{background:#101010;border:1px solid #2b2b2f;border-radius:12px;gap:6px;margin-top:10px;padding:12px;display:grid}.guide-example p{color:#e7e5e4;margin:0;line-height:1.5}.guide-example span{color:#a8a29e;min-width:72px;font-size:12px;font-weight:700;display:inline-block}.tip-list{gap:8px;display:grid}.tip-list p{color:#c7c2bd;border-left:3px solid #78716c;margin:0;padding-left:10px;line-height:1.55}@media (width>=1181px){.study-page{padding-right:260px}}@media (width<=1180px){.word-panel{width:auto;max-height:none;position:static;overflow:visible;transform:none}}@media (width<=980px){.home-header,.study-layout,.study-main-grid,.page-header,.word-panel{grid-template-columns:1fr}.study-page{padding-right:0}.page-header-side{justify-content:flex-start}}@media (width<=640px){.app-shell{padding:12px}.page-header,.panel,.brand{padding:14px}.sentence-form,.sentence-top{grid-template-columns:1fr}.sentence-card-tools{justify-content:flex-start}.list-tools,.button-row{justify-content:stretch}.button-row .button,.auth-actions .button{flex:auto}.account-summary{align-items:stretch}.family-tree-float{width:128px;bottom:12px;right:12px}.reference-backdrop,.reference-modal{padding:12px}.home-game-button{grid-template-columns:70px minmax(0,1fr)}.game-card-art{width:70px}.modal-backdrop{align-items:end;padding:12px}.modal-card{max-height:88vh;padding:16px}.modal-header{flex-direction:column;align-items:stretch}}