.timeline-section {
margin-bottom:3.5rem
}

.timeline {
position:relative;
padding-left:2rem
}

.timeline::before {
content:'';
position:absolute;
left:.6rem;
top:.5rem;
bottom:.5rem;
width:1px;
background:linear-gradient(to bottom,transparent,var(--border) 8%,var(--border) 92%,transparent)
}

.tl-item {
display:flex;
align-items:flex-start;
gap:1.25rem;
padding:.75rem 1rem .75rem 0;
text-decoration:none;
position:relative;
transition:var(--trans);
border-radius:8px;
margin-bottom:.25rem
}

.tl-item:hover {
background:#00ff880a;
padding-left:.75rem;
margin-left:-.75rem
}

.tl-node {
width:.75rem;
height:.75rem;
border-radius:50%;
border:2px solid var(--green);
background:var(--bg);
flex-shrink:0;
margin-top:.3rem;
position:relative;
left:-2.325rem;
margin-right:-.75rem;
transition:var(--trans);
box-shadow:0 0 6px #0f84
}

.tl-item:hover .tl-node {
background:var(--green);
box-shadow:0 0 12px #0f8a
}

.tl-node--secret {
border-color:var(--magenta);
box-shadow:0 0 6px #ff00c144
}

.tl-item--secret:hover .tl-node--secret {
background:var(--magenta);
box-shadow:0 0 12px #ff00c188
}

.tl-body {
display:flex;
flex-direction:column;
gap:.15rem
}

.tl-date {
font-size:.65rem;
color:var(--muted);
text-transform:uppercase;
letter-spacing:.15em
}

.tl-label {
font-size:.9rem;
font-weight:700;
color:var(--text-hi);
letter-spacing:.04em;
transition:var(--trans)
}

.tl-item:hover .tl-label {
color:var(--green)
}

.tl-item--secret:hover .tl-label {
color:var(--magenta)
}

.tl-desc {
font-size:.78rem;
color:var(--muted);
line-height:1.5
}

.about-section {
scroll-margin-top:5rem;
margin-bottom:2.5rem
}

.hl-green {
color:var(--green);
font-weight:700
}

.hl-cyan {
color:var(--cyan);
font-weight:700
}

.hl-cyan-em {
color:var(--cyan);
font-style:normal;
font-weight:700
}

.mg-features {
display:flex;
flex-direction:column;
gap:1rem;
margin:1.25rem 0;
padding:1.25rem;
background:var(--bg2);
border:1px solid var(--border);
border-radius:10px
}

.mg-feature {
display:flex;
gap:1rem;
align-items:flex-start
}

.mg-bullet {
color:var(--green);
font-size:1.1rem;
flex-shrink:0;
margin-top:.05rem
}

.mg-feature-title {
display:block;
color:var(--text-hi);
font-size:.9rem;
letter-spacing:.04em;
margin-bottom:.3rem
}

.mg-feature-desc {
color:var(--text);
font-size:.82rem;
line-height:1.6;
margin:0
}

.crew-roster {
display:flex;
flex-direction:column;
gap:1px;
background:var(--border);
border:1px solid var(--border);
border-radius:10px;
overflow:hidden;
margin:1.25rem 0
}

.crew-card {
display:flex;
align-items:center;
gap:1rem;
background:var(--card);
padding:1rem 1.25rem;
position:relative
}

.crew-status-dot {
width:.55rem;
height:.55rem;
border-radius:50%;
flex-shrink:0
}

.crew-status-dot--active {
background:var(--green);
box-shadow:0 0 8px #0f86;
animation:pulse-dot 2.5s ease-in-out infinite
}

.crew-status-dot--gone {
background:var(--muted);
opacity:.45
}

@keyframes pulse-dot {
0%,100% {
opacity:1;
box-shadow:0 0 6px #0f84
}

50% {
opacity:.7;
box-shadow:0 0 14px #0f8a
}
}

.crew-info {
display:flex;
flex-direction:column;
gap:.2rem;
flex:1
}

.crew-handle {
font-size:.9rem;
font-weight:700;
color:var(--text-hi);
letter-spacing:.05em
}

.crew-card--active .crew-handle {
color:var(--green)
}

.crew-since {
font-size:.72rem;
color:var(--muted);
letter-spacing:.08em
}

.crew-role-tag {
font-size:.72rem;
color:var(--text)
}

.crew-badge {
font-size:.6rem;
font-weight:700;
letter-spacing:.18em;
text-transform:uppercase;
padding:.25rem .65rem;
border-radius:4px;
background:#00ff8814;
color:var(--green);
border:1px solid #0f83;
flex-shrink:0
}

