/* bloop.in
   One unit (--u) is one logical game pixel; everything is sized in it.
   One typeface (Fredoka), heavy for numbers. Surfaces are flat with hairlines;
   colour and depth are kept for things that mirror the game: goo beads,
   tinted tiles, the drop button. Touch targets are at least 44px on a phone. */
:root {
  --u:2px;
  --bg:#07081a; --s1:#0c0d26; --s2:#121335; --line:#25265a; --line2:#3a3b78;
  --ink:#eeedf7; --ink2:#a5a3cf; --ink3:#6462a0;
  --blue:#3f8cff; --sky:#b8e6ff; --gold:#ffc944; --violet:#7a66ea; --pink:#ff7190;
  --r:calc(var(--u)*3); --hair:calc(var(--u)*.6);
  --font:'Fredoka',ui-rounded,'SF Pro Rounded',system-ui,sans-serif;
  --out:cubic-bezier(.2,.8,.2,1); --pop:cubic-bezier(.3,1.7,.5,1);
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { height:100%; margin:0; overflow:hidden; overscroll-behavior:none; background:var(--bg); }
body { color:var(--ink); font:500 calc(var(--u)*8.4)/1.3 var(--font); font-variant-numeric:tabular-nums; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; touch-action:none; -webkit-font-smoothing:antialiased; }
button { font:inherit; color:inherit; border:0; background:none; padding:0; margin:0; cursor:pointer; touch-action:manipulation; transition:transform .12s var(--out), opacity .15s, background-color .15s, border-color .15s; }
button:active { transform:translateY(calc(var(--u)*1)); opacity:.8; }
p { margin:0; }
#app { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; }
#stage { position:relative; overflow:hidden; background:var(--bg); }
canvas { position:absolute; inset:0; width:100%; height:100%; display:block; image-rendering:crisp-edges; image-rendering:pixelated; }
#fx { position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse at 50% 42%, #0000 55%, #03041280 100%); }
.ui { position:absolute; pointer-events:none; text-shadow:0 var(--u) 0 var(--bg); transition:opacity .4s; }
/* a bead of goo: lit from the top left, like the drops in the game */
.dot, #goo::before { display:inline-block; flex:none; width:calc(var(--u)*6); height:calc(var(--u)*6); border-radius:50%; background:var(--blue);
  box-shadow:inset calc(var(--u)*-1) calc(var(--u)*-1) 0 #1f47c9, inset calc(var(--u)*1) calc(var(--u)*1) 0 var(--sky), 0 0 0 calc(var(--u)*.8) #0a1a52; }
.fly { position:absolute; z-index:40; pointer-events:none; margin:calc(var(--u)*-3); }
/* small tracked capitals, used for every label */
#depth, #left, #resL, .pane h4, #noteN, .tag, #skip, #title .where, #title .who, #zone small, #combo small, .tabs button, .lv2 u {
  font:600 calc(var(--u)*6.6)/1.2 var(--font); letter-spacing:.12em; text-transform:uppercase; }

/* ── cinematic mode: title and intro hide the HUD and bring in letterbox bars ── */
#stage.cine > .ui { opacity:0 !important; } #stage.cine #shopBtn { display:none; }
#stage::before, #stage::after { content:''; position:absolute; left:0; right:0; height:0; background:#03040f; z-index:20; pointer-events:none; transition:height .7s var(--out); }
#stage::before { top:0; } #stage::after { bottom:0; }
#stage.story::before, #stage.story::after { height:8%; }

