/* ============================================================
   SHARED — Kobo Libra Colour · SimpleUI redesign set
   Device frame + viewport fit + Kaleido-honest utilities +
   cover helpers. Each design file links this, then scopes its
   own look under .scr.d-XX.
   Real screen: 1264 × 1680 (Kaleido 3). Colour = fills only,
   fine text near-black on the 300ppi mono layer, flat fills +
   hairlines + dither — no gradients/shadows (frame excepted).
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body.studio{
  background:radial-gradient(130% 90% at 50% -10%, #302e29 0%, #201f1c 60%, #141310 100%);
  overflow:hidden;
  font-family:"Hanken Grotesk",sans-serif;
}
/* absolute centering — robust regardless of the device's un-scaled layout box.
   (CSS grid would size its row to the 1760px box and shove the scaled device
   off-screen; translate(-50%,-50%) centers by the element's own box instead.) */
.stage{position:fixed;inset:0;overflow:hidden}
.scaler{position:absolute;top:0;left:0;transform-origin:top left;transform:scale(var(--s,.5))}

/* simplified Libra Colour frame, fat left grip = page-turn side */
.frame{
  position:relative;width:1410px;height:1760px;border-radius:48px;
  background:linear-gradient(135deg,#2a2823,#141310 60%,#0c0b09);
  padding:40px 40px 40px 122px;
  box-shadow:0 2px 0 #3d3a33 inset,0 60px 120px -30px rgba(0,0,0,.7),0 8px 24px rgba(0,0,0,.5);
}
.frame .grip{position:absolute;left:88px;top:60px;bottom:60px;width:1px;background:#000;opacity:.5}
.frame .pt{position:absolute;left:30px;width:30px;border-radius:8px;background:linear-gradient(90deg,#000,#2c2a24);box-shadow:0 1px 0 #423f37 inset}
.frame .pt.u{top:560px;height:230px}.frame .pt.d{top:840px;height:230px}
.frame .power{position:absolute;right:-4px;top:300px;width:8px;height:120px;border-radius:0 6px 6px 0;background:#0c0b09}

/* the screen — every design fills this */
.scr{position:relative;width:1264px;height:1680px;border-radius:8px;overflow:hidden;display:flex;flex-direction:column}

/* utilities */
.grain{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E")}
.dither{background-image:radial-gradient(currentColor .9px,transparent 1px);background-size:5px 5px}

/* cover helper — real JPEG, cover-fit, with a thin top hairline so light
   covers don't bleed into light paper. Add .bk--shadow for the flat e-ink lift. */
.bk{background-size:cover;background-position:center;background-repeat:no-repeat;position:relative;overflow:hidden}
.bk--ring{box-shadow:0 0 0 1px rgba(0,0,0,.35) inset}
.bk--lift{box-shadow:8px 8px 0 0 rgba(0,0,0,.12)}
.bk .prog{position:absolute;left:0;right:0;bottom:0;height:7px;background:rgba(20,18,15,.35)}
.bk .prog i{display:block;height:100%}