:root[data-theme="developerfolio-editorial"] {

  --ink: #f5f4fa;

  --paper: #151927;

  --lime: #6a00ff;

  --line: #30364a;

  --muted: #abb1c3;

  --card-bg: #1b2030;

  --about-bg: #181d2b;

  --cover-start: #23104c;

  --cover-end: #5b00e8;

  --cover-text: #ffffff;

  --focus-color: #a887ff;

  --hover-accent: #7e29ff;

  --card-radius: 10px;

  --card-shadow: 0 14px 34px rgb(0 0 0 / 20%);

  --heading-font: 'Manrope', Arial, sans-serif;

  --section-space: 72px;

  --motion-duration: 220ms;

}

:root[data-theme="minimal-modern"] {

  --ink: #111111;

  --paper: #ffffff;

  --lime: #222222;

  --line: #dedede;

  --muted: #626262;

  --card-bg: #ffffff;

  --about-bg: #f7f7f7;

  --cover-start: #292929;

  --cover-end: #555555;

  --cover-text: #ffffff;

  --focus-color: #111111;

  --hover-accent: #444444;

  --card-radius: 2px;

  --card-shadow: none;

  --heading-font: 'DM Sans', Arial, sans-serif;

  --section-space: 72px;

  --motion-duration: 140ms;

}

:root[data-theme="ocean-blue"] {

  --ink: #123047;

  --paper: #f0f8fc;

  --lime: #0277bd;

  --line: #c8e1ee;

  --muted: #547487;

  --card-bg: rgb(255 255 255 / 82%);

  --about-bg: #e4f3fa;

  --cover-start: #075985;

  --cover-end: #02a6c5;

  --cover-text: #ffffff;

  --focus-color: #0277bd;

  --hover-accent: #39b8d2;

  --card-radius: 16px;

  --card-shadow: 0 14px 34px rgb(5 76 116 / 13%);

  --heading-font: 'Manrope', Arial, sans-serif;

  --section-space: 56px;

  --motion-duration: 200ms;

}

:root[data-theme="forest-green"] {

  --ink: #193a35;

  --paper: #f4f8f1;

  --lime: #00796b;

  --line: #d0e0d0;

  --muted: #5b766c;

  --card-bg: #ffffff;

  --about-bg: #e8f0e5;

  --cover-start: #00695c;

  --cover-end: #7c9e63;

  --cover-text: #ffffff;

  --focus-color: #00796b;

  --hover-accent: #e09b4f;

  --card-radius: 26px;

  --card-shadow: 0 10px 28px rgb(37 75 53 / 12%);

  --heading-font: 'DM Sans', Arial, sans-serif;

  --section-space: 64px;

  --motion-duration: 260ms;

}

:root[data-theme="sunset-gradient"] {

  --ink: #3b2434;

  --paper: #fff7f1;

  --lime: #ff6b35;

  --line: #f1d8cb;

  --muted: #805e61;

  --card-bg: #ffffff;

  --about-bg: #fff0e5;

  --cover-start: #ff6b35;

  --cover-end: #a23e48;

  --cover-text: #ffffff;

  --focus-color: #a23e48;

  --hover-accent: #ff8d5d;

  --card-radius: 15px;

  --card-shadow: 0 15px 32px rgb(132 55 63 / 16%);

  --heading-font: 'Manrope', Arial, sans-serif;

  --section-space: 48px;

  --motion-duration: 220ms;

}

:root[data-theme="midnight-dark"] {

  --ink: #e8f2f0;

  --paper: #0a0a0a;

  --lime: #39ffb6;

  --line: #263c3b;

  --muted: #9aadaa;

  --card-bg: #111717;

  --about-bg: #101616;

  --cover-start: #0a1618;

  --cover-end: #1a3a3a;

  --cover-text: #e8f2f0;

  --focus-color: #39ffb6;

  --hover-accent: #77ffd0;

  --card-radius: 8px;

  --card-shadow: 0 0 26px rgb(57 255 182 / 8%);

  --heading-font: 'DM Sans', Arial, sans-serif;

  --section-space: 52px;

  --motion-duration: 180ms;

}

:root[data-theme="colorful-rainbow"] {

  --ink: #252444;

  --paper: #fffdf8;

  --lime: #ff5c8a;

  --line: #e8dff2;

  --muted: #635f7e;

  --card-bg: #ffffff;

  --about-bg: #fff0f6;

  --cover-start: #ff5c8a;

  --cover-end: #8b62d9;

  --cover-text: #ffffff;

  --focus-color: #8752ce;

  --hover-accent: #ff8aab;

  --card-radius: 18px;

  --card-shadow: 0 12px 28px rgb(83 57 133 / 12%);

  --heading-font: 'Manrope', Arial, sans-serif;

  --section-space: 52px;

  --motion-duration: 320ms;

}

:root[data-theme] body {

  background: var(--paper);

  color: var(--ink);

}

:root[data-theme] h1,

:root[data-theme] h2,

:root[data-theme] h3,

:root[data-theme] h4,

:root[data-theme] .wordmark {

  font-family: var(--heading-font);

}

:root[data-theme] a:focus-visible,
 :root[data-theme] .education-gpa {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 82px;
   min-height: 42px;
   margin-top: 12px;
   padding: 8px 16px;
   border: 1px solid var(--focus-color);
   border-radius: var(--card-radius);
   background: var(--lime);
   color: #ffffff;
   font-size: 16px;
   font-weight: 800;
 }

:root[data-theme] summary:focus-visible {

  outline-color: var(--focus-color);

}

:root[data-theme] .button:hover {

  background: var(--hover-accent);

}

:root[data-theme] .project {

  min-width: 0;

  background: transparent;

  transition: transform var(--motion-duration), box-shadow var(--motion-duration);

}

:root[data-theme] .project:hover {

  transform: translateY(-3px);

}

:root[data-theme] .project-cover {

  border-radius: var(--card-radius);

  background-image: linear-gradient(135deg, var(--cover-start), var(--cover-end));

  box-shadow: var(--card-shadow);

  color: var(--cover-text);

}

:root[data-theme] .cover-two,

:root[data-theme] .cover-three {

  color: var(--cover-text);

}

:root[data-theme] .cover-bottom > span:last-child {

  display: none;

}

:root[data-theme] .about {

  background: var(--about-bg);

  color: var(--ink);

}

:root[data-theme] .accent,

:root[data-theme] .about-sign span {

  color: var(--focus-color);

}

:root[data-theme] .nav-contact {

  border-color: var(--ink);

  border-radius: var(--card-radius);

}

:root[data-theme] .button,

:root[data-theme] .degree-note,

:root[data-theme] .contact-form button {

  border-radius: var(--card-radius);

  background: var(--lime);

  color: #ffffff;

}

:root[data-theme="minimal-modern"] .button,

:root[data-theme="minimal-modern"] .degree-note,

:root[data-theme="minimal-modern"] .contact-form button {

  color: #ffffff;

}

:root[data-theme] .timeline article,

:root[data-theme] .education-grid article,

:root[data-theme] .about-facts,

:root[data-theme] .skills span,

:root[data-theme] header,

:root[data-theme] footer {

  border-color: var(--line);

}

:root[data-theme] .skills span {

  border-radius: var(--card-radius);

}

:root[data-theme] main > section:not(.hero) {

  scroll-margin-top: var(--template-gap, var(--section-space));

}

:root[data-theme] #work .projects {

  row-gap: var(--template-gap, 48px);

}

:root[data-theme="minimal-modern"] #work .projects {

  gap: 48px 28px;

}

:root[data-theme="minimal-modern"] .project {

  display: block;

}

:root[data-theme="minimal-modern"] .project-cover {

  min-height: 345px;

}

:root[data-theme="ocean-blue"] .project-type,

:root[data-theme="ocean-blue"] .cover-top,

:root[data-theme="ocean-blue"] .cover-bottom {

  font-family: Consolas, monospace;

}

:root[data-theme="forest-green"] .project,

:root[data-theme="forest-green"] .education-grid article {

  border-radius: var(--card-radius);

}

:root[data-theme="midnight-dark"] .project-type,

:root[data-theme="midnight-dark"] .cover-top,

:root[data-theme="midnight-dark"] .cover-bottom {

  font-family: Consolas, monospace;

}

:root[data-theme="midnight-dark"] .project {

  border-color: var(--line);

}

:root[data-theme="colorful-rainbow"] #work .section-head {

  border-top: 6px solid #ffbd2e;

  padding-top: 18px;

}

:root[data-theme="colorful-rainbow"] #experience .timeline {

  border-left: 5px solid #48c9b0;

  padding-left: 24px;

}

:root[data-theme="colorful-rainbow"] #about {

  background: #fff0f6;

}

:root[data-theme="colorful-rainbow"] #education .education-grid article {

  border-top: 5px solid #7b7fe8;

}

:root[data-theme="colorful-rainbow"] #contact .contact-layout {

  border-top: 5px solid #ff8a4c;

  padding-top: 24px;

}

