*{box-sizing:border-box;border:0 solid}body{margin:0}button,input{font:inherit;color:inherit;background:transparent}h1,h2,h3,p{margin:0}svg{display:block;vertical-align:middle}button{appearance:button}img{display:block;max-width:100%;height:auto}
/* Premium top navigation overrides */
.top-nav { width: min(1380px, 100%); margin: 0 auto; min-height: 78px; padding: 0 5vw; display: flex; align-items: center; gap: 46px; background: rgba(255,255,255,.96); border-bottom: 1px solid #eceae7; position: sticky; top: 0; z-index: 20; }
.top-nav .brand { margin: 0 auto 0 0; border: 0; background: transparent; padding: 0; color: var(--ink); }
.top-nav nav { display: flex; align-items: center; gap: 8px; }
.nav-link { border: 0; background: transparent; color: #7a7773; display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px; border-radius: 999px; font-size: 13px; }
.nav-link:hover, .nav-link.active { color: #151515; background: #f3f1ee; }
.nav-link.active { font-weight: 700; }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.nav-icon, .profile-pill { border: 1px solid #e3e0dc; background: #fff; color: #5d5955; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; }
.nav-icon { width: 38px; height: 38px; }
.profile-pill { gap: 7px; padding: 8px 11px; font-size: 12px; }
.content { width: 100%; }
@media (max-width: 640px) { .top-nav { min-height: 70px; padding: 0 14px; gap: 4px; border-bottom-color: #f0e8e2; } .top-nav .brand { margin: 0; flex: 0 0 auto; font-size: 18px; gap: 7px; } .top-nav .brand-mark { width: 27px; height: 27px; } .top-nav nav { display: flex; flex: 1 1 auto; justify-content: center; gap: 0; min-width: 0; } .nav-link { padding: 9px 6px; font-size: 0; border-radius: 12px; } .nav-link svg { width: 18px; height: 18px; } .nav-actions { flex: 0 0 auto; gap: 4px; } .nav-icon { width: 35px; height: 35px; } .profile-pill { padding: 7px; } .profile-pill span, .profile-pill svg:last-child { display: none; } .content { padding-top: 22px; } }
@media (min-width: 641px) { .app-shell { display: block; } .sidebar { display: none; } }
@media (max-width: 640px) { .top-nav > nav { display: flex !important; visibility: visible !important; opacity: 1 !important; flex: 1 1 auto !important; } .top-nav > nav .nav-link { display: inline-flex !important; visibility: visible !important; } .top-nav .brand > span:last-child { display: inline !important; } }

:root{--paper:#fff;--line:#e9e9e5;--ink:#171717;--muted:#777;--sage:#dcecdf}body{background:#fff;color:#171717;font-family:'Avenir Next','Trebuchet MS',Arial,sans-serif}.top-nav{background:#fff;border-bottom:1px solid #efefeb;box-shadow:0 6px 24px rgba(26,33,29,.04);padding:14px clamp(22px,5vw,72px);display:flex;align-items:center;gap:28px;position:sticky;top:0;z-index:10}.top-nav .brand{margin:0 auto 0 0;color:#171717;font-family:'Avenir Next','Trebuchet MS',Arial,sans-serif;font-size:24px}.top-nav .brand-mark{background:#f47d6d;color:#fff4ed;box-shadow:none}.top-nav nav{display:flex;gap:7px}.top-nav .nav-link{border:0;background:#fff;padding:10px 13px;border-radius:999px;color:#777;font-size:13px;display:flex;gap:7px;align-items:center}.top-nav .nav-link.active,.top-nav .nav-link:hover{background:#fff7f1;color:#171717;box-shadow:inset 0 0 0 1px #f1d9ca}.nav-actions{display:flex;align-items:center;gap:10px}.nav-icon,.profile-pill{border:1px solid #e9e9e5;background:#fff;border-radius:999px;padding:9px 12px;display:flex;align-items:center;gap:7px}.content{background:#fff;padding-top:52px}.topbar h1,.page-intro h1{font-family:'Avenir Next','Trebuchet MS',Arial,sans-serif;font-weight:700;letter-spacing:-2px}.title-spark{color:#f47d6d;font-size:.65em}.eyebrow{color:#8c8c84}.welcome-card{border-radius:28px;box-shadow:0 24px 60px rgba(33,50,43,.12)}.welcome-card:before{background:linear-gradient(90deg,rgba(16,29,37,.68),rgba(16,29,37,.02))}.practice-card{background:linear-gradient(145deg,#e4f0e3,#f8eee8);border:1px solid #e7ece5}.tools-card,.quote-card,.feature-card,.reminder{border-color:#e9e9e5;box-shadow:0 12px 32px rgba(33,33,24,.04)}.feature-card,.tools-card,.quote-card,.reminder{border-radius:20px}.reminder.selected{background:#ff625f;border-color:#ff625f;color:#fff;box-shadow:0 9px 20px rgba(255,98,95,.22)} .dark-button,.wide-play{background:#ff625f!important;color:#fff;border-radius:14px;box-shadow:0 8px 18px rgba(255,98,95,.22)} .dark-button:hover,.wide-play:hover{background:#f45150!important;transform:translateY(-2px)} .play-button,.mini-play{background:#ff625f!important;color:#fff;box-shadow:0 10px 24px rgba(255,98,95,.3)} .reminder.selected{background:#2032c4!important;border-color:#2032c4!important;color:#fff!important;box-shadow:0 9px 20px rgba(32,50,196,.22)}.page-view{max-width:1220px;margin:0 auto}.page-intro{margin-bottom:34px}.page-intro h1{font-size:clamp(42px,6vw,70px);margin:12px 0 8px}.page-intro p{font-size:18px;color:#777;margin:0}.explore-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.explore-card{padding:0;background:#fff;border:1px solid #e7e7e2;border-radius:25px;overflow:hidden;text-align:left;box-shadow:0 12px 36px rgba(33,33,24,.06)}.explore-card img{display:block;width:100%;height:190px;object-fit:cover}.explore-card>div{padding:20px 21px 24px;position:relative}.card-emoji{font-size:20px}.explore-card h2{font-family:'Avenir Next','Trebuchet MS',Arial,sans-serif;font-size:22px;margin:10px 0 5px}.explore-card p{color:#777;margin:0;max-width:220px;line-height:1.4}.explore-card svg{position:absolute;right:20px;bottom:25px}.daily-page{display:grid;grid-template-columns:1.05fr .95fr;gap:42px;align-items:center}.daily-art{min-height:580px;border-radius:28px;background-size:cover;background-position:center;display:flex;flex-direction:column;justify-content:end;padding:38px;color:#fff;overflow:hidden;position:relative}.daily-art:before{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(12,28,34,.65),transparent 65%)}.daily-art>*{position:relative}.daily-art h1{font-family:'Avenir Next','Trebuchet MS',Arial,sans-serif;font-size:clamp(38px,5vw,66px);line-height:1.02;max-width:480px;margin:15px 0 0}.daily-copy h2{font-size:44px;margin:14px 0}.daily-copy p{font-size:20px;line-height:1.55;color:#666;max-width:510px}.select-row{display:grid;gap:12px;margin:28px 0}.select-row button{background:#fff;border:1px solid #e6e6e1;border-radius:16px;padding:18px;display:flex;justify-content:space-between;text-align:left;font-size:16px}.wide-play{border:0;background:#171717;color:#fff;border-radius:16px;padding:18px 22px;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;font-weight:700}.search-box{display:flex;gap:13px;align-items:center;border:1px solid #deded8;border-radius:18px;padding:18px 20px;max-width:700px;box-shadow:0 10px 30px rgba(0,0,0,.04)}.search-box input{border:0;outline:0;font:inherit;width:100%;font-size:18px}.topic-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}.topic-row button{border:1px solid #e4e4df;background:#fff;border-radius:999px;padding:13px 18px}.sleep-detail{box-shadow:0 18px 50px rgba(33,33,24,.08)}@media(max-width:800px){.top-nav{padding:12px 18px}.top-nav nav{display:none}.top-nav .brand{margin-right:auto}.profile-pill span{display:none}.content{padding:34px 18px 90px}.explore-grid{grid-template-columns:1fr 1fr;gap:14px}.explore-card img{height:145px}.daily-page{grid-template-columns:1fr;gap:24px}.daily-art{min-height:390px}.daily-copy h2{font-size:36px}}@media(max-width:520px){.explore-grid{grid-template-columns:1fr}.explore-card img{height:190px}.topbar{align-items:flex-start}.topbar h1{font-size:34px}.top-action{display:none}}







:root {
  --background: #ffffff;
  --foreground: #151515;
  --card: #ffffff;
  --card-foreground: #151515;
  --popover: #ffffff;
  --popover-foreground: #151515;
  --primary: #151515;
  --primary-foreground: #ffffff;
  --secondary: #ffffff;
  --secondary-foreground: #151515;
  --muted: #ffffff;
  --muted-foreground: #77736f;
  --accent: #f0d5c6;
  --accent-foreground: #151515;
  --destructive: #b42318;
  --border: #eeeae5;
  --input: #eeeae5;
  --ring: #77736f;
  --ink: #151515;
  --line: #e6e3df;
  --paper: #ffffff;
  --sage: #d9e2d7;
}



* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: 'Avenir Next', Avenir, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: 'Avenir Next', Avenir, 'Segoe UI', sans-serif; font-weight: 600; letter-spacing: -0.035em; } ::selection { background: #d8c5ad; color: #151515; }
button { font: inherit; cursor: pointer; } .top-action, .dark-button, .wide-play, .play-button, .mini-play { font-weight: 700; } .dark-button, .wide-play { background: #ff625f; color: #fff; border: 0; border-radius: 14px; min-height: 50px; padding: 0 21px; box-shadow: 0 8px 18px rgba(255,98,95,.22); } .dark-button:hover, .wide-play:hover { background: #f45150; box-shadow: 0 11px 24px rgba(255,98,95,.28); transform: translateY(-2px); } .top-action { border-color: #f2b0aa; color: #e95e5b; background: #fff; border-radius: 12px; font-weight: 700; box-shadow: 0 6px 16px rgba(255,98,95,.08); } .play-button, .mini-play { background: #ff625f; box-shadow: 0 10px 24px rgba(255,98,95,.3); } .reminder { min-height: 62px; border: 1px solid #eadeda; box-shadow: 0 5px 14px rgba(40,30,25,.04); } .reminder-emoji { flex: 0 0 auto !important; font-size: 21px; line-height: 1; } .reminder.selected .reminder-emoji { filter: saturate(1.15); } .reminder.selected { background: #2032c4; border-color: #2032c4; box-shadow: 0 9px 20px rgba(32,50,196,.22); } .reminder > span:not(.reminder-emoji) { font-weight: 700; } .select-row button, .topic-row button { border: 1px solid #e6dfda; background: #fff; border-radius: 13px; min-height: 52px; box-shadow: 0 5px 14px rgba(40,30,25,.04); } .topic-row button:hover, .select-row button:hover { border-color: #ffaaa4; color: #e95e5b; box-shadow: 0 8px 18px rgba(255,98,95,.12); } .search-box { border: 1.5px solid #f0aaa4; box-shadow: 0 0 0 4px #fff4f2; border-radius: 14px; background: #fff; min-height: 58px; display: flex; align-items: center; gap: 12px; padding: 0 18px; } .search-box input { border: 0; outline: 0; flex: 1; font: inherit; font-size: 16px; color: #171717; background: transparent; } .search-box input::placeholder { color: #a19a95; } .topic-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; } .topic-row button { padding: 0 18px; color: #4e4945; font-weight: 600; } .topic-row button:first-child { background: #ff625f; border-color: #ff625f; color: #fff; box-shadow: 0 8px 18px rgba(255,98,95,.2); }
.app-shell { display: flex; min-height: 100vh; }
.sidebar { width: 250px; min-height: 100vh; background: #f4f0e9; border-right: 1px solid rgba(123,102,80,.15); padding: 34px 22px 24px; display: flex; flex-direction: column; gap: 12px; position: sticky; top: 0; }
.brand { display: flex; align-items: center; gap: 10px; font-size: 25px; font-weight: 700; letter-spacing: -.8px; margin: 0 12px 48px; }
.brand-mark { display: grid; place-items: center; width: 31px; height: 31px; background: #263f3a; color: #f8f2e8; border-radius: 50%; box-shadow: 0 5px 14px rgba(38,63,58,.2); }.brand-mark svg { width: 19px; }
.side-label, .eyebrow { color: #88827c; font-size: 10px; letter-spacing: 1.8px; font-weight: 700; }.side-label { margin: 9px 12px 5px; }
.side-nav { display: flex; flex-direction: column; gap: 5px; }.side-link { display: flex; align-items: center; gap: 13px; border: 0; background: transparent; color: #716d68; text-align: left; padding: 12px; border-radius: 10px; font-size: 14px; }.side-link:hover, .side-link.active { background: #fff; color: var(--ink); font-weight: 700; }.sidebar-bottom { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }.profile { display: flex; align-items: center; gap: 9px; border-top: 1px solid var(--line); padding: 18px 8px 0; color: #5e5a56; }.profile div { display: flex; flex-direction: column; gap: 3px; flex: 1; }.profile strong { font-size: 12px; }.profile span { color: #99938d; font-size: 11px; }
.content { flex: 1; max-width: 1500px; margin: auto; padding: 42px 5vw 72px; background: #ffffff; }.topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 38px; }.topbar h1 { font-size: clamp(30px, 3vw, 44px); letter-spacing: -1.7px; margin: 8px 0 0; }.top-action, .text-button { border: 0; background: transparent; display: flex; align-items: center; gap: 8px; color: #6d6964; font-size: 13px; }.top-action { border: 1px solid rgba(38,63,58,.2); padding: 12px 16px; border-radius: 22px; color: #263f3a; background: rgba(255,255,255,.72); box-shadow: 0 8px 24px rgba(70,55,39,.06); }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, .8fr); gap: 30px; } .welcome-card, .practice-card, .tools-card, .quote-card, .feature-card, .sleep-detail { box-shadow: 0 18px 50px rgba(67,52,37,.07); }.main-column, .right-column { display: flex; flex-direction: column; gap: 34px; }.welcome-card { min-height: 275px; border-radius: 20px; background: #e4d1c6 url('/resource/b1a2ef119beffd1726c3713b') center/cover; padding: 35px; color: white; display: flex; align-items: flex-end; justify-content: space-between; overflow: hidden; position: relative; }.welcome-card:before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(16,29,37,.78), rgba(16,29,37,.05)); }.welcome-copy, .play-button { position: relative; }.eyebrow.light { color: rgba(255,255,255,.75); }.welcome-card h2 { font-size: 46px; margin: 11px 0 10px; letter-spacing: -2.2px; }.welcome-card p { max-width: 430px; line-height: 1.55; color: rgba(255,255,255,.86); margin: 0 0 23px; }.progress-row { display: flex; align-items: center; gap: 12px; font-size: 12px; }.progress { width: min(340px, 45vw); height: 5px; background: rgba(255,255,255,.4); border-radius: 99px; }.progress span { display: block; width: 20%; height: 100%; background: white; border-radius: inherit; }.play-button { border: 0; display: grid; place-items: center; background: #161616; color: white; border-radius: 50%; width: 76px; height: 76px; }.play-button svg { margin-left: 3px; }.pause-bars { font-size: 28px; letter-spacing: -7px; margin-left: -4px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 17px; }.section-heading h2, .tools-card h3 { font-size: 22px; letter-spacing: -.6px; margin: 8px 0 0; }.quiet { color: #98928d; font-size: 12px; }.reminder-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }.reminder { border: 1px solid #d9d5d0; background: white; border-radius: 12px; padding: 18px; color: #605c58; display: flex; align-items: center; gap: 10px; text-align: left; }.reminder span { flex: 1; }.reminder.selected { border-color: #242424; background: #242424; color: white; }.reminder svg:last-child { color: #cce0c9; }
.featured-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }.feature-card { background: white; border: 1px solid var(--line); border-radius: 15px; overflow: hidden; position: relative; }.feature-card img { width: 100%; height: 145px; object-fit: cover; display: block; }.feature-body { padding: 17px; }.feature-body h3 { margin: 0 0 6px; font-size: 17px; }.feature-body p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.4; }.mini-play { border: 0; background: var(--ink); color: white; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; position: absolute; right: 14px; bottom: 14px; }
.sleep-detail { max-width: 980px; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; }.sleep-hero { min-height: 410px; background-size: cover; background-position: center; position: relative; display: flex; align-items: end; padding: 42px; color: #fff; }.sleep-hero-shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.72), rgba(0,0,0,.02) 65%); }.sleep-hero h2 { position: relative; z-index: 1; margin: 0; font-size: clamp(38px, 5vw, 64px); letter-spacing: -2px; }.back-button { position: absolute; top: 24px; left: 28px; border: 0; background: rgba(0,0,0,.35); color: #fff; border-radius: 50%; width: 42px; height: 42px; font-size: 27px; z-index: 2; }.sleep-intro { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 30px 42px; border-bottom: 1px solid var(--line); }.sleep-intro p { max-width: 650px; margin: 0; font-size: 21px; line-height: 1.5; }.sleep-intro .play-button { flex: 0 0 auto; }.sleep-list { padding: 0 42px; }.sleep-session { width: 100%; background: #fff; border: 0; border-bottom: 1px solid #bdbab6; display: flex; align-items: center; justify-content: space-between; text-align: left; padding: 28px 0; }.sleep-session span { display: flex; flex-direction: column; gap: 8px; }.sleep-session strong { font-size: 20px; }.sleep-session small { color: #77736f; font-size: 16px; }.sleep-session i { width: 42px; height: 42px; border: 3px solid #aaa; border-radius: 50%; }.sleep-footer { display: flex; align-items: center; gap: 28px; padding: 30px 42px; }.sleep-footer span { flex: 1; }.sleep-footer button { border: 0; background: transparent; font-size: 32px; }.sleep-footer button:first-child { font-size: 40px; }
.practice-card, .tools-card, .quote-card { background: white; border: 1px solid var(--line); border-radius: 16px; padding: 25px; }.practice-card { background: linear-gradient(145deg, #dce5d9, #cbd9cc); border: 0; min-height: 222px; }.practice-card h2 { font-size: 26px; letter-spacing: -1px; margin: 16px 0 9px; max-width: 230px; }.practice-card p { color: #62685f; font-size: 13px; line-height: 1.5; max-width: 250px; margin: 0 0 21px; }.dark-button { border: 0; background: #263f3a; color: #fffaf2; border-radius: 999px; padding: 12px 17px; display: flex; align-items: center; gap: 8px; font-size: 13px; box-shadow: 0 8px 18px rgba(38,63,58,.18); }.tools-card h3 { margin-top: 0; }.tools-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 19px 12px; margin-top: 22px; }.tool { border: 0; background: transparent; text-align: left; display: flex; align-items: center; gap: 9px; font-size: 12px; color: #5f5a55; padding: 0; }.tool span { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid #ddd8d3; border-radius: 10px; color: var(--ink); }.quote-card { color: #68635e; }.quote-card svg { color: #a48d7b; }.quote-card p { font-family: Georgia, serif; font-size: 17px; line-height: 1.45; margin: 16px 0 12px; color: var(--ink); }.quote-card span { font-size: 11px; }
@media (max-width: 900px) { .sidebar { width: 78px; padding: 24px 10px; align-items: center; }.brand { margin: 0 0 35px; }.brand > span:last-child, .side-label, .side-link:not(.active)::after, .side-link { font-size: 0; }.side-link { justify-content: center; width: 48px; height: 48px; }.side-link svg { width: 21px; height: 21px; }.side-link.active { font-size: 0; }.profile { padding: 14px 0 0; }.profile div, .profile > svg:last-child { display: none; }.dashboard-grid { grid-template-columns: 1fr; }.right-column { display: grid; grid-template-columns: repeat(2, 1fr); }.quote-card { grid-column: span 2; } }
@media (max-width: 640px) { .app-shell { display: block; }.sidebar { display: none; }.content { padding: 26px 18px 90px; }.sleep-detail { margin: 0 -18px; border-radius: 0; border-left: 0; border-right: 0; }.sleep-hero { min-height: 390px; padding: 28px 30px; }.sleep-hero h2 { font-size: 42px; line-height: 1.05; }.sleep-intro { padding: 28px 30px; align-items: end; }.sleep-intro p { font-size: 18px; }.sleep-intro .play-button { width: 64px; height: 64px; margin-bottom: -58px; }.sleep-list { padding: 0 30px; }.sleep-session { padding: 28px 0; }.sleep-session strong { font-size: 18px; }.sleep-footer { padding: 26px 30px; }
.topbar { margin-bottom: 24px; }.topbar h1 { font-size: 32px; }.top-action { padding: 9px 11px; font-size: 0; }.top-action svg { width: 19px; }.welcome-card { min-height: 400px; padding: 24px; align-items: flex-end; }.welcome-card h2 { font-size: 36px; }.play-button { width: 58px; height: 58px; }.reminder-grid, .featured-grid { grid-template-columns: 1fr; }.reminder { padding: 14px; }.feature-card { display: grid; grid-template-columns: 42% 58%; }.feature-card img { height: 100%; min-height: 120px; }.section-heading { align-items: start; gap: 10px; }.quiet { display: none; }.right-column { display: flex; }.quote-card { display: none; } }
@media (prefers-reduced-motion: no-preference) { button { transition: transform .2s ease, background .2s ease, color .2s ease; } button:hover { transform: translateY(-1px); } }
.top-nav nav .nav-link:nth-child(1) svg { color: #ef7d63; } .top-nav nav .nav-link:nth-child(2) svg { color: #4a9b96; } .top-nav nav .nav-link:nth-child(3) svg { color: #edb84c; } .top-nav nav .nav-link:nth-child(4) svg { color: #8e78c7; } .nav-icon svg { color: #e78b6b; } .profile-pill svg { color: #4b9a8e; } .title-spark { color: #ef9a54; }
.tools-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .tools-grid .tool { min-height: 112px; padding: 16px 13px 14px; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; text-align: left; border: 1px solid #eee6df; border-radius: 16px; background: #fff; box-shadow: 0 6px 16px rgba(40,30,25,.045); color: #302b28; font-weight: 700; } .tools-grid .tool:hover { border-color: #ffb3aa; box-shadow: 0 10px 22px rgba(255,98,95,.12); transform: translateY(-3px); } .tools-grid .tool span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; } .tools-grid .tool .tool-emoji { font-size: 23px; line-height: 1; } .tools-grid .tool:nth-child(1) span { color: #ef7d63; background: #fff0eb; } .tools-grid .tool:nth-child(2) span { color: #4b9a8e; background: #eaf8f3; } .tools-grid .tool:nth-child(3) span { color: #8e78c7; background: #f1edff; } .tools-grid .tool:nth-child(4) span { color: #e0a12b; background: #fff6dc; } .tools-grid .tool:nth-child(5) span { color: #ef6e7c; background: #fff0f2; } .tools-grid .tool:nth-child(6) span { color: #4f8fcb; background: #edf6ff; } .tools-grid .tool:nth-child(7) span { color: #d2769d; background: #fff0f7; } .tools-grid .tool:nth-child(8) span { color: #5fa26e; background: #effaf0; }
.reminder:nth-child(1) svg { color: #e6aa2e; } .reminder:nth-child(2) svg { color: #8b73c5; } .reminder:nth-child(3) svg { color: #4a8fc1; } .section-heading .text-button svg { color: #e87d63; }
@media (min-width: 641px) { .app-shell { display: block; } .sidebar { display: none; } .content { width: 100%; max-width: none; } }
.top-nav { width: 100%; }
.tools-card { border: 1px solid #eceff5; border-radius: 24px; background: #fff; padding: 24px; box-shadow: 0 14px 32px rgba(29,42,74,.08); }
.tools-card .section-heading { margin-bottom: 18px; }
.tools-card .section-heading h2 { font-size: 18px; letter-spacing: -0.02em; }
.tools-grid { gap: 10px; }
.tools-grid .tool { min-height: 106px; padding: 14px 10px 12px; align-items: center; justify-content: flex-start; gap: 10px; border: 1px solid #e9edf3; border-radius: 16px; background: #fff; box-shadow: 0 5px 14px rgba(29,42,74,.055); color: #262a33; font-size: 12px; }
.tools-grid .tool:hover { border-color: #cfd7e6; box-shadow: 0 10px 22px rgba(29,42,74,.11); transform: translateY(-2px); }
.tools-grid .tool span { width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.8); box-shadow: inset 0 0 0 1px rgba(38,42,51,.04); }
.tools-grid .tool .tool-emoji { font-size: 22px; }
@media (max-width: 760px) { .tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tools-card { padding: 20px; } }
@media (max-width: 640px) { .featured-grid { display: flex; gap: 14px; overflow-x: auto; margin-right: -18px; padding: 2px 18px 14px 0; scroll-snap-type: x mandatory; scrollbar-width: none; } .featured-grid::-webkit-scrollbar { display: none; } .featured-grid .feature-card { display: block; flex: 0 0 78vw; max-width: 315px; scroll-snap-align: start; } .featured-grid .feature-card img { height: 158px; min-height: 0; } .featured-grid .feature-body { padding: 16px; min-height: 108px; } .featured-grid .feature-body h3 { font-size: 18px; } .featured-grid .feature-body p { font-size: 13px; max-width: 215px; } .section-block:has(.featured-grid) .section-heading { padding-right: 2px; } }


/* Keep the supplied mobile layout within the viewport. */
.main-column,.right-column,.section-block,.dashboard-grid{min-width:0}
@media(max-width:640px){.top-nav .brand>span:last-child{font-size:18px}.top-nav nav .nav-link{font-size:0}.top-nav{gap:4px}.top-nav .brand{gap:7px}.welcome-card{min-width:0}.welcome-copy{min-width:0}.welcome-card .play-button{flex-shrink:0}.featured-grid{max-width:calc(100% + 18px)}}
@media(max-width:640px){.top-nav .brand{font-size:16px;flex-shrink:0}.top-nav .brand>span:last-child{font-size:16px}.top-nav nav .nav-link{padding:8px 4px}.top-nav .nav-icon{width:30px;height:30px}.top-nav .profile-pill{padding:5px}.top-nav .nav-actions{gap:2px}.top-nav .brand-mark{width:24px;height:24px}}