@import"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600&display=swap";:root{font-family:Space Grotesk,sans-serif;line-height:1.4;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--ink);background-color:var(--bg);--bg: #ffffff;--ink: #1f1f1f;--ink-soft: #4a4a4a;--thread-work: #1f77b4;--thread-school: #ff7f0e;--thread-projects: #2ca02c;--thread-learning: #d62728;--thread-relationships: #9467bd;--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:var(--bg)}#root{min-height:100vh}.app{min-height:100vh;display:flex;flex-direction:column;justify-content:center;gap:clamp(2rem,6vw,4rem);padding:clamp(2rem,5vw,5rem);position:relative;background:var(--bg)}.timeline-scroll{overflow-x:auto;padding-bottom:1.5rem;padding-left:0;padding-right:max(0px,calc(50vw - (var(--day-width) / 2)));scrollbar-width:none;position:relative;z-index:1;width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);flex:1;display:flex;flex-direction:column}.timeline-scroll::-webkit-scrollbar{display:none}.timeline{min-width:max(100%,calc(var(--day-count) * var(--day-width)));display:flex;flex-direction:column;gap:clamp(2rem,5vw,3.5rem);flex:1}.streams-stage{position:relative;z-index:1;width:100%;display:flex;flex-direction:column;justify-content:center;flex:1;min-height:calc((var(--row-count) * var(--row-height)) + ((var(--row-count) - 1) * var(--row-gap)))}.streams-content{position:relative}.streams-svg{position:absolute;left:0;top:0;width:calc(var(--day-count) * var(--day-width));height:100%;overflow:visible;pointer-events:none}.stream-path{fill:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;opacity:.6}.stream-path.is-active{opacity:.9}.streams-rows{position:relative;display:grid;grid-auto-rows:var(--row-height);gap:var(--row-gap)}.stream-slot{position:relative;pointer-events:none}.stream-dot{position:absolute;left:var(--active-x);top:50%;width:10px;height:10px;border-radius:999px;transform:translate(-50%,-50%);background:var(--thread-color);box-shadow:0 0 0 2px #f5f2ece6;cursor:grab;touch-action:none;transition:transform .15s ease,box-shadow .15s ease;-webkit-user-select:none;user-select:none;pointer-events:auto}.stream-dot.is-dragging{cursor:grabbing;transform:translate(-50%,-50%) scale(1.25);box-shadow:0 0 0 2px #f5f2ece6,0 8px 18px #121c202e}.time-axis{position:relative;height:40px;z-index:1}.axis-line{position:absolute;left:0;width:calc((var(--active-index, 0) + .5) * var(--day-width));top:50%;height:1px;background:#2b2b264d;transform:translateY(-50%)}.axis-dot{position:absolute;left:calc((var(--active-index, 0) + .5) * var(--day-width));top:50%;width:8px;height:8px;border-radius:999px;transform:translate(-50%,-50%);background:#121c20d9;box-shadow:0 0 0 3px #f5f2ece6}.axis-ticks{position:absolute;inset:0;display:flex}.tick{display:grid;justify-items:center;align-content:center;gap:.35rem;height:100%;flex:0 0 var(--day-width);width:var(--day-width);color:#2b2b26b3;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;text-align:center}.tick-mark{width:1px;height:10px;background:#2b2b2666}.tick-label{white-space:nowrap}.tick.is-today,.tick.is-active{color:#121c20f2;font-weight:600}.tick.is-active .tick-mark{height:14px;background:#121c20bf}.tick.is-today .tick-mark{height:16px;background:#121c20e6}.time-controls{position:fixed;left:50%;bottom:max(.75rem,env(safe-area-inset-bottom));transform:translate(-50%);z-index:5;display:inline-flex;align-items:center;gap:.5rem}.time-button{z-index:5;border:none;border-radius:999px;width:3rem;height:3rem;padding:0;display:inline-flex;align-items:center;justify-content:center;background:transparent;color:#121c20e6;cursor:pointer;transition:transform .15s ease,background-color .15s ease,color .15s ease}.time-button:hover{background:#121c2014;color:#121c20}.time-button:active{transform:scale(.96)}.time-button:focus-visible{outline:2px solid rgba(18,28,32,.45);outline-offset:4px}.time-button-icon{width:26px;height:26px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
