:root {
  --ink:#173e42;
  --muted:#687978;
  --paper:#f6f5ef;
  --line:#dce2da;
  --teal:#237e77;
  --mint:#e7f0e8;
  --orange:#dc7045;
  --cream:#f0ede3;
  --white:#fffefa;
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:15px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif;
}

button,
input,
textarea,
select {
  font:inherit;
}

button,
a,
input,
select,
textarea,
summary {
  touch-action:manipulation;
}

button {
  cursor:pointer;
}

button:disabled {
  opacity:.55;
  cursor:wait;
}

button:focus-visible,
a:focus-visible,
canvas:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline:3px solid var(--orange);
  outline-offset:3px;
}

button {
  color:inherit;
}

a {
  color:inherit;
}

.topbar {
  min-height:82px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  gap:30px;
  padding:15px 4vw;
}

.brand {
  text-decoration:none;
  font-size:21px;
  letter-spacing:-.6px;
  white-space:nowrap;
}

.brand strong {
  font-weight:450;
}

.brand-icon {
  display:inline-grid;
  place-items:center;
  width:33px;
  height:33px;
  background:var(--ink);
  border-radius:10px;
  color:#d2e4bf;
  margin-right:8px;
}

.eyebrow {
  font-size:10px;
  font-weight:750;
  letter-spacing:1.6px;
  margin:0 0 8px;
}

.top-note {
  color:var(--muted);
  margin:0;
}

select {
  background:transparent;
  border:1px solid #c9d4cb;
  border-radius:7px;
  padding:9px;
  color:var(--ink);
  font-size:12px;
}

main {
  max-width:1510px;
  margin:auto;
  padding:42px 4vw 32px;
}

.intro {
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:65px;
  align-items:center;
  margin-bottom:34px;
}

h1 {
  font-size:clamp(32px,3.2vw,49px);
  line-height:1.16;
  font-weight:620;
  letter-spacing:-1.8px;
  margin:10px 0 17px;
}

h1 em {
  font-family:Georgia,serif;
  font-weight:400;
  color:var(--teal);
}

.intro-copy {
  color:var(--muted);
  max-width:530px;
  font-size:15px;
}

.big-idea {
  position:relative;
  background:var(--mint);
  border:1px solid #d5e2d5;
  border-radius:14px;
  padding:27px 30px;
}

.big-idea>p:not(.eyebrow) {
  font-size:19px;
  line-height:1.55;
  margin:12px 0 17px;
  max-width:380px;
}

.small-icon {
  font-size:27px;
  color:var(--teal);
}

.big-idea .small-icon {
  position:absolute;
  right:23px;
  top:17px;
}

.tag {
  font-size:11px;
  color:#577567;
  border-top:1px solid #cedece;
  padding-top:12px;
  display:block;
}

.arrow {
  margin-left:auto;
  opacity:.55;
}

.workspace {
  display:grid;
  grid-template-columns:300px minmax(0,1fr);
  gap:25px;
  align-items:start;
}

.card {
  background:var(--white);
  border:1px solid var(--line);
  border-radius:12px;
  padding:23px;
}

.controls {
  position:sticky;
  top:18px;
  padding:22px;
}

.section-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
}

.section-heading .eyebrow {
  font-size:9px;
}

.section-heading h2 {
  margin:2px 0 0;
}

h2 {
  font-size:18px;
  letter-spacing:-.4px;
  line-height:1.3;
  margin:13px 0 9px;
}

.controls h2 {
  font-size:16px;
}

.live-dot {
  font-size:10px;
  white-space:nowrap;
  color:#4b7e61;
}

.live-dot:before {
  content:"";
  display:inline-block;
  background:#75a882;
  width:5px;
  height:5px;
  border-radius:50%;
  margin-right:5px;
}

.muted {
  color:var(--muted);
  font-size:13px;
  margin:8px 0 16px;
}

.controls .muted {
  font-size:12px;
}

.image-actions {
  display:flex;
  gap:7px;
}

.secondary {
  border:1px solid #cbd6cb;
  background:transparent;
  border-radius:6px;
  padding:9px 12px;
  font-size:11px;
  white-space:nowrap;
  display:inline-block;
  text-align:center;
  cursor:pointer;
}

.secondary:hover {
  background:var(--mint);
}

.image-actions .secondary {
  padding:9px 8px;
  flex:1;
}

.upload {
  position:relative;
  overflow:hidden;
}

.upload input {
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
  width:100%;
}

.file-caption {
  font-size:10px;
  color:var(--muted);
  margin:10px 0;
}

hr {
  border:0;
  border-top:1px solid var(--line);
  margin:22px 0;
}

.input-label {
  font-size:11px;
  display:block;
  margin-bottom:7px;
  color:var(--muted);
}

textarea {
  width:100%;
  border:1px solid #cbd6cb;
  background:var(--white);
  border-radius:7px;
  padding:10px 12px;
  resize:vertical;
  color:var(--ink);
  font-size:13px;
}

.suggestions {
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin:9px 0 18px;
}

.suggestions button {
  font-size:9px;
  border:1px solid var(--line);
  border-radius:20px;
  padding:4px 8px;
  background:transparent;
}

.suggestions button:hover {
  background:var(--mint);
}

.primary {
  width:100%;
  background:var(--teal);
  color:#fff;
  border:0;
  border-radius:7px;
  padding:13px 15px;
  display:flex;
  justify-content:space-between;
  font-size:12px;
  font-weight:600;
  margin-top:18px;
}

