/* Piece #1: A Window. Scoped to .piece-body by convention. */
.sub{font-size:clamp(1.1rem,2.4vw,1.4rem);line-height:1.4;margin:0 auto 26px;max-width:1100px;color:var(--ink)}
.sub em{font-style:italic;color:var(--accent)}
.stage{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr;gap:34px;align-items:start}
.window{margin:0;position:relative}
.frame{position:relative;padding:11px;background:linear-gradient(145deg,var(--frame),var(--frameShade));border-radius:4px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.6), inset 0 0 0 1px rgba(0,0,0,.15), 0 0 120px -10px color-mix(in srgb, var(--glow) 45%, transparent)}
#view{display:block;width:100%;height:auto;aspect-ratio:5/4;background:#0b1029;box-shadow:inset 0 0 0 2px rgba(0,0,0,.25)}
.mullions{position:absolute;inset:11px;pointer-events:none}
.mullions i{position:absolute;background:linear-gradient(90deg,var(--frameShade),var(--frame),var(--frameShade));box-shadow:0 0 6px rgba(0,0,0,.35)}
.mullions .v{left:calc(50% - 4px);top:0;bottom:0;width:8px}
.mullions .h{top:calc(50% - 4px);left:0;right:0;height:8px;background:linear-gradient(var(--frame),var(--frameShade))}
.glass{position:absolute;inset:11px;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 28%,rgba(255,255,255,0) 60%,rgba(255,255,255,.06) 70%,rgba(255,255,255,0) 80%)}
.sill{height:22px;margin:0 -10px;background:linear-gradient(var(--frame),var(--frameShade));border-radius:3px;box-shadow:0 12px 24px -8px rgba(0,0,0,.6);position:relative}
.plant{position:absolute;bottom:20px;left:8%;width:34px;height:30px;background:#b5654a;border-radius:2px 2px 8px 8px;transform:scale(.62);transform-origin:bottom left}
.plant::before{content:"";position:absolute;bottom:26px;left:-10px;width:54px;height:46px;
  background:radial-gradient(ellipse 30% 45% at 30% 60%,#3f7a4f 60%,transparent 62%),radial-gradient(ellipse 26% 50% at 70% 50%,#4d8f5c 60%,transparent 62%),radial-gradient(ellipse 22% 48% at 50% 30%,#5aa067 60%,transparent 62%)}
.mug{position:absolute;bottom:20px;right:10%;width:26px;height:26px;background:#d8d0c4;border-radius:2px 2px 6px 6px;transform:scale(.7);transform-origin:bottom right}
.mug::after{content:"";position:absolute;right:-9px;top:5px;width:10px;height:12px;border:3px solid #d8d0c4;border-left:0;border-radius:0 8px 8px 0}
.plate{font-family:var(--mono);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);text-align:center;margin-top:16px}
.diary{background:var(--paper);color:var(--paperInk);padding:28px 24px 22px;border-radius:2px;transform:rotate(.6deg);
  box-shadow:0 20px 40px -18px rgba(0,0,0,.7);position:relative;
  background-image:repeating-linear-gradient(transparent 0 31px, rgba(44,36,51,.09) 31px 32px);line-height:32px;font-size:1.08rem}
.diary::before{content:"";position:absolute;top:-12px;left:50%;width:90px;height:24px;transform:translateX(-50%) rotate(-3deg);background:rgba(255,230,170,.55)}
.diary p{margin:0}
.diary #diaryText p{margin-bottom:32px}
.diary .date{font-family:var(--mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;opacity:.65}
.diary .sign{font-style:italic;text-align:right;opacity:.75}
.diary.fresh #diaryText p{animation:ink .9s ease both}
.diary.fresh #diaryText p:nth-child(2){animation-delay:.25s}
.diary.fresh #diaryText p:nth-child(3){animation-delay:.5s}
@keyframes ink{from{opacity:0;filter:blur(3px)}}
.actions{max-width:1100px;margin:34px auto 0;display:flex;flex-wrap:wrap;gap:12px}
.actions .btn{flex:1 1 calc(50% - 12px);text-align:center}
.toast{max-width:1100px;margin:12px auto 0;min-height:1.4em;font-family:var(--mono);font-size:.85rem;color:var(--accent)}
.win-about{margin:50px auto 0}
.win-about .fine{font-size:.88rem}
@media (min-width:821px){
  .stage{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:40px}
  .frame{padding:16px}
  .mullions,.glass{inset:16px}
  .mullions .v{width:12px;left:calc(50% - 6px)}
  .mullions .h{height:12px;top:calc(50% - 6px)}
  .sill{margin:0 -18px}
  .plant,.mug{transform:none}
  .diary{transform:rotate(1.2deg);padding:28px 28px 22px}
  .actions .btn{flex:0 0 auto}
}