:root{color-scheme:light;--ink:#1d1e1b;--muted:#77786f;--paper:#f4f1e9;--surface:#fbfaf6;--line:#d4d0c5;--line-soft:#e6e1d7;--positive:#26735d;--positive-soft:#dbeae3;--negative:#bb5545;--negative-soft:#f1ded9;--shadow:0 24px 65px rgba(48,43,34,.14)}
*{box-sizing:border-box}html{min-width:320px}body{margin:0;min-height:100vh;overflow-x:hidden;background:var(--paper);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,input,textarea{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid rgba(230,171,54,.55);outline-offset:3px}[hidden]{display:none!important}.icon{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}.shell{min-height:100vh;padding:22px clamp(18px,3.5vw,58px) 44px}.topbar{max-width:1480px;margin:0 auto;min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;gap:10px;align-items:center;border:0;padding:0;background:transparent;color:var(--ink);font-weight:720;letter-spacing:-.025em}.brand-mark{width:29px;height:29px;border-radius:9px;display:grid;place-items:center;background:var(--ink);color:var(--paper);font-size:1.1rem}.top-actions{display:flex;align-items:center;gap:6px}.tool-button{min-height:40px;display:flex;align-items:center;gap:8px;padding:0 12px;border:1px solid transparent;border-radius:10px;background:transparent;color:#62635c;font-size:.86rem;transition:.18s ease}.tool-button:hover{color:var(--ink);background:rgba(255,255,255,.55);border-color:var(--line-soft)}.file-input{display:none}
.onboarding{max-width:1480px;margin:clamp(48px,9vh,96px) auto 0}.onboarding-copy{max-width:710px}.eyebrow{color:var(--muted);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:650}h1{margin:14px 0;max-width:700px;font-family:Georgia,"Times New Roman",serif;font-size:clamp(3.4rem,7.6vw,7.3rem);line-height:.89;letter-spacing:-.06em;font-weight:500}.lead{max-width:580px;font-size:clamp(1rem,1.5vw,1.2rem);line-height:1.65;color:#606159}.setup{margin-top:34px;display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}.field{display:grid;gap:8px;color:#65665f;font-size:.83rem;font-weight:600}.field input,.field textarea{width:100%;border:1px solid var(--line);border-radius:11px;background:var(--surface);color:var(--ink);transition:border .18s,box-shadow .18s}.field input{min-height:49px;padding:0 14px}.field textarea{min-height:104px;padding:13px 14px;line-height:1.5;resize:vertical}.field input:focus,.field textarea:focus{border-color:#aaa69c;box-shadow:0 0 0 4px rgba(29,30,27,.05);outline:0}.birth-field{min-width:230px}.primary{min-height:49px;border:0;border-radius:11px;padding:0 19px;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--ink);color:white;font-weight:680;transition:transform .18s,background .18s}.primary:hover{transform:translateY(-2px);background:#363731}.primary:disabled{opacity:.45;cursor:not-allowed;transform:none}.preview-line{position:relative;margin-top:clamp(66px,12vh,128px);height:165px;opacity:.78}.preview-axis{position:absolute;left:0;right:0;top:50%;height:1px;background:var(--ink)}.preview-axis:before,.preview-axis:after{content:"";position:absolute;top:50%;width:9px;height:9px;border-radius:50%;background:var(--ink);transform:translateY(-50%)}.preview-axis:before{left:0}.preview-axis:after{right:0}.ghost-point{position:absolute;top:24px;left:42%;width:1px;height:60px;background:var(--positive);animation:ghost 3s ease-in-out infinite}.ghost-point:before{content:"";position:absolute;top:-6px;left:-6px;width:13px;height:13px;border-radius:50%;background:var(--positive);box-shadow:0 0 0 7px rgba(38,115,93,.12)}.preview-dates{position:absolute;top:calc(50% + 18px);left:0;right:0;display:flex;justify-content:space-between;color:var(--muted);font-size:.8rem}@keyframes ghost{50%{transform:translateY(-8px)}}
.workspace{max-width:1480px;margin:30px auto 0;animation:enter .45s ease both}@keyframes enter{from{opacity:0;transform:translateY(8px)}}.workspace-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:34px 0 18px}.workspace-head h1{margin:0;font-size:clamp(2.25rem,4.5vw,4.7rem);line-height:.95}.timeline-meta{display:flex;align-items:center;gap:9px;margin-top:12px;color:var(--muted);font-size:.88rem}.dot-separator{width:3px;height:3px;background:var(--muted);border-radius:50%}.link-button{border:0;background:transparent;padding:2px 0;color:var(--muted);text-decoration:underline;text-underline-offset:3px;font-size:inherit}.link-button:hover{color:var(--ink)}.add-button{flex:0 0 auto}.timeline-card{position:relative;overflow:hidden;min-height:580px;border:1px solid var(--line-soft);border-radius:22px;background:rgba(251,250,246,.77);box-shadow:0 1px 0 rgba(255,255,255,.8) inset}.legend{position:absolute;top:20px;left:22px;z-index:3;display:flex;gap:16px;font-size:.76rem;color:var(--muted);pointer-events:none}.legend span{display:flex;gap:7px;align-items:center}.legend i{display:block;width:8px;height:8px;border-radius:50%}.legend .pos{background:var(--positive)}.legend .neg{background:var(--negative)}.timeline-scroll{position:absolute;inset:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:var(--line) transparent}.timeline{position:relative;min-width:940px;height:100%;min-height:580px;margin:0 38px;user-select:none}.axis-line{position:absolute;left:0;right:0;top:50%;height:2px;background:var(--ink);transform:translateY(-1px)}.axis-end{position:absolute;top:50%;width:12px;height:12px;border-radius:50%;background:var(--ink);transform:translate(-50%,-50%);z-index:2}.axis-end.start{left:0}.axis-end.today{left:100%}.grid-line{position:absolute;left:0;right:0;height:1px;background:var(--line-soft)}.axis-tick{position:absolute;top:50%;width:1px;height:9px;background:#9c9c94;transform:translate(-50%,-50%)}.tick-label{position:absolute;top:calc(50% + 18px);color:var(--muted);font-size:.72rem;transform:translateX(-50%);white-space:nowrap}.endpoint-label{position:absolute;top:calc(50% + 39px);display:grid;gap:2px;font-size:.76rem}.endpoint-label strong{font-size:.8rem;color:var(--ink)}.endpoint-label span{color:var(--muted)}.endpoint-label.start{left:0;text-align:left}.endpoint-label.today{right:0;text-align:right}
.moment{position:absolute;width:1px;top:50%;z-index:4;animation:point-in .3s ease both}@keyframes point-in{from{opacity:0;transform:scaleY(.5)}}.moment-stem{position:absolute;left:0;width:1px;background:currentColor;opacity:.68;pointer-events:none}.moment.positive{color:var(--positive)}.moment.negative{color:var(--negative)}.moment-dot{position:absolute;left:0;width:14px;height:14px;padding:0;border:3px solid var(--surface);border-radius:50%;background:currentColor;box-shadow:0 0 0 2px currentColor,0 4px 14px rgba(0,0,0,.16);transform:translate(-50%,-50%);transition:transform .16s,box-shadow .16s;cursor:grab;touch-action:none}.moment-dot:hover,.moment-dot:focus-visible,.moment.active .moment-dot{transform:translate(-50%,-50%) scale(1.26);box-shadow:0 0 0 5px color-mix(in srgb,currentColor 18%,transparent),0 5px 18px rgba(0,0,0,.15)}.moment.dragging{z-index:10}.moment.dragging .moment-dot{cursor:grabbing;transform:translate(-50%,-50%) scale(1.32);box-shadow:0 0 0 7px color-mix(in srgb,currentColor 18%,transparent),0 8px 24px rgba(0,0,0,.2)}.moment.dragging .moment-title{opacity:.62}.moment-title{position:absolute;width:max-content;max-width:150px;color:var(--ink);font-size:.76rem;font-weight:700;line-height:1.25;transform:translateX(-50%);text-align:center;pointer-events:none;transition:opacity .16s}.moment.positive .moment-title{bottom:calc(100% + 12px)}.moment.negative .moment-title{top:calc(100% + 12px)}.moment-title small{display:block;margin-top:3px;color:var(--muted);font-size:.66rem;font-weight:500}@keyframes guide-in{from{opacity:0}to{opacity:.72}}
.popover{position:fixed;z-index:20;width:min(330px,calc(100vw - 28px));padding:17px;border:1px solid var(--line);border-radius:15px;background:var(--surface);box-shadow:var(--shadow);animation:pop .16s ease both}@keyframes pop{from{opacity:0;transform:translateY(4px) scale(.98)}}.popover-kicker{margin-bottom:7px;color:var(--muted);font-size:.72rem}.popover h3{margin:0;font-family:Georgia,serif;font-size:1.35rem;font-weight:500}.popover p{margin:10px 0 14px;color:#5e5f58;font-size:.86rem;line-height:1.52;white-space:pre-wrap}.popover-actions{display:flex;gap:8px}.small-button{min-height:35px;padding:0 11px;border:1px solid var(--line);border-radius:9px;background:transparent;color:var(--ink);font-size:.8rem}.small-button:hover{background:var(--paper)}.small-button.delete{color:var(--negative);margin-left:auto}
.scrim{position:fixed;inset:0;z-index:30;background:rgba(29,30,27,.26);backdrop-filter:blur(3px);animation:fade .2s ease both}@keyframes fade{from{opacity:0}}.panel{position:fixed;top:0;right:0;z-index:31;width:min(460px,100%);height:100dvh;overflow:auto;padding:24px 25px 30px;background:var(--surface);box-shadow:-24px 0 70px rgba(28,28,24,.16);animation:slide .28s cubic-bezier(.22,.8,.25,1) both}@keyframes slide{from{transform:translateX(100%)}}.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}.panel-head h2{margin:0;font-family:Georgia,serif;font-size:1.65rem;font-weight:500}.icon-button{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line-soft);border-radius:50%;background:transparent;color:var(--muted)}.icon-button:hover{color:var(--ink);background:var(--paper)}.moment-form{display:grid;gap:19px}.form-actions{display:flex;gap:10px;margin-top:8px}.form-actions .primary{flex:1}.secondary{min-height:49px;padding:0 17px;border:1px solid var(--line);border-radius:11px;background:transparent;color:var(--ink);font-weight:630}.secondary:hover{background:var(--paper)}.form-error{min-height:20px;margin:0;color:var(--negative);font-size:.8rem}.toast{position:fixed;left:50%;bottom:24px;z-index:60;max-width:calc(100vw - 32px);padding:12px 16px;border-radius:12px;background:var(--ink);color:white;box-shadow:0 12px 35px rgba(0,0,0,.22);font-size:.84rem;transform:translateX(-50%);animation:toast-in .25s ease both}@keyframes toast-in{from{opacity:0;transform:translate(-50%,12px)}}
@media(max-width:760px){.shell{padding:17px 15px 28px}.tool-button span{display:none}.tool-button{width:40px;padding:0;justify-content:center}.onboarding{margin-top:58px}h1{font-size:clamp(3.2rem,16vw,5.2rem)}.setup>*{width:100%}.workspace{margin-top:18px}.workspace-head{align-items:flex-start;margin-top:27px}.workspace-head h1{font-size:2.8rem}.timeline-meta{flex-wrap:wrap;gap:7px}.add-button{width:49px;padding:0}.add-button span{display:none}.timeline-card{min-height:520px;border-radius:17px}.timeline{min-height:520px;margin:0 25px}.legend{left:17px;top:16px}.hint{display:none}.moment-title{max-width:115px;font-size:.7rem}.panel{padding:20px 18px 26px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
.moment{top:0;height:100%}
.moment-path{position:absolute;inset:0;width:100%;height:100%;z-index:3;overflow:visible;pointer-events:none}
.moment-path polyline{fill:none;stroke:var(--ink);stroke-width:1.35;stroke-dasharray:5 7;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;opacity:.42}
.moment-title{bottom:auto!important;transform:none}
.moment.positive .moment-title{transform:translate(-50%,calc(-100% - 14px))}
.moment.negative .moment-title{transform:translate(-50%,14px)}
.hover-preview{position:absolute;top:0;height:100%;width:1px;z-index:5;color:var(--positive);pointer-events:none;animation:guide-in .12s ease both}
.hover-preview.negative{color:var(--negative)}
.hover-preview-stem{position:absolute;left:0;width:1px;background:currentColor;opacity:.65}
.hover-preview-dot{position:absolute;left:0;width:15px;height:15px;border:3px solid var(--surface);border-radius:50%;background:currentColor;box-shadow:0 0 0 2px currentColor,0 4px 14px rgba(0,0,0,.14);transform:translate(-50%,-50%)}
.hover-preview-date{position:absolute;left:0;width:max-content;padding:5px 8px;border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--ink);font-size:.7rem;font-weight:650;box-shadow:0 5px 16px rgba(35,32,27,.08)}
.hover-preview.positive .hover-preview-date{transform:translate(-50%,calc(-100% - 16px))}
.hover-preview.negative .hover-preview-date{transform:translate(-50%,16px)}
.timeline-card.previewing{cursor:crosshair}
.workspace{max-width:none;margin-top:18px}
.workspace-head{margin-top:24px;margin-bottom:8px}
.timeline-card{height:calc(100dvh - 205px);min-height:640px;border:0;border-radius:0;background:transparent;box-shadow:none}
.timeline{min-height:100%;margin:0 14px}
.legend{left:7px;top:14px}
.topbar{max-width:none}
.moment.edge-start .moment-title{transform:translate(0,14px)}
.moment.positive.edge-start .moment-title{transform:translate(0,calc(-100% - 14px))}
.moment.edge-end .moment-title{transform:translate(-100%,14px)}
.moment.positive.edge-end .moment-title{transform:translate(-100%,calc(-100% - 14px))}
.hover-preview.positive.edge-start .hover-preview-date{transform:translate(0,calc(-100% - 16px))}
.hover-preview.negative.edge-start .hover-preview-date{transform:translate(0,16px)}
.hover-preview.positive.edge-end .hover-preview-date{transform:translate(-100%,calc(-100% - 16px))}
.hover-preview.negative.edge-end .hover-preview-date{transform:translate(-100%,16px)}
@media(max-width:760px){.workspace{margin-top:8px}.workspace-head{margin-top:18px;margin-bottom:4px}.timeline-card{height:calc(100dvh - 170px);min-height:560px;border-radius:0}.timeline{min-height:100%;margin:0 12px}.legend{left:5px}}