: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: #000000;--surface: #111111;--surface-raised: #1a1a1a;--border: #222222;--border-visible: #333333;--text-disabled: #666666;--text-secondary: #999999;--text-primary: #e8e8e8;--text-display: #ffffff;--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: #ffffff;--surface-raised: #f0f0f0;--border: #e8e8e8;--border-visible: #cccccc;--text-disabled: #999999;--text-secondary: #666666;--text-primary: #1a1a1a;--text-display: #000000}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}body{margin:0;overflow:hidden;background-color:var(--black);font-family:var(--font-body);font-weight:400;user-select:none;-webkit-user-select:none;color:var(--text-primary);position:relative;touch-action:manipulation}.noise-overlay{display:none}.ic{width:20px;height:20px;flex:0 0 auto;display:block;color:inherit}#loader{position:fixed;inset:0;background:var(--black);z-index:9999;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity .4s var(--ease);pointer-events:none}.spinner{width:40px;height:40px;border:2px solid var(--border);border-top-color:var(--text-display);border-radius:50%;animation:spin .8s steps(12,end) infinite;margin-bottom:20px}@keyframes spin{to{transform:rotate(360deg)}}#loaderText{font-family:var(--font-mono);color:var(--text-secondary);text-transform:uppercase}#drop-zone{position:fixed;inset:16px;background:var(--surface);z-index:1500;border:1px dashed var(--border-visible);border-radius:var(--radius-md);display:flex;justify-content:center;align-items:center;text-align:center;font-family:var(--font-mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary);opacity:0;pointer-events:none;transition:opacity .25s var(--ease);padding:20px}#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{position:fixed;top:calc(16px + var(--safe-top));left:calc(16px + var(--safe-left));z-index:100;display:flex;flex-direction:column;gap:10px;pointer-events:none}.left-panel{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px;width:56px;pointer-events:auto}#viewPanel{margin-top:10px}.circle-btn{position:relative;width:40px;height:40px;min-width:40px;min-height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:var(--radius-md);color:var(--text-secondary);background:transparent;border:1px solid var(--border);transition:color .18s var(--ease),border-color .18s var(--ease),background-color .18s var(--ease)}.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{width:40px;height:40px;min-width:40px;min-height:40px;border-radius:var(--radius-md);border:1px solid var(--border);background:transparent;color:var(--text-secondary);font-family:var(--font-mono);font-size:10px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:color .18s var(--ease),border-color .18s var(--ease),background-color .18s var(--ease);display:flex;align-items:center;justify-content:center}.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{position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);background:var(--surface-raised);border:1px solid var(--border-visible);border-radius:var(--radius-sm);padding:6px 10px;font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;color:var(--text-primary);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .18s var(--ease);z-index:300}.tooltip-container:hover .tooltip{opacity:1}.lang-menu,.info-content{position:fixed;left:calc(80px + var(--safe-left));opacity:0;pointer-events:none;transform:translate(-8px);transition:opacity .25s var(--ease),transform .25s var(--ease);z-index:200;padding: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;transform:translate(0);pointer-events:auto}.lang-opt{padding:11px 12px;border-radius:var(--radius-sm);cursor:pointer;font-family:var(--font-body);font-size:14px;color:var(--text-secondary);transition:color .18s var(--ease),background-color .18s var(--ease);display:flex;align-items:center;gap:10px;min-height:44px}.lang-opt:hover{background:var(--surface-raised);color:var(--text-primary)}.flag-icon{width:20px;height:14px;object-fit:cover;border-radius:1px}.panel-heading{font-family:var(--font-mono);font-size:11px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary);margin-bottom:12px}.panel-heading--mt{margin-top:20px}.shortcut{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;padding-bottom:8px;font-family:var(--font-body);font-size:13px;color:var(--text-primary);border-bottom:1px solid var(--border)}.shortcut:last-of-type{border:none;margin-bottom:0;padding-bottom:0}.key{background:transparent;padding:3px 8px;border-radius:var(--radius-sm);color:var(--text-secondary);font-family:var(--font-mono);font-weight:400;font-size:10px;letter-spacing:.04em;border:1px solid var(--border-visible)}.feedback-link{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:20px;padding:12px;background:var(--text-display);color:var(--black);text-decoration:none;border-radius:var(--radius-pill);font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;transition:opacity .18s var(--ease)}.feedback-link:hover{opacity:.85}.feedback-link .ic{width:16px;height:16px}.panel-copyright{margin-top:16px;font-family:var(--font-mono);font-size:10px;letter-spacing:.04em;color:var(--text-disabled);text-align:center}.bottom-bar{position:fixed;bottom:calc(20px + var(--safe-bottom));left:50%;transform:translate(-50%);z-index:100;display:flex;align-items:center;gap:12px;padding:10px 14px;max-width:calc(100vw - 32px)}.divider{width:1px;height:28px;background:var(--border)}.action-group{display:flex;gap:8px}.btn{background:transparent;border:1px solid var(--border-visible);color:var(--text-primary);padding:0 18px;height:44px;border-radius:var(--radius-pill);font-family:var(--font-mono);font-size:12px;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);display:flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}.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{position:fixed;inset:0;pointer-events:none;z-index:50;display:none}.dim-overlay.visible{display:block}.dim-tag{position:absolute;background:var(--surface);color:var(--success);padding:4px 10px;border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:11px;font-weight:400;letter-spacing:.02em;border:1px solid var(--border);transform:translate(-50%,-50%);white-space:nowrap}[data-theme=light] .dim-tag{color:#3d8a4d}#toast{position:fixed;top:calc(24px + var(--safe-top));left:50%;transform:translate(-50%);background:var(--surface);border:1px solid var(--border-visible);border-left-width:3px;color:var(--text-primary);padding:12px 20px;border-radius:var(--radius-md);font-family:var(--font-mono);font-size:12px;letter-spacing:.02em;line-height:1.3;opacity:0;transition:opacity .25s var(--ease);pointer-events:none;z-index:9000;white-space:nowrap;max-width:calc(100vw - 40px);text-align:left;display:inline-block;width:auto}#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{position:fixed;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));overflow-y:auto;border-radius:var(--radius-md)!important;border:1px solid var(--border)!important;width:280px!important}.lil-gui .title{font-family:var(--font-mono)!important;font-weight:400!important;letter-spacing:.06em;text-transform:uppercase;font-size:11px!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{position:fixed;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:10000;opacity:0;visibility:hidden;transition:opacity .25s var(--ease),visibility .25s var(--ease)}[data-theme=light] .progress-overlay{background:#00000080}.progress-overlay.visible{opacity:1;visibility:visible}.progress-container{background:var(--surface);border:1px solid var(--border-visible);border-radius:var(--radius-md);padding:32px 48px;min-width:320px;max-width:90vw}.progress-title{color:var(--text-primary);font-family:var(--font-body);font-size:16px;font-weight:500;text-align:center;margin-bottom:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.progress-bar{width:100%;height:10px;background:var(--border);border-radius:0;overflow:hidden;position:relative}.progress-fill{height:100%;width:0%;background:var(--text-display);transition:width .15s var(--ease)}.progress-bar:after{content:"";position:absolute;inset:0;pointer-events:none;background-image:repeating-linear-gradient(90deg,transparent 0,transparent 8px,var(--surface) 8px,var(--surface) 10px)}.progress-text{color:var(--text-display);font-family:var(--font-display);font-size:24px;letter-spacing:-.02em;text-align:center;margin-top:16px}.progress-fill.indeterminate{width:30%!important;animation:indeterminate 1.2s var(--ease) infinite}@keyframes indeterminate{0%{transform:translate(-110%)}to{transform:translate(400%)}}@media(max-width:900px){.lil-gui.root{width:260px!important;max-height:60vh}}@media(max-width:600px){.left-column{top:calc(12px + var(--safe-top));left:calc(12px + var(--safe-left));gap:8px}.left-panel{padding:6px;width:50px;gap:5px}.circle-btn,.view-btn{width:44px;height:44px;min-width: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));left:50%;width:calc(100% - 24px);max-width:380px;flex-direction:column;gap:12px;padding:14px}.divider{display:none}.action-group,.main-action{width:100%}.main-action .btn{width:100%;height:50px;font-size:13px}.tools-action{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}.tools-action .btn{width:100%;height:48px;padding:0 12px}.lil-gui.root{top:auto!important;bottom:calc(180px + var(--safe-bottom));right:calc(12px + var(--safe-right));left:calc(12px + var(--safe-left));width:auto!important;max-width:none;max-height:45vh}.lil-gui.root.closed{bottom:calc(180px + var(--safe-bottom))}#toast{top:calc(16px + var(--safe-top));font-size:11px;padding:10px 16px;max-width:calc(100vw - 24px);white-space:normal}.dim-tag{font-size:10px;padding:3px 8px}#drop-zone{inset:12px;font-size:12px}}@media(max-width:380px){.left-column{top:calc(10px + var(--safe-top));left:calc(10px + var(--safe-left));gap:6px}.left-panel{padding:5px;width:46px;gap:4px}.circle-btn,.view-btn{width:40px;height:40px;min-width:40px;min-height:40px}.bottom-bar{width:calc(100% - 20px);padding:12px;gap:8px}.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{padding:8px 14px;font-size:11px;max-width:calc(100vw - 20px)}}@media(max-height:500px)and (orientation:landscape){.left-column{flex-direction:row;top:calc(10px + var(--safe-top));left:calc(10px + var(--safe-left));gap:8px}.left-panel{flex-direction:row;width:auto;padding:6px 8px}#viewPanel{margin-top:0;margin-left:auto}.bottom-bar{flex-direction:row;width:auto;max-width:none;padding:10px 16px;gap:12px}.divider{display:block}.action-group{width:auto}.main-action .btn{width:auto;height:42px}.tools-action{display:flex;grid-template-columns:unset}.tools-action .btn{width:auto;height:42px}.lil-gui.root{top:calc(10px + var(--safe-top))!important;bottom:auto;right:calc(10px + var(--safe-right));left:auto;width:240px!important;max-height:calc(100vh - 80px)}#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{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}