:root {
  --bg: #0e0f13;
  --tile: #16171d;
  --tile-2: #1c1d24;
  --text: #a1a4b0;
  --strong: #f1f2f5;
  --faint: #6b6f7c;
  --line: rgba(255, 255, 255, 0.07);
  --red: #ff5d6c;
  --amber: #fbbf24;
  --blue: #60a5fa;
  --violet: #a78bfa;
  --green: #34d399;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --radius: 22px;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  color-scheme: dark;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
[id] { scroll-margin-top: 24px; }

body {
  margin: 0;
  min-height: 100dvh;
  color: var(--text);
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: center top;
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
::selection { background: rgba(255, 93, 108, 0.35); color: var(--strong); }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 8px; }

/* Color helpers: each sets --c, used by dots, buttons, stats */
.c-red { --c: var(--red); }
.c-amber { --c: var(--amber); }
.c-blue { --c: var(--blue); }
.c-violet { --c: var(--violet); }
.c-green { --c: var(--green); }

/* Grid */
.bento {
  max-width: 1180px;
  margin: 0 auto;
  position: relative; z-index: 1;
  padding: 40px 16px calc(40px + env(safe-area-inset-bottom));
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
  grid-template-areas:
    "intro" "now" "exp" "plabel" "p1" "p2" "p3" "p4" "stack" "contact";
}
@media (min-width: 720px) {
  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "intro intro"
      "now   contact"
      "exp   exp"
      "plabel plabel"
      "p1    p2"
      "p3    p4"
      "stack stack";
  }
}
@media (min-width: 1080px) {
  .bento {
    padding-top: 64px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-areas:
      "intro intro now     now"
      "intro intro contact contact"
      "exp   exp   stack   stack"
      "plabel plabel plabel plabel"
      "p1    p2    p3      p4";
  }
}
.t-intro { grid-area: intro; }
.t-now { grid-area: now; }
.t-stack { grid-area: stack; }
.t-exp { grid-area: exp; }
.t-contact { grid-area: contact; }
.row-label { grid-area: plabel; }
.p-ids { grid-area: p1; }
.p-vote { grid-area: p2; }
.p-news { grid-area: p3; }
.p-ppt { grid-area: p4; }

/* Tiles */
.tile {
  position: relative;
  background: var(--tile);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 12px 32px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}
h1, h2, h3 { margin: 0; color: var(--strong); }
h2 { font-size: 18px; font-weight: 650; letter-spacing: -0.01em; }
strong { color: var(--strong); font-weight: 600; }
.kicker, .tile-label {
  margin: 0 0 8px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--faint);
  display: flex; align-items: center; gap: 8px;
}

/* Intro */
.t-intro { padding: 32px; display: flex; flex-direction: column; }
.t-intro h1 { font-size: clamp(24px, 3.2vw, 32px); line-height: 1.25; font-weight: 500; letter-spacing: -0.02em; text-wrap: balance; }
.t-intro h1 strong { font-weight: 700; color: var(--red); }
.t-intro p { margin: 16px 0 0; font-size: 16px; text-wrap: pretty; }
.t-intro .lead { margin-top: 14px; font-size: 18px; line-height: 1.5; color: var(--strong); }
.socials { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: auto; padding-top: 28px; }
.icon-btn {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 14px;
  color: var(--strong);
  background: color-mix(in srgb, var(--c) 14%, var(--tile-2));
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
  -webkit-tap-highlight-color: transparent;
  transition: transform 160ms var(--ease-out), background-color 150ms ease;
}
.icon-btn svg { width: 20px; height: 20px; fill: currentColor; }
.icon-btn:active { transform: scale(0.95); }
.pill-btn {
  height: 46px; padding: 0 18px;
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: 14px;
  font-weight: 600; color: var(--bg);
  background: var(--strong);
  -webkit-tap-highlight-color: transparent;
  transition: transform 160ms var(--ease-out), background-color 150ms ease;
}
.pill-btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .icon-btn:hover { background: color-mix(in srgb, var(--c) 28%, var(--tile-2)); }
  .pill-btn:hover { background: #ffffff; }
}

