.page{min-height:100vh;padding:50px}.templates-page{display:block;overflow-y:auto}.hero{text-align:center;max-width:900px;margin:0 auto 60px}h1{font-size:54px}.start-paths{grid-template-columns:repeat(2,1fr);gap:22px;max-width:1200px;margin:0 auto 60px;display:grid}.path-card{background:#111827;border:1px solid #38bdf84d;border-radius:18px;padding:28px;box-shadow:0 0 18px #38bdf814}.path-card--blank{border-color:#8b5cf673;box-shadow:0 0 18px #8b5cf61f}.path-label{color:#38bdf8;text-transform:uppercase;letter-spacing:.04em;margin:0 0 8px;font-size:13px;font-weight:700}.path-card--blank .path-label{color:#a78bfa}.path-card h2{margin:0 0 12px;font-size:28px}.path-description{color:#b8b8c7;margin:0 0 22px;font-size:16px;line-height:1.5}.path-btn{cursor:pointer;border:none;border-radius:10px;padding:12px 18px;font-weight:700;text-decoration:none;display:inline-block}.path-btn--primary{color:#fff;background:#8b5cf6}.path-btn--primary:hover{background:#7c3aed}.path-btn--secondary{color:#000;background:#fff}.home-page .start-paths{margin-bottom:0}.page-header{text-align:center;max-width:1200px;margin:0 auto 40px}.page-header h1{margin:16px 0 12px}.back-link-btn{color:#38bdf8;background:0 0;border:1px solid #38bdf859;padding:10px 16px}.templates-section{max-width:1200px;margin:0 auto}.template-category{margin-bottom:55px}.template-category h2{text-align:center;margin-bottom:18px;font-size:30px}.template-grid{grid-template-columns:repeat(2,1fr);gap:22px;max-width:1200px;margin:0 auto;display:grid}.template-card{background:#111827;border:1px solid #38bdf84d;border-radius:18px;overflow:hidden;box-shadow:0 0 18px #38bdf814}.template-card:hover{transform:translateY(-4px);box-shadow:0 0 20px #38bdf840}.preview{background:radial-gradient(circle at 0 0,#38bdf82e,#0000 45%),linear-gradient(135deg,#111827,#1e293b);height:210px;position:relative}.social-preview{background:#ffffff0f;border-radius:14px;justify-content:space-around;padding:14px;font-size:13px;font-weight:700;display:flex;position:absolute;bottom:25px;left:18px;right:18px}.webcam-preview{color:#aaa;border:4px solid;border-radius:18px;place-items:center;width:180px;height:110px;font-weight:700;display:grid;position:absolute;top:35px;right:35px}.chat-preview{background:#00000073;border:2px solid;border-radius:14px;width:230px;padding:12px;position:absolute;bottom:20px;left:25px}.chat-preview p{margin:5px 0;font-size:13px}.alert-preview{text-align:center;background:#0000008c;border:3px solid;border-radius:18px;width:230px;padding:18px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.alert-preview h4,.alert-preview p{margin:5px 0}.media-preview{background:#00000080;border:3px solid;border-radius:16px;place-items:center;width:230px;height:130px;display:grid;position:absolute;top:35px;left:35px}.play-button{font-size:34px}.template-info{justify-content:space-between;align-items:center;padding:18px;display:flex}.template-info h3{margin:0}.template-info p{color:#a1a1aa;margin:5px 0 0}button{color:#000;cursor:pointer;background:#fff;border:none;border-radius:10px;padding:10px 14px;font-weight:700}.editor-page{color:#fff;background:#090910;grid-template-rows:minmax(0,1fr);grid-template-columns:500px 1fr;height:100vh;display:grid;overflow:hidden}.controls{background:#11111a;border-right:1px solid #38bdf833;flex-direction:column;min-height:0;display:flex;overflow:hidden}.controls-scroll{overscroll-behavior:contain;scrollbar-gutter:stable;flex-direction:column;flex:1;gap:9px;min-height:0;padding:18px;scroll-padding-bottom:24px;display:flex;overflow-y:auto}.controls-scroll input,.controls-scroll select{color:#fff;background:#090910;border:1px solid #333;border-radius:10px;padding:12px}.controls-scroll label{color:#b8b8c7;font-size:14px}.checkbox-label{cursor:pointer;align-items:center;gap:8px;display:flex}.checkbox-label input[type=checkbox]{cursor:pointer;width:auto}.export-hint{color:#71717a;margin:0;font-size:12px}.export-error{color:#f87171;margin:0;font-size:13px}.download-btn:disabled{opacity:.6;cursor:not-allowed}.download-btn{color:#38bdf8;cursor:pointer;background:#38bdf81f;border:1px solid #38bdf84d;border-radius:12px;width:100%;margin-top:14px;padding:12px;font-weight:800}.download-btn:hover{background:#38bdf838;box-shadow:0 0 18px #38bdf840}.editor-preview{background:#070b14;place-items:center;min-height:0;padding:20px;display:grid;overflow:hidden}.overlay-canvas{aspect-ratio:16/9;isolation:isolate;border:1px solid #38bdf859;border-radius:18px;width:min(90vw,950px);position:relative;overflow:hidden;box-shadow:0 0 35px #38bdf82e}.overlay-canvas:before{content:"";pointer-events:none;z-index:0;background:radial-gradient(circle,#38bdf814,#0000 55%),linear-gradient(135deg,#0b1120,#111827);position:absolute;inset:0}.overlay-export-surface{z-index:1;isolation:isolate;width:100%;height:100%;position:relative}.overlay-export-surface--editable{pointer-events:auto;touch-action:none;overflow:visible}.overlay-export-surface.exporting{z-index:-1;pointer-events:none;position:fixed;top:0;left:0}.template-element{z-index:1;position:absolute}.template-element .canvas-element-content{position:relative;inset:auto;transform:none}.canvas-rnd{box-sizing:border-box;cursor:move;border:2px solid #38bdf88c;pointer-events:auto!important}.canvas-rnd.is-selected{border:2px solid #38bdf8;box-shadow:0 0 0 2px #38bdf859}.canvas-rnd.is-brush-editing{cursor:crosshair;border:2px solid #c4b5fd;box-shadow:0 0 0 2px #c4b5fd73}.canvas-rnd.is-brush-editing .canvas-rnd-inner{pointer-events:auto}.canvas-rnd-inner{box-sizing:border-box;-webkit-user-select:none;user-select:none;pointer-events:none;width:100%;height:100%;overflow:hidden}.canvas-rnd-inner--image{background-color:#171722;background-image:linear-gradient(45deg,#262636 25%,#0000 25%),linear-gradient(-45deg,#262636 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#262636 75%),linear-gradient(-45deg,#0000 75%,#262636 75%);background-position:0 0,0 7px,7px -7px,-7px 0;background-size:14px 14px}.canvas-rnd-handle{cursor:se-resize;pointer-events:auto!important}.canvas-fill{box-sizing:border-box}.canvas-fill.editor-social-only{white-space:nowrap;justify-content:center;align-items:center;gap:clamp(6px,2%,20px);font-size:clamp(10px,2.2vw,22px);display:flex;position:relative;bottom:auto;left:auto;right:auto;overflow:hidden;transform:none}.canvas-fill.editor-webcam-only{width:100%;height:100%;font-size:clamp(14px,4vw,28px);position:relative;top:auto;right:auto}.canvas-fill.editor-chatbox-only{width:100%;height:100%;font-size:clamp(12px,2.5vw,20px);position:relative;bottom:auto;left:auto;overflow:auto}.canvas-fill.editor-alertbox-only{flex-direction:column;justify-content:center;width:100%;height:100%;display:flex;position:relative;top:auto;left:auto;overflow:hidden;transform:none}.canvas-fill.editor-media-only{width:100%;height:100%;font-size:clamp(12px,2.5vw,22px);position:relative;top:auto;left:auto}.canvas-fill.editor-media-only .editor-play-button{font-size:clamp(24px,8vw,60px)}.canvas-fill.canvas-image{object-fit:contain;display:block}.canvas-fill.canvas-image-placeholder{width:100%;height:100%}.overlay-export-surface.exporting .canvas-rnd{box-shadow:none;cursor:default;border:none}.overlay-export-surface.exporting .canvas-rnd-handle{display:none!important}.element-meta{color:#71717a;margin:0;font-size:12px;line-height:1.4}.blank-canvas-hint{color:#71717a;text-align:center;pointer-events:none;place-items:center;margin:0;padding:24px;font-size:18px;display:grid;position:absolute;inset:0}.canvas-image-placeholder{color:#94a3b8;background:#00000059;border:2px dashed #38bdf880;border-radius:12px;place-items:center;font-size:14px;font-weight:700;display:grid}.canvas-image{object-fit:contain;background:0 0;border-radius:8px;display:block}.controls-section-title{color:#38bdf8;margin:14px 0 4px;font-size:15px}.add-element-grid{grid-template-columns:repeat(2,1fr);gap:8px;display:grid}.add-element-btn,.secondary-btn,.remove-element-btn{cursor:pointer;border-radius:10px;width:100%;padding:10px 12px;font-weight:700}.add-element-btn{color:#c4b5fd;background:#8b5cf626;border:1px solid #8b5cf659}.add-element-btn:hover{background:#8b5cf647}.secondary-btn{color:#38bdf8;background:#38bdf81f;border:1px solid #38bdf84d}.remove-element-btn{color:#f87171;background:#ef44441f;border:1px solid #ef444459;margin-top:6px}.hidden-file-input{display:none}.image-process-options{flex-direction:column;gap:6px;margin-bottom:8px;display:flex}.image-mode-panel{flex-direction:column;gap:9px;margin-bottom:8px;display:flex}.image-edge-brush{cursor:crosshair;touch-action:none;pointer-events:auto;width:100%;height:100%;display:block}.image-edge-brush--zoomed{width:auto;max-width:none;height:auto}.brush-zoom-overlay{z-index:40;background:#070b14f0;border-radius:18px;flex-direction:column;display:flex;position:absolute;inset:0;overflow:hidden}.brush-zoom-toolbar{background:#0f172ad9;border-bottom:1px solid #c4b5fd40;justify-content:space-between;align-items:center;gap:12px;padding:10px 14px;display:flex}.brush-zoom-label{color:#ddd6fe;font-size:13px;font-weight:700}.brush-zoom-hint{color:#94a3b8;font-size:12px}.brush-zoom-viewport{overscroll-behavior:contain;flex:1;min-height:0;overflow:auto}.brush-zoom-content{min-width:min-content;padding:16px;display:inline-block}.brush-zoom-content--image{background-color:#171722;background-image:linear-gradient(45deg,#262636 25%,#0000 25%),linear-gradient(-45deg,#262636 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#262636 75%),linear-gradient(-45deg,#0000 75%,#262636 75%);background-position:0 0,0 7px,7px -7px,-7px 0;background-size:14px 14px}.brush-zoom-presets{gap:6px;display:flex}.brush-zoom-preset-btn{color:#c4b5fd;cursor:pointer;background:#0f172acc;border:1px solid #c4b5fd40;border-radius:8px;flex:1;padding:6px 8px;font-size:12px;font-weight:700}.brush-zoom-preset-btn:hover{background:#8b5cf62e}.edge-brush-panel{border-top:1px solid #94a3b833;flex-direction:column;gap:8px;margin:14px 0 10px;padding-top:12px;display:flex}.edge-brush-heading{color:#c4b5fd;margin:0;font-size:14px}.brush-mode-row{gap:8px;display:flex}.brush-mode-btn{color:#ddd6fe;cursor:pointer;background:#0f172acc;border:1px solid #c4b5fd4d;border-radius:8px;flex:1;padding:8px 10px;font-size:13px;font-weight:700}.brush-mode-btn:hover{background:#8b5cf62e}.brush-mode-btn.is-active{color:#f5f3ff;background:#8b5cf647;border-color:#a78bfa}.brush-action-row{gap:8px;display:flex}.brush-action-row .primary-btn,.brush-action-row .secondary-btn{flex:1}.radio-label{color:#b8b8c7;cursor:pointer;align-items:center;gap:8px;font-size:14px;display:flex}.radio-label input[type=radio]{cursor:pointer;width:auto}.chroma-preset-row{flex-wrap:wrap;gap:6px;display:flex}.chroma-preset-btn{color:#bbf7d0;cursor:pointer;background:#0f172acc;border:1px solid #22c55e4d;border-radius:8px;flex:1;min-width:70px;padding:8px 10px;font-size:12px;font-weight:700}.chroma-preset-btn:hover{background:#22c55e24}.chroma-preset-btn.is-active{color:#ecfccb;background:#22c55e3d;border-color:#22c55e}.badge-size-heading{color:#c4b5fd;margin:16px 0 4px;font-size:14px}.badge-size-group-label{color:#94a3b8;text-transform:uppercase;letter-spacing:.04em;margin:10px 0 6px;font-size:12px;font-weight:700}.badge-preset-grid{grid-template-columns:repeat(3,1fr);gap:6px;display:grid}.badge-preset-btn{color:#cbd5e1;cursor:pointer;background:#0f172acc;border:1px solid #38bdf840;border-radius:8px;padding:8px 6px;font-size:12px;font-weight:700}.badge-preset-btn:hover{background:#38bdf824;border-color:#38bdf873}.badge-preset-btn.is-active{color:#e0f2fe;background:#38bdf838;border-color:#38bdf8;box-shadow:0 0 12px #38bdf833}.badge-size-meta{color:#71717a;margin:8px 0 0;font-size:12px}.obs-guide{color:#b8b8c7;margin-top:8px;font-size:13px}.obs-guide summary{cursor:pointer;color:#38bdf8;font-weight:700}.obs-guide ol{margin:10px 0 0;padding-left:20px;line-height:1.6}.editor-social-only{white-space:nowrap;justify-content:center;gap:28px;width:100%;font-size:clamp(14px,2vw,24px);font-weight:800;display:flex;position:absolute;bottom:0%;left:50%;transform:translate(-50%)}.editor-webcam-only{color:#aaa;border-style:solid;border-radius:24px;place-items:center;width:360px;height:220px;font-size:28px;font-weight:900;display:grid;position:absolute;top:60px;right:60px}.editor-chatbox-only{border-style:solid;border-radius:20px;width:360px;padding:20px;font-size:20px;position:absolute;bottom:50px;left:50px}.editor-chatbox-only p{margin:10px 0}.editor-alertbox-only{text-align:center;border-style:solid;border-radius:28px;width:420px;padding:30px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.editor-alertbox-only h2,.editor-alertbox-only p{margin:8px 0}.editor-media-only{text-align:center;border-style:solid;border-radius:24px;place-items:center;width:470px;height:280px;font-size:22px;display:grid;position:absolute;top:70px;left:80px}.editor-play-button{font-size:60px}@media (width<=900px){.start-paths,.template-grid,.add-element-grid,.editor-page{grid-template-columns:1fr}}html.obs-route-active,body.obs-route-active{background:0 0;width:100%;height:100%;margin:0;padding:0;overflow:hidden}body.obs-route-active #root{background:0 0}.obs-page{background:0 0;width:100vw;height:100vh;overflow:hidden}.obs-viewport{background:0 0;position:relative;overflow:hidden}.obs-canvas{transform-origin:0 0;background:0 0;position:absolute;top:0;left:0}.obs-static-element{position:absolute;overflow:hidden}.obs-error-page{text-align:center;color:#94a3b8;background:#090910;place-items:center;width:100vw;height:100vh;padding:24px;font-family:Arial,sans-serif;display:grid}.obs-error-page p{margin:8px 0}body{color:#fff;background:#090910;margin:0;font-family:Arial,sans-serif}.page{min-height:100vh}.hero{max-width:850px;padding:40px}.badge{color:#9b5cff;font-weight:700}h1{margin:20px 0;font-size:64px}.subtitle{color:#b8b8c7;font-size:22px}.buttons{margin-top:30px}button{cursor:pointer;border:none;border-radius:12px;margin:8px;padding:14px 22px;font-weight:700}.secondary{color:#fff;background:0 0;border:1px solid #555}