/* The stand-alone demo page. Tokens are the locked Konsensus Ink design system (brand-ink/DESIGN-SYSTEM.md). */
:root { --ink: #1D2925; --cool: #ECEEEE; --mute: #56615E; --eink: #E6E6E4; color-scheme: light; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--cool); color: var(--ink); font: 400 17px/1.5 "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
.stage { min-height: 100svh; display: grid; place-content: center; justify-items: center; gap: 22px; padding: 28px 16px; }
.device { margin: 0; width: min(92vw, calc((100svh - 150px) * 0.64), 520px); }
.device__body { position: relative; background: #161918; border-radius: clamp(16px, 4.6%, 30px); padding: 7.4% 7.4% 15%; box-shadow: 0 1px 0 #2B302E inset, 0 30px 60px -30px rgba(29, 41, 37, .45); }
.device__panel { --light: .5; aspect-ratio: 1072 / 1448; background: var(--eink); overflow: hidden; filter: brightness(calc(.9 + var(--light) * .1)); color: #4A4A4A; display: grid; }
.device__power { position: absolute; left: 50%; bottom: 0; translate: -50% 50%; width: 15%; height: 9px; padding: 0; border: 0; border-radius: 5px; background: #2B302E; cursor: pointer; }
.device__power::after { content: ""; position: absolute; inset: -14px -10px; }
.device__power:focus-visible, canvas:focus-visible { outline: 2px solid #A96242; outline-offset: 3px; }
.hint { margin: 0; color: var(--mute); font-size: clamp(15px, 1.4vw, 18px); text-align: center; text-wrap: balance; }