:root{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#183d49;background:#edf1f3;font-size:16px;--green:#153f44;--accent:#cdf48d}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;height:100dvh;display:flex;flex-direction:column;overflow:hidden}button,select,input{font:inherit}button,select{cursor:pointer}button{border:1px solid #dce4e7;background:white;color:inherit;border-radius:9px;min-height:44px;padding:9px 13px;font-size:.875rem;font-weight:600}button:hover{background:#edf4f3}button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #5b9bff;outline-offset:2px}button:disabled{opacity:.3;cursor:default}.primary{background:var(--green);border-color:var(--green);color:white}.primary:hover{background:#245b60}header{height:55px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 24px;background:white;border-bottom:1px solid #dce4e7}.brand{display:flex;align-items:center;gap:10px;font-size:1rem;font-weight:700}.brand-icon{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--green);color:var(--accent);font-size:1.5rem}.page-meta{font-size:.75rem;color:#71858c}main{flex:1;min-height:0;display:flex;flex-direction:column}.workspace{flex:1;min-height:0;display:flex;flex-direction:column}#viewport{flex:1;min-height:0;overflow:auto;padding:20px 24px;overscroll-behavior:contain}#paper{margin:auto;background:white;box-shadow:0 6px 30px #28485315;width:min(100%,700px);line-height:0}#board{display:block;width:100%;height:auto;touch-action:none;user-select:none;-webkit-user-select:none}#instrument{pointer-events:none}#instrument [data-handle]{pointer-events:all;cursor:move}#pencilCursor,#pencilCursor *{pointer-events:none}#board.pencil-active{cursor:none}#board.pick-radius{cursor:crosshair}footer{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:8px 24px;min-height:36px;color:#58727b;font-size:.75rem;line-height:1.5}output{white-space:nowrap;font-weight:600;font-variant-numeric:tabular-nums;color:#183d49}.dock-wrap{position:relative;flex-shrink:0;z-index:3;background:#fff;border-top:1px solid #dce4e7;padding:9px 12px calc(9px + env(safe-area-inset-bottom))}.dock{display:flex;align-items:center;justify-content:center;gap:16px;max-width:760px;margin:auto}.tools,.dock-actions{display:flex;gap:5px}.icon-button{display:grid;place-items:center;width:44px;height:44px;padding:10px;flex-shrink:0;border-color:transparent;background:transparent}.icon-button svg{width:23px;height:23px;display:block}.icon-button.selected,.icon-button[aria-expanded=true]{background:var(--green);color:var(--accent)}#export{background:var(--green);color:white;margin-left:6px}.dock-divider{height:25px;width:1px;background:#dce4e7;flex-shrink:0}#settingsPanel{position:absolute;bottom:calc(100% + 8px);right:max(12px,calc((100% - 760px)/2));width:min(340px,calc(100vw - 24px));max-height:min(65dvh,590px);overflow:auto;overscroll-behavior:contain;padding:18px 20px;background:white;border:1px solid #dce4e7;border-radius:16px;box-shadow:0 12px 50px #183d4929}.panel-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;gap:10px}.panel-heading strong,.section-label{font-size:.75rem;letter-spacing:1.2px;color:#688089}.section-label{margin-bottom:14px;font-weight:700}.divider{height:1px;background:#e5ebee;margin:18px 0}.field{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.875rem;margin-bottom:12px;line-height:1.4}.field input:not([type=checkbox]),.field select{width:112px;min-height:44px;border:1px solid #d6e0e4;border-radius:7px;padding:9px;background:#f9fbfc;color:#183d49}.field input[type=checkbox],.pencil-toggle input{width:20px;height:20px;accent-color:var(--green)}.full{width:100%;margin-top:5px}.subtle,.scale-note{font-size:.8125rem;color:#688089;line-height:1.6;margin:12px 0}.colors{display:flex;gap:10px;margin-bottom:16px}.colors button{width:40px;min-height:40px;padding:0;background:var(--swatch);border:6px solid white;border-radius:50%;outline:1px solid #dce4e7}.colors button.active{outline:2px solid var(--swatch)}.pencil-toggle{display:flex;align-items:center;gap:8px;min-height:44px;font-size:.875rem}dialog{border:0;border-radius:18px;padding:28px;max-width:620px;max-height:85dvh;overflow:auto;width:calc(100% - 30px);color:#183d49;box-shadow:0 30px 90px #0003}dialog::backdrop{background:#183d4980;backdrop-filter:blur(3px)}dialog h2{margin-top:0;font-size:1.4rem}dialog p,dialog li{font-size:.9375rem;line-height:1.7}dialog li{margin-bottom:12px}dialog ol{padding-left:22px}.dialog-actions{display:flex;gap:10px;justify-content:flex-end}#toast{position:fixed;bottom:calc(90px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);background:var(--green);color:white;border-radius:10px;padding:12px 20px;display:none;max-width:90%;font-size:.875rem;z-index:6;pointer-events:none}@media(max-width:600px){header{padding:0 14px;height:48px}.brand{font-size:.875rem}.page-meta{font-size:.6875rem}#viewport{padding:12px}footer{padding:6px 12px;gap:8px;align-items:flex-end}#hint{max-width:70%;font-size:.6875rem}.dock{gap:8px;flex-wrap:wrap}.dock-divider{display:none}.tools,.dock-actions{gap:3px}.dock-wrap{padding-top:7px;padding-bottom:calc(7px + env(safe-area-inset-bottom))}.icon-button{width:44px;height:44px}.dock-actions #export{margin-left:0}#toast{bottom:calc(125px + env(safe-area-inset-bottom))}}@media(max-height:500px){header{height:40px}#settingsPanel{max-height:70dvh}footer #hint{display:none}}

#instrument [data-handle="rotate"]{cursor:grab}

.dock{max-width:1020px;flex-wrap:wrap;gap:8px}.zoom-control{display:flex;align-items:center;gap:6px}.zoom-control input{width:110px;min-height:44px;accent-color:var(--green)}.zoom-control output{font-size:.75rem;min-width:42px} @media(max-width:600px){.zoom-control{justify-content:center;width:100%}.zoom-control input{width:min(180px,45vw)}}