/* ── HUD ── */
#hud { left:0; right:0; top:0; padding:calc(env(safe-area-inset-top) + var(--u)*4) calc(var(--u)*5) 0; display:flex; justify-content:space-between; align-items:center; }
#goo, #depth { background:#0b0c26cc; border:var(--hair) solid var(--line2); border-radius:99px; }
#goo { display:flex; align-items:center; gap:calc(var(--u)*3.5); padding:calc(var(--u)*3) calc(var(--u)*5.5) calc(var(--u)*3) calc(var(--u)*4); font:700 calc(var(--u)*13.5)/1 var(--font); }
#goo::before { content:''; width:calc(var(--u)*8); height:calc(var(--u)*8); }
#goo.bump::before { animation:tick .25s var(--out); }
#right { display:flex; align-items:center; gap:calc(var(--u)*5); }
#depth { color:var(--sky); padding:calc(var(--u)*4.4) calc(var(--u)*5); } #depth.flip { animation:fadeUp .4s var(--out); }
#menuBtn { pointer-events:auto; width:calc(var(--u)*22); height:calc(var(--u)*22); margin:calc(var(--u)*-2) calc(var(--u)*-4) calc(var(--u)*-2) calc(var(--u)*-5); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:calc(var(--u)*2.2); }
#menuBtn i { width:calc(var(--u)*9); height:calc(var(--u)*1.2); background:var(--ink); }
#bar { left:calc(var(--u)*7); right:calc(var(--u)*7); top:calc(env(safe-area-inset-top) + var(--u)*27); height:calc(var(--u)*2.4); border-radius:99px; overflow:hidden; background:var(--line); }
#bar i { display:block; height:100%; width:0; border-radius:99px; background:linear-gradient(90deg,var(--violet),var(--sky)); transition:width .25s var(--out); }
#left { right:calc(var(--u)*7); top:calc(env(safe-area-inset-top) + var(--u)*32); color:var(--ink3); }
#pips { left:calc(var(--u)*7); right:60%; top:calc(env(safe-area-inset-top) + var(--u)*32.4); display:flex; flex-wrap:wrap; gap:calc(var(--u)*2.2); }
#pips .dot { transition:opacity .2s, transform .2s var(--out); animation:pipin .25s var(--out); }
#pips .dot.used { background:none; box-shadow:inset 0 0 0 var(--hair) var(--line2); }
#zone { left:0; right:0; top:19%; text-align:center; opacity:0; font:700 calc(var(--u)*13)/1.3 var(--font); letter-spacing:.04em; }
#zone small { display:block; color:var(--ink2); margin-bottom:calc(var(--u)*1.5); }
#zone.on { animation:hold 2.8s ease forwards; }
#combo { right:calc(var(--u)*7); top:24%; text-align:right; opacity:0; transition:opacity .3s; font:700 calc(var(--u)*20)/1 var(--font); transform-origin:right center; }
#combo small { display:block; color:var(--ink2); margin-top:calc(var(--u)*1.5); }
#combo.on { opacity:1; } #combo.bump { animation:tick .15s var(--out); }
#haul { left:0; right:0; bottom:calc(env(safe-area-inset-bottom) + var(--u)*5); text-align:center; font:700 calc(var(--u)*12)/1 var(--font); }
#hint, #ff { left:0; right:0; text-align:center; opacity:0; transition:opacity .4s; color:var(--ink2); }
#hint { bottom:17%; font-size:calc(var(--u)*8.4); color:var(--ink); } #ff { bottom:13%; font-size:calc(var(--u)*7.2); }
#hint.on, #ff.on { opacity:1; }
#toast { left:0; right:0; top:33%; text-align:center; opacity:0; color:var(--gold); white-space:pre-line; font:700 calc(var(--u)*17)/1.2 var(--font); letter-spacing:.06em; }
#toast.on { animation:hold 2.2s ease forwards; }
.pop { position:absolute; pointer-events:none; white-space:nowrap; transform:translate(-50%,-50%); font:700 calc(var(--u)*9)/1 var(--font); color:var(--sky); text-shadow:0 var(--u) 0 var(--bg); animation:pop .8s var(--out) forwards; }
.pop.gold { color:var(--gold); } .pop.big { color:var(--ink); font-size:calc(var(--u)*14); }
#shopBtn { position:absolute; left:0; right:0; margin:auto; width:max-content; bottom:calc(env(safe-area-inset-bottom) + var(--u)*20); opacity:0; pointer-events:none;
           font:500 calc(var(--u)*7)/1 var(--font); letter-spacing:.14em; text-transform:uppercase; color:var(--ink); background:var(--s1); border:var(--hair) solid var(--line2); border-radius:var(--r); padding:calc(var(--u)*6) calc(var(--u)*10); }
