/* ==========================================================================
   Design tokens
   ========================================================================== */
:root {
  --bg: #fbf9f6;
  --bg-alt: #ffffff;
  --bg-soft: #f3efe9;
  --text: #2d2a26;
  --text-secondary: #6b655d;
  --text-heading: #201d19;
  --accent: #6c5ce7;
  --accent-ink: #4834d4;
  --accent-rgb: 108, 92, 231;
  --accent-2: #ff6b6b;
  --accent-2-rgb: 255, 107, 107;
  --success: #2ecc71;
  --border: rgba(45, 42, 38, 0.1);
  --shadow: 0 20px 40px -20px rgba(45, 42, 38, 0.18);
  --shadow-sm: 0 8px 20px -10px rgba(45, 42, 38, 0.15);
  --nav-bg: rgba(251, 249, 246, 0.75);
  --heading-font: 'Fraunces', serif;
  --body-font: 'Plus Jakarta Sans', sans-serif;
  --radius: 20px;
  --radius-sm: 12px;
  --max-width: 1120px;
}

:root[data-theme="dark"] {
  --bg: #18151f;
  --bg-alt: #201c2c;
  --bg-soft: #26223a;
  --text: #ece8f5;
  --text-secondary: #a89fc2;
  --text-heading: #ffffff;
  --accent: #a29bfe;
  --accent-ink: #cbc4ff;
  --accent-rgb: 162, 155, 254;
  --accent-2: #ff8787;
  --accent-2-rgb: 255, 135, 135;
  --border: rgba(255, 255, 255, 0.1);
  --shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 8px 20px -10px rgba(0, 0, 0, 0.45);
  --nav-bg: rgba(24, 21, 31, 0.75);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background:
    radial-gradient(circle, rgba(var(--accent-rgb), 0.16) 1px, transparent 1px)
    0 0 / 32px 32px,
    var(--bg);
  color: var(--text);
  font-family: var(--body-font);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.3s ease, color 0.3s ease;
  overflow-x: hidden;
}

.container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--accent); color: white; }

h1, h2, h3 { font-family: var(--heading-font); color: var(--text-heading); font-weight: 600; margin: 0; }

/* background blobs */
.blob {
  position: fixed;
  border-radius: 50%;
  opacity: 0.5;
  z-index: -1;
  pointer-events: none;
}
/* flat radial gradients look like the old blurred circles but cost almost nothing to draw or scroll over */
.blob-1 { width: 640px; height: 640px; background: radial-gradient(circle, var(--accent), transparent 68%); top: -240px; right: -220px; }
.blob-2 { width: 600px; height: 600px; background: radial-gradient(circle, var(--accent-2), transparent 68%); bottom: -80px; left: -280px; opacity: 0.35; }
:root[data-theme="dark"] .blob { opacity: 0.32; }
:root[data-theme="dark"] .blob-2 { opacity: 0.22; }

/* ==========================================================================
   Nav — floating pill
   ========================================================================== */
.nav-wrap { position: sticky; top: 0; z-index: 100; padding: 18px 24px 0; }
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--max-width);
  margin: 0 auto;
  background: var(--nav-bg);
  backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 10px 10px 10px 22px;
  box-shadow: var(--shadow-sm);
}

.nav-logo { font-family: var(--heading-font); font-size: 1.25rem; font-weight: 600; color: var(--text-heading); white-space: nowrap; }
.nav-logo .dot { color: var(--accent); }
@media (max-width: 420px) {
  .nav-logo { font-size: 1rem; }
}

.nav-links { display: flex; align-items: center; gap: 28px; font-size: 0.92rem; font-weight: 500; }
.nav-links a { color: var(--text-secondary); position: relative; transition: color 0.2s ease; }
.nav-links a:hover, .nav-links a.active { color: var(--text-heading); }
.nav-links a.active::after {
  content: ''; position: absolute; left: 50%; bottom: -14px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); transform: translateX(-50%);
}

.nav-actions { display: flex; align-items: center; gap: 8px; }

.icon-btn {
  background: none; border: none; color: var(--text); cursor: pointer;
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s ease, color 0.2s ease;
}
.icon-btn:hover { background: rgba(var(--accent-rgb), 0.12); color: var(--accent); }

.hamburger { display: none; flex-direction: column; gap: 5px; }
.hamburger span { width: 18px; height: 2px; background: var(--text-heading); border-radius: 2px; transition: transform 0.25s ease, opacity 0.25s ease; }
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 26px; border-radius: 999px;
  font-family: var(--body-font); font-size: 0.95rem; font-weight: 600;
  cursor: pointer; border: 2px solid transparent; transition: all 0.25s ease;
  white-space: nowrap;
}
.btn-primary { background: var(--accent); color: white; }
.btn-primary:hover { background: var(--accent-ink); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn-outline { background: transparent; color: var(--text-heading); border-color: var(--border); }
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }
.btn-small { padding: 9px 18px; font-size: 0.85rem; }
.btn-large { padding: 17px 34px; font-size: 1.05rem; }

/* ==========================================================================
   Reveal-on-scroll
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: 40px;
  min-height: 82vh;
  padding-top: 40px;
}
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; min-height: auto; padding-top: 50px; text-align: center; }
  .hero-actions, .hero-socials { justify-content: center; }
  .hero-visual { order: -1; }
}

.availability-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent-ink);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  margin: 0 0 24px;
}
:root[data-theme="dark"] .availability-badge { color: var(--accent); }
.pulse-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--success);
  box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.6);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.55); }
  70% { box-shadow: 0 0 0 8px rgba(46, 204, 113, 0); }
  100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); }
}

.hero-greeting {
  font-size: clamp(2.4rem, 5.5vw, 4rem);
  line-height: 1.08;
  margin-bottom: 20px;
}
.hero-tagline { font-size: 1.2rem; color: var(--text-secondary); max-width: 540px; margin-bottom: 34px; }
@media (max-width: 860px) { .hero-tagline { margin-left: auto; margin-right: auto; } }

.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 34px; }
.hero-socials { display: flex; gap: 14px; }
.social-icon {
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-soft); color: var(--text-secondary);
  transition: all 0.2s ease;
}
.social-icon:hover { background: var(--accent); color: white; transform: translateY(-3px); }

.hero-visual { position: relative; display: flex; align-items: center; justify-content: center; height: 380px; }
.avatar-blob {
  width: 260px; height: 260px; border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow);
  animation: morph 8s ease-in-out infinite;
}
@keyframes morph {
  0%, 100% { border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%; }
  50% { border-radius: 60% 40% 35% 65% / 55% 60% 40% 45%; }
}
.avatar-initials { font-family: var(--heading-font); font-size: 4rem; font-weight: 600; color: white; }

.floating-chip {
  position: absolute;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
  animation: float 5s ease-in-out infinite;
}
.chip-1 { top: 6%; left: -4%; animation-delay: 0s; }
.chip-2 { bottom: 12%; right: -6%; animation-delay: 1.5s; }
.chip-3 { top: 48%; right: -14%; animation-delay: 3s; }
@media (max-width: 860px) { .floating-chip { display: none; } }
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* ==========================================================================
   Stats row
   ========================================================================== */
.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 40px;
}
.stat-item { text-align: center; }
.stat-value { font-family: var(--heading-font); font-size: 2.2rem; color: var(--accent); display: block; }
.stat-label { color: var(--text-secondary); font-size: 0.9rem; }

/* ==========================================================================
   Sections
   ========================================================================== */
.section { padding: 90px 24px; }
@media (max-width: 640px) { .section { padding: 60px 20px; } }

.eyebrow {
  display: inline-block;
  color: var(--accent);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 10px;
}
.section-title { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 48px; max-width: 700px; }

/* ==========================================================================
   Services
   ========================================================================== */
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.service-card {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px 26px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.service-icon {
  width: 52px; height: 52px; border-radius: 16px;
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.service-card h3 { font-size: 1.15rem; margin-bottom: 10px; }
.service-card p { color: var(--text-secondary); font-size: 0.92rem; margin: 0; }

/* ==========================================================================
   Featured work (case-study rows)
   ========================================================================== */
.featured-work { display: flex; flex-direction: column; gap: 28px; margin-bottom: 28px; }

.feature-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.feature-card:nth-child(even) .feature-media { order: 2; }
@media (max-width: 860px) {
  .feature-card { grid-template-columns: 1fr; }
  .feature-card:nth-child(even) .feature-media { order: 0; }
}

.feature-media {
  position: relative;
  min-height: 280px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb),0.25), rgba(var(--accent-2-rgb),0.15));
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.feature-media .placeholder-icon { color: rgba(var(--accent-rgb), 0.5); transition: opacity 0.2s ease; }
.feature-media:hover .placeholder-icon { opacity: 0.3; }
.feature-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.feature-body { padding: 40px; display: flex; flex-direction: column; justify-content: center; }
.feature-body .badge { align-self: flex-start; }
.feature-body h3 { font-size: 1.5rem; margin: 10px 0 4px; }
.feature-body .subtitle { color: var(--accent); font-weight: 600; font-size: 0.9rem; display: block; margin-bottom: 18px; }
.feature-row { margin-bottom: 14px; }
.feature-row .label { font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-heading); display: block; margin-bottom: 4px; }
.feature-row p { margin: 0; color: var(--text-secondary); font-size: 0.94rem; }
.feature-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; margin-bottom: 18px; }
.details-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--accent); font-weight: 700; font-size: 0.92rem;
}
.details-link:hover { color: var(--accent-ink); }

/* ==========================================================================
   More work grid (smaller cards)
   ========================================================================== */
.more-work-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.work-card {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.work-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.work-media {
  aspect-ratio: 16/10;
  background: linear-gradient(135deg, rgba(var(--accent-rgb),0.18), rgba(var(--accent-2-rgb),0.12));
  display: flex; align-items: center; justify-content: center;
  color: rgba(var(--accent-rgb), 0.5);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.work-media:hover { opacity: 0.85; }
.work-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Shared hover-reveal "View Details" pill used on both card sizes */
.media-cta {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  gap: 6px;
  background: rgba(20, 16, 12, 0.55);
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.work-media .media-cta { font-size: 0.82rem; }
.feature-media:hover .media-cta,
.work-media:hover .media-cta { opacity: 1; }
.work-body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.work-body h3 { font-size: 1.05rem; margin-bottom: 2px; }
.work-body .subtitle { color: var(--accent); font-size: 0.8rem; font-weight: 600; display: block; margin-bottom: 12px; }
.work-body p.desc { color: var(--text-secondary); font-size: 0.9rem; flex: 1; margin: 0 0 16px; }
.work-links { margin-top: auto; }
.work-links a { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-weight: 600; font-size: 0.85rem; }

.badge {
  display: inline-block; font-size: 0.72rem; font-weight: 700;
  padding: 4px 12px; border-radius: 999px;
  background: var(--bg-soft); color: var(--text-secondary);
  margin-bottom: 12px; width: fit-content;
}
.badge.public { background: rgba(var(--accent-rgb), 0.15); color: var(--accent-ink); }
:root[data-theme="dark"] .badge.public { color: var(--accent); }

.tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.tag {
  font-size: 0.75rem; font-weight: 600;
  background: var(--bg-soft); color: var(--text-secondary);
  padding: 4px 10px; border-radius: 999px;
}

/* ==========================================================================
   About
   ========================================================================== */
.about-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 50px; align-items: stretch; }
@media (max-width: 800px) { .about-grid { grid-template-columns: 1fr; } }
.about-text { color: var(--text-secondary); font-size: 1.05rem; margin-bottom: 28px; }

.highlights-row { display: flex; flex-direction: column; gap: 12px; }
.highlight-item {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-alt); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 14px 18px;
  font-weight: 600; font-size: 0.92rem;
}
.highlight-item .emoji { font-size: 1.3rem; }

.about-side { display: flex; flex-direction: column; gap: 24px; height: 100%; }

.skills-card {
  background: var(--bg-alt); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 30px;
  display: flex; flex-direction: column; flex: 1;
}
.skills-card .btn { margin-top: auto; align-self: flex-start; }
.skills-card h3 { font-size: 1.1rem; margin-bottom: 18px; }
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  background: var(--bg-soft); color: var(--text-heading);
  padding: 7px 14px; border-radius: 999px; font-size: 0.85rem; font-weight: 600;
}

/* A small, fixed-dark "terminal" card — a deliberate contrast island against
   the warm theme, light or dark, for a bit of playful personality. */
