@font-face{font-family:Inter;src:url('assets/inter-400.ttf')}@font-face{font-family:Inter;src:url('assets/inter-600.ttf');font-weight:600}
:root{font-family:Inter,system-ui,sans-serif;color:#283b36;background:#f8faf9;font-synthesis:none;--green:#087b65;--line:#e2e8e5;--muted:#7d8c86;--shadow:0 3px 14px #183e2810,0 1px 3px #183e2807}
*{box-sizing:border-box}body{margin:0;overflow:hidden}button,input,textarea{font:inherit}button{cursor:pointer;border:0;background:transparent;color:inherit;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:background .15s,color .15s}button:hover{background:#eef3f0}button:disabled{opacity:.3;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #74bcb0;outline-offset:3px}button svg,[data-icon] svg{width:21px;height:21px;display:block;fill:currentColor}[data-icon]{display:inline-flex}button{min-height:42px;min-width:42px;border-radius:9px}.surface{background:#fffffff5;border:1px solid var(--line);box-shadow:var(--shadow);border-radius:14px}.primary{background:var(--green);color:#fff;padding:0 18px;font-size:13px;font-weight:600}.primary:hover{background:#056754}.quiet{padding:0 12px;font-size:13px}.topbar{height:82px;display:flex;align-items:center;padding:0 28px;gap:25px;background:#fff;border-bottom:1px solid var(--line);position:relative;z-index:4}.brand{display:flex;gap:10px;align-items:center;text-decoration:none;color:#243d35;font-size:21px;font-weight:600;letter-spacing:-1px;flex-shrink:0}.brand-la{color:var(--green)}.brand-mark{height:35px;width:35px;background:var(--green);color:white;border-radius:11px;font-style:italic;font-size:24px;letter-spacing:-4px;padding-left:5px;line-height:32px}.brand-mark span{font-size:21px}.header-divider{height:29px;width:1px;background:var(--line)}.document-name{display:flex;flex-direction:column;gap:5px;min-width:100px}.document-name input{border:0;color:#34453f;font-size:13px;font-weight:600;background:transparent;max-width:220px;width:100%;outline-offset:2px;padding:0}.document-name>span{font-size:10px;color:var(--muted);white-space:nowrap}.header-actions{display:flex;align-items:center;gap:10px;margin-left:auto}.header-actions .primary{margin-left:7px}#workspace{height:calc(100dvh - 82px);position:relative;overflow:hidden}#canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;user-select:none;-webkit-user-select:none;outline:0;cursor:crosshair}#canvas[data-tool=select]{cursor:default}#canvas[data-tool=pan]{cursor:grab}#canvas[data-tool=text]{cursor:text}#canvas[data-tool=eraser]{cursor:crosshair}.recognition-control{position:absolute;top:23px;left:24px;display:flex;gap:11px;align-items:center;padding:12px 13px;color:var(--green)}.recognition-control>div{display:flex;flex-direction:column;gap:4px}.recognition-control strong{font-size:11px;font-weight:600;color:#42564b}.recognition-control>div>span{font-size:10px;color:var(--muted)}#recognition{width:34px;min-width:34px;height:21px;min-height:21px;border-radius:20px;background:var(--green);margin-left:7px;padding:3px;justify-content:flex-end}#recognition>span{background:white;width:15px;height:15px;border-radius:50%}#recognition[aria-checked=false]{background:#afbbb4;justify-content:flex-start}.top-right{position:absolute;right:24px;top:23px}.round{border-radius:50%;color:#6c8075}.toolbar{position:absolute;left:24px;top:50%;transform:translateY(-50%);padding:7px;display:flex;flex-direction:column;gap:4px}.toolbar button{width:44px;height:43px;position:relative;color:#5c7065}.toolbar button.active{background:#e0f1e9;color:#08745f}.toolbar kbd{position:absolute;bottom:3px;right:4px;font:8px Inter,sans-serif;opacity:.55}.tool-divider{height:22px;width:1px;background:var(--line);margin:0 4px;flex-shrink:0}.toolbar .tool-divider{width:29px;height:1px;margin:5px auto}.toolbar .active:before{content:'';position:absolute;left:-8px;top:11px;width:3px;height:21px;background:var(--green);border-radius:4px}#welcome{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;width:min(520px,72vw);user-select:none}.eyebrow{font-size:9px;font-weight:600;letter-spacing:2.4px;color:#849b90;display:flex;align-items:center;justify-content:center;gap:7px}.eyebrow>span{width:5px;height:5px;background:#5fa589;border-radius:50%}h1{font-size:clamp(27px,3.2vw,46px);letter-spacing:-1.8px;line-height:1.18;font-weight:400;margin:23px 0 19px;color:#344c3f}h1 em{font-family:Georgia,serif;color:#118067;font-weight:400}#welcome>p{font-size:13px;line-height:1.9;color:#89968e;margin:0}.sketch-demo{margin:21px auto 24px;max-width:305px}.sketch-demo svg{width:100%;height:83px}.sketch-demo>span{font-size:9px;letter-spacing:.3px;color:#94a39a;display:flex;justify-content:space-around;margin-top:-2px}.input-hint{display:flex;align-items:center;justify-content:center;gap:7px;font-size:10px;color:#8c9a91}.input-hint svg{width:15px;height:15px}.bottom-left,.bottom-right,.ink-palette{position:absolute;bottom:39px;display:flex;align-items:center;padding:5px}.bottom-left{left:24px}.bottom-right{right:24px}.ink-palette{left:50%;transform:translateX(-50%);padding:6px 11px;gap:3px;border-radius:30px}.colors{display:flex;gap:3px}.color{min-width:33px;min-height:33px;width:33px;height:33px;border-radius:50%;position:relative}.color:after{content:'';width:18px;height:18px;border-radius:50%;background:var(--swatch)}.color.active{outline:1px solid var(--swatch);outline-offset:-3px}.color.active:after{width:17px;height:17px}.color.active:before{content:'';position:absolute;width:5px;height:5px;border-radius:50%;background:#fff;z-index:1}.width-dot{width:5px;height:5px;background:#344b40;border-radius:50%}#stroke-width{min-width:33px;min-height:33px}#fit{font-size:10px;min-width:47px;color:#68796f}.zoom button:not(#fit){min-width:33px}.zoom svg{width:16px;height:16px}#bottom-hint{position:absolute;bottom:15px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:9px;color:#94a299;pointer-events:none}#toast{position:absolute;left:50%;top:28px;transform:translateX(-50%) translateY(-8px);padding:12px 18px;border-radius:30px;background:#294e3e;color:white;font-size:12px;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:50vw;text-align:center}#toast.visible{opacity:1;transform:translateX(-50%) translateY(0)}#selection-actions{position:absolute;padding:4px;align-items:center;gap:2px;z-index:2;white-space:nowrap}#selection-actions:not([hidden]){display:flex}#selection-actions button{font-size:11px;min-height:35px;min-width:35px;padding:0 8px}#selection-actions svg{width:17px;height:17px}#delete{color:#a6544e}#text-editor{position:absolute;z-index:5;resize:none;border:2px solid #199879;border-radius:7px;background:#fffffff2;color:#293d35;outline:0;line-height:1.35;padding:8px;min-width:50px;min-height:40px;box-shadow:var(--shadow)}dialog{border:1px solid var(--line);border-radius:22px;padding:34px;max-width:min(580px,calc(100vw - 32px));color:#30473b;box-shadow:0 20px 90px #203f392f}dialog::backdrop{background:#173e3545;backdrop-filter:blur(3px)}dialog h2{font-size:26px;font-weight:400;letter-spacing:-.7px;line-height:1.25;margin:20px 0 28px}.dialog-close{position:absolute;top:13px;right:13px;font-size:23px;color:#6f8075}.dialog-eyebrow{font-size:9px;letter-spacing:2px;color:var(--green)}.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:19px 26px}.help-grid b{font-size:12px;font-weight:600}.help-grid p,.help-note,dialog>p{font-size:12px;line-height:1.8;color:#76867c}.help-grid p{margin:8px 0}.help-note{border-top:1px solid var(--line);padding-top:20px;margin:20px 0}.dialog-actions{display:flex;gap:12px;justify-content:flex-end}.scene-element text{pointer-events:none}svg text{font-family:Inter,system-ui,sans-serif}[hidden]{display:none!important}
@media(max-height:740px) and (min-width:641px){.toolbar{top:54%;gap:1px}.toolbar button{height:36px;min-height:36px}.toolbar .tool-divider{margin:2px auto}.recognition-control{top:16px}.sketch-demo{margin-top:12px;margin-bottom:15px}#welcome{top:43%}h1{font-size:35px;margin-top:17px}}
@media(max-width:780px){.topbar{gap:15px;padding:0 17px}.header-actions{gap:4px}.action-label{display:none}.header-actions .quiet{padding:0;min-width:35px}.document-name input{max-width:160px}.document-name>span{font-size:9px}.brand{font-size:18px}.recognition-control{left:16px}.toolbar{left:16px}.bottom-left{left:16px}.bottom-right{right:16px}.ink-palette{padding:6px}.color{min-width:28px;width:28px}.top-right{right:16px}}
@media(max-width:640px){.topbar{height:68px;padding:0 12px;gap:10px}.brand>span:last-child,.header-divider,.document-name>span{display:none}.document-name input{font-size:11px;max-width:130px}.header-actions{gap:2px}.header-actions .primary{font-size:10px;padding:0 10px;gap:5px;margin-left:3px;min-height:36px}.header-actions svg{width:18px;height:18px}#workspace{height:calc(100dvh - 68px)}.recognition-control{top:15px;left:12px;padding:10px}.recognition-control>div>span{font-size:9px}.top-right{top:15px;right:12px}.toolbar{left:50%;top:auto;bottom:91px;transform:translateX(-50%);flex-direction:row;padding:5px;gap:1px;max-width:calc(100vw - 16px);border-radius:15px}.toolbar button{width:36px;height:39px;min-width:32px;min-height:39px}.toolbar .tool-divider{width:1px;height:24px;margin:7px 2px}.toolbar .active:before{left:12px;top:auto;bottom:-6px;width:14px;height:3px}.toolbar kbd{display:none}.bottom-left{left:10px;bottom:12px;padding:2px}.bottom-right{right:10px;bottom:12px;padding:2px}.history button{min-width:32px;min-height:35px}.history svg{width:18px;height:18px}.ink-palette{bottom:43px;padding:4px 8px}.ink-palette .tool-divider{height:18px}.color{min-width:29px;width:29px;min-height:30px;height:30px}.zoom button{min-height:35px}#bottom-hint{display:none}#welcome{top:40%;width:90vw}h1{font-size:33px;letter-spacing:-1px}.eyebrow{font-size:8px}#welcome>p{font-size:11px}.sketch-demo{max-width:248px;margin:14px auto 15px}.input-hint{font-size:9px}.input-hint svg{width:12px}#toast{top:78px;max-width:90vw;width:max-content;font-size:11px}dialog{padding:25px}.help-grid{grid-template-columns:1fr;gap:6px}dialog h2{font-size:24px}.help-note{font-size:11px}}
@media(max-height:650px) and (max-width:640px){#welcome{top:36%}h1{font-size:27px;margin:14px 0 10px}.sketch-demo{display:none}.input-hint{margin-top:15px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.extras{position:absolute;right:80px;top:23px;padding:4px;display:flex;gap:2px}.extras button{min-width:36px;min-height:36px}.extras .active{background:#e0f1e9;color:var(--green)}.pages-control{position:absolute;left:50%;top:23px;transform:translateX(-50%);padding:4px;display:flex;align-items:center;gap:1px}.pages-control button{min-width:30px;min-height:36px;font-size:21px}.pages-control svg{width:17px;height:17px}.pages-control select{background:transparent;border:0;border-radius:6px;font:11px Inter,sans-serif;color:#344c3f;max-width:120px;min-height:36px;padding:0 5px}.recovery-option{display:flex;align-items:center;gap:10px;font-size:14px}.recovery-option input{width:19px;height:19px;accent-color:var(--green)}#canvas[data-tool=laser]{cursor:crosshair}#workspace #toast{top:auto;bottom:110px}#workspace:has(.conversion:not([hidden])) #toast{top:auto;bottom:110px}
.conversion{position:absolute;top:23px;left:310px;right:90px;max-width:790px;display:flex;gap:3px;align-items:center;padding:6px 8px;overflow-x:auto;scrollbar-width:thin}.conversion>span{font-size:10px;color:#6e8077;white-space:nowrap;margin:0 5px}.conversion button{font-size:10px;min-width:auto;min-height:35px;padding:0 9px;white-space:nowrap;flex-shrink:0}.conversion button[aria-pressed=true]{background:#e0f1e9;color:#08745f;font-weight:600}.conversion .resize-shortcut{border-left:1px solid var(--line);border-radius:0;margin-left:4px;color:#08745f;font-weight:600}#workspace:has(.conversion:not([hidden])) #toast{top:85px}
@media(max-width:1100px){.conversion{top:100px;left:100px;right:80px}.conversion>span{display:none}#workspace:has(.conversion:not([hidden])) #toast{top:155px}}
@media(max-width:640px){.conversion{top:81px;left:12px;right:12px;padding:4px}.conversion button{font-size:10px;min-height:34px;padding:0 9px}#workspace:has(.conversion:not([hidden])) #toast{top:135px}}
.conversion{top:86px}#workspace #toast,#workspace:has(.conversion:not([hidden])) #toast{top:auto;bottom:110px}dialog{max-height:90dvh;overflow-y:auto}
@media(max-width:1100px){.pages-control{top:90px}.conversion{top:146px;left:100px;right:40px}.extras{right:76px}}
@media(max-width:640px){.recognition-control>div{display:none}.recognition-control{gap:6px;padding:11px}.recognition-control #recognition{margin-left:0}.extras{top:15px;right:65px;padding:4px;gap:0}.extras button{min-width:34px;min-height:35px}.extras svg{width:19px;height:19px}.pages-control{top:75px;max-width:calc(100vw - 24px)}.pages-control select{max-width:115px;font-size:10px}.pages-control button{min-width:29px;min-height:34px}.conversion{top:129px;left:12px;right:12px}#workspace #toast,#workspace:has(.conversion:not([hidden])) #toast{top:auto;bottom:155px}#welcome{top:43%}}
@media(max-width:360px){#export>span:last-child{display:none}.header-actions .primary{padding:0;min-width:36px}.document-name input{max-width:110px}}
#drive-dialog{width:580px}#drive-dialog h2{margin-bottom:14px}.drive-account-row,.drive-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:16px 0}.drive-account-row>span{flex:1;font-size:12px;overflow-wrap:anywhere}.drive-account-row button{font-size:12px}.drive-actions .primary{padding:0 12px}#drive-status{color:#087b65;min-height:22px}#drive-files{display:grid;max-height:280px;overflow-y:auto}.drive-file{display:flex;flex-direction:column;align-items:flex-start;text-align:left;border-top:1px solid var(--line);border-radius:0;padding:12px;gap:6px;flex-shrink:0}.drive-file strong{font-size:12px;overflow-wrap:anywhere;max-width:100%}.drive-file span,.drive-pagination{font-size:10px;color:#76867c}.drive-pagination{display:flex;align-items:center;justify-content:center;gap:12px}#drive-dialog .help-note{margin-bottom:0}.document-name{flex-shrink:1}.document-name>span{max-width:235px;overflow:hidden;text-overflow:ellipsis}
@media(max-width:780px){.drive-label{display:none}}
@media(max-width:640px){.document-name{min-width:40px;flex:1}.header-actions{flex-shrink:0}.document-name input{min-width:0;width:100%}.topbar{gap:7px}#drive-dialog{padding:24px}.drive-account-row{align-items:flex-start;flex-direction:column}.drive-actions{gap:4px}.drive-actions button{font-size:11px}}
