/* =====================================================================
   Min Phone Nyunt Win · Portfolio styles
   ---------------------------------------------------------------------
   Order matters: base tokens → layout → sections → components → motion.
   Colours are tokens on :root (light) and redefined for dark mode.
   Palette (split-complementary from the MP logo):
     light: #F4F7F2 ground · #1C2620 ink · #55BA47 green · #6E3F93 plum
     dark : #18221C ground · #E4EBE2 ink · #6CCB5F green · #BBA2E3 plum
   ===================================================================== */

/* Layout: single column editorial page, 1120px max; hero splits name / "build stats" panel; experience reads like Android release notes. */

/* Color theory: split-complementary — logo green (hue ~113°) as the brand, plum (~275°) as its complementary accent,
   neutrals tinted toward the green so the whole page feels like one family. 4 colors per theme: ground, ink, green, plum. */
:root {
  --ground: #F4F7F2;  /* paper with a green tint */
  --ink: #1C2620;  /* deep green-charcoal */
  --green: #55BA47;  /* the exact logo green */
  --plum: #6E3F93;  /* split-complement accent */
  /* derived tints/shades of the 4 colors (not new hues) */
  --green-strong: #2F7A2A;
  --on-green: #12200F;
  --surface: #FFFFFF;
  --line: color-mix(in srgb,var(--ink) 12%,transparent);
  --muted: color-mix(in srgb,var(--ink) 68%,var(--ground));
  --green-wash: color-mix(in srgb,var(--green) 14%,var(--ground));
  --plum-wash: color-mix(in srgb,var(--plum) 9%,var(--ground));
  --font-display: "Bricolage Grotesque","Avenir Next","Segoe UI",sans-serif;
  --font-body: "Figtree","Segoe UI",system-ui,sans-serif;
  --font-mono: "JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --step--1: .85rem;
  --step-0: 1rem;
  --step-1: 1.2rem;
  --step-2: 1.55rem;
  --step-3: 2.2rem;
  --step-4: clamp(2.6rem,6.4vw,4.6rem);
  --radius: 14px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #18221C;
    --ink: #E4EBE2;
    --green: #6CCB5F;
    --plum: #BBA2E3;
    --green-strong: #6CCB5F;
    --on-green: #12200F;
    --surface: #1F2B24;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --ground: #18221C;
  --ink: #E4EBE2;
  --green: #6CCB5F;
  --plum: #BBA2E3;
  --green-strong: #6CCB5F;
  --on-green: #12200F;
  --surface: #1F2B24;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none!important;
}

html {
  scroll-behavior: smooth;
}

html, body {
  overflow-x: clip;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    transition: none!important;
    animation: none!important;
  }
  .card:hover {
    transform: none;
  }
}

body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  transition: background .25s,color .25s;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--plum);
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding-inline: clamp(16px,4vw,40px);
}

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1.08;
  text-wrap: balance;
  margin: 0;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: .06em;
  color: var(--plum);
  margin: 0 0 .6rem;
}

section {
  padding-block: clamp(56px,9vw,104px);
  border-top: 1px solid var(--line);
}

section h2 {
  font-size: var(--step-3);
  margin-bottom: 1.6rem;
  max-width: 22ch;
}

/* nav */
header.top {
  position: relative;
  z-index: 10;
  background: color-mix(in srgb,var(--ground) 86%,transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.nav {
  display: flex;
  align-items: center;
  gap: .8rem;
  height: 64px;
}

.nav-spacer {
  margin-left: auto;
}

.jump-hint {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  height: 40px;
  padding: 0 .5rem 0 .9rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font: 500 .88rem var(--font-body);
  cursor: pointer;
  transition: border-color .2s,color .2s;
}

.jump-hint:hover {
  border-color: var(--green);
  color: var(--ink);
}

.jump-hint kbd, .pal kbd {
  font: 500 .72rem var(--font-mono);
  padding: .15rem .4rem;
  border-radius: 6px;
  background: var(--green-wash);
  color: var(--ink);
  border: 1px solid var(--line);
}

@media (max-width:520px) {
  .jump-hint span {
    display: none;
  }
}

.brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
}

.brand img {
  height: 30px;
  width: auto;
}

.nav-links {
  display: flex;
  gap: 1.4rem;
  margin-left: auto;
  font-size: .95rem;
}

.nav-links a {
  text-decoration: none;
  color: var(--muted);
}

.nav-links a:hover {
  color: var(--ink);
}

.theme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}

.theme svg {
  width: 18px;
  height: 18px;
}

.theme .sun, .dock-theme .sun {
  display: none;
}

:root[data-theme="dark"] .theme .sun, :root[data-theme="dark"] .dock-theme .sun {
  display: block;
}

:root[data-theme="dark"] .theme .moon, :root[data-theme="dark"] .dock-theme .moon {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme .sun, :root:not([data-theme="light"]) .dock-theme .sun {
    display: block;
  }
  :root:not([data-theme="light"]) .theme .moon, :root:not([data-theme="light"]) .dock-theme .moon {
    display: none;
  }
}

@media (max-width:720px) {
  .nav-links {
    display: none;
  }
  .nav .btn-sm {
    margin-left: auto;
  }
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .8rem 1.25rem;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  font: 600 .98rem var(--font-body);
  transition: transform .15s,background .2s;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-primary {
  background: var(--green);
  color: var(--on-green);
}

.btn-ghost {
  border-color: var(--line);
  background: var(--surface);
  color: var(--ink);
}

.btn-sm {
  padding: .5rem .95rem;
  font-size: .9rem;
}

.btn svg {
  width: 16px;
  height: 16px;
}

/* hero */
.hero {
  padding-block: clamp(48px,8vw,96px) clamp(56px,8vw,88px);
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(28px,5vw,64px);
  align-items: center;
}

.hero > * {
  min-width: 0;
}

.hero h1 {
  font-size: var(--step-4);
  font-weight: 800;
  letter-spacing: -.025em;
}

.hero h1 .last {
  color: var(--green-strong);
}

.role {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--muted);
  margin: 1.1rem 0 1.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .9rem;
}

.role span::before {
  content: "▸ ";
  color: var(--green);
}

.lede {
  font-size: var(--step-1);
  max-width: 46ch;
  margin: 0 0 1.8rem;
  color: var(--muted);
}

.lede strong {
  color: var(--ink);
  font-weight: 600;
}

.ctas {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  color: var(--muted);
  margin-bottom: 1.2rem;
}

.status i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px var(--green-wash);
}

