:root{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--color-bg: #0f0f12;--color-surface: #16161c;--color-surface-subtle: #1b1b23;--color-surface-muted: #1f1f29;--color-border-subtle: #2b2b3a;--color-border-strong: #3a3a4c;--color-divider: rgba(15, 23, 42, .45);--color-text-primary: #f9fafb;--color-text-muted: #a5acba;--color-text-soft: #9ca3af;--color-accent: #f973b7;--color-accent-soft: #ffd6ec;--shadow-soft: 0 1px 3px rgba(15, 23, 42, .9);--shadow-modal: 0 18px 40px rgba(15, 23, 42, .8)}:root[data-theme=dark]{color-scheme:dark;color:var(--color-text-primary);background-color:var(--color-bg)}:root[data-theme=light]{color-scheme:light;color:#111827;background-color:#f3f4f6;--color-bg: #f3f4f6;--color-surface: #ffffff;--color-surface-subtle: #f9fafb;--color-surface-muted: #eef0f5;--color-border-subtle: #e5e7eb;--color-border-strong: #d1d5db;--color-divider: rgba(148, 163, 184, .35);--color-text-primary: #111827;--color-text-muted: #4b5563;--color-text-soft: #6b7280;--color-accent: #ec4899;--color-accent-soft: #fdf2f8;--shadow-soft: 0 1px 3px rgba(15, 23, 42, .08);--shadow-modal: 0 18px 40px rgba(15, 23, 42, .18)}*,*:before,*:after{box-sizing:border-box}body{margin:0;min-width:320px;height:100vh;overflow:hidden}:root[data-theme=dark] body{background-color:var(--color-bg)}:root[data-theme=light] body{background-color:var(--color-bg)}#root{width:100%;height:100%}a{color:inherit;text-decoration:none}button{font-family:inherit}@media(max-width:768px){body{padding:1.5rem 1rem}}@media(max-width:480px){body{padding:1rem .75rem}}:root[data-theme=dark]{--bg-primary: #0f0f12;--bg-secondary: #1a1a1f;--bg-tertiary: #25252d;--bg-modal: #1a1a1ffa;--border-primary: rgba(255, 255, 255, .08);--border-secondary: rgba(255, 255, 255, .15);--border-hover: rgba(255, 255, 255, .25);--text-primary: #f5f5f7;--text-secondary: rgba(255, 255, 255, .7);--text-tertiary: rgba(255, 255, 255, .5);--accent-primary: #6366f1;--accent-hover: #7c7ef3;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);--shadow-md: 0 4px 12px rgba(0, 0, 0, .4);--shadow-lg: 0 12px 32px rgba(0, 0, 0, .5)}:root[data-theme=light]{--bg-primary: #ffffff;--bg-secondary: #f8f9fa;--bg-tertiary: #e9ecef;--bg-modal: #fffffff5;--border-primary: rgba(0, 0, 0, .08);--border-secondary: rgba(0, 0, 0, .15);--border-hover: rgba(0, 0, 0, .25);--text-primary: #1a1a1f;--text-secondary: rgba(0, 0, 0, .7);--text-tertiary: rgba(0, 0, 0, .5);--accent-primary: #6366f1;--accent-hover: #7c7ef3;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--shadow-md: 0 4px 12px rgba(0, 0, 0, .08);--shadow-lg: 0 12px 32px rgba(0, 0, 0, .12)}.app-root{display:flex;flex-direction:column;width:100%;height:100%;overflow:hidden;color:var(--text-primary)}.top-bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:1rem 1.5rem;background:var(--bg-secondary);border-bottom:1px solid var(--border-primary);gap:1.5rem}.top-bar-left{display:flex;align-items:center;gap:1rem}.app-title-block{display:flex;flex-direction:column;gap:.125rem}.app-title{margin:0;font-size:1.25rem;font-weight:700;letter-spacing:-.02em}.app-subtitle{margin:0;font-size:.75rem;color:var(--text-secondary)}.algorithm-select{padding:.5rem .75rem;border-radius:8px;border:1px solid var(--border-secondary);background:var(--bg-tertiary);color:var(--text-primary);font-size:.875rem;font-weight:500;cursor:pointer;outline:none;transition:all .2s ease}.algorithm-select:hover:not(:disabled){border-color:var(--border-hover)}.algorithm-select:disabled{opacity:.5;cursor:not-allowed}.top-bar-center{display:flex;justify-content:center}.status-info{display:flex;align-items:center;gap:.5rem;font-size:.875rem}.status-label{color:var(--text-tertiary);font-weight:500}.status-value{color:var(--text-primary);font-weight:600;font-variant-numeric:tabular-nums}.status-divider{color:var(--text-tertiary)}.top-bar-right{display:flex;align-items:center;gap:.5rem;justify-content:flex-end}.icon-button{width:40px;height:40px;border-radius:8px;border:1px solid var(--border-primary);background:var(--bg-tertiary);cursor:pointer;font-size:1.25rem;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.icon-button:hover:not(:disabled){border-color:var(--border-hover);background:var(--bg-primary)}.icon-button:disabled{opacity:.5;cursor:not-allowed}.algorithm-info{padding:0 1.5rem .75rem;display:flex;flex-direction:column;gap:.25rem;color:var(--text-secondary);font-size:.8125rem}.algorithm-description{font-weight:500}.algorithm-meta{display:flex;flex-wrap:wrap;gap:.5rem}.algorithm-tag{padding:.15rem .5rem;border-radius:999px;border:1px solid var(--border-secondary);background:var(--bg-tertiary);font-size:.7rem;color:var(--text-tertiary)}.algorithm-subtitle{margin:0;font-size:.75rem;color:var(--text-secondary)}.algorithm-help-button{margin-left:.5rem;padding:.5rem .75rem;border-radius:999px;border:1px solid var(--border-secondary);background:var(--bg-tertiary);color:var(--text-primary);font-size:.75rem;cursor:pointer;transition:all .2s ease}.algorithm-help-button:hover:not(:disabled){border-color:var(--border-hover);background:var(--bg-primary)}.algorithm-help-button:disabled{opacity:.5;cursor:not-allowed}.algorithm-steps{margin:.75rem 0 0;padding-left:1.25rem;font-size:.8125rem;color:var(--text-secondary)}.algorithm-steps li+li{margin-top:.3rem}.main-stage{flex:1;display:flex;align-items:center;justify-content:center;padding:1.5rem;overflow:hidden}.image-frame{position:relative;border-radius:12px;border:1px solid var(--border-primary);background:var(--bg-tertiary);overflow:hidden;display:flex;align-items:center;justify-content:center;flex-shrink:0}.preview-image{display:block;width:100%;height:100%;object-fit:contain}.strip-container{display:flex;width:100%;height:100%}.image-strip{height:100%;background-repeat:no-repeat;background-position:center;transition-property:background-position,box-shadow,transform;transition-timing-function:ease-out}.image-strip-active{box-shadow:inset 0 0 0 2px var(--accent-primary);z-index:10}.empty-state{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:1rem}.bottom-bar{display:flex;align-items:center;justify-content:center;gap:.75rem;padding:1rem 1.5rem;background:var(--bg-secondary);border-top:1px solid var(--border-primary)}.control-btn{padding:.75rem 1.5rem;font-size:.875rem;font-weight:600;border-radius:8px;border:none;cursor:pointer;transition:all .2s ease;white-space:nowrap}.control-btn-primary{background:var(--accent-primary);color:#fff;box-shadow:0 2px 8px #6366f14d}.control-btn-primary:hover:not(:disabled){background:var(--accent-hover);box-shadow:0 4px 12px #6366f166}.control-btn-secondary{background:var(--bg-tertiary);border:1px solid var(--border-secondary);color:var(--text-primary)}.control-btn-secondary:hover:not(:disabled){border-color:var(--border-hover);background:var(--bg-primary)}.control-btn:disabled{opacity:.5;cursor:not-allowed}.modal-backdrop{position:fixed;inset:0;background:#000000b3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:1.5rem;z-index:50;animation:fade-in .2s ease-out}.modal{width:100%;max-width:500px;max-height:90vh;overflow-y:auto;padding:1.5rem;border-radius:12px;background:var(--bg-modal);border:1px solid var(--border-primary);box-shadow:var(--shadow-lg);animation:slide-up .3s ease-out}.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem}.modal-title{margin:0;font-size:1.25rem;font-weight:700}.modal-close{width:32px;height:32px;border-radius:6px;border:1px solid var(--border-primary);background:var(--bg-tertiary);cursor:pointer;font-size:1.25rem;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);transition:all .2s ease}.modal-close:hover{border-color:var(--border-hover);color:var(--text-primary)}.modal-content{display:flex;flex-direction:column;gap:1.5rem}.modal-text{margin:0 0 1.5rem;font-size:.9375rem;color:var(--text-secondary)}.setting-group{display:flex;flex-direction:column;gap:1rem}.setting-title{margin:0;font-size:.875rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-tertiary)}.radio-row{display:flex;gap:.5rem}.radio-option{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:8px;background:var(--bg-tertiary);border:1px solid var(--border-primary);font-size:.875rem;cursor:pointer;transition:all .2s ease}.radio-option:hover{border-color:var(--border-hover)}.radio-option input[type=radio]{width:16px;height:16px;cursor:pointer;accent-color:var(--accent-primary)}.preset-row{display:flex;flex-wrap:wrap;gap:.5rem}.chip{padding:.5rem 1rem;border-radius:8px;border:1px solid var(--border-secondary);background:var(--bg-tertiary);font-size:.875rem;color:var(--text-primary);cursor:pointer;transition:all .2s ease}.chip:hover{border-color:var(--border-hover)}.chip-active{background:var(--accent-primary);border-color:transparent;color:#fff}.file-input-label{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:.75rem 1.25rem;border-radius:8px;border:2px dashed var(--border-secondary);background:var(--bg-tertiary);font-size:.875rem;cursor:pointer;transition:all .2s ease}.file-input-label:hover{border-color:var(--accent-primary)}.file-input-label input{position:absolute;inset:0;opacity:0;cursor:pointer}.url-input-row{display:flex;gap:.5rem}.text-input{flex:1;padding:.625rem 1rem;border-radius:8px;border:1px solid var(--border-secondary);background:var(--bg-tertiary);color:var(--text-primary);font-size:.875rem;outline:none;transition:all .2s ease}.text-input:focus{border-color:var(--accent-primary);box-shadow:0 0 0 3px #6366f11a}.apply-btn{padding:.625rem 1.25rem;border-radius:8px;border:none;background:var(--accent-primary);color:#fff;font-size:.875rem;font-weight:600;cursor:pointer;transition:all .2s ease}.apply-btn:hover{background:var(--accent-hover)}.slider-row{display:flex;flex-direction:column;gap:.5rem}.slider-label{display:flex;justify-content:space-between;font-size:.875rem;font-weight:500}.slider-value{color:var(--text-secondary);font-weight:600;font-variant-numeric:tabular-nums}input[type=range]{appearance:none;width:100%;height:6px;border-radius:999px;background:var(--bg-tertiary);outline:none;border:1px solid var(--border-primary)}input[type=range]::-webkit-slider-thumb{appearance:none;width:18px;height:18px;border-radius:50%;background:var(--accent-primary);box-shadow:0 2px 6px #6366f14d;cursor:pointer;transition:all .2s ease}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.1);box-shadow:0 4px 10px #6366f166}input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;border:none;background:var(--accent-primary);box-shadow:0 2px 6px #6366f14d;cursor:pointer;transition:all .2s ease}input[type=range]::-moz-range-thumb:hover{transform:scale(1.1);box-shadow:0 4px 10px #6366f166}.modal-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-bottom:1.5rem}.stat-item{padding:1rem;border-radius:8px;background:var(--bg-tertiary);border:1px solid var(--border-primary)}.stat-label{font-size:.6875rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-tertiary);margin-bottom:.25rem;font-weight:600}.stat-value{font-size:1rem;font-variant-numeric:tabular-nums;font-weight:600}.modal-image-wrapper{border-radius:8px;overflow:hidden;border:1px solid var(--border-primary);margin-bottom:1.5rem;background:var(--bg-tertiary)}.modal-image{display:block;width:100%;max-height:280px;object-fit:contain}.modal-button{width:100%}.modal-footer{display:flex;justify-content:space-between;align-items:center;gap:.75rem;margin-top:1.5rem}.modal-footer-right{display:flex;gap:.75rem;margin-left:auto}.step-title{margin:0 0 .75rem;font-size:1.125rem;font-weight:600;color:var(--text-primary)}.step-indicator{display:flex;justify-content:center;align-items:center;gap:.5rem;margin-top:1.5rem}.step-dot{width:8px;height:8px;border-radius:50%;background:var(--border-secondary);transition:all .3s ease}.step-dot-active{width:12px;height:12px;background:var(--accent-primary);box-shadow:0 0 0 3px #6366f133}.step-dot-completed{background:var(--accent-primary)}.step-modal{max-width:600px}.language-selector{display:flex;gap:.5rem}.language-button{padding:.5rem 1rem;border-radius:8px;border:1px solid var(--border-secondary);background:var(--bg-tertiary);color:var(--text-primary);font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s ease}.language-button:hover{border-color:var(--border-hover)}.language-button-active{background:var(--accent-primary);border-color:transparent;color:#fff}@keyframes pulse-ring{0%{opacity:.8;transform:scale(1)}to{opacity:0;transform:scale(1.05)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes slide-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media(max-width:1024px){.status-info{font-size:.8125rem;gap:.375rem}}@media(max-width:768px){.app-root{height:100vh;height:100dvh}.top-bar{grid-template-columns:1fr auto;gap:.75rem;padding:.75rem 1rem}.top-bar-left{flex-direction:column;align-items:stretch;gap:.5rem}.app-title{font-size:1.125rem}.algorithm-select{width:100%;font-size:.8125rem;padding:.5rem}.top-bar-center{display:none}.top-bar-right{grid-column:2;grid-row:1;justify-content:flex-end;gap:.375rem}.icon-button{width:36px;height:36px;font-size:1.125rem}.main-stage{padding:1rem}.bottom-bar{flex-wrap:wrap;padding:.75rem 1rem;gap:.5rem}.control-btn{flex:1;min-width:0;padding:.625rem 1rem;font-size:.8125rem}.control-btn:first-child{flex:0 0 auto;min-width:80px}.modal{max-height:85vh;padding:1.25rem}.modal-stats{grid-template-columns:1fr;gap:.5rem}.radio-row{flex-direction:column}.radio-option{width:100%}}@media(max-width:480px){.top-bar{padding:.625rem .75rem}.app-title{font-size:1rem}.algorithm-select{font-size:.75rem}.main-stage{padding:.75rem}.bottom-bar{padding:.625rem .75rem}.control-btn{padding:.5rem .75rem;font-size:.75rem}.icon-button{width:32px;height:32px;font-size:1rem}}@media(max-height:600px){.top-bar,.bottom-bar{padding:.5rem 1rem}.main-stage{padding:.75rem}}@media(max-width:768px)and (orientation:landscape){.top-bar{grid-template-columns:auto 1fr auto;padding:.5rem 1rem}.top-bar-left{flex-direction:row;gap:.75rem}.app-title{font-size:1rem}.algorithm-select{width:auto;min-width:180px}.top-bar-center{display:flex}.status-info{font-size:.75rem;gap:.375rem}.main-stage{padding:.75rem}.bottom-bar{padding:.5rem 1rem}.control-btn{padding:.5rem 1rem;font-size:.75rem}}