.terminal-card {
  background: #17151f;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}
.terminal-header {
  display: flex; align-items: center; gap: 7px;
  padding: 14px 16px;
  background: #221f2b;
}
.terminal-dot { width: 11px; height: 11px; border-radius: 50%; }
.terminal-title { margin-left: 10px; color: #8b86a0; font-size: 0.78rem; }
.terminal-body { padding: 20px 22px 24px; font-size: 0.88rem; line-height: 1.9; }
.terminal-body p { margin: 0; }
.terminal-prompt { color: #a29bfe; font-weight: 700; margin-right: 8px; }
.terminal-output { color: #ece8f5; margin: 0 0 12px 18px !important; }
.terminal-ok { color: #4ade80; }
.terminal-cursor {
  display: inline-block; width: 7px; height: 15px; background: #a29bfe;
  animation: blink 1s step-end infinite; vertical-align: middle;
}
@keyframes blink { 50% { opacity: 0; } }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-section { padding-bottom: 110px; }
.contact-card {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-radius: 28px;
  padding: 70px 40px;
  text-align: center;
  color: white;
}
.contact-card .eyebrow { color: rgba(255,255,255,0.85); }
.contact-title { font-size: clamp(1.8rem, 5vw, 2.6rem); color: white; margin-bottom: 18px; }
.contact-text { color: rgba(255,255,255,0.9); max-width: 520px; margin: 0 auto 32px; }
.contact-card .btn-primary { background: white; color: var(--accent-ink); }
.contact-card .btn-primary:hover { background: rgba(255,255,255,0.9); transform: translateY(-2px); }
.contact-email { margin-top: 22px; color: rgba(255,255,255,0.85); font-size: 0.92rem; }
.contact-email a { text-decoration: underline; color: white; font-weight: 600; }

/* ==========================================================================
   Project detail page
   ========================================================================== */
.project-page { padding: 40px 24px 100px; }

.back-link {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--text-secondary); font-weight: 600; font-size: 0.92rem;
  margin-bottom: 32px;
  transition: color 0.2s ease;
}
.back-link:hover { color: var(--accent); }

.project-header { max-width: 760px; margin-bottom: 40px; }
.project-header h1 { font-size: clamp(2rem, 5vw, 3rem); margin: 12px 0 8px; }
.project-subtitle { color: var(--text-secondary); font-size: 1.15rem; margin-bottom: 18px; }
.project-links { display: flex; gap: 12px; margin-top: 18px; }

.gallery-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb),0.15), rgba(var(--accent-2-rgb),0.1));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 80px 20px;
  color: rgba(var(--accent-rgb), 0.6);
  font-weight: 600;
  margin-bottom: 48px;
}

.project-gallery { margin-bottom: 48px; display: flex; flex-direction: column; gap: 24px; }
.gallery-video {
  position: relative; border-radius: var(--radius); overflow: hidden; cursor: pointer;
  aspect-ratio: 16/9; background: var(--bg-soft);
}
.gallery-video img { width: 100%; height: 100%; object-fit: cover; }
.gallery-video .play-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.3); transition: background 0.2s ease;
}
.gallery-video:hover .play-overlay { background: rgba(0,0,0,0.45); }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}
.gallery-grid figure { margin: 0; }
.gallery-grid img {
  width: 100%; border-radius: var(--radius-sm); border: 1px solid var(--border);
  cursor: zoom-in; display: block; box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease;
}
.gallery-grid img:hover { transform: translateY(-3px); }
.gallery-grid figcaption { font-size: 0.85rem; color: var(--text-secondary); margin-top: 10px; }

.project-body-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 800px) { .project-body-grid { grid-template-columns: 1fr; } }

.story-block { margin-bottom: 26px; }
.story-block h3 { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent); margin-bottom: 8px; }
.story-block p { color: var(--text-secondary); font-size: 1.02rem; margin: 0; }

.project-features {
  background: var(--bg-alt); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 30px;
}
.project-features h3 { font-size: 1.1rem; margin-bottom: 16px; }
.project-features ul { margin: 0; padding-left: 20px; color: var(--text-secondary); }
.project-features li { margin-bottom: 12px; line-height: 1.5; }
.project-features li::marker { color: var(--accent); }

.project-cta {
  margin-top: 70px;
  text-align: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-radius: 28px;
  padding: 56px 32px;
  color: white;
}
.project-cta h2 { color: white; font-size: clamp(1.4rem, 4vw, 2rem); margin-bottom: 12px; }
.project-cta p { color: rgba(255,255,255,0.9); margin-bottom: 26px; }
.project-cta .btn-primary { background: white; color: var(--accent-ink); }
.project-cta .btn-primary:hover { background: rgba(255,255,255,0.9); }

.not-found { text-align: center; padding: 80px 20px; }
.not-found a { color: var(--accent); font-weight: 600; }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer { padding: 30px 24px 50px; }
.footer-inner {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px;
  color: var(--text-secondary); font-size: 0.88rem;
}
.footer-links { display: flex; gap: 22px; }
.footer-links a:hover { color: var(--accent); }

/* ==========================================================================
   Lightbox
   ========================================================================== */
