*, ::before, ::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/* ! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com */*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}::after,::before{--tw-content:''}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.mt-2{margin-top:0.5rem}.bg-gradient-to-r{background-image:linear-gradient(to right, var(--tw-gradient-stops))}.from-green-700{--tw-gradient-from:#15803d var(--tw-gradient-from-position);--tw-gradient-to:rgb(21 128 61 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.to-purple-700{--tw-gradient-to:#7e22ce var(--tw-gradient-to-position)}.py-8{padding-top:2rem;padding-bottom:2rem}.text-center{text-align:center}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.underline{-webkit-text-decoration-line:underline;text-decoration-line:underline}.hover\:text-gray-200:hover{--tw-text-opacity:1;color:rgb(229 231 235 / var(--tw-text-opacity, 1))}

:root{
  --primary:#a42fbc;
  --bg:#f8fafc;
  --border:#e5e7eb;
  --idea1:#3b82f6;
  --idea2:#f59e0b;
  --idea3:#37e1ab;
  --decision:#ef4444;
  --thread-length:76px; /* vertical distance between center line and card */
  --card-gap:16px;       /* gap between thread end and card */
  --track-height:320px;
  --card-width:240px;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial;
  background:var(--bg);
  color:#0f172a;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

header{
  text-align:center;
  padding:40px 16px 12px;
}
header h1{color:var(--primary);margin:0;font-size:28px}
header p{margin-top:8px;color:#6b7280}

/* container centers timeline and prevents horizontal scroll */
.timeline-wrapper{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:12px 0 48px;
  overflow: hidden;
  min-height: 600px;
}

/* track width fits viewport but limited */
.timeline-track{
  position:relative;
  width:90%;
  max-width:980px;
  height:var(--track-height);
  margin:0 auto;
}

/* gray base line */
.timeline-line{
  position:absolute;
  top:50%;
  height:8px;
  background:var(--border);
  transform:translateY(-50%);
  border-radius:6px;
  z-index:2;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}

/* purple progress bar (starts at first event) */
.progress-bar-timeline{
  position:absolute;
  top:50%;
  height:10px;
  background:linear-gradient(90deg,#7c3aed,#5b21b6);
  transform:translateY(-50%);
  border-radius:6px;
  z-index:3;
  transition: width 180ms linear;
}

/* pointer */
#time-pointer{
  position:absolute;
  top:50%;
  width:20px;
  height:20px;
  border-radius:50%;
  background:#6a059c;
  transform:translate(-50%,-50%);
  z-index:6;
  cursor:grab;
  box-shadow:0 6px 18px rgba(0,0,0,0.18);
  display:flex;align-items:center;justify-content:center;color:white;font-size:11px;
  outline: none;
  border: 3px solid #fff;
}
#time-pointer:active{cursor:grabbing}
#time-pointer:focus{box-shadow:0 10px 30px rgba(99,102,241,0.18), 0 0 0 4px rgba(124,58,237,0.12)}

/* event anchors (invisible) */
.timeline-event{
  position:absolute; /* left will be set by JS */
  top:50%;
  transform:translate(-50%,-50%);
  width:1px; height:1px;
  pointer-events:none;
}

/* thread (vertical rod between line and card) */
.thread{
  position:absolute;
  left:0;
  width:2px;
  background:var(--border);
  transform:translateX(-50%);
  z-index:1;
  opacity:0;
  transition: opacity .35s, background .25s;
  border-radius:2px;
}

/* small circular connector at end of thread */
.thread::after{
  content:"";
  display:block;
  width:10px;height:10px;border-radius:50%;
  background:white;border:3px solid #fff; /* white cap */
  box-shadow:0 4px 10px rgba(0,0,0,0.06);
  position:relative;
  top:calc(100% - 5px);
  left:-4px;
}

/* timeline event cards */
.event-card{
  position:absolute;
  width:var(--card-width);
  border-radius:12px;
  background:linear-gradient(180deg,#ffffff,#fbfdff);
  box-shadow:0 12px 30px rgba(2,6,23,0.06);
  padding:12px 14px;
  z-index:4;
  transition:filter .28s, opacity .35s, transform .3s;
  transform-origin:center top;
  cursor:pointer;
  border-top:4px solid var(--idea3);
  color:#0f172a;
}

/* card header layout */
.event-card .card-head{
  display:flex;
  gap:10px;
  align-items:center;
}
.event-card .icon {
  width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:white;
  font-weight:700;font-size:18px;
  box-shadow:0 6px 18px rgba(0,0,0,0.08);
}
.event-card h3{margin:8px 0 6px;font-size:15px}
.event-card p{margin:0;color:#475569;font-size:13px}
.event-card .month{font-weight:700;color:#6b7280;margin-bottom:8px;font-size:12px}
.event-card .badge { font-size:11px; padding:4px 8px; border-radius:999px; color:white; font-weight:700; }

/* color accents */
#idea-1-card{ border-top-color: var(--idea1); }
#idea-1-card .icon{ background: linear-gradient(180deg,var(--idea1),#1161f6) }
#idea-1-card .badge{ background: rgba(59,130,246,0.12); color:var(--idea1) }

#idea-2-card{ border-top-color: var(--idea2); }
#idea-2-card .icon{ background: linear-gradient(180deg,var(--idea2),#d97706) }
#idea-2-card .badge{ background: rgba(245,158,11,0.12); color:var(--idea2) }

#idea-3-card{ border-top-color: var(--idea3); }
#idea-3-card .icon{ background: linear-gradient(180deg,var(--idea3),#1fd9a8) }
#idea-3-card .badge{ background: rgba(55,225,171,0.12); color:var(--idea3) }

#decision-card{ border-top-color: var(--decision); background:linear-gradient(180deg,#fff6f7,#fff1f2) }
#decision-card .icon{ background: linear-gradient(180deg,#f97316,#ef4444) }
#decision-card .badge{ background: rgba(239,68,68,0.12); color:var(--decision) }

/* dropped (grayed) */
.dropped{filter:grayscale(.7) opacity(.45)}

/* hover lift */
.event-card:hover {
  transform: translateX(-50%) translateY(-6px) scale(1.02);
  box-shadow:0 18px 44px rgba(2,6,23,0.12);
}

/* small responsive shrink */
@media (max-width:920px){
  .timeline-track{width:94%}
  :root { --card-width: 210px; --thread-length:64px; }
  .event-card{ width: var(--card-width); }
}
@media (max-width:700px){
  .timeline-track{height:420px}
  :root { --card-width: 200px; --thread-length:72px; }
}

/* big idea section cards at bottom */
.idea-section {
  max-width: 880px;
  margin: 28px auto;
  padding: 22px;
  background: linear-gradient(180deg,#fff,#fbfdff);
  box-shadow: 0 10px 30px rgba(2,6,23,0.06);
  border-radius: 12px;
  scroll-margin-top: 80px;
  display: grid;
  grid-template-columns: 1fr;
  gap:12px;
}
.idea-section h2 {
  color: var(--primary);
  margin:0;
  display:flex;
  align-items:center;
  gap:12px;
  font-size:20px;
}
.idea-section .meta {
  display:flex;
  gap:12px;
  align-items:center;
  color:#6b7280;
  font-weight:600;
  font-size:13px;
}
.idea-section p { color:#475569; margin:0 0 6px 0; line-height:1.6; }

/* subtle fade-in on scroll helper (used earlier) */
.animate-on-scroll { opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease; }
.animate-on-scroll.is-visible { opacity:1; transform:none; }

/* Problem Sections */
.problem-section {
  position: relative;
  width: 100%;
  margin: 3rem auto;
  max-width: 880px;
  display: flex;
  justify-content: flex-start;
  padding: 0 16px;
}


.problem-content {
  background: none;
  width: 45%;
  padding: 1rem 1.5rem;
}

.problem-title {
  font-size: 1.7rem; /* slightly bigger */
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--primary);
}

.problem-text {
  font-size: 1rem;
  color: #334155;
  margin-bottom: 1rem;
  line-height: 1.6;
}

/* Connector circle */
.timeline-circle {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 20px;
  background: var(--primary);
  border-radius: 50%;
  top: 10px;
  box-shadow: 0 0 0 4px white;
}

/* Notes */
.note-yellow {
  background: var(--note-yellow);
  border: 1px solid var(--note-yellow-border);
  padding: 0.75rem 1rem;
  border-radius: 6px;
  font-size: 0.95rem;
  margin-top: 0.5rem;
}

.note-red {
  background: var(--note-red);
  border: 1px solid var(--note-red-border);
  padding: 0.75rem 1rem;
  border-radius: 6px;
  font-size: 0.95rem;
  margin-top: 0.5rem;
}

@media (max-width: 768px) {
  .problem-content { width: 100%; }
}

    /* Section Title */
    .section-title {
    text-align: center;
    font-size: 2.2rem; /* slightly bigger */
    font-weight: 700;
    margin-bottom: 2rem;
    }

    /* Note Style (Blue) */
.callout-note { background-color: #eff6ff; border-color: #3b82f6; }
.callout-note .callout-header { color: #1e40af; }
.callout-note p { color: #1c3d8e; }

/* Caution Style (Yellow) */
.callout-caution { background-color: #fefce8; border-color: #f59e0b; }
.callout-caution .callout-header { color: #854d0e; }
.callout-caution p { color: #85560e; }

/* Trivia Style (Green) */
.callout-trivia { background-color: #f0fdf4; border-color: #22c55e; }
.callout-trivia .callout-header { color: #15803d; }
.callout-trivia p { color: #166534; }

/* Main container for all the content below the timeline */
.main-content-container {
    max-width: 880px;
    width: 100%;
    margin: 28px auto;
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Base style for content sections */
.content-section {
    background: linear-gradient(180deg,#fff,#fbfdff);
    box-shadow: 0 10px 30px rgba(2,6,23,0.06);
    border-radius: 12px;
    padding: 1.5rem;
}

/* 1. Improved problem identification text */
.content-section h2 {
    font-size: 1.7rem; /* Increased size */
    font-weight: 700;
    color: var(--primary); /* Improved color */
    margin: 0 0 1rem 0;
}
.content-section p {
    color: #334155;
    margin: 0 0 1rem 0;
    line-height: 1.6;
}

/* 3. New general callout box style */
.callout {
    padding: 1rem;
    border-radius: 8px;
    border-left-width: 4px;
    margin-top: 1rem;
}
.callout strong {
    display: block;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

/* Note Style (Blue) */
.callout.note {
    background-color: #eff6ff;
    border-color: #3b82f6;
    color: #1c3d8e;
}
.callout.note strong { color: #1e40af; }

/* Caution Style (Red) */
.callout.caution {
    background-color: #fef2f2;
    border-color: #ef4444;
    color: #991b1b;
}
.callout.caution strong { color: #b91c1c; }

.problem-section {
  max-width: 850px;
  margin: 0rem auto;
  padding: 0 1rem;
  line-height: 1.75;
  color: #374151;
}

.problem-heading {
  font-size: 2.25rem;
  font-weight: 800;
  display: inline-block;
  position: relative;
  margin-bottom: 1rem;
  color: #1e293b;
}

.problem-heading::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 4px;
  width: 100%;
  height: 0.4em;
  background: #8afdc9; /* soft yellow highlight */
  z-index: -1;
  border-radius: 4px;
}

.problem-section p {
  margin-top: 1.5rem;
  margin-left: 1.2rem;
  font-size: 1.1rem;
}

.timeline-header {
  text-align: center;
  margin: 4rem auto 3rem;
  max-width: 800px;
  padding: 0 1rem;
}

.timeline-title {
  font-size: 2.5rem;
  font-weight: 800;
  color: #1e293b;
  position: relative;
  display: inline-block;
  margin-bottom: 0.75rem;
}

.timeline-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 4px;
  width: 100%;
  height: 0.35em;
  background-color: #ebbffe; /* soft blue highlight */
  z-index: -1;
  border-radius: 4px;
}

.timeline-subtitle {
  font-size: 1.05rem;
  color: #4b5563;
  line-height: 1.6;
  margin-top: 0.5rem;
}


/* References */
.references {
  background-color: #f9faff;
  border-radius: 12px;
  padding: 25px 30px;
  margin: 40px 0;
  box-shadow: 0 6px 12px rgba(0,0,0,0.08);
}

.references h2 {
  font-size: 2rem;
  color: #9e00b3;
  margin-bottom: 20px;
  border-bottom: 2px solid #e600cf;
  display: inline-block;
  padding-bottom: 5px;
}

.references ol {
  counter-reset: ref-counter; /* reset numbering */
  padding-left: 20px;
}

.references li {
  counter-increment: ref-counter;
  margin-bottom: 15px;
  line-height: 1.6;
  color: #1a1a1a;
  position: relative;
  padding-left: 35px;
}

.references li::before {
  content: counter(ref-counter) ".";
  position: absolute;
  left: 0;
  font-weight: bold;
  color: #9e00b3;
}

.references a {
  color: #9e00b3;
  text-decoration: underline;
}

.references a:hover {
  color: #cc00ff;
}



/* Milstone */
.milestone {
  background: linear-gradient(135deg, #f0f4ff, #d9e8ff);
  border-left: 6px solid #0041a2; /* colored accent bar */
  border-radius: 12px;
  padding: 10px 20px;
  margin-bottom: 10px;
  box-shadow: 0 6px 12px rgba(0,0,0,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.milestone:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 20px rgba(0,0,0,0.12);
}

.milestone h3 {
  font-size: 1.2rem;
  margin-bottom: 10px;
  color: #0047b3; /* deep blue */
  background: linear-gradient(90deg, #0073e6, #00cfff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; /* gradient text effect */
}

.milestone p {
  font-size: 1rem;
  line-height: 1.6;
  color: #1a1a1a;
}