:root{--ink:#26332d;--forest:#29483b;--cream:#edebe4;--paper:#fffef9}*{box-sizing:border-box}body,html{margin:0;width:100%;height:100%;overflow:hidden}body{color:var(--ink);background:var(--cream);font-family:Hiragino Sans,Yu Gothic,system-ui,sans-serif;-webkit-font-smoothing:antialiased;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-touch-callout:none}button,input{font:inherit}button{color:inherit}.notebook{position:relative;width:100vw;height:100dvh;background:radial-gradient(circle at 50% 25%,#f6f4ee 0,#e6e3db 72%)}.topbar{position:absolute;z-index:5;inset:max(12px,env(safe-area-inset-top)) 22px auto;display:flex;align-items:center;height:58px;gap:14px;transition:opacity .25s,transform .25s}.focus .topbar{opacity:0;transform:translateY(-12px);pointer-events:none}.icon-button{width:46px;height:46px;border:1px solid #d4d0c6;border-radius:15px;background:rgba(255,255,255,.72);font-size:29px;line-height:1;box-shadow:0 3px 12px #56615812}.icon-button.menu{margin-left:2px;font-size:16px;letter-spacing:2px}.title-block{display:flex;flex-direction:column;gap:2px}.title-block span{color:#7b817b;font-size:12px;letter-spacing:.09em}.title-block strong{font-family:Yu Mincho,Hiragino Mincho ProN,serif;font-weight:600;font-size:18px}.save-state{margin-left:auto;display:flex;align-items:center;gap:7px;padding:7px 10px;color:#6f7c75;font-size:11px;border-radius:20px;background:rgba(255,255,255,.42)}.save-state i{width:6px;height:6px;border-radius:50%;background:#709982}.save-state b{margin-left:4px;color:#9a6e3f;font-weight:600}.save-state.is-error{color:#a84036;background:#fff1ee}.save-state.is-error i{background:#c14d40}.fit-button{min-width:64px;min-height:44px;padding:0 12px;border:1px solid #d4d0c6;border-radius:14px;background:rgba(255,255,255,.72);font-size:11px}.desk{width:100%;height:100%;padding:88px 5.2vw 104px;display:grid;place-items:center;touch-action:none}.paper-shell{position:relative;aspect-ratio:297/210;width:min(89vw,calc((100dvh - 192px) * 1.414));background-color:var(--paper);background-image:linear-gradient(#d8e2da50 1px,transparent 0),linear-gradient(90deg,#d8e2da50 1px,transparent 0);background-size:28px 28px;border:1px solid #dbd7ce;box-shadow:0 18px 50px #3b433629,0 2px 7px #4c554019;overflow:hidden;transform-origin:center;will-change:transform}.paper-shell:before{content:"";left:5.8%;top:0;bottom:0;width:1px;background:#d2937e66}.paper-heading,.paper-shell:before{position:absolute;z-index:1;pointer-events:none}.paper-heading{top:2.5%;left:7.8%;right:3.5%;display:flex;align-items:baseline;justify-content:space-between;color:#6e7a73}.paper-heading span{font:600 clamp(8px,.75vw,12px)/1 sans-serif;letter-spacing:.22em}.paper-heading em{font:italic clamp(8px,.8vw,12px)/1 Yu Mincho,serif}canvas{position:absolute;z-index:2;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair}.empty-hint{position:absolute;z-index:1;left:9.8%;top:15%;color:#82908888;font-family:Yu Mincho,serif;font-size:clamp(12px,1.3vw,20px);letter-spacing:.08em;pointer-events:none}.toolbox{position:absolute;z-index:6;bottom:max(16px,env(safe-area-inset-bottom));left:50%;display:flex;flex-direction:column;align-items:center;gap:8px;transform:translateX(-50%);transition:opacity .25s,transform .25s}.focus .toolbox:not(.open){opacity:.55;transform:translateX(-50%) translateY(4px)}.tool-panel{display:flex;align-items:center;gap:11px;padding:8px 11px;border:1px solid #d5d2c9;border-radius:18px;background:rgba(255,255,252,.94);box-shadow:0 10px 28px #37443a24;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px)}.tool-group{display:flex;gap:4px}.tool-group button{min-width:62px;min-height:47px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:0;border-radius:11px;background:transparent;font-size:9px}.tool-group button span{font-size:18px;line-height:18px}.tool-group button.selected{background:#e4ebe5;color:#254638}.divider{width:1px;height:34px;background:#ddd9d0}.colors{display:flex;gap:8px}.colors button{width:24px;height:24px;border:3px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #cec9bf}.colors button.selected{box-shadow:0 0 0 2px var(--forest)}.width{display:flex;align-items:center;gap:5px;color:#7f817d;font-size:8px}.width input{accent-color:var(--forest);width:68px}.history{width:37px;height:37px;padding:0;border:0;border-radius:10px;background:transparent;font-size:22px}.history:disabled{opacity:.23}.tool-toggle{min-width:110px;height:38px;display:flex;align-items:center;justify-content:center;gap:7px;border:1px solid #d3cfc5;border-radius:20px;background:#fffffbee;box-shadow:0 5px 17px #3c44321e;font-size:11px}.tool-toggle span{width:9px;height:9px;border-radius:50%}.tool-toggle b{margin-left:3px;color:#8b8b85;font-size:9px}@media (max-height:600px),(max-width:760px){.topbar{inset-inline:10px}.desk{padding-inline:2vw}.paper-shell{width:96vw}.divider,.width{display:none}.tool-panel{max-width:96vw;gap:5px}.save-state{font-size:0}.save-state b{font-size:10px}}