@media (max-width: 760px) {

  :root[data-theme="minimal-modern"] .project {

    grid-template-columns: 1fr;

  }

  :root[data-theme="minimal-modern"] .project-cover {

    grid-row: auto;

  }

}

:root[data-theme] .project,

:root[data-theme] .project-cover,

:root[data-theme] .skills span,

:root[data-theme] .button {

  border-radius: var(--custom-radius, var(--card-radius));

}

:root[data-theme] .project-cover {

  box-shadow: var(--custom-shadow, var(--card-shadow));

}

:root[data-theme="developerfolio-editorial"] .hero {

  display: grid;

  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);

  align-items: center;

  gap: 22px 56px;

  min-height: 650px;

  padding-top: 48px;

  padding-bottom: 48px;

  background: radial-gradient(ellipse at 80% 45%, rgb(88 0 255 / 12%), transparent 48%);

}

:root[data-theme="ocean-blue"] .hero {

  background-image: radial-gradient(ellipse at 90% 10%, rgb(2 166 197 / 13%), transparent 42%);

}

:root[data-theme="forest-green"] .hero::after {

  position: absolute;

  z-index: -1;

  top: 30px;

  right: 4%;

  width: 180px;

  height: 180px;

  border-radius: 60% 40% 55% 45%;

  background: rgb(0 121 107 / 8%);

  content: '';

}

:root[data-theme="sunset-gradient"] .hero h1 > span {

  background: linear-gradient(90deg, #ff6b35, #a23e48);

  background-clip: text;

  color: transparent;

}

:root[data-theme="midnight-dark"] .hero h1,

:root[data-theme="midnight-dark"] .wordmark {

  text-shadow: 0 0 24px rgb(57 255 182 / 12%);

}

:root[data-theme="colorful-rainbow"] .project:nth-child(3n + 1) .project-cover {

  background-image: linear-gradient(135deg, #ff5c8a, #8752ce);

}

:root[data-theme="colorful-rainbow"] .project:nth-child(3n + 2) .project-cover {

  background-image: linear-gradient(135deg, #ffbd2e, #ff7f50);

}

:root[data-theme="colorful-rainbow"] .project:nth-child(3n) .project-cover {

  background-image: linear-gradient(135deg, #48c9b0, #3978c5);

}

:root[data-theme="minimal-modern"] #experience .timeline article {

  gap: 32px;

}

:root[data-theme="developerfolio-editorial"] .skills span {

  border-color: rgb(85 25 139 / 24%);

  background: #ffffff;

}

:root[data-theme="midnight-dark"] .skills span {

  background: #111717;

  color: var(--ink);

}

:root[data-theme="developerfolio-editorial"] header.wrap {

  position: sticky;

  z-index: 10;

  top: 0;

  width: 100%;

  padding: 14px max(4vw, calc((100vw - 1440px) / 2));

  background: rgb(21 25 39 / 96%);

  border-bottom: 1px solid var(--line);

  backdrop-filter: blur(14px);

}

:root[data-theme="developerfolio-editorial"] nav {

  gap: clamp(12px, 2vw, 28px);

}

:root[data-theme="developerfolio-editorial"] nav a {

  color: #d7d9e4;

}

:root[data-theme="developerfolio-editorial"] .hero > .eyebrow {

  grid-column: 1 / -1;

  align-self: end;

  color: #c7cada;

}

:root[data-theme="developerfolio-editorial"] .hero h1 {

  grid-column: 1;

  margin: 8px 0 0;

  font-size: clamp(3rem, 5.2vw, 5.25rem);

  font-weight: 700;

  letter-spacing: -.04em;

}

:root[data-theme="developerfolio-editorial"] .hero h1 > span {

  color: #a98aff;

}

:root[data-theme="developerfolio-editorial"] .hero-bottom {

  grid-column: 1;

  align-items: flex-start;

  flex-direction: column;

  gap: 24px;

}

:root[data-theme="developerfolio-editorial"] .hero-bottom p {

  max-width: 620px;

  color: #d5d7e1;

}

:root[data-theme="developerfolio-editorial"] .hero .button,

:root[data-theme="developerfolio-editorial"] .nav-contact {

  border: 0;

  border-radius: 5px;

  background: #55198b;

  color: #ffffff;

}

:root[data-theme="developerfolio-editorial"] .hero-rule {

  display: none;

}

:root[data-theme="developerfolio-editorial"] .developerfolio-art {

  grid-column: 2;

  grid-row: 2 / span 2;

  align-self: center;

}

:root[data-theme="developerfolio-editorial"] #work .projects {

  gap: 48px 28px;

}

:root[data-theme="developerfolio-editorial"] #work .project-wide {

  grid-column: 1 / -1;

}

:root[data-theme="developerfolio-editorial"] #work .project {

  display: flex;

  flex-direction: column;

  gap: 0;

  padding: 0;

  background: transparent;

}

:root[data-theme="developerfolio-editorial"] #work .project-cover {

  min-height: 345px;

}

:root[data-theme="developerfolio-editorial"] #work .project-info,

:root[data-theme="developerfolio-editorial"] #work .project-description,

:root[data-theme="developerfolio-editorial"] #work .project-links,

:root[data-theme="developerfolio-editorial"] #work details {

  margin-inline: 0;

}

:root[data-theme="developerfolio-editorial"] .experience .timeline {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));

  gap: 18px;

}

:root[data-theme="developerfolio-editorial"] .timeline article {

  display: block;

  padding: 24px;

  border: 1px solid var(--line);

  border-radius: var(--card-radius);

  background: var(--card-bg);

}

:root[data-theme="developerfolio-editorial"] .education-grid article {

  padding: 28px;

  border: 1px solid var(--line);

  border-radius: var(--card-radius);

  background: var(--card-bg);

}

:root[data-theme="developerfolio-editorial"] .contact {

  padding-block: 70px;

}

:root[data-theme="developerfolio-editorial"] .contact-layout {

  align-items: flex-start;

}

:root[data-theme="developerfolio-editorial"] footer {

  border-top: 1px solid var(--line);

  padding-block: 22px;

}

:root[data-theme="developerfolio-editorial"] .developerfolio-art {

  min-height: 300px;

  overflow: hidden;

  border: 1px solid #38314f;

  border-radius: 14px;

  background: #111522;

  box-shadow: 0 28px 70px rgb(0 0 0 / 30%), 0 0 60px rgb(91 0 232 / 16%);

}

:root[data-theme="developerfolio-editorial"] .dev-window-bar {

  display: flex;

  align-items: center;

  gap: 8px;

  padding: 14px 17px;

  border-bottom: 1px solid #2d3142;

  color: #9da4b8;

  font: 12px/1.4 Consolas, monospace;

}

:root[data-theme="developerfolio-editorial"] .dev-window-bar > span:not(.dev-window-file) {

  width: 10px;

  height: 10px;

  border-radius: 50%;

  background: var(--dot-color);

}

:root[data-theme="developerfolio-editorial"] .dev-window-file {

  margin-left: auto;

}

:root[data-theme="developerfolio-editorial"] .dev-code {

  padding: 25px clamp(18px, 4vw, 42px);

  color: #d8dbeb;

  font: clamp(12px, 1.4vw, 16px)/2 Consolas, 'Courier New', monospace;

}

:root[data-theme="developerfolio-editorial"] .dev-code p {

  margin: 0;

  white-space: pre-wrap;

}

:root[data-theme="developerfolio-editorial"] .code-keyword {

  color: #bd91ff;

}

:root[data-theme="developerfolio-editorial"] .code-value {

  color: #65d9ef;

}

:root[data-theme="developerfolio-editorial"] .code-text {

  color: #b6e880;

}

:root[data-theme="developerfolio-editorial"] .dev-window-footer {

  display: flex;

  justify-content: space-between;

  gap: 12px;

  flex-wrap: wrap;

  padding: 12px 18px;

  border-top: 1px solid #2d3142;

  color: #969db1;

  font-size: 12px;

}

:root[data-theme="developerfolio-editorial"] .dev-status {

  color: #7de4a4;

}

:root[data-theme="developerfolio-editorial"] .developerfolio-socials {

  display: flex;

  gap: 12px;

}

:root[data-theme="developerfolio-editorial"] .developerfolio-socials a {

  display: grid;

  width: 40px;

  height: 40px;

  place-items: center;

  border: 1px solid #42465a;

  border-radius: 50%;

  background: var(--social-color, #202538);

  color: #ffffff;

  font-size: 13px;

  font-weight: 700;

}

:root[data-theme="developerfolio-editorial"] .developerfolio-socials a:hover {

  border-color: #8d59f0;

  background: #55198b;

  text-decoration: none;

}

:root[data-theme="developerfolio-editorial"] .developerfolio-socials img {
  display: block;
  width: 19px;
  height: 19px;
  object-fit: contain;
}

:root[data-theme="developerfolio-editorial"] .developerfolio-socials svg {
  width: 20px;
  height: 20px;
}

:root[data-theme="developerfolio-editorial"] .social-icon-fallback {
  font-size: 12px;
  font-weight: 800;
}

:root[data-theme="developerfolio-editorial"] .developer-achievement-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));

  gap: 16px;

  margin-top: 24px;

}

