*{box-sizing:border-box}body{margin:0;background:#171b2a;color:#e9e5db;font-family:Arial,Helvetica,sans-serif;overflow:hidden}#app{height:100svh;min-height:500px;position:relative}canvas{display:block;width:100%;height:100%;touch-action:none}header{position:absolute;top:33px;left:42px;right:42px;display:flex;justify-content:space-between;align-items:center}.brand{text-decoration:none;color:#eee9df;font-size:14px;font-weight:600;letter-spacing:.5px;display:flex;align-items:center;gap:12px}.brand-mark{font-size:31px;color:#ddc194}.edition{font-size:10px;letter-spacing:2px;color:#858898;margin-left:17px;font-weight:400}button{font:inherit;color:inherit;cursor:pointer}.export{background:#ffffff06;border:1px solid #ffffff20;border-radius:8px;padding:12px 17px;font-size:12px;display:flex;gap:13px;align-items:center;transition:.2s}.export:hover{background:#ffffff15;border-color:#c3b396}.export:disabled{opacity:.5;cursor:wait}.intro{pointer-events:none;position:absolute;top:22%;left:5.2%}.eyebrow{font-size:9px;letter-spacing:2.5px;color:#b9ac99;display:flex;align-items:center;gap:9px}.eyebrow i,.dot{width:5px;height:5px;border-radius:50%;background:#ddc091;display:inline-block}.intro h1{font-family:Georgia,Times New Roman,serif;font-weight:400;font-size:clamp(42px,5.3vw,83px);letter-spacing:-3px;margin:19px 0 20px;line-height:1}.intro h1 span{color:#d6b585}.intro p{font-size:13px;line-height:1.9;color:#a0a3b1;letter-spacing:.2px}.chapter{margin-top:47px;font-size:8px;letter-spacing:2px;color:#747b90}.chapter span{color:#b3a18b;margin-right:11px}.annotation{position:absolute;right:4%;bottom:26%;display:flex;gap:13px;font-family:Georgia,serif;color:#9295a5;font-size:13px;line-height:1.7;font-style:italic;pointer-events:none}.tiny-moon{font-size:30px;color:#b8a987;font-style:normal}.scene-label{position:absolute;bottom:137px;left:50%;transform:translate(-50%);font-size:8px;color:#8e93a5;letter-spacing:1.7px;display:flex;align-items:center;gap:11px;white-space:nowrap}.scene-label .dot{background:#a8c4b0;width:4px;height:4px}.rule{width:24px;height:1px;background:#555c6c}.toolbar{position:absolute;bottom:69px;left:50%;transform:translate(-50%);display:flex;align-items:center;padding:8px 13px;background:#242938d9;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid #ffffff14;border-radius:13px;box-shadow:0 10px 40px #0002}.toolbar button{border:0;background:transparent;display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:7px;white-space:nowrap;font-size:12px;color:#c5c7cf}.toolbar button>span:first-child{font-size:19px;color:#bfb6a8}.toolbar button:hover,.toolbar button.active{background:#ffffff0b;color:#fff}.divider{height:16px;width:1px;background:#ffffff13;margin:0 3px}.on{width:4px;height:4px;border-radius:50%;background:#dbba81}.on.off{background:#646c7f}footer{position:absolute;bottom:25px;left:42px;right:42px;display:flex;justify-content:space-between;color:#6f778c;font-size:8px;letter-spacing:1.5px}footer b{padding:0 10px}footer>span:last-child{font:italic 12px Georgia,serif;letter-spacing:.2px;color:#9695a0}.footer-star{color:#d0b88f;padding-left:12px}#toast{position:absolute;top:90px;right:42px;background:#303747;border:1px solid #ffffff20;padding:13px 18px;border-radius:8px;font-size:12px;opacity:0;transition:opacity .2s;pointer-events:none}#toast.visible{opacity:1}button:focus-visible,a:focus-visible{outline:2px solid #e2c79e;outline-offset:4px}@media(max-width:760px){header{top:23px;left:22px;right:22px}.intro{top:125px;left:24px}.intro h1{font-size:48px}.intro p{font-size:11px}.eyebrow{font-size:7px;letter-spacing:1.8px}.chapter,.annotation{display:none}.toolbar{bottom:65px;padding:6px}.toolbar button{padding:8px 10px;gap:7px;font-size:10px}.scene-label{bottom:126px;font-size:7px}footer{left:22px;right:22px;font-size:6px;letter-spacing:1px}footer>span:last-child{display:none}.export{padding:10px;font-size:10px}.edition{display:none}}