:root{--ink:#171717;--gray-1:#fafafa;--gray-2:#f0f0f0;--gray-3:#d4d4d4;--gray-4:#a3a3a3;--gray-5:#525252;color:var(--ink);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#fff;font:14px/1.4 Helvetica Neue,Helvetica,Arial,sans-serif}*{box-sizing:border-box}html,body,#root{min-height:100%}body{background:#fff;margin:0}button,input,select{font-family:inherit}.app-shell{flex-direction:column;min-height:100svh;display:flex}.top-nav{z-index:80;background:#fff;flex-shrink:0;align-items:baseline;gap:28px;min-height:48px;padding:14px 32px;display:flex;position:fixed;inset:0 0 auto}.top-nav button{color:var(--gray-4);cursor:pointer;background:0 0;border:0;border-bottom:2px solid #0000;padding:0 0 2px;font-size:13px}.top-nav button:hover,.top-nav button.active{color:var(--ink)}.top-nav button.active{border-bottom-color:var(--ink)}.top-nav .brand{color:var(--ink);letter-spacing:.05em;margin-right:20px;font-size:15px;font-weight:700}.main-view{flex:1;min-height:0;margin-top:48px;position:relative;overflow:auto}.btn{border:1px solid var(--ink);background:var(--ink);color:#fff;cursor:pointer;letter-spacing:.03em;padding:8px 18px;font-size:12px}.btn:hover{background:#000}.btn.ghost{color:var(--ink);background:#fff}.btn.ghost:hover{background:var(--gray-1)}.palette-page{flex-direction:column;justify-content:center;align-items:center;min-height:calc(100svh - 48px);padding:40px;display:flex}.palette-scroll{max-width:100%;padding:10px 76px 34px 10px;overflow-x:auto}.palette-grid{align-items:flex-start;min-width:max-content;display:flex}.palette-column{flex-direction:column;padding-right:28px;display:flex}.swatch{cursor:pointer;border:0;width:104px;height:88px;transition:box-shadow 80ms,transform 80ms;position:relative}.swatch:hover{z-index:2;transform:scale(1.035);box-shadow:0 2px 12px #0000002e}.swatch.shade{height:44px}.swatch span{color:var(--gray-5);letter-spacing:.06em;text-overflow:ellipsis;text-transform:uppercase;text-orientation:upright;white-space:nowrap;writing-mode:vertical-rl;background:#fff;max-width:18px;max-height:calc(100% - 8px);padding:6px 4px;font-size:10px;line-height:1.15;position:absolute;bottom:0;left:calc(100% + 4px);overflow:hidden}.add-block{border:1px dashed var(--gray-3);width:88px;height:88px;color:var(--gray-4);cursor:pointer;background:#fff;justify-content:center;align-items:center;margin-left:32px;font-size:28px;font-weight:200;display:flex;position:sticky;right:0}.add-block:hover{border-color:var(--ink);color:var(--ink)}.palette-hint{color:var(--gray-4);margin-top:38px;font-size:11px}.theme-workbench{height:calc(100svh - 48px);min-height:620px;display:flex;position:relative;overflow:hidden}.theme-sidebar{border-right:1px solid var(--gray-2);flex-shrink:0;width:332px;padding:28px 24px 36px;overflow:auto}.sidebar-head{z-index:2;background:#fff;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:24px;padding-top:28px;padding-bottom:14px;display:flex;position:sticky;top:-28px}.sidebar-head h1,.page-panel h1{margin:0 0 6px;font-size:24px;font-weight:500}.sidebar-head p,.page-desc{color:var(--gray-4);margin:0;font-size:12px}.sidebar-close,.mobile-sidebar-toggle{display:none}.theme-list{flex-direction:column;gap:10px;display:flex}.theme-row{border:1px solid var(--gray-2)}.theme-row.active{border-color:var(--ink)}.theme-pick{cursor:pointer;text-align:left;background:#fff;border:0;width:100%;padding:0}.theme-strip{height:46px;display:flex}.theme-strip span{flex:1}.theme-meta{justify-content:space-between;align-items:baseline;padding:10px 12px;display:flex}.theme-meta strong{font-size:14px;font-weight:600}.theme-meta small,.edit-link,.token-source,.editor-title span,.preview-status{color:var(--gray-4);font-size:11px}.edit-link{border:0;border-top:1px solid var(--gray-1);cursor:pointer;text-align:right;background:#fff;width:100%;padding:7px 12px}.theme-add{border:1px dashed var(--gray-3);color:var(--gray-5);cursor:pointer;background:#fff;padding:14px;font-size:12px}.theme-inspector{z-index:90;border-left:1px solid var(--gray-2);background:#fff;width:332px;padding:28px 24px 36px;transition:transform .18s;position:fixed;inset:48px 0 0 auto;overflow:auto;transform:translate(105%);box-shadow:-8px 0 24px #0000001a}.theme-inspector.open{transform:translate(0)}.token-editor{margin:0}.editor-title{z-index:2;background:#fff;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:18px;padding-top:28px;padding-bottom:12px;display:flex;position:sticky;top:-28px}.editor-title>div{gap:2px;display:grid}.editor-title strong{font-size:14px}.editor-title button{color:var(--gray-4);cursor:pointer;text-transform:uppercase;background:#fff;border:0;font-size:11px}.token-list{flex-direction:column;display:flex}.token-item{border-bottom:1px solid var(--gray-1);align-items:center;gap:10px;padding:8px 0;display:flex}.token-swatch{border:1px solid var(--gray-2);cursor:pointer;flex-shrink:0;width:34px;height:34px}.token-name{text-overflow:ellipsis;flex:1;min-width:0;font-size:13px;overflow:hidden}.token-source{text-overflow:ellipsis;white-space:nowrap;max-width:72px;overflow:hidden}.token-delete{color:var(--gray-3);cursor:pointer;background:0 0;border:0;font-size:13px}.token-delete:hover{color:var(--ink)}.token-add{gap:8px;margin-top:16px;display:flex}.token-add input{flex:1;min-width:0}.token-error{color:var(--gray-5);min-height:18px;margin-top:8px;font-size:11px;line-height:1.5}.preview-side{flex-direction:column;flex:1;min-width:0;min-height:0;padding:28px 28px 22px;display:flex}.preview-bar{align-items:center;gap:8px;margin-bottom:12px;display:flex}.preview-bar>span{color:var(--gray-4);letter-spacing:.08em;text-transform:uppercase;margin-right:auto;font-size:11px}.preview-bar input{width:230px}.viewport-tabs{border:1px solid var(--gray-3);display:flex}.viewport-tabs button{border:0;border-right:1px solid var(--gray-3);cursor:pointer;background:#fff;padding:7px 9px;font-size:12px}.viewport-tabs button:last-child{border-right:0}.viewport-tabs button.active{background:var(--ink);color:#fff}.preview-bar .btn:disabled{border-color:var(--gray-2);background:var(--gray-2);color:var(--gray-4);cursor:wait}.preview-stage{border:1px solid var(--gray-2);background:var(--gray-1);flex:1;justify-content:center;min-height:0;padding:18px;display:flex;overflow:auto}.preview-frame{border:1px solid var(--gray-2);background:#fff;max-width:100%;height:100%;min-height:480px;transition:width .16s}.preview-status{justify-content:space-between;gap:12px;margin-top:8px;display:flex}.undef{background:repeating-linear-gradient(45deg, var(--gray-2), var(--gray-2) 4px, #fff 4px, #fff 8px)!important}.float-panel{border:1px solid var(--ink);z-index:100;background:#fff;width:260px;padding:16px;position:fixed;box-shadow:4px 4px #0000001f}.float-panel-backdrop,.theme-inspector-backdrop,.composer-tree-backdrop,.composer-inspector-backdrop,.composer-color-backdrop{cursor:default;z-index:85;background:#00000047;border:0;position:fixed;inset:48px 0 0}.float-panel-backdrop,.composer-color-backdrop{z-index:95;background:0 0}.float-panel-head{justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px;display:flex}.float-panel-head h4,.float-panel h4{color:var(--gray-4);letter-spacing:.08em;text-transform:uppercase;margin:0;font-size:11px}.float-panel-head button{color:var(--gray-4);cursor:pointer;text-transform:uppercase;background:#fff;border:0;font-size:11px}.field-row{align-items:center;gap:8px;margin-bottom:10px;display:flex}.field-row label{width:42px;color:var(--gray-5);flex-shrink:0;font-size:11px}.field-row.wide-label label{width:90px}input,select{border:1px solid var(--gray-3);color:var(--ink);font:inherit;background:#fff;outline:none;padding:7px 10px;font-size:12px}input:focus,select:focus{border-color:var(--ink)}.field-row input:not([type=color]){flex:1;min-width:0}.color-input{border:1px solid var(--gray-3);cursor:pointer;width:38px;height:30px;padding:1px}.hex-label{color:var(--gray-4);font-size:11px}.panel-actions{gap:8px;margin-top:12px;display:flex}.panel-actions .btn{flex:1;padding:7px 0}.chooser{max-height:330px;overflow:auto}.group-label{color:var(--gray-4);letter-spacing:.08em;text-transform:uppercase;margin:10px 0 6px;font-size:10px}.palette-choice>span{color:var(--gray-4);margin:6px 0 3px;font-size:10px;display:block}.mini-row{flex-wrap:wrap;gap:4px;display:flex}.mini{border:1px solid var(--gray-2);cursor:pointer;width:24px;height:24px}.mini:hover{outline:2px solid var(--ink)}.raw-row{align-items:stretch}.modal-mask{z-index:200;background:#00000059;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{border:1px solid var(--ink);background:#fff;width:360px;padding:32px}.modal h3{margin:0 0 20px;font-size:17px;font-weight:500}.page-panel{padding:48px 56px}.placeholder-note{color:var(--gray-4);max-width:520px;font-size:13px;line-height:1.8}.composer-page{background:#fff;grid-template-columns:minmax(0,1fr);height:calc(100svh - 48px);min-height:0;display:grid;position:relative;overflow:hidden}.composer-tree,.composer-inspector{z-index:90;border-right:1px solid var(--gray-2);background:#fff;width:300px;padding:24px 18px;transition:transform .18s;position:fixed;inset:48px auto 0 0;overflow:auto;transform:translate(-105%);box-shadow:8px 0 24px #0000001a}.composer-tree.open{transform:translate(0)}.composer-inspector{border-left:1px solid var(--gray-2);border-right:0;width:330px;inset:48px 0 0 auto;transform:translate(105%);box-shadow:-8px 0 24px #0000001a}.composer-inspector.open{transform:translate(0)}.composer-panel-head{z-index:2;background:#fff;margin-bottom:18px;padding-top:24px;padding-bottom:12px;position:sticky;top:-24px}.composer-panel-head button,.composer-tree-toggle{display:inline-flex}.composer-panel-head{justify-content:space-between;align-items:flex-start;gap:12px;display:flex}.composer-panel-head>div{min-width:0}.composer-panel-head button{color:var(--gray-4);cursor:pointer;text-transform:uppercase;background:#fff;border:0;font-size:11px}.composer-panel-head h1,.composer-panel-head h2{margin:0 0 6px;font-size:22px;font-weight:500}.composer-panel-head h2{font-size:18px}.composer-panel-head p{color:var(--gray-4);text-overflow:ellipsis;margin:0;font-size:11px;overflow:hidden}.tree-node button{cursor:pointer;text-align:left;background:#fff;border:0;border-left:2px solid #0000;gap:2px;width:100%;margin:0;padding:7px 8px;display:grid}.tree-node button:hover,.tree-node button.active{background:var(--gray-1);border-left-color:var(--ink)}.tree-node span{color:var(--gray-4);letter-spacing:.06em;text-transform:uppercase;font-size:10px}.tree-node strong{color:var(--ink);font-size:12px;font-weight:500}.tree-children{border-left:1px solid var(--gray-2);margin-left:12px;padding-left:8px}.composer-canvas-wrap{flex-direction:column;min-width:0;display:flex}.composer-toolbar{z-index:5;border-bottom:1px solid var(--gray-2);background:#fff;align-items:center;gap:10px;min-height:62px;padding:12px 16px;display:flex;position:sticky;top:0}.composer-toolbar>div{min-width:0;margin-right:auto}.composer-toolbar strong{font-size:14px;font-weight:600}.composer-title-row{align-items:center;gap:10px;display:inline-flex}.composer-toolbar span{color:var(--gray-4);font-size:11px;display:block}.composer-canvas{background:var(--gray-1);flex:1;min-height:0;padding:24px;overflow:auto}.dsl-node{border:1px solid #0000;position:relative}.dsl-node.selected{outline:2px solid var(--ink);outline-offset:2px}.dsl-frame{min-height:100%;padding:20px}.dsl-stack{min-width:0}.dsl-frame>.dsl-stack:first-child{flex-shrink:0;width:190px;padding:18px}.dsl-frame>.dsl-stack:last-child{flex:1;min-width:0}.dsl-panel,.dsl-metric,.dsl-table{border:1px solid var(--gray-2);padding:18px}.dsl-panel:before,.dsl-metric:before{content:"";background:var(--dsl-accent,currentColor);width:28px;height:4px;margin-bottom:12px;display:block}.dsl-text{font-size:14px;line-height:1.45}.dsl-button{cursor:pointer;border:1px solid;align-self:flex-start;padding:9px 16px;font-size:12px}.dsl-metric strong{font-size:30px;font-weight:600;line-height:1.1;display:block}.dsl-metric span{opacity:.72;margin-top:8px;font-size:12px;display:block}.dsl-table{padding:0;overflow:auto}.dsl-table table{border-collapse:collapse;width:100%;font-size:12px}.dsl-table th,.dsl-table td{text-align:left;border-bottom:1px solid;padding:10px 12px}.dsl-table th{background:var(--dsl-accent,transparent);font-weight:600}.dsl-status{border:1px solid #0000;align-self:flex-start;padding:5px 9px;font-size:11px;display:inline-flex}.dsl-divider{border-top:1px solid var(--gray-2);height:1px}.inspector-body{flex-direction:column;gap:12px;display:flex}.color-picker{border-top:1px solid var(--gray-2);padding-top:12px}.color-picker-head{cursor:pointer;text-align:left;background:#fff;border:0;grid-template-columns:42px 58px minmax(0,1fr);align-items:center;gap:8px;width:100%;padding:0;display:grid}.color-picker-head span,.field-block label{color:var(--gray-5);font-size:11px}.color-picker-head strong{color:var(--gray-4);text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:400;overflow:hidden}.color-clear{color:var(--gray-4);cursor:pointer;background:0 0;border:0;font-size:11px}.color-picker-panel{margin-top:8px}.color-clear{padding:0}.color-ref-preview{border:1px solid var(--gray-2);width:58px;height:20px;display:flex;overflow:hidden}.color-ref-preview span{flex:1}.color-picker-group{margin-top:10px}.token-choice{cursor:pointer;text-align:left;background:#fff;border:0;grid-template-columns:58px minmax(0,1fr);align-items:center;gap:8px;width:100%;padding:4px 0;display:grid}.token-choice:hover{background:var(--gray-1)}.token-choice>span:last-child{text-overflow:ellipsis;white-space:nowrap;font-size:11px;overflow:hidden}.token-band{border:1px solid var(--gray-2);height:18px;display:flex}.token-band span{flex:1}.palette-token-grid{gap:7px;display:grid}.palette-token-row{align-items:center;gap:4px;display:flex}.palette-token-row>span{width:58px;color:var(--gray-4);text-overflow:ellipsis;white-space:nowrap;font-size:10px;overflow:hidden}.composer-help{color:var(--gray-4);margin:8px 0 0;font-size:11px;line-height:1.4}.field-block{gap:6px;display:grid}.field-block textarea{resize:vertical;border:1px solid var(--gray-3);min-height:90px;font:inherit;padding:8px 10px;font-size:12px}.composer-delete{margin-top:8px}.composer-delete:disabled{opacity:.35;cursor:default}.settings-form{max-width:460px;margin-top:32px}.settings-actions{align-items:center;gap:12px;margin-top:20px;display:flex}.settings-actions span{color:var(--gray-5);font-size:12px}.export-panel{border-top:1px solid var(--gray-2);gap:14px;margin-top:30px;padding-top:24px;display:grid}.export-panel h2{margin:0;font-size:18px;font-weight:500}.export-panel p,.import-status{color:var(--gray-4);margin:0;font-size:12px;line-height:1.6}.export-actions{flex-wrap:wrap;gap:8px;display:flex}.field-row input[type=file]{padding:8px 0;font-size:12px}.danger-zone{border-top:1px solid var(--gray-2);margin-top:40px;padding-top:20px}.sr-only{clip:rect(0, 0, 0, 0);width:1px;height:1px;position:absolute;overflow:hidden}@media (width<=900px){.top-nav{align-items:center;gap:16px;min-height:70px;padding:8px 18px;overflow-x:auto}.main-view{margin-top:70px}.top-nav button:not(.brand){letter-spacing:0;text-align:justify;text-align-last:justify;text-orientation:upright;writing-mode:vertical-rl;height:54px;min-height:54px;line-height:1;display:inline-block}.top-nav .brand{align-self:stretch;align-items:center;margin-right:4px;display:inline-flex}.palette-page{justify-content:flex-start;align-items:stretch;min-height:calc(100svh - 70px);padding:24px 18px}.palette-scroll{padding:0 76px 34px 0;overflow-x:auto}.palette-grid{min-width:max-content}.palette-column{flex-direction:column}.swatch{flex:0 0 88px}.swatch span{white-space:nowrap;writing-mode:vertical-rl;bottom:0;left:calc(100% + 3px);right:auto;overflow:hidden}.add-block{flex:0 0 88px;height:88px;margin-left:20px;position:static}.theme-workbench{height:calc(100svh - 70px);min-height:calc(100svh - 70px)}.float-panel-backdrop,.theme-inspector-backdrop,.composer-tree-backdrop,.composer-inspector-backdrop,.composer-color-backdrop{inset:70px 0 0}.sidebar-backdrop{z-index:25;background:#00000047;border:0;position:fixed;inset:70px 0 0}.mobile-sidebar-toggle{z-index:20;display:inline-flex;position:fixed;top:84px;left:18px}.theme-sidebar{border-right:1px solid var(--gray-2);z-index:30;background:#fff;width:min(340px,88vw);transition:transform .18s;position:fixed;inset:70px auto 0 0;transform:translate(-105%);box-shadow:8px 0 24px #0000001a}.theme-sidebar.open{transform:translate(0)}.sidebar-close{color:var(--gray-4);cursor:pointer;text-transform:uppercase;background:#fff;border:0;font-size:11px;display:inline-flex}.preview-side{height:100%;min-height:0;padding:70px 18px 18px}.preview-bar{flex-direction:column;align-items:stretch}.preview-bar>span{margin-right:0}.preview-bar input,.preview-bar select{width:100%}.viewport-tabs{display:none}.preview-stage{padding:10px}.preview-frame{min-height:560px}.float-panel{width:min(300px,100vw - 32px);transform:translate(-50%);top:86px!important;left:50%!important}.page-panel{padding:32px 20px}.composer-page{grid-template-columns:1fr;height:auto;min-height:calc(100svh - 70px)}.theme-inspector{border-left:1px solid var(--gray-2);z-index:32;background:#fff;width:min(360px,90vw);inset:70px 0 0 auto;box-shadow:-8px 0 24px #0000001a}.theme-inspector.open{transform:translate(0)}.theme-inspector-backdrop{z-index:31}.composer-tree{border-right:1px solid var(--gray-2);z-index:30;background:#fff;border-bottom:0;width:min(340px,88vw);max-height:none;inset:70px auto 0 0;box-shadow:8px 0 24px #0000001a}.composer-tree.open{transform:translate(0)}.composer-inspector{border-left:1px solid var(--gray-2);width:min(360px,90vw);max-height:none;inset:70px 0 0 auto;box-shadow:-8px 0 24px #0000001a}.composer-toolbar{flex-direction:column;align-items:stretch}.composer-toolbar>div{margin-right:0}.composer-canvas{padding:14px}.dsl-frame{min-width:640px;flex-direction:column!important}}