.primary:hover {
  background:var(--ink);
}

.status {
  font-size:11px;
  color:var(--muted);
  min-height:34px;
  margin-bottom:0;
}

.status.error {
  color:#a13f24;
}

.status.busy {
  color:var(--teal);
}

output {
  font-size:13px;
  font-weight:700;
  color:var(--teal);
}

input[type=range] {
  accent-color:var(--teal);
  width:100%;
  margin:3px 0;
}

.range-ends {
  display:flex;
  justify-content:space-between;
  font-size:9px;
  color:var(--muted);
}

.fine {
  font-size:10px;
  line-height:1.65;
  color:var(--muted);
  margin:13px 0 0;
}

summary {
  cursor:pointer;
}

.exploration {
  display:grid;
  gap:21px;
}

.pill {
  font-size:10px;
  border:1px solid var(--line);
  padding:5px 10px;
  border-radius:20px;
  white-space:nowrap;
  color:var(--muted);
}

.pill.teal {
  color:var(--teal);
  border-color:#cfe1d9;
  background:#f0f6ee;
}

.scene-wrap {
  background:#182f31;
  border-radius:8px;
  position:relative;
  display:flex;
  justify-content:center;
  overflow:hidden;
  min-height:220px;
}

.scene-wrap canvas {
  display:block;
  max-width:100%;
  max-height:470px;
  width:auto;
  height:auto;
  object-fit:contain;
  touch-action:none;
}

.scene-wrap.drawing canvas {
  cursor:crosshair;
}

.feature-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:17px;
}

.feature-stage {
  background:#f4f5ee;
  border:1px solid #e4e7df;
  border-radius:8px;
  padding:12px;
}

.feature-stage h3 {
  font-size:12px;
  margin:0 0 3px;
}

.feature-stage p {
  font-size:9px;
  color:var(--muted);
  margin:2px 0 12px;
}

.tiles {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
}

.tile {
  padding:0;
  border:0;
  background:transparent;
  position:relative;
  overflow:hidden;
  border-radius:3px;
}

.tile img {
  width:100%;
  display:block;
  image-rendering:pixelated;
  aspect-ratio:1;
}

.tile span {
  position:absolute;
  bottom:2px;
  right:3px;
  color:white;
  font-size:8px;
  text-shadow:0 1px 3px #000;
}

.tile:hover {
  outline:2px solid var(--orange);
}

.feature-legend {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  font-size:9px;
  color:var(--muted);
  margin-top:18px;
}

.gradient {
  width:100px;
  height:6px;
  background:linear-gradient(90deg,#16233f,#269c9b,#fae29b);
  border-radius:5px;
}

.empty-state {
  padding:30px 15px;
  background:#f4f5ef;
  border:1px dashed #d4ded2;
  border-radius:8px;
  text-align:center;
  color:#81908a;
  font-size:12px;
  grid-column:1/-1;
}

.feature-detail {
  display:flex;
  align-items:center;
  gap:15px;
  background:var(--mint);
  border-radius:8px;
  padding:15px;
  margin-top:14px;
}

.feature-detail img {
  width:125px;
  image-rendering:pixelated;
}

.feature-detail p {
  font-size:12px;
  color:var(--muted);
}

footer {
  border-top:1px solid var(--line);
  padding:24px 4vw;
  font-size:10px;
  display:flex;
  gap:15px;
  justify-content:space-between;
}

footer a {
  text-decoration:none;
  border-bottom:1px solid #b9c9bd;
}

[hidden] {
  display:none!important;
}

@media(min-width:1400px) {
  .scene-wrap canvas {
    max-height:530px;
  }
}

@media(max-width:1050px) {
  .top-note {
    display:none;
  }

  .intro {
    gap:25px;
  }

  .workspace {
    grid-template-columns:265px minmax(0,1fr);
    gap:18px;
  }

  .arrow {
    display:none;
  }

  .feature-grid {
    gap:7px;
  }

  .feature-stage {
    padding:8px;
  }
}

@media(max-width:760px) {
  .topbar {
    padding:14px 5vw;
    gap:12px;
  }

  .brand {
    font-size:17px;
  }

  main {
    padding:26px 5vw;
  }

  .intro {
    grid-template-columns:1fr;
    gap:12px;
  }

  .big-idea {
    padding:19px 22px;
  }

  .big-idea>p:not(.eyebrow) {
    font-size:16px;
    max-width:none;
  }

  .workspace {
    grid-template-columns:1fr;
  }

  .controls {
    position:static;
  }

  .image-actions .secondary {
    flex:0 1 auto;
    padding:9px 16px;
  }

  .scene-wrap canvas {
    max-height:440px;
    max-width:100%;
  }

  .feature-grid {
    gap:9px;
  }

  .card {
    padding:18px;
  }

  .section-heading {
    align-items:flex-start;
  }

  .section-heading h2 {
    font-size:17px;
  }

  .pill {
    font-size:9px;
    padding:4px 7px;
  }

  footer {
    flex-direction:column;
  }

  .feature-stage h3 {
    font-size:10px;
  }
}

@media(prefers-reduced-motion:no-preference) {
  button {
    transition:background .16s,box-shadow .16s;
  }

  .status.busy {
    animation:pulse 1.8s infinite;
  }

  @keyframes pulse {
    50% {
      opacity:.5;
    }
  }
}