.crew-badge--gone {
background:transparent;
color:var(--muted);
border-color:var(--border)
}

.crew-summary {
margin-top:1.25rem;
margin-bottom:0
}

.inspire-grid {
display:grid;
grid-template-columns:repeat(4,1fr);
gap:1px;
background:var(--border);
border:1px solid var(--border);
border-radius:12px;
overflow:hidden;
margin:1.5rem 0 0
}

.inspire-card {
background:var(--card);
padding:1.5rem 1rem;
display:flex;
flex-direction:column;
align-items:center;
gap:.5rem;
text-align:center;
transition:var(--trans)
}

.inspire-card:hover {
background:#0f1d28
}

.inspire-glyph {
font-size:1.75rem;
color:var(--green);
display:block
}

.inspire-name {
font-size:.8rem;
font-weight:700;
color:var(--text-hi);
letter-spacing:.05em
}

.inspire-sub {
font-size:.7rem;
color:var(--muted);
letter-spacing:.08em
}

.look-grid {
display:grid;
grid-template-columns:1fr 1fr;
gap:1px;
background:var(--border);
border:1px solid var(--border);
border-radius:12px;
overflow:hidden;
margin:1.25rem 0 1.5rem
}

.look-item {
background:var(--card);
padding:1.25rem 1.5rem;
display:flex;
align-items:flex-start;
gap:1.1rem;
transition:var(--trans)
}

.look-item:hover {
background:#0f1d28
}

.look-icon-wrap {
width:3rem;
height:3rem;
border:1px solid var(--border);
border-radius:8px;
background:#00ff880a;
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0
}

.look-icon {
font-size:1rem;
letter-spacing:-.05em;
font-family:'Courier New',Courier,'Lucida Console',monospace
}

.look-icon--scanline {
color:var(--muted);
font-size:1.3rem
}

.look-title {
display:block;
font-size:.88rem;
color:var(--text-hi);
letter-spacing:.04em;
margin-bottom:.4rem
}

.look-desc {
font-size:.8rem;
color:var(--muted);
line-height:1.6;
margin:0
}

.look-summary {
margin-bottom:0;
padding:.75rem 1rem;
background:#00ff880a;
border-left:3px solid #0f86;
border-radius:4px;
font-size:.9rem;
color:var(--text)
}

.perf-note {
font-size:.72rem;
color:var(--muted);
letter-spacing:.1em;
text-transform:uppercase;
margin:.75rem 0 0
}

.perf-detail-card {
margin-top:1.25rem
}

.egg-card {
border-color:#ff00c122
}

.egg-hint {
display:flex;
align-items:center;
gap:1.25rem;
background:var(--bg2);
border:1px solid var(--border);
border-radius:8px;
padding:.85rem 1.25rem;
margin:1.25rem 0 1rem
}

.egg-hint-label {
font-size:.7rem;
font-weight:700;
letter-spacing:.18em;
color:var(--magenta);
text-transform:uppercase;
white-space:nowrap
}

.egg-hint-code {
font-family:'Courier New',Courier,'Lucida Console',monospace;
font-size:.85rem;
color:var(--green);
background:transparent;
border:none;
padding:0
}

.egg-sign-off {
font-size:.85rem;
color:var(--muted);
margin:0
}

@media (max-width: 900px) {
.inspire-grid {
grid-template-columns:repeat(2,1fr)
}
}

@media (max-width: 640px) {
.timeline {
padding-left:2rem;
margin-left:.75rem
}

.look-grid {
grid-template-columns:1fr
}

.inspire-grid {
grid-template-columns:repeat(2,1fr)
}

.egg-hint {
flex-direction:column;
align-items:flex-start;
gap:.5rem
}
}

@media (max-width: 480px) {
.timeline {
margin-left:1rem
}

.inspire-grid {
grid-template-columns:1fr
}

.crew-card {
flex-wrap:wrap
}

.crew-badge {
margin-left:auto
}
}

@media (prefers-reduced-motion: reduce) {
.crew-status-dot--active {
animation:none;
opacity:1
}
}

a.tech-badge--link {
display:inline-block;
text-decoration:none;
transition:var(--trans)
}

a.tech-badge--link:hover {
background:#00ff8820;
border-color:var(--green);
color:var(--green);
box-shadow:0 0 10px #0f83
}

.info-card p a,.info-card .info-value a,.look-summary a {
text-decoration:underline;
text-decoration-color:#0f86;
text-underline-offset:3px;
text-decoration-thickness:1px;
transition:var(--trans)
}

.info-card p a:hover,.info-card .info-value a:hover,.look-summary a:hover {
text-decoration-color:var(--cyan);
color:var(--cyan)
}