:root{--ink:#2d3a4a;--paper:#fffdf7;--paper-line:#e9eef5;--accent:#ff7a45;color:var(--ink);font-family:-apple-system,Apple SD Gothic Neo,Pretendard,system-ui,sans-serif}*{box-sizing:border-box}html,body{overscroll-behavior:none;background:#4a9be8;height:100%;margin:0;overflow:hidden}#fx{pointer-events:none;z-index:5;width:100%;height:100%;position:fixed;inset:0}#sky{width:100%;height:100%;display:block;position:fixed;inset:0}.book{left:50%;bottom:max(16px, env(safe-area-inset-bottom));transform-origin:bottom;filter:drop-shadow(0 18px 30px #143c6e47);width:min(560px,100vw - 24px);transition:transform .5s cubic-bezier(.2,.8,.2,1);position:fixed;transform:translate(-50%)rotate(-1.2deg)}.book.lift{transform:translate(-50%)rotate(.6deg)translateY(-6px)}.rings{z-index:2;background:radial-gradient(circle at 50% 55%,#9aa6b4 0 5px,#6c7887 5.5px 7px,#0000 7.5px) 0 0/28px 22px repeat-x;height:22px;margin:0 18px -11px;position:relative}.paper{background:linear-gradient(var(--paper), var(--paper)) padding-box;border:1px solid #ece6d6;border-radius:6px 6px 10px 10px;height:min(34vh,300px);min-height:190px;position:relative;overflow:hidden}.paper:after{content:"";pointer-events:none;background-image:radial-gradient(#78643c0d 1px,#0000 1px);background-size:5px 5px;position:absolute;inset:0}#pad{touch-action:none;cursor:crosshair;width:100%;height:100%;position:absolute;inset:0}.hint{color:#b8bfc9;pointer-events:none;place-items:center;margin:0;font-size:20px;transition:opacity .3s;display:grid;position:absolute;inset:0}.hint.off{opacity:0}.tools{justify-content:space-between;gap:10px;padding:10px 4px 0;display:flex}button{font:inherit;cursor:pointer;border:0;border-radius:999px;padding:11px 20px;font-weight:700;transition:transform .15s,opacity .2s,background .2s}button:active{transform:scale(.96)}button:disabled{opacity:.45;cursor:default}.ghost{color:var(--ink);background:#ffffffd9}.primary{background:var(--accent);color:#fff;box-shadow:0 6px 16px #ff7a4559}button:focus-visible{outline-offset:2px;outline:3px solid #fff}@media (prefers-reduced-motion:reduce){.book,button{transition:none}}[hidden]{display:none!important}.tools{align-items:center}.share{flex-wrap:wrap;flex:1;justify-content:center;align-items:center;gap:6px 8px;min-width:0;display:flex}.check{color:var(--ink);cursor:pointer;white-space:nowrap;align-items:center;gap:6px;font-size:13px;font-weight:600;display:inline-flex}.check input{width:18px;height:18px;accent-color:var(--accent);margin:0}#nick{font:inherit;width:9.5em;color:var(--ink);background:#ffffffd9;border:0;border-radius:999px;padding:7px 12px;font-size:13px}#nick:focus-visible{outline-offset:1px;outline:3px solid #fff}.toast{left:50%;top:max(16px, env(safe-area-inset-top));color:var(--ink);opacity:0;pointer-events:none;z-index:10;text-align:center;background:#ffffffeb;border-radius:999px;max-width:calc(100vw - 32px);margin:0;padding:10px 16px;font-size:14px;font-weight:600;transition:opacity .25s,transform .25s;position:fixed;transform:translate(-50%,-12px);box-shadow:0 8px 24px #143c6e33}.toast.on{opacity:1;transform:translate(-50%)}@media (width<=520px){.tools{flex-wrap:wrap}.share{flex-basis:100%;order:-1}.tools>button{flex:1}}