/* Now */
.t-now { display: flex; flex-direction: column; justify-content: center; }
.t-now p:last-child { margin: 0; color: var(--strong); font-size: 18px; line-height: 1.5; text-wrap: balance; }
.live { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.6); animation: pulse 2.4s ease-out infinite; }
@keyframes pulse { 70%, 100% { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); } }

/* Stack */
.t-stack h2 { margin-bottom: 4px; }
.t-stack h3 { margin: 16px 0 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tags li { font-size: 12.5px; line-height: 1; padding: 7px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--strong); background: rgba(255, 255, 255, 0.02); }
.t-stack .tags:nth-of-type(1) li { border-color: rgba(255, 93, 108, 0.35); }
.t-stack .tags:nth-of-type(2) li { border-color: rgba(251, 191, 36, 0.32); }
.t-stack .tags:nth-of-type(3) li { border-color: rgba(96, 165, 250, 0.35); }
.t-stack .tags:nth-of-type(4) li { border-color: rgba(167, 139, 250, 0.35); }
.t-stack .tags:nth-of-type(5) li { border-color: rgba(52, 211, 153, 0.35); }

/* Experience */
.t-exp h2 { margin-bottom: 16px; }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.timeline li { display: grid; grid-template-columns: 12px 1fr; gap: 14px; position: relative; }
.timeline li:not(:last-child)::after { content: ""; position: absolute; left: 5px; top: 18px; bottom: -18px; width: 1px; background: var(--line); }
.dot { width: 11px; height: 11px; margin-top: 6px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 18%, transparent); }
.tl-head { margin: 0; color: var(--strong); display: flex; flex-wrap: wrap; gap: 0 10px; align-items: baseline; }
.tl-when { margin-left: auto; font-size: 12.5px; color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tl-role { margin: 0; font-size: 14px; color: var(--strong); opacity: 0.8; }
.timeline p:not(.tl-head):not(.tl-role) { margin: 4px 0 0; }

/* Contact */
.t-contact { display: flex; flex-direction: column; justify-content: center; gap: 10px; background: linear-gradient(160deg, rgba(255, 93, 108, 0.16), transparent 60%), var(--tile); border-color: rgba(255, 93, 108, 0.25); }
.t-contact p { margin: 0; }
.contact-email { color: var(--strong); font-weight: 600; word-break: break-all; }
@media (hover: hover) and (pointer: fine) { .contact-email:hover { color: var(--red); } }
.btn {
  align-self: flex-start;
  min-height: 42px; padding: 0 16px; margin-top: 6px;
  font: inherit; font-weight: 600; font-size: 14px;
  color: #1a0b0d; background: var(--red);
  border: 0; border-radius: 12px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 160ms var(--ease-out), background-color 150ms ease;
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.6; cursor: default; }
@media (hover: hover) and (pointer: fine) { .btn:hover { background: #ff7884; } }

/* Projects: one color each, with a pattern */
.t-proj {
  --c: var(--blue);
  display: flex; flex-direction: column; gap: 6px;
  min-height: 210px;
  padding-top: 88px;
  border-color: color-mix(in srgb, var(--c) 30%, transparent);
  -webkit-tap-highlight-color: transparent;
  transition: transform 200ms var(--ease-out), border-color 200ms ease;
}
.t-proj::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 72px;
  background-color: color-mix(in srgb, var(--c) 16%, var(--tile));
  -webkit-mask-image: linear-gradient(#000, transparent);
  mask-image: linear-gradient(#000, transparent);
}
.p-ids { --c: var(--red); }
.p-ids::before { background-image: radial-gradient(color-mix(in srgb, var(--c) 55%, transparent) 1.5px, transparent 1.6px); background-size: 14px 14px; }
.p-vote { --c: var(--amber); }
.p-vote::before { background-image: repeating-linear-gradient(45deg, color-mix(in srgb, var(--c) 40%, transparent) 0 2px, transparent 2px 12px); }
.p-news { --c: var(--blue); }
.p-news::before { background-image: linear-gradient(color-mix(in srgb, var(--c) 40%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--c) 40%, transparent) 1px, transparent 1px); background-size: 16px 16px; }
.p-ppt { --c: var(--violet); }
.p-ppt::before { background-image: repeating-linear-gradient(90deg, color-mix(in srgb, var(--c) 45%, transparent) 0 6px, transparent 6px 14px); }
.proj-kind { position: relative; font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c); }
.proj-title { position: relative; font-size: 17px; font-weight: 650; line-height: 1.3; color: var(--strong); }
.proj-desc { position: relative; font-size: 14px; line-height: 1.5; }
.arrow {
  position: absolute; top: 18px; right: 18px;
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 10px;
  color: var(--strong);
  background: rgba(14, 15, 19, 0.6);
  border: 1px solid var(--line);
  transition: transform 200ms var(--ease-out), background-color 150ms ease;
}
.t-proj:active { transform: scale(0.985); }
@media (hover: hover) and (pointer: fine) {
  .t-proj:hover { border-color: color-mix(in srgb, var(--c) 65%, transparent); }
  .t-proj:hover .arrow { transform: translate(2px, -2px); background: var(--c); color: var(--bg); }
}

/* Contact dialog: centered, so it scales from center */
.modal {
  width: min(480px, calc(100% - 32px));
  padding: 24px;
  color: var(--text);
  background: var(--tile);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
  opacity: 1; transform: scale(1);
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out), overlay 220ms allow-discrete, display 220ms allow-discrete;
}
.modal:not([open]) { opacity: 0; transform: scale(0.96); transition-duration: 160ms; }
@starting-style { .modal[open] { opacity: 0; transform: scale(0.96); } }
.modal::backdrop { background: rgba(5, 6, 9, 0.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.modal-head { display: flex; justify-content: space-between; align-items: center; }
.close { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--strong); font-size: 20px; line-height: 1; cursor: pointer; }
.form { display: grid; gap: 14px; }
.field { display: grid; gap: 6px; }
.field > span { font-size: 13px; font-weight: 600; color: var(--strong); }
input, textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--strong);
  background: var(--tile-2); border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px;
  transition: border-color 150ms ease;
}
textarea { resize: vertical; min-height: 120px; }
input:focus, textarea:focus { outline: none; border-color: rgba(255, 93, 108, 0.6); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.form-foot .btn { margin-top: 0; }
.form-status { margin: 0; font-size: 14px; }
.form-status[data-state="ok"] { color: var(--green); }
.form-status[data-state="error"] { color: #fca5a5; }

/* First-visit entrance: tiles rise as one wave, intro leads */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
.tile { animation: rise 560ms var(--ease-out) both; }
.t-intro { animation-delay: 0ms; }
.t-now, .t-contact { animation-delay: 70ms; }
.t-stack { animation-delay: 120ms; }
.t-exp { animation-delay: 160ms; }
.t-proj { animation-delay: 190ms; }

@media (prefers-reduced-motion: reduce) {
  .tile { animation: fade 200ms ease both; }
  .live { animation: none; }
  .modal, .modal:not([open]) { transform: none; }
  .icon-btn:active, .pill-btn:active, .btn:active, .t-proj:active { transform: none; }
}
@keyframes fade { from { opacity: 0; } }

/* ---------- Terminal touches ---------- */
.net { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

.label { margin: 0 0 6px; font-family: var(--mono); font-size: 12.5px; color: var(--c); }
.tile-label { font-family: var(--mono); text-transform: none; letter-spacing: 0; font-size: 12.5px; }

.row-label { display: flex; flex-direction: column; margin: 18px 4px 2px; font-size: 22px; font-weight: 650; letter-spacing: -0.01em; color: var(--strong); }

.badge { font-family: var(--mono); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 2px 7px; border-radius: 6px; color: #06281c; background: var(--green); }
.timeline p:not(.tl-head):not(.tl-role)::before { content: "> "; font-family: var(--mono); color: var(--green); }

.tags li, .proj-kind { font-family: var(--mono); }
.proj-kind { letter-spacing: 0; text-transform: none; font-size: 12px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* 404 page */
.notfound { grid-template-areas: none; grid-template-columns: 1fr; max-width: 560px; min-height: 100dvh; align-content: center; }
.t-404 { padding: 32px; }
.t-404 h1 { font-size: clamp(26px, 4vw, 34px); line-height: 1.2; letter-spacing: -0.02em; }
.t-404 p:not(.label) { margin: 12px 0 24px; font-size: 16px; }
.t-404 .label { font-size: 14px; }