@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{font-family:'DM Sans',sans-serif;color:#f4f4f1;background:#111318;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-width:320px}button,input,textarea,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.55;cursor:not-allowed}.app-shell{min-height:100vh;display:flex;flex-direction:column}.topbar{height:70px;flex:none;display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid #292b31;padding:0 24px;background:#17191f}.brand{display:flex;align-items:center;gap:9px;font-family:'Space Grotesk',sans-serif;font-size:21px;font-weight:700;letter-spacing:-1.2px;min-width:244px}.brand-mark{width:29px;height:29px;background:#c5f36a;color:#1c2215;border-radius:8px;display:grid;place-items:center;font-size:22px;line-height:1}.brand-dot{color:#c5f36a}.beta{font:700 9px 'DM Sans';letter-spacing:1.2px;border:1px solid #4a4e4b;color:#aab2a0;border-radius:4px;padding:3px 5px;margin-left:2px}.project-name{display:flex;align-items:center;gap:10px;min-width:200px}.project-icon{color:#c5f36a}.project-name input{border:0;background:transparent;color:#e7e7e5;font-weight:700;max-width:220px;outline:0}.saved{color:#74777b;font-size:11px;white-space:nowrap}.top-actions{display:flex;gap:9px;align-items:center}.button{border:1px solid transparent;border-radius:9px;padding:10px 15px;font-size:12px;font-weight:800;white-space:nowrap;transition:transform .2s,background .2s}.button:hover{transform:translateY(-1px)}.button.ghost{background:transparent;color:#a5a6a9;border-color:#3b3e44}.button.light{background:#2b2e35;color:#f4f4f1}.button.primary{background:#c5f36a;color:#18200e}.button.primary:hover{background:#d4ff82}.workspace{display:grid;grid-template-columns:255px minmax(420px,1fr) 326px;flex:1;min-height:calc(100vh - 70px)}.sidebar{background:#191b21}.left-panel{border-right:1px solid #2a2d34;padding:28px 19px;display:flex;flex-direction:column}.panel-kicker{font-size:10px;font-weight:800;letter-spacing:1.5px;color:#c5f36a}.left-panel h1{font-family:'Space Grotesk';font-size:29px;line-height:1.12;letter-spacing:-1.5px;margin:18px 0 12px}.left-panel h1 em{font-style:normal;color:#c5f36a}.intro{font-size:12px;color:#92949a;line-height:1.6;margin:0 0 33px}.section-title{display:flex;justify-content:space-between;color:#a2a5a8;font-size:10px;font-weight:800;letter-spacing:1.15px;margin-bottom:12px}.section-title span:last-child{font-size:16px;line-height:8px;color:#74777b}.add-card{width:100%;display:flex;align-items:center;gap:11px;background:#24262d;border:1px solid #34363d;border-radius:11px;color:#f5f6f3;text-align:left;padding:10px;margin-bottom:9px}.add-card:hover{border-color:#c5f36a;background:#2a2e30}.add-card>span:nth-child(2){display:flex;flex-direction:column;gap:2px;flex:1}.add-card strong{font-size:12px}.add-card small{font-size:10px;color:#989ba0}.add-icon{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;font-size:19px;color:#181a1d}.add-icon.pink{background:#efb8d3}.add-icon.yellow{background:#f7d276}.plus{font-size:20px;color:#82858a}.left-bottom{margin-top:auto}.guide{display:flex;gap:10px;background:#25282b;border-radius:12px;padding:13px;margin:25px 0}.guide-icon{color:#c5f36a;font-size:18px}.guide strong{font-size:11px}.guide p{font-size:10px;line-height:1.55;color:#9b9fa1;margin:5px 0 0}.hackathon-tag{font-size:9px;color:#929c90;line-height:1.8;border-top:1px solid #30333a;padding-top:14px;letter-spacing:.6px}.hackathon-tag span:last-child{display:block;margin-left:14px;color:#626a65}.status-dot,.live-dot{display:inline-block;width:6px;height:6px;background:#c5f36a;border-radius:50%;margin-right:6px}.editor-area{min-width:0;background:#13151a;display:flex;flex-direction:column;position:relative}.editor-toolbar{height:58px;border-bottom:1px solid #2a2d34;display:flex;align-items:center;justify-content:space-between;padding:0 25px;font-size:12px}.editor-toolbar strong{font-size:12px}.toolbar-sub{margin-left:12px;color:#74777d;font-size:11px}.toolbar-right{display:flex;align-items:center;gap:15px;color:#8f9196;font-size:10px}.icon-button{color:#bfc2c1;background:#292c32;border:1px solid #41444b;border-radius:7px;font-size:17px;line-height:1;width:28px;height:27px}.canvas-scroll{flex:1;overflow:auto;min-height:490px;scrollbar-color:#454850 transparent;scrollbar-width:thin}.node-canvas{position:relative;min-width:1100px;min-height:730px;background-color:#15171d;background-image:radial-gradient(#353840 1px,transparent 1px);background-size:21px 21px}#connections{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.wire{fill:none;stroke:#a1bd75;stroke-width:2.5;opacity:.85}.wire-muted{stroke:#52575a;stroke-dasharray:6 5}.node{position:absolute;width:195px;min-height:158px;border:1px solid #44474d;border-radius:13px;background:#24272e;box-shadow:0 12px 28px #0004;user-select:none;touch-action:none;cursor:grab}.node:active{cursor:grabbing}.node.selected{border-color:#c5f36a;box-shadow:0 0 0 2px #c5f36a33,0 17px 36px #0007}.node-header{height:34px;border-radius:12px 12px 0 0;display:flex;align-items:center;gap:8px;padding:0 11px;font-size:10px;font-weight:800;letter-spacing:.6px;text-transform:uppercase}.node-header .number{margin-left:auto;opacity:.55;font-size:10px}.node.scene .node-header{background:#3e313d;color:#f5c8df}.node.cta .node-header{background:#41402e;color:#ffe7a0}.node.start .node-header{background:#324038;color:#c5f36a}.node.end .node-header{background:#343640;color:#cbd0df}.node-body{padding:12px}.node-label{color:#868b91;font-size:9px;font-weight:800;letter-spacing:.8px;text-transform:uppercase}.node h3{font-size:14px;line-height:1.2;margin:6px 0 6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:'Space Grotesk'}.node p{color:#989ca1;font-size:10px;line-height:1.4;margin:0;max-height:28px;overflow:hidden}.node-foot{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #3a3d43;margin:12px -12px -12px;padding:9px 12px;color:#aaaeb1;font-size:9px}.mini-preview{width:20px;height:20px;border-radius:5px}.port{width:14px;height:14px;background:#aabe87;border:3px solid #2c322b;border-radius:50%;position:absolute;top:82px;z-index:2;cursor:crosshair}.port:hover,.port.active{background:#d6ff85;box-shadow:0 0 0 5px #c5f36a33}.port.in{left:-8px}.port.out{right:-8px}.canvas-hint{position:absolute;bottom:152px;left:22px;font-size:10px;color:#6f7479;pointer-events:none}.timeline-wrap{height:135px;flex:none;background:#1b1d23;border-top:1px solid #30333a;padding:17px 22px;overflow:hidden}.timeline-heading{display:flex;justify-content:space-between;font-size:10px;letter-spacing:1px;color:#989da0}.timeline-heading span{letter-spacing:0;color:#6f7479}.timeline{display:flex;gap:4px;margin-top:14px;overflow:auto;scrollbar-width:thin}.timeline-item{flex:1;min-width:75px;height:55px;border:1px solid #43464d;border-radius:7px;background:#2b2e35;color:#fff;position:relative;text-align:left;padding:9px 10px;font-size:10px;overflow:hidden}.timeline-item:hover,.timeline-item.active{border-color:#c5f36a}.timeline-item::before{content:'';position:absolute;top:0;left:0;bottom:0;width:3px;background:var(--accent)}.timeline-item span{display:block;color:#a0a4a8;font-size:9px;margin-top:4px}.right-panel{border-left:1px solid #2b2e35;overflow:auto;max-height:calc(100vh - 70px);scrollbar-width:thin}.panel-tabs{display:flex;gap:22px;border-bottom:1px solid #30333a;padding:0 22px}.tab{border:0;background:transparent;padding:20px 0 16px;color:#888d91;font-size:12px;font-weight:800;border-bottom:2px solid transparent}.tab.active{color:#e9efe2;border-color:#c5f36a}#inspector{padding:22px}.inspector-head{display:flex;align-items:center;gap:12px;margin-bottom:20px}.inspector-icon{width:39px;height:39px;border-radius:10px;display:grid;place-items:center;font-size:21px;color:#24251d;background:#efb8d3}.inspector-head small{display:block;color:#8e9296;font-size:10px;font-weight:700;letter-spacing:1px}.inspector-head h2{font-size:17px;font-family:'Space Grotesk';margin:3px 0 0}.form-group{margin:17px 0}.form-group label{display:block;color:#aeb3b3;font-size:10px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;margin-bottom:8px}.form-group input:not([type=file]):not([type=color]),.form-group textarea,.form-group select{width:100%;background:#282b31;border:1px solid #3d4148;border-radius:8px;color:#f0f1ed;padding:10px 11px;font-size:12px;outline:0;resize:vertical}.form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:#c5f36a}.form-group textarea{min-height:66px}.form-group small{display:block;color:#757c7f;font-size:10px;line-height:1.4;margin-top:6px}.color-row{display:flex;align-items:center;gap:10px}.color-row input[type=color]{border:0;background:transparent;width:38px;height:38px;cursor:pointer}.color-row span{color:#aab0b1;font-size:11px}.duration-row{display:flex;gap:10px;align-items:center}.duration-row input{flex:1}.duration-row span{font-size:11px;color:#aab0b1;white-space:nowrap}.upload-box{position:relative;border:1px dashed #5a5f65;border-radius:9px;min-height:74px;display:flex;align-items:center;justify-content:center;gap:8px;color:#bdc5ba;font-size:11px;text-align:center;padding:10px;cursor:pointer;background:#24272c}.upload-box:hover{border-color:#c5f36a}.upload-box input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}.upload-box img{max-height:70px;max-width:55px;object-fit:cover;border-radius:4px}.inspector-divider{height:1px;background:#343840;margin:22px 0}.inspector-actions{display:flex;gap:9px}.mini-button{flex:1;border:1px solid #43484e;background:#2b2e34;color:#eceeeb;border-radius:8px;padding:10px;font-weight:700;font-size:10px}.mini-button.danger{color:#f1abb3}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:400px;color:#898e90}.empty-state .empty-graphic{height:72px;width:72px;border-radius:20px;background:#2e3430;color:#c5f36a;display:grid;place-items:center;font-size:31px}.empty-state h3{color:#e6e9e3;font-family:'Space Grotesk';margin:18px 0 4px}.empty-state p{font-size:12px;line-height:1.5;max-width:195px}.preview-pane{text-align:center}.preview-pane h2{font-family:'Space Grotesk';font-size:18px}.preview-pane p{color:#9a9fa1;font-size:12px;line-height:1.5}.preview-mini{width:156px;height:278px;margin:22px auto;border:7px solid #353940;border-radius:24px;overflow:hidden;background:#151717}.preview-mini .scene-visual{height:100%;border-radius:16px}.toast{position:fixed;bottom:22px;left:50%;transform:translate(-50%,15px);background:#d5f6a6;color:#16200e;border-radius:9px;padding:11px 16px;font-size:12px;font-weight:800;opacity:0;pointer-events:none;z-index:40;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}.modal-backdrop{position:fixed;inset:0;background:#0a0b0ddd;z-index:30;display:grid;place-items:center;padding:20px}.modal-backdrop[hidden]{display:none}.preview-modal{width:min(480px,100%);max-height:94vh;overflow:auto;background:#202329;border:1px solid #3a3f42;border-radius:17px;box-shadow:0 30px 80px #000a;padding:20px}.modal-top{display:flex;justify-content:space-between;align-items:start}.modal-top h2{font-family:'Space Grotesk';font-size:18px;margin:5px 0 15px}.close-button{background:#35383e;border:0;border-radius:8px;color:#eee;font-size:22px;line-height:28px;width:30px;height:30px}.preview-stage{background:#15171b;border-radius:12px;padding:16px;display:grid;place-items:center}.phone-frame{height:min(49vh,440px);aspect-ratio:9/16;border:7px solid #40434a;border-radius:28px;padding:3px;background:#161719;box-shadow:0 12px 35px #0008}.phone-screen{height:100%;border-radius:18px;overflow:hidden}.scene-visual{position:relative;height:100%;width:100%;padding:10%;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;color:#fff;background:radial-gradient(circle at 80% 0%,#ffffff55,transparent 45%),linear-gradient(145deg,var(--accent),#131824 85%)}.scene-visual:after{content:'';position:absolute;right:-30%;bottom:-27%;width:115%;aspect-ratio:1;border:1px solid #ffffff44;border-radius:50%;box-shadow:0 0 0 35px #ffffff12,0 0 0 74px #ffffff09}.scene-visual .visual-top,.scene-visual .visual-bottom{z-index:2}.visual-top{display:flex;justify-content:space-between;align-items:start;gap:5px;font-weight:800;font-size:clamp(7px,1vw,11px);letter-spacing:.05em}.visual-pill{border:1px solid #ffffff99;border-radius:30px;padding:4px 7px;font-size:.8em}.visual-bottom h2{font-family:'Space Grotesk';font-size:clamp(18px,3vw,32px);line-height:1.04;letter-spacing:-.04em;margin:0 0 7px}.visual-bottom p{font-size:clamp(8px,1vw,12px);line-height:1.35;max-width:90%;margin:0 0 12px;color:#f4f5f2df}.visual-cta{display:inline-block;border-radius:5px;background:#c5f36a;color:#1c2912;padding:8px 11px;font-size:clamp(8px,1vw,11px);font-weight:800}.visual-shot{z-index:1;position:absolute;left:20%;top:25%;width:60%;height:45%;border:5px solid #171a20;border-radius:16px;background:#f6f7f3;box-shadow:0 15px 30px #0007;object-fit:cover;object-position:top}.visual-orb{position:absolute;left:28%;top:24%;width:50%;aspect-ratio:1;border-radius:28%;transform:rotate(-20deg);background:#ffffff30;box-shadow:0 25px 50px #0003;z-index:1}.preview-controls{display:flex;align-items:center;gap:11px;margin:15px 0}.round-play{border:0;color:#1a2411;background:#c5f36a;width:31px;height:31px;flex:none;border-radius:50%;font-size:12px}.progress-track{height:5px;background:#44494a;border-radius:5px;flex:1;overflow:hidden}.progress-track div{height:100%;width:0;background:#c5f36a}.preview-controls span{font-size:10px;color:#a9adae;white-space:nowrap}.modal-footer{display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px solid #34383d;padding-top:15px}.modal-footer span{color:#858c8c;font-size:10px}@media(max-width:1120px){.workspace{grid-template-columns:215px minmax(350px,1fr) 290px}.brand{min-width:190px}.left-panel{padding:24px 14px}.topbar{padding:0 15px;gap:10px}}@media(max-width:900px){.workspace{grid-template-columns:185px minmax(0,1fr)}.right-panel{grid-column:1/-1;max-height:none;border-left:0;border-top:1px solid #333;min-height:250px}.left-panel h1{font-size:25px}.saved{display:none}}@media(max-width:600px){.topbar{height:61px}.brand{min-width:0;font-size:18px}.brand .beta,.project-name,.button.ghost,.button.light span,.button.primary span{display:none}.top-actions .button{padding:9px}.workspace{display:flex;flex-direction:column}.left-panel{border-right:0;border-bottom:1px solid #30333a;padding:16px}.left-panel h1,.left-panel .intro,.left-bottom{display:none}.section-title{margin:10px 0}.add-card{width:49%;display:inline-flex;vertical-align:top}.add-card small{display:none}.editor-area{min-height:640px}.canvas-scroll{min-height:460px}.right-panel{max-height:none}.canvas-hint{display:none}}