/*
 * untended.css
 *
 * One painting, centered on a black field — the vanitas genre's own
 * backdrop, kept as the page background rather than styled over. Almost
 * everything else here is the same restrained meta-chrome pattern as
 * decay.css/mutate.css: a tiny fixed corner readout, a quiet return link,
 * nothing that competes with the canvas itself.
 */

*{box-sizing:border-box}
html,body{
  margin:0;height:100%;background:#050505;color:#ddd8d0;
  font-family:'Space Mono',monospace;
}

.ut-stage{
  min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1.15rem;padding:3rem 1.2rem;
}

/* the frame starts loose/incomplete (dashed, faint) and restores to a
   solid line once this visit's own tending sweep settles (.settled,
   toggled from untended.js) — a small, concrete "you did this" reward
   distinct from the wipe reveal itself, which stays smooth on purpose;
   this one is allowed to land with a definite click. */
#gardenCanvas{
  width:min(88vw,640px);height:min(88vw,640px);
  background:#000;box-shadow:0 30px 70px -30px rgba(0,0,0,.8);
  border-radius:2px;cursor:pointer;touch-action:none;
  border:1px dashed rgba(221,216,208,.22);
}
#gardenCanvas.settled{
  border:1px solid rgba(221,216,208,.6);
  animation:ut-settle .8s ease-out;
}
@keyframes ut-settle{
  0%{box-shadow:0 30px 70px -30px rgba(0,0,0,.8),0 0 0 2px rgba(221,216,208,.55);}
  100%{box-shadow:0 30px 70px -30px rgba(0,0,0,.8),0 0 0 16px rgba(221,216,208,0);}
}

/* the top-of-page explanation — the one place on this page allowed to
   just say what's going on, rather than making you find it by hovering.
   Plain sans prose, then the thesis line breaks into the same italic
   serif the caption below uses, so the two read as one register. */
.ut-intro{margin:0;text-align:center;max-width:27rem}
.ut-intro p{
  margin:0;font-family:'Inter',system-ui,sans-serif;font-size:.85rem;
  line-height:1.6;color:#a5a099;
}
.ut-intro .ut-thesis{
  margin-top:.6rem;font-family:'Instrument Serif',Georgia,serif;font-style:italic;
  font-size:clamp(1.05rem,2.2vw,1.35rem);color:#ddd8d0;opacity:.9;
}

.ut-caption{margin:0;text-align:center;max-width:36rem}
.ut-caption p{margin:0}
.ut-caption p:first-child{
  font-family:'Instrument Serif',Georgia,serif;font-style:italic;
  font-size:clamp(1rem,2vw,1.25rem);color:#ddd8d0;opacity:.82;
}
.ut-caption .ut-sub{
  margin-top:.4rem;font-size:.72rem;letter-spacing:.04em;color:#8f8b84;opacity:.7;
}

.ut-chrome{
  font-size:9px;letter-spacing:.1em;color:#5a564f;opacity:.55;text-transform:lowercase;
  text-align:center;max-width:30rem;
}

.ut-return{
  position:fixed;top:20px;right:24px;z-index:9998;
  font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.12em;
  color:#5a564f;opacity:.5;text-decoration:none;text-transform:lowercase;
  transition:opacity .4s;
}
.ut-return:hover{opacity:.9}

.ut-banner{
  max-width:34rem;margin:0 auto;padding:14px 16px;
  background:#241f16;border:1px solid #4a3c1f;border-radius:6px;
  font-family:'Inter',system-ui,sans-serif;font-size:12px;line-height:1.7;color:#c9a559;
}
.ut-banner code{background:#14120d;padding:1px 5px;border-radius:3px}

/* the wipe brush's reach, made visible — a ring in real screen pixels,
   positioned/sized from JS. A stacked light/dark/light outline (not a
   blend mode) so it reads as a solid, unambiguous line against anything
   underneath — the painting's own dark background made mix-blend-mode
   too subtle to register as "doing something" on first hover. Appears
   and disappears instantly (no fade-in of its own) so there's no lag
   between moving the cursor and seeing where it reaches. */
.ut-halo{
  position:fixed;top:0;left:0;width:0;height:0;
  transform:translate(-50%,-50%);
  border-radius:50%;
  pointer-events:none;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.75),
    0 0 0 3px rgba(255,255,255,.95),
    0 0 0 4px rgba(0,0,0,.55);
  opacity:0;
  z-index:50;
}
.ut-halo.visible{opacity:1}
/* a small solid dot marks the exact center, separate from the reach ring */
.ut-halo::after{
  content:'';position:absolute;top:50%;left:50%;width:6px;height:6px;
  transform:translate(-50%,-50%);border-radius:50%;
  background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.75);
}

@media (max-width:520px){
  .ut-stage{padding:2.2rem 1rem;gap:1.1rem}
}