:root[data-theme="developerfolio-editorial"] .developer-achievement-card {

  padding: 22px;

  border: 1px solid var(--line);

  border-radius: var(--card-radius);

  background: var(--card-bg);

}

:root[data-theme="developerfolio-editorial"] .developer-achievement-badge {

  display: inline-grid;

  min-width: 54px;

  min-height: 42px;

  place-items: center;

  padding: 4px 10px;

  border-radius: 6px;

  background: #55198b;

  color: #ffffff;

  font-weight: 800;

}

:root[data-theme="developerfolio-editorial"] .developer-achievement-card p {

  color: var(--muted);

}

:root[data-theme="developerfolio-editorial"] .project-type,

:root[data-theme="developerfolio-editorial"] .cover-top,

:root[data-theme="developerfolio-editorial"] .cover-bottom {

  font-family: Consolas, 'Courier New', monospace;

}

:root[data-theme="developerfolio-editorial"] .skills span {

  border-color: #3b4053;

  background: #202538;

  color: #e3e4ec;

}

@media (max-width: 900px) {

  :root[data-theme="developerfolio-editorial"] .hero {

    grid-template-columns: 1fr;

    min-height: auto;

  }

  :root[data-theme="developerfolio-editorial"] .developerfolio-art {

    grid-column: 1;

    grid-row: auto;

  }

  :root[data-theme="developerfolio-editorial"] #work .projects,

  :root[data-theme="developerfolio-editorial"] .experience .timeline {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }

}

@media (max-width: 600px) {

  :root[data-theme="developerfolio-editorial"] header.wrap {

    align-items: flex-start;

  }

  :root[data-theme="developerfolio-editorial"] header nav {

    width: 100%;

    overflow-x: auto;

    justify-content: flex-start;

    padding-bottom: 4px;

  }

  :root[data-theme="developerfolio-editorial"] .hero h1 {

    font-size: clamp(2.8rem, 12vw, 4rem);

  }

  :root[data-theme="developerfolio-editorial"] #work .projects,

  :root[data-theme="developerfolio-editorial"] .experience .timeline {

    grid-template-columns: 1fr;

  }

}

/* Layout belongs to the section module; a palette must not replace it. */

:root[data-theme] #work .projects {

  grid-template-columns: repeat(2, minmax(0, 1fr));

  align-items: start;

}

:root[data-theme] #work[data-module="project-list"] .projects {

  grid-template-columns: minmax(0, 1fr);

}

:root[data-theme] #work .project {

  display: block;

  min-width: 0;

}

.project-cover {

  container-type: inline-size;

}

:root[data-theme] #work .project-lettering {

  width: auto;

  max-width: 100%;

  margin: 30px 0;

  font-size: clamp(2rem, 14cqi, 5.8rem);

  line-height: 1.05;

  overflow-wrap: anywhere;

}

:root[data-theme] #work .cover-one .project-lettering {

  font-size: clamp(2rem, 12cqi, 7rem);

}

.cover-top, .cover-bottom {

  align-items: flex-start;

  flex-wrap: wrap;

  gap: 12px 20px;

}

.cover-top > span:first-child, .cover-bottom > span:first-child {

  flex: 1 1 160px;

  overflow-wrap: anywhere;

}

.cover-top > span:last-child, .cover-bottom > span:last-child {

  flex: 0 0 auto;

  white-space: nowrap;

}

.project-info, .project-info > div, .about-copy, .timeline article > div {

  min-width: 0;

}

.project h3, .project-description, .project-detail, .dev-code p {

  overflow-wrap: anywhere;

}

:root[data-theme="minimal-modern"] .cover-two {

  background: #e1e7ef;

  color: #243c6a;

}

:root[data-theme="minimal-modern"] .cover-three {

  background: #d8ff62;

  color: #1c2925;

}

:root[data-theme="midnight-dark"] .button,

:root[data-theme="midnight-dark"] .degree-note,

:root[data-theme="midnight-dark"] .contact-form button,

:root[data-theme="sunset-gradient"] .button,

:root[data-theme="sunset-gradient"] .degree-note,

:root[data-theme="sunset-gradient"] .contact-form button,

:root[data-theme="colorful-rainbow"] .button,

:root[data-theme="colorful-rainbow"] .degree-note,

:root[data-theme="colorful-rainbow"] .contact-form button {

  color: #151927;

}

.hero { position: relative; }

.hero h1 > span { white-space: pre-line; }

header { gap: 24px; }

header nav { flex-wrap: wrap; }

header .wordmark { flex-shrink: 0; }

.contact-copy { width: 100%; }

:root[data-theme] main > section { scroll-margin-top: 110px; }

:root[data-theme] #experience[data-module="experience-list"] .timeline { grid-template-columns: 1fr; }

:root[data-theme] #hero[data-module="hero-compact"] h1 { font-size: clamp(2.3rem, 6vw, 4rem); }

:root[data-theme] .hero:not(:has(.developerfolio-art)) { display: block; min-height: auto; }

@media (max-width: 1100px) {

  :root[data-theme="developerfolio-editorial"] header.wrap { position: relative; flex-direction: column; align-items: flex-start; }

  :root[data-theme="developerfolio-editorial"] header nav { width: 100%; overflow: visible; }

}

@media (max-width: 760px) {

  :root[data-theme] #work .projects { grid-template-columns: minmax(0, 1fr); }

  :root[data-theme] #work .project-cover { min-height: 300px; padding: 20px; }

  :root[data-theme] #work .cover-one { min-height: 340px; }

  :root[data-theme] header { flex-direction: column; align-items: flex-start; }

  :root[data-theme] header nav { justify-content: flex-start; gap: 12px 18px; }

  :root[data-theme] .hero h1 { overflow-wrap: anywhere; }

}

@media (prefers-reduced-motion: reduce) {

  :root[data-theme] * { transition: none !important; animation: none !important; }

  :root[data-theme] .project:hover { transform: none; }

}

/* DeveloperFolio Classic: independent light theme, using the saved content. */

:root[data-theme="developerfolio-classic"] {

  --ink: #24212b;

  --paper: #ffffff;

  --lime: #55198b;

  --line: #e7e1ed;

  --muted: #686270;

  --card-bg: #ffffff;

  --about-bg: #ffffff;

  --cover-start: #55198b;

  --cover-end: #8c43ce;

  --cover-text: #ffffff;

  --focus-color: #55198b;

  --hover-accent: #7030a0;

  --card-radius: 10px;

  --card-shadow: 0 6px 24px rgb(40 22 62 / 8%);

  --heading-font: 'Manrope', Arial, sans-serif;

  --section-space: 80px;

  --motion-duration: 180ms;

}

:root[data-theme="developerfolio-classic"] .wrap { max-width: 1200px; }

:root[data-theme="developerfolio-classic"] header { border: 0; padding-block: 30px; }

:root[data-theme="developerfolio-classic"] .wordmark { color: var(--focus-color); font-family: Georgia, serif; font-style: italic; }

:root[data-theme="developerfolio-classic"] header .wordmark::before { content: '<'; font-family: monospace; color: var(--muted); }

:root[data-theme="developerfolio-classic"] header .wordmark::after { content: '/>'; font-family: monospace; color: var(--muted); }

:root[data-theme="developerfolio-classic"] #hero {

  display: grid;

  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);

  gap: 20px 40px;

  padding-block: 60px 90px;

  align-items: center;

}

:root[data-theme="developerfolio-classic"] #hero > .eyebrow { grid-column: 1 / -1; color: var(--muted); }

:root[data-theme="developerfolio-classic"] .classic-greeting { grid-column: 1; margin: 0; font-size: clamp(1.8rem, 3.6vw, 3.2rem); font-weight: 700; letter-spacing: -.04em; }

:root[data-theme="developerfolio-classic"] #hero h1 { grid-column: 1; font-size: clamp(1.8rem, 3.5vw, 3rem); line-height: 1.25; margin: 0; letter-spacing: -.035em; overflow-wrap: anywhere; }

:root[data-theme="developerfolio-classic"] #hero h1 > span { color: var(--focus-color); }

:root[data-theme="developerfolio-classic"] .hero-bottom { grid-column: 1; flex-direction: column; align-items: flex-start; gap: 24px; }

:root[data-theme="developerfolio-classic"] .hero-bottom p { font-size: 19px; line-height: 1.8; }

:root[data-theme="developerfolio-classic"] .hero-bottom > .button,

:root[data-theme="developerfolio-classic"] .hero-rule { display: none; }

:root[data-theme="developerfolio-classic"] .classic-illustration { grid-column: 2; grid-row: 2 / span 3; width: 100%; height: auto; }

:root[data-theme="developerfolio-classic"] .classic-actions,

:root[data-theme="developerfolio-classic"] .classic-socials { display: flex; flex-wrap: wrap; gap: 14px; }

