.app{height:100dvh;min-height:580px;overflow:hidden;background:var(--selection);color:var(--foreground-strong);font-family:Inter,-apple-system,BlinkMacSystemFont,'PingFang SC',sans-serif;font-size:12px}.app button{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:transparent;border:1px solid transparent;border-radius:7px;padding:8px;color:inherit;font:inherit;cursor:pointer}.app button:hover{background:var(--selection)}.app button:disabled{opacity:.35;cursor:default}.app button:focus-visible,.app a:focus-visible{outline:2px solid var(--ring);outline-offset:2px}.app input,.app textarea{font:inherit;color:inherit;outline:none}.app input:focus,.app textarea:focus{border-color:var(--selection-border)!important}.top{height:64px;padding:0 20px;gap:14px;border-bottom:1px solid var(--border);background:var(--surface);display:flex;white-space:nowrap}.top a:first-child{margin:0}.brand{font-size:20px;font-weight:650;display:flex;align-items:center;gap:9px;letter-spacing:-.6px}.brand>span:first-child{font-size:30px;color:var(--primary)}.badge{font-size:9px;letter-spacing:1px;font-weight:500;margin-left:8px;color:var(--muted-foreground)}.top>input{border:0;background:transparent;width:180px;padding:8px}.saved{margin-left:auto;font-size:11px;color:var(--muted-foreground)}.saved:before{content:'●';color:var(--muted-foreground);margin-right:7px}.app .primary{background:var(--primary);color:var(--primary-foreground);padding:10px 15px}.app .primary:hover{background:var(--primary-hover)}.account{max-width:160px;overflow:hidden;text-overflow:ellipsis}.body{display:grid;grid-template-columns:240px minmax(240px,1fr) 264px;height:calc(100% - 64px)}.left,.right{padding:0;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:auto}.right{border-right:0;border-left:1px solid var(--border)}.tabs{display:flex;gap:5px;padding:16px;border-bottom:1px solid var(--border)}.tabs button{padding:7px 13px;color:var(--muted-foreground)}.tabs button[aria-pressed=true]{color:var(--foreground);background:var(--selection);font-weight:600}.pageTitle{display:flex;justify-content:space-between;padding:24px 20px 18px;font-size:11px}.pageTitle span:last-child{color:var(--muted-foreground);font-size:10px}.layers{flex:1}.layer{display:flex;margin:2px 8px;border-radius:6px}.layer[data-selected=true]{background:var(--selection);color:var(--primary)}.layer>button:first-child{flex:1;min-width:0;justify-content:start;padding:11px 8px}.layer span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.layer>button{padding:5px}.emptyLayers{text-align:center;padding:55px 10px;color:var(--muted-foreground)}.emptyLayers>svg{margin:auto;color:var(--muted-foreground)}.emptyLayers p{margin-top:18px;font-size:12px}.emptyLayers small{font-size:10px;color:var(--muted-foreground)}.app .addLayer{margin:16px;border:1px dashed var(--selection-border);color:var(--muted-foreground)}.leftFooter{margin-top:auto;padding:20px;border-top:1px solid var(--border)}.leftFooter a{display:flex;justify-content:space-between;font-size:11px}.leftFooter small{display:block;color:var(--muted-foreground);font-size:9px;margin-top:17px}.assets{padding:18px}.assets h3{font-size:12px;margin-bottom:20px}.assets button{border:1px solid var(--selection-border);width:calc(50% - 8px);margin:4px;flex-direction:column;padding:18px 5px;gap:12px}.assets p{color:var(--muted-foreground);line-height:1.8;margin-top:24px;font-size:11px}.viewport{position:relative;overflow:auto;display:flex;align-items:center;flex-direction:column;padding:38px 48px 100px;background-image:radial-gradient(var(--background) .7px,transparent .7px);background-size:16px 16px}.canvasLabel{width:100%;max-width:650px;color:var(--muted-foreground);font-size:10px;display:flex;justify-content:space-between;margin-bottom:14px}.boardWrap{flex-shrink:0;position:relative;margin:auto;box-shadow:0 8px 55px var(--shadow),0 0 0 1px var(--shadow)}.board{position:relative;width:800px;height:1000px;transform-origin:top left;isolation:isolate}.element{position:absolute;touch-action:none;cursor:move;line-height:1.3;overflow:visible;outline:none;user-select:none}.element>img{width:100%;height:100%;object-fit:cover;pointer-events:none}.element[data-selected=true]{outline:2px solid var(--ring);z-index:1}.corner{position:absolute;width:9px;height:9px;border:2px solid var(--selection-border);background:var(--surface);right:-5px;bottom:-5px}.measure{position:absolute;left:50%;top:calc(100% + 12px);transform:translateX(-50%);font-size:13px;background:var(--primary);padding:4px 8px;color:var(--primary-foreground);white-space:nowrap;border-radius:4px}.blankHint{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--muted-foreground);pointer-events:none}.blankHint h1{font-weight:400;font-size:27px;letter-spacing:2px;margin:30px 0 5px}.blankHint p{font-size:15px;color:var(--muted-foreground)}.blankHint button{pointer-events:auto;margin-top:25px;font-size:15px;color:var(--primary)}.tools{position:fixed;bottom:28px;left:calc(50% - 12px);transform:translateX(-50%);display:flex;align-items:center;gap:3px;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:0 8px 30px var(--shadow);padding:8px;z-index:5}.tools button{width:35px;height:36px}.tools button:first-child{background:var(--selection);color:var(--primary)}.tools span{height:20px;border-left:1px solid var(--border);margin:0 7px}.tools output{width:36px;text-align:center;font-size:11px}.inspectorTitle{display:flex;justify-content:space-between;padding:24px 20px;border-bottom:1px solid var(--border);font-weight:600}.inspectorTitle span{font-size:10px;color:var(--muted-foreground);font-weight:400}.props{padding:22px 20px}.props h3{font-size:11px;margin:6px 0 17px}.props h3:not(:first-child){margin-top:28px}.props p{font-size:11px;color:var(--muted-foreground)}.dimensions{display:flex;gap:18px;background:var(--selection);border-radius:6px;padding:12px;font-size:10px;color:var(--muted-foreground);margin:18px 0 28px}.dimensions b{font-weight:400;color:var(--foreground)}.props label,.modal label{display:flex;flex-direction:column;gap:9px;font-size:11px;color:var(--muted-foreground)}.props input:not([type=color]),.props textarea,.modal input{width:100%;padding:9px 10px;border:1px solid var(--input);border-radius:6px;background:var(--selection)}.props textarea{height:100px;resize:vertical;margin-bottom:18px}.fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}.props .color{display:flex;flex-direction:row;align-items:center;border:1px solid var(--border);border-radius:6px;padding:6px 10px;font-size:10px}.color input{width:25px;height:25px;padding:0;border:0;background:none;margin-right:10px}.note{margin-top:45px;padding:30px 0;text-align:center;color:var(--muted-foreground);border-top:1px solid var(--border)}.note svg{margin:auto}.note p{line-height:1.9}.actions{display:flex;gap:8px;margin:25px 0}.actions button{border:1px solid var(--border)!important;flex:1}.rightFooter{margin-top:auto;padding:20px;border-top:1px solid var(--border)}.rightFooter button{font-size:11px}.rightFooter p{font-size:10px;color:var(--muted-foreground);line-height:1.8}.overlay{position:fixed;inset:0;background:var(--scrim);backdrop-filter:blur(5px);display:grid;place-items:center;z-index:20}.modal{background:var(--surface);width:min(440px,calc(100% - 32px));padding:38px;border-radius:18px;position:relative;box-shadow:0 20px 100px var(--shadow)}.modal h2{font-size:25px;margin:18px 0 10px;letter-spacing:-.7px}.modal p{color:var(--muted-foreground);line-height:1.8}.modalIcon{color:var(--primary);font-size:38px}.app .close{position:absolute;right:16px;top:16px}.modal .tabs{padding:14px 0;margin-bottom:22px}.modal form{display:grid;gap:18px}.modal small{font-size:10px;color:var(--muted-foreground)}.modal .primary{width:100%}@media(max-width:1100px){.body{grid-template-columns:190px minmax(200px,1fr) 220px}.saved,.badge{display:none}.top{gap:8px}.top>input{width:140px}.viewport{padding-left:25px;padding-right:25px}.tools{left:calc(50% - 15px)}}@media(max-width:760px){.body{grid-template-columns:1fr 200px}.left{display:none}.top{padding:0 10px}.top>input{width:110px}.brand{font-size:16px}.account{max-width:95px}.tools{left:calc(50% - 100px);gap:0;max-width:calc(100vw - 210px);flex-wrap:wrap;justify-content:center}.viewport{padding:25px 20px 120px}.top>svg,.top>button[title]{display:none}}@media(max-width:480px){.body{grid-template-columns:1fr}.right{display:none}.tools{left:50%;max-width:none;width:max-content}.top>input{width:85px}.top .primary{font-size:10px;padding:8px}.account{font-size:10px!important}.brand>span:first-child{font-size:24px}}

