:root {
  --ink: #101010;
  --radius: 3px;
  --paper: #f5f5f4;
  --accent: #202124;
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}
body {
  background:
    radial-gradient(circle, #3030301a 0.65px, transparent 0.85px) 0 0 / 18px 18px,
    linear-gradient(112deg, transparent 33%, #66666b05 33.2%, #ffffff80 33.4%, transparent 33.7%),
    linear-gradient(174deg, transparent 62%, #66666b04 62.3%, #ffffff65 62.5%, transparent 63%),
    radial-gradient(ellipse at 30% 5%, #fafafa 0%, #ececef 62%, #e1e2e6 100%);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  accent-color: var(--ink);
  font:
    15px "Hanken Grotesk",
    sans-serif;
}
main {
  height: 100dvh;
  max-width: 1800px;
  margin: auto;
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid #20212426;
  padding-bottom: 10px;
  flex-shrink: 0;
  font-size: 13px;
  letter-spacing: 0.06em;
}
a {
  color: inherit;
  text-underline-offset: 4px;
}
h2 {
  font:
    500 20px "Hanken Grotesk",
    sans-serif;
  margin: 0;
}
button {
  font: inherit;
  color: inherit;
  background: white;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  padding: 8px 12px;
  cursor: pointer;
}
button:disabled {
  opacity: 0.5;
  cursor: wait;
}
#editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 6px 16px;
  flex-shrink: 0;
}
.inputs {
  min-width: 0;
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 16px;
  min-width: 0;
}
.inputs > div, .upload {
  min-width: 0;
}
label {
  font-size: 14px;
  display: block;
}
.upload {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--ink);
  padding: 10px;
  background: var(--paper);
  cursor: pointer;
}
.upload input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.upload:focus-within {
  outline: 2px solid var(--accent);
}
#photo-info {
  font-size: 11px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
  color: #64666a;
}
textarea,
input[type="password"] {
  font: inherit;
  font-size: 15px;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--paper);
  padding: 8px 10px;
  width: 100%;
  resize: none;
  margin-top: 4px;
}
textarea {
  height: 60px;
}
.presets {
  display: flex;
  gap: 8px;
  min-width: 0;
}
.presets button {
  padding: 3px 8px;
  font-size: 12px;
  white-space: nowrap;
  border: 1px solid #20212420;
}
#run {
  background: var(--accent);
  align-self: stretch;
  font-size: 19px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
