/* The artwork is a sequence of studies, revisions and material traces.
   Keep all composition rules inside the player, including its inline form. */
#app #player {
  --paper: #e9e5dc;
  --ink: #2a302b;
  --muted: #6b7066;
  --line: #bbbdb1;
  --accent: #8c4939;
  container-type: size;
  border-radius: 2px;
  background: var(--paper);
  color: var(--ink);
}
#app #player[data-surface="dark"] {
  --paper: #151918;
  --ink: #d8ddd2;
  --muted: #949e90;
  --line: #495147;
  --accent: #b19476;
}
#app #player .stage { inset: clamp(20px, 5cqw, 76px); overflow: visible; }
#app .chat-thinking[data-state="paused"] + #player .stage { bottom: max(56px, 5cqw); }
#app #player .scene { overflow: hidden; }
#app #player .work-surface {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  display: block;
  position: relative;
  isolation: isolate;
}
#app #player .scene-enter { animation: study-appear 650ms both; }
#app #player .scene-exit { animation: study-disappear 500ms forwards; }
@keyframes study-appear { from { opacity: 0; } to { opacity: 1; } }
@keyframes study-disappear { to { opacity: 0; } }
#app #player .material-note {
  position: absolute;
  inset: 0 0 auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  color: var(--muted);
  font-size: clamp(9px, 1cqw, 13px);
  letter-spacing: .04em;
  z-index: 3;
}
#app #player .material-note > :first-child { color: var(--ink); }
#app #player .working-note {
  position: absolute;
  bottom: 0;
  left: 0;
  color: var(--muted);
  font-size: clamp(9px, 1cqw, 13px);
  letter-spacing: .02em;
}
#app #player .study-sheet { width: 100%; height: 100%; object-fit: contain; }
#app #player .opening-sheet { position: absolute; inset: 3% 8%; opacity: .45; }

/* A corrected word sits beside a drawing, with the old word still present. */
#app #player .spatial-sheet { position: absolute; inset: 8% -8% 6% 23%; }
#app #player .revision-text {
  position: absolute;
  inset: 23% auto auto 4%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -.045em;
  font-size: clamp(26px, 5.9cqw, 90px);
  z-index: 2;
}
#app #player .revision-prefix,
#app #player .revision-suffix { font-size: .47em; letter-spacing: -.03em; }
#app #player .revision-prefix { margin-bottom: .7em; }
#app #player .revision-suffix { margin-top: .65em; }
#app #player .revision-word { position: relative; min-height: 2.6em; }
#app #player .earlier-word { display: block; color: var(--ink); }
#app #player .earlier-word.is-erased { color: #96998d; }
#app #player .earlier-word.is-erased::after {
  content: "";
  position: absolute;
  left: -.035em;
  right: -.06em;
  top: .63em;
  border-top: 1px solid #626d60;
  transform: rotate(-3deg);
}
#app #player .later-word { display: block; margin-left: .38em; color: #3b493b; }

/* Two aligned studies accumulate; no imitation brush, pencil or mannequin. */
#app #player .material-layer { position: absolute; inset: 8% -3% 8% 13%; }
#app #player .material-layer img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}
#app #player .over-drawing { opacity: 0; }
#app #player .study-fragment {
  position: absolute;
  left: -3%;
  top: 28%;
  width: 33%;
  height: 51%;
  overflow: hidden;
  mix-blend-mode: multiply;
  opacity: .7;
}
#app #player .study-fragment img { width: 180%; height: 135%; object-fit: cover; transform: translate(-29%, -10%); }
#app #player .cloth-composition .material-layer { inset: 5% -7% 5% 6%; }
#app #player .cloth-composition .study-fragment { top: 17%; left: -5%; width: 39%; height: 64%; }

/* The actual source is the manuscript; the typing remains tied to its score. */
#app #player .code-manuscript {
  position: absolute;
  inset: 18% 1% 10%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#app #player .code-row { display: grid; grid-template-columns: 2.5em minmax(0, 1fr); gap: clamp(18px, 3cqw, 48px); }
#app #player .code-line-layers { position: relative; min-width: 0; }
#app #player .code-row,
#app #player .code-text,
#app #player .code-imprint,
#app #player .code-line-number {
  font: 400 clamp(12px, 1.85cqw, 27px)/1.9 var(--mono);
  letter-spacing: -.03em;
  margin: 0;
  min-height: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  tab-size: 2;
}
#app #player .code-imprint { opacity: .13; }
#app #player .code-line-number { color: #697267; text-align: right; }
#app #player .code-text { position: absolute; inset: 0; color: var(--ink); }
#app #player .code-caret { width: 1px; height: 1.15em; margin-left: 2px; background: #b19476; }

