:root{color-scheme:dark;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#eaf4ed;background:#071211}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 35%,#163831 0,#071211 65%);min-height:100dvh}button{font:inherit;cursor:pointer}button:focus-visible{outline:3px solid #ffc985;outline-offset:4px}[hidden]{display:none!important}#intro{max-width:540px;margin:auto;padding:28px 22px 20px;text-align:center}header{margin-bottom:22px}.eyebrow{font-size:12px;letter-spacing:.2em;color:#9ac7b8}h1{font-family:Georgia,serif;font-weight:400;font-size:clamp(30px,7vw,42px);margin:9px 0 10px}header p{font-size:16px;color:#bad0c8;margin:0;line-height:1.5}#preview{width:min(66vw,255px);aspect-ratio:868/1240;margin:0 auto;position:relative;box-shadow:0 16px 65px #0009;border:1px solid #68ae9b30;border-radius:3px;overflow:hidden}#preview img{width:100%;height:100%;display:block}#demo{position:absolute;inset:0;pointer-events:none}canvas{display:block}.preview-label{position:absolute;top:8px;left:8px;font-size:10px;letter-spacing:.12em;padding:5px 7px;background:#05110ed9;border:1px solid #67c5b44d;color:#c5ded5}.controls{margin-top:20px}.controls p{font-size:16px;line-height:1.55;margin:0 0 16px;color:#d3e6dd}#start{width:100%;max-width:330px;padding:15px 20px;border:1px solid #86dfdc;background:#92e4da;color:#082825;border-radius:4px;font-weight:650;box-shadow:0 0 30px #50caba20}#start:hover{background:#b1eee6}#start:disabled{opacity:.5;cursor:wait}.controls .note{font-size:14px;color:#a5bdb4;margin:14px 0 0}#error{font-size:16px;text-align:left;line-height:1.5;background:#46271e;padding:14px;border-left:3px solid #ffad75;border-radius:3px}#ar{position:fixed;inset:0;overflow:hidden;background:#000}#hud{position:fixed;inset:0;pointer-events:none;z-index:5;padding:max(20px,env(safe-area-inset-top)) 18px max(22px,env(safe-area-inset-bottom));display:flex;flex-direction:column;justify-content:space-between}.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;background:#071211c9;border-radius:4px}.topbar .eyebrow{color:#effaf5;letter-spacing:.13em}#close{pointer-events:auto;border:1px solid #a9cab575;color:#f0f8f4;background:#163831;padding:9px 13px;border-radius:3px;font-size:14px}#status{position:absolute;top:100px;left:18px;right:18px;margin:auto;text-align:center;font-size:16px;line-height:1.5;padding:12px 14px;background:#071211df;border:1px solid #89cbaf40;border-radius:4px;max-width:400px}.bottom-help{background:#071211d9;font-size:14px;line-height:1.5;padding:13px 15px;text-align:center;border-radius:4px}@media(min-height:850px){#intro{padding-top:45px}#preview{width:280px}header{margin-bottom:28px}.controls{margin-top:26px}}@media(prefers-reduced-motion:reduce){#start{box-shadow:none}}

#preview{width:min(82vw,340px);aspect-ratio:4/5;overflow:hidden;touch-action:none}#preview img{display:none}#demo{pointer-events:auto}.load-note{font-size:14px;color:#a5bdb4;margin:12px 0}.effect-switch{display:flex;justify-content:center;gap:6px}.effect-switch button{border:1px solid #73b9ac50;background:#0d241e;color:#bdd8ca;padding:9px 16px;border-radius:4px;font-size:14px}.effect-switch button.selected{background:#183d33;color:#a7f6e6;border-color:#71d6c4}.preview-label{pointer-events:none}
.book-switch{margin:0 0 16px}.book-switch button{flex:1;padding:10px 8px}

.book-switch{flex-wrap:wrap}.book-switch button{flex:1 1 130px}