:where(.app-workspace) *{box-sizing:border-box}:where(.app-workspace) [hidden]{display:none!important}.app-workspace{margin:0;height:100vh;display:flex;flex-direction:column;font:14px system-ui,sans-serif;color:#20313c;background:#f1f4f6}:where(.app-workspace) header{display:flex;align-items:center;gap:18px;padding:10px 16px;background:#233d4a;color:white}:where(.app-workspace) header span{font-size:12px;color:#cfdee4}:where(.app-workspace) #dirty{margin-left:auto;font-size:12px}:where(.app-workspace) button,:where(.app-workspace) input,:where(.app-workspace) select,:where(.app-workspace) textarea{font:inherit}:where(.app-workspace) button,:where(.app-workspace) input,:where(.app-workspace) select{padding:5px 7px}:where(.app-workspace) button{cursor:pointer}:where(.app-workspace) button:disabled{cursor:default}:where(.app-workspace) input[type=number]{width:68px}:where(.app-workspace) input[type=color]{width:38px;height:30px;padding:2px}:where(.app-workspace) label{display:inline-flex;align-items:center;gap:7px}:where(.app-workspace) .menubar{display:flex;gap:4px;background:white;border-bottom:1px solid #d5dfe4;padding:0 10px;z-index:4}:where(.app-workspace) .menu{position:relative}:where(.app-workspace) .menu summary{cursor:pointer;list-style:none;padding:7px 13px;border-radius:3px}:where(.app-workspace) .menu[open] summary{background:#e4edf2}:where(.app-workspace) .menu-content{position:absolute;left:0;top:100%;display:grid;gap:8px;width:285px;max-width:90vw;padding:12px;background:white;box-shadow:0 4px 16px #20313c40;border:1px solid #b3c4cc;border-radius:4px;max-height:75vh;overflow:auto}:where(.app-workspace) .menu-content button{text-align:left}:where(.app-workspace) .menu-content label{display:grid;gap:5px}:where(.app-workspace) .menu-content select,:where(.app-workspace) .menu-content input{min-width:0;width:100%}:where(.app-workspace) .menu-content p{margin:0;line-height:1.4}:where(.app-workspace) .help{width:360px}:where(.app-workspace) .toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:7px 12px;background:white}:where(.app-workspace) .tool-group{display:flex;align-items:center;flex-wrap:wrap;gap:7px;padding-right:12px;border-right:1px solid #d9e3e8}:where(.app-workspace) .tool-group:last-child{border:0}:where(.app-workspace) #orientation{width:153px}:where(.app-workspace) #fontFamily{width:128px}:where(.app-workspace) .crop-panel{display:flex;flex-wrap:wrap;align-items:center;gap:10px;background:#fff1dc;padding:8px 12px}:where(.app-workspace) .crop-panel span{font-size:12px}:where(.app-workspace) main{flex:1;min-height:240px;display:flex}:where(.app-workspace) #canvas{width:100%;height:100%;min-height:240px;background:#d7dfe4;touch-action:none;user-select:none}:where(.app-workspace) #status{margin:0;padding:7px 14px;min-height:32px;background:white;font-size:13px}:where(.app-workspace) .dimension{color:inherit}:where(.app-workspace) .dimension.preview{pointer-events:none}:where(.app-workspace) .dimension line{stroke:currentColor;stroke-width:var(--annotation-line-width,1.5)}:where(.app-workspace) .dimension .hit{stroke:transparent;stroke-width:16;cursor:move;vector-effect:non-scaling-stroke}:where(.app-workspace) .dimension .arrowhead{stroke:currentColor;stroke-width:var(--annotation-line-width,1.5);stroke-linejoin:round;stroke-linecap:butt;cursor:move}:where(.app-workspace) .dimension text{font-family:inherit;fill:currentColor;stroke:white;stroke-width:var(--text-halo-width,4);paint-order:stroke;stroke-linejoin:round;text-anchor:middle;dominant-baseline:central;cursor:move}:where(.app-workspace) .dimension circle{fill:white;stroke:currentColor;vector-effect:non-scaling-stroke;cursor:move}:where(.app-workspace) .text-box{fill:transparent;stroke:none;cursor:move}:where(.app-workspace) .dimension.selected .text-box,:where(.app-workspace) .dimension.preview .text-box{stroke:#758d99;stroke-width:1;stroke-dasharray:4 4;vector-effect:non-scaling-stroke}:where(.app-workspace) .resize-handle{fill:white;stroke:#304f60;stroke-width:1;vector-effect:non-scaling-stroke;cursor:ew-resize}:where(.app-workspace) .text-background{stroke:none;cursor:move}:where(.app-workspace) .crop-draft{fill:#ffffff11;stroke:#c75000;stroke-width:2;stroke-dasharray:8 4;vector-effect:non-scaling-stroke;cursor:move}:where(.app-workspace) .crop-edge{stroke:transparent;stroke-width:12;vector-effect:non-scaling-stroke}:where(.app-workspace) .crop-handle{fill:white;stroke:#c75000;stroke-width:1.5;vector-effect:non-scaling-stroke}:where(.app-workspace) #editor{position:fixed;width:330px;max-width:100vw;max-height:100vh;overflow:auto;padding:12px;background:white;border:1px solid #9aafb9;border-radius:6px;box-shadow:0 4px 20px #20313c40;z-index:5;overscroll-behavior:contain}:where(.app-workspace) .editor-header{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:move;touch-action:none;user-select:none;min-height:34px}:where(.app-workspace) .editor-header button{flex-shrink:0}:where(.app-workspace) #editor fieldset{margin:10px 0;border:1px solid #d7dfe4}:where(.app-workspace) #editor legend{font-weight:600}:where(.app-workspace) #editor label{display:flex;justify-content:space-between;margin:8px 0}:where(.app-workspace) #editor .text-content{display:grid}:where(.app-workspace) #label{width:100%;resize:vertical;padding:7px}:where(.app-workspace) #editor small{display:block;margin-top:10px;color:#526875}:where(.app-workspace) input:invalid{outline:2px solid #b33822}
@media(max-width:720px){:where(.app-workspace) header{gap:8px;flex-wrap:wrap;padding:8px 12px}:where(.app-workspace) header span{display:none}:where(.app-workspace) .toolbar{gap:6px}:where(.app-workspace) .tool-group{padding-right:7px;gap:5px}:where(.app-workspace) .crop-panel span{display:none}:where(.app-workspace) .menu-content{max-width:calc(100vw - 30px)}}:where(.app-workspace) #dropZone{position:relative}:where(.app-workspace) #dropZone.drag-over{outline:4px solid #087c9d;outline-offset:-4px;background:#d9f3fa}:where(.app-workspace) #dropZone.drag-rejected{outline:4px solid #b33822;outline-offset:-4px}:where(.app-workspace) .empty-drop{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;gap:12px;width:min(430px,80%);padding:32px 24px;border:2px dashed #809ba8;border-radius:8px;background:#ffffffdd;color:#233d4a;text-align:center}:where(.app-workspace) .empty-drop strong{font-size:18px}:where(.app-workspace) .empty-drop span{font-size:13px}:where(.app-workspace) .drag-over .empty-drop{border-color:#087c9d;background:#e8faff}:where(.app-workspace) #lineWidth,:where(.app-workspace) #arrowSize{width:68px}:where(.app-workspace) #orientation{width:158px}:where(.app-workspace) #arrowType{width:158px}:where(.app-workspace) #globalSize{width:140px;padding:0}:where(.app-workspace) #globalSizeValue{min-width:40px}:where(.app-workspace) #settings{width:440px;max-width:100vw;max-height:95vh;overflow:auto;border:1px solid #9aafb9;border-radius:6px;padding:18px;color:#20313c}:where(.app-workspace) #settings::backdrop{background:#20313c55}:where(.app-workspace) .settings-header{display:flex;align-items:center;justify-content:space-between}:where(.app-workspace) #settings p{font-size:12px;line-height:1.4}:where(.app-workspace) #settings label{display:flex;justify-content:space-between;margin:14px 0;gap:12px}:where(.app-workspace) #settings input[type=number]{width:95px}:where(.app-workspace) #settings select{max-width:170px}:where(.app-workspace) .text-leader{pointer-events:none}:where(.app-workspace) #settingsHeader{cursor:move;touch-action:none;user-select:none}:where(.app-workspace) #settingsHeader button{cursor:pointer}:where(.app-workspace) .dimension polyline.hit{stroke:transparent;stroke-width:16;vector-effect:non-scaling-stroke;cursor:move}:where(.app-workspace) #editor{width:410px}:where(.app-workspace) #editor .object-property{display:grid;grid-template-columns:1fr 125px;gap:4px 8px;margin:8px 0}:where(.app-workspace) #editor .object-property>label{margin:0;justify-content:start}:where(.app-workspace) #editor .object-property .inheritance{grid-column:1 / -1;font-size:12px;color:#526875}:where(.app-workspace) #editor .object-property input,:where(.app-workspace) #editor .object-property select{min-width:0;max-width:125px}:where(.app-workspace) #editor .object-property input[type=checkbox]{width:auto}:where(.app-workspace) .editor-header{position:sticky;top:0;background:white;z-index:1}:where(.app-workspace) .oval .hit{fill:none}:where(.app-workspace) .oval-outline{cursor:move}:where(.app-workspace) #customStatus{font-size:12px;font-weight:600;color:#55504c}:where(.app-workspace) .custom-property{border-left:3px solid #818b7e;padding-left:7px}:where(.app-workspace) .custom-property>label:first-child::after{content:" · Custom";font-size:11px;color:#55504c}
/* Midplane App Style Guide v0.9.2. Fonts are offline fallbacks: no font files supplied. */
:root{--mp-off-white:#F5F5F5;--mp-beige:#EAE6E1;--mp-red:#A74D4A;--mp-sage:#818B7E;--mp-black:#121212;--mp-border:#CCC7C1;--mp-muted:#55504C;--mp-field:#8C8781}.app-workspace{font-family:Roboto,Arial,Helvetica,sans-serif;color:var(--mp-black);background:var(--mp-off-white);height:100dvh}:where(.app-workspace) .brand-header{background:var(--mp-beige);color:var(--mp-black);gap:16px;padding:12px 16px;min-height:76px;flex-shrink:0}:where(.app-workspace) .brand-header img{object-fit:contain;width:46px;height:46px;flex:none}:where(.app-workspace) .brand-copy{display:grid;gap:2px}:where(.app-workspace) .brand-copy strong{font-family:'Young Serif',Georgia,'Times New Roman',serif;font-weight:400;font-size:28px;line-height:1.1}:where(.app-workspace) .brand-copy>span{color:var(--mp-muted);font-size:14px}:where(.app-workspace) .brand-copy small{font-size:11px;margin-left:10px}:where(.app-workspace) #dirty{font-size:12px;color:var(--mp-muted);font-weight:400}:where(.app-workspace) button,:where(.app-workspace) input,:where(.app-workspace) select,:where(.app-workspace) textarea{color:var(--mp-black);border:1px solid var(--mp-field);border-radius:5px;background:white;box-shadow:none;font:inherit}:where(.app-workspace) button,:where(.app-workspace) input:not([type=checkbox]):not([type=range]),:where(.app-workspace) select{min-height:40px;padding:7px 10px}:where(.app-workspace) button{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-weight:500;white-space:nowrap;background:var(--mp-off-white);border-color:var(--mp-border)}:where(.app-workspace) button:hover:enabled{background:var(--mp-beige);border-color:var(--mp-field)}:where(.app-workspace) button:disabled{color:#78736d;background:#efedea;opacity:.65;cursor:default}:where(.app-workspace) button[aria-pressed=true]{background:var(--mp-red);color:white;border-color:var(--mp-red)}:where(.app-workspace) button[aria-pressed=true]:hover{background:#93423f}:where(.app-workspace) button:focus-visible,:where(.app-workspace) input:focus-visible,:where(.app-workspace) select:focus-visible,:where(.app-workspace) textarea:focus-visible,:where(.app-workspace) summary:focus-visible{outline:2px solid var(--mp-black);outline-offset:2px}:where(.app-workspace) input[type=checkbox]{accent-color:var(--mp-red);width:18px;height:18px;margin:0;flex:none}:where(.app-workspace) input[type=range]{accent-color:var(--mp-red);min-height:30px}:where(.app-workspace) input[type=color]{width:48px;min-height:40px;padding:3px!important}:where(.app-workspace) input:invalid{outline:2px solid #B42318}:where(.app-workspace) .toolbar{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;background:var(--mp-off-white);padding:8px 12px;border-top:1px solid var(--mp-border);border-bottom:1px solid var(--mp-border);z-index:4;flex-shrink:0;min-height:57px}:where(.app-workspace) .menubar{border:0;padding:0;background:transparent;gap:0;flex:none;z-index:auto}:where(.app-workspace) .menu summary{display:flex;align-items:center;justify-content:center;gap:4px;min-height:40px;padding:8px 10px;white-space:nowrap;border-radius:5px}:where(.app-workspace) .menu summary::-webkit-details-marker{display:none}:where(.app-workspace) .menu summary::marker{content:''}:where(.app-workspace) .menu summary:hover,:where(.app-workspace) .menu[open]>summary{background:var(--mp-beige)}:where(.app-workspace) .menu-content{width:320px;max-width:calc(100vw - 16px);background:var(--mp-off-white);border:1px solid var(--mp-border);border-radius:8px;box-shadow:0 5px 18px #12121225;padding:10px;gap:7px;z-index:8;max-height:calc(100dvh - 150px)}:where(.app-workspace) .menu-content button{justify-content:flex-start;width:100%}:where(.app-workspace) .menu-content label{color:var(--mp-muted)}:where(.app-workspace) .menu-content select{color:var(--mp-black)}:where(.app-workspace) .menu-content p{color:var(--mp-muted);line-height:1.5}:where(.app-workspace) .help{width:320px}:where(.app-workspace) #toolbarMain{display:flex;flex-wrap:nowrap;gap:0;align-items:center;min-width:0}:where(.app-workspace) .tool-group{flex-wrap:nowrap;flex-shrink:0;padding:0 9px;gap:6px;border-right:1px solid var(--mp-border);height:40px}:where(.app-workspace) .tool-group:last-child{border:0}:where(.app-workspace) #annotationTools{padding-left:0}:where(.app-workspace) #annotationTools button span{font-size:19px;line-height:1}:where(.app-workspace) #orientation{width:136px}:where(.app-workspace) #dimensionControls label{font-size:12px}:where(.app-workspace) #globalTools label{font-size:12px;gap:5px}:where(.app-workspace) #globalSize{width:88px}:where(.app-workspace) #globalSizeValue{min-width:34px;font-variant-numeric:tabular-nums}:where(.app-workspace) #viewTools button{min-width:38px;padding:7px 9px}:where(.app-workspace) #overflowMenu{margin-left:auto;flex:none}:where(.app-workspace) #overflowContent .tool-group{height:auto;min-height:40px;padding:8px 0;border:0;border-bottom:1px solid var(--mp-border);flex-wrap:wrap}:where(.app-workspace) #overflowContent .tool-group:last-child{border:0}:where(.app-workspace) #overflowContent button{width:auto}:where(.app-workspace) #overflowContent #globalTools{display:grid}:where(.app-workspace) #overflowContent #globalSize{width:140px}:where(.app-workspace) #canvas{background:var(--mp-beige)}:where(.app-workspace) #status{background:var(--mp-off-white);color:var(--mp-muted);border-top:1px solid var(--mp-border);font-size:12px;min-height:32px}:where(.app-workspace) main{min-height:160px}:where(.app-workspace) #canvas{min-height:160px}:where(.app-workspace) .empty-drop{background:var(--mp-off-white);color:var(--mp-black);border:1px dashed var(--mp-field);padding:28px;border-radius:8px}:where(.app-workspace) .empty-drop strong{font-size:17px}:where(.app-workspace) .empty-drop span{color:var(--mp-muted)}:where(.app-workspace) .drag-over .empty-drop{background:var(--mp-beige);border-color:var(--mp-red)}:where(.app-workspace) #dropZone.drag-over{outline-color:var(--mp-red)}:where(.app-workspace) #editor,:where(.app-workspace) #settings{background:var(--mp-off-white);color:var(--mp-black);border:1px solid var(--mp-border);border-radius:8px;box-shadow:0 5px 22px #12121228;padding:14px;max-width:100vw;max-height:100dvh}:where(.app-workspace) #editor{width:410px}:where(.app-workspace) #settings{width:440px}:where(.app-workspace) #settings::backdrop{background:#12121245}:where(.app-workspace) .editor-header,:where(.app-workspace) .settings-header{background:var(--mp-off-white);padding-bottom:8px;border-bottom:1px solid var(--mp-border);min-height:48px;gap:12px}:where(.app-workspace) .editor-header strong,:where(.app-workspace) .settings-header strong{font-size:17px;font-weight:600}:where(.app-workspace) .settings-header{position:sticky;top:0;z-index:1}:where(.app-workspace) #editor fieldset{border:1px solid var(--mp-border);border-radius:5px;margin:12px 0;padding:10px}:where(.app-workspace) #editor legend{font-size:12px;color:var(--mp-muted);font-weight:600;padding:0 4px}:where(.app-workspace) #editor label,:where(.app-workspace) #settings label{font-size:13px}:where(.app-workspace) #editor small,:where(.app-workspace) #settings p{color:var(--mp-muted);line-height:1.5}:where(.app-workspace) #editor .object-property{grid-template-columns:minmax(0,1fr) 125px;padding-bottom:10px;border-bottom:1px solid var(--mp-border)}:where(.app-workspace) #editor .object-property:last-child{border-bottom:0}:where(.app-workspace) #editor .object-property .inheritance{color:var(--mp-muted);font-size:12px}:where(.app-workspace) #editor .object-property>label:first-child{flex-wrap:wrap;gap:3px}:where(.app-workspace) #label{line-height:1.4;border-color:var(--mp-field)}:where(.app-workspace) #customStatus{background:var(--mp-beige);padding:6px 8px;border-radius:5px}:where(.app-workspace) #deleteSelected{color:#B42318}:where(.app-workspace) #settings input[type=number]{width:100px}:where(.app-workspace) #editor input[type=number]{width:94px}:where(.app-workspace) .crop-panel{background:var(--mp-beige);border-bottom:1px solid var(--mp-border)}
@media(max-width:720px){:where(.app-workspace) .brand-header{flex-wrap:nowrap;padding:10px 12px;gap:12px;min-height:65px}:where(.app-workspace) .brand-header img{width:35px;height:35px}:where(.app-workspace) .brand-copy strong{font-size:23px}:where(.app-workspace) .brand-copy>span{display:block;font-size:12px}:where(.app-workspace) .brand-copy small,:where(.app-workspace) #dirty{display:none}:where(.app-workspace) .toolbar{padding:7px 8px;gap:4px}:where(.app-workspace) .menubar summary,:where(.app-workspace) #overflowMenu summary{padding:8px}:where(.app-workspace) .tool-group{gap:5px}:where(.app-workspace) .crop-panel span{display:none}:where(.app-workspace) .menu-content{max-height:calc(100dvh - 135px)}:where(.app-workspace) #editor,:where(.app-workspace) #settings{padding:10px}}
@media(pointer:coarse){:where(.app-workspace) button,:where(.app-workspace) .menu summary,:where(.app-workspace) input:not([type=checkbox]):not([type=range]),:where(.app-workspace) select{min-height:44px}}:where(.app-workspace) #editor .text-content{grid-template-columns:minmax(0,1fr);justify-content:stretch;gap:6px}
/* Milestone2.9: flat application-menu commands within the existing v0.9.2 system. */:where(.app-workspace) .menubar .menu-content{padding:6px;gap:2px}:where(.app-workspace) .menubar .menu-content button{appearance:none;background:transparent;border:0;border-radius:4px;min-height:38px;box-shadow:none;padding:8px 10px;text-align:left;justify-content:space-between;font-weight:400;gap:18px}:where(.app-workspace) .menubar .menu-content button:hover:enabled,:where(.app-workspace) .menubar .menu-content button:focus-visible{background:var(--mp-beige);outline-offset:-2px}:where(.app-workspace) .menubar .menu-content button:disabled{background:transparent;opacity:1;color:#78736d}:where(.app-workspace) .menu-content kbd{font:12px Roboto,Arial,sans-serif;color:var(--mp-muted);margin-left:auto}:where(.app-workspace) .menu-content hr{border:0;border-top:1px solid var(--mp-border);margin:5px 7px;width:calc(100% - 14px)}:where(.app-workspace) .menu-heading{display:block;padding:8px 6px;font-size:13px}:where(.app-workspace) .menubar .help{padding:12px;gap:10px}:where(.app-workspace) #globalTools .global-color{gap:5px}:where(.app-workspace) #globalTools .global-color input{width:34px;min-width:34px;padding:3px!important;border:1px solid var(--mp-border);background:transparent}:where(.app-workspace) #overflowContent #globalTools .global-color{justify-content:flex-start}
/* Measured Midplane homepage typography. Locally bundled Latin subsets, SIL OFL. */
@font-face{font-family:Roboto;font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/Roboto-Regular.woff2') format('woff2')}
@font-face{font-family:'Young Serif';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/YoungSerif-Regular.woff2') format('woff2')}
@font-face{font-family:Bitter;font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/Bitter-Regular.woff2') format('woff2')}.app-workspace{padding-top:var(--site-header-height,86px);font-family:Roboto,Arial,Helvetica,sans-serif}:where(.app-workspace) .site-header{position:fixed;inset:0 0 auto;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:.9vw 4vw;background:#EAE6E1;color:#121212;box-shadow:0 6px 12px #12121226;min-height:0}:where(.app-workspace) .site-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#121212;white-space:nowrap}:where(.app-workspace) .site-brand img{display:block;height:51px;width:auto;flex:none}:where(.app-workspace) .site-header .site-brand span{font:400 24px/24px 'Young Serif',Georgia,serif;color:#121212;letter-spacing:normal}:where(.app-workspace) #siteNav{display:flex;align-items:center;gap:2vw;margin-left:auto;font:400 16px/24px Roboto,Arial,sans-serif}:where(.app-workspace) #siteNav a{color:#121212;text-decoration:none;padding:1.6px 0}:where(.app-workspace) #siteNav a:hover{text-decoration:underline;text-underline-offset:5px}:where(.app-workspace) #siteNav .project-link{color:#A74D4A;border:1px solid #A74D4A;border-radius:5px;padding:19.2px 32.064px;line-height:normal;text-decoration:none;white-space:nowrap}:where(.app-workspace) #siteNav .project-link:hover{background:#A74D4A;color:#F5F5F5}:where(.app-workspace) #siteMenuButton{display:none}:where(.app-workspace) .skip-workspace{position:fixed;top:-90px;left:16px;z-index:40;padding:16px 20.8px;background:#A74D4A;color:#F5F5F5;font:400 16px Bitter,Georgia,serif}:where(.app-workspace) .skip-workspace:focus{top:8px}:where(.app-workspace) .workspace-status{display:flex;gap:12px;align-items:center;background:#F5F5F5;border-top:1px solid #CCC7C1;min-height:32px;padding:0 14px}:where(.app-workspace) .workspace-status #status{flex:1;border:0;padding:7px 0}:where(.app-workspace) .workspace-status #dirty{font:400 12px/18px Roboto,Arial,sans-serif;white-space:nowrap;color:#55504C;margin:0}:where(.app-workspace) .site-footer{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;flex-shrink:0;background:#121212;color:#F5F5F5;padding:8px 16px;font:400 16px/24px Roboto,Arial,sans-serif;border-top:2px solid #A74D4A;text-align:center}:where(.app-workspace) .site-footer a{color:#F5F5F5;text-decoration:underline;text-underline-offset:3px}:where(.app-workspace) .help-dialog{width:760px;max-width:calc(100vw - 16px);max-height:90dvh;padding:20px;background:#F5F5F5;color:#121212;border:1px solid #CCC7C1;border-radius:8px;box-shadow:0 6px 24px #12121230;font:400 15px/1.55 Roboto,Arial,sans-serif}:where(.app-workspace) .help-dialog::backdrop{background:#12121255}:where(.app-workspace) .help-header{position:sticky;top:-20px;display:flex;align-items:center;justify-content:space-between;gap:12px;background:#F5F5F5;padding:10px 0;border-bottom:1px solid #CCC7C1;z-index:1}:where(.app-workspace) .help-dialog h1{font:400 26px/1.25 'Young Serif',Georgia,serif;margin:0}:where(.app-workspace) .help-dialog h2{font:400 20px/1.3 'Young Serif',Georgia,serif;margin:22px 0 8px}:where(.app-workspace) .help-dialog p{margin:8px 0 16px}:where(.app-workspace) .help-dialog a{color:#91413e}:where(.app-workspace) .help-intro{color:#55504C;font-size:13px}:where(.app-workspace) .about-dialog{width:580px;text-align:center}:where(.app-workspace) .about-dialog img{display:block;width:76px;height:auto;margin:24px auto 8px}:where(.app-workspace) .about-dialog .version{color:#55504C;font-size:14px}:where(.app-workspace) .help-dialog section{margin-bottom:18px}:where(.app-workspace) .site-header a:focus-visible,:where(.app-workspace) .site-footer a:focus-visible{outline:2px solid currentColor;outline-offset:4px}
@media(max-width:767px){:where(.app-workspace) .site-header{padding:16px 6vw;gap:10px}:where(.app-workspace) .site-brand{gap:8px}:where(.app-workspace) .site-brand img{height:30px}:where(.app-workspace) .site-header .site-brand span{font-size:18px;line-height:18px}:where(.app-workspace) #siteMenuButton{display:inline-flex;min-width:40px;min-height:36px;background:transparent;border:0;font-size:22px;padding:4px 6px}:where(.app-workspace) #siteNav{display:none;position:absolute;top:100%;left:0;right:0;padding:16px 6vw 22px;background:#EAE6E1;box-shadow:0 6px 12px #12121226;gap:16px;flex-direction:column;align-items:stretch}:where(.app-workspace) #siteNav.is-open{display:flex}:where(.app-workspace) #siteNav .project-link{text-align:center;padding:12px 18px}:where(.app-workspace) .workspace-status #dirty{display:block;font-size:11px}:where(.app-workspace) .workspace-status{gap:8px;padding:0 8px}:where(.app-workspace) .site-footer{padding:6px 12px}:where(.app-workspace) .help-dialog{padding:14px}:where(.app-workspace) .help-header{top:-14px}:where(.app-workspace) .help-dialog h1{font-size:23px}}:where(.app-workspace) #editor{z-index:20}:where(.app-workspace) .site-header .site-brand span,:where(.app-workspace) #siteMenuButton span{display:inline}:where(.app-workspace) #siteMenuButton span{color:#121212;font-size:22px}
@media(max-width:767px){:where(.app-workspace) .site-header{height:83.78125px;padding:0 6vw}:where(.app-workspace) #siteMenuButton span{position:relative;width:30px;height:14px;font-size:0!important}:where(.app-workspace) #siteMenuButton span::before,:where(.app-workspace) #siteMenuButton span::after{content:"";position:absolute;left:0;width:30px;height:1px;background:#55504C}:where(.app-workspace) #siteMenuButton span::before{top:2px}:where(.app-workspace) #siteMenuButton span::after{bottom:2px}:where(.app-workspace) #siteMenuButton[aria-expanded=true] span::before{top:6px;transform:rotate(45deg)}:where(.app-workspace) #siteMenuButton[aria-expanded=true] span::after{bottom:7px;transform:rotate(-45deg)}}

/* v3.1: shell integration; application controls retain their accepted density. */
body.mp-preview{height:100dvh;min-height:100dvh;display:flex;flex-direction:column;padding:0;font-family:var(--md-ui-font);line-height:normal}
.mp-header,.mp-footer{flex-shrink:0}
.app-workspace{display:flex;flex-direction:column;flex:1;min-height:340px;height:auto;padding:0;position:static;isolation:auto;z-index:auto;font-family:var(--md-ui-font)}
.app-workspace #dropZone{min-height:160px}
.app-workspace .help-dialog h1,.app-workspace .help-dialog h2{font-family:var(--md-heading-font)}
.app-workspace #label{font-family:inherit}

/* Modeless editor retains viewport movement; an open website overlay paints above it. */
.mp-header.mp-menu-open{z-index:30}

/* Keep the editor header/close button visible and clear of sticky website controls. */
.app-workspace #editor{max-height:calc(100dvh - var(--app-shell-header-height,86px))}