:root{--bg:#16181d;--bg-2:#1d2027;--bg-3:#262a33;--line:#2f3440;--fg:#e4e7ee;--fg-2:#a8afbd;--fg-3:#6c7382;--accent:#4c8dff;--ghost:#c29bff;--danger:#ff6b6b;--mono:ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--fg);font:13px/1.4 system-ui,-apple-system,Segoe UI,sans-serif}button,input,select,textarea{font:inherit;color:inherit}ul{margin:0;padding:0;list-style:none}code,.mono{font-family:var(--mono);font-size:12px}.editor{grid-template:"top top top"44px"left center right"1fr/260px 1fr 320px;height:100%;display:grid}.topbar{border-bottom:1px solid var(--line);background:var(--bg-2);grid-area:top;align-items:center;gap:8px;padding:0 12px;display:flex}.topbar__site{margin-right:8px}.topbar__page{min-width:260px}.topbar__spacer{flex:1}.left,.right{background:var(--bg-2);overflow:auto}.left{border-right:1px solid var(--line);grid-area:left}.right{border-left:1px solid var(--line);flex-direction:column;grid-area:right;display:flex}.center{background:#0f1115;grid-area:center;overflow:hidden}.canvas{justify-content:center;height:100%;display:flex;position:relative;overflow:auto}.canvas iframe{background:#fff;border:0;max-width:100%;height:100%;transition:width .2s}.canvas__error{color:#ffd0d0;z-index:1;background:#3a1f24;border-radius:6px;padding:10px 12px;position:absolute;inset:12px 12px auto}.panel__heading{letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3);margin:0;padding:10px 12px 6px;font-size:11px;font-weight:600}.muted{color:var(--fg-3)}.panel.muted,.structure .muted{margin:0;padding:8px 12px}.hint{color:var(--fg-3);margin:4px 0 0;font-size:11px}.error{color:var(--danger)}.row{cursor:default;white-space:nowrap;align-items:center;gap:2px;height:24px;padding-right:8px;display:flex;overflow:hidden}.row:hover{background:var(--bg-3)}.row--selected,.row--selected:hover{background:#4c8dff38}.row__twisty{width:16px;color:var(--fg-3);cursor:pointer;background:0 0;border:0;flex:none;padding:0}.row__name{text-overflow:ellipsis;font-family:var(--mono);font-size:12px;overflow:hidden}.row--ghost .row__name{color:var(--ghost);font-style:italic}.row--component .row__name{color:#7ee0b5}.row--text .row__name{color:var(--fg-2);font-family:inherit}.row--part{color:var(--fg-3);height:20px;font-size:11px}.inspector__title{border-bottom:1px solid var(--line);font-family:var(--mono);text-overflow:ellipsis;white-space:nowrap;padding:10px 12px;font-size:12px;overflow:hidden}.panel{border-bottom:1px solid var(--line);padding:0 12px 12px}.panel .panel__heading{padding-left:0;padding-right:0}.panel--grow{border-bottom:0;flex:1}.prop{grid-template-columns:72px 1fr;align-items:center;gap:8px;margin-bottom:6px;display:grid}.prop>span{color:var(--fg-2);text-overflow:ellipsis;font-size:12px;overflow:hidden}.prop--attr{grid-template-columns:90px 1fr 20px}.field{border:1px solid var(--line);background:var(--bg);resize:vertical;border-radius:5px;outline:none;width:100%;padding:5px 7px}.field:focus{border-color:var(--accent)}.field--mono{font-family:var(--mono);font-size:12px}textarea.field{margin-bottom:6px}.pills{flex-wrap:wrap;gap:4px;display:flex}.pill{background:var(--bg-3);font-family:var(--mono);cursor:pointer;border-radius:999px;align-items:center;gap:4px;padding:2px 4px 2px 8px;font-size:12px;display:inline-flex}.pill--active{background:var(--accent);color:#fff}.pill button,.icon{color:inherit;opacity:.6;cursor:pointer;background:0 0;border:0;padding:0 4px}.pill button:hover,.icon:hover{opacity:1}.pill-input{border:1px dashed var(--line);min-width:80px;font-family:var(--mono);background:0 0;border-radius:999px;outline:none;flex:1;padding:3px 8px;font-size:12px}.css-editor .cm-editor{max-height:50vh}.btn{border:1px solid var(--line);background:var(--bg-3);cursor:pointer;border-radius:6px;padding:5px 12px}.btn:hover:not(:disabled){border-color:var(--fg-3)}.btn:disabled{opacity:.4;cursor:default}.btn--ghost{background:0 0}.picker{flex-direction:column;gap:8px;max-width:360px;margin:15vh auto;display:flex}.picker h1{margin:0 0 12px;font-size:20px}.toast{background:var(--bg-3);border:1px solid var(--line);cursor:pointer;border-radius:6px;padding:8px 14px;position:fixed;bottom:16px;left:50%;translate:-50%;box-shadow:0 6px 24px #0006}.toast--error{background:#3a1f24;border-color:#6b2c35}.row__input{border:1px solid var(--accent);background:var(--bg);min-width:0;font-family:var(--mono);border-radius:3px;outline:none;flex:1;padding:1px 4px;font-size:12px}.row--drop-before{box-shadow:inset 0 2px 0 var(--accent)}.row--drop-after{box-shadow:inset 0 -2px 0 var(--accent)}.row--drop-inside{outline:1px dashed var(--accent);outline-offset:-1px;background:#4c8dff26}.structure__keys{padding:12px}.overlay{z-index:10;background:#00000059;justify-content:center;align-items:flex-start;padding-top:12vh;display:flex;position:fixed;inset:0}.command{background:var(--bg-2);border:1px solid var(--line);border-radius:10px;width:min(640px,92vw);overflow:hidden;box-shadow:0 20px 60px #00000080}.command__title{color:var(--fg-3);font-family:var(--mono);padding:10px 14px 0;font-size:12px}.command__input{border:0;border-bottom:1px solid var(--line);background:0 0;outline:none;width:100%;padding:12px 14px;font-size:14px}.command__list{max-height:50vh;padding:4px;overflow:auto}.command__item{cursor:pointer;border-radius:6px;align-items:baseline;gap:10px;padding:7px 10px;display:flex}.command__item--active{background:#4c8dff33}.command__group{width:72px;color:var(--fg-3);text-transform:uppercase;letter-spacing:.05em;flex:none;font-size:11px}.command__label{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.command__detail{color:var(--fg-3);font-size:12px}.command__empty{color:var(--fg-3);padding:10px}.elements{border-bottom:1px solid var(--line);flex-wrap:wrap;gap:4px;padding:8px;display:flex}.elements__btn{border:1px solid var(--line);background:var(--bg-3);cursor:pointer;border-radius:5px;padding:3px 8px;font-size:12px}.elements__btn:hover{border-color:var(--accent)}.editor--focus{grid-template-columns:0 1fr 0}.editor--focus .left,.editor--focus .right{display:none}html,body,.editor{overflow:hidden}.topbar{white-space:nowrap;min-width:0;overflow:hidden}.topbar>*{flex:none}.topbar__page{flex:0 260px;min-width:0}.canvas__frame{max-width:100%;height:100%;margin:0 auto;position:relative}.canvas__frame iframe{background:#fff;border:0;width:100%;height:100%;display:block}.canvas__handle{cursor:ew-resize;z-index:2;touch-action:none;width:10px;position:absolute;top:0;bottom:0}.canvas__handle:after{content:"";background:var(--fg-3);opacity:.5;border-radius:2px;width:4px;height:48px;margin-top:-24px;position:absolute;top:50%;left:3px}.canvas__handle:hover:after{opacity:1;background:var(--accent)}.canvas__handle--left{left:0}.canvas__handle--right{right:0}.canvas__width{color:var(--fg);font:11px var(--mono);pointer-events:none;background:#16181dcc;border-radius:4px;padding:2px 6px;position:absolute;top:6px;right:8px}.pill--rule small{opacity:.7;margin-left:4px;font-size:10px}.pill--rule{padding-right:8px}.styles__new{margin:8px 0}.styles__key{margin:4px 0 6px;font-size:12px}.css-editor__tools{flex-wrap:wrap;gap:4px;margin-bottom:6px;display:flex}.chip{border:1px solid var(--line);font:11px var(--mono);cursor:pointer;color:var(--fg-2);background:0 0;border-radius:999px;padding:2px 8px}.chip:hover{border-color:var(--accent);color:var(--fg)}.sm{background:var(--bg-2);border:1px solid var(--line);border-radius:10px;flex-direction:column;width:min(1100px,96vw);height:min(760px,86vh);display:flex;overflow:hidden;box-shadow:0 20px 60px #00000080}.sm__head{border-bottom:1px solid var(--line);align-items:center;gap:6px;padding:8px 12px;display:flex}.sm__head strong{margin-right:12px}.sm__tab{color:var(--fg-2);cursor:pointer;background:0 0;border:0;border-radius:6px;padding:5px 10px}.sm__tab--active{background:var(--bg-3);color:var(--fg)}.sm__body{flex:1;min-height:0;overflow:auto}.sm__split{grid-template-columns:300px 1fr;height:100%;display:grid}.sm__list{border-right:1px solid var(--line);flex-direction:column;gap:6px;padding:10px;display:flex;overflow:auto}.sm__detail{flex-direction:column;gap:8px;padding:12px;display:flex;overflow:auto}.sm__row{cursor:pointer;border-radius:5px;align-items:center;gap:6px;padding:4px 8px;display:flex}.sm__row:hover{background:var(--bg-3)}.sm__row--active{background:#4c8dff38}.sm__badge{background:var(--bg-3);color:var(--fg-3);border-radius:999px;margin-left:auto;padding:0 6px;font-size:10px}.sm__vars{flex-direction:column;gap:14px;padding:12px;display:flex}.sm__collection{border:1px solid var(--line);border-radius:8px;padding:10px}.sm__collection-head{align-items:center;gap:10px;margin-bottom:6px;display:flex}.sm__collection-head .field{max-width:260px}.sm__table{border-collapse:collapse;width:100%;margin-bottom:6px}.sm__table td{padding:2px 4px}.sm__table td:first-child{width:14px;color:var(--fg-3)}.sm__table td:nth-child(4),.sm__table td:nth-child(5){width:24px}.swatch{border:1px solid var(--line);vertical-align:middle;border-radius:4px;width:16px;height:16px;display:inline-block}.btn--danger{color:var(--danger);align-self:flex-start}.btn--primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn--primary:hover:not(:disabled){border-color:#fff}.banner{z-index:5;color:#ffe3b3;background:#5a3d10;padding:6px 12px;font-size:12px;position:fixed;top:44px;left:0;right:0}.publish{height:min(700px,86vh)}.publish__body{flex-direction:column;flex:1;gap:14px;padding:12px;display:flex;overflow:auto}.publish__confirm{flex-direction:column;align-items:flex-start;gap:10px;display:flex}.publish__confirm p{margin:0;line-height:1.5}.publish__status{margin-bottom:6px;font-weight:600}.publish__status--live{color:#7ee0b5}.publish__status--built{color:#ffd27a}.publish__status--failed{color:var(--danger)}.publish__status--building,.publish__status--deploying{color:var(--accent)}.publish__log{border:1px solid var(--line);background:var(--bg);max-height:320px;font:11px/1.5 var(--mono);white-space:pre-wrap;border-radius:6px;margin:0;padding:10px;overflow:auto}.publish__history td{white-space:nowrap;padding:4px 6px;font-size:12px}.publish__history a{color:var(--accent)}.propdef{border:1px solid var(--line);border-radius:6px;margin-bottom:8px;padding:8px}.propdef__head{grid-template-columns:1fr 100px 20px;align-items:center;gap:6px;margin-bottom:6px;display:grid}.propdef__add{grid-template-columns:1fr 90px auto;gap:6px;display:grid}.picker__new{grid-template-columns:1fr auto;gap:6px;margin-top:8px;display:grid}.topbar .field{width:auto}.topbar .topbar__page{flex:0 320px;min-width:140px}.topbar .topbar__spacer{flex:auto;min-width:8px}.import{border:1px solid var(--line);border-radius:8px;flex-direction:column;gap:8px;margin-top:12px;padding:14px;display:flex}.import h2{margin:0;font-size:15px}.import__paste{min-height:90px}.import__check{color:var(--fg-2);align-items:center;gap:6px;font-size:12px;display:flex}.overlay .import{background:var(--bg-2);margin-top:0}.picker{max-width:460px}.panel .btn input[hidden]{display:none}label.btn{display:inline-block}