/* Home assembled from the supplied illustration assets. */
.home-canvas{position:relative}
.home-view{position:relative;isolation:isolate;min-height:max(100vh,849px);background:#f8f1e8 url("assets/background.png") center top/100% auto no-repeat}
.home-view:after{content:"";position:absolute;z-index:1;pointer-events:none;left:0;right:0;top:660px;bottom:0;background:#eee9e1;mix-blend-mode:saturation;opacity:.28}
.home-view .window,.home-view .floor,.home-view .desk{display:none}
.home-view .topbar{padding-left:10.1%}
.desk-scene{position:absolute;inset:0}
.scene-desk-surface{display:none}

/* The supplied background already contains the four-pane window and level desk. */
.scene-copy{top:477px;left:12.1%;z-index:5}.scene-copy p{margin-bottom:4px;font-size:18px}.scene-copy span{font-size:12px}

/* Preserve the clickable zones while replacing their artwork with the supplied PNGs. */
.jar-zone{left:-2%;top:505px;width:270px;height:310px;z-index:6}
.jar{width:285px;height:285px;background:url("assets/jar.png") center/contain no-repeat}
.jar-neck{display:none}.jar-body{top:71px;left:65px;width:157px;height:177px;background:transparent;box-shadow:none;border:0;border-radius:22px 22px 38px 38px;overflow:hidden}.jar-body:before,.jar-body:after{display:none}
.bubbles{overflow:hidden;border-radius:19px 19px 33px 33px}.orb{background:var(--orb);background-position:center;background-size:165%;background-repeat:no-repeat;opacity:.86;box-shadow:none}.orb.dropping{animation:jar-ball-drop .82s cubic-bezier(.2,.72,.3,1.18) both}
#jarBubbles .orb{background-color:transparent!important}
#jarBubbles .orb{filter:saturate(1.05) drop-shadow(0 1px 1px #5d554018);box-shadow:none}
#flyingOrb{top:0;left:0;background-position:center;background-size:165%;background-repeat:no-repeat}
@keyframes jar-ball-drop{0%{transform:translate(var(--drop-from-x),-145px) scale(.72);opacity:0}18%{opacity:.9}72%{transform:translate(0,6px) scale(1.04);opacity:.9}100%{transform:translate(0,0) scale(1);opacity:.86}}

.paper-note{top:512px;right:1%;width:265px;height:265px;padding:0;border:0;border-radius:0;background:url("assets/paper.png") center/contain no-repeat;box-shadow:none;transform:none}.paper-note:hover{transform:translateY(-4px)}.paper-note em,.paper-note small,.paper-note .paper-lines{display:none}
.pencil{display:block;top:696px;right:1%;left:auto;width:278px;height:94px;background:url("assets/pen.png") center/contain no-repeat;box-shadow:none;transform:none}

/* Use the provided pastel balls in the six emotion controls as well. */
.emotion:nth-child(1) i{background-image:url("assets/ball-yellow.png")}.emotion:nth-child(2) i{background-image:url("assets/ball-blue.png")}.emotion:nth-child(3) i{background-image:url("assets/ball_purple.png")}.emotion:nth-child(4) i{background-image:url("assets/ball-red.png")}.emotion:nth-child(5) i{background-image:url("assets/ball-green.png")}.emotion:nth-child(6) i{background-image:url("assets/ball-orange.png")}
.emotion i{background-color:transparent!important;background-size:145%;background-position:center;background-repeat:no-repeat}

@keyframes note-sway{0%,100%{transform:translateY(0) rotate(0)}35%{transform:translateY(-5px) rotate(-1deg)}70%{transform:translateY(-2px) rotate(.6deg)}}
@keyframes pen-nudge{0%,100%{transform:translateY(0) rotate(0)}45%{transform:translateY(-4px) rotate(1.2deg)}75%{transform:translateY(-2px) rotate(-.5deg)}}
@keyframes jar-breathe{0%,100%{transform:translateY(0) rotate(0)}45%{transform:translateY(-3px) rotate(-1deg)}75%{transform:translateY(-1px) rotate(.6deg)}}
@media (hover:hover){
  .paper-note:hover{animation:note-sway .62s ease-in-out both}
  .pencil:hover{animation:pen-nudge .58s ease-in-out both}
  .jar-zone:not(.shake):hover .jar{animation:jar-breathe .7s ease-in-out both}
}

/* Desktop home: preserve the 520 × 849 illustration as one coordinate system.
   JavaScript changes only --home-scene-scale; child artwork keeps its existing
   coordinates and is never individually resized or repositioned. */
@media (min-width:601px){
  html.desktop-home-canvas,
  html.desktop-home-canvas body{
    width:100%;
    min-height:100%;
    overflow:hidden;
    background:#e6ded2;
  }

  html.desktop-home-canvas .app-shell:has(.home-view.active){
    position:relative;
    width:100vw;
    max-width:none;
    min-height:100vh;
    height:100vh;
    margin:0;
    overflow:hidden;
    background:transparent;
    box-shadow:none;
  }

  html.desktop-home-canvas .home-view.active{
    width:100%;
    min-height:0;
    height:100%;
    overflow:hidden;
    background:#e6ded2;
  }

  html.desktop-home-canvas .home-view.active::after{
    display:none;
  }

  html.desktop-home-canvas .home-canvas{
    position:absolute;
    top:50%;
    left:50%;
    width:520px;
    height:849px;
    overflow:hidden;
    isolation:isolate;
    background:#f8f1e8 url("assets/background.png") center top/100% auto no-repeat;
    transform:translate(-50%,-50%) scale(var(--home-scene-scale,1));
    transform-origin:center center;
  }

  html.desktop-home-canvas .home-canvas::after{
    content:"";
    position:absolute;
    z-index:1;
    pointer-events:none;
    inset:660px 0 0;
    background:#eee9e1;
    mix-blend-mode:saturation;
    opacity:.28;
  }

  html.desktop-home-canvas .home-canvas .topbar{
    padding-left:10.1%;
  }

  /* Record and memory use the same fixed design space as Home. Only their
     outer canvases scale; the form, card, text, and buttons keep their layout. */
  html.desktop-scene-canvas,
  html.desktop-scene-canvas body{
    width:100%;
    min-height:100%;
    overflow:hidden;
    background:#e6ded2;
  }

  html.desktop-scene-canvas .app-shell:has(.record-view.active),
  html.desktop-scene-canvas .app-shell:has(.modal-view.active),
  html.desktop-scene-canvas .app-shell:has(.stats-view.active){
    position:relative;
    width:100vw;
    max-width:none;
    min-height:100vh;
    height:100vh;
    margin:0;
    overflow:hidden;
    background:transparent;
    box-shadow:none;
  }

  html.desktop-scene-canvas .record-view.active,
  html.desktop-scene-canvas .modal-view.active,
  html.desktop-scene-canvas .stats-view.active{
    position:relative;
    width:100%;
    min-height:0;
    height:100%;
    overflow:hidden;
    background:#e6ded2;
  }

  html.desktop-scene-canvas .record-canvas,
  html.desktop-scene-canvas .memory-canvas,
  html.desktop-scene-canvas .stats-canvas{
    position:absolute;
    top:50%;
    left:50%;
    width:520px;
    height:849px;
    overflow:hidden;
    transform:translate(-50%,-50%) scale(var(--scene-canvas-scale,1));
    transform-origin:center center;
  }

  html.desktop-scene-canvas .record-canvas{
    background:#f5eee4;
  }

  html.desktop-scene-canvas .record-canvas .record-paper{
    min-height:737px;
  }

  html.desktop-scene-canvas .modal-view.active{
    display:block;
  }

  html.desktop-scene-canvas .memory-canvas{
    display:flex;
    align-items:center;
    justify-content:center;
    isolation:isolate;
    background:var(--memory-bg,#e5ece5);
  }

  html.desktop-scene-canvas .stats-canvas{
    background:#f5eee4;
    overflow-x:hidden;
    overflow-y:auto;
  }
}

@media(max-width:380px){.home-view{min-height:700px}.home-view:after{top:484px}.scene-copy{top:395px}.jar-zone{top:409px;left:-4%;transform:scale(.82);transform-origin:left top}.paper-note{top:417px;right:-8%;transform:scale(.82);transform-origin:right top}.paper-note:hover{transform:scale(.82) translateY(-4px)}.pencil{top:566px;right:-1%;width:190px;height:64px}}