/* Sketchsha palette and a canvas-first workspace. */
:root{--bg:#f7f8f9;--paper:#fff;--ink:#192027;--muted:#68737e;--line:#e0e5e8;--accent:#b2e186;--green:#699c54;--plan:#f7f8f9;--grid:#e7ecef;--wall:#34454c;--shadow:0 12px 40px #1c292520}
:root[data-theme=dark]{--bg:#111519;--paper:#1b2228;--ink:#f1f4f0;--muted:#a6b3b7;--line:#344047;--accent:#b4e493;--green:#b3dd9a;--plan:#111519;--grid:#253038;--wall:#c0cbd0;--shadow:0 12px 40px #0006}
[hidden]{display:none!important}.topbar{position:relative;z-index:12}.canvas-mode{overflow:hidden;height:100dvh}.canvas-mode .intro,.canvas-mode .capabilities,.canvas-mode>footer{display:none}.canvas-mode .topbar{height:68px;padding:0 22px;flex-wrap:nowrap}.canvas-mode .workspace{position:fixed;inset:68px 0 0;margin:0;border:0;border-radius:0;display:block;min-height:0;overflow:hidden}.canvas-mode .drawing-area{height:100%;position:relative}.canvas-mode #canvasWrap{height:100%;min-height:0;flex:1}.canvas-mode .canvas-bar{position:absolute;z-index:5;bottom:133px;left:50%;transform:translateX(-50%);border:1px solid var(--line);border-radius:16px;background:var(--paper);box-shadow:var(--shadow);padding:7px;max-width:calc(100% - 32px);width:max-content;gap:12px}.canvas-mode .toolrail{flex-wrap:nowrap}.canvas-mode .toolrail button{min-width:48px;font-size:9px;border-radius:11px}.canvas-mode .history{flex-direction:row}.canvas-mode .canvas-footer{position:absolute;top:14px;left:18px;right:18px;background:var(--paper);border:1px solid var(--line);border-radius:11px;width:max-content;max-width:calc(100% - 36px);padding:10px 13px;box-shadow:var(--shadow);z-index:3}.canvas-mode .canvas-empty{top:35%}.canvas-mode .zoom-controls{bottom:215px;right:18px}.canvas-mode .left-panel,.canvas-mode .right-panel{display:none;position:absolute;z-index:8;top:12px;bottom:215px;width:280px;overflow:auto;background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:18px}.canvas-mode .left-panel{left:14px}.canvas-mode .right-panel{right:14px}.canvas-mode.project-panel-open .left-panel,.canvas-mode.inspector-panel-open .right-panel{display:block}.panel-dismiss{display:none}.canvas-mode .panel-dismiss{display:flex;width:100%;justify-content:space-between;margin-bottom:16px;background:var(--bg)}.canvas-mode .right-panel>.section-title{margin-bottom:14px}.canvas-mode .right-panel .export-section{margin-top:24px;border-top:1px solid var(--line);padding-top:12px}.canvas-mode .left-panel>.section-title,#recordsTitle{display:flex}.canvas-mode .left-panel>#levels{display:grid}.canvas-mode .left-panel #levels button{width:100%}.canvas-mode .left-panel>#records,.canvas-mode .left-panel>.local-note{display:grid}.canvas-mode .left-panel>.field{margin-bottom:12px}.canvas-mode .left-panel .level-meta{padding-top:16px}.canvas-mode .left-panel .level-meta .field{margin-bottom:12px}.workspace-label{display:none}.canvas-mode .workspace-label{display:block;position:absolute;top:70px;left:20px;z-index:2;pointer-events:none}.workspace-label b{display:block;font-size:12px;line-height:1.5}.workspace-label small{color:var(--muted);font-size:10px}.quick-dock{display:flex;gap:18px;align-items:center;padding:13px;border-top:1px solid var(--line);background:var(--paper);z-index:6;min-width:0}.canvas-mode .quick-dock{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);width:620px;max-width:calc(100% - 32px);height:108px}.compass{display:grid;grid-template-columns:repeat(3,27px);gap:3px;flex-shrink:0}.compass button{width:27px;min-height:25px;padding:3px;border-radius:7px;background:var(--bg)}.compass button.active{background:var(--accent);color:#223426;border-color:var(--accent)}.compass svg{width:16px;height:16px}.compass #headingValue{font-size:9px;display:flex;align-items:center;justify-content:center;border:1px solid var(--green);border-radius:8px;color:var(--green)}.quick-main{min-width:0;flex:1}.quick-row{display:flex;gap:5px;align-items:center}.quick-row>button{min-height:31px;font-size:10px;padding:6px 9px;white-space:nowrap}.quick-row>button svg{width:15px;height:15px}#lengthBtn{justify-content:space-between;width:100%;margin:6px 0 0;height:35px;border-color:var(--green);color:var(--green);background:var(--bg)}#lengthBtn .length-text{font-size:15px;letter-spacing:.2px}#lengthBtn small{font-size:9px;color:var(--muted)}#quickStatus{display:block;font-size:9px;color:var(--muted);line-height:1.5;margin-top:5px}.quick-steps{display:flex;gap:4px;flex-direction:column}.quick-steps button{min-height:25px;padding:4px 8px;font-size:10px;width:50px;background:var(--bg)}.quick-steps button:last-child{color:var(--green);border-color:var(--green)}.number-drawer{position:fixed;z-index:15;right:18px;top:86px;width:296px;max-width:calc(100vw - 28px);max-height:calc(100dvh - 104px);overflow:auto;border:1px solid var(--line);border-radius:18px;background:var(--paper);padding:18px;box-shadow:var(--shadow);animation:number-slide .18s ease-out}.number-drawer .drawer-title{display:flex;align-items:center;justify-content:space-between;gap:8px}.number-drawer h2{margin:3px 0;font-size:16px}.number-drawer .eyebrow{font-size:8px}.number-drawer .icon-only{width:32px;min-height:32px}.length-input{position:relative;margin:18px 0 12px}.length-input>label{font-size:9px;letter-spacing:1px;color:var(--muted)}#quickLength{background:var(--bg);border:1px solid var(--green);height:64px;font-size:29px;font-weight:600;letter-spacing:1px;padding:12px 42px 12px 14px;margin-top:6px;caret-color:var(--green)}.length-input>span{position:absolute;right:14px;bottom:14px;color:var(--muted);font-size:11px}.number-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:15px}.number-pad button{height:44px;background:var(--bg);font-size:20px;border-radius:11px}.number-pad button[data-number=back]{font-size:13px}.number-drawer .two{margin-top:8px}.number-drawer .field{font-size:9px;margin-bottom:8px}#numberApply{width:100%;height:45px;font-size:13px;margin-top:10px}#numberError{font-size:11px;color:#cf655e;min-height:17px;margin:0}.number-hint{font-size:10px;margin-top:12px}.q-node{fill:var(--paper);stroke:var(--wall);pointer-events:none}.q-mid{fill:var(--paper);stroke:var(--muted);cursor:pointer}.q-mid-plus{fill:none;stroke:var(--muted);pointer-events:none}.q-area{fill:var(--ink);font-weight:700;pointer-events:none}#toast{z-index:30}.canvas-mode #toast{bottom:235px}.axis-line{stroke-width:1;vector-effect:non-scaling-stroke;pointer-events:none}.axis-x{stroke:#cd7c813d}.axis-y{stroke:#84b78745}.canvas-mode .brand small{font-size:7px}.canvas-mode .top-actions{gap:5px}#inspectorPanelBtn,#exportPanelBtn,#projectPanelBtn{display:none}.canvas-mode #inspectorPanelBtn,.canvas-mode #exportPanelBtn,.canvas-mode #projectPanelBtn{display:inline-flex}
@keyframes number-slide{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:translateX(0)}}
@media(max-width:900px){.canvas-mode .topbar{padding:0 14px;gap:10px}.canvas-mode .top-actions button{font-size:0;width:36px;padding:8px}.canvas-mode .top-actions button span{display:none}.canvas-mode .top-actions button svg{width:18px;height:18px}.canvas-mode .brand{font-size:20px}.canvas-mode .store-link{display:none}.canvas-mode .badge{font-size:8px;padding:5px 8px}.canvas-mode .top-actions{width:auto;margin-top:0}}
@media(max-width:600px){.canvas-mode .topbar{height:60px;padding:0 10px;gap:6px}.canvas-mode .brand{font-size:18px;gap:4px;white-space:nowrap}.canvas-mode .brand>svg{width:22px}.canvas-mode .brand small{font-size:6px;letter-spacing:1px}.canvas-mode .badge{display:none}.canvas-mode .top-actions{gap:3px}.canvas-mode .top-actions button{width:29px;min-height:34px;padding:5px;border-radius:9px}.canvas-mode #inspectorPanelBtn{display:none}.canvas-mode .workspace{inset:60px 0 0}.canvas-mode .canvas-footer{top:8px;left:10px;right:10px;padding:8px 10px;gap:7px;max-width:calc(100% - 20px)}.canvas-mode #toolHint{font-size:9px;flex-basis:100%;min-width:0}.canvas-mode .canvas-footer label{font-size:8px}.canvas-mode .canvas-footer input{width:12px}.canvas-mode .workspace-label{top:81px;left:14px}.canvas-mode .workspace-label b{font-size:11px}.canvas-mode .workspace-label small{font-size:9px}.canvas-mode .canvas-bar{bottom:calc(166px + env(safe-area-inset-bottom));left:10px;right:10px;width:auto;max-width:none;transform:none;padding:5px;gap:5px;border-radius:14px}.canvas-mode .toolrail{overflow-x:auto;scrollbar-width:none;gap:2px;min-width:0;flex:1}.canvas-mode .toolrail button{flex:0 0 41px;min-width:41px;min-height:45px;font-size:8px}.canvas-mode .toolrail svg{width:18px;height:18px}.canvas-mode .history{flex-direction:column}.canvas-mode .history .icon-only{width:27px;min-height:25px;padding:3px}.canvas-mode .quick-dock{height:146px;bottom:calc(10px + env(safe-area-inset-bottom));left:10px;right:10px;transform:none;width:auto;max-width:none;padding:10px;gap:9px;align-items:center;border-radius:14px}.canvas-mode .compass{grid-template-columns:repeat(3,30px);gap:3px}.canvas-mode .compass button{width:30px;min-height:34px}.canvas-mode .compass #headingValue{font-size:9px}.canvas-mode .quick-row{gap:3px;flex-wrap:wrap}.canvas-mode .quick-row>button{padding:4px 6px;font-size:9px;min-height:31px}.canvas-mode .quick-row>button svg{width:13px;height:13px}.canvas-mode #quickDrawBtn{font-size:0;width:30px;min-height:31px}.canvas-mode #quickDrawBtn svg{width:16px;height:16px}.canvas-mode #pickStart{display:none}.canvas-mode .quick-steps{display:grid;grid-template-columns:1fr 1fr;gap:3px;width:68px;flex-shrink:0}.canvas-mode .quick-steps button{width:auto;padding:4px 2px;font-size:9px;min-height:38px}.canvas-mode #angleLock{font-size:0;width:27px;min-height:29px;padding:5px}.canvas-mode #quickStepBack{font-size:0;width:27px;min-height:29px;padding:5px}.canvas-mode #lengthBtn{height:38px;padding:6px;font-size:11px}.canvas-mode #lengthBtn .length-text{font-size:13px}.canvas-mode #quickStatus{font-size:8px;line-height:1.4;min-height:20px}.canvas-mode .zoom-controls{bottom:calc(232px + env(safe-area-inset-bottom));right:12px;gap:3px}.canvas-mode .zoom-controls span{width:30px}.canvas-mode .left-panel,.canvas-mode .right-panel{top:8px;bottom:calc(231px + env(safe-area-inset-bottom));width:min(280px,calc(100% - 28px));padding:15px}.canvas-mode .left-panel{left:10px}.canvas-mode .right-panel{right:10px}.canvas-mode .left-panel>.section-title{margin:12px 0}.canvas-mode .left-panel .level-meta .field{font-size:10px}.number-drawer{top:72px;right:10px;width:265px;max-height:calc(100dvh - 84px);padding:16px}.number-pad button{height:46px}.canvas-mode #toast{bottom:calc(237px + env(safe-area-inset-bottom))}.quick-dock:not(.canvas-mode .quick-dock){flex-wrap:wrap}.number-drawer #quickLength{height:62px}.canvas-mode .canvas-empty{font-size:15px;width:90%;white-space:normal}.canvas-mode .canvas-empty small{font-size:10px;line-height:1.6}}
@media(max-width:360px){.canvas-mode .brand{font-size:16px}.canvas-mode .brand>svg{display:none}.canvas-mode .top-actions{gap:2px}.canvas-mode .top-actions button{width:28px}.canvas-mode .compass{grid-template-columns:repeat(3,26px)}.canvas-mode .compass button{width:26px}.canvas-mode .quick-dock{gap:6px;padding:8px}.canvas-mode .quick-steps{width:56px}.canvas-mode .quick-row>button{font-size:8px;padding:4px}.canvas-mode .quick-row{gap:2px}.canvas-mode .toolrail button{flex-basis:39px;min-width:39px}}
@media print{.quick-dock,.number-drawer{display:none!important}.canvas-mode{height:auto;overflow:visible}}

#canvasSave{display:block;margin-top:3px;font-size:9px}.quick-row .icon-only{width:30px;padding:5px}#angleLock{font-size:0;width:30px;padding:5px}#quickStepBack{width:28px;padding:5px}.quick-row>button{flex-shrink:0}
@media(max-width:600px){.canvas-mode .quick-dock{display:grid;grid-template-columns:96px minmax(0,1fr);grid-template-rows:auto 31px;gap:6px 10px;height:150px}.canvas-mode .compass{grid-column:1;grid-row:1/3;align-self:center}.canvas-mode .quick-main{grid-column:2;grid-row:1;align-self:center}.canvas-mode .quick-steps{grid-column:2;grid-row:2;display:flex;flex-direction:row;width:auto;gap:4px}.canvas-mode .quick-steps button{flex:1;min-height:31px;font-size:10px}.canvas-mode #quickDrawBtn{display:none}.canvas-mode .quick-row{flex-wrap:wrap;gap:3px}.canvas-mode .quick-row>button{padding:4px 5px;font-size:9px;min-height:30px}.canvas-mode #finishRun,.canvas-mode #angleLock,.canvas-mode #quickStepBack{width:26px;padding:4px;font-size:0;min-height:30px}.canvas-mode #lengthBtn{height:35px;margin:5px 0 0}.canvas-mode #quickStatus{font-size:8px;min-height:11px;margin-top:4px}.canvas-mode .canvas-bar{bottom:calc(172px + env(safe-area-inset-bottom))}.canvas-mode .zoom-controls{bottom:calc(240px + env(safe-area-inset-bottom))}.canvas-mode #toast{bottom:calc(245px + env(safe-area-inset-bottom))}}
@media(max-width:360px){.canvas-mode .quick-dock{grid-template-columns:84px minmax(0,1fr);gap:6px 8px;height:176px}.canvas-mode .canvas-bar{bottom:calc(198px + env(safe-area-inset-bottom))}.canvas-mode .zoom-controls{bottom:calc(266px + env(safe-area-inset-bottom))}.canvas-mode #toast{bottom:calc(270px + env(safe-area-inset-bottom))}.canvas-mode .quick-row>button{font-size:8px;padding:4px}.canvas-mode #finishRun,.canvas-mode #angleLock,.canvas-mode #quickStepBack{font-size:0}}
@media(prefers-reduced-motion:reduce){.number-drawer{animation:none}}

@media(max-width:600px){.canvas-mode #finishRun,.canvas-mode #quickStepBack{display:none}.canvas-mode .quick-dock{height:160px}.canvas-mode .canvas-bar{bottom:calc(182px + env(safe-area-inset-bottom))}.canvas-mode .zoom-controls{bottom:calc(250px + env(safe-area-inset-bottom))}}
@media(max-width:360px){.canvas-mode .quick-dock{height:164px}.canvas-mode .canvas-bar{bottom:calc(186px + env(safe-area-inset-bottom))}.canvas-mode .zoom-controls{bottom:calc(254px + env(safe-area-inset-bottom))}}

.store-link{display:inline-flex;align-items:center;gap:4px}.number-pad button[data-number=back] svg{width:23px;height:23px}