/* Compact design chrome, with a neutral stage and contextual selection. */
.app{background:var(--surface-muted);color:var(--foreground-strong)}.top{height:52px;border-color:var(--border);padding:0 16px;gap:12px}.body{height:calc(100% - 52px);grid-template-columns:248px minmax(240px,1fr) 264px}.brand>span:first-child{color:var(--primary)}.app .primary{background:var(--primary);color:var(--primary-foreground)}.viewport{background:var(--background);background-image:none;touch-action:none}.boardWrap{will-change:transform}.tabs{padding:10px;gap:4px}.tabs button{flex:1;padding:8px}.tabs button[aria-pressed=true]{background:var(--selection);color:var(--foreground-strong)}.canvasLabel{color:var(--muted-foreground)}.tools{bottom:16px;border-radius:13px;padding:7px;border-color:var(--border);box-shadow:0 3px 12px var(--shadow)}.tools button:first-child{background:transparent;color:inherit}.tools button[aria-pressed=true]{background:var(--selection);color:var(--foreground)}.element[data-selected=true]{outline-color:var(--ring)}.corner{border-color:var(--selection-border);cursor:nwse-resize;width:11px;height:11px}.measure{background:var(--primary);color:var(--primary-foreground)}.agentPanel{padding:30px 20px;display:flex;flex-direction:column;gap:18px}.agentPanel>svg{color:var(--primary)}.agentPanel h3{font-size:15px;font-weight:500;margin:0}.agentPanel p,.agentPanel small{font-size:11px;line-height:1.9;color:var(--muted-foreground)}.agentPanel a{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--primary)}.agentPanel small{border-top:1px solid var(--border);padding-top:20px}.layer[data-selected=true]{background:var(--selection)}.pageTitle{border-bottom:1px solid var(--border)}.top .badge{color:var(--muted-foreground)}@media(max-width:1100px){.body{grid-template-columns:190px minmax(200px,1fr) 220px}}@media(max-width:760px){.body{grid-template-columns:1fr 200px}}@media(max-width:480px){.body{grid-template-columns:1fr}}

