@import"https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600&display=swap";:root{--bg-color: #000000;--mint-bright: #AAF0D1;--mint-dark: #708238}*{margin:0;padding:0;box-sizing:border-box}body{background-color:var(--bg-color);color:#fff;font-family:Outfit,sans-serif;overflow:hidden;width:100vw;height:100vh}#container{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1}.btn{background:#ffffff0d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);padding:12px 24px;border-radius:100px;color:#fff;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .3s cubic-bezier(.23,1,.32,1);font-family:inherit;text-transform:uppercase;letter-spacing:.1em;font-size:12px;font-weight:600}.btn:hover{background:#ffffff1a;border-color:var(--mint-bright);box-shadow:0 0 20px #aaf0d133;transform:translateY(-2px)}.btn-label{opacity:.5}.btn-value{color:var(--mint-bright)}.side-panel{position:fixed;top:0;left:0;height:100vh;z-index:100;width:320px;background:#0006;-webkit-backdrop-filter:blur(40px);backdrop-filter:blur(40px);border-right:1px solid rgba(255,255,255,.08);padding:40px;display:flex;flex-direction:column;gap:24px;pointer-events:auto;box-shadow:20px 0 60px #00000080;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--mint-bright) transparent;transition:opacity .4s ease,pointer-events .4s ease}.side-panel.disabled{opacity:.3;pointer-events:none;filter:grayscale(.5)}.side-panel::-webkit-scrollbar{width:3px}.side-panel::-webkit-scrollbar-track{background:transparent}.side-panel::-webkit-scrollbar-thumb{background:var(--mint-bright);border-radius:10px;box-shadow:0 0 10px #aaf0d166}.panel-header{margin-bottom:8px}.panel-header h1{font-size:28px;font-weight:600;letter-spacing:-.03em;color:var(--mint-bright);margin:0 0 16px}.social-icons{display:flex;gap:12px}.social-btn{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);min-width:36px;height:36px;padding:0 10px;border-radius:10px;display:flex;align-items:center;justify-content:center;gap:8px;color:#fff;cursor:pointer;transition:all .3s cubic-bezier(.23,1,.32,1);text-decoration:none;font-size:11px;font-weight:500}.social-btn span{text-transform:uppercase;letter-spacing:.05em}.social-btn:hover{background:#ffffff1f;border-color:var(--mint-bright);color:var(--mint-bright);transform:translateY(-2px)}.social-btn svg{width:18px;height:18px;fill:currentColor}.segmented-control{background:#0000004d;border:1px solid rgba(255,255,255,.05);border-radius:100px;height:44px;display:flex;position:relative;padding:4px;width:100%;margin-bottom:8px}.segmented-control .pill{position:absolute;top:4px;left:4px;height:36px;width:calc(50% - 4px);background:#ffffff14;border:1px solid rgba(255,255,255,.1);border-radius:100px;transition:transform .4s cubic-bezier(.23,1,.32,1);z-index:1}.segmented-control[data-active=right] .pill{transform:translate(100%)}.segmented-control .option{flex:1;z-index:2;background:none;border:none;color:#fff6;font-size:10px;font-weight:600;letter-spacing:.1em;cursor:pointer;transition:color .3s ease;text-transform:uppercase}.segmented-control .option.active{color:var(--mint-bright)}.panel-section{display:flex;flex-direction:column;gap:12px}.panel-section label{font-size:9px;text-transform:uppercase;letter-spacing:.15em;font-weight:600;opacity:.4;padding-left:2px}.control-row{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#ffffff08;padding:10px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.05)}.control-row span{font-size:11px;font-weight:400;opacity:.7}input[type=color]{-webkit-appearance:none;appearance:none;border:none;width:28px;height:28px;border-radius:8px;background:none;cursor:pointer}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:1px solid rgba(255,255,255,.12);border-radius:8px}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield;appearance:textfield;background:transparent;border:none;color:#fff;padding:6px 0;font-family:inherit;font-size:11px;width:40px;outline:none;text-align:center}.num-step{background:#ffffff0d;border:1px solid rgba(255,255,255,.08);color:#fff;width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;transition:all .2s ease;-webkit-user-select:none;user-select:none}.num-step:hover{background:#ffffff26;border-color:var(--mint-bright)}.num-step:active{transform:scale(.9)}input[type=range]{flex:1;-webkit-appearance:none;appearance:none;background:#ffffff14;height:2px;border-radius:2px;outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--mint-bright);cursor:pointer;box-shadow:0 0 10px #aaf0d14d}.btn.full{width:100%;justify-content:center}.btn.reset{margin-top:10px;background:#ff323208;border-color:#ff64640d;color:#fff6;font-size:10px}.btn.reset:hover{background:#ff32321a;border-color:#ff646480;color:#fff}.ui-overlay{display:none}.export-container{position:fixed;top:40px;right:40px;z-index:1000}#export-trigger{background:#00000080;display:flex;align-items:center;gap:8px}#export-trigger:hover{background:#ffffff1a;border-color:var(--mint-bright);box-shadow:0 0 20px #aaf0d133;transform:translateY(-2px)}#export-trigger .btn-label{opacity:.5}.recording-dot{width:10px;height:10px;background:#ff3b30;border-radius:50%;display:none;animation:blink 1s infinite;box-shadow:0 0 10px #ff3b3099}@keyframes blink{0%{opacity:1}50%{opacity:.3}to{opacity:1}}.export-menu{position:absolute;top:calc(100% + 12px);right:0;width:240px;background:#0009;-webkit-backdrop-filter:blur(40px);backdrop-filter:blur(40px);border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:12px;display:flex;flex-direction:column;gap:4px;box-shadow:0 20px 50px #00000080;opacity:0;transform:translateY(-10px);pointer-events:none;transition:all .3s cubic-bezier(.23,1,.32,1)}.export-menu.active{opacity:1;transform:translateY(0);pointer-events:auto}.export-section-label{font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.15em;opacity:.3;padding:12px 12px 4px}.export-item{background:transparent;border:none;color:#fff;font-family:inherit;font-size:11px;padding:10px 12px;border-radius:10px;cursor:pointer;text-align:left;display:flex;justify-content:space-between;align-items:center;transition:background .2s ease}.export-item:hover{background:#ffffff0d;color:var(--mint-bright)}.export-item span.ext{opacity:.3;font-size:9px;font-weight:600}canvas:focus{outline:none}