.side {
  display: grid;
  gap: 1.1rem;
  justify-items: center;
}

.portrait {
  position: relative;
  width: min(100%,340px);
  aspect-ratio: 4/5;
  transform: rotate(2deg);
}

.portrait .frame {
  position: absolute;
  inset: 0;
  border-radius: 24px;
  overflow: hidden;
  background: var(--green-wash);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
}

.portrait .frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-slot {
  display: grid;
  justify-items: center;
  gap: .7rem;
  padding: 1rem;
  text-align: center;
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--muted);
}

.photo-slot img {
  width: 96px;
  height: auto;
  object-fit: contain;
  opacity: .55;
}

.sticker {
  position: absolute;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .9rem;
  padding: .45rem .8rem;
  border-radius: 999px;
  box-shadow: 0 6px 18px color-mix(in srgb,var(--ink) 14%,transparent);
  white-space: nowrap;
}

.sticker.s1 {
  left: -14px;
  top: 18%;
  background: var(--plum);
  color: var(--ground);
  transform: rotate(-8deg);
}

.sticker.s2 {
  right: -10px;
  bottom: 12%;
  background: var(--green);
  color: var(--on-green);
  transform: rotate(6deg);
}

@media (prefers-reduced-motion: no-preference) {
  .sticker {
    animation: bob 4s ease-in-out infinite;
  }
  .sticker.s2 {
    animation-delay: -2s;
  }
}

@keyframes bob {
  50% {
    translate: 0 -5px;
  }
}

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 1.4rem;
  position: relative;
  overflow: hidden;
  width: min(100%,400px);
}

.panel h3 {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--step--1);
  color: var(--muted);
  margin-bottom: 1rem;
}

.stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem 1rem;
  position: relative;
}

.stat b {
  display: block;
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.stat span {
  font-size: .88rem;
  color: var(--muted);
}

.clients {
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px dashed var(--line);
  font-size: .9rem;
  color: var(--muted);
  position: relative;
}

.clients b {
  color: var(--ink);
  font-weight: 600;
}

@media (max-width:860px) {
  .hero {
    grid-template-columns: 1fr;
  }
}

/* about */
.about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px,5vw,64px);
}

.about > * {
  min-width: 0;
}

.about p {
  margin: 0 0 1rem;
  max-width: 60ch;
}

.facts {
  display: grid;
  gap: .9rem;
  align-content: start;
}

.fact {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 1rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--line);
}

.fact dt {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--muted);
}

.fact dd {
  margin: 0;
}

@media (max-width:760px) {
  .about {
    grid-template-columns: 1fr;
  }
  .fact {
    grid-template-columns: 96px 1fr;
  }
}

/* experience as release notes */
.releases {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}

.release {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: clamp(16px,4vw,48px);
  padding-block: 1.6rem;
  border-top: 1px solid var(--line);
}

.release:first-child {
  border-top: 0;
  padding-top: 0;
}

.release > * {
  min-width: 0;
}

.when {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--muted);
}

.when .loc {
  display: block;
  font-size: .76rem;
  opacity: .85;
  margin-top: .2rem;
}

.when .tag {
  display: inline-block;
  margin-top: .4rem;
  padding: .12rem .55rem;
  border-radius: 6px;
  background: var(--green-wash);
  color: var(--green-strong);
  font-size: .78rem;
}

.release h3 {
  font-size: var(--step-2);
  font-weight: 700;
}

.release .co {
  color: var(--muted);
  margin: .25rem 0 .8rem;
}

.release .co b {
  color: var(--ink);
  font-weight: 600;
}

.release ul {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: .35rem;
  max-width: 68ch;
}

.release li::marker {
  color: var(--green);
}

.todo {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .8rem;
  padding: .2rem .55rem;
  border-radius: 6px;
  border: 1px dashed var(--plum);
  color: var(--plum);
}

@media (max-width:700px) {
  .release {
    grid-template-columns: 1fr;
    gap: .5rem;
  }
}

.early {
  margin-top: 1rem;
  color: var(--muted);
  font-size: .95rem;
}

/* skills as gradle file */
.skills {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(24px,5vw,56px);
  align-items: start;
}

.skills > * {
  min-width: 0;
}

.gradle {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow-x: auto;
}

.gradle .tab {
  font-family: var(--font-mono);
  font-size: .8rem;
  color: var(--muted);
  padding: .65rem 1rem;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: .5rem;
  align-items: center;
}

.gradle .tab i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--green);
}

.gradle pre {
  margin: 0;
  padding: 1.1rem 1.2rem;
  font-family: var(--font-mono);
  font-size: .86rem;
  line-height: 1.75;
}

.k {
  color: var(--plum);
}

.s {
  color: var(--green-strong);
}

.c {
  color: var(--muted);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1rem;
}

.chip {
  padding: .35rem .8rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: .9rem;
  background: var(--surface);
}

.skillgroups {
  display: grid;
  gap: 1.4rem;
}

.skillgroups h3 {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--muted);
}

@media (max-width:820px) {
  .skills {
    grid-template-columns: 1fr;
  }
}

/* work */
.work {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 1.2rem;
}

.card {
  --mx: 50%;
  --my: 0%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  box-shadow: 0 1px 0 var(--line),0 6px 18px color-mix(in srgb,var(--ink) 6%,transparent);
  transition: transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s;
}

/* green bar sweeps in from the left, same motion as the social buttons */
.card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 4px;
  width: 100%;
  background: linear-gradient(90deg,var(--green),var(--plum));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s cubic-bezier(.65,0,.35,1);
}

/* soft glow that follows the cursor */
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(320px circle at var(--mx) var(--my),color-mix(in srgb,var(--green) 14%,transparent),transparent 70%);
  opacity: 0;
  transition: opacity .35s;
}

.card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb,var(--green) 45%,var(--line));
  box-shadow: 0 1px 0 var(--line),0 22px 44px color-mix(in srgb,var(--ink) 14%,transparent);
}

.card:hover::before {
  transform: scaleX(1);
}

.card:hover::after {
  opacity: 1;
}

.card-top {
  display: flex;
  align-items: center;
  gap: .8rem;
}

.tile {
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 13px;
  display: grid;
  place-items: center;
  font: 800 1.05rem var(--font-display);
  letter-spacing: -.02em;
  transition: transform .45s cubic-bezier(.34,1.56,.64,1);
}

.tile.g {
  background: var(--green);
  color: var(--on-green);
}

.tile.p {
  background: var(--plum);
  color: var(--ground);
}

.card:hover .tile {
  transform: rotate(-10deg) scale(1.1);
}