.lightbox {
  position: fixed; inset: 0; background: rgba(20, 16, 12, 0.85);
  display: none; align-items: center; justify-content: center; flex-direction: column;
  z-index: 1000; padding: 40px 20px;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: min(90vw, 1000px); max-height: 75vh; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.lightbox-caption { color: #fff; max-width: 700px; text-align: center; margin-top: 16px; font-size: 0.9rem; }
.lightbox-close { position: absolute; top: 20px; right: 28px; background: none; border: none; color: #fff; font-size: 2.4rem; cursor: pointer; line-height: 1; }

/* ==========================================================================
   Video modal
   ========================================================================== */
.video-modal {
  position: fixed; inset: 0; background: rgba(20, 16, 12, 0.85);
  display: none; align-items: center; justify-content: center; z-index: 1100; padding: 40px 20px;
}
.video-modal.open { display: flex; }
.video-modal-body { width: min(90vw, 960px); aspect-ratio: 16/9; }
.video-modal-body iframe, .video-modal-body video { width: 100%; height: 100%; border: none; border-radius: 12px; background: #000; }
.video-modal-close { position: absolute; top: 20px; right: 28px; background: none; border: none; color: #fff; font-size: 2.4rem; cursor: pointer; line-height: 1; }

/* ==========================================================================
   Back to top
   ========================================================================== */
.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  color: var(--text-heading);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s ease, color 0.2s ease;
  z-index: 90;
}
.back-to-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.back-to-top:hover { background: var(--accent); color: white; border-color: var(--accent); }
@media (max-width: 640px) { .back-to-top { right: 16px; bottom: 16px; width: 42px; height: 42px; } }

/* ==========================================================================
   Mobile nav
   ========================================================================== */
@media (max-width: 760px) {
  .hamburger { display: flex; }
  .nav-links {
    position: fixed; top: 78px; right: 24px; left: 24px;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    flex-direction: column; align-items: flex-start;
    padding: 24px; gap: 18px; font-size: 1.05rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transform: translateY(-12px) scale(0.98);
    opacity: 0;
    pointer-events: none;
    transition: all 0.25s ease;
  }
  .nav-links.open { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }
}

/* ==========================================================================
   Experience (work, personal projects, research)
   ========================================================================== */
.exp-heading { font-size: 1.15rem; margin: 0 0 18px; }
.exp-heading:not(:first-of-type) { margin-top: 56px; }
.exp-list { display: grid; gap: 16px; }
.exp-item {
  background: var(--bg-alt); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px 24px;
}
.exp-top { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
.exp-item h4 { font-size: 1.05rem; margin: 0 0 2px; }
.exp-org { color: var(--accent); font-size: 0.85rem; font-weight: 600; }
.exp-period { color: var(--text-secondary); font-size: 0.85rem; font-weight: 600; white-space: nowrap; }
.exp-item ul { margin: 0; padding-left: 18px; color: var(--text-secondary); font-size: 0.92rem; }
.exp-item li + li { margin-top: 4px; }
.proj-card:hover { transform: translateY(-4px); }
.research-list { display: grid; gap: 16px; }
.research-item {
  background: var(--bg-alt); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px 24px;
}
.research-item h4 { font-size: 1.02rem; margin: 0 0 4px; }
.research-context { color: var(--accent); font-size: 0.8rem; font-weight: 600; display: block; margin-bottom: 10px; }
.research-item p { margin: 0; color: var(--text-secondary); font-size: 0.92rem; }
@media (max-width: 640px) { .exp-item, .research-item { padding: 18px; } }

/* ==========================================================================
   Side themes. Freelance is purple/black (Rinnegan), Work is red/black (Sharingan),
   matching the two halves of the yin-yang on the landing page.
   ========================================================================== */
html[data-side="freelance"] {
  --accent: #7c3aed; --accent-ink: #5b21b6; --accent-rgb: 124, 58, 237;
  --accent-2: #a855f7; --accent-2-rgb: 168, 85, 247;
}
html[data-side="freelance"][data-theme="dark"] {
  --accent: #a78bfa; --accent-ink: #ddd6fe; --accent-rgb: 167, 139, 250;
  --accent-2: #c084fc; --accent-2-rgb: 192, 132, 252;
}
html[data-side="work"] {
  --accent: #d62828; --accent-ink: #a81c1c; --accent-rgb: 214, 40, 40;
  --accent-2: #ff5252; --accent-2-rgb: 255, 82, 82;
}
html[data-side="work"][data-theme="dark"] {
  --accent: #ff6b6b; --accent-ink: #ffc9c9; --accent-rgb: 255, 107, 107;
  --accent-2: #ff8e8e; --accent-2-rgb: 255, 142, 142;
}
html[data-side="work"][data-theme="dark"] .btn-primary,
html[data-side="work"][data-theme="dark"] ::selection { color: #2b0a0a; }

/* ==========================================================================
   Landing page: yin-yang chooser
   Kept deliberately cheap to draw: no blur or drop-shadow filters, only flat
   gradients, so the page costs almost nothing while the transition runs.
   ========================================================================== */
:root {
  --yy-eye-size: min(44vmin, 360px); /* the eye stays small enough to see properly */
  --yy-fx-size: min(112vmin, 720px); /* the swirl layers: the script sets this to cover the whole page */
  --yy-sym: clamp(230px, min(86vw, 46vh), 520px);
  --eye-sharingan: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-100 -100 200 200'%3E%3Cdefs%3E%3CradialGradient id='g' cx='0' cy='0' r='100' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23ff5a4d'/%3E%3Cstop offset='.5' stop-color='%23e11414'/%3E%3Cstop offset='1' stop-color='%237a0000'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle r='100' fill='url(%23g)'/%3E%3Ccircle r='96.5' fill='none' stroke='%230a0000' stroke-width='3'/%3E%3Ccircle r='62' fill='none' stroke='%230a0000' stroke-width='2.5'/%3E%3Cg fill='%230a0000'%3E%3Ccircle r='13'/%3E%3Cg%3E%3Ccircle cx='0' cy='-62' r='14'/%3E%3Cpath d='M8,-73.4 Q55,-66 61.5,-9 Q44,-48 8,-50.6Z'/%3E%3C/g%3E%3Cg transform='rotate(120)'%3E%3Ccircle cx='0' cy='-62' r='14'/%3E%3Cpath d='M8,-73.4 Q55,-66 61.5,-9 Q44,-48 8,-50.6Z'/%3E%3C/g%3E%3Cg transform='rotate(240)'%3E%3Ccircle cx='0' cy='-62' r='14'/%3E%3Cpath d='M8,-73.4 Q55,-66 61.5,-9 Q44,-48 8,-50.6Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --eye-rinnegan: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-100 -100 200 200'%3E%3Cdefs%3E%3CradialGradient id='g' cx='0' cy='0' r='100' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23f0e0ff'/%3E%3Cstop offset='.4' stop-color='%23b36bff'/%3E%3Cstop offset='.8' stop-color='%236b2fd0'/%3E%3Cstop offset='1' stop-color='%233a1380'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle r='100' fill='url(%23g)'/%3E%3Ccircle cx='-9.2' cy='18.5' r='1.0' fill='%23ffffff' opacity='0.39'/%3E%3Ccircle cx='-37.7' cy='-8.7' r='0.5' fill='%23ffffff' opacity='0.60'/%3E%3Ccircle cx='43.2' cy='10.4' r='0.6' fill='%23ffffff' opacity='0.40'/%3E%3Ccircle cx='-68.9' cy='35.4' r='0.6' fill='%23ffffff' opacity='0.46'/%3E%3Ccircle cx='-61.0' cy='-62.9' r='1.0' fill='%23ffffff' opacity='0.55'/%3E%3Ccircle cx='11.8' cy='-1.8' r='1.2' fill='%23ffffff' opacity='0.49'/%3E%3Ccircle cx='11.0' cy='14.1' r='0.7' fill='%23ffffff' opacity='0.76'/%3E%3Ccircle cx='24.0' cy='51.6' r='1.0' fill='%23ffffff' opacity='0.54'/%3E%3Ccircle cx='-12.7' cy='-3.9' r='0.5' fill='%23ffffff' opacity='0.45'/%3E%3Ccircle cx='-18.6' cy='-39.8' r='0.8' fill='%23ffffff' opacity='0.64'/%3E%3Ccircle cx='-31.8' cy='9.6' r='1.1' fill='%23ffffff' opacity='0.70'/%3E%3Ccircle cx='2.1' cy='56.2' r='0.9' fill='%23ffffff' opacity='0.79'/%3E%3Ccircle cx='-4.1' cy='-31.9' r='1.3' fill='%23ffffff' opacity='0.41'/%3E%3Ccircle cx='-62.3' cy='35.2' r='0.6' fill='%23ffffff' opacity='0.59'/%3E%3Ccircle cx='62.2' cy='15.6' r='1.1' fill='%23ffffff' opacity='0.64'/%3E%3Ccircle cx='24.4' cy='-24.2' r='1.1' fill='%23ffffff' opacity='0.65'/%3E%3Ccircle cx='-40.6' cy='-22.3' r='1.2' fill='%23ffffff' opacity='0.82'/%3E%3Ccircle cx='-62.9' cy='10.3' r='0.5' fill='%23ffffff' opacity='0.70'/%3E%3Ccircle cx='-55.1' cy='-73.0' r='1.2' fill='%23ffffff' opacity='0.49'/%3E%3Ccircle cx='-48.3' cy='42.2' r='0.5' fill='%23ffffff' opacity='0.58'/%3E%3Ccircle cx='8.8' cy='15.5' r='0.5' fill='%23ffffff' opacity='0.73'/%3E%3Ccircle cx='19.8' cy='20.9' r='0.8' fill='%23ffffff' opacity='0.79'/%3E%3Ccircle r='96.5' fill='none' stroke='%2312061f' stroke-width='4'/%3E%3Ccircle r='72' fill='none' stroke='%2312061f' stroke-width='5'/%3E%3Ccircle r='40' fill='none' stroke='%2312061f' stroke-width='3.5'/%3E%3Ccircle r='9' fill='%2312061f'/%3E%3Cg fill='%2312061f'%3E%3Cg transform='rotate(0) scale(0.6452)'%3E%3Ccircle cx='0' cy='-62' r='14'/%3E%3Cpath d='M8,-71 Q55,-62 61.5,-9 Q53,-50 8,-56Z'/%3E%3C/g%3E%3Cg transform='rotate(120) scale(0.6452)'%3E%3Ccircle cx='0' cy='-62' r='14'/%3E%3Cpath d='M8,-71 Q55,-62 61.5,-9 Q53,-50 8,-56Z'/%3E%3C/g%3E%3Cg transform='rotate(240) scale(0.6452)'%3E%3Ccircle cx='0' cy='-62' r='14'/%3E%3Cpath d='M8,-71 Q55,-62 61.5,-9 Q53,-50 8,-56Z'/%3E%3C/g%3E%3C/g%3E%3Cg fill='%2312061f'%3E%3Cg transform='rotate(60) scale(1.1613)'%3E%3Ccircle cx='0' cy='-62' r='14'/%3E%3Cpath d='M8,-71 Q55,-62 61.5,-9 Q53,-50 8,-56Z'/%3E%3C/g%3E%3Cg transform='rotate(180) scale(1.1613)'%3E%3Ccircle cx='0' cy='-62' r='14'/%3E%3Cpath d='M8,-71 Q55,-62 61.5,-9 Q53,-50 8,-56Z'/%3E%3C/g%3E%3Cg transform='rotate(300) scale(1.1613)'%3E%3Ccircle cx='0' cy='-62' r='14'/%3E%3Cpath d='M8,-71 Q55,-62 61.5,-9 Q53,-50 8,-56Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --rings-rinnegan: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-100 -100 200 200'%3E%3Ccircle r='10' fill='none' stroke='%23b98bff' stroke-opacity='0.85' stroke-width='3.2'/%3E%3Ccircle r='16' fill='none' stroke='%23b98bff' stroke-opacity='0.50' stroke-width='1.6'/%3E%3Ccircle r='22' fill='none' stroke='%23b98bff' stroke-opacity='0.50' stroke-width='1.6'/%3E%3Ccircle r='28' fill='none' stroke='%23b98bff' stroke-opacity='0.85' stroke-width='3.2'/%3E%3Ccircle r='34' fill='none' stroke='%23b98bff' stroke-opacity='0.50' stroke-width='1.6'/%3E%3Ccircle r='40' fill='none' stroke='%23b98bff' stroke-opacity='0.50' stroke-width='1.6'/%3E%3Ccircle r='46' fill='none' stroke='%23b98bff' stroke-opacity='0.85' stroke-width='3.2'/%3E%3Ccircle r='52' fill='none' stroke='%23b98bff' stroke-opacity='0.50' stroke-width='1.6'/%3E%3Ccircle r='58' fill='none' stroke='%23b98bff' stroke-opacity='0.50' stroke-width='1.6'/%3E%3Ccircle r='64' fill='none' stroke='%23b98bff' stroke-opacity='0.85' stroke-width='3.2'/%3E%3Ccircle r='70' fill='none' stroke='%23b98bff' stroke-opacity='0.50' stroke-width='1.6'/%3E%3Ccircle r='76' fill='none' stroke='%23b98bff' stroke-opacity='0.50' stroke-width='1.6'/%3E%3Ccircle r='82' fill='none' stroke='%23b98bff' stroke-opacity='0.85' stroke-width='3.2'/%3E%3Ccircle r='88' fill='none' stroke='%23b98bff' stroke-opacity='0.50' stroke-width='1.6'/%3E%3Ccircle r='94' fill='none' stroke='%23b98bff' stroke-opacity='0.50' stroke-width='1.6'/%3E%3Ccircle r='100' fill='none' stroke='%23b98bff' stroke-opacity='0.85' stroke-width='3.2'/%3E%3C/svg%3E");
  --arms-sharingan: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-100 -100 200 200'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0.0,-4.0 L-0.3,-4.8 L-0.7,-5.5 L-1.2,-6.2 L-1.8,-6.9 L-2.4,-7.5 L-3.2,-8.1 L-4.0,-8.6 L-4.9,-9.0 L-5.9,-9.3 L-7.0,-9.6 L-8.0,-9.7 L-9.2,-9.8 L-10.3,-9.7 L-11.5,-9.5 L-12.7,-9.3 L-14.0,-8.9 L-15.2,-8.3 L-16.4,-7.7 L-17.6,-7.0 L-18.7,-6.1 L-19.8,-5.1 L-20.9,-4.0 L-21.8,-2.8 L-22.8,-1.4 L-23.6,-0.0 L-24.3,1.5 L-25.0,3.2 L-25.5,4.9 L-25.9,6.6 L-26.2,8.5 L-26.3,10.4 L-26.3,12.4 L-26.2,14.4 L-25.9,16.4 L-25.4,18.5 L-24.8,20.5 L-24.0,22.6 L-23.1,24.6 L-22.0,26.6 L-20.8,28.6 L-19.4,30.5 L-17.8,32.3 L-16.0,34.1 L-14.2,35.8 L-12.1,37.3 L-10.0,38.8 L-7.6,40.1 L-5.2,41.3 L-2.7,42.3 L-0.0,43.2 L2.8,43.9 L5.6,44.4 L8.5,44.7 L11.5,44.8 L14.5,44.8 L17.6,44.5 L20.7,44.0 L23.8,43.3 L26.9,42.4 L30.0,41.3 L33.0,39.9 L36.0,38.3 L38.9,36.5 L41.7,34.5 L44.4,32.3 L47.0,29.8 L49.5,27.2 L51.8,24.4 L54.0,21.4 L56.0,18.2 L57.7,14.8 L59.3,11.3 L60.7,7.7 L61.8,3.9 L62.8,0.0 L63.4,-4.0 L63.8,-8.1 L63.9,-12.2 L63.8,-16.4 L63.4,-20.6 L62.7,-24.8 L61.7,-29.1 L60.5,-33.2 L58.9,-37.4 L57.1,-41.5 L55.0,-45.5 L52.6,-49.4 L49.9,-53.2 L47.0,-56.8 L43.8,-60.3 L40.3,-63.6 L36.6,-66.7 L32.7,-69.5 L28.6,-72.2 L24.2,-74.6 L19.7,-76.7 L15.0,-78.6 L10.1,-80.1 L5.1,-81.4 L0.0,-82.3 L-5.2,-83.0 L-10.5,-83.2 L-15.9,-83.2 L-21.3,-82.8 L-26.7,-82.0 L-32.0,-80.9 L-37.4,-79.5 L-42.7,-77.6 L-47.9,-75.5 L-53.0,-72.9 L-58.0,-70.1 L-62.8,-66.9 L-67.4,-63.3 L-71.9,-59.5 L-76.1,-55.3 L-80.1,-50.8 L-83.8,-46.1 L-87.3,-41.1 L-90.4,-35.8 L-93.2,-30.3' stroke='%230a0000' stroke-width='9'/%3E%3Cpath d='M3.5,-2.0 L4.0,-2.6 L4.4,-3.4 L4.8,-4.1 L5.1,-5.0 L5.3,-5.9 L5.4,-6.8 L5.4,-7.8 L5.3,-8.8 L5.1,-9.8 L4.8,-10.8 L4.4,-11.8 L3.9,-12.8 L3.2,-13.8 L2.5,-14.8 L1.6,-15.7 L0.7,-16.5 L-0.4,-17.3 L-1.5,-18.0 L-2.8,-18.7 L-4.1,-19.2 L-5.5,-19.7 L-7.0,-20.1 L-8.5,-20.3 L-10.1,-20.4 L-11.8,-20.4 L-13.5,-20.3 L-15.2,-20.0 L-16.9,-19.6 L-18.7,-19.1 L-20.4,-18.4 L-22.2,-17.6 L-23.9,-16.6 L-25.5,-15.5 L-27.1,-14.2 L-28.7,-12.8 L-30.2,-11.2 L-31.6,-9.5 L-32.9,-7.7 L-34.1,-5.8 L-35.1,-3.7 L-36.1,-1.5 L-36.9,0.8 L-37.6,3.2 L-38.1,5.6 L-38.4,8.2 L-38.6,10.8 L-38.5,13.4 L-38.3,16.1 L-38.0,18.8 L-37.4,21.6 L-36.6,24.3 L-35.6,27.0 L-34.5,29.7 L-33.1,32.4 L-31.5,35.0 L-29.7,37.5 L-27.8,39.9 L-25.6,42.3 L-23.3,44.5 L-20.7,46.6 L-18.1,48.5 L-15.2,50.3 L-12.2,51.9 L-9.0,53.4 L-5.7,54.6 L-2.3,55.7 L1.2,56.5 L4.8,57.1 L8.5,57.4 L12.2,57.5 L16.0,57.4 L19.9,57.0 L23.7,56.4 L27.6,55.5 L31.4,54.3 L35.2,52.9 L38.9,51.2 L42.5,49.3 L46.1,47.1 L49.5,44.6 L52.9,41.9 L56.0,38.9 L59.0,35.8 L61.9,32.3 L64.5,28.7 L66.9,24.9 L69.1,20.9 L71.0,16.7 L72.7,12.3 L74.1,7.8 L75.2,3.2 L76.0,-1.6 L76.6,-6.4 L76.8,-11.3 L76.7,-16.3 L76.3,-21.3 L75.5,-26.3 L74.5,-31.3 L73.0,-36.3 L71.3,-41.2 L69.2,-46.0 L66.8,-50.7 L64.1,-55.3 L61.1,-59.8 L57.7,-64.1 L54.1,-68.2 L50.1,-72.1 L45.9,-75.8 L41.4,-79.2 L36.7,-82.4 L31.7,-85.2 L26.5,-87.8 L21.1,-90.1 L15.6,-92.0 L9.8,-93.6 L4.0,-94.8 L-2.0,-95.6 L-8.1,-96.1 L-14.2,-96.2 L-20.4,-95.9' stroke='%230a0000' stroke-width='9'/%3E%3Cpath d='M3.5,2.0 L4.3,2.1 L5.1,2.2 L6.0,2.1 L6.9,1.9 L7.7,1.6 L8.6,1.3 L9.5,0.8 L10.3,0.2 L11.0,-0.5 L11.8,-1.2 L12.4,-2.1 L13.0,-3.1 L13.6,-4.1 L14.0,-5.2 L14.4,-6.4 L14.7,-7.7 L14.8,-9.0 L14.9,-10.3 L14.8,-11.7 L14.6,-13.2 L14.3,-14.6 L13.9,-16.1 L13.3,-17.5 L12.6,-19.0 L11.8,-20.4 L10.8,-21.8 L9.7,-23.2 L8.5,-24.5 L7.2,-25.7 L5.7,-26.9 L4.1,-28.0 L2.4,-29.0 L0.6,-29.8 L-1.3,-30.6 L-3.3,-31.2 L-5.4,-31.7 L-7.5,-32.1 L-9.8,-32.3 L-12.0,-32.4 L-14.4,-32.3 L-16.7,-32.0 L-19.1,-31.6 L-21.5,-30.9 L-23.9,-30.1 L-26.3,-29.2 L-28.6,-28.0 L-30.9,-26.7 L-33.1,-25.2 L-35.3,-23.5 L-37.4,-21.6 L-39.4,-19.5 L-41.2,-17.3 L-43.0,-15.0 L-44.6,-12.5 L-46.1,-9.8 L-47.4,-7.0 L-48.5,-4.1 L-49.4,-1.0 L-50.2,2.1 L-50.7,5.3 L-51.1,8.6 L-51.2,12.0 L-51.1,15.4 L-50.7,18.9 L-50.2,22.3 L-49.4,25.8 L-48.3,29.3 L-47.0,32.7 L-45.5,36.1 L-43.7,39.4 L-41.7,42.6 L-39.5,45.7 L-37.0,48.7 L-34.3,51.6 L-31.4,54.3 L-28.2,56.9 L-24.9,59.3 L-21.4,61.5 L-17.7,63.5 L-13.9,65.2 L-9.9,66.7 L-5.7,68.0 L-1.4,69.0 L2.9,69.7 L7.4,70.2 L11.9,70.4 L16.5,70.2 L21.1,69.8 L25.7,69.1 L30.3,68.1 L34.9,66.7 L39.4,65.1 L43.9,63.1 L48.2,60.8 L52.5,58.3 L56.6,55.4 L60.5,52.3 L64.3,48.8 L67.9,45.1 L71.3,41.2 L74.4,37.0 L77.3,32.5 L80.0,27.8 L82.3,23.0 L84.4,17.9 L86.1,12.7 L87.5,7.3 L88.6,1.9 L89.3,-3.7 L89.7,-9.4 L89.7,-15.2 L89.3,-20.9 L88.6,-26.7 L87.4,-32.5 L85.9,-38.3 L84.1,-44.0 L81.8,-49.5 L79.2,-55.0 L76.2,-60.4 L72.8,-65.6' stroke='%230a0000' stroke-width='9'/%3E%3Cpath d='M0.0,4.0 L0.3,4.8 L0.7,5.5 L1.2,6.2 L1.8,6.9 L2.4,7.5 L3.2,8.1 L4.0,8.6 L4.9,9.0 L5.9,9.3 L7.0,9.6 L8.0,9.7 L9.2,9.8 L10.3,9.7 L11.5,9.5 L12.7,9.3 L14.0,8.9 L15.2,8.3 L16.4,7.7 L17.6,7.0 L18.7,6.1 L19.8,5.1 L20.9,4.0 L21.8,2.8 L22.8,1.4 L23.6,-0.0 L24.3,-1.5 L25.0,-3.2 L25.5,-4.9 L25.9,-6.6 L26.2,-8.5 L26.3,-10.4 L26.3,-12.4 L26.2,-14.4 L25.9,-16.4 L25.4,-18.5 L24.8,-20.5 L24.0,-22.6 L23.1,-24.6 L22.0,-26.6 L20.8,-28.6 L19.4,-30.5 L17.8,-32.3 L16.0,-34.1 L14.2,-35.8 L12.1,-37.3 L10.0,-38.8 L7.6,-40.1 L5.2,-41.3 L2.7,-42.3 L0.0,-43.2 L-2.8,-43.9 L-5.6,-44.4 L-8.5,-44.7 L-11.5,-44.8 L-14.5,-44.8 L-17.6,-44.5 L-20.7,-44.0 L-23.8,-43.3 L-26.9,-42.4 L-30.0,-41.3 L-33.0,-39.9 L-36.0,-38.3 L-38.9,-36.5 L-41.7,-34.5 L-44.4,-32.3 L-47.0,-29.8 L-49.5,-27.2 L-51.8,-24.4 L-54.0,-21.4 L-56.0,-18.2 L-57.7,-14.8 L-59.3,-11.3 L-60.7,-7.7 L-61.8,-3.9 L-62.8,-0.0 L-63.4,4.0 L-63.8,8.1 L-63.9,12.2 L-63.8,16.4 L-63.4,20.6 L-62.7,24.8 L-61.7,29.1 L-60.5,33.2 L-58.9,37.4 L-57.1,41.5 L-55.0,45.5 L-52.6,49.4 L-49.9,53.2 L-47.0,56.8 L-43.8,60.3 L-40.3,63.6 L-36.6,66.7 L-32.7,69.5 L-28.6,72.2 L-24.2,74.6 L-19.7,76.7 L-15.0,78.6 L-10.1,80.1 L-5.1,81.4 L-0.0,82.3 L5.2,83.0 L10.5,83.2 L15.9,83.2 L21.3,82.8 L26.7,82.0 L32.0,80.9 L37.4,79.5 L42.7,77.6 L47.9,75.5 L53.0,72.9 L58.0,70.1 L62.8,66.9 L67.4,63.3 L71.9,59.5 L76.1,55.3 L80.1,50.8 L83.8,46.1 L87.3,41.1 L90.4,35.8 L93.2,30.3' stroke='%230a0000' stroke-width='9'/%3E%3Cpath d='M-3.5,2.0 L-4.0,2.6 L-4.4,3.4 L-4.8,4.1 L-5.1,5.0 L-5.3,5.9 L-5.4,6.8 L-5.4,7.8 L-5.3,8.8 L-5.1,9.8 L-4.8,10.8 L-4.4,11.8 L-3.9,12.8 L-3.2,13.8 L-2.5,14.8 L-1.6,15.7 L-0.7,16.5 L0.4,17.3 L1.5,18.0 L2.8,18.7 L4.1,19.2 L5.5,19.7 L7.0,20.1 L8.5,20.3 L10.1,20.4 L11.8,20.4 L13.5,20.3 L15.2,20.0 L16.9,19.6 L18.7,19.1 L20.4,18.4 L22.2,17.6 L23.9,16.6 L25.5,15.5 L27.1,14.2 L28.7,12.8 L30.2,11.2 L31.6,9.5 L32.9,7.7 L34.1,5.8 L35.1,3.7 L36.1,1.5 L36.9,-0.8 L37.6,-3.2 L38.1,-5.6 L38.4,-8.2 L38.6,-10.8 L38.5,-13.4 L38.3,-16.1 L38.0,-18.8 L37.4,-21.6 L36.6,-24.3 L35.6,-27.0 L34.5,-29.7 L33.1,-32.4 L31.5,-35.0 L29.7,-37.5 L27.8,-39.9 L25.6,-42.3 L23.3,-44.5 L20.7,-46.6 L18.1,-48.5 L15.2,-50.3 L12.2,-51.9 L9.0,-53.4 L5.7,-54.6 L2.3,-55.7 L-1.2,-56.5 L-4.8,-57.1 L-8.5,-57.4 L-12.2,-57.5 L-16.0,-57.4 L-19.9,-57.0 L-23.7,-56.4 L-27.6,-55.5 L-31.4,-54.3 L-35.2,-52.9 L-38.9,-51.2 L-42.5,-49.3 L-46.1,-47.1 L-49.5,-44.6 L-52.9,-41.9 L-56.0,-38.9 L-59.0,-35.8 L-61.9,-32.3 L-64.5,-28.7 L-66.9,-24.9 L-69.1,-20.9 L-71.0,-16.7 L-72.7,-12.3 L-74.1,-7.8 L-75.2,-3.2 L-76.0,1.6 L-76.6,6.4 L-76.8,11.3 L-76.7,16.3 L-76.3,21.3 L-75.5,26.3 L-74.5,31.3 L-73.0,36.3 L-71.3,41.2 L-69.2,46.0 L-66.8,50.7 L-64.1,55.3 L-61.1,59.8 L-57.7,64.1 L-54.1,68.2 L-50.1,72.1 L-45.9,75.8 L-41.4,79.2 L-36.7,82.4 L-31.7,85.2 L-26.5,87.8 L-21.1,90.1 L-15.6,92.0 L-9.8,93.6 L-4.0,94.8 L2.0,95.6 L8.1,96.1 L14.2,96.2 L20.4,95.9' stroke='%230a0000' stroke-width='9'/%3E%3Cpath d='M-3.5,-2.0 L-4.3,-2.1 L-5.1,-2.2 L-6.0,-2.1 L-6.9,-1.9 L-7.7,-1.6 L-8.6,-1.3 L-9.5,-0.8 L-10.3,-0.2 L-11.0,0.5 L-11.8,1.2 L-12.4,2.1 L-13.0,3.1 L-13.6,4.1 L-14.0,5.2 L-14.4,6.4 L-14.7,7.7 L-14.8,9.0 L-14.9,10.3 L-14.8,11.7 L-14.6,13.2 L-14.3,14.6 L-13.9,16.1 L-13.3,17.5 L-12.6,19.0 L-11.8,20.4 L-10.8,21.8 L-9.7,23.2 L-8.5,24.5 L-7.2,25.7 L-5.7,26.9 L-4.1,28.0 L-2.4,29.0 L-0.6,29.8 L1.3,30.6 L3.3,31.2 L5.4,31.7 L7.5,32.1 L9.8,32.3 L12.0,32.4 L14.4,32.3 L16.7,32.0 L19.1,31.6 L21.5,30.9 L23.9,30.1 L26.3,29.2 L28.6,28.0 L30.9,26.7 L33.1,25.2 L35.3,23.5 L37.4,21.6 L39.4,19.5 L41.2,17.3 L43.0,15.0 L44.6,12.5 L46.1,9.8 L47.4,7.0 L48.5,4.1 L49.4,1.0 L50.2,-2.1 L50.7,-5.3 L51.1,-8.6 L51.2,-12.0 L51.1,-15.4 L50.7,-18.9 L50.2,-22.3 L49.4,-25.8 L48.3,-29.3 L47.0,-32.7 L45.5,-36.1 L43.7,-39.4 L41.7,-42.6 L39.5,-45.7 L37.0,-48.7 L34.3,-51.6 L31.4,-54.3 L28.2,-56.9 L24.9,-59.3 L21.4,-61.5 L17.7,-63.5 L13.9,-65.2 L9.9,-66.7 L5.7,-68.0 L1.4,-69.0 L-2.9,-69.7 L-7.4,-70.2 L-11.9,-70.4 L-16.5,-70.2 L-21.1,-69.8 L-25.7,-69.1 L-30.3,-68.1 L-34.9,-66.7 L-39.4,-65.1 L-43.9,-63.1 L-48.2,-60.8 L-52.5,-58.3 L-56.6,-55.4 L-60.5,-52.3 L-64.3,-48.8 L-67.9,-45.1 L-71.3,-41.2 L-74.4,-37.0 L-77.3,-32.5 L-80.0,-27.8 L-82.3,-23.0 L-84.4,-17.9 L-86.1,-12.7 L-87.5,-7.3 L-88.6,-1.9 L-89.3,3.7 L-89.7,9.4 L-89.7,15.2 L-89.3,20.9 L-88.6,26.7 L-87.4,32.5 L-85.9,38.3 L-84.1,44.0 L-81.8,49.5 L-79.2,55.0 L-76.2,60.4 L-72.8,65.6' stroke='%230a0000' stroke-width='9'/%3E%3Cpath d='M0.0,-4.0 L-0.3,-4.8 L-0.7,-5.5 L-1.2,-6.2 L-1.8,-6.9 L-2.4,-7.5 L-3.2,-8.1 L-4.0,-8.6 L-4.9,-9.0 L-5.9,-9.3 L-7.0,-9.6 L-8.0,-9.7 L-9.2,-9.8 L-10.3,-9.7 L-11.5,-9.5 L-12.7,-9.3 L-14.0,-8.9 L-15.2,-8.3 L-16.4,-7.7 L-17.6,-7.0 L-18.7,-6.1 L-19.8,-5.1 L-20.9,-4.0 L-21.8,-2.8 L-22.8,-1.4 L-23.6,-0.0 L-24.3,1.5 L-25.0,3.2 L-25.5,4.9 L-25.9,6.6 L-26.2,8.5 L-26.3,10.4 L-26.3,12.4 L-26.2,14.4 L-25.9,16.4 L-25.4,18.5 L-24.8,20.5 L-24.0,22.6 L-23.1,24.6 L-22.0,26.6 L-20.8,28.6 L-19.4,30.5 L-17.8,32.3 L-16.0,34.1 L-14.2,35.8 L-12.1,37.3 L-10.0,38.8 L-7.6,40.1 L-5.2,41.3 L-2.7,42.3 L-0.0,43.2 L2.8,43.9 L5.6,44.4 L8.5,44.7 L11.5,44.8 L14.5,44.8 L17.6,44.5 L20.7,44.0 L23.8,43.3 L26.9,42.4 L30.0,41.3 L33.0,39.9 L36.0,38.3 L38.9,36.5 L41.7,34.5 L44.4,32.3 L47.0,29.8 L49.5,27.2 L51.8,24.4 L54.0,21.4 L56.0,18.2 L57.7,14.8 L59.3,11.3 L60.7,7.7 L61.8,3.9 L62.8,0.0 L63.4,-4.0 L63.8,-8.1 L63.9,-12.2 L63.8,-16.4 L63.4,-20.6 L62.7,-24.8 L61.7,-29.1 L60.5,-33.2 L58.9,-37.4 L57.1,-41.5 L55.0,-45.5 L52.6,-49.4 L49.9,-53.2 L47.0,-56.8 L43.8,-60.3 L40.3,-63.6 L36.6,-66.7 L32.7,-69.5 L28.6,-72.2 L24.2,-74.6 L19.7,-76.7 L15.0,-78.6 L10.1,-80.1 L5.1,-81.4 L0.0,-82.3 L-5.2,-83.0 L-10.5,-83.2 L-15.9,-83.2 L-21.3,-82.8 L-26.7,-82.0 L-32.0,-80.9 L-37.4,-79.5 L-42.7,-77.6 L-47.9,-75.5 L-53.0,-72.9 L-58.0,-70.1 L-62.8,-66.9 L-67.4,-63.3 L-71.9,-59.5 L-76.1,-55.3 L-80.1,-50.8 L-83.8,-46.1 L-87.3,-41.1 L-90.4,-35.8 L-93.2,-30.3' stroke='%23ff2d2d' stroke-width='3.6'/%3E%3Cpath d='M3.5,-2.0 L4.0,-2.6 L4.4,-3.4 L4.8,-4.1 L5.1,-5.0 L5.3,-5.9 L5.4,-6.8 L5.4,-7.8 L5.3,-8.8 L5.1,-9.8 L4.8,-10.8 L4.4,-11.8 L3.9,-12.8 L3.2,-13.8 L2.5,-14.8 L1.6,-15.7 L0.7,-16.5 L-0.4,-17.3 L-1.5,-18.0 L-2.8,-18.7 L-4.1,-19.2 L-5.5,-19.7 L-7.0,-20.1 L-8.5,-20.3 L-10.1,-20.4 L-11.8,-20.4 L-13.5,-20.3 L-15.2,-20.0 L-16.9,-19.6 L-18.7,-19.1 L-20.4,-18.4 L-22.2,-17.6 L-23.9,-16.6 L-25.5,-15.5 L-27.1,-14.2 L-28.7,-12.8 L-30.2,-11.2 L-31.6,-9.5 L-32.9,-7.7 L-34.1,-5.8 L-35.1,-3.7 L-36.1,-1.5 L-36.9,0.8 L-37.6,3.2 L-38.1,5.6 L-38.4,8.2 L-38.6,10.8 L-38.5,13.4 L-38.3,16.1 L-38.0,18.8 L-37.4,21.6 L-36.6,24.3 L-35.6,27.0 L-34.5,29.7 L-33.1,32.4 L-31.5,35.0 L-29.7,37.5 L-27.8,39.9 L-25.6,42.3 L-23.3,44.5 L-20.7,46.6 L-18.1,48.5 L-15.2,50.3 L-12.2,51.9 L-9.0,53.4 L-5.7,54.6 L-2.3,55.7 L1.2,56.5 L4.8,57.1 L8.5,57.4 L12.2,57.5 L16.0,57.4 L19.9,57.0 L23.7,56.4 L27.6,55.5 L31.4,54.3 L35.2,52.9 L38.9,51.2 L42.5,49.3 L46.1,47.1 L49.5,44.6 L52.9,41.9 L56.0,38.9 L59.0,35.8 L61.9,32.3 L64.5,28.7 L66.9,24.9 L69.1,20.9 L71.0,16.7 L72.7,12.3 L74.1,7.8 L75.2,3.2 L76.0,-1.6 L76.6,-6.4 L76.8,-11.3 L76.7,-16.3 L76.3,-21.3 L75.5,-26.3 L74.5,-31.3 L73.0,-36.3 L71.3,-41.2 L69.2,-46.0 L66.8,-50.7 L64.1,-55.3 L61.1,-59.8 L57.7,-64.1 L54.1,-68.2 L50.1,-72.1 L45.9,-75.8 L41.4,-79.2 L36.7,-82.4 L31.7,-85.2 L26.5,-87.8 L21.1,-90.1 L15.6,-92.0 L9.8,-93.6 L4.0,-94.8 L-2.0,-95.6 L-8.1,-96.1 L-14.2,-96.2 L-20.4,-95.9' stroke='%23ff2d2d' stroke-width='3.6'/%3E%3Cpath d='M3.5,2.0 L4.3,2.1 L5.1,2.2 L6.0,2.1 L6.9,1.9 L7.7,1.6 L8.6,1.3 L9.5,0.8 L10.3,0.2 L11.0,-0.5 L11.8,-1.2 L12.4,-2.1 L13.0,-3.1 L13.6,-4.1 L14.0,-5.2 L14.4,-6.4 L14.7,-7.7 L14.8,-9.0 L14.9,-10.3 L14.8,-11.7 L14.6,-13.2 L14.3,-14.6 L13.9,-16.1 L13.3,-17.5 L12.6,-19.0 L11.8,-20.4 L10.8,-21.8 L9.7,-23.2 L8.5,-24.5 L7.2,-25.7 L5.7,-26.9 L4.1,-28.0 L2.4,-29.0 L0.6,-29.8 L-1.3,-30.6 L-3.3,-31.2 L-5.4,-31.7 L-7.5,-32.1 L-9.8,-32.3 L-12.0,-32.4 L-14.4,-32.3 L-16.7,-32.0 L-19.1,-31.6 L-21.5,-30.9 L-23.9,-30.1 L-26.3,-29.2 L-28.6,-28.0 L-30.9,-26.7 L-33.1,-25.2 L-35.3,-23.5 L-37.4,-21.6 L-39.4,-19.5 L-41.2,-17.3 L-43.0,-15.0 L-44.6,-12.5 L-46.1,-9.8 L-47.4,-7.0 L-48.5,-4.1 L-49.4,-1.0 L-50.2,2.1 L-50.7,5.3 L-51.1,8.6 L-51.2,12.0 L-51.1,15.4 L-50.7,18.9 L-50.2,22.3 L-49.4,25.8 L-48.3,29.3 L-47.0,32.7 L-45.5,36.1 L-43.7,39.4 L-41.7,42.6 L-39.5,45.7 L-37.0,48.7 L-34.3,51.6 L-31.4,54.3 L-28.2,56.9 L-24.9,59.3 L-21.4,61.5 L-17.7,63.5 L-13.9,65.2 L-9.9,66.7 L-5.7,68.0 L-1.4,69.0 L2.9,69.7 L7.4,70.2 L11.9,70.4 L16.5,70.2 L21.1,69.8 L25.7,69.1 L30.3,68.1 L34.9,66.7 L39.4,65.1 L43.9,63.1 L48.2,60.8 L52.5,58.3 L56.6,55.4 L60.5,52.3 L64.3,48.8 L67.9,45.1 L71.3,41.2 L74.4,37.0 L77.3,32.5 L80.0,27.8 L82.3,23.0 L84.4,17.9 L86.1,12.7 L87.5,7.3 L88.6,1.9 L89.3,-3.7 L89.7,-9.4 L89.7,-15.2 L89.3,-20.9 L88.6,-26.7 L87.4,-32.5 L85.9,-38.3 L84.1,-44.0 L81.8,-49.5 L79.2,-55.0 L76.2,-60.4 L72.8,-65.6' stroke='%23ff2d2d' stroke-width='3.6'/%3E%3Cpath d='M0.0,4.0 L0.3,4.8 L0.7,5.5 L1.2,6.2 L1.8,6.9 L2.4,7.5 L3.2,8.1 L4.0,8.6 L4.9,9.0 L5.9,9.3 L7.0,9.6 L8.0,9.7 L9.2,9.8 L10.3,9.7 L11.5,9.5 L12.7,9.3 L14.0,8.9 L15.2,8.3 L16.4,7.7 L17.6,7.0 L18.7,6.1 L19.8,5.1 L20.9,4.0 L21.8,2.8 L22.8,1.4 L23.6,-0.0 L24.3,-1.5 L25.0,-3.2 L25.5,-4.9 L25.9,-6.6 L26.2,-8.5 L26.3,-10.4 L26.3,-12.4 L26.2,-14.4 L25.9,-16.4 L25.4,-18.5 L24.8,-20.5 L24.0,-22.6 L23.1,-24.6 L22.0,-26.6 L20.8,-28.6 L19.4,-30.5 L17.8,-32.3 L16.0,-34.1 L14.2,-35.8 L12.1,-37.3 L10.0,-38.8 L7.6,-40.1 L5.2,-41.3 L2.7,-42.3 L0.0,-43.2 L-2.8,-43.9 L-5.6,-44.4 L-8.5,-44.7 L-11.5,-44.8 L-14.5,-44.8 L-17.6,-44.5 L-20.7,-44.0 L-23.8,-43.3 L-26.9,-42.4 L-30.0,-41.3 L-33.0,-39.9 L-36.0,-38.3 L-38.9,-36.5 L-41.7,-34.5 L-44.4,-32.3 L-47.0,-29.8 L-49.5,-27.2 L-51.8,-24.4 L-54.0,-21.4 L-56.0,-18.2 L-57.7,-14.8 L-59.3,-11.3 L-60.7,-7.7 L-61.8,-3.9 L-62.8,-0.0 L-63.4,4.0 L-63.8,8.1 L-63.9,12.2 L-63.8,16.4 L-63.4,20.6 L-62.7,24.8 L-61.7,29.1 L-60.5,33.2 L-58.9,37.4 L-57.1,41.5 L-55.0,45.5 L-52.6,49.4 L-49.9,53.2 L-47.0,56.8 L-43.8,60.3 L-40.3,63.6 L-36.6,66.7 L-32.7,69.5 L-28.6,72.2 L-24.2,74.6 L-19.7,76.7 L-15.0,78.6 L-10.1,80.1 L-5.1,81.4 L-0.0,82.3 L5.2,83.0 L10.5,83.2 L15.9,83.2 L21.3,82.8 L26.7,82.0 L32.0,80.9 L37.4,79.5 L42.7,77.6 L47.9,75.5 L53.0,72.9 L58.0,70.1 L62.8,66.9 L67.4,63.3 L71.9,59.5 L76.1,55.3 L80.1,50.8 L83.8,46.1 L87.3,41.1 L90.4,35.8 L93.2,30.3' stroke='%23ff2d2d' stroke-width='3.6'/%3E%3Cpath d='M-3.5,2.0 L-4.0,2.6 L-4.4,3.4 L-4.8,4.1 L-5.1,5.0 L-5.3,5.9 L-5.4,6.8 L-5.4,7.8 L-5.3,8.8 L-5.1,9.8 L-4.8,10.8 L-4.4,11.8 L-3.9,12.8 L-3.2,13.8 L-2.5,14.8 L-1.6,15.7 L-0.7,16.5 L0.4,17.3 L1.5,18.0 L2.8,18.7 L4.1,19.2 L5.5,19.7 L7.0,20.1 L8.5,20.3 L10.1,20.4 L11.8,20.4 L13.5,20.3 L15.2,20.0 L16.9,19.6 L18.7,19.1 L20.4,18.4 L22.2,17.6 L23.9,16.6 L25.5,15.5 L27.1,14.2 L28.7,12.8 L30.2,11.2 L31.6,9.5 L32.9,7.7 L34.1,5.8 L35.1,3.7 L36.1,1.5 L36.9,-0.8 L37.6,-3.2 L38.1,-5.6 L38.4,-8.2 L38.6,-10.8 L38.5,-13.4 L38.3,-16.1 L38.0,-18.8 L37.4,-21.6 L36.6,-24.3 L35.6,-27.0 L34.5,-29.7 L33.1,-32.4 L31.5,-35.0 L29.7,-37.5 L27.8,-39.9 L25.6,-42.3 L23.3,-44.5 L20.7,-46.6 L18.1,-48.5 L15.2,-50.3 L12.2,-51.9 L9.0,-53.4 L5.7,-54.6 L2.3,-55.7 L-1.2,-56.5 L-4.8,-57.1 L-8.5,-57.4 L-12.2,-57.5 L-16.0,-57.4 L-19.9,-57.0 L-23.7,-56.4 L-27.6,-55.5 L-31.4,-54.3 L-35.2,-52.9 L-38.9,-51.2 L-42.5,-49.3 L-46.1,-47.1 L-49.5,-44.6 L-52.9,-41.9 L-56.0,-38.9 L-59.0,-35.8 L-61.9,-32.3 L-64.5,-28.7 L-66.9,-24.9 L-69.1,-20.9 L-71.0,-16.7 L-72.7,-12.3 L-74.1,-7.8 L-75.2,-3.2 L-76.0,1.6 L-76.6,6.4 L-76.8,11.3 L-76.7,16.3 L-76.3,21.3 L-75.5,26.3 L-74.5,31.3 L-73.0,36.3 L-71.3,41.2 L-69.2,46.0 L-66.8,50.7 L-64.1,55.3 L-61.1,59.8 L-57.7,64.1 L-54.1,68.2 L-50.1,72.1 L-45.9,75.8 L-41.4,79.2 L-36.7,82.4 L-31.7,85.2 L-26.5,87.8 L-21.1,90.1 L-15.6,92.0 L-9.8,93.6 L-4.0,94.8 L2.0,95.6 L8.1,96.1 L14.2,96.2 L20.4,95.9' stroke='%23ff2d2d' stroke-width='3.6'/%3E%3Cpath d='M-3.5,-2.0 L-4.3,-2.1 L-5.1,-2.2 L-6.0,-2.1 L-6.9,-1.9 L-7.7,-1.6 L-8.6,-1.3 L-9.5,-0.8 L-10.3,-0.2 L-11.0,0.5 L-11.8,1.2 L-12.4,2.1 L-13.0,3.1 L-13.6,4.1 L-14.0,5.2 L-14.4,6.4 L-14.7,7.7 L-14.8,9.0 L-14.9,10.3 L-14.8,11.7 L-14.6,13.2 L-14.3,14.6 L-13.9,16.1 L-13.3,17.5 L-12.6,19.0 L-11.8,20.4 L-10.8,21.8 L-9.7,23.2 L-8.5,24.5 L-7.2,25.7 L-5.7,26.9 L-4.1,28.0 L-2.4,29.0 L-0.6,29.8 L1.3,30.6 L3.3,31.2 L5.4,31.7 L7.5,32.1 L9.8,32.3 L12.0,32.4 L14.4,32.3 L16.7,32.0 L19.1,31.6 L21.5,30.9 L23.9,30.1 L26.3,29.2 L28.6,28.0 L30.9,26.7 L33.1,25.2 L35.3,23.5 L37.4,21.6 L39.4,19.5 L41.2,17.3 L43.0,15.0 L44.6,12.5 L46.1,9.8 L47.4,7.0 L48.5,4.1 L49.4,1.0 L50.2,-2.1 L50.7,-5.3 L51.1,-8.6 L51.2,-12.0 L51.1,-15.4 L50.7,-18.9 L50.2,-22.3 L49.4,-25.8 L48.3,-29.3 L47.0,-32.7 L45.5,-36.1 L43.7,-39.4 L41.7,-42.6 L39.5,-45.7 L37.0,-48.7 L34.3,-51.6 L31.4,-54.3 L28.2,-56.9 L24.9,-59.3 L21.4,-61.5 L17.7,-63.5 L13.9,-65.2 L9.9,-66.7 L5.7,-68.0 L1.4,-69.0 L-2.9,-69.7 L-7.4,-70.2 L-11.9,-70.4 L-16.5,-70.2 L-21.1,-69.8 L-25.7,-69.1 L-30.3,-68.1 L-34.9,-66.7 L-39.4,-65.1 L-43.9,-63.1 L-48.2,-60.8 L-52.5,-58.3 L-56.6,-55.4 L-60.5,-52.3 L-64.3,-48.8 L-67.9,-45.1 L-71.3,-41.2 L-74.4,-37.0 L-77.3,-32.5 L-80.0,-27.8 L-82.3,-23.0 L-84.4,-17.9 L-86.1,-12.7 L-87.5,-7.3 L-88.6,-1.9 L-89.3,3.7 L-89.7,9.4 L-89.7,15.2 L-89.3,20.9 L-88.6,26.7 L-87.4,32.5 L-85.9,38.3 L-84.1,44.0 L-81.8,49.5 L-79.2,55.0 L-76.2,60.4 L-72.8,65.6' stroke='%23ff2d2d' stroke-width='3.6'/%3E%3C/g%3E%3C/svg%3E");
  --eye-rinnegan-base: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-100 -100 200 200'%3E%3Cdefs%3E%3CradialGradient id='g' cx='0' cy='0' r='100' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23f0e0ff'/%3E%3Cstop offset='.4' stop-color='%23b36bff'/%3E%3Cstop offset='.8' stop-color='%236b2fd0'/%3E%3Cstop offset='1' stop-color='%233a1380'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle r='100' fill='url(%23g)'/%3E%3Ccircle cx='-9.2' cy='18.5' r='1.0' fill='%23ffffff' opacity='0.39'/%3E%3Ccircle cx='-37.7' cy='-8.7' r='0.5' fill='%23ffffff' opacity='0.60'/%3E%3Ccircle cx='43.2' cy='10.4' r='0.6' fill='%23ffffff' opacity='0.40'/%3E%3Ccircle cx='-68.9' cy='35.4' r='0.6' fill='%23ffffff' opacity='0.46'/%3E%3Ccircle cx='-61.0' cy='-62.9' r='1.0' fill='%23ffffff' opacity='0.55'/%3E%3Ccircle cx='11.8' cy='-1.8' r='1.2' fill='%23ffffff' opacity='0.49'/%3E%3Ccircle cx='11.0' cy='14.1' r='0.7' fill='%23ffffff' opacity='0.76'/%3E%3Ccircle cx='24.0' cy='51.6' r='1.0' fill='%23ffffff' opacity='0.54'/%3E%3Ccircle cx='-12.7' cy='-3.9' r='0.5' fill='%23ffffff' opacity='0.45'/%3E%3Ccircle cx='-18.6' cy='-39.8' r='0.8' fill='%23ffffff' opacity='0.64'/%3E%3Ccircle cx='-31.8' cy='9.6' r='1.1' fill='%23ffffff' opacity='0.70'/%3E%3Ccircle cx='2.1' cy='56.2' r='0.9' fill='%23ffffff' opacity='0.79'/%3E%3Ccircle cx='-4.1' cy='-31.9' r='1.3' fill='%23ffffff' opacity='0.41'/%3E%3Ccircle cx='-62.3' cy='35.2' r='0.6' fill='%23ffffff' opacity='0.59'/%3E%3Ccircle cx='62.2' cy='15.6' r='1.1' fill='%23ffffff' opacity='0.64'/%3E%3Ccircle cx='24.4' cy='-24.2' r='1.1' fill='%23ffffff' opacity='0.65'/%3E%3Ccircle cx='-40.6' cy='-22.3' r='1.2' fill='%23ffffff' opacity='0.82'/%3E%3Ccircle cx='-62.9' cy='10.3' r='0.5' fill='%23ffffff' opacity='0.70'/%3E%3Ccircle cx='-55.1' cy='-73.0' r='1.2' fill='%23ffffff' opacity='0.49'/%3E%3Ccircle cx='-48.3' cy='42.2' r='0.5' fill='%23ffffff' opacity='0.58'/%3E%3Ccircle cx='8.8' cy='15.5' r='0.5' fill='%23ffffff' opacity='0.73'/%3E%3Ccircle cx='19.8' cy='20.9' r='0.8' fill='%23ffffff' opacity='0.79'/%3E%3Ccircle r='96.5' fill='none' stroke='%2312061f' stroke-width='4'/%3E%3Ccircle r='72' fill='none' stroke='%2312061f' stroke-width='5'/%3E%3Ccircle r='40' fill='none' stroke='%2312061f' stroke-width='3.5'/%3E%3Ccircle r='9' fill='%2312061f'/%3E%3C/svg%3E");
  --eye-rinnegan-in: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-100 -100 200 200'%3E%3Cg fill='%2312061f'%3E%3Cg transform='rotate(0) scale(0.6452)'%3E%3Ccircle cx='0' cy='-62' r='14'/%3E%3Cpath d='M8,-71 Q55,-62 61.5,-9 Q53,-50 8,-56Z'/%3E%3C/g%3E%3Cg transform='rotate(120) scale(0.6452)'%3E%3Ccircle cx='0' cy='-62' r='14'/%3E%3Cpath d='M8,-71 Q55,-62 61.5,-9 Q53,-50 8,-56Z'/%3E%3C/g%3E%3Cg transform='rotate(240) scale(0.6452)'%3E%3Ccircle cx='0' cy='-62' r='14'/%3E%3Cpath d='M8,-71 Q55,-62 61.5,-9 Q53,-50 8,-56Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --eye-rinnegan-out: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-100 -100 200 200'%3E%3Cg fill='%2312061f'%3E%3Cg transform='rotate(60) scale(1.1613)'%3E%3Ccircle cx='0' cy='-62' r='14'/%3E%3Cpath d='M8,-71 Q55,-62 61.5,-9 Q53,-50 8,-56Z'/%3E%3C/g%3E%3Cg transform='rotate(180) scale(1.1613)'%3E%3Ccircle cx='0' cy='-62' r='14'/%3E%3Cpath d='M8,-71 Q55,-62 61.5,-9 Q53,-50 8,-56Z'/%3E%3C/g%3E%3Cg transform='rotate(300) scale(1.1613)'%3E%3Ccircle cx='0' cy='-62' r='14'/%3E%3Cpath d='M8,-71 Q55,-62 61.5,-9 Q53,-50 8,-56Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --burst-rinnegan: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-100 -100 200 200'%3E%3Cg fill='%23e9d5ff'%3E%3Cpath d='M26.0,1.6 L98.0,0.2 L98.0,-0.2 L26.0,-1.6 Z'/%3E%3Cpath d='M24.5,8.9 L94.0,27.8 L94.1,27.4 L25.4,5.8 Z'/%3E%3Cpath d='M21.0,15.4 L82.3,53.2 L82.6,52.8 L22.7,12.7 Z'/%3E%3Cpath d='M15.8,20.7 L64.0,74.2 L64.4,73.9 L18.2,18.6 Z'/%3E%3Cpath d='M9.3,24.3 L40.5,89.2 L40.9,89.0 L12.3,23.0 Z'/%3E%3Cpath d='M2.1,26.0 L13.7,97.0 L14.2,97.0 L5.3,25.5 Z'/%3E%3Cpath d='M-5.3,25.5 L-14.2,97.0 L-13.7,97.0 L-2.1,26.0 Z'/%3E%3Cpath d='M-12.3,23.0 L-40.9,89.0 L-40.5,89.2 L-9.3,24.3 Z'/%3E%3Cpath d='M-18.2,18.6 L-64.4,73.9 L-64.0,74.2 L-15.8,20.7 Z'/%3E%3Cpath d='M-22.7,12.7 L-82.6,52.8 L-82.3,53.2 L-21.0,15.4 Z'/%3E%3Cpath d='M-25.4,5.8 L-94.1,27.4 L-94.0,27.8 L-24.5,8.9 Z'/%3E%3Cpath d='M-26.0,-1.6 L-98.0,-0.2 L-98.0,0.3 L-26.0,1.6 Z'/%3E%3Cpath d='M-24.5,-8.9 L-94.0,-27.8 L-94.1,-27.4 L-25.4,-5.8 Z'/%3E%3Cpath d='M-21.0,-15.4 L-82.3,-53.2 L-82.6,-52.8 L-22.7,-12.7 Z'/%3E%3Cpath d='M-15.8,-20.7 L-64.0,-74.2 L-64.4,-73.9 L-18.2,-18.6 Z'/%3E%3Cpath d='M-9.3,-24.3 L-40.5,-89.2 L-40.9,-89.0 L-12.3,-23.0 Z'/%3E%3Cpath d='M-2.1,-26.0 L-13.7,-97.0 L-14.2,-97.0 L-5.3,-25.5 Z'/%3E%3Cpath d='M5.3,-25.5 L14.2,-97.0 L13.7,-97.0 L2.1,-26.0 Z'/%3E%3Cpath d='M12.3,-23.0 L40.9,-89.0 L40.5,-89.2 L9.3,-24.3 Z'/%3E%3Cpath d='M18.2,-18.6 L64.4,-73.9 L64.0,-74.2 L15.8,-20.7 Z'/%3E%3Cpath d='M22.7,-12.7 L82.6,-52.8 L82.3,-53.2 L21.0,-15.4 Z'/%3E%3Cpath d='M25.4,-5.8 L94.1,-27.4 L94.0,-27.8 L24.5,-8.9 Z'/%3E%3C/g%3E%3C/svg%3E");
  --crow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 32'%3E%3Cpath d='M30,13 C26,5 16,1 2,6 C12,8 18,12 22,18 C24,22 27,24 30,24 C33,24 36,22 38,18 C42,12 48,8 58,6 C44,1 34,5 30,13 Z M28,24 L30,31 L32,24 Z' fill='%230a0a0f' stroke='%23ff6b6b' stroke-width='1.3' stroke-linejoin='round'/%3E%3Ccircle cx='30' cy='12' r='3.2' fill='%230a0a0f' stroke='%23ff6b6b' stroke-width='1'/%3E%3C/svg%3E");
}
.yy-body {
  /* the landing page is exactly one screen: it never scrolls */
  position: fixed; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden;
  display: flex; flex-direction: column;
}
.yy-body .blob-1 { background: radial-gradient(circle, rgba(124, 58, 237, 0.55), transparent 68%); }
.yy-body .blob-2 { background: radial-gradient(circle, rgba(239, 68, 68, 0.45), transparent 68%); }
.yy-top {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 28px;
}
.yy-main {
  position: relative; z-index: 2;
  flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 24px 28px;
  overflow: hidden; /* the soft glow behind the symbol is wider than a phone screen */
}
.yy-title { font-size: clamp(2rem, 5vw, 3.4rem); margin: 0 0 12px; }
.yy-sub { color: var(--text-secondary); font-size: 1.05rem; margin: 0 0 clamp(20px, 4vh, 40px); max-width: 480px; }
.yy-hint { color: var(--text-secondary); font-size: 0.85rem; margin: 16px 0 0; letter-spacing: 0.04em; }
@media (max-height: 680px) { .yy-sub { display: none; } .yy-title { margin-bottom: 18px; } }
@media (max-height: 520px) { .yy-title, .eyebrow, .yy-hint { display: none; } .yy-main { padding-bottom: 12px; } :root { --yy-sym: min(86vw, 74vh); } }

.yy-stage {
  position: relative; isolation: isolate;
  width: var(--yy-sym); margin: 0 auto;
  will-change: transform;
}
/* soft glow behind the symbol: a flat gradient instead of a blurred drop-shadow */
.yy-stage::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: 50%; width: 150%; height: 150%; transform: translate(-50%, -50%);
  background:
    radial-gradient(circle at 34% 50%, rgba(124, 58, 237, 0.2), transparent 46%),
    radial-gradient(circle at 66% 50%, rgba(239, 68, 68, 0.17), transparent 46%);
}
.yy-symbol {
  display: block; width: 100%; height: auto; overflow: visible;
  animation: yyIn 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.half { cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.half path { transition: transform 0.25s ease, stroke-opacity 0.25s ease; transform-origin: 0 0; stroke: #fff; stroke-width: 2; stroke-opacity: 0; }
.half-left path { fill: url(#yyGradFreelance); }
.half-right path { fill: url(#yyGradWork); }
.dot-left { fill: #ef4444; pointer-events: none; }
.dot-right { fill: #8b5cf6; pointer-events: none; }
.yy-ring { fill: none; stroke: rgba(255, 255, 255, 0.12); stroke-width: 1.5; pointer-events: none; }
:root:not([data-theme="dark"]) .yy-ring { stroke: rgba(45, 42, 38, 0.16); }

.yy-text, .yy-text-sub { pointer-events: none; text-anchor: middle; fill: #ffffff; }
.yy-text { font-family: var(--heading-font); font-weight: 600; font-size: 15px; }
.yy-text-sub { font-family: var(--body-font); font-weight: 600; font-size: 6.8px; letter-spacing: 0.02em; opacity: 0.88; }

.half:hover path, .half:focus-visible path { transform: scale(1.03); stroke-opacity: 0.55; }
@keyframes yyIn { from { opacity: 0; transform: rotate(-160deg) scale(0.7); } to { opacity: 1; transform: none; } }


/* the two small eyes turn slowly: the Sharingan's tomoe circle, the Rinnegan's rings the opposite way round each other */
.eye-spin { transform-origin: 0 0; animation: eyeSpin 28s linear infinite; will-change: transform; }
.eye-spin-in { animation-duration: 34s; }
.eye-spin-out { animation-duration: 46s; animation-direction: reverse; }
@keyframes eyeSpin { to { transform: rotate(360deg); } }
html.fx-running .eye-spin { animation-play-state: paused; }
html:not(.motion-full) .eye-spin { animation: none; }

/* ==========================================================================
   Eye transitions (built by yinyang.js, finished by html::before/::after on the next page)
   Rules that keep this smooth on phones, tablets, Macs and every browser:
   - only transform and opacity are animated, so the GPU does all the work
   - the page is covered by a flat colour within ~0.3s, after which nothing heavy is drawn
   - every animated layer is small and is drawn ahead of time, before the click
   - while it runs, blurred backgrounds are switched off
   ========================================================================== */
html.fx-running .blob { display: none; }
html.fx-running .yy-symbol { animation: none; }
html.fx-running .yy-title, html.fx-running .yy-sub, html.fx-running .yy-hint,
html.fx-running .eyebrow, html.fx-running .yy-top { animation: fxFade 0.22s ease-out forwards; }
@keyframes fxFade { to { opacity: 0; } }
html.fx-running body { pointer-events: none; }

.yy-flood {
  position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 1;
  pointer-events: none; opacity: 0; will-change: opacity;
}
.yy-flood-sharingan { background: #150205; }
.yy-flood-rinnegan { background: #0d0720; }
html.fx-go-sharingan .yy-flood-sharingan, html.fx-go-rinnegan .yy-flood-rinnegan { animation: fxFlood 0.32s ease-out forwards; }
@keyframes fxFlood { to { opacity: 1; } }

.yy-fx { position: fixed; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; z-index: 3; pointer-events: none; }
.yy-fx > * {
  position: absolute; left: calc(var(--cx) - var(--s) / 2); top: calc(var(--cy) - var(--s) / 2);
  width: var(--s); height: var(--s); opacity: 0; will-change: transform, opacity;
}
.yy-fx.prewarm > * { opacity: 0.01; }
.fx-eye { --s: var(--yy-eye-size); background: center / 100% 100% no-repeat; }
.fx-arms { --s: var(--yy-fx-size); background: var(--arms-sharingan) center / 100% 100% no-repeat; }
.fx-ripples { --s: var(--yy-fx-size); background: var(--rings-rinnegan) center / 100% 100% no-repeat; }
.yy-fx-sharingan .fx-eye { background-image: var(--eye-sharingan); }
.yy-fx-rinnegan .fx-eye { background-image: var(--eye-rinnegan); }

/* Sharingan: everything is sucked into the eye */
html.fx-go-sharingan .yy-stage { animation: shStage 0.8s cubic-bezier(0.55, 0, 0.85, 0.5) forwards; }
@keyframes shStage { 0% { transform: rotate(0) scale(1); opacity: 1; } 85% { opacity: 1; } 100% { transform: rotate(-540deg) scale(0.02); opacity: 0; } }
html.fx-go-sharingan .yy-fx-sharingan .fx-arms { animation: shArms 0.95s cubic-bezier(0.3, 0, 0.3, 1) forwards; }
@keyframes shArms { 0% { opacity: 0; transform: rotate(0) scale(1.3); } 25% { opacity: 1; } 100% { opacity: 1; transform: rotate(-360deg) scale(1); } }
html.fx-go-sharingan .yy-fx-sharingan .fx-eye { animation: shEye 0.75s cubic-bezier(0.3, 0, 0.2, 1) 0.25s forwards; }
@keyframes shEye { 0% { opacity: 0; transform: rotate(0) scale(0.1); } 20% { opacity: 1; } 100% { opacity: 1; transform: rotate(720deg) scale(1); } }

/* Rinnegan: a shockwave of force lines and ripples pushes everything outward, then the eye opens */
html.fx-go-rinnegan .yy-stage { animation: rnStage 0.55s cubic-bezier(0.1, 0.7, 0.3, 1) forwards; }
@keyframes rnStage { to { transform: scale(1.9); opacity: 0; } }
.fx-burst { --s: var(--yy-fx-size); background: var(--burst-rinnegan) center / 100% 100% no-repeat; }
html.fx-go-rinnegan .yy-fx-rinnegan .fx-burst { animation: rnBurst 0.75s cubic-bezier(0.1, 0.7, 0.3, 1) forwards; }
@keyframes rnBurst { 0% { opacity: 0.95; transform: scale(0.22) rotate(0); } 100% { opacity: 0; transform: scale(1.15) rotate(35deg); } }
html.fx-go-rinnegan .yy-fx-rinnegan .fx-ripples { animation: rnRipples 0.85s cubic-bezier(0.1, 0.6, 0.3, 1) forwards; }
@keyframes rnRipples { 0% { opacity: 0; transform: scale(0.1); } 40% { opacity: 1; } 100% { opacity: 1; transform: scale(1); } }
.yy-fx-rinnegan .fx-eye { background-image: var(--eye-rinnegan-base); }
.yy-fx-rinnegan .fx-eye-in { background-image: var(--eye-rinnegan-in); }
.yy-fx-rinnegan .fx-eye-out { background-image: var(--eye-rinnegan-out); }
html.fx-go-rinnegan .yy-fx-rinnegan .fx-eye { animation: rnEye 0.65s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s forwards; }
html.fx-go-rinnegan .yy-fx-rinnegan .fx-eye-in { animation-name: rnEyeIn; }
html.fx-go-rinnegan .yy-fx-rinnegan .fx-eye-out { animation-name: rnEyeOut; }
@keyframes rnEye { 0% { opacity: 0; transform: scale(0.1); } 45% { opacity: 1; transform: scale(1.06); } 100% { opacity: 1; transform: scale(1); } }
/* the two tomoe rings turn in opposite directions and settle on a 120-degree step, so the eye on the next page matches */
@keyframes rnEyeIn { 0% { opacity: 0; transform: scale(0.1) rotate(0); } 45% { opacity: 1; transform: scale(1.06) rotate(110deg); } 100% { opacity: 1; transform: scale(1) rotate(240deg); } }
@keyframes rnEyeOut { 0% { opacity: 0; transform: scale(0.1) rotate(0); } 45% { opacity: 1; transform: scale(1.06) rotate(-110deg); } 100% { opacity: 1; transform: scale(1) rotate(-240deg); } }

/* lighter version for slow devices: just a colour fade and the eye */
html.fx-lite .yy-stage { animation: fxFade 0.2s ease-out forwards; }
html.fx-lite .yy-fx .fx-arms, html.fx-lite .yy-fx .fx-ripples, html.fx-lite .yy-fx .fx-burst { display: none; }
html.fx-lite.fx-go-sharingan .yy-fx .fx-eye, html.fx-lite.fx-go-rinnegan .yy-fx .fx-eye { animation: liteEye 0.3s ease-out 0.1s forwards; }
@keyframes liteEye { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: scale(1); } }

/* the next page opens from under the same flat colour and eye */
html.yy-arrive-sharingan { --yy-flood: #150205; --yy-eye: var(--eye-sharingan); }
html.yy-arrive-rinnegan { --yy-flood: #0d0720; --yy-eye: var(--eye-rinnegan); }
html.yy-arrive::before {
  content: ""; position: fixed; z-index: 9998; pointer-events: none;
  width: var(--yy-fx-size); height: var(--yy-fx-size);
  left: calc(var(--yy-x) - var(--yy-fx-size) / 2); top: calc(var(--yy-y) - var(--yy-fx-size) / 2);
  background: var(--yy-swirl) center / 100% 100% no-repeat, var(--yy-flood);
  will-change: transform, opacity;
}
html.yy-arrive-sharingan::before { --yy-swirl: var(--arms-sharingan); transform: rotate(-360deg) scale(1); animation: arriveSwirlSh 0.9s cubic-bezier(0.5, 0, 0.8, 0.5) 0.12s forwards; }
html.yy-arrive-rinnegan::before { --yy-swirl: var(--rings-rinnegan); animation: arriveSwirlRn 0.8s ease-out 0.12s forwards; }
@keyframes arriveSwirlSh { to { transform: rotate(-1080deg) scale(0.08); opacity: 0; } }
@keyframes arriveSwirlRn { to { transform: scale(1.7); opacity: 0; } }
html.yy-arrive::after {
  content: ""; position: fixed; z-index: 9999; pointer-events: none;
  width: var(--yy-eye-size); height: var(--yy-eye-size);
  left: calc(var(--yy-x) - var(--yy-eye-size) / 2); top: calc(var(--yy-y) - var(--yy-eye-size) / 2);
  background: var(--yy-eye) center / 100% 100% no-repeat; will-change: transform, opacity;
}
html.yy-arrive-sharingan::after { transform: rotate(720deg) scale(1); animation: arriveSh 0.7s cubic-bezier(0.5, 0, 0.8, 0.5) 0.1s forwards; }
@keyframes arriveSh { to { transform: rotate(1080deg) scale(0.01); opacity: 0; } }
html.yy-arrive-rinnegan::after { animation: arriveRn 0.6s ease-out 0.1s forwards; }
@keyframes arriveRn { to { transform: scale(1.5); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  html:not(.motion-full) .yy-symbol { animation: none; }
  html:not(.motion-full) .half path { transition: none; }
  html:not(.motion-full).yy-arrive::before, html:not(.motion-full).yy-arrive::after { display: none; }
}

/* Small yin-yang switcher in the nav of the inner pages */
.yy-mini { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; transition: transform 0.4s ease; }
.yy-mini:hover { transform: rotate(180deg); }

/* Work page header and wide skills card */
.page-hero { padding-top: 70px; padding-bottom: 10px; max-width: 900px; }
.page-hero-title { font-size: clamp(2rem, 5vw, 3.2rem); margin: 0 0 16px; }
.page-hero-text { font-size: 1.1rem; color: var(--text-secondary); max-width: 620px; margin-bottom: 28px; }
.skills-wide { max-width: 760px; }

/* phones: the nav pill is tight, and Contact is already in the menu */
@media (max-width: 480px) { .nav-cta-hide-sm { display: none; } }

/* ==========================================================================
   Hover effects on the landing page (built by yinyang.js, only while the pointer is on a half)
   Red half / Sharingan: crows fly off it (Itachi).
   Purple half / Rinnegan: dark orbs float up (Chibaku Tensei).
   Every piece is a tiny element that only animates transform and opacity, then removes itself.
   ========================================================================== */
.yy-hover-fx { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; }
.hv { position: absolute; left: var(--x); top: var(--y); will-change: transform, opacity; opacity: 0; }

.hv-crow { width: 66px; height: 36px; margin: -18px 0 0 -33px; animation: crowFly var(--dur) cubic-bezier(0.25, 0.1, 0.5, 1) forwards; }
.hv-crow i { display: block; width: 100%; height: 100%; background: var(--crow) center / 100% 100% no-repeat; animation: crowFlap 0.2s steps(1, end) infinite; }
@keyframes crowFlap { 0% { transform: scaleY(1); } 50% { transform: scaleY(0.42); } }
@keyframes crowFly {
  0% { opacity: 0; transform: translate(0, 0) rotate(var(--rot)) scale(0.35); }
  14% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(var(--sc)); }
}

.hv-orb { width: var(--sz); height: var(--sz); margin: calc(var(--sz) / -2) 0 0 calc(var(--sz) / -2); border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #7a4be0 0, #1b0b3a 48%, #05020c 100%);
  box-shadow: 0 0 0 1px rgba(196, 160, 255, 0.55); animation: orbFloat var(--dur) ease-out forwards; }
@keyframes orbFloat {
  0% { opacity: 0; transform: translate(0, 0) scale(0.4); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1); }
}
@media (prefers-reduced-motion: reduce) { html:not(.motion-full) .yy-hover-fx { display: none; } }
html.fx-running .yy-hover-fx { display: none; }

/* ==========================================================================
   Landing page background: painted Japanese garden pictures that follow the visitor's clock (built by scene.js)
   The pictures cross-fade through the day. Petals, stars, the moon and fireflies are plain elements that
   animate with transform and opacity only.
   ========================================================================== */
.yy-body { background: #1a1228; }
.yy-body > .blob { display: none; }
.scene { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 0; overflow: hidden; pointer-events: none; background: #1a1228; }
.scene > * { position: absolute; }
.scene .bgfill { left: -5%; top: -5%; width: 110%; height: 110%; object-fit: cover; filter: blur(26px) saturate(1.15) brightness(0.92); opacity: 0; transition: opacity 1.2s ease; }
.scene .bgfill.ready { opacity: 1; }
.scene .bgwrap { left: 0; top: 0; right: 0; bottom: 0; margin: auto; width: 100%; height: 100%; animation: bgDrift 80s ease-in-out infinite alternate; will-change: transform; }
.scene .bgwrap .bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; opacity: 0; transition: opacity 1.2s ease; }
.scene .bgwrap .bg.ready { opacity: 1; }
/* on screens that are not tall and narrow the whole picture is shown at its own 3:2 shape; the space around it is filled by a blurred copy, and the picture's edges fade into that */
@media (min-aspect-ratio: 9/10) {
  .scene .bgwrap { width: min(100%, 150vh); height: min(100%, 66.667vw); }
  .scene .bgwrap .bg { object-fit: fill; }
}
@media (min-aspect-ratio: 3/2) {
  .scene .bgwrap .bg { -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0), #000 9%, #000 91%, rgba(0, 0, 0, 0)); mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0), #000 9%, #000 91%, rgba(0, 0, 0, 0)); }
}
@media (min-aspect-ratio: 9/10) and (max-aspect-ratio: 3/2) {
  .scene .bgwrap .bg { -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 0), #000 9%, #000 91%, rgba(0, 0, 0, 0)); mask-image: linear-gradient(rgba(0, 0, 0, 0), #000 9%, #000 91%, rgba(0, 0, 0, 0)); }
}
@media (max-aspect-ratio: 9/10) { .scene .bgfill { display: none; } }
.scene .glow { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity 2s ease; background: radial-gradient(ellipse 46% 34% at 50% 44%, rgba(255, 196, 120, 0.5), rgba(255, 150, 90, 0.18) 55%, rgba(255, 150, 90, 0) 100%); }
@keyframes bgDrift { from { transform: scale(1) translate3d(0, 0, 0); } to { transform: scale(1.02) translate3d(-0.3%, -0.2%, 0); } }
.scene .tint { left: 0; top: 0; width: 100%; height: 100%; }
.scene .stars { left: 0; top: 0; width: 100%; height: 34%; opacity: var(--stars, 0); -webkit-mask: linear-gradient(#000 55%, rgba(0, 0, 0, 0)); mask: linear-gradient(#000 55%, rgba(0, 0, 0, 0)); }
.scene .twinkle { animation: twinkle 3.4s ease-in-out infinite alternate; }
@keyframes twinkle { from { opacity: 0.25; } to { opacity: 1; } }
.scene .orb { left: 0; top: 0; border-radius: 50%; opacity: 0; transform: translate(calc(var(--x, 0px) - 50%), calc(var(--y, 0px) - 50%)); transition: transform 30s linear, opacity 2s ease; will-change: transform; }
.scene .moon { width: 96px; height: 96px; background: radial-gradient(circle at 36% 34%, #fff 0, #fbfcff 34%, #dfe6fb 42%, rgba(214, 226, 255, 0.3) 58%, rgba(214, 226, 255, 0) 70%); }

.scene .fireflies { left: 0; top: 0; width: 100%; height: 100%; opacity: var(--ff, 0); transition: opacity 2s ease; }
.scene .fireflies i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #f6ffa8; box-shadow: 0 0 8px 3px rgba(226, 255, 120, 0.55);
  animation: ffMove var(--dur) ease-in-out infinite alternate, ffGlow var(--gd) ease-in-out infinite alternate; will-change: transform, opacity; }
@keyframes ffMove { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(var(--dx), var(--dy), 0); } }
@keyframes ffGlow { from { opacity: 0.15; } to { opacity: 1; } }

.scene .petals { left: 0; top: 0; width: 100%; height: 100%; }
.scene .petal { position: absolute; width: calc(12px * var(--s)); height: calc(15px * var(--s)); opacity: 0; animation: petalFall var(--dur) linear infinite; will-change: transform, opacity; }
.scene .petal .pw { display: block; width: 100%; height: 100%; will-change: transform; }
.scene .petal b { display: block; width: 100%; height: 100%; border-radius: 80% 4% 80% 20%; background: linear-gradient(135deg, #fff4f8, #ffb4cc 70%, #f08aae); animation: petalFlip var(--fl) ease-in-out infinite alternate; }
.scene .petal.v1 b { background: linear-gradient(135deg, #ffe3ec, #ffa6c2 70%, #e87aa0); }
.scene .petal.v2 b { background: linear-gradient(135deg, #ffffff, #ffdbe7 70%, #ffb4cc); }
@keyframes petalFlip { from { transform: rotate3d(1, 0.4, 0, 8deg); } to { transform: rotate3d(1, 0.4, 0.2, 78deg); } }
@keyframes petalFall {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0deg); }
  8% { opacity: 1; }
  25% { transform: translate3d(var(--sway), calc(var(--dy) * 0.25), 0) rotate(calc(var(--rot) * 0.25)); }
  50% { transform: translate3d(calc(var(--dx) * 0.5 - var(--sway) * 0.6), calc(var(--dy) * 0.5), 0) rotate(calc(var(--rot) * 0.5)); }
  75% { transform: translate3d(calc(var(--dx) * 0.75 + var(--sway) * 0.8), calc(var(--dy) * 0.75), 0) rotate(calc(var(--rot) * 0.75)); }
  92% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--dx), var(--dy), 0) rotate(var(--rot)); }
}

/* extra petals thrown off by the pointer's wind (animated from scene.js) */
.scene .gusts { left: 0; top: 0; width: 100%; height: 100%; }
.scene .gp { position: absolute; opacity: 0; border-radius: 80% 4% 80% 20%; background: linear-gradient(135deg, #fff4f8, #ffb4cc 70%, #f08aae); will-change: transform, opacity; }
.scene .gp.v1 { background: linear-gradient(135deg, #ffe3ec, #ffa6c2 70%, #e87aa0); }
.scene .gp.v2 { background: linear-gradient(135deg, #ffffff, #ffdbe7 70%, #ffb4cc); }
/* a soft dark wash behind the text so it reads on any picture, and a gentle edge vignette */
.scene .scrim { left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(rgba(14, 8, 30, 0.58) 0, rgba(14, 8, 30, 0.38) 34%, rgba(14, 8, 30, 0.06) 62%, rgba(14, 8, 30, 0) 100%); }
.scene .vignette { left: 0; top: 0; width: 100%; height: 100%; background: radial-gradient(ellipse at 50% 46%, rgba(0, 0, 0, 0) 58%, rgba(8, 6, 24, 0.34) 100%); }

/* light text with a soft shadow, readable at every hour */
.yy-body[data-sky] { --text-heading: #ffffff; --text-secondary: #f1ecfb; --text: #ffffff; }
.yy-body[data-sky] .eyebrow { color: #e4deff; }
.yy-body[data-sky] .yy-title, .yy-body[data-sky] .yy-sub, .yy-body[data-sky] .nav-logo, .yy-body[data-sky] .eyebrow { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 2px 20px rgba(0, 0, 0, 0.6); }
.yy-hint { padding: 5px 14px; border-radius: 999px; background: rgba(15, 12, 30, 0.5); color: #fff !important; text-shadow: none !important; }

@media (max-aspect-ratio: 1/1) {
  .scene .bgwrap .bg { object-position: 50% 55%; }
  .scene .moon { width: 70px; height: 70px; }
}
/* during the click transition: freeze the scene, then hide it once the flat colour covers it */
html.fx-running .scene * { animation-play-state: paused; }
html.fx-running .scene { animation: sceneHide 0.01s linear 0.36s forwards; }
@keyframes sceneHide { to { visibility: hidden; } }
html:not(.motion-full) .scene .bgwrap, html:not(.motion-full) .scene .twinkle, html:not(.motion-full) .scene .fireflies i { animation: none; }
html:not(.motion-full) .scene .fireflies { display: none; }