#status {
  grid-column: 1/-1;
  margin: 0;
  font-size: 12px;
  line-height: 18px;
  height: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.result-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  gap: 10px;
}
.view-options {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}
.layout {
  white-space: nowrap;
  cursor: pointer;
  padding: 6px 9px;
  border: 1px solid #20212416;
  border-radius: var(--radius);
  background: #ffffff80;
  transition: background 160ms, border-color 160ms;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.layout:hover { background: #ffffffd9; border-color: #20212435; }
.layout:focus-within { outline: 2px solid #424449; outline-offset: 2px; }
.layout input {
  appearance: none;
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  margin: 0 2px 0 0;
  border: 1px solid #85868a;
  border-radius: var(--radius);
  background: white;
  display: grid;
  place-content: center;
  cursor: pointer;
}
.layout input:checked { background: #242529; border-color: #242529; }
.layout input:checked::after {
  content: "";
  width: 6px;
  height: 3px;
  border: solid white;
  border-width: 0 0 1.5px 1.5px;
  transform: translateY(-1px) rotate(-45deg);
}
@media (max-width: 650px) {
  .view-options { gap: 3px; }
  .layout { padding: 5px 4px; }
  .result-heading { gap: 4px; }
  .result-heading h2 { white-space: nowrap; }
}
#results {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
  gap: 18px;
}
#results.large {
  grid-template-columns: 1fr;
  grid-template-rows: repeat(2, minmax(0, 1fr));
}
.card {
  min-height: 0;
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 7px 8px;
}
.card-head {
  grid-column: 1/-1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--ink);
  padding-top: 8px;
}
.card h3 {
  font-size: 22px;
  font-weight: 500;
  margin: 0;
}
.state {
  font-size: 12px;
  color: #64666a;
  text-align: right;
}
.frame {
  grid-column: 1/-1;
  position: relative;
  min-height: 0;
  min-width: 0;
  aspect-ratio: auto !important;
  overflow: hidden;
  background: var(--paper);
  touch-action: pan-y;
  user-select: none;
}
.frame canvas {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.after {
  clip-path: inset(0 50% 0 0);
}
.divider {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: white;
  box-shadow: 0 0 0 1px #10101040;
  pointer-events: none;
}
.handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border: 1px solid #20212440;
  border-radius: var(--radius);
  background: white;
  width: 36px;
  height: 36px;
  font-size: 20px;
}
.frame input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  touch-action: pan-y;
}
.frame:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.tag {
  position: absolute;
  top: 8px;
  padding: 4px 6px;
  background: #ffffffdb;
  font-size: 11px;
  pointer-events: none;
}
.tag.before {
  right: 8px;
}
.tag.edited {
  left: 8px;
}
.overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: #ffffffb0;
  text-align: center;
  font-size: 14px;
  padding: 10px;
  pointer-events: none;
}
.overlay[hidden] {
  display: none;
}
.request {
  display: none;
}
.meta {
  grid-column: 1/-1;
  font-size: 12px;
  line-height: 16px;
  margin: 0;
  min-height: 16px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.actions {
  display: flex;
  gap: 6px;
  min-width: 0;
}
.actions button,
.inspect {
  font-size: 12px;
  padding: 7px 9px;
}
.inspect {
  align-self: start;
}
dialog {
  border: 1px solid var(--ink);
  padding: 20px;
  max-width: 700px;
  width: calc(100% - 32px);
  max-height: 85dvh;
  background: white;
  color: var(--ink);
}
dialog::backdrop {
  background: #10101066;
}
dialog .close {
  float: right;
}
dialog h2 {
  margin: 8px 0 20px;
}
pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 13px;
  background: var(--paper);
  padding: 14px;
  clear: both;
}
.error {
  color: #a12b20;
}
#unlock {
  position: fixed;
  z-index: 5;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  border: 1px solid var(--ink);
  box-shadow: 0 0 0 100vmax #ffffffed;
  padding: 20px;
  width: min(500px, calc(100% - 32px));
}
#unlock[hidden] {
  display: none;
}
#unlock button {
  margin-top: 12px;
}
#auth-status {
  font-size: 13px;
}
@media (max-width: 650px) {
  main {
    padding: 10px;
    gap: 8px;
  }
  header {
    font-size: 11px;
    padding-bottom: 8px;
  }
  #editor {
    grid-template-columns: minmax(0, 1fr) 105px;
    gap: 5px 8px;
  }
  .inputs {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .upload {
    padding: 6px 8px;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    font-size: 12px;
    gap: 10px;
  }
  #photo-info {
    flex: 1;
    min-width: 0;
    font-size: 10px;
  }
  .inputs > div > label {
    display: none;
  }
  textarea {
    height: 58px;
    font-size: 16px;
    margin: 0;
  }
  .presets {
    gap: 10px;
  }
  .presets button {
    font-size: 10px;
  }
  #run {
    font-size: 17px;
    padding: 10px;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
  }
  h2 {
    font-size: 17px;
  }
  .layout {
    font-size: 10px;
  }
  #results {
    gap: 10px;
  }
  .card {
    gap: 5px;
    grid-template-columns: 1fr;
  }
  .card-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding-top: 6px;
  }
  .card h3 {
    font-size: 20px;
  }
  .state {
    font-size: 10px;
    text-align: left;
  }
  .tag {
    font-size: 8px;
    padding: 3px;
    top: 5px;
  }
  .tag.before {
    right: 4px;
  }
  .tag.edited {
    left: 4px;
  }
  .handle {
    width: 30px;
    height: 30px;
  }
  .actions button,
  .inspect {
    font-size: 10px;
    padding: 6px;
  }
  .actions {
    gap: 4px;
  }
  .inspect {
    position: absolute;
    visibility: hidden;
  }
  .card {
    position: relative;
  }
  .meta {
    font-size: 10px;
    line-height: 14px;
    white-space: normal;
    height: 28px;
  }
  .actions {
    grid-column: 1/-1;
  }
  .card .inspect {
    position: static;
    visibility: visible;
    grid-column: 1/-1;
    justify-self: stretch;
    padding: 4px;
  }
  .card {
    grid-template-rows: auto minmax(0, 1fr) auto auto auto;
  }
}
@media (max-height: 500px) {
  main {
    padding: 6px 12px;
    gap: 4px;
  }
  header {
    padding-bottom: 4px;
    font-size: 10px;
  }
  .upload {
    padding: 5px;
  }
  textarea {
    height: 40px;
  }
  .inputs > div > label {
    display: none;
  }
  .presets {
    display: none;
  }
  #run {
    font-size: 15px;
  }
  #editor {
    gap: 3px 10px;
  }
  .result-heading h2 {
    font-size: 15px;
  }
  .card-head {
    padding-top: 3px;
  }
  .card h3 {
    font-size: 16px;
  }
  .state {
    font-size: 10px;
  }
  .card {
    gap: 3px;
  }
  .actions button,
  .inspect {
    padding: 4px;
    font-size: 10px;
  }
  .meta {
    font-size: 10px;
    height: 14px;
    min-height: 14px;
    white-space: nowrap;
  }
  .card-head {
    flex-direction: row;
  }
  .card .inspect {
    grid-column: auto;
  }
  .card {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
  }
  .actions {
    grid-column: auto;
  }
}
/* Quiet monochrome surfaces leave colour to the photographs. */
.brand {
  font-size: 20px;
  letter-spacing: -0.06em;
  text-decoration: none;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 7px;
}
.brand span {
  font-weight: 400;
  color: #64666a;
}
.brand small {
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.055em;
  line-height: 1;
  margin-left: 12px;
  white-space: nowrap;
}
header > span {
  letter-spacing: 0;
  color: #64666a;
}
.inputs {
  background: #ffffffb8;
  padding: 10px;
  border: 1px solid #20212426;
  border-radius: var(--radius);
}
.upload {
  background: #fff;
  border-style: dashed;
}
textarea {
  background: white;
  border-color: #20212420;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 3px 0 #20212410;
}
#run {
  background: #101010;
  color: white;
  position: relative;
  overflow: hidden;
  transition:
    background 0.2s,
    transform 0.2s,
    box-shadow 0.2s;
}
#run:hover:not(:disabled) {
  background: #303236;
  box-shadow: 0 4px 0 #20212418;
}
#run:active:not(:disabled) {
  transform: translateY(2px);
}
.result-heading h2 {
  font-size: 20px;
  letter-spacing: -0.02em;
}
.card-head {
  border-top: 0;
  padding: 4px 0 8px;
}
.card h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 20px;
  letter-spacing: -0.04em;
}
.card h3:before {
  content: "";
  height: 10px;
  width: 10px;
  background: var(--accent);
  display: block;
}
.card[data-model="luna"] h3:before {
  background: #202124;
}
.frame {
  background: radial-gradient(ellipse at center, #f1f2f3, white);
  border-radius: var(--radius);
  isolation: isolate;
  box-shadow: inset 0 0 0 1px #10101012;
}
.frame:after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px #10101010;
  pointer-events: none;
}
.handle {
  box-shadow: 0 2px 15px #10101025;
  transition:
    box-shadow 0.2s,
    background 0.2s;
}
.frame:hover .handle,
.revealing .handle {
  background: white;
  box-shadow:
    0 0 0 6px #ffffff40,
    0 4px 16px #10101020;
}
.card[data-model="luna"].revealing .handle,
.card[data-model="luna"] .frame:hover .handle {
  background: white;
  box-shadow: 0 0 0 6px #ffffff40;
}
.divider {
  box-shadow: 0 0 12px #10101030;
}
.tag {
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 9px;
  letter-spacing: 0.05em;
  background: #fffffff0;
  padding: 6px 8px;
}
.overlay {
  background: #ffffff70;
  backdrop-filter: blur(3px);
  transition: background 0.2s;
}
.overlay:not([hidden]) {
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 12px;
}
.working .overlay:before {
  content: "";
  position: absolute;
  width: 32px;
  height: 2px;
  top: calc(50% - 25px);
  background: var(--accent);
  animation: breathe 1.2s ease-in-out infinite;
}
.working[data-model="luna"] .overlay:before {
  background: #101010;
}