.meta {
  display: grid;
  line-height: 1.3;
  min-width: 0;
}

.card .domain {
  font-family: var(--font-mono);
  font-size: .76rem;
  color: var(--plum);
}

.card .period {
  font-family: var(--font-mono);
  font-size: .76rem;
  color: var(--muted);
}

.card h3 {
  font-size: var(--step-2);
  font-weight: 700;
}

.card p {
  margin: 0;
  color: var(--muted);
}

.card .stack {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: auto;
  padding-top: .4rem;
}

.card .stack span {
  font-family: var(--font-mono);
  font-size: .72rem;
  padding: .2rem .55rem;
  border-radius: 6px;
  background: var(--green-wash);
  color: var(--ink);
  transition: transform .3s;
}

.card:hover .stack span {
  transform: translateY(-2px);
}

.card:hover .stack span:nth-child(2) {
  transition-delay: .04s;
}

.card:hover .stack span:nth-child(3) {
  transition-delay: .08s;
}

.card:hover .stack span:nth-child(4) {
  transition-delay: .12s;
}

.card .links {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem 1.2rem;
  padding-top: .6rem;
  border-top: 1px dashed var(--line);
}

.card .store {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-weight: 600;
  color: var(--green-strong);
  text-decoration: none;
}

.card .store .arr {
  display: inline-block;
  transition: transform .3s;
}

.card .store:hover .arr, .card:hover .store .arr {
  transform: translateX(4px);
}

.card .store:hover {
  text-decoration: underline;
}

.card.featured {
  background: linear-gradient(160deg,var(--green-wash),var(--surface) 60%);
}

@media (max-width:700px) {
  .work {
    grid-template-columns: 1fr;
  }
}

/* venture */
.venture {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(24px,5vw,56px);
  align-items: center;
  background: var(--plum-wash);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: clamp(24px,5vw,48px);
}

.venture > * {
  min-width: 0;
}

.venture h2 {
  margin-bottom: 1rem;
}

.venture p {
  max-width: 52ch;
  margin: 0 0 1.2rem;
  color: var(--muted);
}

.reel {
  --t-bg: #141B17;
  --t-fg: #F4F7F2;
  --t-plum: #7A4AA3;
  --t-green: #55BA47;
  aspect-ratio: 9/14;
  max-width: 280px;
  width: 100%;
  justify-self: center;
  border-radius: 22px;
  background: var(--t-bg);
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: var(--t-fg);
  display: block;
  transform: rotate(-2deg);
  transition: transform .3s;
  box-shadow: 0 18px 40px color-mix(in srgb,var(--ink) 22%,transparent);
}

.reel:hover {
  transform: rotate(0) scale(1.02);
}

.reel .thumb-img {
  transition: transform .6s;
}

.reel:hover .thumb-img {
  transform: scale(1.05);
}

.thumb-art, .thumb-img {
  object-position: top;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.thumb-art {
  background: radial-gradient(120% 80% at 80% 10%,color-mix(in srgb,var(--t-plum) 80%,var(--t-bg)),transparent 60%),radial-gradient(90% 70% at 0% 100%,color-mix(in srgb,var(--t-green) 45%,var(--t-bg)),transparent 65%),var(--t-bg);
  overflow: hidden;
}

.thumb-art .big {
  position: absolute;
  left: -.06em;
  top: -.12em;
  font: 800 clamp(9rem,26vw,12.5rem)/1 var(--font-display);
  letter-spacing: -.06em;
  color: transparent;
  -webkit-text-stroke: 2px color-mix(in srgb,var(--t-fg) 70%,transparent);
}

.thumb-art .laws {
  position: absolute;
  right: 1rem;
  top: 42%;
  font: 800 1.5rem/1 var(--font-display);
  text-align: right;
  color: var(--t-fg);
  letter-spacing: .02em;
}

.reel .ep-tag {
  position: absolute;
  position: absolute;
  left: 1rem;
  top: 1rem;
  font: 500 .72rem var(--font-mono);
  background: var(--t-green);
  color: #12200F;
  padding: .25rem .5rem;
  border-radius: 6px;
}

.reel .play {
  position: absolute;
  top: 63%;
  left: 50%;
  translate: -50% -50%;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--t-fg);
  display: grid;
  place-items: center;
  transition: transform .25s;
}

.reel:hover .play {
  transform: scale(1.12);
}

.reel .play svg {
  width: 20px;
  height: 20px;
  fill: var(--t-bg);
  margin-left: 3px;
}

.reel .cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2.4rem 1.1rem 1.1rem;
  background: linear-gradient(transparent,color-mix(in srgb,#000 70%,transparent));
  display: grid;
  gap: .25rem;
}

.reel small {
  font-family: var(--font-mono);
  font-size: .7rem;
  opacity: .8;
  color: #fff;
}

.reel strong {
  font-family: var(--font-display);
  font-size: 1.12rem;
  line-height: 1.2;
  color: #fff;
}

/* social buttons: brand color sweeps in from the left, label grows to "Watch on YouTube" */
.social-ctas {
  gap: .6rem;
}

.sbtn {
  --brand: var(--plum);
  --on-brand: #fff;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  padding: .75rem 1.15rem;
  border-radius: 999px;
  border: 1.5px solid color-mix(in srgb,var(--brand) 60%,var(--line));
  background: var(--surface);
  color: var(--ink);
  font: 600 .95rem var(--font-body);
  text-decoration: none;
  white-space: nowrap;
  transition: color .35s ease,border-color .35s,transform .2s;
}

.sbtn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s cubic-bezier(.65,0,.35,1);
}

.sbtn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  margin-right: .5rem;
  flex: none;
  transition: transform .35s;
}

.sbtn .roll {
  display: inline-grid;
  overflow: hidden;
  line-height: 1.3;
}

.sbtn .roll>span {
  grid-area: 1/1;
  text-align: center;
  transition: transform .4s cubic-bezier(.65,0,.35,1),opacity .3s;
}

.sbtn .r2 {
  transform: translateY(105%);
  opacity: 0;
}

.sbtn:hover, .sbtn:focus-visible {
  color: var(--on-brand);
  border-color: var(--brand);
  transform: translateY(-2px);
}

.sbtn:hover::before, .sbtn:focus-visible::before {
  transform: scaleX(1);
}

.sbtn:hover .r1, .sbtn:focus-visible .r1 {
  transform: translateY(-105%);
  opacity: 0;
}

.sbtn:hover .r2, .sbtn:focus-visible .r2 {
  transform: none;
  opacity: 1;
}

