@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--bg:#11212D;--panel:#11212D;--panel2:#11212D;--border:#253745;--border2:#253745;--muted:#9BA8AB;--text:#CCD0CF;--soft:#CCD0CF;--gold:#9BA8AB;--blue:#9BA8AB;--blue2:#4A5C6A;--red:#e66169;--green:#50cb9d;--font:'DM Sans',system-ui,-apple-system,Segoe UI,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--bg);color:var(--text);font:14px/1.45 var(--font);margin:0;min-height:100vh}button,input,textarea{font:inherit}button{cursor:pointer;color:inherit}button:disabled{cursor:not-allowed;opacity:.42}button:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:Manrope,var(--font)}h2{font-size:17px;font-weight:800;margin-bottom:7px}h3{font-size:13px;font-weight:800;margin-bottom:12px}p{color:var(--muted)}.app-shell{display:flex;min-height:100vh}.rail{width:75px;flex:none;background:#11212D;border-right:1px solid var(--border);display:flex;flex-direction:column;align-items:center;gap:14px;padding:24px 9px;position:sticky;top:0;height:100vh;z-index:4}.rail-logo{border:1px solid #4A5C6A;border-radius:15px;width:48px;height:48px;overflow:hidden}.rail-logo img{width:100%;height:100%;object-fit:cover}.rail-separator{width:32px;border-bottom:1px solid var(--border);margin:5px 0}.rail-btn{background:none;border:1px solid transparent;width:58px;padding:10px 0 7px;border-radius:10px;display:flex;align-items:center;flex-direction:column;gap:4px;color:#9BA8AB}.rail-btn span{font-size:25px;line-height:1.1}.rail-btn small{font-size:10px}.rail-btn:hover,.rail-btn.is-active{background:#253745;color:#CCD0CF;border-color:#4A5C6A}.rail-bottom{margin-top:auto}.app-main{min-width:0;flex:1}.topbar{height:81px;border-bottom:1px solid var(--border);background:#11212D;display:flex;align-items:center;justify-content:space-between;padding:0 30px;gap:20px}.brand-line,.top-actions,.brand-stacked,.record-actions,.stage-meta,.source-btn,.btn{display:flex;align-items:center}.brand-line{gap:24px}.brand-stacked{flex-direction:column;align-items:flex-start;gap:0}.brand-stacked strong{letter-spacing:.07em;font-size:18px;font-weight:800}.brand-stacked em{font-style:normal;color:var(--gold)}.brand-stacked small{font-size:9px;letter-spacing:.2em;color:#9BA8AB}.top-divider{width:1px;height:32px;background:var(--border)}.top-product{color:#9BA8AB;font-size:13px}.top-actions{gap:11px}.saved{font-size:12px;color:#9BA8AB;margin-right:11px}.save-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin-right:5px}.btn{gap:8px;justify-content:center;border-radius:10px;border:1px solid var(--border2);padding:10px 14px;font-size:12px;font-weight:750;background:#253745;white-space:nowrap}.btn:hover{filter:brightness(1.19)}.btn-quiet{background:transparent;border-color:transparent;color:var(--soft)}.btn-outline{background:#11212D}.btn-dark{background:#253745}.btn-success{background:#146c59;border-color:#319679;color:white}.btn-icon{font-size:18px}.workspace{display:grid;grid-template-columns:minmax(242px,270px) minmax(480px,1fr) minmax(260px,286px);min-height:calc(100vh - 81px)}.left-panel,.right-panel{background:#11212D;padding:29px 19px;border-right:1px solid var(--border)}.right-panel{border-right:0;border-left:1px solid var(--border)}.panel-eyebrow,.eyebrow,.strip-label,.setting-subhead,.input-label{font-weight:800;letter-spacing:.13em;font-size:10px;color:var(--gold);margin-bottom:10px}.subdued{font-size:12px;line-height:1.6;margin-bottom:22px}.template-list{display:flex;flex-direction:column;gap:9px}.template-card{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:11px;background:#11212D;border:1px solid #253745;border-radius:12px;transition:.16s}.template-card:hover{border-color:#9BA8AB;transform:translateX(2px)}.template-card.is-active{border-color:#9BA8AB;background:#253745;box-shadow:0 0 0 1px #4A5C6A inset}.template-icon{background:#253745;border-radius:10px;min-width:43px;height:42px;font-size:25px;display:flex;align-items:center;justify-content:center;color:#CCD0CF}.template-card.is-active .template-icon{background:#4A5C6A;color:#fff}.template-copy{min-width:0;display:flex;flex-direction:column;gap:4px}.template-copy strong{font-size:12px;font-weight:800}.template-copy small{font-size:10px;color:#9BA8AB}.panel-divider{border-top:1px solid var(--border);margin:25px 0}.library-head{display:flex;align-items:center;justify-content:space-between}.library-head h3{font-size:15px}.round-plus{border:1px solid #4A5C6A;background:#253745;border-radius:100%;width:31px;height:31px;font-size:23px}.upload-zone{width:100%;display:flex;flex-direction:column;align-items:center;gap:8px;background:#11212D;border:1px dashed #4A5C6A;border-radius:14px;padding:23px 10px;color:#CCD0CF}.upload-zone:hover{border-color:var(--gold)}.upload-zone .upload-icon{font-size:24px;color:var(--gold)}.upload-zone strong{font-size:12px}.upload-zone small{font-size:10px;color:#9BA8AB;text-align:center}.file-info{display:flex;gap:10px;align-items:center;margin-top:13px;background:#253745;border:1px solid #4A5C6A;padding:10px;border-radius:10px}.file-glyph{font-size:23px}.file-meta{display:flex;flex-direction:column;min-width:0;flex:1}.file-meta strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}.file-meta small{color:#9BA8AB;font-size:10px}.file-remove{border:0;background:transparent;font-size:20px}.help-tip{display:flex;gap:10px;background:#253745;border-radius:10px;padding:14px;margin-top:25px}.help-tip span{color:var(--gold)}.help-tip p{font-size:11px;line-height:1.6;margin:0}.center-panel{padding:28px 26px 40px;min-width:0;background:radial-gradient(circle at 50% 10%,#11212D,#11212D 65%)}.workspace-heading{display:flex;gap:15px;align-items:center;justify-content:space-between;margin-bottom:25px}.eyebrow{font-size:9px;color:var(--gold)}.eyebrow span:last-child{color:#9BA8AB}.eyebrow-line{display:inline-block;width:26px;border-top:1px solid #4A5C6A;vertical-align:middle;margin:0 8px}.workspace-heading h1{font-size:26px;letter-spacing:-.045em;margin-bottom:4px}.workspace-heading p{font-size:12px;margin:0}.stage-status{display:flex;align-items:center;gap:8px;background:#253745;border:1px solid #253745;padding:8px 12px;border-radius:25px;font-size:11px;white-space:nowrap;color:#CCD0CF}.stage-status span:first-child{width:7px;height:7px;border-radius:50%;background:#46cb97}.sources-toolbar{display:flex;gap:12px;justify-content:space-between;align-items:center;margin-bottom:13px;flex-wrap:wrap}.toolset{display:flex;gap:8px}.source-btn{gap:7px;border:1px solid #4A5C6A;padding:9px 11px;border-radius:9px;background:#253745;font-size:11px;font-weight:700}.source-btn:hover{background:#253745}.source-btn span:first-child{font-size:16px}.source-btn.primary-action{background:#4A5C6A;color:#CCD0CF;border-color:#4A5C6A}.stage-meta{gap:10px;color:#9BA8AB;font-size:10px;white-space:nowrap}.small-divider{width:1px;height:14px;background:#4A5C6A}.stage-outer{width:100%;max-width:1040px;margin:0 auto}.stage{width:100%;position:relative;background:#06141B;border:1px solid #4A5C6A;border-radius:13px;overflow:hidden;user-select:none;touch-action:none;box-shadow:0 23px 58px #0007,0 0 0 5px #1b293933}.stage canvas{display:block;width:100%;height:100%;object-fit:fill}.stage.portrait{max-width:390px;margin:0 auto}.stage-top-label{position:absolute;z-index:1;top:18px;left:18px;display:flex;gap:7px;align-items:center;color:#CCD0CF;font-size:9px;letter-spacing:.13em;font-weight:800;background:#06101acc;padding:7px 10px;border:1px solid #3b527088;border-radius:6px;pointer-events:none}.live-indicator{width:6px;height:6px;background:#48d3a0;border-radius:50%}.recording-chip{position:absolute;right:15px;top:15px;padding:7px 9px;background:#a52d3b;color:white;border-radius:7px;z-index:5;font-size:11px;font-weight:900}.recording-pulse{display:inline-block;width:7px;height:7px;background:white;border-radius:50%;animation:blink 1s infinite}.recording-chip strong{font-variant-numeric:tabular-nums;margin-left:6px}@keyframes blink{50%{opacity:.2}}.webcam-handle{position:absolute;z-index:4;top:0;left:0;border:2px dashed #9BA8AB;border-radius:50%;cursor:grab;touch-action:none;box-shadow:0 0 0 1px #0006;pointer-events:auto}.webcam-handle:active{cursor:grabbing}.webcam-handle.square{border-radius:4px}.webcam-handle.rounded{border-radius:18px}.handle-pill{position:absolute;top:-23px;left:50%;transform:translateX(-50%);white-space:nowrap;background:#9BA8AB;color:#253745;padding:3px 7px;border-radius:5px;font-size:8px;font-weight:900}.resize-knob{position:absolute;width:11px;height:11px;background:#CCD0CF;bottom:-6px;right:-6px;border-radius:50%}.draw-cursor{position:absolute;pointer-events:none;z-index:10}.stage-bottom-caption{display:flex;justify-content:space-between;gap:12px;margin:12px 2px 0;color:#9BA8AB;font-size:10px}.tools-strip{margin-top:23px;display:flex;align-items:center;gap:15px;flex-wrap:wrap;padding:12px 13px;background:#11212D;border:1px solid var(--border);border-radius:13px}.strip-label{margin:0;color:#9BA8AB;font-size:9px;flex:none}.pen-tools{display:flex;align-items:center;gap:5px;flex:1}.draw-btn{background:transparent;border:1px solid transparent;border-radius:7px;display:flex;align-items:center;gap:6px;padding:8px 9px;font-size:12px;color:#9BA8AB}.draw-btn:hover,.draw-btn.active{color:#CCD0CF;background:#253745;border-color:#4A5C6A}.draw-btn span{font-size:10px}.draw-btn.icon-only{font-size:20px;padding:5px 10px}input[type=color]{width:30px;height:30px;background:none;border:0;padding:2px;cursor:pointer}.fullscreen-btn{background:none;border:0;font-size:20px;color:#9BA8AB;display:flex;gap:7px;align-items:center}.fullscreen-btn span{font-size:11px}.record-panel{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:18px;padding:20px;background:#11212D;border:1px solid #253745;border-radius:14px}.record-title{font:800 14px Manrope,var(--font)}.record-subtitle{font-size:11px;color:#9BA8AB;margin-top:5px}.audio-indicator{font-size:10px;color:#9BA8AB;margin-top:10px;display:flex;align-items:center;gap:6px}.audio-indicator span{width:7px;height:7px;border-radius:50%;background:#9BA8AB}.audio-indicator.on span{background:#50c7a0}.record-actions{gap:8px}.mic-circle{width:41px;height:41px;border:1px solid #4A5C6A;border-radius:100%;background:#253745;font-size:22px}.mic-circle.active{background:#4A5C6A;border-color:#45b48f}.btn-record{background:#db505c;color:white;border:1px solid #e66d76;border-radius:10px;padding:12px 15px;font-weight:800;font-size:12px;display:flex;align-items:center;gap:9px;white-space:nowrap}.btn-record:disabled{opacity:.5}.rec-dot{width:10px;height:10px;background:#fff;border-radius:50%}.after-record{margin-top:12px;display:flex;justify-content:space-between;gap:12px;align-items:center;background:#253745;border:1px solid #3c8e77;padding:14px;border-radius:12px}.after-record div{display:flex;flex-direction:column}.after-record small{font-size:11px;color:#99cab8}.slide-nav{margin:16px 0;background:#253745;border-radius:10px;border:1px solid #4A5C6A;padding:8px;display:flex;justify-content:center;align-items:center;gap:15px}.slide-nav button:not(.btn){border:1px solid #4A5C6A;background:#253745;border-radius:7px;padding:7px 12px;font-size:16px}.slide-nav span{font-size:11px;color:#CCD0CF}.compat-note{font-size:11px;color:#9BA8AB;margin-top:18px;text-align:center}.inspector-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}.setting-symbol{font-size:19px;color:#9BA8AB}.setting-section{border-top:1px solid #253745;padding:21px 0}.setting-section h3{margin-bottom:10px}.segmented{background:#11212D;border:1px solid #253745;border-radius:10px;padding:4px;display:flex;gap:4px}.aspect-choice{flex:1;background:none;border:1px solid transparent;padding:9px 5px;border-radius:7px;font-size:10px;white-space:nowrap}.aspect-choice.is-active{background:#4A5C6A;border-color:#9BA8AB}.toggle-line{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0 18px}.toggle-line h3,.toggle-line label:not(.switch){font-size:12px;font-weight:800;margin:0}.toggle-line p{font-size:10px;margin:3px 0 0}.switch{position:relative;display:inline-flex;width:36px;height:21px;flex:none}.switch input{opacity:0;width:0;height:0}.switch span{position:absolute;inset:0;background:#4A5C6A;border-radius:30px;transition:background .2s}.switch span:after{content:'';position:absolute;top:3px;left:3px;width:15px;height:15px;border-radius:50%;background:#fff;transition:transform .2s}.switch input:checked+span{background:#4A5C6A}.switch input:checked+span:after{transform:translateX(15px)}.camera-permission{display:block;width:100%;border:1px solid #4A5C6A;color:#CCD0CF;background:#253745;padding:10px;border-radius:8px;font-size:11px;font-weight:750;margin:5px 0 20px}.setting-subhead{font-size:9px;color:#9BA8AB}.camera-shapes{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.shape-choice{background:#253745;border:1px solid #4A5C6A;border-radius:9px;padding:11px 3px 9px;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:9px;color:#9BA8AB}.shape-choice.active{background:#253745;border-color:#9BA8AB;color:white}.shape{display:block;background:#9BA8AB;width:19px;height:19px}.shape.circle{border-radius:100%}.shape.rounded{border-radius:6px}.shape.square{border-radius:2px}.range-label{display:flex;justify-content:space-between;font-size:10px;color:#CCD0CF;margin-top:18px;margin-bottom:7px}.range-label output{color:#CCD0CF}.setting-section input[type=range]{width:100%;accent-color:#9BA8AB}.mini-link{border:0;background:transparent;padding:7px 0;color:#CCD0CF;font-size:10px}.mini-link:hover{text-decoration:underline}.input-label{display:block;color:#9BA8AB;font-size:9px}.setting-section input[type=url]{width:100%;border:1px solid #4A5C6A;background:#11212D;border-radius:8px;padding:11px;color:white;font-size:11px}.form-hint{display:block;color:#9BA8AB;margin-top:7px;font-size:10px}.inspector-footer{background:#253745;border:1px solid #253745;border-radius:11px;padding:13px;display:flex;gap:10px;color:#9BA8AB;font-size:10px}.inspector-footer span:first-child{color:var(--gold);font-size:19px}.toast{position:fixed;right:24px;bottom:25px;z-index:50;background:#CCD0CF;color:#253745;box-shadow:0 10px 35px #0009;border-radius:11px;padding:13px 19px;min-width:200px;max-width:350px;opacity:0;pointer-events:none;transform:translateY(12px);transition:.24s;font-size:12px;font-weight:750}.toast.show{opacity:1;transform:translateY(0)}.toast.error{background:#CCD0CF;color:#682628}dialog{border:1px solid #4A5C6A;background:#11212D;color:white;max-width:520px;border-radius:18px;box-shadow:0 30px 100px #000b;padding:26px}dialog::backdrop{background:#050b14b8}.dialog-head{display:flex;justify-content:space-between;align-items:center}.dialog-head button{font-size:24px;border:0;background:none}dialog li{margin:10px 0;color:#CCD0CF}dialog p{font-size:12px;line-height:1.6}dialog .btn-record{margin-top:18px}
/* hidden attribute must win against author display declarations */
[hidden]{display:none!important}
@media(max-width:1350px){.workspace{grid-template-columns:222px minmax(425px,1fr) 236px}.left-panel,.right-panel{padding:23px 13px}.center-panel{padding:23px 18px}.draw-btn span,.fullscreen-btn span{display:none}.record-panel{flex-wrap:wrap}.record-actions{width:100%;justify-content:space-between}.topbar{padding:0 16px}.top-product{display:none}}
@media(max-width:1050px){.workspace{grid-template-columns:210px minmax(430px,1fr)}.right-panel{grid-column:1/-1;border-left:0;border-top:1px solid var(--border);display:grid;grid-template-columns:repeat(2,1fr);gap:0 25px}.right-panel .inspector-head,.right-panel .inspector-footer{grid-column:1/-1}.left-panel{padding:20px 12px}}
@media(max-width:750px){.rail{width:54px;padding:10px 3px}.rail-btn{width:44px}.rail-btn small{font-size:8px}.rail-logo{width:39px;height:39px}.topbar{height:auto;min-height:69px;flex-wrap:wrap;padding:11px}.top-actions .saved{display:none}.workspace{display:flex;flex-direction:column}.left-panel{display:block;order:2;border-top:1px solid var(--border);border-right:0}.center-panel{order:1}.right-panel{order:3;display:block}.template-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.stage-top-label{top:8px;left:8px;font-size:7px}.workspace-heading h1{font-size:22px}.workspace-heading{flex-wrap:wrap}.record-panel{padding:12px}.record-actions{flex-wrap:wrap}.record-actions .btn-record{flex:1}.stage-bottom-caption{font-size:9px}}
@media(max-width:450px){.topbar{gap:9px}.top-actions{width:100%;justify-content:space-between}.center-panel{padding:16px 10px}.stage-status{display:none}.toolset{flex-wrap:wrap}.source-btn{font-size:10px}.brand-line{gap:8px}.brand-stacked strong{font-size:14px}.template-list{grid-template-columns:1fr}.record-actions{gap:6px}.record-actions .btn{padding:9px}}