* { box-sizing: border-box; }
html { background: #0E1414; }
body { margin: 0; background: #0E1414; color: #EAF2F0; font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
a { color: inherit; text-decoration: none; }

.page { min-height: 100vh; display: flex; flex-direction: column; }
.top { position: relative; overflow: hidden; }
.top-in { position: relative; max-width: 1120px; margin: 0 auto; padding: 20px 32px 0; }
.bg-scene { position: absolute; left: 50%; top: 0; width: 2560px; height: 100%; margin-left: -1280px; pointer-events: none; }
.strip-in { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 32px 56px; flex: 1; }

.site-nav { display: flex; align-items: center; justify-content: space-between; padding-bottom: 20px; border-bottom: 1px solid rgba(234,242,240,.12); }
.lockup { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 16px; letter-spacing: -0.01em; }
.lockup img { border-radius: 6px; box-shadow: 0 0 0 1px rgba(234,242,240,.12); }
.site-nav nav { display: flex; gap: 28px; font-size: 14px; color: #8FA39F; }

.site-hero { display: grid; grid-template-columns: 1fr 1.15fr; align-items: center; gap: 56px; padding: 72px 0 64px; }
.wordmark { font-size: 56px; line-height: 1.05; font-weight: 600; letter-spacing: -0.035em; margin: 0; }
.lede { margin: 12px 0 28px; font-size: 20px; color: #8FA39F; }
.btn { display: inline-block; background: #12C8B4; color: #0E1414; font-weight: 600; padding: 9px 16px; border-radius: 6px; font-size: 14px; }

.term { background: #121B1A; border: 1px solid rgba(234,242,240,.12); border-radius: 10px; overflow: hidden; }
.term-bar { display: flex; gap: 6px; padding: 12px 14px; border-bottom: 1px solid rgba(234,242,240,.12); }
.term-bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(234,242,240,.16); }
.term pre { margin: 0; padding: 18px 20px 20px; font: 13px/1.75 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; color: #EAF2F0; white-space: pre; }
.t-prompt { color: #12C8B4; }
.t-cmd { color: #EAF2F0; }
.t-flag { color: #8FA39F; }
.t-arg { color: #FFB000; }

.projects h2 { font-size: 14px; font-weight: 600; margin: 0 0 12px; }
.proj-row { display: grid; grid-template-columns: 160px 1fr auto auto; gap: 32px; align-items: center; padding: 16px 0; border-top: 1px solid rgba(234,242,240,.12); border-bottom: 1px solid rgba(234,242,240,.12); }
.proj-row b { font: 600 15px ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; color: #12C8B4; }
.proj-row span { color: #8FA39F; }
.proj-row .lang { font: 13px ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }
.proj-row .pill { font-size: 12px; font-weight: 500; color: #8FA39F; border: 1px solid rgba(234,242,240,.24); border-radius: 2em; padding: 0 8px; line-height: 20px; }

.site-foot { border-top: 1px solid rgba(234,242,240,.12); }
.site-foot-in { max-width: 1120px; margin: 0 auto; padding: 24px 32px; display: flex; justify-content: space-between; font-size: 13px; color: #8FA39F; }
.site-foot-in nav { display: flex; gap: 24px; }

/* Stacked layout: the lab bench shows between the hero text and the terminal,
   centred on the flask, and fades out towards the top. The scene is drawn at its
   natural size and its bench sits just above the terminal (hero padding + terminal height). */
@media (max-width: 1023px) {
  .bg-scene { top: auto; bottom: 205px; height: 398px; margin-left: -1159px; mask-image: linear-gradient(to bottom, transparent, #000 140px); }
  .site-nav a { display: inline-flex; align-items: center; min-height: 44px; }
  .site-nav { padding-bottom: 14px; }
  .site-hero { grid-template-columns: minmax(0, 1fr); gap: 232px; padding: 48px 0; }
  .wordmark { font-size: clamp(40px, 11vw, 56px); }
  .btn { padding: 12px 20px; }
  .term pre { overflow-x: auto; }
  .proj-row { display: flex; flex-wrap: wrap; gap: 8px 16px; }
  .proj-row .desc { flex-basis: 100%; }
  .site-foot-in { align-items: center; padding-top: 12px; padding-bottom: 12px; }
  .site-foot-in a { display: inline-flex; align-items: center; min-height: 44px; }
}

@media (max-width: 600px) {
  .top-in, .strip-in, .site-foot-in { padding-left: 20px; padding-right: 20px; }
  .bg-scene { margin-left: -1131px; }
}