:root {
  --ink: #181716;
  --paper: #fffdf8;
  --cream: #f7f1e8;
  --coral: #ff5c3d;
  --violet: #6954e8;
  --lime: #d8f06a;
  --muted: #716e69;
  --line: #ded9d0;
  --shadow: 0 14px 0 rgba(24, 23, 22, .1);
}

* { box-sizing: border-box; }
html { background: var(--paper); }
body { margin: 0; color: var(--ink); font-family: "DM Sans", Arial, sans-serif; }
button, input { font: inherit; }
button { cursor: pointer; }

.shell { min-height: 100vh; overflow: hidden; }
.topbar { max-width: 1320px; margin: auto; height: 82px; padding: 0 30px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-size: 24px; font-weight: 700; letter-spacing: -.07em; text-decoration: none; }
.brand-mark { width: 27px; height: 27px; border-radius: 50% 50% 50% 6px; background: var(--coral); transform: rotate(-20deg); display: grid; place-items: center; color: white; font-size: 14px; }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a { color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 600; }
.button { min-height: 47px; padding: 0 19px; border: 1.5px solid var(--ink); border-radius: 100px; color: var(--ink); background: transparent; font-weight: 700; font-size: 14px; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.button:hover { transform: translate(-2px, -2px); box-shadow: 3px 3px 0 var(--ink); }
.button.primary { background: var(--coral); color: #fff; }
.button.dark { background: var(--ink); color: #fff; }
.button.small { min-height: 38px; padding: 0 14px; font-size: 13px; }

.hero { max-width: 1320px; min-height: calc(100vh - 82px); margin: auto; padding: 48px 30px 72px; display: grid; grid-template-columns: minmax(0, .98fr) minmax(470px, 1.02fr); align-items: center; gap: 56px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px; color: var(--violet); font-family: "DM Mono", monospace; font-size: 11px; letter-spacing: .09em; text-transform: uppercase; }
.eyebrow i { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); }
h1, h2, h3, p { margin-top: 0; }
.hero h1 { max-width: 650px; margin-bottom: 25px; font-family: Fraunces, Georgia, serif; font-size: clamp(53px, 6.1vw, 91px); line-height: .94; letter-spacing: -.065em; font-weight: 600; }
.hero h1 em { color: var(--coral); font-style: italic; }
.hero-copy { max-width: 450px; margin-bottom: 31px; color: #4e4b47; font-size: 18px; line-height: 1.5; }
.hero-actions { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; }
.hero-note { margin-top: 21px; color: var(--muted); font-size: 12px; }
.hero-visual { position: relative; min-height: 500px; }
.sticker { position: absolute; z-index: 4; padding: 9px 13px; border: 1.5px solid var(--ink); border-radius: 3px; background: var(--lime); box-shadow: 4px 4px 0 var(--ink); font-family: "DM Mono", monospace; font-size: 11px; font-weight: 500; }
.sticker.one { top: 16px; left: -17px; transform: rotate(-8deg); }
.sticker.two { right: -4px; bottom: 27px; background: #fff; transform: rotate(7deg); }
.workspace-preview { position: absolute; inset: 42px 0 23px 23px; border: 1.5px solid var(--ink); border-radius: 20px; background: #fff; box-shadow: 13px 14px 0 var(--ink); overflow: hidden; transform: rotate(2deg); }
.preview-head { height: 62px; padding: 0 22px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.preview-name { font-size: 13px; font-weight: 700; }
.dots { display: flex; gap: 5px; }.dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }.dots span:first-child { background: var(--coral); }
.preview-body { display: grid; grid-template-columns: 123px 1fr; min-height: 410px; }
.preview-side { padding: 22px 13px; background: #fcfaf5; border-right: 1px solid var(--line); }
.side-item { margin-bottom: 10px; padding: 7px 9px; border-radius: 6px; color: var(--muted); font-size: 10px; font-weight: 600; }.side-item.active { background: #ebe7ff; color: var(--violet); }
.preview-main { padding: 27px 25px; }.preview-main h3 { margin-bottom: 20px; font-family: Fraunces, Georgia, serif; font-size: 25px; letter-spacing: -.05em; }
.project-card { border: 1px solid var(--line); border-radius: 10px; padding: 13px; margin-bottom: 12px; }.project-card.accent { background: #fdf0db; border-color: #facf9b; }
.card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 11px; font-size: 11px; font-weight: 700; }.tag { padding: 4px 6px; border-radius: 10px; color: #fff; background: var(--violet); font-size: 9px; }.tag.orange { background: var(--coral); }
.lines { display: grid; gap: 6px; }.lines span { display: block; height: 5px; border-radius: 3px; background: #e5e0d8; }.lines span:nth-child(2) { width: 76%; }.lines span:nth-child(3) { width: 47%; }
.avatar-row { display: flex; margin-top: 14px; }.avatar { width: 19px; height: 19px; margin-right: -4px; border: 2px solid #fff; border-radius: 50%; background: #ffbd76; }.avatar:nth-child(2) { background: #8ad3cf; }.avatar:nth-child(3) { background: #9d91f6; }
.hero-crawl { max-width: 1260px; margin: 0 auto 80px; padding: 0 30px; display: flex; gap: 12px; flex-wrap: wrap; }.crawl-item { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }.crawl-dot { width: 4px; height: 4px; background: var(--coral); border-radius: 50%; }

.onboarding { min-height: 100vh; display: grid; grid-template-columns: minmax(280px, .8fr) minmax(440px, 1.2fr); background: var(--paper); }
.onboarding-aside { padding: 46px; background: var(--violet); color: #fff; display: flex; flex-direction: column; }.onboarding-aside .brand { color: #fff; }.onboarding-aside .brand-mark { background: var(--lime); color: var(--ink); }.onboarding-aside h1 { max-width: 430px; margin: auto 0 18px; font-family: Fraunces, Georgia, serif; font-size: clamp(43px, 4.4vw, 68px); line-height: .96; letter-spacing: -.06em; }.onboarding-aside p { max-width: 335px; color: #e3dfff; line-height: 1.55; }.progress-list { display: grid; gap: 11px; margin-top: auto; }.progress-item { display: flex; align-items: center; gap: 9px; color: #c5bdff; font-size: 12px; }.progress-item b { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid #b6aeef; border-radius: 50%; font-family: "DM Mono", monospace; font-size: 9px; }.progress-item.active { color: #fff; }.progress-item.active b { border-color: var(--lime); background: var(--lime); color: var(--ink); }
.onboarding-panel { width: min(590px, 100%); padding: 62px 55px; margin: auto; }.step-count { color: var(--muted); font-family: "DM Mono", monospace; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }.onboarding-panel h2 { margin: 15px 0 12px; font-family: Fraunces, Georgia, serif; font-size: clamp(35px, 4vw, 50px); line-height: .98; letter-spacing: -.055em; }.onboarding-panel > p { margin-bottom: 31px; color: var(--muted); line-height: 1.55; }
.option-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.choice { min-height: 132px; padding: 17px; border: 1.5px solid var(--line); border-radius: 13px; background: #fff; color: var(--ink); text-align: left; transition: border .2s, background .2s, transform .2s; }.choice:hover { transform: translateY(-2px); border-color: var(--ink); }.choice.selected { border-color: var(--ink); background: var(--lime); box-shadow: 3px 3px 0 var(--ink); }.choice-icon { display: block; margin-bottom: 20px; font-size: 23px; }.choice strong, .choice span { display: block; }.choice strong { font-size: 14px; }.choice span { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.35; }.choice.selected span { color: #56514b; }
.field-label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 700; }.text-field { width: 100%; height: 54px; padding: 0 15px; border: 1.5px solid var(--line); border-radius: 9px; outline: none; background: #fff; }.text-field:focus { border-color: var(--violet); box-shadow: 0 0 0 3px #e8e5ff; }.chip-row { display: flex; flex-wrap: wrap; gap: 9px; }.chip { padding: 10px 13px; border: 1.5px solid var(--line); border-radius: 99px; background: #fff; color: var(--ink); font-size: 13px; font-weight: 600; }.chip.selected { border-color: var(--ink); background: var(--coral); color: #fff; }.onboard-actions { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 35px; }.back { border: 0; background: transparent; color: var(--muted); font-size: 13px; font-weight: 700; }.back:hover { color: var(--ink); }

.workspace { min-height: 100vh; display: grid; grid-template-columns: 242px minmax(0, 1fr); background: #f7f5f0; }.workspace-sidebar { position: fixed; width: 242px; height: 100vh; padding: 28px 16px; border-right: 1px solid var(--line); background: var(--paper); }.workspace-sidebar .brand { padding: 0 8px; margin-bottom: 38px; }.workspace-menu { display: grid; gap: 4px; }.menu-button { display: flex; align-items: center; gap: 10px; width: 100%; height: 40px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); text-align: left; font-size: 13px; font-weight: 600; }.menu-button.active { background: #edeaff; color: var(--violet); }.menu-icon { width: 17px; text-align: center; }.sidebar-label { padding: 26px 10px 8px; color: #99948d; font-family: "DM Mono", monospace; font-size: 10px; letter-spacing: .07em; text-transform: uppercase; }.space-link { display: flex; justify-content: space-between; width: 100%; padding: 9px 10px; border: 0; background: none; color: #4e4b47; text-align: left; font-size: 12px; }.space-dot { width: 8px; height: 8px; border-radius: 3px; background: var(--coral); }.space-link:nth-of-type(2) .space-dot { background: var(--violet); }.invite-box { position: absolute; right: 16px; bottom: 20px; left: 16px; padding: 14px; border-radius: 12px; background: var(--lime); }.invite-box b { display: block; margin-bottom: 4px; font-size: 12px; }.invite-box p { margin-bottom: 10px; font-size: 11px; line-height: 1.4; }.invite-box button { padding: 0; border: 0; background: none; color: var(--ink); text-decoration: underline; font-size: 11px; font-weight: 700; }
.workspace-main { grid-column: 2; padding: 32px clamp(25px, 4.5vw, 68px) 70px; }.workspace-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; }.workspace-kicker { margin-bottom: 10px; color: var(--violet); font-family: "DM Mono", monospace; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; }.workspace-head h1 { margin-bottom: 7px; font-family: Fraunces, Georgia, serif; font-size: clamp(37px, 4vw, 55px); line-height: .98; letter-spacing: -.06em; }.workspace-head p { color: var(--muted); font-size: 14px; }.head-actions { display: flex; gap: 10px; }.overview-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(270px, .8fr); gap: 21px; margin-top: 35px; }.panel { border: 1px solid var(--line); border-radius: 16px; background: var(--paper); }.panel-head { padding: 20px 21px 15px; display: flex; align-items: center; justify-content: space-between; }.panel-title { font-size: 15px; font-weight: 700; }.panel-action { border: 0; background: none; color: var(--violet); font-size: 12px; font-weight: 700; }.priority-list { padding: 0 21px 14px; }.task { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 15px 0; border-top: 1px solid #eeeae3; }.task-check { width: 18px; height: 18px; border: 1.5px solid #aaa49b; border-radius: 50%; background: #fff; }.task.done .task-check { border-color: var(--violet); background: var(--violet); box-shadow: inset 0 0 0 4px #fff; }.task.done .task-name { color: var(--muted); text-decoration: line-through; }.task-name { font-size: 13px; font-weight: 600; }.task-meta { color: #97928b; font-size: 11px; }.task-badge { padding: 4px 8px; border-radius: 99px; background: #fce5df; color: #b33a24; font-size: 10px; font-weight: 700; }.task-badge.purple { background: #eae6ff; color: var(--violet); }.moment { padding: 21px; background: var(--ink); color: #fff; }.moment .panel-title { color: var(--lime); }.moment h3 { margin: 28px 0 12px; font-family: Fraunces, Georgia, serif; font-size: 30px; line-height: 1; letter-spacing: -.05em; }.moment p { margin-bottom: 22px; color: #bdb9b3; font-size: 13px; line-height: 1.5; }.moment .button { border-color: #fff; color: #fff; }.calendar-panel { grid-column: 1 / -1; }.calendar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; padding: 0 21px 21px; }.cal-day { min-height: 124px; padding: 12px; border-radius: 10px; background: #f5f1ea; }.cal-day.today { background: #edeaff; }.cal-date { display: block; margin-bottom: 15px; color: var(--muted); font-family: "DM Mono", monospace; font-size: 10px; }.cal-event { padding: 6px; border-left: 3px solid var(--coral); border-radius: 3px; background: #fff; font-size: 10px; font-weight: 700; line-height: 1.35; }.cal-event.violet { border-color: var(--violet); }
.toast { position: fixed; z-index: 20; right: 24px; bottom: 24px; padding: 14px 18px; border: 1.5px solid var(--ink); border-radius: 9px; background: var(--lime); box-shadow: 4px 4px 0 var(--ink); font-size: 13px; font-weight: 700; animation: pop .22s ease both; }@keyframes pop { from { transform: translateY(15px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

@media (max-width: 850px) { .nav-links a { display: none; }.hero { grid-template-columns: 1fr; padding-top: 35px; }.hero-visual { min-height: 430px; max-width: 580px; width: calc(100% - 24px); margin: 5px auto 0; }.onboarding { grid-template-columns: 1fr; }.onboarding-aside { min-height: 270px; padding: 28px; }.onboarding-aside h1 { margin: 48px 0 0; font-size: 44px; }.onboarding-aside p, .progress-list { display: none; }.workspace { display: block; }.workspace-sidebar { position: static; width: 100%; height: auto; padding: 16px 20px; border-right: 0; border-bottom: 1px solid var(--line); }.workspace-sidebar .brand { margin-bottom: 13px; }.workspace-menu { display: flex; overflow: auto; }.menu-button { flex: 0 0 auto; width: auto; }.sidebar-label, .workspace-sidebar .space-link, .invite-box { display: none; }.workspace-main { padding: 28px 20px 50px; }.overview-grid { grid-template-columns: 1fr; }.calendar { overflow-x: auto; grid-template-columns: repeat(5, minmax(130px, 1fr)); }.workspace-head { display: block; }.head-actions { margin-top: 20px; } }
@media (max-width: 520px) { .topbar { height: 70px; padding: 0 18px; }.topbar .button { min-height: 38px; padding: 0 13px; }.hero { min-height: auto; padding: 45px 20px 58px; gap: 35px; }.hero h1 { font-size: 52px; }.hero-copy { font-size: 16px; }.hero-visual { min-height: 326px; }.workspace-preview { inset: 36px 0 18px 6px; }.preview-body { grid-template-columns: 80px 1fr; }.preview-side { padding: 18px 6px; }.side-item { padding: 7px 5px; font-size: 8px; }.preview-main { padding: 20px 15px; }.preview-main h3 { font-size: 20px; }.sticker.one { left: -8px; }.onboarding-panel { padding: 43px 23px; }.option-grid { grid-template-columns: 1fr; }.choice { min-height: 98px; }.choice-icon { margin-bottom: 12px; }.onboarding-aside { min-height: 205px; }.onboarding-aside h1 { margin-top: 24px; font-size: 38px; }.onboard-actions { margin-top: 26px; }.workspace-head h1 { font-size: 40px; }.head-actions .button:first-child { display: none; } }