:root {
  color-scheme: dark;
  --night: #0b111c;
  --ink: #0f1520;
  --paper: #f7f2e2;
  --muted: #b1b9c8;
  --gold: #efce8c;
  --line: #273044;
  --mono: "Geist Mono", monospace;
  --gutter: clamp(18px, 4vw, 64px);
  font-family: "DM Sans", Arial, sans-serif;
  background: var(--night);
  color: var(--paper);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
a { color: inherit; }
button, input { font: inherit; }
button { color: inherit; }
figure, p { margin: 0; }
canvas { display: block; width: 100%; height: 100%; }
::selection { background: var(--gold); color: var(--night); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; }
.visually-hidden, .skip:not(:focus) {
  position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
}
.skip:focus { position: fixed; z-index: 10; top: 8px; left: 8px; background: var(--night); padding: 12px; }

.hero {
  --cut: 119px;
  --dock-left: 20.4%;
  position: relative;
  isolation: isolate;
  min-height: clamp(625px, 98svh, 875px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 36px 20px 12px;
}
.hero-sky {
  position: absolute;
  inset: 27px 20px 12px;
  z-index: -2;
  overflow: hidden;
  border-radius: 34px 34px 14px 34px;
  background:
    radial-gradient(ellipse at 15% 105%, #e2e495 0, transparent 37%),
    radial-gradient(ellipse at 92% 97%, #a64b30 0, transparent 52%),
    radial-gradient(ellipse at 13% 69%, #403d86 0, transparent 45%),
    radial-gradient(ellipse at 10% 42%, #183257 0, transparent 30%), var(--night);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), var(--dock-left) calc(100% - var(--cut)), var(--dock-left) 100%, 0 100%);
  clip-path: shape(from 0 0, line to 100% 0,
    line to 100% calc(100% - var(--cut) - 32px),
    curve to calc(100% - 32px) calc(100% - var(--cut)) with 100% calc(100% - var(--cut) + 2px),
    line to calc(var(--dock-left) + 30px) calc(100% - var(--cut)),
    curve to var(--dock-left) calc(100% - var(--cut) + 29px) with var(--dock-left) calc(100% - var(--cut)),
    line to var(--dock-left) calc(100% - 16px),
    curve to calc(var(--dock-left) - 16px) 100% with var(--dock-left) 100%,
    line to 0 100%, close);
}
.hero-sky::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgb(244 224 180 / 19%);
  border-top-color: transparent;
  border-radius: inherit;
  background: linear-gradient(180deg, var(--night) 0%, transparent 19%);
}
.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 5px clamp(12px, 2.2vw, 36px);
}
.wordmark { display: inline-flex; width: fit-content; align-items: center; gap: .36em; text-decoration: none; font-size: clamp(24px, 2.53vw, 41px); letter-spacing: -.091em; line-height: 1; font-weight: 700; white-space: nowrap; }
.wordmark-last { font-weight: 500; }
.wordmark b {
  display: grid; place-items: center; inline-size: 2.9em; block-size: 2.6em; border-radius: .74em;
  border: 1px solid #e9d5a1; box-shadow: 0 0 0 3px #141a25, 0 0 0 4px #a89875, inset 0 0 0 2px #bd9d60, 0 2px 15px #141622;
  background: linear-gradient(135deg, #fcf1ce, #dec38b 50%, #fff4d1 79%, #b09157);
  color: #352b1c; font: 700 .37em / 1 "DM Sans", sans-serif; letter-spacing: -.08em;
}
.masthead nav { display: flex; gap: clamp(16px, 2vw, 28px); align-items: center; }
.masthead nav a { font-size: .87rem; text-decoration: none; color: #d3d8e1; transition: color .2s; }
.masthead nav a:hover { color: var(--gold); }
.hero-type { position: relative; align-self: center; text-align: center; min-width: 0; margin: 14px 0 12px; }
.hero-type::before, .hero-type::after {
  content: ""; position: absolute; pointer-events: none; inset-inline: 4%; height: 1px; z-index: -1;
  background: linear-gradient(90deg, transparent, #fff3cb80 30%, #fff5d340 75%, transparent);
}
.hero-type::before { top: 23%; }
.hero-type::after { top: 43%; opacity: .35; }
.hero-type h1 {
  display: grid;
  margin: 0 auto;
  max-width: 1100px;
  color: #f7f1df;
  font-size: clamp(43px, 6.75vw, 112px);
  font-weight: 500;
  letter-spacing: -.086em;
  line-height: 1.22;
  text-wrap: balance;
}
.hero-type h1 span:first-child { position: relative; width: fit-content; margin-inline: auto; color: #fff9e7; text-shadow: 0 0 30px #ffecc037; }
.hero-type h1 span:first-child::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none; width: .74em; height: .74em; left: -.11em; top: -.02em;
  background: radial-gradient(ellipse,#fffbd1 0%,transparent 56%) center / 6% 100% no-repeat,
    radial-gradient(ellipse,#fff6cc 0%,transparent 60%) center / 100% 6% no-repeat,
    radial-gradient(ellipse,#ead09098 0%,transparent 48%);
  transform: rotate(38deg); opacity: .8;
}
.hero-type h1 span:last-child { color: #e8dfcb; }
.hero-dock { display: grid; grid-template-columns: var(--dock-left) minmax(0, 1fr); align-items: stretch; min-width: 0; }
.hero-start { display: flex; align-items: end; padding: 16px 13px 19px clamp(14px, 2vw, 31px); }
.button {
  display: inline-flex; gap: 11px; align-items: center; justify-content: center; width: fit-content;
  border: 1px solid #4d4b45; border-radius: 11px; padding: 8px 13px;
  background: #2e2d2b; box-shadow: 0 3px 1px #11141c; color: #fff9e9;
  font-size: clamp(.73rem, 1.1vw, .93rem); line-height: 1.2; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: background .2s, transform .2s;
}
.button:hover { background: #484540; transform: translateY(-2px); }
.hero-links { position: relative; align-self: stretch; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 14px 0 0 15px; }
.hero-links::before { content: ""; position: absolute; left: 29px; right: 30px; top: -1px; height: 1px; background: linear-gradient(90deg,#e2d4a16b,#f7a47291); }
.quick {
  position: relative; display: flex; flex-direction: column; justify-content: flex-start; gap: 7px;
  min-height: 104px; min-width: 0; padding: 15px 14px;
  border-radius: 16px; border: 1px solid #555354; color: #fff9ed;
  background: linear-gradient(125deg, #323130, #302f2f 70%, #393735);
  text-decoration: none; isolation: isolate; transition: border-color .2s, background .2s, transform .2s;
}
.quick:hover { border-color: #e4c590; transform: translateY(-3px); }
.quick strong { width: fit-content; max-width: 78%; font-weight: 600; line-height: 1.07; font-size: clamp(.86rem, 1.47vw, 1.22rem); letter-spacing: -.035em; }
.quick strong span { opacity: .63; font-size: .72em; }
.quick small { max-width: 73%; color: #e0dbd1; font-size: clamp(.66rem, 1.07vw, .89rem); line-height: 1.36; }
.quick-art { position: absolute; z-index: -1; top: 7px; right: 9px; height: clamp(35px, 6.2vw, 69px); width: clamp(35px, 6.2vw, 69px); font-style: normal; }
.art-lens {
  top: -7px; right: 3px; border-radius: 20%; transform: rotate(-14deg);
  border: 1px solid #d7d5d9; box-shadow: inset 4px 4px 8px #e1e2e0aa, inset -6px -6px 15px #3a303d, 3px 8px 8px #06091072;
  background: linear-gradient(148deg, #cdbfa7, #6b6774 43%, #232635 79%);
}
.art-lens::before { content: ""; position: absolute; inset: 12%; border-radius: 50%; border: 2px solid #b5b8cb; background: radial-gradient(circle at 38% 36%, #d5d6c5 0 5%, #62a6cb 8%, #2631a1 17%, #0c1629 35%, #34305d 44%, #6971a0 52%, #181925 57%, #333948 67%, #0a0b14 74%); box-shadow: 0 0 0 3px #42404e; }
.art-chip {
  display: grid; place-items: center; top: -6px; right: 10px; color: #37280c; transform: rotate(9deg); border-radius: 15%; border: 1px solid #f8e7b6;
  background: repeating-linear-gradient(0deg,#dabc7c44 0 2px,transparent 2px 5px),linear-gradient(132deg,#fff6d7,#a27f3b 52%,#e7c98a);
  box-shadow: inset 0 0 0 5px #bea46c, inset 0 0 0 6px #806939, 4px 5px 11px #1b1818;
}
.art-chip b { font: 500 clamp(.65rem, 1.7vw, 1.45rem) var(--mono); }
.art-frames { transform: rotate(-17deg); right: 10px; }
.art-frames::before, .art-frames::after { content: ""; position: absolute; inset: 12% 8%; border-radius: 8px; border: 2px solid #b4aed0; background: repeating-linear-gradient(110deg,#4a3a6490 1px 3px,transparent 3px 7px),linear-gradient(140deg,#b690d5,#38416b 55%,#0b2036); box-shadow: 3px 6px 8px #0b0c17; }
.art-frames::after { transform: translate(8px, 8px) rotate(19deg); border-color: #bda983; background: radial-gradient(ellipse at 60% 70%,#c17d78,transparent 55%),linear-gradient(140deg,#1b214a,#687ba9); }

.journey { position: relative; margin-left: clamp(20px, 4.35vw, 66px); border-left: 1px solid var(--line); }
.rail { position: sticky; top: 0; height: 0; z-index: 4; }
.progress { position: absolute; left: -13px; top: 30svh; display: grid; gap: 15px; }
.progress a { width: 25px; height: 25px; border-radius: 50%; display: grid; place-items: center; color: #c3cad8; background: var(--night); text-decoration: none; font: .57rem var(--mono); border: 1px solid var(--line); transition: color .25s, border .25s; }
.progress a:hover, .progress a[aria-current] { color: var(--gold); border-color: #ac8d59; }
.chapter {
  max-width: 1480px; margin-inline: auto; position: relative; isolation: isolate; padding: clamp(86px, 12vh, 170px) var(--gutter) clamp(90px, 14vh, 164px);
  scroll-margin-top: 10px;
}
.vision, .ai { min-height: 87svh; display: grid; grid-template-columns: minmax(230px,.79fr) minmax(0,1.28fr); align-items: center; gap: clamp(25px, 5vw, 108px); }
.vision::before, .ai::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.vision::before { background: radial-gradient(ellipse at 70% 55%,#1b214949 0%,transparent 64%); }
.ai::before { background: radial-gradient(ellipse at 30% 62%,#4d2d3c36 0%,transparent 63%); }
.chapter-label { display: flex; align-items: center; gap: 9px; color: var(--gold); font: .76rem var(--mono); }
.chapter-label span { width: 6px; height: 6px; background: var(--gold); border-radius: 50%; box-shadow: 0 0 9px #ffd8938c; }
.chapter h2 { margin: 16px 0 22px; font-size: clamp(47px, 6.25vw, 107px); font-weight: 500; line-height: .98; letter-spacing: -.079em; }
.chapter-description { max-width: 42ch; color: var(--muted); font-size: clamp(.99rem, 1.42vw, 1.21rem); line-height: 1.65; }
.text-link { margin-top: 26px; display: inline-flex; width: fit-content; gap: 12px; align-items: baseline; padding-bottom: 4px; border-bottom: 1px solid #8d7457; color: #f2dbad; text-decoration: none; font-size: .92rem; }
.text-link:hover { color: #fff8df; border-color: #fff8df; }
.vision-figure { position: relative; min-width: 0; }
.scene-frame { border: 1px solid #56617e; border-radius: 16px; background: #141c2d; overflow: hidden; box-shadow: 0 22px 66px #05081390,0 0 90px #2e3a8130; }
.scene-bar { display: flex; justify-content: space-between; gap: 8px; align-items: center; min-height: 40px; padding: 8px 15px; font: clamp(.54rem, 1vw, .73rem) var(--mono); color: #b8c8dc; }
.scene-bar i { display: inline-block; width: .56em; height: .56em; border-radius: 50%; margin-right: 7px; background: #8de6cc; box-shadow: 0 0 10px #70e6cf88; }
.scene-footer { border-top: 1px solid #414b66; }
.scene-canvas { height: auto; aspect-ratio: 16 / 10; background: radial-gradient(ellipse at center,#273052,#0a1021 70%); }
.vision-figure figcaption, .ai-figure figcaption { margin: 13px 3px 0; color: #a2adbf; font-size: .78rem; }
.ai { grid-template-columns: minmax(0,1.15fr) minmax(225px,.87fr); overflow: clip; }
.ai .chapter-copy { grid-column: 2; grid-row: 1; }
.ai-figure { position: relative; min-width: 0; grid-column: 1; grid-row: 1; }
.ai-haze { position: absolute; z-index: -1; inset: -24%; background: radial-gradient(ellipse at 47% 60%, #9d523d63, transparent 70%); }
.terminal { overflow: hidden; border-radius: 16px; border: 1px solid #5a4248; background: linear-gradient(145deg,#231d29,#141a25 62%); box-shadow: 0 24px 75px #02030a91; }
.terminal-title { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 15px; border-bottom: 1px solid #443948; font: .71rem var(--mono); color: #e2b7a9; }
.terminal-title i { display: inline-block; margin-right: 4px; width: 7px; height: 7px; background: #745966; border-radius: 50%; }
.terminal-title i:first-child { background: #d7897b; }
.terminal ol { margin: 0; padding: clamp(18px,4vw,48px) 10px clamp(17px,3vw,38px) 42px; font: clamp(.59rem,1.15vw,1rem)/2.05 var(--mono); color: #dfdbea; }
.terminal li { padding-left: .53em; }
.terminal li::marker { color: #968d9e; }
.terminal code { font: inherit; overflow-wrap: anywhere; }
.terminal code em { font-style: normal; color: #a9acc1; }
.terminal code b { color: #ffd09d; font-weight: 500; }
.terminal-output { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 7px; padding: 12px; border-top: 1px solid #453645; font: clamp(.53rem,1vw,.72rem) var(--mono); color: #efc4b2; }
.terminal-output span { border: 1px solid #725157; border-radius: 5px; padding: 3px 5px; }

.chapter-heading { margin-bottom: clamp(26px,4vw,60px); }
.catalog { background: radial-gradient(ellipse at 72% 0%,#222c5940 0%,transparent 58%); }
.stack-panel { border: 1px solid #2f394d; border-radius: 17px; overflow: hidden; background: #141c2a; }
.stack-toolbar { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 13px; padding: clamp(12px, 2.1vw, 23px); border-bottom: 1px solid #2e374b; }
.stack-filters { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.stack-filters button { border: 1px solid transparent; border-radius: 6px; background: transparent; color: #c3cbd9; padding: 6px 8px; cursor: pointer; font-size: .84rem; line-height: 1.4; text-align: left; }
.stack-filters button:hover { color: #fff9e5; background: #222d3c; }
.stack-filters button[aria-pressed="true"] { color: #fff2cf; background: #343035; border-color: #8f7556; }
.stack-search { display: flex; align-items: center; gap: 7px; border: 1px solid #47536a; border-radius: 7px; padding: 6px 8px; color: #bdc5d5; }
.stack-search span { font-size: 1.1rem; line-height: 1; }
.stack-search input { width: 155px; min-width: 0; border: 0; padding: 1px; color: var(--paper); background: transparent; font-size: .84rem; }
.stack-search input::placeholder { color: #b6bfce; }
.skill-results { min-height: 240px; padding: clamp(14px, 2.7vw, 35px); }
.skill-group + .skill-group { margin-top: 34px; padding-top: 28px; border-top: 1px solid #313a4a; }
.skill-group h3 { margin: 0 0 6px; font-size: clamp(1.13rem,2vw,1.52rem); font-weight: 600; letter-spacing: -.04em; }
.skill-group > p { margin-bottom: 20px; color: #bac4d7; font-size: .9rem; line-height: 1.5; }
.skill-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(110px,1fr)); gap: 17px 8px; padding: 0; margin: 0; list-style: none; }
.skill-grid li > span, .skill-grid button { width: 100%; min-height: 77px; border: 1px solid transparent; border-radius: 9px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px; padding: 9px 4px; background: transparent; color: #d5deed; text-align: center; font-size: .79rem; line-height: 1.3; overflow-wrap: anywhere; }
.skill-grid button { cursor: pointer; }
.skill-grid button:hover, .skill-grid button[aria-expanded="true"] { border-color: #5d6b83; background: #212b3e; color: #fff8e4; }
.skill-mark { display: grid; place-items: center; width: 33px; height: 31px; border-radius: 7px; font: 500 .66rem var(--mono); border: 1px solid color-mix(in srgb, var(--skill-tint) 60%, transparent); color: var(--skill-tint); background: color-mix(in srgb, var(--skill-tint) 10%, #1c2636); }
.skill-detail { display: block; color: #cad3e2; width: 100%; margin: 5px 0 0; padding: 8px 6px; border-radius: 5px; background: #202a3b; font-size: .72rem; line-height: 1.48; }
.skill-detail[hidden] { display: none; }
.empty-results { color: #cbd3e4; padding: 12px 4px; }

.project-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px 22px; }
.project { min-width: 0; border-bottom: 1px solid #344050; padding-bottom: 20px; }
.project-art {
  position: relative; display: block; overflow: hidden; isolation: isolate; aspect-ratio: 16 / 9; border: 1px solid #455269; border-radius: 11px;
  background: var(--project-bg, #1a263e); color: var(--project-color, #eff1f7);
}
.project-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.project-art i { position: absolute; inset: 21% 23%; border-radius: 10px; border: 1px solid currentColor; transform: rotate(-12deg) skewY(3deg); box-shadow: 12px 16px 25px #0b0f2359; }
.project-art i:nth-child(2) { inset: 25% 19%; transform: rotate(12deg) skewY(2deg); opacity: .65; }
.project-art span { position: absolute; inset: 0; display: grid; place-items: center; font-size: clamp(1.32rem,4.9vw,5rem); line-height: 1; letter-spacing: -.07em; text-align: center; font-weight: 500; text-shadow: 0 2px 16px #1317265c; }
.project:nth-child(1) .project-art { --project-bg: radial-gradient(ellipse at 28% 30%,#e2b99b,#64473f 74%); --project-color: #fff6e4; }
.project:nth-child(2) .project-art { --project-bg: radial-gradient(ellipse at 65% 56%,#7656ad,#262440 74%); --project-color: #f7d8ff; }
.project:nth-child(3) .project-art { --project-bg: radial-gradient(ellipse at 40% 70%,#61997d,#152e2b 74%); --project-color: #d5efc1; }
.project:nth-child(4) .project-art { --project-bg: radial-gradient(ellipse at 54% 58%,#365e8b,#1b2944 74%); --project-color: #d4f5fb; }
.project h3 { margin: 13px 0 3px; font-size: clamp(1.25rem,2.4vw,1.75rem); font-weight: 600; letter-spacing: -.04em; }
.project-type { font: .7rem var(--mono); color: var(--gold); }
.project-description { max-width: 57ch; color: var(--muted); line-height: 1.55; font-size: .92rem; margin-top: 7px; }
.site-footer { border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: flex-end; gap: 22px; padding: 35px var(--gutter) 38px; background: #0a101a; }
.site-footer p { margin-top: 12px; font-size: .86rem; color: var(--muted); }
.site-footer .text-link { white-space: nowrap; margin-top: 0; }

.motion [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .65s ease-out, transform .75s cubic-bezier(.18,.68,.25,1); }
.motion [data-reveal].revealed, .motion [data-reveal]:focus-within { opacity: 1; transform: none; }

@media (max-width: 940px) {
  .hero { --dock-left: 22%; --cut: 111px; padding-top: 27px; }
  .quick { min-height: 96px; padding: 14px 10px; }
  .quick-art { opacity: .76; }
  .hero-links { gap: 8px; padding-left: 8px; }
  .chapter { padding-inline: clamp(20px, 5vw, 42px); }
  .skill-grid { grid-template-columns: repeat(auto-fill,minmax(90px,1fr)); }
}
@media (max-width: 690px) {
  .hero { min-height: 600px; --cut: 0px; grid-template-rows: auto 1fr auto; padding: 22px 10px 13px; }
  .hero-sky { inset: 10px 10px 111px; clip-path: none; border-radius: 21px; }
  .masthead { justify-content: center; flex-wrap: wrap; gap: 11px; }
  .masthead nav { display: none; }
  .hero-type { margin: 0 6px; }
  .hero-type h1 { font-size: clamp(38px,8vw,58px); line-height: 1.15; }
  .hero-dock { display: flex; flex-direction: column; align-items: center; gap: 8px; }
  .hero-start { padding: 8px 0 11px; }
  .hero-links { display: flex; width: 100%; padding: 6px 3px 5px; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
  .hero-links::before { display: none; }
  .quick { flex: 0 0 clamp(154px, 51vw, 216px); min-height: 89px; border-radius: 9px; padding: 12px 10px; scroll-snap-align: start; }
  .quick strong { max-width: 94%; }
  .quick small { max-width: 91%; }
  .quick small br { display: none; }
  .quick-art { top: 4px; right: 6px; opacity: .4; }
  .journey { margin-left: 15px; }
  .progress { left: -9px; top: 34svh; gap: 12px; }
  .progress a { width: 17px; height: 17px; font-size: .45rem; }
  .chapter { padding: 73px 18px 74px 21px; }
  .vision, .ai { min-height: auto; grid-template-columns: minmax(0,1fr); gap: 32px; }
  .ai .chapter-copy, .ai-figure { grid-area: auto; }
  .project-list { gap: 18px 10px; }
  .skill-grid { grid-template-columns: repeat(auto-fill,minmax(74px,1fr)); }
}
@media (max-width: 365px) {
  .quick small { font-size: .61rem; }
  .hero-type h1 { font-size: 36px; }
  .project-list { grid-template-columns: 1fr; }
  .site-footer { align-items: start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0s !important; animation-duration: 0s !important; }
  .motion [data-reveal] { transform: none; opacity: 1; }
}