:root { --ink:#18343c; --muted:#667a7e; --paper:#f8f7f1; --line:#dce4df; --coral:#ff9887; --yellow:#f9d867; --blue:#94d7e6; --mint:#c7ebce; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font-family:"DM Sans",sans-serif; } .shell { max-width:1360px; min-height:100vh; margin:auto; display:flex; background:#fffefa; box-shadow:0 0 90px #1b43410b; }.sidebar { width:260px; flex:none; position:sticky; top:0; height:100vh; display:flex; flex-direction:column; padding:38px 26px 30px; background:var(--ink); color:#eef7f3; }.brand { color:#fff; text-decoration:none; font-family:Fraunces,serif; font-size:19px; font-weight:700; letter-spacing:-.03em; }.brand span { color:var(--yellow); } nav { display:grid; gap:7px; margin-top:66px; }.nav-link { color:#aabdbc; text-decoration:none; padding:11px 13px; border-radius:9px; font-size:14px; transition:.2s; }.nav-link:hover,.nav-link.active { color:var(--ink); background:#f6f4ec; font-weight:700; }.sidebar-note { margin-top:auto; color:#9bb2ae; font-size:12px; line-height:1.7; }.content { flex:1; min-width:0; }.page { padding:72px 9%; border-bottom:1px solid var(--line); scroll-margin-top:20px; }.hero { position:relative; overflow:hidden; min-height:615px; padding-top:86px; background:linear-gradient(135deg,#fffefa 58%,#d9f0e2 58%); }.hero:after { content:"✦"; position:absolute; right:8%; bottom:55px; color:#fffefa; font-size:175px; line-height:1; transform:rotate(15deg); }.eyebrow { margin:0 0 14px; color:#d96555; font-size:11px; letter-spacing:.14em; font-weight:700; } h1,h2,h3,p { margin-top:0; } h1,h2 { font-family:Fraunces,serif; } h1 { max-width:650px; font-size:clamp(46px,6vw,76px); letter-spacing:-.06em; line-height:.98; margin-bottom:22px; position:relative; z-index:1; } h2 { font-size:34px; letter-spacing:-.045em; margin:0; } h3 { font-size:16px; }.intro { position:relative; z-index:1; max-width:490px; color:var(--muted); font-size:16px; line-height:1.7; margin-bottom:40px; }.progress-card { position:relative; z-index:1; display:grid; grid-template-columns:1fr auto; gap:10px; max-width:570px; padding:20px 22px; border:1px solid #cbe1d3; border-radius:13px; background:#fafff8cc; box-shadow:0 8px 22px #23604a0d; }.card-label { margin:0 0 4px; font-size:12px; color:var(--muted); }.progress-card strong { font-size:16px; }.progress-card span { color:#cd5f50; font-weight:700; }.progress-track { height:7px; grid-column:1/-1; overflow:hidden; border-radius:99px; background:#dce9df; }.progress-fill { width:20%; height:100%; border-radius:inherit; background:var(--coral); }.section-heading { display:flex; justify-content:space-between; align-items:end; gap:18px; margin:70px 0 23px; }.section-heading > span { color:var(--muted); font-size:13px; }.section-heading.large { margin-top:0; align-items:center; }.learning-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }.learning-card { min-height:198px; padding:22px; border-radius:15px; box-shadow:0 8px 16px #1d40330b; }.learning-card span,.words-grid article span { font-size:11px; font-weight:700; letter-spacing:.08em; opacity:.6; }.learning-card h3 { margin:48px 0 9px; font-family:Fraunces,serif; font-size:20px; letter-spacing:-.03em; }.learning-card p { margin:0; font-size:13px; line-height:1.55; }.coral { background:var(--coral); }.yellow { background:var(--yellow); }.blue { background:var(--blue); }.add-button,.save-button { border:0; border-radius:8px; padding:10px 14px; background:var(--ink); color:white; font:700 13px "DM Sans",sans-serif; cursor:pointer; }.notes-list { border-top:1px solid var(--line); }.notes-list details { border-bottom:1px solid var(--line); }.notes-list summary { padding:23px 4px; display:flex; justify-content:space-between; align-items:center; cursor:pointer; list-style:none; }.notes-list summary::-webkit-details-marker { display:none; }.notes-list summary small { display:block; margin-top:5px; color:var(--muted); font-size:12px; font-weight:400; }.notes-list summary i { font-size:22px; font-style:normal; color:#dc7161; transition:.2s; }.notes-list details[open] summary i { transform:rotate(45deg); }.meeting-body { max-width:690px; padding:0 4px 13px; color:var(--muted); font-size:14px; line-height:1.7; }.meeting-body p { margin:0 0 16px; }.calendar-description { margin:9px 0 0; color:var(--muted); font-size:14px; }.calendar-card { max-width:710px; margin-top:28px; overflow:hidden; border:1px solid var(--line); border-radius:14px; }.calendar-week,.calendar-days { display:grid; grid-template-columns:repeat(5,1fr); }.calendar-week { background:#e8f2ec; color:#57746a; font-size:12px; font-weight:700; }.calendar-week span { padding:13px; }.calendar-days div { min-height:112px; padding:14px; border-right:1px solid var(--line); }.calendar-days div:last-child { border:0; }.calendar-days b { font-size:14px; }.calendar-days em { display:block; margin-top:17px; font-size:11px; font-style:normal; line-height:1.3; }.event { padding:4px 6px; border-radius:5px; }.coral-dot { background:#ffe3de; }.upcoming { max-width:650px; margin-top:38px; }.upcoming h3 { margin-bottom:12px; font-family:Fraunces,serif; font-size:21px; }.upcoming p { display:flex; padding:12px 0; margin:0; border-bottom:1px solid var(--line); font-size:14px; }.upcoming b { width:115px; color:#d76555; }.upcoming span { color:var(--muted); }.words-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }.words-grid article { min-height:180px; padding:24px; border:1px solid var(--line); border-radius:13px; background:#fffefa; transition:transform .2s, box-shadow .2s; }.words-grid article:hover { transform:translateY(-3px); box-shadow:0 10px 23px #1f493415; }.words-grid h3 { margin:42px 0 8px; font-family:Fraunces,serif; font-size:23px; letter-spacing:-.04em; }.words-grid p { margin:0; color:var(--muted); font-size:14px; line-height:1.6; } dialog { width:min(460px,calc(100% - 36px)); padding:0; border:0; border-radius:14px; color:var(--ink); box-shadow:0 20px 80px #24323c33; } dialog::backdrop { background:#193b3b77; } dialog form { position:relative; padding:30px; } dialog h2 { margin-bottom:22px; } label { display:grid; gap:7px; margin-top:14px; color:var(--muted); font-size:13px; font-weight:600; } input,textarea { padding:11px; border:1px solid var(--line); border-radius:7px; color:var(--ink); font:14px "DM Sans",sans-serif; } textarea { min-height:110px; resize:vertical; }.save-button { margin-top:22px; }.close { position:absolute; top:12px; right:15px; border:0; background:none; color:var(--muted); font-size:25px; cursor:pointer; }
@media (max-width:760px) { .shell { display:block; }.sidebar { width:100%; height:auto; padding:18px 20px; position:sticky; z-index:2; border-bottom:1px solid #31534f; }.sidebar nav { display:flex; gap:4px; margin:15px 0 0; overflow:auto; }.nav-link { padding:7px 9px; font-size:13px; white-space:nowrap; }.sidebar-note { display:none; }.page { padding:54px 20px; }.hero { min-height:0; padding-top:62px; background:linear-gradient(150deg,#fffefa 69%,#d9f0e2 69%); }.hero:after { right:4%; bottom:-5px; font-size:100px; }.learning-grid,.words-grid { grid-template-columns:1fr; }.learning-card { min-height:145px; }.learning-card h3,.words-grid h3 { margin-top:24px; }.calendar-days div { min-height:86px; padding:9px; }.calendar-week span { padding:9px; }.section-heading { margin-top:54px; }.section-heading.large { align-items:end; } }