:root{--paper:#fdfcf7;--ink:#34302a;--ink-soft:#9a938a;--rule:#5e83b647;--margin-line:#d3606059;--gutter:4rem;--gutter-gap:.75rem;--band-x:48px;--peek-x:12px;--step-x:calc(100vw - var(--band-x));--edge:#231e1412;--shadow:0 10px 30px #3c321e1f, 0 2px 8px #3c321e12;--shadow-lift:0 16px 44px #3c321e2e, 0 4px 12px #3c321e1a;--count:5;color-scheme:light}*,:before,:after{box-sizing:border-box}html,body{background:var(--paper);margin:0;padding:0}html{overflow:auto hidden}body{color:var(--ink);-webkit-font-smoothing:antialiased;overscroll-behavior-x:contain;font-family:ui-monospace,SF Mono,SFMono-Regular,Menlo,Consolas,Liberation Mono,monospace}#draw-sheets{position:relative}.sheet-draw{contain:layout paint style;background:var(--paper);border:1px solid var(--edge);width:min(92vw,860px);height:100svh;box-shadow:var(--shadow);scroll-snap-align:center;flex-direction:column;margin:0 auto;display:flex;position:relative}#draw-sheets{scroll-snap-type:x mandatory;flex-direction:row;align-items:stretch;gap:24px;height:100svh;padding:0 4vw;display:flex;overflow-x:auto}.sheet-head{letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);user-select:none;justify-content:space-between;align-items:baseline;padding:clamp(18px,4vh,36px) clamp(24px,6vw,72px) 0;font-size:12px;display:flex}.sheet-home{color:var(--ink-soft);letter-spacing:.14em;text-transform:uppercase;font-size:12px;text-decoration:none}.sheet-home:hover{color:var(--ink)}.sheet-foot{letter-spacing:.14em;color:var(--ink-soft);user-select:none;justify-content:flex-end;align-items:baseline;padding:0 clamp(24px,6vw,72px) clamp(10px,2vh,20px);font-size:12px;display:flex}.draw-wrap{cursor:crosshair;touch-action:pan-x pan-y;background-color:#0000;background-image:linear-gradient(to right, transparent calc(var(--gutter) - 1px), var(--margin-line) calc(var(--gutter) - 1px), var(--margin-line) var(--gutter), transparent var(--gutter)), repeating-linear-gradient(to bottom, transparent 0, transparent 31px, var(--rule) 31px, var(--rule) 32px);background-repeat:no-repeat,repeat;background-attachment:local,local;flex:1;min-height:0;margin:14px clamp(24px,6vw,72px) 0;position:relative}.draw-canvas{touch-action:none;cursor:crosshair;width:100%;height:100%;display:block;position:absolute;inset:0}.spacer-x{display:none}#draw-tools{left:50%;bottom:max(14px, env(safe-area-inset-bottom));z-index:10000;background:color-mix(in srgb, var(--paper) 92%, white);border:1px solid var(--edge);max-width:min(94vw,720px);box-shadow:var(--shadow-lift);user-select:none;border-radius:14px;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;padding:8px 12px;display:flex;position:fixed;transform:translate(-50%)}.tools-group{align-items:center;gap:6px;padding:0 8px;display:flex}.tools-group+.tools-group{border-left:1px solid var(--edge)}.tools-group:first-child{padding-left:0}.tools-group:last-child{padding-right:0}#draw-tools button{appearance:none;color:var(--ink);font:inherit;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:9px;justify-content:center;align-items:center;min-width:32px;height:32px;padding:4px 6px;font-size:14px;line-height:1;display:inline-flex}#draw-tools button:hover{border-color:var(--edge)}#draw-tools button.is-active,#draw-tools button[aria-pressed=true]{border-color:var(--ink);background:#0000000d}.slot{border:2px solid #0003;border-radius:11px;width:40px;min-width:40px;height:40px;padding:0}.slot svg{width:22px;height:22px;display:block}.slot.is-active{outline:2px solid var(--ink);outline-offset:2px}#slot-pop{background:color-mix(in srgb, var(--paper) 94%, white);border:1px solid var(--edge);width:252px;max-width:calc(100vw - 24px);box-shadow:var(--shadow-lift);border-radius:14px;flex-direction:column;gap:10px;padding:12px;display:flex;position:absolute;bottom:calc(100% + 12px);left:50%;transform:translate(-50%)}#slot-pop[hidden]{display:none}.pop-label{letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:6px;font-size:11px}.pop-colors{align-items:center;gap:6px;display:flex}.slotwell.is-active{border-color:var(--ink);outline:2px solid var(--ink);outline-offset:1px}.colorwell{cursor:pointer;border:2px solid #0003;border-radius:50%;width:26px;min-width:26px;height:26px;position:relative;overflow:hidden}.colorwell input[type=color]{opacity:0;cursor:pointer;position:absolute;inset:-8px}.shape-grid{grid-template-columns:repeat(5,1fr);gap:6px;display:grid}.shape-btn{aspect-ratio:1;min-width:0}.shape-btn svg{width:20px;height:20px;display:block}.pop-size{align-items:center;gap:10px;display:flex}.pop-size input[type=range]{min-width:0;accent-color:var(--ink);flex:1}.pop-size output{color:var(--ink-soft);text-align:right;min-width:4ch;font-size:12px}#tool-eraser svg,#tool-clear svg{width:18px;height:18px;display:block}#page-label{letter-spacing:.1em;color:var(--ink-soft);text-align:center;min-width:3ch;font-size:12px}@media (width<=480px){:root{--gutter:2.75rem;--gutter-gap:.5rem;--band-x:28px}#draw-tools{gap:6px;padding:6px 8px}.tools-group{padding:0 6px}}@supports (animation-timeline:scroll(root inline)){html{overflow:auto hidden}#draw-sheets{scroll-snap-type:none;height:auto;padding:0;display:block;overflow:visible}.sheet-draw{width:calc(100vw - var(--band-x));scroll-snap-align:none;height:100svh;z-index:calc(9999 - var(--i));animation-name:sheet-left;animation-duration:1s;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:scroll(root inline);animation-range:calc((var(--i) - 1) * var(--step-x)) calc((var(--i) + 1) * var(--step-x));margin:0;position:fixed;top:0;left:0}.sheet-draw.is-far{display:none}.sheet-draw{padding-bottom:72px}.spacer-x{width:calc((var(--count) - 1) * var(--step-x) + 100vw);height:100svh;display:block}}@keyframes sheet-left{0%{transform:translateX(var(--band-x))}50%{transform:translate(0)}to{transform:translateX(calc(-1 * (100vw - var(--band-x) - var(--peek-x))))}}