.app[data-layers=false] .left,.app[data-properties=false] .right{display:none}.app[data-layers=false] .body{grid-template-columns:minmax(240px,1fr) 264px}.app[data-properties=false] .body{grid-template-columns:248px minmax(240px,1fr)}.app[data-layers=false][data-properties=false] .body{grid-template-columns:1fr}.app[data-layers=false] .tools{left:calc((100% - 264px)/2)}.app[data-properties=false] .tools{left:calc(248px + (100% - 248px)/2)}.app[data-layers=false][data-properties=false] .tools{left:50%}@media(max-width:1100px){.app[data-layers=false] .body{grid-template-columns:minmax(200px,1fr) 220px}.app[data-properties=false] .body{grid-template-columns:190px minmax(200px,1fr)}.app[data-layers=false] .tools{left:calc((100% - 220px)/2)}.app[data-properties=false] .tools{left:calc(190px + (100% - 190px)/2)}}@media(max-width:760px){.app[data-layers=false] .body{grid-template-columns:1fr 200px}.app[data-properties=false] .body{grid-template-columns:1fr}.app[data-properties=false] .tools{left:50%;max-width:calc(100vw - 20px)}}@media(max-width:480px){.app[data-layers=false] .body{grid-template-columns:1fr}.app[data-layers=false] .tools{left:50%}}
@media(max-width:480px){.tools{max-width:calc(100vw - 24px);flex-wrap:wrap;justify-content:center}.top{gap:3px}.top>input{width:60px;min-width:0;flex:1}.brand{gap:4px}.account{max-width:55px}.top>button{padding:5px}.top .primary{padding:6px;font-size:9px;gap:4px}}

.app,.viewport{background:var(--background);color:var(--foreground)}
.top,.left,.right,.tools,.modal{background:var(--surface);color:var(--foreground);border-color:var(--border)}
.app .primary,.tools button[aria-pressed=true]{background:var(--primary);color:var(--primary-foreground)}
.app .primary:hover{background:var(--primary-hover)}
.layer[data-selected=true],.tabs button[aria-pressed=true]{background:var(--selection);color:var(--foreground)}
.element[data-selected=true],.corner{outline-color:var(--selection-border);border-color:var(--selection-border)}
/* The artwork board is deliberately independent of dark UI chrome. */
.blankHint{color:var(--el-espresso)}