:root{
  --cream:#F2EDE4; --paper:#EFE6D6; --ink:#1A1410; --muted:rgba(242,237,228,.58); --faint:rgba(242,237,228,.16);
  --amber:#E0A867; --gold:#D9AE5F; --rust:#9A4A2A;
  --mono:"Space Mono",ui-monospace,Menlo,Consolas,monospace;
  --script:"Pinyon Script",cursive; --serif:"Cormorant Garamond",Georgia,serif; --dot:"Doto",var(--mono);
  --thai:"Kanit",var(--mono);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:#120d0b}
body{margin:0;min-height:100svh;color:var(--cream);font-family:var(--mono);background:#120d0b;overflow-x:hidden;-webkit-font-smoothing:antialiased}
#desk,#dust,#sky{position:fixed;inset:0;width:100vw;height:100lvh;display:block;pointer-events:none}
#desk{z-index:0;transition:filter .7s ease}#sky{z-index:1;opacity:.34;mix-blend-mode:screen;transition:opacity .7s ease}#dust{z-index:1;transition:opacity .5s}

/* lamp off: the desk sinks into the dark and the ASCII sky comes out */
body.lights-off #desk{filter:brightness(.26) saturate(.55)}
body.lights-off #sky{opacity:1}
body.lights-off #dust{opacity:0}
body.lights-off .hang [data-star]{filter:drop-shadow(0 0 18px rgba(255,205,130,.75)) drop-shadow(0 0 40px rgba(255,190,110,.35))}

/* the hanging brass star on its pull cord */
.hang{all:unset;position:absolute;top:0;right:max(18px,calc(50vw - 330px));z-index:6;display:flex;flex-direction:column;align-items:center;
  transform-origin:50% 0;animation:swing 5.5s ease-in-out infinite;cursor:grab;touch-action:none;-webkit-tap-highlight-color:transparent;--pull:0px}
.hang.pulling{cursor:grabbing;animation-play-state:paused}
.hang .cord{width:1.5px;height:calc(clamp(60px,12vh,112px) + var(--pull));background:linear-gradient(rgba(242,237,228,.12),rgba(242,237,228,.55));transition:height .45s cubic-bezier(.3,1.8,.5,1)}
.hang.pulling .cord{transition:none}
.hang.tug .cord{animation:tug 1.3s ease-in-out}
@keyframes tug{0%,100%{height:clamp(60px,12vh,112px)}30%{height:calc(clamp(60px,12vh,112px) + 22px)}60%{height:calc(clamp(60px,12vh,112px) - 4px)}}
.hang .knob{width:13px;height:13px;border-radius:50%;margin-top:-1px;background:radial-gradient(circle at 35% 30%,#cdb98a,#5c4a2a 70%,#2e2414);box-shadow:0 2px 3px rgba(0,0,0,.5)}
.hang .rodwrap{position:relative;display:flex;flex-direction:column;align-items:center}
.hang .rod{position:absolute;z-index:0;top:-2px;bottom:-16px;left:50%;width:3.5px;margin-left:-1.75px;border-radius:2px;background:linear-gradient(90deg,#4a3b20,#c9b07a 45%,#6b5530)}
.hang [data-star]{position:relative;z-index:1;width:clamp(84px,20vw,112px);margin-top:12px}
.hang:focus-visible{outline:none}.hang:focus-visible [data-star]{outline:1.5px solid var(--amber);outline-offset:4px;border-radius:50%}
@keyframes swing{0%,100%{transform:rotate(3deg)}50%{transform:rotate(-3deg)}}
.bubble{position:fixed;z-index:7;max-width:210px;padding:9px 13px;border-radius:14px 14px 4px 14px;background:var(--cream);color:var(--ink);
  font:400 11.5px/1.45 var(--mono);box-shadow:0 8px 20px rgba(0,0,0,.4);opacity:0;transform:translateY(6px) scale(.96);transition:opacity .25s,transform .25s;pointer-events:none}
.bubble.on{opacity:1;transform:none}
@media (max-width:560px){
  .hang{position:absolute;right:12px}
  .hang .cord{height:calc(26px + var(--pull))}
  @keyframes tug{0%,100%{height:26px}30%{height:48px}60%{height:22px}}
  .hang [data-star]{width:70px;margin-top:8px}
}
main{position:relative;z-index:2}
a{color:inherit}
:focus-visible{outline:1.5px solid var(--amber);outline-offset:3px}

.boil{filter:url(#boil)}

/* star friends */
[data-star]{display:block;position:relative;filter:drop-shadow(0 0 10px rgba(255,200,120,.3)) drop-shadow(0 7px 8px rgba(0,0,0,.5));transition:filter .7s}
[data-star] svg{display:block;width:100%;height:auto;overflow:visible}
[data-star] .pupil{transition:transform .25s ease-out}
[data-star] .eye{transform-box:fill-box;transform-origin:center;transition:transform .07s}
[data-star].blink .eye{transform:scaleY(.15)}
[data-star][data-mood="sleep"]{filter:drop-shadow(0 4px 5px rgba(0,0,0,.45));opacity:.8}

/* sparkles */
.spark{position:fixed;z-index:50;pointer-events:none;color:#FBE6A8;font-size:14px;text-shadow:0 0 8px rgba(255,200,120,.8);
  transform:translate(-50%,-50%);animation:spark .9s ease-out forwards}
@keyframes spark{to{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.4) rotate(90deg);opacity:0}}

/* tiny mono labels */
.k{font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--muted)}
.twinkle span{display:inline-block;animation:tw 3s ease-in-out infinite}
@keyframes tw{0%,100%{opacity:.25}50%{opacity:1;color:#FBE6A8;text-shadow:0 0 8px rgba(255,200,120,.7)}}

@media (prefers-reduced-motion: reduce){ *{animation:none !important;transition:none !important} }