/* An engraved field follows the four audible notes and their decay. */
#app #player .resonance-field { position: absolute; inset: 4% -4% 9%; }
#app #player .resonance-canvas { display: block; width: 100%; height: 100%; }
#app #player .score-notes {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  gap: clamp(20px, 4cqw, 64px);
  font: 400 clamp(14px, 1.7cqw, 25px)/1 var(--serif);
  color: #6c786c;
}
#app #player .score-notes .on { color: #d9d2be; }
#app #player .music-result .working-note {
  font: 400 clamp(20px, 3cqw, 42px)/1.3 var(--serif);
  letter-spacing: -.04em;
  color: var(--ink);
}

/* A short contact sheet, then a moment to let the process settle. */
#app #player .echo-strip {
  position: absolute;
  inset: 10% -2%;
  display: grid;
  grid-template-columns: 1.1fr .8fr 1.2fr;
  gap: 3%;
  align-items: center;
  mix-blend-mode: multiply;
}
#app #player .echo-strip img { width: 100%; height: 68%; object-fit: cover; }
#app #player .echo-strip img:nth-child(2) { height: 50%; align-self: start; margin-top: 16%; }
#app #player .echo-strip img:nth-child(3) { height: 85%; align-self: end; }
#app #player .afterimage {
  width: 62%;
  display: flex;
  flex-direction: column;
  gap: .15em;
  font: 400 clamp(26px, 5.5cqw, 80px)/1.4 var(--serif);
  letter-spacing: -.045em;
}
#app #player .afterimage > :first-child { color: var(--muted); }

/* Results are plates in an exhibition, with a single quiet caption. */
#app #player .result-plate { position: absolute; inset: 0 0 clamp(28px, 4cqh, 48px); overflow: hidden; }
#app #player .result-art { width: 100%; height: 100%; object-fit: contain; filter: none; }
#app #player .result-caption {
  position: absolute;
  inset: auto 0 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: clamp(12px, 2cqw, 32px);
  font-size: clamp(10px, 1.1cqw, 15px);
  letter-spacing: .01em;
}
#app #player .result-index { font: 400 .8em/1 var(--mono); color: var(--muted); }
#app #player .result-caption .result-medium { font: 400 .7em/1 var(--mono); letter-spacing: .06em; color: var(--muted); }
#app #player .stage-result .result-plate { inset: -6% -6% 5%; }
#app #player .paint-result .result-art,
#app #player .fashion-result .result-art { mix-blend-mode: multiply; }
#app #player .code-result .result-plate { inset: 3% 3% 9%; }
#app #player .transport { color: var(--ink); }
#app #player .transport .icon-button { width: 36px; height: 36px; }
#app #player #restart-button span { font-size: 11px; }

@container (max-width: 600px) {
  #app #player .stage { inset: 22px; }
  #app #player .material-note { gap: 12px; }
  #app #player .material-note > :last-child { text-align: right; }
  #app #player .spatial-sheet { inset: 7% -24% 9% 1%; opacity: .65 !important; }
  #app #player .revision-text { inset: 21% auto auto 3%; font-size: clamp(30px, 7.5cqw, 45px); }
  #app #player .material-layer { inset: 5% -30% 8% -9%; }
  #app #player .study-fragment { top: 41%; left: -16%; width: 49%; height: 40%; }
  #app #player .cloth-composition .material-layer { inset: 12% -10% 10% -8%; }
  #app #player .cloth-composition .material-layer img { object-fit: cover; }
  #app #player .cloth-composition .study-fragment { top: 14%; left: -19%; width: 47%; }
  #app #player .code-manuscript { inset: 15% 0 12%; }
  #app #player .code-row { gap: 12px; }
  #app #player .code-row,
  #app #player .code-text,
  #app #player .code-imprint,
  #app #player .code-line-number { font-size: clamp(12px, 3.2cqw, 16px); line-height: 1.85; }
  #app #player .resonance-field { inset: 6% -32% 14%; }
  #app #player .score-notes { gap: 18px; }
  #app #player .echo-strip { inset: 13% -26%; gap: 4%; }
  #app #player .afterimage { width: 80%; font-size: 36px; }
  #app #player .result-caption { gap: 9px; }
  #app #player .result-caption .result-medium { font-size: 7px; }
  #app #player .result-plate { inset: 0 -12% 35px; }
  #app #player .stage-result .result-plate { inset: 0 -20% 35px; }
  #app #player .fashion-result .result-art { object-fit: cover; }
  #app #player .code-result .result-plate { inset: 0 -4% 35px; }
}
@media (prefers-reduced-motion: reduce) {
  #app #player .scene-enter,
  #app #player .scene-exit { animation-duration: .01ms; }
  #app #player .code-caret { animation: none; }
}