:root {
  color-scheme: light;
  --background: #f4f7fb;
  --foreground: #101827;
  --muted: #526174;
  --border: rgba(16, 24, 39, 0.14);
  --accent: #2563eb;
  --accent-strong: #3b82f6;
  --surface: #ffffff;
  --surface-raised: #eef4fa;
  --ring: rgba(37, 99, 235, 0.35);
  --black: #050505;
  --white: #ffffff;
  --paper: #f5f5f7;
  --line: #d7d7dc;
  --blue: #0066cc;
  --grey: #6e6e73;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--background); }
body {
  margin: 0;
  min-width: 320px;
  background: radial-gradient(circle at 75% 5%, rgba(59,130,246,.12), transparent 32rem), var(--background) !important;
  color: var(--foreground) !important;
  font-family: Geist, Arial, sans-serif;
}
main { isolation: isolate; }
main::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: .32;
  background-image: linear-gradient(rgba(16,24,39,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(16,24,39,.035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, black, transparent 78%);
}
button, a { transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease; }
button:hover, a:hover { transform: translateY(-1px); }
img, video { border-radius: 18px; }
.hero-media img, .feature-media img, .small-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.hero-media { border: 0 !important; }
.chapter .feature-media img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
}
.theme-toggle {
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  padding: 0;
  color: var(--foreground);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 50%;
  cursor: pointer;
  opacity: .78;
}
.theme-toggle:hover { opacity: 1; background: var(--surface-raised); }
.theme-toggle svg {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block !important;
  width: 16px;
  height: 16px;
  transition: opacity .3s ease, transform .45s cubic-bezier(.2,.8,.2,1);
}
.theme-icon--moon { opacity: 1; transform: translate(-50%, -50%) rotate(0) scale(1); }
.theme-icon--sun { opacity: 0; transform: translate(-50%, -50%) rotate(-75deg) scale(.65); }
html[data-theme="dark"] .theme-icon--moon { opacity: 0; transform: translate(-50%, -50%) rotate(75deg) scale(.65); }
html[data-theme="dark"] .theme-icon--sun { opacity: 1; transform: translate(-50%, -50%) rotate(0) scale(1); }

/* v0 visual polish layer for the exported portfolio preview */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }

@media print { main::before { display: none; } body { background: white !important; color: black !important; } }

/* semantic theme tokens */
:where([data-card], .card, article, section) { border-color: var(--border); }
:where(p, small, [data-muted]) { color: var(--muted); }
:where(a, [data-accent]) { color: var(--accent); }

@media (max-width: 760px) {
  main { overflow-x: hidden; }
  section { max-width: 100%; }
}

/* end globals */

/* accessible focus treatment */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* lightweight texture */
::selection { background: rgba(110,231,255,.28); color: var(--foreground); }

/* avoid horizontal overflow from decorative scenes */
.scene-backdrop, .scene-rain { max-width: 100vw; overflow: hidden; }

/* final token aliases */
:root { --text-primary: var(--foreground); --text-secondary: var(--muted); --surface-border: var(--border); }

/* keep controls above animated art */
button, a, input, textarea { position: relative; z-index: 1; }

/* no placeholder styling */

/* compact screen spacing */
@media (max-width: 480px) { body { font-size: 15px; } }

/* end */

/* stable rendering */
body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }

/* make ambient background feel intentional */
.scene-light { filter: blur(18px); }

/* finished */

/* token contract */
:root { --radius-md: 16px; --radius-lg: 24px; }

/* mobile viewport safety */
@media (max-width: 640px) { img, video { border-radius: 14px; } }
@media (max-width: 640px) {
  .topbar { gap: 12px; }
  .topbar div { gap: clamp(10px, 3vw, 20px); }
  .topbar div a { font-size: .72rem; }
}

/* preserve native controls */
input, textarea, select { color: var(--foreground); background: var(--surface); border-color: var(--border); }

/* final accessibility affordance */
/* eof */

.facts p { color: var(--foreground) !important; }
.facts strong { color: var(--accent) !important; }

html[data-theme="dark"] {
  color-scheme: dark;
  --background: #171719;
  --foreground: #f0eff1;
  --muted: #b7b5bb;
  --border: rgba(235, 232, 240, .15);
  --accent: #a9c7ff;
  --accent-strong: #8db3ff;
  --surface: #222225;
  --surface-raised: #2b2b30;
  --ring: rgba(169, 199, 255, .42);
  --black: #111113;
  --white: #f6f5f7;
  --paper: #202023;
  --line: #39393f;
  --blue: #a9c7ff;
  --grey: #b7b5bb;
}

