@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root { --paper:#f5f4ee; --ink:#20231f; --muted:#777b73; --line:#dddcd4; --green:#2f594a; --green-2:#d8e5dc; --rust:#c95e3d; --warm:#e9e1d1; --white:#fffefa; --shadow:0 16px 40px rgba(44,48,40,.08); }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Manrope, system-ui, sans-serif; -webkit-font-smoothing:antialiased; }
button, input, textarea { font:inherit; }
button { cursor:pointer; }
.app-shell { min-height:100vh; display:flex; }
.sidebar { width:248px; min-height:100vh; border-right:1px solid var(--line); padding:30px 22px 22px; display:flex; flex-direction:column; background:rgba(255,254,250,.48); position:fixed; inset:0 auto 0 0; z-index:4; }
.brand { display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:-.04em; font-size:21px; }
.brand-mark { width:29px; height:29px; display:grid; place-items:center; border-radius:50%; background:var(--green); color:#fff; font-family:Georgia,serif; font-size:20px; font-style:italic; }
.brand-sub { color:var(--muted); font-size:11px; margin:8px 0 38px 39px; }
.nav-list { display:grid; gap:5px; }
.nav-item { border:0; background:transparent; color:#676b63; display:flex; align-items:center; gap:12px; text-align:left; width:100%; padding:12px 10px; border-radius:10px; font-size:13px; transition:.2s; }
.nav-item:hover { background:#ebeae2; color:var(--ink); }
.nav-item.active { background:var(--green); color:#fff; }
.nav-icon { width:20px; text-align:center; font-family:Georgia,serif; font-size:15px; opacity:.9; }
.nav-count { margin-left:auto; min-width:22px; text-align:center; padding:3px 6px; border-radius:20px; font-size:10px; background:var(--rust); color:#fff; }
.sidebar-footer { margin-top:auto; }
.focus-note { border-top:1px solid var(--line); padding-top:16px; display:grid; gap:8px; }
.eyebrow { font:500 10px 'DM Mono',monospace; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); }
.focus-note strong { font-size:12px; line-height:1.4; }
.progress-line { height:3px; display:block; background:#d9d8d0; border-radius:3px; overflow:hidden; }
.progress-line i { display:block; height:100%; width:20%; background:var(--rust); transition:width .3s; }
.ghost-button { background:none; border:0; color:var(--muted); padding:20px 0 0; font-size:11px; text-align:left; }
.main-content { width:calc(100% - 248px); margin-left:248px; min-height:100vh; }
.topbar { height:76px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding:0 46px; }
.breadcrumb { display:flex; align-items:center; gap:10px; font-size:12px; color:var(--muted); }
.breadcrumb b { font-weight:400; color:#b1b2aa; }.breadcrumb strong { color:var(--ink); font-weight:600; }
.top-actions { display:flex; align-items:center; gap:18px; }.date-label { color:var(--muted); font:11px 'DM Mono',monospace; text-transform:uppercase; letter-spacing:.05em; }
.avatar { border:1px solid var(--line); background:var(--white); border-radius:50%; width:34px; height:34px; color:var(--green); font-size:11px; font-weight:700; }
.mobile-menu { display:none; border:0; background:transparent; font-size:22px; }
.view { display:none; max-width:1240px; padding:42px 46px 70px; margin:auto; }.active-view { display:block; animation:fade .35s ease both; }
@keyframes fade { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
.kicker { font:500 11px 'DM Mono',monospace; color:var(--rust); text-transform:uppercase; letter-spacing:.08em; margin:0 0 12px; }.display-title { font-size:clamp(31px,4vw,56px); line-height:1; letter-spacing:-.07em; margin:0; max-width:680px; }.intro { max-width:570px; color:var(--muted); line-height:1.7; font-size:14px; margin:15px 0 0; }
.section-head { display:flex; align-items:end; justify-content:space-between; gap:20px; margin:40px 0 18px; }.section-head h2 { margin:0; font-size:20px; letter-spacing:-.04em; }.section-head p { margin:0; font-size:12px; color:var(--muted); }
.today-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:20px; margin-top:36px; }.today-main { background:var(--green); color:#fff; padding:30px; min-height:255px; position:relative; overflow:hidden; border-radius:3px; }.today-main:after { content:'ä'; position:absolute; right:24px; bottom:-42px; font:190px Georgia,serif; color:rgba(255,255,255,.12); }.today-main .eyebrow { color:#a9c6b4; position:relative; z-index:1; }.today-main h2 { font-size:29px; letter-spacing:-.06em; line-height:1.1; max-width:390px; margin:14px 0 25px; position:relative; z-index:1; }.today-main p { color:#cbdacf; font-size:13px; position:relative; z-index:1; }.primary-button { background:var(--rust); color:#fff; border:0; border-radius:5px; padding:12px 17px; font-size:12px; font-weight:700; transition:.2s; }.primary-button:hover { transform:translateY(-2px); filter:saturate(1.1); }.today-main .primary-button { position:relative; z-index:1; }
.stat-column { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); }.stat-block { padding:22px; background:var(--white); min-height:126px; }.stat-number { font-size:34px; letter-spacing:-.07em; margin:10px 0 3px; }.stat-label { color:var(--muted); font-size:11px; }
.task-list { border-top:1px solid var(--line); }.task-row { display:grid; grid-template-columns:32px 1fr auto; gap:15px; align-items:center; padding:18px 0; border-bottom:1px solid var(--line); }.check { width:22px; height:22px; border:1px solid #c4c6bd; border-radius:50%; background:transparent; color:#fff; display:grid; place-items:center; font-size:12px; }.check.done { background:var(--green); border-color:var(--green); }.task-title { font-size:13px; font-weight:700; }.task-meta { color:var(--muted); font-size:11px; margin-top:4px; }.tag { font:500 10px 'DM Mono',monospace; color:var(--green); background:var(--green-2); border-radius:20px; padding:6px 9px; }
.lower-grid { display:grid; grid-template-columns:1fr 1fr; gap:38px; }.focus-list { display:grid; gap:0; border-top:1px solid var(--line); }.focus-item { padding:14px 0; display:flex; justify-content:space-between; border-bottom:1px solid var(--line); font-size:12px; }.focus-item span { color:var(--muted); }
.streak { background:var(--warm); padding:24px; min-height:155px; }.streak h3 { margin:12px 0 6px; font-size:20px; letter-spacing:-.04em; }.streak p { margin:0; color:#6d6a61; font-size:12px; line-height:1.6; }
.program-head { display:flex; justify-content:space-between; align-items:end; gap:20px; }.program-overview { display:flex; gap:30px; align-items:center; }.big-progress { width:150px; height:7px; border-radius:5px; background:#dcddd6; overflow:hidden; }.big-progress i { display:block; height:100%; background:var(--rust); width:0; transition:width .35s; }.program-grid { margin-top:36px; display:grid; gap:1px; background:var(--line); border:1px solid var(--line); }.week-row { background:var(--white); display:grid; grid-template-columns:110px 1fr 170px 110px; gap:20px; align-items:center; padding:20px; }.week-row.current { background:#edf1e9; }.week-number { font:500 11px 'DM Mono',monospace; color:var(--rust); text-transform:uppercase; }.week-topic { font-weight:700; font-size:14px; }.week-details { color:var(--muted); font-size:11px; margin-top:6px; }.week-status { font-size:11px; color:var(--muted); }.week-button { justify-self:end; background:none; border:1px solid var(--line); padding:9px 12px; font-size:11px; border-radius:4px; }.week-button:hover { border-color:var(--green); color:var(--green); }
.study-panel { margin-top:28px; border-top:1px solid var(--ink); }.study-day { padding:18px 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:100px 1fr 100px; gap:20px; align-items:start; }.study-day h3 { margin:0; font-size:12px; }.study-day p { margin:0; font-size:13px; line-height:1.5; }.study-day small { text-align:right; color:var(--muted); font:10px 'DM Mono',monospace; }
.exercise-overview { margin-top:32px; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); }.exercise-overview > div { background:var(--white); padding:20px 22px; display:grid; gap:7px; }.exercise-overview strong { font-size:22px; letter-spacing:-.05em; }.exercise-overview-note { color:var(--muted); font-size:11px; }.exercise-list { display:grid; gap:24px; margin-top:34px; }.exercise-lesson { background:var(--white); border-top:3px solid var(--green); padding:26px 28px 24px; }.exercise-lesson-header { display:flex; justify-content:space-between; gap:24px; align-items:start; }.lesson-label { color:var(--rust); font:500 10px 'DM Mono',monospace; text-transform:uppercase; letter-spacing:.08em; }.exercise-lesson h2 { margin:10px 0 7px; font-size:25px; letter-spacing:-.06em; }.exercise-lesson-header p { margin:0; color:var(--muted); font-size:12px; line-height:1.55; max-width:650px; }.exercise-score { display:grid; justify-items:end; gap:5px; min-width:86px; }.exercise-score strong { color:var(--green); font:500 25px 'DM Mono',monospace; }.exercise-score span { color:var(--muted); font-size:10px; white-space:nowrap; }.exercise-source { border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:20px; padding:11px 0; display:flex; gap:10px; color:var(--muted); font:10px 'DM Mono',monospace; text-transform:uppercase; letter-spacing:.05em; }.exercise-questions { display:grid; grid-template-columns:1fr 1fr; gap:1px 28px; }.exercise-question { padding:22px 0 18px; border-bottom:1px solid var(--line); }.exercise-question.is-correct { border-bottom-color:#a7c5ad; }.exercise-question.is-incorrect { border-bottom-color:#d9aa9c; }.exercise-question-head { display:grid; grid-template-columns:32px 1fr; gap:12px; align-items:start; }.exercise-number { color:var(--rust); font:500 11px 'DM Mono',monospace; padding-top:2px; }.exercise-question p { margin:0; font-size:13px; line-height:1.45; }.exercise-feedback { display:inline-block; margin-top:7px; font-size:10px; }.exercise-feedback.is-correct { color:var(--green); }.exercise-feedback.is-incorrect { color:var(--rust); }.exercise-feedback.is-pending { color:var(--muted); }.exercise-options { display:grid; gap:7px; margin:15px 0 8px 44px; }.exercise-option { display:flex; align-items:center; gap:9px; font-size:12px; cursor:pointer; }.exercise-option input { accent-color:var(--green); }.exercise-option span { color:var(--muted); font:500 10px 'DM Mono',monospace; }.exercise-option b { font-weight:600; }.exercise-input { display:block; width:calc(100% - 44px); margin:15px 0 8px 44px; border:0; border-bottom:1px solid var(--line); background:transparent; padding:9px 0; outline:none; color:var(--ink); font-size:13px; }.exercise-input:focus { border-bottom-color:var(--green); }.exercise-question small { display:block; margin-left:44px; color:var(--muted); font-size:10px; line-height:1.45; }.exercise-actions { display:flex; align-items:center; gap:9px; padding-top:22px; }.secondary-button { border:1px solid var(--line); border-radius:5px; background:transparent; color:var(--muted); padding:11px 15px; font-size:11px; }.secondary-button:hover { border-color:var(--green); color:var(--green); }.exercise-future { margin:22px 0 0; color:var(--muted); font-size:12px; }.exercise-future span { color:var(--rust); font:500 10px 'DM Mono',monospace; text-transform:uppercase; margin-right:8px; }
.exercise-table { margin:15px 0 8px 44px; border-top:1px solid var(--line); }.exercise-table-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; align-items:center; padding:9px 0; border-bottom:1px solid var(--line); }.exercise-table-head { color:var(--muted); font:500 9px 'DM Mono',monospace; text-transform:uppercase; letter-spacing:.06em; }.exercise-table-row > span { font-size:12px; }.exercise-table-row .exercise-input { width:100%; margin:0; }.exercise-matching { display:grid; gap:8px; margin:15px 0 8px 44px; }.exercise-match-row { display:grid; grid-template-columns:1fr 18px 1fr; gap:8px; align-items:center; font-size:12px; }.exercise-match-row span { color:var(--muted); text-align:center; }.exercise-match-row select { border:1px solid var(--line); background:var(--white); color:var(--ink); padding:8px 9px; font-size:11px; outline:none; }.exercise-match-row select:focus { border-color:var(--green); }.exercise-fill-list { display:grid; gap:10px; margin:15px 0 8px 44px; }.exercise-fill-list label { display:grid; grid-template-columns:1fr 88px; gap:8px; align-items:center; font-size:12px; }.exercise-fill-list label small { color:var(--muted); text-align:right; font:10px 'DM Mono',monospace; }.exercise-fill-list .exercise-input { grid-column:1 / -1; margin:0; width:100%; }
.lab-header { display:flex; justify-content:space-between; align-items:end; gap:20px; }.lab-header .primary-button { white-space:nowrap; }.lab-layout { display:grid; grid-template-columns:1.1fr .9fr; gap:20px; margin-top:34px; }.flashcard { background:var(--green); color:#fff; min-height:315px; padding:30px; display:flex; flex-direction:column; justify-content:space-between; border-radius:2px; }.flashcard .eyebrow { color:#a9c6b4; }.flashcard-word { font-size:50px; letter-spacing:-.07em; margin-top:30px; }.flashcard-trans { font-size:14px; color:#cfdfd2; margin-top:4px; }.flashcard-example { color:#fff; font-family:Georgia,serif; font-size:18px; line-height:1.4; max-width:440px; margin:20px 0; }.flash-actions { display:flex; gap:8px; }.flash-actions button { border:1px solid rgba(255,255,255,.3); background:transparent; color:#fff; padding:10px 14px; border-radius:4px; font-size:11px; }.flash-actions button.good { background:#fff; color:var(--green); }.word-list { border-top:1px solid var(--line); max-height:315px; overflow:auto; }.word-row { display:grid; grid-template-columns:1fr 1fr 28px; align-items:center; gap:12px; padding:15px 0; border-bottom:1px solid var(--line); font-size:12px; }.word-row em { color:var(--muted); font-size:11px; }.word-row button { border:0; background:none; color:var(--rust); }.input-row { display:flex; gap:8px; margin-top:18px; }.input, .textarea { border:1px solid var(--line); background:var(--white); padding:12px 13px; outline:none; width:100%; color:var(--ink); }.input:focus, .textarea:focus { border-color:var(--green); }.textarea { min-height:180px; resize:vertical; line-height:1.6; }
.vocab-toolbar { margin-top:28px; display:flex; justify-content:space-between; align-items:center; gap:16px; border-bottom:1px solid var(--line); padding-bottom:12px; }.level-tabs { display:flex; gap:5px; }.level-tab { border:0; background:transparent; color:var(--muted); padding:8px 11px; font-size:11px; border-radius:4px; }.level-tab span { font:10px 'DM Mono',monospace; margin-left:4px; opacity:.7; }.level-tab.active { background:var(--green); color:#fff; }.search-input { border:0; border-bottom:1px solid var(--line); background:transparent; outline:0; padding:8px 0; width:220px; font-size:12px; color:var(--ink); }.search-input:focus { border-color:var(--green); }
.resource-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:34px; }.resource { background:var(--white); padding:22px; min-height:190px; display:flex; flex-direction:column; }.resource-type { font:10px 'DM Mono',monospace; color:var(--rust); text-transform:uppercase; }.resource h3 { margin:12px 0 8px; font-size:16px; letter-spacing:-.04em; }.resource p { color:var(--muted); font-size:12px; line-height:1.6; margin:0 0 16px; }.resource a { color:var(--green); font-size:11px; margin-top:auto; text-decoration:none; font-weight:700; }.custom-list { margin-top:20px; border-top:1px solid var(--line); }.custom-resource { display:flex; justify-content:space-between; gap:15px; border-bottom:1px solid var(--line); padding:14px 0; font-size:12px; }.custom-resource a { color:var(--green); }.delete { background:none; border:0; color:var(--muted); }
.writing-grid, .speaking-grid { display:grid; grid-template-columns:1fr .7fr; gap:26px; margin-top:34px; }.editor { background:var(--white); border-top:3px solid var(--rust); padding:23px; }.editor label { display:block; font-size:11px; color:var(--muted); margin-bottom:9px; }.editor .textarea { min-height:330px; border:0; border-top:1px solid var(--line); padding:16px 0; background:transparent; }.editor-footer { display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--line); padding-top:14px; color:var(--muted); font-size:11px; }.prompt-list { border-top:1px solid var(--line); }.prompt { padding:15px 0; border-bottom:1px solid var(--line); font-size:12px; line-height:1.5; }.prompt strong { display:block; margin-bottom:5px; }.prompt span { color:var(--muted); }.saved-note { color:var(--green); font-size:11px; margin-top:10px; }
.timer { background:var(--green); color:#fff; min-height:240px; padding:28px; display:flex; flex-direction:column; justify-content:space-between; }.timer-value { font:500 54px 'DM Mono',monospace; letter-spacing:-.08em; }.timer-actions { display:flex; gap:8px; }.timer-actions button { border:1px solid rgba(255,255,255,.35); background:transparent; color:#fff; padding:10px 14px; border-radius:4px; font-size:11px; }.timer-actions button:first-child { background:#fff; color:var(--green); }.note-list { display:grid; gap:1px; background:var(--line); border:1px solid var(--line); margin-top:34px; }.note-card { background:var(--white); padding:18px; }.note-card h3 { margin:0 0 7px; font-size:13px; }.note-card p { margin:0; color:var(--muted); font-size:12px; white-space:pre-wrap; line-height:1.6; }.note-card footer { margin-top:15px; color:#a0a29b; font:10px 'DM Mono',monospace; }
.toast { position:fixed; right:24px; bottom:24px; background:var(--ink); color:#fff; padding:12px 16px; border-radius:5px; font-size:12px; opacity:0; transform:translateY(10px); pointer-events:none; transition:.25s; z-index:10; }.toast.show { opacity:1; transform:none; }
@media(max-width:900px){ .sidebar{transform:translateX(-100%); transition:.25s; box-shadow:var(--shadow)} .sidebar.open{transform:none}.main-content{width:100%;margin-left:0}.topbar{padding:0 22px}.mobile-menu{display:block}.view{padding:32px 22px 60px}.today-grid,.lab-layout,.writing-grid,.speaking-grid{grid-template-columns:1fr}.lower-grid{grid-template-columns:1fr}.resource-grid{grid-template-columns:1fr}.week-row{grid-template-columns:70px 1fr 90px;}.week-status{display:none}.week-button{grid-column:3;grid-row:1}.program-overview{gap:14px}.date-label{display:none}.exercise-questions{grid-template-columns:1fr}.exercise-overview{grid-template-columns:1fr 1fr}.exercise-overview > div:first-child{grid-column:1 / -1} }
@media(max-width:560px){ .display-title{font-size:39px}.today-main{padding:24px}.today-main h2{font-size:25px}.stat-column{grid-template-columns:1fr 1fr}.study-day{grid-template-columns:70px 1fr}.study-day small{display:none}.flashcard-word{font-size:43px}.week-row{grid-template-columns:1fr 70px;padding:16px}.week-number{grid-column:1}.week-button{grid-column:2;grid-row:1}.week-topic{grid-column:1 / -1}.topbar{height:64px}.exercise-overview{grid-template-columns:1fr}.exercise-overview > div:first-child{grid-column:auto}.exercise-lesson{padding:22px 18px}.exercise-lesson-header{display:block}.exercise-score{justify-items:start; margin-top:18px}.exercise-source{flex-wrap:wrap}.exercise-actions{align-items:stretch; flex-direction:column}.exercise-actions button{width:100%}.exercise-options,.exercise-input,.exercise-table,.exercise-matching,.exercise-fill-list{margin-left:0; width:100%}.exercise-table-row{gap:6px}.exercise-question small{margin-left:0} }