#shopBtn.on { opacity:1; pointer-events:auto; }

/* ── wordmark: the goo name as a pixel image ── */
.logo { display:inline-block; pointer-events:auto; cursor:pointer; }
.logo img { display:block; height:calc(var(--u)*30); image-rendering:pixelated; }
.logo.sm img { height:calc(var(--u)*21); }
.logo.hop img { animation:hop .4s var(--out); }

/* ── title ── */
#title { position:absolute; inset:0; z-index:30; text-align:center; text-shadow:0 var(--u) 0 var(--bg); transition:opacity .6s, visibility .6s; }   /* the name itself is drawn in goo on the canvas */
#title.off { opacity:0; visibility:hidden; pointer-events:none; }
#title > * { animation:fadeUp .7s var(--out) both; }
#title > * { position:absolute; left:0; right:0; }
#title .sub { top:51%; color:var(--ink); animation-delay:1s; }
#title .where { top:56.5%; color:var(--gold); animation-delay:1.1s; }
#diveBtn { top:68%; margin:auto; width:max-content; padding:calc(var(--u)*6); font:500 calc(var(--u)*7)/1 var(--font); letter-spacing:.24em; text-transform:uppercase; color:var(--ink); animation:fadeUp .7s 1.3s var(--out) both, blink 1.6s 2.4s steps(1) infinite; }
#title .who { bottom:calc(env(safe-area-inset-bottom) + var(--u)*24); color:var(--ink2); animation-delay:1.5s; }

/* ── intro captions ── */
#story { position:absolute; inset:0; z-index:25; visibility:hidden; opacity:0; transition:opacity .5s, visibility .5s; }
#story.on { visibility:visible; opacity:1; }
#cap { position:absolute; left:9%; right:9%; top:67%; text-align:center; font-size:calc(var(--u)*9.4); line-height:1.5; text-shadow:0 var(--u) 0 var(--bg); }
#cap span { display:inline-block; opacity:0; animation:fadeUp .5s var(--out) forwards; animation-delay:calc(var(--i)*90ms); }
#cap.big { font:700 calc(var(--u)*19)/1.2 var(--font); }
#skip { position:absolute; right:calc(var(--u)*3); bottom:calc(8% + var(--u)*3); padding:calc(var(--u)*6); color:var(--ink3); }

/* ── upgrade sheet ── */
#sheet { position:absolute; left:0; right:0; bottom:0; height:66%; z-index:10; display:flex; flex-direction:column; background:var(--s1); border-top:var(--hair) solid var(--line2);
         border-radius:calc(var(--u)*8) calc(var(--u)*8) 0 0; box-shadow:0 calc(var(--u)*-6) calc(var(--u)*20) #0008; transform:translateY(104%); transition:transform .32s var(--out); touch-action:pan-y; }
#sheet.open { transform:none; }
#grab { flex:none; width:calc(var(--u)*16); height:calc(var(--u)*1.2); background:var(--line2); margin:calc(var(--u)*4) auto 0; }
#res { flex:none; padding:calc(var(--u)*5) calc(var(--u)*8) calc(var(--u)*6); display:flex; justify-content:space-between; align-items:flex-end; gap:calc(var(--u)*6); }
#resL { display:block; color:var(--ink3); margin-bottom:calc(var(--u)*2); }
#resN { display:block; font:700 calc(var(--u)*20)/1 var(--font); }
#resS { color:var(--ink2); text-align:right; font-size:calc(var(--u)*7); line-height:1.4; } #resS em { font-style:normal; font-weight:600; color:var(--ink); }
#cards { flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; touch-action:pan-y; position:relative;
         padding:0 calc(var(--u)*7) calc(var(--u)*5); display:flex; flex-direction:column; gap:calc(var(--u)*2.4); }
