.abyssal-app{--abyssal-panel-bg:#08101ceb;--abyssal-border:#3c82c81f;--abyssal-border-hover:#3c82c840;--abyssal-accent:#5a9fd4;--abyssal-accent-glow:#50a0f026;--abyssal-text:#8aaccc;--abyssal-text-dim:#3d5a75;--abyssal-text-bright:#c0ddf0;--abyssal-mono:"JetBrains Mono", "Fira Code", "Cascadia Code", monospace;--abyssal-serif:"Cormorant Garamond", Georgia, "Times New Roman", serif;--abyssal-slider-track:#28466e66;--abyssal-slider-fill:#468cd280;height:100%;min-height:0;font-family:var(--abyssal-mono);color:var(--abyssal-text);background:#030810;flex:1;display:flex;position:relative;overflow:hidden}.abyssal-canvas-area{flex-direction:column;flex:1;justify-content:center;align-items:center;min-width:0;padding:20px;display:flex;position:relative}.abyssal-header{text-align:center;margin-bottom:16px}.abyssal-title{font-family:var(--abyssal-serif);letter-spacing:5px;text-transform:uppercase;color:#a0c4e8;text-shadow:0 0 40px #50a0dc40;margin:0;font-size:26px;font-weight:300}.abyssal-subtitle{font-family:var(--abyssal-mono);letter-spacing:3px;color:var(--abyssal-text-dim);margin-top:4px;font-size:10px;font-weight:300}.abyssal-canvas-wrap{justify-content:center;align-items:center;display:flex}.abyssal-canvas-frame{border-radius:14px;position:relative;overflow:hidden;box-shadow:0 8px 60px #00143cb3,0 0 120px #1e50960f}.abyssal-canvas-frame:after{content:"";border:1px solid var(--abyssal-border);pointer-events:none;border-radius:14px;position:absolute;inset:0}.abyssal-canvas-frame canvas{display:block}.abyssal-presets-area{flex-direction:column;align-items:center;gap:8px;margin-top:16px;display:flex}.abyssal-presets{flex-wrap:wrap;justify-content:center;gap:4px;display:flex}.abyssal-preset-btn{border:1px solid var(--abyssal-border);color:var(--abyssal-text-dim);cursor:pointer;font-family:var(--abyssal-mono);letter-spacing:1.2px;text-transform:uppercase;user-select:none;background:#14284666;border-radius:30px;padding:7px 14px;font-size:10px;font-weight:300;transition:all .4s cubic-bezier(.16,1,.3,1);position:relative}.abyssal-preset-btn:hover{border-color:var(--abyssal-border-hover);color:var(--abyssal-text);transform:translateY(-1px)}.abyssal-preset-btn.active{color:var(--abyssal-text-bright);box-shadow:0 0 16px var(--abyssal-accent-glow);background:linear-gradient(135deg,#1e467880,#14325a59);border-color:#50b4ff4d}.abyssal-preset-delete{color:#fff;cursor:pointer;opacity:0;background:#c83c3cb3;border-radius:50%;justify-content:center;align-items:center;width:16px;height:16px;font-size:10px;line-height:1;transition:opacity .2s,background .2s;display:flex;position:absolute;top:-4px;right:-4px}.abyssal-preset-btn:hover .abyssal-preset-delete{opacity:1}.abyssal-preset-delete:hover{background:#dc3c3cf2}.abyssal-save-btn{border:1px dashed var(--abyssal-border);color:var(--abyssal-text-dim);cursor:pointer;font-family:var(--abyssal-mono);letter-spacing:1px;text-transform:uppercase;background:#1428464d;border-radius:30px;padding:6px 14px;font-size:10px;font-weight:300;transition:all .3s}.abyssal-save-btn:hover{border-color:var(--abyssal-border-hover);color:var(--abyssal-text)}.abyssal-save-form{align-items:center;gap:6px;display:flex}.abyssal-save-form input[type=text]{border:1px solid var(--abyssal-border);color:var(--abyssal-text-bright);font-family:var(--abyssal-mono);background:#0a1423cc;border-radius:6px;width:140px;padding:6px 10px;font-size:11px;transition:border-color .3s}.abyssal-save-form input[type=text]::placeholder{color:var(--abyssal-text-dim)}.abyssal-save-form input[type=text]:focus-visible{outline:2px solid var(--color-focus,#2563eb);outline-offset:2px;border-color:var(--abyssal-border-hover)}.abyssal-save-form button{border:1px solid var(--abyssal-border);color:var(--abyssal-text);cursor:pointer;font-family:var(--abyssal-mono);letter-spacing:.5px;text-transform:uppercase;background:#14284680;border-radius:6px;padding:6px 12px;font-size:10px;font-weight:300;transition:all .3s}.abyssal-save-form button:hover{border-color:var(--abyssal-border-hover);color:var(--abyssal-text-bright)}.abyssal-save-form button:disabled{opacity:.4;cursor:not-allowed}.abyssal-panel{background:var(--abyssal-panel-bg);border-left:1px solid var(--abyssal-border);backdrop-filter:blur(20px);scrollbar-width:thin;scrollbar-color:#3c78b426 transparent;flex-shrink:0;width:320px;overflow-y:auto}.abyssal-panel::-webkit-scrollbar{width:4px}.abyssal-panel::-webkit-scrollbar-track{background:0 0}.abyssal-panel::-webkit-scrollbar-thumb{background:#3c78b433;border-radius:2px}.abyssal-panel-content{padding:20px 18px}.abyssal-panel-title{font-family:var(--abyssal-serif);letter-spacing:3px;text-transform:uppercase;color:var(--abyssal-text-bright);margin-bottom:4px;font-size:18px;font-weight:300}.abyssal-panel-subtitle{color:var(--abyssal-text-dim);letter-spacing:2px;text-transform:uppercase;margin-bottom:20px;font-size:9px}.abyssal-section-toggles{gap:8px;margin-bottom:16px;display:flex}.abyssal-toggle-all-btn{border:1px solid var(--abyssal-border);color:var(--abyssal-text-dim);cursor:pointer;font-family:var(--abyssal-mono);letter-spacing:1px;text-transform:uppercase;background:#1428464d;border-radius:4px;padding:4px 10px;font-size:9px;font-weight:300;transition:all .3s}.abyssal-toggle-all-btn:hover:not(:disabled){border-color:var(--abyssal-border-hover);color:var(--abyssal-text)}.abyssal-toggle-all-btn:disabled{opacity:.3;cursor:default}.abyssal-section{margin-bottom:20px}.abyssal-section-label{letter-spacing:2.5px;text-transform:uppercase;color:var(--abyssal-accent);border:none;border-bottom:1px solid var(--abyssal-border);cursor:pointer;width:100%;font-size:9px;font-weight:400;font-family:var(--abyssal-mono);background:0 0;align-items:center;gap:6px;margin-bottom:0;padding:0 0 6px;transition:color .2s;display:flex}.abyssal-section-label:hover{color:var(--abyssal-text-bright)}.abyssal-section-chevron{flex-shrink:0;font-size:10px;line-height:1;transition:color .2s}.abyssal-section-label:before{content:"";background:var(--abyssal-accent);width:4px;height:4px;box-shadow:0 0 6px var(--abyssal-accent);opacity:.7;border-radius:50%;flex-shrink:0}.abyssal-section-body{grid-template-rows:0fr;transition:grid-template-rows .3s;display:grid}.abyssal-section-body.expanded{grid-template-rows:1fr}.abyssal-section-inner{padding-top:12px;overflow:hidden}.abyssal-section-body.expanded .abyssal-section-inner{overflow:visible}.abyssal-control{margin-bottom:14px}.abyssal-control-header{justify-content:space-between;align-items:baseline;margin-bottom:6px;display:flex}.abyssal-control-label{color:var(--abyssal-text);letter-spacing:.5px;font-size:10px;font-weight:300}.abyssal-control-value{color:var(--abyssal-text-dim);text-align:right;font-variant-numeric:tabular-nums;min-width:36px;font-size:10px;font-weight:400}.abyssal-app input[type=range]{-webkit-appearance:none;appearance:none;background:var(--abyssal-slider-track);cursor:pointer;border-radius:2px;width:100%;height:3px;position:relative}.abyssal-app input[type=range]:focus-visible{outline:2px solid var(--color-focus,#2563eb);outline-offset:2px}.abyssal-app input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;cursor:pointer;background:radial-gradient(circle at 40% 35%,#8cc4ee,#4a8abb);border:1px solid #78beff4d;border-radius:50%;width:14px;height:14px;transition:box-shadow .2s,transform .2s;box-shadow:0 0 8px #50a0f04d}.abyssal-app input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15);box-shadow:0 0 14px #50a0f080}.abyssal-app input[type=range]::-moz-range-thumb{cursor:pointer;background:radial-gradient(circle at 40% 35%,#8cc4ee,#4a8abb);border:1px solid #78beff4d;border-radius:50%;width:14px;height:14px;box-shadow:0 0 8px #50a0f04d}.abyssal-app input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px #50a0f066}.abyssal-app input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px #50a0f066}.abyssal-color-row{align-items:center;gap:8px;margin-bottom:10px;display:flex}.abyssal-color-preview{border:1px solid var(--abyssal-border);cursor:pointer;border-radius:8px;flex-shrink:0;width:32px;height:32px;transition:border-color .3s;position:relative;overflow:hidden}.abyssal-color-preview:hover{border-color:var(--abyssal-border-hover)}.abyssal-color-preview input[type=color]{cursor:pointer;opacity:0;border:none;width:calc(100% + 16px);height:calc(100% + 16px);position:absolute;inset:-8px}.abyssal-color-label{flex:1;justify-content:space-between;align-items:baseline;display:flex}.abyssal-reset-btn{color:#dc787899;width:100%;font-family:var(--abyssal-mono);letter-spacing:2px;text-transform:uppercase;cursor:pointer;background:#c83c3c14;border:1px solid #c8505026;border-radius:8px;margin-top:8px;padding:10px;font-size:10px;font-weight:300;transition:all .3s}.abyssal-reset-btn:hover{color:#dc7878e6;background:#c83c3c26;border-color:#c850504d}.abyssal-formula{border:1px solid var(--abyssal-border);color:var(--abyssal-text-dim);word-break:break-all;font-variant-ligatures:none;background:#0a142399;border-radius:8px;max-height:80px;margin-bottom:20px;padding:10px 12px;font-size:9px;line-height:1.7;overflow-y:auto}.abyssal-formula .hl-num{color:#7eb8da}.abyssal-formula .hl-fn{color:#a0c4e8}.abyssal-panel-toggle{z-index:100;width:48px;height:48px;color:var(--abyssal-text-bright);cursor:pointer;backdrop-filter:blur(10px);background:#14325ad9;border:1px solid #50a0f040;border-radius:50%;justify-content:center;align-items:center;font-size:18px;transition:all .3s;display:none;position:fixed;bottom:20px;right:20px;box-shadow:0 4px 20px #00143c80}.abyssal-panel-toggle:hover{box-shadow:0 4px 30px #3c8cdc33}.abyssal-overlay{z-index:89;opacity:0;pointer-events:none;background:#00000080;transition:opacity .3s;position:fixed;inset:0}.abyssal-overlay.open{opacity:1;pointer-events:all}.abyssal-particles{pointer-events:none;z-index:0;position:absolute;inset:0;overflow:hidden}.abyssal-particle{background:#50a0ff1a;border-radius:50%;width:2px;height:2px;animation:linear infinite abyssal-drift;position:absolute}@keyframes abyssal-drift{0%{opacity:0;transform:translateY(100vh)scale(0)}10%{opacity:1}90%{opacity:1}to{opacity:0;transform:translateY(-10vh)scale(1)}}@media (width<=767px){.abyssal-app{flex-direction:column}.abyssal-canvas-area{padding:12px}.abyssal-title{letter-spacing:3px;font-size:20px}.abyssal-subtitle{letter-spacing:2px;font-size:9px}.abyssal-panel{z-index:90;width:320px;height:100dvh;transition:right .4s cubic-bezier(.16,1,.3,1);position:fixed;top:0;right:-340px;box-shadow:-10px 0 40px #00000080}.abyssal-panel.open{right:0}.abyssal-panel-toggle{display:flex}}@media (width>=768px){.abyssal-panel-toggle,.abyssal-overlay{display:none}}