@font-face{font-family:Mansalva;src:url(/assets/fonts/mansalva-latin.woff2) format("woff2");font-display:swap}
@font-face{font-family:Nunito;src:url(/assets/fonts/nunito-latin.woff2) format("woff2");font-weight:400 800;font-display:swap}
:root{--ink:#5b1d2e;--paper:#fbf4e6;--paper2:#f3e6cf;--plum:#7d4bd1;--cat:#c174ae;--leaf:#6f9a86;--gold:#e8b84a;
 --bg:var(--paper);--fg:#3b1a25;--muted:#7a5a62;--card:#fffaf0;--line:#5b1d2e;
 --wall:#f1e1c6;--wall2:#e9d3b2;--skirt:#e6d0ad;--floor:#c99a6b;--floor2:#b5865a;--curtain:#b996d6;--hint:#5b1d2e;
 --sky1:#9fd3ea;--sky2:#e9f5ee;--orb:#ffd36b;--cloud:#fffaf0;--city:#9db8c9;--lit:#fff4c2;--litop:0;--starop:0;
 --dim:0;--glowop:.28;--moonop:0;--beat:0;--hdr:#5b1d2e;
 color-scheme:light}
html[data-tod=dawn]{--sky1:#c6a6e2;--sky2:#ffd0ad;--orb:#ffc27a;--cloud:#ffe9dc;--city:#a58bb8;--litop:.5;--starop:.25;--dim:.22;--glowop:.5}
html[data-tod=dusk]{--sky1:#6b4bb8;--sky2:#ff9f7a;--orb:#ff9a5e;--cloud:#f7c4c0;--city:#5a3f7e;--litop:.85;--starop:.35;--dim:.4;--glowop:.75;--curtain:#a982cc}
html[data-tod=night]{--sky1:#120d33;--sky2:#3b2a6e;--orb:#fff3cf;--cloud:#4a3d7a;--city:#22184a;--litop:1;--starop:1;--dim:.78;--glowop:1;--moonop:.4;--hdr:#fbf1de;--hint:#fbe7c0;
 --bg:#1f1630;--fg:#f6ead6;--muted:#c9b6c8;--card:#2a1f40;--line:#e8d6c0;color-scheme:dark}
html[data-tod=dusk]{--hint:#4a1424}
html[data-lamp=off]{--glowop:0!important}
html[data-lamp=off][data-tod=night]{--dim:.92;--moonop:.7}
html[data-lamp=off][data-tod=dusk]{--dim:.6}
html[data-lamp=off][data-tod=dawn]{--dim:.36}
html[data-lamp=off][data-tod=day]{--dim:.14}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font:400 17px/1.6 Nunito,system-ui,sans-serif;padding-bottom:96px;transition:background .6s,color .6s}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--plum);outline-offset:3px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:50;background:var(--ink);color:#fff;padding:10px 14px;border-radius:10px}.skip:focus{top:12px}
.hand{font-family:Mansalva,cursive;font-weight:400;letter-spacing:.01em}
/* header */
.top{position:absolute;inset:0 0 auto 0;z-index:5;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:clamp(14px,2.2vw,30px) clamp(16px,3vw,44px);color:var(--hdr);pointer-events:none}
.top>*{pointer-events:auto}
.top.solid{position:relative;color:var(--fg)}
.brand{display:flex;flex-direction:column;text-decoration:none;line-height:1}
.brand b{font-family:Mansalva,cursive;font-weight:400;font-size:clamp(34px,4.4vw,64px);letter-spacing:.005em}
.brand small{font-size:clamp(12px,1.05vw,15px);font-weight:700;opacity:.8;margin-top:6px;letter-spacing:.02em}
.nav{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;margin-top:6px}
.nav a{font-weight:800;font-size:15px;text-decoration:none;padding:8px 14px;border-radius:999px;border:2.5px solid currentColor;background:color-mix(in srgb,var(--paper) 70%,transparent);color:var(--ink)}
html[data-tod=night] .top:not(.solid) .nav a{background:rgba(31,22,48,.55);color:#fbf1de}
.nav a[aria-current=page]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
/* scene */
.stage{position:relative;height:100svh;min-height:560px;max-height:1000px;overflow:hidden;background:var(--wall)}
.room{position:absolute;inset:0;width:100%;height:100%;display:block}
.grain{position:absolute;inset:0;pointer-events:none;background:url(/assets/img/grain.png);mix-blend-mode:multiply;opacity:.5}
.room .shade{opacity:var(--dim);mix-blend-mode:multiply;transition:opacity 1.2s}
html[data-lamp=off] #lamp>path:nth-of-type(2){filter:brightness(.6)}
.room .moon{opacity:var(--moonop);mix-blend-mode:screen;transition:opacity 1.2s}
.room .pool{opacity:calc(var(--glowop) * .8);transition:opacity .6s}
.room .glow{opacity:calc(var(--glowop) * (.82 + var(--beat) * .35));mix-blend-mode:screen}
.room .bulb{transition:fill .4s}
html[data-lamp=off] .room .bulb{fill:#9b8b70}
.room .stars{opacity:var(--starop);transition:opacity 1.5s}
.room .lit{opacity:var(--litop);transition:opacity 1.5s}
.room .craters{opacity:0}
html[data-tod=night] .room .craters{opacity:1}
html[data-tod=night] .room .clouds{opacity:.55}
.room .rain,.room .snow{display:none}
html[data-weather=rain] .room .rain{display:inline}
html[data-weather=snow] .room .snow{display:inline}
html[data-weather=rain] .room .clouds,html[data-weather=snow] .room .clouds{--cloud:#c9c6d8}
html[data-weather=rain] .room .orb,html[data-weather=snow] .room .orb{opacity:.35}
.room .led{fill:#7a6a5a;transition:fill .3s}
body.playing .room .led{fill:#7ee08a}
.hot{cursor:pointer;outline:none}
.hot .hit{stroke:transparent;stroke-width:5;stroke-dasharray:14 10;transition:stroke .2s}
.hot:focus-visible .hit{stroke:var(--plum)}
.hints{transition:opacity .8s}
body.played .hints .h-tt{opacity:0;transition:opacity .8s}
@media (hover:hover){#tt:hover #disc{filter:brightness(1.12)}#cat:hover #head{filter:brightness(1.04)}#lamp:hover #pull{transform:translateY(4px)}#win:hover .hit{fill:rgba(255,255,255,.06)}#crateScene:hover image{filter:brightness(1.08)}}
#pull{transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
#pull.tug{transform:translateY(22px)}
@keyframes twinkle{50%{opacity:.25}}
.room .star{animation:twinkle 3.2s ease-in-out infinite}
@keyframes drift{from{transform:translateX(-40px)}to{transform:translateX(60px)}}
.room .c1{animation:drift 38s ease-in-out infinite alternate}.room .c2{animation:drift 52s ease-in-out infinite alternate-reverse}
@keyframes fall{from{transform:translateY(0)}to{transform:translateY(480px)}}
@keyframes fallslow{from{transform:translateY(0)}to{transform:translateY(480px)}}
.room .rain{animation:fall .7s linear infinite}.room .snow{animation:fallslow 9s linear infinite}
.room .woofer{transform-box:fill-box;transform-origin:center;transform:scale(calc(1 + var(--beat) * .14))}
.room .leaves{transform-box:fill-box;transform-origin:50% 100%;animation:sway 7s ease-in-out infinite alternate}
@keyframes sway{from{transform:rotate(-1.2deg)}to{transform:rotate(1.4deg)}}
.scene-status{position:absolute;left:50%;bottom:clamp(96px,13vh,130px);transform:translateX(-50%);z-index:4;font-weight:800;font-size:14px;color:var(--paper);background:rgba(59,26,37,.78);padding:7px 14px;border-radius:999px;white-space:nowrap;max-width:92vw;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity .5s}
.scene-status.on{opacity:1}
/* sections */
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(18px,4vw,40px)}
section{padding:clamp(56px,8vw,110px) 0 0}
.kick{font-family:Mansalva,cursive;font-size:clamp(22px,2.4vw,28px);color:var(--plum);margin:0 0 6px}
html[data-tod=night] .kick{color:#c7a8ff}
h1,h2,h3{line-height:1.1;margin:0 0 14px;letter-spacing:-.01em}
h2{font-size:clamp(30px,4vw,50px);font-weight:800}
h3{font-size:21px;font-weight:800}
.lede{font-size:clamp(19px,1.9vw,23px);max-width:40ch;margin:0 0 18px}
.muted{color:var(--muted)}
.intro{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(24px,5vw,80px);align-items:end}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:420px;justify-self:end;width:100%;margin:0;padding:0;list-style:none}
.stats li{border:2.5px solid var(--line);border-radius:16px;padding:10px 16px;background:var(--card);font-weight:800;font-size:15px}
.stats b{display:block;font-family:Mansalva,cursive;font-weight:400;font-size:30px;line-height:1.05;color:var(--plum)}
html[data-tod=night] .stats b{color:#d8c0ff}
.howto{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:6px;font-size:15.5px}
.howto li::before{content:"✦ ";color:var(--gold)}
.btn{display:inline-flex;align-items:center;gap:8px;font:800 15px/1 Nunito,sans-serif;padding:12px 18px;border-radius:999px;border:2.5px solid var(--line);background:var(--card);color:var(--fg);cursor:pointer;text-decoration:none;transition:transform .15s,background .2s}
.btn:hover{transform:translateY(-2px)}
.btn.pri{background:var(--plum);border-color:var(--plum);color:#fff}
.btn.sm{padding:8px 12px;font-size:13.5px}
.btn svg{width:14px;height:14px;fill:currentColor}
.btn.pc-on{background:var(--ink);color:var(--paper)}
/* crate */
.crate-head{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap}
.crate-ctl{display:flex;gap:8px}
.crate{display:flex;gap:clamp(14px,2vw,26px);overflow-x:auto;scroll-snap-type:x mandatory;padding:26px 4px 30px;margin:0 -4px;scrollbar-width:thin;list-style:none}
.crate li{flex:0 0 clamp(170px,18vw,230px);scroll-snap-align:start}
.sleeve{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;text-align:left;color:inherit;font:inherit}
.sleeve .art{position:relative;display:block;aspect-ratio:1;border-radius:6px;overflow:visible;transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.sleeve .art img{width:100%;height:100%;object-fit:cover;border-radius:6px;position:relative;z-index:1;border:3px solid var(--line);box-shadow:6px 6px 0 var(--line)}
.sleeve .art::before{content:"";position:absolute;inset:6%;border-radius:50%;background:radial-gradient(circle,#ddd 0 3%,#2b2130 3.5% 30%,#3a2e44 31% 33%,#241b2b 34% 100%);transition:transform .45s cubic-bezier(.3,1.3,.5,1);z-index:0}
.sleeve:hover .art,.sleeve:focus-visible .art{transform:translateY(-6px) rotate(-1.5deg)}
.sleeve:hover .art::before,.sleeve:focus-visible .art::before,.sleeve.pc-on .art::before{transform:translateX(34%)}
.sleeve.pc-on .art::before{animation:spin 2.4s linear infinite}
@keyframes spin{from{transform:translateX(34%) rotate(0)}to{transform:translateX(34%) rotate(360deg)}}
.sleeve .t{display:block;font-weight:800;margin-top:16px;line-height:1.2}
.sleeve .y{display:block;font-size:13.5px;color:var(--muted)}
/* postcards */
.cards{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:26px}
.card{position:relative;display:block;text-decoration:none;background:var(--card);border:2.5px solid var(--line);border-radius:14px;padding:16px 18px 18px;transition:transform .2s;min-height:118px}
.card:nth-child(odd){transform:rotate(-.8deg)}.card:nth-child(even){transform:rotate(.7deg)}
.card:hover{transform:rotate(0) translateY(-4px)}
.card b{display:block;font-family:Mansalva,cursive;font-weight:400;font-size:clamp(22px,2vw,27px);line-height:1.1;margin-bottom:4px}
.card span{font-size:14.5px;color:var(--muted)}
.card i{position:absolute;right:12px;top:12px;width:36px;height:42px;border:2px dashed #5b1d2e;border-radius:4px;display:grid;place-items:center;font-style:normal;font-size:17px;color:#5b1d2e;background:var(--st,#ffc9d4);box-shadow:0 0 0 3px var(--card) inset}
.card:nth-child(5n+1){--st:#ffc9d4}.card:nth-child(5n+2){--st:#fff1a8}.card:nth-child(5n+3){--st:#cfe7d9}.card:nth-child(5n+4){--st:#dcd0ff}.card:nth-child(5n+5){--st:#ffd9b3}
.card b{padding-right:40px}
/* licence note */
.note{position:relative;background:#fff6c9;color:#3b1a25;border:2.5px solid #5b1d2e;border-radius:6px;padding:clamp(22px,3vw,38px);box-shadow:8px 8px 0 #5b1d2e;transform:rotate(-.6deg);max-width:860px}
.note::before{content:"";position:absolute;top:-14px;left:50%;width:120px;height:28px;margin-left:-60px;background:rgba(185,150,214,.75);transform:rotate(-3deg)}
.note .kick{color:#7d4bd1}
.cred{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:14px 0 0}
.cred code{font:700 14.5px/1.4 ui-monospace,Menlo,monospace;overflow-wrap:anywhere;background:#fff;border:2px dashed #5b1d2e;border-radius:8px;padding:9px 12px}
.note .btn{background:#fff;color:#3b1a25;border-color:#5b1d2e}
/* footer */
.foot{margin-top:clamp(70px,9vw,130px);border-top:2.5px solid var(--line);padding:34px 0 30px}
.foot .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
.foot img{width:150px;height:auto}
.foot p{margin:0;font-size:14px;color:var(--muted)}
.foot nav{display:flex;gap:16px;flex-wrap:wrap;font-weight:700;font-size:14.5px}
/* inner pages */
.page-hero{padding:clamp(20px,4vw,40px) 0 0}
.page-hero h1{font-family:Mansalva,cursive;font-weight:400;font-size:clamp(44px,7vw,92px);line-height:1}
.prose{max-width:720px}.prose p{margin:0 0 16px}.prose h2{font-size:clamp(26px,3vw,36px);margin-top:42px}
.albums{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:28px;margin-top:30px}
.album{background:var(--card);border:2.5px solid var(--line);border-radius:16px;padding:16px;display:grid;grid-template-columns:110px 1fr;gap:14px;align-content:start}
.album img{width:110px;height:110px;border-radius:6px;box-shadow:0 0 0 2.5px var(--line)}
.album h3{margin:2px 0 2px;font-size:20px}.album .y{font-size:13.5px;color:var(--muted);margin:0 0 10px}
.album .acts{display:flex;gap:6px;flex-wrap:wrap}
.album details{grid-column:1/-1}
.album summary{cursor:pointer;font-weight:800;font-size:14.5px;padding:4px 0}
.tracks{list-style:none;margin:6px 0 0;padding:0;counter-reset:t}
.tracks li{display:grid;grid-template-columns:30px 1fr auto 30px;align-items:center;gap:6px;padding:5px 0;border-top:1.5px dashed color-mix(in srgb,var(--line) 35%,transparent);font-size:14.5px}
.tracks button{width:28px;height:28px;border-radius:50%;border:2px solid var(--line);background:none;color:var(--fg);display:grid;place-items:center;cursor:pointer;padding:0}
.tracks button svg{width:10px;height:10px;fill:currentColor}
.tracks li.on{color:var(--plum);font-weight:800}
html[data-tod=night] .tracks li.on{color:#d8c0ff}
.tracks .d{color:var(--muted);font-variant-numeric:tabular-nums;font-size:13px}
.tracks a{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;text-decoration:none}
.tracks a svg{width:14px;height:14px;fill:currentColor}
.lg{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:18px;margin-top:20px;list-style:none;padding:0}
.lg img{aspect-ratio:1;object-fit:cover;border-radius:6px;box-shadow:0 0 0 2.5px var(--line)}
.lg b{display:block;margin-top:8px;font-size:15px}
.faq{display:grid;gap:12px;margin:20px 0 0}.faq div{background:var(--card);border:2.5px solid var(--line);border-radius:14px;padding:14px 18px}.faq dt{font-weight:800}.faq dd{margin:4px 0 0}
.linklist{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;list-style:none;padding:0}
.linklist a{display:block;padding:12px 16px;border:2.5px solid var(--line);border-radius:12px;background:var(--card);text-decoration:none;font-weight:800}
.linklist span{display:block;font-weight:400;font-size:13.5px;color:var(--muted)}
.hello-cat{max-width:420px;margin:10px 0 0}
/* player bar */
#pbar{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:40;width:min(820px,calc(100% - 20px));display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:12px;padding:9px 12px 9px 9px;background:#fff8ea;color:#3b1a25;border:3px solid #5b1d2e;border-radius:20px;box-shadow:6px 6px 0 #5b1d2e}
#pbar .cv{width:50px;height:50px;border-radius:8px;box-shadow:0 0 0 2px #5b1d2e;object-fit:cover;background:#e9d3b2}
#pbar .meta{min-width:0;line-height:1.25}
#pbar [data-pc=title]{display:block;font-weight:800;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#pbar [data-pc=sub]{display:block;font-size:13px;color:#7a5a62;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#pbar .ctl{display:flex;align-items:center;gap:6px}
#pbar button,#pbar a.ic{width:38px;height:38px;border-radius:50%;border:2.5px solid #5b1d2e;background:#fff;color:#3b1a25;display:grid;place-items:center;cursor:pointer;padding:0}
#pbar button svg,#pbar a.ic svg{width:13px;height:13px;fill:currentColor}
#pbar [data-pc=pp]{width:48px;height:48px;background:#7d4bd1;color:#fff;border-color:#5b1d2e}
#pbar [data-pc=pp] svg{width:16px;height:16px}
#pbar .time{display:flex;align-items:center;gap:8px;font-size:12.5px;font-variant-numeric:tabular-nums;color:#7a5a62}
#pbar input[type=range]{width:150px;accent-color:#7d4bd1}
#pbar .tr{position:absolute;left:18px;right:18px;bottom:-3px;height:3px;border-radius:3px;overflow:hidden;display:none}
#pbar [data-pc=prog]{display:block;height:100%;background:#7d4bd1;transform-origin:0 0;transform:scaleX(0)}
#toast{position:fixed;left:50%;bottom:104px;transform:translate(-50%,20px);z-index:41;background:#3b1a25;color:#fff;padding:10px 16px;border-radius:12px;font-weight:700;font-size:14px;opacity:0;pointer-events:none;transition:.3s}
#toast.show{opacity:1;transform:translate(-50%,0)}
@media (max-width:1000px){.cards{grid-template-columns:repeat(3,1fr)}}
@media (max-width:860px){
 .intro{grid-template-columns:1fr}.stats{justify-self:start}
 #pbar .time{display:none}#pbar .tr{display:block}
 #pbar{grid-template-columns:auto 1fr auto;gap:10px}
 #pbar a.ic{display:none}
}
@media (max-width:640px){
 body{font-size:16px}
 .stage{height:auto;min-height:0;aspect-ratio:auto;display:flex;flex-direction:column}
 .stage .room{position:relative;inset:auto;aspect-ratio:.84;height:auto}
 .stage .top{position:relative;align-items:center;background:color-mix(in srgb,var(--wall) 100%,transparent);border-bottom:3px solid var(--ink);padding:12px 14px;color:var(--ink)}
 html[data-tod=night] .stage .top{background:#2a1f40;color:#fbf1de;border-color:#000}
 .top{padding:14px 14px}
 .brand b{font-size:24px;white-space:nowrap}.brand small{display:none}
 .nav{gap:4px;margin-top:0;flex-wrap:nowrap}.nav a{font-size:11.5px;padding:5px 8px;border-width:2px;white-space:nowrap}
 .top{gap:8px}
 .nav a.hide-s{display:none}
 #pbar{bottom:8px;border-radius:16px;padding:7px 8px 7px 7px}
 #pbar .cv{width:42px;height:42px}
 #pbar [data-pc=prev]{display:none}
 #pbar button{width:34px;height:34px}#pbar [data-pc=pp]{width:44px;height:44px}
 .cards{grid-template-columns:1fr 1fr;gap:12px}.card{padding:12px 12px 14px;min-height:104px}.card b{font-size:23px;padding-right:30px}.card i{width:26px;height:30px;font-size:13px;right:8px;top:8px}.card::after{display:none}.card span{font-size:13px;display:block;line-height:1.35}
 .album{grid-template-columns:84px 1fr}.album img{width:84px;height:84px}
 .scene-status{font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .room .star,.room .c1,.room .c2,.room .rain,.room .snow,.room .leaves,.sleeve.pc-on .art::before{animation:none!important}
 .room .woofer{transform:none}
 *{transition-duration:.01ms!important}
}