#cards.enter > * { animation:fadeUp .35s var(--out) both; animation-delay:calc(var(--i)*25ms); }
/* One upgrade per row: icon, name, what it becomes, price. The stripe on the
   left says what it acts on: blue for the drop, violet for pods, gold for goo. */
.tile, .wide { --c:var(--blue); --p:0%; position:relative; flex:none; display:flex; align-items:center; gap:calc(var(--u)*4.5); min-height:calc(var(--u)*29); overflow:hidden;
               padding:calc(var(--u)*3.5) calc(var(--u)*4) calc(var(--u)*3.5) calc(var(--u)*6.5); background:var(--s2); border:var(--hair) solid var(--line); border-radius:calc(var(--u)*5); color:var(--ink); text-align:left; }
.tile::before, .wide::before { content:''; position:absolute; left:0; top:0; bottom:0; width:calc(var(--u)*2); background:var(--c); }
.tile.pod { --c:var(--violet); } .tile.goo, .wide.pearl { --c:var(--gold); } .wide.bottle { --c:var(--sky); } .wide.locked { --c:var(--line2); }
.ico { flex:none; width:calc(var(--u)*17); height:calc(var(--u)*17); padding:calc(var(--u)*2.5); image-rendering:pixelated; border-radius:calc(var(--u)*4.5); background:color-mix(in srgb, var(--c) 20%, #05061a); }
.tx { flex:1; min-width:0; display:flex; flex-direction:column; gap:calc(var(--u)*1.6); }
.nm { font-weight:600; font-size:calc(var(--u)*9.2); line-height:1.1; display:flex; align-items:center; gap:calc(var(--u)*3); }
.fx { font:500 calc(var(--u)*7.2)/1.2 var(--font); color:var(--ink3); } .tile .fx { white-space:nowrap; }
.fx b { color:var(--ink); font-weight:700; } .fx i { font-style:normal; margin:0 calc(var(--u)*2); }
.price, .wide em { flex:none; min-width:calc(var(--u)*36); height:calc(var(--u)*21); padding:0 calc(var(--u)*4); border-radius:calc(var(--u)*5); display:flex; align-items:center; justify-content:center; gap:calc(var(--u)*2.5);
                   font:700 calc(var(--u)*9.4)/1 var(--font); font-style:normal; }
.price .dot { width:calc(var(--u)*5.4); height:calc(var(--u)*5.4); }
.tile.can { border-color:var(--line2); }
.tile.can .price, .wide em { background:linear-gradient(#a9dbff,var(--blue)); color:#04102e; box-shadow:0 calc(var(--u)*1.4) 0 #1f47c9; }
.tile.poor .nm, .tile.poor .ico { opacity:.6; }
.tile.poor .price { color:var(--ink3); background:linear-gradient(90deg, var(--line2) var(--p), var(--line) var(--p)); } .tile.poor .price .dot { filter:saturate(.25); opacity:.7; }
.tile.maxed .price { color:var(--gold); font-size:calc(var(--u)*7); letter-spacing:.14em; text-transform:uppercase; } .tile.maxed .price .dot { display:none; }
.tile:active, .wide:active { transform:scale(.97); opacity:1; }
.tile.hit { animation:press .35s var(--pop); } .tile.hit .ico { animation:hop .4s var(--out); } .tile.hit .price, .tile.hit .fx b { animation:flash .4s; } .tile.no { animation:shake .25s; }
.tag { font-style:normal; color:var(--gold); }
.wide.locked { background:none; border-style:dashed; min-height:calc(var(--u)*22); } .wide.locked .nm { color:var(--ink3); letter-spacing:.3em; }
.wide.pearl em { background:linear-gradient(#fff3bf,var(--gold)); color:#4f2f0c; box-shadow:0 calc(var(--u)*1.4) 0 #d98a1c; }
.spark { position:absolute; z-index:40; pointer-events:none; width:calc(var(--u)*2); height:calc(var(--u)*2); margin:calc(var(--u)*-1); background:var(--sky); animation:spark .5s var(--out) forwards; }
.spark.h { width:auto; height:auto; background:none; color:var(--pink); font-size:calc(var(--u)*7); line-height:1; animation-duration:.8s; }
#foot { flex:none; padding:calc(var(--u)*5) calc(var(--u)*7) calc(env(safe-area-inset-bottom) + var(--u)*6); border-top:var(--hair) solid var(--line); }
#go { width:100%; height:calc(var(--u)*30); border-radius:calc(var(--u)*6); background:linear-gradient(#e6f6ff,#8fd0ff); color:#06103a; box-shadow:0 calc(var(--u)*2) 0 var(--blue); font:700 calc(var(--u)*13)/1 var(--font); letter-spacing:.1em; text-indent:.1em; }

/* ── menu ── */
#menu { position:absolute; inset:0; z-index:15; display:flex; flex-direction:column; background:var(--bg); transform:translateY(101%); transition:transform .35s var(--out); padding-top:env(safe-area-inset-top); touch-action:pan-y; }
#menu.open { transform:none; }
.mh { flex:none; display:flex; justify-content:space-between; align-items:center; padding:calc(var(--u)*8) calc(var(--u)*9) calc(var(--u)*4); }
#menuX { width:calc(var(--u)*22); height:calc(var(--u)*22); margin-right:calc(var(--u)*-7); font:500 calc(var(--u)*14)/1 var(--font); color:var(--ink2); }
.tabs { flex:none; position:relative; display:flex; margin:calc(var(--u)*4) calc(var(--u)*9) 0; border-bottom:var(--hair) solid var(--line); }
.tabs button { flex:1; height:calc(var(--u)*22); color:var(--ink3); } .tabs button.on { color:var(--ink); }
#tabInk { position:absolute; left:0; bottom:calc(var(--hair)*-1); width:calc(100% / 3); height:calc(var(--u)*1.2); background:var(--ink); transition:translate .3s var(--out); }
.pane { display:none; flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; touch-action:pan-y; position:relative; padding:calc(var(--u)*8) calc(var(--u)*9) calc(env(safe-area-inset-bottom) + var(--u)*16); }
.pane.on { display:block; animation:fadeUp .3s var(--out) both; }
.pane h4 { margin:calc(var(--u)*12) 0 calc(var(--u)*3); color:var(--ink3); font-weight:500; }
.msg { text-align:center; padding:calc(var(--u)*34) calc(var(--u)*6); color:var(--ink2); font-size:calc(var(--u)*7.4); } .msg b { display:block; color:var(--ink); font-weight:600; font-size:calc(var(--u)*9); margin-bottom:calc(var(--u)*2); }
.sum { margin-bottom:calc(var(--u)*7); color:var(--ink2); font-size:calc(var(--u)*7.4); line-height:1.6; } .sum b { color:var(--ink); font:500 1em var(--font); }
/* notes */
.nt { display:flex; gap:calc(var(--u)*6); align-items:baseline; width:100%; text-align:left; padding:calc(var(--u)*5) 0; border-top:var(--hair) solid var(--line); }
.nt > b { flex:none; width:calc(var(--u)*9); font:500 calc(var(--u)*6.2)/1 var(--font); color:var(--ink3); }
.nt span { font-size:calc(var(--u)*7.6); line-height:1.45; color:var(--ink2); }
.nt.new span { color:var(--ink); font-weight:500; } .nt.new > b { color:var(--blue); } .nt.lock span { color:var(--ink3); }
/* the deep */
.lv2 { --z:var(--blue); background:linear-gradient(90deg, color-mix(in srgb, var(--z) 20%, #0000), #0000 75%); display:flex; align-items:center; gap:calc(var(--u)*5); min-height:calc(var(--u)*11); border-left:calc(var(--u)*1.2) solid var(--z); padding-left:calc(var(--u)*4); margin-bottom:calc(var(--u)*1.4); }
.lv2 > b { flex:none; width:calc(var(--u)*9); font:500 calc(var(--u)*6.6)/1 var(--font); color:var(--ink2); }
.lv2 span { flex:1; display:flex; flex-wrap:wrap; gap:calc(var(--u)*1.3); align-items:center; }
.lv2 span i { width:calc(var(--u)*4); height:calc(var(--u)*4); border-radius:50%; background:var(--blue); box-shadow:inset calc(var(--u)*.7) calc(var(--u)*.7) 0 var(--sky); }
.lv2 span em { font:500 calc(var(--u)*6)/1 var(--font); font-style:normal; color:var(--ink3); margin-left:calc(var(--u)*1.5); }
.lv2.me > b { color:var(--ink); } .lv2.me span i:first-child { background:var(--gold); } .lv2 u { flex:none; text-decoration:none; color:var(--gold); }
.gap { color:var(--ink3); font:500 calc(var(--u)*6)/1 var(--font); padding:calc(var(--u)*1) 0 calc(var(--u)*2.4) calc(var(--u)*5); }
.tp { display:flex; gap:calc(var(--u)*5); align-items:baseline; padding:calc(var(--u)*4) 0; border-top:var(--hair) solid var(--line); font-size:calc(var(--u)*7.6); }
.tp b { flex:none; width:calc(var(--u)*9); font:500 calc(var(--u)*6.2)/1 var(--font); color:var(--ink3); } .tp span { flex:1; } .tp em { font:500 calc(var(--u)*6.6)/1 var(--font); font-style:normal; color:var(--ink2); }
/* settings */
.row { display:flex; justify-content:space-between; align-items:center; gap:calc(var(--u)*6); min-height:calc(var(--u)*28); cursor:pointer; border-bottom:var(--hair) solid var(--line); }
.row span { font-weight:500; } .row small { display:block; font-size:calc(var(--u)*6.4); color:var(--ink3); font-weight:400; }
.sw { flex:none; position:relative; width:calc(var(--u)*30); height:calc(var(--u)*17); border-radius:99px; background:var(--s2); box-shadow:inset 0 0 0 var(--hair) var(--line2); }
.sw::after { content:''; position:absolute; top:calc(var(--u)*2); left:calc(var(--u)*2); width:calc(var(--u)*13); height:calc(var(--u)*13); border-radius:50%; background:var(--ink3); transition:translate .2s var(--out), background-color .2s; }
.sw.on { background:var(--blue); box-shadow:none; } .sw.on::after { translate:calc(var(--u)*13) 0; background:#fff; }
input, textarea { font:500 calc(var(--u)*7.4)/1.4 var(--font); color:var(--ink); background:none; border:0; border-radius:0; outline:none; user-select:text; -webkit-user-select:text; touch-action:auto; }
#nameIn { width:calc(var(--u)*72); text-align:right; padding:calc(var(--u)*3) 0; border-bottom:var(--hair) solid var(--line2); } #nameIn:focus { border-color:var(--ink); }
#saveBox { width:100%; resize:none; padding:calc(var(--u)*4); font-size:calc(var(--u)*6); word-break:break-all; color:var(--ink2); border:var(--hair) solid var(--line); border-radius:var(--r); } #saveBox:focus { border-color:var(--line2); }
.hintp { margin-bottom:calc(var(--u)*4); font-size:calc(var(--u)*7); color:var(--ink2); }
#cheatIn { flex:2; min-width:0; padding:0 calc(var(--u)*4); border:var(--hair) solid var(--line); border-radius:var(--r); } #cheatIn:focus { border-color:var(--line2); }
#cheatMsg { margin:calc(var(--u)*3) 0 0; min-height:1.4em; color:var(--gold); }
.btns { display:flex; gap:calc(var(--u)*3); margin-top:calc(var(--u)*3); }
.btn { flex:1; min-height:calc(var(--u)*23); padding:0 calc(var(--u)*4); border-radius:var(--r); border:var(--hair) solid var(--line2); font:500 calc(var(--u)*6.2)/1.2 var(--font); letter-spacing:.12em; text-transform:uppercase; color:var(--ink); }
.btn.ghost { border-color:var(--line); color:var(--ink2); } .btn.danger { color:var(--pink); } .btn.no { animation:shake .25s; }
#credits { margin-top:calc(var(--u)*22); text-align:center; color:var(--ink2); font-size:calc(var(--u)*7.4); } #credits p { margin:calc(var(--u)*5) 0 calc(var(--u)*1); } #credits p b { color:var(--ink); font:500 .9em var(--font); letter-spacing:.14em; }
#heart { color:var(--pink); font-size:calc(var(--u)*9); line-height:1; padding:calc(var(--u)*4) calc(var(--u)*2); vertical-align:middle; } #heart.hit { animation:tick .3s var(--out); }
#hearts { display:block; min-height:1.3em; font:500 calc(var(--u)*6)/1.3 var(--font); color:var(--ink3); }

/* ── a note from a bottle ── */
#note { position:absolute; inset:0; z-index:18; display:flex; align-items:center; justify-content:center; background:#07081ae6; visibility:hidden; opacity:0; transition:opacity .3s, visibility .3s; }
#note.on { visibility:visible; opacity:1; }
.paper { width:78%; translate:0 calc(var(--u)*5); transition:translate .4s var(--out); }
#note.on .paper { translate:0 0; }
#noteN { display:block; color:var(--ink3); padding-bottom:calc(var(--u)*5); border-bottom:var(--hair) solid var(--line2); }
#noteT { margin-top:calc(var(--u)*7); min-height:7.5em; font-size:calc(var(--u)*9.4); line-height:1.6; color:var(--ink); }
#noteT.typing::after { content:''; display:inline-block; width:.5em; height:1em; margin-left:.15em; vertical-align:-.15em; background:var(--blue); animation:blink .8s steps(1) infinite; }
.paper .sig { display:block; margin-top:calc(var(--u)*4); font:500 calc(var(--u)*8)/1 var(--font); font-style:normal; color:var(--ink2); } .paper .sig::before { content:'— '; }
.paper .btn { width:100%; margin-top:calc(var(--u)*12); }

/* ── motion: short, eased, no bounce ── */
@keyframes fadeUp { 0% { opacity:0; translate:0 calc(var(--u)*4); } }
@keyframes tick { 0% { transform:scale(1.18); } }
@keyframes blink { 50% { opacity:0; } }
@keyframes pipin { 0% { transform:scale(0); } }
@keyframes hold { 0% { opacity:0; translate:0 calc(var(--u)*3); } 14%,74% { opacity:1; translate:0 0; } 100% { opacity:0; } }
@keyframes pop { 0% { opacity:0; } 15% { opacity:1; } 100% { opacity:0; margin-top:calc(var(--u)*-12); } }
@keyframes hop { 35% { transform:translateY(-22%); } 70% { transform:translateY(5%); } }
@keyframes flash { 0% { filter:brightness(2.2); } }
@keyframes press { 30% { transform:scale(.97); } }
@keyframes shake { 25% { transform:translateX(calc(var(--u)*-2)); } 75% { transform:translateX(calc(var(--u)*2)); } }
@keyframes spark { 100% { opacity:0; transform:translate(var(--dx), var(--dy)); } }

#botlog { display:none; }
.still * { transition:none !important; animation-duration:.001s !important; animation-delay:0s !important; }   /* settled layout for screenshots */