@import"https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&family=Spectral:ital,wght@0,300;0,400;1,300;1,400&display=swap";:root{--color-paper: #FDFCFB;--color-paper-warm: #FAF9F7;--color-pencil: #3D3D3D;--color-pencil-light: #6B6B6B;--color-pencil-faint: #A8A8A8;--color-graphite: #4A4A4A;--color-eraser: #E8B4A0;--color-eraser-light: #F0D0C0;--color-ink-green: #5A7A60;--color-ruled-line: #D8D0C8;--font-display: "Spectral", Georgia, serif;--font-handwriting: "Caveat", cursive;--font-body: "Spectral", Georgia, serif;--space-xs: .25rem;--space-sm: .5rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 3rem;--space-3xl: 4rem;--transition-fast: .15s ease;--transition-base: .25s ease;--transition-slow: .4s ease;font-family:var(--font-body);line-height:1.7;font-weight:400;color:var(--color-pencil);background-color:var(--color-paper);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,*:before,*:after{box-sizing:border-box}body{margin:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}#root{flex:1;display:flex;flex-direction:column}button{font-family:inherit;cursor:pointer;border:none;background:none;padding:0;color:inherit}button:focus-visible{outline:2px solid var(--color-eraser);outline-offset:2px}input{font-family:inherit;border:none;background:none;color:inherit}input:focus{outline:none}::selection{background-color:var(--color-eraser-light);color:var(--color-pencil)}.app{flex:1;display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;position:relative;overflow-x:hidden}.background-texture{position:fixed;inset:0;pointer-events:none;opacity:.35;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");z-index:0}.header{padding:var(--space-2xl) var(--space-xl) var(--space-lg);text-align:center;position:relative;z-index:1}.date-header{display:flex;align-items:center;justify-content:center;gap:var(--space-lg)}.date-title{font-family:var(--font-handwriting);font-size:clamp(2.5rem,8vw,3.5rem);font-weight:600;letter-spacing:-.01em;margin:0;color:var(--color-pencil);line-height:1;white-space:nowrap}.nav-button{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:transparent;border:1.5px solid var(--color-ruled-line);transition:all var(--transition-base);flex-shrink:0}.nav-button:hover{background:var(--color-paper-warm);border-color:var(--color-pencil-faint);transform:scale(1.05)}.nav-button:active{transform:scale(.95)}.nav-button svg{width:20px;height:20px;stroke:var(--color-pencil-light);stroke-width:2}.nav-button:hover svg{stroke:var(--color-pencil)}.main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 var(--space-xl) var(--space-lg);position:relative;z-index:1}.todos-container{width:100%;max-width:800px;display:flex;flex-direction:column;position:relative;padding:var(--space-xl) 0}.todos-container:before{content:"";position:absolute;left:80px;top:0;bottom:0;width:1.5px;background:var(--color-eraser-light);opacity:.5}.todo-item{display:flex;align-items:center;gap:var(--space-lg);padding:var(--space-xl) 0;position:relative;transition:all var(--transition-base);border-bottom:1px solid var(--color-ruled-line)}.todo-item:last-of-type{border-bottom:none}.todo-item.completed{opacity:.75}.todo-item.past{opacity:.6}.todo-numeral{font-family:var(--font-handwriting);font-size:2.25rem;font-weight:500;color:var(--color-pencil-faint);min-width:64px;text-align:right;padding-right:var(--space-md)}.todo-item.completed .todo-numeral{color:var(--color-ink-green)}.todo-content{flex:1;min-width:0;padding-left:var(--space-md)}.todo-input{width:100%;font-family:var(--font-handwriting);font-size:3rem;font-weight:500;padding:0;margin:0;color:var(--color-pencil);border:none;border-radius:0;background:transparent;line-height:1.3;min-height:1.3em;display:block;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-text-size-adjust:100%;cursor:text;resize:none;overflow:hidden;word-wrap:break-word;overflow-wrap:break-word;white-space:pre-wrap}.todo-input:focus{outline:none}.todo-input::placeholder{color:var(--color-pencil-faint);font-weight:400;opacity:1}.todo-item.completed .todo-input{color:var(--color-pencil-light);text-decoration:line-through;text-decoration-color:var(--color-pencil-faint);text-decoration-thickness:2px}.todo-item.past .todo-input,.todo-item.completed .todo-input{cursor:default}.todo-checkbox{width:40px;height:40px;border-radius:50%;border:2px solid var(--color-pencil-faint);display:flex;align-items:center;justify-content:center;transition:all var(--transition-base);flex-shrink:0;background:transparent;position:relative}.todo-checkbox:before{content:"";position:absolute;inset:-2px;border-radius:50%;border:1px solid transparent;transition:all var(--transition-base)}.todo-checkbox:hover{border-color:var(--color-pencil-light);transform:scale(1.08)}.todo-checkbox:hover:before{border-color:var(--color-pencil-faint);transform:rotate(12deg)}.todo-checkbox.checked{background:var(--color-ink-green);border-color:var(--color-ink-green)}.todo-checkbox.checked:before{border-color:transparent}.todo-checkbox svg{width:22px;height:22px;color:#fff;stroke-width:3}.todo-delete{width:32px;height:32px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;background:transparent;flex-shrink:0;opacity:0;transition:all var(--transition-base);cursor:pointer}.todo-item:hover .todo-delete,.todo-item:focus-within .todo-delete{opacity:1}.todo-delete:hover{background:var(--color-eraser-light);transform:scale(1.1)}.todo-delete:active{transform:scale(.95)}.todo-delete svg{width:16px;height:16px;stroke:var(--color-pencil-faint);transition:stroke var(--transition-base)}.todo-delete:hover svg{stroke:var(--color-eraser)}.add-todo-button{display:flex;align-items:center;gap:var(--space-lg);padding:var(--space-xl) 0;background:transparent;border:none;transition:all var(--transition-base);text-align:left;width:100%}.add-todo-button:hover{opacity:.8}.add-icon{font-family:var(--font-handwriting);font-size:2.5rem;font-weight:400;color:var(--color-pencil-faint);line-height:1;min-width:56px;text-align:right;padding-right:var(--space-md)}.add-todo-button:hover .add-icon{color:var(--color-pencil-light)}.add-text{font-family:var(--font-handwriting);font-size:1.75rem;color:var(--color-pencil-faint);padding-left:var(--space-md)}.add-todo-button:hover .add-text{color:var(--color-pencil-light)}.slots-remaining{display:none}.empty-day{text-align:center;padding:var(--space-2xl) var(--space-xl);color:var(--color-pencil-faint)}.empty-day p{margin:0;font-family:var(--font-display);font-style:italic;font-weight:300}.progress-indicator{display:flex;flex-direction:column;align-items:center;gap:var(--space-sm);margin-top:var(--space-2xl)}.progress-dots{display:flex;gap:var(--space-md)}.progress-dot{width:8px;height:8px;border-radius:50%;border:1.5px solid var(--color-pencil-faint);background:transparent;transition:all var(--transition-base)}.progress-dot.filled{background:var(--color-ink-green);border-color:var(--color-ink-green)}.progress-text{font-family:var(--font-display);font-size:.75rem;font-weight:300;font-style:italic;color:var(--color-pencil-faint);letter-spacing:.04em}@media(max-width:480px){.header{padding:var(--space-xl) var(--space-sm) var(--space-md)}.main{padding:0 var(--space-md) var(--space-md)}.date-header{gap:var(--space-sm)}.date-title{font-size:clamp(1.75rem,7vw,2.5rem)}.nav-button{display:none}.todos-container:before{left:36px}.todo-item{padding:var(--space-md) 0;gap:var(--space-sm)}.todo-numeral{font-size:1.25rem;min-width:32px}.todo-input{font-size:1.35rem;min-height:1.4em;line-height:1.4}.todo-checkbox{width:30px;height:30px}.todo-checkbox svg{width:16px;height:16px}.add-icon{min-width:32px;font-size:1.25rem}.add-text{font-size:1.1rem}.todo-delete{opacity:.4}.todo-delete:active{opacity:1}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.loading{display:flex;align-items:center;justify-content:center;min-height:100vh;font-family:var(--font-display);font-size:1rem;font-weight:300;font-style:italic;color:var(--color-pencil-faint)}.auth-page{justify-content:center}.auth-page .main{flex:none;padding-top:0}.auth-journal{width:100%;max-width:480px;display:flex;flex-direction:column;position:relative}.auth-journal:before{content:"";position:absolute;left:48px;top:0;bottom:0;width:1.5px;background:var(--color-eraser-light);opacity:.5}.auth-heading{font-family:var(--font-handwriting);font-size:clamp(3rem,10vw,4.5rem);font-weight:600;color:var(--color-pencil);margin:0 0 var(--space-sm);padding-left:64px;line-height:1.1;letter-spacing:-.02em}.auth-subheading{font-family:var(--font-handwriting);font-size:clamp(1.5rem,5vw,2rem);font-weight:400;color:var(--color-pencil-faint);margin:0 0 var(--space-2xl);padding-left:64px}.auth-journal-form{display:flex;flex-direction:column;gap:var(--space-lg)}.auth-journal-entry{display:flex;align-items:baseline;gap:var(--space-sm);padding:var(--space-md) 0;border-bottom:1px solid var(--color-ruled-line);flex-wrap:wrap}.auth-entry-number{font-family:var(--font-handwriting);font-size:2rem;font-weight:500;color:var(--color-pencil-faint);min-width:48px;text-align:right}.auth-entry-label{font-family:var(--font-handwriting);font-size:1.75rem;font-weight:400;color:var(--color-pencil-light);white-space:nowrap}.auth-entry-input{flex:1;min-width:120px;font-family:var(--font-handwriting);font-size:1.75rem;font-weight:500;color:var(--color-pencil);background:transparent;border:none;border-bottom:1px dashed var(--color-pencil-faint);padding:0 var(--space-xs) var(--space-xs);margin-left:var(--space-xs);transition:border-color var(--transition-base)}.auth-entry-input:focus{outline:none;border-bottom-color:var(--color-pencil);border-bottom-style:solid}.auth-entry-input.password-input{letter-spacing:.15em}.auth-journal-error{font-family:var(--font-handwriting);font-size:1.25rem;color:#a44;margin:var(--space-sm) 0;padding-left:64px}.auth-journal-message{font-family:var(--font-handwriting);font-size:1.25rem;color:var(--color-ink-green);margin:var(--space-sm) 0;padding-left:64px}.auth-journal-submit{display:flex;align-items:center;gap:var(--space-md);margin-top:var(--space-lg);padding:var(--space-md) 0;padding-left:48px;background:transparent;border:none;text-align:left;transition:all var(--transition-base)}.auth-journal-submit:disabled{opacity:.5;cursor:not-allowed}.submit-arrow{font-family:var(--font-handwriting);font-size:2.5rem;font-weight:600;color:var(--color-ink-green);line-height:1}.submit-text{font-family:var(--font-handwriting);font-size:1.75rem;font-weight:500;color:var(--color-pencil);border-bottom:2px solid var(--color-ink-green);padding-bottom:2px}.auth-journal-submit:hover:not(:disabled) .submit-text{color:var(--color-ink-green)}.auth-journal-switch{margin-top:var(--space-2xl);padding-left:64px;font-family:var(--font-handwriting);font-size:1.25rem;font-weight:400;color:var(--color-pencil-faint)}.auth-journal-switch button{font-family:var(--font-handwriting);font-size:1.25rem;font-weight:500;color:var(--color-pencil-light);background:none;border:none;border-bottom:1px solid var(--color-pencil-faint);padding:0;cursor:pointer;transition:all var(--transition-base)}.auth-journal-switch button:hover{color:var(--color-pencil);border-color:var(--color-pencil)}@media(max-width:480px){.auth-journal:before{left:32px}.auth-heading,.auth-subheading{padding-left:48px}.auth-entry-number{min-width:32px;font-size:1.5rem}.auth-entry-label{font-size:1.35rem}.auth-entry-input{font-size:1.35rem;width:100%;flex:none;margin-left:48px;margin-top:var(--space-xs)}.auth-journal-submit{padding-left:32px}.submit-arrow{font-size:2rem}.submit-text{font-size:1.35rem}.auth-journal-error,.auth-journal-message,.auth-journal-switch{padding-left:48px;font-size:1.1rem}.auth-journal-switch button{font-size:1.1rem}}.sign-out-button{position:absolute;top:var(--space-lg);right:var(--space-lg);padding:var(--space-xs) var(--space-sm);font-family:var(--font-handwriting);font-size:1.125rem;font-weight:400;color:var(--color-pencil-faint);background:transparent;border:none;transition:all var(--transition-base);z-index:10}.sign-out-button:hover{color:var(--color-pencil);transform:rotate(-2deg)}.back-button{position:absolute;top:var(--space-lg);left:var(--space-lg);display:flex;align-items:center;gap:var(--space-xs);padding:var(--space-xs) var(--space-sm);font-family:var(--font-handwriting);background:transparent;border:none;transition:all var(--transition-base);z-index:10;cursor:pointer}.back-arrow{font-size:1.5rem;font-weight:500;color:var(--color-pencil-faint);transition:color var(--transition-base)}.back-text{font-size:1.125rem;font-weight:400;color:var(--color-pencil-faint);transition:color var(--transition-base)}.back-button:hover .back-arrow,.back-button:hover .back-text{color:var(--color-pencil)}.date-display{display:flex;flex-direction:column;align-items:center;min-width:240px;background:transparent;border:none;cursor:pointer;transition:transform var(--transition-base)}.date-display:hover{transform:scale(1.02)}.calendar-toggle-hint{display:flex;align-items:center;justify-content:center;margin-top:var(--space-xs)}.calendar-toggle-hint svg{width:20px;height:20px;stroke:var(--color-pencil-faint);transition:stroke var(--transition-base)}.date-display:hover .calendar-toggle-hint svg{stroke:var(--color-pencil-light)}.streak-calendar{overflow:hidden;width:100%;max-width:420px;margin:0 auto}.calendar-inner{padding:var(--space-lg) var(--space-md) var(--space-xl);border-top:1px dashed var(--color-ruled-line)}.streak-display{display:flex;align-items:baseline;justify-content:center;gap:var(--space-sm);margin-bottom:var(--space-lg);padding:var(--space-md) var(--space-lg);background:linear-gradient(135deg,#5a7a6014,#5a7a6008);border-radius:12px;position:relative}.streak-flame{font-family:var(--font-handwriting);font-size:2rem;color:var(--color-eraser);transform:rotate(-10deg)}.streak-count{font-family:var(--font-handwriting);font-size:3.5rem;font-weight:700;color:var(--color-ink-green);line-height:1}.streak-label{font-family:var(--font-handwriting);font-size:1.5rem;color:var(--color-pencil-light)}.calendar-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-md)}.calendar-month{font-family:var(--font-handwriting);font-size:1.75rem;font-weight:600;color:var(--color-pencil);margin:0}.month-nav-btn{font-family:var(--font-handwriting);font-size:1.5rem;color:var(--color-pencil-faint);padding:var(--space-sm) var(--space-md);border-radius:8px;transition:all var(--transition-base)}.month-nav-btn:hover{color:var(--color-pencil);background:var(--color-paper-warm)}.calendar-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:var(--space-sm)}.weekday-label{font-family:var(--font-display);font-size:.75rem;font-weight:400;font-style:italic;color:var(--color-pencil-faint);text-align:center;padding:var(--space-xs)}.calendar-grid{display:flex;flex-direction:column;gap:4px}.calendar-week{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.calendar-day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;position:relative;border-radius:8px;background:transparent;border:none;cursor:pointer;transition:all var(--transition-base)}.calendar-day.empty{cursor:default}.calendar-day:not(.empty):hover{background:var(--color-paper-warm)}.day-number{font-family:var(--font-handwriting);font-size:1.25rem;font-weight:500;color:var(--color-pencil-light);z-index:1;transition:color var(--transition-base)}.calendar-day.today .day-number{color:var(--color-pencil);font-weight:700}.calendar-day.selected{background:var(--color-paper-warm);box-shadow:inset 0 0 0 2px var(--color-pencil-faint)}.calendar-day.selected .day-number{color:var(--color-pencil)}.day-mark{position:absolute;inset:4px;pointer-events:none}.complete-mark{color:var(--color-ink-green);opacity:.85}.calendar-day.complete .day-number{color:var(--color-ink-green);font-weight:600}.incomplete-mark{color:var(--color-eraser);opacity:.7}.calendar-day.incomplete .day-number{color:var(--color-pencil-faint)}.calendar-legend{display:flex;justify-content:center;gap:var(--space-xl);margin-top:var(--space-lg);padding-top:var(--space-md);border-top:1px dashed var(--color-ruled-line)}.legend-item{display:flex;align-items:center;gap:var(--space-sm)}.legend-mark{width:24px;height:24px;display:flex;align-items:center;justify-content:center}.legend-mark svg{width:100%;height:100%}.complete-sample{color:var(--color-ink-green)}.incomplete-sample{color:var(--color-eraser)}.legend-text{font-family:var(--font-display);font-size:.75rem;font-style:italic;color:var(--color-pencil-faint)}@media(max-width:480px){.date-display{min-width:auto}.calendar-toggle-hint svg{width:16px;height:16px}.streak-calendar{max-width:100%}.calendar-inner{padding:var(--space-md) var(--space-sm) var(--space-lg)}.streak-count{font-size:2.5rem}.streak-label{font-size:1.25rem}.calendar-month{font-size:1.5rem}.day-number{font-size:1rem}.calendar-legend{gap:var(--space-lg)}}.home-page{justify-content:center;align-items:center}.home-main{flex:1;display:flex;align-items:center;justify-content:center;gap:clamp(2rem,8vw,6rem);padding:var(--space-xl) clamp(1.5rem,5vw,4rem);max-width:1200px;width:100%;margin:0 auto;position:relative;z-index:1;min-height:0}.home-left{flex:1;max-width:480px;display:flex;flex-direction:column;align-items:flex-start}.home-brand{margin-bottom:var(--space-xl);letter-spacing:.35em;text-transform:uppercase;font-size:clamp(.75rem,1.5vw,.9rem)}.brand-tri{font-family:var(--font-display);font-weight:400;color:var(--color-pencil-light)}.brand-streak{font-family:var(--font-display);font-weight:400;color:var(--color-pencil)}.home-headline{font-family:var(--font-handwriting);font-size:clamp(1.75rem,4vw,2.75rem);font-weight:500;color:var(--color-pencil-light);margin:0 0 var(--space-sm);line-height:1.2}.home-subheadline{font-family:var(--font-handwriting);font-size:clamp(2.25rem,5.5vw,3.75rem);font-weight:700;color:var(--color-pencil);margin:0 0 var(--space-lg);line-height:1.1;letter-spacing:-.02em}.home-tagline{font-family:var(--font-display);font-size:clamp(.95rem,1.8vw,1.15rem);font-weight:300;font-style:italic;color:var(--color-pencil-faint);margin:0 0 var(--space-xl);line-height:1.5}.home-cta{display:inline-flex;align-items:center;gap:var(--space-md);padding:var(--space-md) var(--space-xl);background:var(--color-ink-green);border:none;border-radius:50px;cursor:pointer;transition:all var(--transition-base);box-shadow:0 4px 12px #5a7a604d,0 2px 4px #5a7a6033;position:relative;overflow:hidden}.home-cta:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.15) 0%,transparent 50%);pointer-events:none}.home-cta:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 6px 20px #5a7a6059,0 4px 8px #5a7a6040}.home-cta:active{transform:translateY(0) scale(.98);box-shadow:0 2px 8px #5a7a604d,0 1px 3px #5a7a6033}.cta-arrow{font-family:var(--font-handwriting);font-size:1.75rem;font-weight:600;color:#fff;line-height:1;transition:transform var(--transition-base)}.home-cta:hover .cta-arrow{transform:translate(3px)}.cta-text{font-family:var(--font-handwriting);font-size:1.5rem;font-weight:600;color:#fff;transition:transform var(--transition-base)}.home-cta:hover .cta-text{transform:translate(2px)}.home-right{flex:0 0 auto;width:clamp(320px,45vw,480px)}.demo-header{margin-bottom:var(--space-md);text-align:center}.demo-date{font-family:var(--font-handwriting);font-size:clamp(1.75rem,3vw,2.25rem);font-weight:600;color:var(--color-pencil)}.demo-notebook{position:relative;padding:var(--space-lg) 0;border-top:1px solid var(--color-ruled-line);border-bottom:1px solid var(--color-ruled-line)}.demo-notebook:before{content:"";position:absolute;left:64px;top:0;bottom:0;width:1.5px;background:var(--color-eraser-light);opacity:.6}.demo-todo-item{display:flex;align-items:center;gap:var(--space-lg);padding:var(--space-lg) 0;border-bottom:1px solid var(--color-ruled-line);transition:opacity var(--transition-base)}.demo-todo-item:last-child{border-bottom:none}.demo-todo-item.completed{opacity:.7}.demo-numeral{font-family:var(--font-handwriting);font-size:clamp(1.75rem,2.5vw,2.25rem);font-weight:500;color:var(--color-pencil-faint);min-width:56px;text-align:right;padding-right:var(--space-sm);transition:color var(--transition-base)}.demo-numeral.completed{color:var(--color-ink-green)}.demo-input-wrapper{flex:1;min-width:0;padding-left:var(--space-sm);position:relative;display:flex;align-items:center}.typing-cursor{display:inline-block;width:2px;height:1.4em;background-color:var(--color-pencil);margin-left:2px;animation:cursorBlink 1s ease-in-out infinite;flex-shrink:0}@keyframes cursorBlink{0%,50%{opacity:1}51%,to{opacity:0}}.demo-input{flex:1;min-width:0;font-family:var(--font-handwriting);font-size:clamp(1.5rem,2.5vw,2rem);font-weight:500;padding:0;margin:0;color:var(--color-pencil);border:none;border-radius:0;background:transparent;line-height:1.4;min-height:1.4em;display:block;box-sizing:border-box;resize:none;overflow:hidden;field-sizing:content}.demo-input:focus{outline:none}.demo-input::placeholder{color:var(--color-pencil-faint);font-weight:400;opacity:.7}.demo-input.completed{color:var(--color-pencil-light);text-decoration:line-through;text-decoration-color:var(--color-pencil-faint);text-decoration-thickness:2px}.demo-checkbox{width:36px;height:36px;border-radius:50%;border:2px solid var(--color-pencil-faint);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all var(--transition-base);cursor:pointer;background:transparent;position:relative}.demo-checkbox:before{content:"";position:absolute;inset:-2px;border-radius:50%;border:1px solid transparent;transition:all var(--transition-base)}.demo-checkbox:hover{border-color:var(--color-pencil-light);transform:scale(1.08)}.demo-checkbox:hover:before{border-color:var(--color-pencil-faint);transform:rotate(12deg)}.demo-checkbox.checked{background:var(--color-ink-green);border-color:var(--color-ink-green)}.demo-checkbox.checked:before{border-color:transparent}.demo-checkbox svg{width:20px;height:20px;color:#fff}.demo-progress{display:flex;flex-direction:column;align-items:center;gap:var(--space-sm);margin-top:var(--space-lg)}.demo-dots{display:flex;gap:var(--space-md)}.demo-dot{width:10px;height:10px;border-radius:50%;border:2px solid var(--color-pencil-faint);background:transparent;transition:all var(--transition-base)}.demo-dot.filled{background:var(--color-ink-green);border-color:var(--color-ink-green)}.demo-progress-text{font-family:var(--font-display);font-size:.85rem;font-weight:300;font-style:italic;color:var(--color-pencil-faint);letter-spacing:.02em}.demo-todo-view,.demo-calendar-view{display:flex;flex-direction:column;width:100%}.demo-streak-calendar{padding:var(--space-lg);display:flex;flex-direction:column;align-items:center;gap:var(--space-md)}.demo-streak-display{display:flex;align-items:baseline;gap:var(--space-xs);margin-bottom:var(--space-sm)}.demo-streak-flame{font-family:var(--font-handwriting);font-size:2rem;color:var(--color-eraser);transform:rotate(-15deg)}.demo-streak-count{font-family:var(--font-handwriting);font-size:3rem;font-weight:600;color:var(--color-ink-green);line-height:1}.demo-streak-label{font-family:var(--font-handwriting);font-size:1.5rem;color:var(--color-pencil-light)}.demo-calendar-header{margin-bottom:var(--space-sm)}.demo-calendar-month{font-family:var(--font-handwriting);font-size:1.25rem;font-weight:500;color:var(--color-pencil);margin:0;text-align:center}.demo-calendar-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;width:100%;max-width:280px;margin-bottom:var(--space-xs)}.demo-weekday-label{font-family:var(--font-display);font-size:.7rem;font-weight:500;color:var(--color-pencil-faint);text-align:center;text-transform:uppercase;letter-spacing:.05em}.demo-calendar-grid{display:flex;flex-direction:column;gap:2px;width:100%;max-width:280px}.demo-calendar-week{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.demo-calendar-day{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;border-radius:4px;background:transparent;border:none;cursor:default;padding:0}.demo-calendar-day.empty{visibility:hidden}.demo-day-number{font-family:var(--font-handwriting);font-size:.85rem;color:var(--color-pencil-faint);line-height:1;z-index:1}.demo-calendar-day.complete .demo-day-number{color:var(--color-ink-green);font-weight:600}.demo-calendar-day.today{background:var(--color-eraser-light);border-radius:50%}.demo-calendar-day.today .demo-day-number{font-weight:600}.demo-day-check{position:absolute;width:100%;height:100%;color:var(--color-ink-green);opacity:.25}.demo-streak-tagline{font-family:var(--font-handwriting);font-size:1.1rem;color:var(--color-pencil-light);margin-top:var(--space-md);font-style:italic}@media(max-width:900px){.home-main{gap:var(--space-2xl)}.home-right{width:clamp(280px,45vw,380px)}.demo-notebook:before{left:48px}.demo-numeral{min-width:44px}}@media(max-width:700px){.home-main{flex-direction:column;justify-content:flex-start;gap:var(--space-xl);padding:var(--space-lg) var(--space-md);padding-bottom:100px;text-align:center}.home-left{align-items:center;max-width:400px}.home-headline{font-size:1.35rem}.home-subheadline{font-size:2rem;margin-bottom:var(--space-md)}.home-tagline{margin-bottom:var(--space-lg)}.home-right{width:100%;max-width:400px}.demo-date{font-size:1.75rem}.demo-notebook:before{left:44px}.demo-todo-item{padding:var(--space-md) 0;gap:var(--space-md)}.demo-numeral{font-size:1.5rem;min-width:40px}.demo-input{font-size:1.35rem}.demo-checkbox{width:32px;height:32px}.demo-checkbox svg{width:18px;height:18px}.home-cta{position:fixed;bottom:var(--space-lg);left:0;right:0;margin:0 auto;width:fit-content;padding:var(--space-sm) var(--space-lg);z-index:100}.cta-arrow{font-size:1.5rem}.cta-text{font-size:1.25rem}}@media(max-width:400px){.home-main{padding:var(--space-md) var(--space-sm);gap:var(--space-lg)}.home-brand{margin-bottom:var(--space-md);font-size:.7rem}.home-headline{font-size:1.2rem}.home-subheadline{font-size:1.75rem}.home-tagline{font-size:.8rem;margin-bottom:var(--space-md)}.home-right{max-width:340px}.demo-notebook:before{left:36px}.demo-numeral{font-size:1.35rem;min-width:32px}.demo-input{font-size:1.25rem}.demo-checkbox{width:28px;height:28px}}