@font-face {
  font-family:Inter;
  src:url('assets/inter.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

/* Source: DESIGN.md. Semantic aliases below adapt the supplied system to a timeline. */
:root {
  --color-rausch:#ff385c;
  --color-rausch-600:#e00b41;
  --color-hof:#222222;
  --color-foggy:#6a6a6a;
  --color-grey-500:#c1c1c1;
  --color-bebe:#ebebeb;
  --color-deco:#dddddd;
  --color-faint:#f7f7f7;
  --color-white:#ffffff;
  --font-airbnb-cereal-vf:'Airbnb Cereal VF',Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --text-caption:11px;
  --text-ui:16px;
  --text-subheading:20px;
  --text-heading-sm:22px;
  --text-heading:28px;
  --spacing-unit:4px;
  --spacing-4:4px;
  --spacing-8:8px;
  --spacing-12:12px;
  --spacing-16:16px;
  --spacing-20:20px;
  --spacing-24:24px;
  --spacing-28:28px;
  --spacing-32:32px;
  --spacing-40:40px;
  --spacing-44:44px;
  --spacing-48:48px;
  --radius-cards:12px;
  --radius-buttons:9999px;
  --radius-badges:9999px;
  --radius-avatars:9999px;
  --shadow-subtle:0 0 0 1px rgb(0 0 0 / .02),0 2px 6px rgb(0 0 0 / .04),0 4px 8px rgb(0 0 0 / .1);
  --surface-canvas:#f5f7fa;
  --surface-card:var(--color-white);
  --surface-inverse:var(--color-hof);
  --action-fill:#2e5b8e;
  --action-soft:#e7f0fa;
  --complete:#2d7053;
  --ongoing-surface:#eaf0f5;
  /* Glass is the intentional extension to the supplied flat-surface system. */
  --surface-glass:rgb(255 255 255 / .64);
  --glass-blur:12px;
  --week-1:rgb(46 91 142 / .12);
  --week-2:rgb(46 91 142 / .075);
  --week-3:rgb(46 91 142 / .045);
  --week-4:rgb(46 91 142 / .025);
  --label-width:264px;
  --ongoing-width:88px;
  --ongoing-gap:12px;
  --edge-width:calc(var(--ongoing-width) + 2 * var(--ongoing-gap));
  --day-min:36px;
  --header-height:204px;
  --day-count:28;
  --ease:cubic-bezier(.2,.7,.2,1);
  --duration-fast:100ms;
  color:var(--color-hof);
  background:var(--surface-canvas);
  font-family:var(--font-airbnb-cereal-vf);
  font-size:14px;
  line-height:1.43;
  font-feature-settings:'salt' on;
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; overflow:hidden; }
button { color:inherit; font:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
button:focus-visible { outline:2px solid var(--color-hof); outline-offset:3px; }
html[data-input='pointer'] button:focus-visible { outline:none; }
svg { width:20px; height:20px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.icon-library { position:absolute; width:0; height:0; overflow:hidden; }
.timeline-viewport {
  height:100dvh; width:100%; overflow:auto; overflow-anchor:none;
  padding:0 var(--spacing-32); overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-color:var(--color-grey-500) transparent;
  background:radial-gradient(ellipse 80% 320px at 80% 0,#dfeaf5,transparent 85%),var(--surface-canvas);
}
.timeline-grid {
  --track-columns:var(--edge-width) repeat(var(--day-count),minmax(var(--day-min),1fr));
  position:relative; isolation:isolate; width:100%;
  min-width:calc(var(--label-width) + var(--edge-width) + var(--day-count) * var(--day-min));
  padding-bottom:var(--spacing-40);
}
.timeline-grid::before {
  content:''; position:absolute; left:calc(var(--label-width) + var(--ongoing-gap)); top:var(--header-height); bottom:var(--spacing-40);
  width:var(--ongoing-width); background:var(--ongoing-surface); border-radius:var(--radius-cards);
  box-shadow:inset 0 0 0 1px rgb(46 91 142 / .06); pointer-events:none;
}
.calendar-header {
  height:var(--header-height); padding:16px 0; position:sticky; top:0; z-index:30;
  background:transparent;
}
.calendar-axis { display:grid; grid-template-columns:var(--label-width) minmax(0,1fr); }
.calendar-label { position:sticky; left:0; z-index:4; background:var(--surface-canvas); }
.calendar-tools {
  position:sticky; left:0; width:min(100%,var(--viewport-width,100%)); height:44px; margin-bottom:16px;
  display:flex; align-items:center; justify-content:space-between; gap:24px; padding:0 4px;
  background:var(--surface-canvas); box-shadow:0 -16px 0 var(--surface-canvas),0 8px 0 var(--surface-canvas); z-index:5;
}
.view-controls { display:flex; align-items:center; gap:12px; min-width:0; }
.viewing-context { display:flex; align-items:center; gap:6px; min-width:0; font-size:12px; }
.viewing-prefix { color:var(--color-foggy); }
.viewing-value { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500; }
.data-freshness { color:var(--color-foggy); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:45%; }
.data-freshness[data-state='live'] { color:var(--complete); }
.data-freshness[data-state='stale'],.data-freshness[data-state='offline'] { color:#946518; }
.clear-selection {
  display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:8px 12px;
  border:0; border-radius:var(--radius-buttons); background:transparent; color:var(--action-fill); font-size:12px; white-space:nowrap;
}
.clear-selection svg { width:14px; height:14px; }
.clear-selection:hover { background:var(--action-soft); }
.calendar-scale { display:grid; grid-template-columns:var(--track-columns); min-width:0; align-items:start; }
.calendar-core { grid-column:2 / span var(--day-count); min-width:0; height:112px; background:var(--surface-card); box-shadow:inset 0 0 0 1px rgb(255 255 255 / .72),0 4px 16px rgb(46 91 142 / .045); }
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .calendar-core { background:linear-gradient(115deg,rgb(221 234 247 / .4),rgb(255 255 255 / .12)),var(--surface-glass); backdrop-filter:blur(var(--glass-blur)); -webkit-backdrop-filter:blur(var(--glass-blur)); }
}
.week-labels { display:grid; grid-template-columns:repeat(var(--day-count),minmax(0,1fr)); margin-bottom:16px; height:16px; }
.week-caption { padding-left:8px; font-size:12px; color:var(--color-foggy); }
.week-caption:first-child { color:var(--color-hof); font-weight:500; }
.day-header { display:grid; grid-template-columns:repeat(var(--day-count),minmax(0,1fr)); height:56px; }
.day-shell { position:relative; min-width:0; height:56px; }
/* Fixed hit areas; the magnetic effect only transforms these inner visuals. */
.date-block { position:absolute; inset:-12px 0 0; width:100%; height:68px; padding:0; border:0; background:transparent; }
.date-visual {
  position:absolute; left:0; bottom:0; width:100%; height:56px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  background:var(--week-fill); pointer-events:none;
  transform:translateY(var(--lift,0px)) scale(var(--scale,1)); transform-origin:center bottom;
  transition:transform 90ms var(--ease),background-color var(--duration-fast),color var(--duration-fast);
}
.is-weekend { --weekend-pattern:repeating-linear-gradient(135deg,transparent 0 4px,rgb(34 34 34 / .045) 4px 5px); }
.is-weekend .date-visual { background-image:var(--weekend-pattern); }
.is-week-start .date-visual { border-left:1px solid rgb(255 255 255 / .9); }
.day-number { font-size:16px; font-weight:500; font-variant-numeric:tabular-nums; line-height:1; }
.day-name { font-size:var(--text-caption); line-height:1.18; color:var(--color-foggy); }
.is-today .date-visual::after { content:''; position:absolute; bottom:-7px; width:16px; height:2px; background:var(--action-fill); border-radius:var(--radius-badges); }
.day-shell.is-focused .date-visual { box-shadow:inset 0 -2px var(--action-fill); }
.date-block[aria-pressed='true'] .date-visual { background:var(--action-fill); color:var(--color-white); box-shadow:none; }
.date-block[aria-pressed='true'] .day-name { color:var(--color-white); }
.month-labels { display:grid; grid-template-columns:repeat(var(--day-count),minmax(0,1fr)); height:24px; padding-top:8px; }
.month-label { padding-left:8px; font-size:12px; color:var(--color-foggy); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.edge-head {
  grid-column:1; grid-row:1; align-self:start; margin-top:32px; margin-left:var(--ongoing-gap); width:var(--ongoing-width); min-height:56px;
  display:flex; justify-content:center; align-items:center; gap:6px;
  min-width:0; padding:8px; border:1px solid rgb(46 91 142 / .1); border-radius:var(--radius-cards); background:var(--ongoing-surface);
  font-size:12px; font-weight:500;
}
.edge-head svg { width:16px; height:16px; }
.edge-head.is-focused { box-shadow:inset 0 -2px var(--action-fill); }
.edge-head[aria-pressed='true'] { background:var(--action-fill); color:var(--color-white); border-color:var(--action-fill); }
.lane { position:relative; }
.timeline-row { display:grid; grid-template-columns:var(--label-width) minmax(0,1fr); position:relative; }
.lane-heading-row { min-height:120px; }
.lane-heading { position:sticky; left:0; z-index:5; background:var(--surface-canvas); padding:20px 24px 16px 0; }
.lane-toggle { display:flex; align-items:center; gap:8px; width:100%; min-height:44px; padding:0 4px; border:0; border-radius:8px; background:transparent; text-align:left; }
.lane-toggle:hover { background:var(--color-bebe); }
.lane-toggle svg { width:14px; height:14px; color:var(--color-foggy); transform:rotate(0); transition:transform var(--duration-fast) var(--ease); }
.lane.is-expanded .lane-toggle svg { transform:rotate(90deg); }
.lane-name { font-size:var(--text-heading-sm); line-height:1.18; font-weight:500; letter-spacing:-.02em; }
.lane-summary { max-width:216px; margin:4px 0 0 26px; color:var(--color-foggy); font-size:12px; line-height:1.5; }
.has-day-selection .lane-heading-row { min-height:72px; }
.has-day-selection .lane-heading { padding-top:12px; padding-bottom:12px; }
.has-day-selection .lane-summary { display:none; }
.track { position:relative; display:grid; grid-template-columns:var(--track-columns); min-width:0; }
.day-cell { position:relative; display:flex; align-items:center; justify-content:center; min-width:0; }
.day-cell::before { content:''; width:3px; height:3px; border-radius:50%; background:var(--color-deco); }
.day-cell--earlier::before { background:var(--color-grey-500); }
.connection { position:absolute; left:0; top:50%; height:1px; pointer-events:none; z-index:1; background:repeating-linear-gradient(90deg,var(--color-foggy) 0 2px,transparent 2px 6px); opacity:0; transition:opacity var(--duration-fast); }
.task-row:is(.is-active,.is-previewed,.is-selected) .connection { opacity:.65; }
.task-row.is-selected .connection { background:repeating-linear-gradient(90deg,var(--action-fill) 0 2px,transparent 2px 6px); }
.task-row[data-column='0'] .connection { display:none; }
.lane-heading-row.is-connected .connection { opacity:.4; }
.task-row { min-height:112px; scroll-margin-top:var(--header-height); }
.card-slot { position:sticky; left:0; z-index:4; padding:8px 24px 8px 24px; background:var(--surface-canvas); display:flex; align-items:center; }
.task-card { position:relative; width:100%; min-height:88px; padding:12px; border:0; border-radius:var(--radius-cards); background:var(--surface-card); text-align:left; transition:background-color var(--duration-fast); }
.task-title { display:block; color:var(--color-hof); font-size:14px; font-weight:500; line-height:1.43; overflow-wrap:anywhere; }
.task-meta { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-top:12px; }
.spocs { display:flex; align-items:center; min-height:24px; flex-shrink:0; }
.avatar { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; margin-left:-6px; border:2px solid var(--surface-card); border-radius:var(--radius-avatars); background:var(--color-bebe); color:var(--color-foggy); font-size:var(--text-caption); font-weight:500; }
.avatar:first-child { margin-left:0; }
.avatar-name { display:none; }
.unassigned { font-size:12px; color:var(--color-foggy); }
.task-status { display:inline-flex; align-items:center; gap:4px; color:var(--color-foggy); font-size:12px; line-height:1.3; }
.task-status svg { width:16px; height:16px; }
.task-status[data-status='gathering'] svg { color:#946518; }
.task-status[data-status='drafting'] svg { color:#315da8; }
.task-status[data-status='design'] svg { color:#69509a; }
.task-status[data-status='review'] svg { color:#246b5a; }
.task-status[data-status='complete'] svg { color:var(--complete); }
.task-row.is-active .task-card,.task-row.is-previewed .task-card { background:#edf3f9; }
.task-row.is-selected .task-card { box-shadow:inset 3px 0 var(--action-fill); }
.task-row:is(.is-active,.is-previewed) .avatar { border-color:#edf3f9; background:var(--surface-card); }
.marker {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:3;
  display:inline-flex; align-items:center; justify-content:center; width:100%; max-width:44px; min-height:44px;
  padding:4px 0; border:0; border-radius:8px; color:var(--color-hof); background:transparent;
  transition:background-color var(--duration-fast),color var(--duration-fast);
}
.format-stack { display:inline-flex; align-items:center; justify-content:center; pointer-events:none; }
.deliverable { --format-fill:#ebebeb; --format-ink:#6a6a6a; position:relative; display:inline-flex; align-items:center; justify-content:center; flex:0 0 20px; width:20px; height:20px; margin-left:-14px; background:var(--format-fill); color:var(--format-ink); border:1px solid var(--color-white); border-radius:50%; }
.deliverable[data-format='Slides'] { --format-fill:#fff2d6; --format-ink:#8a570c; }
.deliverable[data-format='PDF'] { --format-fill:#ffe7e3; --format-ink:#a73c35; }
.deliverable[data-format='Blog'] { --format-fill:#f7e6ef; --format-ink:#8e4f70; }
.deliverable[data-format='Doc'] { --format-fill:#e7f0ff; --format-ink:#315da8; }
.deliverable[data-format='Social'] { --format-fill:#eee8ff; --format-ink:#69509a; }
.deliverable[data-format='Newsletter'] { --format-fill:#eef3dc; --format-ink:#5b6c2d; }
.deliverable[data-format='HTML'] { --format-fill:#e1f1f6; --format-ink:#2d6176; }
.deliverable[data-format='Form'] { --format-fill:#fcead9; --format-ink:#995823; }
.deliverable[data-format='Email'] { --format-fill:#e1f3ee; --format-ink:#246b5a; }
.deliverable[data-format='Video'] { --format-fill:#e6e9fa; --format-ink:#4d5593; }
.deliverable:first-child { margin-left:0; z-index:3; }
.deliverable:nth-child(2) { z-index:2; }
.deliverable:nth-child(3) { z-index:1; }
.deliverable svg { width:14px; height:14px; transition:transform var(--duration-fast) var(--ease); }
.marker:is(.is-active,.is-previewed) { background:var(--action-soft); }
.marker.is-active .deliverable svg { transform:translateY(-1px); }
.marker.is-selected { box-shadow:inset 0 0 0 1.5px var(--action-fill); }
/* Hierarchy is local to this category. No blanket opacity or disabled-looking targets. */
.lane.is-expanded > .lane-heading-row .marker { color:var(--color-foggy); }
.lane.is-expanded > .lane-heading-row .marker:is(:hover,:focus-visible,.is-active,.is-selected) { color:var(--color-hof); }
.lane.is-expanded > .lane-heading-row .deliverable { background:color-mix(in srgb,var(--format-fill) 70%,white); }
.completion-mark { position:absolute; right:0; bottom:0; width:14px; height:14px; display:flex; align-items:center; justify-content:center; border:2px solid var(--surface-canvas); border-radius:50%; color:var(--color-white); background:var(--complete); }
.completion-mark svg { width:10px; height:10px; stroke-width:2; }
.completion-mark--partial { color:var(--complete); background:var(--surface-card); }
.completion-mark--partial svg { width:12px; height:12px; }
.date-guide { position:absolute; top:var(--header-height); bottom:24px; width:1px; pointer-events:none; z-index:2; background:repeating-linear-gradient(180deg,var(--action-fill) 0 2px,transparent 2px 6px); opacity:.35; }
.screen-reader-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media(min-width:1700px) { :root { --label-width:280px; --ongoing-width:104px; } .timeline-viewport { padding:0 40px; } }
@media(min-width:901px) and (max-width:1400px) { :root { --label-width:232px; --day-min:32px; } }
@media(max-width:900px) {
  :root { --label-width:208px; }
  .timeline-viewport { padding:0 16px; }
  .lane-heading { padding-right:16px; }
  .lane-summary { max-width:158px; }
  .card-slot { padding-left:24px; padding-right:16px; }
  .lane-name { font-size:20px; }
}
@media(max-width:650px),(any-pointer:coarse) {
  :root { --day-min:44px; }
  .spocs { flex-wrap:wrap; gap:4px; flex-shrink:1; }
  .avatar { width:auto; height:auto; min-height:24px; border:0; margin:0; padding:3px 6px; border-radius:var(--radius-badges); font-size:12px; }
  .avatar-name { display:inline; }
  .avatar-initials { display:none; }
}
@media(max-width:650px) {
  :root { --label-width:176px; }
  .timeline-viewport { padding:0 8px; }
  .calendar-tools { gap:8px; }
  .view-controls { gap:4px; }
  .clear-selection { padding:8px; }
  .lane-heading { padding-left:0; padding-right:8px; }
  .lane-toggle { gap:4px; padding-left:0; }
  .lane-name { font-size:20px; }
  .lane-summary { margin-left:18px; max-width:145px; }
  .card-slot { padding-left:12px; padding-right:8px; }
  .task-meta { gap:6px; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}
@media(prefers-reduced-transparency:reduce) {
  .calendar-core { background:var(--surface-card); backdrop-filter:none; -webkit-backdrop-filter:none; }
}
@media(forced-colors:active) {
  .marker.is-selected,.task-row.is-selected .task-card,.date-block[aria-pressed='true'] { outline:2px solid Highlight; }
}