:root{color:#1b2028;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;background:#0b0d10;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0}button,input,select,textarea{font:inherit}button{color:#f8fafc;cursor:pointer;background:#1f2937;border:0;border-radius:10px;padding:10px 12px;font-weight:700}button:disabled{cursor:not-allowed;opacity:.45}.app{grid-template:"topbar topbar"64px"sidebar workspace"minmax(0,1fr)/360px minmax(0,1fr);height:100vh;min-height:100vh;display:grid;overflow:hidden}.app-topbar{color:#f8fafc;background:#0d1117;border-bottom:1px solid #94a3b829;grid-area:topbar;grid-template-columns:360px minmax(190px,1fr) auto;align-items:center;gap:18px;min-width:0;padding:0 14px 0 18px;display:grid}.brand{align-items:center;gap:12px;min-width:0;display:flex}.brand-mark{background:linear-gradient(#0d1117,#0d1117) padding-box padding-box,linear-gradient(135deg,#7dd3fc,#facc15) border-box;border:1px solid #0000;border-radius:12px;width:34px;height:34px;display:block;position:relative;box-shadow:0 0 0 4px #7dd3fc14}.brand-mark:after{content:"";background:#7dd3fc;border-radius:999px;width:8px;height:8px;position:absolute;inset:12px}.eyebrow{color:#7dd3fc;letter-spacing:.16em;text-transform:uppercase;margin:0 0 3px;font-size:10px;font-weight:800}h1,h2{margin:0}h1{color:#f8fafc;letter-spacing:-.03em;font-size:17px;line-height:1.1}.document-status{color:#cbd5e1;background:#0f172aad;border:1px solid #94a3b824;border-radius:999px;justify-self:start;align-items:center;gap:10px;min-width:0;padding:7px 12px;display:inline-flex}.document-status strong{color:#f8fafc;font-size:13px}.document-status span{color:#94a3b8;font-size:12px}.topbar-actions{justify-content:end;align-items:center;gap:8px;min-width:0;display:flex}.topbar-separator{background:#94a3b83d;width:1px;height:28px;margin:0 2px;display:block}.utility-button,.export{white-space:nowrap;justify-content:center;align-items:center;gap:7px;min-height:36px;display:inline-flex}.utility-button{color:#dbeafe;cursor:pointer;background:#ffffff0f;border:1px solid #94a3b824;border-radius:9px;margin:0;padding:9px 11px;font-size:12px;font-weight:750}.export{color:#0f172a;background:#f8fafc;padding:10px 14px;font-size:13px;box-shadow:0 12px 32px #7dd3fc2e}.button-icon{flex:none;width:15px;height:15px}.history-menu,.about-menu{position:relative}.history-menu summary,.about-menu summary{list-style:none}.history-menu summary::-webkit-details-marker{display:none}.about-menu summary::-webkit-details-marker{display:none}.history-popover{z-index:20;background:#fff;border:1px solid #0f172a1f;border-radius:14px;gap:12px;min-width:280px;max-height:min(520px,100vh - 88px);padding:13px;display:grid;position:absolute;top:calc(100% + 10px);right:0;overflow:auto;box-shadow:0 24px 70px #00000057,0 4px 16px #0f172a24}.history-popover-header{border-bottom:1px solid #0f172a14;justify-content:space-between;align-items:center;padding:0 0 10px;display:flex}.history-popover-header strong{color:#0f172a;font-size:13px}.history-popover-header span{color:#64748b;font-size:12px}.about-popover{color:#334155;z-index:20;background:radial-gradient(circle at 12% 0,#7dd3fc2e,#0000 32%),#fff;border:1px solid #0f172a1f;border-radius:16px;gap:13px;min-width:320px;padding:16px;display:grid;position:absolute;top:calc(100% + 10px);right:0;box-shadow:0 24px 70px #00000057,0 4px 16px #0f172a24}.about-popover h2{color:#0f172a;letter-spacing:-.04em;font-size:22px}.about-popover p{margin:0;font-size:13px;line-height:1.55}.about-details{gap:10px;margin:0;display:grid}.about-details div{background:#0f172a0d;border:1px solid #0f172a14;border-radius:10px;gap:3px;padding:10px;display:grid}.about-details dt{color:#64748b;margin:0;font-size:12px;font-weight:750}.about-details dd{color:#0f172a;margin:0;font-size:14px;font-weight:800}.about-details a{color:#0369a1;text-decoration:none}.about-details a:hover{text-decoration:underline}.about-note{color:#64748b;border-top:1px solid #0f172a14;padding-top:12px}.sidebar{background:#f6f7f9;border-right:1px solid #0f172a1f;grid-area:sidebar;min-height:0;padding:18px;overflow:auto}.inspector-header{border-bottom:1px solid #0f172a1a;margin:0 0 14px;padding:2px 2px 16px}.inspector-header h2{color:#111827;letter-spacing:-.04em;font-size:21px}.inspector-header p:not(.eyebrow){color:#64748b;margin:7px 0 0;font-size:13px;line-height:1.45}.panel{background:#fff;border:1px solid #0f172a1a;border-radius:14px;margin-bottom:10px;padding:13px;box-shadow:0 1px 2px #0f172a0a}.panel summary{cursor:pointer;justify-content:space-between;align-items:center;list-style:none;display:flex}.panel summary::-webkit-details-marker{display:none}.panel summary:after{content:"";border-bottom:1.5px solid #64748b;border-right:1.5px solid #64748b;width:7px;height:7px;transition:transform .16s;transform:rotate(45deg)}.panel:not([open]) summary:after{transform:rotate(-45deg)}.panel summary h2{color:#334155;letter-spacing:.12em;text-transform:uppercase;font-size:11px;font-weight:850}.panel[open] summary{margin-bottom:12px}label{color:#475569;gap:6px;margin-bottom:10px;font-size:12px;font-weight:750;display:grid}input,select,textarea{color:#0f172a;background:#f8fafc;border:1px solid #d9e0ea;border-radius:9px;outline:none;width:100%;min-height:34px;padding:8px 9px;transition:border-color .14s,box-shadow .14s,background .14s}input:focus,select:focus,textarea:focus{background:#fff;border-color:#38bdf8;box-shadow:0 0 0 3px #38bdf829}textarea{resize:vertical;line-height:1.35}input[type=color]{height:36px;padding:4px}input[type=range]{accent-color:#0284c7;padding:0}.ghost-button{color:#1e293b;background:#eef2f7;border:1px solid #0f172a14;min-height:34px;padding:8px 10px}.checkbox{align-items:center;gap:10px;display:flex}.checkbox input{accent-color:#0284c7;width:auto;min-height:auto}.grid-two{grid-template-columns:1fr 1fr;gap:10px;display:grid}.gradient-picker{gap:10px;display:grid}.gradient-preview{border:1px solid #0f172a24;border-radius:12px;min-height:48px;box-shadow:inset 0 0 0 1px #fff3}.gradient-angle-input{margin-top:-10px}.gradient-stop{grid-template-columns:58px 1fr auto;align-items:end;gap:8px;display:grid}.gradient-stop label{margin-bottom:0}.import-settings input{display:none}.history-actions{grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px;display:grid}.history-list{gap:7px;margin-top:10px;display:grid}.history-list p{color:#64748b;letter-spacing:.12em;text-transform:uppercase;margin:0;font-size:10px;font-weight:850}.history-item{color:#334155;text-align:left;text-overflow:ellipsis;white-space:nowrap;background:#f8fafc;border:1px solid #0f172a17;justify-content:start;min-height:32px;padding:7px 9px;font-size:12px;overflow:hidden}.redo-item{opacity:.7}.history-empty{color:#94a3b8;font-size:12px}.workspace{background:radial-gradient(circle at 24px 24px,#94a3b833 1px,#0000 1.5px) 0 0/24px 24px,radial-gradient(circle at 80% 16%,#38bdf81f,#0000 28%),linear-gradient(#121821 0%,#0b0d10 100%);grid-area:workspace;grid-template-rows:auto minmax(0,1fr);min-width:0;padding:20px;display:grid;overflow:auto}.canvas-toolbar{color:#e2e8f0;justify-content:space-between;align-items:center;gap:14px;width:100%;max-width:1180px;margin:0 auto 16px;display:flex}.canvas-meta{flex-wrap:wrap;align-items:center;gap:10px;min-width:0;display:flex}.canvas-meta strong{font-size:13px}.canvas-meta span{color:#94a3b8;font-size:12px}.zoom-controls{background:#0f172ac2;border:1px solid #94a3b829;border-radius:999px;align-items:center;gap:4px;padding:4px;display:flex}.zoom-controls button{color:#e2e8f0;background:0 0;border-radius:999px;min-width:34px;min-height:30px;padding:5px 9px}.zoom-controls button:hover:not(:disabled){background:#ffffff14}.zoom-controls button:nth-child(2){background:#ffffff14;min-width:62px}.artboard-wrap{place-items:center;min-width:max-content;min-height:100%;padding:18px;display:grid}.stage{touch-action:none;position:relative;overflow:hidden;box-shadow:0 0 0 1px #ffffff1f,0 34px 100px #00000094,0 12px 28px #00000052}.background-image{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.fit-cover{object-fit:cover}.fit-contain{object-fit:contain}.fit-stretch{object-fit:fill}.drop-hint{color:#f8fafce0;letter-spacing:-.03em;text-align:center;z-index:2;background:#0f172a38;border:1.5px dashed #e2e8f07a;border-radius:28px;justify-content:center;align-items:center;padding:18px;font-weight:850;line-height:1.05;display:flex;position:absolute;overflow:hidden}.screen-clip,.screenshot-layer,.frame-layer,.text-layer{-webkit-user-select:none;user-select:none;position:absolute}.screen-clip{z-index:2;overflow:hidden}.screenshot-layer{cursor:grab;z-index:2}.screenshot-layer.clipped{z-index:auto}.text-layer{cursor:grab;letter-spacing:-.055em;white-space:pre-wrap;z-index:4;font-weight:800}.text-layer:hover,.frame-layer:hover,.screenshot-layer:hover{filter:drop-shadow(0 0 #fff0)}.text-subtext{letter-spacing:-.025em;font-weight:700}.rich-line{display:block}.frame-layer{cursor:grab;pointer-events:auto;z-index:3}.mask-debug{pointer-events:none;z-index:5;border:2px solid #f87171f5;position:absolute;box-shadow:inset 0 0 0 9999px #f871711f}.snap-guide{pointer-events:none;z-index:6;background:#7dd3fce6;position:absolute;box-shadow:0 0 18px #7dd3fcb8}.snap-guide-x{width:2px;top:0;bottom:0;left:50%;translate:-50%}.snap-guide-y{height:2px;top:50%;left:0;right:0;translate:0 -50%}@media (width<=1100px){.app-topbar{grid-template-columns:minmax(220px,1fr) auto}.document-status{display:none}}@media (width<=920px){.app{grid-template:"topbar""workspace"minmax(56vh,auto)"sidebar"/1fr;height:auto;min-height:100vh;overflow:visible}.app-topbar{grid-template-columns:1fr;align-items:start;gap:12px;padding:14px}.topbar-actions{flex-wrap:wrap;justify-content:start;width:100%}.history-popover,.about-popover{left:0;right:auto}.sidebar{border-right:0;min-height:auto}.workspace{min-height:60vh;padding:14px}.canvas-toolbar{flex-direction:column;align-items:start}.artboard-wrap{justify-items:start;padding:12px 0}}@media (width<=540px){.grid-two,.gradient-stop{grid-template-columns:1fr}.utility-button,.export{padding-inline:10px;font-size:12px}.about-popover{min-width:min(320px,100vw - 28px)}.topbar-separator{width:100%;height:1px;margin:4px 0}}