:root{--otve-primary:#8b5cf6;--otve-primary-glow:#8b5cf64d;--otve-bg:#0f0f0f;--otve-bg-card:#1a1a2e;--otve-bg-card-hover:#1f1f3a;--otve-text:#e2e8f0;--otve-text-muted:#94a3b8;--otve-border:#94a3b826;--otve-border-hover:#8b5cf666;--otve-accent-green:#10b981;--otve-accent-red:#ef4444;--otve-accent-amber:#f59e0b;--otve-radius:8px;--otve-radius-sm:4px;--otve-radius-lg:12px}._otve-container{min-height:80vh;color:var(--otve-text);grid-template-rows:auto 1fr;grid-template-columns:280px 1fr;gap:0;display:grid}._otve-source-area{padding:var(--main-space-4);border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:var(--otve-border);grid-area:1/1}._otve-preview-wrap{background:var(--otve-bg);grid-area:1/2/3;justify-content:center;align-items:center;min-height:500px;display:flex;position:relative;overflow:hidden}._otve-controls{padding:var(--main-space-4);gap:var(--main-space-4);border-right-style:solid;border-right-width:1px;border-right-color:var(--otve-border);flex-direction:column;grid-area:2/1;display:flex;overflow-y:auto}@media (max-width:900px){._otve-container{grid-template-rows:auto auto auto;grid-template-columns:1fr;min-height:0}._otve-source-area{border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:var(--otve-border);grid-area:1/1}._otve-preview-wrap{touch-action:manipulation;grid-area:2/1;min-height:300px;max-height:60vh}._otve-controls{border-top-style:solid;border-top-width:1px;border-right-width:0;border-top-color:var(--otve-border);grid-area:3/1;overflow-y:visible}}@media (max-width:480px){._otve-source-area,._otve-controls{padding:var(--main-space-3)}._otve-preview-wrap{min-height:240px;max-height:55vh}}._otve-tabs{gap:var(--main-space-1);margin-bottom:var(--main-space-3);display:flex}._otve-tab{justify-content:center;align-items:center;gap:var(--main-space-1);border-style:solid;border-width:1px;border-color:var(--otve-border);border-radius:var(--otve-radius);min-height:40px;color:var(--otve-text-muted);font-size:var(--main-text-sm);cursor:pointer;touch-action:manipulation;background:0 0;flex:1;padding:.5rem .75rem;transition:color .2s,border-color .2s,background .2s;display:flex}@media (max-width:768px){._otve-tab{min-height:44px;padding:.6rem .75rem}}._otve-tab:hover{color:var(--otve-text);border-color:var(--otve-border-hover)}._otve-tab--active{border-color:var(--otve-primary);color:var(--otve-primary);background:#8b5cf61f}._otve-tab svg{width:14px;height:14px}._otve-tab-content{display:none}._otve-tab-content--active{display:block}._otve-upload-zone{padding:var(--main-space-6) var(--main-space-4);border-style:dashed;border-width:2px;border-color:var(--otve-border);border-radius:var(--otve-radius-lg);cursor:pointer;text-align:center;touch-action:manipulation;flex-direction:column;justify-content:center;align-items:center;transition:border-color .2s,background .2s;display:flex}@media (max-width:480px){._otve-upload-zone{padding:var(--main-space-4) var(--main-space-3)}}._otve-upload-zone:hover,._otve-upload-zone._otve-upload-zone--dragover{border-color:var(--otve-primary);background:#8b5cf60d}._otve-upload-icon{color:var(--otve-text-muted);margin-bottom:var(--main-space-2)}._otve-upload-icon svg{width:32px;height:32px}._otve-upload-text{font-size:var(--main-text-sm);color:var(--otve-text);margin:0 0 var(--main-space-1)}._otve-upload-hint{font-size:var(--main-text-xs);color:var(--otve-text-muted);margin:0}._otve-text-input-wrap{gap:var(--main-space-3);flex-direction:column;display:flex}._otve-text-input{width:100%;padding:var(--main-space-3);border-style:solid;border-width:1px;border-color:var(--otve-border);border-radius:var(--otve-radius);color:var(--otve-text);font-family:var(--main-font-mono);font-size:var(--main-text-sm);resize:vertical;background:#ffffff0d;min-height:60px}@media (max-width:768px){._otve-text-input{font-size:16px}}._otve-text-input:focus{border-color:var(--otve-primary);box-shadow:0 0 0 3px var(--otve-primary-glow);outline:none}._otve-text-options{gap:var(--main-space-2);flex-direction:column;display:flex}._otve-text-option{align-items:center;gap:var(--main-space-2);font-size:var(--main-text-xs);color:var(--otve-text-muted);flex-wrap:wrap;display:flex}._otve-text-option span:first-child{min-width:60px}._otve-text-option ._otve-slider{flex:1;min-width:120px}@media (max-width:480px){._otve-text-option{gap:var(--main-space-3)}._otve-text-option span:first-child{font-size:var(--main-text-sm);flex-basis:100%}}._otve-color-input{border-radius:var(--otve-radius-sm);cursor:pointer;background:0 0;border-width:0;flex-shrink:0;width:32px;height:32px;padding:0}@media (max-width:768px){._otve-color-input{width:40px;height:40px}}._otve-slider-value{text-align:right;min-width:36px;font-family:var(--main-font-mono);font-size:var(--main-text-xs)}._otve-canvas{image-rendering:auto;touch-action:manipulation;max-width:100%;max-height:100%;display:block}._otve-canvas--hidden{display:none}._otve-preview-empty{justify-content:center;align-items:center;gap:var(--main-space-3);color:var(--otve-text-muted);text-align:center;padding:var(--main-space-4);flex-direction:column;display:flex;position:absolute}._otve-preview-empty--hidden{display:none}._otve-preview-empty-icon svg{opacity:.4;width:48px;height:48px}._otve-preview-empty p{font-size:var(--main-text-sm);max-width:240px;margin:0}._otve-presets{gap:var(--main-space-2);flex-direction:column;display:flex}._otve-presets-label{font-size:var(--main-text-xs);color:var(--otve-text-muted);text-transform:uppercase;letter-spacing:.05em;font-weight:600}._otve-presets-list{gap:var(--main-space-1);flex-wrap:wrap;display:flex}._otve-preset{border-radius:var(--otve-radius-sm);border-style:solid;border-width:1px;border-color:var(--otve-border);color:var(--otve-text-muted);font-size:var(--main-text-xs);cursor:pointer;white-space:nowrap;touch-action:manipulation;background:0 0;padding:.3rem .65rem;transition:color .2s,border-color .2s,background .2s}._otve-preset:hover{color:var(--otve-text);border-color:var(--otve-border-hover)}._otve-preset--active{background:var(--otve-primary);border-color:var(--otve-primary);color:#fff}._otve-sliders{gap:var(--main-space-2);flex-direction:column;display:flex}._otve-slider-row{align-items:center;gap:var(--main-space-2);grid-template-columns:80px 1fr 32px;display:grid}._otve-slider-row label{font-size:var(--main-text-xs);color:var(--otve-text-muted);white-space:nowrap}._otve-slider-val{font-size:var(--main-text-xs);font-family:var(--main-font-mono);color:var(--otve-text-muted);text-align:right}._otve-slider{-webkit-appearance:none;appearance:none;cursor:pointer;touch-action:manipulation;background:#94a3b833;border-radius:2px;outline:none;width:100%;height:4px}._otve-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--otve-primary);cursor:pointer;width:14px;height:14px;box-shadow:0 0 4px var(--otve-primary-glow);border-radius:50%}._otve-slider::-moz-range-thumb{background:var(--otve-primary);cursor:pointer;width:14px;height:14px;box-shadow:0 0 4px var(--otve-primary-glow);border-width:0;border-radius:50%}@media (max-width:768px){._otve-slider{height:6px}._otve-slider::-webkit-slider-thumb{width:22px;height:22px}._otve-slider::-moz-range-thumb{width:22px;height:22px}}._otve-actions{gap:var(--main-space-2);padding-top:var(--main-space-3);border-top-style:solid;border-top-width:1px;border-top-color:var(--otve-border);margin-top:auto;display:flex}._otve-btn{justify-content:center;align-items:center;gap:var(--main-space-1);border-radius:var(--otve-radius);min-height:38px;font-size:var(--main-text-sm);cursor:pointer;white-space:nowrap;touch-action:manipulation;border-style:solid;border-width:0;padding:.5rem .85rem;font-weight:500;transition:opacity .2s,box-shadow .2s;display:inline-flex}._otve-btn svg{width:14px;height:14px}._otve-btn:hover{opacity:.85}._otve-btn--primary{background:var(--otve-primary);color:#fff;box-shadow:0 2px 8px var(--otve-primary-glow);flex:1}._otve-btn--secondary{color:var(--otve-text-muted);border-style:solid;border-width:1px;border-color:var(--otve-border);background:#94a3b81a}._otve-btn--secondary:hover{color:var(--otve-text)}._otve-btn--animating{border-color:var(--otve-primary);color:var(--otve-primary);background:#8b5cf626}@media (max-width:900px){._otve-sliders{gap:var(--main-space-3) var(--main-space-4);grid-template-columns:1fr 1fr;display:grid}}@media (max-width:768px){._otve-preset{font-size:var(--main-text-sm);padding:.5rem .85rem}._otve-btn{min-height:44px;padding:.65rem 1rem}._otve-slider-row{gap:var(--main-space-3);grid-template-columns:90px 1fr 36px}._otve-slider-row label,._otve-slider-val{font-size:var(--main-text-sm)}}@media (max-width:480px){._otve-slider-row{gap:var(--main-space-2);grid-template-columns:80px 1fr 32px}._otve-sliders{grid-template-columns:1fr}._otve-btn span{display:none}._otve-btn--primary span{display:inline}}