.particle-text{position:relative;display:block;width:100%;height:100%;min-height:240px;overflow:hidden;touch-action:none;isolation:isolate}.particle-text__canvas{position:absolute;inset:0;display:block;width:100%;height:100%}.particle-text__sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.particle-text__three{visibility:hidden}:root{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Microsoft YaHei,sans-serif;color:#eeedf4;background:#0c0c10;font-synthesis:none;font-weight:400;color-scheme:dark}*{box-sizing:border-box}body{margin:0}button,input,textarea{font:inherit}button,a,input,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-decoration:none}button{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid #b79aee;outline-offset:4px}.app-shell{max-width:1600px;margin:0 auto;padding:0 52px}.site-header{position:sticky;top:0;z-index:100;background:#0c0c10;height:88px;display:flex;align-items:center;border-bottom:1px solid #242329;gap:23px}.brand{font-size:25px;font-weight:600;letter-spacing:-1.1px;display:flex;align-items:center}.brand-dot{color:#ac89e5}.brand-mark{width:24px;height:26px;display:flex;gap:3px;align-items:center;margin-right:11px;transform:skewY(-16deg)}.brand-mark i{width:3px;background:#b49adf;border-radius:2px;height:19px}.brand-mark i:nth-child(2){height:27px}.brand-mark i:nth-child(3){height:22px}.brand-mark i:nth-child(4){height:13px}.header-divider{height:18px;width:1px;background:#35333d}.header-label{font-size:12px;color:#85838e;letter-spacing:1px}.source-link{margin-left:auto;display:flex;gap:9px;align-items:center;font-size:11px;color:#8b8997}.source-link:hover{color:#c9b2f1}main{padding-top:49px}.intro{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:31px}.eyebrow{font-size:9px;color:#a18abf;letter-spacing:1.7px;display:flex;align-items:center;gap:8px}.eyebrow>span{width:5px;height:5px;background:#a78ac9;border-radius:50%}h1{font-size:36px;letter-spacing:1px;font-weight:500;line-height:1.4;margin:14px 0 8px}h1>span{color:#b99cde}.intro p{font-size:12px;letter-spacing:1px;color:#7d7a88;margin:0}.edition{font-size:8px;letter-spacing:1.5px;color:#62606d;text-align:right;padding-bottom:3px}.edition span{display:block;font-size:10px;letter-spacing:1px;margin-top:11px;color:#827d8b}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 308px;gap:18px}.preview-panel{position:relative;border:1px solid #302935;border-radius:12px;overflow:hidden;background:#09090f;min-height:604px;display:flex;flex-direction:column}.preview-top,.preview-bottom{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2;padding:22px 25px}.preview-tag{display:flex;align-items:center;gap:7px;color:#bab0cc;font-size:11px}.preview-tag svg{color:#a48abf}.live-state{font-size:9px;color:#85818e;display:flex;gap:6px;align-items:center}.live-state i{width:5px;height:5px;border-radius:50%;background:#ad8ae3;box-shadow:0 0 8px #9172b960}.live-state.is-paused i{background:#696571;box-shadow:none}.canvas-stage{flex:1;min-height:455px;position:relative}.ambient{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 54%,#4c1d791c,transparent 64%);pointer-events:none}.canvas-stage .particle-text{position:absolute;inset:0;touch-action:auto}.preview-bottom{padding:19px 25px;border-top:1px solid #ffffff05}.preview-bottom>span{display:flex;align-items:center;gap:8px;font-size:9px;letter-spacing:.5px;color:#615b6d}.tiny-cross{width:7px;height:7px;position:relative}.tiny-cross:before,.tiny-cross:after{content:"";position:absolute;background:#8b7a9b;width:7px;height:1px;top:3px}.tiny-cross:after{transform:rotate(90deg)}.playback{background:#18151f;border:1px solid #37303e;border-radius:6px;padding:8px 11px;font-size:10px;display:flex;gap:7px;align-items:center;color:#bdb3cb}.playback:hover{background:#282032}.controls{border:1px solid #2a2830;border-radius:12px;background:#121216;overflow:hidden}.controls-title{display:flex;align-items:center;justify-content:space-between;padding:21px 21px 19px;border-bottom:1px solid #26232d}.controls h2{font-size:12px;font-weight:500;margin:0;display:flex;align-items:center;gap:9px}.controls h2 svg{color:#a29aaa}.reset{border:0;background:transparent;color:#817b8a;display:flex;align-items:center;gap:5px;font-size:10px;padding:3px 0}.reset:hover{color:#ddcbf5}.controls-body{padding:22px 21px 15px}.field-heading{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#bfb9c8}.field-heading small{font-size:9px}.muted{font-size:9px;color:#625e6c}textarea{display:block;resize:vertical;width:100%;min-height:79px;max-height:180px;background:#0c0c10;border:1px solid #302a39;border-radius:6px;color:#c9c3d4;font-size:11px;line-height:1.9;padding:10px 12px;margin-top:11px}.section-caption{font-size:8px;letter-spacing:1.3px;color:#66606f;margin:24px 0 18px}.slider-field{display:block;margin-bottom:19px}.field-heading output{font-size:10px;font-variant-numeric:tabular-nums;color:#b6a2d3}.field-heading em{font-style:normal;font-size:8px;color:#6e627e;margin-left:4px}input[type=range]{display:block;width:100%;height:3px;border-radius:3px;margin:14px 0 0;appearance:none;background:linear-gradient(to right,#9f7dcc var(--progress),#2e2935 var(--progress));cursor:pointer}input[type=range]::-webkit-slider-thumb{appearance:none;background:#cfb9ed;width:10px;height:10px;border-radius:50%;box-shadow:0 0 0 3px #c7a8ee0b}input[type=range]::-moz-range-thumb{background:#cfb9ed;width:10px;height:10px;border:0;border-radius:50%}.appearance-caption{padding-top:18px;border-top:1px solid #25212c;margin-top:23px}.color-row{display:flex;gap:12px;margin-top:23px}.color-field{font-size:10px;color:#a69dac;flex:1;min-width:0}.color-value{display:flex;align-items:center;gap:7px;margin-top:9px;background:#0d0c11;border:1px solid #2d2734;border-radius:5px;padding:7px;font-size:9px;font-variant-numeric:tabular-nums;color:#96909f}input[type=color]{width:18px;height:18px;padding:0;border:0;background:none;cursor:pointer;flex-shrink:0}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:1px solid #ffffff20;border-radius:3px}.glow-field{display:flex;align-items:center;justify-content:space-between;position:relative;margin-top:23px;font-size:11px;color:#aaa2b5;cursor:pointer}.glow-field>span:first-child{display:flex;gap:7px;align-items:center}.glow-field input{position:absolute;right:0;width:30px;height:18px;opacity:0}.switch{width:29px;height:16px;border-radius:10px;background:#403846;padding:3px;transition:background .2s}.switch:after{content:"";display:block;width:10px;height:10px;border-radius:50%;background:#ddd2ed;transition:transform .2s}.glow-field input:checked+.switch{background:#9673bf}.glow-field input:checked+.switch:after{transform:translate(13px)}.glow-field input:focus-visible+.switch{outline:2px solid #c8a9ed;outline-offset:4px}.panel-hint{border-top:1px solid #25212c;margin:5px 21px 0;padding:16px 0;font-size:9px;color:#635b6e;display:flex;align-items:center;justify-content:center;gap:6px}.panel-hint>span{border:1px solid #6e5a85;width:5px;height:5px;border-radius:50%}.below-preview{display:flex;justify-content:space-between;margin-top:17px;font-size:9px;color:#625c6c;letter-spacing:.5px}.below-preview>span:last-child{font-size:8px;letter-spacing:1px}.below-preview b{font-weight:400;margin:0 7px;color:#6c567e}footer{display:flex;justify-content:space-between;border-top:1px solid #242129;margin-top:51px;padding:23px 0 27px;font-size:8px;color:#56515e;letter-spacing:1px}.footer-star{font-size:15px;margin-left:9px;color:#9d7abd}@media(min-width:1450px){.preview-panel{min-height:660px}.canvas-stage{min-height:510px}}@media(max-width:1050px){.app-shell{padding:0 28px}.workspace{grid-template-columns:minmax(0,1fr) 280px;gap:14px}.controls-body{padding-left:17px;padding-right:17px}.preview-top,.preview-bottom{padding-left:18px;padding-right:18px}}@media(max-width:760px){.app-shell{padding:0 18px}.site-header{height:72px;gap:15px}.brand{font-size:23px}.header-label{font-size:10px}.source-link{font-size:10px;gap:0;white-space:nowrap}.source-link svg{width:17px;height:17px}.intro{margin-bottom:24px}main{padding-top:34px}.eyebrow{font-size:8px}h1{font-size:28px}.intro p{font-size:11px}.edition{display:none}.workspace{grid-template-columns:1fr;gap:18px}.preview-panel{min-height:380px}.canvas-stage{min-height:260px}.preview-top{padding:18px}.preview-bottom{padding:15px 18px}.controls-body{padding:20px}.controls-title{padding:19px 20px}.panel-hint{padding:15px}.below-preview{font-size:8px;line-height:1.8}.below-preview>span:last-child{display:none}footer{margin-top:30px;gap:20px;line-height:1.7;font-size:7px}footer>span:first-child{max-width:170px}footer>span:last-child{letter-spacing:0}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}.mode-field{border:0;padding:0;margin:0 0 22px;min-width:0}.mode-field legend{font-size:11px;color:#bfb9c8;padding:0;margin-bottom:11px}.mode-options{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;background:#0c0c10;border:1px solid #302a39;border-radius:7px}.mode-option{position:relative;cursor:pointer}.mode-option input{position:absolute;opacity:0;width:1px;height:1px}.mode-option span{display:block;text-align:center;font-size:11px;padding:9px 6px;border:1px solid transparent;border-radius:4px;color:#81788e;transition:background .15s,color .15s}.mode-option input:checked+span{background:#2b203b;border-color:#654a83;color:#dfc9ff}.mode-option input:focus-visible+span{outline:2px solid #b79aee;outline-offset:2px}.mode-field p{font-size:9px;color:#81758e;margin:9px 0 0;line-height:1.5}.opacity-hint{font-size:9px;line-height:1.5;color:#81758e;margin:-6px 0 0}.shadow-field{margin:23px 0 0}.slider-field.is-disabled{opacity:.4}.slider-field.is-disabled input{cursor:not-allowed}.trail-options-hint{font-size:9px;line-height:1.7;color:#81758e;margin:12px 0 0}.canvas-size-toggle{border:1px solid #37303e;background:#18151f;color:#bdb3cb;border-radius:6px;padding:8px 10px;font-size:10px;cursor:pointer}.canvas-size-toggle[aria-pressed=true]{border-color:#8860b4;background:#2b203b;color:#dfc9ff}.preview-panel.fixed-canvas-panel{min-height:0;align-self:start}.fixed-canvas-panel .canvas-stage.fixed-canvas-stage{flex:none;min-height:0;width:100%;aspect-ratio:1356/932}.fixed-canvas-stage .particle-text{min-height:0}.fixed-canvas-panel .preview-bottom{gap:8px;flex-wrap:wrap}.preview-column{min-width:0;align-self:start}.preview-column .preview-panel:not(.fixed-canvas-panel){height:clamp(550px,70vh,760px)}.presets-panel{margin-top:18px;padding:22px;border:1px solid #302935;border-radius:12px;background:#121216;min-width:0}.presets-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:15px}.presets-heading h2{font-size:14px;font-weight:500;margin:0}.presets-heading h2 span{font-size:10px;color:#b39dce;margin-left:7px}.presets-heading p{font-size:11px;color:#81788e;margin:8px 0 18px}.presets-panel button{border:1px solid #37303e;background:#1a1522;border-radius:6px;font-size:10px;padding:8px 10px;color:#d5c5e9;white-space:nowrap}.presets-panel button:hover{background:#30243f}.preset-save{display:flex;gap:9px}.preset-save input{width:100%;min-width:0;background:#0c0c10;border:1px solid #37303e;border-radius:6px;padding:10px 12px;font-size:11px;color:#ded5e8}.preset-save button{background:#46305f;border-color:#79569e}.presets-local-note{font-size:9px;line-height:1.7;color:#8c8098;margin:10px 0 0}.preset-status{font-size:10px;color:#c9b0e8;min-height:15px;margin:9px 0}.presets-empty{text-align:center;padding:26px 10px;font-size:12px;color:#b5a8c3;border:1px dashed #352c41;border-radius:7px}.presets-empty span{display:block;font-size:10px;color:#797082;margin-top:10px}.preset-list{display:grid;gap:12px;max-height:750px;overflow:auto}.preset-card{background:#0d0c12;border:1px solid #302737;border-radius:8px;padding:16px;min-width:0}.preset-card-heading{display:flex;justify-content:space-between;gap:12px}.preset-card h3{font-size:12px;line-height:1.6;font-weight:500;margin:0;overflow-wrap:anywhere}.preset-card time{font-size:9px;color:#7a7085;display:block;margin-top:4px}.preset-card-heading button{align-self:flex-start}.preset-text{white-space:pre-wrap;overflow-wrap:anywhere;font-size:11px;color:#cdc1db;line-height:1.7;margin:14px 0 8px}.preset-summary{font-size:9px;color:#9a8ca8;line-height:1.8}.preset-card summary{cursor:pointer;font-size:10px;color:#b39bcf;padding:8px 0}.preset-values{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px;margin:4px 0 10px}.preset-values>div{display:flex;justify-content:space-between;gap:8px;padding:7px 0;border-bottom:1px solid #221d2a;font-size:10px;line-height:1.6}.preset-values dt{color:#83778f}.preset-values dd{margin:0;color:#d0c1de;text-align:right}.preset-json pre{font-size:10px;line-height:1.7;overflow:auto;background:#07070b;padding:12px;border-radius:5px;max-height:280px}.preset-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}.preset-actions .preset-delete{margin-left:auto;color:#ad8794;background:transparent}@media(max-width:760px){.preview-column .preview-panel:not(.fixed-canvas-panel){height:380px;min-height:380px}.presets-panel{padding:16px}.presets-heading{flex-wrap:wrap;gap:0}.presets-heading>button{margin-bottom:12px}.preset-values{grid-template-columns:1fr}.preset-save{flex-wrap:wrap}.preset-save button{width:100%}.preset-list{max-height:650px}}.effect-color{display:block;margin-top:12px}.effect-color .color-value{max-width:150px}@media(min-width:761px){.workspace{align-items:start}.preview-column,.controls{position:sticky;top:104px;max-height:calc(100dvh - 120px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:#4e3a62 transparent;overscroll-behavior:contain}.controls-title{position:sticky;top:0;z-index:3;background:#121216}.preview-column .preview-panel:not(.fixed-canvas-panel){height:calc(100dvh - 140px);min-height:340px;max-height:760px}.preview-column .canvas-stage:not(.fixed-canvas-stage){min-height:200px}}.effect-adjustments{display:flex;gap:12px;align-items:center;margin-top:12px}.effect-adjustments .effect-color{flex:0 0 90px;margin-top:0}.effect-adjustments .slider-field{flex:1;min-width:0;margin:0}.effect-adjustments .field-heading{font-size:9px;gap:4px}.effect-adjustments .field-heading>span{max-width:75px;line-height:1.5}.presets-panel .source-export{margin-top:12px;width:100%;padding:11px;background:#292035;border-color:#654a83}.presets-panel button:disabled{opacity:.55;cursor:wait}.header-actions{margin-left:auto;display:flex;align-items:center}.renderer-toggle{display:flex;align-items:center;justify-content:center;gap:8px;min-width:148px;padding:10px 15px;border:1px solid #795797;border-radius:7px;background:linear-gradient(135deg,#32213f,#211928);color:#e3cafa;font-size:12px;white-space:nowrap;transition:background .2s,border-color .2s}.renderer-toggle:hover{background:#3b284c;border-color:#b28acf}.renderer-toggle[aria-pressed=true]{background:#201b29;border-color:#685078;color:#d9c7ed}.renderer-toggle:disabled{opacity:.65;cursor:wait}.preview-status{display:flex;align-items:center;gap:13px}.renderer-badge{font-size:8px;letter-spacing:1px;color:#867991;padding:5px 7px;border:1px solid #332a3d;border-radius:4px}.renderer-badge.is-three{color:#d4b4f4;border-color:#70518a;background:#33214380}.renderer-error{font-size:11px;line-height:1.7;color:#e0b4c4;background:#311e2980;margin:0 20px 10px;padding:9px 12px;border-radius:5px}@media(max-width:760px){.site-header{gap:10px}.site-header .header-label,.site-header .header-divider{display:none}.renderer-toggle{min-width:0;padding:9px 10px;font-size:11px;gap:6px}.preview-status{gap:8px}.renderer-badge{font-size:7px;letter-spacing:.5px;padding:4px}.brand{font-size:20px}}.renderer-badge{display:inline-flex;align-items:center;height:22px;line-height:12px}.project-import{border:1px dashed #574064;border-radius:10px;background:#18121f;margin-bottom:14px;padding:16px 20px;transition:background .15s,border-color .15s}.project-import.is-dragging{border-color:#c4a0f0;background:#30203f}.project-import-main{display:flex;align-items:center;justify-content:space-between;gap:16px}.project-import-copy{display:flex;align-items:center;gap:12px;min-width:0}.project-import-icon{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:8px;background:#2a1f35;color:#bd98e4}.project-import h2{font-size:12px;font-weight:500;margin:0;color:#ded0ed}.project-import-copy p{font-size:10px;color:#94869f;line-height:1.6;margin:5px 0 0}.project-import button{flex:none;white-space:nowrap;border:1px solid #785290;background:#382447;color:#e5cef8;font-size:11px;padding:9px 15px;border-radius:6px}.project-import button:hover{background:#4b305e}.project-import button:disabled{opacity:.6;cursor:wait}.project-import-note{font-size:9px;color:#86768f;line-height:1.7;margin:10px 0 0}.project-import-feedback{font-size:10px;line-height:1.8;color:#cdb4e6;margin:9px 0 0;overflow-wrap:anywhere}.project-import-feedback.is-error{color:#efb5c1}@media(max-width:760px){.project-import{padding:14px}.project-import-main{gap:10px}.project-import-copy{gap:9px}.project-import-icon{display:none}.project-import button{padding:9px 11px}.project-import-note{font-size:9px}}.lyric-navigation{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:12px 0;color:#b6a2d3;font-size:10px}.lyric-navigation button{border:1px solid #574064;border-radius:6px;background:#2b203b;color:#dfc9ff;padding:8px 10px;font-size:10px}.lyric-navigation button:hover{background:#46305f}.lyric-timing{margin-top:22px}.lyric-animations{grid-template-columns:repeat(3,1fr)}
