@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;600;700;800&display=swap');
:root{--ink:#253d36;--green:#28664d;--paper:#f6f8f1;--muted:#7a897f;--line:#e1e8da;--lime:#ddf6a3}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:13px 'DM Sans',sans-serif}button,input,select{font:inherit;color:inherit}button{cursor:pointer;border:1px solid var(--line);background:#fff;border-radius:7px;padding:8px 11px}button:hover{border-color:#a4ba93;background:#f4f8ef}button:disabled{opacity:.35;cursor:default}a{color:var(--green)}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #9ebf67;outline-offset:3px}.primary{background:var(--green);border-color:var(--green);color:white;font-weight:600}.primary:hover{background:#1c513c;color:white}.topbar{height:82px;display:flex;align-items:center;gap:32px;padding:0 3vw;border-bottom:1px solid var(--line);background:#fdfff9}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-size:23px;letter-spacing:-1px}.brand-mark{font-size:39px;color:var(--green)}.brand strong{font-weight:800}.brand small{display:block;font-size:7px;letter-spacing:2px;margin-top:1px;color:var(--muted)}.mode-pill{font-size:10px;background:#edf3e5;padding:7px 11px;border-radius:20px;color:var(--green)}.header-actions{margin-left:auto;display:flex;align-items:center;gap:7px}#save-state{font-size:10px;color:var(--muted);margin-right:10px}.header-actions button{font-size:16px;padding:6px 10px}.header-actions .primary{font-size:11px;padding:10px 15px}.page-heading{display:flex;justify-content:space-between;align-items:center;margin:29px 3vw 24px;gap:15px}.eyebrow{font-size:9px;font-weight:700;letter-spacing:2px;color:var(--green)}h1,h2{font-family:Manrope,sans-serif}h1{font-size:clamp(22px,2.5vw,34px);letter-spacing:-1.2px;margin:9px 0}h1 em{font-style:normal;color:var(--green)}.page-heading p{margin:0;color:var(--muted);font-size:12px;line-height:1.7}#help{background:transparent;font-size:11px;white-space:nowrap}.studio{display:grid;grid-template-columns:220px minmax(320px,1fr) minmax(330px,420px);gap:18px;margin:0 3vw;align-items:start}.panel{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 3px 14px #23392a03}.panel-title{display:flex;justify-content:space-between;align-items:center;padding:18px 18px 13px;min-height:55px}.panel-title h2{font-size:13px;letter-spacing:-.2px;margin:0}.panel-title>span{font-size:9px;color:var(--muted)}.panel-title>span:not(.live-dot){border:1px solid var(--line);padding:4px 6px;border-radius:5px}.panel-description{font-size:10px;line-height:1.7;color:var(--muted);margin:0 18px 15px}.palette-group{padding:0 12px;margin-bottom:17px}.group-heading{font-size:8px;letter-spacing:1.6px;color:#93a087;padding:3px 6px 8px;font-weight:700}.widget-card{display:flex;gap:9px;align-items:center;width:100%;text-align:left;border-color:transparent;margin-bottom:4px;padding:8px;background:#f8faf5;cursor:grab}.widget-card:active{cursor:grabbing}.card-symbol{width:28px;height:28px;display:grid;place-items:center;border-radius:7px;background:#e6eedc;color:var(--green);font-family:monospace;font-weight:bold;font-size:15px;flex-shrink:0}.widget-card[data-tone=violet] .card-symbol{color:#7963a6;background:#eee9f6}.widget-card[data-tone=orange] .card-symbol{color:#af7c40;background:#fbefdc}.card-text{flex:1}.card-text b{display:block;font-family:monospace;font-size:11px;font-weight:600}.card-text small{display:block;font-size:9px;color:var(--muted);margin-top:3px}.card-plus{color:#94a58a}.library-note{border-top:1px solid var(--line);margin:6px 16px 0;padding-top:15px}.library-note b{font-size:10px}.library-note p{font-size:9px;color:var(--muted);line-height:1.7}.docs-link{display:block;font-size:9px;margin:15px 17px 20px;text-decoration:none}.editor{display:flex;flex-direction:column;gap:16px}.tree-tools{display:flex;gap:7px;align-items:center;border-top:1px solid #f1f4ec;padding:11px 16px;background:#fbfcf8;font-size:10px}.tree-tools label{color:var(--muted);margin-right:auto}.tree-tools select{font-size:10px;width:120px;padding:7px;background:white;border:1px solid var(--line);border-radius:6px}.tree-tools button{font-size:9px;padding:7px}.tree-instruction{font-size:10px;color:var(--muted);padding:14px 18px}#tree{padding:0 13px 12px;max-height:480px;min-height:240px;overflow:auto}.tree-node{margin-left:14px;border-left:1px solid #e1e9da;padding-left:8px}.tree-node.root{margin-left:0;border:0;padding:0}.node-line{display:flex;gap:6px;align-items:center;border-radius:6px;min-height:35px;border:1px solid transparent;padding-right:5px}.node-line:hover{background:#f5f8ef}.node-line.selected{background:#eaf3dc;border-color:#c9deb0}.node-select{display:flex;gap:7px;align-items:center;flex:1;padding:7px 6px;border:0;background:transparent;text-align:left;min-width:0;font:11px monospace}.node-select:hover{background:transparent;border-color:transparent}.node-select span{color:#8aa66d;font-size:13px;width:16px;text-align:center}.node-select small{font-family:'DM Sans',sans-serif;color:#849278;font-size:9px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:140px}.node-id{font-size:8px;color:#a9b3a0}.move-button{font-size:9px;padding:3px 4px;border:0;background:transparent;color:#8a9b80}.drop-slot{margin:3px 0 3px 15px;border:1px dashed #d3dfc9;border-radius:6px;background:#fcfdf8;color:#8b9e7d;font-size:9px;text-align:left;padding:8px 10px;display:block;width:calc(100% - 20px)}.drop-slot:hover{background:#edf6df}.drop-between{height:8px;margin-left:15px;display:flex;align-items:center;border-radius:3px;font-size:8px;color:transparent}.dragging .drop-between{height:20px;border:1px dashed #ccddbb;color:#8a9c7a;padding-left:8px;margin-top:2px;margin-bottom:2px}.drop-hover{background:#dafa98!important;outline:2px solid #8aae60!important;border-color:#8aae60!important}.tree-bottom{display:flex;justify-content:space-between;font-size:8px;color:#99a58f;padding:12px 17px;border-top:1px solid var(--line)}.node-actions{display:flex;gap:4px}.node-actions button{padding:3px 6px;font-size:13px;background:transparent;border:0}#selected-name{font:10px monospace;font-weight:400;background:#f0f4e8;border-radius:5px;padding:4px 6px;margin-left:7px;color:var(--green)}#properties{padding:0 18px 15px}.property-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}.property-field{display:flex;flex-direction:column;gap:5px;font-size:9px;color:var(--muted)}.property-field.wide{grid-column:span 2}.property-field input,.property-field select{border:1px solid #dde5d5;background:#fbfcf8;padding:8px;border-radius:6px;font-size:11px;width:100%;min-width:0;color:var(--ink)}.property-field input[type=color]{height:33px;padding:3px}.property-description{font-size:10px;color:var(--muted);line-height:1.65;margin:0 0 12px}.property-tip{font-size:10px;color:#857449;line-height:1.7;margin:12px 0 0;background:#fcf7e9;border-radius:7px;padding:9px}.wrap-tools{display:flex;align-items:center;gap:5px;flex-wrap:wrap;background:#fafcf6;padding:11px 16px;border-top:1px solid var(--line)}.wrap-tools>span{font-size:9px;color:var(--muted);margin-right:auto}.wrap-tools button{font-size:9px;padding:6px 7px}.quests .panel-title b{font-size:10px;color:var(--green)}#badges{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 16px 16px}.badge{font-size:10px;border:1px solid #e8eddf;border-radius:8px;padding:9px;color:#8a9782;display:flex;gap:8px;align-items:flex-start}.badge b{font-weight:600;font-size:10px}.badge small{display:block;font-size:8px;line-height:1.5;margin-top:3px}.badge-icon{font-size:16px;color:#a5b198}.badge.earned{color:var(--green);background:#f0f7e2;border-color:#d7e8bc}.badge.earned .badge-icon{color:#5c8a3e}.preview-panel{position:sticky;top:15px}.live-dot{color:#6d9d55!important;font-size:8px!important;letter-spacing:1px}.preview-toolbar{display:flex;align-items:center;gap:9px;border-top:1px solid #f1f4ec;border-bottom:1px solid #edf1e6;padding:10px 16px;font-size:9px;color:var(--muted)}#device-label{margin-right:auto;font-family:monospace}.preview-toolbar label{display:flex;align-items:center;gap:3px;white-space:nowrap}.preview-toolbar input{accent-color:var(--green);margin:0;width:11px;height:11px}.phone-stage{min-height:410px;padding:22px 10px 13px;background-color:#edf2e7;background-image:radial-gradient(#ced9c3 .6px,transparent .6px);background-size:13px 13px;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}#phone-frame{background:#27392f;border:7px solid #27392f;border-radius:32px;box-shadow:0 14px 28px #243b3026;position:relative;transition:width .15s,height .15s}#phone-screen{background:#fcfdf8;overflow:hidden;border-radius:25px;position:relative;transform-origin:top left}#canvas{position:absolute;inset:0}.canvas-widget{position:absolute;box-sizing:border-box;overflow:visible;cursor:pointer;outline-offset:-1px}.canvas-widget.selected-widget{outline:2px solid #91ad61!important}.canvas-widget:hover{outline:1px dashed #809760}.show-outlines .canvas-widget{outline:1px dashed #a7b89570}.canvas-widget[data-widget=Stack]{overflow:hidden}.leaf-label{width:100%;height:100%;overflow:hidden;display:flex;align-items:center;pointer-events:none}.text-label{display:block;white-space:pre-wrap;overflow-wrap:break-word;line-height:1.3}.button-label{justify-content:center;font-weight:600}.icon-label{justify-content:center}.overflow-stripe{position:absolute;background:repeating-linear-gradient(45deg,#ffcf39 0 5px,#30352c 5px 10px);z-index:3;pointer-events:none;opacity:.9}#statusbar{position:absolute;z-index:25;top:0;left:0;right:0;height:29px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;pointer-events:none;font-size:11px;font-weight:700;color:#263b30;background:#ffffff0a}#notch-shape{position:absolute;z-index:30;top:0;left:50%;transform:translateX(-50%);width:100px;height:26px;background:#27392f;border-radius:0 0 15px 15px;pointer-events:none}#home-indicator{position:absolute;z-index:30;bottom:8px;left:35%;width:30%;height:4px;background:#27392f;border-radius:3px;pointer-events:none}.empty-canvas{position:absolute;left:25px;right:25px;top:140px;text-align:center;color:#91a085;font-size:15px;line-height:1.7;pointer-events:none}.empty-canvas span{display:block;font-size:35px;color:#b6c8a2;margin-bottom:15px}.stage-caption{font-size:8px;color:#8a9981;margin-top:17px}.size-controls{padding:15px 18px 13px}.size-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.size-heading b{font-size:11px}.size-heading button{font-size:9px;padding:4px 7px}.size-controls>label{display:flex;justify-content:space-between;font-size:9px;color:var(--muted);margin-bottom:6px}.size-controls output{font-family:monospace;color:var(--ink)}input[type=range]{accent-color:#608b49;width:100%;height:15px;cursor:pointer}.range-row{display:flex;align-items:center;gap:8px;margin-bottom:10px}.range-row button{padding:2px 7px;font-size:13px}.presets{display:flex;gap:7px;margin-top:12px}.presets button{flex:1;font-size:9px;padding:7px;background:#fafcf7}.test-area{border-top:1px solid var(--line);padding:14px 18px 16px}.test-button{width:100%;font-size:11px;padding:11px}.diagnostic{font-size:10px;line-height:1.6;margin-top:9px;border-radius:7px;padding:8px 10px;background:#faf5e7;color:#93713e}.diagnostic.ok{background:#eff6e6;color:#4c7539}.diagnostic.error{background:#fcf0e9;color:#a36740}.diagnostic button{font-size:9px;padding:3px 6px;margin-top:5px;display:block}.test-report{font-size:10px;background:#f1f5eb;padding:10px;border-radius:8px;margin-top:10px;line-height:1.8}.test-report b{display:block;margin-bottom:5px}.test-report div{display:flex;justify-content:space-between;gap:8px}.test-report .warn{color:#a07138}.test-report .pass{color:var(--green)}footer{margin:24px 3vw;display:flex;justify-content:space-between;gap:20px;font-size:9px;color:#98a28f;line-height:1.6}#toast{position:fixed;bottom:22px;left:50%;transform:translate(-50%,20px);padding:12px 20px;background:#263f32;color:#f3f9ed;border-radius:10px;box-shadow:0 5px 20px #223c3220;opacity:0;transition:.2s;pointer-events:none;font-size:12px;z-index:100;max-width:90vw}#toast.visible{opacity:1;transform:translate(-50%,0)}dialog{border:1px solid var(--line);border-radius:18px;padding:25px;width:min(760px,92vw);max-height:88vh;color:var(--ink);background:#fbfdf7;box-shadow:0 20px 90px #243e3320}dialog::backdrop{background:#1c352b88;backdrop-filter:blur(3px)}.dialog-heading{display:flex;align-items:center;justify-content:space-between}.dialog-heading h2{margin:8px 0;font-size:23px;letter-spacing:-.7px}.dialog-heading button{font-size:22px;padding:0 9px}.dialog-heading+p{font-size:12px;color:var(--muted);line-height:1.6}pre{background:#203c30;color:#dbefbb;padding:22px;border-radius:11px;font-size:11px;line-height:1.8;white-space:pre;overflow:auto;max-height:52vh}.dialog-actions{display:flex;justify-content:flex-end;gap:8px;font-size:11px}.fine-print{font-size:10px;color:var(--muted);line-height:1.7;margin-bottom:0}.guide{padding-left:24px;font-size:12px;line-height:1.8}.guide li{padding:7px 0}.help-tip{padding:12px;background:#eef5e1;border-radius:8px;font-size:11px;line-height:1.7}
.panel{min-width:0}.tree-tools select{min-width:0}.widget-card,.node-select{touch-action:none;user-select:none}.dragging{user-select:none;cursor:grabbing!important}.dragging .canvas-widget{pointer-events:none}#drag-ghost{position:fixed;z-index:200;pointer-events:none;background:#28664d;color:#fff;border:1px solid #ddf6a3;border-radius:8px;padding:9px 16px;font:12px monospace;box-shadow:0 5px 15px #23392a30}
@media(max-width:570px){.editor>.panel{width:100%;max-width:100%}}
@media(min-width:1600px){.studio,.page-heading{max-width:1550px;margin-left:auto;margin-right:auto}.studio{grid-template-columns:240px minmax(420px,1fr) 460px;gap:22px}.phone-stage{min-height:460px}}@media(max-width:1150px){.studio{grid-template-columns:180px minmax(270px,1fr) minmax(290px,330px);gap:12px;margin:0 2vw}.topbar{padding:0 2vw}.page-heading{margin-left:2vw;margin-right:2vw}.panel-title{padding:15px 13px 12px}.panel-description{margin-left:13px;margin-right:13px}.card-text small{font-size:8px}.widget-card{gap:7px;padding:7px 5px}.card-symbol{width:24px;height:25px}.tree-tools{padding:10px}.tree-tools label{display:none}.tree-tools select{flex:1}.node-select small{max-width:75px}.header-actions #save-state{display:none}.mode-pill{margin-left:auto}.header-actions{margin-left:0}.topbar{gap:20px}.wrap-tools>span{width:100%}}@media(max-width:900px){.studio{grid-template-columns:175px 1fr}.preview-panel{grid-column:span 2;position:static;display:grid;grid-template-columns:1fr 1fr}.preview-panel>.panel-title,.preview-toolbar{grid-column:span 2}.phone-stage{grid-row:span 2}.size-controls{padding:23px}.test-area{align-self:start}.page-heading h1{font-size:26px}.page-heading p{font-size:11px}.node-select small{max-width:180px}.wrap-tools>span{width:auto}.mode-pill{display:none}.header-actions{margin-left:auto}}@media(max-width:570px){.topbar{height:70px;padding:0 14px;gap:6px}.brand{font-size:20px}.brand-mark{font-size:32px}.brand small{font-size:6px}.header-actions button{padding:5px 7px}.header-actions .primary{padding:8px;font-size:10px}.page-heading{margin:23px 15px 18px;align-items:flex-start;gap:10px}.page-heading h1{font-size:25px;line-height:1.25;max-width:280px}.page-heading p{font-size:10px}#help{font-size:10px;white-space:normal;max-width:75px}.studio{display:flex;flex-direction:column;margin:0 12px}.studio>*{width:100%}.library{max-height:260px;overflow:auto}.library .panel-description,.library-note,.library .docs-link{display:none}#palette{display:flex;gap:5px;padding:0 10px}.palette-group{padding:0;min-width:145px;margin:0 0 10px}.widget-card{padding:7px}.library .panel-title{position:sticky;top:0;z-index:2;background:white}.editor{display:contents}.tree-panel{order:1}.inspector{order:3}.quests{order:4}.preview-panel{order:2;display:block}.preview-toolbar{font-size:10px}#tree{max-height:340px}.phone-stage{min-height:410px}.size-controls{padding:16px}.wrap-tools>span{width:auto}.panel{border-radius:12px}.page-heading .eyebrow{font-size:8px}footer{font-size:8px;flex-direction:column;gap:3px;margin:18px}dialog{padding:19px}pre{padding:15px;font-size:10px}}