:root {
  --paper: #f3eadb;
  --paper-light: #fffaf0;
  --paper-deep: #e8d9c1;
  --ink: #50382c;
  --ink-soft: #80695a;
  --terracotta: #b85c3f;
  --terracotta-dark: #91442d;
  --mustard: #d39b35;
  --olive: #6d7852;
  --line: rgba(112, 80, 56, 0.14);
  --shadow: 0 24px 60px rgba(90, 57, 35, 0.14), 0 4px 12px rgba(90, 57, 35, 0.07);
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body { margin: 0; min-width: 320px; min-height: 100vh; color: var(--ink); font-family: "DM Sans", sans-serif; background: #d8c3a7; }
button, input { font: inherit; }
button { cursor: pointer; }
.planner-shell { min-height: 100vh; padding: 48px 24px 36px; background: radial-gradient(circle at 15% 10%, rgba(255,244,219,.72), transparent 24rem), radial-gradient(circle at 84% 89%, rgba(134,98,58,.25), transparent 28rem), repeating-linear-gradient(98deg, rgba(93,65,40,.025) 0 1px, transparent 1px 4px), #d8c3a7; }
.planner { position: relative; max-width: 980px; min-height: calc(100vh - 96px); margin: auto; padding: 34px clamp(26px, 6vw, 72px) 28px; overflow: hidden; border: 1px solid rgba(112,80,56,.13); border-radius: 5px 18px 14px 5px; background: linear-gradient(90deg, rgba(176,116,77,.075) 0 2px, transparent 2px 100%), repeating-linear-gradient(to bottom, transparent 0 42px, rgba(165,121,89,.085) 42px 43px), var(--paper); box-shadow: var(--shadow); }
.planner::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .28; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E"); mix-blend-mode: multiply; }
.planner > * { position: relative; z-index: 1; }
.planner__binding { position: absolute; top: 105px; left: 0; z-index: 2; display: grid; gap: 100px; transform: translateX(-48%); }
.planner__binding span { width: 22px; height: 36px; border: 4px solid #8b7767; border-right: 0; border-radius: 11px 0 0 11px; box-shadow: inset 2px 0 2px rgba(255,255,255,.4); }
.planner-header, .welcome, .section-heading, .planner-footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-family: "Playfair Display", serif; font-size: 1.32rem; font-weight: 700; text-decoration: none; }
.brand__mark { display: grid; width: 30px; height: 30px; place-items: center; color: var(--paper-light); border-radius: 50% 50% 50% 5px; background: var(--terracotta); font-size: 1rem; }
.sync-status, .eyebrow, .task-count { margin: 0; color: var(--ink-soft); font-size: .69rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.sync-status { display: flex; align-items: center; gap: 7px; letter-spacing: .04em; text-transform: none; }
.sync-status__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--olive); transition: transform .3s ease, background .3s ease; }
.sync-status.is-saving .sync-status__dot { background: var(--mustard); transform: scale(1.45); }
.welcome { align-items: end; padding: 68px 0 48px; }
.welcome h1 { max-width: 540px; margin: 10px 0 13px; color: var(--ink); font-family: "Playfair Display", serif; font-size: clamp(2.55rem, 6vw, 4.65rem); font-weight: 600; line-height: .98; letter-spacing: -.045em; }
.welcome h1 em { color: var(--terracotta); font-weight: 600; }
.welcome__copy { max-width: 390px; margin: 0; color: var(--ink-soft); font-size: .96rem; line-height: 1.65; }
.daily-note { width: 164px; flex: none; padding: 18px; border: 1px solid rgba(211,155,53,.28); border-radius: 3px; background: rgba(255,250,240,.55); box-shadow: 3px 4px 0 rgba(211,155,53,.19); transform: rotate(1.5deg); }
.daily-note__label { display: block; margin-bottom: 9px; color: var(--olive); font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }.daily-note strong { font-family: "Playfair Display",serif; font-size: 1.55rem; }.progress-track { height: 5px; margin-top: 13px; overflow: hidden; border-radius: 9px; background: var(--paper-deep); }.progress-track span { display:block; width:0; height:100%; border-radius: inherit; background: var(--mustard); transition: width .45s cubic-bezier(.22,1,.36,1); }
.task-capture { padding: 25px 27px 27px; border: 1px solid rgba(184,92,63,.17); border-radius: 8px; background: rgba(255,250,240,.72); box-shadow: 0 10px 26px rgba(103,62,36,.05); }.task-capture__heading { display:flex; align-items:center; gap: 12px; margin-bottom: 18px; }.sun-icon { display:grid; width:35px; height:35px; place-items:center; color:var(--mustard); border-radius:50%; background:#fbf0d4; font-size:1.1rem; }.task-capture h2, .section-heading h2 { margin:3px 0 0; font-family:"Playfair Display",serif; font-size:1.42rem; font-weight:600; }.task-form { display:flex; gap:10px; }.task-form input { width:100%; min-width:0; padding:14px 2px; color:var(--ink); border:0; border-bottom:1px solid var(--line); outline:0; background:transparent; transition:border .2s; }.task-form input::placeholder { color:#a69283; }.task-form input:focus { border-color:var(--terracotta); }.add-button { display:flex; align-items:center; gap:14px; padding: 0 18px; color:#fffaf0; border:0; border-radius:4px; background:var(--terracotta); box-shadow:0 3px 0 var(--terracotta-dark); font-size:.84rem; font-weight:700; transition:transform .2s, background .2s; }.add-button:hover { background:var(--terracotta-dark); }.add-button:active { transform:translateY(2px); box-shadow:0 1px 0 var(--terracotta-dark); }.add-button span:last-child { font-size:1.25rem; font-weight:400; }
.tasks-section { padding: 51px 0 35px; }.section-heading { align-items:end; padding-bottom:17px; border-bottom:1px solid var(--line); }.task-count { color:var(--olive); letter-spacing:.04em; text-transform:none; }.task-list { display:grid; gap:10px; padding:0; margin:19px 0 0; list-style:none; }.task-item { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px; min-height:63px; padding:11px 10px; border:1px solid transparent; border-radius:6px; transition:background .2s, border .2s, transform .2s; animation: reveal .35s ease both; }.task-item:hover { border-color:rgba(184,92,63,.13); background:rgba(255,250,240,.55); transform:translateX(3px); }.task-item__check { display:grid; width:27px; height:27px; place-items:center; color:transparent; border:1.5px solid #aa9584; border-radius:50%; background:transparent; transition:all .25s; }.task-item__check span { transform:scale(.5); transition:transform .2s; }.task-item__title { margin:0; font-size:.96rem; font-weight:500; line-height:1.4; transition:color .25s, text-decoration .25s; }.task-item__actions { display:flex; gap:3px; opacity:0; transform:translateX(-4px); transition:opacity .2s, transform .2s; }.task-item:hover .task-item__actions, .task-item:focus-within .task-item__actions { opacity:1; transform:none; }.icon-button { padding:7px 8px; color:var(--ink-soft); border:0; border-radius:3px; background:transparent; font-size:.72rem; }.icon-button:hover { color:var(--terracotta); background:rgba(184,92,63,.08); }.delete-button:hover { color:#9c382f; }.task-item.is-complete .task-item__check { color:#fff; border-color:var(--olive); background:var(--olive); }.task-item.is-complete .task-item__check span { transform:scale(1); }.task-item.is-complete .task-item__title { color:#948273; text-decoration:line-through; text-decoration-color:rgba(109,120,82,.5); }.empty-state { padding:52px 20px 35px; text-align:center; }.empty-state[hidden] { display:none; }.empty-state__illustration { display:grid; width:56px; height:56px; place-items:center; margin:0 auto 15px; border-radius:50%; background:#f4e3c5; font-size:1.7rem; }.empty-state h3 { margin:0 0 7px; font-family:"Playfair Display",serif; font-size:1.25rem; font-weight:600; }.empty-state p { margin:0; color:var(--ink-soft); font-size:.87rem; }.planner-footer { padding-top:19px; border-top:1px solid var(--line); color:var(--ink-soft); font-size:.75rem; }.planner-footer p { margin:0; }.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; }
@keyframes reveal { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:none; } }
@media (max-width: 620px) { .planner-shell { padding:0; }.planner { min-height:100vh; padding:25px 22px; border-radius:0; }.planner__binding { display:none; }.sync-status { font-size:.63rem; }.welcome { display:block; padding:51px 0 39px; }.daily-note { margin-top:30px; }.task-form { align-items:stretch; }.add-button { padding:0 13px; }.add-button span:first-child { display:none; }.task-item { gap:10px; }.task-item__actions { opacity:1; transform:none; }.icon-button { padding:7px 4px; }.planner-footer { display:block; line-height:1.8; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior:auto!important; animation-duration:.01ms!important; transition-duration:.01ms!important; } }
.task-item__edit-input { width:100%; padding:7px 8px; color:var(--ink); border:1px solid rgba(184,92,63,.42); border-radius:3px; outline:none; background:var(--paper-light); box-shadow:0 0 0 3px rgba(184,92,63,.08); }
.task-item.is-editing .task-item__actions { opacity:1; transform:none; }
.site-copyright { margin:32px 0 0; color:rgba(80,56,44,.62); font-size:.7rem; font-weight:500; letter-spacing:.035em; text-align:center; }
@media (max-width: 620px) { .planner-shell { padding:0 0 28px; }.site-copyright { margin-top:25px; font-size:.66rem; } }