@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@500;600;700;800&display=swap";:root{--bg-color:#061109;--accent:gold;--accent-rgb:255, 215, 0;--primary-glow:#ffd70026;--coral:#ff4b5c;--coral-rgb:255, 75, 92;--glass-bg:#0a190c73;--glass-panel-bg:#0a190cbf;--glass-border:#ffffff14;--glass-border-focus:#ffd70059;--glass-blur:blur(24px);--text:#fff;--text-muted:#ffffff80;--text-dim:#ffffff4d}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text);-webkit-user-select:none;user-select:none;-webkit-font-smoothing:antialiased;font-family:Inter,sans-serif;overflow:hidden}h1,h2,h3,h4,h5,h6{letter-spacing:-.02em;font-family:Outfit,sans-serif}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#ffd7004d}.glass-panel{background:var(--glass-panel-bg);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);border-radius:16px;transition:border-color .3s,box-shadow .3s;box-shadow:0 12px 40px #00000080}.glass-panel:hover{border-color:#ffffff1f}input[type=text],select{color:#fff!important;border:1px solid var(--glass-border)!important;background:#0006!important;border-radius:8px!important;outline:none!important;padding:8px 12px!important;font-family:Inter,sans-serif!important;font-size:13px!important;transition:border-color .2s,box-shadow .2s!important}input[type=text]:focus,select:focus{border-color:var(--accent)!important;box-shadow:0 0 0 3px #ffd70026!important}input[type=range]{-webkit-appearance:none;cursor:pointer;background:#ffffff1a;border-radius:3px;outline:none;width:100%;height:6px}input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--accent);cursor:pointer;border-radius:50%;width:14px;height:14px;transition:transform .1s}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.25);box-shadow:0 0 10px #ffd70080}.icon-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:10px;justify-content:center;align-items:center;padding:10px;transition:all .25s cubic-bezier(.4,0,.2,1);display:flex;position:relative}.icon-btn:hover{color:#fff;background:#ffffff14;transform:translateY(-1px)}.icon-btn:active{transform:translateY(1px)}.icon-btn.active{color:var(--accent);background:#ffd7001f;border:1px solid #ffd70033;box-shadow:inset 0 2px 4px #0003,0 0 10px #ffd7001a}.app-container{background-color:var(--bg-color);width:100vw;height:100vh;display:flex;position:relative}.stage{flex:1;transition:background-color .4s;position:relative;overflow:hidden}.toolbar-container{z-index:50;opacity:.95;flex-direction:row;align-items:center;gap:16px;padding:10px 24px;transition:opacity .3s,transform .3s cubic-bezier(.4,0,.2,1);display:flex;position:absolute;bottom:24px;left:50%;transform:translate(-50%)}.toolbar-container:hover{opacity:1}.toolbar-divider{background:var(--glass-border);width:1px;height:24px;margin:0 4px}.vertical-toolbar-container{z-index:50;opacity:.95;flex-direction:column;align-items:center;gap:8px;padding:20px 10px;transition:opacity .3s;display:flex;position:absolute;top:50%;left:24px;transform:translateY(-50%)}.vertical-toolbar-container:hover{opacity:1}.vertical-toolbar-divider{background:var(--glass-border);width:24px;height:1px;margin:6px 0}.dropzone{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);z-index:100;background:radial-gradient(circle,#102814e6 0%,#061109fa 100%);flex-direction:column;justify-content:center;align-items:center;gap:24px;display:flex;position:absolute;inset:0}.dropzone.hidden{display:none}.dropzone-btn{background:linear-gradient(135deg, var(--accent) 0%, #d4af37 100%);color:#061109;cursor:pointer;border:none;border-radius:30px;padding:14px 28px;font-family:Outfit,sans-serif;font-size:16px;font-weight:700;transition:transform .2s cubic-bezier(.4,0,.2,1),box-shadow .2s;box-shadow:0 4px 20px #ffd70040}.dropzone-btn:hover{transform:translateY(-2px);box-shadow:0 6px 24px #ffd70066}.dropzone-btn:active{transform:translateY(1px)}.media-layer{z-index:10;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.media-element{object-fit:contain;max-width:100%;max-height:100%}.canvas-layer{z-index:20;cursor:crosshair;touch-action:none;width:100%;height:100%;position:absolute;inset:0}.webcam-container{z-index:30;cursor:grab;border:2px solid #ffffff14;transition:border-color .3s,box-shadow .3s;position:absolute;overflow:visible;box-shadow:0 20px 50px #0009}.webcam-container:hover{border-color:#ffd7004d;box-shadow:0 20px 50px #0009,0 0 20px #ffd70026}.webcam-container:active{cursor:grabbing}.webcam-float-bar{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);opacity:0;pointer-events:none;z-index:110;background:#0a190cd9;border:1px solid #ffffff1a;border-radius:20px;gap:6px;padding:4px 8px;transition:opacity .25s,transform .25s;display:flex;position:absolute;bottom:-45px;left:50%;transform:translate(-50%);box-shadow:0 4px 15px #0000004d}.webcam-container:hover .webcam-float-bar{opacity:1;pointer-events:auto}.webcam-float-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:12px;align-items:center;gap:4px;padding:4px 8px;font-size:11px;font-weight:600;transition:all .2s;display:flex}.webcam-float-btn:hover{color:#fff;background:#ffffff1a}.webcam-float-btn.active{color:var(--accent);background:#ffd70026}.floating-controls{z-index:50;align-items:center;gap:12px;padding:8px 16px;display:flex;position:absolute;top:24px;right:24px}.record-btn{background:linear-gradient(135deg, var(--coral) 0%, #d32f2f 100%);color:#fff;cursor:pointer;border:none;border-radius:24px;align-items:center;gap:10px;padding:10px 22px;font-family:Outfit,sans-serif;font-weight:700;transition:all .25s cubic-bezier(.4,0,.2,1);display:flex;box-shadow:0 4px 15px #ff4b5c4d}.record-btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px #ff4b5c73}.record-btn.recording{background:linear-gradient(135deg,#d32f2f 0%,#b71c1c 100%);animation:2s infinite pulse}@keyframes pulse{0%{box-shadow:0 0 #ff4b5c99}70%{box-shadow:0 0 0 16px #ff4b5c00}to{box-shadow:0 0 #ff4b5c00}}.live-dot{background-color:var(--coral);width:8px;height:8px;box-shadow:0 0 8px var(--coral);border-radius:50%;animation:1.2s infinite blink-dot}@keyframes blink-dot{0%{opacity:.2}50%{opacity:1}to{opacity:.2}}.color-swatch{cursor:pointer;border:2px solid #0000;border-radius:50%;width:22px;height:22px;transition:transform .2s,border-color .2s}.color-swatch:hover{transform:scale(1.15)}.color-swatch.active{border-color:var(--accent);box-shadow:0 0 8px var(--primary-glow);transform:scale(1.1)}.modal-overlay{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);z-index:120;background:#030a05d9;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.modal-content{flex-direction:column;gap:20px;width:100%;max-width:500px;padding:32px;display:flex}.primary-btn{background:var(--accent);color:#061109;cursor:pointer;border:none;border-radius:12px;padding:12px 24px;font-family:Outfit,sans-serif;font-size:14px;font-weight:700;transition:all .2s;box-shadow:0 4px 15px #ffd70033}.primary-btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px #ffd70059}.secondary-btn{color:#fff;cursor:pointer;background:#ffffff14;border:1px solid #ffffff1a;border-radius:12px;padding:12px 24px;font-size:14px;font-weight:600;transition:all .2s}.secondary-btn:hover{background:#ffffff1f;border-color:#fff3}.studio-layout{background-color:var(--bg-color);flex-direction:column;width:100vw;height:100vh;font-family:Inter,sans-serif;display:flex;position:relative;overflow:hidden}.studio-header{width:100%;height:60px;-webkit-backdrop-filter:var(--glass-blur);border-bottom:1px solid var(--glass-border);z-index:80;background:#0a190ce6;flex-shrink:0;justify-content:space-between;align-items:center;padding:0 24px;display:flex}.studio-body{flex:1;width:100%;height:calc(100vh - 60px);display:flex;position:relative;overflow:hidden}.studio-panel{-webkit-backdrop-filter:blur(20px);border-right:1px solid var(--glass-border);z-index:60;background:#0a190ce0;flex-direction:column;width:320px;height:100%;transition:transform .3s cubic-bezier(.4,0,.2,1),width .3s;display:flex;position:relative}.studio-panel.collapsed{border-left:none;border-right:none;overflow:hidden;width:0!important;min-width:0!important;max-width:0!important}.studio-panel.right-panel{border-right:none;border-left:1px solid var(--glass-border);width:280px}.panel-header{border-bottom:1px solid var(--glass-border);background:#ffffff05;justify-content:space-between;align-items:center;padding:16px 20px;display:flex}.panel-title{color:var(--accent);text-transform:uppercase;letter-spacing:.75px;margin:0;font-size:14px;font-weight:700}.panel-body{flex-direction:column;flex:1;gap:20px;padding:20px;display:flex;overflow-y:auto}.panel-toggle-btn{border:1px solid var(--glass-border);width:20px;height:48px;color:var(--text-muted);cursor:pointer;z-index:100;background:#0a190cf2;border-radius:0 8px 8px 0;justify-content:center;align-items:center;transition:all .2s;display:flex;position:absolute;top:50%;transform:translateY(-50%);box-shadow:4px 0 10px #0000004d}.panel-toggle-btn:hover{color:#fff;background:var(--accent);border-color:var(--accent)}.panel-toggle-btn.right-toggle{border-radius:8px 0 0 8px;left:-20px;box-shadow:-4px 0 10px #0000004d}.sidebar-tabs-container{height:100%;display:flex}.sidebar-tab-menu{border-right:1px solid var(--glass-border);background:#050f07f2;flex-direction:column;align-items:center;gap:12px;width:60px;padding:16px 0;display:flex}.tab-icon-btn{width:42px;height:42px;color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:10px;justify-content:center;align-items:center;transition:all .2s;display:flex}.tab-icon-btn:hover{color:#fff;background:#ffffff0d}.tab-icon-btn.active{color:var(--accent);background:#ffd7001f;border:1px solid #ffd70033}.sidebar-tab-content{background:#0a190c66;flex-direction:column;flex:1;height:100%;display:flex}.center-stage{background:#030804;flex-direction:column;flex:1;justify-content:center;align-items:center;height:100%;display:flex;position:relative;overflow:hidden}.stage-viewport-monitor{background-color:var(--bg-color);justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:relative;overflow:hidden;box-shadow:inset 0 0 100px #000c,0 24px 60px #000000b3}.figma-tools-pill{z-index:70;-webkit-backdrop-filter:blur(20px);border:1px solid var(--glass-border);background:#0a190cd9;border-radius:20px;align-items:center;gap:4px;padding:6px;display:flex;position:absolute;top:24px;left:50%;transform:translate(-50%);box-shadow:0 10px 30px #00000080,inset 0 0 1px #fff3}.figma-tool-btn{width:36px;height:36px;color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:14px;justify-content:center;align-items:center;padding:0;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex;position:relative}.figma-tool-btn:hover{color:#fff;background:#ffffff14;transform:translateY(-1px)}.figma-tool-btn.active{background:var(--accent);color:#061109;font-weight:700;box-shadow:0 4px 12px #ffd70059}.figma-tools-divider{background:var(--glass-border);width:1px;height:20px;margin:0 4px}.slide-deck-tray{z-index:70;-webkit-backdrop-filter:blur(20px);border:1px solid var(--glass-border);background:#0a190cd9;border-radius:16px;align-items:center;gap:12px;max-width:80%;padding:10px 16px;transition:opacity .3s;display:flex;position:absolute;bottom:24px;left:50%;overflow-x:auto;transform:translate(-50%);box-shadow:0 12px 40px #0009}.slide-deck-tray::-webkit-scrollbar{height:4px}.slide-deck-tray::-webkit-scrollbar-thumb{background:#ffd70033}.slide-tray-thumbnail{cursor:pointer;width:80px;height:45px;color:var(--text-muted);background:#0000004d;border:2px solid #ffffff1a;border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;font-size:11px;font-weight:700;transition:all .2s;display:flex;position:relative;overflow:hidden}.slide-tray-thumbnail:hover{border-color:#fff6;transform:scale(1.05)}.slide-tray-thumbnail.active{border-color:var(--accent);color:#fff;box-shadow:0 0 10px #ffd7004d}.slide-tray-num{background:#000000b3;border-radius:4px;padding:1px 4px;font-size:8px;position:absolute;bottom:2px;right:4px}.slide-tray-add-btn{width:45px;height:45px;color:var(--text-muted);cursor:pointer;background:0 0;border:2px dashed #fff3;border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;font-size:18px;transition:all .2s;display:flex}.slide-tray-add-btn:hover{border-color:var(--accent);color:var(--accent);background:#ffd7000d}.inspector-section{border-bottom:1px solid #ffffff0d;flex-direction:column;gap:8px;padding-bottom:16px;display:flex}.inspector-section:last-child{border-bottom:none}.inspector-title{color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px;font-size:11px;font-weight:700}.inspector-row{justify-content:space-between;align-items:center;gap:12px;display:flex}.inspector-label{color:#ffffffb3;font-size:12px}.media-item-card{border:1px solid var(--glass-border);background:#ffffff08;border-radius:8px;justify-content:space-between;align-items:center;gap:10px;padding:10px;transition:all .2s;display:flex}.media-item-card:hover{background:#ffffff0f;border-color:#ffffff26}.media-card-title{color:#fff;text-overflow:ellipsis;white-space:nowrap;max-width:150px;margin:0;font-size:12px;overflow:hidden}.media-card-sub{color:var(--text-muted);margin-top:2px;font-size:10px}.swatch-grid{grid-template-columns:repeat(5,1fr);gap:8px;width:100%;display:grid}.timeline-scrubber-bar{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--glass-border);z-index:70;background:#0a190ce6;border-radius:14px;align-items:center;gap:12px;width:90%;max-width:800px;padding:6px 16px;display:flex;position:absolute;bottom:84px;left:50%;transform:translate(-50%);box-shadow:0 10px 30px #00000080}.timeline-progress-rail{cursor:pointer;background:#ffffff26;border-radius:3px;flex:1;height:6px;position:relative}.timeline-progress-fill{background:var(--accent);border-radius:3px;height:100%;position:absolute;top:0;left:0}.timeline-progress-knob{border:2px solid var(--accent);cursor:pointer;background:#fff;border-radius:50%;width:12px;height:12px;transition:transform .1s;position:absolute;top:50%;transform:translate(-50%,-50%);box-shadow:0 0 6px #00000080}.timeline-progress-rail:hover .timeline-progress-knob{transform:translate(-50%,-50%)scale(1.3)}.timeline-time-label{color:var(--text-muted);text-align:center;min-width:80px;font-family:"monospace";font-size:11px}.timeline-speed-select{color:var(--accent)!important;cursor:pointer!important;background:0 0!important;border:none!important;outline:none!important;padding:2px 4px!important;font-size:11px!important;font-weight:700!important}.mic-wave-container{align-items:flex-end;gap:2px;width:20px;height:14px;display:flex}.mic-wave-bar{background-color:#4d8;border-radius:1px;width:2px;height:20%;animation:.6s infinite alternate mic-wave-pulse}.mic-wave-bar:nth-child(2){animation-delay:.15s}.mic-wave-bar:nth-child(3){animation-delay:.3s}.mic-wave-bar:nth-child(4){animation-delay:.45s}@keyframes mic-wave-pulse{0%{height:10%}to{height:100%}}.studio-recording-status-bar{border-top:1px solid var(--glass-border);z-index:80;background:#050c06f2;justify-content:space-between;align-items:center;height:52px;padding:0 24px;display:flex;position:absolute;bottom:0;left:0;right:0}.status-left{align-items:center;gap:16px;display:flex}.status-center,.status-right{align-items:center;gap:12px;display:flex}.desmos-widget-studio{border:1px solid var(--accent);border-radius:12px;overflow:hidden;box-shadow:0 20px 50px #0009}.ruled-bg-grid-adjuster{color:var(--text-muted);flex-direction:column;gap:4px;font-size:11px;display:flex}