.sbtn:hover svg, .sbtn:focus-visible svg {
  transform: rotate(-8deg) scale(1.1);
}

.sbtn.yt {
  --brand: #E62117;
}

.sbtn.tt {
  --brand: #111418;
  --on-brand: #fff;
}

.sbtn.fb {
  --brand: #1877F2;
}

:root[data-theme="dark"] .sbtn.tt {
  --brand: #25F4EE;
  --on-brand: #111418;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sbtn.tt {
    --brand: #25F4EE;
    --on-brand: #111418;
  }
}

@media (hover:none) {
  .sbtn .r1 {
    transform: translateY(-105%);
    opacity: 0;
  }
  .sbtn .r2 {
    transform: none;
    opacity: 1;
  }
}

.soon {
  font-family: var(--font-mono);
  font-size: .8rem;
  color: var(--muted);
}

@media (max-width:760px) {
  .venture {
    grid-template-columns: 1fr;
  }
  .reel {
    max-width: 240px;
  }
}

/* contact */
.contact {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(24px,5vw,56px);
  align-items: start;
}

.contact > * {
  min-width: 0;
}

.email {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-display);
  font-size: clamp(1.3rem,3.4vw,2rem);
  font-weight: 700;
  word-break: break-all;
}

.copy {
  font: 500 .82rem var(--font-mono);
  padding: .35rem .7rem;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}

.socials {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}

.socials a {
  --brand: var(--green-strong);
  --tint: var(--green-wash);
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: 1rem .8rem;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  border-radius: 12px;
  transition: color .3s;
}

/* brand tint sweeps in from the left, icon + name take the platform colour */
.socials a::before {
  content: "";
  position: absolute;
  inset: 2px 0;
  z-index: -1;
  border-radius: 12px;
  background: var(--tint);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s cubic-bezier(.65,0,.35,1);
}

.socials a:hover::before, .socials a:focus-visible::before {
  transform: scaleX(1);
}

.socials a svg, .socials a .name {
  transition: color .3s,transform .35s cubic-bezier(.34,1.56,.64,1);
}

.socials a:hover svg, .socials a:focus-visible svg {
  color: var(--brand);
  transform: scale(1.2) rotate(-6deg);
}

.socials a:hover .name, .socials a:focus-visible .name {
  color: var(--brand);
}

.socials a:hover .handle {
  color: var(--ink);
}

