/* Generated by scripts/build-ui-styles.js; edit the individual legacy sources. */ @layer legacy { /* style.css */ :root{color-scheme:light;--ink:#1d2824;--muted:#7a847d;--paper:#f5f6f2;--card:#fff;--line:#e7eae4;--green:#306951;--green-dark:#245640;--mint:#edf5ef;--gold:#c69b59;--serif:Georgia,'Times New Roman',serif;--sans:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;--mono:ui-monospace,SFMono-Regular,Menlo,monospace}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:14px var(--sans);-webkit-font-smoothing:antialiased}button,input,textarea,select{font:inherit}button{cursor:pointer}.app-shell{min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:224px;background:#fff;border-right:1px solid var(--line);padding:26px 18px 18px;display:flex;flex-direction:column;z-index:5}.brand{display:flex;align-items:center;gap:10px;margin:0 0 49px 5px;color:var(--ink);text-decoration:none;font-size:16px;font-weight:700;letter-spacing:-.5px}.brand-mark{width:31px;height:31px;border-radius:9px;display:grid;place-items:center;color:white;background:var(--green);font:21px var(--serif)}.nav-caption,.eyebrow{font:10px var(--mono);letter-spacing:1.2px;color:#89928b}.nav-caption{padding:0 12px;margin-bottom:11px}.primary-nav{display:grid;gap:5px}.nav-link{height:42px;padding:0 12px;display:flex;align-items:center;gap:13px;color:#747f77;text-decoration:none;border-radius:7px;font-size:12px;transition:background .18s,color .18s}.nav-link>span{width:17px;text-align:center;color:#9aa39c;font-size:17px}.nav-link:hover{background:#f6f8f5;color:var(--ink)}.nav-link.active{background:var(--mint);color:var(--green);font-weight:600}.nav-link.active>span{color:var(--green)}.sidebar-bottom{margin-top:auto;border-top:1px solid var(--line);padding:20px 10px 0;position:relative}.sidebar-leaf{font-size:19px;color:var(--gold)}.sidebar-bottom p{font:16px/1.5 var(--serif);margin:8px 0 20px}.sidebar-bottom p strong{color:var(--green)}.sidebar-version{font:9px var(--mono);letter-spacing:.8px;color:#a1a9a2}.app-main{margin-left:224px;min-height:100vh;display:flex;flex-direction:column}.topbar{height:64px;padding:0 39px;border-bottom:1px solid var(--line);background:#ffffffbd;display:flex;align-items:center;justify-content:space-between}.breadcrumb{font:9px var(--mono);letter-spacing:1px;color:#8b958d}.breadcrumb span{padding:0 10px;color:#c2c8c1}.breadcrumb strong{color:#44534a;font-weight:500}.topbar-right{display:flex;align-items:center;gap:13px}.sync-state{font-size:10px;color:#929c94}.avatar{border:0;width:30px;height:30px;border-radius:50%;background:#e8f0e9;color:var(--green);font:600 12px var(--serif)}.mobile-menu{display:none;background:none;border:0;font-size:18px;color:var(--green)}.content{width:min(1060px,100%);margin:0 auto;padding:38px 44px 45px;flex:1}.page{display:none;animation:enter .25s ease}.page.active{display:block}.welcome-row,.page-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:26px}.eyebrow{display:flex;align-items:center;gap:9px}.eyebrow-line{width:20px;height:1px;background:#8ca493}h1{font:600 clamp(34px,4vw,46px)/1.13 var(--serif);letter-spacing:-1px;margin:14px 0 9px}h1 em{font-weight:600;color:var(--green)}.lede{font-size:13px;color:var(--muted);margin:0;line-height:1.6}.date-card{width:87px;height:88px;flex:none;background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px;display:flex;flex-direction:column;justify-content:space-between}.date-card span{font-size:14px;color:var(--gold)}.date-card small{font:9px var(--mono);color:#969f98;letter-spacing:.8px}.date-card strong{font:18px var(--serif)}.home-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(238px,.78fr);gap:17px}.feature-card{border-radius:13px;background:#274f3e;color:#fff;min-height:350px;padding:20px 22px 17px;display:flex;flex-direction:column;position:relative;overflow:hidden}.feature-card:after{content:'w';position:absolute;right:-6px;bottom:10px;color:#ffffff08;font:240px/.8 var(--serif);pointer-events:none}.feature-top{display:flex;justify-content:space-between;align-items:center}.pill{font:9px var(--mono);letter-spacing:.65px;color:#d1e2d5;display:flex;align-items:center;gap:7px}.pill i{width:6px;height:6px;border-radius:50%;background:#c1d9a2}.feature-mark{font:italic 31px var(--serif);color:#c7d6ad}.feature-copy{margin:auto 0;position:relative;z-index:1}.feature-copy .eyebrow{color:#c0d3c3;font-size:9px}.feature-copy h2{font:600 28px/1.17 var(--serif);margin:13px 0 10px}.feature-copy p{max-width:345px;color:#d1ded5;font-size:11px;line-height:1.7;margin:0 0 20px}.button{border:0;border-radius:7px;padding:11px 15px;font:600 11px var(--sans);transition:transform .18s,background .18s,box-shadow .18s}.button:hover{transform:translateY(-1px)}.button-primary{background:var(--green);color:white;box-shadow:0 3px 8px #30695120}.button-primary:hover{background:var(--green-dark)}.feature-card .button-primary{background:#fff;color:var(--green)}.feature-card .button-primary:hover{background:#eef5ef}.button span{margin-left:11px;font-size:15px}.feature-foot{position:relative;z-index:1;display:flex;justify-content:space-between;color:#aec5b4;font:9px var(--mono)}.home-side{display:grid;gap:14px}.mini-stat-card,.panel,.metric-card,.practice-card,.practice-aside>div,.daily-card{background:var(--card);border:1px solid var(--line);border-radius:11px}.mini-stat-card{padding:16px 17px}.mini-stat-top{display:flex;justify-content:space-between;align-items:center;font:9px var(--mono);letter-spacing:.8px;color:#849088}.mini-icon{display:grid;place-items:center;border-radius:6px;background:#eef1f7;color:#7986ad;width:24px;height:24px;font-size:12px}.mini-icon.green{background:#eaf4ed;color:#528262}.big-stat{display:flex;align-items:baseline;gap:9px;margin:8px 0}.big-stat strong{font:600 30px var(--serif)}.big-stat span{font-size:10px;color:#909991}.week-dots{display:flex;gap:6px;margin:10px 0}.week-dot{width:17px;height:17px;border-radius:50%;background:#f0f2ed;display:grid;place-items:center;color:#b4bbb5;font-size:8px}.week-dot.done{background:#dcebe0;color:var(--green)}.muted{font-size:10px;color:#9aa29b;line-height:1.5;margin:8px 0 0}.learned-bar,.metric-track,.session-track{height:5px;background:#edf0eb;border-radius:7px;overflow:hidden}.learned-bar span,.metric-track i,.session-track i{display:block;height:100%;width:0;background:#81a88b;border-radius:7px;transition:width .35s}.learned-card .muted{margin-top:10px}.daily-card{display:flex;align-items:center;gap:15px;margin-top:17px;padding:17px 20px}.daily-icon{width:37px;height:37px;background:#fbf4e9;color:#c19752;border-radius:9px;display:grid;place-items:center;font-size:19px;flex:none}.daily-body{flex:1}.daily-body .eyebrow{font-size:9px}.daily-body h3{font:600 18px var(--serif);margin:6px 0 3px;text-transform:capitalize}.daily-body p{font-size:10px;color:#929c94;margin:0}.text-button{border:0;background:none;color:var(--green);font:600 10px var(--sans);padding:8px 0}.text-button:hover{text-decoration:underline;text-underline-offset:3px}.practice-round,.collection-count{font:9px var(--mono);letter-spacing:1px;color:#8c958e}.collection-count{padding:9px 12px;background:#fff;border:1px solid var(--line);border-radius:7px}.collection-count strong{color:var(--green);font-size:13px;margin-right:4px}.practice-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(220px,.7fr);gap:17px}.practice-card{padding:22px 25px 23px;min-height:420px}.practice-meta{display:flex;justify-content:space-between;align-items:center}.part-label{color:#8d988f;font:italic 12px var(--serif)}.difficulty{display:flex;gap:7px;align-items:center;font:9px var(--mono);letter-spacing:.6px;color:#7e8981}.difficulty i{width:7px;height:7px;border-radius:50%;background:#d1a55f}.word-wrap{text-align:center;padding:44px 0 32px}.word-wrap h2{font:700 clamp(49px,6vw,68px)/1 var(--serif);letter-spacing:2px;margin:0 0 17px;text-transform:uppercase;animation:enter .3s ease}.word-rule{display:flex;justify-content:center;gap:5px}.word-rule i{width:3px;height:3px;border-radius:50%;background:#c1cbc2}.word-rule i:nth-child(2){width:20px;border-radius:4px;background:var(--green)}#answer-form label,.auth-card form label{display:block;margin:0 0 8px;font-size:11px;font-weight:600}textarea,.auth-card input,.search-box input,.vocab-tools select{width:100%;outline:0;border:1px solid #e3e7e1;border-radius:7px;background:#fcfcfa;padding:12px 13px;color:var(--ink);transition:border .18s,box-shadow .18s}textarea{resize:vertical;min-height:84px;font:12px/1.55 var(--sans)}textarea:focus,.auth-card input:focus,.search-box:focus-within,.vocab-tools select:focus{border-color:#8eac98;box-shadow:0 0 0 3px #30695112}.form-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:12px}.keyboard-hint{color:#9ba49c;font-size:9px}kbd{font:9px var(--mono);border:1px solid #e1e5df;border-radius:4px;padding:3px 5px;background:#fafbf8}.button-next{width:100%;margin-top:13px;background:#eff4ef;color:var(--green)}.button-next:hover{background:#e5efe7}.result{margin-top:17px;padding:13px 15px;border-radius:8px;background:#f4f7f4;animation:enter .25s ease}.result-heading{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700}.result-heading .mark{width:19px;height:19px;display:grid;place-items:center;border-radius:50%;background:#e2efe5;color:var(--green)}.result[data-grade=partial] .mark{background:#fff0da;color:#a86a14}.result[data-grade=incorrect] .mark{background:#f9e7e4;color:#aa4d40}.actual-label{font:9px var(--mono);letter-spacing:.8px;color:#89948c;margin-top:10px}.actual-definition{font-weight:600;font-size:12px;line-height:1.5;margin:4px 0}.example{font:italic 12px/1.5 var(--serif);color:#6f7972;margin:3px 0 0}.practice-aside{display:grid;align-content:start;gap:14px}.aside-note,.aside-progress{padding:19px}.aside-note>span{font-size:18px;color:var(--gold)}.aside-note h3{font:600 19px/1.3 var(--serif);margin:12px 0 7px}.aside-note p{font-size:11px;line-height:1.7;color:#879189;margin:0}.aside-progress>div:nth-child(2){margin:15px 0 10px;color:#8f9991;font-size:10px}.aside-progress>div:nth-child(2) strong{font:25px var(--serif);color:var(--ink)}.session-track{margin-bottom:11px}.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.metric-card{min-height:129px;padding:17px;position:relative;overflow:hidden}.metric-highlight{background:#2e6249;color:white;border-color:#2e6249}.metric-label{display:block;font:9px var(--mono);letter-spacing:.65px;color:#8a958d}.metric-highlight .metric-label,.metric-highlight .metric-note{color:#cfddd2}.metric-card>strong{display:block;font:600 30px var(--serif);margin:13px 0 2px}.metric-card>strong small{font:12px var(--sans);color:#939c95;margin-left:2px}.metric-note{font-size:10px;color:#98a19a}.metric-symbol{position:absolute;right:14px;top:13px;color:#ffffff64;font-size:18px}.metric-track{margin-top:10px}.progress-columns{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:15px}.panel{padding:18px 20px}.panel-heading{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:16px}.panel-heading .eyebrow{font-size:9px}.panel-heading h2{font:600 18px var(--serif);margin:7px 0 0}.panel-spark{color:var(--gold);font-size:17px}.breakdown-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-top:1px solid #eff1ed;font-size:11px;color:#69756d}.breakdown-row>span{display:flex;align-items:center;gap:9px}.breakdown-row strong{color:var(--ink)}.grade-dot{width:7px;height:7px;border-radius:50%}.correct-dot{background:#72a480}.partial-dot{background:#d5a24f}.incorrect-dot{background:#c77a6e}.review-count{border-radius:50%;background:#f4f5f1;min-width:25px;height:25px;display:grid;place-items:center;color:#78837b;font:10px var(--mono)}.review-list{margin:-4px 0 8px}.review-item{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #eff1ed;font-size:11px;text-transform:capitalize}.review-item span:last-child{color:#929b94;font-size:10px}.empty-state{font-size:11px;line-height:1.6;color:#9aa29b}.activity-panel{margin-top:14px}.activity-list{display:grid}.activity-item{display:grid;grid-template-columns:29px 1fr auto;gap:10px;align-items:center;padding:9px 0;border-top:1px solid #eff1ed}.activity-symbol{width:27px;height:27px;border-radius:7px;display:grid;place-items:center;background:#eaf3ed;color:#568364}.activity-symbol.partial{background:#fff2df;color:#b77c2d}.activity-symbol.incorrect{background:#f9e9e6;color:#b15e50}.activity-word{font-size:11px;font-weight:600;text-transform:capitalize}.activity-sub{font-size:9px;color:#9aa29b;margin-top:2px}.activity-grade{font-size:9px;color:#829087}.vocab-tools{display:flex;gap:9px;margin-bottom:14px}.search-box{height:38px;border:1px solid var(--line);border-radius:7px;background:white;display:flex;align-items:center;gap:8px;padding:0 11px;flex:1;color:#97a099}.search-box>span{font-size:19px}.search-box input{border:0!important;box-shadow:none!important;background:transparent;padding:0;font-size:11px}.vocab-tools select{width:auto;min-width:142px;padding:0 10px;background:white;font-size:10px;color:#738077}.vocab-list{display:grid;gap:9px}.empty-card{border:1px dashed #dce3dc;border-radius:10px;padding:40px 20px;text-align:center;background:#ffffffa8}.empty-card>span{font-size:23px;color:#8aa28d}.empty-card h3{font:600 20px var(--serif);margin:10px 0 5px}.empty-card p{font-size:11px;color:#8f9991;margin:0 auto 16px}.word-row{display:grid;grid-template-columns:minmax(120px,.8fr) 2fr auto auto;gap:13px;align-items:center;padding:15px 17px;border-radius:9px;background:#fff;border:1px solid var(--line);cursor:pointer;transition:border .17s,transform .17s}.word-row:hover{border-color:#b6c9ba;transform:translateY(-1px)}.word-row-name{font:600 16px var(--serif);text-transform:capitalize}.word-row-pos{font:italic 10px var(--serif);color:#99a19a;margin-top:4px}.word-row-def{font-size:10px;color:#717d74;line-height:1.5}.difficulty-tag,.status-tag{padding:5px 7px;border-radius:5px;font:8px var(--mono);letter-spacing:.3px;white-space:nowrap}.difficulty-tag{background:#f4f4ef;color:#788178}.status-tag.mastered{background:#e9f3eb;color:#50805f}.status-tag.learning{background:#eef1f7;color:#6979a0}.status-tag.review{background:#fbf0e3;color:#a47432}.detail-backdrop{position:fixed;inset:0;z-index:20;background:#17251f66;display:grid;place-items:center;padding:20px}.detail-card{width:min(480px,100%);padding:28px;background:#fff;border-radius:13px;position:relative;box-shadow:0 18px 60px #19231e30;animation:enter .2s ease}.close-button{position:absolute;right:15px;top:13px;border:0;background:#f2f4f0;border-radius:50%;width:28px;height:28px;font-size:19px;color:#738078}.detail-card h2{font:700 34px var(--serif);text-transform:capitalize;margin:9px 0 5px}.detail-difficulty{display:inline-block;color:#9a835b;font:9px var(--mono);margin-bottom:22px}.detail-card .eyebrow{font-size:9px;margin-top:15px}.detail-card>p{font:13px/1.6 var(--sans);margin:7px 0;color:#39463e}.detail-example{font:italic 14px/1.6 var(--serif)!important;color:#718076!important}.synonym-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.synonym-list span{padding:5px 8px;background:#f0f4ef;color:#4f6b57;border-radius:5px;font-size:10px}.profile-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:15px}.profile-card{text-align:center;padding:26px 20px}.profile-avatar{margin:0 auto 12px;width:55px;height:55px;background:#e8f0e9;color:var(--green);border-radius:50%;display:grid;place-items:center;font:24px var(--serif)}.profile-card .eyebrow{justify-content:center;font-size:9px}.profile-card h2{font:600 22px var(--serif);margin:9px 0 3px}.profile-stats{display:flex;justify-content:space-around;padding:17px 0;margin:19px 0 0;border-top:1px solid var(--line)}.profile-stats div{display:grid;gap:5px}.profile-stats strong{font:20px var(--serif)}.profile-stats span{font-size:9px;color:#909a92}.button-secondary{background:#f1f4ef;color:var(--green)}.auth-card{padding:21px 23px}.auth-tabs{display:flex;gap:15px;border-bottom:1px solid var(--line);margin-bottom:20px}.auth-tab{border:0;background:none;padding:0 0 10px;color:#929c94;font-size:11px}.auth-tab.active{color:var(--green);font-weight:700;border-bottom:2px solid var(--green)}.auth-card form h2{font:600 21px var(--serif);margin:0 0 5px}.auth-card form>p{margin:0 0 18px}.auth-card form label{margin-top:12px;font-size:10px}.auth-card input{padding:10px 11px;font-size:11px}.auth-submit{margin-top:16px;width:100%}.auth-message{min-height:17px!important;margin:9px 0 0!important;color:#7d896f;font-size:10px!important}.auth-message.error{color:#b35345}.privacy-note{display:flex;gap:9px;align-items:flex-start;background:#f5f7f3;border-radius:7px;padding:11px;margin-top:18px;color:#839087}.privacy-note span{color:#668770}.privacy-note p{font-size:9px;line-height:1.6;margin:0}.app-footer{display:flex;justify-content:space-between;padding:17px 44px 20px;border-top:1px solid #e9ece6;color:#a0a79f;font:8px var(--mono);letter-spacing:.8px}.app-footer span:first-child{color:#6f7e73}.mobile-nav-backdrop{display:none}[hidden]{display:none!important}@keyframes enter{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}} @media(max-width:1000px){.content{padding:32px 28px 38px}.topbar{padding:0 28px}.app-footer{padding-left:28px;padding-right:28px}.metric-grid{grid-template-columns:repeat(2,1fr)}.word-row{grid-template-columns:minmax(100px,.75fr) 2fr auto}.word-row .difficulty-tag{display:none}} @media(max-width:740px){.sidebar{width:235px;transform:translateX(-100%);transition:transform .22s ease;box-shadow:8px 0 25px #20332712}.sidebar.open{transform:translateX(0)}.mobile-menu{display:block}.app-main{margin-left:0}.topbar{height:57px;padding:0 16px;gap:12px}.breadcrumb{font-size:8px;flex:1}.breadcrumb span{padding:0 5px}.sync-state{display:none}.content{padding:27px 18px 34px}.app-footer{padding:15px 18px}.welcome-row,.page-heading{align-items:flex-start}.date-card{width:72px;height:78px}.home-grid{grid-template-columns:1fr}.feature-card{min-height:315px}.home-side{grid-template-columns:1fr 1fr}.practice-layout{grid-template-columns:1fr}.practice-aside{grid-template-columns:1fr 1fr}.practice-card{min-height:0}.word-wrap{padding:34px 0 27px}.progress-columns{grid-template-columns:1fr}.profile-grid{grid-template-columns:1fr}.profile-card{padding:22px}.app-footer span:last-child{text-align:right}} @media(max-width:480px){.content{padding:23px 14px 30px}h1{font-size:34px}.lede{font-size:11px}.topbar{padding:0 12px}.home-side{grid-template-columns:1fr}.mini-stat-card{padding:14px 16px}.feature-card{padding:17px 18px;min-height:300px}.feature-copy h2{font-size:25px}.daily-card{padding:14px;gap:10px}.daily-body h3{font-size:16px}.practice-aside{grid-template-columns:1fr}.practice-card{padding:18px 16px}.word-wrap h2{font-size:50px}.form-bottom{gap:8px}.keyboard-hint{font-size:8px}.button-primary{padding:10px 12px}.metric-grid{gap:8px}.metric-card{min-height:112px;padding:13px}.metric-card>strong{font-size:25px}.vocab-tools{flex-wrap:wrap}.search-box{flex-basis:100%}.vocab-tools select{flex:1;min-width:0;height:36px}.word-row{grid-template-columns:1fr auto;gap:7px 9px;padding:13px}.word-row-name{font-size:15px}.word-row-def{grid-column:1/-1;grid-row:2}.word-row .status-tag{grid-column:2;grid-row:1}.app-footer{font-size:7px;gap:12px}.app-footer span:last-child{max-width:52%}} /* Appearance controls share one root state so more preferences can be added centrally. */ html[data-theme="dark"]{color-scheme:dark;--ink:#edf3ee;--muted:#aab6ad;--paper:#151d19;--card:#202a24;--line:#354139;--green:#8fc39e;--green-dark:#abd3b5;--mint:#293b30;--gold:#d4ae70} html[data-theme="dark"] .sidebar,html[data-theme="dark"] .date-card,html[data-theme="dark"] .collection-count,html[data-theme="dark"] .word-row,html[data-theme="dark"] .auth-card input,html[data-theme="dark"] .search-box,html[data-theme="dark"] .vocab-tools select{background:var(--card);color:var(--ink)} html[data-theme="dark"] .topbar{background:#202a24e8} html[data-theme="dark"] .nav-link:hover,html[data-theme="dark"] .empty-card,html[data-theme="dark"] .privacy-note,html[data-theme="dark"] .aside-note,html[data-theme="dark"] .aside-progress{background:#26322b;color:var(--ink)} html[data-theme="dark"] textarea,html[data-theme="dark"] .auth-card input{background:#19221c;color:var(--ink);border-color:#3b4a40} html[data-theme="dark"] .week-dot,html[data-theme="dark"] .review-count,html[data-theme="dark"] .close-button{background:#303c34;color:#c4d0c7} html[data-theme="dark"] .result{background:#26332a} html[data-theme="dark"] .word-row-def,html[data-theme="dark"] .muted,html[data-theme="dark"] .lede,html[data-theme="dark"] .daily-body p{color:#aebbb1} html[data-theme="dark"] .difficulty-tag{background:#303b33;color:#c5d0c7} html[data-theme="dark"] .profile-avatar,html[data-theme="dark"] .avatar{background:#34483a;color:#e3f0e5} html[data-theme="dark"] .app-footer{border-color:var(--line);color:#aebbb1} html[data-theme="dark"] .avatar-choice{background:#29352d;border-color:#46564a;color:var(--ink)} html[data-theme="dark"] .avatar-choice.selected{border-color:#95c29e;background:#304536} html[data-text-size="small"] .content{font-size:13px} html[data-text-size="small"] .lede,html[data-text-size="small"] .feature-copy p,html[data-text-size="small"] .aside-note p{font-size:11px} html[data-text-size="large"] .content{font-size:16px} html[data-text-size="large"] .lede{font-size:15px} html[data-text-size="large"] .nav-link,html[data-text-size="large"] .button,html[data-text-size="large"] #answer-form label,html[data-text-size="large"] .feature-copy p,html[data-text-size="large"] .aside-note p{font-size:14px} html[data-word-size="small"] .word-wrap h2{font-size:clamp(42px,5vw,52px)} html[data-word-size="large"] .word-wrap h2{font-size:clamp(62px,8vw,82px)} .difficulty-note{font-size:10px;color:#849088;line-height:1.6;margin:13px 0 0} .vocab-difficulty-note{margin:-11px 0 12px} .result-groups{margin-top:14px} .result-group-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px} .result-group-grid>section{min-width:0} .result-group-grid h3{display:flex;gap:8px;align-items:center;margin:0 0 9px;font-size:11px} .result-word-item{border-top:1px solid var(--line);padding:9px 0} .result-word-item>div{display:flex;gap:7px;align-items:center;flex-wrap:wrap} .result-word-item strong{font:600 14px var(--serif);text-transform:capitalize} .result-word-item small{font-size:9px;color:#8f9991} .result-word-item .difficulty-tag{font-size:8px} .result-word-item p{font-size:10px;line-height:1.5;color:#849088;margin:5px 0 0;overflow-wrap:anywhere} .setting-row{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 20px} .setting-row h2{font:600 17px var(--serif);margin:0 0 5px} .setting-row p{font-size:11px;color:#849088;margin:0;line-height:1.5} .settings-list{display:grid;gap:11px;max-width:740px} .setting-control select{min-width:150px;padding:9px 12px;border:1px solid var(--line);border-radius:7px;background:var(--card);color:var(--ink);font-size:11px} .settings-saved{font-size:10px;color:#849088;margin:3px 2px} .avatar-picker{margin:18px auto 2px} .avatar-picker>span{display:block;font-size:10px;color:#839087;margin-bottom:9px} .avatar-options{display:flex;justify-content:center;gap:7px} .avatar-choice{width:35px;height:35px;border:1px solid var(--line);border-radius:50%;background:#f7f8f5;font-size:17px;display:grid;place-items:center;transition:transform .15s,border .15s} .avatar-choice:hover{transform:translateY(-2px)} .avatar-choice.selected{border:2px solid var(--green);background:#edf5ef} .profile-settings-link{display:block;margin:8px auto 0} .password-requirements{display:grid;grid-template-columns:1fr 1fr;gap:5px 12px;padding:9px 0 0;margin:0;list-style:none;color:#909a92;font-size:9px} .password-requirements li:before{content:'○';margin-right:6px;color:#a1aaa3} .password-requirements li.met{color:#4d865e} .password-requirements li.met:before{content:'✓';color:#4d865e} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} @media(max-width:740px){.result-group-grid{grid-template-columns:1fr}} @media(max-width:480px){.setting-row{align-items:flex-start;flex-direction:column;gap:12px}.setting-control,.setting-control select{width:100%}.password-requirements{grid-template-columns:1fr 1fr}.result-word-item p{font-size:11px}} /* Data-driven palettes: theme cards set data-theme; System/Light/Dark sets data-appearance. */ html[data-theme="default-dark"],html[data-theme="forest"]{color-scheme:dark;--ink:#edf3ee;--muted:#aab6ad;--paper:#151d19;--card:#202a24;--line:#354139;--green:#8fc39e;--green-dark:#abd3b5;--mint:#293b30;--gold:#d4ae70} html[data-theme="midnight"]{color-scheme:dark;--ink:#eef0fa;--muted:#aeb5c8;--paper:#111522;--card:#20283a;--line:#39435a;--green:#a5b4fc;--green-dark:#c1cafd;--mint:#2a3148;--gold:#e2c277} html[data-theme="ocean"]{color-scheme:dark;--ink:#e5f3f3;--muted:#a8c3c5;--paper:#12232a;--card:#203b45;--line:#38565e;--green:#73c8c7;--green-dark:#a2dfdc;--mint:#28474c;--gold:#edc780} html[data-theme="lavender"]{color-scheme:dark;--ink:#f2edf8;--muted:#c0b5ca;--paper:#241f2d;--card:#393047;--line:#51445f;--green:#c2a9e7;--green-dark:#dbc8f3;--mint:#4a3b56;--gold:#e6c68c} html[data-theme="warm"]{color-scheme:light;--ink:#3d3028;--muted:#88796d;--paper:#f6efe6;--card:#fffaf4;--line:#e8d9c9;--green:#96613f;--green-dark:#74482d;--mint:#f2e5d7;--gold:#b57b47} html[data-theme="light"]{color-scheme:light;--ink:#1d2824;--muted:#738078;--paper:#f5f6f2;--card:#fff;--line:#e2e8df;--green:#306951;--green-dark:#245640;--mint:#edf5ef;--gold:#b5843d} html[data-theme="high-contrast"]{color-scheme:dark;--ink:#fff;--muted:#f0f0f0;--paper:#000;--card:#090909;--line:#fff;--green:#ff0;--green-dark:#ff0;--mint:#202000;--gold:#ff0} html[data-appearance="dark"]:not([data-theme="high-contrast"]){color-scheme:dark;--paper:#151d19;--card:#202a24;--ink:#edf3ee;--muted:#b1bdb4;--line:#38443c;--mint:#293b30} html[data-appearance="light"]:not([data-theme="high-contrast"]){color-scheme:light} html[data-appearance="light"][data-theme="default-dark"],html[data-appearance="light"][data-theme="forest"]{--paper:#f1f5ef;--card:#fff;--ink:#20352a;--muted:#69796e;--line:#dce7dc;--green:#396e4a;--green-dark:#2f5d3d;--mint:#e4efe4} html[data-appearance="light"][data-theme="midnight"]{--paper:#f1f2fa;--card:#fff;--ink:#272d45;--muted:#6b7188;--line:#e0e2ef;--green:#5969b7;--green-dark:#414f99;--mint:#e7e9f7} html[data-appearance="light"][data-theme="ocean"]{--paper:#edf5f5;--card:#fff;--ink:#203c42;--muted:#648084;--line:#d7e7e8;--green:#287d7c;--green-dark:#216564;--mint:#dff0ef} html[data-appearance="light"][data-theme="lavender"]{--paper:#f6f1f8;--card:#fff;--ink:#392e41;--muted:#776a80;--line:#e8ddec;--green:#76558e;--green-dark:#604274;--mint:#eee4f2} html[data-appearance="dark"][data-theme="light"],html[data-appearance="dark"][data-theme="warm"]{--paper:#191b19;--card:#252824;--ink:#f2f1eb;--muted:#b6b3a8;--line:#42453e;--green:#dfb58b;--green-dark:#efd0ad;--mint:#3a332b} html[data-theme="high-contrast"] .nav-link.active,html[data-theme="high-contrast"] .button-primary{background:#ff0;color:#000} html[data-appearance="dark"] .sidebar,html[data-appearance="dark"] .date-card,html[data-appearance="dark"] .collection-count,html[data-appearance="dark"] .word-row,html[data-appearance="dark"] .auth-card input,html[data-appearance="dark"] .search-box,html[data-appearance="dark"] .vocab-tools select,html[data-appearance="dark"] .topbar{background:var(--card);color:var(--ink)} html[data-appearance="dark"] .nav-link:hover,html[data-appearance="dark"] .empty-card,html[data-appearance="dark"] .privacy-note,html[data-appearance="dark"] .aside-note,html[data-appearance="dark"] .aside-progress,html[data-appearance="dark"] .setting-row,html[data-appearance="dark"] .theme-card,html[data-appearance="dark"] .font-card,html[data-appearance="dark"] .feedback-form,html[data-appearance="dark"] .settings-categories,html[data-appearance="dark"] .daily-practice-card{background:var(--card);color:var(--ink)} html[data-appearance="dark"] textarea,html[data-appearance="dark"] .auth-card input,html[data-appearance="dark"] .setting-control select,html[data-appearance="dark"] .feedback-form textarea,html[data-appearance="dark"] .username-form input,html[data-appearance="dark"] .performance-filters select{background:var(--paper);color:var(--ink);border-color:var(--line)} html[data-appearance="dark"] .week-dot,html[data-appearance="dark"] .review-count,html[data-appearance="dark"] .close-button,html[data-appearance="dark"] .difficulty-tag{background:#303b33;color:#d5e0d7} html[data-appearance="dark"] .result,html[data-appearance="dark"] .notification-placeholder{background:#26332a} html[data-appearance="dark"] .word-row-def,html[data-appearance="dark"] .muted,html[data-appearance="dark"] .lede,html[data-appearance="dark"] .daily-body p,html[data-appearance="dark"] .setting-row p{color:var(--muted)} html[data-appearance="dark"] .app-footer{border-color:var(--line);color:var(--muted)} html[data-appearance="dark"] .profile-avatar{background:#34483a} html[data-appearance="dark"] .theme-card.selected,html[data-appearance="dark"] .font-card.selected{border-color:var(--green)} html[data-font="serif"]{--sans:Georgia,"Times New Roman",serif} html[data-font="rounded"]{--sans:ui-rounded,"Arial Rounded MT Bold",system-ui,sans-serif} html[data-font="mono"]{--sans:ui-monospace,SFMono-Regular,Menlo,monospace} html[data-font="system"]{--sans:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif} .global-profile{display:flex;align-items:center;gap:9px;min-width:165px;border:0;background:none;padding:5px 0;color:var(--ink);text-align:left} .global-avatar{width:37px;height:37px;display:block;flex:none}.avatar-art{display:block;width:100%;height:100%;filter:drop-shadow(0 2px 2px #10151026)}.avatar-art-small{width:34px;height:34px} .global-profile-copy{display:grid;min-width:103px;gap:3px}.global-profile-copy strong{font-size:10px;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.global-profile-copy small{font-size:9px;color:var(--muted)}.global-xp-track,.level-track{height:4px;background:var(--line);border-radius:99px;display:block;overflow:hidden}.global-xp-track>i,.level-track>i{display:block;height:100%;width:0;background:var(--green);border-radius:inherit;transition:width .35s ease} .daily-streak-badge{display:grid;grid-template-columns:auto auto;align-items:center;gap:0 9px;padding:12px 16px;background:var(--mint);border-radius:10px;color:var(--green)}.daily-streak-badge span{grid-column:1/-1;font:9px var(--mono);letter-spacing:.8px}.daily-streak-badge strong{font:600 31px var(--serif)}.daily-streak-badge small{font-size:10px;color:var(--muted)} .daily-practice-card{max-width:730px;margin:0 auto;background:var(--card);border:1px solid var(--line);border-radius:13px;padding:26px 34px;box-shadow:0 10px 30px #273a2a0a}.daily-completion-line{display:flex;justify-content:space-between;align-items:center;font:10px var(--mono);letter-spacing:.5px;color:var(--muted)}.daily-practice-card .word-wrap h2{font-size:clamp(56px,7vw,76px)}.daily-practice-card .word-wrap{padding:37px 0 31px}.daily-completed-note{font-size:11px;color:var(--muted);margin-top:14px}.daily-xp-award{margin-top:13px;padding:10px 12px;background:var(--mint);border-radius:7px;color:var(--green);font-weight:700;font-size:11px} .daily-history{max-width:730px;margin:0 auto 14px;padding:0 2px}.daily-history-heading{display:flex;justify-content:space-between;gap:16px;align-items:end;margin-bottom:9px}.daily-history-heading .eyebrow{margin:0}.daily-history-heading p{margin:4px 0 0;color:var(--muted);font-size:10px}.daily-history-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}.daily-history-day{min-width:0;display:grid;justify-items:center;gap:2px;padding:8px 3px 7px;border:1px solid var(--line);border-radius:7px;background:var(--card);color:var(--muted);font:9px var(--mono);line-height:1.1;transition:border-color .16s ease,background-color .16s ease,color .16s ease}.daily-history-day strong{font:600 17px var(--serif);color:var(--ink)}.daily-history-day small{width:100%;min-height:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:8px var(--sans);text-transform:capitalize}.daily-history-day:hover:not(:disabled){border-color:var(--green);background:var(--mint);color:var(--green)}.daily-history-day.completed small{color:var(--green)}.daily-history-day.missed{border-style:dashed}.daily-history-day.future{opacity:.48;background:transparent;cursor:not-allowed}.daily-history-day.selected{border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green);background:var(--mint)}.daily-history-mode{max-width:730px;margin:0 auto 8px;color:var(--green);font:600 10px var(--mono);letter-spacing:.5px;text-transform:uppercase}.daily-history-answer{margin:12px 0;padding:10px 12px;border-left:2px solid var(--line);background:var(--paper)}.daily-history-answer span{font:9px var(--mono);letter-spacing:.7px;color:var(--muted)}.daily-history-answer p{margin:5px 0 2px;font-size:12px;line-height:1.5}.daily-history-answer small{font-size:9px;color:var(--muted)}.daily-history-empty{padding:13px;background:var(--mint);border-radius:7px;color:var(--green)}.daily-history-empty strong{font-size:12px}.daily-history-empty p{margin:4px 0 0;font-size:10px;color:var(--muted)} .review-item{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}.review-item strong{font:600 14px var(--serif);text-transform:capitalize}.review-item span{font-size:10px;color:var(--muted);text-align:right}.upcoming-review{display:grid;gap:6px;padding:13px 0;font-size:10px;color:var(--muted)}.upcoming-review strong{color:var(--ink);font-size:11px}.button:disabled{opacity:.5;cursor:not-allowed} .retention-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:17px 0}.retention-stats>div{display:grid;gap:6px;padding:11px;background:var(--mint);border-radius:7px}.retention-stats span{font-size:9px;color:var(--muted)}.retention-stats strong{font:600 21px var(--serif);color:var(--green)}.retention-chart{height:92px;display:flex;gap:7px;align-items:flex-end;border-bottom:1px solid var(--line);padding:0 3px}.retention-week{height:100%;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:5px;min-width:20px}.retention-week i{width:70%;max-width:28px;border-radius:4px 4px 0 0;background:var(--green);transition:height .3s}.retention-week small{font-size:8px;color:var(--muted);white-space:nowrap} .heatmap-panel{overflow:hidden}.heatmap-scroll{overflow-x:auto;padding-bottom:6px}.heatmap-months{height:17px;min-width:690px;display:grid;grid-auto-columns:11px;grid-auto-flow:column;gap:3px;font-size:8px;color:var(--muted)}.heatmap-grid{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,11px);grid-auto-columns:11px;gap:3px;min-width:690px}.heatmap-cell,.heatmap-legend i{width:11px;height:11px;border-radius:3px;background:var(--line);display:block}.heatmap-cell[data-level="1"],.heatmap-legend i[data-level="1"]{background:#b8d7bc}.heatmap-cell[data-level="2"],.heatmap-legend i[data-level="2"]{background:#83b991}.heatmap-cell[data-level="3"],.heatmap-legend i[data-level="3"]{background:#55956b}.heatmap-cell[data-level="4"],.heatmap-legend i[data-level="4"]{background:#286344}.heatmap-legend{display:flex;gap:5px;align-items:center;justify-content:flex-end;margin-top:8px;font-size:8px;color:var(--muted)}.heatmap-legend span:first-child{margin-right:3px}.heatmap-legend span:last-child{margin-left:3px} .performance-filters{display:flex;gap:7px}.performance-filters select{padding:7px;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--ink);font-size:9px}.performance-list{display:grid}.performance-row{display:grid;grid-template-columns:1fr auto .6fr .8fr .8fr .8fr;align-items:center;gap:10px;padding:11px 0;border-top:1px solid var(--line);font-size:9px;color:var(--muted)}.performance-row>strong{font:600 14px var(--serif);text-transform:capitalize;color:var(--ink)} .settings-layout{display:grid;grid-template-columns:175px minmax(0,1fr);gap:16px;align-items:start}.settings-categories{display:grid;gap:4px;padding:8px;background:#fff;border:1px solid var(--line);border-radius:10px;position:sticky;top:15px}.settings-category{border:0;background:none;text-align:left;padding:11px 12px;border-radius:6px;color:var(--muted);font-size:11px;transition:background .16s,color .16s}.settings-category:hover{background:var(--paper);color:var(--ink)}.settings-category.active{background:var(--mint);color:var(--green);font-weight:700}.settings-panels{min-width:0}.settings-panel{display:none;animation:enter .2s ease}.settings-panel.active{display:block}.settings-panel>.panel-heading{margin:0 0 16px}.settings-list{display:grid;gap:10px}.settings-subheading{margin:22px 0 11px;font:600 15px var(--serif)}.theme-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.theme-card,.font-card{border:1px solid var(--line);border-radius:9px;background:var(--card);color:var(--ink);padding:9px;text-align:left;transition:transform .16s,border-color .16s,box-shadow .16s}.theme-card:hover,.font-card:hover{transform:translateY(-2px)}.theme-card.selected,.font-card.selected{border:2px solid var(--green);box-shadow:0 0 0 2px color-mix(in srgb,var(--green) 18%,transparent)}.theme-preview{height:76px;padding:8px;display:flex;gap:5px;align-items:flex-start;background:var(--swatch-a);border-radius:6px;margin-bottom:8px}.theme-preview i{display:block;height:14px;flex:1;border-radius:4px;background:var(--swatch-b)}.theme-preview i:nth-child(2){background:var(--swatch-c);margin-top:17px}.theme-preview i:nth-child(3){background:var(--swatch-d);margin-top:34px}.theme-card>span:last-child{font-size:10px;font-weight:600}.font-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.font-card{display:grid;gap:6px;text-align:center;padding:14px 8px}.font-card strong{font:28px var(--sample-font)}.font-card span{font-size:9px}.settings-profile{display:flex;align-items:center;gap:14px;padding:14px}.settings-profile-avatar{width:45px;height:45px;flex:none}.settings-profile>div:nth-child(2){flex:1}.settings-profile strong{font-size:12px}.settings-profile p{margin:4px 0;font-size:10px}.settings-profile .level-track{max-width:200px}.avatar-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.avatar-grid .avatar-choice{width:auto;height:auto;min-height:74px;border-radius:9px;display:flex;flex-direction:column;justify-content:center;gap:5px}.avatar-choice span{font-size:9px;color:var(--muted)}.avatar-picker .avatar-grid{max-width:225px;margin:auto}.profile-avatar{overflow:hidden;padding:3px}.profile-avatar .avatar-art{width:100%;height:100%}.settings-profile-avatar .avatar-art{width:100%;height:100%}.username-form{display:grid;grid-template-columns:1fr auto;gap:8px;max-width:480px;align-items:end;margin-top:16px}.username-form label{grid-column:1/-1;font-size:10px}.username-form input{padding:10px;border:1px solid var(--line);border-radius:7px;background:var(--card);color:var(--ink)}.username-form .feedback-status{grid-column:1/-1;margin:0}.notification-placeholder{display:flex;gap:14px;padding:20px;background:var(--mint);border-radius:9px}.notification-icon{font-size:24px;color:var(--green)}.notification-placeholder strong{font-size:12px}.notification-placeholder p{font-size:10px;line-height:1.6;margin:5px 0}.feedback-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.feedback-form{display:grid;gap:7px;padding:17px}.feedback-form h3{font:600 16px var(--serif);margin:0}.feedback-form>p{font-size:10px;line-height:1.5;margin:0 0 4px}.feedback-form label{font-size:10px;font-weight:600}.feedback-form textarea{width:100%;resize:vertical;padding:10px;border:1px solid var(--line);border-radius:7px;background:var(--paper);color:var(--ink);font-size:11px}.feedback-form .button{justify-self:start;margin-top:5px}.feedback-status{min-height:14px;margin:0;color:var(--green);font-size:9px;line-height:1.5}.feedback-error{color:#a34035}.level-up-toast{position:fixed;z-index:40;left:50%;bottom:24px;transform:translate(-50%,12px);opacity:0;pointer-events:none;padding:13px 18px;background:var(--green-dark);color:#fff;border-radius:10px;font-size:12px;font-weight:700;box-shadow:0 10px 30px #0003;transition:opacity .2s,transform .2s}.level-up-toast.visible{opacity:1;transform:translate(-50%,0)} html[data-text-size="small"] .content{font-size:14px}html[data-text-size="large"] .content{font-size:16px}html[data-word-size="small"] .daily-practice-card .word-wrap h2{font-size:clamp(48px,6vw,61px)}html[data-word-size="large"] .daily-practice-card .word-wrap h2{font-size:clamp(68px,8vw,88px)} @media(max-width:1000px){.theme-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.performance-row{grid-template-columns:1fr auto .6fr .7fr}.performance-row span:nth-last-child(-n+2){display:none}} @media(max-width:740px){.global-profile{min-width:0}.global-profile-copy{display:none}.global-avatar{width:34px;height:34px}.settings-layout{grid-template-columns:1fr}.settings-categories{position:static;display:flex;overflow-x:auto}.settings-category{white-space:nowrap}.theme-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.font-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.feedback-grid{grid-template-columns:1fr}.daily-practice-card{padding:22px 20px}.daily-history-days{gap:4px}.daily-history-day{padding:7px 2px}.performance-row{grid-template-columns:1fr auto .65fr}.performance-row span:nth-last-child(-n+3){display:none}.heatmap-panel{padding-right:14px;padding-left:14px}.retention-stats{grid-template-columns:repeat(3,1fr)}} @media(max-width:480px){.daily-streak-badge{padding:9px 11px}.daily-streak-badge strong{font-size:25px}.daily-practice-card{padding:17px 14px}.daily-practice-card .word-wrap h2{font-size:52px}.theme-grid{gap:7px}.theme-preview{height:58px}.theme-card{padding:7px}.theme-card>span:last-child{font-size:9px}.settings-profile{flex-wrap:wrap}.username-form{grid-template-columns:1fr}.username-form label,.username-form .feedback-status{grid-column:1}.username-form button{width:100%}.performance-filters{flex-direction:column}.performance-filters select{max-width:140px}.performance-row{grid-template-columns:1fr auto}.performance-row span:nth-last-child(-n+3){display:none}.retention-chart{gap:4px}.retention-week small{font-size:7px}.heatmap-grid,.heatmap-months{min-width:690px}} .status-tag.familiar{background:#e8f0fa;color:#586f9b}.status-tag.new{background:#f2f2ed;color:#718078}.review-subsection{margin-top:14px}.review-subsection h3{font:600 11px var(--sans);margin:0 0 4px;color:var(--muted)}.review-subsection .empty-state{font-size:10px}.metric-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.metric-card{min-height:145px}.word-wrap h2{font-size:clamp(62px,7vw,82px)}.button{min-height:42px}.text-button{min-height:36px;font-size:11px}.page-heading h1{line-height:1.13}.lede{font-size:13px;line-height:1.65}.practice-card{padding:27px 32px}.practice-card #answer-form textarea{font-size:14px}.nav-link{font-size:13px}.word-row-name{font-size:18px}.word-row-def{font-size:11px} @media(max-width:1000px){.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:480px){.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.word-wrap h2{font-size:54px}.practice-card{padding:20px 17px}.daily-practice-card .word-wrap h2{font-size:50px}} @media(max-width:740px){.global-profile-copy{display:grid}.global-profile-copy strong,.global-xp-track{display:none}.global-profile-copy small{font-size:8px;white-space:nowrap}} html[data-appearance="dark"] .button-secondary{background:var(--mint);color:var(--green)}html[data-theme="high-contrast"] .button-primary{color:#000;border:1px solid #ff0}html[data-theme="high-contrast"] .button-secondary{background:#000;color:#ff0;border:1px solid #fff} .profile-level{display:grid;gap:7px;max-width:250px;margin:18px auto 0;text-align:left}.profile-level>span{font:9px var(--mono);letter-spacing:.7px;color:var(--muted)}.profile-level>span b{color:var(--green)}.profile-level>strong{font:600 19px var(--serif);color:var(--ink)}.profile-level>small{font-size:9px;color:var(--muted)}.result-extras{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px;font-size:9px;color:var(--muted)}.result-extras>span{padding:4px 7px;border:1px solid var(--line);border-radius:5px}.result-extras .result-synonyms{flex-basis:100%;line-height:1.5}.profile-card .profile-stats{gap:8px}.profile-card .profile-stats span{font-size:9px} html[data-appearance="dark"] .button-next{background:var(--mint);color:var(--green)} /* WordWise visual polish: theme variables provide complete, coherent surfaces. */ html[data-appearance="dark"][data-theme="forest"]{color-scheme:dark;--paper:#17231d;--card:#202e25;--ink:#f1ead9;--muted:#b4b9a9;--line:#38483c;--green:#a4b992;--green-dark:#829a70;--mint:#2a3a2e;--gold:#d8b975;--input:#19251e;--success:#b2d5a6;--partial:#e3c27b;--error:#e2a19a} html[data-appearance="dark"][data-theme="midnight"]{color-scheme:dark;--paper:#101723;--card:#1a2535;--ink:#edf2fa;--muted:#aab6c9;--line:#354358;--green:#8bb4ed;--green-dark:#6998da;--mint:#26364b;--gold:#ecc47f;--input:#121c2a;--success:#9bd4ad;--partial:#e9c87e;--error:#eea39a} html[data-appearance="dark"][data-theme="ocean"]{color-scheme:dark;--paper:#102326;--card:#193337;--ink:#e5f4f0;--muted:#a1c0bd;--line:#315052;--green:#79c9bc;--green-dark:#58aa9c;--mint:#224244;--gold:#e4bd7b;--input:#142a2d;--success:#92d3ad;--partial:#e5c67c;--error:#e5a099} html[data-appearance="dark"][data-theme="lavender"]{color-scheme:dark;--paper:#211b2b;--card:#30283b;--ink:#f4effa;--muted:#bdb1c9;--line:#494054;--green:#c4a9e6;--green-dark:#a98acb;--mint:#3e334d;--gold:#e5bd7d;--input:#271f32;--success:#acd6b7;--partial:#e5c67c;--error:#e9a5a0} html[data-appearance="dark"][data-theme="warm"]{color-scheme:dark;--paper:#292018;--card:#382b20;--ink:#f8ecdc;--muted:#c9b7a1;--line:#574333;--green:#e3a16e;--green-dark:#ce8653;--mint:#493527;--gold:#edc37b;--input:#30241b;--success:#b5d49d;--partial:#e6c77d;--error:#e6a097} html[data-appearance="dark"][data-theme="ivory"],html[data-appearance="dark"][data-theme="light"]{color-scheme:dark;--paper:#211e1b;--card:#302b27;--ink:#f4eee7;--muted:#c1b5aa;--line:#4c443e;--green:#d39a78;--green-dark:#bb7957;--mint:#41342c;--gold:#e0bc7d;--input:#292420;--success:#b0d4a5;--partial:#e5c67e;--error:#e3a09a} html[data-appearance="light"][data-theme="ivory"]{color-scheme:light;--paper:#f3eee4;--card:#fffaf1;--ink:#342c27;--muted:#756b62;--line:#e4d9ca;--green:#a95f44;--green-dark:#884b36;--mint:#eee3d6;--gold:#b48246;--input:#fffdf9;--success:#286b43;--partial:#8a6418;--error:#a3453c} html[data-appearance="light"][data-theme="midnight"]{color-scheme:light;--paper:#e9edf4;--card:#f8faff;--ink:#222b39;--muted:#687386;--line:#d6ddea;--green:#496eaa;--green-dark:#35588f;--mint:#dce6f5;--gold:#9f732c;--input:#fff;--success:#286b43;--partial:#8a6418;--error:#a3453c} html[data-appearance="light"][data-theme="ocean"]{color-scheme:light;--paper:#eaf4f2;--card:#f7fffd;--ink:#17393a;--muted:#5d7978;--line:#d2e4e0;--green:#287f78;--green-dark:#216963;--mint:#d8eeea;--gold:#97702e;--input:#fff;--success:#286b43;--partial:#8a6418;--error:#a3453c} html[data-appearance="light"][data-theme="forest"]{color-scheme:light;--paper:#eff1e8;--card:#fbfcf4;--ink:#28352a;--muted:#6c796c;--line:#dce2d4;--green:#496a48;--green-dark:#365638;--mint:#e1eadc;--gold:#a27a37;--input:#fff;--success:#286b43;--partial:#8a6418;--error:#a3453c} html[data-appearance="light"][data-theme="lavender"]{color-scheme:light;--paper:#f1edf5;--card:#fcf9ff;--ink:#352e40;--muted:#756b82;--line:#e0d8e8;--green:#73588d;--green-dark:#604576;--mint:#e9e0f1;--gold:#a77938;--input:#fff;--success:#286b43;--partial:#8a6418;--error:#a3453c} html[data-appearance="light"][data-theme="warm"]{color-scheme:light;--paper:#f0e4d4;--card:#fff6ea;--ink:#38291f;--muted:#796959;--line:#e5d3bf;--green:#a8572e;--green-dark:#884426;--mint:#f2dfcb;--gold:#ac7937;--input:#fffaf4;--success:#286b43;--partial:#8a6418;--error:#a3453c} html[data-appearance="light"][data-theme="light"]{color-scheme:light;--paper:#f4f5f1;--card:#fff;--ink:#27342b;--muted:#6f7b73;--line:#e2e7e1;--green:#4f785c;--green-dark:#3d664a;--mint:#e5eee6;--gold:#ad8545;--input:#fff;--success:#286b43;--partial:#8a6418;--error:#a3453c} html[data-theme="high-contrast"]{color-scheme:dark;--paper:#000;--card:#090909;--ink:#fff;--muted:#f1f1f1;--line:#fff;--green:#ff0;--green-dark:#ff0;--mint:#171700;--gold:#ff0;--input:#000;--success:#6f6;--partial:#ff0;--error:#ff8c8c} html[data-theme="high-contrast"][data-appearance="light"]{color-scheme:light;--paper:#fff;--card:#fff;--ink:#000;--muted:#222;--line:#000;--green:#000080;--green-dark:#000066;--mint:#e6e6ff;--gold:#5c3a00;--input:#fff;--success:#006400;--partial:#725000;--error:#9d0000} body,.sidebar,.topbar,.date-card,.collection-count,.word-row,.panel,.setting-row,.practice-card,.daily-practice-card,.theme-card,.button,.nav-link,textarea,input{transition:background-color .22s ease,color .22s ease,border-color .22s ease} .sidebar,.topbar,.date-card,.collection-count,.word-row,.panel,.setting-row,.practice-card,.daily-practice-card,.theme-card,.font-card,.settings-categories,.custom-select .select-options{background:var(--card);color:var(--ink)} .sidebar{border-color:var(--line)}.topbar{background:color-mix(in srgb,var(--card) 93%,transparent);border-color:var(--line)} .nav-link,.breadcrumb,.sync-state,.global-profile-copy small,.eyebrow,.nav-caption{color:var(--muted)}.nav-link:hover,.settings-category:hover{background:var(--mint);color:var(--ink)} textarea,.auth-card input,.setting-control select,.feedback-form textarea,.username-form input,.performance-filters select,.vocab-tools select,.search-box,.select-trigger{background:var(--input,var(--card));color:var(--ink);border-color:var(--line)} .result[data-grade="correct"]{background:color-mix(in srgb,var(--success) 12%,var(--card));border-color:color-mix(in srgb,var(--success) 35%,var(--line));animation:result-pop .25s ease} .result[data-grade="partial"]{background:color-mix(in srgb,var(--partial) 12%,var(--card));border-color:color-mix(in srgb,var(--partial) 35%,var(--line));animation:result-pop .25s ease} .result[data-grade="incorrect"]{background:color-mix(in srgb,var(--error) 10%,var(--card));border-color:color-mix(in srgb,var(--error) 30%,var(--line));animation:result-pop .25s ease} @keyframes result-pop{from{transform:translateY(5px);opacity:.72}to{transform:translateY(0);opacity:1}} .word-wrap{min-width:0;overflow:hidden}.word-wrap h2{max-width:100%;overflow-wrap:anywhere;word-break:normal;hyphens:none;line-height:1.08;letter-spacing:-.045em;text-align:center;margin:0 auto}.practice-card{padding:clamp(22px,3vw,36px);border-radius:16px;box-shadow:0 12px 36px #17231d0b}.practice-card .word-wrap{padding:clamp(24px,4vw,38px) 0 clamp(19px,3vw,30px)}.practice-card .practice-meta{margin-bottom:2px} .theme-card{display:grid;gap:6px;min-width:0}.theme-card>span:last-child{display:block;line-height:1.35;font-size:10px}.theme-card:focus-visible,.button:focus-visible,.nav-link:focus-visible,.settings-category:focus-visible,.global-profile:focus-visible,.music-control:focus-visible,.select-trigger:focus-visible,.select-options [role="option"]:focus-visible{outline:3px solid color-mix(in srgb,var(--green) 55%,white);outline-offset:2px}.theme-preview{height:105px;display:flex;flex-direction:column;align-items:stretch;gap:7px;padding:8px;background:var(--swatch-a);border:1px solid color-mix(in srgb,var(--swatch-d) 18%,transparent);margin:0}.preview-top{display:flex;gap:3px;justify-content:flex-end}.preview-top i{display:block;width:5px;height:5px;border-radius:50%;background:var(--swatch-c)}.preview-word{display:block;font:700 7px var(--mono);letter-spacing:.6px;color:var(--swatch-d)}.preview-line{height:13px;border-radius:3px;background:var(--swatch-b);border-left:3px solid var(--swatch-c)}.preview-button{height:12px;width:40%;border-radius:4px;background:var(--swatch-c);align-self:flex-end}.theme-card.selected{border:2px solid var(--green);box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 16%,transparent)}.theme-card.selected:after{content:'✓';position:absolute;top:14px;right:14px;border-radius:50%;width:20px;height:20px;display:grid;place-items:center;background:var(--green);color:var(--card);font-size:11px}.theme-card{position:relative}.theme-card:hover{box-shadow:0 8px 20px #10201818} .custom-select{position:relative;min-width:188px}.select-trigger{width:100%;min-height:42px;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:0 13px;border:1px solid var(--line);border-radius:9px;color:var(--ink);font-size:12px;text-align:left;box-shadow:0 2px 6px #101a1009}.select-trigger>span:last-child{color:var(--muted);transform:none;transition:none}.select-options{position:absolute;z-index:20;inset:calc(100% + 5px) 0 auto;display:grid;gap:2px;padding:5px;border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 30px #101a102b;}.select-options[hidden]{display:none}.select-options [role="option"]{border:0;background:none;color:var(--ink);border-radius:6px;text-align:left;padding:10px;font-size:12px}.select-options [role="option"]:hover,.select-options [aria-selected="true"]{background:var(--mint);color:var(--green)}.setting-control{min-width:min(188px,100%)}.font-setting{margin-top:13px;background:var(--card)} .music-control{display:flex;align-items:center;gap:6px;min-height:34px;padding:0 10px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--muted);font-size:10px;white-space:nowrap;transition:all .18s}.music-control.is-playing{color:var(--green);background:var(--mint);border-color:color-mix(in srgb,var(--green) 25%,var(--line))}.music-control.is-playing:before{content:'';width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 15%,transparent)}.topbar-right{gap:10px}.global-profile{border:1px solid transparent;border-radius:12px;padding:4px 9px;background:transparent;transition:background .18s,border .18s}.global-profile:hover{background:var(--mint);border-color:var(--line)}.global-profile-copy{gap:4px}.global-profile-copy strong{font-size:11px}.global-xp-track{height:3px} .audio-note{margin:-5px 0 16px;font-size:12px}.switch-control{display:flex;align-items:center;cursor:pointer}.switch-control input{position:absolute;opacity:0;width:1px;height:1px}.switch-track{width:44px;height:25px;border-radius:20px;background:var(--line);position:relative;transition:background .2s}.switch-track:after{content:'';position:absolute;left:3px;top:3px;width:19px;height:19px;border-radius:50%;background:var(--card);box-shadow:0 1px 4px #0003;transition:transform .2s}.switch-control input:checked+.switch-track{background:var(--green)}.switch-control input:checked+.switch-track:after{transform:translateX(19px)}.switch-control input:focus-visible+.switch-track{outline:3px solid color-mix(in srgb,var(--green) 45%,white);outline-offset:2px}.range-control{display:flex;align-items:center;min-width:min(220px,100%)}.range-control input{width:100%;accent-color:var(--green)}.audio-cues{padding:17px}.audio-cues h2{margin:0 0 4px;font-size:13px}.audio-cues p{font-size:10px;color:var(--muted);margin:0 0 12px}.cue-grid{display:flex;gap:9px 17px;flex-wrap:wrap}.cue-grid label{font-size:11px;color:var(--muted);display:flex;gap:6px;align-items:center}.cue-grid input{accent-color:var(--green)} .result-heading .mark{color:var(--green)}.result[data-grade="incorrect"] .mark{color:var(--error)}.result[data-grade="partial"] .mark{color:var(--partial)}.global-profile-copy strong{color:var(--ink)}.word-row-name{overflow-wrap:anywhere}.practice-meta .part-label{text-transform:capitalize} @media(max-width:740px){.topbar{padding:0 15px}.topbar-right{gap:7px}.music-control{width:35px;justify-content:center;padding:0}.music-control span{display:none}.global-profile{padding:2px}.global-profile-copy{display:grid}.global-profile-copy small{font-size:8px}.settings-categories{gap:3px}.settings-category{padding:10px 11px}.setting-control{width:100%}.custom-select{width:100%}.font-setting{align-items:flex-start}.practice-card{padding:22px 18px}.word-wrap h2{font-size:clamp(44px,11vw,82px)}} @media(max-width:480px){.breadcrumb{font-size:8px}.sync-state{display:none}.topbar-right{margin-left:auto}.music-control{min-height:32px}.theme-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.theme-preview{height:88px}.setting-row{padding:15px}.range-control{max-width:none}.cue-grid{display:grid;grid-template-columns:1fr 1fr}.page-heading{align-items:flex-start}} @media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}} .settings-savebar{position:sticky;bottom:10px;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:22px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--card) 94%,transparent);box-shadow:0 8px 28px #17231d12;backdrop-filter:blur(12px)}.settings-savebar>div{display:flex;gap:8px}.settings-saved{margin:0;font-size:12px;color:var(--muted)}.settings-savebar button:disabled{opacity:.48;cursor:not-allowed}.feedback-status.error,.auth-message.error{color:var(--error)}.inline-field-status{font-size:12px;color:var(--muted)}.font-sample{display:inline-block;min-width:28px;margin-right:8px;font-size:18px;font-weight:600}.cue-grid>button{border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);padding:5px 9px;font:inherit;font-size:10px;cursor:pointer}.cue-grid>button:hover{border-color:var(--green);color:var(--green)}.keep-signed-in{display:flex;align-items:center;gap:8px;margin:12px 0;color:var(--muted);font-size:12px}.keep-signed-in input{accent-color:var(--green)} @media(max-width:480px){.settings-savebar{align-items:flex-start;flex-direction:column;bottom:6px;padding:10px}.settings-savebar>div{width:100%}.settings-savebar button{flex:1}} /* WordWise visual system: warm editorial colors, tactile controls, and calm spacing. */ :root{ --ink:#382f29; --muted:#82766c; --paper:#f7f2eb; --card:#fffdf9; --line:#e8ddd1; --green:#a65f43; --green-dark:#874832; --mint:#f3e8df; --gold:#b27a4a; --input:#fffdf9; --success:#477653; --partial:#a36a22; --error:#a64f43; --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px; --space-5:22px;--space-6:30px;--space-7:42px; --shadow-soft:0 5px 18px #47382b0a; --shadow-raised:0 12px 30px #47382b10; } body{background:var(--paper);font-size:14px;line-height:1.55;letter-spacing:.005em} .sidebar{width:218px;padding:25px 16px 17px;background:var(--card);border-color:var(--line)} .brand{margin:0 0 31px 7px;font-size:18px;letter-spacing:-.7px} .brand-mark{width:34px;height:34px;border-radius:8px;background:var(--green);font-size:23px} .app-main{margin-left:218px} .topbar{height:66px;padding:0 clamp(22px,4vw,54px);background:color-mix(in srgb,var(--card) 88%,transparent);backdrop-filter:blur(12px)} .content{width:min(1190px,100%);padding:clamp(26px,4vw,48px) clamp(22px,4vw,54px) 52px} .nav-caption{font-size:9px;letter-spacing:1.4px;margin-bottom:8px} .primary-nav{display:grid;gap:9px;overflow-y:auto;overscroll-behavior:contain;padding:0 2px 12px} .primary-nav>.nav-link{height:39px;margin:0 4px 2px;padding:0 11px;border-radius:6px;color:var(--muted);font-size:13px} .primary-nav>.nav-link>span{color:var(--gold);font-size:17px} .nav-group{position:relative;margin:0 4px;padding:0} .nav-group>summary{position:relative;display:flex;align-items:center;min-height:38px;list-style:none;cursor:pointer;padding:0 30px 0 11px;border-radius:6px;color:#65594f;font:600 13px var(--sans);transition:color .18s,background .18s} .nav-group>summary::-webkit-details-marker{display:none} .nav-group>summary::marker{content:""} .nav-group>summary::after{content:"";position:absolute;right:13px;width:6px;height:6px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s ease,color .2s;color:#aa9a8d} .nav-group>summary:hover{background:#f7f0e8;color:var(--green)} .nav-group[open]>summary{color:var(--green)} .nav-group[open]>summary::after{transform:rotate(225deg) translate(-1px,-1px);color:var(--green)} .nav-group:has(>.nav-link.active)>summary{color:var(--green)} .nav-group>.nav-link{position:relative;height:34px;margin-left:17px;padding:0 9px 0 14px;border-radius:5px;color:var(--muted);font-size:12px;gap:9px} .nav-group>.nav-link>span{width:14px;font-size:14px;color:#ac998a} .nav-group>.nav-link:hover{background:#f8f2eb;color:var(--ink)} .nav-group>.nav-link.active{background:var(--mint);color:var(--green);font-weight:650} .nav-group>.nav-link.active>span{color:var(--green)} /* Each open group gets a quiet spine with short branches into its child links. */ .nav-group[open]::before{content:"";position:absolute;z-index:0;left:17px;top:38px;bottom:16px;border-left:1px solid #ddcfc1;pointer-events:none} .nav-group>.nav-link::before{content:"";position:absolute;left:-1px;top:50%;width:10px;border-top:1px solid #ddcfc1;pointer-events:none} .nav-group::details-content{block-size:0;overflow:hidden;transition:block-size .22s ease,content-visibility .22s allow-discrete} .nav-group[open]::details-content{block-size:auto} .sidebar-bottom{padding:15px 10px 0;border-color:var(--line)} .sidebar-bottom p{font-size:15px;margin:7px 0 13px} .sidebar-bottom p strong{color:var(--green)} .app-footer{border-color:var(--line);font-size:9px} .welcome-row,.page-heading{margin-bottom:clamp(22px,3vw,32px);gap:24px} .eyebrow{font-size:10px;letter-spacing:1.25px;color:var(--gold)} .eyebrow-line{background:var(--gold)} h1{font-size:clamp(35px,4vw,51px);line-height:1.08;letter-spacing:-1.35px;margin:12px 0 10px} h1 em{color:var(--green)} .lede{max-width:660px;font-size:14px;color:var(--muted)} .page-heading h1{margin-top:12px} .feature-card{min-height:340px;padding:clamp(23px,3vw,34px);border:1px solid #784431;border-radius:10px;background:#714632;color:#fffaf4} .feature-card:after{right:5px;bottom:2px;font-size:205px;color:#fffaf408} .feature-mark{color:#e4ba90} .feature-copy h2{font-size:clamp(27px,3vw,37px)} .feature-copy p{font-size:13px;line-height:1.7} .feature-copy .eyebrow{color:#eacdb6} .feature-foot{font-size:10px;color:#dec5b0} .feature-card .button-primary{background:#fff8ef;color:#754830;box-shadow:none} .feature-card .button-primary:hover{background:#f0dfce} .date-card,.collection-count{background:var(--card);border-color:var(--line);border-radius:8px;box-shadow:var(--shadow-soft)} .mini-stat-card,.panel,.metric-card,.practice-card,.practice-aside>div,.daily-card,.daily-practice-card{border-color:var(--line);border-radius:9px;box-shadow:var(--shadow-soft)} .mini-stat-card,.panel,.metric-card,.practice-card,.practice-aside>div,.daily-card{background:var(--card)} .mini-stat-card{padding:19px} .home-grid,.practice-layout{gap:20px} .home-side{gap:14px} .daily-card{padding:19px 21px} .daily-icon{background:#f4e7d8;color:var(--gold);border-radius:7px} .practice-card{padding:clamp(22px,3vw,35px);} .daily-practice-card{background:var(--card);border-radius:10px;padding:clamp(22px,4vw,38px);box-shadow:var(--shadow-raised)} .word-wrap{padding:clamp(30px,4vw,46px) 0 32px} .word-wrap h2{font-size:clamp(54px,7vw,82px);letter-spacing:1px;color:var(--ink)} .part-label{color:var(--muted)} .difficulty{color:var(--muted)} .difficulty i{background:var(--gold)} .practice-round,.collection-count{font-size:10px} .metric-grid{gap:13px} .metric-card{padding:20px;min-height:135px} .metric-highlight{background:#714632;border-color:#714632} .metric-card>strong{font-size:34px} .metric-track,.learned-bar,.session-track{background:color-mix(in srgb,var(--line) 75%,transparent)} .learned-bar span,.metric-track i,.session-track i{background:var(--green)} .panel{padding:clamp(18px,2.5vw,25px)} .panel-heading h2{font-size:21px} .progress-columns{gap:16px;margin-top:18px} .progress-columns>.panel,.settings-panel>.panel,.profile-grid>.panel{margin-bottom:14px} .status-tag,.difficulty-tag{border-radius:4px} .detail-card{background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-raised)} .synonym-list span{border-radius:4px;background:var(--mint);color:var(--green)} .profile-card{padding:30px 22px} .settings-categories{background:var(--card);border-color:var(--line);border-radius:8px} .settings-category{border-radius:5px} .settings-category.active{background:var(--mint);color:var(--green)} .settings-panel>.panel-heading{margin-bottom:19px} .settings-list{gap:11px} .setting-row{border-radius:8px} .settings-savebar{border-radius:8px;box-shadow:var(--shadow-raised)} /* Shared controls, including account/profile forms and settings. */ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),textarea,select{ appearance:none;-webkit-appearance:none;width:100%;min-height:42px;padding:10px 12px; border:1px solid #dfd2c5;border-radius:6px;background:var(--input,var(--card));color:var(--ink); font:13px/1.45 var(--sans);transition:border-color .16s,box-shadow .16s,background .16s; } textarea{min-height:104px;resize:vertical;padding:13px 14px;line-height:1.65} input::placeholder,textarea::placeholder{color:#a8998c;opacity:1} input:focus,textarea:focus,select:focus,.custom-select:focus-within{outline:0;border-color:var(--green);box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 14%,transparent)} input:disabled,textarea:disabled,select:disabled{opacity:.58;cursor:not-allowed} select{padding-right:34px;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 17px) 17px,calc(100% - 12px) 17px;background-size:5px 5px,5px 5px;background-repeat:no-repeat} /* Compact native checkboxes share one quiet, keyboard-accessible treatment. */ input[type="checkbox"]{appearance:none;-webkit-appearance:none;width:19px;height:19px;min-width:19px;min-height:19px;margin:0;border:1px solid #c7c4d7;border-radius:5px;background:#fcfbfa;display:inline-grid;place-content:center;vertical-align:middle;cursor:pointer;transition:background-color .14s ease,border-color .14s ease,box-shadow .14s ease} input[type="checkbox"]::before{content:"";width:7px;height:4px;border-left:1.5px solid #fff;border-bottom:1.5px solid #fff;opacity:0;transform:rotate(-45deg);transition:opacity .12s ease} input[type="checkbox"]:hover:not(:disabled){border-color:#928eb6;background:#faf9fd} input[type="checkbox"]:checked{border-color:#77739f;background:#77739f} input[type="checkbox"]:checked::before{opacity:1} input[type="checkbox"]:focus-visible{outline:0;box-shadow:0 0 0 3px color-mix(in srgb,#77739f 22%,transparent)} input[type="checkbox"]:disabled{border-color:color-mix(in srgb,var(--line) 75%,#c7c4d7);background:color-mix(in srgb,var(--paper) 72%,var(--card));cursor:not-allowed;opacity:.58} input[type="radio"]{accent-color:var(--green)} input[type="range"]{accent-color:var(--green)} .switch-control input[type="checkbox"]{appearance:none;-webkit-appearance:none;width:1px;height:1px;min-width:1px;min-height:1px;margin:0;padding:0;border:0;border-radius:0;background:transparent} .button{min-height:42px;border-radius:6px;padding:10px 16px;font-size:12px;font-weight:650;letter-spacing:.01em;box-shadow:none;transition:transform .16s ease,background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease} .button:hover{transform:translateY(-1px)} .button:active{transform:translateY(0) scale(.985)} .button-primary{background:var(--green);color:#fff;border:1px solid var(--green)} .button-primary:hover{background:var(--green-dark);border-color:var(--green-dark);box-shadow:0 4px 12px color-mix(in srgb,var(--green) 18%,transparent)} .button-secondary{background:var(--card);color:var(--ink);border:1px solid var(--line)} .button-secondary:hover{border-color:var(--green);color:var(--green);background:var(--mint)} .button-next{border:1px solid var(--line);background:var(--mint);color:var(--green)} .text-button{border-radius:4px;font-size:12px;color:var(--green)} button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--green);outline-offset:3px} .auth-card{background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-raised)} .auth-tabs{gap:20px} .auth-tab{padding-bottom:12px;font-size:12px} .auth-card form h2{font-size:25px} .auth-card form label,#answer-form label{font-size:12px} .privacy-note{background:var(--paper);border:1px solid var(--line);border-radius:6px} .result{border:1px solid var(--line);border-radius:7px;background:var(--mint)} .result[data-grade="partial"]{background:color-mix(in srgb,var(--partial) 8%,var(--card))} .result[data-grade="incorrect"]{background:color-mix(in srgb,var(--error) 7%,var(--card))} .result[data-grade="correct"]{background:color-mix(in srgb,var(--success) 7%,var(--card))} .settings-list .setting-row,.audio-cues{box-shadow:none} .cue-grid input[type="checkbox"]{flex:none} .keep-signed-in input{flex:none} .search-box:focus-within{border-color:var(--green);box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 14%,transparent)} .empty-state{color:var(--muted)} @media(max-width:1000px){ .sidebar{width:208px;padding-right:13px;padding-left:13px} .app-main{margin-left:208px} .content{padding-right:clamp(20px,3vw,34px);padding-left:clamp(20px,3vw,34px)} .home-grid{grid-template-columns:minmax(0,1.15fr) minmax(210px,.85fr)} } @media(max-width:740px){ .sidebar{width:250px;padding:22px 17px 17px} .sidebar.open{box-shadow:12px 0 30px #34251b24} .content{padding:26px 18px 36px} .topbar{height:60px} .welcome-row,.page-heading{gap:14px} .nav-group[open]::before{bottom:16px} .feature-card{min-height:310px} } /* Targeted Learn and Leaderboard refinement. */ .practice-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px} .practice-actions .button{white-space:nowrap} .mnemonic-workspace{display:grid;grid-template-columns:minmax(260px,.78fr) minmax(0,1.22fr);align-items:start;gap:18px} .mnemonic-composer,.mnemonic-library{min-width:0} .mnemonic-composer{padding:24px} .mnemonic-composer-heading{padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--line)} .mnemonic-composer-heading p,.mnemonic-library-heading p{margin:7px 0 0;color:var(--muted);font-size:12px;line-height:1.55} .mnemonic-composer form{display:grid;gap:10px} .mnemonic-composer label:not(.checkbox-row){display:grid;gap:7px;color:var(--muted);font-size:11px;font-weight:650} .mnemonic-composer textarea{min-height:146px;line-height:1.6;resize:vertical} .mnemonic-options{display:grid;grid-template-columns:minmax(0,1fr) minmax(130px,.7fr);gap:12px;align-items:end;padding:13px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .mnemonic-options>label:last-child{min-width:0} .mnemonic-options select{width:100%;margin-top:7px} .mnemonic-composer-actions{display:flex;align-items:center;gap:12px;min-height:38px} .mnemonic-library{display:grid;gap:15px} .mnemonic-library-heading{display:flex;justify-content:space-between;align-items:end;gap:18px;padding:3px 2px} .mnemonic-library-heading h2{margin:5px 0 0;font:600 25px var(--serif)} .mnemonic-library-heading p{text-align:right;max-width:220px} .mnemonic-list{gap:10px} .mnemonic-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;padding:17px 18px;border-radius:9px;background:var(--card);box-shadow:var(--shadow-soft)} .mnemonic-item-copy{min-width:0} .mnemonic-item-title{display:flex;flex-wrap:wrap;gap:7px;align-items:center} .mnemonic-item-title strong{font:600 18px var(--serif);text-transform:capitalize} .mnemonic-item-title span{padding:3px 6px;border:1px solid var(--line);border-radius:4px;color:var(--muted);font:8px var(--mono);letter-spacing:.35px;text-transform:uppercase} .mnemonic-item-title span:first-of-type{background:var(--mint);color:var(--green);border-color:transparent} .mnemonic-item p{margin:10px 0 7px;color:var(--ink);font-size:13px;line-height:1.65} .mnemonic-item small{color:var(--muted);font-size:10px} .mnemonic-item-actions{display:flex;align-self:start;flex-wrap:wrap;justify-content:flex-end;gap:9px} .mnemonic-item-actions .text-button{min-height:0;padding:0;border:0;background:transparent;box-shadow:none;color:var(--green);font-size:11px} .mnemonic-item-actions .mnemonic-delete{color:#9a5748} .mnemonic-empty{padding:21px 18px;border:1px dashed var(--line);border-radius:8px;color:var(--muted);font-size:12px;line-height:1.6} .mnemonic-empty strong{display:block;color:var(--ink);font:600 18px var(--serif)} .mnemonic-empty p{margin:5px 0 0} .community-mnemonics{display:grid;gap:10px;margin-top:8px;padding-top:19px;border-top:1px solid var(--line)} .community-mnemonics .mnemonic-item{grid-template-columns:minmax(0,1fr);background:color-mix(in srgb,var(--paper) 38%,var(--card))} .leaderboard-score-info{margin:9px 0 14px;color:var(--muted);font-size:11px} .leaderboard-score-info summary{display:inline-flex;cursor:pointer;color:var(--green);font-weight:650} .leaderboard-score-info p{max-width:760px;margin:8px 0 0;line-height:1.6} .leaderboard-columns,.leaderboard-row{grid-template-columns:46px minmax(190px,1.55fr) minmax(86px,.75fr) repeat(5,minmax(78px,.64fr));column-gap:12px} .leaderboard-columns>span:not(:nth-child(2)),.leaderboard-row>.leaderboard-balanced,.leaderboard-row>.leaderboard-metric{text-align:right} .leaderboard-balanced{font-variant-numeric:tabular-nums} .nav-group-links .nav-link{position:relative;height:34px;margin-left:17px;padding:0 9px 0 14px;border-radius:5px;color:var(--muted);font-size:12px;gap:9px} .nav-group-links .nav-link>span{width:14px;font-size:14px;color:#ac998a} .nav-group-links .nav-link:hover{background:#f8f2eb;color:var(--ink)} .nav-group-links .nav-link.active{background:var(--mint);color:var(--green);font-weight:650} .nav-group-links .nav-link.active>span{color:var(--green)} .nav-group-links .nav-link::before{content:"";position:absolute;left:-1px;top:50%;width:10px;border-top:1px solid #ddcfc1;pointer-events:none} .nav-group:has(.nav-link.active)>summary{color:var(--green)} @media(max-width:740px){ .mnemonic-workspace{grid-template-columns:minmax(0,1fr);gap:16px} .mnemonic-composer{padding:19px 16px} .mnemonic-options{grid-template-columns:minmax(0,1fr)} .mnemonic-library-heading{align-items:start;flex-direction:column;gap:4px} .mnemonic-library-heading p{text-align:left} .mnemonic-item{grid-template-columns:minmax(0,1fr);gap:11px;padding:15px} .mnemonic-item-actions{justify-content:flex-start} .practice-actions{width:100%;justify-content:stretch} .practice-actions .button{flex:1} .leaderboard-columns,.leaderboard-row{grid-template-columns:30px repeat(3,minmax(0,1fr));gap:14px 10px} } @media(prefers-reduced-motion:reduce){.nav-group-links{animation:none!important}} @media(max-width:480px){ body{font-size:13px} .content{padding:22px 14px 30px} h1{font-size:34px;letter-spacing:-.9px} .lede{font-size:12px} .feature-card{min-height:290px;padding:19px} .practice-card{padding:20px 16px} .daily-practice-card{padding:20px 15px} .word-wrap h2{font-size:clamp(46px,13vw,62px)} .metric-grid{gap:8px} .metric-card{padding:13px;min-height:118px} .panel{padding:17px} .welcome-row,.page-heading{align-items:flex-start} .settings-savebar{backdrop-filter:blur(10px)} } @media(prefers-reduced-motion:reduce){ *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} } /* Shared sizing and surface tokens for filters, forms, menus, and utility actions. */ :root{ --space-xs:4px;--space-sm:8px;--space-md:14px;--space-lg:20px;--space-xl:30px; --control-height:42px;--control-height-compact:38px;--control-padding-x:12px; --control-radius:6px;--surface-control:var(--card);--border-control:#dfd2c5; --shadow-menu:0 8px 22px #47382b14;--control-gap:10px; } /* One quiet field treatment across Account, search, planning, feedback, and filters. */ .app-shell input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), .app-shell textarea,.app-shell select{ min-height:var(--control-height);padding:9px var(--control-padding-x); border:1px solid var(--border-control);border-radius:var(--control-radius); background-color:var(--surface-control);font:13px/1.45 var(--sans);color:var(--ink); box-shadow:none; } .app-shell input[type="search"]{-webkit-appearance:none;appearance:none} .app-shell input[type="search"]::-webkit-search-decoration, .app-shell input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none} .app-shell textarea{min-height:104px;padding:12px var(--control-padding-x);line-height:1.6} .app-shell input::placeholder,.app-shell textarea::placeholder{color:#a8998c;opacity:1} .app-shell input:focus,.app-shell textarea:focus,.app-shell select:focus, .app-shell .search-box:focus-within,.app-shell .custom-select.open .select-trigger{ outline:0;border-color:var(--green);box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 13%,transparent) } .app-shell select{height:var(--control-height);padding:0 34px 0 var(--control-padding-x);border-radius:var(--control-radius);background-color:var(--surface-control);background-position:calc(100% - 16px) 17px,calc(100% - 11px) 17px} .app-shell select option{padding:9px 12px;background:var(--card);color:var(--ink);font:13px var(--sans)} .app-shell select option:checked{background:var(--mint);color:var(--green)} .app-shell input:disabled,.app-shell textarea:disabled,.app-shell select:disabled{opacity:.55;cursor:not-allowed} .app-shell select.sr-only{position:absolute!important;width:1px!important;height:1px!important;min-width:1px!important;min-height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important} .search-box{height:var(--control-height);min-width:190px;border:1px solid var(--border-control);border-radius:var(--control-radius);background:var(--surface-control);padding:0 var(--control-padding-x);gap:9px} .search-box input{height:100%;min-height:0;padding:0;border:0;background:transparent;box-shadow:none;font-size:13px} .search-box input:focus{box-shadow:none} .planner-goal input[type="number"]{width:92px;min-height:var(--control-height-compact);display:inline-block;margin:0 5px;vertical-align:middle} .schedule-form input,.schedule-form select{width:100%} /* Buttons share one height/radius/type scale; quiet actions stay compact. */ .button{min-height:var(--control-height);padding:0 15px;border-radius:var(--control-radius);font:600 12px/1.2 var(--sans);letter-spacing:.005em} .button:disabled{opacity:.48;box-shadow:none;transform:none;cursor:not-allowed} .button-secondary{background:var(--surface-control);border:1px solid var(--border-control);color:var(--ink)} .button-secondary:hover:not(:disabled){background:var(--mint);border-color:color-mix(in srgb,var(--green) 36%,var(--line));color:var(--green)} .button-destructive,.destructive-button{min-height:var(--control-height);padding:0 14px;border:1px solid color-mix(in srgb,var(--error) 30%,var(--line));border-radius:var(--control-radius);background:color-mix(in srgb,var(--error) 6%,var(--card));color:var(--error);font:600 12px var(--sans)} .button-destructive:hover,.destructive-button:hover{background:color-mix(in srgb,var(--error) 12%,var(--card));border-color:var(--error)} .text-button{min-height:34px;padding:5px 2px;border-radius:4px;font:600 12px/1.3 var(--sans)} .cue-grid>button,.cue-preview{min-height:34px;padding:5px 10px;border:1px solid var(--line);border-radius:5px;background:var(--card);color:var(--muted);font:600 11px var(--sans)} .cue-grid>button:hover,.cue-preview:hover{border-color:var(--green);color:var(--green);background:var(--mint)} .close-button{border:1px solid var(--line);border-radius:5px;background:var(--card);color:var(--muted)} .music-control{min-height:36px;padding:0 11px;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--muted);font:600 11px var(--sans)} /* Native filters sit on one grid and wrap as a group rather than crowding headings. */ .performance-panel>.panel-heading{display:grid;grid-template-columns:minmax(0,1fr);gap:15px;margin-bottom:18px} .performance-filters{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--control-gap);padding-top:14px;border-top:1px solid var(--line)} .performance-filters select{width:auto;min-width:0;height:var(--control-height);min-height:var(--control-height);padding:0 34px 0 var(--control-padding-x);border-radius:var(--control-radius);font-size:12px} .performance-page-size-picker{flex:0 0 82px;min-width:0} #performance-sort{flex:1 1 150px} #performance-result-filter,#performance-difficulty-filter{flex:1 1 150px} .performance-list{gap:0;margin-top:3px} .performance-row{grid-template-columns:minmax(110px,1.2fr) auto minmax(66px,.65fr) minmax(76px,.8fr) minmax(105px,1fr) minmax(105px,1fr);gap:12px;padding:14px 10px;border-top:1px solid color-mix(in srgb,var(--line) 82%,transparent);font-size:11px;line-height:1.45} .performance-row>strong{font-size:15px;line-height:1.25} .performance-row .status-tag{justify-self:start} .status-tag{min-height:23px;padding:4px 7px;border:1px solid transparent;border-radius:4px;font:600 9px/1 var(--mono);letter-spacing:.025em} .list-pagination{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:15px;padding-top:14px;border-top:1px solid var(--line)} .list-pagination>span{margin-right:auto;color:var(--muted);font-size:12px} .list-pagination .button{min-height:var(--control-height-compact);padding:0 12px} .vocab-tools{display:flex;align-items:center;flex-wrap:wrap;gap:var(--control-gap);margin:0 0 18px;padding-top:4px} .vocab-tools .search-box{flex:1 1 240px} .vocab-tools select{width:auto;flex:0 1 180px;min-width:145px;height:var(--control-height);min-height:var(--control-height);padding:0 34px 0 var(--control-padding-x);font-size:12px} .word-row{grid-template-columns:minmax(120px,.85fr) minmax(0,2fr) auto auto;gap:14px;padding:16px 17px;border-radius:7px;background:var(--card);box-shadow:none} .word-row+.word-row{margin-top:7px} .word-row:hover{border-color:color-mix(in srgb,var(--green) 35%,var(--line));box-shadow:var(--shadow-soft)} .word-row-name{font-size:17px;line-height:1.25} .word-row-pos,.word-row-def,.performance-row>span{color:var(--muted)} .word-row-def{font-size:12px;line-height:1.55} /* Tabs remain understated, with selected and inactive states tied to the accent. */ .auth-tabs{gap:6px;margin-bottom:22px} .auth-tab{min-height:38px;padding:0 13px;border:0;border-bottom:2px solid transparent;border-radius:5px 5px 0 0;background:transparent;color:var(--muted);font:600 12px var(--sans)} .auth-tab:hover{background:var(--paper);color:var(--ink)} .auth-tab.active{border-bottom-color:var(--green);background:var(--mint);color:var(--green)} .settings-categories{gap:3px;padding:6px;border-radius:7px} .settings-category{min-height:37px;padding:8px 11px;border-radius:5px;font:500 12px var(--sans)} .settings-category.active{font-weight:650} .settings-savebar{gap:12px;padding:11px 13px;border-radius:7px;box-shadow:var(--shadow-soft)} .settings-savebar>div{gap:var(--space-sm)} /* Settings menus use the same measurements as native selects; their popovers stay static. */ .custom-select{min-width:188px} .select-trigger{height:var(--control-height);min-height:var(--control-height);padding:0 var(--control-padding-x);border:1px solid var(--border-control);border-radius:var(--control-radius);background:var(--surface-control);box-shadow:none;font:13px var(--sans)} .select-trigger>span:last-child{transform:none!important;transition:none!important} .select-options{top:calc(100% + 3px);right:0;left:0;gap:2px;padding:5px;border:1px solid var(--line);border-radius:6px;background:var(--card);box-shadow:var(--shadow-menu);animation:none!important} .select-options[hidden]{display:none} .select-options [role="option"]{min-height:38px;padding:9px 11px;border-radius:4px;background:transparent;color:var(--ink);font:13px/1.4 var(--sans)} .select-options [role="option"]:hover,.select-options [aria-selected="true"]{background:var(--mint);color:var(--green)} .custom-select.closing .select-options{display:none;animation:none!important;pointer-events:none} /* Consistent page rhythm and repeated list separation. */ .page-heading,.welcome-row{margin-bottom:var(--space-xl)} .page-heading .eyebrow,.welcome-row .eyebrow{margin-bottom:var(--space-xs)} .page-heading h1,.welcome-row h1{margin-top:var(--space-sm);margin-bottom:var(--space-sm)} .page-heading .lede,.welcome-row .lede{margin-top:0} .panel-heading{gap:var(--space-md);margin-bottom:var(--space-lg)} .panel-heading h2{margin-top:var(--space-xs)} .progress-columns{gap:var(--space-lg);margin-top:var(--space-lg)} .progress-columns>.panel,.dashboard-sections>.panel,.settings-panel>.panel,.profile-grid>.panel{margin-bottom:var(--space-md)} .review-item{gap:var(--space-md);padding:10px 2px} .review-subsection{margin-top:var(--space-lg)} .settings-list{gap:var(--space-sm)} .settings-list .setting-row{padding:17px 18px} .setting-row>div:first-child h2{margin:0 0 4px;font-size:14px} .setting-row>div:first-child p{margin:0;color:var(--muted);font-size:12px;line-height:1.5} .inbox-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--control-gap);margin-bottom:var(--space-lg)} .inbox-toolbar input{flex:1 1 220px} .inbox-toolbar select{flex:0 1 190px} .social-search{display:flex;align-items:center;gap:var(--control-gap)} .social-search input{flex:1;min-width:0} .leaderboard-panel>select{max-width:300px;margin-right:var(--space-sm)} .schedule-form{gap:var(--space-md)} .focus-actions{gap:var(--space-sm)} @media(max-width:1000px){ .performance-row{grid-template-columns:minmax(100px,1fr) auto minmax(65px,.7fr) minmax(75px,.8fr);gap:10px} .performance-row span:nth-last-child(-n+2){display:none} .performance-filters{gap:8px} } @media(max-width:740px){ .performance-panel>.panel-heading{gap:12px} .performance-filters{padding-top:12px} .performance-filters select{flex:1 1 145px} .performance-page-size-picker{flex:0 0 78px} .vocab-tools{gap:8px} .vocab-tools .search-box{flex-basis:100%} .vocab-tools select{flex:1 1 145px;min-width:0} .word-row{grid-template-columns:minmax(100px,1fr) auto;gap:7px 12px;padding:14px} .word-row-def{grid-column:1/-1;grid-row:2} .word-row .status-tag{grid-column:2;grid-row:1} .inbox-toolbar input,.inbox-toolbar select{flex:1 1 145px} } @media(max-width:480px){ .performance-filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .performance-filters select,.performance-page-size-picker{width:100%;min-width:0} .performance-page-size-picker{grid-column:1/-1} .performance-row{grid-template-columns:minmax(80px,1fr) auto;gap:7px 10px;padding:12px 7px} .performance-row span:nth-last-child(-n+3){display:none} .performance-row>strong{font-size:14px} .list-pagination{gap:6px} .list-pagination .button{padding:0 9px;font-size:11px} .social-search{align-items:stretch} .social-search .button{padding:0 10px} } /* Product pass: a calmer learning rhythm with reusable planner, list and feedback patterns. */ .progress-view-tabs{display:flex;gap:5px;max-width:max-content;margin:-8px 0 18px;padding:4px;border:1px solid var(--line);border-radius:9px;background:var(--card)} .progress-view-tabs button{border:0;border-radius:6px;padding:9px 14px;background:transparent;color:var(--muted);font-size:11px} .progress-view-tabs button[aria-pressed="true"]{background:var(--mint);color:var(--green);font-weight:650} [data-progress-group][hidden]{display:none!important} .daily-study-panel{overflow:hidden} .daily-study-grid{gap:10px} .daily-study-grid>div{min-width:0;padding:12px 13px;border:1px solid var(--line);border-radius:8px;background:color-mix(in srgb,var(--card) 72%,var(--paper))} .daily-study-grid>div strong{font:600 24px var(--serif);color:var(--green)} .daily-study-grid>div span{display:block;margin-top:4px;font-size:10px;color:var(--muted)} .weekly-constellation{position:relative;margin:0 0 13px;padding:7px 12px 3px;border:1px solid var(--line);border-radius:9px;background:color-mix(in srgb,var(--paper) 65%,var(--card))} .weekly-constellation svg{display:block;width:100%;height:96px;overflow:visible} .constellation-line{fill:none;stroke:var(--green);stroke-opacity:.42;stroke-width:1.5} .constellation-guide{stroke:var(--green);stroke-opacity:.13;stroke-width:1} .constellation-node{fill:var(--card);stroke:var(--green);stroke-width:2} .constellation-value,.constellation-label{fill:var(--muted);font:9px var(--mono);text-anchor:middle} .constellation-label{font-size:8px} .constellation-caption{position:absolute;right:12px;top:10px;color:var(--muted);font:8px var(--mono);letter-spacing:.3px} .practice-session-meta{display:grid;grid-template-columns:auto auto;justify-items:end;align-items:center;gap:3px 9px;padding:9px 12px;border:1px solid var(--line);border-radius:8px;background:var(--card)} .practice-session-meta .session-clock-label{grid-column:1/-1;color:var(--muted);font:8px var(--mono);letter-spacing:1px} .practice-session-meta time{font:600 16px var(--mono);font-variant-numeric:tabular-nums;color:var(--green)} .practice-session-meta .practice-round{font:8px var(--mono);color:var(--muted)} #answer{min-height:142px;padding:18px 19px;border:1px solid color-mix(in srgb,var(--green) 28%,var(--line));border-radius:9px;background:color-mix(in srgb,var(--paper) 45%,var(--card));font:17px/1.65 var(--sans);transition:border-color .18s,box-shadow .18s} #answer:focus{border-color:var(--green);box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 13%,transparent);outline:0} .mnemonic-reveal{margin:18px 0 0;padding:19px 21px;border-left:3px solid var(--gold);border-radius:0 9px 9px 0;background:color-mix(in srgb,var(--mint) 72%,var(--card));overflow-wrap:anywhere} .mnemonic-reveal:not([hidden]){animation:mnemonic-enter .28s ease-out both} .mnemonic-reveal h3{margin:7px 0 5px;font:600 23px var(--serif);text-transform:capitalize} .mnemonic-reveal p{margin:0 0 14px;color:var(--muted);font-size:13px;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere} @keyframes mnemonic-enter{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}} .focus-panel{max-width:740px;margin:0 auto;padding:clamp(26px,5vw,58px);text-align:center;background:linear-gradient(180deg,var(--card),color-mix(in srgb,var(--paper) 45%,var(--card)))} .focus-context .eyebrow{justify-content:center;color:var(--green)} .focus-context p{color:var(--muted);font-size:12px} .focus-clock{margin:23px 0 26px;color:var(--ink);font:500 clamp(58px,11vw,98px)/1 var(--mono);letter-spacing:-.08em;font-variant-numeric:tabular-nums} .focus-duration{display:flex;justify-content:center;align-items:center;gap:12px;margin-bottom:20px;color:var(--muted);font-size:11px} .focus-duration select,.focus-duration input{width:auto;min-width:148px;border:1px solid var(--line);border-radius:7px;padding:10px 12px;background:var(--card);color:var(--ink)} .focus-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:9px} .focus-status{min-height:18px;margin:16px 0 6px} .focus-summary{max-width:560px;margin:26px auto 0;padding:22px;border-top:1px solid var(--line);text-align:left} .focus-summary h2{margin:6px 0 18px;font:600 27px var(--serif)} .focus-summary-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px} .focus-summary-stats>div{padding:10px;border:1px solid var(--line);border-radius:7px} .focus-summary-stats strong,.focus-summary-stats span{display:block} .focus-summary-stats strong{font:600 20px var(--serif)} .focus-summary-stats span{margin-top:3px;color:var(--muted);font-size:9px} .focus-summary-actions{display:flex;flex-wrap:wrap;gap:8px} .review-queue-summary{align-items:center} .review-queue-columns{gap:28px} .planner-panel{padding:clamp(16px,3vw,26px)} .week-planner-heading,.calendar-toolbar{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:18px} .week-planner-heading h2,.calendar-toolbar h2{margin:6px 0 0;font:600 23px var(--serif)} .week-controls,.calendar-controls{display:flex;align-items:center;gap:4px} .week-controls .button,.calendar-controls .button{padding:8px 11px} .week-plan{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)} .week-day{min-width:0;min-height:172px;padding:9px 7px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--card)} .week-day.today{background:color-mix(in srgb,var(--mint) 46%,var(--card))} .week-day-heading{display:flex;justify-content:space-between;align-items:center;width:100%;border:0;background:none;color:var(--muted);padding:2px 1px 8px;text-align:left} .week-day-heading span{font:9px var(--mono);text-transform:uppercase;letter-spacing:.5px} .week-day-heading strong{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;font:600 13px var(--sans);color:var(--ink)} .week-day.today .week-day-heading strong{background:var(--green);color:#fff} .week-day-sessions{display:grid;gap:6px} .week-day-empty{padding:7px 3px;color:color-mix(in srgb,var(--muted) 70%,transparent);font:9px var(--mono)} .week-session{min-width:0;padding:7px 6px;border-left:2px solid var(--green);border-radius:0 5px 5px 0;background:color-mix(in srgb,var(--mint) 67%,var(--card));overflow-wrap:anywhere} .week-session.status-completed{border-color:#71977c;opacity:.72} .week-session.status-missed{border-color:#ba705d;background:color-mix(in srgb,#f0e1dc 50%,var(--card))} .week-session time,.week-session strong,.week-session small{display:block} .week-session time{color:var(--muted);font:8px var(--mono)} .week-session strong{margin:3px 0;font-size:10px;line-height:1.35} .week-session small{color:var(--muted);font-size:8px} .week-session-actions{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px} .week-session-actions .text-button{font-size:8px;padding:2px 0} .week-flexible-list{display:grid;gap:7px;margin-top:14px} .week-flexible-list>.eyebrow{margin-bottom:1px} .flexible-session{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px;border:1px dashed var(--line);border-radius:7px} .flexible-session strong,.flexible-session small{display:block} .flexible-session strong{font:600 14px var(--serif)} .flexible-session small{margin-top:3px;color:var(--muted);font-size:10px} .flexible-session>div:last-child{display:flex;flex-wrap:wrap;gap:9px} .flexible-session .text-button{font-size:9px} .planner-review{display:flex;justify-content:space-between;align-items:center;gap:18px;margin:18px 0;padding:13px 15px;border-left:2px solid var(--gold);background:color-mix(in srgb,var(--paper) 65%,var(--card))} .planner-review .eyebrow{font-size:8px} .planner-review strong{display:block;margin:5px 0;font:600 16px var(--serif)} .planner-review p{margin:0;color:var(--muted);font-size:10px;line-height:1.5;overflow-wrap:anywhere} .planner-review .button{flex:none} .schedule-form{grid-template-columns:1.35fr 1fr 1.1fr .7fr;align-items:end;border-top:1px solid var(--line);padding-top:18px} .schedule-form label{min-width:0} .schedule-form input,.schedule-form select,.planner-goal input{min-width:0;width:100%;margin-top:6px;padding:10px 11px;border:1px solid var(--line);border-radius:7px;background:var(--card);color:var(--ink);font-size:11px} .schedule-form-actions{grid-column:1/-1;display:flex;gap:8px} .planner-goal{display:flex;flex-wrap:wrap;align-items:end;gap:9px;margin-top:15px;padding-top:15px;border-top:1px solid var(--line)} .planner-goal label{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:10px} .planner-goal input{width:100px;margin:0} .planner-goal .muted{align-self:center;flex:1 1 150px} .calendar-panel{padding:clamp(16px,3vw,26px)} .calendar-view{margin-top:14px} .calendar-weekdays,.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))} .calendar-weekdays{border:1px solid var(--line);border-bottom:0;background:color-mix(in srgb,var(--paper) 55%,var(--card))} .calendar-weekdays span{padding:10px;text-align:center;color:var(--muted);font:9px var(--mono);text-transform:uppercase} .calendar-day{min-width:0;min-height:112px;padding:5px;border:1px solid var(--line);margin:0 -1px -1px 0;background:var(--card)} .calendar-day.outside-month{background:color-mix(in srgb,var(--paper) 68%,var(--card))} .calendar-day.today{box-shadow:inset 0 2px 0 var(--green)} .calendar-day-number{display:grid;place-items:center;width:25px;height:25px;border:0;border-radius:50%;background:transparent;color:var(--ink);font-size:10px} .calendar-day.today .calendar-day-number{background:var(--green);color:#fff} .calendar-day.outside-month .calendar-day-number{color:var(--muted)} .calendar-event{display:block;width:100%;margin:4px 0 0;padding:4px 5px;border:0;border-radius:4px;background:var(--mint);color:var(--green-dark);font-size:9px;text-align:left;text-overflow:ellipsis;white-space:nowrap;overflow:hidden} .calendar-event.status-missed{background:#f1e4df;color:#8f4937} .calendar-event.status-completed{opacity:.68} .calendar-event span{font:8px var(--mono);margin-right:3px} .calendar-more{display:block;padding:3px;color:var(--muted);font-size:8px} .calendar-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:15px;color:var(--muted);font-size:10px} .my-word-row .word-row-def small{display:block;margin-top:5px;color:var(--muted);font-size:9px} .word-memory-cue{padding:9px 0;border-top:1px solid var(--line);overflow-wrap:anywhere} .word-memory-cue p{margin:0 0 4px;white-space:pre-wrap;line-height:1.55} .word-memory-cue small{color:var(--muted);font:8px var(--mono);text-transform:uppercase;letter-spacing:.5px} .mnemonic-panel{display:grid;grid-template-columns:minmax(230px,.72fr) minmax(0,1.28fr);gap:26px;padding:24px} .mnemonic-panel form{display:grid;align-content:start;gap:10px} .mnemonic-panel textarea{min-height:130px;resize:vertical} .mnemonic-list{min-width:0;display:grid;align-content:start;gap:9px} .mnemonic-list>article,.mnemonic-list>.mnemonic-item{min-width:0;overflow-wrap:anywhere} .mnemonic-item{padding:13px 14px;border:1px solid var(--line);border-radius:8px;background:color-mix(in srgb,var(--paper) 45%,var(--card))} .mnemonic-item p{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.6} .social-group{margin-top:22px} .social-group h3{display:flex;align-items:center;gap:8px;padding-bottom:8px;border-bottom:1px solid var(--line);font:600 16px var(--serif)} .social-group h3 span{display:grid;place-items:center;min-width:21px;height:21px;padding:0 6px;border-radius:20px;background:var(--mint);color:var(--green);font:9px var(--mono)} .social-friend-item{display:flex;align-items:center;gap:11px;padding:12px 4px;border-bottom:1px solid var(--line)} .social-friend-copy{min-width:120px;flex:1} .social-friend-copy strong,.social-friend-copy small{display:block} .social-friend-copy small{margin-top:3px;color:var(--muted);font-size:10px} .social-status{padding:4px 7px;border-radius:4px;background:color-mix(in srgb,var(--paper) 75%,var(--card));color:var(--muted);font:8px var(--mono)} .social-status.accepted{background:var(--mint);color:var(--green)} .social-friend-item .button{padding:8px 10px} .leaderboard-heading{display:flex;justify-content:space-between;align-items:center;gap:12px} .leaderboard-heading h2{margin:5px 0;font:600 21px var(--serif)} .leaderboard-table{overflow-x:auto} .leaderboard-columns,.leaderboard-row{display:grid;grid-template-columns:70px minmax(150px,1.35fr) minmax(120px,1fr) minmax(90px,.6fr);align-items:center;gap:12px} .leaderboard-columns{padding:10px 14px;border-bottom:1px solid var(--line);color:var(--muted);font:8px var(--mono);letter-spacing:.5px;text-transform:uppercase} .leaderboard-columns span:last-child,.leaderboard-score{text-align:right} .leaderboard-list{margin:0;padding:0;list-style:none;min-width:520px} .leaderboard-row{min-height:58px;padding:8px 14px;border-bottom:1px solid var(--line);font-size:11px} .leaderboard-row.current-user{background:color-mix(in srgb,var(--mint) 65%,var(--card))} .leaderboard-rank{color:var(--muted);font:11px var(--mono)} .leaderboard-learner{display:flex;align-items:center;gap:9px;min-width:0} .leaderboard-learner strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .leaderboard-username{color:var(--muted);font:10px var(--mono)} .leaderboard-score{font:600 17px var(--serif);font-variant-numeric:tabular-nums} .leaderboard-empty{padding:25px 14px;border-bottom:1px solid var(--line);color:var(--muted);font-size:11px} .inbox-toolbar{padding-bottom:14px;border-bottom:1px solid var(--line)} .inbox-status-picker{min-width:165px} .inbox-layout{display:grid;grid-template-columns:155px minmax(225px,.8fr) minmax(280px,1.25fr);min-height:440px;border:1px solid var(--line);border-radius:8px;overflow:hidden} .inbox-counts{display:grid;align-content:start;gap:3px;padding:10px;border-right:1px solid var(--line);background:color-mix(in srgb,var(--paper) 50%,var(--card))} .inbox-count{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 8px;border:0;border-radius:5px;background:transparent;color:var(--muted);text-align:left;font-size:10px} .inbox-count strong{font:10px var(--mono)} .inbox-count:hover,.inbox-count.active{background:var(--mint);color:var(--green)} .inbox-list{min-width:0;max-height:650px;overflow:auto;border-right:1px solid var(--line)} .inbox-item{display:grid;grid-template-columns:1fr auto;gap:5px 9px;width:100%;padding:12px;border:0;border-bottom:1px solid var(--line);background:var(--card);color:var(--ink);text-align:left} .inbox-item:hover,.inbox-item.selected{background:color-mix(in srgb,var(--mint) 48%,var(--card))} .inbox-type{grid-column:1/-1;color:var(--green);font:8px var(--mono);text-transform:uppercase} .inbox-sender{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px} .inbox-message-preview{grid-column:1/-1;color:var(--muted);font-size:10px;line-height:1.5;overflow-wrap:anywhere} .inbox-meta{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:6px;color:var(--muted);font:8px var(--mono)} .inbox-status-tag{padding:3px 5px;border-radius:3px;background:color-mix(in srgb,var(--paper) 70%,var(--card))} .inbox-detail{min-width:0;padding:20px;overflow-wrap:anywhere} .inbox-detail h2{font:600 20px/1.35 var(--serif);overflow-wrap:anywhere} .inbox-detail p{white-space:pre-wrap;line-height:1.6;overflow-wrap:anywhere} .inbox-detail label{display:grid;gap:6px;margin-top:14px;color:var(--muted);font-size:10px} .inbox-detail .admin-private-notes{padding:12px;border:1px solid color-mix(in srgb,var(--gold) 35%,var(--line));border-radius:7px;background:color-mix(in srgb,#fbf4e8 45%,var(--card))} .inbox-detail .admin-private-notes textarea{background:var(--card)} .inbox-detail-status-message{min-height:16px} .sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important} :focus-visible{outline:2px solid color-mix(in srgb,var(--green) 70%,transparent);outline-offset:2px} @media(max-width:1050px){.week-plan{grid-template-columns:repeat(7,minmax(95px,1fr));overflow-x:auto}.week-day{min-height:150px}.schedule-form{grid-template-columns:repeat(2,minmax(0,1fr))}.inbox-layout{grid-template-columns:135px minmax(210px,.9fr) minmax(240px,1.1fr)}} @media(max-width:740px){.progress-view-tabs{max-width:100%;width:100%;justify-content:stretch}.progress-view-tabs button{flex:1;padding:9px 6px}.daily-study-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.focus-panel{padding:28px 17px}.focus-summary-stats{grid-template-columns:repeat(2,1fr)}.week-plan{grid-template-columns:repeat(7,minmax(130px,1fr));overflow-x:auto}.week-planner{overflow:hidden}.calendar-day{min-height:82px;padding:3px}.calendar-event{height:14px;padding:0;overflow:hidden;font-size:0}.calendar-event:before{content:"";display:inline-block;width:6px;height:6px;margin:4px;border-radius:50%;background:var(--green)}.calendar-event.status-missed:before{background:#b5634f}.calendar-event span{display:none}.calendar-weekdays span{padding:8px 1px;font-size:8px}.calendar-more{font-size:7px}.mnemonic-panel{grid-template-columns:1fr}.inbox-layout{grid-template-columns:1fr;min-height:0}.inbox-counts{grid-template-columns:repeat(5,minmax(0,1fr));border-right:0;border-bottom:1px solid var(--line);padding:6px}.inbox-count{display:grid;justify-items:center;gap:3px;text-align:center;padding:8px 3px;font-size:8px}.inbox-list{max-height:320px;border-right:0;border-bottom:1px solid var(--line)}.inbox-detail{min-height:210px;padding:16px}.social-friend-item{flex-wrap:wrap}.social-friend-item .social-status{margin-left:auto}.leaderboard-table{margin-right:-5px}.planner-review{align-items:flex-start;flex-direction:column}.planner-review .button{align-self:flex-start}} @media(max-width:480px){.practice-session-meta{padding:7px 8px}.practice-session-meta time{font-size:13px}.practice-session-meta .practice-round{font-size:7px}.weekly-constellation{padding-top:24px}.constellation-caption{left:11px;right:auto}.week-planner-heading,.calendar-toolbar{align-items:flex-start;flex-wrap:wrap}.week-controls,.calendar-controls{margin-left:auto}.week-controls .button,.calendar-controls .button{font-size:9px;padding:8px}.schedule-form{grid-template-columns:1fr}.schedule-form-actions{grid-column:auto;flex-wrap:wrap}.planner-goal{align-items:stretch}.planner-goal label{width:100%;justify-content:space-between}.planner-goal .muted{flex-basis:100%}.calendar-footer{align-items:flex-start;flex-direction:column}.calendar-event{margin-top:3px}.leaderboard-columns,.leaderboard-row{grid-template-columns:38px minmax(100px,1fr) minmax(95px,.8fr) 72px;gap:8px;padding-right:8px;padding-left:8px}.leaderboard-username{font-size:8px}.inbox-status-picker{flex:1 1 145px}.inbox-counts{grid-template-columns:repeat(5,minmax(46px,1fr));overflow-x:auto}.inbox-count{font-size:7px}} .progress-activity-summary{margin:0 0 18px} .vocabulary-insights{display:grid;gap:7px;margin-top:18px;padding-top:15px;border-top:1px solid var(--line)} .vocabulary-insights h3{margin:0;font:600 13px var(--serif)} .mastery-distribution{display:grid;gap:7px;margin:3px 0 8px} .mastery-row{display:grid;grid-template-columns:95px minmax(35px,1fr) 24px;align-items:center;gap:8px;color:var(--muted);font-size:9px} .mastery-row strong{text-align:right;color:var(--ink);font:10px var(--mono)} .mastery-track{height:5px;border-radius:8px;background:var(--line);overflow:hidden} .mastery-track i{display:block;height:100%;border-radius:inherit;background:var(--gold)} .mastery-track .mastery-mastered{background:var(--green)} .mastery-track .mastery-familiar{background:#85a77c} .mastery-track .mastery-learning{background:#c8995d} .mastery-track .mastery-review{background:#b46f5e} .vocabulary-difficult-words .review-item{padding:6px 0} .inbox-detail-time{display:block;margin:-7px 0 17px;color:var(--muted);font:9px var(--mono)} .admin-private-notes small{color:var(--muted);font-size:9px} .inbox-detail .admin-private-notes textarea{min-height:90px} .social-howto{margin:9px 0 14px;font-size:11px;line-height:1.55} .calendar-event.status-skipped{opacity:.48} .week-session.status-skipped{opacity:.55} html[data-theme="dark"] .inbox-detail .admin-private-notes{background:#302d24} html[data-theme="dark"] .calendar-event.status-missed{background:#4c302b;color:#f1c2b3} html[data-theme="dark"] .week-session.status-missed{background:#4c302b} @media(max-width:480px){.mastery-row{grid-template-columns:82px minmax(30px,1fr) 20px}.daily-study-grid>div{padding:10px}.constellation-caption{font-size:7px}} .calendar-review-marker{display:block;margin:4px 0;padding:3px 4px;border-radius:4px;background:color-mix(in srgb,#e6d2ab 45%,var(--card));color:#815e2b;font:7px var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} html[data-theme="dark"] .calendar-review-marker{background:#493c28;color:#e5c98f} @media(max-width:740px){.calendar-review-marker{font-size:0;width:8px;height:8px;padding:0;border-radius:50%;background:var(--gold);margin:4px}} /* Finishing layer: consistent fields, compact select menus, and quiet view changes. */ .app-shell input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), .app-shell textarea, .app-shell select, .select-trigger{ border-radius:var(--control-radius); border-color:var(--border-control); box-shadow:none; } .app-shell input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):hover, .app-shell textarea:hover, .app-shell select:hover, .select-trigger:hover{border-color:color-mix(in srgb,var(--green) 35%,var(--border-control))} .app-shell input:focus-visible, .app-shell textarea:focus-visible, .select-trigger:focus-visible, .select-options [role="option"]:focus-visible{ outline:2px solid color-mix(in srgb,var(--green) 50%,transparent); outline-offset:2px; } .button{min-height:38px;display:inline-flex;align-items:center;justify-content:center} .page{animation:none} .page.page-entering{animation:wordwise-page-enter var(--motion-view) var(--motion-ease) both} .settings-panel{animation:none} .settings-panel.view-entering,#progress-view-content.view-entering{animation:wordwise-page-enter 190ms var(--motion-ease) both} @keyframes wordwise-page-enter{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}} .custom-select .select-trigger>span:last-child{transition:transform 140ms ease!important} .custom-select.open .select-trigger>span:last-child{transform:rotate(180deg)!important} .select-options{transform-origin:top center;will-change:opacity,transform} .custom-select.open .select-options{animation:wordwise-select-open 150ms cubic-bezier(.2,.65,.3,1) both!important} .custom-select.closing .select-options{display:grid;animation:wordwise-select-close 120ms ease both!important;pointer-events:none} @keyframes wordwise-select-open{from{opacity:0;transform:translateY(-3px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}} @keyframes wordwise-select-close{from{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-2px) scale(.99)}} #page-achievements .achievement-list.achievement-list-entering{animation:wordwise-list-enter var(--motion-fast) var(--motion-ease) both} @keyframes wordwise-list-enter{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}} .vocab-tools .vocabulary-filter-select{flex:0 1 180px;min-width:150px} .my-words-tools .vocabulary-filter-select{flex:0 1 180px;min-width:150px} .schedule-form{grid-template-columns:minmax(0,1.45fr) minmax(145px,.9fr) minmax(145px,.85fr);gap:18px 14px;align-items:end} .schedule-form.has-timing{grid-template-columns:minmax(0,1.35fr) minmax(135px,.82fr) minmax(190px,1.15fr) minmax(125px,.75fr)} .schedule-form>label{display:grid;align-content:end;gap:7px;color:var(--muted);font-size:12px;font-weight:600;line-height:1.35} .schedule-form>label>input{width:100%;min-width:0;height:var(--control-height);min-height:var(--control-height);margin:0;padding:0 var(--control-padding-x);font-size:13px} .schedule-form .custom-select{width:100%;min-width:0;margin:0} .planner-goal{align-items:center;gap:10px 12px} .planner-goal label{gap:8px;font-size:12px;font-weight:600} .planner-goal input[type="number"]{width:96px;height:var(--control-height-compact);min-height:var(--control-height-compact);padding:0 10px;font-size:13px} .schedule-form-actions{align-items:center;gap:8px} .schedule-form-actions .button{min-width:112px} .focus-duration .custom-select{min-width:148px} .vocab-tools .custom-select,.my-words-tools .custom-select{min-width:0} .weekly-constellation{width:min(100%,760px);margin:0 auto 16px;padding:10px 14px 5px} .weekly-constellation svg{width:min(100%,660px);height:clamp(126px,18vw,176px);margin:0 auto;overflow:visible} .leaderboard-method{max-width:720px;margin:7px 0 12px;line-height:1.55} .leaderboard-table{border:1px solid var(--line);border-radius:8px;overscroll-behavior-x:contain} .leaderboard-columns,.leaderboard-row{grid-template-columns:44px minmax(175px,1.45fr) repeat(6,minmax(76px,.62fr));gap:10px} .leaderboard-columns{position:sticky;left:0;padding:11px 13px;background:color-mix(in srgb,var(--paper) 75%,var(--card));font-size:8px;letter-spacing:.45px} .leaderboard-list{min-width:850px} .leaderboard-row{min-height:62px;padding:9px 13px;font-variant-numeric:tabular-nums} .leaderboard-rank{font-size:10px} .leaderboard-learner{gap:9px} .leaderboard-avatar{width:34px;height:34px;display:grid;place-items:center;flex:none;overflow:hidden;border:1px solid var(--line);border-radius:50%;background:var(--mint)} .leaderboard-avatar .avatar-art{display:block;width:100%;height:100%} .leaderboard-person{display:grid;gap:3px;min-width:0} .leaderboard-person strong{font-size:12px} .leaderboard-person small{overflow:hidden;color:var(--muted);font:9px var(--mono);text-overflow:ellipsis;white-space:nowrap} .leaderboard-balanced{text-align:center;color:var(--green);font:600 16px var(--serif)} .leaderboard-balanced small{margin-left:2px;color:var(--muted);font:9px var(--sans)} .leaderboard-metric{text-align:center;color:var(--ink);font:11px var(--mono)} .leaderboard-unranked{color:var(--muted)} .leaderboard-row.current-user{box-shadow:inset 2px 0 0 var(--green);background:color-mix(in srgb,var(--mint) 60%,var(--card))} .leaderboard-row.current-user .leaderboard-person strong{color:var(--green)} .leaderboard-empty{min-width:850px} @media(max-width:1050px){.schedule-form,.schedule-form.has-timing{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:740px){ .vocab-tools .custom-select,.my-words-tools .custom-select{flex:1 1 145px;width:auto} .schedule-form,.schedule-form.has-timing{grid-template-columns:repeat(2,minmax(0,1fr));gap:15px 12px} .schedule-form-actions{grid-column:1/-1} .weekly-constellation{width:100%;padding-right:9px;padding-left:9px} .weekly-constellation svg{height:clamp(126px,27vw,160px)} .leaderboard-table{margin:0;} } @media(max-width:480px){ .schedule-form,.schedule-form.has-timing{grid-template-columns:minmax(0,1fr)} .schedule-form-actions{grid-column:auto;flex-wrap:wrap} .schedule-form-actions .button{flex:1 1 132px} .planner-goal label{justify-content:flex-start} .planner-goal input[type="number"]{margin-left:auto} .weekly-constellation svg{height:132px} .constellation-caption{font-size:7px} } @media(prefers-reduced-motion:reduce){ .page.page-entering,.settings-panel.view-entering,#progress-view-content.view-entering, .custom-select.open .select-options,.custom-select.closing .select-options,#page-achievements .achievement-list.achievement-list-entering{animation:none!important} .custom-select .select-trigger>span:last-child{transition:none!important} } /* Continuation: adaptive learning, tables and shared control geometry. */ :root{--border-control:color-mix(in srgb,var(--line) 82%,var(--ink) 18%);--motion-fast:140ms;--motion-view:210ms;--motion-ease:cubic-bezier(.2,.65,.3,1)} .practice-layout{max-width:780px;margin-inline:auto;grid-template-columns:minmax(0,1fr)} .practice-card .word-wrap{text-align:center} .practice-aside{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:stretch} .practice-aside>div{padding:18px 22px} .practice-aside .aside-note>span{display:none} .practice-aside h3{margin:0 0 8px;font-size:18px} .practice-aside .aside-progress .eyebrow{margin-bottom:8px} .practice-card .form-bottom{gap:12px} .enhanced-select{min-width:0;width:100%} .select-trigger{min-width:0;width:100%;gap:12px} .select-trigger>[data-select-value]{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .select-options{max-height:min(280px,45vh);overflow-y:auto;overscroll-behavior:contain} .custom-select.open{z-index:30} .select-options [role="option"]:disabled{opacity:.45;cursor:not-allowed} .performance-filters{flex-wrap:wrap;gap:8px} .performance-filters .enhanced-select{flex:1 1 128px;max-width:180px} .performance-filters .performance-page-size-picker{width:68px;flex:none} .mnemonic-panel label,.mnemonic-panel form{min-width:0} .detail-card{max-height:calc(100dvh - 40px);overflow:auto} .detail-card>p{color:var(--muted)} .detail-card>.button{margin-top:15px;margin-right:6px} .leaderboard-columns{position:static;min-width:850px} .leaderboard-empty{min-width:0} .inbox-layout{overflow:visible} .performance-row>span{display:block!important;overflow-wrap:anywhere} @media(max-width:1050px){ .performance-row{grid-template-columns:minmax(90px,1fr) auto 1fr} .performance-row>span:nth-child(4){grid-column:1} .week-plan{grid-template-columns:repeat(7,minmax(0,1fr));overflow:visible} .week-session{padding:8px 5px} .week-session-actions{display:grid;gap:5px} .week-session-actions .text-button{text-align:left;font-size:10px} } @media(max-width:740px){ .app-main{margin-left:0} .practice-layout{width:100%} .practice-aside{grid-template-columns:minmax(0,1fr)} .practice-aside>div{padding:16px 18px} .week-plan{grid-template-columns:minmax(0,1fr);border-left:0} .week-day{display:grid;grid-template-columns:62px minmax(0,1fr);min-height:76px;border-right:0;padding:10px 0} .week-day-heading{display:grid;align-content:start;gap:3px;padding:8px} .week-day-sessions{padding:0 6px} .week-day-empty{display:block;padding:15px 5px} .week-session{padding:12px} .week-session-actions{display:flex;flex-wrap:wrap;gap:8px 12px} .week-session-actions .text-button{font-size:11px} .performance-filters .enhanced-select{max-width:none} .performance-row{grid-template-columns:minmax(0,1fr) auto;gap:8px 12px} .performance-row>span:nth-child(4){grid-column:auto} .leaderboard-columns{display:none} .leaderboard-list{min-width:0} .leaderboard-row{grid-template-columns:30px repeat(3,minmax(0,1fr));gap:14px 10px;padding:18px 12px} .leaderboard-learner{grid-column:2/4} .leaderboard-balanced{grid-column:4;text-align:right} .leaderboard-metric{display:grid;gap:5px;text-align:left;font-size:11px} .leaderboard-metric:nth-child(4){grid-column:2} .leaderboard-metric:nth-child(7){grid-column:2} .leaderboard-metric::before,.leaderboard-balanced::before{content:attr(data-label);display:block;font:9px var(--sans);color:var(--muted);margin-bottom:3px} .calendar-cell{min-width:0;padding:3px;min-height:98px} .calendar-event{font-size:9px;line-height:1.3;width:auto;height:auto;border-radius:3px;padding:4px 2px;overflow-wrap:anywhere;white-space:normal} .calendar-event time{display:block;font-size:8px} .calendar-review-marker{font-size:8px;width:auto;height:auto;border-radius:3px;padding:3px;margin:3px 0;background:var(--mint);color:var(--green)} } @media(max-width:480px){ .practice-card .form-bottom{align-items:stretch;flex-direction:column} .practice-card .form-bottom .keyboard-hint{align-self:center} .practice-card .form-bottom .button{width:100%} .detail-card{padding:22px 18px} .performance-filters{width:100%} } /* Queue and planner structure: explicit layouts also cover first-use empty states. */ .schedule-form{display:grid} .review-queue-summary{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-bottom:24px;border-bottom:1px solid var(--line)} .review-queue-summary h2{font:600 27px var(--serif);margin:10px 0} .review-queue-summary p{margin:0;line-height:1.6} .review-queue-summary>.button{flex:none} .review-queue-columns{display:grid;grid-template-columns:1.2fr 1fr;gap:30px;padding-top:22px} .review-queue-columns h3{font:600 18px var(--serif);margin:0 0 12px} .review-later{border-left:1px solid var(--line);padding-left:30px} .review-queue-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)} .review-queue-row>div{display:grid;gap:5px} .review-queue-row strong{font:600 18px var(--serif);text-transform:capitalize} .review-queue-row small,.review-queue-row>span{font-size:11px;color:var(--muted)} .review-queue-row>span{flex:none} .button-quiet{background:transparent;color:var(--muted);border:1px solid var(--line)} .button-quiet:hover{background:var(--mint);color:var(--green)} @media(max-width:740px){ .review-queue-summary{align-items:flex-start;flex-direction:column;gap:18px} .review-queue-columns{grid-template-columns:minmax(0,1fr);gap:24px} .review-later{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:22px} } .planner-goal label{white-space:nowrap;width:auto} .planner-goal input[type="number"]{flex:0 0 90px;max-width:90px} .week-session-actions{gap:6px 10px} .week-session-actions .text-button{font-size:10px;min-height:26px;line-height:1.4;text-align:left} @media(max-width:480px){.planner-goal label{width:100%;white-space:normal}.planner-goal input[type="number"]{margin-left:auto}} .progress-view-content{display:grid;gap:20px} .daily-study-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px} @media(max-width:1100px){.daily-study-grid{grid-template-columns:repeat(4,minmax(0,1fr))}} @media(max-width:740px){.daily-study-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.progress-view-content{gap:16px}} /* On narrow calendars, concise markers keep the seven-column month readable. */ @media(max-width:740px){ .calendar-day{min-height:82px;padding:3px} .calendar-event{display:block;width:14px;height:14px;margin:4px auto 0;padding:0;border-radius:50%;font-size:0;overflow:hidden} .calendar-event::before{content:"";display:block;width:6px;height:6px;margin:4px;border-radius:50%;background:var(--green)} .calendar-event.status-missed::before{background:#b5634f} .calendar-event span{display:none} .calendar-review-marker{display:block;width:8px;height:8px;margin:4px auto;padding:0;border-radius:50%;font-size:0;background:var(--gold)} } .progress-activity-summary{grid-template-columns:repeat(4,minmax(0,1fr))} .performance-filters .performance-page-size-picker{min-width:68px;max-width:68px} .word-row{text-align:left} .word-row>span:first-child{display:flex;flex-wrap:wrap;align-items:baseline;gap:5px 9px} .detail-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px} @media(max-width:1000px){.progress-activity-summary{grid-template-columns:repeat(2,minmax(0,1fr))}} /* Focused profile, library, and ranking refinement. */ #page-profile .page-heading{margin-bottom:22px} .profile-grid{grid-template-columns:minmax(0,1fr) minmax(330px,.8fr);align-items:start;gap:18px} .profile-card{display:grid;gap:20px;padding:25px 27px;text-align:left} .profile-identity{display:grid;grid-template-columns:64px minmax(0,1fr) minmax(190px,250px);align-items:center;gap:17px;padding-bottom:19px;border-bottom:1px solid var(--line)} .profile-avatar{width:64px;height:64px;margin:0;font-size:27px} .profile-card .eyebrow{justify-content:flex-start} .profile-identity-copy h2{margin:6px 0 2px;font-size:27px} .profile-identity-copy .muted{margin:0;font-size:11px} .profile-joined{margin:7px 0 0;color:var(--muted);font-size:10px} .profile-joined strong{color:var(--ink);font-weight:600} .profile-level{max-width:none;margin:0;padding:12px 14px;border-left:2px solid color-mix(in srgb,var(--gold) 70%,var(--line));background:color-mix(in srgb,var(--paper) 60%,var(--card))} .profile-level>strong{font-size:23px} .profile-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:0;padding:0;border:1px solid var(--line);border-width:1px 0} .profile-stats div{min-width:0;padding:13px 14px;border-right:1px solid var(--line)} .profile-stats div:last-child{border-right:0} .profile-stats strong{font-size:22px} .profile-stats span{line-height:1.35} .profile-controls{display:grid;grid-template-columns:minmax(230px,.8fr) minmax(0,1.2fr);gap:24px;align-items:start} .avatar-picker{display:grid;gap:10px;color:var(--muted);font-size:10px} .avatar-picker .avatar-grid{max-width:none;margin:0;grid-template-columns:repeat(3,minmax(0,1fr))} .avatar-grid .avatar-choice{min-height:66px} .profile-identity-controls{display:grid;gap:15px} .profile-edit-form{display:grid;gap:7px;margin:0} .profile-edit-form>label{color:var(--muted);font-size:10px;font-weight:650} .profile-edit-form>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px} .profile-edit-form input{min-width:0;height:var(--control-height);padding:0 var(--control-padding-x);border:1px solid var(--line);border-radius:var(--control-radius);background:var(--surface-control,var(--card));color:var(--ink)} .profile-edit-form .button{min-height:var(--control-height);white-space:nowrap} .profile-edit-form .feedback-status{margin:0} .profile-privacy{padding-top:14px;border-top:1px solid var(--line)} .public-profile-toggle{display:flex;align-items:flex-start;gap:8px;color:var(--ink);font-size:11px;line-height:1.45} .public-profile-toggle input{margin:2px 0 0;accent-color:var(--green)} .profile-privacy .muted{margin:6px 0 0;padding-left:22px} .profile-actions{display:flex;align-items:center;gap:14px} .profile-actions .text-button{margin-left:auto} /* A signed-in account does not need a blank authentication column. */ .profile-grid:has(#auth-forms[hidden]){grid-template-columns:minmax(0,1fr);max-width:960px} .auth-card:has(#auth-forms[hidden]){display:none} #page-mnemonics .page-heading{margin-bottom:21px} #page-mnemonics .page-heading h1{max-width:700px;font-size:clamp(31px,3.4vw,44px);overflow-wrap:anywhere} #page-mnemonics .page-heading .lede{max-width:560px} .mnemonic-workspace{grid-template-columns:minmax(290px,.74fr) minmax(0,1.26fr);gap:26px} .mnemonic-composer{padding:0;border:0;border-radius:0;background:transparent;box-shadow:none} .mnemonic-composer-heading{margin:0;padding:2px 2px 15px;border-bottom:1px solid var(--line)} .mnemonic-composer-heading .eyebrow{color:var(--green)} .mnemonic-composer-heading p{max-width:300px;font-size:12px} .mnemonic-composer form{gap:9px;padding:18px 19px 19px;border:1px solid var(--line);border-radius:8px;background:color-mix(in srgb,var(--card) 86%,var(--paper))} .mnemonic-composer label:not(.checkbox-row){font-size:10px;letter-spacing:.02em} .mnemonic-composer #mnemonic-word{height:44px;border-color:color-mix(in srgb,var(--gold) 35%,var(--line));background:var(--card);font:600 19px var(--serif);text-transform:capitalize} .mnemonic-composer textarea{min-height:158px;padding:15px 16px;border-color:color-mix(in srgb,var(--green) 22%,var(--line));background:var(--card);font-size:13px} .mnemonic-options{gap:16px;padding:11px 0;border-color:color-mix(in srgb,var(--line) 88%,var(--ink) 12%)} .mnemonic-options .checkbox-row{color:var(--muted);font-size:10px} .mnemonic-options .checkbox-row input{accent-color:var(--green)} .mnemonic-options>label:last-child{font-size:9px;font-weight:600;color:var(--muted)} .mnemonic-options select{height:34px;margin-top:4px;padding:0 27px 0 9px;border-color:var(--line);border-radius:5px;background:var(--card);font-size:10px} .mnemonic-composer-actions{padding-top:2px} .mnemonic-composer-actions .button{min-height:38px} .mnemonic-library{gap:14px} .mnemonic-library-heading{padding:0;border-bottom:1px solid var(--line);padding-bottom:12px} .mnemonic-library-heading h2{font-size:23px} .mnemonic-item{padding:15px 17px;border-radius:7px;box-shadow:none} .mnemonic-item:hover{border-color:color-mix(in srgb,var(--green) 30%,var(--line))} .leaderboard-table{--leaderboard-columns:38px minmax(195px,1.7fr) minmax(88px,.72fr) repeat(5,minmax(74px,.58fr));border-radius:7px} .leaderboard-columns,.leaderboard-row{grid-template-columns:var(--leaderboard-columns);column-gap:12px} .leaderboard-columns{padding:10px 14px} .leaderboard-row{min-height:54px;padding:8px 14px} .leaderboard-columns>span:not(:nth-child(2)),.leaderboard-row>.leaderboard-balanced,.leaderboard-row>.leaderboard-metric{text-align:right} .leaderboard-learner{min-width:0} .leaderboard-person{min-width:0} .leaderboard-person strong,.leaderboard-person small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .leaderboard-balanced{font-size:17px} .leaderboard-metric{font-variant-numeric:tabular-nums} .my-words-tools{align-items:center;gap:10px} .my-words-tools .search-box{height:var(--control-height);padding:0 13px;border:1px solid var(--border-control);border-radius:var(--control-radius);box-shadow:none} .my-words-tools .search-box:focus-within{border-color:var(--green);box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 13%,transparent)} .my-words-tools .search-box input,.my-words-tools .search-box input:focus{height:100%;min-height:0;padding:0!important;border:0!important;outline:0!important;background:transparent!important;box-shadow:none!important} .my-words-tools .custom-select{height:var(--control-height)} .my-words-tools .select-trigger{height:100%;min-height:0} .my-words-tools .vocabulary-filter-select{flex:0 1 176px} #page-my-words .word-row{grid-template-columns:minmax(135px,.85fr) minmax(0,2.1fr) auto auto;gap:15px;padding:14px 17px} #page-my-words .word-row-def{align-self:center} #page-my-words .difficulty-tag,#page-my-words .status-tag{align-self:center} @media(max-width:740px){ .profile-grid,.profile-grid:has(#auth-forms[hidden]){grid-template-columns:minmax(0,1fr)} .profile-card{padding:20px 17px;gap:17px} .profile-identity{grid-template-columns:56px minmax(0,1fr);gap:12px} .profile-avatar{width:56px;height:56px} .profile-level{grid-column:1/-1;padding:10px 12px;border-left:0;border-top:2px solid color-mix(in srgb,var(--gold) 70%,var(--line))} .profile-stats{grid-template-columns:repeat(2,minmax(0,1fr))} .profile-stats div:nth-child(2){border-right:0} .profile-stats div:nth-child(-n+2){border-bottom:1px solid var(--line)} .profile-controls{grid-template-columns:minmax(0,1fr);gap:18px} .avatar-picker .avatar-grid{max-width:320px} .mnemonic-workspace{grid-template-columns:minmax(0,1fr);gap:18px} .mnemonic-composer form{padding:16px} .mnemonic-library-heading{align-items:flex-start} .leaderboard-table{--leaderboard-columns:30px repeat(3,minmax(0,1fr))} .leaderboard-columns{display:none} .leaderboard-list{min-width:0} .leaderboard-row{grid-template-columns:var(--leaderboard-columns);gap:12px 10px;padding:16px 12px} .leaderboard-learner{grid-column:2/4} .leaderboard-balanced{grid-column:4;text-align:right} .leaderboard-metric{text-align:left!important} .my-words-tools .search-box{flex-basis:100%} #page-my-words .word-row{grid-template-columns:minmax(100px,1fr) auto;gap:8px 12px;padding:14px} } @media(max-width:480px){ .profile-edit-form>div{grid-template-columns:minmax(0,1fr)} .profile-edit-form .button{width:100%} .profile-actions{align-items:flex-start;flex-direction:column;gap:4px} .profile-actions .text-button{margin-left:0} #page-mnemonics .page-heading h1{font-size:clamp(30px,9vw,38px)} .mnemonic-composer textarea{min-height:138px} } /* Checkbox rows retain an ample label target while the visual control stays precise. */ .checkbox-row,.keep-session,.public-profile-toggle,.cue-grid label{display:flex;gap:8px} .checkbox-row,.keep-session,.cue-grid label{align-items:center} .checkbox-row input[type="checkbox"],.keep-session input[type="checkbox"],.cue-grid input[type="checkbox"]{flex:none} .public-profile-toggle input[type="checkbox"]{flex:none;margin-top:1px} label:has(input[type="checkbox"]:disabled){cursor:not-allowed;opacity:.68} @media(prefers-reduced-motion:reduce){input[type="checkbox"],input[type="checkbox"]::before{transition:none}} /* Checkpoint C: compact task and rank surfaces share the existing editorial Progress language. */ .task-heading{align-items:end}.task-summary{display:grid;justify-items:end;min-width:8rem;padding:.65rem .8rem;border-left:2px solid color-mix(in srgb,var(--gold) 55%,var(--line));border-radius:0 .35rem .35rem 0;background:color-mix(in srgb,var(--card) 84%,var(--mint));color:var(--muted);font-size:.68rem}.task-summary strong{font:600 clamp(1.6rem,3vw,2.25rem) var(--serif);color:var(--green);line-height:1}.task-counters{display:flex;flex-wrap:wrap;gap:.45rem .75rem;margin:0 0 .9rem;color:var(--muted);font-size:.66rem}.task-counters span{padding:.35rem .5rem;border:1px solid var(--line);border-radius:.3rem;background:var(--card)}.task-counters b{color:var(--ink);font:600 .85rem var(--serif)}.task-categories{display:flex;overflow-x:auto;border-bottom:1px solid var(--line);margin:0;padding:0}.task-categories button{position:relative;flex:none;min-height:2.35rem;padding:.55rem .8rem;border:0;background:transparent;color:var(--muted);font:650 .66rem var(--sans);white-space:nowrap}.task-categories button::after{content:"";position:absolute;right:.8rem;bottom:-1px;left:.8rem;height:2px;background:transparent}.task-categories button:hover{background:color-mix(in srgb,var(--mint) 68%,transparent);color:var(--ink)}.task-categories button[aria-pressed="true"]{color:var(--green)}.task-categories button[aria-pressed="true"]::after{background:var(--gold)}.task-categories button:focus-visible,.task-claim:focus-visible{outline:2px solid color-mix(in srgb,var(--green) 60%,transparent);outline-offset:2px}.task-toolbar{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin:.75rem 0 .65rem}.task-toolbar p{margin:0;color:var(--muted);font-size:.7rem}.task-list{display:grid;gap:.6rem}.task-row{display:grid;grid-template-columns:auto minmax(12rem,1fr) minmax(9rem,13rem) auto;align-items:center;gap:clamp(.75rem,1.8vw,1.25rem);padding:clamp(.85rem,1.8vw,1.05rem);border:1px solid var(--line);border-radius:.45rem;background:var(--card);box-shadow:var(--shadow-soft)}.task-row.ready{border-color:color-mix(in srgb,#6279c8 48%,var(--line));background:color-mix(in srgb,var(--card) 95%,#e7e8fa)}.task-row.claimed{border-color:color-mix(in srgb,var(--green) 36%,var(--line));background:color-mix(in srgb,var(--card) 95%,var(--mint));transition:border-color .2s ease,background-color .2s ease}.task-row.expired{opacity:.72}.task-mark{display:grid;place-items:center;width:2rem;height:2rem;border:1px solid var(--line);border-radius:.35rem;color:var(--muted);font-size:.82rem}.task-row.ready .task-mark{border-color:#6279c8;background:#eef0ff;color:#5369b5}.task-row.claimed .task-mark{border-color:color-mix(in srgb,var(--green) 55%,var(--line));background:var(--mint);color:var(--green)}.task-copy{min-width:0}.task-state{display:block;color:var(--muted);font:600 .56rem var(--mono);letter-spacing:.055rem}.task-row.ready .task-state{color:#5369b5}.task-row.claimed .task-state{color:var(--green)}.task-copy h2{margin:.08rem 0;font:600 1.05rem var(--serif)}.task-copy p{margin:.18rem 0;color:var(--muted);font-size:.68rem}.task-rewards{display:flex;align-items:center;flex-wrap:wrap;gap:.25rem .45rem;margin-top:.48rem}.task-rewards>span{color:var(--muted);font:.52rem var(--mono);letter-spacing:.07rem}.task-rewards b{color:var(--green);font-size:.59rem}.task-progress>div{display:flex;justify-content:space-between;gap:.5rem;margin-bottom:.38rem;color:var(--muted);font:.59rem var(--mono)}.task-progress strong{color:var(--ink)}.task-progress>i,.rank-track{display:block;height:.38rem;overflow:hidden;border-radius:99px;background:var(--line)}.task-progress>i>b,.rank-track>i{display:block;height:100%;border-radius:inherit;background:var(--green);transition:width .25s ease}.task-row.ready .task-progress>i>b{background:#6279c8}.task-row.claimed .task-progress>i>b{background:var(--green)}.task-action{min-width:5.5rem;text-align:right}.task-action>span{color:var(--muted);font:600 .61rem var(--sans)}.task-row.claimed .task-action>span{color:var(--green)}.task-claim{margin:0;min-width:5.25rem}.task-row.claim-settled{animation:task-claim-settle .38s var(--motion-ease, ease) both}.task-row.claim-settled .task-rewards b{animation:task-reward-emphasis .55s var(--motion-ease, ease) both}.rank-panels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.rank-panel{padding:clamp(1rem,2vw,1.35rem)}.rank-panel-heading{display:flex;align-items:start;justify-content:space-between;gap:.75rem}.rank-panel-heading h2{margin:.22rem 0;font:600 clamp(1.4rem,2.4vw,1.85rem) var(--serif)}.rank-panel-heading p{margin:0;color:var(--muted);font-size:.68rem;line-height:1.5}.rank-panel-heading>strong{color:var(--green);font:600 clamp(1.55rem,2.8vw,2.1rem) var(--serif);white-space:nowrap}.rank-panel-heading>strong small{font:600 .58rem var(--sans);color:var(--muted)}.rank-track{height:.48rem;margin:1.2rem 0 .5rem}.rank-panel.seasonal .rank-track>i{background:var(--gold)}.rank-progress-copy{display:flex;justify-content:space-between;gap:.75rem;color:var(--muted);font-size:.62rem}.rank-progress-copy b{color:var(--ink);font:600 .58rem var(--mono)}.rank-ladder{display:grid;gap:.4rem;margin:1.1rem 0 0;padding:0;list-style:none}.rank-ladder li{display:grid;grid-template-columns:.75rem 1fr auto;align-items:center;gap:.45rem;color:var(--muted);font-size:.67rem}.rank-ladder i{width:.42rem;height:.42rem;border:1px solid var(--line);border-radius:50%}.rank-ladder b{font:600 .56rem var(--mono)}.rank-ladder .passed,.rank-ladder .current{color:var(--green)}.rank-ladder .passed i{background:var(--green);border-color:var(--green)}.rank-panel.seasonal .rank-ladder .passed i{background:var(--gold);border-color:var(--gold)}.rank-ladder .current{font-weight:700}.rank-ladder .current i{border-color:var(--green);box-shadow:0 0 0 .14rem color-mix(in srgb,var(--green) 15%,transparent)}.rank-panel.seasonal .rank-ladder .current i{border-color:var(--gold);box-shadow:0 0 0 .14rem color-mix(in srgb,var(--gold) 18%,transparent)}.rank-up-note{margin:-.25rem 0 1rem;padding:.65rem .8rem;border:1px solid color-mix(in srgb,var(--green) 40%,var(--line));border-radius:.4rem;background:var(--mint);color:var(--green);font:600 .7rem var(--sans);animation:rank-up-reveal .42s var(--motion-ease, ease) both}.gamification-toast{position:fixed;right:1rem;bottom:1rem;z-index:30;transform:translateY(.5rem);padding:.65rem .8rem;border:1px solid color-mix(in srgb,var(--green) 42%,var(--line));border-radius:.4rem;background:var(--card);box-shadow:var(--shadow-soft);color:var(--green);font:600 .7rem var(--sans);opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease}.gamification-toast.show{opacity:1;transform:translateY(0)}@keyframes task-claim-settle{from{border-color:#6279c8;background:#eef0ff}to{border-color:color-mix(in srgb,var(--green) 36%,var(--line));background:color-mix(in srgb,var(--card) 95%,var(--mint))}}@keyframes task-reward-emphasis{0%{color:#5369b5}100%{color:var(--green)}}@keyframes rank-up-reveal{from{opacity:0;transform:translateY(.3rem)}to{opacity:1;transform:translateY(0)}} @media(max-width:740px){.task-heading{align-items:start}.task-summary{justify-items:start}.task-row{grid-template-columns:auto minmax(0,1fr);gap:.7rem}.task-progress,.task-action{grid-column:2;text-align:left}.rank-panels{grid-template-columns:1fr}.task-toolbar{align-items:flex-start;flex-direction:column}.task-toolbar .button{width:100%}} @media(max-width:480px){.task-progress,.task-action{grid-column:1/-1}.task-action .task-claim{width:100%}.task-counters{gap:.35rem}.task-counters span{font-size:.61rem}.rank-panel-heading{display:block}.rank-panel-heading>strong{display:block;margin-top:.65rem}} @media(prefers-reduced-motion:reduce){.task-row.claimed,.task-progress>i>b,.rank-track>i,.gamification-toast{transition:none}.task-row.claim-settled,.task-row.claim-settled .task-rewards b,.rank-up-note{animation:none}} /* Hold product chrome until the saved auth session has been restored. */ html[data-auth-pending="true"] .app-shell{visibility:hidden} .auth-bootstrap{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;gap:.65rem;background:var(--paper);color:var(--muted);font:600 .78rem var(--sans)} .auth-bootstrap .brand-mark{flex:none} html:not([data-auth-pending="true"]) .auth-bootstrap{display:none} /* Achievement foundation: compact, readable states without claim interactions. */ .achievement-summary{display:grid;justify-items:end;align-self:end;color:var(--muted);font-size:.68rem}.achievement-summary strong{font:600 clamp(1.6rem,3vw,2.25rem) var(--serif);color:var(--green)} .achievement-categories{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 1rem;padding-bottom:.65rem;border-bottom:1px solid var(--line)}.achievement-categories button{min-height:2rem;padding:.4rem .7rem;border:1px solid transparent;border-radius:.35rem;background:transparent;color:var(--muted);font-size:.66rem;transition:background-color .16s,border-color .16s,color .16s}.achievement-categories button:hover{color:var(--ink);background:var(--mint)}.achievement-categories button[aria-pressed="true"]{border-color:color-mix(in srgb,var(--green) 28%,var(--line));background:var(--mint);color:var(--green);font-weight:700}.achievement-categories button:focus-visible{outline:2px solid color-mix(in srgb,var(--green) 60%,transparent);outline-offset:2px} .achievement-list{display:grid;gap:.55rem}.achievement-row{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(9rem,15rem);align-items:center;gap:1rem;padding:clamp(.85rem,2vw,1.1rem);border:1px solid var(--line);border-radius:.55rem;background:var(--card);box-shadow:var(--shadow-soft)}.achievement-row.eligible{border-color:color-mix(in srgb,var(--gold) 42%,var(--line));background:color-mix(in srgb,var(--card) 88%,#f4e7d8)}.achievement-mark{display:grid;place-items:center;width:2.15rem;height:2.15rem;border:1px solid var(--line);border-radius:50%;color:var(--muted);font-size:.9rem}.achievement-row.eligible .achievement-mark{border-color:color-mix(in srgb,var(--gold) 55%,var(--line));background:#f4e7d8;color:var(--gold)} .achievement-copy{min-width:0}.achievement-copy>div{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}.achievement-copy h2{margin:0;font:600 1rem var(--serif)}.achievement-copy p{margin:.25rem 0;color:var(--muted);font-size:.68rem}.achievement-state{color:var(--muted);font:600 .52rem var(--mono);letter-spacing:.055rem}.achievement-row.eligible .achievement-state{color:var(--gold)}.achievement-reward{display:inline-block;margin-top:.2rem;color:var(--green);font-size:.6rem;font-weight:650}.achievement-progress>div{display:flex;justify-content:space-between;gap:.5rem;margin-bottom:.35rem;color:var(--muted);font:.58rem var(--mono)}.achievement-progress strong{color:var(--ink)}.achievement-track{display:block;height:.32rem;overflow:hidden;border-radius:99px;background:var(--line)}.achievement-track i{display:block;height:100%;border-radius:inherit;background:var(--green);transition:width .25s ease}.achievement-row.eligible .achievement-track i{background:var(--gold)} .profile-title{margin:2px 0 5px;color:var(--gold);font:italic 600 12px var(--serif);letter-spacing:.1px}.leaderboard-person small{max-width:100%;color:var(--muted)} @media(max-width:740px){.achievement-row{grid-template-columns:auto minmax(0,1fr)}.achievement-progress{grid-column:2}} @media(max-width:480px){.achievement-summary{justify-items:start}.achievement-row{gap:.75rem}.achievement-progress{grid-column:1/-1}.achievement-categories{flex-wrap:nowrap;overflow-x:auto}.achievement-categories button{white-space:nowrap}} @media(prefers-reduced-motion:reduce){.achievement-categories button,.achievement-track i{transition:none}} /* Phase 2 achievement controls keep pending rewards visible without overpowering study content. */ #page-achievements .achievement-heading{align-items:end;gap:1.25rem}#page-achievements .achievement-summary{min-width:8rem;padding:.65rem .8rem;border-left:2px solid color-mix(in srgb,var(--gold) 55%,var(--line));background:color-mix(in srgb,var(--card) 82%,var(--mint));border-radius:0 .35rem .35rem 0}#page-achievements .achievement-summary strong{line-height:1}#page-achievements .achievement-summary strong small{font:600 .8rem var(--sans);color:var(--muted)}#page-achievements .achievement-categories{display:flex;gap:0;margin:0;padding:0;border-bottom:1px solid var(--line);overflow-x:auto}#page-achievements .achievement-categories button{position:relative;min-height:2.35rem;padding:.55rem .8rem;border:0;border-radius:0;background:transparent;color:var(--muted);font:650 .66rem var(--sans);white-space:nowrap}#page-achievements .achievement-categories button::after{content:"";position:absolute;right:.8rem;bottom:-1px;left:.8rem;height:2px;background:transparent}#page-achievements .achievement-categories button:hover{background:color-mix(in srgb,var(--mint) 68%,transparent);color:var(--ink)}#page-achievements .achievement-categories button[aria-pressed="true"]{background:transparent;border:0;color:var(--green)}#page-achievements .achievement-categories button[aria-pressed="true"]::after{background:var(--gold)}#page-achievements .achievement-toolbar{position:static;margin:.75rem 0 .65rem;padding:.4rem 0;border:0;border-radius:0;background:transparent;box-shadow:none}#page-achievements .achievement-row{grid-template-columns:auto minmax(12rem,1fr) minmax(9rem,13rem) auto;gap:clamp(.75rem,1.8vw,1.25rem);padding:clamp(.8rem,1.8vw,1rem);border-radius:.4rem;box-shadow:none}#page-achievements .achievement-row.in-progress{background:color-mix(in srgb,var(--card) 94%,var(--mint))}#page-achievements .achievement-row.ready{border-color:color-mix(in srgb,#6478c7 55%,var(--line));background:color-mix(in srgb,var(--card) 95%,#e7e8fa)}#page-achievements .achievement-row.claimed{border-color:color-mix(in srgb,var(--green) 36%,var(--line));background:color-mix(in srgb,var(--card) 96%,var(--mint))}#page-achievements .achievement-mark{width:2rem;height:2rem;border-radius:.35rem;background:var(--card)}#page-achievements .achievement-mark i{display:block;width:.56rem;height:.56rem;border:1.5px solid currentColor;border-radius:50%}#page-achievements .achievement-row.ready .achievement-mark{color:#5369b5;background:#eef0ff;border-color:color-mix(in srgb,#6478c7 55%,var(--line))}#page-achievements .achievement-row.ready .achievement-mark i{border-radius:.12rem;background:#6478c7;border-color:#6478c7}#page-achievements .achievement-row.claimed .achievement-mark{color:var(--green);background:var(--mint)}#page-achievements .achievement-row.claimed .achievement-mark i{width:.62rem;height:.34rem;border-width:0 0 1.5px 1.5px;border-radius:0;transform:rotate(-45deg) translate(1px,-1px)}#page-achievements .achievement-copy>div{display:block}#page-achievements .achievement-copy h2{margin:.08rem 0;font-size:1.05rem}#page-achievements .achievement-copy p{margin:.18rem 0}#page-achievements .achievement-state{display:block;font-size:.56rem}#page-achievements .achievement-row.ready .achievement-state{color:#5369b5}#page-achievements .achievement-row.claimed .achievement-state{color:var(--green)}#page-achievements .achievement-progress{align-self:center}#page-achievements .achievement-progress-copy{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;margin:0 0 .38rem}#page-achievements .achievement-progress-copy span,#page-achievements .achievement-progress-copy strong{font:600 .62rem var(--mono);letter-spacing:0}#page-achievements .achievement-progress-copy strong{color:var(--ink)}#page-achievements .achievement-track{height:.38rem}#page-achievements .achievement-row.ready .achievement-track i{background:#6478c7}#page-achievements .achievement-row.claimed .achievement-track i{background:var(--green)}#page-achievements .achievement-action{min-width:5.5rem;text-align:right}#page-achievements .achievement-action>span{color:var(--muted);font:600 .61rem var(--sans)}#page-achievements .achievement-row.claimed .achievement-action>span{color:var(--green)}#page-achievements .achievement-claim{margin:0;min-width:5.25rem}.title-chooser{display:grid;grid-template-columns:minmax(6rem,max-content) minmax(10rem,15rem);align-items:center;gap:.5rem .75rem;margin-bottom:.8rem}.title-chooser label{color:var(--muted);font-size:.68rem;font-weight:700}.title-select{min-height:2.25rem;padding:.4rem 2rem .4rem .65rem;border:1px solid var(--line);border-radius:.35rem;background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%236b625b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3C/svg%3E") right .65rem center/.7rem no-repeat;color:var(--ink);font:600 .72rem var(--sans);appearance:none}.title-select:hover{border-color:color-mix(in srgb,var(--green) 40%,var(--line))}.title-select:focus-visible{outline:2px solid color-mix(in srgb,var(--green) 55%,transparent);outline-offset:2px}.title-chooser .feedback-status{grid-column:2;margin:0;font-size:.62rem}@media(max-width:740px){#page-achievements .achievement-row{grid-template-columns:auto minmax(0,1fr);gap:.7rem}#page-achievements .achievement-progress,#page-achievements .achievement-action{grid-column:2;text-align:left}#page-achievements .achievement-heading{align-items:start}#page-achievements .achievement-summary{justify-items:start}}@media(max-width:480px){#page-achievements .achievement-progress,#page-achievements .achievement-action{grid-column:1/-1}#page-achievements .achievement-action .achievement-claim{width:100%}.title-chooser{grid-template-columns:1fr}.title-chooser .feedback-status{grid-column:1}} .achievement-toolbar{position:sticky;top:.5rem;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin:-.35rem 0 .8rem;padding:.55rem .7rem;border:1px solid var(--line);border-radius:.45rem;background:color-mix(in srgb,var(--card) 92%,var(--mint));box-shadow:var(--shadow-soft)}.achievement-toolbar p{margin:0;color:var(--muted);font-size:.7rem}.achievement-claim{margin-top:.55rem;min-height:1.95rem;padding:.34rem .6rem;font-size:.65rem}.achievement-row.ready{border-color:color-mix(in srgb,#6478c7 44%,var(--line));background:color-mix(in srgb,var(--card) 92%,#e7e8fa)}.achievement-row.ready .achievement-mark,.achievement-row.ready .achievement-track i{border-color:#6478c7;background:#6478c7;color:#fff}.achievement-row.ready .achievement-state{color:#5369b5}.achievement-row.claimed{border-color:color-mix(in srgb,var(--green) 38%,var(--line));background:color-mix(in srgb,var(--card) 94%,var(--mint));transition:border-color .18s ease,background-color .18s ease}.achievement-row.claimed .achievement-mark{border-color:color-mix(in srgb,var(--green) 55%,var(--line));background:var(--mint);color:var(--green)}.achievement-row.claimed .achievement-state{color:var(--green)}.achievement-row.claimed .achievement-track i{background:var(--green)}.achievement-nav-dot{display:inline-block;inline-size:.38rem;block-size:.38rem;margin-left:.3rem;border-radius:50%;vertical-align:middle;background:#6279c8;box-shadow:0 0 0 .12rem color-mix(in srgb,#6279c8 17%,transparent)}.nav-link .achievement-nav-dot{margin-left:auto}.title-chooser{margin-bottom:1rem}.title-chooser>span{display:block;margin-bottom:.45rem;color:var(--muted);font-size:.68rem;font-weight:700}.title-options{display:flex;flex-wrap:wrap;gap:.4rem}.title-options button{min-height:2rem;padding:.36rem .6rem;border:1px solid var(--line);border-radius:.35rem;background:var(--card);color:var(--muted);font:600 .68rem var(--sans);transition:border-color .16s ease,background-color .16s ease,color .16s ease}.title-options button[aria-pressed="true"]{border-color:color-mix(in srgb,var(--green) 48%,var(--line));background:var(--mint);color:var(--green)}.title-options button:focus-visible,.achievement-claim:focus-visible{outline:2px solid color-mix(in srgb,var(--green) 60%,transparent);outline-offset:2px}@media(max-width:480px){.achievement-toolbar{position:static;align-items:flex-start;flex-direction:column}.achievement-toolbar .button{width:100%}}@media(prefers-reduced-motion:reduce){.achievement-row.claimed,.title-options button{transition:none}} /* UI polish pass: shared editorial rhythm for progress, profile, and vocabulary views. */ #page-achievements .achievement-toolbar p{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} #page-achievements .achievement-toolbar{justify-content:flex-end;margin:.5rem 0 .8rem;padding:0;background:transparent;border:0;box-shadow:none} #page-achievements .achievement-claim-all{min-height:2rem;padding:.4rem .72rem;border:1px solid color-mix(in srgb,#6279c8 38%,var(--line));background:#f2f2ff;color:#5369b5;box-shadow:none} #page-achievements .achievement-row,.task-row{border-radius:7px;box-shadow:none} #page-achievements .achievement-row{grid-template-columns:32px minmax(0,1.25fr) minmax(150px,.8fr) minmax(74px,auto);gap:clamp(.8rem,2vw,1.4rem);min-height:92px;padding:15px 16px} #page-achievements .achievement-row.in-progress{background:var(--card)} #page-achievements .achievement-mark,.task-mark{width:32px;height:32px;border-radius:6px} #page-achievements .achievement-copy h2,.task-copy h2{font-size:18px;letter-spacing:-.15px} #page-achievements .achievement-copy p,.task-copy p{line-height:1.45} #page-achievements .achievement-state,.task-state{letter-spacing:.08em} #page-achievements .achievement-reward{margin-top:.35rem;color:#95703d;font:600 .59rem var(--mono);letter-spacing:.025em} #page-achievements .achievement-row.ready{border-color:color-mix(in srgb,#6279c8 48%,var(--line));background:#fbfbff} #page-achievements .achievement-row.ready .achievement-track i{background:#6279c8} #page-achievements .achievement-row.claimed{background:color-mix(in srgb,var(--card) 96%,var(--mint))} #page-achievements .achievement-action{min-width:74px} #page-achievements .achievement-claim{min-height:2rem;padding:.38rem .68rem;border:1px solid #cfd4f0;background:#eef0ff;color:#5369b5;box-shadow:none} #page-achievements .achievement-claim:hover{background:#e6e9ff} #page-tasks .task-counters{gap:.4rem;margin:.1rem 0 .95rem} #page-tasks .task-counters span{padding:.4rem .56rem;border-radius:5px;background:color-mix(in srgb,var(--card) 94%,var(--paper));font-size:.64rem} #page-tasks .task-toolbar{margin:.5rem 0 .8rem} #page-tasks .task-row{grid-template-columns:32px minmax(0,1.25fr) minmax(150px,.8fr) minmax(74px,auto);min-height:96px;padding:15px 16px} #page-tasks .task-row:not(.ready):not(.claimed){background:var(--card)} #page-tasks .task-rewards{margin-top:.42rem} #page-tasks .task-progress>i,.rank-track{height:4px} #page-tasks .task-claim{min-height:2rem;padding:.38rem .68rem;border:1px solid #cfd4f0;background:#eef0ff;color:#5369b5;box-shadow:none} .task-list.task-list-entering{animation:wordwise-list-enter var(--motion-fast) var(--motion-ease) both} .rank-panels{gap:14px}.rank-panel{position:relative;border-radius:7px;box-shadow:none} .rank-panel.seasonal{border-color:color-mix(in srgb,var(--gold) 45%,var(--line));background:color-mix(in srgb,var(--card) 96%,#fbf4e9)} .rank-panel.permanent{border-color:color-mix(in srgb,#6279c8 28%,var(--line));background:color-mix(in srgb,var(--card) 97%,#f1f1fb)} .rank-panel.seasonal .eyebrow{color:#9b7540}.rank-panel.permanent .eyebrow{color:#586ba7} .rank-panel.permanent .rank-track>i{background:#6279c8}.rank-panel.permanent .rank-ladder .passed i{background:#6279c8;border-color:#6279c8}.rank-panel.permanent .rank-ladder .current{color:#5369b5}.rank-panel.permanent .rank-ladder .current i{border-color:#6279c8;box-shadow:0 0 0 .14rem #6279c81f} /* Header and data rows deliberately share one named grid. */ .leaderboard-table{--leaderboard-columns:38px minmax(230px,2.3fr) minmax(86px,.72fr) repeat(5,minmax(72px,.58fr));overflow-x:auto;overscroll-behavior-x:contain} .leaderboard-columns,.leaderboard-row{display:grid;grid-template-columns:var(--leaderboard-columns);column-gap:12px;align-items:center} .leaderboard-columns,.leaderboard-list{min-width:0}.leaderboard-learner,.leaderboard-person{min-width:0} .leaderboard-person strong,.leaderboard-person small{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #page-profile .page-heading{margin-bottom:16px}#page-profile .profile-card{gap:16px;padding:21px 23px}#page-profile .profile-identity{padding-bottom:15px}#page-profile .profile-controls{gap:19px}#page-profile .profile-identity-controls{gap:12px} #page-profile .title-chooser{grid-template-columns:max-content minmax(150px,210px);gap:.4rem .65rem;margin:0;padding:9px 0;border-bottom:1px solid var(--line)} #page-profile .title-select{min-height:34px;border-radius:5px;background-color:var(--card);font-size:.69rem}#page-profile .title-chooser .feedback-status{line-height:1.3} #page-my-words .page-heading{margin-bottom:18px}.my-words-tools{display:grid;grid-template-columns:minmax(240px,1fr) minmax(150px,176px) minmax(150px,176px);gap:9px;margin-bottom:16px}.my-words-tools .search-box{min-width:0;background:var(--card)}.my-words-tools .vocabulary-filter-select{min-width:0;max-width:none}#page-my-words .word-row{min-height:62px;border-radius:7px} @media(max-width:740px){#page-achievements .achievement-row,#page-tasks .task-row{grid-template-columns:32px minmax(0,1fr);min-height:0}#page-achievements .achievement-progress,#page-achievements .achievement-action,#page-tasks .task-progress,#page-tasks .task-action{grid-column:2;text-align:left}.leaderboard-table{--leaderboard-columns:30px repeat(3,minmax(0,1fr))}.leaderboard-columns{display:none}.leaderboard-row{grid-template-columns:var(--leaderboard-columns)}.my-words-tools{grid-template-columns:1fr 1fr}.my-words-tools .search-box{grid-column:1/-1}#page-profile .title-chooser{grid-template-columns:max-content minmax(0,1fr)}} @media(max-width:480px){#page-achievements .achievement-progress,#page-achievements .achievement-action,#page-tasks .task-progress,#page-tasks .task-action{grid-column:1/-1}#page-achievements .achievement-action .achievement-claim,#page-tasks .task-action .task-claim{width:100%}.my-words-tools{grid-template-columns:1fr}.my-words-tools .search-box{grid-column:auto}#page-profile .title-chooser{grid-template-columns:1fr}.title-chooser .feedback-status{grid-column:1}} @media(prefers-reduced-motion:reduce){.task-list.task-list-entering{animation:none!important}} /* Achievements: compact milestone rows with a single, readable state. */ #page-achievements{--achievement-lavender:#f4f3ff;--achievement-blue:#596fb9;--achievement-green:#377358} #page-achievements .achievement-heading{margin-bottom:clamp(1.1rem,2vw,1.55rem)} #page-achievements .achievement-summary{min-width:7.25rem;padding:.55rem 0 .55rem .8rem;border-left:1px solid color-mix(in srgb,var(--gold) 65%,var(--line));border-radius:0;background:transparent} #page-achievements .achievement-summary strong{font-size:clamp(1.55rem,2.7vw,2.1rem)} #page-achievements .achievement-categories{gap:0;margin:0;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none} #page-achievements .achievement-categories::-webkit-scrollbar{display:none} #page-achievements .achievement-categories button{position:relative;min-height:2.45rem;padding:.55rem .8rem;border:0;border-radius:0;background:transparent;color:var(--muted);font:650 .7rem var(--sans);white-space:nowrap;transition:color 150ms ease,background-color 150ms ease} #page-achievements .achievement-categories button::after{content:"";position:absolute;right:.8rem;bottom:-1px;left:.8rem;height:2px;background:transparent;transition:background-color 150ms ease} #page-achievements .achievement-categories button:hover{background:color-mix(in srgb,var(--mint) 52%,transparent);color:var(--ink)} #page-achievements .achievement-categories button[aria-pressed="true"]{color:var(--green);font-weight:700} #page-achievements .achievement-categories button[aria-pressed="true"]::after{background:var(--gold)} #page-achievements .achievement-toolbar{min-height:2rem;margin:.55rem 0 .7rem;padding:0} #page-achievements .achievement-claim-all{border:1px solid color-mix(in srgb,var(--achievement-blue) 32%,var(--line));border-radius:5px;background:var(--achievement-lavender);color:var(--achievement-blue);font-size:.66rem} #page-achievements .achievement-list{gap:.5rem} #page-achievements .achievement-row{grid-template-columns:34px minmax(12rem,1.25fr) minmax(10.5rem,.78fr) max-content;gap:clamp(.75rem,1.8vw,1.2rem);min-height:5.45rem;padding:clamp(.8rem,1.6vw,1rem);border:1px solid var(--line);border-radius:7px;background:var(--card);box-shadow:none;transition:border-color 160ms ease,background-color 160ms ease} #page-achievements .achievement-row.in-progress{background:var(--card)} #page-achievements .achievement-row.ready{border-color:color-mix(in srgb,var(--achievement-blue) 52%,var(--line));background:color-mix(in srgb,var(--card) 92%,var(--achievement-lavender))} #page-achievements .achievement-row.claimed{border-color:color-mix(in srgb,var(--achievement-green) 35%,var(--line));background:color-mix(in srgb,var(--card) 97%,var(--mint))} #page-achievements .achievement-mark{width:34px;height:34px;border:1px solid var(--line);border-radius:50%;background:color-mix(in srgb,var(--paper) 58%,var(--card));color:var(--muted)} #page-achievements .achievement-mark i{width:.56rem;height:.56rem;border:1.5px solid currentColor;border-radius:50%;background:transparent} #page-achievements .achievement-row.ready .achievement-mark{border-color:color-mix(in srgb,var(--achievement-blue) 46%,var(--line));background:var(--achievement-lavender);color:var(--achievement-blue)} #page-achievements .achievement-row.ready .achievement-mark i{border-radius:.14rem;background:currentColor} #page-achievements .achievement-row.claimed .achievement-mark{border-color:color-mix(in srgb,var(--achievement-green) 45%,var(--line));background:var(--mint);color:var(--achievement-green)} #page-achievements .achievement-row.claimed .achievement-mark i{width:.62rem;height:.35rem;border-width:0 0 1.5px 1.5px;border-radius:0;transform:rotate(-45deg) translate(1px,-1px)} #page-achievements .achievement-copy h2{margin:.08rem 0 .14rem;font:600 clamp(1rem,1.35vw,1.12rem) var(--serif);letter-spacing:-.01em} #page-achievements .achievement-copy>p:not(.achievement-reward){margin:0;color:var(--muted);font-size:.7rem;line-height:1.45} #page-achievements .achievement-state{display:block;margin-bottom:.18rem;color:var(--muted);font:650 .56rem var(--mono);letter-spacing:.065em;text-transform:uppercase} #page-achievements .achievement-row.ready .achievement-state{color:var(--achievement-blue)} #page-achievements .achievement-row.claimed .achievement-state{color:var(--achievement-green)} #page-achievements .achievement-reward{display:flex;align-items:baseline;gap:.38rem;margin:.42rem 0 0;color:#86673f;font:600 .62rem var(--sans)} #page-achievements .achievement-reward span{color:var(--muted);font:.54rem var(--mono);letter-spacing:.06em;text-transform:uppercase} #page-achievements .achievement-progress{align-self:center;min-width:0} #page-achievements .achievement-progress-copy{margin:0 0 .38rem;font:.58rem var(--mono);letter-spacing:0} #page-achievements .achievement-progress-copy>span{color:var(--muted);text-transform:uppercase;letter-spacing:.055em} #page-achievements .achievement-progress-copy strong{color:var(--ink);font-weight:600;white-space:nowrap} #page-achievements .achievement-track{height:.32rem;background:color-mix(in srgb,var(--line) 82%,var(--paper))} #page-achievements .achievement-track i{background:#7f9f89;transition:width 220ms ease} #page-achievements .achievement-row.ready .achievement-track i{background:var(--achievement-blue)} #page-achievements .achievement-row.claimed .achievement-track i{background:var(--achievement-green)} #page-achievements .achievement-action{min-width:0;text-align:right} #page-achievements .achievement-claim{min-width:4.8rem;min-height:2rem;margin:0;padding:.38rem .68rem;border:1px solid color-mix(in srgb,var(--achievement-blue) 36%,var(--line));border-radius:5px;background:var(--achievement-lavender);color:var(--achievement-blue);box-shadow:none;font-size:.66rem} #page-achievements .achievement-claim:hover{background:#ebebff} @media(max-width:740px){#page-achievements .achievement-heading{align-items:flex-start}#page-achievements .achievement-row{grid-template-columns:34px minmax(0,1fr);gap:.65rem .8rem}#page-achievements .achievement-progress{grid-column:2}#page-achievements .achievement-action{grid-column:2;text-align:left}} @media(max-width:480px){#page-achievements .achievement-summary{display:none}#page-achievements .achievement-row{grid-template-columns:30px minmax(0,1fr);padding:.78rem}#page-achievements .achievement-mark{width:30px;height:30px}#page-achievements .achievement-progress,#page-achievements .achievement-action{grid-column:1/-1}#page-achievements .achievement-action .achievement-claim{width:100%}} /* Compact leaderboard modes share the same table and learner identity layout. */ .leaderboard-mode-tabs{display:flex;gap:1.15rem;width:max-content;margin:.65rem 0 .25rem;border-bottom:1px solid var(--line)} .leaderboard-mode-tabs button{position:relative;padding:.55rem 0;color:var(--muted);border:0;background:none;font:600 .68rem var(--sans);transition:color var(--motion-fast) var(--motion-ease)} .leaderboard-mode-tabs button::after{position:absolute;right:0;bottom:-1px;left:0;height:2px;background:transparent;content:"";transition:background-color var(--motion-fast) var(--motion-ease)} .leaderboard-mode-tabs button:hover,.leaderboard-mode-tabs button[aria-pressed="true"]{color:var(--green)} .leaderboard-mode-tabs button[aria-pressed="true"]::after{background:var(--gold)} .leaderboard-list.leaderboard-list-entering{animation:wordwise-list-enter var(--motion-fast) var(--motion-ease) both} .leaderboard-table.seasonal-mode{--leaderboard-columns:38px minmax(230px,2.2fr) minmax(105px,.9fr) minmax(105px,.75fr)} .leaderboard-table.seasonal-mode .leaderboard-season-rank,.leaderboard-table.seasonal-mode .leaderboard-season-points{text-align:right;font-variant-numeric:tabular-nums} .leaderboard-table.seasonal-mode .leaderboard-season-rank{color:var(--green);font:600 .76rem var(--serif)} .leaderboard-table.seasonal-mode .leaderboard-season-points{color:var(--ink);font:600 .72rem var(--mono)} .leaderboard-table.seasonal-mode .leaderboard-list{min-width:0} @media(max-width:740px){.leaderboard-table.seasonal-mode{--leaderboard-columns:30px minmax(0,1fr) max-content}.leaderboard-table.seasonal-mode .leaderboard-row{grid-template-columns:var(--leaderboard-columns);gap:12px 10px;padding:16px 12px}.leaderboard-table.seasonal-mode .leaderboard-learner{grid-column:2/4}.leaderboard-table.seasonal-mode .leaderboard-season-rank{grid-row:2;grid-column:2}.leaderboard-table.seasonal-mode .leaderboard-season-points{grid-row:2;grid-column:3}.leaderboard-table.seasonal-mode .leaderboard-season-rank,.leaderboard-table.seasonal-mode .leaderboard-season-points{display:grid;gap:4px;text-align:left}.leaderboard-table.seasonal-mode .leaderboard-season-rank::before,.leaderboard-table.seasonal-mode .leaderboard-season-points::before{content:attr(data-label);color:var(--muted);font:9px var(--sans)}} @media(prefers-reduced-motion:reduce){.leaderboard-mode-tabs button,.leaderboard-mode-tabs button::after,.leaderboard-list.leaderboard-list-entering{transition:none;animation:none!important}} @media(prefers-reduced-motion:reduce){#page-achievements .achievement-row,#page-achievements .achievement-categories button,#page-achievements .achievement-categories button::after,#page-achievements .achievement-track i{transition:none}} /* Editorial controls for Learning/Seasonal leaderboard modes. */ #page-leaderboard .leaderboard-heading{gap:1rem} #page-leaderboard .leaderboard-heading>div{min-width:0} #page-leaderboard #leaderboard-load{flex:none;min-height:34px;padding:0 11px;border:1px solid var(--line);border-radius:6px;background:transparent;color:var(--muted);font:600 11px/1.2 var(--sans);letter-spacing:0;box-shadow:none;transition:background var(--motion-fast) var(--motion-ease),border-color var(--motion-fast) var(--motion-ease),color var(--motion-fast) var(--motion-ease)} #page-leaderboard #leaderboard-load:hover:not(:disabled){transform:none;background:var(--mint);border-color:color-mix(in srgb,var(--green) 28%,var(--line));color:var(--green)} #page-leaderboard #leaderboard-load:active:not(:disabled){background:color-mix(in srgb,var(--green) 12%,var(--mint))} #page-leaderboard .leaderboard-controls{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:.75rem 0 .5rem;border-bottom:1px solid var(--line)} #page-leaderboard .leaderboard-mode-tabs{display:flex;align-items:center;gap:4px;width:auto;max-width:100%;margin:0;padding:4px;border:1px solid var(--line);border-radius:8px;background:var(--surface-control)} #page-leaderboard .leaderboard-mode-tabs button{position:relative;min-height:31px;padding:0 11px;border:0;border-radius:5px;background:transparent;color:var(--muted);font:600 11px/1.2 var(--sans);white-space:nowrap;transition:color var(--motion-fast) var(--motion-ease),background-color var(--motion-fast) var(--motion-ease)} #page-leaderboard .leaderboard-mode-tabs button::after{display:none} #page-leaderboard .leaderboard-mode-tabs button:hover{background:var(--paper);color:var(--ink)} #page-leaderboard .leaderboard-mode-tabs button[aria-pressed="true"]{background:var(--mint);color:var(--green);font-weight:700} #page-leaderboard .leaderboard-mode-tabs button:focus-visible,#page-leaderboard #leaderboard-load:focus-visible,#page-leaderboard .leaderboard-score-info summary:focus-visible{outline:2px solid color-mix(in srgb,var(--green) 58%,transparent);outline-offset:2px} #page-leaderboard .leaderboard-score-info{margin:0;color:var(--muted);font-size:.68rem} #page-leaderboard .leaderboard-score-info summary{display:inline-flex;align-items:center;cursor:pointer;color:var(--green);font:600 11px/1.3 var(--sans);list-style:none;transition:color var(--motion-fast) var(--motion-ease)} #page-leaderboard .leaderboard-score-info summary::-webkit-details-marker{display:none} #page-leaderboard .leaderboard-score-info summary:hover{color:var(--ink);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--green) 45%,transparent);text-underline-offset:3px} #page-leaderboard .leaderboard-score-info p{max-width:760px;margin:.55rem 0 .2rem;padding:.65rem .75rem;border-left:2px solid var(--line);border-radius:0 6px 6px 0;background:var(--paper);font-size:.7rem;line-height:1.55} @media(max-width:520px){#page-leaderboard .leaderboard-heading{align-items:flex-start}#page-leaderboard #leaderboard-load{min-height:var(--control-height-compact);padding:0 .62rem}#page-leaderboard .leaderboard-controls{align-items:flex-start;flex-wrap:wrap;gap:.15rem .75rem}#page-leaderboard .leaderboard-mode-tabs{flex:1 1 auto}#page-leaderboard .leaderboard-score-info{padding:.1rem 0 .45rem}} @media(prefers-reduced-motion:reduce){#page-leaderboard #leaderboard-load,#page-leaderboard .leaderboard-mode-tabs button,#page-leaderboard .leaderboard-score-info summary{transition:none}} /* Authoritative Achievements layout: marker | milestone body | single action. */ #page-achievements .achievement-list{display:grid;gap:.625rem;width:100%} #page-achievements .achievement-row{display:grid;grid-template-columns:2.5rem minmax(0,1fr) max-content;align-items:center;gap:clamp(.8rem,2vw,1.35rem);min-height:6.25rem;padding:clamp(.9rem,1.8vw,1.15rem);border:1px solid var(--line);border-radius:.5rem;background:var(--card);box-shadow:none} #page-achievements .achievement-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(12rem,.68fr);align-items:center;gap:clamp(.9rem,2vw,1.6rem);min-width:0} #page-achievements .achievement-mark{display:grid;place-items:center;width:2.5rem;height:2.5rem;border:1px solid var(--line);border-radius:50%;background:var(--paper);color:var(--muted)} #page-achievements .achievement-mark i{display:block;width:.62rem;height:.62rem;border:1.5px solid currentColor;border-radius:50%;background:transparent} #page-achievements .achievement-copy{min-width:0} #page-achievements .achievement-copy h2{margin:0 0 .22rem;font:600 clamp(1.05rem,1.5vw,1.18rem) var(--serif);letter-spacing:-.012em} #page-achievements .achievement-copy>p:not(.achievement-reward){margin:0;color:var(--muted);font-size:.72rem;line-height:1.45} #page-achievements .achievement-reward{display:flex;align-items:baseline;gap:.42rem;margin:.45rem 0 0;color:#87683f;font:600 .63rem var(--sans)} #page-achievements .achievement-reward span{color:var(--muted);font:.54rem var(--mono);letter-spacing:.06em;text-transform:uppercase} #page-achievements .achievement-progress{min-width:0;align-self:center} #page-achievements .achievement-progress-copy{display:flex;justify-content:space-between;gap:.6rem;margin:0 0 .4rem;font:.58rem var(--mono);letter-spacing:0} #page-achievements .achievement-progress-copy>span{color:var(--muted);letter-spacing:.06em;text-transform:uppercase} #page-achievements .achievement-progress-copy strong{color:var(--ink);font-weight:600;white-space:nowrap} #page-achievements .achievement-track{display:block;height:.34rem;overflow:hidden;border-radius:99px;background:color-mix(in srgb,var(--line) 80%,var(--paper))} #page-achievements .achievement-track i{display:block;height:100%;border-radius:inherit;background:#839d8b;transition:width 220ms ease} #page-achievements .achievement-action{display:flex;align-items:center;justify-content:flex-end;min-width:5.25rem;text-align:right} #page-achievements .achievement-action-label{color:var(--muted);font:600 .66rem var(--sans);white-space:nowrap} #page-achievements .achievement-row.ready{border-color:color-mix(in srgb,#6279c8 52%,var(--line));background:color-mix(in srgb,var(--card) 94%,#eef0ff)} #page-achievements .achievement-row.ready .achievement-mark{border-color:color-mix(in srgb,#6279c8 50%,var(--line));background:#eef0ff;color:#566bb4} #page-achievements .achievement-row.ready .achievement-mark i{border-radius:.12rem;background:currentColor} #page-achievements .achievement-row.ready .achievement-track i{background:#6279c8} #page-achievements .achievement-row.ready .achievement-claim{min-width:5.25rem;margin:0;border:1px solid #cbd2ef;border-radius:.35rem;background:#eef0ff;color:#5369b5;box-shadow:none;font-size:.67rem} #page-achievements .achievement-row.claimed{border-color:color-mix(in srgb,var(--green) 35%,var(--line));background:color-mix(in srgb,var(--card) 97%,var(--mint))} #page-achievements .achievement-row.claimed .achievement-mark{border-color:color-mix(in srgb,var(--green) 45%,var(--line));background:var(--mint);color:var(--green)} #page-achievements .achievement-row.claimed .achievement-mark i{width:.7rem;height:.38rem;border-width:0 0 1.5px 1.5px;border-radius:0;transform:rotate(-45deg) translate(1px,-1px)} #page-achievements .achievement-row.claimed .achievement-track i{background:var(--green)} #page-achievements .achievement-row.claimed .achievement-action-label{color:var(--green)} @media(max-width:740px){#page-achievements .achievement-row{grid-template-columns:2.35rem minmax(0,1fr);align-items:start}#page-achievements .achievement-body{grid-template-columns:1fr;gap:.75rem}#page-achievements .achievement-action{grid-column:2;justify-content:flex-start;min-height:1.8rem;text-align:left}} @media(max-width:480px){#page-achievements .achievement-row{grid-template-columns:2.1rem minmax(0,1fr);gap:.7rem;padding:.82rem}#page-achievements .achievement-mark{width:2.1rem;height:2.1rem}#page-achievements .achievement-action{grid-column:1/-1}#page-achievements .achievement-action .achievement-claim{width:100%}} /* features.css */ /* Minimum functional UI using existing WordWise surfaces and control tokens. */ .functional-panel{padding:20px;margin:16px 0} .functional-panel h2,.functional-panel h3{margin:0 0 12px} .functional-panel label{display:block;margin:10px 0;color:var(--muted);font:600 12px var(--sans)} .functional-panel input:not([type=file]),.functional-panel textarea,.functional-panel select{display:block;width:100%;max-width:760px;margin-top:6px;padding:9px 10px;border:1px solid var(--line);border-radius:var(--control-radius,6px);background:var(--card);color:var(--ink);font:12px var(--sans)} .functional-panel textarea{resize:vertical} .functional-panel pre{white-space:pre-wrap;overflow-wrap:anywhere;font:11px/1.5 var(--mono);max-height:480px;overflow:auto} .functional-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:12px 0} .functional-table{overflow:auto;margin:12px 0} .functional-table table{border-collapse:collapse;width:100%;font:12px/1.5 var(--sans)} .functional-table th,.functional-table td{text-align:left;padding:8px;border-bottom:1px solid var(--line);vertical-align:top;min-width:90px} .functional-table th{color:var(--muted);font-weight:600} .functional-toast{position:fixed;right:20px;bottom:20px;z-index:50;width:min(340px,calc(100vw - 40px));padding:16px;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:var(--control-radius,6px);box-shadow:0 6px 24px #0002;animation:enter var(--motion-fast,140ms) ease} .functional-toast[hidden]{display:none} .functional-toast p{margin:6px 0 0;color:var(--muted);font-size:12px} .resolved-avatar{display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:50%;flex:none;overflow:hidden} .custom-profile-image{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit} .frame-gold{outline:2px solid var(--gold);outline-offset:2px}.frame-lavender{outline:2px solid #9b83bf;outline-offset:2px}.accent-forest{box-shadow:0 0 0 5px color-mix(in srgb,var(--green) 15%,transparent)} .set-creator-avatar{width:36px;height:36px} @media(prefers-reduced-motion:reduce){.functional-toast{animation:none}} #definition-explorer-content .explorer-modes [aria-pressed=true],#wordwise-admin-controls .admin-tabs [aria-pressed=true]{color:var(--ink);background:color-mix(in srgb,var(--green) 14%,var(--card));border-color:var(--green)} .ladder-item{padding:16px 0;border-top:1px solid var(--line)} .ladder-item h3{margin:8px 0}.ladder-searched{border-left:3px solid var(--green);padding-left:16px} .admin-tabs{gap:6px}.admin-progression-row{display:grid;grid-template-columns:minmax(140px,1fr) minmax(80px,120px) minmax(210px,1fr);align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)} .admin-progression-row .functional-actions{margin:0}.functional-panel input[type=checkbox]{display:inline-block;width:auto;margin:0 8px 0 0} .admin-confirm{color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:var(--control-radius,6px);max-width:min(520px,90vw);padding:24px} .admin-confirm::backdrop{background:#0007}.admin-confirm input{display:block;margin:12px 0;padding:10px;width:100%;background:var(--card);border:1px solid var(--line);color:var(--ink)} @media(max-width:760px){.admin-progression-row{grid-template-columns:1fr 100px}.admin-progression-row .functional-actions{grid-column:1/-1}.admin-tabs button{flex:0 1 auto}} /* Keep admin fields on the active WordWise surface even under legacy theme rules. */ #wordwise-admin-controls input:not([type=checkbox]),#wordwise-admin-controls select,#wordwise-admin-controls textarea,#admin-season-confirm input{background:var(--card);color:var(--ink);border-color:var(--line)} /* achievements.css */ /* Achievements borrow the same progress, task row, and tab patterns as the rest of WordWise. */ #page-achievements .achievement-heading, #page-achievements .achievement-categories, #page-achievements .achievement-toolbar, #page-achievements .achievement-list{max-width:900px} #page-achievements .achievement-heading{align-items:center;gap:1rem;margin-bottom:1rem} #page-achievements .achievement-summary{display:flex;align-items:baseline;gap:.45rem;min-width:0;padding:.45rem .7rem;border-left:2px solid color-mix(in srgb,var(--gold) 60%,var(--line));border-radius:0 .35rem .35rem 0;background:color-mix(in srgb,var(--card) 86%,var(--mint));color:var(--muted)} #page-achievements .achievement-summary strong{color:var(--green);font:600 1.35rem/1 var(--serif)} #page-achievements .achievement-summary span{font-size:.62rem;line-height:1.4} #page-achievements .achievement-categories{flex-wrap:nowrap;gap:0;margin:0;padding:0;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none} #page-achievements .achievement-categories::-webkit-scrollbar{display:none} #page-achievements .achievement-categories button{transition:color var(--motion-fast) var(--motion-ease),background-color var(--motion-fast) var(--motion-ease)} #page-achievements .achievement-categories button:focus-visible{outline:2px solid color-mix(in srgb,var(--green) 60%,transparent);outline-offset:-2px} #page-achievements .achievement-toolbar{position:static;top:auto;z-index:auto;display:flex;align-items:center;justify-content:space-between;gap:.75rem;min-height:2rem;margin:.55rem 0 .7rem;padding:0;border:0;background:transparent;box-shadow:none} #page-achievements .achievement-toolbar p{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:normal;color:var(--muted);font-size:.7rem} #page-achievements .achievement-claim-all{min-height:2rem;padding:.4rem .72rem;border-radius:.35rem;box-shadow:none;font-size:.66rem} #page-achievements .achievement-list{display:grid;gap:.6rem;width:100%} #page-achievements .achievement-row{grid-template-columns:32px minmax(0,1.25fr) minmax(150px,.8fr) minmax(74px,auto);align-items:center;gap:clamp(.75rem,1.8vw,1.25rem);min-height:96px;padding:15px 16px;border:1px solid var(--line);border-radius:7px;background:var(--card);box-shadow:none;transition:border-color .18s ease,background-color .18s ease} #page-achievements .achievement-row.in-progress{background:var(--card)} #page-achievements .achievement-row.ready{border-color:color-mix(in srgb,#6279c8 46%,var(--line));background:color-mix(in srgb,var(--card) 96%,#e7e8fa)} #page-achievements .achievement-row.claimed{border-color:color-mix(in srgb,var(--green) 38%,var(--line));background:color-mix(in srgb,var(--card) 98%,var(--mint))} #page-achievements .achievement-mark{width:32px;height:32px;border:1px solid var(--line);border-radius:.35rem;background:var(--paper);color:var(--muted)} #page-achievements .achievement-mark i{display:block;width:.58rem;height:.58rem;border:1.5px solid currentColor;border-radius:50%;background:transparent} #page-achievements .achievement-row.ready .achievement-mark{border-color:#cfd4f0;background:#eef0ff;color:#5369b5} #page-achievements .achievement-row.ready .achievement-mark i{border-color:#6478c7;border-radius:.12rem;background:#6478c7} #page-achievements .achievement-row.claimed .achievement-mark{border-color:color-mix(in srgb,var(--green) 48%,var(--line));background:var(--mint);color:var(--green)} #page-achievements .achievement-row.claimed .achievement-mark i{width:.66rem;height:.36rem;border-width:0 0 1.5px 1.5px;border-radius:0;transform:rotate(-45deg) translate(1px,-1px)} #page-achievements .achievement-copy{min-width:0} #page-achievements .achievement-copy h2{margin:.08rem 0;font:600 1.05rem var(--serif);letter-spacing:0} #page-achievements .achievement-copy>p{margin:.18rem 0;color:var(--muted);font-size:.68rem;line-height:1.45} #page-achievements .achievement-reward{display:flex;align-items:center;flex-wrap:wrap;gap:.25rem .45rem;margin-top:.42rem;color:var(--green);font-size:.59rem;font-weight:600} #page-achievements .achievement-reward>span{color:var(--muted);font:.52rem var(--mono);letter-spacing:.07rem} #page-achievements .achievement-progress{min-width:0;align-self:center} #page-achievements .achievement-progress>div{display:flex;justify-content:space-between;gap:.5rem;margin-bottom:.38rem;color:var(--muted);font:.58rem var(--mono)} #page-achievements .achievement-progress strong{color:var(--ink);font-weight:600;white-space:nowrap} #page-achievements .achievement-progress>i{display:block;height:4px;overflow:hidden;border-radius:99px;background:var(--line)} #page-achievements .achievement-progress>i>b{display:block;height:100%;border-radius:inherit;background:#839d8b;transition:width .22s ease} #page-achievements .achievement-row.ready .achievement-progress>i>b{background:#6478c7} #page-achievements .achievement-row.claimed .achievement-progress>i>b{background:var(--green)} #page-achievements .achievement-action{min-width:5.5rem;text-align:right} #page-achievements .achievement-action-label{color:var(--muted);font:600 .61rem var(--sans);white-space:nowrap} #page-achievements .achievement-row.claimed .achievement-action-label{color:var(--green)} #page-achievements .achievement-claim{min-width:5.25rem;min-height:2rem;margin:0;padding:.38rem .68rem;border:1px solid #cfd4f0;border-radius:.35rem;background:#eef0ff;color:#5369b5;box-shadow:none;font-size:.67rem} #page-achievements .achievement-claim:hover{background:#e6e9ff} #page-achievements .achievement-claim:focus-visible{outline:2px solid color-mix(in srgb,#6279c8 60%,transparent);outline-offset:2px} #page-achievements .achievement-list.achievement-list-entering{animation:wordwise-list-enter var(--motion-fast) var(--motion-ease) both} @media(max-width:740px){#page-achievements .achievement-heading{align-items:flex-start;flex-direction:column}#page-achievements .achievement-row{grid-template-columns:32px minmax(0,1fr);min-height:0;gap:.7rem}#page-achievements .achievement-progress,#page-achievements .achievement-action{grid-column:2;text-align:left}#page-achievements .achievement-action{min-height:1.8rem}#page-achievements .achievement-toolbar{align-items:flex-start}} @media(max-width:480px){#page-achievements .achievement-row{padding:.82rem}#page-achievements .achievement-progress,#page-achievements .achievement-action{grid-column:1/-1}#page-achievements .achievement-action .achievement-claim{width:100%}#page-achievements .achievement-toolbar{align-items:stretch;flex-direction:column}#page-achievements .achievement-toolbar .button{width:100%}} @media(prefers-reduced-motion:reduce){#page-achievements .achievement-row,#page-achievements .achievement-categories button,#page-achievements .achievement-categories button::after,#page-achievements .achievement-progress>i>b,#page-achievements .achievement-list.achievement-list-entering{transition:none;animation:none!important}} /* density.css */ /* Shared application rhythm. Inherits the existing appearance and typography settings. */ :root{--density-gap:14px;--density-padding:18px;--density-row:10px;--density-radius:8px} .content{width:min(1350px,100%);padding:24px clamp(18px,2.8vw,36px) 32px} .topbar{height:60px;padding-inline:clamp(18px,2.8vw,36px)} .welcome-row,.page-heading,#page-profile .page-heading,#page-mnemonics .page-heading,#page-my-words .page-heading{margin-bottom:18px;gap:16px;align-items:center} .page-heading h1,.welcome-row h1,#page-mnemonics .page-heading h1{font-size:clamp(28px,2.6vw,36px);line-height:1.18;margin:5px 0;letter-spacing:-.6px} .page-heading .eyebrow,.welcome-row .eyebrow{margin:0;font-size:10px} .page-heading .lede,.welcome-row .lede{font-size:13px;line-height:1.45} .date-card{width:auto;height:auto;min-width:92px;padding:10px 12px;gap:4px} .date-card>span{display:none}.date-card strong{font-size:16px} .panel,.metric-card,.mini-stat-card,.practice-aside>div{padding:var(--density-padding);border-radius:var(--density-radius);box-shadow:none} .panel-heading{margin-bottom:12px;gap:12px}.panel-heading h2{font-size:20px;margin-top:4px} .panel h3{font-size:16px}.panel>.muted{line-height:1.5} .metric-grid,.rank-panels,.progress-columns,.dashboard-sections,.feedback-grid,.profile-grid{gap:var(--density-gap)} .metric-card{min-height:0}.metric-card>strong{font-size:28px;margin-block:8px} .progress-columns>.panel,.dashboard-sections>.panel,.settings-panel>.panel,.profile-grid>.panel{margin-bottom:var(--density-gap)} .progress-view-tabs,.achievement-categories,.task-categories{margin-bottom:14px} .progress-view-tabs{max-width:100%;width:max-content;overflow-x:auto;scrollbar-width:thin} .progress-view-tabs button{flex:0 0 auto} .progress-view-tabs button,.achievement-categories button,.task-categories button{padding:10px 12px;font-size:12px} .density-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--density-gap)} .density-grid>*{min-width:0}.density-wide{grid-column:1/-1} .compact-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px} .compact-heading h2{font:600 20px/1.2 var(--serif);margin:0} .compact-heading>span{font-size:12px;color:var(--muted)} .compact-heading .text-button{font-size:12px;margin:0;white-space:nowrap} .density-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} .density-metric{display:flex;flex-direction:column;gap:4px;min-width:0;padding:9px 10px;background:color-mix(in srgb,var(--paper) 80%,var(--card));border:1px solid var(--line);border-radius:6px} .density-metric strong{font:600 25px/1.15 var(--serif);color:var(--ink);overflow-wrap:anywhere} .density-metric span{font-size:12px;color:var(--muted)}.density-metric small{font-size:11px;color:var(--muted);line-height:1.4} .overview-metrics{grid-template-columns:repeat(6,minmax(0,1fr))} .density-tabs{display:flex;flex-wrap:wrap;gap:4px} .density-tabs button{background:var(--card);color:var(--muted);border:1px solid var(--line);border-radius:5px;padding:7px 10px;font-size:12px;min-height:32px} .density-tabs button[aria-pressed=true]{background:var(--mint);border-color:var(--green);color:var(--ink)} .density-tabs button:focus-visible,.density-heat-cell:focus-visible,.heat-year button:focus-visible{outline:2px solid var(--green);outline-offset:2px} .analytics-toolbar,.heat-toolbar{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:10px} .analytics-toolbar>.muted,.analytics-scope{font-size:12px;line-height:1.5}.analytics-scope{color:var(--muted);margin:0 0 14px;max-width:90ch} .chart-card{display:flex;flex-direction:column;gap:0}.chart-card>.compact-heading{margin-bottom:4px} .chart-card>p,.chart-card>p.muted{font-size:13px;line-height:1.5} .chart-note,.chart-summary{color:var(--muted);font-size:12px;line-height:1.5;margin:6px 0 10px} .chart-summary{margin:10px 0 0;color:var(--ink)} .chart-frame{position:relative;height:220px;min-width:0;margin-top:6px}.chart-donut{height:225px} .chart-data{margin-top:12px;font-size:12px;color:var(--muted)}.chart-data summary{cursor:pointer;padding-block:4px} .chart-empty{display:grid;place-items:center;text-align:center;min-height:130px;background:var(--paper);border:1px dashed var(--line);border-radius:6px;color:var(--muted);font-size:13px;margin-top:8px;padding:18px} .chart-toolbar{margin:0}.chart-toolbar+.chart-card{margin-top:-4px} .density-table{overflow-x:auto;max-width:100%;margin-top:12px} .density-table table{width:100%;border-collapse:collapse;text-align:left;font-size:13px;line-height:1.45} .density-table th,.density-table td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top;white-space:normal;min-width:95px;overflow-wrap:anywhere} .density-table th{font-size:12px;color:var(--muted);font-weight:600}.density-table tr:last-child td{border-bottom:0} .home-study-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--density-gap);margin-bottom:var(--density-gap)} .home-study-row .feature-card{min-height:0;padding:18px 20px;border-radius:var(--density-radius);gap:8px} .home-study-row .feature-card:after{font-size:160px;bottom:0} .home-study-row .feature-top{gap:8px}.home-study-row .feature-mark{font-size:20px} .home-study-row .feature-copy{margin:0}.home-study-row .feature-copy>.eyebrow,.home-study-row .feature-foot{display:none} .home-study-row .feature-copy h2{font-size:24px;margin:3px 0 6px}.home-study-row .feature-copy p{font-size:13px;line-height:1.45;margin-bottom:12px;max-width:42ch} .home-study-row .daily-card{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);align-content:center;gap:10px 14px;padding:18px 20px} .home-study-row .daily-card>.text-button{grid-column:2;justify-self:start;margin:0}.home-study-row .daily-body h3{font-size:22px;margin:5px 0 6px}.home-study-row .daily-body p{font-size:13px;line-height:1.45;margin:0} .home-dashboard .hub-card{padding:16px 18px}.hub-card>.text-button{margin-top:10px;font-size:12px} @media(min-width:1280px){.home-dashboard{grid-template-columns:repeat(3,minmax(0,1fr))}} .hub-card p.muted,.hub-card .empty-state{font-size:13px;line-height:1.5;margin:10px 0}.hub-card .empty-state{min-height:42px} .hub-task{display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:9px;padding:9px 0;border-bottom:1px solid var(--line)} .hub-task:last-child{border-bottom:0}.hub-task strong{display:block;font-size:13px;line-height:1.4;font-weight:600}.hub-task small{display:block;font-size:12px;margin-top:3px;color:var(--muted)} .hub-task-mark{color:var(--green)}.hub-task meter{display:block;width:100%;height:5px;margin-top:6px;accent-color:var(--green)} .hub-task meter::-webkit-meter-bar{background:var(--line);border:0}.hub-task meter::-webkit-meter-optimum-value{background:var(--green)} .task-status{font-size:11px;color:var(--muted);text-align:right;max-width:70px}.task-status .text-button{font-size:12px;white-space:nowrap} .mastery-strip,.hub-level-track{display:flex;height:7px;border-radius:4px;overflow:hidden;background:var(--line);margin:12px 0} .mastery-strip>span{min-width:2px}.hub-level-track>span{background:var(--gold)} .mastery-legend{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px 7px;font-size:12px;color:var(--muted);margin:12px 0} .mastery-legend span{display:flex;align-items:center;gap:5px}.mastery-legend b{color:var(--ink);margin-left:auto}.mastery-legend i{width:7px;height:7px;flex:none;border-radius:2px} .stage-new{background:var(--line)}.stage-weak{background:#b56c69}.stage-developing{background:var(--gold)}.stage-strong{background:#8e81b8}.stage-very_strong{background:#6e95a6}.stage-mature{background:var(--green)} .hub-streak{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:12px;color:var(--muted)}.hub-streak>strong{font:600 20px var(--serif);color:var(--ink)} .hub-streak>span{white-space:nowrap}.hub-streak .week-dots{margin:0 0 0 auto;gap:4px;flex-shrink:0}.hub-streak .week-dots span{width:20px;height:20px;font-size:10px} .hub-activity{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px} .hub-activity:last-child{border-bottom:0}.hub-activity strong{font-weight:600}.hub-activity>span{color:var(--green);font-size:12px}.hub-activity small{grid-column:1/-1;color:var(--muted);font-size:12px} .density-nav-count{margin-left:auto;min-width:20px;max-width:46px;border-radius:5px;background:color-mix(in srgb,var(--green) 10%,var(--card));padding:2px 5px;color:var(--green);font-size:11px;text-align:center} .nav-link #achievements-nav-dot,.nav-link #tasks-nav-dot{display:none} .density-heatmap{--heat-cell:13px;--heat-gap:3px;overflow-x:auto;padding:2px 2px 6px;max-width:100%} .density-months{display:grid;grid-template-columns:repeat(var(--heat-columns),var(--heat-cell));gap:var(--heat-gap);width:max-content;min-width:100%;padding-left:24px;height:21px;color:var(--muted);font-size:11px} .density-months span{overflow:visible;white-space:nowrap} .density-heat-scroll{display:flex;gap:10px;width:max-content;min-width:100%} .density-heat-days{display:grid;grid-template-rows:repeat(7,var(--heat-cell));row-gap:var(--heat-gap);width:14px;flex:none;color:var(--muted);font-size:10px;text-align:center;align-items:center} .density-heat-grid{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,var(--heat-cell));grid-template-columns:repeat(var(--heat-columns),var(--heat-cell));gap:var(--heat-gap)} .density-heat-cell,.heat-key i{display:block;width:var(--heat-cell,10px);height:var(--heat-cell,10px);border:1px solid color-mix(in srgb,var(--green) 6%,var(--line));padding:0;border-radius:2px;background:var(--line)} .density-heat-cell[data-level="1"],.heat-key i[data-level="1"]{background:color-mix(in srgb,var(--green) 25%,var(--card))} .density-heat-cell[data-level="2"],.heat-key i[data-level="2"]{background:color-mix(in srgb,var(--green) 45%,var(--card))} .density-heat-cell[data-level="3"],.heat-key i[data-level="3"]{background:color-mix(in srgb,var(--green) 70%,var(--card))} .density-heat-cell[data-level="4"],.heat-key i[data-level="4"]{background:var(--green)} .density-heat-cell.outside{visibility:hidden}.density-heat-cell.future{opacity:.35} .heatmap-compact{--heat-cell:14px;--heat-gap:4px}.heatmap-compact .density-heat-grid{grid-template-columns:repeat(var(--heat-columns),minmax(14px,1fr));flex:1}.heatmap-compact .density-heat-cell{width:100%}.heatmap-compact .density-months{grid-template-columns:repeat(var(--heat-columns),minmax(14px,1fr));width:100%} .heat-summary{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-top:8px;color:var(--muted);font-size:11px} .heat-key{display:flex;align-items:center;gap:3px}.heat-year{display:flex;align-items:center;gap:8px;font-size:13px}.heat-year button{border:1px solid var(--line);background:var(--card);color:var(--ink);padding:5px 9px;border-radius:4px}.heat-toolbar{margin:8px 0 12px} .plan-action{display:flex;align-items:center;gap:14px;margin:14px 0}.plan-action p{font-size:13px} #page-schedule .overview-metrics,#page-calendar .overview-metrics,#page-study-load .overview-metrics{grid-template-columns:repeat(4,minmax(0,1fr))} #shop-content{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--density-gap)} #shop-content>p{grid-column:1/-1;margin:0}#shop-content>.panel{margin:0} .practice-layout{max-width:820px;gap:var(--density-gap)} .practice-card{padding:24px;min-height:0;box-shadow:none}.practice-card .word-wrap,.daily-practice-card .word-wrap{padding:24px 0} .practice-aside .aside-note{padding:16px}.aside-note h3{font-size:20px}.practice-meta{flex-wrap:wrap;gap:8px} .focus-panel{max-width:820px;padding:24px}.focus-clock{font-size:clamp(54px,7vw,76px);margin:20px 0}.focus-context p{margin:8px 0} .setting-row{padding:16px 18px;gap:16px}.settings-panel>.panel-heading{margin-bottom:12px}.setting-row h2{font-size:18px}.setting-row p{font-size:13px;line-height:1.5}.settings-layout{gap:var(--density-gap)} .theme-grid,.font-options,.avatar-grid{gap:10px}.theme-card{padding:12px}.settings-subheading{margin:16px 0 10px} .word-row{padding:12px 15px;gap:12px}.word-row-def{font-size:13px}.word-row-name{font-size:20px}.word-row-def small{font-size:12px} .rank-panel-heading h2{font-size:24px}.rank-ladder{gap:8px}.rank-ladder li{padding-block:8px} #page-achievements .achievement-row,#page-tasks .task-row{min-height:80px;padding:12px 14px} #page-achievements .achievement-copy>p,.task-copy>p{font-size:12px} #page-achievements .achievement-copy h2,.task-copy h2{font-size:18px} .functional-panel h2{font:600 21px var(--serif)}.functional-panel h3{margin:14px 0 8px}.functional-panel label{font-size:13px;margin:8px 0}.functional-panel input:not([type=file]),.functional-panel textarea,.functional-panel select{font-size:13px} .functional-actions{gap:8px;margin-block:12px}.functional-table{font-size:13px}.functional-table td,.functional-table th{padding:9px} #wordwise-admin-controls{display:grid;grid-template-columns:170px minmax(0,1fr);gap:10px 18px} #wordwise-admin-controls>h2,#wordwise-admin-controls>p{grid-column:1/-1;margin:0} #wordwise-admin-controls>.admin-tabs{display:flex;flex-direction:column;align-items:stretch;grid-column:1;grid-row:4;gap:6px;margin:0;align-self:start} #wordwise-admin-controls .admin-tabs button{padding:9px;text-align:left;font-size:12px} #wordwise-admin-controls>[data-admin-section]{grid-column:2;grid-row:4;min-width:0;border-left:1px solid var(--line);padding-left:18px;align-self:start} #wordwise-admin-controls pre{max-width:100%;overflow:auto;font-size:12px} .admin-progression-row{padding:10px 0}.admin-progression-row .functional-actions{margin:0} html[data-text-size="large"] .density-table table,html[data-text-size="large"] .hub-task strong,html[data-text-size="large"] .hub-card p.muted{font-size:15px} html[data-text-size="large"] .density-metric span,html[data-text-size="large"] .chart-note,html[data-text-size="large"] .chart-summary{font-size:14px} @media(max-width:1100px){.overview-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}.mastery-legend{grid-template-columns:repeat(2,minmax(0,1fr))}.compact-heading{flex-wrap:wrap;gap:6px}.home-study-row .feature-copy h2{font-size:22px}} @media(max-width:1100px){.admin-progression-row{grid-template-columns:minmax(0,1fr) 85px}.admin-progression-row .functional-actions{grid-column:1/-1}} @media(max-width:600px){#wordwise-admin-controls{grid-template-columns:minmax(0,1fr)}#wordwise-admin-controls>.admin-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-column:auto;grid-row:auto}#wordwise-admin-controls>[data-admin-section]{grid-column:auto;grid-row:auto;border-left:0;border-top:1px solid var(--line);padding:8px 0 0}} @media(max-width:760px){.content{padding:20px 18px 28px}.topbar{padding-inline:16px}.settings-layout{grid-template-columns:1fr}.page-heading h1,.welcome-row h1,#page-mnemonics .page-heading h1{font-size:30px}.rank-panels{grid-template-columns:repeat(2,minmax(0,1fr))}.density-metric{padding:8px}.density-metric strong{font-size:23px}.density-grid{gap:12px}.home-dashboard .hub-card{padding:14px}.hub-task{grid-template-columns:16px minmax(0,1fr)}.task-status{grid-column:2;text-align:left;max-width:none}.chart-frame{height:210px}} @media(max-width:600px){:root{--density-padding:16px}.content{padding:18px 14px 26px}.density-grid,.home-study-row,.rank-panels,#shop-content{grid-template-columns:1fr}.page-heading,.welcome-row{align-items:flex-start}.date-card{min-width:74px;padding:9px}.welcome-row h1,.page-heading h1,#page-mnemonics .page-heading h1{font-size:28px}.density-wide{grid-column:auto}.density-metric strong{font-size:25px}.overview-metrics,#page-schedule .overview-metrics,#page-calendar .overview-metrics,#page-study-load .overview-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.mastery-legend{grid-template-columns:repeat(3,minmax(0,1fr))}.hub-task{grid-template-columns:16px minmax(0,1fr) auto}.task-status{grid-column:auto;text-align:right;max-width:70px}.analytics-toolbar{align-items:start}.density-table td,.density-table th{padding:8px;min-width:92px}.practice-card{padding:18px 16px}.practice-card .word-wrap,.daily-practice-card .word-wrap{padding:22px 0}.focus-panel{padding:20px 16px}.plan-action{align-items:flex-start;flex-direction:column;gap:6px}.plan-action p{margin:0}.heat-summary{font-size:12px}#page-achievements .achievement-row,#page-tasks .task-row{grid-template-columns:28px minmax(0,1fr);min-height:0}.compact-heading h2{font-size:20px}} /* release-candidate.css */ /* Semantic surfaces and the one shared motion language. */ :root{--motion-fast:120ms;--motion-normal:180ms;--motion-panel:240ms;--motion-ease:cubic-bezier(.2,.7,.2,1);--surface-control:var(--card);--surface-active:var(--mint);--text-secondary:color-mix(in srgb,var(--ink) 72%,var(--card));--border-control:color-mix(in srgb,var(--ink) 28%,var(--card));--focus-ring:var(--green);--text-on-accent:var(--paper)} button,input,textarea,select,a{transition:color var(--motion-fast) var(--motion-ease),background-color var(--motion-fast) var(--motion-ease),border-color var(--motion-fast) var(--motion-ease),opacity var(--motion-fast) var(--motion-ease),box-shadow var(--motion-fast) var(--motion-ease)} button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,canvas:focus-visible,summary:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px} button:disabled,input:disabled{opacity:.55;cursor:not-allowed}button[aria-busy=true]{cursor:progress}.button:active:not(:disabled){filter:brightness(.95)} .muted,.lede,.chart-note,.chart-summary,.word-row-def,.empty-state,.setting-row p,.functional-panel p,.task-copy p{color:var(--text-secondary)} input,textarea,select,.select-trigger{background:var(--surface-control);color:var(--ink);border-color:var(--border-control)} .select-options{background:var(--surface-control);border-color:var(--border-control);box-shadow:0 8px 22px #0002;animation:rc-enter var(--motion-normal) var(--motion-ease)}.custom-select.closing .select-options{animation:rc-exit var(--motion-fast) var(--motion-ease)} .select-options [aria-selected=true],.select-options button:hover{color:var(--ink);background:var(--surface-active)} .nav-group-links,.nav-group summary::after{transition:all var(--motion-panel) var(--motion-ease)} .density-tabs,.leaderboard-mode-tabs,.explorer-modes{display:flex;flex-wrap:wrap;gap:4px;padding:4px;border:1px solid var(--border-control);border-radius:8px;background:var(--paper);width:fit-content;max-width:100%} .density-tabs button,.leaderboard-mode-tabs button,.explorer-modes button{appearance:none;border:1px solid transparent;border-radius:5px;padding:7px 12px;background:transparent;color:var(--text-secondary);font:600 12px var(--sans);cursor:pointer} .density-tabs button[aria-pressed=true],.leaderboard-mode-tabs button[aria-pressed=true],.explorer-modes button[aria-pressed=true],.progress-view-tabs button[aria-pressed=true]{background:var(--surface-active);border-color:var(--border-control);color:var(--ink)} .theme-preview,.theme-swatch,.theme-card .theme-preview,.theme-choice .theme-preview{border-radius:6px!important;aspect-ratio:1.6!important;min-height:28px;max-height:42px}.theme-card,.theme-choice{min-width:0} .rc-dialog{width:min(480px,calc(100vw - 28px));max-height:calc(100dvh - 40px);overflow:auto;margin:auto;padding:20px;border:1px solid var(--border-control);border-radius:12px;background:var(--card);color:var(--ink);box-shadow:0 20px 80px #0004;animation:rc-enter var(--motion-panel) var(--motion-ease)} .rc-dialog-wide{width:min(820px,calc(100vw - 28px))}.rc-dialog::backdrop{background:#141c1970}.rc-dialog h2{font:600 24px var(--serif);margin:0}.rc-dialog label{display:grid;gap:5px;margin-block:12px}.rc-dialog input,.rc-dialog textarea,.rc-dialog select{width:100%;min-width:0}.rc-dialog-body{margin-top:14px}.rc-operation-status{color:var(--text-secondary)} .avatar-crop{width:min(320px,100%);aspect-ratio:1;margin:18px auto;background:var(--paper);border:2px solid var(--gold);border-radius:50%;overflow:hidden}.avatar-crop canvas{display:block;width:100%;touch-action:none;cursor:grab} .rc-study-tasks{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px;padding:10px 12px;background:var(--card);border:1px solid var(--line);border-radius:8px;font-size:12px}.rc-study-tasks>div{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.rc-study-tasks strong{font-weight:500}.rc-account-locked{opacity:.7}.rc-lock-note{font-size:12px;color:var(--text-secondary)} .rc-shop-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--density-gap)}.rc-shop-item{display:flex;flex-direction:column;gap:8px}.rc-shop-item h2{font-size:20px;margin:0}.rc-shop-item p{margin:0}.rc-shop-item .functional-actions{margin-top:auto}.rc-item-art{height:88px;display:grid;place-items:center;border:1px solid var(--line);background:var(--paper);border-radius:8px}.rc-item-art svg{width:56px;height:56px;stroke:var(--green);fill:none;stroke-width:1.5}.rc-avatar-preview{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--mint);color:var(--green);font-size:28px;overflow:hidden}.rc-avatar-preview img{width:100%;height:100%;object-fit:cover}.rc-avatar-preview.frame-gold{outline:3px solid var(--gold);outline-offset:2px}.rc-avatar-preview.frame-lavender{outline:3px solid #a48cc4;outline-offset:2px}.rc-avatar-preview.accent-forest{background:var(--mint);border:3px solid var(--green)} .rc-set-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}.rc-set-entry{padding:12px;border:1px solid var(--border-control);border-radius:8px;margin:10px 0}.rc-set-entry legend{font:600 16px var(--serif)}.rc-set-entry textarea{min-height:80px}.rc-set-entry label{display:grid;gap:5px;font-size:12px}.rc-set-entry input,.rc-set-fields input,.rc-set-fields select{width:100%;padding:9px;border:1px solid var(--border-control);border-radius:6px}.rc-set-fields .rc-full{grid-column:1/-1} .rc-drill-list{display:grid;gap:10px}.rc-drill-row{border-block-end:1px solid var(--line);padding:10px 0}.rc-drill-row h3{font:600 21px var(--serif);margin:0;text-transform:capitalize}.rc-drill-row p{margin:5px 0}.rc-drill-row small{color:var(--text-secondary)} .functional-toast,.task-row.ready,.task-row.claim-settled,.page.active,.progress-view.active,.detail-card{animation:rc-enter var(--motion-normal) var(--motion-ease)}.functional-toast{color:var(--ink);background:var(--card);border-color:var(--border-control);max-width:calc(100vw - 28px)} @keyframes rc-enter{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}@keyframes rc-exit{from{opacity:1}to{opacity:0;transform:translateY(2px)}} @media(max-width:900px){.rc-shop-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:540px){.rc-shop-grid,.rc-set-fields{grid-template-columns:1fr}.rc-dialog{padding:16px}.rc-set-fields .rc-full{grid-column:auto}} @media(prefers-reduced-motion:reduce){:root{--motion-fast:0ms;--motion-normal:0ms;--motion-panel:0ms}*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}} .atlas-toolbar{margin-bottom:14px}.atlas-toolbar form{display:flex;align-items:end;flex-wrap:wrap;gap:9px;margin-bottom:14px}.atlas-toolbar form label{font-size:12px}.atlas-toolbar input{padding:9px;border:1px solid var(--border-control);border-radius:6px;max-width:100%;min-width:0}.atlas-filters{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}.atlas-filters label{display:grid;gap:5px;font-size:12px;flex:1;min-width:145px}.atlas-filters select{width:100%;padding:8px;border:1px solid var(--border-control);border-radius:6px}.atlas-layout{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(250px,1fr);gap:14px}.atlas-layout>*{min-width:0}.atlas-canvas-card h2{font-size:21px}.atlas-canvas-card #atlas-graph{width:100%;overflow:hidden;background:var(--paper);border:1px solid var(--line);border-radius:9px}.atlas-canvas-card svg{display:block;width:100%;min-height:280px;max-height:580px;touch-action:none}.atlas-edge{stroke:var(--border-control);stroke-width:2;fill:none}.atlas-node{cursor:pointer;outline:none}.atlas-node rect{fill:var(--card);stroke:var(--border-control);stroke-width:1.5}.atlas-node text{fill:var(--ink);font:600 18px var(--serif)}.atlas-node .atlas-node-state{font:10px var(--sans);fill:var(--text-secondary)}.atlas-node.discoverable rect{stroke-dasharray:4 3}.atlas-node.saved rect{stroke:var(--gold)}.atlas-node.stage-mature rect{stroke:var(--gold);stroke-width:2.5;fill:var(--surface-active)}.atlas-node.stage-strong rect,.atlas-node.stage-very_strong rect{stroke:var(--green);stroke-width:2}.atlas-node.selected rect,.atlas-node:focus rect{stroke:var(--green);stroke-width:3}.atlas-legend{font-size:11px;line-height:1.5}.atlas-detail h2{font:600 34px var(--serif);text-transform:capitalize;margin:8px 0}.atlas-detail dl{display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:12px;padding-block:12px;border-block:1px solid var(--line)}.atlas-detail dt{color:var(--text-secondary)}.atlas-detail dd{margin:0}.atlas-detail ul{padding-left:18px;font-size:12px}.atlas-detail li p{color:var(--text-secondary);line-height:1.5}.atlas-list-row{border-top:1px solid var(--line);padding:10px 0}.atlas-list-row small{display:block;color:var(--text-secondary);margin-block:5px}.atlas-list-row ul{padding-left:20px;font-size:12px;color:var(--text-secondary)}.atlas-empty{padding:32px 20px}.atlas-word-link{text-align:left;padding:4px 15px 10px;font-size:11px}.atlas-accessible summary{cursor:pointer;font-size:12px;padding:10px 0} @media(max-width:1050px){.atlas-layout{grid-template-columns:1fr}.atlas-detail dl{grid-template-columns:1fr 2fr}} @media(max-width:540px){.atlas-toolbar form input{width:100%;flex-basis:100%}.atlas-toolbar .density-tabs{width:100%}.atlas-toolbar .density-tabs button{flex:1;padding:7px 8px}.atlas-filters label{min-width:100%;}.atlas-canvas-card svg{min-height:240px}.atlas-canvas-card .compact-heading{flex-wrap:wrap}.atlas-detail h2{font-size:30px}} .atlas-toolbar form{display:grid;grid-template-columns:auto minmax(150px,1fr) auto;max-width:640px;align-items:center}.atlas-toolbar form input{width:100%}.theme-preview{width:64px!important;height:40px!important;justify-self:center;overflow:hidden}.theme-preview .preview-word{font-size:6px}.theme-preview .preview-top{height:9px}.theme-preview .preview-line{margin:2px 9px}.theme-preview .preview-button{height:4px;margin:3px 15px} @media(max-width:540px){.atlas-toolbar form{grid-template-columns:1fr auto}.atlas-toolbar form label{grid-column:1/-1}.atlas-toolbar form input{width:100%;flex-basis:auto}} /* Override legacy motion exceptions with the shared tiers. */ .custom-select.open .select-options{animation:rc-enter var(--motion-normal) var(--motion-ease) both!important} .custom-select.closing .select-options{display:grid;animation:rc-exit var(--motion-fast) var(--motion-ease) both!important} .custom-select .select-trigger>span:last-child{transition:transform var(--motion-fast) var(--motion-ease)!important} .theme-preview{display:block;background:linear-gradient(135deg,var(--swatch-a) 50%,var(--swatch-b) 50%);padding:0!important} .theme-preview>*{display:none}.theme-preview::after{content:"";display:block;width:36px;height:6px;margin:25px 6px 0;border-radius:2px;background:linear-gradient(90deg,var(--swatch-c) 50%,var(--swatch-d) 50%)} @media(prefers-reduced-motion:reduce){.custom-select.open .select-options,.custom-select.closing .select-options{animation:none!important}.custom-select .select-trigger>span:last-child{transition:none!important}} /* Secondary copy inherits one theme-aware contrast policy across the shell. */ .app-shell .setting-row p,.app-shell .muted,.app-shell .lede,.app-shell .chart-note,.app-shell .chart-summary,.app-shell .word-row-def,.app-shell .empty-state,.app-shell .functional-panel p,.app-shell .task-copy p{color:var(--text-secondary)!important} @media(max-width:1050px){.settings-layout{grid-template-columns:minmax(0,1fr)}.settings-categories{position:static;display:flex;flex-wrap:wrap}.settings-category{flex:1 1 auto}.mnemonic-workspace{grid-template-columns:minmax(0,1fr)}.mnemonic-workspace>*{min-width:0}.setting-row{min-width:0}.setting-row>div{min-width:0}} @media(max-width:520px){.atlas-filters{grid-template-columns:repeat(2,minmax(0,1fr))}.atlas-filters label:last-child{grid-column:1/-1}} @media(max-width:1050px){.settings-panel .setting-row{flex-wrap:wrap}.settings-panel .setting-control{min-width:0;max-width:100%;flex:0 1 220px}.settings-panel .custom-select{min-width:0;width:100%}.settings-panel .select-trigger{min-width:0}.settings-panel .select-trigger [data-select-value]{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}} .app-shell button,.app-shell input,.app-shell textarea,.app-shell select,.app-shell .task-row,.app-shell .achievement-row,.app-shell .settings-category{transition-duration:var(--motion-fast)!important;transition-timing-function:var(--motion-ease)!important} .app-shell .task-progress>i>b,.app-shell .rank-track>i,.app-shell .achievement-track i{transition:width var(--motion-panel) var(--motion-ease)!important} .task-list.task-list-entering,#page-achievements .achievement-list.achievement-list-entering,.leaderboard-list.leaderboard-list-entering{animation:rc-enter var(--motion-normal) var(--motion-ease) both!important} .functional-toast.rc-toast-closing{animation:rc-exit var(--motion-fast) var(--motion-ease) both} @media(prefers-reduced-motion:reduce){.task-list.task-list-entering,#page-achievements .achievement-list.achievement-list-entering,.leaderboard-list.leaderboard-list-entering{animation:none!important}} .rc-lock-note{display:flex;align-items:center;gap:6px}.rc-lock-note svg{flex:none} .rc-lock-note[hidden],.rc-study-tasks[hidden]{display:none!important} .atlas-arrow{fill:none;stroke:var(--border-control);stroke-width:1.5} .rc-item-art:has(.rc-curious-art){display:flex;justify-content:center;gap:12px}.rc-item-art .rc-curious-art{width:40px;height:40px}[data-profile-user]{position:relative}.rc-equipped-badge{position:absolute;right:0;bottom:0;width:22px;height:22px;border-radius:50%;background:var(--paper);border:1px solid var(--green);display:grid;place-items:center}.rc-equipped-badge svg{width:18px;height:18px;fill:none;stroke:var(--green);stroke-width:4} /* Profile/shop repair: keep settings identity row compact and shop sections full width. */ #shop-content{display:block}#page-shop{max-width:1100px;margin-inline:auto}#shop-content>.compact-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:0 0 12px}#shop-content>h2{margin:24px 0 12px}#shop-content>.rc-shop-grid{margin-bottom:24px}#shop-content>.rc-shop-grid>.rc-shop-item{min-width:0} .rc-profile-controls{margin:12px 0;padding:18px;border:1px solid var(--line);border-radius:8px;background:var(--card)}.rc-cosmetic-selects{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.settings-profile{min-height:0;align-items:center}.rc-profile-controls p{margin:8px 0}.rc-cosmetic-selects label{min-width:0}.rc-cosmetic-selects select{max-width:100%} .resolved-avatar{display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:50%;position:relative;overflow:visible}.resolved-avatar.accent-forest{box-shadow:0 0 0 5px #44785e99;background:#44785e}.rc-equipped-badge{z-index:2;right:-4px;bottom:-3px;flex:none}.profile-avatar:has(.rc-equipped-badge),.settings-profile-avatar:has(.rc-equipped-badge){overflow:visible}.rc-avatar-preview{flex:none}.rc-avatar-preview .resolved-avatar{outline:none;box-shadow:none}.rc-avatar-preview.accent-forest{box-shadow:0 0 0 4px #44785e99}.rc-item-art .status-tag{white-space:normal;font-size:11px} @media(max-width:650px){.rc-cosmetic-selects{grid-template-columns:1fr}#shop-content>.compact-heading{flex-wrap:wrap}.settings-profile{flex-wrap:wrap}} /* qol.css */ /* Shared softened-rectangle controls; retain WordWise's theme tokens. */ :root{--control-radius:8px;--control-motion:140ms} .ww-segmented,.density-tabs{display:inline-flex;flex-wrap:wrap;gap:3px;padding:4px;border:1px solid var(--line);border-radius:var(--control-radius);background:var(--card)} .ww-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);padding:0 0 6px} .ww-segmented button,.density-tabs button,.ww-tabs button,.ww-chip,.ww-quiet,.text-button,.functional-actions>button:not(.button),.audio-cues button{appearance:none;border:1px solid transparent;background:transparent;color:var(--muted);font:inherit;font-size:.85rem;font-weight:600;padding:8px 12px;min-height:36px;border-radius:6px;cursor:pointer;transition:background var(--control-motion),color var(--control-motion),transform var(--control-motion)} .ww-tabs button{padding:10px 18px;border-bottom-width:2px;border-radius:6px 6px 0 0} .ww-segmented button[aria-pressed=true],.density-tabs button[aria-pressed=true],.ww-tabs button[aria-pressed=true],.ww-chip[aria-pressed=true]{color:var(--green);background:color-mix(in srgb,var(--green) 12%,var(--card));border-color:color-mix(in srgb,var(--green) 35%,var(--line))} .ww-tabs button[aria-pressed=true]{border-bottom-color:var(--green)} button:hover:not(:disabled),.ww-disclosure summary:hover{background-color:color-mix(in srgb,var(--green) 8%,var(--card))} button:active:not(:disabled){transform:translateY(1px)} button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--green);outline-offset:3px} button:disabled{cursor:default;opacity:.5} .ww-icon{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:7px;border:1px solid var(--line);background:var(--card);color:var(--ink)} .chart-data,.ww-disclosure{margin-top:16px;border:1px solid var(--line);border-radius:8px;overflow:hidden} .chart-data summary,.ww-disclosure summary{padding:12px 14px;font-size:.85rem;font-weight:600;cursor:pointer;color:var(--ink)} .chart-data[open] summary{border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--green) 5%,var(--card))} .ww-buckets{display:grid;grid-template-columns:repeat(auto-fit,minmax(125px,1fr));gap:7px;margin-top:14px} .ww-bucket{display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid var(--line);background:var(--paper);border-radius:7px;padding:10px 12px;color:var(--muted);text-align:left;font:inherit;font-size:.8rem;cursor:pointer} .ww-bucket b{color:var(--ink);font-size:1rem;font-variant-numeric:tabular-nums} .ww-bucket:disabled{opacity:.65} .ww-nav-lock{margin-left:auto;width:13px;height:13px;opacity:.65;flex-shrink:0}.nav-link[aria-disabled=true]{color:var(--muted)} .ww-hero{background:linear-gradient(125deg,color-mix(in srgb,var(--green) 12%,var(--card)),var(--card));border-left:3px solid var(--green);padding:22px;border-radius:10px;margin-bottom:20px} .ww-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,235px),1fr));gap:14px} .ww-item{padding:18px;display:flex;flex-direction:column;gap:10px;min-width:0}.ww-item h3,.ww-item p{margin:0}.ww-item .functional-actions{margin-top:auto} .ww-art{display:grid;place-items:center;width:70px;height:70px;border:2px solid var(--line);border-radius:14px;font-size:28px;color:var(--green);background:color-mix(in srgb,var(--green) 8%,var(--card))} .ww-item small{color:var(--muted)}.ww-item.equipped{border-color:var(--green)} .ww-profile{display:grid;gap:14px}.ww-profile h3{margin:0}.ww-profile-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .ww-profile-stats div{padding:12px;border:1px solid var(--line);border-radius:8px}.ww-profile-stats small{display:block;color:var(--muted)} .ww-social-name{border:0;background:transparent;color:var(--ink);text-align:left;font:inherit;font-weight:650;cursor:pointer;padding:5px 0} .ww-messages{display:grid;grid-template-columns:minmax(190px,260px) minmax(0,1fr);gap:14px;min-height:420px}.ww-conversations{display:flex;flex-direction:column;gap:8px}.ww-conversation{border:1px solid var(--line);border-radius:8px;background:var(--card);padding:12px;text-align:left;color:var(--ink)} .ww-chat{border:1px solid var(--line);border-radius:10px;display:flex;flex-direction:column;min-width:0;padding:16px}.ww-chat-log{display:flex;flex-direction:column;gap:9px;height:330px;overflow:auto;padding:12px 0}.ww-message{max-width:85%;align-self:flex-start;border-radius:8px;background:var(--paper);padding:10px 13px;border:1px solid var(--line);overflow-wrap:anywhere;white-space:pre-wrap}.ww-message.mine{align-self:flex-end;background:color-mix(in srgb,var(--green) 10%,var(--card))}.ww-message small{display:block;color:var(--muted);font-size:.7rem;margin-top:5px}.ww-message button{padding:3px;font-size:.7rem} .ww-compose{display:flex;gap:8px}.ww-compose textarea{min-width:0;flex:1}.ww-privacy-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 0;border-bottom:1px solid var(--line)}.ww-privacy-row select{max-width:180px} .ww-series{padding:18px;margin-bottom:12px}.ww-series-track{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0}.ww-series-step{padding:7px 10px;border:1px solid var(--line);border-radius:6px;color:var(--muted);font-size:.8rem}.ww-series-step.complete{color:var(--green)}.ww-series-step.current{border-color:var(--green);background:color-mix(in srgb,var(--green) 10%,var(--card));color:var(--ink)} .ww-leaderboard-self{position:fixed;z-index:15;left:max(270px,calc((100vw - 1100px)/2));right:24px;padding:12px 18px;background:var(--card);border:1px solid var(--green);border-radius:8px;box-shadow:0 4px 20px #0002;display:flex;align-items:center;gap:18px}.ww-leaderboard-self[hidden]{display:none}.ww-leaderboard-self[data-position=top]{top:85px}.ww-leaderboard-self[data-position=bottom]{bottom:16px} .leaderboard-row[data-placement=gold]{--placement:#b68a34}.leaderboard-row[data-placement=silver]{--placement:#8898a5}.leaderboard-row[data-placement=bronze]{--placement:#b17851}.leaderboard-row[data-placement=amethyst]{--placement:#8c6db5}.leaderboard-row[data-placement=sapphire]{--placement:#528cc2}.leaderboard-row[data-placement]:not([data-placement=""]){border-left:3px solid var(--placement);background:color-mix(in srgb,var(--placement) 5%,var(--card))}.leaderboard-row[data-placement]:not([data-placement=""]) .leaderboard-rank{border:1px solid var(--placement);border-radius:6px;padding:5px;color:var(--ink)} .ww-season-tools{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:14px 0}.ww-status{color:var(--muted);font-size:.85rem}.ww-error{color:var(--ink);padding:14px;border:1px solid var(--line);border-radius:8px} @media(max-width:900px){.ww-leaderboard-self{left:24px}.ww-messages{grid-template-columns:190px minmax(0,1fr)}} @media(max-width:600px){.ww-messages{grid-template-columns:minmax(0,1fr)}.ww-conversations{max-height:160px;overflow:auto}.ww-privacy-row{align-items:flex-start;flex-direction:column}.ww-privacy-row select{width:100%;max-width:none}.ww-leaderboard-self{left:12px;right:12px;font-size:.8rem}.ww-segmented,.density-tabs{max-width:100%}.ww-chat{padding:12px}.ww-buckets{grid-template-columns:repeat(2,minmax(0,1fr))}.ww-compose{flex-wrap:wrap}} @media(prefers-reduced-motion:reduce){*{--control-motion:0ms}} .ww-compose{align-items:flex-end}.ww-compose button{min-height:44px}.ww-compose textarea{height:76px}.chart-empty{min-height:90px}.ww-series meter{width:100%;accent-color:var(--green)} .social-item:has(.ww-art){display:flex;align-items:center;flex-wrap:wrap}.social-item>.ww-art{width:48px;height:48px;flex-shrink:0;font-size:21px}.social-item .functional-actions{margin-left:auto}.ww-art.name-amethyst{color:#b395dd}.ww-art.name-sapphire{color:#65a3dc}.ww-art.name-forest{color:var(--green)}.ww-art.season-0-badge,.ww-art.season-0-frame{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 12%,var(--card));color:var(--gold)} .ww-item small,.ww-status{overflow-wrap:anywhere} .ww-avatar-button{position:relative;padding:4px;cursor:pointer;flex-shrink:0}.ww-avatar-button .avatar-art{width:100%;height:100%}.ww-avatar-button small{position:absolute;right:-5px;bottom:-5px;border-radius:4px;background:var(--card);color:var(--green);padding:2px 4px}.ww-avatar-button.accent-forest{background:color-mix(in srgb,var(--green) 20%,var(--card))}.leaderboard-learner>.ww-avatar-button{width:42px;height:42px} .ww-cosmetic-preview{margin:14px 0;padding:18px;border:2px solid var(--line);border-radius:10px;background:var(--card);font-weight:650}.ww-cosmetic-preview small{display:block}.ww-cosmetic-preview.season-0-frame{border-color:var(--gold)} .home-dashboard[hidden],.global-profile-copy small[hidden],.global-xp-track[hidden]{display:none}.ww-season-dates{width:100%} /* Soft red unread tile; shared by the desktop and mobile sidebar. */ :is(.nav-link,.nav-group>summary) .ww-unread{display:inline-flex;align-items:center;justify-content:center;margin-left:auto;min-width:23px;height:22px;padding:0 6px;border-radius:6px;background:#f7dedd;border:1px solid #e9bcb9;color:#8b3438;font:700 11px var(--sans);font-variant-numeric:tabular-nums;line-height:1;flex-shrink:0}:is(.nav-link,.nav-group>summary) .ww-unread[hidden]{display:none} :root[data-appearance=dark] :is(.nav-link,.nav-group>summary) .ww-unread{background:#533033;border-color:#78474c;color:#ffdad8} /* Shared control polish and bounds for profile media. */ :where(button){appearance:none;font:600 13px var(--sans);color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:9px;padding:9px 14px;cursor:pointer;transition:background-color 120ms,border-color 120ms} :where(button):hover:not(:disabled){border-color:color-mix(in srgb,var(--green) 50%,var(--line));background:color-mix(in srgb,var(--green) 9%,var(--card))} :where(button):focus-visible{outline:2px solid var(--green);outline-offset:3px}:where(button):disabled{cursor:default;opacity:.55} input[type="checkbox"]::before{transform:translateY(-1px) rotate(-45deg)} .resolved-avatar.set-creator-avatar{width:36px;height:36px;max-width:36px;max-height:36px;vertical-align:middle} .resolved-avatar :is(img,svg){display:block;width:100%;height:100%;max-width:100%;object-fit:cover} .ww-avatar-button .resolved-avatar{width:56px;height:56px}.ww-profile .ww-avatar-button{width:76px;height:76px}.ww-profile .ww-avatar-button .resolved-avatar{width:64px;height:64px} .ww-coin-balance{display:inline-flex;align-items:center;gap:10px;padding:11px 17px;border:1px solid color-mix(in srgb,var(--gold) 25%,var(--line));border-radius:13px;background:color-mix(in srgb,var(--gold) 8%,var(--card));font-variant-numeric:tabular-nums}.ww-coin-balance>span{color:var(--gold);font-size:22px}.ww-coin-balance strong{font-size:22px;letter-spacing:-.5px}.ww-coin-balance small{color:var(--muted)} .ww-conversation{display:flex;flex-direction:column;gap:7px;text-align:left;width:100%;padding:15px 16px!important;border-radius:14px!important;background:var(--card);border:1px solid var(--line)!important;margin-bottom:10px}.ww-conversation[aria-pressed=true]{border-color:var(--green)!important;background:color-mix(in srgb,var(--green) 12%,var(--card))}.ww-conversation-top{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%}.ww-conversation-top strong{overflow-wrap:anywhere}.ww-chat-count{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border-radius:7px;background:color-mix(in srgb,var(--green) 14%,var(--card));color:var(--green);font-size:11px;flex:none}.ww-conversation-status{font-size:11px;color:var(--muted)}.ww-message{border-radius:15px!important;display:flex;flex-direction:column;gap:6px}.ww-conversations{min-width:0}.ww-group-picker{display:grid;gap:8px;max-height:300px;overflow:auto}.ww-group-picker label{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:10px}.ww-group-picker small{color:var(--muted)} .rc-study-tasks{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px!important;background:transparent!important;padding:0!important;border:0!important;margin-bottom:20px}.rc-study-tasks[hidden]{display:none!important}.rc-study-tasks .ww-daily-card{display:grid;grid-template-columns:1fr auto;gap:9px;padding:16px;border:1px solid var(--line);border-radius:13px;background:var(--card)}.ww-daily-card>.eyebrow,.ww-daily-card>meter,.ww-daily-card>small{grid-column:1/-1}.ww-daily-card>strong{font-size:14px}.ww-daily-card>small{color:var(--muted);font-size:11px}.ww-daily-card meter{width:100%;height:10px}.ww-daily-card>button{grid-column:1/-1} .ww-reward-line{display:grid;gap:5px;border:1px solid var(--line);border-radius:9px;padding:12px;background:color-mix(in srgb,var(--gold) 7%,var(--card));margin:12px 0}.ww-reward-line small{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:1px}.ww-reward-line strong{font-size:13px}.density-metric strong{overflow-wrap:anywhere}.density-metric:has(strong:not(:empty)){min-width:0} #page-settings .setting-row,#social-privacy-form .ww-privacy-row{gap:20px;padding:20px 0}#page-settings .custom-select{min-width:180px;max-width:100%}#page-settings .select-trigger{border-radius:10px;min-height:44px}.select-options{border-radius:12px;box-shadow:0 12px 34px #0003}.select-options button{border-radius:7px}.sidebar-refresh{display:flex;align-items:center;justify-content:center;gap:9px;margin:8px 16px;width:calc(100% - 32px);background:color-mix(in srgb,var(--green) 8%,var(--card));border-radius:10px} @media(max-width:600px){.rc-study-tasks{grid-template-columns:1fr}.ww-coin-balance strong{font-size:19px}#page-settings .setting-row{flex-wrap:wrap}#page-settings .custom-select{min-width:0;width:100%}.ww-conversation{padding:12px!important}} .button{border-radius:9px}.text-button,.ww-quiet{border:1px solid var(--line);border-radius:8px;padding:8px 12px;background:color-mix(in srgb,var(--green) 5%,var(--card));text-decoration:none;font-weight:600}.text-button:hover,.ww-quiet:hover{border-color:var(--green);background:color-mix(in srgb,var(--green) 12%,var(--card));text-decoration:none}.ww-message .ww-quiet{padding:3px 7px;font-size:10px}.ww-social-name{border:0;background:transparent;padding:0}.density-metric strong:has(+small){font-size:clamp(17px,2vw,29px)} .functional-actions>button:not(.button){border:1px solid var(--line);border-radius:8px;background:color-mix(in srgb,var(--green) 5%,var(--card));padding:8px 12px}.functional-actions>button:not(.button):hover{border-color:var(--green);background:color-mix(in srgb,var(--green) 12%,var(--card))} /* identity.css */ /* A quiet archival environment. Saturation belongs to the collectible edges. */ :root{--world-ink:var(--green);--rarity-common:#8996a6;--rarity-uncommon:#4caa70;--rarity-rare:#508edb;--rarity-epic:#a177dc;--rarity-legendary:#dab145;--rarity-mythic:#de6876} .app-main{position:relative;isolation:isolate}.app-main:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-color:var(--world-ink);opacity:.055;mask-image:var(--world-pattern);mask-size:240px 240px}.page-heading .eyebrow{letter-spacing:.15em}.ww-hero{border-top:2px solid color-mix(in srgb,var(--world-ink) 32%,transparent);background:color-mix(in srgb,var(--card) 95%,var(--world-ink));padding:22px;border-radius:14px} html[data-design="none"]{--world-pattern:none}html[data-design="none"] .app-main:before{display:none} .design-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.design-choice{display:grid;gap:8px;text-align:left;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink)}.design-choice[aria-pressed="true"]{border-color:var(--green);box-shadow:0 0 0 1px var(--green)}.design-swatch{height:72px;position:relative;border-radius:6px;background:var(--paper);overflow:hidden}.design-swatch:after{content:"";position:absolute;inset:0;background:var(--green);mask-image:var(--sample-pattern);mask-size:130px;opacity:.25} .ww-avatar{display:inline-block!important;position:relative;isolation:isolate;width:100%;height:100%;vertical-align:middle;overflow:visible!important;outline:0!important;box-shadow:none!important;background:none!important;border:0!important;border-radius:0!important;padding:0!important}.ww-avatar-crop{position:absolute;inset:12%;display:block;border-radius:50%;overflow:hidden;background:var(--paper)}.ww-avatar-crop>img,.ww-avatar-crop>svg{width:100%!important;height:100%!important;max-width:none!important;display:block;object-fit:cover}.ww-avatar-frame{position:absolute;inset:0;display:block;pointer-events:none;color:var(--frame-ink)}.ww-avatar-frame>svg{width:100%;height:100%;overflow:visible}.ww-avatar-badge{position:absolute;bottom:3%;right:2%;width:24%;height:24%;display:grid;place-items:center;border-radius:50%;background:var(--card);color:var(--gold)}.ww-avatar-badge>svg{width:90%;height:90%;stroke-width:5} :is(.profile-avatar,.global-avatar,.settings-profile-avatar,.ww-avatar-button,.rc-avatar-preview):has(.ww-avatar){padding:0!important;border:0!important;outline:0!important;box-shadow:none!important;background:transparent!important;overflow:visible!important}.ww-avatar-button{width:60px!important;height:60px!important;flex:none}.ww-avatar-button>.ww-avatar{width:100%!important;height:100%!important}.ww-profile .ww-avatar-button{width:94px!important;height:94px!important}.set-creator-avatar{width:36px!important;height:36px!important}.rc-equipped-badge{display:none!important} .ww-profile{gap:20px;min-width:0}.ww-profile-header{display:flex;align-items:center;gap:20px;min-width:0;padding:8px 0 20px;border-bottom:3px solid var(--profile-accent,var(--line))}.ww-profile-header>div{min-width:0}.ww-profile-header h3{font:700 clamp(22px,4vw,30px) var(--sans);overflow-wrap:anywhere}.ww-profile-header small{display:block;margin-top:7px;color:var(--muted);line-height:1.6}.ww-profile-stats{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px}.ww-profile-stats>div{padding:18px;background:color-mix(in srgb,var(--card) 96%,var(--profile-accent,var(--green)));border-top:2px solid var(--profile-accent,var(--line))}.ww-profile-stats strong{display:block;font-size:22px;margin-bottom:5px}.ww-profile-achievements{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.ww-profile-achievements .ww-series-step{display:block;max-width:100%;white-space:normal;overflow-wrap:anywhere;padding:9px 12px;line-height:1.5}.ww-profile [data-profile-status]:empty{display:none}.ww-profile .functional-actions{margin:0}.rc-dialog{width:min(680px,calc(100vw - 32px));max-height:calc(100dvh - 32px)}.rc-dialog-body{min-width:0;overflow-wrap:anywhere}.rc-dialog header{gap:16px} [data-profile-accent="forest"]{--profile-accent:#6a9f78}[data-profile-accent="archive"]{--profile-accent:#c7a767}[data-profile-accent="tide"]{--profile-accent:#76adc4}[data-profile-accent="aurora"]{--profile-accent:#b599cc}.profile-identity{border-top:3px solid var(--profile-accent,var(--line))}.ww-gradient-name{background-image:var(--name-gradient);background-clip:text;-webkit-background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent} .ww-rarity-card{--rarity:var(--rarity-common);border:2px solid var(--rarity)!important;padding:16px!important;border-radius:14px;background:var(--card);min-width:0;display:flex;flex-direction:column;gap:10px}.ww-rarity-card[data-rarity="uncommon"]{--rarity:var(--rarity-uncommon)}.ww-rarity-card[data-rarity="rare"]{--rarity:var(--rarity-rare)}.ww-rarity-card[data-rarity="epic"]{--rarity:var(--rarity-epic)}.ww-rarity-card[data-rarity="legendary"]{--rarity:var(--rarity-legendary)}.ww-rarity-card[data-rarity="mythic"]{--rarity:var(--rarity-mythic)}.ww-rarity-card h2,.ww-rarity-card h3,.ww-rarity-card p{margin:0}.ww-rarity-card .functional-actions{margin-top:auto}.ww-item-stage{min-height:180px;display:grid;place-items:center;align-content:center;gap:10px;position:relative;border-radius:9px;background:color-mix(in srgb,var(--rarity,var(--green)) 11%,var(--paper));overflow:hidden;padding:20px}.ww-item-stage .ww-art-avatar{display:block;width:120px;height:120px}.ww-item-stage .ww-sticker{width:108px;height:108px}.ww-rarity-label{text-transform:uppercase;font-size:11px;font-weight:750;letter-spacing:.1em;color:var(--ink)}.ww-art-name{font-size:21px;font-weight:750;overflow-wrap:anywhere;text-align:center}.ww-art-title{font:italic 24px var(--serif);color:var(--ink)}.ww-item-stage>small{color:var(--muted)}.ww-sticker{display:inline-block;width:100px;height:100px;max-width:100%;color:var(--green);background:color-mix(in srgb,var(--green) 12%,var(--card));border-radius:18px;padding:8px}.ww-sticker svg{width:100%;height:100%;stroke-width:3}.ww-sticker[data-sticker-art="sticker-seal"]{color:var(--gold)}.ww-sticker[data-sticker-art="sticker-streak"]{color:var(--warm)}.ww-sticker[data-sticker-art="sticker-season-0"]{color:var(--gold)}.ww-sticker-picker{display:flex;flex-wrap:wrap;gap:8px;grid-column:1/-1}.ww-sticker-picker button{padding:6px;border:1px solid var(--line);border-radius:10px;background:var(--card)}.ww-sticker-picker .ww-sticker{width:60px;height:60px}.ww-compose [data-sticker-toggle]{align-self:end}.ww-compose{grid-template-columns:minmax(0,1fr) auto auto}.ww-quantity{display:flex;align-items:center;gap:8px}.ww-quantity input{width:72px;min-height:42px;text-align:center;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:8px}.ww-shop-heading{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin:24px 0 14px}.ww-shop-heading h2{margin:0}.ww-context{font-size:11px;display:flex;flex-wrap:wrap;gap:10px;color:var(--muted)}.ww-live-wpm{font:600 12px var(--sans);color:var(--muted);margin:10px 0}.ww-auth-steps{display:flex;gap:12px;list-style:none;padding:0;margin:18px 0;color:var(--muted);font-size:12px}.ww-auth-steps [aria-current="step"]{color:var(--green);font-weight:750}.auth-bootstrap{flex-direction:column;gap:18px}.auth-bootstrap [data-auth-retry]{padding:12px 18px}.auth-bootstrap p{max-width:320px;text-align:center;line-height:1.6}.auth-bootstrap .brand-mark{width:60px;height:60px;font-size:30px} #page-settings{max-width:1320px}#page-settings .setting-row{padding:18px 20px;gap:20px}#page-settings .setting-row>div:first-child{min-width:0;flex:1}#page-settings .setting-control{flex:0 1 210px;min-width:0}.ww-audio-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.ww-audio-group{padding:18px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--paper) 65%,var(--card));min-width:0}.ww-audio-group:first-child{grid-column:1/-1}.ww-audio-group>h3{margin:0 0 14px;font:600 23px var(--serif)}.ww-audio-group .setting-row{padding:15px!important}.ww-audio-group .functional-actions{gap:8px}.ww-audio-group .settings-list{gap:9px}.ww-audio-group .audio-cues{padding:14px}.ww-audio-group .range-control{max-width:180px}.ww-audio-group .settings-list>.functional-actions{flex-wrap:wrap}.settings-save-bar{gap:14px} :is(button,.button,.nav-link,.settings-category,.ww-item-stage,[data-atlas-node],.atlas-graph){user-select:none}input,textarea,.ww-message,.definition,.help-content{user-select:text}.ww-rarity-card:is([data-rarity="rare"],[data-rarity="epic"],[data-rarity="legendary"],[data-rarity="mythic"]):hover .ww-art-avatar{transform:scale(1.035);transition:transform .3s ease}.premium-loop{animation:archival-glow 8s ease-in-out infinite}@keyframes archival-glow{0%,100%{filter:drop-shadow(0 0 1px transparent)}50%{filter:drop-shadow(0 0 3px var(--frame-ink));opacity:.85}} @media(max-width:1050px){.ww-audio-groups{grid-template-columns:1fr}.ww-audio-group:first-child{grid-column:auto}}@media(max-width:600px){.design-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ww-profile-header{gap:12px}.ww-profile .ww-avatar-button{width:78px!important;height:78px!important}.ww-profile-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.ww-compose{grid-template-columns:minmax(0,1fr) auto}.ww-compose textarea{grid-column:1/-1}.ww-audio-group{padding:12px}#page-settings .setting-control{width:100%;flex-basis:100%}.ww-item-stage{min-height:160px}} @media(prefers-reduced-motion:reduce){.premium-loop{animation:none}.ww-art-avatar{transition:none!important;transform:none!important}}@media(forced-colors:active){.ww-gradient-name{background:none;color:CanvasText!important;-webkit-text-fill-color:CanvasText}.ww-rarity-card{border-color:CanvasText!important}.app-main:before{display:none}} @media(min-width:1200px){.ww-audio-group:first-child .settings-list,.ww-audio-group:last-child .settings-list{grid-template-columns:repeat(2,minmax(0,1fr))}.ww-audio-group:first-child .settings-list>.functional-actions{grid-column:1/-1}.ww-audio-group:last-child{grid-column:1/-1}} html[data-theme="high-contrast"] .app-main:before{display:none}.ww-item-stage>svg{width:105px;height:105px;stroke:var(--green);stroke-width:3}.ww-profile-achievements{align-items:flex-start}.ww-reward-art{display:flex;flex-wrap:wrap;gap:12px}.ww-reward-art .ww-sticker{width:80px;height:80px} .ww-reward-art .ww-item-stage{min-height:100px;padding:12px}.ww-reward-art .ww-art-avatar{width:76px;height:76px}.ww-season-cosmetics{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:14px 0}.ww-season-cosmetics .ww-item-stage{min-height:120px}.ww-season-cosmetics .ww-art-avatar{width:84px;height:84px} html[data-registration-pending="true"] #page-profile .profile-card,html[data-registration-pending="true"] #avatar-button{display:none}html[data-registration-pending="true"] #page-profile .profile-grid{grid-template-columns:minmax(0,560px);justify-content:center} #auth-confirm-fields [data-auth-change-email]{margin-top:8px}#auth-code-fields .functional-actions{gap:10px} .ww-audio-group .setting-row:has(.range-control),.ww-audio-group .setting-row:has(.setting-control){flex-direction:column;align-items:stretch;gap:12px}.ww-audio-group .setting-row>div:first-child{min-width:0}.ww-audio-group .range-control,.ww-audio-group .setting-control,.ww-audio-group .custom-select{width:100%;max-width:none;min-width:0}.ww-audio-group .setting-control{flex-basis:auto}.ww-audio-group .select-trigger{width:100%;min-width:0} #page-settings .ww-audio-group .setting-row{display:flex!important}#page-settings .ww-audio-group .setting-row>div:first-child{flex:0 1 auto}#page-settings .ww-audio-group .setting-control{flex:0 1 auto} /* Clear account stages and visible availability for external sign-in options. */ #auth-verified-email{font:600 .78rem/1.5 var(--sans);overflow-wrap:anywhere;border-left:3px solid var(--green);padding:9px 12px;background:color-mix(in srgb,var(--green) 7%,var(--card));border-radius:8px} #auth-message:not(:empty){font-size:.78rem!important;line-height:1.6;padding:11px 13px;border:1px solid color-mix(in srgb,var(--green) 20%,var(--line));border-radius:10px;background:color-mix(in srgb,var(--green) 5%,var(--card));color:var(--ink);overflow-wrap:anywhere} #auth-message.error:not(:empty){color:var(--ink);background:color-mix(in srgb,var(--error) 7%,var(--card));border-color:color-mix(in srgb,var(--error) 40%,var(--line))} .auth-delivery-help{margin:16px 0;font:.76rem/1.6 var(--sans);padding:10px 12px;border:1px dashed var(--line);border-radius:10px;background:var(--card)}.auth-delivery-help summary{cursor:pointer;color:var(--green);font-weight:650}.auth-delivery-help p{margin:9px 0 0;color:var(--muted)} .final-oauth .button>span{margin:0;font:.76rem/1.4 var(--sans);text-align:left}.final-oauth [data-provider-note]{display:block;margin-top:3px;font-size:.66rem;font-weight:500;color:var(--muted)}.final-oauth [data-unavailable=true]{opacity:.72;cursor:not-allowed}.provider-availability{font:.75rem/1.6 var(--sans);color:var(--muted)} /* beta.css */ /* Beta polish: contain controls, preserve input editing, give each collection a home. */ html body{user-select:none;-webkit-user-select:none}html body :is(input,textarea,[contenteditable="true"]){user-select:text;-webkit-user-select:text}img,svg{-webkit-user-drag:none}html body :is(.ww-message,.definition,.help-content){user-select:none} html body input[type="checkbox"]{width:20px!important;inline-size:20px!important;max-width:20px!important;min-width:20px!important;height:20px!important;min-height:20px!important;flex:0 0 20px!important;margin:0;vertical-align:middle}.ww-group-picker label{display:flex!important;align-items:center;gap:14px}.ww-group-picker label>span{min-width:0} .topbar{min-height:76px;height:auto;padding-block:12px}.topbar-right{min-width:0;max-width:70%;gap:12px}.global-profile{min-width:0;max-width:245px;height:auto!important;padding:6px 10px!important;align-self:center}.global-profile-copy{min-width:0}.global-profile-copy>strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ww-context{font-size:10px;line-height:1.3;white-space:nowrap}.global-avatar{flex:0 0 38px;width:38px!important;height:38px!important}.topbar .global-profile .ww-avatar{display:block!important} .ww-rarity-card{border-width:3px!important;min-height:0!important;display:flex;flex-direction:column;gap:12px;padding:18px!important}.ww-rarity-card>h3,.ww-rarity-card>p{margin:0}.ww-rarity-card>.functional-actions{margin-top:8px}.ww-rarity-card>p{line-height:1.55;font-size:13px}.ww-rarity-card .ww-item-stage{min-height:160px;padding:18px}.ww-rarity-card .ww-rarity-label{display:none}.ww-item-meta{display:flex;align-items:center;flex-wrap:wrap;gap:7px;font-size:11px}.ww-item-meta>span{border:1px solid var(--rarity-common);border-radius:7px;padding:5px 8px;background:color-mix(in srgb,var(--card) 88%,var(--rarity-common));text-transform:capitalize}.ww-item-meta>i{font-style:normal;color:var(--muted)}.ww-item-meta .rarity-chip{border-color:var(--rarity-ink);background:color-mix(in srgb,var(--card) 80%,var(--rarity-ink))}.ww-item-meta .availability-chip{border-color:#579496;background:color-mix(in srgb,var(--card) 82%,#92c8c5)}.ww-item-meta .availability-chip[data-availability="permanent"]{border-color:#b27e50;background:color-mix(in srgb,var(--card) 82%,#e2bd91)}.ww-item-meta .availability-chip[data-availability="seasonal"]{border-color:#bb7590;background:color-mix(in srgb,var(--card) 82%,#e6adc7)}.ww-rarity-card[data-rarity="epic"]{--rarity-ink:#77529d}.ww-rarity-card[data-rarity="mythic"]{--rarity-ink:#c95771}.ww-rarity-card[data-rarity="legendary"]{--rarity-ink:#b58c29}.ww-rarity-card[data-rarity="rare"]{--rarity-ink:#467fb5}.ww-rarity-card[data-rarity="uncommon"]{--rarity-ink:#528e67}.ww-rarity-card[data-rarity="common"]{--rarity-ink:#8996a6} .ww-shop-section{margin-block:28px}.ww-shop-category{padding-top:14px;border-top:1px solid var(--line)}.ww-shop-category>h3{font:600 23px var(--serif);margin:8px 0 14px}.ww-shop-tier>h4{font:600 12px var(--sans);text-transform:capitalize;margin:18px 0 10px;color:var(--muted)}.rc-shop-grid{grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr));align-items:start;gap:16px}.ww-quantity{display:flex;flex-wrap:wrap;gap:8px;font-size:12px}.ww-stepper{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--paper)}.ww-stepper>button{border:0;background:transparent;color:var(--green);width:38px;height:40px;font-size:20px}.ww-stepper input{appearance:textfield;width:70px!important;max-width:70px;border:0!important;background:transparent!important;margin:0;padding:8px!important;min-height:40px!important}.ww-stepper input::-webkit-inner-spin-button{appearance:none}.ww-quantity .text-button{padding:8px} .ww-market{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:20px;background:color-mix(in srgb,var(--card) 90%,#c8a477);padding:22px;margin-bottom:26px}.ww-market:before{content:"";position:absolute;top:0;left:0;right:0;height:12px;background:repeating-linear-gradient(90deg,var(--green) 0 46px,color-mix(in srgb,var(--green) 35%,var(--card)) 46px 92px)}.ww-merchant{display:flex;align-items:center;gap:20px}.ww-merchant-art{flex:0 0 92px;width:92px;height:112px}.ww-merchant-copy{max-width:650px}.ww-merchant-copy h2{font:600 28px var(--serif);margin:0 0 8px}.ww-merchant-copy p{margin:6px 0;line-height:1.6}.ww-merchant-name{font:600 10px var(--mono);letter-spacing:1px;color:var(--muted)}.ww-stall{position:relative;overflow:hidden}.ww-stall:before,.ww-stall:after{content:"";position:absolute;inset:0 50% 0 0;background:repeating-linear-gradient(90deg,#426651 0 28px,#345640 28px 56px);z-index:3;pointer-events:none;transform:translateX(-102%)}.ww-stall:after{inset:0 0 0 50%;transform:translateX(102%)}.ww-stall.is-refreshing:before,.ww-stall.is-refreshing:after{transform:translateX(0);transition:transform .35s}.ww-stall.is-opening:before{animation:stall-open-left .6s both}.ww-stall.is-opening:after{animation:stall-open-right .6s both}@keyframes stall-open-left{from{transform:translateX(0)}to{transform:translateX(-102%)}}@keyframes stall-open-right{from{transform:translateX(0)}to{transform:translateX(102%)}} .daily-card{position:relative;overflow:hidden;padding-left:100px!important;min-height:140px}.ww-daily-sun{position:absolute;left:-26px;bottom:-24px;width:124px;height:124px;color:#f1c45f;pointer-events:none}.ww-daily-sun>svg{width:100%;height:100%}.daily-card .daily-icon{display:none} [data-frame-art="frame-laurel"],[data-frame-art="frame-aurora"]{animation:legendary-breathe 6s ease-in-out infinite}[data-frame-art="frame-masterpiece"]{animation:gilded-shimmer 5s ease-in-out infinite}[data-frame-art="frame-living-vines"]{animation:vine-breathe 7s ease-in-out infinite;transform-origin:50% 90%}[data-frame-art="frame-crimson"]{animation:crimson-ink 6s ease-in-out infinite}@keyframes legendary-breathe{50%{filter:drop-shadow(0 0 4px var(--frame-ink))}}@keyframes gilded-shimmer{50%{filter:drop-shadow(0 0 5px #e3bb64);transform:scale(1.025)}}@keyframes vine-breathe{50%{transform:rotate(1deg) scale(1.025);filter:drop-shadow(0 1px 2px #447653)}}@keyframes crimson-ink{50%{filter:drop-shadow(0 0 4px #d66f75);opacity:.78}} .app-main:before{opacity:.09;-webkit-mask-image:var(--world-pattern);-webkit-mask-size:240px 240px}.design-swatch:after{-webkit-mask-image:var(--sample-pattern);-webkit-mask-size:130px} @media(max-width:900px){.topbar-right{max-width:75%}.topbar .sync-state{display:none}.global-profile{max-width:210px}.ww-context{display:none}}@media(max-width:600px){.topbar{padding:10px 14px;gap:8px}.topbar .breadcrumb{display:none}.topbar-right{max-width:calc(100% - 42px);margin-left:auto;gap:8px}.global-profile{max-width:185px}.global-profile-copy>strong{max-width:112px}.ww-market{padding:22px 16px 16px}.ww-merchant-art{flex-basis:65px;width:65px;height:90px}.ww-merchant{gap:12px}.ww-merchant-copy h2{font-size:23px}.daily-card{padding-left:76px!important}.ww-daily-sun{width:100px;height:100px;left:-28px}.rc-shop-grid{grid-template-columns:1fr}} @media(prefers-reduced-motion:reduce){[data-frame-art],.ww-stall:before,.ww-stall:after{animation:none!important;transition:none!important}.ww-stall:before{transform:translateX(-102%)!important}.ww-stall:after{transform:translateX(102%)!important}} .ww-item-stage[data-rarity="legendary"]{animation:legendary-stage 7s ease-in-out infinite}.ww-item-stage[data-rarity="mythic"]{animation:mythic-stage 8s ease-in-out infinite}@keyframes legendary-stage{50%{box-shadow:inset 0 0 24px color-mix(in srgb,var(--rarity-legendary) 18%,transparent)}}@keyframes mythic-stage{50%{box-shadow:inset 0 0 32px color-mix(in srgb,var(--rarity-mythic) 18%,transparent)}}@media(prefers-reduced-motion:reduce){.ww-item-stage{animation:none!important}} .ww-shop-tiers{display:flex;align-items:flex-start;flex-wrap:wrap;gap:18px}.ww-shop-tiers>.ww-shop-tier{flex:1 1 260px;min-width:0}.ww-shop-tiers>.ww-shop-tier:only-child{flex:1 1 100%}.ww-shop-tiers .rc-shop-grid{grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr))}.ww-perk{font-size:11px!important;padding:10px;border-radius:9px;background:color-mix(in srgb,var(--rarity-ink) 10%,var(--card))} html body *{user-select:none;-webkit-user-select:none}html body :is(input,textarea,[contenteditable="true"]),html body [contenteditable="true"] *{user-select:text;-webkit-user-select:text} @media(max-width:600px){.daily-card{display:grid!important;grid-template-columns:minmax(0,1fr);gap:12px}.daily-card .daily-body{min-width:0}.daily-card>.text-button{justify-self:start;white-space:normal;max-width:100%}} @media(max-width:600px){.daily-card>.text-button,.daily-card>.daily-body{grid-column:1!important;grid-row:auto!important}.daily-card>.text-button{width:auto!important;min-width:0!important}.daily-card>.daily-body{width:auto!important}} html body input[type="checkbox"]{padding:0!important;place-content:center}html body input[type="checkbox"]:checked{background:#77739f;border-color:#77739f}html body input[type="checkbox"]:checked::before{opacity:1} html body .switch-control input[type="checkbox"]{width:1px!important;inline-size:1px!important;min-width:1px!important;max-width:1px!important;height:1px!important;min-height:1px!important;flex:0 0 1px!important;background:transparent!important;border:0}.switch-control input[type="checkbox"]::before{display:none} html body input[type="checkbox"]:checked{background:#77739f!important;border-color:#77739f!important}html body .switch-control input[type="checkbox"]:checked{background:transparent!important;border-color:transparent!important} /* Admin settings, diagnostics and labels support normal text selection/copy. */ html body #page-admin,html body #page-admin *{user-select:text;-webkit-user-select:text} /* wonder.css */ /* Illustrated world and responsive controls. */ .app-main:before{background:var(--design-ink,var(--green));opacity:var(--design-opacity,.09)} .ww-design-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;padding:20px 0}.ww-design-controls label{display:grid;gap:12px;color:var(--ink);font-size:13px}.ww-design-controls output{font:600 12px var(--mono);color:var(--muted)}.ww-design-controls input{width:100%;accent-color:var(--green)}.ww-design-controls button{justify-self:start}.ww-design-controls p{margin:0;font-size:12px}.ww-hue-slider{appearance:none;background:linear-gradient(90deg,#d66565,#d9c565,#6bb679,#659ad2,#b376cd,#d66565);height:10px;border-radius:8px}.ww-hue-slider::-webkit-slider-thumb{appearance:none;width:20px;height:20px;background:var(--card);border:3px solid var(--ink);border-radius:50%} .wonder-banner{position:relative;width:100%;aspect-ratio:1200/260;border-radius:12px;overflow:hidden;min-height:65px}.wonder-banner svg{display:block;width:100%;height:100%}.ww-item-stage:has(.wonder-banner){padding:0;min-height:140px}.ww-item-stage>.wonder-banner{aspect-ratio:2.7;min-height:140px;height:100%;border-radius:8px}.wonder-sticker{background:transparent!important;padding:0!important;border-radius:0!important}.wonder-sticker svg{stroke-width:2} .wonder-home-scene{position:relative;margin:10px 0 24px;border-radius:18px;overflow:hidden;min-height:180px}.wonder-home-scene>.wonder-banner{position:absolute;inset:0;height:100%;border-radius:0;opacity:.88}.wonder-home-scene>div:last-child{position:relative;z-index:1;display:grid;gap:9px;max-width:530px;padding:30px;color:#f7f0d6;background:linear-gradient(90deg,#203d3bed,transparent)}.wonder-home-scene small{font:11px var(--mono);letter-spacing:.12em}.wonder-home-scene strong{font:600 clamp(23px,3vw,35px) var(--serif)}.wonder-home-scene span{font-size:13px;line-height:1.6} #page-profile .profile-grid{grid-template-columns:minmax(0,2fr) minmax(280px,1fr);gap:20px;align-items:start}#page-profile .profile-card{overflow:hidden;padding:0}#page-profile .profile-card>:not(.wonder-own-banner){margin:0;padding:24px}#page-profile .profile-card>.profile-identity{padding-top:12px}.wonder-own-banner:empty{display:none}.wonder-own-banner>.wonder-banner{border-radius:0}.wonder-profile-default{position:relative}.wonder-profile-default .wonder-banner{border-radius:0;opacity:.7}.wonder-profile-default>span{position:absolute;bottom:12px;left:24px;color:#fff2ce;background:#302b36c9;padding:7px 12px;border-radius:5px;font:italic 16px var(--serif)}.ww-profile>.wonder-banner{margin-bottom:16px;height:130px}.leaderboard-row{position:relative;isolation:isolate;background-image:linear-gradient(color-mix(in srgb,var(--card) 88%,transparent),color-mix(in srgb,var(--card) 88%,transparent)),var(--learner-banner,none);background-size:cover;background-position:center} .wonder-season-hero{position:relative;isolation:isolate;overflow:hidden;padding:26px;border-radius:16px;background:color-mix(in srgb,var(--green) 13%,var(--card));border:1px solid var(--line);grid-column:1/-1;width:100%}.wonder-season-hero small{font:10px var(--mono);letter-spacing:.12em}.wonder-season-hero h2{margin:8px 0;font:600 35px var(--serif)}.wonder-season-hero p{margin:0;line-height:1.6;max-width:460px}.wonder-season-watermark{position:absolute;z-index:-1;right:-10px;bottom:-12px;font:900 clamp(70px,10vw,140px) var(--sans);color:color-mix(in srgb,var(--green) 14%,transparent);white-space:nowrap}.ww-season-tools{display:flex!important;flex-wrap:wrap;align-items:center;gap:12px}.ww-season-tools>.wonder-season-hero,.ww-season-tools>.ww-disclosure,.ww-season-tools>.ww-season-cosmetics,.ww-season-tools>.ww-season-dates{flex-basis:100%;min-width:0}.ww-season-tools>.ww-disclosure{margin:0}.ww-season-dates{margin:0}.wonder-seasonal{clear:both} .wonder-rarity-guide{padding:16px 20px;border:1px solid var(--line);border-radius:12px;background:var(--card);margin-bottom:20px}.wonder-rarity-guide summary{font-weight:650;cursor:pointer}.wonder-rarity-guide p{font-size:12px;line-height:1.7;color:var(--muted)}.wonder-odds{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}.wonder-odds>span{padding:12px 8px;background:var(--paper);border-radius:8px;display:grid;gap:6px;text-transform:capitalize;font-size:11px}.wonder-odds b{font-size:18px;color:var(--green)} .ww-stall:before,.ww-stall:after{display:none!important}.wonder-curtains{position:absolute;inset:0;z-index:5;pointer-events:none;overflow:hidden}.wonder-curtain{position:absolute;inset:0 50% 0 0;display:flex;transform:translateX(-105%)}.wonder-curtain-right{inset:0 0 0 50%;transform:translateX(105%)}.wonder-curtain i{display:block;flex:1;min-width:0;height:calc(100% + 10px);background:linear-gradient(90deg,#203c35,#476c57 38%,#577965 52%,#253e33);border-right:1px solid #1d382a;box-shadow:inset -4px 0 8px #102a2533;transform-origin:top;border-bottom:6px solid #b6975b;border-radius:0 0 45% 45%;transform:translateY(calc(var(--ripple)*3px))}.ww-stall.is-refreshing .wonder-curtain-left{animation:curtain-close-left .85s cubic-bezier(.4,0,.2,1) both}.ww-stall.is-refreshing .wonder-curtain-right{animation:curtain-close-right .85s cubic-bezier(.4,0,.2,1) both}.ww-stall.is-opening .wonder-curtain-left{animation:curtain-open-left 1.1s cubic-bezier(.4,0,.2,1) both}.ww-stall.is-opening .wonder-curtain-right{animation:curtain-open-right 1.1s cubic-bezier(.4,0,.2,1) both}.ww-stall:is(.is-refreshing,.is-opening) .wonder-curtain i{animation:curtain-fold .85s ease-in-out both;animation-delay:calc(var(--fold)*15ms)} @keyframes curtain-close-left{0%{transform:translateX(-105%)}72%{transform:translateX(2%)}86%{transform:translateX(-1%)}100%{transform:translateX(0)}}@keyframes curtain-close-right{0%{transform:translateX(105%)}72%{transform:translateX(-2%)}86%{transform:translateX(1%)}100%{transform:translateX(0)}}@keyframes curtain-open-left{0%{transform:translateX(0)}22%{transform:translateX(1%)}85%{transform:translateX(-107%)}100%{transform:translateX(-105%)}}@keyframes curtain-open-right{0%{transform:translateX(0)}22%{transform:translateX(-1%)}85%{transform:translateX(107%)}100%{transform:translateX(105%)}}@keyframes curtain-fold{0%,100%{transform:translateY(calc(var(--ripple)*3px)) skewX(0)}48%{transform:translateY(calc(var(--ripple)*8px)) skewX(calc(var(--ripple)*2deg))}} .wonder-pack{display:grid;grid-template-columns:150px minmax(0,1fr);gap:24px;padding:24px!important;background:color-mix(in srgb,var(--card) 94%,var(--gold));align-items:center}.wonder-pack h3{font:600 25px var(--serif);margin:8px 0}.wonder-pack p{font-size:13px;line-height:1.7}.wonder-pack-cover{border-radius:12px;background:#31564f;box-shadow:8px 8px 0 #b99b6930;display:grid;text-align:center;padding:15px;color:#f1deb5;transform:rotate(-3deg)}.wonder-pack-cover span{font:600 16px var(--serif)}.wonder-pack-cover svg{width:100%;height:130px}.wonder-pack-rewards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));gap:12px}.wonder-pack-rewards p{font-size:12px;line-height:1.5}.wonder-pack-rewards .ww-item-stage{min-height:90px}.wonder-pack-rewards .ww-art-avatar{width:78px;height:78px}.wonder-pack-rewards .ww-sticker{width:80px;height:80px} .wonder-film{--film-rarity:var(--rarity-common);position:relative;overflow:hidden;padding:22px 0;border-block:7px solid var(--film-rarity);background:#26333c;border-radius:8px;margin:18px 0}.wonder-film:before,.wonder-film:after{content:"";position:absolute;left:0;right:0;top:5px;height:9px;background:repeating-linear-gradient(90deg,#ebdfbe 0 9px,transparent 9px 20px)}.wonder-film:after{top:auto;bottom:5px}.wonder-film[data-rarity="uncommon"]{--film-rarity:var(--rarity-uncommon)}.wonder-film[data-rarity="rare"]{--film-rarity:var(--rarity-rare)}.wonder-film[data-rarity="epic"]{--film-rarity:var(--rarity-epic)}.wonder-film[data-rarity="legendary"]{--film-rarity:var(--rarity-legendary)}.wonder-film[data-rarity="mythic"]{--film-rarity:var(--rarity-mythic)}.wonder-film-track{display:flex;width:400%;transform:translateX(-75%);animation:film-reveal 2.2s cubic-bezier(.15,.65,.15,1) both}.wonder-film-track>article{width:25%;padding:12px;background:var(--card);flex:none;text-align:center;border-inline:5px solid var(--film-rarity)}.wonder-film-track h3{margin:10px 0}.wonder-film-track p{font-size:12px;line-height:1.7;padding:0 12px}.wonder-film-leader{width:75%;display:flex;flex:none;align-items:center;justify-content:space-around;color:#d6c491;font-size:50px}.wonder-film-leader span{width:25%;padding:60px 0;text-align:center;border:2px solid #887b62}@keyframes film-reveal{0%{transform:translateX(0) scaleY(.85)}75%{transform:translateX(-76%)}100%{transform:translateX(-75%) scaleY(1)}} .wonder-trades{padding:18px;margin-top:14px;border:1px solid var(--line);border-radius:12px;background:var(--paper);grid-column:1/-1}.wonder-trades[hidden]{display:none}.wonder-trades>p,.wonder-trades form>p{font-size:12px;line-height:1.7}.wonder-trades form{display:grid;gap:12px}.wonder-trades label{display:grid;gap:8px;font-size:13px}.wonder-trades select,.wonder-trades input{width:100%;max-width:100%;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink)}.wonder-trade-preview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.wonder-trade-preview .ww-item-stage{min-height:120px}.wonder-trade-preview .ww-art-avatar{width:76px;height:76px}.wonder-trade-preview strong{display:block;font-size:12px;margin-top:8px}.wonder-trade-row{padding:14px;border:1px solid var(--line);border-radius:10px;margin-top:12px;overflow-wrap:anywhere}.wonder-trade-row p{font-size:13px}.wonder-trade-row small{font-size:11px;color:var(--muted)} @media(max-width:850px){#page-profile .profile-grid{grid-template-columns:1fr}.wonder-odds{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:600px){.ww-design-controls{grid-template-columns:1fr}.wonder-home-scene>div:last-child{padding:22px}.wonder-pack{grid-template-columns:90px minmax(0,1fr);gap:16px;padding:16px!important}.wonder-pack-cover{padding:8px}.wonder-pack-cover svg{height:88px}.wonder-pack h3{font-size:22px}.wonder-pack .functional-actions{grid-column:1/-1}.wonder-season-hero{padding:20px}#page-profile .profile-card>:not(.wonder-own-banner){padding:18px}.wonder-profile-default>span{font-size:13px;left:14px}.wonder-trade-preview{grid-template-columns:1fr}} @media(prefers-reduced-motion:reduce){.wonder-curtain,.wonder-curtain i,.wonder-film-track{animation:none!important}.wonder-pack-cover{transform:none}} @media(forced-colors:active){.app-main:before{display:none}.leaderboard-row{background-image:none}.wonder-film{border-color:CanvasText}.wonder-season-watermark{display:none}} /* Keep entire panoramic scenes visible in previews instead of cropping away their landmarks. */ .ww-item-stage:has(.wonder-banner){min-height:0;display:block;aspect-ratio:1200/260;padding:0}.ww-item-stage>.wonder-banner{height:auto;min-height:0;aspect-ratio:1200/260}.wonder-pack-rewards:has(.wonder-banner){grid-template-columns:1fr}.ww-grid .ww-rarity-card:has(.wonder-banner){grid-column:1/-1}.wonder-film .ww-item-stage:has(.wonder-banner){margin:4px 0} /* Collections share one grid, so the last earned title never stretches into a separate row. */ #inventory-content .ww-inventory-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));align-items:start;gap:20px;margin-top:18px} #inventory-content .ww-hero{margin-bottom:20px}#inventory-content .ww-segmented{gap:8px;margin-bottom:16px}#inventory-status:empty{display:none} #inventory-content .ww-rarity-card{height:100%;box-sizing:border-box}#inventory-content .ww-rarity-card .functional-actions{margin-top:auto;padding-top:8px;flex-wrap:wrap}#inventory-content .ww-item-meta{min-height:28px} .ww-stepper>button{display:grid;place-items:center;flex:0 0 40px;min-width:40px;min-height:44px;padding:0!important;margin:0;line-height:1;text-align:center;align-self:stretch;box-sizing:border-box}.ww-stepper input{height:44px!important;box-sizing:border-box}.ww-quantity{align-items:center} /* A large varied composition replaces the old 240px repeat of one motif. */ .app-main:before{-webkit-mask-size:960px 823px;mask-size:960px 823px} .design-swatch{height:108px}.design-swatch:after{-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;opacity:.42}.design-choice small{font-size:11px;line-height:1.6;color:var(--muted)} .ww-accent-collection{padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--paper);display:grid;gap:10px}.ww-accent-collection>span{display:block;height:100px;background:var(--green);mask-image:var(--sample-pattern);-webkit-mask-image:var(--sample-pattern);mask-size:100% 100%;-webkit-mask-size:100% 100%;opacity:.6}.ww-accent-collection p{font-size:11px;line-height:1.6}.ww-accent-collection strong{display:block;margin-bottom:5px;color:var(--ink)} .ww-supply-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.ww-supply-grid>.ww-shop-category{min-width:0}.ww-supply-grid .rc-shop-grid{grid-template-columns:1fr}.ww-supply-grid .ww-rarity-card{height:100%;box-sizing:border-box} @media(max-width:600px){.ww-supply-grid{grid-template-columns:1fr}} .ww-design-controls>p:empty{display:none}.ww-supply-grid>.ww-shop-category{display:flex;flex-direction:column}.ww-supply-grid .ww-shop-tiers{flex:1}.ww-supply-grid .ww-shop-tier{display:flex;flex-direction:column}.ww-supply-grid .rc-shop-grid{flex:1}.ww-supply-grid .ww-rarity-card>.functional-actions{margin-top:auto;padding-top:8px} @media(max-width:600px){#page-settings .setting-row{flex-wrap:nowrap;flex-direction:column;align-items:stretch;min-height:0}#page-settings .setting-row>div:first-child{flex:0 1 auto}#page-settings .setting-control{flex:0 1 auto;width:100%;max-width:100%}#page-settings .custom-select{min-width:0;max-width:100%}} .ww-supply-grid>.ww-shop-category{display:grid;grid-template-rows:auto auto 1fr}.ww-supply-grid .ww-shop-tiers,.ww-supply-grid .ww-shop-tier{display:contents}.ww-supply-grid .rc-shop-grid{align-items:stretch} /* final-ui.css */ /* Deliberate, compact hierarchy and bounded menus. */ #friend-search-results .social-item,.social-list .social-item{display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--card)} #friend-search-results{display:grid;gap:10px}#friend-search-results .social-item>div{display:grid;gap:5px;min-width:0}#friend-search-results .ww-social-name{display:block;max-width:100%;text-align:left;overflow-wrap:anywhere}#friend-search-results small{display:block;overflow-wrap:anywhere}#friend-search-results .ww-avatar-button{width:48px;height:48px;min-width:48px;flex:none}#friend-search-results .ww-avatar{width:48px;height:48px}#friend-search-results .button{margin:0;white-space:normal} .custom-select.opens-up .select-options{top:auto;bottom:calc(100% + 8px);transform-origin:bottom}.select-options{overscroll-behavior:contain;max-width:min(100%,calc(100vw - 32px));overflow:auto}.final-search{display:block;width:100%;margin:12px 0}.final-search input{width:100%} .final-index-tabs,.final-categories{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.final-index-tabs button,.final-categories button{padding:9px 14px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink)}.final-index-tabs [aria-pressed=true],.final-categories [aria-pressed=true]{background:color-mix(in srgb,var(--green) 13%,var(--card));border-color:var(--green)} .final-item-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(210px,100%),1fr));gap:14px;margin:14px 0 22px}.final-item-grid article{min-width:0;padding:16px;display:grid;align-content:start;gap:8px}.final-item-grid h3,.final-item-grid p{margin:0}.final-item-grid .ww-item-stage{height:130px}.final-item-grid button{text-align:left}.final-rarity-heading{display:flex;align-items:center;gap:10px;margin-top:22px}.final-rarity-heading .rarity-chip{padding:5px 10px;border:1px solid var(--line);border-radius:8px;font-size:12px}.final-rarity-heading small{color:var(--muted)} .final-info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:14px 0}.final-info-grid>div{padding:12px;border:1px solid var(--line);border-radius:10px;display:grid;gap:5px}.final-info-grid small{color:var(--muted)}.final-exclusive{background:color-mix(in srgb,#d2b67c 13%,var(--card));border-color:#a88a56}.final-bio{white-space:pre-wrap;overflow-wrap:anywhere;max-width:65ch}.final-bio-controls{margin-top:20px}.final-bio-controls textarea{width:100%} .final-audio-cue{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:8px;align-items:stretch;margin:8px 0}.final-audio-cue>label,.final-audio-cue>div,.final-audio-cue>button{border:1px solid var(--line);border-radius:10px;background:var(--card);padding:12px}.final-audio-cue>label{display:grid;place-items:center;margin:0}.final-audio-cue strong,.final-audio-cue small{display:block}.final-audio-cue small{font-size:12px;color:var(--muted);margin-top:4px}.audio-cues .cue-grid{display:block} .final-focus-controls{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0}.final-focus-controls label{display:grid;gap:7px}.final-focus-controls input[type=checkbox]{width:18px}.final-focus-loop{display:flex!important;align-items:center;grid-column:1/-1}.final-focus-controls small{color:var(--muted)} .sidebar-resizer{position:absolute;top:0;right:-4px;height:100%;width:8px;cursor:col-resize;touch-action:none;z-index:8;border:0;background:transparent}.sidebar-resizer:hover,.sidebar-resizer:focus-visible{background:color-mix(in srgb,var(--green) 35%,transparent)}.sidebar-resizing{cursor:col-resize;user-select:none} @media(min-width:741px){.sidebar{width:var(--user-sidebar-width,218px)}.app-main{margin-left:var(--user-sidebar-width,218px)}} .final-event-pill{padding:6px 10px;max-width:280px;border:1px solid color-mix(in srgb,var(--gold) 50%,var(--line));border-radius:9px;background:color-mix(in srgb,var(--gold) 14%,var(--card));color:var(--ink);font-size:12px}.ww-market[data-event] .ww-merchant-art{filter:drop-shadow(0 0 8px #e9bc5f66)}.final-merchant-scarf{position:absolute;left:30px;top:64px;pointer-events:none}.final-security{margin:20px 0}.final-security input{width:100%}.final-security .functional-actions{margin-top:12px}.final-oauth{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0}.final-oauth button{min-width:0;padding:10px;font-size:13px} .final-help-nav{display:flex;gap:8px;flex-wrap:wrap}.final-help-nav button{padding:8px 12px}.final-help-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:14px;margin-top:16px}.final-help-cards article{padding:18px}.final-help-cards h2{font-size:19px;margin:0 0 10px}.final-help-cards ul{padding-left:20px;line-height:1.7}.final-help-cards li+li{margin-top:8px} .final-pack-film{overflow:hidden;position:relative;border:1px solid var(--line);border-radius:14px;height:220px;background:var(--card)}.final-pack-film:after{content:'';position:absolute;left:50%;top:0;bottom:0;border-left:3px solid var(--gold)}.final-pack-track{display:flex;gap:12px;width:max-content;transform:translateX(calc(-1 * var(--roll-end)));animation:final-pack-roll 7.5s cubic-bezier(.08,.65,.12,1) both}.final-pack-track article{width:180px;height:220px;padding:16px;text-align:center;display:grid;align-content:center;gap:8px;flex:none}.final-pack-track .ww-item-stage{height:125px}.final-pack-result{animation:final-reveal 7.5s both}.final-pack-track h3{font-size:16px;margin:0} @keyframes final-pack-roll{from{transform:translateX(15px)}to{transform:translateX(calc(-1 * var(--roll-end)))}}@keyframes final-reveal{0%,96%{opacity:0}100%{opacity:1}} .final-clock-pendulum{transform-origin:50px 14px;animation:final-pendulum 3s ease-in-out infinite alternate}.wonder-banner[data-banner="banner-observatory"] .final-sky{animation:final-stars 18s ease-in-out infinite alternate;transform-origin:center}.final-firefly{animation:final-glow 4s ease-in-out infinite alternate}.final-clock-bells{animation:final-glow 6s ease-in-out infinite alternate}@keyframes final-pendulum{from{transform:rotate(-8deg)}to{transform:rotate(8deg)}}@keyframes final-stars{to{transform:translate(6px,-3px);opacity:.6}}@keyframes final-glow{to{opacity:.45}} @media(max-width:740px){.sidebar-resizer{display:none}.final-event-pill{max-width:130px;font-size:10px}.final-oauth,.final-focus-controls,.final-info-grid{grid-template-columns:1fr}#friend-search-results .social-item{grid-template-columns:48px minmax(0,1fr)}#friend-search-results .social-item>.button{grid-column:1/-1;justify-self:start}.final-audio-cue{grid-template-columns:38px minmax(0,1fr) auto}.final-audio-cue>label,.final-audio-cue>div,.final-audio-cue>button{padding:9px}} @media(prefers-reduced-motion:reduce){.final-pack-track,.final-pack-result,.final-clock-pendulum,.final-clock-bells,.final-firefly,.final-sky{animation:none!important}} .final-windmill-sails{transform-origin:50px 17px;animation:final-sails 24s linear infinite}.final-cloud-drift{animation:final-stars 18s ease-in-out infinite alternate}.ww-merchant{position:relative}@keyframes final-sails{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.final-windmill-sails,.final-cloud-drift{animation:none!important}} #identity-context{white-space:normal;overflow-wrap:anywhere;line-height:1.4}.global-profile-copy{min-width:0}.final-event-pill{flex-shrink:1;overflow-wrap:anywhere} .ww-art-design{display:block;width:100%;height:135px;overflow:hidden;color:var(--profile-accent,var(--green))}.ww-art-design svg{width:100%;height:100%;stroke:currentColor} .ww-leaderboard-self[data-position=top]{top:var(--placement-top,85px)}@media(min-width:741px){.ww-leaderboard-self{left:calc(var(--user-sidebar-width,218px) + 24px)}}@media(max-width:740px){.ww-leaderboard-self{left:14px;right:14px;gap:10px;flex-wrap:wrap}} /* october.css */ /* October refinements: readable boundaries, stable identity and living collections. */ .final-item-grid{grid-template-columns:repeat(auto-fill,minmax(min(235px,100%),1fr));align-items:stretch}.final-item-grid>article{min-width:0;overflow:hidden;cursor:pointer}.final-item-grid .wonder-banner,.ww-item-stage .wonder-banner{width:100%;max-width:100%;height:auto;aspect-ratio:4/1;overflow:hidden}.final-item-grid .wonder-banner svg,.ww-item-stage svg{display:block;width:100%;max-width:100%;height:100%;object-fit:contain}.ww-item-stage{min-width:0;max-width:100%;overflow:hidden}.wonder-banner-quote{font-style:italic;line-height:1.5}.ww-item-stage .wonder-banner-quote,.final-item-grid .wonder-banner-quote{font-size:clamp(9px,1vw,12px);padding:5px;max-width:94%;bottom:4px}.wonder-own-banner[hidden]{display:none!important} .final-index-tabs,.final-categories{gap:8px;align-items:center;justify-content:center}.final-index-tabs button,.final-categories button{flex:0 1 auto;min-height:42px;white-space:normal;line-height:1.4}.nav-group-links{height:auto;min-height:0}.nav-link,.nav-group summary{line-height:1.45!important;min-height:44px!important;white-space:normal!important;height:auto!important;align-items:center!important;gap:10px!important}.nav-link>span:last-child{min-width:0;overflow-wrap:anywhere}.sidebar nav{display:flex;flex-direction:column;gap:6px}.sidebar .nav-group-links{padding-bottom:8px}.topbar{gap:14px;flex-wrap:wrap}.global-profile{flex:none;margin-left:0}.final-event-pill{margin-left:auto;max-width:280px}.global-profile-copy{max-width:230px}.profile-card{max-width:1120px;margin-inline:auto}.profile-card .profile-top{justify-content:center}.profile-card .profile-heading{text-align:center}.page-heading{min-width:0}.functional-tabs,.settings-tabs{flex-wrap:wrap;justify-content:center}.functional-tabs>button,.settings-tabs>button{flex:0 1 auto;min-height:42px;line-height:1.4;white-space:normal} .oct-resale{margin-top:24px;border:1px solid var(--line);border-radius:16px;background:var(--card);overflow:hidden}.oct-resale summary{padding:18px 22px;cursor:pointer;font-weight:700;display:flex;justify-content:space-between;gap:12px}.oct-resale summary span{font-size:12px;font-weight:400;opacity:.6}.oct-resale-body{padding:0 22px 22px;animation:oct-unfold .3s ease both}.oct-resale table{width:100%;border-collapse:collapse;text-align:left}.oct-resale th,.oct-resale td{padding:12px 16px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}.oct-resale th{background:color-mix(in srgb,var(--green) 10%,var(--card))}.oct-resale tr:nth-child(even){background:color-mix(in srgb,var(--ink) 3%,transparent)}.oct-resale td:first-child{text-transform:capitalize}.oct-resale tr:last-child td{border-bottom:0}@keyframes oct-unfold{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}} html[data-bold-text=true] :is(p,small,label,button,input,textarea,select,td,li,.nav-link,.lede,.eyebrow,span){font-weight:650}html[data-bold-text=true] :is(h1,h2,h3,strong){font-weight:800}.range-control{width:clamp(180px,30vw,520px);max-width:100%;flex:1}.range-control input{width:100%;min-height:30px}.settings-panel[data-settings-panel=audio] .setting-row{grid-template-columns:minmax(180px,1fr) minmax(200px,1fr)} .final-pack-track{animation-duration:3.5s;animation-timing-function:cubic-bezier(.04,.55,.12,1)}.oct-loading{position:relative;display:grid;place-items:center;min-height:240px;padding:32px 22px 75px;border:1px solid var(--line);border-radius:18px;background:var(--card)}.oct-loading>i{width:28px;height:28px;border:2px solid var(--line);border-top-color:var(--green);border-radius:50%;animation:oct-spin 1s linear infinite}.oct-loading-tip{position:absolute;bottom:20px;left:20px;right:20px;text-align:center;color:var(--muted);opacity:.65;transition:opacity .45s;font-size:13px;line-height:1.5}.oct-loading-tip.fading{opacity:0}@keyframes oct-spin{to{transform:rotate(360deg)}} .ww-merchant-art{cursor:pointer;transform-origin:50% 95%;transform:translate(var(--merchant-x,0px),var(--merchant-y,0px)) rotate(var(--merchant-tilt,0deg));transition:transform .35s;animation:oct-breathe 5s ease-in-out infinite}.ww-merchant-art .merchant-eyes{transform:translate(var(--eye-x,0px),var(--eye-y,0px));transition:transform .15s}.merchant-festive{filter:drop-shadow(0 0 8px #e9bc5f66)}.ww-market[data-night=true]{background:linear-gradient(120deg,#252c49,var(--card));box-shadow:inset 0 0 90px #8da4d322}.ww-market[data-sleep=true] .ww-merchant-art{animation:oct-sleep 4s ease-in-out infinite}.ww-market[data-sleep=true] .merchant-eyes{transform:scaleY(.15);transform-origin:50% 36%}.ww-market[data-searching=true] .ww-merchant-art{animation:oct-search 1.2s ease-in-out infinite}.oct-merchant-night-note{color:var(--muted);font-style:italic;font-size:12px}@keyframes oct-breathe{50%{translate:0 -3px}}@keyframes oct-sleep{50%{rotate:5deg;translate:0 5px}}@keyframes oct-search{50%{transform:translateY(25px) rotate(-12deg)}} .chapter-art{position:relative;--motion:8s}.chapter-art[data-effect=orbit] .chapter-orbit{transform-origin:50px 50px;animation:oct-orbit 12s linear infinite}.chapter-art[data-effect=refraction]{animation:oct-refraction 7s ease-in-out infinite}.chapter-art[data-effect=bloom] .chapter-orbit{transform-origin:50px 50px;animation:oct-bloom 5s ease-in-out infinite}.chapter-art[data-effect=reverse] .chapter-orbit{transform-origin:50px 50px;animation:oct-orbit 18s linear infinite reverse}.chapter-art[data-effect=rift] .chapter-orbit{animation:oct-rift 6s ease-in-out infinite}.chapter-art[data-effect=comet] .chapter-sky{animation:oct-comet 10s linear infinite}.chapter-art[data-effect=tidal] .chapter-orbit{animation:oct-tidal 7s ease-in-out infinite}.chapter-art[data-effect=aurora]{animation:oct-aurora 8s ease-in-out infinite}.chapter-art[data-effect=echo] .chapter-orbit{animation:oct-echo 5s ease-in-out infinite}.chapter-art[data-effect=eclipse] .chapter-orbit{animation:oct-eclipse 9s ease-in-out infinite}.chapter-sky{animation:oct-stars 11s ease-in-out infinite alternate}.chapter-art[data-effect=still] *{animation:none!important}.ww-rarity-card[data-rarity=mythic] .ww-art-design svg{animation:oct-aurora 8s ease-in-out infinite}.wonder-banner[data-banner=banner-observatory] svg circle{animation:oct-stars 5s ease-in-out infinite alternate}.ww-rarity-card[data-rarity=mythic]{isolation:isolate}.premium-loop[data-frame-art=frame-masterpiece]{animation:oct-echo 6s ease-in-out infinite}.premium-loop[data-frame-art=frame-living-vines]{animation:oct-bloom 5s ease-in-out infinite}.premium-loop[data-frame-art=frame-crimson]{animation:oct-refraction 7s ease-in-out infinite}@keyframes oct-orbit{to{transform:rotate(360deg)}}@keyframes oct-refraction{50%{filter:hue-rotate(35deg) drop-shadow(3px 0 5px #b39be9)}}@keyframes oct-bloom{50%{scale:1.04;filter:drop-shadow(0 0 5px #abd58c)}}@keyframes oct-rift{45%{transform:translateX(-3px)}55%{transform:translateX(3px);filter:drop-shadow(-4px 0 3px #cd9fe7)}}@keyframes oct-comet{to{transform:translate(90px,-20px)}}@keyframes oct-tidal{50%{transform:translateY(-5px) rotate(4deg)}}@keyframes oct-aurora{50%{filter:hue-rotate(65deg) saturate(1.3)}}@keyframes oct-echo{50%{filter:drop-shadow(4px 4px 0 #bca77a66);translate:0 -2px}}@keyframes oct-eclipse{50%{opacity:.55;filter:drop-shadow(0 0 8px #e5ca8e)}}@keyframes oct-stars{to{opacity:.4;transform:translate(8px,-3px)}} .oct-club-members{display:grid;gap:10px}.oct-club-members>div{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:12px;border-bottom:1px solid var(--line)}.oct-chat-log{height:420px;overflow-y:auto;display:flex;flex-direction:column;gap:12px}.oct-chat-log article{padding:12px 18px;background:var(--card);border-radius:12px}.oct-chat-log p{white-space:pre-wrap;overflow-wrap:anywhere}.oct-chat-form{display:flex;gap:10px;margin-top:16px}.oct-chat-form textarea{flex:1;min-width:0}.oct-chat-form button{flex:none}.oct-notifications article{padding:18px;border-bottom:1px solid var(--line)} @media(max-width:740px){.final-event-pill{order:0;max-width:100%;font-size:11px}.global-profile{margin-left:auto}.topbar{gap:8px}.range-control{width:100%}.settings-panel[data-settings-panel=audio] .setting-row{grid-template-columns:1fr}.oct-resale summary{flex-wrap:wrap}.oct-resale-body{padding:0 10px 14px}.oct-resale td,.oct-resale th{padding:10px 8px}.oct-chat-form{flex-wrap:wrap}.oct-chat-form textarea{flex-basis:100%}} @media(prefers-reduced-motion:reduce){.chapter-art,.chapter-art *,.premium-loop,.ww-merchant-art,.wonder-banner svg circle,.oct-loading>i,.oct-resale-body{animation:none!important;transition:none!important}.oct-loading-tip{transition:none}} [data-frame-art=daybreak-windmill] .final-windmill-sails{animation:none!important} .chapter-art[data-effect=rift]{animation:oct-rift 6s ease-in-out infinite}.chapter-art[data-effect=eclipse]{animation:oct-eclipse 9s ease-in-out infinite}.chapter-art[data-effect=echo]{animation:oct-echo 6s ease-in-out infinite}.chapter-art[data-effect=tidal]{animation:oct-tidal 7s ease-in-out infinite}.chapter-art[data-effect=reverse]{animation:oct-refraction 9s ease-in-out infinite reverse}.chapter-art[data-effect=comet]{animation:oct-stars 9s ease-in-out infinite alternate}.chapter-art[data-effect=orbit]{animation:oct-tidal 8s ease-in-out infinite}.chapter-art[data-effect=bloom]{animation:oct-bloom 7s ease-in-out infinite} .wonder-banner{position:relative}.wonder-banner-quote{position:absolute;left:3%;bottom:8%;max-width:92%;padding:8px 14px;background:#1e243caa;color:#f4ead3;border-radius:8px;font:italic clamp(13px,1.6vw,21px)/1.45 var(--serif);pointer-events:none}.final-event-pill small{display:block;opacity:.7;font-size:10px;padding-top:3px}.ww-sticker-picker .chapter-art{width:80px;height:80px;min-height:0;padding:6px}.ww-avatar-badge .chapter-art{padding:0;min-height:0;width:100%;height:100%}.ww-avatar-badge .chapter-art svg{width:100%;height:100%} #page-profile .profile-grid{display:grid;grid-template-columns:minmax(0,1fr);max-width:1120px;margin-inline:auto}#page-profile .profile-identity{grid-template-columns:1fr;justify-items:center;text-align:center;gap:14px}#page-profile .profile-identity .profile-level{width:min(100%,420px)}#page-profile .profile-identity .profile-avatar{margin:auto}.ww-segmented{flex-wrap:wrap;justify-content:center}.ww-segmented button{flex:0 1 auto;white-space:normal;line-height:1.4;min-height:42px} html[data-mythic-design=orbit] .app-main:before{animation:oct-world-orbit 28s linear infinite}html[data-mythic-design=aurora] .app-main:before{animation:oct-world-aurora 9s ease-in-out infinite}html[data-mythic-design=rift] .app-main:before{animation:oct-world-rift 8s ease-in-out infinite} [data-mythic-effect=bloom]{animation:oct-bloom 7s ease-in-out infinite}[data-mythic-effect=eclipse]{animation:oct-eclipse 9s ease-in-out infinite}[data-mythic-effect=reverse]{background-image:repeating-linear-gradient(90deg,currentColor 0 2px,transparent 2px 16px);background-size:32px 2px;background-repeat:repeat-x;background-position:0 100%;animation:oct-title-time 8s linear infinite} @keyframes oct-world-orbit{to{mask-position:240px -240px}}@keyframes oct-world-aurora{50%{background-color:#d0a4e6;mask-position:24px 0}}@keyframes oct-world-rift{45%{mask-position:-8px 0}55%{mask-position:8px 0}}@keyframes oct-title-time{to{background-position:-32px 100%}} @media(prefers-reduced-motion:reduce){html[data-mythic-design] .app-main:before,[data-mythic-effect]{animation:none!important}} .topbar-right{margin-left:auto;justify-content:flex-end;gap:12px;max-width:100%;flex-wrap:wrap}.ww-merchant-art:focus-visible{outline:2px solid var(--green);outline-offset:5px;border-radius:12px} .oct-profile-stamp{width:84px;height:84px;margin-inline:auto}.oct-profile-stamp .ww-item-stage{width:84px;height:84px;min-height:0;padding:0}.oct-profile-stamp svg{width:100%;height:100%} .oct-event-deadline{display:block;width:100%;color:var(--muted);font-size:12px;margin-top:6px} /* Compact collectible galleries, bounded independently of SVG intrinsic size. */ :is(.wonder-pack-rewards,.final-item-grid){grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px}.wonder-pack-rewards>article,.final-item-grid>article{padding:12px!important;gap:8px;overflow:hidden;font-size:12px}.wonder-pack-rewards :is(.ww-item-stage,.wonder-banner),.final-item-grid :is(.ww-item-stage,.wonder-banner){width:100%;height:112px!important;min-height:0!important;max-height:112px;aspect-ratio:auto}.wonder-pack-rewards .ww-item-stage,.final-item-grid .ww-item-stage{padding:10px;display:grid}.wonder-pack-rewards .ww-item-stage>svg,.final-item-grid .ww-item-stage>svg{width:86px;height:86px;max-width:100%;max-height:100%}.wonder-pack-rewards .ww-wallpaper-preview>svg,.final-item-grid .ww-wallpaper-preview>svg{width:100%;height:100%}.wonder-pack-rewards .ww-art-avatar,.final-item-grid .ww-art-avatar{width:82px;height:82px}.wonder-pack-rewards h3,.final-item-grid h3{font-size:14px;line-height:1.4}.wonder-pack-rewards p,.final-item-grid p{font-size:12px}.wonder-pack-rewards .wonder-banner svg,.final-item-grid .wonder-banner svg{width:100%;height:100%;object-fit:cover}.wonder-pack-rewards .wonder-banner-quote,.final-item-grid .wonder-banner-quote{font-size:9px;line-height:1.3;padding:4px}.discovery-rarity-group>h3{display:flex;align-items:center;gap:12px;font-size:15px;margin:24px 0 12px}.discovery-rarity-group>h3 small{color:var(--muted);font-size:12px;font-weight:400}.ww-item-meta{gap:5px}.ww-item-meta>i{display:none}.rarity-chip,.category-chip,.availability-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 7px;border:1px solid var(--line);border-radius:7px;background:color-mix(in srgb,var(--rarity,var(--green)) 9%,var(--card));font-size:10px!important;line-height:1.3;text-transform:capitalize;overflow-wrap:anywhere}.category-emblem{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.5;flex:none}.rc-dialog-body>.ww-item-stage{width:min(100%,360px);height:180px;min-height:0;margin-inline:auto}.rc-dialog-body>.ww-item-stage>svg{width:120px;height:120px}.rc-dialog-body>.wonder-banner{width:100%;max-width:720px;height:170px;margin:auto}.rc-dialog-body>.wonder-banner .wonder-banner-quote{font-size:13px}.ww-wallpaper-preview>svg{width:100%!important;height:100%!important} .ww-supply-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.ww-supply-grid>.ww-shop-category{display:contents}.ww-supply-grid>.ww-shop-category>h3,.ww-supply-grid .ww-shop-tier>h4{display:none}.ww-supply-grid .rc-shop-grid{display:contents}.ww-supply-grid .ww-rarity-card{padding:14px!important;gap:8px;height:auto}.ww-supply-grid .ww-item-stage{height:74px;min-height:0;padding:8px}.ww-supply-grid .ww-item-stage>svg{width:58px;height:58px}.ww-supply-grid .ww-rarity-card h3{font-size:16px}.ww-supply-grid p{font-size:12px}.ww-supply-grid .ww-item-meta{display:none}.wonder-pack input[type=number]{width:80px;padding:8px;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--ink)} .discovery-reveal .final-pack-track{animation:none!important;will-change:transform}.discovery-reveal .final-pack-film{height:200px}.discovery-reveal .final-pack-track article{height:200px;width:180px;padding:12px}.discovery-reveal .final-pack-track .ww-item-stage{height:110px;min-height:0;padding:8px}.discovery-reveal .final-pack-track .ww-item-stage svg{width:90px;height:90px}.discovery-reveal .final-pack-track .ww-wallpaper-preview svg{width:100%;height:100%}.discovery-reveal .final-pack-track .ww-art-avatar{height:85px;width:85px}.discovery-reveal .final-pack-track .wonder-banner{height:100px;width:156px;min-height:0}.discovery-pack-count{font-variant-numeric:tabular-nums;font-weight:700}.discovery-rarity-roll{height:40px;display:grid;place-items:center;margin-bottom:12px}.discovery-confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none}.discovery-reveal{position:fixed}.discovery-confetti i{position:absolute;left:var(--x);top:-15px;width:7px;height:13px;background:var(--color);border-radius:2px;animation:discovery-fall 2s var(--delay) ease-in both}@keyframes discovery-fall{to{transform:translate(35px,650px) rotate(var(--a));opacity:0}} .design-motion-editor{display:grid;grid-template-columns:140px 150px minmax(150px,1fr);gap:18px;align-items:start}.design-direction-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.design-direction-pad button{padding:8px;font-size:20px}.design-direction-pad span{display:grid;place-items:center;font-size:11px}.design-motion-editor svg{width:150px;height:150px;color:var(--green)}#design-motion-controls fieldset{border:0;padding:0;display:grid;gap:16px;min-width:0}#design-motion-controls fieldset:disabled{opacity:.5}#design-motion-controls ol{margin:0;padding:0;list-style:none;max-height:180px;overflow:auto}#design-motion-controls li{display:flex;justify-content:space-between;align-items:center;font-size:12px}html[data-design-animated=true] .app-main:before{mask-position:var(--design-offset-x,0px) var(--design-offset-y,0px)!important;-webkit-mask-position:var(--design-offset-x,0px) var(--design-offset-y,0px)!important} .ww-merchant-art{animation:none}.merchant-head{transform-origin:50px 70px;transform:rotate(var(--head-tilt,0deg));transition:transform .35s}.merchant-arm{transform-box:view-box;transition:transform .5s;transform-origin:74px 76px}.merchant-arm-left{transform-origin:26px 76px;transform:rotate(var(--arm-reach,0deg))}.merchant-arm-right{transform:rotate(calc(-1 * var(--arm-reach,0deg)))}.ww-market[data-pose="1"] .merchant-head{transform:rotate(calc(var(--head-tilt,0deg) - 7deg)) translate(-1px,-1px)}.ww-market[data-pose="2"] .merchant-arm-right{transform:rotate(45deg)}.ww-market[data-pose="3"] .merchant-eyes{animation:noel-blink 6s ease infinite}.ww-market[data-greeting=true] .merchant-arm-right{animation:noel-wave .45s ease-in-out 4}.ww-market[data-searching=true] .merchant-head{transform:rotate(-23deg) translate(-4px,1px)}.ww-market[data-searching=true] .merchant-arm-left{transform:rotate(-45deg)}.ww-market[data-searching=true] .merchant-arm-right{transform:rotate(50deg)}.ww-market[data-sleep=true] .merchant-head{transform:rotate(12deg) translate(0,5px)}@keyframes noel-wave{50%{transform:rotate(100deg)}}@keyframes noel-blink{0%,45%,49%,100%{scale:1 1}47%{scale:1 .1}} .wonder-trades .trade-coins{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} @media(min-width:1500px){:is(.wonder-pack-rewards,.final-item-grid){grid-template-columns:repeat(5,minmax(0,1fr))!important}}@media(min-width:720px) and (max-width:1000px){:is(.wonder-pack-rewards,.final-item-grid){grid-template-columns:repeat(3,minmax(0,1fr))!important}}@media(max-width:719px){:is(.wonder-pack-rewards,.final-item-grid){grid-template-columns:repeat(2,minmax(0,1fr))!important}.ww-supply-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.design-motion-editor{grid-template-columns:140px 1fr}.design-motion-editor ol{grid-column:1/-1}}@media(max-width:380px){:is(.wonder-pack-rewards,.final-item-grid),.ww-supply-grid{grid-template-columns:1fr!important}}@media(prefers-reduced-motion:reduce){.merchant-head,.merchant-arm{transition:none}.merchant-arm,.merchant-eyes,.discovery-confetti i{animation:none!important}} :is(.wonder-pack-rewards,.final-item-grid,.final-pack-track) .ww-item-stage.chapter-art:has(>strong){grid-template-rows:auto minmax(0,1fr);padding:8px;gap:5px}:is(.wonder-pack-rewards,.final-item-grid,.final-pack-track) .ww-item-stage.chapter-art>strong{font-size:11px;line-height:1.35;max-height:30px;overflow:hidden;text-align:center}:is(.wonder-pack-rewards,.final-item-grid,.final-pack-track) .ww-item-stage.chapter-art:has(>strong)>svg{height:58px!important;width:58px!important}.wonder-pack-rewards>article{height:290px;box-sizing:border-box}.wonder-pack-rewards article>strong{min-height:32px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.wonder-pack-rewards article>p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:32px}.wonder-pack-rewards article>.ww-item-meta{min-height:42px;align-content:start} /* Pack cards must grow with their metadata, including zoom and long names. */ .wonder-pack-rewards>article{display:flex!important;flex-direction:column;height:auto!important;min-height:0!important;align-items:stretch;justify-content:flex-start} .wonder-pack-rewards>article>.ww-item-meta{display:flex!important;flex-wrap:wrap;position:static!important;height:auto!important;min-height:max-content;flex:none;align-items:center;margin:0!important} .wonder-pack-rewards>article>strong,.wonder-pack-rewards>article>h3{position:static!important;line-height:1.45;margin:6px 0 0;overflow-wrap:anywhere;flex:none} .wonder-pack-rewards>article>p{display:block!important;height:auto!important;max-height:none!important;overflow:visible!important;white-space:normal;margin:6px 0} .wonder-pack-rewards>article>.ww-item-stage{flex:none}.discovery-rarity-roll .rarity-chip{font-size:20px!important;padding:10px 22px;transition:background .12s,color .12s,box-shadow .12s} .discovery-rarity-roll [data-rarity=common]{--rarity:#aab4c4;color:#d7dfe9}.discovery-rarity-roll [data-rarity=uncommon]{--rarity:#6cc697;color:#8be8b3}.discovery-rarity-roll [data-rarity=rare]{--rarity:#74aaf4;color:#9cc5ff}.discovery-rarity-roll [data-rarity=epic]{--rarity:#b288ef;color:#cdb0ff}.discovery-rarity-roll [data-rarity=legendary]{--rarity:#e4bd62;color:#ffdb83}.discovery-rarity-roll [data-rarity=mythic]{--rarity:#ee859f;color:#ffacc5;box-shadow:0 0 24px #ee859f55} .cosmetic-skin-picker{display:grid;gap:8px;margin-top:10px;font-size:12px}.cosmetic-skin-picker select{width:100%;padding:8px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--text)}.cosmetic-skin-picker small{color:var(--muted);line-height:1.5} /* learning-foundation.css */ #page-daily.triple-ready .daily-practice-card{display:none}#todays-three .ww-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}#todays-three h3{font:600 26px/1.4 var(--serif);margin:18px 0}#todays-three form{display:grid;gap:12px}#todays-three textarea{width:100%;box-sizing:border-box}#todays-three button[type=submit]{justify-self:start}#todays-three .result{padding:20px;border:1px solid var(--line);border-radius:12px} #lexical-admin{margin-top:24px}#lexical-admin textarea,[data-entry-edit]{width:100%;box-sizing:border-box}#lexical-admin form{display:grid;gap:12px;margin:18px 0}#lexical-admin pre{white-space:pre-wrap;overflow-wrap:anywhere}#my-feedback-list{display:grid;gap:14px;margin-top:24px}.feedback-history-card{padding:20px;border:1px solid var(--line);border-radius:14px;background:var(--card);min-width:0}.feedback-history-card header{display:flex;justify-content:space-between;align-items:center;gap:12px}.feedback-history-card p{font-size:14px;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere;margin:14px 0}.feedback-history-card time{font-size:12px;color:var(--muted)}.feedback-history-card .feedback-status{display:inline-flex;flex:0 0 auto;padding:5px 10px;border:1px solid var(--line);border-radius:30px;background:color-mix(in srgb,var(--green) 8%,var(--card));font-size:11px;color:var(--green)}.inventory-selection{margin:16px 0}.inventory-check{display:flex;flex-wrap:wrap;gap:12px;padding:10px;border:1px solid var(--line);border-radius:10px}.inventory-check label{display:flex;align-items:center;gap:7px}.inventory-check input[type=number]{width:65px;min-width:0}.inventory-check input[type=checkbox]{width:18px;height:18px;accent-color:var(--green)} html[data-design-animated=true] .app-main:before{opacity:0!important}#design-motion-layer{position:fixed;inset:-823px -960px;z-index:-1;pointer-events:none;will-change:transform;contain:layout paint}#design-motion-layer>div{position:absolute;inset:0;background:var(--design-ink,var(--green));opacity:var(--design-opacity,.09);mask-image:var(--world-pattern);-webkit-mask-image:var(--world-pattern);mask-size:960px 823px;-webkit-mask-size:960px 823px}html[data-mythic-design=aurora] #design-motion-layer>div{animation:oct-world-aurora 9s ease-in-out infinite}html[data-mythic-design=orbit] #design-motion-layer>div{animation:oct-world-orbit 28s linear infinite}html[data-mythic-design=rift] #design-motion-layer>div{animation:oct-world-rift 8s ease-in-out infinite}@media(prefers-reduced-motion:reduce){#design-motion-layer{display:none}html[data-design-animated=true] .app-main:before{opacity:var(--design-opacity,.09)!important}}@media(forced-colors:active){#design-motion-layer{display:none}} #page-daily:has(#daily-history-mode:not([hidden])) #todays-three{display:none}#page-daily:has(#daily-history-mode:not([hidden])) .daily-practice-card{display:block} .dictionary-entries{display:grid;gap:16px;margin:18px 0}.dictionary-entry h2{font-size:24px;margin:0}.dictionary-entry ol{padding-left:28px}.dictionary-entry li{padding:12px 0;border-bottom:1px solid var(--line)}.dictionary-entry li:last-child{border:0}.dictionary-entry li p{margin:6px 0;line-height:1.6}.dictionary-pos{text-transform:capitalize;color:var(--muted);font-size:12px}.dictionary-entry blockquote{margin:12px 0;padding:8px 14px;border-left:3px solid var(--green);color:var(--muted)}.dictionary-entry small,.dictionary-student{color:var(--muted)} #page-dictionary [data-dictionary-search]{width:100%;background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:12px;font:inherit}#page-dictionary [data-dictionary-search]::placeholder{color:var(--muted)} /* mythic-effects.css */ /* Legendary motion is restrained; Mythic motion belongs to individual illustrated parts. */ .ww-rarity-card[data-rarity=legendary] .ww-item-stage,.ww-rarity-card[data-rarity=legendary] .wonder-banner{animation:legendary-breathe 5s ease-in-out infinite;box-shadow:inset 0 0 20px #e4bd6218} @keyframes legendary-breathe{50%{filter:drop-shadow(0 0 5px #e4bd6255)}} .mythic-artwork{position:relative;isolation:isolate;background:radial-gradient(ellipse at 50% 35%,color-mix(in srgb,currentColor 12%,transparent),transparent 70%);overflow:hidden;min-height:180px} .mythic-artwork>.mythic-scene{width:155px;height:155px;max-width:85%;flex-shrink:0} .mythic-original{position:absolute;bottom:7px;right:7px;width:48px;height:48px;opacity:.8;pointer-events:none;overflow:hidden;border:1px solid color-mix(in srgb,currentColor 35%,transparent);border-radius:10px;background:var(--myth-paper)} .mythic-original .ww-item-stage,.mythic-original .wonder-banner{min-height:0!important;width:48px!important;height:48px!important;padding:0!important;margin:0!important;animation:none!important} .mythic-original .ww-avatar,.mythic-original svg{width:43px!important;height:43px!important}.mythic-original small,.mythic-original .wonder-banner-quote{display:none} :is(.mythic-scene,.mythic-frame-canvas) .myth-draw,:is(.mythic-scene,.mythic-frame-canvas) .myth-writing,:is(.mythic-scene,.mythic-frame-canvas) .myth-brush{stroke-dasharray:240;animation:myth-illustrate 7s ease-in-out infinite} :is(.mythic-scene,.mythic-frame-canvas) .myth-spark{animation:myth-star-spark 6s ease-in-out infinite}:is(.mythic-scene,.mythic-frame-canvas) .myth-rise{animation:myth-sunrise 7s ease-in-out infinite} :is(.mythic-scene,.mythic-frame-canvas) .myth-swim{animation:myth-whale 8s ease-in-out infinite}:is(.mythic-scene,.mythic-frame-canvas) .myth-bubbles{animation:myth-bubble-rise 6s ease-in-out infinite} :is(.mythic-scene,.mythic-frame-canvas) .myth-wing{transform-origin:50px 58px;animation:myth-flight 5s ease-in-out infinite}:is(.mythic-scene,.mythic-frame-canvas) .myth-embers{animation:myth-ember-rise 5s ease-in-out infinite} :is(.mythic-scene,.mythic-frame-canvas) .myth-shards{animation:myth-crystallize 7s ease-in-out infinite}:is(.mythic-scene,.mythic-frame-canvas) .myth-grow{stroke-dasharray:210;animation:myth-grow 8s ease-in-out infinite} :is(.mythic-scene,.mythic-frame-canvas) .myth-flower{transform-origin:50px 41px;animation:myth-petals 8s ease-in-out infinite} :is(.mythic-scene,.mythic-frame-canvas) .myth-sand{transform-origin:50px 44px;animation:myth-sand-empty 8s linear infinite}:is(.mythic-scene,.mythic-frame-canvas) .myth-stream{animation:myth-sand-stream 1s linear infinite} :is(.mythic-scene,.mythic-frame-canvas) .myth-pile{transform-origin:50px 81px;animation:myth-sand-fill 8s linear infinite}:is(.mythic-scene,.mythic-frame-canvas) .myth-traveller{animation:myth-crossing 8s ease-in-out infinite} :is(.mythic-scene,.mythic-frame-canvas) .myth-quill{animation:myth-quill-write 6s ease-in-out infinite}:is(.mythic-scene,.mythic-frame-canvas) .myth-page{transform-origin:50px 55px;animation:myth-page-turn 8s ease-in-out infinite} :is(.mythic-scene,.mythic-frame-canvas) .myth-aim{transform-origin:50px 58px;animation:myth-telescope 7s ease-in-out infinite}:is(.mythic-scene,.mythic-frame-canvas) .myth-clouds{animation:myth-cloud-passage 10s linear infinite} :is(.mythic-scene,.mythic-frame-canvas) .myth-float{animation:myth-airship 8s ease-in-out infinite}:is(.mythic-scene,.mythic-frame-canvas) .myth-correction{stroke-dasharray:90;animation:myth-correct 6s ease-in-out infinite} :is(.mythic-scene,.mythic-frame-canvas) .myth-notes{animation:myth-margin-notes 6s ease-in-out infinite}:is(.mythic-scene,.mythic-frame-canvas) .myth-balance{animation:myth-balance 7s ease-in-out infinite} :is(.mythic-scene,.mythic-frame-canvas) .myth-mend{stroke-dasharray:140;animation:myth-mend 7s ease-in-out infinite}:is(.mythic-scene,.mythic-frame-canvas) .myth-stitch{animation:myth-stitch 7s ease-in-out infinite} @keyframes myth-illustrate{0%,10%{stroke-dashoffset:240}55%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:-240}} @keyframes myth-star-spark{0%,25%{opacity:.15}45%,85%{opacity:1}100%{opacity:.15}} @keyframes myth-sunrise{0%,100%{transform:translateY(32px)}45%,70%{transform:translateY(-8px)}} @keyframes myth-whale{0%,100%{transform:translate(-5px,3px)}50%{transform:translate(5px,-5px)}} @keyframes myth-bubble-rise{0%{transform:translateY(18px);opacity:0}20%{opacity:1}90%,100%{transform:translateY(-22px);opacity:0}} @keyframes myth-flight{0%,100%{transform:scaleY(.7) translateY(6px)}50%{transform:scaleY(1) translateY(-4px)}} @keyframes myth-ember-rise{0%,100%{transform:translateY(8px);opacity:.1}50%{transform:translateY(-12px);opacity:1}} @keyframes myth-crystallize{0%,100%{transform:translateY(5px);opacity:.35}50%{transform:translateY(-5px);opacity:1}} @keyframes myth-grow{0%,5%{stroke-dashoffset:210}65%,100%{stroke-dashoffset:0}} @keyframes myth-petals{0%,20%{transform:scale(.35);opacity:.4}65%,90%{transform:scale(1);opacity:1}100%{transform:scale(.35);opacity:.4}} @keyframes myth-sand-empty{0%,10%{transform:scaleY(1)}90%,100%{transform:scaleY(.05)}} @keyframes myth-sand-stream{to{stroke-dashoffset:-5}} @keyframes myth-sand-fill{0%,10%{transform:scaleY(.05)}90%,100%{transform:scaleY(1)}} @keyframes myth-crossing{0%,100%{transform:translateX(0)}70%,85%{transform:translateX(67px)}} @keyframes myth-quill-write{0%,100%{transform:translate(0,0)}25%{transform:translate(-13px,-9px)}50%{transform:translate(-5px,-5px)}75%{transform:translate(-12px,6px)}} @keyframes myth-page-turn{0%,25%,100%{transform:scaleX(1)}55%,70%{transform:scaleX(-1)}} @keyframes myth-telescope{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(8deg)}} @keyframes myth-cloud-passage{0%{transform:translateX(-13px);opacity:0}20%,80%{opacity:.8}100%{transform:translateX(16px);opacity:0}} @keyframes myth-airship{0%,100%{transform:translate(-4px,2px)}50%{transform:translate(4px,-4px)}} @keyframes myth-correct{0%,25%{stroke-dashoffset:90}70%,100%{stroke-dashoffset:0}} @keyframes myth-margin-notes{0%,100%{transform:translateY(-8px);opacity:.15}50%{transform:translateY(8px);opacity:1}} @keyframes myth-balance{0%,100%{transform:translateY(-3px)}50%{transform:translateY(4px)}} @keyframes myth-mend{0%,15%{stroke-dashoffset:140}70%,100%{stroke-dashoffset:0}} @keyframes myth-stitch{0%,45%{opacity:.1}70%,100%{opacity:1}} .ww-live-wpm{display:flex;align-items:center;flex-wrap:wrap;gap:12px;font-variant-numeric:tabular-nums}.ww-live-wpm progress{width:150px;height:7px;accent-color:var(--green);transition:width .1s} .discovery-rarity-roll .rarity-chip{background:color-mix(in srgb,var(--rarity) 14%,var(--card))!important;border:1px solid color-mix(in srgb,var(--rarity) 35%,transparent);border-radius:12px;box-shadow:none!important;min-width:110px;text-align:center;text-transform:capitalize} .inventory-selection .functional-actions{flex-wrap:wrap;align-items:center}.inventory-selection label{display:flex;gap:6px;align-items:center}.inventory-selection select{max-width:160px} @media(prefers-reduced-motion:reduce){.mythic-scene *,.ww-rarity-card[data-rarity=legendary] .ww-item-stage,.ww-rarity-card[data-rarity=legendary] .wonder-banner{animation:none!important}.ww-live-wpm progress{transition:none}} @media(forced-colors:active){.mythic-artwork{background:Canvas;color:CanvasText}} .mythic-frame{animation:none!important}.legendary-frame{animation:legendary-breathe 5s ease-in-out infinite}.mythic-frame-canvas{--myth-paper:var(--card);--myth-gold:currentColor} @media(prefers-reduced-motion:reduce){.mythic-frame-canvas *,.legendary-frame{animation:none!important}} .mythic-artwork>.mythic-scene{color:var(--myth-ink)!important} .inventory-selection select{background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:8px;font:inherit}.inventory-selection [data-fast-delete=all]{border-color:#c9868644;color:var(--text)} #mythic-environment{position:fixed;right:24px;top:18vh;width:min(360px,45vw);pointer-events:none;z-index:-1;opacity:var(--design-opacity,.1);color:var(--design-ink);--myth-paper:transparent;--myth-gold:var(--design-ink)} #mythic-environment .mythic-scene{width:100%;height:auto} #mythic-environment[data-paused=true] *{animation-play-state:paused} @media(prefers-reduced-motion:reduce){#mythic-environment *{animation:none!important}} #profile-title>.mythic-scene{width:40px;height:40px;vertical-align:middle;margin-left:6px;--myth-paper:var(--card);--myth-gold:var(--gold,var(--green))} .mythic-banner-story{position:absolute;right:18%;top:8%;height:74%;aspect-ratio:1;pointer-events:none;color:#edcf8c;--myth-paper:transparent;--myth-gold:#edcf8c}.mythic-banner-story>.mythic-scene{width:100%;height:100%} .mythic-artwork>.mythic-scene{stroke:currentColor!important} .ww-avatar-badge .mythic-artwork{min-height:0;width:100%;height:100%;padding:0}.ww-avatar-badge .mythic-scene{width:100%;height:100%;max-width:none}.ww-avatar-badge .mythic-original{display:none} /* season-studio.css */ /* Full-size illustrated bindings and readable seasonal identity. */ .wonder-pack{grid-template-columns:190px minmax(0,1fr)} .wonder-pack-cover{position:relative;padding:0;background:transparent;box-shadow:5px 8px 0 #b99b6928;overflow:hidden;border-radius:10px;transform:rotate(-2deg)} .wonder-pack-cover>span{display:none}.wonder-pack-cover>.season-cover-art{display:block;width:100%;height:auto;aspect-ratio:280/380} .season-book{min-height:240px}.season-book>.season-cover-art{height:240px;width:auto;stroke:none} .season-theme-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:14px;margin:20px 0} .season-theme-grid>button{display:grid;justify-items:center;gap:10px;border:2px solid var(--line);border-radius:16px;padding:12px;color:var(--ink);background:var(--card);text-align:left;cursor:pointer} .season-theme-grid>button[aria-pressed=true]{border-color:var(--green);background:color-mix(in srgb,var(--green) 10%,var(--card));box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 16%,transparent)} .season-theme-grid .season-cover-art{width:100%;height:180px;max-width:150px}.season-theme-grid strong,.season-theme-grid small{width:100%}.season-theme-grid small{font-size:12px;line-height:1.5;color:var(--muted)} .season-theme-picker>[data-theme-preview]{padding:12px 0;font-size:14px}.season-landscape{min-width:0;max-width:100%;aspect-ratio:auto;text-align:center;position:relative;min-height:190px;overflow:hidden;color:var(--season-gold)} .season-landscape>svg{display:block;width:100%;height:100%;position:absolute;inset:0;object-fit:cover} .season-banner-label{position:relative;display:inline-block;margin:65px auto 30px;padding:10px 24px;border:1px solid #e9d6ba80;background:linear-gradient(130deg,#edd6e925,#abb7e730);backdrop-filter:blur(6px);border-radius:16px;color:#f5e1d3;font:600 clamp(25px,4vw,36px) var(--serif);letter-spacing:.025em;text-shadow:0 2px 8px #171528} .wonder-banner .wonder-banner-quote{font-size:clamp(11px,1.2vw,15px);line-height:1.5;max-width:75%;padding:7px 12px} .ww-profile .ww-avatar-button{width:128px!important;height:128px!important}.profile-avatar{width:128px!important;height:128px!important}.settings-profile-avatar{width:112px!important;height:112px!important} .ww-public-title,.profile-title,.season-title-preview{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.ww-public-title{font-size:16px;margin-top:12px}.ww-public-title>.mythic-scene,#profile-title>.mythic-scene{width:48px;height:48px;flex:none;color:var(--gold)} .square-origin{display:grid;grid-template-columns:repeat(4,7px);grid-template-rows:repeat(4,7px);gap:2px;width:34px;height:34px;perspective:80px;flex:none} .square-origin i{border:1px solid currentColor;background:color-mix(in srgb,currentColor 25%,transparent);border-radius:2px;animation:square-copy 6s linear infinite;animation-delay:0s} @keyframes square-copy{0%,8%{opacity:0;transform:rotateY(-180deg) scale(.5)}20%,67%{opacity:1;transform:rotateY(0) scale(1)}80%,100%{opacity:0;transform:rotateY(180deg) scale(.5)}} #study-mastery,#target-sense-label,#difficulty-label{display:inline-flex;align-items:center;border-radius:11px;background:color-mix(in srgb,var(--green) 9%,var(--card));padding:7px 11px;font-size:12px;line-height:1.5;color:var(--ink);max-width:100%;overflow-wrap:anywhere} #study-mastery[data-study-state=new]{background:color-mix(in srgb,#829fdb 16%,var(--card))}#study-mastery[data-study-state=developing]{background:color-mix(in srgb,#d2a667 17%,var(--card))}#study-mastery:is([data-study-state=strong],[data-study-state=very_strong],[data-study-state=mature]){background:color-mix(in srgb,#7aa98c 17%,var(--card))} .final-oauth button{display:flex;align-items:center;justify-content:center;gap:10px}.provider-logo{width:21px;height:21px;flex:none}.final-oauth [data-unavailable=true]{opacity:.55}.provider-availability{font-size:12px;color:var(--muted)} /* Pause collectible artwork on hidden pages; respect accessibility preferences. */ .page:not(.active) .mythic-scene *,.page:not(.active) .square-origin i,.page:not(.active) .chapter-art *{animation-play-state:paused!important} .ww-inventory-grid>article,.final-index-grid>article{content-visibility:auto;contain-intrinsic-size:auto 460px} .myth-orrery{animation:orrery-track 8s ease-in-out infinite;transform-origin:50px 40px}.myth-glass{animation:glass-bloom 5s ease-in-out infinite;transform-origin:50px 85px}.myth-pearl{animation:pearl-rise 6s ease-in-out infinite}.myth-curtain{animation:curtain-open 6s ease-in-out infinite;transform-origin:left center}.myth-aurora{animation:aurora-weave 7s ease-in-out infinite}.myth-dreamleaf{animation:dreamleaf-unfold 5s ease-in-out infinite;transform-origin:50px 50px}.myth-automaton{animation:automaton-step 4s steps(4) infinite}.myth-ark-sail{animation:ark-sail 6s ease-in-out infinite;transform-origin:50px 80px} @keyframes orrery-track{0%,100%{transform:translateX(-18px) translateY(4px)}50%{transform:translateX(18px) translateY(-8px)}} @keyframes glass-bloom{0%,100%{transform:scaleY(.2);opacity:.3}50%,80%{transform:scaleY(1);opacity:1}} @keyframes pearl-rise{0%,100%{transform:translateY(13px);opacity:0}25%,70%{transform:translateY(-10px);opacity:1}} @keyframes curtain-open{0%,100%{transform:scaleX(1)}35%,75%{transform:scaleX(.2)}} @keyframes aurora-weave{0%,100%{stroke-dashoffset:120;opacity:.3}50%{stroke-dashoffset:0;opacity:1}} @keyframes dreamleaf-unfold{0%,100%{transform:skewY(-12deg) scaleX(.2)}50%{transform:skewY(8deg) scaleX(1)}} @keyframes automaton-step{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}} @keyframes ark-sail{0%,100%{transform:skewX(-8deg)}50%{transform:skewX(10deg)}} @media(max-width:600px){.wonder-pack{grid-template-columns:120px minmax(0,1fr);gap:16px}.wonder-pack-cover>.season-cover-art{height:auto}.ww-profile .ww-avatar-button,.profile-avatar{width:104px!important;height:104px!important}.ww-profile-header{align-items:flex-start;gap:14px}.season-theme-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.season-theme-grid .season-cover-art{height:150px}.season-banner-label{margin-top:62px}} @media(prefers-reduced-motion:reduce){.square-origin i,.mythic-scene *{animation:none!important}.square-origin i{opacity:1;transform:none}.wonder-pack-cover{transform:none}} #study-mastery[data-study-state=weak]{background:color-mix(in srgb,#ca8299 16%,var(--card))} @keyframes square-copy-0{0%,0%{opacity:0;transform:rotateY(-180deg) scale(.5)}8%,72%{opacity:1;transform:rotateY(0) scale(1)}82%,100%{opacity:0;transform:rotateY(180deg) scale(.5)}} @keyframes square-copy-1{0%,10%{opacity:0;transform:rotateY(-180deg) scale(.5)}18%,72%{opacity:1;transform:rotateY(0) scale(1)}82%,100%{opacity:0;transform:rotateY(180deg) scale(.5)}} @keyframes square-copy-2{0%,20%{opacity:0;transform:rotateY(-180deg) scale(.5)}28%,72%{opacity:1;transform:rotateY(0) scale(1)}82%,100%{opacity:0;transform:rotateY(180deg) scale(.5)}} @keyframes square-copy-3{0%,30%{opacity:0;transform:rotateY(-180deg) scale(.5)}38%,72%{opacity:1;transform:rotateY(0) scale(1)}82%,100%{opacity:0;transform:rotateY(180deg) scale(.5)}} @keyframes square-copy-4{0%,40%{opacity:0;transform:rotateY(-180deg) scale(.5)}48%,72%{opacity:1;transform:rotateY(0) scale(1)}82%,100%{opacity:0;transform:rotateY(180deg) scale(.5)}} .final-pack-film .mythic-scene *{animation:none!important} .rc-avatar-preview,.ww-cosmetic-preview .ww-avatar{width:112px!important;height:112px!important} .season-theme-picker [data-theme-preview]{display:flex;align-items:center;gap:20px;min-width:0}.season-theme-picker [data-theme-preview]>.season-cover-art{width:120px;max-width:35%;height:auto;flex:none}.season-theme-picker label{display:block;max-width:360px}.season-theme-picker label select{width:100%}.inventory-selection .functional-actions{gap:8px}.inventory-selection button{min-height:40px}.inventory-check{justify-content:space-between;font-size:12px}.inventory-check input[type=number]{width:64px}.inventory-check input[type=checkbox]{width:18px}.inventory-check label{white-space:nowrap} .task-season-picker{margin:16px 0;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--card)}.task-season-picker[hidden]{display:none}.task-season-picker label{max-width:360px;display:block}.task-season-picker select{width:100%}.task-season-picker p{font-size:12px;color:var(--muted);margin:8px 0 0} #inventory-content .inventory-check input[type=number]{background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:5px 7px;font:inherit} .season-theme-picker{padding:20px;margin:18px 0;border:1px solid var(--line);border-radius:16px;background:var(--card)}select[data-keep-native]{display:block;appearance:auto;min-height:46px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);font:inherit}.season-draft-choices{margin:12px 0 18px}.season-draft-choices [aria-pressed=true]{border-color:var(--green);background:color-mix(in srgb,var(--green) 15%,var(--card))} /* planner.css */ .planner-toolbar,.planner-fields,.planner-summary,.planner-week-nav{display:flex;gap:12px;flex-wrap:wrap}.planner-toolbar{margin-bottom:12px}.planner-local{color:var(--muted);max-width:75ch}.planner-layout{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:20px;margin:20px 0}.planner-summary article{flex:1;min-width:160px;padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--card)}.planner-summary strong{font-size:1.7rem;display:block}.planner-summary span{font-size:.85rem}.planner-session,.planner-assignment,.planner-busy{padding:14px 0;border-bottom:1px solid var(--line)}.planner-session{display:flex;align-items:center;justify-content:space-between;gap:16px}.planner-session strong,.planner-session small,.planner-session time{display:block}.planner-session time{font-variant-numeric:tabular-nums;color:var(--muted);font-size:.85rem}.planner-session.busy{border-left:3px solid var(--line);padding-left:12px;opacity:.8}.planner-session.done{opacity:.7}.planner-day h3{margin:24px 0 6px}.planner-assignment h3{margin:0}.planner-assignment progress{width:100%;height:8px;accent-color:var(--green);display:block;margin:8px 0}.planner-warning{padding:18px;border:1px solid #bb8846;border-radius:16px;background:color-mix(in srgb,#bb8846 8%,transparent);margin-top:20px}.planner-fields>label{flex:1;min-width:180px}.planner-editor{margin:20px 0;scroll-margin-top:30px}.planner-editor label,.planner-settings label{display:flex;flex-direction:column;gap:6px;margin:10px 0}.planner-editor fieldset,.planner-settings fieldset{border:1px solid var(--line);border-radius:12px;padding:12px;margin:14px 0}.planner-check{display:inline-flex!important;align-items:center;flex-direction:row!important;gap:8px;margin:8px 14px 8px 0!important}.planner-check input{width:auto!important;flex:0 0 auto}.planner-settings,.planner-backups{margin-top:16px}.planner-settings summary,.planner-backups summary{cursor:pointer;font-weight:650}.planner-backups input[type=file]{max-width:240px}.planner-week-nav{margin-top:16px}.planner-agenda,.planner-assignment p{overflow-wrap:anywhere}.task-achievement-preview{text-align:center;padding:24px}.task-achievement-preview>span{display:block;font-size:4rem;color:var(--green)}.task-rewards button{font-size:.78rem;padding:8px 12px}.planner-layout .compact-heading{flex-wrap:wrap;gap:8px}@media(max-width:850px){.planner-layout{grid-template-columns:1fr}.planner-toolbar .button{flex:1 1 180px}}@media(prefers-reduced-motion:reduce){.planner-editor{scroll-behavior:auto}} .planner-calendar-shell{display:grid;grid-template-columns:220px minmax(0,1fr);gap:18px;margin:24px 0}.planner-calendar-panel{padding:0!important;overflow:hidden;min-width:0}.planner-calendar-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:20px}.planner-calendar-heading h2{margin:4px 0;font-size:1.25rem}.planner-calendar-actions{display:flex;align-items:center;gap:6px}.planner-calendar-actions .button{padding:8px 12px;min-height:36px}.planner-calendar-actions select{min-height:36px;max-width:110px}.planner-calendar-sidebar{padding:18px!important;align-self:start}.planner-calendar-sidebar h2{font-size:1rem}.planner-calendar-sidebar>label{display:grid;gap:6px}.planner-layers{border:0;padding:0;margin:18px 0}.planner-layers legend{font-size:.8rem;color:var(--muted);margin-bottom:8px}.planner-layers .planner-check{display:flex!important;margin:12px 0!important}.planner-layers input{accent-color:var(--green)}.layer-busy input{accent-color:#818ba2}.layer-finished input{accent-color:#788481}.layer-deadlines input{accent-color:#bf7250}.planner-layer-note,.planner-calendar-hint{font-size:.78rem;line-height:1.5}.planner-calendar-hint{padding:12px 20px;margin:0;background:color-mix(in srgb,var(--green) 4%,var(--card));border-top:1px solid var(--line)}.planner-mini-grid{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;margin:14px 0;font-size:.75rem}.planner-mini-grid .text-button{padding:5px 0;border-radius:50%;font-size:.75rem;min-width:0}.planner-mini-grid>span{color:var(--muted);padding:6px 0}.planner-mini-grid .is-today{box-shadow:inset 0 0 0 1px var(--green)}.planner-mini-grid .is-selected{background:var(--green);color:var(--card)}.planner-time-scroll{max-height:650px;overflow:auto;position:relative;overscroll-behavior:contain;border-top:1px solid var(--line)}.planner-time-grid{min-width:calc(58px + var(--calendar-days)*100px)}.planner-time-head,.planner-time-body{display:grid;grid-template-columns:58px repeat(var(--calendar-days),minmax(0,1fr))}.planner-time-head{position:sticky;top:0;z-index:3;background:var(--card);border-bottom:1px solid var(--line)}.planner-time-head>span{font-size:.6rem;align-self:center;text-align:center;color:var(--muted)}.planner-time-head>header{text-align:center;border-left:1px solid var(--line);padding:8px 2px;min-width:0}.planner-time-head .text-button{font-size:.73rem;padding:2px 8px}.planner-time-head strong{display:block;font-size:1.2rem}.planner-time-head .is-today strong{background:var(--green);color:var(--card);border-radius:50%;width:30px;height:30px;line-height:30px;margin:2px auto}.planner-time-body{height:1440px}.planner-time-day{position:relative;border-left:1px solid var(--line);background:repeating-linear-gradient(to bottom,transparent 0,transparent 59px,var(--line) 59px,var(--line) 60px)}.planner-hours{position:relative;background:var(--card)}.planner-hours time{position:absolute;right:6px;font-size:.62rem;color:var(--muted);line-height:1}.planner-slot{position:absolute;left:0;right:0;width:100%;height:60px;border:0;padding:0;background:transparent;cursor:crosshair;border-radius:0}.planner-slot:hover,.planner-slot:focus-visible{background:color-mix(in srgb,var(--green) 7%,transparent)}.planner-event{display:flex;flex-direction:column;text-align:left;border:1px solid color-mix(in srgb,var(--green) 35%,var(--line));border-left:3px solid var(--green);border-radius:5px;background:color-mix(in srgb,var(--green) 16%,var(--card));color:var(--text);cursor:pointer;padding:2px 4px;overflow:hidden;min-width:0;line-height:1.2;font-family:var(--sans);box-sizing:border-box}.planner-time-day>.planner-event{position:absolute;z-index:1;min-height:0}.planner-event time{font-size:.58rem;white-space:nowrap}.planner-event strong{display:block;font-size:.68rem;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.planner-time-day>.planner-event[style*="height:14px"] time{display:none}.planner-event.busy{border-color:var(--line);border-left-color:#7e879b;background:repeating-linear-gradient(135deg,color-mix(in srgb,#7e879b 10%,var(--card)) 0 4px,color-mix(in srgb,#7e879b 15%,var(--card)) 4px 5px)}.planner-event.done{border-left-color:#798c86;opacity:.65}.planner-event.done strong{text-decoration:line-through}.planner-event.deadline{border-left-color:#bf7250;background:color-mix(in srgb,#bf7250 12%,var(--card))}.planner-deadline-strip .planner-event{width:100%;margin-top:3px;padding:3px}.planner-deadline-strip time{display:none}.planner-now{position:absolute;z-index:2;left:0;right:0;height:1px;background:#ca614c;pointer-events:none}.planner-now:before{content:'';position:absolute;width:6px;height:6px;background:#ca614c;border-radius:50%;top:-2px;left:-3px}.planner-month{display:grid;grid-template-columns:repeat(var(--calendar-days),minmax(0,1fr));border-top:1px solid var(--line)}.planner-month-label{padding:10px 4px;font-size:.75rem;text-align:center;color:var(--muted)}.planner-month-day{min-height:118px;padding:6px;border-top:1px solid var(--line);border-left:1px solid var(--line);min-width:0}.planner-month-day>.text-button{padding:4px;font-size:.75rem}.planner-month-day>.planner-event{width:100%;margin:4px 0;display:block;white-space:nowrap}.planner-month-day .planner-event time{display:none}.planner-month-day.outside-month{background:color-mix(in srgb,var(--muted) 4%,var(--card))}.planner-month-day.outside-month>.text-button{opacity:.5}.planner-month-day.is-today>.text-button:first-child{background:var(--green);color:var(--card);border-radius:50%;width:28px}.planner-session>.planner-event{flex:1;padding:10px}.planner-session .planner-event strong{font-size:.9rem}.planner-day{padding:0 18px}.planner-inspector label{display:grid;gap:8px}.planner-notes{white-space:pre-wrap;overflow-wrap:anywhere}.planner-reminder-card{border-top:1px solid var(--line);padding-top:16px;font-size:.8rem}.planner-reminder-card h3{font-size:.9rem}.planner-reminder-card select{width:100%;margin:8px 0}.planner-reminder-card .button{width:100%;font-size:.75rem;padding:8px}.planner-reminder-card .planner-check{display:flex!important;font-size:.8rem} @media(max-width:1100px){.planner-calendar-shell{grid-template-columns:minmax(0,1fr)}.planner-calendar-sidebar{display:grid;grid-template-columns:180px minmax(0,1fr);gap:8px 20px}.planner-calendar-sidebar>.compact-heading{grid-column:1/-1}.planner-calendar-sidebar>label{grid-column:1}.planner-mini-grid{grid-column:1}.planner-layers{grid-column:2;grid-row:2/4;margin:0}.planner-layer-note{grid-column:2}.planner-calendar-sidebar #planner-reminders{grid-column:1/-1}.planner-reminder-card{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.planner-reminder-card .button{width:auto}.planner-reminder-card select{max-width:180px}.planner-reminder-card p{flex-basis:100%}} @media(max-width:600px){.planner-calendar-sidebar{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 12px}.planner-month-day{padding:3px;min-height:95px}.planner-month-day .planner-event strong{font-size:.55rem}.planner-month-day .planner-event{padding:2px}.planner-calendar-heading{padding:14px}.planner-calendar-hint{padding:12px}.planner-summary article{min-width:90px;padding:14px}.planner-summary strong{font-size:1.3rem}.planner-summary span{font-size:.7rem}.planner-calendar-actions{flex-wrap:wrap}.planner-time-scroll{max-height:560px}.planner-calendar-shell{gap:12px}.planner-calendar-sidebar .planner-check{font-size:.75rem}.planner-layer-note{font-size:.65rem}} .planner-time-head>span{position:sticky;left:0;z-index:4;background:var(--card)}.planner-hours{position:sticky;left:0;z-index:2} @media(max-width:600px){[data-calendar-mode=week] .planner-calendar-hint:after{content:' Swipe across the week to see other days.'}} .planner-calendar-sidebar>summary{font-weight:700;font-size:.9rem;cursor:pointer;margin-bottom:16px;list-style-position:inside}.planner-calendar-sidebar:not([open])>*:not(summary){display:none!important}.planner-calendar-sidebar:not([open])>summary{margin:0}.planner-calendar-sidebar>summary{grid-column:1/-1}.planner-calendar-sidebar[open]>label{grid-row:2}.planner-calendar-sidebar[open] #planner-mini-month{grid-row:3}.planner-calendar-sidebar[open] .planner-layers{grid-row:2/4} @media(min-width:1101px){.planner-calendar-sidebar[open] .planner-layers{grid-row:auto}.planner-calendar-sidebar[open] #planner-mini-month{grid-row:auto}.planner-calendar-sidebar[open]>label{grid-row:auto}} /* experience.css */ /* One visual language, with a different story in each home widget. */ :root{--surface-shadow:0 10px 32px color-mix(in srgb,var(--ink) 5%,transparent);--surface-radius:20px;--text:var(--ink)} body{background-image:radial-gradient(ellipse at 80% 0,color-mix(in srgb,var(--green) 5%,transparent),transparent 55%)} .content{width:min(1240px,100%)} .topbar{background:color-mix(in srgb,var(--card) 94%,transparent);border-bottom-color:color-mix(in srgb,var(--green) 10%,var(--line))} .sidebar{background:var(--card)}.brand-mark{border-radius:11px;box-shadow:0 4px 12px color-mix(in srgb,var(--green) 20%,transparent)} .nav-link{border-radius:10px}.nav-link.active{box-shadow:inset 3px 0 var(--green);background:color-mix(in srgb,var(--green) 10%,var(--card))} .page-heading,.welcome-row{position:relative;padding:8px 0 18px;border-bottom:1px solid var(--line)}.page-heading:after,.welcome-row:after{content:'';position:absolute;bottom:-1px;left:0;width:68px;height:3px;border-radius:5px;background:var(--green)} .page-heading h1,.welcome-row h1{font-family:var(--sans);letter-spacing:-1.4px;font-weight:750}.page-heading h1 em,.welcome-row h1 em{font-style:normal} .eyebrow{font-family:var(--sans);letter-spacing:1.5px;font-weight:650;font-size:.65rem} .panel{border-radius:var(--surface-radius);box-shadow:var(--surface-shadow)} .button{border-radius:10px;min-height:38px;font-family:var(--sans);font-size:.78rem}.button-primary{box-shadow:0 4px 12px color-mix(in srgb,var(--green) 20%,transparent)}.button-secondary{border:1px solid var(--line);background:var(--card)} button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--green);outline-offset:3px} input,textarea,select,.select-trigger{border-radius:10px}textarea{line-height:1.6}label{line-height:1.4} .empty-card,.empty-state{border-radius:16px;background:color-mix(in srgb,var(--green) 3%,var(--card))} .rc-dialog{border-radius:24px;box-shadow:0 24px 80px #0003}.rc-dialog::backdrop{background:#10231c66;backdrop-filter:blur(4px)} .compact-heading h2{font-family:var(--sans);font-weight:700;letter-spacing:-.35px}.text-button{font-family:var(--sans)} .date-card{border-radius:16px;transform:rotate(3deg);box-shadow:0 6px 0 color-mix(in srgb,var(--green) 10%,transparent)} .feature-card{border-radius:24px;background:radial-gradient(circle at 88% 12%,#9cc68f40,transparent 40%),linear-gradient(125deg,#234b3d,#397360);padding:26px;min-height:320px;box-shadow:0 15px 30px #234b3d1a}.feature-card:before{content:'';position:absolute;right:-60px;top:25px;width:250px;height:250px;border:1px solid #d6e8c736;border-radius:50%;box-shadow:0 0 0 30px #d6e8c709,0 0 0 60px #d6e8c706;pointer-events:none}.feature-card:after{content:'✳';right:18px;bottom:22px;font:140px/.8 var(--sans);color:#d4e7a62a}.feature-copy h2{font-family:var(--sans);font-weight:750;letter-spacing:-.7px;font-size:2rem}.feature-copy p{font-size:.82rem}.feature-foot{font-family:var(--sans)} .daily-card{border-radius:24px;background:linear-gradient(160deg,color-mix(in srgb,var(--gold) 16%,var(--card)),var(--card));position:relative;overflow:hidden;border-color:color-mix(in srgb,var(--gold) 25%,var(--line))}.daily-card:after{content:'';position:absolute;width:160px;height:160px;border:1px dashed color-mix(in srgb,var(--gold) 35%,transparent);border-radius:50%;right:-70px;top:-40px;pointer-events:none}.daily-icon{background:color-mix(in srgb,var(--gold) 17%,var(--card));border-radius:16px;transform:rotate(-7deg);color:var(--ink)}.daily-body h3{font-family:var(--sans);font-weight:700} .home-dashboard{gap:20px}.hub-card{position:relative;padding:24px;overflow:hidden;isolation:isolate;border-top:3px solid var(--hub-accent,var(--green))}.hub-card .compact-heading{position:relative;padding-right:38px;margin-bottom:16px}.hub-card .compact-heading .text-button{font-size:.7rem}.hub-illustration{position:absolute;top:20px;right:18px;color:var(--hub-accent,var(--green));opacity:.55;width:38px;height:38px;pointer-events:none}.hub-illustration svg{width:100%;height:100%}.hub-card:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none} .hub-card[data-hub=tasks]{--hub-accent:var(--green);background:linear-gradient(160deg,color-mix(in srgb,var(--green) 7%,var(--card)),var(--card))}.hub-card[data-hub=tasks]:before{background:repeating-linear-gradient(0deg,transparent 0 35px,color-mix(in srgb,var(--green) 3%,transparent) 35px 36px);mask-image:linear-gradient(to top,#000,transparent)} .hub-card[data-hub=load]{--hub-accent:#6688ac;background:linear-gradient(155deg,color-mix(in srgb,#6688ac 10%,var(--card)),var(--card))}.hub-card[data-hub=load]:before{width:270px;height:270px;border:1px solid #6688ac18;border-radius:40%;right:-120px;left:auto;top:80px;transform:rotate(22deg);box-shadow:0 0 0 18px #6688ac08,0 0 0 36px #6688ac08} .hub-card[data-hub=mastery]{--hub-accent:#739961;background:linear-gradient(165deg,color-mix(in srgb,#739961 11%,var(--card)),var(--card))}.hub-card[data-hub=mastery]:before{background:radial-gradient(ellipse at 110% 100%,#73996119,transparent 65%)} .hub-card[data-hub=progression]{--hub-accent:#9c7caf;background:radial-gradient(circle at 90% 100%,color-mix(in srgb,#9c7caf 12%,var(--card)),var(--card) 60%)}.hub-card[data-hub=progression]:before{border:1px solid #9c7caf22;border-radius:50%;inset:auto -60px -100px auto;width:230px;height:230px;box-shadow:0 0 0 18px #9c7caf09} .hub-card[data-hub=rhythm]{--hub-accent:#b58d53;background:linear-gradient(160deg,color-mix(in srgb,#b58d53 9%,var(--card)),var(--card))}.hub-card[data-hub=rhythm]:before{background-image:radial-gradient(#b58d5322 1px,transparent 1px);background-size:12px 12px;mask-image:linear-gradient(to top,#000,transparent 65%)} .hub-card[data-hub=recent]{--hub-accent:#ab7767;background:linear-gradient(160deg,color-mix(in srgb,#ab7767 8%,var(--card)),var(--card))}.hub-card[data-hub=recent]:before{left:18px;top:75px;bottom:20px;width:1px;background:#ab776728} .hub-planner{grid-column:1/-1;--hub-accent:var(--green);background:linear-gradient(125deg,color-mix(in srgb,var(--green) 8%,var(--card)),var(--card) 75%)}.hub-planner .compact-heading{padding-right:0}.hub-planner .compact-heading h2{margin:6px 0}.hub-planner-timeline{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.hub-next-session{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;display:flex;gap:12px;text-align:left;color:var(--ink);align-items:center;min-width:0;transition:transform .15s}.hub-next-session:hover{transform:translateY(-2px)}.hub-next-session time{font-size:.63rem;color:var(--muted);border-right:1px solid var(--line);padding-right:12px;flex:none;max-width:95px}.hub-next-session time b{display:block;font-size:.85rem;color:var(--green);margin-top:4px}.hub-next-session>span{min-width:0}.hub-next-session strong{font-size:.8rem;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hub-next-session small{display:block;color:var(--muted);font-size:.68rem;margin-top:5px}.hub-next-session i{margin-left:auto;color:var(--green);font-style:normal}.hub-planner-empty{display:flex;align-items:center;gap:20px;padding:8px 0}.hub-planner-empty>span{display:grid;place-items:center;width:72px;height:72px;border-radius:20px;background:color-mix(in srgb,var(--green) 8%,var(--card));font-size:2rem;color:var(--green);transform:rotate(-5deg);flex:none}.hub-planner-empty strong{font-size:1rem}.hub-planner-empty p,.hub-plan-warning{font-size:.8rem;color:var(--muted)} .profile-card{padding:0!important;overflow:hidden;position:relative}.profile-card .profile-identity{padding:34px 28px 24px;background:radial-gradient(circle at 90% 0,color-mix(in srgb,var(--green) 15%,transparent),transparent 65%),linear-gradient(155deg,color-mix(in srgb,var(--green) 6%,var(--card)),var(--card));border-bottom:1px solid var(--line);position:relative}.profile-card .profile-avatar{box-shadow:0 0 0 6px var(--card),0 0 0 7px color-mix(in srgb,var(--green) 30%,var(--line));border-radius:50%}.profile-identity-copy h2{font-family:var(--sans);font-size:1.8rem;font-weight:750;letter-spacing:-.7px}.profile-identity-copy .profile-title{font-family:var(--sans)}.profile-level{padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--card)}.profile-card .profile-controls{padding:24px 28px}.profile-card .profile-stats{margin:0;padding:22px 28px;background:color-mix(in srgb,var(--green) 3%,var(--card));gap:12px;border-bottom:1px solid var(--line)}.profile-stats strong{font-family:var(--sans);font-weight:750}.profile-stats span{font-size:.7rem}.profile-club-slot{padding:18px 28px}.profile-club-badge{display:flex;align-items:center;gap:14px;border:1px solid color-mix(in srgb,var(--green) 25%,var(--line));background:linear-gradient(125deg,color-mix(in srgb,var(--green) 8%,var(--card)),var(--card));padding:16px;border-radius:16px;flex-wrap:wrap}.profile-club-emblem{display:grid;place-items:center;width:48px;height:48px;flex:none;border-radius:14px;background:var(--green);color:var(--card);font-size:1.7rem}.profile-club-badge>div{flex:1;min-width:120px}.profile-club-badge small{display:block;font-size:.6rem;letter-spacing:1px;color:var(--muted);margin-bottom:5px}.profile-club-badge strong{display:block;font-size:1rem;font-weight:750}.profile-club-badge div>span{display:block;font-size:.75rem;color:var(--muted);margin-top:4px;text-transform:capitalize}.profile-club-badge p{font-size:.78rem;margin:6px 0 0;color:var(--muted)}.ww-profile{position:relative}.ww-profile-header{padding:24px 8px}.ww-profile-header h3{font-family:var(--sans);font-size:1.9rem;letter-spacing:-.6px}.ww-profile-header .ww-avatar-button{width:80px;height:80px;border-radius:50%;box-shadow:0 0 0 5px var(--card),0 0 0 6px var(--line)}.ww-profile .profile-club-badge{margin:12px 0 20px}.ww-profile-stats{gap:12px;margin:18px 0}.ww-profile-stats>div{border-radius:14px;padding:16px;background:color-mix(in srgb,var(--green) 5%,var(--card))}.ww-profile-stats strong{font-family:var(--sans);font-size:1.5rem}.ww-profile-achievements .ww-series-step{border-radius:20px;background:color-mix(in srgb,var(--gold) 10%,var(--card));padding:8px 12px;font-family:var(--sans)}.auth-card{background:linear-gradient(160deg,color-mix(in srgb,var(--green) 6%,var(--card)),var(--card));align-self:start}.auth-card h2{font-family:var(--sans)} .planner-summary article{border-radius:18px;background:linear-gradient(155deg,color-mix(in srgb,var(--green) 7%,var(--card)),var(--card));border-top:3px solid var(--green)}.planner-summary article:nth-child(2){border-top-color:var(--gold)}.planner-summary article:nth-child(3){border-top-color:#6688ac}.planner-assignment progress{border-radius:5px}.planner-assignment progress::-webkit-progress-bar{border-radius:5px;background:var(--line)}.planner-assignment progress::-webkit-progress-value{border-radius:5px;background:var(--green)}.planner-assignment .compact-heading span{font-size:.7rem;border-radius:20px;padding:5px 9px;background:color-mix(in srgb,var(--green) 8%,var(--card));color:var(--green)}.planner-assignment h3{font-family:var(--sans)}.planner-busy{border-left:2px solid var(--line);padding-left:14px;margin:12px 0}.planner-local{font-size:.8rem}.planner-toolbar .button{font-size:.75rem}.planner-session .button{font-size:.7rem}.planner-event{color:var(--ink)}.planner-calendar-sidebar .panel{box-shadow:none} [data-theme=high-contrast] .panel,[data-theme=high-contrast] .hub-card,[data-theme=high-contrast] .profile-club-badge,[data-theme=high-contrast] .planner-event{background:var(--card);border:1px solid var(--ink)}[data-theme=high-contrast] .hub-illustration{opacity:1;color:var(--ink)}[data-theme=high-contrast] .planner-event.done{opacity:1}[data-theme=high-contrast] .hub-card:before{display:none}[data-theme=high-contrast] .feature-card{background:var(--card);color:var(--ink)}[data-theme=high-contrast] .feature-card *{color:var(--ink)} @media(max-width:1100px){.hub-planner-timeline{grid-template-columns:1fr}.hub-next-session time{width:110px;max-width:none}.hub-next-session strong{white-space:normal}.profile-card .profile-identity{flex-wrap:wrap}.profile-card .profile-level{width:100%}} @media(max-width:700px){.content{padding:22px 16px 35px}.home-dashboard{gap:14px}.hub-card{padding:20px}.profile-card .profile-identity{padding:28px 20px 20px}.profile-club-slot,.profile-card .profile-controls{padding:18px 20px}.profile-card .profile-stats{padding:20px;grid-template-columns:repeat(2,minmax(0,1fr))}.profile-club-badge .button{width:100%}.hub-card .compact-heading{padding-right:35px;gap:12px;flex-wrap:wrap}.hub-planner .compact-heading{padding:0}.feature-card{min-height:300px}.feature-copy h2{font-size:1.7rem}.hub-planner-empty{gap:12px}.hub-planner-empty>span{width:52px;height:52px}.date-card{width:75px}.page-heading h1,.welcome-row h1{letter-spacing:-.8px}.planner-calendar-panel .planner-event{box-shadow:none}.ww-profile-header{gap:16px;flex-wrap:wrap}.ww-profile-header h3{font-size:1.5rem}.ww-profile-stats{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(prefers-reduced-motion:reduce){.button,.hub-next-session{transition:none}.button:hover,.hub-next-session:hover{transform:none}.rc-dialog::backdrop{backdrop-filter:none}} .profile-card .profile-identity{display:grid;grid-template-columns:96px minmax(0,1fr);gap:24px;justify-items:start;text-align:left;align-items:center}.profile-card .profile-identity-copy{text-align:left;min-width:0}.profile-card .profile-level{grid-column:1/-1;width:100%;text-align:left}.profile-card .profile-avatar{width:88px;height:88px}.profile-identity-copy .eyebrow{justify-content:flex-start}.profile-identity-copy h2{margin:8px 0}.profile-identity-copy p{margin:7px 0}.profile-card .profile-club-slot{border-bottom:1px solid var(--line)} @media(max-width:500px){.profile-card .profile-identity{grid-template-columns:70px minmax(0,1fr);gap:18px}.profile-card .profile-avatar{width:66px;height:66px}.profile-identity-copy h2{font-size:1.45rem}.profile-identity-copy #profile-email{font-size:.7rem;overflow-wrap:anywhere}.profile-card .profile-level{padding:12px}.profile-club-emblem{width:40px;height:40px}.profile-club-badge{gap:10px;padding:12px}} #page-profile .profile-card{width:100%;gap:0}#page-profile .profile-identity{grid-template-columns:96px minmax(0,1fr);justify-items:start;text-align:left;gap:24px}#page-profile .profile-identity .profile-level{width:100%} @media(max-width:500px){#page-profile .profile-identity{grid-template-columns:70px minmax(0,1fr);gap:18px}} .home-study-row .daily-card{grid-template-columns:minmax(0,1fr);gap:12px;padding:24px 22px 22px 100px}.home-study-row .daily-card>.daily-body,.home-study-row .daily-card>.text-button{grid-column:1;grid-row:auto;min-width:0;max-width:100%}.home-study-row .daily-card>.text-button{justify-self:start;white-space:normal} @media(max-width:600px){.home-study-row .daily-card{padding-left:78px}.home-study-row .daily-card .ww-daily-sun{width:86px;height:86px;left:-18px;bottom:-5px}} #page-home .wonder-home-scene .wonder-banner-quote{display:none} /* personality.css */ /* WordWise's paper, ink, and playful color continue beyond the home page. */ .page[data-page-mood]{--scene-accent:#536dac;--scene-soft:color-mix(in srgb,var(--scene-accent) 23%,var(--card))} .page[data-page-mood=study]{--scene-accent:#477557}.page[data-page-mood=learn]{--scene-accent:#a86544}.page[data-page-mood=progress]{--scene-accent:#7e5e9f}.page[data-page-mood=collection]{--scene-accent:#927029}.page[data-page-mood=social]{--scene-accent:#447983}.page[data-page-mood=profile]{--scene-accent:#547243}.page[data-page-mood=settings]{--scene-accent:#766896}.page[data-page-mood=help]{--scene-accent:#a36356}.page[data-page-mood=admin]{--scene-accent:#5e768a} .page[data-page-mood]>.page-heading{min-height:172px;margin:0 0 24px;padding:28px 220px 28px 28px;display:flex;align-items:center;border:1px solid color-mix(in srgb,var(--scene-accent) 23%,var(--line));border-radius:24px;background:radial-gradient(ellipse at 85% 50%,color-mix(in srgb,var(--scene-accent) 21%,transparent),transparent 62%),linear-gradient(125deg,color-mix(in srgb,var(--scene-accent) 8%,var(--card)),var(--card));isolation:isolate;box-shadow:0 8px 0 -4px color-mix(in srgb,var(--scene-accent) 15%,transparent);overflow:hidden} .page[data-page-mood]>.page-heading:after{width:78px;left:28px;bottom:20px;height:4px;background:var(--scene-accent)} .page[data-page-mood]>.page-heading:before{content:'';position:absolute;right:22px;inset-block:12px;width:200px;background-image:radial-gradient(color-mix(in srgb,var(--scene-accent) 25%,transparent) 1px,transparent 1px);background-size:14px 14px;mask-image:linear-gradient(90deg,transparent,#000);z-index:-1;pointer-events:none} .page[data-page-mood] .page-heading .eyebrow{color:var(--scene-accent);margin-bottom:10px}.page[data-page-mood] .page-heading h1{font-size:clamp(1.75rem,3vw,2.6rem);line-height:1.13;margin:0 0 10px;letter-spacing:-1.2px}.page[data-page-mood] .page-heading .lede{margin:0;max-width:580px;font-size:.86rem;line-height:1.6}.page-scene{position:absolute;right:26px;top:50%;transform:translateY(-50%) rotate(3deg);width:180px;height:160px;pointer-events:none}.page-scene svg{width:100%;height:100%} .page[data-page-mood] .panel:not(.planner-calendar-panel):not(.profile-card):not(.practice-card){border-color:color-mix(in srgb,var(--scene-accent) 17%,var(--line));background:linear-gradient(145deg,color-mix(in srgb,var(--scene-accent) 6%,var(--card)),var(--card) 65%)} .page[data-page-mood] .panel h2{font-family:var(--sans);letter-spacing:-.4px}.page[data-page-mood] :is(.stat-card,.overview-card,.memory-stat,.achievement-card,.task-card,.rank-card,.shop-card,.item-card,.ww-club-card){border-radius:18px;border-color:color-mix(in srgb,var(--scene-accent) 20%,var(--line));background:linear-gradient(155deg,color-mix(in srgb,var(--scene-accent) 10%,var(--card)),var(--card));box-shadow:var(--surface-shadow)} .page[data-page-mood] :is(.stat-card,.overview-card,.achievement-card,.task-card):nth-child(3n+2){background:linear-gradient(150deg,color-mix(in srgb,var(--gold) 11%,var(--card)),var(--card))}.page[data-page-mood] :is(.stat-card,.overview-card,.achievement-card,.task-card):nth-child(3n+3){background:linear-gradient(150deg,color-mix(in srgb,#8bac88 12%,var(--card)),var(--card))} .page[data-page-mood] .empty-card,.page[data-page-mood] .empty-state{border:1px dashed color-mix(in srgb,var(--scene-accent) 30%,var(--line));background:color-mix(in srgb,var(--scene-accent) 5%,var(--card))} /* Menus retain keyboard support and use the browser's top layer to avoid clipping. */ .custom-select{min-width:0}.custom-select .select-trigger{border-radius:11px;padding:0 13px;min-height:42px;border:1px solid color-mix(in srgb,var(--scene-accent,var(--green)) 22%,var(--line));background:linear-gradient(145deg,color-mix(in srgb,var(--scene-accent,var(--green)) 5%,var(--card)),var(--card));box-shadow:0 3px 0 color-mix(in srgb,var(--ink) 4%,transparent);font:600 .78rem/1.3 var(--sans);gap:16px;cursor:pointer} .custom-select .select-trigger>span:last-child{display:grid;place-items:center;width:22px;height:22px;flex:none;border-radius:6px;background:color-mix(in srgb,var(--scene-accent,var(--green)) 10%,var(--card));color:var(--scene-accent,var(--green));font-size:16px} .custom-select.open .select-trigger{border-color:var(--scene-accent,var(--green));box-shadow:0 0 0 3px color-mix(in srgb,var(--scene-accent,var(--green)) 12%,transparent)}.custom-select .select-trigger:disabled{opacity:.5;cursor:not-allowed} .custom-select .select-options{border-radius:14px;padding:7px;gap:4px;border:1px solid color-mix(in srgb,var(--scene-accent,var(--green)) 25%,var(--line));background:var(--card);box-shadow:0 16px 40px color-mix(in srgb,var(--ink) 17%,transparent),0 4px 10px color-mix(in srgb,var(--ink) 8%,transparent);scrollbar-width:thin;overscroll-behavior:contain} .custom-select .select-options.select-floating{position:fixed;inset:auto;margin:0;max-width:calc(100vw - 24px);box-sizing:border-box;z-index:1000;transform:none!important;animation:none!important} .custom-select .select-options [role=option]{display:flex;align-items:center;justify-content:space-between;gap:12px;border-radius:8px;min-height:40px;padding:10px 12px;color:var(--ink);font:500 .78rem/1.4 var(--sans);cursor:pointer;white-space:normal;text-align:left} .custom-select .select-options [role=option]:after{content:'';width:16px;flex:none}.custom-select .select-options [aria-selected=true]:after{content:'✓';font-weight:800}.custom-select .select-options [aria-selected=true]{background:color-mix(in srgb,var(--scene-accent,var(--green)) 13%,var(--card));color:var(--scene-accent,var(--green));font-weight:750}.custom-select .select-options [role=option]:hover,.custom-select .select-options [role=option]:focus-visible{background:color-mix(in srgb,var(--scene-accent,var(--green)) 8%,var(--card));outline-offset:-2px} select:not(.sr-only){appearance:none;background:linear-gradient(45deg,transparent 50%,var(--muted) 50%) calc(100% - 17px) 50%/5px 5px no-repeat,linear-gradient(135deg,var(--muted) 50%,transparent 50%) calc(100% - 12px) 50%/5px 5px no-repeat,var(--card);padding:10px 32px 10px 12px;border:1px solid var(--line);border-radius:11px;color:var(--ink);font:600 .78rem var(--sans);min-height:42px} /* A colorful time canvas, with proportional event heights and rounded rectangles. */ #page-planner .planner-summary{gap:16px}#page-planner .planner-summary article{position:relative;overflow:hidden;border:1px solid color-mix(in srgb,var(--scene-accent) 22%,var(--line));border-top:4px solid var(--scene-accent);padding:22px;background:linear-gradient(125deg,color-mix(in srgb,var(--scene-accent) 13%,var(--card)),var(--card));box-shadow:var(--surface-shadow)} #page-planner .planner-summary article:after{content:'✳';position:absolute;right:12px;bottom:-18px;font-size:100px;color:color-mix(in srgb,var(--scene-accent) 12%,transparent);pointer-events:none}#page-planner .planner-summary article:nth-child(2){--scene-accent:#b18b48}#page-planner .planner-summary article:nth-child(3){--scene-accent:#628e72}#page-planner .planner-summary strong{position:relative;z-index:1} .planner-calendar-shell{grid-template-columns:210px minmax(0,1fr)}.planner-calendar-sidebar{border-top:4px solid var(--scene-accent)!important}.planner-calendar-sidebar>summary{color:var(--scene-accent);font-size:.85rem}.planner-calendar-heading{padding:22px;background:radial-gradient(ellipse at 80% 0%,color-mix(in srgb,var(--scene-accent) 16%,transparent),transparent 75%),var(--card);border-bottom:1px solid var(--line)}.planner-calendar-heading .eyebrow{color:var(--scene-accent)}.planner-calendar-actions{gap:6px}.planner-calendar-actions .custom-select{width:112px}.planner-calendar-actions .select-trigger{min-height:36px;height:36px;font-size:.73rem} .planner-mini-grid{gap:3px}.planner-mini-grid .text-button{border-radius:7px!important;min-height:26px;padding:4px 0;width:100%;box-sizing:border-box;font-size:.72rem;display:grid;place-items:center;border:1px solid transparent;background:color-mix(in srgb,var(--scene-accent) 4%,var(--card))}.planner-mini-grid .is-today{border-color:var(--scene-accent);box-shadow:none;font-weight:750}.planner-mini-grid .is-selected{background:var(--scene-accent);color:#fff;box-shadow:0 3px 5px color-mix(in srgb,var(--scene-accent) 18%,transparent)} .planner-time-head{background:color-mix(in srgb,var(--scene-accent) 5%,var(--card))}.planner-time-head .text-button{border-radius:9px!important;min-width:45px;background:var(--card);box-shadow:0 2px 0 color-mix(in srgb,var(--scene-accent) 10%,transparent);border:1px solid color-mix(in srgb,var(--scene-accent) 12%,var(--line));padding:6px 10px;margin:2px auto}.planner-time-head strong{color:var(--scene-accent);font-size:1.1rem;line-height:1.4}.planner-time-head .is-today .text-button{background:var(--scene-accent);color:white;border-color:var(--scene-accent)}.planner-time-head .is-today strong{background:none;color:white;border-radius:8px!important;width:auto;height:auto;line-height:1.4;margin:0}.planner-time-body{height:2520px}.planner-time-day{background:repeating-linear-gradient(to bottom,transparent 0,transparent calc(var(--calendar-hour) - 1px),color-mix(in srgb,var(--scene-accent) 11%,var(--line)) calc(var(--calendar-hour) - 1px),color-mix(in srgb,var(--scene-accent) 11%,var(--line)) var(--calendar-hour))}.planner-time-day:nth-child(even){background-color:color-mix(in srgb,var(--scene-accent) 2%,var(--card))}.planner-slot{height:var(--calendar-hour);border-radius:0!important}.planner-hours{z-index:2}.planner-hours time{font-family:var(--sans);font-size:.6rem}.planner-time-scroll{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--scene-accent) 40%,var(--line)) transparent} .planner-event{--event-accent:#6081b9;border:1px solid color-mix(in srgb,var(--event-accent) 40%,var(--line));border-left:3px solid var(--event-accent);border-radius:7px!important;background:linear-gradient(125deg,color-mix(in srgb,var(--event-accent) 20%,var(--card)),color-mix(in srgb,var(--event-accent) 11%,var(--card)));padding:3px 4px;gap:2px;color:var(--ink);box-shadow:0 2px 3px color-mix(in srgb,var(--event-accent) 8%,transparent)}.planner-event[data-event-color="1"]{--event-accent:#9d78b1}.planner-event[data-event-color="2"]{--event-accent:#b58b48}.planner-event[data-event-color="3"]{--event-accent:#658f70}.planner-event[data-event-color="4"]{--event-accent:#b47868}.planner-event time{font:650 .57rem/1.2 var(--sans);white-space:normal;flex-shrink:0}.planner-event strong{font:750 .69rem/1.25 var(--sans)}.planner-event:hover{filter:brightness(.97);border-color:var(--event-accent)}.planner-time-day>.planner-event[style*="height:14px"] time{display:block} .planner-event.busy{--event-accent:#85919e;background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--event-accent) 11%,var(--card)) 0 5px,color-mix(in srgb,var(--event-accent) 17%,var(--card)) 5px 6px);border-color:var(--line);border-left-color:var(--event-accent)}.planner-event.done{opacity:.72}.planner-event.deadline{--event-accent:#b2755e;border-left-color:var(--event-accent);background:color-mix(in srgb,var(--event-accent) 12%,var(--card))}.planner-deadline-strip time{display:block}.planner-deadline-strip .planner-event{padding:4px}.planner-now{background:#d58358}.planner-now:before{background:#d58358} .planner-month-day{min-height:145px}.planner-month-day>.text-button:first-child{width:29px;height:29px;display:grid;place-items:center;border-radius:7px!important;border:1px solid color-mix(in srgb,var(--scene-accent) 10%,var(--line));background:var(--card)}.planner-month-day.is-today>.text-button:first-child{background:var(--scene-accent);color:#fff;border-radius:7px!important}.planner-month-day>.planner-event{display:flex;white-space:normal;padding:4px;gap:3px}.planner-month-day .planner-event time{display:block;font-size:.54rem}.planner-month-label{background:color-mix(in srgb,var(--scene-accent) 5%,var(--card));font-weight:650}.planner-month-day:nth-child(even){background-color:color-mix(in srgb,var(--scene-accent) 2%,var(--card))} .planner-session .planner-event time{font-size:.75rem}.planner-calendar-hint{background:color-mix(in srgb,var(--scene-accent) 6%,var(--card));font-size:.75rem}.planner-assignment{padding:18px!important;margin:14px 0;border:1px solid var(--line)!important;border-left:4px solid var(--scene-accent)!important;border-radius:14px;background:var(--card)}.planner-busy{border-left:4px solid #85919e;border-radius:10px;padding:12px 14px;background:color-mix(in srgb,#85919e 8%,var(--card))}.planner-reminder-card label:has(.custom-select){min-width:0}.planner-reminder-card .custom-select{width:100%;margin:8px 0}.planner-reminder-card [data-reminder-status]:empty{display:none}.planner-reminder-card [data-reminder-status]{padding:10px;border:1px solid var(--line);border-radius:9px;background:var(--card);overflow-wrap:anywhere}.planner-reminder-card .reminder-help{font-size:.72rem}.reminder-device-actions{display:flex;gap:8px;flex-wrap:wrap}.reminder-device-actions .button{min-height:36px} @media(max-width:1100px){.planner-calendar-shell{grid-template-columns:minmax(0,1fr)}.planner-reminder-card .custom-select{max-width:185px}} @media(max-width:700px){.page[data-page-mood]>.page-heading{padding:24px 105px 28px 20px;min-height:154px;border-radius:20px}.page-scene{width:103px;height:110px;right:6px;opacity:.85}.page[data-page-mood]>.page-heading:before{width:100px;right:0}.page[data-page-mood]>.page-heading:after{left:20px;bottom:16px;width:50px}.page[data-page-mood] .page-heading h1{font-size:1.7rem;letter-spacing:-.7px}.page[data-page-mood] .page-heading .lede{font-size:.76rem}.page[data-page-mood] .page-heading .eyebrow{font-size:.55rem;letter-spacing:1px}#page-planner .planner-summary{gap:8px}#page-planner .planner-summary article{padding:14px}#page-planner .planner-summary article:after{font-size:62px;right:0}.planner-calendar-heading{padding:16px}.planner-month-day{min-height:122px}.planner-month-day .planner-event time{font-size:.52rem}.planner-month-day .planner-event strong{font-size:.6rem}.planner-calendar-sidebar .custom-select .select-trigger{font-size:.7rem;padding:0 9px}.planner-reminder-card{display:block}.planner-reminder-card .custom-select{max-width:100%}.reminder-device-actions .button{width:100%}} [data-theme=high-contrast] .page[data-page-mood]>.page-heading,[data-theme=high-contrast] .page[data-page-mood] .panel,[data-theme=high-contrast] #page-planner .planner-summary article,[data-theme=high-contrast] .planner-event,[data-theme=high-contrast] .custom-select .select-trigger{background:var(--card);border-color:var(--ink);color:var(--ink)}[data-theme=high-contrast] .page-scene{display:none}[data-theme=high-contrast] .page[data-page-mood]>.page-heading:before{display:none}[data-theme=high-contrast] .select-options [aria-selected=true]{outline:2px solid var(--ink);outline-offset:-2px} .custom-select{border-radius:11px}.planner-time-day>.planner-event{padding:4px 5px;gap:3px}.planner-time-day>.planner-event time{font-size:.69rem;line-height:1.2}.planner-time-day>.planner-event strong{font-size:.78rem;line-height:1.25}.planner-time-day>.planner-event[data-event-compact=true]{padding:1px 4px;gap:1px}.planner-time-day>.planner-event[data-event-compact=true] time{font-size:.55rem;line-height:10px}.planner-time-day>.planner-event[data-event-compact=true] strong{font-size:.66rem;line-height:11px} .page[data-page-mood] .page-heading .eyebrow,.planner-calendar-heading .eyebrow,.planner-calendar-sidebar>summary,.custom-select .select-options [aria-selected=true]{color:color-mix(in srgb,var(--scene-accent,var(--green)) 70%,var(--ink))} .planner-time-day>.planner-event:not([data-event-compact=true]) strong{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal;overflow-wrap:anywhere} #page-settings .setting-row:has([data-setting=boldText]){align-items:center;gap:16px;flex-wrap:wrap} @media(max-width:700px){#page-planner[data-calendar-mode=month] #planner-agenda{overflow-x:auto;overscroll-behavior:contain}#page-planner[data-calendar-mode=month] .planner-month{min-width:620px}.planner-month-day .planner-event time{font-size:.58rem}.planner-month-day .planner-event strong{font-size:.68rem}} .planner-calendar-sidebar{display:block!important}.planner-calendar-sidebar>summary{margin-bottom:14px}.planner-sidebar-body{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}.planner-sidebar-body>label{display:grid;gap:6px}.planner-sidebar-body .planner-layers{grid-column:auto;grid-row:auto}.planner-sidebar-body #planner-reminders{min-width:0}.planner-sidebar-body .planner-layer-note{margin:0} @media(min-width:601px) and (max-width:1100px){.planner-sidebar-body{grid-template-columns:180px minmax(0,1fr);gap:12px 24px}.planner-sidebar-body>label,.planner-sidebar-body #planner-mini-month{grid-column:1}.planner-sidebar-body .planner-layers{grid-column:2;grid-row:1/3}.planner-sidebar-body .planner-layer-note,.planner-sidebar-body #planner-reminders{grid-column:1/-1}} @media(max-width:600px){#page-planner .planner-toolbar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}#page-planner .planner-toolbar .button{width:100%;padding:9px 11px;font-size:.73rem}#page-planner .planner-toolbar .button:first-child{grid-column:1/-1}.planner-sidebar-body{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px}.planner-sidebar-body>label,.planner-sidebar-body .planner-layer-note,.planner-sidebar-body #planner-reminders{grid-column:1/-1}.planner-sidebar-body #planner-mini-month{grid-column:1;align-self:start}.planner-sidebar-body .planner-layers{grid-column:2;grid-row:2;margin:10px 0}.planner-mini-grid{gap:2px}.planner-mini-grid .text-button{font-size:.66rem;min-height:25px}.planner-reminder-card .reminder-device-actions{display:grid;grid-template-columns:1fr}.planner-reminder-card .reminder-help{font-size:.75rem}} /* assessment.css */ .assessment-panel{max-width:850px;margin:auto}.assessment-question-heading{display:flex;justify-content:space-between;gap:1rem}.assessment-panel progress{width:100%;height:5px;margin:14px 0 24px;accent-color:var(--accent,#376b52)}.assessment-example{font-size:1.15rem;font-style:italic;margin:20px 0}.assessment-choices{display:grid;gap:12px;margin:24px 0}.assessment-choices .button{height:auto;min-height:52px;white-space:normal;text-align:left;justify-content:flex-start;padding:16px 20px}.assessment-estimates{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:22px}.assessment-estimates div{display:flex;flex-direction:column;gap:7px}.assessment-estimates span,.assessment-estimates small{color:var(--muted,#737c72);font-size:.8rem}.assessment-estimates strong{font-size:1.12rem;overflow-wrap:anywhere}.assessment-range,.assessment-history-chart{display:block;width:100%;height:auto;color:var(--accent,#376b52);fill:currentColor}.assessment-range text,.assessment-history-chart text{font-size:12px;fill:var(--muted,#737c72)}.assessment-axis{stroke:var(--border,#d5dcd2);stroke-width:2;fill:none}.assessment-interval{stroke:currentColor;stroke-width:9;stroke-linecap:round;fill:none}.assessment-history-chart polyline{fill:none;stroke:currentColor;stroke-width:2}.assessment-history-range{stroke:currentColor;stroke-width:3;opacity:.35}.assessment-history-table{overflow-x:auto}.assessment-history-table table{width:100%;border-collapse:collapse}.assessment-history-table th,.assessment-history-table td{text-align:left;padding:9px;border-bottom:1px solid var(--border,#d5dcd2)}.assessment-proficiency-panel details{margin-top:15px}.assessment-reminder{font-size:.75rem}.assessment-reminder-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:24px}#home-proficiency{font-size:.85rem;color:var(--muted,#737c72)}@media(max-width:700px){.assessment-estimates{gap:9px}.assessment-estimates strong{font-size:.95rem}.assessment-question-heading{flex-direction:column;gap:4px}.topbar #assessment-reminder,.topbar #assessment-dismiss{display:none}} .study-afk-notice{position:fixed;bottom:1rem;left:50%;transform:translateX(-50%);z-index:90;max-width:min(90vw,36rem);padding:.8rem 1.2rem;border:1px solid var(--border);border-radius:1rem;background:var(--surface,#fff);color:var(--text,#222);box-shadow:0 8px 24px #0002;} [data-ai-form] .functional-table input[type=number]{min-width:5rem;width:6rem;} #page-admin [data-ai-json]{display:block;width:100%;min-height:32rem;resize:vertical;box-sizing:border-box;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.85rem;line-height:1.5;white-space:pre;overflow:auto;tab-size:2;user-select:text;-webkit-user-select:text;} #page-admin [data-ai-errors]{white-space:pre-wrap;color:var(--danger,#a13c2f);}#page-admin [data-ai-changes]{max-height:28rem;overflow:auto;white-space:pre-wrap;} #page-admin [data-ai-json-panel][hidden],#page-admin [data-ai-settings][hidden]{display:none;} /* Vocabulary Arena: theme-aware surfaces, native checkbox semantics, optional motion. */ .arena-intro,.arena-ready,.arena-transition,.arena-empty{text-align:center;padding:clamp(22px,4vw,50px) 12px}.arena-intro h2,.arena-ready h2{font-size:clamp(2rem,4vw,3.4rem);line-height:1.12;letter-spacing:-.04em;margin:18px 0}.arena-intro p,.arena-ready p{max-width:570px;margin:20px auto;color:var(--muted)}.arena-orbit,.arena-empty>span{display:grid;place-items:center;font-size:2.5rem;width:90px;height:90px;margin:0 auto 25px;background:var(--mint);color:var(--green);border:1px solid var(--line);border-radius:50%;box-shadow:0 0 0 12px color-mix(in srgb,var(--mint) 45%,transparent)}.arena-intro-facts{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:28px 0;font-size:.8rem}.arena-intro-facts span{padding:9px 12px;background:var(--mint);border-radius:20px;color:var(--ink)}.arena-question-word{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:12px 0}.arena-question-word h2{font-size:clamp(2.2rem,6vw,4rem);letter-spacing:-.04em;margin:0;overflow-wrap:anywhere}.arena-question-word>span{font-size:.68rem;font-weight:750;letter-spacing:.12em;color:var(--green);white-space:nowrap}.arena-signal{font-size:.78rem;color:var(--muted)}.arena-choices{display:grid;gap:11px;margin:23px 0}#arena-answer-form fieldset{border:0;padding:0;margin:0}.arena-choice{position:relative;display:flex;gap:16px;align-items:center;padding:19px 22px;border:1.5px solid var(--line);border-radius:16px;background:var(--card);color:var(--ink);cursor:pointer;transition:border-color .15s,background .15s,transform .15s;line-height:1.5}.arena-choice input{position:absolute;opacity:0;width:1px;height:1px}.arena-choice:hover{border-color:var(--green);transform:translateY(-1px)}.arena-choice:has(input:focus-visible){outline:3px solid var(--green);outline-offset:4px}.arena-choice.selected{background:var(--mint);border-color:var(--green)}.arena-check{width:23px;height:23px;flex:0 0 23px;border:1.5px solid var(--muted);border-radius:7px;display:grid;place-items:center;color:var(--card)}.selected .arena-check{border-color:var(--green);background:var(--green)}.selected .arena-check:after{content:'✓';font-size:16px;font-weight:800}.arena-none{border-style:dashed;margin-top:7px}.arena-none small{display:block;font-size:.75rem;color:var(--muted);margin-top:4px}.arena-submit-row{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-top:12px}.arena-choice:has(input:disabled){cursor:default;opacity:.65;transform:none}.arena-transition h2{font-size:clamp(1.7rem,4vw,2.7rem);line-height:1.2;margin:20px 0}.arena-transition>strong{font-size:3.7rem;letter-spacing:-.04em;color:var(--green)}.arena-transition-star{display:block;font-size:3rem;color:var(--gold);animation:arena-signal .45s ease-out}.arena-transition p{max-width:480px;margin:20px auto;color:var(--muted)}.arena-transition .button{margin-top:10px}.arena-rank>strong{font-size:clamp(3rem,5vw,5rem);line-height:1.15;color:var(--green);display:block;letter-spacing:-.055em;margin:14px 0}.arena-rank p{color:var(--muted)}.arena-rank-ladder{display:flex;gap:5px;margin:22px 0}.arena-rank-ladder span{flex:1;text-align:center;padding:9px 4px;border-radius:8px;color:var(--muted);background:var(--paper);font-size:.85rem}.arena-rank-ladder .in-range{background:var(--mint);color:var(--green);box-shadow:inset 0 -3px 0 var(--green)}.proficiency-grid{display:grid;grid-template-columns:1fr 1.06fr;gap:24px;align-items:start}.proficiency-report{padding:30px}.proficiency-report:focus{outline:2px solid var(--green);outline-offset:4px}.mission-wit{font-size:1.1rem;line-height:1.6}.mission-facts{display:grid;grid-template-columns:1fr 1fr;gap:12px;border-block:1px solid var(--line);padding:20px 0;margin:25px 0}.mission-facts>div{display:grid;gap:7px}.mission-facts span{font-size:.73rem;color:var(--muted)}.mission-facts strong{font-size:1.1rem}.mission-insights h3{font-size:.9rem}.mission-insights p{color:var(--muted);font-size:.88rem;line-height:1.7}.proficiency-history{margin-top:24px}.arena-history-list{list-style:none;padding:0;margin:16px 0;display:grid;gap:8px;max-height:340px;overflow:auto}.arena-history-list li{display:grid;grid-template-columns:150px 80px 1fr;gap:16px;align-items:center;padding:15px;border:1px solid var(--line);border-radius:12px}.arena-history-list time,.arena-history-list span{font-size:.8rem;color:var(--muted)}.arena-history-list strong{color:var(--green);font-size:1.1rem}.arena-method{margin-top:22px;border-top:1px solid var(--line);padding-top:18px}.arena-method summary{cursor:pointer;color:var(--green);font-size:.9rem}.arena-method p{font-size:.86rem;line-height:1.7;color:var(--muted)}.arena-sources{display:flex;gap:12px;flex-wrap:wrap}.arena-sources a{font-size:.8rem;color:var(--green)} /* The flight and result share a permanent responsive stage; only visibility changes. */ .proficiency-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);align-items:stretch;gap:24px;isolation:isolate}.proficiency-stage>.proficiency-flight-panel{min-width:0;max-width:none;width:100%;margin:0}.proficiency-stage>.proficiency-report{min-width:0;margin:0;display:flex;flex-direction:column;justify-content:center;padding:clamp(22px,3vw,36px);animation:none;transition:opacity .4s ease-out,visibility .4s}.proficiency-stage[data-revealed="false"]>.proficiency-report,.proficiency-evidence[data-revealed="false"]{opacity:0;visibility:hidden;pointer-events:none}.proficiency-stage .arena-rank>strong{font-size:clamp(2.7rem,4vw,4.5rem);margin:10px 0}.proficiency-stage .arena-rank p{font-size:.88rem;line-height:1.6;margin:.7rem 0}.proficiency-stage .arena-category-ladder{margin:1rem 0}.proficiency-stage .mission-practice{font-size:.85rem;line-height:1.6;padding-top:14px;border-top:1px solid var(--line)}.proficiency-stage .functional-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}.proficiency-stage .functional-actions .button{min-height:44px;padding:11px 15px;font-size:.82rem}.proficiency-evidence{transition:opacity .4s ease-out,visibility .4s}.mission-synopsis{border-bottom:1px solid var(--line);padding:20px 0}.mission-synopsis>summary{font-weight:650;cursor:pointer;color:var(--green)}.proficiency-evidence .proficiency-history{margin-top:20px} .rocket-journey{position:relative;display:grid;grid-template-rows:auto minmax(260px,1fr) auto auto auto;overflow:hidden;border-radius:22px;background:linear-gradient(165deg,#0b1428,#17344b 64%,#356c7b);min-height:620px;height:100%;color:#f0f7f3;border:1px solid #ffffff26;--flight:0}.rocket-journey .rocket-hud{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:12px;padding:22px 22px 0;font-size:.59rem;letter-spacing:.13em;min-height:116px}.rocket-journey .rocket-hud strong{font-size:.89rem;line-height:1.5;letter-spacing:0;display:block;margin-top:10px;max-width:245px;min-height:4.5em;font-weight:550}.rocket-journey .flight-altitude{text-align:right;white-space:nowrap;letter-spacing:0}.rocket-journey .flight-altitude b{font-size:clamp(1.25rem,2vw,1.7rem);font-weight:550;font-variant-numeric:tabular-nums;display:block;line-height:1.5}.rocket-journey .flight-altitude small{display:block;color:#ccdfdf;font-size:.6rem}.rocket-journey .rocket-sky{display:block;width:100%;height:340px;align-self:end}.rocket-journey .rocket-earth{transform-origin:160px 520px;transform:translate(var(--earth-x,0px),var(--earth-y,0px)) scale(var(--earth-scale,1));opacity:1}.rocket-journey .rocket-clouds{transform:translateY(calc(var(--flight)*300px));opacity:calc(1 - var(--flight))}.rocket-journey .rocket-stars{opacity:var(--space-opacity,0)}.rocket-journey .rocket-vehicle{transform-origin:300px 300px;transform:translate(var(--ship-x,0px),var(--ship-y,0px)) rotate(var(--ship-turn,0deg)) scale(var(--rocket-size,1))}.rocket-journey .rocket-moon{transform-origin:440px 270px;transform:scale(var(--moon-scale,.3));opacity:var(--moon-opacity,0)}.rocket-journey .rocket-lunar-flag{opacity:0}.rocket-journey[data-phase="arrived"][data-destination="landing"] .rocket-lunar-flag{opacity:1;transition:opacity .6s ease-out}.rocket-journey .rocket-trail{opacity:var(--trail-opacity,0)}.rocket-journey .rocket-flame{opacity:var(--engine-intensity,0);transform-origin:300px 335px;transform:scaleY(var(--plume-size,0));animation:rocket-fuel-flame .17s ease-in-out infinite alternate}.rocket-journey .rocket-smoke{opacity:0}.rocket-journey[data-phase="ignition"] .rocket-smoke,.rocket-journey[data-phase="liftoff"] .rocket-smoke{opacity:.35;animation:rocket-smoke .9s ease-out}.rocket-countdown{font:500 38px var(--serif);fill:#eee8d8}.rocket-journey .rocket-controls{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:16px 20px;position:relative;z-index:3;border-top:1px solid #ffffff24;background:#12253290}.rocket-journey .rocket-controls label{font-size:.55rem;letter-spacing:.12em;width:90px}.rocket-journey .rocket-controls progress{display:block;width:100%;height:6px;accent-color:#efa772;margin:8px 0 0}.rocket-journey .rocket-controls .button{background:#e0eee6;color:#193739;border:none;font-size:.75rem;padding:10px 13px;min-height:40px}.rocket-journey .rocket-controls .text-button{color:#f0f7f3;font-size:.74rem;min-height:40px}.rocket-journey .rocket-controls button:focus-visible{outline:3px solid #f4c69b;outline-offset:3px}.rocket-journey .rocket-announcement{padding:0 20px;margin:12px 0 7px;font-size:.73rem;color:#d4e3df;line-height:1.6;min-height:3.2em}.rocket-scale-note{font-size:.65rem;line-height:1.5;color:#bcd3d6;margin:0;padding:0 20px 17px}.rocket-journey .flight-destination{position:absolute;left:22px;top:148px;max-width:52%;border-left:2px solid #edb791;background:#101f35cf;padding:10px 12px;border-radius:0 9px 9px 0;display:grid;gap:5px;z-index:2}.rocket-journey .flight-destination[hidden]{display:none}.rocket-journey .flight-destination span{font-size:.5rem;letter-spacing:.12em}.rocket-journey .flight-destination strong{font-size:1.1rem;line-height:1.25}.rocket-journey .flight-destination small{font-size:.65rem;color:#cedeeb}.rocket-journey button:disabled{opacity:.55} @keyframes arena-signal{from{opacity:0;transform:scale(.75) rotate(-20deg)}to{opacity:1;transform:scale(1)}}@keyframes rocket-smoke{to{transform:translateY(10px) scale(1.1)}}@keyframes rocket-fuel-flame{to{transform:scaleY(calc(var(--plume-size,0)*.88))}} @media(max-width:1050px){.proficiency-stage{grid-template-columns:1fr;max-width:680px;margin:auto}.proficiency-stage>.proficiency-flight-panel,.proficiency-stage>.proficiency-report{grid-area:1/1}.proficiency-stage>.proficiency-report{align-self:end;margin-top:210px;border-radius:20px;z-index:4;background:var(--card);box-shadow:0 -12px 32px #08152b20}.proficiency-stage[data-revealed="true"] .rocket-controls{visibility:hidden}.proficiency-stage[data-revealed="true"] .rocket-announcement,.proficiency-stage[data-revealed="true"] .rocket-scale-note{visibility:hidden}.proficiency-stage .rocket-journey{min-height:650px}.proficiency-stage[data-revealed="true"] .flight-destination{top:124px;max-width:60%;background:#101f35e8}.proficiency-stage[data-revealed="true"] .rocket-hud strong{max-width:320px}.proficiency-stage .functional-actions{align-items:center}.proficiency-stage .functional-actions>.text-button{min-height:44px}} @media(max-width:600px){.arena-question-word{align-items:start;flex-direction:column}.arena-choice{padding:16px 14px;font-size:.9rem}.arena-submit-row{gap:8px}.arena-submit-row .button{padding:13px 16px}.arena-history-list li{grid-template-columns:1fr auto;gap:5px}.arena-history-list span{grid-column:1/-1}.proficiency-report{padding:22px}.rocket-journey .rocket-hud{padding:18px 16px 0;gap:8px}.rocket-journey .rocket-hud strong{font-size:.83rem}.rocket-journey .rocket-controls{padding:14px 16px;gap:8px}.rocket-journey .rocket-controls label{width:68px}.rocket-journey .rocket-controls .button,.rocket-journey .rocket-controls .text-button{font-size:.69rem;padding:9px 10px}.rocket-journey .rocket-sky{height:310px}.rocket-journey .rocket-announcement{min-height:4.8em}.proficiency-stage>.proficiency-report{padding:22px 18px}.proficiency-stage .arena-category-ladder{gap:2px}.proficiency-stage .arena-category-ladder>span{font-size:.8rem}.proficiency-stage .functional-actions .button{font-size:.76rem;padding:11px 12px}} @media(prefers-reduced-motion:reduce){.arena-choice,.proficiency-stage>.proficiency-report,.proficiency-evidence{transition:none}.arena-choice:hover{transform:none}.arena-transition-star,.rocket-journey .rocket-flame,.rocket-journey .rocket-smoke{animation:none!important}.rocket-earth,.rocket-clouds,.rocket-vehicle{transition:none}} .arena-preview-banner{position:relative;z-index:110;padding:8px 16px;text-align:center;background:#ffe7b0;color:#49351c;font:600 11px/1.5 system-ui}.arena-choice .arena-check:after{pointer-events:none}.arena-choices label input:focus{outline:none} .assessment-result-reveal{position:relative;animation:assessment-result-reveal .5s ease-out} .assessment-confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:4;border-radius:inherit} .assessment-confetti i{position:absolute;left:var(--confetti-x);top:-12px;width:7px;height:13px;border-radius:2px;animation:assessment-confetti 1.8s var(--confetti-delay) ease-out both} @keyframes assessment-confetti{to{transform:translateY(500px) rotate(var(--confetti-turn));opacity:0}} @keyframes assessment-result-reveal{from{opacity:.5;transform:translateY(9px)}to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){.rocket-flight[data-phase] .rocket-flame,.assessment-result-reveal,.assessment-confetti i{animation:none!important}} /* Vocabulary test v4: rank color is contained in the visible rank, never the secret stretch. */ .assessment-question-heading{display:flex;align-items:center;justify-content:space-between;gap:1rem}.assessment-counter{border-radius:14px;padding:.5rem .9rem;background:var(--soft-bg,rgba(125,140,175,.12));font-size:.8rem;letter-spacing:.08em}.arena-transition{position:relative;overflow:hidden;min-height:260px;display:grid;place-content:center;background:linear-gradient(145deg,#0d1830,#222246);border-radius:28px;isolation:isolate}.rank-window{height:64px;overflow:hidden;mask-image:linear-gradient(transparent,#000 20%,#000 80%,transparent);width:200px;z-index:1}.rank-reel strong{display:flex;height:64px;align-items:center;justify-content:center;color:var(--rank-color);font-size:3.5rem;line-height:1}.rank-stars{position:absolute;inset:0;pointer-events:none;z-index:0}.rank-stars i{position:absolute;background:#e7edff;border-radius:50%;box-shadow:0 0 8px #a6b5fc;animation:rank-twinkle 3.5s ease-in-out var(--delay) infinite alternate}.rank-stars i.emerging{animation:star-emerge 1s ease-out both,rank-twinkle 3.5s ease-in-out 1s infinite alternate}.rank-neutral{height:64px;display:flex;align-items:center;justify-content:center;gap:18px;z-index:1}.rank-neutral i{width:7px;height:7px;border-radius:50%;background:#e0e7ff;box-shadow:0 0 16px #c7d2fe;animation:range-narrow 1.8s ease-out both}.arena-rank-ladder{flex-wrap:wrap;gap:.4rem}.arena-rank-ladder span{color:var(--text);border:1px solid var(--border);opacity:.7}.arena-rank-ladder span.in-range{opacity:1;border-color:var(--accent)}.assessment-beta-label{font-size:.8rem;color:var(--muted);margin:.4rem 0}.rank-final{color:var(--rank-color);text-shadow:0 0 16px color-mix(in srgb,var(--rank-color) 20%,transparent)}.progress-reset-panel{margin-top:1.5rem}.progress-reset-panel .button{margin:.5rem .5rem 0 0}.season-overview{margin-bottom:1rem}.season-overview strong{font-size:1.5rem}.season-details{margin-top:1rem}@keyframes rank-twinkle{from{opacity:.4}to{opacity:1}}@keyframes star-emerge{from{opacity:0;transform:scale(.2)}to{opacity:.9;transform:scale(1)}}@keyframes range-narrow{from{transform:translateX(12px);opacity:.3}to{transform:translateX(0);opacity:1}}@media(prefers-reduced-motion:reduce){.rank-stars i,.rank-neutral i{animation:none}.rank-reel{transition:none}}@media(max-width:600px){.assessment-question-heading{gap:.4rem}.arena-signal{font-size:.85rem}.arena-question-word h2{font-size:2rem}} .arena-signal[style],.rank-final{background:#0d1830;color:var(--rank-color);border-radius:12px;padding:.25rem .6rem}.rank-final{display:inline-block!important;padding:.5rem 1.1rem!important} .arena-rank strong.rank-final{color:var(--rank-color)}.arena-rank .arena-rank-ladder span[style]{background:#0d1830;color:var(--rank-color);border-color:color-mix(in srgb,var(--rank-color) 40%,transparent)}.arena-rank .arena-rank-ladder span[style].in-range{border-color:var(--rank-color);box-shadow:0 0 12px color-mix(in srgb,var(--rank-color) 20%,transparent)} /* Keep completion actions and the existing custom reminder dropdown aligned. */ .arena-ready .functional-actions{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:12px}.arena-ready .functional-actions .button{min-height:48px;margin:0;gap:8px}.assessment-reminder-controls{justify-content:center;padding-top:24px;border-top:1px solid var(--line);font-size:.85rem}.assessment-reminder-controls .custom-select{min-width:205px}.assessment-reminder-controls .select-trigger,#assessment-save-days{min-height:46px}.assessment-reminder-controls #assessment-save-days{margin:0}@media(max-width:520px){.arena-ready .functional-actions .button{width:100%}.assessment-reminder-controls{align-items:stretch}.assessment-reminder-controls>label{width:100%;text-align:center}.assessment-reminder-controls .custom-select{flex:1}} /* Adaptive release: six quiet categories, a connected plausible range, and accessible test controls. */ .assessment-question-heading{display:flex;flex-direction:row-reverse;justify-content:space-between;gap:1rem}.assessment-approx{font-size:.84rem;color:var(--muted);font-variant-numeric:tabular-nums}.assessment-estimate{max-width:26rem;margin:1rem auto 1.5rem;text-align:center;font-size:.85rem;color:var(--muted)}.arena-category-ladder{display:grid;grid-template-columns:repeat(6,1fr);position:relative;gap:.5rem;margin:1.2rem 0}.arena-category-ladder>span{z-index:1;text-align:center;color:var(--rank-color);padding:.55rem .2rem;opacity:.45;border-radius:.65rem}.arena-category-ladder>span.in-range{opacity:1;background:color-mix(in srgb,var(--rank-color) 13%,transparent);font-weight:750}.arena-category-ladder>i{position:absolute;left:calc((var(--range-start) + .5)*100%/6);right:calc((5.5 - var(--range-end))*100%/6);top:50%;height:2px;background:linear-gradient(90deg,#93c5fd,#a78bfa);opacity:.4}.assessment-confirm{max-width:32rem;width:calc(100% - 2rem);padding:2rem;border:1px solid var(--border);border-radius:1.3rem;color:var(--ink);background:var(--surface)}.assessment-confirm::backdrop{background:#0b142780;backdrop-filter:blur(5px)}.assessment-confirm .functional-actions{display:flex;gap:.7rem;justify-content:flex-end;margin-top:1.5rem}.assessment-active [data-assessment-locked]{opacity:.42;cursor:not-allowed}.assessment-leave{display:block;margin:1rem auto}.rank-window{mask-image:linear-gradient(transparent,#000 25%,#000 75%,transparent)}.rank-reel strong{transition:opacity .5s ease-out}.rank-stars i{box-shadow:0 0 8px #ffffff80;animation:adaptive-twinkle 4s ease-in-out var(--delay) infinite}.rank-stars i.emerging{animation:adaptive-emerge 2s ease-out var(--delay) both,adaptive-twinkle 4s ease-in-out 2s infinite}.assessment-review{margin:1.5rem 0}.assessment-review>summary{cursor:pointer;font-weight:650}.assessment-review ol{padding-left:1.5rem}.assessment-review li{padding:1.2rem 0;border-bottom:1px solid var(--border)}.assessment-review h3 small{font-weight:400;font-size:.8rem;color:var(--muted)}.review-grade{font-weight:650}.review-meaning{padding-left:.8rem;border-left:2px solid #86b7ad}.words-to-study{padding:1rem;border-radius:1rem;background:var(--surface-2)}.achievement-category-label{font-size:.75rem;color:var(--muted)}.notification-dot{display:inline-block;width:7px;height:7px;background:#549bea;border-radius:50%;margin-left:.45rem}.proficiency-report{animation:adaptive-emerge .55s ease-out both} @keyframes adaptive-emerge{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}@keyframes adaptive-twinkle{0%,100%{opacity:.55}50%{opacity:1}}@media(prefers-reduced-motion:reduce){.rank-stars i,.proficiency-report{animation:none!important}.rank-reel strong{transition:none}} .word-structure{margin-top:1rem;padding:1.1rem;border:1px solid var(--line);border-radius:1rem;background:var(--soft-bg);font-size:.88rem}.word-structure h3{font-size:.9rem;margin:0 0 .7rem}.word-structure dl{display:flex;flex-wrap:wrap;gap:1rem}.word-structure dt{text-transform:capitalize;font-weight:600}.word-structure dd{margin:.2rem 0}.word-structure small{display:block;color:var(--muted)}.dictionary-band{display:inline-flex;padding:.25rem .65rem;border-radius:1rem;background:var(--soft-bg);font-size:.8rem}.dictionary-roots{margin:1.5rem 0}.roots-tabs{display:flex;gap:.6rem;margin:1rem 0}.roots-tabs button{padding:.6rem 1rem;border:1px solid var(--line);border-radius:1rem;background:transparent;color:inherit}.roots-tabs button[aria-pressed="true"]{background:var(--soft-bg);border-color:#8bafaa}.dictionary-roots label{display:inline-flex;flex-direction:column;gap:.4rem;margin-right:1rem;margin-bottom:1rem;font-size:.85rem}.dictionary-roots input,.dictionary-roots select{padding:.6rem;border:1px solid var(--line);border-radius:.5rem;background:var(--panel-bg);color:inherit}.dictionary-roots [data-root-results]{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:1rem}.root-card{padding:1rem;border:1px solid var(--line);border-radius:1rem}.root-card small{font-size:.8rem;color:var(--muted)}.root-card .text-button{padding:0;font-size:inherit}.root-card a{font-size:.8rem} .rank-range-reveal{position:relative;z-index:1;display:grid;gap:.7rem;text-align:center;color:#e8effb}.rank-range-reveal>span{font-size:.75rem;letter-spacing:.1em;opacity:.7}.rank-range-reveal>strong{font-size:clamp(1.8rem,5vw,3rem);font-weight:600} /* Confidence checkpoints use server progress; final checkpoint requires completion. */ .assessment-question-heading{flex-direction:row;align-items:center}.assessment-checkpoints{display:flex;gap:.5rem;align-items:center;flex-shrink:0}.assessment-checkpoint{display:grid;place-items:center;width:1.35rem;height:1.35rem;font-size:1.1rem;color:var(--muted);opacity:.65;transition:color .25s,opacity .25s,transform .25s}.assessment-checkpoint.reached{color:var(--green,#376b52);opacity:1;transform:scale(1.08)}.assessment-estimate strong{display:block;font-weight:800;text-decoration:none;position:relative;z-index:2}.assessment-estimate,.assessment-estimate *{text-decoration:none}.arena-category-ladder>i{display:none}.review-incorrect{color:var(--ink);font-weight:650}.review-prompt{color:var(--muted)} .community-message{position:relative;padding-right:3rem}.community-message>header{display:flex;flex-wrap:wrap;align-items:baseline;gap:.65rem}.community-message time{font-size:.78rem;color:var(--muted);font-variant-numeric:tabular-nums}.community-message-menu{position:absolute;top:.7rem;right:.5rem}.community-message-menu summary{cursor:pointer;padding:.4rem;list-style:none}.community-message-menu[open]{z-index:3;max-width:12rem;background:var(--panel,var(--soft-bg,#fff));border:1px solid var(--line);padding:.4rem;border-radius:.5rem}.community-message-menu button{display:block;white-space:nowrap}.community-retention{font-size:.85rem;color:var(--muted)} @media(max-width:520px){.assessment-checkpoints{gap:.3rem}.assessment-checkpoint{width:1.15rem;height:1.15rem}.arena-history-list li{flex-wrap:wrap}.community-message time{font-size:.72rem}} @media(prefers-reduced-motion:reduce){.assessment-checkpoint{transition:none;transform:none}} /* Keep confidence progress visible when a long question scrolls. */ .assessment-question-heading{position:sticky;top:0;z-index:4;background:var(--card);padding:.55rem 0}.arena-question-word{scroll-margin-top:3rem} /* Persistent briefing and readable category labels share the existing theme tokens. */ .proficiency-stage>.proficiency-flight-panel{grid-area:1/1}.proficiency-stage>.proficiency-report,.proficiency-briefing{grid-area:1/2}.proficiency-briefing{align-self:center;padding:32px;transition:opacity .4s,visibility .4s}.proficiency-briefing h2{font:500 clamp(30px,3vw,42px)/1.2 var(--serif);letter-spacing:-.04em;margin:18px 0;color:var(--ink)}.proficiency-briefing p{max-width:30rem;line-height:1.8;color:var(--ink);font-size:.95rem}.mission-brief-note{display:block;border-top:1px solid var(--line);padding-top:18px;margin-top:24px;font-size:.8rem;line-height:1.7;color:var(--ink)}.proficiency-stage[data-revealed="true"] .proficiency-briefing{visibility:hidden;opacity:0;pointer-events:none}.rocket-journey .flight-altitude{width:130px}.proficiency-stage .arena-category-ladder>span{color:var(--ink);opacity:1}.proficiency-stage .arena-category-ladder>span.in-range{color:var(--ink);border-bottom:2px solid var(--rank-color)} @media(max-width:1050px){.proficiency-briefing{display:none}.proficiency-stage>.proficiency-flight-panel,.proficiency-stage>.proficiency-report{grid-area:1/1}.proficiency-stage[data-revealed="true"] .rocket-sky{position:absolute;right:0;top:80px;width:190px;height:140px}.proficiency-stage[data-revealed="true"] .flight-destination{max-width:58%;padding:9px 10px}.proficiency-stage[data-revealed="true"] .flight-destination strong{font-size:1rem}.rocket-journey .flight-altitude{width:115px}} @media(prefers-reduced-motion:reduce){.proficiency-briefing{transition:none}} /* word-parts.css */ .word-part{position:relative;display:inline-block;border:0;padding:0;margin:0 1px;background:transparent;color:inherit;font:inherit;letter-spacing:inherit;line-height:inherit;cursor:pointer;text-decoration-line:underline;text-decoration-thickness:2px;text-underline-offset:.16em;text-decoration-color:var(--green)}.word-part-root{text-decoration-color:var(--gold)}.word-part-suffix{text-decoration-style:dotted}.word-part:hover,.word-part:focus-visible{background:var(--mint);border-radius:4px;outline:2px solid var(--green);outline-offset:3px}.word-part-tooltip{display:none;position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%);font:600 13px/1.4 system-ui;letter-spacing:normal;text-transform:none;padding:7px 12px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);white-space:nowrap;z-index:5;box-shadow:0 4px 15px #0002}.word-part:hover .word-part-tooltip,.word-part:focus-visible .word-part-tooltip{display:block}.word-part-facts{display:grid;grid-template-columns:130px 1fr;gap:12px;line-height:1.6}.word-part-facts dt{color:var(--muted)}.word-part-facts dd{margin:0;font-weight:650}.arena-word-review{margin-top:25px;padding:20px;border-top:1px solid var(--line)}.arena-word-review h3{font-size:2rem;margin:14px 0}.arena-cutscene-caption{font-size:.8rem}.arena-demo-notice{border-left:4px solid var(--gold);padding:15px 20px;background:var(--mint);line-height:1.6;color:var(--ink);margin:18px 0}.arena-demo-history{margin-top:25px}.arena-demo-history li{padding:10px}.arena-demo-rocket-label{position:relative;z-index:5;padding:12px 18px;background:#ffe7b0;color:#49351c;font-size:.85rem}.arena-demo-flight[hidden]{display:none}@media(max-width:600px){.word-part-facts{grid-template-columns:1fr;gap:6px}.word-part-facts dd{margin-bottom:12px}} /* auth-usability.css */ .password-field{position:relative;display:flex;align-items:center;gap:8px;width:100%}.password-field input{flex:1;min-width:0;width:auto;box-sizing:border-box}.password-visibility{position:static;flex:0 0 36px;display:grid;place-items:center;min-width:36px;min-height:36px;padding:6px;border:0;border-radius:7px;color:var(--muted);background:transparent;cursor:pointer}.password-visibility:hover,.password-visibility[data-password-visible=true]{color:var(--green);background:var(--mint)}.password-visibility:focus-visible{outline:2px solid var(--green);outline-offset:2px}.password-field[hidden]{display:none!important} .password-visibility svg{pointer-events:none} /* browse.css */ .browse-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0;color:var(--ink)} .browse-tabs button,.dictionary-alphabet button{min-height:44px;padding:9px 14px;border:1px solid var(--ink);border-radius:100px;background:var(--card);color:var(--ink);font:600 .82rem var(--sans)} .browse-tabs button:hover,.dictionary-alphabet button:hover{background:var(--mint)} .browse-tabs [aria-pressed="true"],.browse-tabs [aria-selected="true"],.dictionary-alphabet [aria-pressed="true"]{background:var(--mint);box-shadow:inset 0 -3px 0 var(--ink)} .browse-tabs :focus-visible,.dictionary-alphabet :focus-visible,.dictionary-entry :focus-visible,.bundle-browser :focus-visible{outline:3px solid var(--ink);outline-offset:4px} .dictionary-controls,.bundle-browser{color:var(--ink)} .dictionary-controls label{display:grid;gap:8px;font-weight:600} .dictionary-controls input,.bundle-browser select{padding:12px;border:1px solid var(--ink);background:var(--paper);color:var(--ink);border-radius:8px;min-height:44px} .dictionary-controls input::placeholder,.origin-explorer input::placeholder{color:var(--ink);opacity:1} .dictionary-alphabet{display:flex;flex-wrap:wrap;gap:5px;margin-top:18px} .dictionary-alphabet button{min-width:38px;padding:5px 9px;border-radius:7px} .dictionary-entry{padding:0!important;margin:0 0 10px;color:var(--ink);overflow:hidden} .dictionary-entry summary{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 20px;padding:16px 20px;cursor:pointer;list-style:none;min-height:85px} .dictionary-entry summary::-webkit-details-marker{display:none} .dictionary-entry summary:hover{background:var(--mint)} .dictionary-entry summary .dictionary-summary-top{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 14px} .dictionary-summary-word{font:600 1.45rem var(--serif)} .dictionary-summary-pos,.dictionary-band,.dictionary-summary-count{font-size:.75rem;color:var(--ink)} .dictionary-primary{margin:6px 0 0;font-size:.9rem;line-height:1.5;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .dictionary-expand{font-size:1.5rem;line-height:1;transition:transform .2s} .dictionary-entry[open] .dictionary-expand{transform:rotate(45deg)} .dictionary-detail{padding:0 20px 20px;border-top:1px solid var(--line);color:var(--ink)} .dictionary-detail li{margin:16px 0;line-height:1.6} .dictionary-detail p,.dictionary-detail small,.dictionary-detail blockquote,.dictionary-detail a,.dictionary-detail .muted,.dictionary-detail .word-structure{color:var(--ink)} .dictionary-detail blockquote{border-left:2px solid var(--ink);padding-left:14px;margin-left:0} .dictionary-pagination{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin:20px 0} .dictionary-related-story{padding:16px;border:1px solid var(--line);border-radius:10px;background:var(--paper);line-height:1.6} .dictionary-learning-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px} .dictionary-learning-actions button,.bundle-browser button.bundle-action{background:var(--mint);color:var(--ink);border:1px solid var(--ink);min-height:44px;padding:10px 16px;border-radius:8px;font-weight:650} .bundle-cover-card{display:grid;grid-template-columns:180px minmax(0,1fr);gap:24px;padding:24px;border:1px solid var(--line);border-radius:18px;background:var(--card);color:var(--ink);margin:0 0 20px} .bundle-cover-card img{width:100%;height:auto;border-radius:12px} .bundle-cover-card h2{font:600 1.9rem var(--serif);margin:5px 0 12px} .bundle-cover-card p,.bundle-browser .eyebrow,.bundle-browser small,.bundle-browser a,.bundle-browser label,.bundle-browser .muted{color:var(--ink)} .bundle-cover-card p{line-height:1.65} .bundle-meta{font:600 .8rem var(--sans)} .bundle-actions{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0} .bundle-import-progress{width:100%;height:12px;accent-color:var(--green);border:1px solid var(--ink);border-radius:8px;overflow:hidden;background:var(--paper)} .bundle-import-progress::-webkit-progress-bar{background:var(--paper)} .bundle-import-progress::-webkit-progress-value{background:var(--ink);transition:width .3s} .bundle-import-progress::-moz-progress-bar{background:var(--ink)} .bundle-learning{padding-top:12px;border-top:1px solid var(--line);line-height:1.65} .bundle-story-state{display:inline-block;padding:5px 10px;border:1px solid var(--ink);border-radius:30px;font-size:.75rem;margin:8px 0;background:var(--mint);color:var(--ink)} .bundle-personal-source{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);line-height:1.6;color:var(--ink)} .bundle-personal-source summary{cursor:pointer;min-height:44px;padding:10px 0} .bundle-personal-source dl>div,.word-structure dl>div{padding:10px;border:1px solid var(--line);border-radius:7px;margin:8px 0} .bundle-empty{padding:24px;background:var(--card);border:1px dashed var(--ink);border-radius:12px;line-height:1.6;color:var(--ink)} #page-mnemonics [hidden]{display:none!important} .word-part-divider{display:inline-block;padding:0 .15em;font-size:.6em;vertical-align:middle} .word-part{border:1px solid currentColor;border-radius:5px;padding:.04em .1em;margin:.06em!important} .word-part:hover,.word-part:focus-visible{background:var(--mint);color:var(--ink);outline-color:var(--ink)} @media(max-width:700px){.bundle-cover-card{grid-template-columns:1fr;padding:18px;gap:16px}.bundle-cover-card img{width:120px}.dictionary-entry summary{padding:14px}.dictionary-detail{padding:0 14px 14px}.dictionary-controls{padding:16px}.browse-tabs button{flex:1 1 auto;padding:10px}.dictionary-alphabet button{min-width:35px}.bundle-actions button{width:100%}} @media(prefers-reduced-motion:reduce){.bundle-import-progress::-webkit-progress-value,.dictionary-expand{transition:none}} .dictionary-roots,.dictionary-roots .root-card{background:var(--card);color:var(--ink)} .dictionary-roots p,.dictionary-roots small,.dictionary-roots a,.dictionary-roots button,.dictionary-roots label,.dictionary-controls p,.dictionary-pagination button,.bundle-browser button{color:var(--ink)} .dictionary-roots input,.dictionary-roots select{background:var(--paper);color:var(--ink);border:1px solid var(--ink)} .dictionary-pagination button{background:var(--card);border:1px solid var(--ink)} #page-dictionary .page-heading .lede,#page-mnemonics .page-heading .lede{color:var(--ink)} .dictionary-detail dt,.dictionary-detail dd{color:var(--ink)} .dictionary-roots input::placeholder{color:var(--ink);opacity:1} .bundle-browser button:disabled{opacity:1;cursor:not-allowed;border-style:dashed} /* Keep foreground and its surface in the same palette while themes change. */ #page-dictionary,#page-mnemonics{background:var(--paper);color:var(--ink);transition:none} #page-dictionary *,#page-mnemonics .bundle-browser *,.origin-explorer *{transition-property:transform,box-shadow,outline-offset} /* etymology.css */ /* Compact shared origin explorer and teaching content. */ .origin-explorer {margin:0 0 2rem;padding:clamp(1rem,3vw,2rem);border:1px solid var(--line);border-radius:20px;background:var(--card);color:var(--ink)} .origin-explorer-heading h2{margin:.4rem 0;font:600 clamp(1.5rem,3vw,2.2rem)/1.25 var(--serif)} .origin-explorer-heading p{line-height:1.6;max-width:70ch;margin:.4rem 0;color:var(--ink)} .origin-explorer .eyebrow,.origin-explorer small{color:var(--ink)} .origin-explorer-tools{display:flex;align-items:end;flex-wrap:wrap;gap:.8rem;margin:1.2rem 0} .origin-explorer-tools label{display:grid;gap:.4rem;font-size:.85rem;flex:1 1 220px} .origin-explorer-tools input,.origin-explorer-tools select{background:var(--paper);color:var(--ink);border:1px solid var(--ink);border-radius:9px;padding:.7rem .85rem;width:100%;min-height:44px} .origin-story-count{font-size:.85rem;color:var(--ink)} .origin-word-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:1rem} .origin-fine-print{margin:1rem 0 0;font-size:.8rem;line-height:1.6;color:var(--ink)} .origin-empty{grid-column:1/-1;padding:2rem;border:1px dashed currentColor;border-radius:12px} .origin-explorer :focus-visible,.practice-selectors :focus-visible{outline:3px solid var(--ink);outline-offset:4px} .origin-component-detail:not([hidden]){animation:origin-in .2s ease-out}.origin-coverage{line-height:1.8;font-size:.8rem;color:var(--ink);padding:.8rem 0;border-block:1px solid var(--line)} .origin-paging{display:flex;gap:1rem;align-items:center;justify-content:center;margin:1.25rem 0;color:var(--ink)} .origin-paging button{border:1px solid var(--ink);border-radius:8px;padding:.65rem .9rem;min-height:44px;background:var(--paper);color:var(--ink)} .origin-paging button:disabled{opacity:.65}.word-structure .origin-word-card{margin:1rem 0}.word-structure .origin-segmented-word{font-size:clamp(2rem,5vw,3.5rem)} @keyframes origin-in{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){.origin-component-detail:not([hidden]){animation:none}} /* One restrained teaching surface; detail notes remain optional. */ .origin-word-card{padding:18px;border:1px solid var(--line);border-radius:14px;box-shadow:none;min-width:0;background:var(--card)} .origin-word-heading{gap:10px;align-items:center;margin-bottom:10px}.origin-word-heading .eyebrow{font-size:.64rem;letter-spacing:.09em}.origin-source{font-size:.73rem;white-space:nowrap;color:var(--green);text-underline-offset:3px} .origin-segmented-word{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin:10px 0;font-family:var(--serif);line-height:1.15;font-size:1.6rem} .origin-segment,.origin-plain{display:inline-flex;flex-direction:column;gap:3px;align-items:center;min-width:0;padding:7px 10px;border-radius:9px;border:1px solid var(--line);background:var(--mint);color:var(--ink);font:inherit} .origin-segment:hover,.origin-segment:focus-visible{border-color:var(--green);outline:2px solid var(--green);outline-offset:2px;background:var(--card)} .origin-plain{border-color:transparent;background:transparent}.origin-part-kind{font:500 .59rem/1.25 var(--sans,system-ui);letter-spacing:.03em;color:var(--muted)} .origin-divider{font:400 .9rem var(--sans,system-ui);color:var(--muted)}.origin-components-summary{display:flex;flex-wrap:wrap;gap:6px 16px;margin:10px 0 12px;font-size:.8rem;line-height:1.5}.origin-word-card .origin-components-summary>div{display:block;padding:0;min-width:0;background:transparent;border:0;border-radius:0}.origin-components-summary dt{display:inline;font-weight:700}.origin-components-summary dd{display:inline;margin:0}.origin-components-summary dt::after{content:' → ';font-weight:400}.origin-components-summary small{font-size:.73rem;color:var(--muted)} .origin-history{margin:10px 0;color:var(--ink);font-size:.82rem;line-height:1.65}.origin-component-detail{border:0;border-left:2px solid var(--green);border-radius:0;box-shadow:none;padding:8px 12px;margin:10px 0;font-size:.8rem;line-height:1.5;background:transparent}.origin-component-detail p{margin:5px 0}.origin-component-detail[hidden]{display:none} .origin-meanings{padding-top:10px;border-top:1px solid var(--line);margin-top:12px}.origin-meanings section+section{margin-top:12px}.origin-definition{margin:0 0 5px;font-size:.86rem;line-height:1.6}.origin-definition small{font-size:.7rem;color:var(--muted);font-style:italic;margin-right:5px}.origin-example{margin:4px 0;font-size:.82rem;line-height:1.6;font-style:italic}.origin-example span{font-size:.65rem;font-style:normal;font-weight:700;letter-spacing:.05em;text-transform:uppercase;margin-right:5px} .origin-memory{border-top:1px solid var(--line);padding-top:12px;margin-top:12px}.origin-memory h4{font-size:.68rem;letter-spacing:.07em;text-transform:uppercase;margin:0 0 6px}.origin-narrative{font-size:.85rem;line-height:1.65;margin:0}.origin-recall{font-size:.79rem;margin:8px 0 0;color:var(--green)}.origin-memory>small,.origin-uncertainty{font-size:.73rem;color:var(--muted)}.origin-memory>small{display:block;margin-top:6px} .origin-whole-word{font:500 1.6rem/1.2 var(--serif);margin:8px 0}.origin-compact{padding:0;border:0;background:transparent;box-shadow:none;border-radius:0}.origin-compact .origin-history{margin:7px 0;font-size:.8rem}.origin-compact .origin-segmented-word{font-size:1.35rem;margin:8px 0}.origin-compact .origin-components-summary{font-size:.76rem;gap:4px 14px;margin:8px 0}.origin-compact .origin-components-summary small{display:none}.origin-inline-label{font-weight:700;color:var(--ink);margin-right:4px}.origin-whole.origin-compact .origin-history{font-size:.78rem;color:var(--ink)}.word-structure-whole{padding:0!important;border:0!important;background:transparent!important} @media(max-width:600px){.origin-word-card{padding:14px}.origin-compact{padding:0}.origin-segmented-word{font-size:1.35rem}.origin-segment,.origin-plain{padding:6px 8px}.origin-word-grid{grid-template-columns:minmax(0,1fr)}.origin-explorer-tools{gap:12px}.origin-story-search{max-width:100%}} .word-structure .origin-components-summary>div{padding:0;border:0;border-radius:0;margin:0;background:transparent}.word-structure .origin-components-summary dd{margin:0;display:inline}.word-structure .origin-components-summary dt{display:inline;text-transform:none}.word-structure:has(.origin-compact){padding:12px 0;margin:12px 0;border:0;border-top:1px solid var(--line);border-radius:0;background:transparent}.word-structure .origin-part-kind{display:block}.origin-segment,.origin-plain{min-height:44px;max-width:100%;overflow-wrap:anywhere}.origin-word-card{overflow-wrap:anywhere}.origin-part-text{text-decoration:none}.word-structure small.origin-part-kind{font-size:.58rem}.origin-components-summary dd small{display:inline} /* scheduling.css */ .scheduling-ratings {border:0;padding:0;margin:1.25rem 0;min-width:0;} .scheduling-ratings legend {font-weight:650;} .scheduling-ratings p {font-size:.8rem;line-height:1.5;} .scheduling-ratings [role=radio] {display:flex;flex:1;flex-direction:column;gap:.35rem;min-width:0;min-height:52px;background:var(--paper);color:inherit;border:1px solid var(--border);border-radius:10px;padding:.65rem .35rem;cursor:pointer;} .scheduling-ratings [role=radiogroup] {display:flex;gap:.5rem;} .scheduling-ratings [aria-checked=true] {border:2px solid var(--accent);background:var(--surface);} .scheduling-ratings :focus-visible {outline:2px solid currentColor;outline-offset:3px;} .scheduler-settings {margin:1rem 0;padding:1rem;} .scheduler-settings summary {cursor:pointer;font-weight:650;} .scheduler-settings form {display:grid;gap:1rem;margin-top:1rem;} .scheduler-settings label {display:grid;gap:.4rem;font-size:.85rem;} .scheduler-settings input {max-width:100%;min-width:0;min-height:44px;background:var(--paper);color:inherit;border:1px solid var(--border);border-radius:8px;padding:.5rem;} /* learning-results.css */ /* A compact receipt in the active theme's ink/paper palette. */ #result.result,#daily-result.result,#todays-three .result:has(.ww-grade-result){border:0;background:transparent;padding:0;color:var(--ink)} .ww-grade-result{display:grid;gap:1rem;text-align:left;overflow-wrap:anywhere;padding:clamp(1rem,2.4vw,1.5rem);border:1px solid var(--line);border-radius:16px;background:var(--card);color:var(--ink);animation:receipt-in .2s ease-out} .ww-grade-heading{display:flex;align-items:flex-start;gap:.7rem}.ww-grade-heading-copy{min-width:0;flex:1} .ww-grade-icon{display:grid;place-items:center;flex:0 0 30px;min-height:30px;border-radius:50%;background:var(--paper);color:var(--ink);font:600 1.15rem/1 var(--sans);box-shadow:inset 0 0 0 1px var(--line)} .ww-grade-result[data-outcome=correct] .ww-grade-icon{box-shadow:inset 0 -3px 0 #6a967d,inset 0 0 0 1px var(--line)} .ww-grade-result[data-outcome=partial] .ww-grade-icon,.ww-grade-result[data-outcome=alternate_valid_sense] .ww-grade-icon{box-shadow:inset 0 -3px 0 #b49963,inset 0 0 0 1px var(--line)} .ww-grade-result[data-outcome=incorrect] .ww-grade-icon{box-shadow:inset 0 -3px 0 #bb8d84,inset 0 0 0 1px var(--line)} .ww-grade-title-row{display:flex;align-items:baseline;flex-wrap:wrap;gap:.35rem .8rem} .ww-grade-result .result-heading{margin:0;font:600 clamp(1.3rem,2.4vw,1.65rem)/1.25 var(--serif);color:var(--ink);letter-spacing:-.015em} .ww-grade-xp{font:650 .85rem/1.5 var(--sans);white-space:normal;color:var(--ink)}.ww-grade-xp small{font:inherit;font-weight:450} .ww-grade-result .ww-grade-eyebrow{margin:.3rem 0 0;font:500 .72rem/1.5 var(--sans);color:var(--ink)} .ww-grade-result .ww-grade-progress{display:block;margin:.3rem 0 0;padding:0;border:0;font:.76rem/1.65 var(--sans);color:var(--ink)}.ww-grade-progress span{padding:0 .3rem} .ww-grade-no-progress{margin:.35rem 0 0;font-size:.8rem} .ww-grade-details{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:0;padding:.9rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .ww-grade-details>div{min-width:0;padding:0;background:transparent;border:0}.ww-grade-details>div+div{border-left:1px solid var(--line);padding-left:1rem} .ww-grade-details dt,.ww-result-teaching h4{display:block;margin:0 0 .35rem;font:650 .67rem/1.5 var(--sans);letter-spacing:.065em;text-transform:uppercase;color:var(--ink)} .ww-grade-details dd,.ww-grade-result .actual-definition{margin:0;font:450 .94rem/1.65 var(--sans);white-space:pre-wrap;color:var(--ink)} .ww-grade-judgment p{margin:0;line-height:1.65;font-size:.9rem;color:var(--ink)}.ww-grade-judgment p+p{margin-top:.5rem} .ww-grade-sense-note{font-size:.8rem!important;color:var(--ink)!important} .ww-grade-revision{margin-top:.8rem}.ww-grade-revision h4{margin:.3rem 0;font:650 .85rem var(--sans)} .ww-grade-revision dl{margin:0;display:grid;gap:.35rem}.ww-grade-revision dl>div{display:flex;gap:.5rem;font-size:.8rem}.ww-grade-revision dt{text-transform:capitalize;font-weight:600}.ww-grade-revision dd{margin:0} .ww-result-teaching{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:1.1rem;padding-top:1rem;border-top:1px solid var(--line)} .ww-result-context,.ww-result-memory{min-width:0}.ww-result-memory{padding-left:1.1rem;border-left:1px solid var(--line)} .ww-result-teaching p{font-size:.88rem;line-height:1.65;margin:.35rem 0;color:var(--ink)} .ww-grade-result p.example{margin:0;color:var(--ink);font:italic 1rem/1.7 var(--serif)} .ww-content-unavailable{color:var(--ink)!important;font-size:.78rem!important}.ww-result-structure{margin-top:.85rem} .ww-result-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.4rem .75rem;padding-top:.6rem;border-top:1px solid var(--line)} .ww-grade-method{font-size:.76rem;max-width:100%}.ww-grade-method summary{cursor:pointer;min-height:44px;display:flex;align-items:center;gap:.4rem;color:var(--ink)} .ww-grade-method summary:before{content:'+';font-weight:650}.ww-grade-method[open] summary:before{content:'−'}.ww-grade-method p{margin:.3rem 0;line-height:1.6} .ww-result-actions{display:flex;flex-wrap:wrap;gap:0 .8rem}.ww-grade-result .ww-result-actions button{min-height:44px;padding:.4rem 0;font-size:.75rem;color:var(--ink);background:transparent;border:0;box-shadow:none} .ww-grade-result :focus-visible{outline:3px solid var(--ink);outline-offset:3px} #answer-form textarea,#daily-answer-form textarea{border-radius:12px;line-height:1.65;min-height:120px;padding:.85rem 1rem} @keyframes receipt-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} @media(max-width:650px){.ww-grade-details,.ww-result-teaching{grid-template-columns:minmax(0,1fr)}.ww-grade-details{gap:.75rem}.ww-grade-details>div+div{border-left:0;padding:0}.ww-result-memory{padding:.8rem 0 0;border-left:0;border-top:1px solid var(--line)}.ww-grade-result{gap:.85rem}.ww-grade-heading{gap:.55rem}.ww-grade-progress span{padding:0 .1rem}.ww-result-footer{display:block}.ww-grade-revision dl>div{display:block}} @media(prefers-reduced-motion:reduce){.ww-grade-result{animation:none}} .ww-grade-result,.ww-grade-result *{user-select:text;-webkit-user-select:text} /* Theme changes must not fade receipt text through a low-contrast intermediate color. */ .ww-grade-result,.ww-grade-result *{transition-property:transform,box-shadow,outline-offset} /* guided-study.css */ .guided-study{padding:clamp(1.2rem,4vw,3rem);max-width:900px;margin:1rem auto 2rem}.guided-study h2{font-size:clamp(1.7rem,4vw,2.6rem);line-height:1.18;margin:1rem 0}.guided-study p{line-height:1.65}.guided-definition{font-size:1.35rem}.guided-pos{font-style:italic;opacity:.75}.guided-teaching{display:grid;gap:1rem;margin:1.5rem 0}.guided-teaching section{padding:1rem;border:1px solid var(--border-color,var(--border,#8885));border-radius:14px}.guided-counts{display:flex;flex-wrap:wrap;gap:.7rem;border:0;padding:1rem 0}.guided-counts [aria-pressed=true]{outline:2px solid currentColor;outline-offset:3px}.guided-study input[type=number]{display:block;width:8rem;margin:.5rem 0;padding:.8rem;font:inherit}.guided-estimate{font-weight:700;font-size:1.2rem}.guided-excluded-row{display:flex;align-items:center;justify-content:space-between;gap:.7rem;padding:1rem 0;border-bottom:1px solid #8884}.answer-counter{font-size:.85rem;text-align:right;margin:.4rem 0}.answer-counter[data-over=true]{color:var(--danger,#a22)}#excluded-words{padding:1.5rem;margin-top:1.5rem}#excluded-words-search{max-width:100%;padding:.7rem;font:inherit}.community-message header .ww-social-name{font-weight:700}.guided-study [role=alert]{overflow-wrap:anywhere}#guided-study[hidden],.practice-layout[hidden]{display:none!important}@media(max-width:600px){.guided-excluded-row{flex-wrap:wrap}.guided-study .functional-actions{display:flex;flex-wrap:wrap;gap:.8rem}.guided-counts .button{min-width:44px;min-height:44px}} .origin-components-summary{display:grid;gap:.65rem;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin:1rem 0}.origin-components-summary>div{padding:.8rem;border-radius:10px;background:#8881}.origin-components-summary dt{font-weight:700}.origin-components-summary dd{margin:.4rem 0 0;line-height:1.5}.origin-split-note{font-size:.9rem;opacity:.8}#study-content-editor{padding:1.5rem;margin-top:2rem}#study-content-editor label{display:block;margin:1rem 0}#study-content-editor textarea{width:100%;font:inherit}#study-content-editor textarea[name=origin]{font-family:monospace} .guided-study{max-width:900px;margin:0 auto 20px;padding:clamp(20px,3vw,32px)}.guided-study .guided-teaching{gap:18px;margin:20px 0}.guided-teaching section{padding:0;border:0;background:transparent}.guided-teaching h3{font-size:.69rem;letter-spacing:.07em;text-transform:uppercase;margin:0 0 7px;color:var(--muted)}.guided-teaching p{font-size:.9rem;line-height:1.7;margin:0}.guided-teaching .guided-recall{font-size:.8rem;margin-top:9px;color:var(--green)}.guided-study .word-structure{padding:16px 0;margin:16px 0;border:0;border-top:1px solid var(--line);background:transparent}.guided-study .functional-actions{margin-top:20px;gap:10px}.ww-recall-cue{font-size:.8rem;line-height:1.5;color:var(--green);margin-top:10px} @media(max-width:600px){.guided-study{padding:20px 16px}.guided-study .guided-teaching{grid-template-columns:1fr;gap:16px}} /* practice-experience.css */ /* Shared WordWise surfaces, focused around a single learning interaction. */ #page-practice{--practice-rail:158px;--practice-main:680px} #page-practice .page-heading{margin-bottom:20px;align-items:center} #page-practice .page-heading h1{font-size:clamp(30px,3.5vw,42px)} #page-practice .page-heading .lede{margin-top:7px} .practice-selectors{max-width:1080px;margin:0 auto 20px;padding:0 0 16px;display:flex;align-items:center;gap:12px 18px;flex-wrap:wrap;border:0;border-bottom:1px solid var(--line);background:transparent;box-shadow:none} .practice-difficulty-picker{display:inline-flex;align-items:center;gap:10px;flex:0 0 auto} .practice-difficulty-picker label{font-size:12px;font-weight:650;color:var(--muted)} #practice-difficulty{width:auto;min-width:144px;max-width:100%;min-height:40px;padding:8px 30px 8px 12px;border:1px solid var(--line);border-radius:24px;background:var(--card);color:var(--ink);font:600 13px var(--sans);cursor:pointer} .practice-recommendation{flex:1 1 260px;margin:0;color:var(--muted);font-size:12px;line-height:1.5} .practice-pool-note{width:100%;margin:0;color:var(--muted);font-size:11px;line-height:1.5} #page-practice .practice-layout{display:grid;grid-template-columns:minmax(130px,var(--practice-rail)) minmax(0,var(--practice-main)) minmax(130px,var(--practice-rail));gap:22px;align-items:start;max-width:1080px;margin-inline:auto} #page-practice .practice-card{min-width:0;min-height:0;padding:clamp(20px,2.5vw,32px);border:1px solid var(--line);background:var(--card);box-shadow:var(--shadow-soft);border-radius:16px} #page-practice .practice-card .word-wrap{padding:38px 0 30px} #page-practice .practice-card .word-wrap h2{font-size:clamp(42px,5.4vw,70px);line-height:1.08;letter-spacing:-.035em} #page-practice .practice-meta{gap:6px 10px;flex-wrap:wrap} #page-practice .practice-meta .target-sense{flex:1;font-size:10px;min-width:0} #page-practice .practice-meta .difficulty{font-size:9px} #page-practice #answer-form label{font-size:13px;line-height:1.5;margin-bottom:10px} #page-practice #answer{background:var(--paper,var(--card));font-size:15px;line-height:1.6;min-height:116px;padding:13px 15px} #page-practice .form-bottom{flex-wrap:wrap;gap:10px} #page-practice .practice-actions{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto} #page-practice .practice-actions .button{font-size:12px;min-height:42px;padding:10px 13px} #page-practice .practice-context,#page-practice .practice-aside{display:block;min-width:0;padding:18px 0;background:transparent;border:0;box-shadow:none} .practice-rail-heading{font:600 10px/1.5 var(--sans);letter-spacing:.09em;color:var(--muted);margin-bottom:16px} .practice-session-stats{margin:0} .practice-session-stats>div{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin:0;padding:9px 0;border-bottom:1px solid var(--line)} .practice-session-stats dt{font-size:11px;line-height:1.5;color:var(--muted)} .practice-session-stats dd{font:600 18px/1.3 var(--serif);margin:0;color:var(--ink)} .practice-context .session-track{height:3px;margin:14px 0 10px} .practice-rail-note{font-size:11px;line-height:1.7;color:var(--muted);margin:12px 0} .practice-context .text-button,.practice-next-up .text-button{display:block;font-size:11px;text-align:left;min-height:34px} .practice-task-panel{padding:0;margin:0;border:0;background:transparent} .practice-study-task{padding:0 0 14px;margin-bottom:14px;border-bottom:1px solid var(--line)} .practice-study-task>span{display:block;font-size:12px;line-height:1.5;font-weight:600;overflow-wrap:anywhere} .practice-study-task small{display:block;color:var(--muted);font-size:10px;margin:5px 0 8px} .practice-study-task progress{display:block;width:100%;height:4px;accent-color:var(--green);border:0} .practice-daily-link{padding:12px 0;border-top:1px solid var(--line);margin-top:16px} .practice-daily-link>span{font-size:12px;line-height:1.6;color:var(--ink)} .practice-empty{text-align:center;padding:8px 0 14px} .practice-empty-symbol{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;color:var(--green);background:var(--mint);font-size:20px} .practice-empty h3{font:600 23px/1.3 var(--serif);margin:15px 0 10px} .practice-empty p{font-size:13px;line-height:1.65;color:var(--muted);margin:0 auto 20px;max-width:430px} .practice-empty-actions{display:flex;gap:8px 14px;flex-wrap:wrap;justify-content:center} .practice-empty-actions .button{font-size:12px} #page-practice .button-next{position:static;z-index:3;min-height:46px;margin-top:18px;background:var(--green);color:var(--card);border:1px solid var(--green);box-shadow:0 3px 14px color-mix(in srgb,var(--ink) 12%,transparent);font-size:13px} #page-practice .button-next:hover{filter:brightness(1.1)} #practice-difficulty:focus-visible,#mnemonic-word:focus-visible,#mnemonic-word-search:focus-visible{outline:3px solid var(--green);outline-offset:3px} /* A searchable, persistent word list keeps the cue and its authoring controls together. */ #page-mnemonics .mnemonic-workspace{grid-template-columns:minmax(280px,.85fr) minmax(0,1.15fr);gap:28px;align-items:start} #page-mnemonics .mnemonic-composer{padding:24px;border-radius:14px;min-width:0} #page-mnemonics #mnemonic-word-search{width:100%;min-height:42px;padding:10px 12px;margin:2px 0 10px;border-radius:9px;border:1px solid var(--line);background:var(--card);color:var(--ink);font:13px var(--sans)} #page-mnemonics #mnemonic-word{display:block;width:100%;height:138px;padding:5px;min-height:0;border:1px solid var(--line);border-radius:9px;background:var(--card);color:var(--ink);font:13px/1.5 var(--sans);text-transform:none;overflow:auto;appearance:auto} #mnemonic-word option{padding:6px 9px;border-radius:5px} #mnemonic-word option:checked{background:var(--green);color:var(--card)} #mnemonic-selection-note{margin:8px 0 16px;font-size:11px;line-height:1.5;overflow-wrap:anywhere} .mnemonic-selected-cue{border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0;margin:0 0 20px} .mnemonic-selected-cue h3{font:600 24px/1.2 var(--serif);margin:8px 0 10px;text-transform:capitalize} .mnemonic-selected-cue p{font-size:13px;line-height:1.7;margin:0;color:var(--ink)} .mnemonic-selected-cue small{display:block;color:var(--green);font-size:12px;line-height:1.6;margin:10px 0 0;font-weight:600} #page-mnemonics .mnemonic-library-heading h2{font-size:24px} #page-mnemonics .mnemonic-item{padding:18px 0;border-radius:0;border-width:0 0 1px;box-shadow:none;background:transparent} #page-mnemonics .mnemonic-item-copy p{font-size:14px;line-height:1.65} @media(min-width:1440px){#page-practice{--practice-rail:170px}#page-practice .practice-layout{gap:26px}} @media(max-width:1190px){#page-practice .practice-layout{grid-template-columns:minmax(0,1fr);max-width:740px;gap:14px}.practice-selectors{max-width:740px}#page-practice .practice-context{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding:0 4px 4px;grid-row:1}.practice-context .practice-rail-heading,.practice-context .session-track,.practice-context>.text-button,.practice-context>.practice-rail-note{display:none}.practice-session-stats{display:flex;gap:22px;flex-wrap:wrap}.practice-session-stats>div{padding:0;border:0;gap:8px}.practice-session-stats dd{font-size:15px}.practice-session-stats dt{font-size:10px}#page-practice .practice-aside{display:none}.practice-card{grid-row:2}} @media(max-width:600px){#page-practice .page-heading{align-items:flex-start;margin-bottom:16px}#page-practice .page-heading .lede{max-width:240px;font-size:12px}.practice-session-meta{flex:0 0 auto;gap:5px}.practice-selectors{gap:9px;margin-bottom:16px;padding-bottom:14px}.practice-recommendation{flex-basis:100%;font-size:11px}.practice-pool-note{font-size:10px}.practice-session-stats{gap:9px 15px}.practice-session-stats>div{gap:6px}.practice-session-stats dt{font-size:10px}#page-practice .practice-card{padding:19px 16px;border-radius:12px}#page-practice .practice-card .word-wrap{padding:30px 0 24px}#page-practice .practice-card .word-wrap h2{font-size:clamp(36px,10.5vw,60px)}#page-practice .form-bottom{flex-direction:column;align-items:stretch}#page-practice .practice-actions{margin:0;display:grid;grid-template-columns:1fr 1.25fr}#page-practice .form-bottom .keyboard-hint{align-self:center;order:2}#page-practice .practice-actions .button{width:100%;padding:10px 8px}.practice-empty-actions .button{flex:1 1 150px}#page-practice .button-next{position:static;margin-top:14px}#page-mnemonics .mnemonic-workspace{grid-template-columns:minmax(0,1fr);gap:28px}#page-mnemonics .mnemonic-composer{padding:18px}#page-mnemonics #mnemonic-word{height:126px}} @media(prefers-reduced-motion:reduce){#page-practice *,#page-mnemonics *{scroll-behavior:auto}} /* Once checked, the answer comparison replaces the disabled response editor. */ #page-practice .practice-card:has(#result[data-grade="correct"]:not([hidden]),#result[data-grade="partial"]:not([hidden]),#result[data-grade="incorrect"]:not([hidden]),#result[data-grade="alternate_valid_sense"]:not([hidden])) #answer-form{display:none} #page-practice .practice-card:has(#result:not([hidden])) .word-wrap{padding:20px 0 15px} #page-practice .practice-card:has(#result:not([hidden])) .word-wrap h2{font-size:clamp(32px,4vw,48px)} #page-practice .practice-card:has(#result:not([hidden])) .word-rule{display:none} /* Practice opens at the interaction, with the session clock beside a quiet title. */ #page-practice[data-page-mood]>.page-heading{min-height:0;padding:4px 0 18px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;box-shadow:none;overflow:visible;gap:18px} #page-practice[data-page-mood]>.page-heading:before,#page-practice>.page-heading .page-scene{display:none} #page-practice[data-page-mood]>.page-heading:after{left:0;bottom:-1px;width:44px;height:3px} #page-practice .practice-session-meta{background:transparent;border:0;padding:4px 0 4px 12px;flex:0 0 auto} @media(max-width:600px){#page-practice[data-page-mood]>.page-heading{gap:12px;padding-bottom:16px}#page-practice[data-page-mood]>.page-heading h1{font-size:28px;margin:10px 0 7px}#page-practice .practice-session-meta{max-width:96px}.practice-session-meta .practice-round{white-space:normal;text-align:right}} /* Secondary copy needs the same readable contrast in every palette. */ #page-practice,#page-mnemonics{--muted:color-mix(in srgb,var(--ink) 76%,var(--card))} #page-practice .practice-session-meta time{color:var(--ink)} #page-practice .button-primary,#page-mnemonics .button-primary{color:var(--card)} #page-practice .button-primary:hover,#page-mnemonics .button-primary:hover{background:var(--green);color:var(--card);filter:brightness(1.06)} #page-practice .button-primary,#page-mnemonics .button-primary{background:var(--green);border-color:var(--green)} @media(max-width:600px){#page-practice .practice-meta{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 10px}#page-practice .practice-meta .part-label{grid-column:1;grid-row:1}#page-practice .practice-meta .difficulty{grid-column:2;grid-row:1;justify-self:end}#page-practice .practice-meta .target-sense{grid-column:1;grid-row:2;max-width:100%;width:max-content;min-width:0;font-size:10px;line-height:1.5;overflow-wrap:normal;word-break:normal}#page-practice .practice-meta .status-tag{grid-column:2;grid-row:2;justify-self:end}} /* signup-avatar.css */ .signup-avatar-picker{margin:1rem 0}.signup-avatar-picker[hidden],.signup-avatar-gallery[hidden]{display:none!important}.signup-avatar-selected{display:flex;align-items:center;gap:1rem}.signup-avatar-selected .avatar-art{width:96px;height:96px}.signup-avatar-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem;padding:.75rem 0}.signup-avatar-choice{display:flex;flex-direction:column;align-items:center;gap:.4rem;padding:.65rem;border:2px solid transparent;border-radius:14px;background:var(--mint,#eef3eb);color:var(--ink,#1d2824);cursor:pointer}.signup-avatar-choice .avatar-art{width:64px;height:64px}.signup-avatar-choice[aria-pressed=true]{border-color:var(--green,#477b55)}.signup-avatar-choice:focus-visible{outline:3px solid var(--green,#477b55);outline-offset:2px}.signup-avatar-selected button{white-space:normal}@media(max-width:400px){.signup-avatar-choice .avatar-art{width:52px;height:52px}.signup-avatar-selected .avatar-art{width:80px;height:80px}} }