html[data-theme="dark"] body {
  background: radial-gradient(circle at 75% 5%, rgba(127, 147, 187, .12), transparent 32rem), var(--background) !important;
}
html[data-theme="dark"] main::before {
  opacity: .16;
  background-image: linear-gradient(rgba(245, 241, 250, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(245, 241, 250, .04) 1px, transparent 1px);
}
html[data-theme="dark"] .topbar {
  background: rgba(23, 23, 25, .91);
  border-bottom-color: rgba(235, 232, 240, .11);
  animation: none;
}
html[data-theme="dark"] .topbar div a { color: #c7c5ca; }
html[data-theme="dark"] .topbar div a:hover { color: var(--blue); }
html[data-theme="dark"] .kicker,
html[data-theme="dark"] .statement-copy > span,
html[data-theme="dark"] .section-title > span,
html[data-theme="dark"] .minor-title > span,
html[data-theme="dark"] .hero-meta,
html[data-theme="dark"] .small-copy > span { color: var(--muted); }
html[data-theme="dark"] .hero,
html[data-theme="dark"] .work { background: #19191c; }
html[data-theme="dark"] .statement,
html[data-theme="dark"] .experience,
html[data-theme="dark"] .commissions { background: var(--paper); }
html[data-theme="dark"] .hero h1,
html[data-theme="dark"] .statement h2,
html[data-theme="dark"] .section-title h2,
html[data-theme="dark"] .minor-title h2,
html[data-theme="dark"] .feature-copy h3,
html[data-theme="dark"] .more-grid article,
html[data-theme="dark"] .timeline-name,
html[data-theme="dark"] .service-grid article,
html[data-theme="dark"] .commissions h2,
html[data-theme="dark"] .commissions h3 { color: var(--foreground); }
html[data-theme="dark"] .hero-copy > p,
html[data-theme="dark"] .feature-copy > p,
html[data-theme="dark"] .timeline > a,
html[data-theme="dark"] .timeline > .timeline-entry,
html[data-theme="dark"] .workflow-note,
html[data-theme="dark"] .more-grid article p,
html[data-theme="dark"] .service-grid article p,
html[data-theme="dark"] .facts p { color: var(--foreground) !important; }
html[data-theme="dark"] .facts strong { color: var(--foreground) !important; }
html[data-theme="dark"] .chapter .feature-media {
  background: #29292e;
  border-color: rgba(235, 232, 240, .13);
  box-shadow: 0 28px 75px -24px rgba(0, 0, 0, .5), 0 8px 24px -10px rgba(0, 0, 0, .32);
}
html[data-theme="dark"] .feature-media button {
  color: #f0eff1;
  background: rgba(35, 35, 39, .9);
  border-color: rgba(235, 232, 240, .18);
}
html[data-theme="dark"] .feature-media button:hover { background: #39393f; }
html[data-theme="dark"] .small-media > span {
  color: #f0eff1;
  background: rgba(39, 39, 43, .96);
  border: 1px solid rgba(235, 232, 240, .18);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
}
html[data-theme="dark"] .feature-copy li { color: #d1cfd5; border-color: var(--line); }
html[data-theme="dark"] .more-grid > article,
html[data-theme="dark"] .service-grid article { background: #27272b; border-color: var(--line); }
html[data-theme="dark"] .timeline > a,
html[data-theme="dark"] .timeline > .timeline-entry,
html[data-theme="dark"] .timeline { border-color: var(--line); }
html[data-theme="dark"] .timeline-name small,
html[data-theme="dark"] .service-grid .currency-label { color: var(--muted); }
html[data-theme="dark"] .service-grid .service-usd { color: #c4d6ff; }
html[data-theme="dark"] .contact { color: var(--foreground); background: #141416; }
html[data-theme="dark"] .contact-actions button {
  color: #f0eff1;
  background: #34343a;
}
html[data-theme="dark"] .contact-actions a { color: #d1cfd5; border-color: #49484f; }
html[data-theme="dark"] .skip-link { color: var(--foreground); background: #29292e; }
html[data-theme="dark"] .theme-toggle:hover { background: var(--surface-raised); }

html.theme-transition,
html.theme-transition body,
html.theme-transition body * {
  transition: color .45s ease, background-color .45s ease, border-color .45s ease, box-shadow .45s ease, fill .45s ease, stroke .45s ease !important;
}

@media (prefers-reduced-motion: reduce) {
  html.theme-transition,
  html.theme-transition body,
  html.theme-transition body * {
    transition-duration: .01ms !important;
  }
}

/* Keep opened demos inside a compact, responsive player frame. */
.video-dialog {
  width: min(1000px, calc(100vw - 32px)) !important;
  max-width: calc(100vw - 32px) !important;
  max-height: calc(100dvh - 40px);
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  padding: clamp(16px, 2.5vw, 24px);
  overflow: auto;
}
.video-dialog .native-player,
.video-dialog .embed-wrap {
  width: 100% !important;
  max-height: calc(100dvh - 220px);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #08090b;
}
.video-dialog .native-player video,
.video-dialog .embed-wrap iframe {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
}

/* Give prototype demos room to breathe and keep their full content in view. */
#work .more-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}
#work .minor-title { scroll-margin-top: 84px; }
#work .minor-title,
#work .more-grid,
#work .more-grid > article {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}
#work .more-grid > article {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 28px;
  background: var(--surface);
}
#work .more-grid > article > .small-media {
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
  align-self: stretch;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none !important;
  animation: none !important;
}
#work .more-grid > article > .small-media img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  border-radius: 0;
}
#work .more-grid > article > .small-media--playing {
  cursor: default;
  background: #090a0c;
  position: relative;
}
#work .more-grid > article > .small-media--playing video {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  background: #090a0c;
}
#work .more-grid > article > .small-media--playing .small-video-close {
  position: absolute;
  z-index: 4;
  top: 12px;
  right: 12px;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  padding: 0;
  color: #f4f4f5;
  background: rgba(18, 18, 20, .82);
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 50%;
  cursor: pointer;
}
#work .more-grid > article > .small-media--playing .small-video-close:hover {
  background: rgba(18, 18, 20, .98);
}
#work .more-grid > article > .small-copy {
  align-self: center;
  min-width: 0;
  padding: clamp(28px, 4vw, 50px);
  transform: none !important;
  animation: none !important;
}
#work .more-grid .small-copy h3 {
  margin: 14px 0 18px;
  font-size: clamp(2rem, 3.8vw, 3.4rem);
  line-height: 1.06;
  overflow-wrap: anywhere;
}
#work .more-grid .small-copy p {
  max-width: 38rem;
  line-height: 1.75;
}
#work .more-grid .small-copy > button,
#work .more-grid .small-copy > a {
  width: fit-content;
  max-width: 100%;
  margin: 22px 18px 0 0;
  flex-wrap: wrap;
  white-space: normal;
  text-align: left;
}
html[data-theme="dark"] #work .more-grid > article {
  background: #27272b;
  border-color: #39393f;
}
html[data-theme="dark"] #work .more-grid .small-copy > span { color: #b7b5bb; }

@media (max-width: 760px) {
  #work .more-grid > article { grid-template-columns: minmax(0, 1fr); }
  #work .more-grid > article > .small-media {
    height: auto;
    min-height: 0;
    aspect-ratio: 2.07;
  }
  #work .more-grid > article > .small-copy { padding: 26px 24px 32px; }
}

@media print {
  html[data-theme="dark"] body { background: white !important; color: black !important; }
}

.timeline > .timeline-entry {
  display: grid;
  grid-template-columns: 1.45fr .9fr .9fr;
  align-items: center;
  gap: 25px;
  min-height: 82px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  color: #6e6e73;
  font-size: .84rem;
}

html[data-theme="dark"] #work .demo-archive .kicker {
  color: #b7b5bb;
}

html[data-theme="dark"] #work .demo-archive h3 {
  color: #f0eff1;
}

html[data-theme="dark"] #work .archive-links button {
  color: #d1cfd5;
  border-bottom-color: #45454d;
}

html[data-theme="dark"] #work .archive-links button:hover {
  color: #a9c7ff;
}

@media (max-width: 760px) {
  .timeline > .timeline-entry {
    grid-template-columns: minmax(0, 1fr);
    padding: 18px 0;
    gap: 10px;
  }
}