:root[data-theme="developerfolio-classic"] .classic-socials a { border-radius: 24px; background: #f3eafa; color: #55198b; padding: 8px 16px; font-size: 14px; font-weight: 700; }

:root[data-theme="developerfolio-classic"] .classic-actions .button { padding: 13px 22px; font-size: 14px; border: 1px solid var(--lime); }

:root[data-theme="developerfolio-classic"] .classic-actions .classic-secondary { background: var(--paper); color: var(--focus-color); }

:root[data-theme="developerfolio-classic"] h2 { font-size: clamp(2rem, 3.6vw, 3rem); }

:root[data-theme="developerfolio-classic"] .eyebrow { letter-spacing: .08em; }

:root[data-theme="developerfolio-classic"] #work .project { padding: 28px; border: 1px solid var(--line); border-radius: var(--custom-radius, 10px); box-shadow: var(--custom-shadow, var(--card-shadow)); }

:root[data-theme="developerfolio-classic"] #work .project-wide { grid-column: auto; }

:root[data-theme="developerfolio-classic"] #work .project-cover { min-height: 0; padding: 0; box-shadow: none; background: none; color: var(--muted); border-radius: 0; }

:root[data-theme="developerfolio-classic"] #work .project-lettering,

:root[data-theme="developerfolio-classic"] #work .cover-bottom { display: none; }

:root[data-theme="developerfolio-classic"] #work .cover-top { font-size: 11px; letter-spacing: .04em; }

:root[data-theme="developerfolio-classic"] #work .project-image { position: static; width: 100%; height: 180px; opacity: 1; mix-blend-mode: normal; border-radius: 6px; margin-bottom: 20px; }

:root[data-theme="developerfolio-classic"] #work h3 { color: var(--focus-color); font-size: 23px; line-height: 1.4; }

:root[data-theme="developerfolio-classic"] .about { padding-block: 70px; }

:root[data-theme="developerfolio-classic"] .about-grid { gap: 60px; }

:root[data-theme="developerfolio-classic"] .skills span { background: #f7f3fb; color: #55198b; padding: 12px 16px; border: 1px solid #e7dbf0; }

:root[data-theme="developerfolio-classic"] .timeline article { border-left: 3px solid #e0c8f0; padding-left: 26px; gap: 30px; }

:root[data-theme="developerfolio-classic"] .education-grid article { border-top: 3px solid #b78bd5; }

:root[data-theme="developerfolio-classic"] .contact { padding-block: 80px; }

:root[data-theme="developerfolio-classic"] .contact h2 i { color: var(--focus-color); }

@media (max-width: 900px) {

  :root[data-theme="developerfolio-classic"] header { flex-direction: column; align-items: flex-start; }

  :root[data-theme="developerfolio-classic"] #hero { grid-template-columns: 1fr; padding-block: 30px 55px; }

  :root[data-theme="developerfolio-classic"] .classic-illustration { grid-column: 1; grid-row: auto; max-width: 460px; justify-self: center; }

}

@media (max-width: 760px) {

  :root[data-theme="developerfolio-classic"] #work .project { padding: 22px; }

  :root[data-theme="developerfolio-classic"] #work .project-cover { min-height: 0; padding: 0; }

  :root[data-theme="developerfolio-classic"] .about-grid { gap: 28px; }

  :root[data-theme="developerfolio-classic"] .classic-actions .button { white-space: normal; }

}

/* DeveloperFolio Showcase base: independent light theme, using the saved content. */

:root[data-theme="developerfolio-showcase"] {

  --ink: #24212b;

  --paper: #ffffff;

  --lime: #55198b;

  --line: #e7e1ed;

  --muted: #686270;

  --card-bg: #ffffff;

  --about-bg: #ffffff;

  --cover-start: #55198b;

  --cover-end: #8c43ce;

  --cover-text: #ffffff;

  --focus-color: #55198b;

  --hover-accent: #7030a0;

  --card-radius: 10px;

  --card-shadow: 0 6px 24px rgb(40 22 62 / 8%);

  --heading-font: 'Manrope', Arial, sans-serif;

  --section-space: 80px;

  --motion-duration: 180ms;

}

:root[data-theme="developerfolio-showcase"] .wrap { max-width: 1200px; }

:root[data-theme="developerfolio-showcase"] header { border: 0; padding-block: 30px; }

:root[data-theme="developerfolio-showcase"] .wordmark { color: var(--focus-color); font-family: Georgia, serif; font-style: italic; }

:root[data-theme="developerfolio-showcase"] header .wordmark::before { content: '<'; font-family: monospace; color: var(--muted); }

:root[data-theme="developerfolio-showcase"] header .wordmark::after { content: '/>'; font-family: monospace; color: var(--muted); }

:root[data-theme="developerfolio-showcase"] #hero {

  display: grid;

  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);

  gap: 20px 40px;

  padding-block: 60px 90px;

  align-items: center;

}

:root[data-theme="developerfolio-showcase"] #hero > .eyebrow { grid-column: 1 / -1; color: var(--muted); }

:root[data-theme="developerfolio-showcase"] .classic-greeting { grid-column: 1; margin: 0; font-size: clamp(1.8rem, 3.6vw, 3.2rem); font-weight: 700; letter-spacing: -.04em; }

:root[data-theme="developerfolio-showcase"] #hero h1 { grid-column: 1; font-size: clamp(1.8rem, 3.5vw, 3rem); line-height: 1.25; margin: 0; letter-spacing: -.035em; overflow-wrap: anywhere; }

:root[data-theme="developerfolio-showcase"] #hero h1 > span { color: var(--focus-color); }

:root[data-theme="developerfolio-showcase"] .hero-bottom { grid-column: 1; flex-direction: column; align-items: flex-start; gap: 24px; }

:root[data-theme="developerfolio-showcase"] .hero-bottom p { font-size: 19px; line-height: 1.8; }

:root[data-theme="developerfolio-showcase"] .hero-bottom > .button,

:root[data-theme="developerfolio-showcase"] .hero-rule { display: none; }

:root[data-theme="developerfolio-showcase"] .classic-illustration { grid-column: 2; grid-row: 2 / span 3; width: 100%; height: auto; }

:root[data-theme="developerfolio-showcase"] .classic-actions,

:root[data-theme="developerfolio-showcase"] .classic-socials { display: flex; flex-wrap: wrap; gap: 14px; }

:root[data-theme="developerfolio-showcase"] .classic-socials a { border-radius: 24px; background: #f3eafa; color: #55198b; padding: 8px 16px; font-size: 14px; font-weight: 700; }

:root[data-theme="developerfolio-showcase"] .classic-actions .button { padding: 13px 22px; font-size: 14px; border: 1px solid var(--lime); }

:root[data-theme="developerfolio-showcase"] .classic-actions .classic-secondary { background: var(--paper); color: var(--focus-color); }

:root[data-theme="developerfolio-showcase"] h2 { font-size: clamp(2rem, 3.6vw, 3rem); }

:root[data-theme="developerfolio-showcase"] .eyebrow { letter-spacing: .08em; }

:root[data-theme="developerfolio-showcase"] #work .project { padding: 28px; border: 1px solid var(--line); border-radius: var(--custom-radius, 10px); box-shadow: var(--custom-shadow, var(--card-shadow)); }

:root[data-theme="developerfolio-showcase"] #work .project-wide { grid-column: auto; }

:root[data-theme="developerfolio-showcase"] #work .project-cover { min-height: 0; padding: 0; box-shadow: none; background: none; color: var(--muted); border-radius: 0; }

:root[data-theme="developerfolio-showcase"] #work .project-lettering,

:root[data-theme="developerfolio-showcase"] #work .cover-bottom { display: none; }

:root[data-theme="developerfolio-showcase"] #work .cover-top { font-size: 11px; letter-spacing: .04em; }

:root[data-theme="developerfolio-showcase"] #work .project-image { position: static; width: 100%; height: 180px; opacity: 1; mix-blend-mode: normal; border-radius: 6px; margin-bottom: 20px; }

:root[data-theme="developerfolio-showcase"] #work h3 { color: var(--focus-color); font-size: 23px; line-height: 1.4; }

:root[data-theme="developerfolio-showcase"] .about { padding-block: 70px; }

:root[data-theme="developerfolio-showcase"] .about-grid { gap: 60px; }

:root[data-theme="developerfolio-showcase"] .skills span { background: #f7f3fb; color: #55198b; padding: 12px 16px; border: 1px solid #e7dbf0; }

:root[data-theme="developerfolio-showcase"] .timeline article { border-left: 3px solid #e0c8f0; padding-left: 26px; gap: 30px; }

:root[data-theme="developerfolio-showcase"] .education-grid article { border-top: 3px solid #b78bd5; }

:root[data-theme="developerfolio-showcase"] .contact { padding-block: 80px; }

:root[data-theme="developerfolio-showcase"] .contact h2 i { color: var(--focus-color); }

@media (max-width: 900px) {

  :root[data-theme="developerfolio-showcase"] header { flex-direction: column; align-items: flex-start; }

  :root[data-theme="developerfolio-showcase"] #hero { grid-template-columns: 1fr; padding-block: 30px 55px; }

  :root[data-theme="developerfolio-showcase"] .classic-illustration { grid-column: 1; grid-row: auto; max-width: 460px; justify-self: center; }

}

@media (max-width: 760px) {

  :root[data-theme="developerfolio-showcase"] #work .project { padding: 22px; }

  :root[data-theme="developerfolio-showcase"] #work .project-cover { min-height: 0; padding: 0; }

  :root[data-theme="developerfolio-showcase"] .about-grid { gap: 28px; }

  :root[data-theme="developerfolio-showcase"] .classic-actions .button { white-space: normal; }

}

/* Screenshot-inspired Showcase layout. */
:root[data-theme="developerfolio-showcase"] { --lime:#6550e8; --focus-color:#6550e8; --hover-accent:#5140c9; --card-radius:14px; --card-shadow:0 6px 18px rgb(30 20 65 / 7%); --ink:#17171e; --muted:#727583; }
:root[data-theme="developerfolio-showcase"] .wrap { max-width:1140px; }
:root[data-theme="developerfolio-showcase"] header .wordmark { font-family:var(--heading-font); font-style:normal; color:var(--ink); font-size:21px; }
:root[data-theme="developerfolio-showcase"] #hero { padding-block:85px 110px; }
:root[data-theme="developerfolio-showcase"] #hero > .eyebrow,
:root[data-theme="developerfolio-showcase"] #hero h1,
:root[data-theme="developerfolio-showcase"] .about-sign,
:root[data-theme="developerfolio-showcase"] section > .eyebrow { display:none; }
:root[data-theme="developerfolio-showcase"] .classic-greeting { font-size:clamp(2.6rem,4.5vw,4.2rem); line-height:1.1; max-width:540px; }
:root[data-theme="developerfolio-showcase"] .classic-illustration { grid-row:1 / span 3; }
:root[data-theme="developerfolio-showcase"] .hero-bottom p { font-size:19px; }
:root[data-theme="developerfolio-showcase"] .classic-actions .button { box-shadow:0 5px 12px rgb(101 80 232 / 20%); border-radius:8px; }
:root[data-theme="developerfolio-showcase"] .classic-actions .classic-secondary { background:var(--lime); color:white; }
:root[data-theme="developerfolio-showcase"] .about-grid { position:relative; grid-template-columns:1fr 1.3fr; gap:20px 70px; align-items:center; }
:root[data-theme="developerfolio-showcase"] .about-grid > div:not([class]) { grid-column:2; }
:root[data-theme="developerfolio-showcase"] .about-grid .eyebrow { display:none; }
:root[data-theme="developerfolio-showcase"] .about-copy { grid-column:2; padding:0; }
:root[data-theme="developerfolio-showcase"] .about-lead { font-size:18px; }
:root[data-theme="developerfolio-showcase"] .showcase-dashboard { grid-column:1; grid-row:1 / span 2; padding:38px; background:#f3f0ff; border-radius:20px; }
.showcase-chart { height:140px; background:white; border:1px solid #e8e4f1; border-radius:10px; display:flex; align-items:flex-end; justify-content:center; gap:16px; padding:20px; }
.showcase-chart span { width:28px; background:#6550e8; border-radius:3px 3px 0 0; }
.showcase-chart span:nth-child(2n) { background:#34b2ae; }
.showcase-chart span:nth-child(3n) { background:#ffbd54; }
.showcase-code-lines { height:94px; border-radius:10px; margin-top:18px; background:linear-gradient(#6550e8,#6550e8) 20px 22px/30% 7px no-repeat,linear-gradient(#e5e2ed,#e5e2ed) 20px 42px/75% 7px no-repeat,linear-gradient(#e5e2ed,#e5e2ed) 20px 62px/55% 7px no-repeat,white; }
:root[data-theme="developerfolio-showcase"] .skills { gap:16px; }
:root[data-theme="developerfolio-showcase"] .skills > span { display:flex; flex-direction:column; align-items:center; gap:8px; border:0; background:none; padding:0; font-size:11px; color:var(--muted); max-width:92px; text-align:center; }
:root[data-theme="developerfolio-showcase"] .skills b { display:grid; place-items:center; width:48px; height:48px; background:#6550e8; color:white; border-radius:12px; font-size:15px; }
:root[data-theme="developerfolio-showcase"] .skills span:nth-child(3n) b { background:#008f95; }
:root[data-theme="developerfolio-showcase"] .skills span:nth-child(3n + 2) b { background:#2878ba; }
.showcase-metrics { grid-column:1 / -1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; margin-top:50px; }
.showcase-metric { background:#f3f0ff; border-radius:12px; padding:28px; display:grid; gap:8px; }
.showcase-metric strong { font-size:44px; color:#6550e8; line-height:1; }
.showcase-metric span { font-size:14px; color:#383343; }
:root[data-theme="developerfolio-showcase"] .education-grid { grid-template-columns:1fr; }
:root[data-theme="developerfolio-showcase"] .education-grid article { position:relative; padding:28px 28px 28px 120px; border:1px solid var(--line); border-radius:14px; box-shadow:var(--card-shadow); min-height:145px; }
.showcase-school { position:absolute; left:28px; top:30px; display:grid; place-items:center; width:66px; height:66px; border-radius:50%; background:#cf1234; color:white; font-weight:800; }
:root[data-theme="developerfolio-showcase"] .experience { padding-top:80px; }
:root[data-theme="developerfolio-showcase"] .timeline { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr)); gap:26px; }
:root[data-theme="developerfolio-showcase"] .timeline article { display:block; padding:0 0 22px; border:1px solid var(--line); border-radius:14px; box-shadow:var(--card-shadow); text-align:center; overflow:hidden; }
.showcase-company { position:relative; background:#007eb9; color:white; padding:24px 20px 52px; margin-bottom:44px; font-weight:700; }
.timeline article:nth-child(2n) .showcase-company { background:#6550e8; }
.timeline article:nth-child(3n) .showcase-company { background:#2cafaa; }
.showcase-monogram { display:grid; place-items:center; position:absolute; width:76px; height:76px; border-radius:50%; background:white; color:#6550e8; border:1px solid #eee; bottom:-34px; left:calc(50% - 38px); font-size:18px; }
:root[data-theme="developerfolio-showcase"] .timeline article > div:not(.showcase-company) { padding-inline:24px; }
:root[data-theme="developerfolio-showcase"] .timeline h3 { font-size:18px; }
:root[data-theme="developerfolio-showcase"] .timeline h4 { font-size:20px; margin-top:18px; }
:root[data-theme="developerfolio-showcase"] #work .project { padding:0 0 24px; overflow:hidden; }
:root[data-theme="developerfolio-showcase"] #work .project-cover { padding:26px; min-height:180px; background:#6550e8; color:white; border-radius:0; display:flex; justify-content:center; }
:root[data-theme="developerfolio-showcase"] #work .project:nth-child(2n) .project-cover { background:#12bca0; }
:root[data-theme="developerfolio-showcase"] #work .project:nth-child(3n) .project-cover { background:#e50f48; }
:root[data-theme="developerfolio-showcase"] #work .project-lettering { display:block; font-size:clamp(1.7rem,7cqi,3rem); margin:15px 0 0; }
:root[data-theme="developerfolio-showcase"] #work .project-info,
:root[data-theme="developerfolio-showcase"] #work .project-description,
:root[data-theme="developerfolio-showcase"] #work .project-links,
:root[data-theme="developerfolio-showcase"] #work details { margin-inline:24px; }
:root[data-theme="developerfolio-showcase"] .contact-layout { display:grid; grid-template-columns:1fr 1fr; gap:24px 60px; }
:root[data-theme="developerfolio-showcase"] .contact h2 { grid-column:1; font-weight:800; }
:root[data-theme="developerfolio-showcase"] .contact-copy { grid-column:1; max-width:100%; }
.showcase-envelope { grid-column:2; grid-row:1 / span 2; justify-self:center; display:grid; place-items:center; width:260px; height:260px; background:#f3f0ff; color:#6550e8; border-radius:50%; font-size:145px; }
:root[data-theme="developerfolio-showcase"] #contact[data-module="contact-simple"] .contact-layout { grid-template-columns:1fr; }
:root[data-theme="developerfolio-showcase"] #contact[data-module="contact-simple"] .showcase-envelope { display:none; }
@media(max-width:900px) {
 :root[data-theme="developerfolio-showcase"] .classic-illustration { grid-row:auto; }
 :root[data-theme="developerfolio-showcase"] #hero { padding-block:40px 60px; }
}
@media(max-width:760px) {
 :root[data-theme="developerfolio-showcase"] .about-grid { grid-template-columns:1fr; }
 :root[data-theme="developerfolio-showcase"] .about-grid > div { grid-column:1; grid-row:auto; }
 :root[data-theme="developerfolio-showcase"] .showcase-dashboard { max-width:400px; width:100%; justify-self:center; }
 .showcase-metrics { grid-template-columns:1fr; gap:12px; margin-top:24px; }
 .showcase-metric { grid-template-columns:64px 1fr; align-items:center; padding:22px; }
 :root[data-theme="developerfolio-showcase"] .contact-layout { grid-template-columns:1fr; }
 .showcase-envelope { grid-column:1; grid-row:auto; width:180px; height:180px; font-size:100px; }
 :root[data-theme="developerfolio-showcase"] .education-grid article { padding:24px; }
 .showcase-school { position:static; margin-bottom:18px; }
}

/* Reflow optional illustrations without leaving an empty grid column. */
:root[data-theme] #hero:has(> .developerfolio-art[hidden]) { grid-template-columns:1fr; }
:root[data-theme] .about-grid:has(> .showcase-dashboard[hidden]) { grid-template-columns:1fr; }
:root[data-theme] .about-grid:has(> .showcase-dashboard[hidden]) > div { grid-column:1; }
:root[data-theme] .contact-layout:has(> .showcase-envelope[hidden]) { grid-template-columns:1fr; }
:root[data-theme] .classic-actions:not(:has(a:not([hidden]))) { display:none; }

/* Color mode is independent of the selected layout. */
:root[data-color-mode="dark"] {
  --paper:#11131c; --ink:#f1f0f7; --muted:#b7b5c7; --line:#353446;
  --card-bg:#1c1e2b; --about-bg:#151722; --focus-color:#b9a7ff;
  --card-shadow:0 8px 24px rgb(0 0 0 / 22%);
}
:root[data-color-mode="light"] {
  --paper:#ffffff; --ink:#24212b; --muted:#686270; --line:#e7e1ed;
  --card-bg:#ffffff; --about-bg:#f8f7fc; --focus-color:#6550b8;
  --card-shadow:0 6px 24px rgb(40 22 62 / 8%);
}
.color-mode-control { display:flex; flex-direction:column; gap:4px; font-size:11px; color:var(--muted); flex-shrink:0; }
.color-mode-control select { font:inherit; font-size:13px; padding:8px 10px; border:1px solid var(--line); border-radius:8px; color:var(--ink); background:var(--paper); cursor:pointer; }
header:has(.color-mode-control) { flex-wrap:wrap; }
:root[data-color-mode="dark"] body,
:root[data-color-mode="light"] body { background:var(--paper); color:var(--ink); }
:root:is([data-color-mode="dark"],[data-color-mode="light"]) header.wrap { background:var(--paper); }
:root:is([data-color-mode="dark"],[data-color-mode="light"]) header nav a:not(.nav-contact),
:root:is([data-color-mode="dark"],[data-color-mode="light"]) .classic-greeting,
:root:is([data-color-mode="dark"],[data-color-mode="light"]) .hero > .eyebrow { color:var(--ink); }
:root:is([data-color-mode="dark"],[data-color-mode="light"]) .hero-bottom p { color:var(--muted); }
:root:is([data-color-mode="dark"],[data-color-mode="light"]) .hero h1 > span { color:var(--focus-color); background:none; }
:root:is([data-color-mode="dark"],[data-color-mode="light"]) .about { background:var(--about-bg); }
:root:is([data-color-mode="dark"],[data-color-mode="light"]) #work .project,
:root:is([data-color-mode="dark"],[data-color-mode="light"]) .developer-achievement-card { background:var(--card-bg); color:var(--ink); }
:root:is([data-color-mode="dark"],[data-color-mode="light"]) .skills span { background:var(--card-bg); color:var(--ink); border-color:var(--line); }
:root[data-color-mode="dark"] .showcase-metric,
:root[data-color-mode="dark"] .showcase-dashboard,
:root[data-color-mode="dark"] .showcase-envelope,
:root[data-color-mode="dark"] .classic-socials a { background:#252239; color:#c5b9ff; }
:root[data-color-mode="dark"] .showcase-metric strong { color:#b9a7ff; }
:root[data-color-mode="dark"] .showcase-metric span { color:var(--ink); }
:root[data-color-mode="dark"] .showcase-chart { background:#1c1e2b; border-color:var(--line); }
:root[data-color-mode="dark"] .showcase-code-lines { background-color:#1c1e2b; }
:root:is([data-color-mode="dark"],[data-color-mode="light"]) input,
:root:is([data-color-mode="dark"],[data-color-mode="light"]) textarea { background:var(--card-bg); color:var(--ink); }
:root[data-color-mode="light"][data-theme="developerfolio-editorial"] .hero { background:none; }
:root[data-color-mode="light"][data-theme="midnight-dark"] .hero h1,
:root[data-color-mode="light"][data-theme="midnight-dark"] .wordmark { text-shadow:none; }

/* My Choice Theme — focused engineering portfolio. */
:root[data-theme="my-choice"] {
 --paper:#101c2a; --ink:#eaf2f6; --muted:#a9bbc9; --line:#304254;
 --lime:#66ddc1; --focus-color:#66ddc1; --hover-accent:#90ead5;
 --card-bg:#172637; --about-bg:#132131; --cover-start:#1a3b43; --cover-end:#213249;
 --cover-text:#eaf2f6; --card-radius:16px; --card-shadow:0 12px 32px rgb(0 0 0 / 12%);
 --heading-font:'Manrope',Arial,sans-serif; --section-space:80px; --motion-duration:180ms;
}
:root[data-theme="my-choice"] .wrap { max-width:1180px; }
:root[data-theme="my-choice"] header { padding-block:24px; gap:20px; }
:root[data-theme="my-choice"] .wordmark { font-size:21px; letter-spacing:-.6px; }
:root[data-theme="my-choice"] nav { gap:22px; font-size:13px; }
:root[data-theme="my-choice"] #hero { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:32px 64px; padding-block:80px; }
:root[data-theme="my-choice"] .hero > .eyebrow { grid-column:1/-1; color:var(--muted); font-size:11px; }
:root[data-theme="my-choice"] .hero h1 { grid-column:1; margin:0; font-size:clamp(2.7rem,4.8vw,4.6rem); line-height:1.12; letter-spacing:-.05em; }
:root[data-theme="my-choice"] .hero h1 > span { color:var(--focus-color); }
:root[data-theme="my-choice"] .hero-bottom { grid-column:1; flex-direction:column; align-items:flex-start; gap:24px; }
:root[data-theme="my-choice"] .hero-bottom p { font-size:17px; line-height:1.85; }
:root[data-theme="my-choice"] .hero-bottom > .button,
:root[data-theme="my-choice"] .hero-rule { display:none; }
:root[data-theme="my-choice"] .classic-actions,
:root[data-theme="my-choice"] .classic-socials { display:flex; gap:14px; flex-wrap:wrap; }
:root[data-theme="my-choice"] .classic-socials { font-size:14px; color:var(--muted); }
:root[data-theme="my-choice"] .button,
:root[data-theme="my-choice"] .degree-note,
:root[data-theme="my-choice"] .contact-form button { color:#101c2a; font-size:14px; padding:13px 21px; border-radius:8px; }
:root[data-theme="my-choice"] .classic-secondary { background:transparent; color:var(--ink); border:1px solid var(--line); }
:root[data-theme="my-choice"] .classic-secondary:hover { background:var(--card-bg); }
:root[data-theme="my-choice"] .choice-profile { grid-column:2; grid-row:2 / span 2; align-self:center; border:1px solid var(--line); border-top:3px solid var(--focus-color); border-radius:16px; padding:32px; background:var(--card-bg); box-shadow:var(--card-shadow); }
:root[data-theme="my-choice"] .choice-profile h2 { font-size:30px; }
:root[data-theme="my-choice"] .choice-role { color:var(--muted); line-height:1.8; }
.choice-skills { display:flex; gap:8px; flex-wrap:wrap; margin-block:26px; }
.choice-skills span { border:1px solid var(--line); padding:6px 10px; font-size:12px; border-radius:6px; }
.choice-location { padding-top:20px; border-top:1px solid var(--line); color:var(--muted); font-size:13px; margin-bottom:0; }
:root[data-theme="my-choice"] h2 { font-size:clamp(2rem,3.4vw,3rem); }
:root[data-theme="my-choice"] #work .projects { gap:26px; }
:root[data-theme="my-choice"] #work .project { border:1px solid var(--line); border-radius:14px; padding:28px; background:var(--card-bg); }
:root[data-theme="my-choice"] #work .project-wide { grid-column:auto; }
:root[data-theme="my-choice"] #work .project-cover { min-height:0; background:none; box-shadow:none; padding:0; color:var(--muted); }
:root[data-theme="my-choice"] #work .project-lettering,
:root[data-theme="my-choice"] #work .cover-bottom { display:none; }
:root[data-theme="my-choice"] .cover-top { font-size:10px; letter-spacing:.04em; }
:root[data-theme="my-choice"] #work .project-image { position:static; height:180px; opacity:1; mix-blend-mode:normal; border-radius:8px; margin-bottom:20px; }
:root[data-theme="my-choice"] .project h3 { font-size:24px; line-height:1.4; }
:root[data-theme="my-choice"] .project-description { line-height:1.8; }
:root[data-theme="my-choice"] .project-links { color:var(--focus-color); }
/* Card padding and row spacing must be independent of the selected module. */
:root[data-theme="my-choice"] .timeline { display:grid; gap:20px; }
:root[data-theme="my-choice"] .timeline article {
  gap:20px 40px;
  padding:clamp(22px, 3vw, 32px);
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--card-bg);
  align-items:start;
}
:root[data-theme="my-choice"] .timeline .location { margin-bottom:0; }
:root[data-theme="my-choice"] .timeline article > div > p:last-child { margin-bottom:0; }
:root[data-theme="my-choice"] .timeline article > div:last-child > p { max-width:70ch; line-height:1.75; }
:root[data-theme] #experience[data-module="experience-list"] .timeline article { row-gap:16px; }
@media(max-width:760px) {
  :root[data-theme="my-choice"] .timeline article { gap:18px; padding:22px; }
}
:root[data-theme="my-choice"] .timeline h4 { color:var(--focus-color); }
:root[data-theme="my-choice"] .about-grid { gap:60px; }
:root[data-theme="my-choice"] .about-sign { display:none; }
:root[data-theme="my-choice"] .skills span { background:var(--card-bg); border-color:var(--line); }
:root[data-theme="my-choice"] .education-grid article { border:1px solid var(--line); border-radius:12px; padding:26px; background:var(--card-bg); }
:root[data-theme="my-choice"] .contact h2 { font-size:clamp(2.4rem,4vw,4rem); }
:root[data-theme="my-choice"] .contact h2 i { color:var(--focus-color); }
:root[data-theme="my-choice"][data-color-mode="light"] { --paper:#f8fafb; --ink:#152637; --muted:#526578; --line:#d5dfe6; --card-bg:#fff; --about-bg:#eef4f6; --focus-color:#087765; }
:root[data-theme="my-choice"][data-color-mode="dark"] { --paper:#101c2a; --ink:#eaf2f6; --muted:#a9bbc9; --line:#304254; --card-bg:#172637; --about-bg:#132131; --focus-color:#66ddc1; }
@media(max-width:900px) {
 :root[data-theme="my-choice"] #hero { grid-template-columns:1fr; padding-block:48px; gap:26px; }
 :root[data-theme="my-choice"] .choice-profile { grid-column:1; grid-row:auto; }
}
@media(max-width:760px) {
 :root[data-theme="my-choice"] #work .project { padding:22px; }
 :root[data-theme="my-choice"] .about-grid { gap:30px; }
 :root[data-theme="my-choice"] .classic-actions .button { white-space:normal; }
}

.portfolio-social-icons { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.portfolio-social-icons > a,
.portfolio-social-icons > span {
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  padding:0;
  border:0;
  border-radius:50%;
  background:var(--social-color);
  color:#fff;
  text-decoration:none;
  flex:none;
}
.portfolio-social-icons > a:hover { transform:translateY(-2px); filter:brightness(1.12); }
.portfolio-social-icons img { display:block; width:20px; height:20px; object-fit:contain; }
.portfolio-social-icons svg { width:20px; height:20px; }
.portfolio-social-icons .social-icon-fallback { font-size:12px; font-weight:800; }
:root[data-theme="developerfolio-editorial"] .portfolio-social-icons > a,
:root[data-theme="developerfolio-editorial"] .portfolio-social-icons > span { padding:0; }
:root[data-theme] #work .cover-top > span:first-child { font-size:var(--project-company-font-size, 16px); }
.developer-achievements { padding-block:var(--section-space, 56px); }
:root[data-theme] .developer-achievements { padding-bottom:24px; }
:root[data-theme] #developer-achievements + #contact { padding-top:24px; }
.developer-achievement-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr)); gap:16px; margin-top:24px; }
:root[data-theme] #developer-achievements[data-layout="list"] .developer-achievement-grid { grid-template-columns:minmax(0,1fr); }
.developer-achievement-card { padding:22px; border:1px solid var(--line); border-radius:var(--card-radius,8px); background:var(--card-bg,#fff); color:var(--ink,inherit); }
.developer-achievement-badge { display:inline-grid; min-width:54px; min-height:42px; place-items:center; padding:4px 10px; border-radius:6px; background:var(--lime); color:var(--cover-text,#fff); font-weight:800; }
.developer-achievement-card p { color:var(--muted); }
.developer-achievement-bullets { margin:16px 0 0; padding-left:20px; color:var(--muted); }
.developer-achievement-bullets li + li { margin-top:8px; }

/* Research Signal: cool editorial palette with an interactive skills network. */
:root[data-theme="research-signal"] {
  --ink:#172033;
  --paper:#edf0f4;
  --muted:#56607a;
  --line:#cdd3de;
  --card-bg:#f8f9fb;
  --about-bg:#e4e9f0;
  --lime:#0f6e6a;
  --focus-color:#0f6e6a;
  --hover-accent:#0b5a57;
  --cover-start:#0f6e6a;
  --cover-end:#145c68;
  --cover-text:#ffffff;
  --card-radius:6px;
  --card-shadow:none;
  --heading-font:Georgia,'Times New Roman',serif;
  --section-space:64px;
  --motion-duration:200ms;
  --research-amber:#c98a12;
}
:root[data-theme="research-signal"] body { font-family:'DM Sans',Arial,sans-serif; font-size:17px; }
:root[data-theme="research-signal"] .site-head,
:root[data-theme="research-signal"] header.wrap {
  position:sticky;
  top:0;
  z-index:10;
  width:100%;
  padding:0 max(2rem,calc((100vw - 1120px)/2));
  border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--paper) 90%,transparent);
  backdrop-filter:blur(10px);
}
:root[data-theme="research-signal"] .wordmark { font-family:var(--heading-font); font-size:19px; letter-spacing:0; }
:root[data-theme="research-signal"] header nav { gap:24px; }
:root[data-theme="research-signal"] header nav a { color:var(--muted); }
:root[data-theme="research-signal"] .hero {
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  align-items:center;
  gap:18px 54px;
  min-height:600px;
  padding-block:72px 56px;
}
:root[data-theme="research-signal"] .hero:not(:has(.developerfolio-art)) { display:grid; min-height:600px; }
:root[data-theme="research-signal"] .hero > .eyebrow { grid-column:1/-1; color:var(--muted); }
:root[data-theme="research-signal"] .hero h1 {
  grid-column:1;
  margin:0 0 20px;
  font-family:var(--heading-font);
  font-size:clamp(3rem,6vw,5rem);
  font-weight:600;
  line-height:1.03;
  letter-spacing:0;
  overflow-wrap:anywhere;
  color:var(--ink);
}
:root[data-theme="research-signal"] header .wordmark { color:var(--ink); }
:root[data-theme="research-signal"] .hero .hero-bottom {
  grid-column:1;
  flex-direction:column;
  align-items:flex-start;
  gap:0;
}
:root[data-theme="research-signal"] .research-lede {
  max-width:32ch;
  margin:0 0 14px;
  color:var(--ink);
  font-family:var(--heading-font);
  font-size:24px;
  line-height:1.4;
}
:root[data-theme="research-signal"] .hero-bottom > p:not(.research-lede) { max-width:50ch; margin:0 0 24px; color:var(--muted); }
:root[data-theme="research-signal"] .hero-bottom > .button { display:none; }
:root[data-theme="research-signal"] .hero-rule { display:none; }
:root[data-theme="research-signal"] .research-code-visual {
  grid-column:2;
  grid-row:2/span 2;
  align-self:center;
  width:100%;
  min-width:0;
  margin:0;
  overflow:hidden;
  border:1px solid #273246;
  border-radius:8px;
  background:#07090e;
  color:#e6e9f2;
  box-shadow:0 24px 60px rgb(8 16 30 / 22%);
}
:root[data-theme="research-signal"] .research-code-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:46px;
  padding:0 18px;
  border-bottom:1px solid #232b39;
  color:#929db1;
  font:12px/1.4 Consolas,'Courier New',monospace;
}
:root[data-theme="research-signal"] .research-code-dots { display:flex; gap:7px; }
:root[data-theme="research-signal"] .research-code-dots span { width:9px; height:9px; border-radius:50%; background:var(--code-dot); }
:root[data-theme="research-signal"] .research-code-file { margin-left:auto; }
:root[data-theme="research-signal"] .research-code-label {
  margin:22px 24px 4px;
  color:#8994a8;
  font:600 10px/1.4 'DM Sans',Arial,sans-serif;
  letter-spacing:.12em;
}
:root[data-theme="research-signal"] .research-code {
  display:grid;
  gap:8px;
  margin:0;
  padding:18px 24px 28px;
  overflow:auto hidden;
  color:#e7eaf2;
  font:15px/1.85 Consolas,'Courier New',monospace;
  tab-size:2;
}
:root[data-theme="research-signal"] .research-code-line { display:grid; grid-template-columns:2ch minmax(0,1fr); gap:20px; min-width:0; }
:root[data-theme="research-signal"] .research-code-number { color:#68748a; user-select:none; }
:root[data-theme="research-signal"] .research-code-content { min-width:0; white-space:pre-wrap; overflow-wrap:anywhere; }
:root[data-theme="research-signal"] .research-code .keyword { color:#d78cff; }
:root[data-theme="research-signal"] .research-code .variable { color:#70bdff; }
:root[data-theme="research-signal"] .research-code .function { color:#f1ad67; }
:root[data-theme="research-signal"] .research-code .string { color:#e7c46a; }
:root[data-theme="research-signal"] .research-code .plain { color:#d6d9e3; }
:root[data-theme="research-signal"] .developerfolio-socials { display:flex; gap:12px; }
:root[data-theme="research-signal"] .developerfolio-socials a { display:grid; width:40px; height:40px; place-items:center; border:1px solid var(--line); border-radius:50%; background:var(--social-color,var(--card-bg)); color:#fff; }
:root[data-theme="research-signal"] .developerfolio-socials img { width:19px; height:19px; object-fit:contain; }
:root[data-theme="research-signal"] .developerfolio-socials svg { width:20px; height:20px; }
:root[data-theme="research-signal"] #work .section-head { align-items:baseline; }
:root[data-theme="research-signal"] #work .projects { row-gap:0; }
:root[data-theme="research-signal"] #work .project { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.6fr); gap:0 40px; padding:30px 0; border-bottom:1px solid var(--line); }
:root[data-theme="research-signal"] #work .project-wide { grid-column:auto; }
:root[data-theme="research-signal"] #work .project-cover { grid-column:1; min-height:0; padding:0; border-radius:0; background:none; box-shadow:none; color:var(--muted); }
:root[data-theme="research-signal"] #work .cover-top { flex-direction:column; align-items:flex-start; gap:6px; font-size:13px; letter-spacing:0; }
:root[data-theme="research-signal"] #work .cover-top > span:last-child { color:var(--teal); font-size:12px; }
:root[data-theme="research-signal"] #work .project-lettering,
:root[data-theme="research-signal"] #work .cover-bottom { display:none; }
:root[data-theme="research-signal"] #work .project-info { grid-column:1; margin:18px 0 0; align-items:flex-start; }
:root[data-theme="research-signal"] #work .project-type { color:var(--muted); font-size:13px; letter-spacing:0; }
:root[data-theme="research-signal"] #work .project-info h3 { font-family:var(--heading-font); font-size:25px; line-height:1.25; }
:root[data-theme="research-signal"] #work .project-description { grid-column:2; grid-row:1/span 2; align-self:start; max-width:62ch; margin:0 0 16px; color:var(--ink); }
:root[data-theme="research-signal"] #work .project-links,
:root[data-theme="research-signal"] #work details { grid-column:2; }
:root[data-theme="research-signal"] #work details { border-color:var(--line); }
:root[data-theme="research-signal"] #work summary { color:var(--teal); }
:root[data-theme="research-signal"] .experience .timeline { margin-top:12px; }
:root[data-theme="research-signal"] .timeline article { grid-template-columns:11rem minmax(0,1fr); gap:24px; padding:26px 0; border-bottom:1px solid var(--line); }
:root[data-theme="research-signal"] .timeline h3,
:root[data-theme="research-signal"] .timeline h4 { font-family:var(--heading-font); }
:root[data-theme="research-signal"] .timeline h3 { font-size:22px; }
:root[data-theme="research-signal"] .timeline h4 { margin:0 0 8px; color:var(--teal); font-size:20px; }
:root[data-theme="research-signal"] .timeline p:not(.project-type) { color:var(--ink); }
:root[data-theme="research-signal"] .research-points { max-width:66ch; margin:0; padding-left:20px; }
:root[data-theme="research-signal"] .research-points li { margin-bottom:8px; }
:root[data-theme="research-signal"] .about { background:var(--about-bg); }
:root[data-theme="research-signal"] .about-grid { gap:56px; }
:root[data-theme="research-signal"] .about h2,
:root[data-theme="research-signal"] #education h2,
:root[data-theme="research-signal"] #contact h2 { font-family:var(--heading-font); }
:root[data-theme="research-signal"] .skills span { border-radius:4px; background:var(--surface); }
:root[data-theme="research-signal"] .education-grid article { border-top-color:var(--line); }
:root[data-theme="research-signal"] #contact .contact-layout { display:grid; grid-template-columns:1fr 1.2fr; gap:40px; align-items:start; }
:root[data-theme="research-signal"] #contact h2 { font-size:clamp(2.5rem,5vw,4rem); }
:root[data-theme="research-signal"] footer { color:var(--muted); }
:root[data-color-mode="dark"][data-theme="research-signal"] {
  --ink:#e4e8ef; --paper:#111824; --muted:#9aa4b8; --line:#2c374b;
  --card-bg:#182132; --about-bg:#151e2d; --lime:#4fb8b1; --focus-color:#4fb8b1;
  --hover-accent:#72cbc5; --research-amber:#e6b347;
}
@media(max-width:880px) {
  :root[data-theme="research-signal"] .hero { grid-template-columns:1fr; min-height:0; gap:22px; }
  :root[data-theme="research-signal"] .hero > .eyebrow,
  :root[data-theme="research-signal"] .hero h1,
  :root[data-theme="research-signal"] .hero .hero-bottom,
  :root[data-theme="research-signal"] .research-code-visual { grid-column:1; grid-row:auto; max-width:620px; justify-self:center; }
}
@media(max-width:680px) {
  :root[data-theme="research-signal"] .wrap { width:calc(100% - 40px); }
  :root[data-theme="research-signal"] .research-code { font-size:13px; }
  :root[data-theme="research-signal"] header.wrap { align-items:flex-start; padding:14px 20px; }
  :root[data-theme="research-signal"] header nav { width:100%; overflow-x:auto; flex-wrap:nowrap; gap:16px; }
  :root[data-theme="research-signal"] #work .project { grid-template-columns:minmax(0,1fr); gap:16px; }
  :root[data-theme="research-signal"] #work .project-description,
  :root[data-theme="research-signal"] #work .project-links,
  :root[data-theme="research-signal"] #work details { grid-column:1; grid-row:auto; }
  :root[data-theme="research-signal"] .timeline article { grid-template-columns:1fr; gap:8px; }
  :root[data-theme="research-signal"] #contact .contact-layout { grid-template-columns:1fr; }
}

/* Shared controls retain their contrast and shape across every layout. */
:root[data-theme] .portfolio-social-icons > a { display:grid; place-items:center; width:40px; height:40px; padding:0; border-radius:50%; background:var(--social-color); color:#fff; }
:root[data-theme] .button:not(.classic-secondary),
:root[data-theme] .degree-note,
:root[data-theme] .contact-form button,
:root[data-theme] #developer-achievements .developer-achievement-badge { background:var(--lime); color:var(--accent-text,#fff); }
:root[data-theme="research-signal"] #work[data-module="project-grid"] .project { display:block; padding:24px; border:1px solid var(--line); border-radius:var(--card-radius); }
:root[data-theme="research-signal"] #work[data-module="project-grid"] .projects { gap:24px; }
:root[data-theme="research-signal"] #work[data-module="project-grid"] .project-description { margin-top:16px; }
:root[data-theme="research-signal"] #hero:has(.research-code-visual[hidden]) { grid-template-columns:1fr; min-height:0; }
:root[data-theme="research-signal"][data-color-mode="light"] { --paper:#edf0f4; --ink:#172033; --muted:#56607a; }
:root[data-theme="research-signal"][data-color-mode="dark"] { --teal:#4fb8b1; }
:root[data-theme] .developer-achievement-card { min-width:0; overflow-wrap:anywhere; }
@media(max-width:880px) {
 :root[data-theme="research-signal"] .hero:not(:has(.developerfolio-art)) { min-height:0; }
}

/* Typography controls use readable defaults and wrap within narrow screens. */
:root[data-theme] body { font-family:var(--custom-font,'DM Sans',Arial,sans-serif); font-size:var(--body-text-size,16px); }
:root[data-theme] #hero > .eyebrow { align-items:flex-start; flex-wrap:wrap; gap:14px 28px; }
:root[data-theme] #hero > .eyebrow > span:first-child { font-size:var(--professional-title-size,18px); line-height:1.5; letter-spacing:.025em; font-weight:600; max-width:100%; overflow-wrap:anywhere; }
:root[data-theme] #hero > .eyebrow > span:last-child { font-size:12px; line-height:1.7; }
:root[data-theme] #hero h1 { font-size:clamp(2rem,6vw,var(--hero-text-size,64px)); }
:root[data-theme] #hero .classic-greeting { font-size:clamp(2rem,6vw,var(--hero-text-size,64px)); }
:root[data-theme] main section h2 { font-size:clamp(1.5rem,4vw,var(--section-text-size,40px)); }
:root[data-theme] .hero-bottom > p,
:root[data-theme] .project-description,
:root[data-theme] .project-detail p,
:root[data-theme] .timeline article p:not(.project-type),
:root[data-theme] .education-grid article p,
:root[data-theme] .about-copy > p,
:root[data-theme] .contact-copy > p,
:root[data-theme] .developer-achievement-card p,
:root[data-theme] .developer-achievement-bullets { font-size:var(--body-text-size,16px); line-height:1.75; }
:root[data-theme] .choice-role,
:root[data-theme] #hero .research-lede { font-size:var(--professional-title-size,18px); }