:root{
  --world-bg:url(assets/background/backdrop_day.png);
  --paper:#fbf7ec;
  --paper-2:#f4eedc;
  --ink:#2b2620;
  --ink-2:#5d564a;
  --muted:#8a8270;
  --line:#e3dac3;
  --line-2:#cfc4a6;
  --moss:#4c7a3a;
  --moss-2:#e4eed2;
  --bark:#5a3518;
  --butter:#ffe7a6;
  --honey:#f7c45c;
  --rose:#e8556a;
  --sky-top:#8fd2df;
  --sky-bot:#c7e4da;
  --icon-ink:#20302a;
  --icon-shadow:#ffffffa0;
  --bar-h:140px;
  --display:'Fraunces',Georgia,serif;
  --sans:'DM Sans',system-ui,sans-serif;
  --pixel:'Pixelify Sans','Courier New',monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;overflow:hidden;font:15px/1.6 var(--sans);color:var(--ink);background:var(--sky-bot);-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
button:focus-visible,a:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px dashed var(--bark);outline-offset:3px;border-radius:4px}
img{display:block;max-width:100%}
.dot{display:inline-block;width:7px;height:7px;background:#6fbf4a;box-shadow:0 0 0 2px #6fbf4a33;margin-right:8px;vertical-align:1px}

/* ---------- wallpaper: current in-game background ---------- */
.wallpaper{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:linear-gradient(180deg,var(--sky-top),var(--sky-bot))}
.paint{position:absolute;left:0;right:0;bottom:calc(var(--bar-h) - 70px);height:clamp(210px,35vh,360px);background:var(--world-bg) 50% 100%/auto 100% repeat-x;image-rendering:pixelated}
.sky-logo{position:absolute;left:50%;top:max(90px,12vh);width:min(36vw,520px);translate:-50% 0;filter:drop-shadow(0 6px 0 #5a351840);animation:float2 6s ease-in-out infinite}
@keyframes float2{50%{translate:-50% -8px}}
@keyframes drift{from{translate:0 0}to{translate:120vw 0}}
.tint{position:absolute;inset:0;background:linear-gradient(180deg,var(--sky-top),var(--sky-bot));mix-blend-mode:multiply;opacity:0;transition:opacity 1.2s,background 1.2s}
.stars{position:absolute;inset:0 0 50%;opacity:0;transition:opacity 1.2s;background-image:
  radial-gradient(2px 2px at 12% 18%,#fff 50%,transparent 51%),radial-gradient(2px 2px at 28% 42%,#fffbd0 50%,transparent 51%),radial-gradient(2px 2px at 44% 12%,#fff 50%,transparent 51%),radial-gradient(2px 2px at 63% 30%,#fff 50%,transparent 51%),radial-gradient(2px 2px at 78% 16%,#fffbd0 50%,transparent 51%),radial-gradient(2px 2px at 88% 48%,#fff 50%,transparent 51%),radial-gradient(2px 2px at 6% 64%,#fff 50%,transparent 51%),radial-gradient(2px 2px at 95% 72%,#fff 50%,transparent 51%),radial-gradient(2px 2px at 36% 70%,#fff 50%,transparent 51%);animation:twinkle 4s steps(2) infinite}
@keyframes twinkle{50%{filter:brightness(.6)}}

/* ---------- menubar ---------- */
.menubar{position:fixed;z-index:30;top:10px;left:10px;right:10px;height:50px;display:flex;align-items:center;gap:22px;padding:0 8px 0 12px;background:#fbf7ecd9;backdrop-filter:blur(14px) saturate(1.2);border:1px solid #ffffff90;border-radius:8px;box-shadow:0 1px 0 #0000000d,0 8px 24px -16px #2b262055}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);font:600 19px/1 var(--display);letter-spacing:-.02em}
.brand img{width:30px;height:30px;border-radius:7px;box-shadow:0 0 0 1.5px var(--bark)}
.menubar nav{display:flex;gap:2px}
.menubar nav button{padding:8px 11px;border-radius:6px;font-size:14px;font-weight:500;color:var(--ink-2)}
.menubar nav button:hover{background:#2b26200d;color:var(--ink)}
.menu-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.menu-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:6px}
.menu-icon:hover{background:#2b26200d}
.menu-icon[aria-pressed=false] .px-icon{opacity:.45}
.clock{font:500 14px var(--sans);font-variant-numeric:tabular-nums;color:var(--ink-2);padding:0 6px;min-width:52px;text-align:right}

/* ---------- logo-style button (echoes the pixel wordmark) ---------- */
.btn-logo{position:relative;display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 22px;font:600 16px/1 var(--sans);color:#4a2a10;letter-spacing:-.01em;
  background:linear-gradient(180deg,#fff8dc 0%,#ffe9a8 55%,#f8cd6a 100%);
  border:2px solid var(--bark);border-radius:8px;box-shadow:inset 0 -3px 0 #e2a744,inset 0 2px 0 #fff,0 4px 0 var(--bark);transition:transform .12s,box-shadow .12s}
.btn-logo:hover{transform:translateY(-1px);box-shadow:inset 0 -3px 0 #e2a744,inset 0 2px 0 #fff,0 5px 0 var(--bark)}
.btn-logo:active{transform:translateY(3px);box-shadow:inset 0 -2px 0 #e2a744,0 1px 0 var(--bark)}
.btn-logo.small{height:36px;padding:0 14px;font-size:14px;box-shadow:inset 0 -2px 0 #e2a744,inset 0 2px 0 #fff,0 3px 0 var(--bark)}
.btn-logo.big{height:58px;padding:0 30px;font-size:18px}
.btn-ghost{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 6px;font-weight:600;color:var(--ink);border-bottom:2px solid transparent}
.btn-ghost:hover{color:var(--moss)}
.bounce{display:inline-block;animation:bob 1.6s steps(2) infinite}
@keyframes bob{50%{transform:translateY(3px)}}

/* ---------- pixel icons (rendered from bitmaps in app.js) ---------- */
.px-icon{display:inline-block;line-height:0}
.px-icon svg{display:block;shape-rendering:crispEdges}

/* ---------- desktop icons ---------- */
.icons{position:fixed;z-index:5;top:76px;display:flex;flex-direction:column;gap:6px;width:104px}
.icons-left{left:14px}
.icons-right{right:14px}
.icon{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 4px 6px;border-radius:8px;border:1px solid transparent}
.icon:hover{background:#ffffff33;backdrop-filter:blur(4px)}
.icon.is-active{background:#ffffff4d;border-color:#ffffff99;backdrop-filter:blur(6px)}
.icon-art{width:52px;height:46px;display:grid;place-items:center;filter:drop-shadow(0 2px 0 #00000026)}
.icon-art>img{width:44px;height:44px;border-radius:10px;box-shadow:0 0 0 2px var(--bark)}
.icon-art .sprite-icon{width:auto;height:34px;border-radius:0;box-shadow:none}
.icon-art .sprite-icon.acorn{height:28px}
.photo-icon img{width:48px;height:34px;object-fit:cover;object-position:50% 100%;border-radius:2px;border:3px solid #fff;box-shadow:0 0 0 1px #0003;transform:rotate(-4deg)}
.world-icon{background:var(--world-bg) 0 0/auto 46px repeat-x;image-rendering:pixelated;width:46px;border-radius:6px;box-shadow:0 0 0 2px var(--bark),inset 0 0 0 2px #ffffff60}
.icon-label{font:600 12.5px/1.25 var(--sans);color:#fff;text-shadow:0 1px 0 #1d2a12;text-align:center;padding:2px 6px;border-radius:4px;background:#1d2a1259;backdrop-filter:blur(3px)}

/* ---------- window ---------- */
.window{position:fixed;z-index:10;left:144px;right:144px;top:76px;bottom:calc(var(--bar-h) + 14px);display:flex;flex-direction:column;background:var(--paper);border:1.5px solid #3b2a1a;border-radius:12px;box-shadow:0 2px 0 #3b2a1a,0 30px 60px -30px #1c140b88;overflow:hidden;transition:inset .35s var(--ease),border-radius .35s,opacity .25s,transform .35s var(--ease)}
.window.max{left:8px;right:8px;top:68px;border-radius:8px}
.window.booting{opacity:0;transform:translateY(24px) scale(.96)}
.window.hidden{opacity:0;transform:translateY(30px) scale(.97);pointer-events:none}
.window.dragged{transition:none}
.titlebar{flex:none;height:46px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 8px;background:#f4eedcf0;border-bottom:1.5px solid var(--line-2);cursor:grab;user-select:none}
/* Balance the 98px window controls so the address sits at the window centre. */
.titlebar::before{content:'';flex:0 0 98px}
@media(max-width:860px){.titlebar::before{display:none}}
.titlebar:active{cursor:grabbing}
.addressbar{flex:1;min-width:0;max-width:760px;height:32px;display:flex;align-items:center;gap:9px;padding:0 11px 0 5px;border:1px solid #ded8c8;border-radius:999px;background:#e9e4d7;box-shadow:inset 0 1px 2px #302a2010;cursor:default;transition:background .15s,border-color .15s}
.addressbar:hover{background:#e3ddce;border-color:#cec5b2}
.address-site{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#fbf7ecb3;color:#625b4e}
.address-site svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.address-site circle{fill:#f7f3e9}
.address-url{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:13px/1.4 var(--sans);color:#817a6b;user-select:text;cursor:text}
.address-host{color:#342f26;font-weight:500}
.address-star{flex:none;margin-left:auto;width:17px;height:17px;fill:none;stroke:#797260;stroke-width:1.4;stroke-linejoin:round}
.controls{flex:none;display:flex;gap:4px}
.controls button{width:30px;height:26px;display:grid;place-items:center;border-radius:5px}
.controls button:hover{background:#2b262012}
#close:hover{background:var(--rose);color:#fff}
.ctl-min,.ctl-max,.ctl-close{display:block;width:12px;height:12px;position:relative}
.ctl-min::before{content:'';position:absolute;left:1px;right:1px;bottom:2px;height:2px;background:currentColor}
.ctl-max::before{content:'';position:absolute;inset:1px;border:2px solid currentColor}
.ctl-close::before,.ctl-close::after{content:'';position:absolute;left:5px;top:-1px;width:2px;height:14px;background:currentColor;transform:rotate(45deg)}
.ctl-close::after{transform:rotate(-45deg)}
.scroll{flex:1;overflow:auto;scroll-behavior:smooth;overscroll-behavior:contain}
.scroll::-webkit-scrollbar{width:12px}
.scroll::-webkit-scrollbar-thumb{background:var(--line-2);border:3px solid var(--paper);border-radius:10px}
.statusbar{flex:none;height:28px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;font:400 12.5px var(--pixel);color:var(--muted);background:var(--paper-2);border-top:1.5px solid var(--line-2)}

/* ---------- type ---------- */
.kicker{display:flex;align-items:center;gap:8px;margin:0 0 18px;font:500 14px/1 var(--pixel);letter-spacing:.04em;color:var(--moss);text-transform:uppercase}
.kicker .px-icon{margin-right:2px}
h1,h2{font-family:var(--display);font-variation-settings:'SOFT' 100,'opsz' 144;font-weight:650;letter-spacing:-.035em;color:var(--ink);margin:0}
h1{font-size:clamp(40px,4.3vw,64px);line-height:1}
h2{font-size:clamp(32px,3.3vw,48px);line-height:1.02}
h1 em{font-style:italic;font-weight:600;color:var(--moss);position:relative;white-space:nowrap}
h1 em svg{position:absolute;left:-2%;bottom:-.16em;width:104%;height:.28em;fill:none;stroke:var(--honey);stroke-width:4;stroke-linecap:round}
.muted{color:var(--muted)}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center;padding:clamp(40px,6vh,72px) clamp(32px,5vw,72px) 56px;min-height:calc(100% - 2px)}
.lede{max-width:30em;margin:26px 0 30px;font-size:17.5px;line-height:1.6;color:var(--ink-2)}
.cta-row{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.party{display:flex;align-items:center;gap:16px;margin:34px 0 0;padding:18px 0 0;border-top:1.5px dashed var(--line-2)}
.party-pets{display:flex;align-items:flex-end;gap:2px;padding:8px 12px 6px;background:var(--moss-2);border:1.5px solid #c9d8b4;border-radius:10px}
.party-pets img{height:26px;width:auto}
.party-pets img:nth-child(2){height:40px}
.party p{margin:0;display:flex;flex-direction:column;font-size:14px;color:var(--muted);line-height:1.4}
.party b{font:600 16px var(--sans);color:var(--ink)}
.facts{display:flex;gap:26px;margin:34px 0 0;padding:20px 0 0;list-style:none;border-top:1.5px dashed var(--line-2);font-size:13.5px;color:var(--muted)}
.facts b{display:block;font:600 28px/1.1 var(--display);color:var(--ink);font-variation-settings:'SOFT' 100}
.hero-art{position:relative;padding:56px 0 76px}
.exe{position:relative;margin:0;background:#fff;border:1.5px solid #3b2a1a;border-radius:10px;overflow:hidden;box-shadow:0 2px 0 #3b2a1a,0 30px 50px -28px #1c140b88;transform:rotate(-1deg)}
.exe-bar{display:flex;align-items:center;gap:8px;height:34px;padding:0 12px;background:var(--paper-2);border-bottom:1.5px solid #3b2a1a;font:400 13px var(--pixel);color:var(--ink-2)}
.exe-bar img{width:18px;height:18px;border-radius:4px}
.exe-bar em{margin-left:auto;font-style:normal;color:var(--moss);display:flex;align-items:center}
.exe-scene{position:relative;height:clamp(210px,24vw,280px);background:var(--world-bg) 18% 100%/auto 100% repeat-x;image-rendering:pixelated;transition:background-image .4s}
.exe-pet{position:absolute;left:var(--x);bottom:8%;height:calc(var(--h) * var(--k,1));width:auto;filter:drop-shadow(0 4px 0 #0000002e);animation:idle 3.2s steps(2) var(--d) infinite}
@keyframes idle{50%{translate:0 -3px}}
.exe figcaption{display:flex;justify-content:space-between;padding:9px 14px;font:400 12.5px var(--pixel);color:var(--muted);border-top:1.5px solid #3b2a1a}
.notif{position:absolute;top:0;right:-18px;z-index:2;display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:center;width:300px;padding:12px 14px;background:#fffdf6f2;backdrop-filter:blur(8px);border:1.5px solid #3b2a1a;border-radius:10px;box-shadow:0 3px 0 #3b2a1a,0 16px 30px -16px #0006;font-size:13.5px;line-height:1.35;color:var(--ink-2);animation:slidein .6s var(--ease) .9s both}
@keyframes slidein{from{opacity:0;transform:translateY(-10px)}}
.notif>img{grid-row:span 2;height:30px;width:auto}
.notif b{color:var(--ink)}
.notif-actions{display:flex;gap:6px;margin-top:6px}
.notif-actions button{flex:1;height:28px;border-radius:6px;border:1.5px solid var(--line-2);font:600 12.5px var(--sans);background:#fff}
.notif-actions button:first-child{background:var(--ink);border-color:var(--ink);color:#fff}
.notif-actions button:hover{transform:translateY(-1px)}
.note{position:absolute;left:-40px;bottom:-40px;width:196px;padding:18px 16px 14px;background:#fff1a8;font:500 14.5px/1.4 var(--sans);color:#4c3a14;box-shadow:0 10px 20px -12px #4c3a1477;transform:rotate(-4deg)}
.note u{text-decoration-color:var(--rose);text-decoration-thickness:2px;text-underline-offset:3px}
.tape{position:absolute;top:-10px;left:50%;width:72px;height:20px;translate:-50% 0;background:#ffffffa8;border:1px solid #0000000d;rotate:3deg}

/* ---------- blocks ---------- */
.block{min-height:100%;display:flex;flex-direction:column;justify-content:center;padding:56px clamp(32px,5vw,72px) 48px}
.block+.block{border-top:0;background:linear-gradient(90deg,transparent clamp(32px,5vw,72px),var(--line) clamp(32px,5vw,72px) calc(100% - clamp(32px,5vw,72px)),transparent 0) 0 0/100% 1.5px no-repeat}
.block-head{margin-bottom:36px}
.block-head.split{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:end}
.block-sub{margin:14px 0 0;max-width:30em;color:var(--ink-2);font-size:16px}

/* cards */
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.card{position:relative;display:flex;flex-direction:column;text-align:left;background:#fff;border:1.5px solid #3b2a1a;border-radius:12px;overflow:hidden;box-shadow:0 2px 0 #3b2a1a;transition:transform .25s var(--ease),box-shadow .25s}
.card:hover{transform:translateY(-4px) rotate(-.6deg);box-shadow:0 6px 0 #3b2a1a}
.card-stage{position:relative;height:128px;background:var(--stage) 0 100%/auto 100% repeat-x;image-rendering:pixelated;display:flex;align-items:flex-end;justify-content:center;padding-bottom:12px;border-bottom:1.5px solid #3b2a1a}
.card-stage img{height:var(--h);width:auto;image-rendering:auto;filter:drop-shadow(0 3px 0 #0003);transition:transform .3s var(--ease)}
.card:hover .card-stage img{transform:translateY(-6px)}
.card-no{position:absolute;top:10px;left:10px;font:500 12px var(--pixel);background:#fff;padding:2px 7px;border:1.5px solid #3b2a1a;border-radius:3px}
.card-body{padding:16px 16px 18px}
.card-name{font:650 22px/1.1 var(--display);font-variation-settings:'SOFT' 100;letter-spacing:-.02em}
.card-role{font:400 13px var(--pixel);color:var(--moss);margin-top:4px}
.card-line{margin:10px 0 12px;font-size:14px;line-height:1.5;color:var(--ink-2);min-height:4.5em}
.card-likes{margin-top:auto;padding-top:10px;border-top:1.5px dashed var(--line);font:400 12.5px var(--pixel);color:var(--muted)}
.card-likes b{font-weight:400;color:var(--moss)}
.card-body{flex:1;display:flex;flex-direction:column}
.stat{display:grid;grid-template-columns:62px 1fr;align-items:center;gap:8px;font:400 12px var(--pixel);color:var(--muted);margin-top:6px}
.meter{display:flex;gap:2px}
.meter i{flex:1;height:8px;background:var(--line)}
.meter i.on{background:var(--c)}
.card-hi{position:absolute;right:12px;top:10px;font:400 12px var(--pixel);color:var(--ink-2);background:#ffffffd0;padding:2px 7px;border-radius:3px;opacity:0;transition:opacity .2s}
.card:hover .card-hi{opacity:1}

/* worlds */
.world-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.world{position:relative;text-align:left;border-radius:10px;overflow:hidden;border:1.5px solid var(--line-2);background:#fff;transition:transform .2s var(--ease),border-color .2s,box-shadow .2s}
.world:hover{transform:translateY(-2px)}
.world[aria-checked=true]{border-color:#3b2a1a;box-shadow:0 3px 0 #3b2a1a}
.world-strip{height:76px;background:var(--bg) 50% 100%/auto 100% repeat-x;image-rendering:pixelated}
.world-label{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;font:500 13.5px var(--sans)}
.world-label span:last-child{font:400 12px var(--pixel);color:var(--muted)}
.world[aria-checked=true] .world-label span:last-child{color:var(--moss)}
.world-now{margin:20px 0 0;font-size:14.5px;color:var(--ink-2)}

/* screenshots */
.screens{display:grid;grid-template-columns:minmax(260px,.8fr) minmax(0,1.7fr);gap:clamp(28px,4vw,56px);align-items:center}
.screens-copy h2{font-size:clamp(30px,2.8vw,42px)}
.monitor{width:100%}
.monitor-screen{position:relative;border:10px solid #2c2620;border-bottom-width:14px;border-radius:14px;overflow:hidden;background:#111;aspect-ratio:16/8.6;box-shadow:0 30px 50px -30px #1c140b99}
.mini-desk{position:absolute;inset:0;background:linear-gradient(180deg,#bfe6e4,#6cb2aa);overflow:hidden;transition:background .5s}
.mini-menu{position:absolute;z-index:2;left:0;right:0;top:0;height:22px;display:flex;align-items:center;gap:14px;padding:0 12px;background:#ffffffb8;font:500 11px var(--sans);color:var(--ink-2)}
.mini-menu i{width:10px;height:10px;background:var(--moss);border-radius:2px}
.mini-menu b{margin-left:auto;font:400 11px var(--pixel)}
.mini-win{position:absolute;background:#fff;border:1px solid #0002;border-radius:7px;box-shadow:0 14px 30px -14px #0006;overflow:hidden}
.w1{left:6%;top:12%;width:50%;height:56%}
.w2{right:6%;top:18%;width:31%}
.mini-tb{display:flex;align-items:center;gap:5px;height:22px;padding:0 9px;background:var(--paper-2);border-bottom:1px solid var(--line);font:500 10.5px var(--sans);color:var(--muted);white-space:nowrap;overflow:hidden}
.mini-tb i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--line-2)}
.mini-tb span{margin-left:8px;overflow:hidden;text-overflow:ellipsis}
.mini-doc{padding:14px 18px;font:400 12px/1.6 Georgia,serif;color:#4a443a}
.mini-doc b{display:block;font:600 16px var(--display);color:var(--ink);margin-bottom:6px}
.mini-doc p{margin:0 0 6px}
.mini-doc .ghost{animation:blink 1s steps(2) infinite;color:var(--moss)}
@keyframes blink{50%{opacity:0}}
.mini-player{display:flex;gap:10px;align-items:center;padding:12px}
.mini-player .disc{flex:none;width:44px;height:44px;border-radius:6px;background:url(assets/background/backdrop_meadow.png) 75% 100%/auto 100%}
.mini-player b{display:block;font:600 12px var(--sans)}
.mini-player span{font-size:11px;color:var(--muted)}
.mini-player .prog{display:block;height:4px;margin-top:6px;border-radius:3px;background:linear-gradient(90deg,var(--honey) 38%,var(--line) 38%)}
.mini-strip{position:absolute;left:0;right:0;bottom:0}
.mini-strip #shot{display:block;width:100%;height:auto;image-rendering:pixelated}
.mini-strip .preview-pet{position:absolute;left:var(--x);bottom:10%;height:var(--h);width:auto;image-rendering:pixelated}
.mini-strip::before{content:'AnimalBar';position:absolute;left:12px;top:-22px;padding:2px 7px;font:400 11px var(--pixel);color:#fff;background:#1d1a16bb;border-radius:3px}
.shot-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.shot-tabs{display:flex;flex-wrap:wrap;gap:4px 6px;margin-top:24px}
.shot-tabs button{padding:5px 9px;border-radius:4px;font:400 13.5px var(--pixel);color:var(--muted)}
.shot-tabs button:hover{background:#2b26200d;color:var(--ink)}
.shot-tabs button[aria-selected=true]{background:var(--ink);color:#fff}

/* faq notepad */
.notepad{max-width:840px;margin:0 auto;background:#fff;border:1.5px solid #3b2a1a;border-radius:10px;overflow:hidden;box-shadow:0 2px 0 #3b2a1a}
.notepad-bar svg{height:20px;width:auto}
.notepad-bar{display:flex;align-items:center;gap:8px;height:36px;padding:0 12px;background:var(--paper-2);border-bottom:1.5px solid var(--line-2);font:400 13px var(--pixel);color:var(--ink-2)}
.notepad-body{position:relative;padding:34px 40px 26px 64px;background:linear-gradient(90deg,transparent 40px,#f2b8b0 40px 41.5px,transparent 41.5px)}
.notepad-body h2{font-size:clamp(28px,2.6vw,38px);margin-bottom:18px}
details{border-top:1.5px dashed var(--line)}
details:last-child{border-bottom:1.5px dashed var(--line)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:16px 0;font:600 17px var(--sans)}
summary::-webkit-details-marker{display:none}
summary::after{content:'+';font:500 22px var(--pixel);color:var(--moss);transition:transform .2s}
details[open] summary::after{content:'−'}
details p{margin:-4px 0 18px;max-width:38em;color:var(--ink-2)}

/* finale */
.finale{padding:56px clamp(24px,4vw,56px) 40px}
.finale-scene{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:56px 24px 150px;border-radius:14px;border:1.5px solid #3b2a1a;overflow:hidden;background:linear-gradient(180deg,#86d0de,#c7e4da 75%);box-shadow:0 2px 0 #3b2a1a}
.finale-logo{width:min(520px,80%);filter:drop-shadow(0 5px 0 #5a351855)}
.finale-scene p{margin:10px 0 26px;font:600 clamp(22px,2.2vw,30px)/1.2 var(--display);font-variation-settings:'SOFT' 100;color:#2d4a3a;letter-spacing:-.02em}
.finale-ground{position:absolute;left:0;right:0;bottom:0;height:140px;background:url(assets/background/backdrop_meadow.png) 0 100%/auto 140px repeat-x;image-rendering:pixelated}
.finale-ground img{position:absolute;bottom:14px;left:var(--x);height:var(--h);width:auto;image-rendering:auto;scale:var(--f,1) 1;filter:drop-shadow(0 3px 0 #0002)}
.foot{display:flex;justify-content:space-between;align-items:center;padding:24px clamp(32px,5vw,72px) 30px;font-size:13px;color:var(--muted)}
.foot button:hover{color:var(--ink)}

/* ---------- the bar (the actual game, living on this desktop) ---------- */
/* The page itself never scrolls. An absolute wrapper avoids the stacking
   context that position:fixed creates, letting the window (10) sit between
   the scenery (1) and the food/animals (20/21). Empty foreground areas let
   clicks through to the window underneath. */
.bar{position:absolute;left:0;right:0;bottom:0;height:var(--bar-h);pointer-events:none}
.bar-world{position:absolute;inset:0;z-index:1;pointer-events:auto;border-top:2px solid #3b2a1a;box-shadow:0 -10px 30px -12px #1c140b66;background:var(--world-bg) 0 100%/auto var(--bar-h) repeat-x;image-rendering:pixelated;transition:opacity .5s}
.bar-tag{position:absolute;z-index:4;left:14px;top:12px;display:flex;align-items:center;padding:5px 10px;background:#1d1a16cc;color:#fff;font:400 13px var(--pixel);border-radius:3px;backdrop-filter:blur(4px)}
.bar.pulse .bar-tag{animation:pulse 1s 2}
@keyframes pulse{50%{background:var(--rose)}}
.critters{position:absolute;inset:0;z-index:21;pointer-events:none}
.critter{position:absolute;bottom:calc(var(--bar-h) * .085);left:0;cursor:pointer;will-change:transform;padding:0;pointer-events:auto}
.critter img{display:block;height:var(--h);width:auto;filter:drop-shadow(0 2px 0 #0000002a);transform-origin:50% 100%}
.critter.walk img{animation:step .36s steps(2) infinite}
@keyframes step{50%{translate:0 -2px}}
.critter.flip img{scale:-1 1}
.critter.hop img{animation:hop .5s var(--ease)}
@keyframes hop{40%{translate:0 -16px}}
.say{position:absolute;bottom:calc(100% + 8px);left:50%;translate:-50% 0;white-space:nowrap;padding:5px 9px;background:#fff;color:var(--ink);font:400 13px var(--pixel);border:1.5px solid #3b2a1a;border-radius:3px;box-shadow:2px 2px 0 #3b2a1a;animation:pop .25s var(--ease)}
.say::after{content:'';position:absolute;left:50%;bottom:-7px;width:8px;height:8px;background:#fff;border-right:1.5px solid #3b2a1a;border-bottom:1.5px solid #3b2a1a;rotate:45deg;translate:-50% 0}
@keyframes pop{from{scale:.6;opacity:0}}
.heart{position:absolute;z-index:22;pointer-events:none;animation:rise 1.2s var(--ease) forwards}
@keyframes rise{to{translate:0 -60px;opacity:0}}
.acorn-drop{position:absolute;z-index:3;width:14px;bottom:calc(var(--bar-h) * .085);pointer-events:none}
.bar-toolbar{position:absolute;z-index:2;inset:8px 14px auto;display:flex;align-items:center;gap:12px;pointer-events:auto}
.bar-toolbar .bar-tag{position:static;flex:none;font-size:12px;pointer-events:auto}
.bar-hint{margin:0;color:#fff;font:13px var(--pixel);text-shadow:0 1px 3px #17271c,0 0 6px #17271c}
.bar-collected{margin-left:auto;display:flex;align-items:center;gap:6px;padding:5px 9px;border-radius:4px;background:#fbf7ecef;color:var(--bark);font:14px var(--pixel);white-space:nowrap;font-variant-numeric:tabular-nums}
.bar-collected img{width:18px;height:18px;object-fit:contain;image-rendering:pixelated}
.typing-toggle{display:none;pointer-events:auto;min-height:38px;padding:0 10px;border:1px solid var(--bark);border-radius:5px;background:var(--paper);font:14px var(--pixel)}
.typing-panel{position:absolute;z-index:24;pointer-events:auto;bottom:calc(100% + 10px);right:10px;width:min(340px,calc(100vw - 20px));padding:14px;background:var(--paper);border:1.5px solid var(--bark);border-radius:8px;box-shadow:0 5px 20px #0003}
.typing-panel label{display:block;margin-bottom:8px;font:16px var(--pixel)}
.typing-panel>div{display:flex;gap:8px}
.typing-panel input{min-width:0;flex:1;width:100%;height:44px;border:1px solid var(--line-2);border-radius:4px;background:white;padding:0 10px;font:16px var(--sans);color:var(--ink)}
.typing-panel button{padding:0 10px;border-radius:4px;background:var(--butter);border:1px solid var(--bark)}
.typing-panel small{display:block;margin-top:8px;font-size:12px;color:var(--ink-2)}
.critter-sprite{display:block;background-repeat:no-repeat;image-rendering:pixelated;transform-origin:50% 100%;filter:drop-shadow(0 2px 0 #0003)}
.critter.flip .critter-sprite{scale:-1 1}
.critter.hop:not(.eating) .critter-sprite{animation:hop .5s var(--ease)}
.critter.eating .critter-sprite{animation:nibble .2s steps(2) 3}
@keyframes nibble{50%{transform:rotate(8deg) scaleY(.88)}}
.strip-food-layer{position:absolute;inset:0;z-index:20;pointer-events:none;overflow:hidden}
.strip-food{position:absolute;left:0;bottom:calc(var(--bar-h) * .085);width:18px;height:18px;object-fit:contain;image-rendering:pixelated;will-change:transform}
.strip-food.being-eaten{opacity:.25;transition:opacity .55s}
@media(max-width:860px),(pointer:coarse){
  .typing-toggle{display:block;min-width:60px;min-height:44px}
  .bar-toolbar{inset:5px 8px auto;gap:6px;flex-wrap:wrap}
  .bar-toolbar .bar-tag{font-size:10px;padding:4px 6px}
  .bar-hint{display:none}
  .bar-collected{font-size:13px;padding:4px 6px}
  .collected-label{display:none}
}

.taskchip{position:fixed;z-index:25;left:200px;bottom:calc(var(--bar-h) - 44px);display:flex;align-items:center;gap:8px;height:34px;padding:0 14px 0 6px;font-size:14px;background:var(--paper);border:1.5px solid #3b2a1a;border-radius:10px;box-shadow:0 3px 0 #3b2a1a;font-weight:600}
.taskchip img{width:22px;height:22px;border-radius:5px}
.taskchip:hover{transform:translateY(-1px)}

.toast{position:fixed;z-index:40;left:50%;top:74px;translate:-50% 0;padding:10px 16px;background:var(--ink);color:#fff;border-radius:6px;font-size:14px;box-shadow:0 10px 30px -10px #0008}
dialog{padding:0;border:1.5px solid #3b2a1a;border-radius:10px;box-shadow:0 3px 0 #3b2a1a,0 30px 60px -20px #0007;background:var(--paper);color:var(--ink);width:min(420px,90vw)}
dialog::backdrop{background:#1d1a1640;backdrop-filter:blur(2px)}
.dlg-bar{display:flex;justify-content:space-between;align-items:center;height:38px;padding:0 6px 0 14px;background:var(--paper-2);border-bottom:1.5px solid var(--line-2);font:500 13px var(--pixel)}
.dlg-bar button{width:30px;height:26px;display:grid;place-items:center;border-radius:5px}
.dlg-body{padding:22px 22px 24px}
.dlg-body p{margin:0 0 20px;color:var(--ink-2)}

/* ---------- world themes: same six backgrounds as the game ---------- */
body[data-world="0"]{--sky-top:#bfe7de;--sky-bot:#9ccdc0}
body[data-world="1"]{--sky-top:#8edce0;--sky-bot:#318da8;--icon-ink:#0f2d33}
body[data-world="2"]{--sky-top:#b8dfd6;--sky-bot:#8bbb99}
body[data-world="3"]{--sky-top:#b8dfd6;--sky-bot:#367c70;--icon-ink:#f2fbef;--icon-shadow:#0007}
body[data-world="4"]{--sky-top:#b3a8cc;--sky-bot:#7b7799}
body[data-world="5"]{--sky-top:#401d2b;--sky-bot:#702f35;--icon-ink:#ffe6dc;--icon-shadow:#0009}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .icons-right{display:none}
  .window{right:12px}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  :root{--bar-h:112px}
  .icons,.menubar nav,.paint,.sky-logo{display:none}
  .menubar{gap:10px}
  .window{left:8px;right:8px;top:68px;border-radius:10px}
  .hero{grid-template-columns:1fr;padding:34px 22px 40px}
  .hero-art{order:-1;margin:0 4px;padding:0 0 6px}
  .hero-art{padding:0 0 8px}.notif{display:none}.exe-scene{height:170px}.exe{--k:.62}
  .note,.party-pets{display:none}
  .finale-ground img{height:calc(var(--h) * .62)}
  .finale-scene{padding-bottom:150px}
  .finale-ground{height:110px;background-size:auto 110px}
  .notepad-body{padding:24px 20px;background:none}
  .w2{display:none}.w1{width:80%}
  .mini-doc{font-size:10px;padding:10px}.w1{top:16%;height:auto;bottom:34%;width:72%}.mini-doc b{font-size:13px}.mini-doc p{font-size:10px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;margin:0}
  .bubble{display:none}
  .block{padding:60px 22px 20px}
  .block-head.split,.screens{grid-template-columns:1fr;gap:4px}
  .screens{gap:24px}
  .world-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .notepad-body{padding:24px 20px}
  .clock{display:none}
  .btn-logo.small{padding:0 12px}
}
@media (max-width:520px){
  .cards{grid-template-columns:1fr 1fr;gap:10px}
  .card-stage{height:110px}
  .card-line,.stat{display:none}
  .facts{gap:18px}
  .foot{flex-direction:column;gap:6px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}