@font-face{font-family:cerebri;src:url('/fonts/CerebriSans-Regular.ttf')}*{box-sizing:border-box}html,body{margin:0;height:100%;min-height:100dvh;background:#f5f0ea;color:#5a577d;font-family:cerebri,-apple-system,sans-serif}.app{display:grid;grid-template-columns:76px 218px 1fr;height:100dvh;overflow:hidden}aside{background:#f8f5f0;border-right:1px solid #e6dfd9;display:flex;flex-direction:column;align-items:center;padding:20px 0;gap:20px}.mark{font-weight:800;font-size:38px;line-height:1;color:#777298;margin-bottom:20px}aside button,.rail button,footer button,.top button{border:0;background:transparent;color:#767294;cursor:pointer;font:inherit}aside button{font-size:21px;width:42px;height:42px;border-radius:12px}aside button.active{background:#eee9e5;color:#49456a}aside hr{width:32px;border:0;border-top:1px solid #dad3cf;margin:8px}.ticks{margin-top:auto;width:18px;height:46%;background:repeating-linear-gradient(to bottom,transparent 0 8px,#bab4c2 9px 11px,transparent 12px 18px);opacity:.8}.rail{background:#4c4d4d;padding:20px 12px;overflow:auto}.rail header{color:#f5f0ea;font-size:14px;display:flex;justify-content:space-between;align-items:center;padding:0 8px 18px}.rail header button{font-size:25px;color:#fff}.thumb{width:100%;aspect-ratio:16/10;border:2px solid transparent;border-radius:9px;margin-bottom:12px;background:#2b2a2a;color:#bbb;display:grid;place-items:center;font-size:12px;cursor:pointer;position:relative}.thumb.selected{border-color:#e8adb1;box-shadow:0 0 0 2px #ffffff33}.thumb:after{content:attr(data-n);position:absolute;left:8px;top:7px;color:#aaa}main{min-width:0;display:grid;grid-template-rows:58px 1fr 60px;background:#ede8e2}.top{display:flex;align-items:center;justify-content:center;position:relative;background:#f2d9da;border-bottom:1px solid #d9aaad;color:#5b5772}.dots{position:absolute;left:18px;display:flex;gap:10px}.dots i{width:16px;height:16px;border-radius:50%;background:#ff5f57}.dots i:nth-child(2){background:#febc2e}.dots i:nth-child(3){background:#28c840}.top button{position:absolute;right:18px;border:1px solid #c98f95;border-radius:20px;padding:7px 13px;color:#5b5772}.workspace{display:grid;place-items:center;padding:clamp(22px,5vw,70px);overflow:auto;background:radial-gradient(circle at 50% 45%,#fff7ef 0,transparent 48%)}#paper{width:min(100%,1000px);aspect-ratio:16/10;border:24px solid #e8adaf;border-radius:34px;background:#f9f4ed;box-shadow:0 30px 55px #8d706733;outline:none;padding:7%;font-size:clamp(20px,3vw,48px);color:#413e55;white-space:pre-wrap}#placeholder{color:#aaa2a1;font-size:clamp(14px,1.5vw,20px)}footer{display:flex;align-items:center;justify-content:center;gap:15px;background:#f8f5f1;border-top:1px solid #dfd7d2;color:#9791a5;font-size:13px}footer button{border:1px solid #ddd4d0;border-radius:8px;padding:7px 10px;color:#6b6687}footer #save{position:absolute;right:18px;background:#716c94;color:#fff;border-color:#716c94}@media(max-width:680px){.app{grid-template-columns:54px 92px 1fr}.rail{padding:14px 7px}.rail header strong{display:none}.rail header{justify-content:center}.top b{font-size:14px}.top button{font-size:0;width:34px;height:30px}.top button:after{content:'↗';font-size:16px}.workspace{padding:16px}#paper{border-width:13px;border-radius:20px;padding:8%;min-height:54vw}footer span{display:none}aside{gap:14px}.mark{font-size:28px}}