:root{--font-body:"Space Grotesk", "DM Sans", system-ui, sans-serif;--font-mono:"Space Mono", "JetBrains Mono", "SF Mono", monospace;--font-display:"Doto", "Space Mono", monospace;--black:#000;--surface:#111;--surface-raised:#1a1a1a;--border:#222;--border-visible:#333;--text-disabled:#666;--text-secondary:#999;--text-primary:#e8e8e8;--text-display:#fff;--accent:#e0202a;--accent-subtle:rgba(224,32,42,.12);--success:#5aaf6b;--warning:#d4a843;--radius-sm:4px;--radius-md:8px;--radius-pill:999px;--ease:cubic-bezier(.25, .1, .25, 1);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-top:env(safe-area-inset-top,0px);--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px)}[data-theme=light]{--black:#f5f5f5;--surface:#fff;--surface-raised:#f0f0f0;--border:#e8e8e8;--border-visible:#ccc;--text-disabled:#999;--text-secondary:#666;--text-primary:#1a1a1a;--text-display:#000}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}body{background-color:var(--black);font-family:var(--font-body);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:var(--text-primary);touch-action:manipulation;margin:0;font-weight:400;position:relative;overflow:hidden}.noise-overlay{display:none}.ic{width:20px;height:20px;color:inherit;flex:none;display:block}#loader{background:var(--black);z-index:9999;transition:opacity .4s var(--ease);pointer-events:none;flex-direction:column;justify-content:center;align-items:center;display:flex;position:fixed;top:0;bottom:0;left:0;right:0}.spinner{border:2px solid var(--border);border-top-color:var(--text-display);border-radius:50%;width:40px;height:40px;margin-bottom:20px;animation:.8s steps(12,end) infinite spin}@keyframes spin{to{transform:rotate(360deg)}}#loaderText{font-family:var(--font-mono);color:var(--text-secondary);text-transform:uppercase}#drop-zone{background:var(--surface);z-index:1500;border:1px dashed var(--border-visible);border-radius:var(--radius-md);text-align:center;font-family:var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary);opacity:0;pointer-events:none;transition:opacity .25s var(--ease);justify-content:center;align-items:center;padding:20px;font-size:13px;display:flex;position:fixed;top:16px;bottom:16px;left:16px;right:16px}#drop-zone.active{opacity:1;pointer-events:all;border-color:var(--text-display);color:var(--text-primary)}.ui-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md)}.left-column{top:calc(16px + var(--safe-top));left:calc(16px + var(--safe-left));z-index:100;pointer-events:none;flex-direction:column;gap:10px;display:flex;position:fixed}.left-panel{pointer-events:auto;flex-direction:column;align-items:center;gap:6px;width:56px;padding:8px;display:flex}#viewPanel{margin-top:10px}.circle-btn{cursor:pointer;border-radius:var(--radius-md);width:40px;min-width:40px;height:40px;min-height:40px;color:var(--text-secondary);border:1px solid var(--border);transition:color .18s var(--ease), border-color .18s var(--ease), background-color .18s var(--ease);background:0 0;justify-content:center;align-items:center;display:flex;position:relative}.circle-btn:hover{color:var(--text-primary);border-color:var(--border-visible)}.circle-btn:active{background:var(--surface-raised)}.circle-btn.active{background:var(--text-display);color:var(--black);border-color:var(--text-display)}.view-btn{border-radius:var(--radius-md);border:1px solid var(--border);width:40px;min-width:40px;height:40px;min-height:40px;color:var(--text-secondary);font-family:var(--font-mono);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:color .18s var(--ease), border-color .18s var(--ease), background-color .18s var(--ease);background:0 0;justify-content:center;align-items:center;font-size:10px;font-weight:400;display:flex}.view-btn:hover{color:var(--text-primary);border-color:var(--border-visible)}.view-btn:active{background:var(--surface-raised)}.ic-sun,.ic-moon{display:none}[data-theme=dark] #themeBtn .ic-moon,[data-theme=light] #themeBtn .ic-sun{display:block}.tooltip-container{position:relative}.tooltip{background:var(--surface-raised);border:1px solid var(--border-visible);border-radius:var(--radius-sm);font-family:var(--font-mono);letter-spacing:.04em;color:var(--text-primary);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .18s var(--ease);z-index:300;padding:6px 10px;font-size:11px;position:absolute;top:50%;left:calc(100% + 10px);transform:translateY(-50%)}.tooltip-container:hover .tooltip{opacity:1}.lang-menu,.info-content{left:calc(80px + var(--safe-left));opacity:0;pointer-events:none;transition:opacity .25s var(--ease), transform .25s var(--ease);z-index:200;padding:8px;position:fixed;transform:translate(-8px)}.lang-menu{top:calc(16px + var(--safe-top));width:160px}.info-content{top:calc(70px + var(--safe-top));width:280px;max-width:300px;padding:16px}.lang-menu.visible,.info-content.visible{opacity:1;pointer-events:auto;transform:translate(0)}.lang-opt{border-radius:var(--radius-sm);cursor:pointer;font-family:var(--font-body);color:var(--text-secondary);transition:color .18s var(--ease), background-color .18s var(--ease);align-items:center;gap:10px;min-height:44px;padding:11px 12px;font-size:14px;display:flex}.lang-opt:hover{background:var(--surface-raised);color:var(--text-primary)}.flag-icon{object-fit:cover;border-radius:1px;width:20px;height:14px}.panel-heading{font-family:var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary);margin-bottom:12px;font-size:11px;font-weight:400}.panel-heading--mt{margin-top:20px}.shortcut{font-family:var(--font-body);color:var(--text-primary);border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;margin-bottom:8px;padding-bottom:8px;font-size:13px;display:flex}.shortcut:last-of-type{border:none;margin-bottom:0;padding-bottom:0}.key{border-radius:var(--radius-sm);color:var(--text-secondary);font-family:var(--font-mono);letter-spacing:.04em;border:1px solid var(--border-visible);background:0 0;padding:3px 8px;font-size:10px;font-weight:400}.feedback-link{background:var(--text-display);color:var(--black);border-radius:var(--radius-pill);font-family:var(--font-mono);letter-spacing:.06em;text-transform:uppercase;transition:opacity .18s var(--ease);justify-content:center;align-items:center;gap:8px;margin-top:20px;padding:12px;font-size:12px;text-decoration:none;display:flex}.feedback-link:hover{opacity:.85}.feedback-link .ic{width:16px;height:16px}.panel-copyright{font-family:var(--font-mono);letter-spacing:.04em;color:var(--text-disabled);text-align:center;margin-top:16px;font-size:10px}.bottom-bar{bottom:calc(20px + var(--safe-bottom));z-index:100;align-items:center;gap:12px;max-width:calc(100vw - 32px);padding:10px 14px;display:flex;position:fixed;left:50%;transform:translate(-50%)}.divider{background:var(--border);width:1px;height:28px}.action-group{gap:8px;display:flex}.btn{border:1px solid var(--border-visible);color:var(--text-primary);border-radius:var(--radius-pill);height:44px;font-family:var(--font-mono);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:color .18s var(--ease), border-color .18s var(--ease), background-color .18s var(--ease), opacity .18s var(--ease);white-space:nowrap;background:0 0;justify-content:center;align-items:center;gap:8px;padding:0 18px;font-size:12px;display:flex}.btn .ic{width:16px;height:16px}.btn:hover{color:var(--text-display);border-color:var(--text-display)}.btn:active{background:var(--surface-raised)}.btn-primary{background:var(--text-display);color:var(--black);border:1px solid var(--text-display);padding:0 24px}.btn-primary:hover{color:var(--black);opacity:.85;border-color:var(--text-display)}.btn-primary:active{background:var(--text-display);opacity:.75}input[type=file]{display:none}.dim-overlay{pointer-events:none;z-index:50;display:none;position:fixed;top:0;bottom:0;left:0;right:0}.dim-overlay.visible{display:block}.dim-tag{background:var(--surface);color:var(--success);border-radius:var(--radius-sm);font-family:var(--font-mono);letter-spacing:.02em;border:1px solid var(--border);white-space:nowrap;padding:4px 10px;font-size:11px;font-weight:400;position:absolute;transform:translate(-50%,-50%)}[data-theme=light] .dim-tag{color:#3d8a4d}#toast{top:calc(24px + var(--safe-top));background:var(--surface);border:1px solid var(--border-visible);color:var(--text-primary);border-radius:var(--radius-md);font-family:var(--font-mono);letter-spacing:.02em;opacity:0;transition:opacity .25s var(--ease);pointer-events:none;z-index:9000;white-space:nowrap;text-align:left;border-left-width:3px;width:auto;max-width:calc(100vw - 40px);padding:12px 20px;font-size:12px;line-height:1.3;display:inline-block;position:fixed;left:50%;transform:translate(-50%)}#toast.toast-success{border-left-color:var(--success);color:var(--success)}#toast.toast-error{border-left-color:var(--accent);color:var(--accent)}#toast.toast-info{border-left-color:var(--text-secondary);color:var(--text-primary)}.lil-gui{--background-color:var(--surface);--text-color:var(--text-primary);--title-background-color:var(--surface-raised);--title-text-color:var(--text-secondary);--widget-color:var(--surface-raised);--hover-color:var(--border-visible);--focus-color:var(--background-color);--number-color:var(--text-primary);--string-color:var(--text-primary);--widget-border-radius:var(--radius-sm);font-family:var(--font-body)!important;font-size:11px!important}.lil-gui.root{top:calc(16px + var(--safe-top));right:calc(16px + var(--safe-right));z-index:110;max-height:calc(100vh - 32px - var(--safe-top) - var(--safe-bottom));position:fixed;overflow-y:auto;border-radius:var(--radius-md)!important;border:1px solid var(--border)!important;width:280px!important}.lil-gui .title{letter-spacing:.06em;text-transform:uppercase;font-family:var(--font-mono)!important;font-size:11px!important;font-weight:400!important}.lil-gui input,.lil-gui .display,.lil-gui .number .slider~input{font-family:var(--font-mono)!important}.lil-controller.lil-option .lil-display.lil-active{color:var(--black)}.lil-controller.lil-option select:focus{outline:none}.lil-gui.root::-webkit-scrollbar{width:4px}.lil-gui.root::-webkit-scrollbar-thumb{background:var(--border-visible);border-radius:2px}.progress-overlay{z-index:10000;opacity:0;visibility:hidden;transition:opacity .25s var(--ease), visibility .25s var(--ease);background:rgba(0,0,0,.8);justify-content:center;align-items:center;display:flex;position:fixed;top:0;bottom:0;left:0;right:0}[data-theme=light] .progress-overlay{background:rgba(0,0,0,.5)}.progress-overlay.visible{opacity:1;visibility:visible}.progress-container{background:var(--surface);border:1px solid var(--border-visible);border-radius:var(--radius-md);min-width:320px;max-width:90vw;padding:32px 48px}.progress-title{color:var(--text-primary);font-family:var(--font-body);text-align:center;white-space:nowrap;text-overflow:ellipsis;margin-bottom:24px;font-size:16px;font-weight:500;overflow:hidden}.progress-bar{background:var(--border);border-radius:0;width:100%;height:10px;position:relative;overflow:hidden}.progress-fill{background:var(--text-display);width:0%;height:100%;transition:width .15s var(--ease)}.progress-bar:after{content:"";pointer-events:none;background-image:repeating-linear-gradient(90deg, transparent 0, transparent 8px, var(--surface) 8px, var(--surface) 10px);position:absolute;top:0;bottom:0;left:0;right:0}.progress-text{color:var(--text-display);font-family:var(--font-display);letter-spacing:-.02em;text-align:center;margin-top:16px;font-size:24px}.progress-fill.indeterminate{animation:indeterminate 1.2s var(--ease) infinite;width:30%!important}@keyframes indeterminate{0%{transform:translate(-110%)}to{transform:translate(400%)}}@media (max-width:900px){.lil-gui.root{max-height:60vh;width:260px!important}}@media (max-width:600px){.left-column{top:calc(12px + var(--safe-top));left:calc(12px + var(--safe-left));gap:8px}.left-panel{gap:5px;width:50px;padding:6px}.circle-btn,.view-btn{width:44px;min-width:44px;height:44px;min-height:44px}.circle-btn .ic{width:20px;height:20px}.view-btn{font-size:10px}.tooltip{display:none!important}.lang-menu{left:calc(70px + var(--safe-left));top:calc(12px + var(--safe-top));width:150px}.info-content{left:calc(70px + var(--safe-left));top:calc(60px + var(--safe-top));width:calc(100vw - 90px - var(--safe-left));max-width:280px}.bottom-bar{bottom:calc(16px + var(--safe-bottom));flex-direction:column;gap:12px;width:calc(100% - 24px);max-width:380px;padding:14px;left:50%}.divider{display:none}.action-group,.main-action{width:100%}.main-action .btn{width:100%;height:50px;font-size:13px}.tools-action{grid-template-columns:1fr 1fr;gap:10px;width:100%;display:grid}.tools-action .btn{width:100%;height:48px;padding:0 12px}.lil-gui.root{bottom:calc(180px + var(--safe-bottom));right:calc(12px + var(--safe-right));left:calc(12px + var(--safe-left));max-width:none;max-height:45vh;width:auto!important;top:auto!important}.lil-gui.root.closed{bottom:calc(180px + var(--safe-bottom))}#toast{top:calc(16px + var(--safe-top));white-space:normal;max-width:calc(100vw - 24px);padding:10px 16px;font-size:11px}.dim-tag{padding:3px 8px;font-size:10px}#drop-zone{font-size:12px;top:12px;bottom:12px;left:12px;right:12px}}@media (max-width:380px){.left-column{top:calc(10px + var(--safe-top));left:calc(10px + var(--safe-left));gap:6px}.left-panel{gap:4px;width:46px;padding:5px}.circle-btn,.view-btn{width:40px;min-width:40px;height:40px;min-height:40px}.bottom-bar{gap:8px;width:calc(100% - 20px);padding:12px}.main-action .btn{height:48px}.tools-action .btn{height:44px}.lang-menu{left:calc(62px + var(--safe-left))}.info-content{left:calc(62px + var(--safe-left));width:calc(100vw - 80px - var(--safe-left))}#toast{max-width:calc(100vw - 20px);padding:8px 14px;font-size:11px}}@media (max-height:500px) and (orientation:landscape){.left-column{top:calc(10px + var(--safe-top));left:calc(10px + var(--safe-left));flex-direction:row;gap:8px}.left-panel{flex-direction:row;width:auto;padding:6px 8px}#viewPanel{margin-top:0;margin-left:auto}.bottom-bar{flex-direction:row;gap:12px;width:auto;max-width:none;padding:10px 16px}.divider{display:block}.action-group{width:auto}.main-action .btn{width:auto;height:42px}.tools-action{grid-template-columns:unset;display:flex}.tools-action .btn{width:auto;height:42px}.lil-gui.root{bottom:auto;right:calc(10px + var(--safe-right));max-height:calc(100vh - 80px);left:auto;top:calc(10px + var(--safe-top))!important;width:240px!important}#toast{top:calc(10px + var(--safe-top));padding:8px 16px}}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){.ui-panel{border-width:.5px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}