heyiam 0.2.29 → 0.3.0

package/dist/render/templates/cosmos/styles.css

@@ -0,0 +1,1151 @@
+/* ── Cosmos template styles ──
+ * Dark theme with amber accent, Space Grotesk display font.
+ * Extracted from mockup HTML files.
+ */
+
+:root {
+  --cos-bg: #030712;
+  --cos-surface: #0f172a;
+  --cos-surface-hover: #1e293b;
+  --cos-accent: #fbbf24;
+  --cos-accent-dim: rgba(251, 191, 36, 0.15);
+  --cos-accent-glow: rgba(251, 191, 36, 0.3);
+  --cos-text: #f1f5f9;
+  --cos-text-secondary: #94a3b8;
+  --cos-text-tertiary: #64748b;
+  --cos-border: #1e293b;
+  --cos-border-accent: rgba(251, 191, 36, 0.3);
+  --font-display: 'Space Grotesk', system-ui, sans-serif;
+  --font-body: 'Inter', system-ui, sans-serif;
+  --font-mono: 'JetBrains Mono', monospace;
+  --radius: 8px;
+  --radius-lg: 12px;
+  --duration-fade: 600ms;
+  --duration-draw: 1200ms;
+  --duration-counter: 1800ms;
+  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+
+  /* Agent role colors */
+  --color-frontend:  #7c3aed;
+  --color-backend:   #0891b2;
+  --color-qa:        #059669;
+  --color-security:  #475569;
+  --color-reviewer:  #e11d48;
+  --color-ux:        #d97706;
+}
+
+/* ── Dark Template Wrapper ── */
+.cosmos {
+  background: var(--cos-bg);
+  color: var(--cos-text);
+  font-family: var(--font-body);
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+  min-height: 100vh;
+  overflow-x: hidden;
+}
+.cosmos a { color: var(--cos-accent); text-decoration: none; }
+.cosmos a:hover { text-decoration: underline; }
+.cosmos a:visited { color: var(--cos-accent); }
+.cosmos a:focus-visible {
+  outline: 2px solid var(--cos-accent);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+/* ── Starfield Background ── */
+.cosmos .starfield {
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  background:
+    radial-gradient(1px 1px at 10% 15%, rgba(251,191,36,0.4), transparent),
+    radial-gradient(1px 1px at 25% 35%, rgba(241,245,249,0.3), transparent),
+    radial-gradient(1.5px 1.5px at 40% 10%, rgba(251,191,36,0.5), transparent),
+    radial-gradient(1px 1px at 55% 45%, rgba(241,245,249,0.25), transparent),
+    radial-gradient(1px 1px at 70% 20%, rgba(241,245,249,0.3), transparent),
+    radial-gradient(1.5px 1.5px at 85% 55%, rgba(251,191,36,0.35), transparent),
+    radial-gradient(1px 1px at 15% 70%, rgba(241,245,249,0.2), transparent),
+    radial-gradient(1px 1px at 30% 85%, rgba(251,191,36,0.3), transparent),
+    radial-gradient(1.5px 1.5px at 50% 65%, rgba(241,245,249,0.35), transparent),
+    radial-gradient(1px 1px at 65% 80%, rgba(241,245,249,0.2), transparent),
+    radial-gradient(1px 1px at 80% 40%, rgba(251,191,36,0.25), transparent),
+    radial-gradient(1px 1px at 92% 75%, rgba(241,245,249,0.3), transparent),
+    radial-gradient(1.5px 1.5px at 5% 50%, rgba(251,191,36,0.4), transparent),
+    radial-gradient(1px 1px at 45% 30%, rgba(241,245,249,0.2), transparent),
+    radial-gradient(1px 1px at 75% 60%, rgba(251,191,36,0.3), transparent),
+    radial-gradient(1px 1px at 20% 90%, rgba(241,245,249,0.25), transparent),
+    radial-gradient(1px 1px at 60% 5%, rgba(241,245,249,0.3), transparent),
+    radial-gradient(1.5px 1.5px at 35% 55%, rgba(251,191,36,0.2), transparent),
+    radial-gradient(1px 1px at 88% 15%, rgba(241,245,249,0.35), transparent),
+    radial-gradient(1px 1px at 50% 90%, rgba(251,191,36,0.25), transparent);
+}
+
+/* ── Page Container ── */
+.cosmos .cos-page {
+  position: relative;
+  z-index: 1;
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 2rem 1.5rem;
+}
+
+/* ── Constellation SVG ── */
+.cosmos .cos-constellation {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  overflow: visible;
+}
+.cosmos .cos-constellation-line {
+  fill: none;
+  stroke: var(--cos-accent);
+  stroke-width: 1;
+  stroke-opacity: 0.15;
+  stroke-linecap: round;
+  stroke-dasharray: 800;
+  stroke-dashoffset: 800;
+}
+.cosmos .cos-constellation-line.drawn {
+  stroke-dashoffset: 0;
+  transition: stroke-dashoffset var(--duration-draw) var(--ease-out);
+}
+.cosmos .cos-constellation-dot {
+  fill: var(--cos-accent);
+  opacity: 0.3;
+}
+
+/* ── Section Animation ── */
+.cosmos .cos-section {
+  opacity: 0;
+  transform: scale(0.98);
+  transition: opacity var(--duration-fade) var(--ease-out),
+              transform var(--duration-fade) var(--ease-out);
+}
+.cosmos .cos-section.visible {
+  opacity: 1;
+  transform: scale(1);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .cosmos .cos-section { opacity: 1; transform: none; transition: none; }
+  .cosmos .cos-constellation-line { stroke-dasharray: none; stroke-dashoffset: 0; transition: none; }
+  .cosmos .cos-constellation-line.drawn { transition: none; }
+  .cosmos .stat-value { transition: none; }
+  .cosmos .cos-orbit-path-active { stroke-dasharray: none; stroke-dashoffset: 0; transition: none; }
+  .cosmos .cos-orbit-path-active.drawn { transition: none; }
+  .cosmos .cos-orbit-node circle { transition: none; }
+}
+
+/* ── Breadcrumb ── */
+.cosmos .cos-breadcrumb {
+  font-size: 0.8125rem;
+  color: var(--cos-text-tertiary);
+  margin-block-end: 1.5rem;
+  font-family: var(--font-mono);
+}
+.cosmos .cos-breadcrumb a { color: var(--cos-text-secondary); }
+.cosmos .cos-breadcrumb a:visited { color: var(--cos-text-secondary); }
+.cosmos .cos-breadcrumb a:hover { color: var(--cos-accent); }
+.cosmos .cos-breadcrumb-sep { margin-inline: 0.375rem; opacity: 0.5; }
+
+/* ── Section Title ── */
+.cosmos .cos-section-title {
+  font-family: var(--font-display);
+  font-size: 1.375rem;
+  font-weight: 600;
+  margin-block-end: 1.25rem;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+.cosmos .cos-section-title::before {
+  content: '';
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--cos-accent);
+  box-shadow: 0 0 8px var(--cos-accent-glow);
+  flex-shrink: 0;
+}
+
+/* ── Footer ── */
+.cosmos .cos-footer {
+  margin-block-start: 4rem;
+  padding-block-start: 1.5rem;
+  border-block-start: 1px solid var(--cos-border);
+  text-align: center;
+  color: var(--cos-text-tertiary);
+  font-size: 0.8125rem;
+}
+
+/* ── Skill Chips ── */
+.cosmos .cos-skill-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+.cosmos .cos-skill-chip {
+  font-size: 0.75rem;
+  font-family: var(--font-mono);
+  padding: 0.25rem 0.625rem;
+  border-radius: 999px;
+  border: 1px solid var(--cos-border-accent);
+  color: var(--cos-accent);
+  background: var(--cos-accent-dim);
+  white-space: nowrap;
+}
+
+/* ── Leverage Ring ── */
+.cosmos .cos-leverage {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.75rem;
+  margin: 1.5rem 0;
+}
+.cosmos .cos-leverage__ring svg {
+  display: block;
+}
+.cosmos .cos-leverage__labels {
+  display: flex;
+  align-items: baseline;
+  gap: 1rem;
+  font-family: var(--font-display);
+}
+.cosmos .cos-leverage__human {
+  font-size: 1rem;
+  font-weight: 700;
+  color: var(--cos-text-secondary);
+}
+.cosmos .cos-leverage__human small,
+.cosmos .cos-leverage__agent small {
+  font-size: 0.625rem;
+  font-weight: 400;
+  color: var(--cos-text-tertiary);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  margin-inline-start: 0.25rem;
+}
+.cosmos .cos-leverage__agent {
+  font-size: 1rem;
+  font-weight: 700;
+  color: var(--cos-accent);
+}
+
+/* ── Narrative ── */
+.cosmos .cos-narrative {
+  margin-block-end: 2.5rem;
+}
+.cosmos .cos-narrative p {
+  color: var(--cos-text-secondary);
+  font-size: 0.9375rem;
+  line-height: 1.75;
+  margin-block-end: 1rem;
+}
+.cosmos .cos-narrative p:last-child { margin-block-end: 0; }
+
+/* ══════════════════════════════════════════════════════════════
+   PORTFOLIO
+   ══════════════════════════════════════════════════════════════ */
+
+/* ── Hero / Profile ── */
+.cosmos .cos-hero {
+  text-align: center;
+  padding: 3rem 0 2rem;
+}
+.cosmos .cos-hero-photo {
+  width: 120px;
+  height: 150px;
+  border-radius: 12px;
+  object-fit: cover;
+  object-position: 55% 10%;
+  border: 2px solid var(--cos-accent);
+  box-shadow: 0 0 24px var(--cos-accent-dim), 0 0 48px var(--cos-accent-glow);
+  margin: 0 auto 1.5rem;
+  display: block;
+  filter: contrast(1.1) brightness(0.95);
+}
+.cosmos .cos-hero h1 {
+  font-family: var(--font-display);
+  font-size: 2.25rem;
+  font-weight: 700;
+  margin-block-end: 0.5rem;
+  letter-spacing: -0.02em;
+}
+.cosmos .cos-hero-handle {
+  color: var(--cos-accent);
+  font-family: var(--font-mono);
+  font-size: 1rem;
+  margin-block-end: 0.75rem;
+}
+.cosmos .cos-hero-bio {
+  color: var(--cos-text-secondary);
+  max-width: 560px;
+  margin: 0 auto;
+  font-size: 1rem;
+  line-height: 1.7;
+}
+.cosmos .cos-hero-location {
+  color: var(--cos-text-tertiary);
+  font-size: 0.875rem;
+  margin-block-start: 0.75rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.375rem;
+}
+.cosmos .cos-hero-contact {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 0.75rem;
+  margin-block-start: 1.25rem;
+  list-style: none;
+}
+.cosmos .cos-hero-contact a {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  font-family: var(--font-mono);
+  font-size: 0.8125rem;
+  color: var(--cos-text-tertiary);
+  transition: color 0.2s;
+}
+.cosmos .cos-hero-contact a:visited { color: var(--cos-text-tertiary); }
+.cosmos .cos-hero-contact a:hover {
+  color: var(--cos-accent);
+  text-decoration: none;
+}
+.cosmos .cos-hero-contact svg {
+  flex-shrink: 0;
+}
+.cosmos .cos-hero-resume {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  margin-block-start: 1.25rem;
+  padding: 0.5rem 1rem;
+  font-family: var(--font-mono);
+  font-size: 0.8125rem;
+  color: var(--cos-bg);
+  background: var(--cos-accent);
+  border: none;
+  border-radius: var(--radius);
+  cursor: pointer;
+  text-decoration: none;
+  transition: opacity 0.2s;
+}
+.cosmos .cos-hero-resume:hover {
+  opacity: 0.85;
+  text-decoration: none;
+  color: var(--cos-bg);
+}
+
+/* ── Stats Grid (portfolio) ── */
+.cosmos .cos-stats {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 1rem;
+  margin: 2.5rem 0 3rem;
+}
+.cosmos .cos-stat-card {
+  background: var(--cos-surface);
+  border: 1px solid var(--cos-border);
+  border-radius: var(--radius-lg);
+  padding: 1.25rem;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+}
+.cosmos .cos-stat-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: linear-gradient(90deg, transparent, var(--cos-accent), transparent);
+}
+.cosmos .stat-value {
+  font-family: var(--font-display);
+  font-size: 1.75rem;
+  font-weight: 700;
+  color: var(--cos-accent);
+  display: block;
+  line-height: 1.2;
+}
+.cosmos .stat-label {
+  font-size: 0.75rem;
+  color: var(--cos-text-tertiary);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  margin-block-start: 0.25rem;
+}
+
+/* ── Project Cards (portfolio) ── */
+.cosmos .cos-projects {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  margin-block-end: 3rem;
+}
+.cosmos .cos-project-card {
+  background: var(--cos-surface);
+  border: 1px solid var(--cos-border);
+  border-radius: var(--radius-lg);
+  padding: 1.75rem;
+  transition: border-color 200ms, box-shadow 200ms;
+  position: relative;
+}
+.cosmos .cos-project-card:hover {
+  border-color: var(--cos-border-accent);
+  box-shadow: 0 0 20px var(--cos-accent-dim);
+}
+.cosmos .cos-project-card-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  margin-block-end: 0.75rem;
+}
+.cosmos .cos-project-card h3 {
+  font-family: var(--font-display);
+  font-size: 1.25rem;
+  font-weight: 600;
+}
+.cosmos .cos-project-card h3 a {
+  color: var(--cos-text);
+  transition: color 200ms;
+}
+.cosmos .cos-project-card h3 a:visited { color: var(--cos-text); }
+.cosmos .cos-project-card h3 a:hover {
+  color: var(--cos-accent);
+  text-decoration: none;
+}
+.cosmos .cos-project-card-narrative {
+  color: var(--cos-text-secondary);
+  font-size: 0.9375rem;
+  line-height: 1.6;
+  margin-block-end: 1.25rem;
+}
+.cosmos .cos-project-card-meta {
+  display: flex;
+  gap: 1.5rem;
+  font-size: 0.8125rem;
+  color: var(--cos-text-tertiary);
+  font-family: var(--font-mono);
+  margin-block-end: 1rem;
+}
+.cosmos .cos-project-card-meta strong {
+  color: var(--cos-accent);
+  font-weight: 500;
+}
+
+/* ══════════════════════════════════════════════════════════════
+   PROJECT
+   ══════════════════════════════════════════════════════════════ */
+
+/* ── Project Header ── */
+.cosmos .cos-project-header {
+  margin-block-end: 2.5rem;
+}
+.cosmos .cos-project-header h1 {
+  font-family: var(--font-display);
+  font-size: 2.25rem;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  margin-block-end: 0.75rem;
+}
+.cosmos .cos-project-links {
+  display: flex;
+  gap: 1.25rem;
+  font-size: 0.875rem;
+  margin-block-end: 1rem;
+}
+.cosmos .cos-project-links a {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+/* ── Screenshot ── */
+.cosmos .cos-screenshot {
+  background: var(--cos-surface);
+  border: 1px solid var(--cos-border);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  margin-block-end: 2.5rem;
+}
+.cosmos .cos-screenshot-bar {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0.75rem 1rem;
+  background: var(--cos-surface);
+  border-block-end: 1px solid var(--cos-border);
+}
+.cosmos .cos-screenshot-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--cos-text-tertiary);
+  opacity: 0.4;
+}
+.cosmos .cos-screenshot-dot:first-child { background: #ef4444; opacity: 0.6; }
+.cosmos .cos-screenshot-dot:nth-child(2) { background: #fbbf24; opacity: 0.6; }
+.cosmos .cos-screenshot-dot:nth-child(3) { background: #22c55e; opacity: 0.6; }
+.cosmos .cos-screenshot-url {
+  margin-inline-start: auto;
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  color: var(--cos-text-tertiary);
+}
+.cosmos .cos-screenshot-viewport {
+  overflow-y: auto;
+}
+.cosmos .cos-screenshot-body {
+  height: 240px;
+  background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.cosmos .cos-screenshot-placeholder {
+  color: var(--cos-text-tertiary);
+  font-family: var(--font-mono);
+  font-size: 0.875rem;
+}
+
+/* ── Stats Row (project) ── */
+.cosmos .cos-stats-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  margin-block-end: 2.5rem;
+}
+.cosmos .cos-stat-pill {
+  background: var(--cos-surface);
+  border: 1px solid var(--cos-border);
+  border-radius: var(--radius);
+  padding: 0.75rem 1.25rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+  min-width: 100px;
+}
+.cosmos .cos-stat-pill .stat-value {
+  font-size: 1.5rem;
+  white-space: nowrap;
+}
+.cosmos .cos-stat-pill .stat-label {
+  font-size: 0.6875rem;
+  margin-block-start: 0.125rem;
+}
+
+/* ── Phase Cards ── */
+.cosmos .cos-phases {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1rem;
+  margin-block-end: 2.5rem;
+}
+.cosmos .cos-phase-card {
+  background: var(--cos-surface);
+  border: 1px solid var(--cos-border);
+  border-radius: var(--radius-lg);
+  padding: 1.25rem;
+  position: relative;
+  overflow: hidden;
+}
+.cosmos .cos-phase-card::before {
+  content: '';
+  position: absolute;
+  inset-inline-start: 0;
+  top: 0;
+  bottom: 0;
+  width: 3px;
+  background: var(--cos-accent);
+  opacity: 0.4;
+}
+.cosmos .cos-phase-number {
+  font-family: var(--font-display);
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--cos-accent);
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  margin-block-end: 0.25rem;
+}
+.cosmos .cos-phase-card h3 {
+  font-family: var(--font-display);
+  font-size: 1rem;
+  font-weight: 600;
+  margin-block-end: 0.375rem;
+}
+.cosmos .cos-phase-dates {
+  font-size: 0.75rem;
+  font-family: var(--font-mono);
+  color: var(--cos-text-tertiary);
+  margin-block-end: 0.5rem;
+}
+.cosmos .cos-phase-desc {
+  font-size: 0.8125rem;
+  color: var(--cos-text-secondary);
+  line-height: 1.5;
+}
+
+/* ── Chart Container ── */
+.cosmos .cos-chart-container {
+  background: var(--cos-surface);
+  border: 1px solid var(--cos-border);
+  border-radius: var(--radius-lg);
+  padding: 1.5rem;
+  margin-block-end: 2.5rem;
+  overflow-x: auto;
+}
+.cosmos .cos-chart-svg {
+  width: 100%;
+  min-width: 600px;
+  display: block;
+}
+.cosmos .cos-chart-bar {
+  transition: opacity 200ms;
+}
+.cosmos .cos-chart-bar:hover { opacity: 0.8; }
+.cosmos .cos-chart-grid-line {
+  stroke: var(--cos-border);
+  stroke-width: 0.5;
+}
+.cosmos .cos-chart-label {
+  fill: var(--cos-text-tertiary);
+  font-family: var(--font-mono);
+  font-size: 10px;
+}
+.cosmos .cos-chart-value {
+  fill: var(--cos-accent);
+  font-family: var(--font-mono);
+  font-size: 10px;
+  font-weight: 500;
+}
+
+/* ── Orbital Timeline ── */
+.cosmos .cos-orbit-timeline {
+  position: relative;
+  margin-block-end: 2.5rem;
+}
+.cosmos .cos-orbit-svg {
+  width: 100%;
+  max-width: 800px;
+  margin: 0 auto;
+  display: block;
+}
+.cosmos .cos-orbit-path {
+  fill: none;
+  stroke: var(--cos-border);
+  stroke-width: 1.5;
+}
+.cosmos .cos-orbit-path-active {
+  fill: none;
+  stroke: var(--cos-accent);
+  stroke-width: 1.5;
+  stroke-opacity: 0.4;
+  stroke-dasharray: 1200;
+  stroke-dashoffset: 1200;
+}
+.cosmos .cos-orbit-path-active.drawn {
+  stroke-dashoffset: 0;
+  transition: stroke-dashoffset 2s var(--ease-out);
+}
+.cosmos .cos-orbit-node { cursor: default; }
+.cosmos .cos-orbit-node circle { transition: r 200ms var(--ease-out); }
+.cosmos .cos-orbit-node:hover circle { r: 8; }
+.cosmos .cos-orbit-node text {
+  fill: var(--cos-text-secondary);
+  font-family: var(--font-mono);
+  font-size: 10px;
+}
+.cosmos .cos-orbit-phase-label {
+  fill: var(--cos-text-tertiary);
+  font-family: var(--font-display);
+  font-size: 11px;
+  font-weight: 600;
+}
+
+/* ── Key Decisions ── */
+.cosmos .cos-decisions {
+  margin-block-end: 2.5rem;
+}
+.cosmos .cos-decision {
+  background: var(--cos-surface);
+  border: 1px solid var(--cos-border);
+  border-radius: var(--radius);
+  padding: 1rem 1.25rem;
+  margin-block-end: 0.75rem;
+  display: flex;
+  align-items: flex-start;
+  gap: 1rem;
+}
+.cosmos .cos-decision-number {
+  font-family: var(--font-display);
+  font-weight: 700;
+  font-size: 1.25rem;
+  color: var(--cos-accent);
+  line-height: 1;
+  flex-shrink: 0;
+  width: 2rem;
+  height: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--cos-border-accent);
+  border-radius: 50%;
+}
+.cosmos .cos-decision p {
+  color: var(--cos-text-secondary);
+  font-size: 0.9375rem;
+  line-height: 1.5;
+}
+
+/* ── Source Breakdown ── */
+.cosmos .cos-source-section {
+  margin-block-end: 2.5rem;
+}
+.cosmos .cos-source-bar-large {
+  display: flex;
+  height: 8px;
+  border-radius: 4px;
+  overflow: hidden;
+  background: var(--cos-border);
+  margin-block-end: 0.75rem;
+}
+.cosmos .cos-source-fill-claude { background: var(--cos-accent); height: 100%; }
+.cosmos .cos-source-fill-cursor { background: var(--cos-text-tertiary); height: 100%; }
+.cosmos .cos-source-labels {
+  display: flex;
+  gap: 1.5rem;
+  font-size: 0.8125rem;
+  color: var(--cos-text-secondary);
+}
+.cosmos .cos-source-labels span {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+.cosmos .cos-source-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  display: inline-block;
+}
+.cosmos .cos-source-dot.claude { background: var(--cos-accent); }
+.cosmos .cos-source-dot.cursor { background: var(--cos-text-tertiary); }
+
+/* ── Session Cards (project page) ── */
+.cosmos .cos-sessions {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1rem;
+  margin-block-end: 2.5rem;
+}
+.cosmos .cos-session-card {
+  background: var(--cos-surface);
+  border: 1px solid var(--cos-border);
+  border-radius: var(--radius-lg);
+  padding: 1.25rem;
+  transition: border-color 200ms, box-shadow 200ms;
+}
+.cosmos .cos-session-card:hover {
+  border-color: var(--cos-border-accent);
+  box-shadow: 0 0 16px var(--cos-accent-dim);
+}
+.cosmos .cos-session-card h3 {
+  font-family: var(--font-display);
+  font-size: 0.9375rem;
+  font-weight: 600;
+  margin-block-end: 0.5rem;
+}
+.cosmos .cos-session-card h3 a {
+  color: var(--cos-text);
+  transition: color 200ms;
+}
+.cosmos .cos-session-card h3 a:visited { color: var(--cos-text); }
+.cosmos .cos-session-card h3 a:hover {
+  color: var(--cos-accent);
+  text-decoration: none;
+}
+.cosmos .cos-session-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  font-size: 0.75rem;
+  font-family: var(--font-mono);
+  color: var(--cos-text-tertiary);
+}
+.cosmos .cos-session-meta strong {
+  color: var(--cos-accent);
+  font-weight: 500;
+}
+.cosmos .cos-session-tag {
+  font-size: 0.6875rem;
+  font-family: var(--font-mono);
+  padding: 0.125rem 0.5rem;
+  border-radius: 999px;
+  border: 1px solid var(--cos-border);
+  color: var(--cos-text-tertiary);
+  margin-block-start: 0.5rem;
+  display: inline-block;
+}
+.cosmos a.session-card {
+  text-decoration: none;
+  color: inherit;
+  display: block;
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+.cosmos a.session-card:visited { color: inherit; }
+.cosmos a.session-card:hover {
+  transform: translateY(-2px);
+}
+
+/* ══════════════════════════════════════════════════════════════
+   SESSION
+   ══════════════════════════════════════════════════════════════ */
+
+/* ── Session Header ── */
+.cosmos .cos-session-header {
+  margin-block-end: 2rem;
+}
+.cosmos .cos-session-header h1 {
+  font-family: var(--font-display);
+  font-size: 2rem;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  margin-block-end: 1rem;
+  line-height: 1.3;
+}
+
+/* ── Meta Grid ── */
+.cosmos .cos-meta-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  margin-block-end: 2rem;
+}
+.cosmos .cos-meta-item {
+  background: var(--cos-surface);
+  border: 1px solid var(--cos-border);
+  border-radius: var(--radius);
+  padding: 0.75rem 1rem;
+  display: flex;
+  flex-direction: column;
+  min-width: 100px;
+}
+.cosmos .cos-meta-label {
+  font-size: 0.6875rem;
+  color: var(--cos-text-tertiary);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  margin-block-end: 0.125rem;
+}
+.cosmos .cos-meta-value {
+  font-family: var(--font-mono);
+  font-size: 0.9375rem;
+  font-weight: 500;
+  color: var(--cos-accent);
+}
+
+/* ── Dev Take ── */
+.cosmos .cos-dev-take {
+  background: var(--cos-surface);
+  border: 1px solid var(--cos-border-accent);
+  border-radius: var(--radius-lg);
+  padding: 1.25rem 1.5rem;
+  margin-block-end: 2.5rem;
+  position: relative;
+}
+.cosmos .cos-dev-take::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: linear-gradient(90deg, transparent, var(--cos-accent), transparent);
+}
+.cosmos .cos-dev-take-label {
+  font-family: var(--font-display);
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--cos-accent);
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  margin-block-end: 0.5rem;
+}
+.cosmos .cos-dev-take blockquote {
+  color: var(--cos-text-secondary);
+  font-size: 0.9375rem;
+  line-height: 1.7;
+  font-style: italic;
+  border: none;
+  padding: 0;
+  margin: 0;
+}
+
+/* ── Main + Sidebar Layout ── */
+.cosmos .cos-layout {
+  display: grid;
+  grid-template-columns: 1fr 280px;
+  gap: 2rem;
+  align-items: start;
+}
+
+/* ── Highlights ── */
+.cosmos .cos-highlights {
+  list-style: none;
+  padding: 0;
+  margin-block-end: 2.5rem;
+}
+.cosmos .cos-highlights li {
+  font-size: 0.875rem;
+  color: var(--cos-text-secondary);
+  line-height: 1.7;
+  padding: 0.375rem 0;
+  border-block-end: 1px solid var(--cos-border);
+}
+.cosmos .cos-highlights li:last-child {
+  border-block-end: none;
+}
+
+/* ── Execution Path / Beats ── */
+.cosmos .cos-beats {
+  margin-block-end: 2.5rem;
+}
+.cosmos .cos-beat {
+  position: relative;
+  padding-inline-start: 2rem;
+  padding-block-end: 1.5rem;
+}
+.cosmos .cos-beat:last-child { padding-block-end: 0; }
+.cosmos .cos-beat::before {
+  content: '';
+  position: absolute;
+  inset-inline-start: 6px;
+  top: 8px;
+  bottom: 0;
+  width: 1px;
+  background: var(--cos-border);
+}
+.cosmos .cos-beat:last-child::before { display: none; }
+.cosmos .cos-beat::after {
+  content: '';
+  position: absolute;
+  inset-inline-start: 0;
+  top: 4px;
+  width: 13px;
+  height: 13px;
+  border-radius: 50%;
+  border: 2px solid var(--cos-accent);
+  background: var(--cos-bg);
+  box-shadow: 0 0 6px var(--cos-accent-dim);
+}
+.cosmos .cos-beat h3 {
+  font-family: var(--font-display);
+  font-size: 1rem;
+  font-weight: 600;
+  margin-block-end: 0.375rem;
+}
+.cosmos .cos-beat p {
+  color: var(--cos-text-secondary);
+  font-size: 0.875rem;
+  line-height: 1.6;
+}
+
+/* ── Q&A ── */
+.cosmos .cos-qa {
+  margin-block-end: 2.5rem;
+}
+.cosmos .cos-qa-item {
+  background: var(--cos-surface);
+  border: 1px solid var(--cos-border);
+  border-radius: var(--radius-lg);
+  padding: 1.25rem;
+  margin-block-end: 1rem;
+}
+.cosmos .cos-qa-item:last-child { margin-block-end: 0; }
+.cosmos .cos-qa-question {
+  font-family: var(--font-display);
+  font-weight: 600;
+  font-size: 0.9375rem;
+  margin-block-end: 0.5rem;
+  color: var(--cos-text);
+}
+.cosmos .cos-qa-answer {
+  color: var(--cos-text-secondary);
+  font-size: 0.875rem;
+  line-height: 1.7;
+}
+
+/* ── Agent Summary ── */
+.cosmos .cos-agents {
+  margin-block-end: 2.5rem;
+}
+.cosmos .cos-agent-row {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.625rem 0;
+  border-block-end: 1px solid var(--cos-border);
+}
+.cosmos .cos-agent-row:last-child { border-block-end: none; }
+.cosmos .cos-agent-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+.cosmos .cos-agent-name {
+  font-size: 0.875rem;
+  font-weight: 500;
+  flex: 1;
+}
+.cosmos .cos-agent-meta {
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  color: var(--cos-text-tertiary);
+  display: flex;
+  gap: 1rem;
+}
+.cosmos .cos-agent-bar-track {
+  width: 80px;
+  height: 4px;
+  border-radius: 2px;
+  background: var(--cos-border);
+  overflow: hidden;
+}
+.cosmos .cos-agent-bar-fill {
+  height: 100%;
+  border-radius: 2px;
+}
+
+/* ── Sidebar ── */
+.cosmos .cos-sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+.cosmos .cos-sidebar-card {
+  background: var(--cos-surface);
+  border: 1px solid var(--cos-border);
+  border-radius: var(--radius-lg);
+  padding: 1.25rem;
+}
+.cosmos .cos-sidebar-title {
+  font-family: var(--font-display);
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--cos-text-tertiary);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  margin-block-end: 0.75rem;
+}
+.cosmos .cos-sidebar-skills {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+}
+.cosmos .cos-sidebar-skills .cos-skill-chip {
+  font-size: 0.6875rem;
+  padding: 0.1875rem 0.5rem;
+}
+
+/* ── Tools Table ── */
+.cosmos .cos-tools-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+.cosmos .cos-tools-table tr {
+  border-block-end: 1px solid var(--cos-border);
+}
+.cosmos .cos-tools-table tr:last-child { border-block-end: none; }
+.cosmos .cos-tools-table td {
+  padding: 0.5rem 0;
+  font-size: 0.8125rem;
+}
+.cosmos .cos-tools-table td:first-child {
+  font-family: var(--font-mono);
+  color: var(--cos-text);
+}
+.cosmos .cos-tools-table td:last-child {
+  text-align: end;
+  font-family: var(--font-mono);
+  color: var(--cos-accent);
+  font-weight: 500;
+}
+
+/* ── Files Table ── */
+.cosmos .cos-files-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+.cosmos .cos-files-table tr {
+  border-block-end: 1px solid var(--cos-border);
+}
+.cosmos .cos-files-table tr:last-child { border-block-end: none; }
+.cosmos .cos-files-table td {
+  padding: 0.5rem 0;
+  font-size: 0.75rem;
+  font-family: var(--font-mono);
+}
+.cosmos .cos-files-table td:first-child {
+  color: var(--cos-text-secondary);
+  word-break: break-all;
+  padding-inline-end: 0.75rem;
+}
+.cosmos .cos-files-table td:last-child {
+  text-align: end;
+  color: #22c55e;
+  white-space: nowrap;
+}
+
+/* ══════════════════════════════════════════════════════════════
+   RESPONSIVE
+   ══════════════════════════════════════════════════════════════ */
+
+@media (max-width: 768px) {
+  .cosmos .cos-page { padding: 1.25rem 1rem; }
+
+  /* Portfolio */
+  .cosmos .cos-hero h1 { font-size: 1.75rem; }
+  .cosmos .cos-hero-photo { width: 80px; height: 100px; }
+  .cosmos .cos-hero-contact { font-size: 0.75rem; }
+  .cosmos .cos-stats { grid-template-columns: repeat(2, 1fr); }
+  .cosmos .cos-project-card-header { flex-direction: column; gap: 0.5rem; }
+  .cosmos .cos-project-card-meta { flex-direction: column; gap: 0.375rem; }
+
+  /* Project */
+  .cosmos .cos-project-header h1 { font-size: 1.75rem; }
+  .cosmos .cos-phases { grid-template-columns: 1fr; }
+  .cosmos .cos-sessions { grid-template-columns: 1fr; }
+  .cosmos .cos-stats-row { flex-direction: column; }
+  .cosmos .cos-stat-pill { flex-direction: row; gap: 0.75rem; justify-content: center; }
+
+  /* Session */
+  .cosmos .cos-session-header h1 { font-size: 1.5rem; }
+  .cosmos .cos-layout { grid-template-columns: 1fr; }
+  .cosmos .cos-sidebar {
+    order: -1;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 1rem;
+  }
+  .cosmos .cos-meta-grid { flex-direction: column; }
+  .cosmos .cos-meta-item { flex-direction: row; gap: 0.75rem; align-items: center; }
+  .cosmos .cos-agent-bar-track { display: none; }
+
+  .cosmos .cos-footer { margin-block-start: 2rem; }
+}