body{color:#1a1a1a;-webkit-font-smoothing:antialiased;background:#f6f5f1;min-height:100vh;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}#root{flex-direction:column;min-height:100vh;display:flex}*{box-sizing:border-box;margin:0;padding:0}::selection{color:#000;background:#f9ed3233}.inline-text-edit::selection{color:#0000;background:#f9ed3255}:root{--bg:#f6f5f1;--surface:#fff;--surface-2:#fafaf8;--border:#0000000f;--border-hover:#0000001f;--text:#1a1a1a;--text-secondary:#6b6b6b;--text-muted:#a0a0a0;--accent-light:#0000000a;--radius:14px;--radius-sm:10px;--shadow-card:0 1px 3px #0000000a, 0 0 0 1px #00000008}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;min-height:100vh;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}#root{min-height:100vh}.app{width:100vw;height:100vh;position:relative;overflow:hidden}.canvas-area{justify-content:center;align-items:center;transition:background .4s;display:flex;position:absolute;inset:0}.spline-container{width:100%;height:100%}.spline-container.hidden{opacity:0;filter:blur(30px)}.spline-container.reveal{opacity:1;filter:blur();transition:opacity .6s,filter 1s ease-out}.spline-container.recording{opacity:.15;transition:opacity .6s}.spline-container canvas{width:100%!important;height:100%!important}.canvas-loading{color:var(--text-muted);z-index:5;flex-direction:column;justify-content:center;align-items:center;gap:14px;font-size:13px;display:flex;position:absolute;inset:0}.spinner{opacity:.5;border:2px solid;border-top-color:#0000;border-radius:50%;width:24px;height:24px;animation:.7s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.header{z-index:20;pointer-events:none;justify-content:space-between;align-items:flex-start;padding:20px 28px;display:flex;position:absolute;top:0;left:0;right:0}.header>*{pointer-events:auto}.header-left{flex-direction:column;gap:2px;display:flex}.logo{letter-spacing:-.02em;font-size:14px;font-weight:700}.logo-sub{font-size:12px;font-weight:400}.header.light-text .logo,.header.light-text .logo-sub,.header.light-text .btn-ghost{color:#ffffffe6}.header.dark-text .logo,.header.dark-text .btn-ghost{color:var(--text)}.header.dark-text .logo-sub{color:var(--text-secondary)}.logo-link{color:inherit;text-decoration:none}.logo-link:hover{text-decoration:underline}.logo-sub-mobile{display:none}.header-right{align-items:center;gap:8px;display:flex}.btn{cursor:pointer;background:var(--surface);color:var(--text);box-shadow:var(--shadow-card);border:none;border-radius:8px;align-items:center;gap:6px;padding:8px 16px;font-family:inherit;font-size:15px;font-weight:600;transition:all .2s;display:inline-flex}.btn:hover{box-shadow:0 2px 8px #00000014}.btn-accent{color:#000;background-color:#f9ed32;background-image:linear-gradient(#fcff69,#f9ed32);box-shadow:0 2px 4px #00000012,0 1px 1px #00000024,0 0 0 .5px #eba6137a,inset 0 -1px #eba6133b}.btn-accent:hover{background-image:linear-gradient(#feffb3,#f9ed32);box-shadow:0 2px 4px #00000012,0 1px 1px #00000024,0 0 0 .5px #eba6137a,inset 0 -1px #eba6133b}.btn-accent:active{background-image:linear-gradient(#ffe77a,#f9ed32);box-shadow:0 0 0 .5px #eba6137a,inset 0 1px #eba6133b}.btn-ghost{box-shadow:none;color:var(--text-secondary);background:0 0;border:none;padding:6px 12px;transition:background .2s}.btn-ghost:hover{color:var(--text);box-shadow:none;background:#0000000a}.drawer{z-index:15;pointer-events:none;flex-direction:column;display:flex;position:absolute;bottom:0;left:0;right:0}.drawer>*{pointer-events:auto}.drawer-toggle{align-items:center;padding:0 28px 28px;display:flex}.drawer-toggle-btn{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--text-secondary);cursor:pointer;background:#ffffffd9;border:none;border-radius:100px;align-items:center;gap:4px;padding:7px 12px 7px 14px;font-family:inherit;font-size:15px;font-weight:500;transition:background .2s,box-shadow .2s;display:flex;box-shadow:0 1px 4px #0000000f,0 0 0 1px #0000000a}.drawer-toggle-btn:hover{color:var(--text);background:#fffffff2}.drawer-toggle-btn svg{transition:transform .3s}.drawer-toggle-btn.open svg{transform:rotate(180deg)}.drawer.dark-toggle .drawer-toggle-btn{color:#ffffffb3;background:#00000080;box-shadow:0 1px 4px #00000026}.drawer.dark-toggle .drawer-toggle-btn:hover{color:#ffffffe6;background:#000000a6}.drawer-body{border-top:1px solid var(--border);opacity:1;background:#fff;border-radius:20px 20px 0 0;height:344px;max-height:344px;transition:max-height .4s cubic-bezier(.4,0,.2,1),opacity .3s;overflow:hidden}.drawer-body.collapsed{opacity:0;border-color:#0000;height:0;max-height:0}.drawer-content{flex-shrink:0;align-items:stretch;gap:0;height:310px;padding:20px 20px 6px;display:flex;overflow:hidden}.drawer-credit{color:var(--text-muted);justify-content:space-between;align-items:center;gap:8px;padding:6px 20px 10px;font-size:10px;line-height:1.6;display:flex}.drawer-credit a{color:var(--text-secondary);text-decoration:none}.drawer-credit a:hover{color:var(--text)}.drawer-card{background:0 0;flex-direction:column;min-width:0;display:flex;overflow:hidden}.drawer-card-header{letter-spacing:-.01em;color:var(--text-secondary);flex-shrink:0;justify-content:space-between;align-items:center;padding:6px 14px;font-size:11px;font-weight:500;display:flex}.drawer-card-body{scrollbar-width:thin;scrollbar-color:#0000001a transparent;flex:1;padding:8px 14px;overflow-y:auto}.drawer-layers{border-right:1px solid var(--border);flex-direction:column;flex:0 0 20%;max-width:20%;display:flex;overflow:hidden}.drawer-preview{flex:0 0 58%;max-width:58%}.drawer-controls{border-left:1px solid var(--border);flex-direction:column;flex:0 0 22%;max-width:22%;display:flex;overflow:hidden}.drawer-preview-body{-webkit-backdrop-filter:blur(12px);background:#00000009;border-radius:12px;flex:1;justify-content:center;align-items:center;margin:0 14px;padding:10px 12px;display:flex;position:relative;overflow:hidden}.preview-canvas-container{border-radius:4px;width:100%;max-width:1075px;margin:0 auto;position:relative;overflow:clip}.preview-uploaded-img{object-fit:contain;border-radius:8px;width:100%;display:block}.preview-hint-inline{text-transform:none;letter-spacing:0;color:var(--text-muted);font-size:10px;font-weight:400}.randomize-btn{color:var(--text);cursor:pointer;background:0 0;border:none;border-radius:5px;align-items:center;gap:4px;padding:2px 7px 2px 5px;font-family:inherit;font-size:11px;font-weight:500;transition:background .15s;display:inline-flex}.randomize-btn:hover{background:var(--accent-light)}.randomize-btn svg{transition:transform .5s cubic-bezier(.34,1.56,.64,1)}.randomize-btn:hover svg{transform:rotate(180deg)}.layers-list-full{scrollbar-width:thin;scrollbar-color:#0000001a transparent;flex-direction:column;flex:1;gap:1px;padding:6px 8px;display:flex;overflow-y:auto}.layers-sep{border:none;border-top:.5px solid #00000014;height:0;margin:6px 0}.layers-heading{color:var(--text-muted);letter-spacing:-.01em;justify-content:space-between;align-items:center;padding:2px 8px 4px;font-size:11px;font-weight:500;display:flex}.layers-empty{color:var(--text-muted);padding:10px 8px;font-size:11px;font-style:italic}.layer-item{cursor:pointer;color:var(--text);border-radius:8px;align-items:center;gap:8px;padding:7px 8px;font-size:12px;transition:all .12s;display:flex;position:relative}.layer-item:hover{background:var(--accent-light)}.layer-item.active{background:#0000000f}.li-icon{background:var(--surface);border:1px solid var(--border);width:24px;height:24px;color:var(--text-muted);border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;display:flex}.li-thumb{object-fit:cover;border:1px solid var(--border);border-radius:6px;flex-shrink:0;width:24px;height:24px}.li-label{text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:12px;font-weight:500;overflow:hidden}.li-remove{color:#0000;cursor:pointer;background:0 0;border:none;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;width:20px;height:20px;transition:all .12s;display:flex}.layer-item:hover .li-remove{color:var(--text-muted)}.li-remove:hover{color:var(--text-secondary);background:#0000000f}.add-btn{width:22px;height:22px;color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:5px;justify-content:center;align-items:center;transition:all .15s;display:flex}.add-btn:hover{background:var(--accent-light);color:var(--text)}.editor-canvas-wrap{border-radius:var(--radius-sm);background:#111;overflow:hidden}.editor-canvas{cursor:grab;border-radius:4px;width:100%;display:block}.preview-hint{color:var(--text-muted);text-align:center;padding-top:6px;font-size:10px}.inline-text-edit{text-align:center;caret-color:#f9ed32;pointer-events:auto;z-index:5;background:0 0;border:none;border-radius:0;outline:none;width:95%;padding:0;font-family:inherit}.inline-text-edit:focus{box-shadow:none;background:0 0;outline:none}.ctrl-section{flex-direction:column;gap:8px;display:flex}.ctrl-label{margin-top:6px}.ctrl-label:first-child{margin-top:0}.ctrl-label{letter-spacing:-.01em;color:var(--text-muted);font-size:11px;font-weight:500}.ctrl-slider{align-items:center;gap:6px;display:flex}.ctrl-slider input[type=range]{appearance:none;background:#00000014;border-radius:2px;outline:none;flex:1;height:3px}.ctrl-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;background:#1a1a1a;border-radius:50%;width:14px;height:14px;transition:transform .15s;box-shadow:0 1px 3px #00000026}.ctrl-slider input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}.ctrl-num{width:38px;color:var(--text-secondary);text-align:right;-moz-appearance:textfield;background:0 0;border:1px solid #0000;border-radius:5px;outline:none;padding:3px 4px;font-family:inherit;font-size:11px}.ctrl-num::-webkit-inner-spin-button{-webkit-appearance:none}.ctrl-num::-webkit-outer-spin-button{-webkit-appearance:none}.ctrl-num:hover,.ctrl-num:focus{background:var(--surface);border-color:var(--border)}.ctrl-unit{color:var(--text-muted);font-size:10px}.ctrl-upload-btn{border:1px dashed var(--border-hover);width:100%;color:var(--text-secondary);cursor:pointer;background:0 0;border-radius:8px;justify-content:space-between;align-items:center;padding:8px 10px;font-family:inherit;font-size:11px;font-weight:500;transition:all .15s;display:flex}.ctrl-upload-btn:hover{border-color:var(--border-hover);background:var(--accent-light)}.ctrl-upload-btn.danger{border-style:solid;border-color:#0000}.ctrl-upload-btn.danger:hover{color:#ef4444;background:#ef44440a;border-color:#ef444426}.ctrl-dim{color:var(--text-muted);font-size:9px}.ctrl-empty{height:100%;color:var(--text-muted);justify-content:center;align-items:center;font-size:11px;display:flex}.color-dots{flex-wrap:wrap;gap:5px;display:flex}.dot{cursor:pointer;border:1.5px solid #0000000f;border-radius:7px;width:24px;height:24px;transition:all .15s}.dot:hover{transform:scale(1.08);box-shadow:0 2px 6px #0000001a}.dot.active{box-shadow:0 0 0 2px var(--surface), 0 0 0 3.5px var(--text)}.dot.custom{background:conic-gradient(red,#ff0,#0f0,#0ff,#00f,#f0f,red);position:relative;overflow:hidden}.dot.custom input{opacity:0;cursor:pointer;position:absolute;inset:0}.hint-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--text-muted);pointer-events:none;z-index:10;background:#fffc;border-radius:100px;padding:8px 16px;font-size:12px;position:absolute;bottom:20px;left:50%;transform:translate(-50%);box-shadow:0 1px 4px #0000000f}.drawer-tabs{display:none}@media (width<=768px){.header{align-items:center;padding:14px 16px}.logo{font-size:13px}.logo-sub{display:none}.logo-sub-mobile{opacity:.65;margin-top:1px;font-size:11px;font-weight:400;display:block}.btn{padding:8px 14px;font-size:13px}.drawer-toggle{padding:0 16px 10px}.drawer-body{border-radius:16px 16px 0 0;height:auto!important;max-height:58vh!important}.drawer-body.collapsed{max-height:0!important}.drawer-tabs{border-bottom:1px solid var(--border);flex-shrink:0;padding:10px 16px 0;display:flex}.tab-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-bottom:2px solid #0000;flex:1;margin-bottom:-1px;padding:8px 4px 10px;font-family:inherit;font-size:13px;font-weight:500;transition:all .15s}.tab-btn.active{color:var(--text);border-bottom-color:var(--text)}.drawer-content{flex-direction:column;max-height:calc(58vh - 100px);padding:12px 12px 6px;overflow-y:auto;height:auto!important}.drawer-card{min-height:0;border:none!important;flex:auto!important;max-width:100%!important}.mobile-hidden{display:none!important}.layer-item{padding:11px 8px}.layers-list-full{gap:2px}.add-btn{width:32px;height:32px}.drawer-preview-body{margin:0 2px 2px;padding:8px}.drawer-card-body{padding:10px}.ctrl-upload-btn{padding:12px 10px}.drawer-credit{padding:6px 16px 10px;font-size:9px}}.export-overlay{z-index:100;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0000002e;justify-content:center;align-items:center;animation:.15s fadeIn;display:flex;position:fixed;inset:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.export-modal{background:#fff;border-radius:18px;flex-direction:column;gap:10px;width:300px;padding:16px;animation:.18s cubic-bezier(.34,1.56,.64,1) slideUp;display:flex;box-shadow:0 20px 60px #00000026,0 0 0 1px #0000000d}@keyframes slideUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.export-modal-title{color:var(--text-secondary);letter-spacing:-.01em;padding:2px 4px 0;font-size:11px;font-weight:500}.export-opts-list{background:var(--surface-2);border:1px solid var(--border);border-radius:12px;overflow:hidden}.export-opts-sep{background:var(--border);height:1px;margin:0}.export-opt{cursor:pointer;text-align:left;background:0 0;border:none;justify-content:space-between;align-items:center;gap:12px;width:100%;padding:13px 14px;font-family:inherit;transition:background .12s;display:flex}.export-opt:hover:not(:disabled){background:#00000008}.export-opt:disabled{opacity:.35;cursor:not-allowed}.export-opt-left{align-items:center;gap:12px;display:flex}.export-opt-icon{background:var(--surface);border:1px solid var(--border);width:32px;height:32px;color:var(--text-secondary);border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;display:flex}.export-opt-label{color:var(--text);font-size:13px;font-weight:600;line-height:1.2}.export-opt-sub{color:var(--text-muted);margin-top:1px;font-size:11px}.export-opt-arrow{color:var(--text-muted);flex-shrink:0}.recording-overlay{z-index:50;pointer-events:none;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.rec-card{flex-direction:column;align-items:center;gap:10px;padding:28px 36px;display:flex}.rec-pct{letter-spacing:-.03em;font-size:44px;font-weight:700;line-height:1}.rec-pct-sign{opacity:.5;font-size:24px;font-weight:500}.rec-label{opacity:.5;white-space:nowrap;font-size:12px;font-weight:500}.rec-label-cycle{animation:.35s recFade}@keyframes recFade{0%{opacity:0;transform:translateY(4px)}to{opacity:.5;transform:translateY(0)}}.rec-track{border-radius:2px;flex-shrink:0;width:180px;height:2.5px;position:relative}.rec-track-bg{opacity:.15;background:currentColor;border-radius:2px;position:absolute;inset:0}.rec-fill{opacity:.65;background:currentColor;border-radius:2px;transition:width .1s linear;position:absolute;top:0;bottom:0;left:0}.rec-spinner{opacity:.5;border:2px solid;border-top-color:#0000;border-radius:50%;width:26px;height:26px;animation:.75s linear infinite spin}