@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Inter:wght@300;400;600;700&display=swap');
.image-tool-icon{font-size:17px}.image-replace{width:100%;margin-top:8px}.canvas-viewport.image-drop{outline:3px solid #0a0a0a;outline-offset:-3px}.image-shape{user-select:none}.rotation-stem{stroke:#0a0a0a;stroke-width:1;vector-effect:non-scaling-stroke}.rotation-handle{fill:#fff;stroke:#0a0a0a;stroke-width:1.5;vector-effect:non-scaling-stroke;cursor:grab}
.panel-heading-actions button{position:relative}.panel-heading-actions button::after{content:attr(data-tooltip);position:absolute;display:none;right:0;top:calc(100% + 8px);width:max-content;max-width:220px;padding:8px 10px;background:#0a0a0a;color:#fff;font:400 10px/1.4 Inter,Arial,sans-serif;text-align:left;z-index:220;pointer-events:none}.panel-heading-actions button:hover::after,.panel-heading-actions button:focus-visible::after{display:block}
.detail-link:hover::after{content:attr(data-tooltip)!important}
.geometry-modal{position:fixed;inset:0;z-index:220;background:rgba(10,10,10,.72);display:grid;place-items:center;padding:28px}.geometry-modal[hidden]{display:none}.geometry-page{width:min(620px,calc(100vw - 56px));max-height:calc(100vh - 56px);display:grid;grid-template-rows:104px minmax(0,1fr) 58px;background:#fafafa;border:1px solid #0a0a0a}.geometry-page>header{display:flex;align-items:center;justify-content:space-between;padding:0 28px;border-bottom:1px solid #0a0a0a}.geometry-page header span{font:400 9px "IBM Plex Mono",monospace;letter-spacing:.12em;color:#71717a}.geometry-page h2{font-size:25px;margin:4px 0}.geometry-page header p{margin:0;color:#71717a;font-size:10px}.geometry-page header button{width:36px;height:36px;border:1px solid #0a0a0a;background:transparent;font-size:24px}.geometry-page header button:hover{background:#0a0a0a;color:#fff}.geometry-content{padding:24px 28px;overflow:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.geometry-metric{min-height:72px;padding:13px 14px;border:1px solid #d4d4d8;background:#fff}.geometry-metric span{display:block;margin-bottom:8px;color:#71717a;font:400 9px "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.06em}.geometry-metric strong{font:600 18px Inter,Arial,sans-serif}.geometry-page>footer{display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-top:1px solid #0a0a0a;color:#71717a;font:400 9px "IBM Plex Mono",monospace}.geometry-page>footer button{height:32px}.detail-link:hover::after{width:290px;white-space:pre-line}.instruction-part{position:relative}.instruction-part:hover::after{content:attr(data-geometry);position:absolute;left:calc(100% + 8px);top:6px;z-index:30;width:240px;padding:9px 11px;background:#0a0a0a;color:#fafafa;font:400 10px/1.5 Inter,Arial,sans-serif;white-space:pre-line;pointer-events:none}.text-resize-handle{cursor:nwse-resize}
.geometry-hover{position:fixed;z-index:10000;width:260px;padding:10px 12px;background:#0a0a0a;color:#fafafa;font:400 10px/1.5 Inter,Arial,sans-serif;white-space:pre-line;pointer-events:none}.geometry-hover[hidden]{display:none}.instruction-part:hover::after,.detail-link:hover::after{display:none!important}

/* Interaction and inspector additions */
.canvas-context-menu button{justify-content:space-between!important;text-align:left!important}.canvas-context-menu button>span:first-child:not(.context-lock-icon){flex:1;text-align:left}.canvas-context-menu .context-icon,.canvas-context-menu .context-lock-icon{margin-left:auto;margin-right:2px}#lockedProperty{margin-bottom:12px!important}
.canvas-context-menu{width:190px!important;padding:5px!important}.canvas-context-menu button{height:34px!important;padding:0 10px!important;font-size:11px!important}.auto-dimensions{justify-content:flex-start!important;position:relative}.auto-dimensions input{position:absolute!important;opacity:0!important;width:1px!important;height:1px!important;pointer-events:none}.auto-dimensions .checkmark{flex:none;background:#fff}.auto-dimensions input:checked+.checkmark{background:#0a0a0a;border-color:#0a0a0a;color:#fff}.auto-dimensions input:focus-visible+.checkmark{outline:2px solid #0a0a0a;outline-offset:2px}.locked-badge{pointer-events:none}.locked-badge-bg{fill:#fafafa;stroke:#0a0a0a;stroke-width:1}.locked-badge-lock{fill:none;stroke:#0a0a0a;stroke-width:1.25;stroke-linecap:square;stroke-linejoin:miter}
.canvas-context-menu{width:210px}.canvas-context-menu button{justify-content:flex-start;gap:10px}.canvas-context-menu .context-icon,.context-lock-icon{width:16px;height:16px;display:grid;place-items:center;flex:none;font:500 15px/1 "IBM Plex Mono",monospace}.context-lock-icon{position:relative;border:1px solid currentColor;width:12px;height:9px;margin:5px 2px 2px}.context-lock-icon::before{content:"";position:absolute;width:7px;height:6px;left:1.5px;bottom:7px;border:1px solid currentColor;border-bottom:0}.context-lock-icon.unlocked::before{left:5px;transform:rotate(18deg);transform-origin:left bottom}.context-separator{height:1px;background:#d4d4d8;margin:4px 5px}.canvas-context-menu .context-danger{color:#dc2626}.canvas-context-menu .context-danger:hover{background:#dc2626;color:#fff}.shape-locked{cursor:not-allowed!important}
.properties-panel .notes-property textarea{min-height:58px!important;padding:7px!important}.material-card-actions{flex-wrap:wrap}.material-card-actions button{flex:1 1 auto}
#cancelMaterialEdit[hidden]+#addMaterial{grid-column:1/-1}
.notes-property textarea{width:100%;min-height:58px!important;border:1px solid #d4d4d8!important;border-radius:0!important;background:#fff!important;padding:7px!important;color:#0a0a0a!important;font:400 11px/1.45 Inter,Arial,sans-serif!important;outline:none;box-shadow:none}.notes-property textarea:hover{border-color:#a1a1aa!important}.notes-property textarea:focus{border:2px solid #0a0a0a!important;padding:6px!important}.notes-property button{height:58px!important}.material-form-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:4px}.material-form-actions .text-button,.material-form-actions .primary-button{width:100%;margin:0!important;padding:0 8px}.material-form-actions .primary-button:only-child{grid-column:1/-1}
.instruction-icon{width:16px;height:16px;border:1px solid currentColor;display:grid;place-items:center;font:500 12px/1 "IBM Plex Mono",monospace}.notes-property{margin-top:9px!important}.notes-property>div{display:grid;grid-template-columns:1fr 30px;gap:5px}.notes-property textarea{min-height:56px!important;height:auto!important;resize:vertical;padding:6px!important;line-height:1.4}.notes-property button{border:1px solid #d4d4d8;background:#fff;display:grid;place-items:center}.instructions-modal,.notes-modal{position:fixed;inset:0;z-index:115;background:rgba(10,10,10,.72);display:grid;place-items:center;padding:28px}.instructions-modal[hidden],.notes-modal[hidden]{display:none}.instructions-page{width:min(1080px,100%);height:min(760px,calc(100vh - 56px));display:grid;grid-template-rows:108px minmax(0,1fr) 58px;background:#fafafa;border:1px solid #0a0a0a}.instructions-page>header,.notes-page>header{display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid #0a0a0a}.instructions-page header span,.notes-page header span,.instruction-aside-title span{font:400 9px "IBM Plex Mono",monospace;letter-spacing:.12em;color:#71717a}.instructions-page h2,.notes-page h2{font-size:28px;margin:4px 0 2px}.instructions-page header p{margin:0;color:#71717a;font-size:10px}.instructions-page header>button,.notes-page header>button{width:36px;height:36px;border:1px solid #0a0a0a;background:transparent;font-size:24px}.instructions-page header>button:hover,.notes-page header>button:hover{background:#0a0a0a;color:#fff}.instructions-body{display:grid;grid-template-columns:230px minmax(0,1fr);min-height:0}.instructions-body>aside{border-right:1px solid #0a0a0a;overflow:auto}.instruction-aside-title{height:48px;padding:0 14px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #d4d4d8}.instruction-aside-title small{font:400 7px "IBM Plex Mono",monospace;color:#71717a}.instruction-part{padding:12px 14px;border-bottom:1px solid #e5e5e5;background:#fafafa;cursor:grab}.instruction-part:hover{background:#0a0a0a;color:#fff}.instruction-part strong{display:block;font-size:11px;margin-bottom:4px}.instruction-part span{display:block;font-size:9px;line-height:1.4;color:#71717a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.instruction-part:hover span{color:#d4d4d8}.instruction-workspace{min-width:0;display:grid;grid-template-rows:42px minmax(0,1fr)}.editor-toolbar{display:flex;align-items:center;padding:0 12px;border-bottom:1px solid #d4d4d8;gap:4px}.editor-toolbar button{width:28px;height:26px;border:1px solid #d4d4d8;background:#fff}.editor-toolbar button:hover{border-color:#0a0a0a}.editor-toolbar span{margin-left:auto;color:#71717a;font-size:9px}.instruction-editor{overflow:auto;padding:28px 34px;background:#fff;font:300 14px/1.75 Inter,Arial,sans-serif;outline:0;user-select:text;-webkit-user-select:text}.instruction-editor:empty::before{content:attr(data-placeholder);color:#a1a1aa;pointer-events:none}.detail-link{position:relative;display:inline-block;padding:1px 5px;margin:0 2px;border:1px solid #0a0a0a;background:#fafafa;color:#0a0a0a;font:500 11px/1.5 "IBM Plex Mono",monospace;cursor:help}.detail-link:hover::after{content:attr(data-note);position:absolute;left:0;bottom:calc(100% + 7px);z-index:10;width:240px;padding:9px 11px;background:#0a0a0a;color:#fafafa;font:400 10px/1.5 Inter,Arial,sans-serif;white-space:normal;pointer-events:none}.instructions-page>footer,.notes-page>footer{display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-top:1px solid #0a0a0a;font:400 9px "IBM Plex Mono",monospace;color:#71717a}.instructions-page>footer .primary-button,.notes-page>footer .primary-button{height:32px}.notes-page{width:min(700px,calc(100vw - 56px));height:min(520px,calc(100vh - 56px));display:grid;grid-template-rows:92px minmax(0,1fr) 58px;background:#fafafa;border:1px solid #0a0a0a}.notes-page textarea{margin:24px;border:1px solid #d4d4d8;padding:18px;resize:none;font:300 14px/1.7 Inter,Arial,sans-serif;outline:0}.notes-page textarea:focus{border:2px solid #0a0a0a}.notes-page h2{font-size:22px}@media(max-width:760px){.instructions-body{grid-template-columns:160px 1fr}.editor-toolbar span{display:none}}
.toolbar-divider{width:1px;height:28px;background:#d4d4d8;margin:0 2px}.materials-button{height:34px;padding:0 10px;border:1px solid #0a0a0a;background:transparent;display:flex;align-items:center;gap:7px;font-size:10px}.materials-button:hover{background:#0a0a0a;color:#fafafa}.material-swatch-icon{width:16px;height:16px;border:1px solid currentColor;display:block;background:repeating-linear-gradient(135deg,transparent 0 3px,currentColor 3px 4px)}.material-property{margin-top:9px!important}.material-property>div{display:grid;grid-template-columns:1fr 30px;gap:5px}.material-property button{height:30px;border:1px solid #d4d4d8;background:#fff;display:grid;place-items:center}.material-property button:hover{border-color:#0a0a0a}.material-property .material-swatch-icon{width:14px;height:14px}.materials-modal{position:fixed;inset:0;z-index:110;background:rgba(10,10,10,.72);display:grid;place-items:center;padding:28px;user-select:none}.materials-modal[hidden]{display:none}.materials-page{width:min(980px,100%);height:min(700px,calc(100vh - 56px));display:grid;grid-template-rows:108px minmax(0,1fr);background:#fafafa;border:1px solid #0a0a0a}.materials-page>header{display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid #0a0a0a}.materials-page>header span,.material-create>span{font:400 9px "IBM Plex Mono",monospace;letter-spacing:.12em;color:#71717a}.materials-page h2{font-size:28px;margin:4px 0 2px}.materials-page header p{margin:0;color:#71717a;font-size:10px}.materials-page header button{width:36px;height:36px;border:1px solid #0a0a0a;background:transparent;font-size:24px}.materials-page header button:hover{background:#0a0a0a;color:#fff}.materials-body{display:grid;grid-template-columns:minmax(0,1fr) 280px;min-height:0}.materials-body>section{padding:24px;overflow:auto}.materials-section-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.materials-section-title h3,.material-create h3{font-size:14px;margin:0}.materials-section-title span{font:400 9px "IBM Plex Mono",monospace;color:#71717a}.materials-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.material-card{border:1px solid #d4d4d8;background:#fff}.material-card:hover,.material-card.active{border-color:#0a0a0a}.material-preview{height:76px;border-bottom:1px solid #d4d4d8}.material-card-body{padding:11px}.material-card-title{display:flex;align-items:center;justify-content:space-between;gap:8px}.material-card h4{font-size:12px;margin:0}.material-card p{height:30px;margin:6px 0 10px;color:#71717a;font-size:9px;line-height:1.5}.material-card-actions{display:flex;gap:5px}.material-card-actions button{height:26px;padding:0 8px;border:1px solid #0a0a0a;background:transparent;font-size:9px}.material-card-actions button:hover{background:#0a0a0a;color:#fff}.material-card-actions .delete-material{border-color:#dc2626;color:#dc2626}.material-create{border-left:1px solid #0a0a0a;padding:24px;overflow:auto}.material-create h3{margin:5px 0 18px}.material-create label{display:flex;flex-direction:column;gap:5px;margin-bottom:12px;font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:#71717a}.material-create input,.material-create textarea,.material-create select{width:100%;border:1px solid #d4d4d8;background:#fff;padding:7px;font-size:11px;color:#0a0a0a;resize:vertical}.material-create input,.material-create select{height:34px}.material-create input[type=color]{padding:3px}.material-create .primary-button{width:100%;margin-top:4px}@media(max-width:760px){.materials-body{grid-template-columns:1fr}.material-create{display:none}.materials-grid{grid-template-columns:1fr}}
.context-menu{position:fixed;z-index:200;width:190px;padding:5px;background:#fafafa;border:1px solid #0a0a0a}.context-menu[hidden]{display:none}.context-menu button{width:100%;height:34px;padding:0 10px;border:0;background:transparent;display:flex;align-items:center;justify-content:space-between;text-align:left;font-size:11px}.context-menu button:hover,.context-menu button:focus{background:#0a0a0a;color:#fff}.context-menu kbd{font:400 9px "IBM Plex Mono",monospace;color:#71717a}.context-menu button:hover kbd{color:#fafafa}
html,body,.workspace,.app-header,.canvas-area,.layers-panel,.help-modal{user-select:none;-webkit-user-select:none}input,textarea,[contenteditable="true"]{user-select:text;-webkit-user-select:text}.dimension-line{stroke-width:.65!important}.dimension-stage{stroke-width:.65!important}.dimension-icon{stroke-width:1!important}
.panel-heading{height:54px!important;padding:0 16px!important}.panel-heading h1{font-size:20px!important;margin-top:1px!important}.panel-heading>div>span{font-size:8px}.properties-panel{min-height:150px!important;padding:10px 14px!important}.properties-title{margin-bottom:9px!important}.properties-title strong{font-size:14px!important}.properties-title span{font-size:8px!important}.layers-list{max-height:48%!important}.dimension-icon{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linejoin:miter}.dimension-object{color:#0a0a0a;pointer-events:none}.dimension-line{fill:none;stroke:currentColor;stroke-width:1;vector-effect:non-scaling-stroke}.dimension-text{fill:currentColor;font-family:"IBM Plex Mono",monospace;text-anchor:middle;dominant-baseline:middle}.dimension-text-bg{fill:#fafafa}.auto-dimensions{margin-top:10px!important;display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between;gap:8px!important;color:#0a0a0a!important;font-size:9px!important}.auto-dimensions input{width:18px!important;height:18px!important;accent-color:#0a0a0a}.dimension-stage{stroke:#1683ff;stroke-width:1;stroke-dasharray:4 3;vector-effect:non-scaling-stroke}
.pen-icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:miter}.status-hint,.pen-actions{display:flex;align-items:center;justify-content:center;gap:8px;color:#71717a}.pen-actions[hidden]{display:none}.finish-pen{height:26px;padding:0 10px;border:1px solid #0a0a0a;background:#0a0a0a;color:#fff;font:500 9px "IBM Plex Mono",monospace;text-transform:uppercase}.finish-pen:hover{background:#333}.finish-pen.secondary{background:#fff;color:#0a0a0a}.finish-pen.secondary:hover{background:#e4e4e7}.pen-anchor{fill:#fff;stroke:#0a0a0a;stroke-width:1;vector-effect:non-scaling-stroke;cursor:move}.pen-control{fill:#1683ff;stroke:#fff;stroke-width:1;vector-effect:non-scaling-stroke;cursor:crosshair}.pen-control-line{stroke:#1683ff;stroke-width:1;vector-effect:non-scaling-stroke;pointer-events:none}.pen-preview-point{fill:#1683ff;stroke:#fff;stroke-width:1;vector-effect:non-scaling-stroke;pointer-events:none}.pen-close-target{cursor:pointer}.pen-close-target rect{fill:#0a0a0a;stroke:#fff;stroke-width:1;vector-effect:non-scaling-stroke}.pen-close-target text{fill:#fff;font:500 9px "IBM Plex Mono",monospace;pointer-events:none}
.guide-hit{pointer-events:stroke}
.workspace>.canvas-area{overflow:visible}.canvas-meta{position:relative;z-index:16}
.canvas-meta .canvas-size{gap:0}
.canvas-size{gap:0}.canvas-size .dimension-separator{margin:0 7px;color:var(--muted);text-align:center}.canvas-size .dimension-unit{margin:0 0 0 4px;color:var(--muted)}.canvas-size .rotate-canvas{position:relative;margin-left:13px}.rotate-canvas::after{content:attr(data-tooltip);position:absolute;display:none;right:0;top:calc(100% + 10px);width:220px;padding:8px 12px;background:#0a0a0a;color:#fafafa;font:400 11px/1.45 Inter,Arial,sans-serif;text-align:left;text-transform:none;z-index:30;pointer-events:none}.rotate-canvas:hover::after,.rotate-canvas:focus-visible::after{display:block}
.rotate-canvas{display:grid;place-items:center;padding:0}
*{scrollbar-width:thin;scrollbar-color:#c7c7cc #f4f4f5}*::-webkit-scrollbar{width:7px;height:7px}*::-webkit-scrollbar-track{background:#f4f4f5}*::-webkit-scrollbar-thumb{background:#c7c7cc;border:2px solid #f4f4f5}*::-webkit-scrollbar-thumb:hover{background:#a1a1aa}.orientation-icon{width:22px;height:18px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:square;stroke-linejoin:miter;display:block}
body>.app-header{height:56px}.app-header+.workspace{height:calc(100% - 56px)}
#seamProperty[hidden]{display:none!important}.app-header{height:56px}.workspace{height:calc(100% - 56px)}.app-header .tool{min-width:54px;padding:2px 5px;gap:1px}.app-header .tool svg,.app-header .tool .icon{width:19px;height:19px}.app-header .tool span:last-child{font-size:9px}.app-header .tool::after{top:56px}.cursor-tool-icon{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:miter}
.marker-tool-icon,.zipper-tool-icon{font-family:"IBM Plex Mono",monospace;font-weight:500}.marker-symbol,.zipper-symbol,.seam-symbol{fill:none;stroke-linecap:square;stroke-linejoin:miter;vector-effect:non-scaling-stroke}
#propertyFields>[hidden],#canvasContextMenu>[hidden],#layerContextMenu>[hidden],#layerContextMenu>button[hidden]+.context-separator{display:none!important}
.panel-heading .create-group-icon{position:relative;width:17px;height:15px;border:0;display:block;color:inherit!important}.panel-heading .create-group-icon::before,.panel-heading .create-group-icon::after{content:"";position:absolute;width:10px;height:9px;border:1px solid currentColor;background:var(--paper)}.panel-heading .create-group-icon::before{left:1px;top:1px}.panel-heading .create-group-icon::after{right:1px;bottom:1px}.panel-heading button:hover .create-group-icon::before,.panel-heading button:hover .create-group-icon::after{background:var(--ink)}
.create-group-icon{width:17px;height:14px;border:1px solid currentColor;display:grid;place-items:center;font:600 8px/1 "IBM Plex Mono",monospace;color:inherit!important;letter-spacing:0!important}.layer-item.group.locked .layer-name::after{content:" · LOCK";font:500 7px "IBM Plex Mono",monospace;color:#71717a}.layer-item.group.selected.locked .layer-name::after{color:#d4d4d8}
.layers-list .layer-item{padding-left:calc(8px + var(--depth)*14px);grid-template-columns:14px 24px minmax(0,1fr) 18px}.panel-heading-actions{display:flex;gap:6px}.panel-heading-actions .folder-plus{font:500 16px/1 "IBM Plex Mono",monospace;color:inherit;letter-spacing:0}.layer-item{--depth:0}.layer-item.group{font-weight:600;background:#f4f4f5}.layer-item.group .layer-icon{font-size:9px}.layer-item .disclosure{width:14px;border:0;background:transparent;color:inherit;padding:0;font-size:11px}.layer-item:not(.group) .disclosure{visibility:hidden}.layer-item.drop-target{outline:2px solid #1683ff;outline-offset:-2px}.layers-list.drag-root{box-shadow:inset 0 -3px #1683ff}.layers-panel{position:relative}.group-exit-zone{position:absolute;z-index:5;top:58px;left:8px;right:8px;margin:0;padding:8px 10px;border:1px dashed #1683ff;background:#eef6ff;color:#1683ff;cursor:copy}.group-exit-zone[hidden]{display:none}.group-exit-zone strong,.group-exit-zone span{display:block}.group-exit-zone strong{font:600 9px "IBM Plex Mono",monospace;letter-spacing:.08em}.group-exit-zone span{margin-top:2px;font-size:9px}
.help-content .help-wide{border-left:0!important}
.app-header{height:64px}.workspace{height:calc(100% - 64px)}.tool{min-width:66px;padding:5px 8px 4px;gap:3px}.tool::after{top:58px}.brand{padding-top:0;padding-bottom:0}.style-controls{padding-top:0;padding-bottom:0}.canvas-viewport{padding:0!important}.canvas-viewport svg{margin:48px}.ruler{position:absolute;z-index:12;background:#fafafa;touch-action:none}.ruler-horizontal{left:0;top:0;height:24px}.ruler-vertical{left:0;top:0;width:24px}.ruler-corner{position:absolute;left:0;top:0;width:24px;height:24px;background:#0a0a0a;z-index:14}.guide-visible{stroke:#1683ff;stroke-width:1;vector-effect:non-scaling-stroke;pointer-events:none}.guide-hit{stroke:transparent;stroke-width:10;vector-effect:non-scaling-stroke;cursor:move}.help-wide{grid-column:1/-1;border-top:1px solid #d4d4d8}.help-content .help-wide dl{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px}.help-content .help-wide dl>div{grid-template-columns:88px 1fr}.help-content .help-wide+section{border-left:0}@media(max-width:700px){.help-content .help-wide dl{grid-template-columns:1fr}}
.rotate-canvas{width:28px;height:28px;border:1px solid #0a0a0a;background:transparent;font-size:17px;line-height:1}.rotate-canvas:hover{background:#0a0a0a;color:#fff}.status-left{display:flex;align-items:center;gap:10px}.help-button{width:24px;height:24px;border:1px solid #0a0a0a;background:transparent;font:500 12px "IBM Plex Mono",monospace}.help-button:hover{background:#0a0a0a;color:#fff}.shape-hit{fill:transparent;stroke:transparent;pointer-events:all;cursor:pointer}.help-modal{position:fixed;inset:0;z-index:100;background:rgba(10,10,10,.72);display:grid;place-items:center;padding:32px}.help-modal[hidden]{display:none}.help-page{width:min(820px,100%);max-height:calc(100vh - 64px);overflow:auto;background:#fafafa;border:1px solid #0a0a0a}.help-page>header{height:104px;padding:0 32px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #0a0a0a}.help-page header span{font:400 9px "IBM Plex Mono",monospace;letter-spacing:.12em;color:#71717a}.help-page h2{margin:6px 0 0;font-size:28px}.help-page header button{width:36px;height:36px;border:1px solid #0a0a0a;background:transparent;font-size:24px}.help-page header button:hover{background:#0a0a0a;color:#fff}.help-content{display:grid;grid-template-columns:1fr 1fr}.help-content section{padding:30px 32px}.help-content section+section{border-left:1px solid #d4d4d8}.help-content h3{font-size:13px;text-transform:uppercase;letter-spacing:.08em;margin:0 0 20px}.help-content dl{margin:0}.help-content dl>div{min-height:58px;display:grid;grid-template-columns:72px 1fr;align-items:start;padding:10px 0;border-top:1px solid #d4d4d8}.help-content dt{font:500 11px "IBM Plex Mono",monospace}.help-content dd{margin:0;display:flex;flex-direction:column;gap:4px}.help-content dd strong{font-size:12px}.help-content dd span{font-size:10px;line-height:1.4;color:#71717a}.help-page>footer{padding:18px 32px;border-top:1px solid #0a0a0a;font:400 10px/1.5 "IBM Plex Mono",monospace;color:#71717a}@media(max-width:700px){.help-content{grid-template-columns:1fr}.help-content section+section{border-left:0;border-top:1px solid #d4d4d8}}
.hand-icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:square;stroke-linejoin:miter}.canvas-options{display:flex;align-items:center;justify-content:center;gap:16px}.canvas-options .snap-control{display:flex;align-items:center;gap:7px;color:#71717a;font:400 9px "IBM Plex Mono",monospace;text-transform:uppercase;white-space:nowrap}.canvas-options .checkmark{background:#fff}
.tool{position:relative}.tool::after{content:attr(data-tooltip);position:absolute;display:none;left:8px;top:72px;width:240px;padding:8px 12px;background:#0a0a0a;color:#fafafa;font:400 11px/1.45 Inter,Arial,sans-serif;text-align:left;text-transform:none;z-index:20}.tool:hover::after,.tool:focus-visible::after{display:block}.canvas-size{display:flex;align-items:center;gap:6px;color:#71717a}.canvas-size label{display:flex;align-items:center;gap:7px}.canvas-size select,.canvas-size input{height:28px;border:1px solid #d4d4d8;background:#fff;font:400 10px "IBM Plex Mono",monospace}.canvas-size select{padding:0 22px 0 7px}.canvas-size input{width:55px;padding:0 5px;text-align:center}.measure-bg{fill:rgba(0,0,0,.8);pointer-events:none}.measure-label{fill:#fff!important;stroke:none!important;paint-order:normal!important;dominant-baseline:middle;pointer-events:none}
.tool::after{content:none!important}.tool-tooltip{position:fixed;z-index:200;width:240px;padding:8px 12px;background:#0a0a0a;color:#fafafa;font:400 11px/1.45 Inter,Arial,sans-serif;text-align:left;text-transform:none;pointer-events:none;box-shadow:0 2px 8px rgba(0,0,0,.18)}.tool-tooltip[hidden]{display:none}
.canvas-area{min-height:0!important;overflow:hidden}.canvas-viewport{min-height:0}.statusbar{position:relative;z-index:4}.project-name{border:0;background:transparent;padding:5px 0;font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:700;letter-spacing:.08em}.project-name:hover{border-bottom:1px solid #0a0a0a}.layers-list{max-height:36%;flex:none}.panel-note{margin-top:0!important;padding:14px 20px!important}.text-icon{font-family:Georgia,serif;font-weight:700}.selection-box,.marquee{fill:rgba(10,10,10,.03);stroke:#0a0a0a;stroke-width:1;stroke-dasharray:3 2;vector-effect:non-scaling-stroke;pointer-events:none}.handle{fill:#fff;stroke:#0a0a0a;stroke-width:1;vector-effect:non-scaling-stroke;cursor:nwse-resize}.measure-label{font-family:"IBM Plex Mono",monospace;font-size:11px;fill:#fff;paint-order:stroke;stroke:#0a0a0a;stroke-width:5px;stroke-linejoin:miter;pointer-events:none}.properties-panel{border-top:1px solid #0a0a0a;padding:15px 18px;overflow:auto;min-height:190px;margin-top:auto}.properties-title{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:13px}.properties-title span{font-family:"IBM Plex Mono",monospace;font-size:9px;color:#71717a;letter-spacing:.12em}.properties-title strong{font-size:16px}.no-selection{font-size:11px;color:#71717a;padding:10px 0}.properties-panel label{display:flex;flex-direction:column;gap:5px;font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:#71717a;min-width:0}.properties-panel input,.properties-panel select{width:100%;height:30px;border:1px solid #d4d4d8;background:#fff;padding:0 7px;color:#0a0a0a;font-size:11px;text-transform:none}.property-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:9px}.rename-input{width:100%;min-width:0;height:28px}

:root{--ink:#0a0a0a;--paper:#fafafa;--white:#fff;--line:#d4d4d8;--muted:#71717a;--soft:#f4f4f5;--panel:280px;--header:80px}*{box-sizing:border-box}html,body{height:100%;margin:0;overflow:hidden}body{font-family:Inter,Arial,sans-serif;color:var(--ink);background:var(--paper);font-size:13px}button,input,select{font:inherit;border-radius:0}button{cursor:pointer}.app-header{height:var(--header);display:flex;align-items:stretch;background:var(--paper);border-bottom:1px solid var(--ink);position:relative;z-index:5}.brand{width:150px;display:flex;align-items:center;padding:0 24px;border-right:1px solid var(--ink);font-size:20px;font-weight:700;letter-spacing:-.04em;text-decoration:none;color:var(--ink)}.brand span{font-weight:300;color:var(--muted)}.tool-group{display:flex;border-right:1px solid var(--line)}.tool{min-width:72px;padding:11px 10px 8px;border:0;border-right:1px solid #e7e7e7;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-size:10px;color:var(--muted)}.tool:hover,.tool.active{background:var(--ink);color:var(--paper)}.icon{font-size:22px;height:22px;line-height:20px}.shape-icon{width:20px;height:20px;display:block;border:1.5px solid currentColor}.circle-icon{border-radius:50%}.line-icon{border:0;position:relative}.line-icon:after{content:"";position:absolute;width:25px;height:1.5px;background:currentColor;transform:rotate(-38deg);top:9px;left:-2px}.arc-icon{border:0;border-top:1.5px solid currentColor;border-radius:50% 50% 0 0;height:12px;margin-top:8px}.style-controls{display:flex;align-items:center;gap:20px;padding:0 20px;margin-left:0}.style-controls label{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);display:flex;align-items:center;gap:8px}.style-controls select{height:32px;border:1px solid var(--line);background:var(--white);padding:0 28px 0 10px;color:var(--ink);text-transform:none}.color-field input{width:28px;height:28px;border:1px solid var(--line);padding:3px;background:white}.snap-control input{position:absolute;opacity:0}.checkmark{width:18px;height:18px;border:1px solid var(--line);display:grid;place-items:center;color:transparent}.snap-control input:checked+.checkmark{background:var(--ink);border-color:var(--ink);color:white}.file-actions{margin-left:auto;display:flex;align-items:center;padding:0 18px;gap:8px;border-left:1px solid var(--line)}.text-button,.primary-button{height:36px;padding:0 16px;border:1px solid var(--ink);background:transparent}.text-button:hover,.primary-button{background:var(--ink);color:white}.primary-button:hover{background:#333}.workspace{height:calc(100% - var(--header));display:grid;grid-template-columns:minmax(0,1fr) var(--panel)}.canvas-area{min-width:0;display:grid;grid-template-rows:50px minmax(0,1fr) 38px}.canvas-meta{display:flex;justify-content:space-between;align-items:center;padding:0 20px;border-bottom:1px solid var(--line);background:var(--paper);font-family:"IBM Plex Mono",monospace;font-size:11px}.canvas-meta strong{font-size:11px;letter-spacing:.08em}.canvas-meta span{color:var(--muted);margin-left:16px}.dimensions{color:var(--muted)}.canvas-viewport{overflow:auto;background:#ededed;position:relative;padding:48px}.canvas-viewport.grabbing{cursor:grabbing}.canvas-viewport svg{display:block;background:white;border:1px solid #aaa;transform-origin:top left;touch-action:none}.canvas-paper{pointer-events:all}.statusbar{display:grid;grid-template-columns:220px 1fr auto;align-items:center;border-top:1px solid var(--ink);background:var(--paper);padding:0 16px;font-family:"IBM Plex Mono",monospace;font-size:10px}.statusbar>span:nth-child(2){text-align:center;color:var(--muted)}.zoom-control{display:flex;height:100%;align-items:center;gap:8px}.zoom-control button{width:24px;height:24px;border:0;background:transparent;font-size:18px}.zoom-control input{width:90px;accent-color:var(--ink)}.zoom-control output{width:38px}.layers-panel{border-left:1px solid var(--ink);background:var(--paper);display:flex;flex-direction:column;min-height:0}.panel-heading{height:82px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-bottom:1px solid var(--ink)}.panel-heading span,.panel-note span{font-family:"IBM Plex Mono",monospace;font-size:9px;color:var(--muted);letter-spacing:.12em}.panel-heading h1{font-size:26px;margin:3px 0 0;line-height:1}.panel-heading button{width:28px;height:28px;border:1px solid var(--ink);background:transparent;font-size:18px}.panel-heading button:hover{background:var(--ink);color:white}.layer-guide{font-family:"IBM Plex Mono",monospace;font-size:8px;padding:10px 16px;color:var(--muted);border-bottom:1px solid var(--line);letter-spacing:.08em}.layers-list{list-style:none;margin:0;padding:0;overflow:auto}.layer-item{height:50px;padding:0 12px 0 8px;display:grid;grid-template-columns:24px 28px 1fr 18px;align-items:center;border-bottom:1px solid #e8e8e8;gap:6px;cursor:grab;background:var(--paper)}.layer-item:hover{background:var(--soft)}.layer-item.selected{background:var(--ink);color:white}.drag-handle{color:var(--muted);font-size:14px}.layer-icon{width:24px;height:24px;border:1px solid currentColor;display:grid;place-items:center;font-family:"IBM Plex Mono";font-size:9px}.layer-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.visibility{border:0;background:transparent;color:inherit;padding:0;font-size:14px}.layer-item.hidden .layer-name{opacity:.42;text-decoration:line-through}.layer-item.dragging{opacity:.35}.empty-layers{margin:auto 30px;text-align:center;color:var(--muted)}.empty-layers span{font-size:28px;font-weight:300}.empty-layers p{color:var(--ink);font-weight:600;margin:12px 0 5px}.empty-layers small{font-weight:300;line-height:1.5}.panel-note{margin-top:auto;padding:18px 20px;border-top:1px solid var(--line)}.panel-note p{font-size:11px;color:var(--muted);line-height:1.5;margin:8px 0}.shape{cursor:pointer}.shape.selected{filter:none}.selection-box{fill:none;stroke:#0a0a0a;stroke-width:1;stroke-dasharray:3 2;vector-effect:non-scaling-stroke;pointer-events:none}.toast{position:fixed;bottom:52px;left:50%;transform:translateX(-50%);background:var(--ink);color:white;padding:10px 16px;font-size:11px;opacity:0;pointer-events:none;z-index:20}.toast.show{opacity:1}@media(max-width:1100px){.tool span:last-child{display:none}.tool{min-width:44px}.style-controls{gap:8px}.style-controls label>span:last-child{display:none}.brand{width:105px;padding:0 14px}.style-controls{padding:0 8px}.file-actions{padding:0 8px}.text-button{display:none}}

#coordinates { white-space: nowrap; }