@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;600;700;800&display=swap');
:root{color-scheme:dark;--bg:#090a0d;--panel:#111319;--panel2:#191c28;--text:#f5f5f7;--muted:#9296a8;--line:rgba(255,255,255,.1);--violet:#8e7dff;--cyan:#55e4d2;--coral:#ff8d76;--sans:'Manrope',sans-serif;--mono:'DM Mono',monospace}
*{box-sizing:border-box}body{background:var(--bg);color:var(--text);font-family:var(--sans);margin:0;min-height:100vh}.topbar{align-items:center;background:rgba(9,10,13,.96);border-bottom:1px solid var(--line);display:flex;height:70px;justify-content:space-between;padding:0 26px;position:relative;z-index:2}.brand{align-items:center;color:var(--text);display:flex;font-size:14px;font-weight:800;gap:10px;text-decoration:none;white-space:nowrap}.brand b,.note-mark{align-items:center;background:var(--violet);border-radius:7px;display:flex;height:30px;justify-content:center;letter-spacing:-.12em;width:30px}.brand b span,.note-mark sup{color:var(--cyan);font-size:9px;margin:-11px 0 0 -1px}.brand i{color:var(--muted);font-style:normal}.document-title{align-items:center;color:var(--muted);display:flex;font:10px var(--mono);gap:9px;margin-left:26px}.status-dot{background:var(--cyan);border-radius:50%;height:6px;width:6px}.top-actions{align-items:center;display:flex;gap:9px}.button,.icon-button{align-items:center;border:0;border-radius:5px;cursor:pointer;display:inline-flex;font:9px var(--mono);gap:10px;justify-content:center;padding:11px 13px;text-transform:uppercase;transition:.15s}.button.outline,.icon-button{background:transparent;border:1px solid var(--line);color:var(--text)}.button.outline:hover,.icon-button:hover{background:var(--panel2);border-color:rgba(255,255,255,.2)}.button.primary{background:var(--violet);color:#fff}.button.primary:hover{background:var(--cyan);color:var(--bg)}.button.primary span{font-size:13px}.icon-button{font-family:var(--sans);font-size:19px;height:34px;padding:0;width:34px}.icon-button:disabled{cursor:default;opacity:.35}.separator{background:var(--line);height:24px;margin:0 4px;width:1px}.editor{display:grid;grid-template-columns:64px minmax(350px,1fr) 270px;height:calc(100vh - 70px);min-height:470px}.toolbar{align-items:center;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;justify-content:space-between;padding:15px 0}.tool-group{display:grid;gap:7px}.tool{align-items:center;background:transparent;border:1px solid transparent;border-radius:6px;color:#9a9dad;cursor:pointer;display:flex;height:38px;justify-content:center;width:38px}.tool svg{fill:none;height:19px;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.6;width:19px}.tool:first-child svg{fill:none}.tool:hover{background:var(--panel2);color:var(--text)}.tool.active{background:rgba(142,125,255,.17);border-color:rgba(142,125,255,.3);color:#b7abff}.toolbar-bottom{color:#646879;font:8px var(--mono);writing-mode:vertical-rl}.workspace{background-color:#0d0f14;background-image:radial-gradient(rgba(255,255,255,.1) .7px,transparent .7px);background-position:-3px -3px;background-size:18px 18px;display:flex;flex-direction:column;min-width:0}.canvas-toolbar{align-items:center;background:rgba(13,15,20,.85);border-bottom:1px solid var(--line);display:flex;height:54px;justify-content:space-between;padding:0 22px}.canvas-toolbar>div:first-child{align-items:center;display:flex;gap:13px}.kicker{color:var(--muted);font:8px var(--mono);letter-spacing:.07em}.canvas-size{border-left:1px solid var(--line);color:#777c8d;font:9px var(--mono);padding-left:13px}.zoom-controls{align-items:center;color:var(--muted);display:flex;font:9px var(--mono);gap:10px}.zoom-controls button{background:transparent;border:0;color:#c8cad4;cursor:pointer;font:13px var(--mono);padding:4px}.zoom-controls button:hover{color:var(--cyan)}.zoom-controls #zoom-fit{font-size:9px}.zoom-controls .separator{height:16px;margin:0}.canvas-scroll{align-items:center;display:flex;flex:1;justify-content:center;min-height:0;overflow:auto;padding:35px}.canvas-wrap{flex:none;max-height:100%;max-width:100%;width:min(100%,900px);transition:width .15s}.canvas-wrap svg{background:#fff;box-shadow:0 18px 65px rgba(0,0,0,.5);display:block;height:auto;max-height:100%;width:100%}#artwork{overflow:visible}.canvas-scroll[data-tool="select"] #artwork>*{cursor:move}.page-background{pointer-events:none}.workspace-footer{align-items:center;border-top:1px solid var(--line);color:#737789;display:flex;font:8px var(--mono);justify-content:space-between;padding:13px 20px}.workspace-footer i{color:var(--cyan);font-style:normal}.inspector{background:var(--panel);border-left:1px solid var(--line);display:flex;flex-direction:column;min-width:0;overflow-y:auto}.inspector-tabs{border-bottom:1px solid var(--line);color:#777b8c;display:flex;font:9px var(--mono);gap:27px;padding:21px 20px 16px}.tab-active{color:var(--text);position:relative}.tab-active:after{background:var(--violet);bottom:-17px;content:"";height:2px;left:0;position:absolute;width:100%}.panel-section{border-bottom:1px solid var(--line);padding:20px}.section-heading{align-items:center;display:flex;justify-content:space-between;margin-bottom:18px}.section-heading h2{font-size:13px;letter-spacing:-.03em;margin:0}.section-heading>span{color:var(--muted);font:8px var(--mono)}.field-label{color:#a3a6b5;display:block;font:8px var(--mono);margin:17px 0 8px;text-transform:uppercase}.color-field,.range-field{align-items:center;background:#0b0d12;border:1px solid var(--line);border-radius:4px;display:flex;gap:10px;height:34px;padding:5px 8px}.color-field input{background:transparent;border:0;cursor:pointer;height:22px;padding:0;width:23px}.color-field input::-webkit-color-swatch-wrapper{padding:0}.color-field input::-webkit-color-swatch{border:1px solid var(--line);border-radius:3px}.color-field span,.range-field span{color:#989bad;font:9px var(--mono);text-transform:uppercase}.range-field input{accent-color:var(--violet);flex:1;height:3px}.tiny-button{background:transparent;border:1px solid var(--line);border-radius:4px;color:#c5c7d0;cursor:pointer;font-size:16px;height:25px;line-height:1;width:25px}.tiny-button:hover{background:var(--panel2);color:var(--cyan)}.layers-section{flex:1}.layers-list{display:grid;gap:5px}.empty-layers{color:#777b8c;font-size:10px;line-height:1.5;padding:12px 2px}.layer-item{align-items:center;background:transparent;border:1px solid transparent;border-radius:4px;color:#c5c7d0;cursor:pointer;display:flex;gap:9px;min-width:0;padding:9px 8px;text-align:left;width:100%}.layer-item:hover{background:var(--panel2)}.layer-item.selected{background:rgba(142,125,255,.12);border-color:rgba(142,125,255,.25);color:#ded9ff}.layer-item svg{flex:none;height:14px;stroke:currentColor;stroke-width:1.5;width:14px}.layer-item span{font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.delete-button{background:transparent;border:1px solid var(--line);border-radius:4px;color:#b8bac6;cursor:pointer;display:flex;font:9px var(--mono);justify-content:space-between;margin-top:16px;padding:10px;width:100%}.delete-button:hover:not(:disabled){border-color:rgba(255,141,118,.5);color:var(--coral)}.delete-button:disabled{cursor:default;opacity:.4}.delete-button span{font-size:11px}.inspector-note{align-items:flex-start;display:flex;gap:11px;margin:auto 20px 20px;padding-top:23px}.note-mark{border-radius:5px;flex:none;font-size:14px;height:26px;width:26px}.note-mark sup{font-size:7px}.inspector-note strong{font-size:9px}.inspector-note p{color:var(--muted);font-size:9px;line-height:1.55;margin:5px 0}.text-input,.number-input{background:#0b0d12;border:1px solid var(--line);border-radius:4px;color:var(--text);font:10px var(--sans);height:33px;padding:0 9px;width:100%}.number-input{font-family:var(--mono)}[hidden]{display:none!important}.toast{background:#20232d;border:1px solid var(--line);border-radius:6px;bottom:25px;color:var(--text);font:10px var(--mono);left:50%;opacity:0;padding:12px 16px;pointer-events:none;position:fixed;transform:translate(-50%,12px);transition:.2s;z-index:5}.toast.visible{opacity:1;transform:translate(-50%,0)}@media(max-width:950px){.editor{grid-template-columns:58px minmax(300px,1fr) 225px}.topbar{padding:0 15px}.top-actions{gap:6px}.button{padding:10px}.canvas-scroll{padding:22px}}@media(max-width:700px){.topbar{flex-wrap:wrap;height:auto;min-height:62px;padding:10px 12px}.document-title{display:none}.top-actions{gap:5px}.top-actions .icon-button,.top-actions .separator{display:none}.top-actions .button{font-size:8px;padding:9px 8px}.editor{grid-template-columns:48px minmax(0,1fr);height:calc(100dvh - 62px)}.toolbar{padding:12px 0}.tool{height:35px;width:35px}.inspector{border-left:0;bottom:0;box-shadow:0 -8px 30px rgba(0,0,0,.25);max-height:36vh;position:fixed;right:0;width:calc(100% - 48px);z-index:2}.inspector-tabs{padding:10px 15px 9px}.tab-active:after{bottom:-10px}.panel-section{padding:12px 15px}.section-heading{margin-bottom:10px}.field-label{display:inline-block;margin:10px 9px 5px 0}.color-field,.range-field{display:inline-flex;margin-right:8px;vertical-align:middle;width:calc(50% - 8px)}.layers-section,.inspector-note{display:none}.workspace-footer{font-size:7px;padding:10px}.canvas-scroll{align-items:flex-start;padding:25px 14px 42vh}.canvas-wrap{width:100%}}@media(max-width:430px){.brand{font-size:12px}.top-actions .button.outline{display:none}.top-actions .button.primary{font-size:8px;padding:9px}.canvas-toolbar{padding:0 12px}.canvas-toolbar>div:first-child{gap:8px}.canvas-size{padding-left:8px}.zoom-controls{gap:5px}}