:root {
  color-scheme: dark;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #f1f2e9;
  background: #0b0e0e;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  --lime: #d4f759;
}
* { box-sizing: border-box; }
body { margin: 0; }
button { font: inherit; }
button[hidden] { display: none; }
::selection { color: #0b0e0e; background: var(--lime); }
.page {
  position: relative; width: min(100%, 1680px); min-height: 100svh; margin: 0 auto;
  padding: 0 clamp(24px, 4.2vw, 76px); display: flex; flex-direction: column; overflow: hidden;
}
.masthead { position: relative; z-index: 1; min-height: 112px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.wordmark { font-size: 23px; font-weight: 650; letter-spacing: -1.1px; }
.wordmark > span:first-child { font-weight: 400; }
.brand-dot { color: var(--lime); }
.status { display: flex; align-items: center; gap: 9px; color: #a3ada4; font-size: 12px; letter-spacing: .02em; }
.status > span { width: 5px; height: 5px; background: var(--lime); border-radius: 50%; }
main { flex: 1; min-height: 580px; display: grid; grid-template-columns: 1.02fr 1fr; align-items: center; position: relative; padding: 24px 0 44px; }
.message { position: relative; z-index: 1; padding-bottom: 40px; }
.eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 31px; color: #aebba5; text-transform: uppercase; letter-spacing: .17em; font-size: 10px; font-weight: 500; }
.eyebrow > span { width: 26px; height: 1px; background: #7e915f; }
h1 { margin: 0; font-size: clamp(74px, 8.8vw, 142px); font-weight: 500; line-height: .98; letter-spacing: -.071em; }
h1 > span { color: var(--lime); }
.description { margin: 33px 0 0; font-size: 17px; line-height: 1.65; letter-spacing: -.015em; color: #a4afa6; }
.artwork { position: relative; width: 124%; margin-left: -15%; align-self: center; isolation: isolate; }
.workstation { position: relative; display: block; width: 100%; height: auto; overflow: visible; }
.ambient { position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.ambient-one { inset: 1% -10% 10% 2%; background: radial-gradient(ellipse, #56885312 0%, #254d4510 34%, transparent 66%); }
.ambient-two { width: 45%; height: 45%; top: 10%; right: 12%; background: radial-gradient(ellipse, #8fa9440b, transparent 70%); }
.floating-desk { animation: float 9s ease-in-out infinite; }
.orbit-dot { animation: satellite 18s ease-in-out infinite; transform-origin: 373px 333px; }
.screen-breath { animation: breathe 5s ease-in-out infinite; }
.art-caption { display: block; margin-top: -7px; padding-left: 13%; color: #77877a; font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: 10px; letter-spacing: .07em; text-align: center; }
footer { min-height: 89px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid #ffffff12; position: relative; z-index: 1; }
footer > p { margin: 0; font-size: 11px; color: #859088; letter-spacing: .02em; }
#motion-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 10px 0 10px 12px; min-height: 44px; border: 0; border-radius: 3px; background: none; color: #aeb9ae; cursor: pointer; font-size: 11px; letter-spacing: .02em; }
#motion-toggle[hidden] { display: none; }
#motion-toggle:hover { color: #d4f759; }
#motion-toggle:focus-visible { outline: 2px solid #d4f759; outline-offset: 5px; }
.motion-icon { display: flex; gap: 3px; width: 11px; height: 10px; align-items: center; }
.motion-icon > i { width: 2px; height: 8px; background: currentColor; }
[data-motion="paused"] .motion-icon > i:first-child { width: 0; height: 0; background: none; border-left: 7px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
[data-motion="paused"] .motion-icon > i:last-child { display: none; }
[data-motion="paused"] .floating-desk, [data-motion="paused"] .orbit-dot, [data-motion="paused"] .screen-breath { animation-play-state: paused; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes satellite { 0%, 100% { transform: rotate(0); opacity: .65; } 50% { transform: rotate(16deg); opacity: 1; } }
@keyframes breathe { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@media (min-width: 1600px) { main { padding-top: 45px; padding-bottom: 65px; } }
@media (max-width: 900px) {
  .masthead { min-height: 92px; } .wordmark { font-size: 20px; }
  main { grid-template-columns: 1fr; padding: 54px 0 48px; }
  .message { padding-bottom: 0; } h1 { font-size: clamp(82px, 12vw, 116px); }
  .artwork { width: min(100%, 640px); margin: -42px 0 -10px auto; }
  .description { margin-top: 26px; } .art-caption { margin-top: -4px; padding-left: 0; }
}
@media (max-width: 600px) {
  .masthead { min-height: 83px; } .wordmark { font-size: 19px; letter-spacing: -.8px; }
  .status { font-size: 10px; gap: 6px; } .status > span { width: 4px; height: 4px; }
  main { padding: 46px 0 39px; } .eyebrow { margin-bottom: 24px; font-size: 9px; letter-spacing: .13em; }
  .eyebrow > span { width: 20px; } h1 { font-size: clamp(67px, 17.7vw, 103px); letter-spacing: -.065em; }
  .description { font-size: 15px; margin-top: 24px; line-height: 1.6; }
  .artwork { width: 117%; max-width: none; margin: -5px -9% -2px; }
  .art-caption { margin-top: 0; font-size: 9px; } footer { min-height: 86px; gap: 12px; }
  footer > p, #motion-toggle { font-size: 10px; } footer > p { max-width: 180px; line-height: 1.5; }
}
@media (max-width: 359px) {
  .page { padding: 0 20px; } .masthead { align-items: flex-start; padding-top: 26px; }
  .status { max-width: 58px; line-height: 1.5; align-items: baseline; } .status > span { flex-shrink: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="playing"]) .floating-desk, html:not([data-motion="playing"]) .orbit-dot, html:not([data-motion="playing"]) .screen-breath { animation-play-state: paused; }
}