.socials .s-li {
  --brand: #0A66C2;
  --tint: color-mix(in srgb,#0A66C2 12%,transparent);
}

.socials .s-gh {
  --brand: #24292F;
  --tint: color-mix(in srgb,#24292F 10%,transparent);
}

.socials .s-x {
  --brand: #0F1419;
  --tint: color-mix(in srgb,#0F1419 9%,transparent);
}

.socials .s-fb {
  --brand: #1877F2;
  --tint: color-mix(in srgb,#1877F2 12%,transparent);
}

.socials .s-ig {
  --brand: #E1306C;
  --tint: linear-gradient(90deg,color-mix(in srgb,#F58529 14%,transparent),color-mix(in srgb,#DD2A7B 14%,transparent),color-mix(in srgb,#8134AF 14%,transparent));
}

:root[data-theme="dark"] .socials .s-li {
  --brand: #70B5F9;
}

:root[data-theme="dark"] .socials .s-gh {
  --brand: #F0F6FC;
  --tint: color-mix(in srgb,#F0F6FC 9%,transparent);
}

:root[data-theme="dark"] .socials .s-x {
  --brand: #FFFFFF;
  --tint: color-mix(in srgb,#fff 9%,transparent);
}

:root[data-theme="dark"] .socials .s-fb {
  --brand: #4599FF;
}

:root[data-theme="dark"] .socials .s-ig {
  --brand: #FF5C93;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .socials .s-li {
    --brand: #70B5F9;
  }
  :root:not([data-theme="light"]) .socials .s-gh {
    --brand: #F0F6FC;
    --tint: color-mix(in srgb,#F0F6FC 9%,transparent);
  }
  :root:not([data-theme="light"]) .socials .s-x {
    --brand: #FFFFFF;
    --tint: color-mix(in srgb,#fff 9%,transparent);
  }
  :root:not([data-theme="light"]) .socials .s-fb {
    --brand: #4599FF;
  }
  :root:not([data-theme="light"]) .socials .s-ig {
    --brand: #FF5C93;
  }
}

.socials svg {
  width: 20px;
  height: 20px;
  flex: none;
  fill: currentColor;
}

.socials .name {
  font-weight: 600;
}

.socials .handle {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: .8rem;
  color: var(--muted);
  text-align: right;
  overflow-wrap: anywhere;
}

.foot-build .ok {
  font-family: var(--font-mono);
  font-size: .8rem;
  color: var(--green-strong);
}

footer {
  padding-block: 2rem 2.6rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .88rem;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.4rem;
  justify-content: space-between;
}

/* off the clock photos */
.snaps {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: clamp(14px,3vw,28px);
  margin-top: .6rem;
}

.snap {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: .7rem .7rem 1rem;
  box-shadow: 0 10px 24px color-mix(in srgb,var(--ink) 8%,transparent);
  transition: transform .25s;
}

.snap:nth-child(1) {
  transform: rotate(-2.5deg);
}

.snap:nth-child(2) {
  transform: rotate(1.5deg) translateY(10px);
}

.snap:nth-child(3) {
  transform: rotate(-1deg);
}

.snap:nth-child(4) {
  transform: rotate(2deg) translateY(6px);
}

.snap:hover {
  transform: rotate(0) scale(1.02);
}

.snap .ph {
  aspect-ratio: 1;
  border-radius: 10px;
  background: var(--green-wash);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.snap .ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.snap figcaption {
  margin-top: .7rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
}

.snap figcaption small {
  display: block;
  font: 400 .82rem var(--font-body);
  color: var(--muted);
  margin-top: .15rem;
}

@media (max-width:860px) {
  .snaps {
    grid-template-columns: 1fr 1fr;
  }
}

.release .store {
  display: inline-block;
  margin-top: .9rem;
  font-weight: 600;
  color: var(--green-strong);
}

/* recommendations */
.quotes {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1.2rem;
}

.quote {
  margin: 0;
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 1.5rem 1.5rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: .8rem;
  transition: transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s;
}

.quote:nth-child(2) {
  transform: translateY(14px);
}

.quote:hover {
  transform: translateY(-6px) rotate(-.6deg);
  border-color: color-mix(in srgb,var(--plum) 40%,var(--line));
  box-shadow: 0 22px 44px color-mix(in srgb,var(--ink) 12%,transparent);
}

.qmark {
  position: absolute;
  right: .9rem;
  top: -1.6rem;
  font: 800 7rem/1 var(--font-display);
  color: var(--plum);
  opacity: .14;
  transition: transform .45s cubic-bezier(.34,1.56,.64,1),opacity .35s;
}

.quote:hover .qmark {
  transform: translateY(8px) rotate(-8deg);
  opacity: .3;
}

.pull {
  margin: 0;
  font: 700 var(--step-1)/1.25 var(--font-display);
  color: var(--ink);
  text-wrap: balance;
}

.quote blockquote {
  margin: 0;
  color: var(--muted);
  font-size: .95rem;
}

.quote figcaption {
  margin-top: auto;
  padding-top: .9rem;
  border-top: 1px dashed var(--line);
  display: flex;
  gap: .75rem;
  align-items: center;
}

.quote figcaption b {
  display: block;
  font-weight: 600;
}

.quote figcaption small {
  display: block;
  font-size: .8rem;
  color: var(--muted);
  line-height: 1.35;
}

.quote figcaption .rel {
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--plum);
  margin-top: .15rem;
}

.avatar {
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 700 .85rem var(--font-display);
}

.avatar.g {
  background: var(--green);
  color: var(--on-green);
}

.avatar.p {
  background: var(--plum);
  color: var(--ground);
}

.more-recs {
  display: inline-flex;
  gap: .35rem;
  margin-top: 2.2rem;
  font-weight: 600;
  color: var(--green-strong);
  text-decoration: none;
}

.more-recs .arr {
  transition: transform .3s;
}

.more-recs:hover .arr {
  transform: translateX(4px);
}

@media (max-width:900px) {
  .quotes {
    grid-template-columns: 1fr;
  }
  .quote:nth-child(2) {
    transform: none;
  }
}

/* then: two overlapping polaroids that fan out on hover */
.about-side {
  display: grid;
  gap: 2rem;
  align-content: start;
  min-width: 0;
}

.then {
  position: relative;
  height: 290px;
  max-width: 440px;
  width: 100%;
  justify-self: center;
}

.pol {
  position: absolute;
  margin: 0;
  width: 62%;
  background: #fff;
  padding: .55rem .55rem .4rem;
  border-radius: 6px;
  box-shadow: 0 12px 28px color-mix(in srgb,var(--ink) 18%,transparent);
  transition: transform .45s cubic-bezier(.34,1.56,.64,1);
}

.pol img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 3px;
}

.pol figcaption {
  font: 500 .74rem var(--font-mono);
  color: #3a453e;
  padding-top: .4rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pol.p1 {
  left: 0;
  top: 10px;
  transform: rotate(-6deg);
  z-index: 1;
}

.pol.p2 {
  right: 0;
  top: 44px;
  transform: rotate(5deg);
  z-index: 2;
}

.then:hover .p1 {
  transform: rotate(-9deg) translate(-14px,-8px);
}

.then:hover .p2 {
  transform: rotate(8deg) translate(14px,6px);
}

.then-tag {
  position: absolute;
  right: -.2rem;
  top: -.4rem;
  z-index: 3;
  font: 700 .85rem var(--font-display);
  background: var(--plum);
  color: var(--ground);
  padding: .3rem .7rem;
  border-radius: 999px;
  transform: rotate(8deg);
}

.portrait .frame img {
  object-position: center 20%;
}

.snap .ph img, .portrait .frame img {
  height: 100%;
}

@media (max-width:480px) {
  .then {
    height: 240px;
  }
  .pol figcaption {
    font-size: .66rem;
  }
}

/* toolkit animation: chips pop in one by one, gradle "builds" when the section scrolls into view */
.chip {
  transition: transform .25s cubic-bezier(.34,1.56,.64,1),border-color .25s,background .25s,color .25s;
  cursor: default;
}

.chip:hover {
  transform: translateY(-3px) rotate(-2deg);
  border-color: var(--green);
  background: var(--green-wash);
}

@keyframes chipPop {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(.7);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

.skills.play .chip {
  animation: chipPop .55s cubic-bezier(.34,1.56,.64,1) both;
  animation-delay: calc(var(--i,0) * 45ms);
}

.gradle pre .ln {
  display: block;
}

@keyframes lineIn {
  0% {
    opacity: 0;
    transform: translateX(-10px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

.skills.play .gradle pre .ln {
  animation: lineIn .35s ease-out both;
  animation-delay: calc(var(--l,0) * 40ms);
}

.build {
  border-top: 1px solid var(--line);
  padding: .8rem 1.2rem 1rem;
  font-family: var(--font-mono);
  font-size: .8rem;
  display: grid;
  gap: .5rem;
}

.build .prompt {
  color: var(--plum);
  margin-right: .4rem;
}

.build .bar {
  height: 6px;
  border-radius: 999px;
  background: var(--green-wash);
  overflow: hidden;
}

.build .bar i {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg,var(--green),var(--plum));
}

.build .ok {
  color: var(--green-strong);
  font-weight: 500;
}

.cursor {
  display: inline-block;
  width: .55em;
  height: 1em;
  vertical-align: -2px;
  background: var(--green-strong);
  animation: blink 1s steps(1) infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

@keyframes fillBar {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

@keyframes okIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.skills.play .build .bar i {
  animation: fillBar 1.8s cubic-bezier(.4,0,.2,1) .9s both;
}

.skills.play .build .ok {
  animation: okIn .3s ease-out 2.75s both;
}

/* travel map */
.travel {
  margin-top: clamp(48px,7vw,80px);
}

.travel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  margin-bottom: 1.2rem;
}

.travel-head h3 {
  font-size: var(--step-2);
  font-weight: 700;
}

.travel-dream {
  margin: .35rem 0 0;
  font: 500 1rem var(--font-body);
  color: var(--muted);
}

.travel-dream::before {
  content: "✈ ";
  color: var(--green-strong);
}

.travel-count {
  margin: 0;
  font-family: var(--font-mono);
  font-size: .85rem;
  color: var(--muted);
}

.travel-count b {
  font: 800 1.3rem var(--font-display);
  color: var(--green-strong);
  font-variant-numeric: tabular-nums;
}

.travel-count span {
  color: var(--line);
  margin: 0 .2rem;
}

.maps {
  display: grid;
  grid-template-columns: 2.1fr 1fr;
  gap: 1.2rem;
  align-items: start;
}

.map-card {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 1rem 1rem .8rem;
  min-width: 0;
}

.map-card figcaption {
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--plum);
  margin-bottom: .4rem;
}

.map-box {
  position: relative;
}

.map-box svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.st {
  fill: color-mix(in srgb,var(--ink) 9%,var(--surface));
  stroke: var(--surface);
  stroke-width: 1;
  transition: fill .25s;
}

.st.v {
  fill: color-mix(in srgb,var(--green) 34%,var(--surface));
}

.st.v:hover {
  fill: color-mix(in srgb,var(--green) 52%,var(--surface));
}

.pin {
  cursor: pointer;
  outline: none;
}

.pin .dot {
  transform-box: fill-box;
  transform-origin: center;
  fill: var(--plum);
  stroke: var(--surface);
  stroke-width: 1.5;
  transition: transform .2s;
}

.pin.home .dot {
  fill: var(--green-strong);
}

.pin .ring {
  transform-box: fill-box;
  transform-origin: center;
  fill: none;
  stroke: var(--plum);
  stroke-width: 1.5;
  opacity: 0;
}

.pin.home .ring {
  stroke: var(--green-strong);
  opacity: .6;
  animation: pulse 2.4s ease-out infinite;
}

.pin:hover .dot, .pin:focus-visible .dot {
  transform: scale(1.5);
}

.pin:focus-visible .ring {
  opacity: 1;
}

@keyframes pulse {
  0% {
    transform: scale(.6);
    opacity: .7;
  }
  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

@keyframes pinDrop {
  0% {
    transform: translateY(-26px);
    opacity: 0;
  }
  60% {
    transform: translateY(2px);
    opacity: 1;
  }
  100% {
    transform: none;
    opacity: 1;
  }
}

.travel.play .pin .dot {
  animation: pinDrop .5s cubic-bezier(.34,1.56,.64,1) both;
  animation-delay: calc(var(--d) * 70ms);
}

.map-tip {
  position: absolute;
  transform: translate(-50%,calc(-100% - 12px));
  background: var(--ink);
  color: var(--ground);
  font-size: .8rem;
  font-weight: 600;
  padding: .35rem .6rem;
  border-radius: 8px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
}

.map-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem 1rem;
  margin: .9rem 0 0;
  font-size: .82rem;
  color: var(--muted);
}

.lg {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  margin-right: -.6rem;
  vertical-align: middle;
}

.lg.v {
  background: color-mix(in srgb,var(--green) 34%,var(--surface));
}

.lg.home {
  border-radius: 50%;
  background: var(--green-strong);
}

.lg.pin {
  border-radius: 50%;
  background: var(--plum);
  width: 9px;
  height: 9px;
}

@media (max-width:860px) {
  .maps {
    grid-template-columns: 1fr;
  }
  .maps .map-card:last-child {
    max-width: 420px;
    width: 100%;
    justify-self: center;
  }
}

/* hero call-to-action buttons: the two most important clicks on the page */
.hero-ctas {
  gap: .85rem;
}

.cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: 1rem 1.5rem;
  border-radius: 999px;
  font: 700 1.05rem var(--font-body);
  text-decoration: none;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .3s,color .35s,border-color .35s;
}

.cta svg {
  width: 20px;
  height: 20px;
  flex: none;
}

.cta small {
  font: 600 .7rem var(--font-mono);
  padding: .15rem .4rem;
  border-radius: 5px;
  background: color-mix(in srgb,var(--on-green) 14%,transparent);
}

/* resume: solid green, glowing halo, shimmer every few seconds, bobbing arrow */
.cta-resume {
  background: var(--green);
  color: var(--on-green);
  box-shadow: 0 8px 24px color-mix(in srgb,var(--green) 45%,transparent);
}

.cta-resume::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(110deg,transparent 30%,rgba(255,255,255,.4) 50%,transparent 70%);
  transform: translateX(-100%);
  pointer-events: none;
}

.cta-resume:hover::after {
  animation: shimmer .8s ease-out;
}

.cta-resume .arrow {
  animation: bob 2.4s ease-in-out infinite;
}

.cta-wrap {
  position: relative;
  display: inline-flex;
}

.cta-wrap::after {
  content: "";
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: -9px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg,var(--green),var(--plum));
  opacity: .75;
  animation: breathe 2.8s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% {
    transform: scaleX(.55);
    opacity: .45;
  }
  50% {
    transform: scaleX(1);
    opacity: .85;
  }
}

.cta-resume:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 14px 34px color-mix(in srgb,var(--green) 60%,transparent);
}

.cta-resume:hover .arrow {
  animation: drop .6s ease-in-out infinite;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

@keyframes bob {
  0%, 100% {
    transform: translateY(-1px);
  }
  50% {
    transform: translateY(2px);
  }
}

@keyframes drop {
  0% {
    transform: translateY(-6px);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  100% {
    transform: translateY(3px);
    opacity: 1;
  }
}

/* LinkedIn: outlined, fills with LinkedIn blue from the left on hover */
.cta-li {
  --li: #0A66C2;
  border: 2px solid var(--li);
  color: var(--li);
  background: var(--surface);
}

.cta-li::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--li);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s cubic-bezier(.65,0,.35,1);
}

.cta-li:hover, .cta-li:focus-visible {
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 12px 28px color-mix(in srgb,#0A66C2 35%,transparent);
}

.cta-li:hover::before, .cta-li:focus-visible::before {
  transform: scaleX(1);
}

.cta-li:hover svg {
  animation: wave .5s ease-in-out;
}

@keyframes wave {
  25% {
    transform: rotate(-12deg);
  }
  75% {
    transform: rotate(10deg);
  }
}

:root[data-theme="dark"] .cta-li {
  --li: #70B5F9;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cta-li {
    --li: #70B5F9;
  }
}

:root[data-theme="dark"] .cta-li:hover {
  color: #0B1A2B;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cta-li:hover {
    color: #0B1A2B;
  }
}

/* entrance: both buttons pop in after the headline */
@keyframes ctaIn {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(.92);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

.hero-ctas .cta {
  animation: ctaIn .6s cubic-bezier(.34,1.56,.64,1) both;
}

.hero-ctas .cta-li {
  animation-delay: .12s;
}

.cta-hint {
  margin: .8rem 0 0 .4rem;
  font-size: .85rem;
  color: var(--muted);
}

@media (max-width:480px) {
  .hero-ctas .cta, .hero-ctas .cta-wrap {
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cta-wrap::after, .cta-resume::after, .cta-resume::before, .cta-resume .arrow, .fc-resume .arrow {
    animation: none;
  }
}

/* ===== floating dock: section jumps, live progress, resume. Replaces a sticky top menu ===== */
main {
  padding-bottom: 96px;
}

.dock {
  position: fixed;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom,0px));
  z-index: 30;
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .45rem;
  border-radius: 22px;
  background: color-mix(in srgb,var(--surface) 72%,transparent);
  backdrop-filter: blur(18px) saturate(1.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  border: 1px solid color-mix(in srgb,var(--ink) 10%,transparent);
  box-shadow: 0 1px 0 color-mix(in srgb,#fff 40%,transparent) inset,0 18px 40px color-mix(in srgb,var(--ink) 18%,transparent);
  transform: translate(-50%,0);
  animation: dockIn .7s cubic-bezier(.34,1.56,.64,1) .5s backwards;
  transition: transform .45s cubic-bezier(.34,1.3,.64,1),opacity .3s;
}

@media (min-width:761px) {
  .dock.tucked {
    transform: translate(-50%,calc(100% + 28px));
    opacity: 0;
    pointer-events: none;
  }
}

@keyframes dockIn {
  0% {
    transform: translate(-50%,140%);
    opacity: 0;
  }
  100% {
    transform: translate(-50%,0);
    opacity: 1;
  }
}

.dock-progress {
  position: absolute;
  left: 18px;
  right: 18px;
  top: -1px;
  height: 2px;
  border-radius: 2px;
  overflow: hidden;
  pointer-events: none;
}

.dock-progress i {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: left;
  transform: scaleX(var(--p,0));
  background: linear-gradient(90deg,var(--green),var(--plum));
}

.dock-items {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: .2rem;
}

.dock-item {
  position: relative;
  z-index: 1;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: var(--muted);
  transition: scale .25s cubic-bezier(.34,1.56,.64,1),translate .25s cubic-bezier(.34,1.56,.64,1),color .25s;
  transform-origin: bottom center;
}

.dock-item svg {
  width: 21px;
  height: 21px;
}

/* macOS-style magnification with :has() — no JS */
.dock-item:hover {
  scale: 1.38;
  translate: 0 -6px;
  color: var(--ink);
}

.dock-item:hover + .dock-item, .dock-item:has(+ .dock-item:hover) {
  scale: 1.16;
  translate: 0 -3px;
}

.dock-item.active {
  color: var(--on-green);
}

.dock-item::after {
  content: attr(data-label);
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  translate: -50% 4px;
  white-space: nowrap;
  font: 600 .75rem var(--font-body);
  padding: .3rem .55rem;
  border-radius: 8px;
  background: var(--ink);
  color: var(--ground);
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s,translate .2s;
  scale: calc(1/1.38);
}

.dock-item:hover::after, .dock-item:focus-visible::after {
  opacity: 1;
  translate: -50% 0;
}

.dock-blob {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: var(--green);
  box-shadow: 0 6px 16px color-mix(in srgb,var(--green) 45%,transparent);
  transition: transform .45s cubic-bezier(.34,1.56,.64,1),opacity .3s;
  opacity: 0;
}

.dock-blob.on {
  opacity: 1;
}

.dock-sep {
  width: 1px;
  height: 26px;
  background: var(--line);
  margin: 0 .2rem;
}

.dock-btn {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background .2s,color .2s;
}

.dock-btn:hover {
  background: var(--green-wash);
  color: var(--ink);
}

.dock-btn svg {
  width: 20px;
  height: 20px;
}

.dock-resume {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  height: 42px;
  padding: 0 1rem;
  border-radius: 13px;
  background: var(--green);
  color: var(--on-green);
  font: 700 .9rem var(--font-body);
  text-decoration: none;
  transition: transform .2s;
}

.dock-resume svg {
  width: 17px;
  height: 17px;
}

.dock-resume .arrow {
  animation: bob 2.4s ease-in-out infinite;
}

.dock-resume:hover {
  transform: translateY(-2px);
}

.dock-now {
  display: none;
}

/* phones: the dock turns into a "now viewing" pill with a progress ring that opens the jump sheet */
@media (max-width:760px) {
  .dock {
    left: 16px;
    right: 16px;
    transform: none;
    animation-name: dockInM;
    justify-content: space-between;
  }
  @keyframes dockInM {
    0% {
      transform: translateY(140%);
      opacity: 0;
    }
    100% {
      transform: none;
      opacity: 1;
    }
  }
  .dock-items, .dock-sep, .dock-k {
    display: none;
  }
  .dock-now {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex: 1;
    min-width: 0;
    height: 42px;
    padding: 0 .6rem 0 .3rem;
    border: 0;
    border-radius: 13px;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    text-align: left;
  }
  .dock-now .ring {
    width: 32px;
    height: 32px;
    flex: none;
    rotate: -90deg;
  }
  .dock-now .ring circle {
    fill: none;
    stroke: var(--line);
    stroke-width: 3.5;
  }
  .dock-now .ring .ring-fg {
    stroke: var(--green);
    stroke-linecap: round;
    stroke-dasharray: 94.25;
    stroke-dashoffset: calc(94.25 * (1 - var(--p,0)));
  }
  .now-txt {
    display: grid;
    line-height: 1.15;
    min-width: 0;
  }
  .now-txt small {
    font: 500 .66rem var(--font-mono);
    color: var(--muted);
  }
  .now-txt b {
    font: 700 .95rem var(--font-display);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .dock-now .chev {
    width: 18px;
    height: 18px;
    margin-left: auto;
    color: var(--muted);
  }
}

/* ===== jump panel (⌘K) ===== */
.pal-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 16px;
  background: color-mix(in srgb,var(--ink) 35%,transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fadeIn .2s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.pal {
  width: min(560px,100%);
  max-height: min(640px,calc(100% - 32px));
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 30px 80px color-mix(in srgb,var(--ink) 35%,transparent);
  overflow: hidden;
  animation: palIn .35s cubic-bezier(.34,1.56,.64,1);
}

@keyframes palIn {
  from {
    opacity: 0;
    transform: translateY(16px) scale(.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.pal-search {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid var(--line);
}

.pal-search svg {
  width: 20px;
  height: 20px;
  color: var(--muted);
  flex: none;
}

.pal-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: 500 1.05rem var(--font-body);
}

.pal-list {
  list-style: none;
  margin: 0;
  padding: .5rem;
  overflow-y: auto;
}

.pal-item {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .7rem .8rem;
  border-radius: 14px;
  text-decoration: none;
  color: var(--ink);
  animation: itemIn .4s cubic-bezier(.2,.8,.2,1) both;
  animation-delay: calc(var(--n,0) * 30ms);
}

@keyframes itemIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.pal-item.sel {
  background: var(--green-wash);
}

.pal-item.sel .pal-ico {
  background: var(--green);
  color: var(--on-green);
}

.pal-item.here .pal-no::before {
  content: "you're here · ";
  color: var(--green-strong);
}

.pal-ico {
  width: 38px;
  height: 38px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: color-mix(in srgb,var(--ink) 6%,transparent);
  color: var(--ink);
  transition: background .2s,color .2s;
}

.pal-ico svg {
  width: 19px;
  height: 19px;
}

.pal-txt {
  display: grid;
  min-width: 0;
}

.pal-txt b {
  font-weight: 600;
}

.pal-txt small {
  color: var(--muted);
  font-size: .84rem;
}

.pal-no {
  margin-left: auto;
  font: 500 .75rem var(--font-mono);
  color: var(--muted);
  white-space: nowrap;
}

.pal-foot {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.2rem;
  padding: .7rem 1.1rem;
  border-top: 1px solid var(--line);
  font-size: .78rem;
  color: var(--muted);
}

.pal-foot kbd {
  margin-right: .2rem;
}

@media (max-width:760px) {
  .pal-overlay {
    place-items: end center;
    padding: 0;
  }
  .pal {
    width: 100%;
    border-radius: 22px 22px 0 0;
    max-height: 85%;
    animation-name: sheetIn;
    padding-bottom: env(safe-area-inset-bottom,0px);
  }
  .pal-foot {
    display: none;
  }
}

@keyframes sheetIn {
  from {
    transform: translateY(100%);
  }
  to {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dock, .pal, .pal-item, .pal-overlay {
    animation: none;
  }
  .dock-item {
    transition: none;
  }
}

/* ===== Android Studio-style "Launch succeeded" notification =====
   Fixed IDE colours (like the Darcula/New UI theme) so it looks the same in both site themes */
.run-again {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-left: .6rem;
  padding: .25rem .65rem;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--green-strong);
  font: 500 .78rem var(--font-mono);
  cursor: pointer;
  transition: background .2s,border-color .2s;
}

.run-again svg {
  width: 11px;
  height: 11px;
  fill: currentColor;
}

.run-again:hover {
  border-color: var(--green);
  background: var(--green-wash);
}

.ide-toast {
  --it-bg: #2B2D30;
  --it-line: #43454A;
  --it-fg: #DFE1E5;
  --it-dim: #9DA0A8;
  --it-green: #5FB865;
  --it-blue: #548AF7;
  position: fixed;
  right: clamp(12px,2.5vw,28px);
  bottom: calc(clamp(12px,2.5vw,28px) + env(safe-area-inset-bottom,0px));
  z-index: 35;
  width: min(360px,calc(100vw - 32px));
  background: var(--it-bg);
  color: var(--it-fg);
  border: 1px solid var(--it-line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.03) inset;
  font: 500 .86rem var(--font-body);
  animation: itIn .55s cubic-bezier(.34,1.56,.64,1) both;
}

.ide-toast.out {
  animation: itOut .35s ease-in both;
}

@keyframes itIn {
  from {
    opacity: 0;
    transform: translateY(24px) scale(.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes itOut {
  to {
    opacity: 0;
    transform: translateY(16px) scale(.97);
  }
}

.it-head {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .8rem .8rem .35rem 1rem;
}

.it-ico {
  position: relative;
  width: 22px;
  height: 22px;
  flex: none;
  display: grid;
  place-items: center;
}

.it-spin {
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,.15);
  border-top-color: var(--it-blue);
  animation: spin .8s linear infinite;
}

.it-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--it-green);
  padding: 4px;
  fill: none;
  stroke: #1E1F22;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transform: scale(.4);
}

.it-check path {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.it-title {
  flex: 1;
  font-weight: 600;
  font-size: .92rem;
}

.it-x {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--it-dim);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.it-x:hover {
  background: rgba(255,255,255,.08);
  color: var(--it-fg);
}

.it-body {
  display: grid;
  gap: .15rem;
  padding: .2rem 1rem .6rem 2.95rem;
}

.it-body code {
  font: 400 .76rem/1.55 var(--font-mono);
  color: var(--it-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.it-body .ok {
  color: var(--it-green);
  font-weight: 500;
}

.it-body .l2, .it-body .l3 {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .3s,transform .3s;
}

.it-body .l3 {
  color: var(--it-fg);
}

.it-meta {
  display: flex;
  justify-content: space-between;
  padding: .45rem 1rem .6rem 2.95rem;
  border-top: 1px solid var(--it-line);
  font: 400 .7rem var(--font-mono);
  color: var(--it-dim);
}

.it-tab {
  color: var(--it-green);
}

.it-bar {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: var(--it-green);
  transform-origin: left;
  transform: scaleX(0);
}

/* done state */
.ide-toast.done .it-spin {
  display: none;
}

.ide-toast.done .it-check {
  opacity: 1;
  transform: none;
  transition: opacity .2s,transform .45s cubic-bezier(.34,1.56,.64,1);
}

.ide-toast.done .it-check path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset .4s .15s ease-out;
}

.ide-toast.done .l2 {
  opacity: 1;
  transform: none;
}

.ide-toast.done .l3 {
  opacity: 1;
  transform: none;
  transition-delay: .35s;
}

.ide-toast.done .it-bar {
  animation: itBar 4s linear .4s both;
}

@keyframes itBar {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

@media (max-width:760px) {
  .ide-toast {
    bottom: calc(86px + env(safe-area-inset-bottom,0px));
    right: 16px;
    left: 16px;
    width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ide-toast, .ide-toast.out {
    animation: none;
  }
  .it-spin {
    animation: none;
  }
}

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(84px + env(safe-area-inset-bottom,0px));
  transform: translate(-50%,20px);
  opacity: 0;
  background: var(--ink);
  color: var(--ground);
  padding: .7rem 1.1rem;
  border-radius: 10px;
  font-size: .9rem;
  transition: .25s;
  pointer-events: none;
  max-width: calc(100% - 32px);
  z-index: 20;
}

.toast.show {
  opacity: 1;
  transform: translate(-50%,0);
}

/* placeholder size while a travel map SVG loads (keeps the layout from jumping) */
.map-svg {
  aspect-ratio: 960 / 600;
}
.maps .map-card:last-child .map-svg {
  aspect-ratio: 420 / 560;
}