.actions button,
.inspect {
  border-color: #20212420;
  background: #ffffffd9;
  transition: background 0.15s;
}
.actions button:hover:not(:disabled),
.inspect:hover {
  background: #e9eaeb;
}
.actions .download {
  background: #101010;
  color: white;
}
.actions .download:hover:not(:disabled) {
  background: #303236;
}
.meta {
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 11px;
  color: #64666a;
}
.revealing .tag.edited {
  background: white;
}
.revealing[data-model="luna"] .tag.edited {
  background: white;
}
@keyframes breathe {
  50% {
    transform: scaleX(2);
    opacity: 0.4;
  }
}
@media (max-width: 650px) {
  .brand {
    font-size: 18px;
  }
  .brand small {
    display: block;
    font-size: 22px;
    margin-left: 5px;
  }
  header > span {
    display: none;
  }
  header > span {
    font-size: 10px;
  }
  .inputs {
    padding: 6px;
    gap: 5px;
  }
  .upload {
    border: 0;
    padding: 3px 4px;
  }
  .presets {
    gap: 8px;
  }
  .result-heading h2 {
    font-size: 18px;
  }
  .card h3 {
    font-size: 18px;
  }
  .card-head {
    padding: 2px 0 3px;
    flex-direction: row;
    align-items: center;
  }
  .state {
    font-size: 9px;
  }
  .tag {
    font-size: 8px;
    padding: 4px;
  }
  .meta {
    font-size: 9px;
  }
  .actions {
    gap: 4px;
  }
  .actions button {
    font-size: 10px;
    padding: 6px;
  }
  .card {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
  }
  .card .inspect {
    grid-column: auto;
    align-self: start;
    padding: 6px;
    font-size: 10px;
  }
  .actions {
    grid-column: auto;
  }
}
@media (max-height: 500px) {
  .inputs {
    padding: 5px;
  }
  .brand {
    font-size: 16px;
  }
  .result-heading h2 {
    font-size: 17px;
  }
  .card h3 {
    font-size: 18px;
  }
  .card-head {
    padding: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
  }
}
.image-stage {
  grid-column: 1 / -1;
  min-height: 0;
  min-width: 0;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.decisions {
  position: absolute;
  bottom: 12px;
  left: 12px;
  width: min(300px, calc(100% - 24px));
  background: #fffffff0;
  border: 1px solid #ffffffcc;
  border-radius: var(--radius);
  backdrop-filter: blur(16px);
  padding: 12px 16px 16px;
  box-shadow: 0 5px 30px #10101018;
  z-index: 2;
  --accent: #202124;
}
.decisions[hidden] {
  display: none;
}
[data-model="luna"] .decisions {
  --accent: #202124;
}
.decision-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}
.decision-heading > div {
  display: flex;
  gap: 8px;
  align-items: center;
}
.decision-heading button {
  border: 0;
  padding: 0 5px;
  font-size: 17px;
  background: transparent;
}
.decision-heading button:disabled {
  cursor: default;
  opacity: 0.25;
}
.decision-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 8px;
  margin-top: 12px;
}
.decision-label {
  font-size: 11px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.decision-row output {
  font:
    11px "Hanken Grotesk",
    sans-serif;
}
.decision-row[data-control="profile"] {
  grid-template-columns: 1fr;
}
.decision-track {
  grid-column: 1/-1;
  height: 2px;
  background: #10101020;
  position: relative;
  margin: 3px 4px;
}
.decision-track i {
  position: absolute;
}
.neutral-tick {
  width: 1px;
  top: -3px;
  height: 8px;
  background: #10101040;
}
.decision-fill {
  height: 2px;
  background: var(--accent);
}
.decision-thumb {
  width: 8px;
  height: 8px;
  top: -3px;
  border-radius: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  box-shadow: 0 0 0 2px white;
}
.playing .decision-thumb {
  background: var(--accent);
}
.playing .decision-heading > span:before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  background: var(--accent);
  margin-right: 6px;
}
.capabilities {
  font-size: 14px;
  line-height: 1.5;
  clear: both;
}
@media (max-width: 650px) and (orientation: portrait) {
  main {
    gap: 5px;
  }
  header {
    padding-bottom: 5px;
  }
  .inputs {
    padding: 4px;
    gap: 3px;
  }
  textarea {
    height: 44px;
    padding: 5px 7px;
  }
  .presets button {
    padding: 1px 0;
  }
  #status {
    height: 14px;
    line-height: 14px;
    font-size: 10px;
  }
  .result-heading h2 {
    font-size: 19px;
  }
  .card .meta {
    height: 14px;
    min-height: 14px;
    white-space: nowrap;
  }
  .image-stage:has(.decisions:not([hidden])) {
    grid-template-columns: minmax(0, 1fr) 116px;
    gap: 6px;
  }
  .image-stage .frame {
    grid-column: 1;
  }
  .image-stage .decisions {
    position: static;
    width: auto;
    align-self: center;
    box-shadow: none;
    padding: 5px 4px;
    background: var(--paper);
  }
  .decision-heading {
    flex-wrap: wrap;
  }
  .decision-heading > div {
    width: 100%;
    justify-content: space-between;
  }
}
@media (max-width: 650px), (max-height: 500px) {
  .decisions {
    bottom: 5px;
    left: 5px;
    padding: 4px 9px 7px;
    width: min(250px, calc(100% - 10px));
  }
  .decision-heading {
    margin-bottom: 2px;
    font-size: 8px;
  }
  .decision-heading button {
    font-size: 14px;
  }
  .decision-row {
    margin-top: 4px;
    gap: 2px 5px;
  }
  .decision-label,
  .decision-row output {
    font-size: 9px;
  }
  .decision-track {
    margin: 3px;
  }
  .decision-row[data-control="profile"] {
    grid-template-columns: 1fr auto;
  }
}

/* Prompt suggestions are small, clickable labels, not primary actions. */
.presets { align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.presets-caption { font-size: 11px; color: #64666a; margin-right: 3px; white-space: nowrap; }
.presets button { padding: 4px 8px; border: 1px solid #20212424; border-radius: var(--radius); background: #ffffffa6; font-size: 11px; line-height: 1.2; transition: background 150ms, border-color 150ms; }
.presets button:hover:not(:disabled) { background: #e8e9ec; border-color: #20212465; }
.presets button[aria-pressed="true"] { background: #e1e3e6; border-color: #62646a; color: #101010; }
.presets button:focus-visible { outline: 2px solid #424449; outline-offset: 2px; }
@media (max-width: 650px) {
  .presets { gap: 4px; margin-top: 4px; }
  .presets-caption { width: 100%; font-size: 9px; line-height: 1; }
  .presets button { font-size: 10px; padding: 3px 4px; }
}

.handle i { display: block; width: 7px; height: 12px; border-left: 1px solid currentColor; border-right: 1px solid currentColor; }