:root,:root[data-theme=dark]{--bg-primary: #0d1117;--bg-secondary: #161b22;--bg-tertiary: #21262d;--bg-panel: #161b22;--text-primary: #e6edf3;--text-secondary: #8b949e;--text-accent: #58a6ff;--border-color: #30363d;--border-subtle: #21262d;--accent-color: #238636;--accent-hover: #2ea043;--accent-fg: #f0f6fc;--link-color: #58a6ff;--link-hover: #79c0ff;--warning-bg: #3d2800;--warning-border: #9e6a03;--warning-text: #e3b341;--error-bg: #2d1316;--error-border: #f85149;--error-text: #ff7b72;--success-color: #3fb950;--success-bg: #0d2d0f;--input-bg: #0d1117;--input-border: #30363d;--input-focus: #58a6ff;--tag-bg: #1f3352;--tag-text: #79c0ff;--tab-active-bg: #21262d;--shadow: 0 8px 24px rgba(1, 4, 9, .8);--radius: 8px;--radius-sm: 6px;--radius-lg: 12px;--space-xs: .25rem;--space-sm: .5rem;--space-md: .75rem;--space-lg: 1rem;--space-xl: 1.5rem;--space-2xl: 2rem;color-scheme:dark}:root[data-theme=light]{--bg-primary: #ffffff;--bg-secondary: #f6f8fa;--bg-tertiary: #eaeef2;--bg-panel: #f6f8fa;--text-primary: #1f2328;--text-secondary: #57606a;--text-accent: #0969da;--border-color: #d0d7de;--border-subtle: #eaeef2;--accent-color: #1a7f37;--accent-hover: #218529;--accent-fg: #ffffff;--link-color: #0969da;--link-hover: #0550ae;--warning-bg: #fff8c5;--warning-border: #9a6700;--warning-text: #7d4e00;--error-bg: #fff0ee;--error-border: #cf222e;--error-text: #a40e26;--success-color: #1a7f37;--success-bg: #dafbe1;--input-bg: #ffffff;--input-border: #d0d7de;--input-focus: #0969da;--tag-bg: #ddf4ff;--tag-text: #0550ae;--tab-active-bg: #eaeef2;--shadow: 0 8px 24px rgba(140, 149, 159, .2);color-scheme:light}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0;min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:15px;line-height:1.6;background:var(--bg-primary);color:var(--text-primary)}a{color:var(--link-color);text-decoration:none}a:hover{color:var(--link-hover);text-decoration:underline}h1,h2,h3{line-height:1.25;margin:0 0 var(--space-sm)}h1{font-size:1.6rem}h2{font-size:1.1rem}h3{font-size:.95rem}p{margin:0 0 var(--space-md)}code,pre{font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:.85em;background:var(--bg-tertiary);border-radius:4px}code{padding:.15em .4em}pre{padding:var(--space-lg);overflow-x:auto}.text-muted{color:var(--text-secondary)}.text-xs{font-size:.75rem}.text-sm{font-size:.82rem}.hidden{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:absolute;top:-100%;left:var(--space-lg);z-index:1000;padding:var(--space-md) var(--space-xl);background:var(--accent-color);color:var(--accent-fg);font-weight:600;border-radius:0 0 var(--radius-sm) var(--radius-sm);text-decoration:none;transition:top .15s}.skip-link:focus{top:0}#app{display:flex;flex-direction:column;min-height:100vh}header{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md) var(--space-xl);background:var(--bg-secondary);border-bottom:1px solid var(--border-color);flex-wrap:wrap}.header-left{flex:1}.logo{font-size:1.1rem;font-weight:700;color:var(--text-primary);white-space:nowrap}.eco-links{display:flex;gap:var(--space-lg);font-size:.8rem}#theme-toggle{width:2.5rem;height:2.5rem;min-width:44px;min-height:44px;border-radius:50%;border:1px solid var(--border-color);background:var(--bg-tertiary);color:var(--text-primary);font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s,border-color .15s}#theme-toggle:hover{background:var(--tab-active-bg);border-color:var(--input-focus)}.hero{text-align:center;padding:var(--space-2xl) var(--space-xl);background:linear-gradient(180deg,var(--bg-secondary) 0%,var(--bg-primary) 100%);border-bottom:1px solid var(--border-subtle)}.hero h1{font-size:2rem;font-weight:800;margin-bottom:var(--space-sm);background:linear-gradient(135deg,var(--text-accent),var(--success-color));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero-subtitle{font-size:1.05rem;color:var(--text-secondary);max-width:640px;margin:0 auto var(--space-sm)}.hero-description{font-size:.88rem;color:var(--text-secondary);max-width:560px;margin:0 auto var(--space-lg)}.onboarding{max-width:720px;margin:var(--space-lg) auto;padding:var(--space-lg) var(--space-xl);background:var(--bg-panel);border:1px solid var(--border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow)}.onboarding-title{font-size:1rem;font-weight:600;margin-bottom:var(--space-md)}.onboarding-steps{display:flex;gap:var(--space-lg);flex-wrap:wrap}.step{flex:1;min-width:160px;display:flex;gap:var(--space-sm);align-items:flex-start}.step-number{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--text-accent);color:var(--bg-primary);font-weight:700;font-size:.82rem;flex-shrink:0}.step strong{font-size:.88rem}.step p{font-size:.78rem;color:var(--text-secondary);margin:var(--space-xs) 0 0}.onboarding-result{margin-top:var(--space-md);padding:var(--space-sm) var(--space-md);background:var(--success-bg);border-radius:var(--radius-sm);border:1px solid var(--success-color)}.onboarding-result p{margin:0;font-size:.82rem;color:var(--success-color)}main{flex:1;padding:var(--space-lg);max-width:1400px;margin:0 auto;width:100%}.panels{display:grid;grid-template-columns:1fr;gap:var(--space-lg)}@media (min-width: 769px){.panels{grid-template-columns:1fr 1fr}}@media (min-width: 1200px){.panels{grid-template-columns:1fr 1fr 1fr}}.panel{background:var(--bg-panel);border:1px solid var(--border-color);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow)}.panel-header{padding:var(--space-md) var(--space-lg);border-bottom:1px solid var(--border-color);background:var(--bg-tertiary);display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm)}.panel-header h2{font-size:.95rem;font-weight:600;margin:0}.panel-body{padding:var(--space-lg);flex:1;overflow-y:auto}.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.55rem 1rem;min-height:44px;min-width:44px;border-radius:var(--radius-sm);border:1px solid transparent;font-size:.88rem;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s,opacity .15s;-webkit-tap-highlight-color:transparent}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--accent-color);color:var(--accent-fg);border-color:var(--accent-color)}.btn-primary:hover:not(:disabled){background:var(--accent-hover)}.btn-secondary{background:var(--bg-tertiary);color:var(--text-primary);border-color:var(--border-color)}.btn-secondary:hover:not(:disabled){background:var(--tab-active-bg)}.btn-ghost{background:transparent;color:var(--text-secondary);border-color:transparent}.btn-ghost:hover{color:var(--text-primary);background:var(--bg-tertiary)}.btn-accent{background:var(--text-accent);color:var(--bg-primary);border-color:var(--text-accent);font-weight:700}.btn-accent:hover{opacity:.9}.btn-download{background:var(--accent-color);color:var(--accent-fg);border-color:var(--accent-color);margin-top:var(--space-md)}.btn-download:hover{background:var(--accent-hover)}.btn-sm{font-size:.78rem;padding:.3rem .6rem;min-height:32px}.btn-lg{font-size:1rem;padding:.75rem 1.5rem}.btn.loading{pointer-events:none;opacity:.7}.btn-row{display:flex;gap:var(--space-sm);flex-wrap:wrap;margin-top:var(--space-md)}.dropzone{border:2px dashed var(--border-color);border-radius:var(--radius-sm);padding:var(--space-2xl) var(--space-lg);text-align:center;color:var(--text-secondary);cursor:pointer;transition:border-color .15s,background .15s;position:relative}.dropzone:hover,.dropzone.dragover{border-color:var(--input-focus);background:var(--bg-tertiary)}.dropzone input[type=file]{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;cursor:pointer;width:100%;height:100%}.dropzone-icon{font-size:2rem;display:block;margin-bottom:var(--space-sm)}.dropzone-hint{font-size:.8rem;margin-top:var(--space-xs);display:block}.load-progress{margin-top:var(--space-sm);padding:var(--space-md);border-radius:var(--radius-sm);background:color-mix(in srgb,var(--tag-bg) 72%,var(--bg-panel));border:1px solid var(--input-focus)}.load-progress-head{display:flex;align-items:center;gap:var(--space-sm);color:var(--tag-text);margin-bottom:var(--space-sm)}.load-progress-bar{position:relative;overflow:hidden;height:.42rem;border-radius:999px;background:color-mix(in srgb,var(--input-focus) 18%,transparent);margin-bottom:var(--space-sm)}.load-progress-fill{position:absolute;inset:0 auto 0 -35%;width:35%;border-radius:inherit;background:linear-gradient(90deg,transparent 0%,var(--input-focus) 25%,var(--tag-text) 70%,transparent 100%);animation:progress-slide 1.1s ease-in-out infinite}.image-wrap{position:relative;display:inline-block;margin-top:var(--space-md);max-width:100%}.image-wrap canvas{display:block;max-width:100%;max-height:280px;width:auto;height:auto;border-radius:4px}.overlay-canvas{position:absolute;top:0;left:0;pointer-events:none;max-width:100%;max-height:280px;border-radius:4px}.suitability-row{margin-top:var(--space-sm);font-size:.82rem;display:flex;align-items:center;gap:var(--space-sm)}.image-info-row{margin-top:var(--space-sm);font-size:.8rem;color:var(--text-secondary)}.capacity-table{margin-top:var(--space-sm);border-collapse:collapse;width:100%;font-size:.8rem}.capacity-table th,.capacity-table td{padding:var(--space-xs) var(--space-sm);text-align:left;border-bottom:1px solid var(--border-subtle)}.capacity-table th{color:var(--text-secondary);font-weight:500}.badge{display:inline-block;font-size:.72rem;font-weight:600;padding:.15em .55em;border-radius:999px;white-space:nowrap}.badge-safe{background:var(--success-bg);color:var(--success-color);border:1px solid var(--success-color)}.badge-moderate{background:var(--warning-bg);color:var(--warning-text);border:1px solid var(--warning-border)}.badge-risky{background:var(--error-bg);color:var(--error-text);border:1px solid var(--error-border)}.tabs{display:flex;border-bottom:1px solid var(--border-color);margin-bottom:var(--space-lg)}.tab-btn{padding:var(--space-sm) var(--space-lg);min-height:44px;background:transparent;border:none;border-bottom:2px solid transparent;color:var(--text-secondary);font-size:.88rem;cursor:pointer;transition:color .15s,border-color .15s}.tab-btn:hover{color:var(--text-primary)}.tab-btn.active{color:var(--text-accent);border-bottom-color:var(--text-accent);background:var(--tab-active-bg);border-radius:4px 4px 0 0}.tab-pane{display:none}.tab-pane.active{display:block}.form-group{margin-bottom:var(--space-md)}label{display:block;font-size:.85rem;font-weight:500;color:var(--text-secondary);margin-bottom:var(--space-xs)}input[type=text],input[type=password],textarea{width:100%;padding:.55rem .75rem;min-height:44px;background:var(--input-bg);border:1px solid var(--input-border);border-radius:var(--radius-sm);color:var(--text-primary);font-size:1rem;font-family:inherit;transition:border-color .15s}input[type=text]:focus,input[type=password]:focus,textarea:focus{outline:2px solid var(--input-focus);outline-offset:1px;border-color:var(--input-focus)}textarea{resize:vertical;min-height:80px}input[type=range]{width:100%;accent-color:var(--input-focus)}.input-meta{display:flex;gap:var(--space-sm);margin-top:var(--space-xs)}.range-labels{display:flex;justify-content:space-between;font-size:.72rem;color:var(--text-secondary);margin-top:.1rem}.preset-row{display:flex;align-items:center;gap:var(--space-sm);margin-bottom:var(--space-md);flex-wrap:wrap}.preset-btn{padding:.3rem .65rem;font-size:.75rem;font-weight:600;border:1px solid var(--border-color);border-radius:999px;background:var(--bg-tertiary);color:var(--text-secondary);cursor:pointer;transition:all .15s}.preset-btn:hover{border-color:var(--input-focus);color:var(--text-primary)}.preset-btn.active{background:var(--tag-bg);color:var(--tag-text);border-color:var(--input-focus)}.alert{padding:.6rem .85rem;border-radius:var(--radius-sm);border:1px solid;font-size:.85rem;margin-bottom:var(--space-md)}.alert-warning{background:var(--warning-bg);border-color:var(--warning-border);color:var(--warning-text)}.alert-error{background:var(--error-bg);border-color:var(--error-border);color:var(--error-text)}.alert-success{background:var(--success-bg);border-color:var(--success-color);color:var(--success-color)}.alert-info{background:var(--tag-bg);border-color:var(--input-focus);color:var(--tag-text)}.toggle-row{display:flex;align-items:center;gap:var(--space-sm);margin-top:var(--space-sm);font-size:.8rem;color:var(--text-secondary)}.toggle-row input[type=checkbox]{accent-color:var(--input-focus)}.summary-card{background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius);padding:var(--space-lg);margin-top:var(--space-lg)}.summary-title{font-size:.9rem;font-weight:600;margin-bottom:var(--space-md);color:var(--text-accent)}.summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-sm) var(--space-lg);font-size:.82rem}.summary-item{display:flex;flex-direction:column}.summary-label{font-size:.72rem;font-weight:500;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.03em}.summary-value{font-weight:600;color:var(--text-primary)}.summary-note{margin-top:var(--space-md);font-size:.78rem;color:var(--text-secondary);display:flex;align-items:flex-start;gap:var(--space-sm)}.thumb-row{display:flex;gap:var(--space-lg);flex-wrap:wrap;margin-bottom:var(--space-md)}.thumb-col{flex:1;min-width:140px;text-align:center}.thumb-col canvas{max-width:180px;width:100%;border-radius:4px;display:block;margin:0 auto}.thumb-label{font-variant:small-caps;font-size:.75rem;color:var(--text-secondary);display:block;margin-bottom:var(--space-xs)}.diff-section{margin-top:var(--space-md)}.diff-section canvas{max-width:100%;max-height:220px;width:auto;border-radius:4px;display:block}.extract-msg{display:block;white-space:pre-wrap;word-break:break-word;padding:var(--space-sm);background:var(--bg-tertiary);border-radius:var(--radius-sm);margin-top:var(--space-sm)}.method-tabs{display:flex;gap:.35rem;margin-bottom:var(--space-md);flex-wrap:wrap}.method-tab{padding:.4rem .75rem;min-height:44px;min-width:44px;border-radius:20px;font-size:.82rem;font-weight:500;cursor:pointer;border:1px solid var(--border-color);background:var(--bg-tertiary);color:var(--text-secondary);transition:all .15s}.method-tab.active,.method-tab:hover{background:var(--tag-bg);color:var(--tag-text);border-color:var(--input-focus)}.analysis-bars{margin-bottom:var(--space-lg)}.bar-row{display:flex;align-items:center;gap:var(--space-sm);margin-bottom:.35rem}.bar-label{width:5.5rem;font-size:.82rem;color:var(--text-secondary);text-align:right;flex-shrink:0}.bar-track{flex:1;background:var(--bg-tertiary);border-radius:3px;height:18px;overflow:hidden}.bar-fill{height:100%;border-radius:3px;transition:width .3s}.bar-value{font-size:.82rem;font-weight:600;min-width:3.5rem;flex-shrink:0}.bar-badge{font-size:.72rem;font-weight:500;min-width:7rem;flex-shrink:0}.stats-grid{display:grid;gap:var(--space-md);grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}.stat-card{background:var(--bg-tertiary);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:var(--space-md)}.stat-label{font-size:.72rem;font-weight:500;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.03em;display:block;margin-bottom:var(--space-xs)}.stat-value{font-size:1rem;font-weight:700;color:var(--text-accent)}.stat-value.resist{color:var(--success-color)}.stat-value.detect{color:var(--error-text)}.stat-value.moderate{color:var(--warning-text)}.method-explanation{margin:var(--space-md) 0}.explain-text{font-size:.82rem;color:var(--text-secondary);padding:var(--space-sm) var(--space-md);border-left:3px solid var(--text-accent);background:var(--bg-tertiary);border-radius:0 var(--radius-sm) var(--radius-sm) 0}.hist-wrap{overflow-x:auto;margin-top:var(--space-sm)}.hist-canvas{width:100%;min-width:240px;height:100px;display:block}.changes-section{margin-top:var(--space-md)}.changes-section canvas{max-width:100%;max-height:220px;width:auto;border-radius:4px;display:block}.section-label{font-size:.88rem;font-weight:600;margin-bottom:var(--space-sm);color:var(--text-primary)}.explainer-card{background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius);padding:var(--space-lg);margin-bottom:var(--space-lg)}.explainer-card h3{font-size:.92rem;font-weight:600;margin-bottom:var(--space-md)}.explainer-list{margin:0;font-size:.82rem}.explainer-list dt{font-weight:600;color:var(--text-accent);margin-top:var(--space-sm)}.explainer-list dd{margin:0 0 var(--space-xs);color:var(--text-secondary)}.tooltip-trigger{position:relative;cursor:help;color:var(--text-accent);font-size:.85em}.tooltip-content{display:none;position:absolute;bottom:100%;left:50%;transform:translate(-50%);width:260px;padding:var(--space-sm) var(--space-md);background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-sm);font-size:.78rem;font-weight:400;color:var(--text-secondary);box-shadow:var(--shadow);z-index:100;line-height:1.4}.tooltip-trigger:hover .tooltip-content,.tooltip-trigger:focus .tooltip-content{display:block}.info-section{margin-top:var(--space-2xl);padding-top:var(--space-xl);border-top:1px solid var(--border-subtle)}.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-lg)}.info-card{background:var(--bg-panel);border:1px solid var(--border-color);border-radius:var(--radius);padding:var(--space-lg)}.info-card h3{font-size:.95rem;font-weight:600;margin-bottom:var(--space-md);color:var(--text-accent)}.info-card ul{margin:0;padding-left:var(--space-lg);font-size:.82rem;color:var(--text-secondary)}.info-card li{margin-bottom:var(--space-sm)}.info-card li strong{color:var(--text-primary)}.info-card em{color:var(--warning-text);font-style:italic}footer{padding:var(--space-xl);background:var(--bg-secondary);border-top:1px solid var(--border-color);text-align:center;font-size:.8rem;color:var(--text-secondary)}footer .scripture{font-style:italic;max-width:640px;margin:0 auto var(--space-sm)}@keyframes spin{to{transform:rotate(360deg)}}@keyframes progress-slide{0%{transform:translate(0)}to{transform:translate(320%)}}.spinner{display:inline-block;width:1em;height:1em;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:spin .6s linear infinite;vertical-align:middle}:focus-visible{outline:2px solid var(--input-focus);outline-offset:2px}:focus:not(:focus-visible){outline:none}button,[role=button],[role=tab],input[type=checkbox],.method-tab,.preset-btn,.tab-btn{min-height:44px;min-width:44px}.dropzone:focus-visible{outline:2px solid var(--input-focus);outline-offset:2px}.method-tab:focus-visible{outline:2px solid var(--input-focus);outline-offset:2px}.preset-btn:focus-visible{outline:2px solid var(--input-focus);outline-offset:2px}@media (max-width: 768px){.panels{grid-template-columns:1fr}.hero{padding:var(--space-xl) var(--space-md)}.hero h1{font-size:1.6rem}.bar-row{flex-wrap:wrap}.bar-badge{min-width:auto}.summary-grid,.info-grid{grid-template-columns:1fr}}@media (max-width: 480px){html{font-size:14px}header{padding:var(--space-md)}.eco-links{display:none}main{padding:var(--space-sm)}.panel-body{padding:var(--space-md)}.btn-row{flex-direction:column}.btn-row .btn{width:100%;justify-content:center}.hero h1{font-size:1.25rem}.hero-subtitle{font-size:.92rem}.hero-description{font-size:.82rem}.onboarding-steps{flex-direction:column}.bar-badge{display:none}.bar-label{width:4rem;font-size:.75rem}.method-tabs{gap:.25rem}.method-tab{padding:.35rem .55rem;font-size:.75rem}.dropzone{padding:var(--space-lg) var(--space-md)}.preset-row{gap:var(--space-xs)}.preset-btn{font-size:.7rem;padding:.25rem .5rem}.image-wrap canvas{max-height:200px}.thumb-col canvas{max-width:140px}.info-grid{gap:var(--space-md)}.tooltip-content{width:200px;font-size:.72rem}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}