:root{--clr-bg:#0c0c14;--clr-surface:#13131f;--clr-surface-raised:#1a1a2e;--clr-surface-overlay:#1a1a2ed9;--clr-border:#ffffff0f;--clr-border-hover:#ffffff1f;--clr-text:#e8e8ef;--clr-text-muted:#8888a4;--clr-text-dim:#5a5a74;--clr-accent:#818cf8;--clr-accent-bright:#a78bfa;--clr-accent-glow:#818cf826;--clr-gradient-start:#6366f1;--clr-gradient-end:#a855f7;--clr-success:#34d399;--clr-error:#f87171;--clr-warning:#fbbf24;--font-body:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono:"JetBrains Mono", "Fira Code", "SF Mono", monospace;--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px;--space-3xl:64px;--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-xl:24px;--shadow-sm:0 1px 3px #0000004d;--shadow-md:0 4px 16px #0006;--shadow-lg:0 8px 32px #00000080;--shadow-glow:0 0 40px var(--clr-accent-glow);--ease-out:cubic-bezier(.16, 1, .3, 1);--duration-fast:.15s;--duration-normal:.25s;--duration-slow:.4s}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px}body{font-family:var(--font-body);background:var(--clr-bg);color:var(--clr-text);min-height:100vh;line-height:1.6;overflow-x:hidden}body:before{content:"";pointer-events:none;z-index:0;background:radial-gradient(60% 50% at 20% 10%,#6366f114 0%,#0000 70%),radial-gradient(50% 40% at 80% 80%,#a855f70f 0%,#0000 70%);position:fixed;inset:0}#app{z-index:1;max-width:860px;padding:0 var(--space-lg);margin:0 auto;position:relative}a{color:var(--clr-accent);transition:color var(--duration-fast) var(--ease-out);text-decoration:none}a:hover{color:var(--clr-accent-bright)}.app-header{padding:var(--space-2xl) 0 var(--space-xl);text-align:center}.header-content{align-items:center;gap:var(--space-sm);flex-direction:column;display:flex}.logo{align-items:center;gap:var(--space-md);display:flex}.logo-icon{flex-shrink:0;width:40px;height:40px}.logo h1{letter-spacing:-.03em;color:var(--clr-text);font-size:1.75rem;font-weight:700}.logo .accent{background:linear-gradient(135deg, var(--clr-gradient-start), var(--clr-gradient-end));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.tagline{color:var(--clr-text-muted);font-size:.9rem;font-weight:400}.main-content{counter-reset:step-counter;gap:var(--space-xl);padding-bottom:var(--space-3xl);flex-direction:column;display:flex}.step-section{counter-increment:step-counter;background:var(--clr-surface);border:1px solid var(--clr-border);border-radius:var(--radius-lg);padding:var(--space-xl);transition:border-color var(--duration-normal) var(--ease-out);animation:fadeSlideUp var(--duration-slow) var(--ease-out) both}.step-section:hover{border-color:var(--clr-border-hover)}.info-banner{align-items:flex-start;gap:var(--space-md);padding:var(--space-md) var(--space-lg);border-radius:var(--radius-md);margin-bottom:var(--space-xs);animation:fadeSlideUp var(--duration-slow) var(--ease-out) both;background:#818cf80a;border:1px solid #818cf826;display:flex}.info-banner__icon{color:var(--clr-accent);flex-shrink:0;margin-top:2px}.info-banner__text{color:var(--clr-text-muted);font-size:.85rem;line-height:1.6}.info-banner__text strong{color:var(--clr-text);font-weight:600}.info-banner__text em{color:var(--clr-accent);font-style:normal;font-weight:500}@keyframes fadeSlideUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.step-header{align-items:center;gap:var(--space-md);margin-bottom:var(--space-lg);display:flex}.step-badge{background:linear-gradient(135deg, var(--clr-gradient-start), var(--clr-gradient-end));color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;font-size:.85rem;font-weight:700;display:flex}.step-badge:before{content:counter(step-counter)}.step-header h2{letter-spacing:-.01em;font-size:1.15rem;font-weight:600}.drop-zone{border:2px dashed var(--clr-border-hover);border-radius:var(--radius-lg);padding:var(--space-3xl) var(--space-xl);text-align:center;cursor:pointer;transition:all var(--duration-normal) var(--ease-out);background:0 0;position:relative}.drop-zone:hover,.drop-zone.drag-over{border-color:var(--clr-accent);background:var(--clr-accent-glow);box-shadow:var(--shadow-glow)}.drop-zone.drag-over{transform:scale(1.01)}.drop-zone__inner{align-items:center;gap:var(--space-md);flex-direction:column;display:flex}.drop-zone__icon{width:48px;height:48px;color:var(--clr-text-dim);transition:color var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out)}.drop-zone:hover .drop-zone__icon{color:var(--clr-accent);transform:translateY(-4px)}.drop-zone__label{color:var(--clr-text-muted);font-size:.95rem}.drop-zone__browse{color:var(--clr-accent);font-family:inherit;font-size:inherit;cursor:pointer;text-underline-offset:2px;background:0 0;border:none;font-weight:500;text-decoration:underline}.drop-zone__browse:hover{color:var(--clr-accent-bright)}.drop-zone__hint{color:var(--clr-text-dim);font-size:.8rem}.drop-zone__test-generator{margin-top:var(--space-md);align-items:center;gap:var(--space-xs);z-index:5;flex-direction:column;display:flex;position:relative}.btn-generate-test{height:auto;padding:6px 12px;font-size:.8rem}.image-workspace{gap:var(--space-lg);margin-top:var(--space-lg);animation:fadeSlideUp var(--duration-slow) var(--ease-out) both;flex-direction:column;display:flex}.image-preview-container{background:var(--clr-surface-raised);border:1px solid var(--clr-border);border-radius:var(--radius-md);justify-content:center;align-items:center;display:flex;overflow:hidden}.canvas-wrapper{line-height:0;display:inline-block;position:relative}#canvas-preview{max-width:100%;height:auto;display:block}.ocr-overlay{pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0}.word-box{cursor:pointer;pointer-events:all;transition:border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);animation:wordAppear var(--duration-normal) var(--ease-out) both;background:#818cf80d;border:1.5px solid #818cf859;border-radius:3px;outline:none;margin:0;padding:0;font-size:0;line-height:0;position:absolute}.word-box:hover{border-color:var(--clr-accent);background:#818cf82e;box-shadow:0 0 10px #818cf84d}.word-box:focus-visible{border-color:var(--clr-accent-bright);box-shadow:0 0 0 2px var(--clr-accent-glow)}.word-box.selected{border-color:var(--clr-accent-bright);background:#a855fa33;border-width:2px;box-shadow:0 0 14px #a855fa59,inset 0 0 8px #a855fa1a}.word-box:after{content:attr(data-text);background:var(--clr-surface);border:1px solid var(--clr-border-hover);border-radius:var(--radius-sm);color:var(--clr-text);font-size:11px;font-family:var(--font-body);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--duration-fast) var(--ease-out);z-index:10;padding:3px 8px;line-height:1.4;position:absolute;bottom:calc(100% + 6px);left:50%;transform:translate(-50%)}.word-box:hover:after{opacity:1}@keyframes wordAppear{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}.ocr-loading-overlay{justify-content:center;align-items:center;gap:var(--space-md);-webkit-backdrop-filter:blur(4px);border-radius:var(--radius-md);z-index:20;background:#0c0c14cc;flex-direction:column;display:flex;position:absolute;inset:0}.ocr-spinner{border:3px solid var(--clr-surface-raised);border-top-color:var(--clr-accent);border-radius:50%;width:36px;height:36px;animation:.8s linear infinite spin}.ocr-loading__text{color:var(--clr-text-muted);font-size:.85rem}.workspace-toolbar{align-items:center;gap:var(--space-md);flex-wrap:wrap;display:flex}.ocr-hint{color:var(--clr-text-muted);animation:fadeSlideUp var(--duration-normal) var(--ease-out) both;flex:100%;font-size:.85rem}.ocr-hint.error{color:var(--clr-error)}.btn{align-items:center;gap:var(--space-sm);border-radius:var(--radius-md);font-family:var(--font-body);cursor:pointer;transition:all var(--duration-fast) var(--ease-out);white-space:nowrap;border:none;padding:10px 20px;font-size:.875rem;font-weight:500;display:inline-flex}.btn:disabled{opacity:.4;cursor:not-allowed}.btn--primary{background:linear-gradient(135deg, var(--clr-gradient-start), var(--clr-gradient-end));color:#fff;box-shadow:var(--shadow-sm)}.btn--primary:not(:disabled):hover{box-shadow:var(--shadow-md), 0 0 20px var(--clr-accent-glow);transform:translateY(-1px)}.btn--primary:not(:disabled):active{transform:translateY(0)}.btn--ghost{color:var(--clr-text-muted);border:1px solid var(--clr-border-hover);background:0 0}.btn--ghost:hover{color:var(--clr-text);border-color:var(--clr-text-dim);background:var(--clr-surface-raised)}.btn--large{padding:14px 28px;font-size:.95rem}.btn-icon{width:18px;height:18px}.scan-panel{align-items:center;gap:var(--space-lg);text-align:center;flex-direction:column;display:flex}.scan-description{color:var(--clr-text-muted);max-width:480px;font-size:.9rem;line-height:1.7}.scan-description strong{color:var(--clr-text);font-weight:500}.scan-status,.match-progress{width:100%;margin:0 auto var(--space-lg) auto;gap:var(--space-sm);animation:fadeSlideUp var(--duration-normal) var(--ease-out) both;flex-direction:column;display:flex}.scan-status__bar,.match-progress__bar{background:var(--clr-surface-raised);border-radius:99px;height:6px;overflow:hidden}.scan-status__fill,.match-progress__fill{background:linear-gradient(90deg, var(--clr-gradient-start), var(--clr-gradient-end));width:0%;height:100%;transition:width var(--duration-normal) var(--ease-out);border-radius:99px}.scan-status__text,.match-progress__text{color:var(--clr-text-dim);text-align:center;font-size:.8rem}.match-context{justify-content:space-between;align-items:center;gap:var(--space-lg);padding:var(--space-md) var(--space-lg);background:var(--clr-surface-raised);border:1px solid var(--clr-border);border-radius:var(--radius-md);margin-bottom:var(--space-lg);animation:fadeSlideUp var(--duration-normal) var(--ease-out) both;display:flex}.match-context__left{gap:var(--space-sm);flex-direction:column;flex:1;display:flex}.match-context__row{align-items:center;gap:var(--space-md);display:flex}.match-context__label{color:var(--clr-text-muted);min-width:80px;font-size:.875rem;font-weight:500}.match-input{background:var(--clr-surface);border:1px solid var(--clr-border);border-radius:var(--radius-sm);color:var(--clr-text);font-size:.95rem;font-family:var(--font-body);width:160px;transition:border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);outline:none;padding:6px 12px}.match-input:focus{border-color:var(--clr-accent);box-shadow:0 0 0 2px var(--clr-accent-glow)}.match-limit-select{background:var(--clr-surface);border:1px solid var(--clr-border);border-radius:var(--radius-sm);color:var(--clr-text);font-size:.9rem;font-family:var(--font-body);cursor:pointer;width:160px;transition:border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);outline:none;padding:5px 10px}.match-limit-select:focus{border-color:var(--clr-accent);box-shadow:0 0 0 2px var(--clr-accent-glow)}.match-context__from{color:var(--clr-text-dim);font-size:.85rem}.word-link{color:var(--clr-accent);font-family:inherit;font-size:inherit;cursor:pointer;text-underline-offset:2px;transition:color var(--duration-fast) var(--ease-out);background:0 0;border:none;padding:0;font-weight:600;text-decoration:underline}.word-link:hover{color:var(--clr-accent-bright)}.match-context__right{align-items:center;gap:var(--space-xs);flex-direction:column;flex-shrink:0;display:flex}.crop-preview-label{color:var(--clr-text-dim);text-transform:uppercase;letter-spacing:.05em;font-size:.7rem;font-weight:500}.crop-preview-container{background:var(--clr-surface);border:1px solid var(--clr-border);border-radius:var(--radius-sm);justify-content:center;align-items:center;min-width:48px;height:48px;padding:6px;display:flex}.crop-preview-container img{object-fit:contain;max-width:120px;max-height:36px;display:block}.results-grid{gap:var(--space-sm);flex-direction:column;display:flex}.result-card{align-items:center;gap:var(--space-md);padding:var(--space-md) var(--space-lg);background:var(--clr-surface-raised);border:1px solid var(--clr-border);border-radius:var(--radius-md);transition:border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);grid-template-columns:auto 1fr auto;display:grid}.result-card:hover{border-color:var(--clr-border-hover);box-shadow:var(--shadow-sm);transform:translate(4px)}.result-rank{border-radius:var(--radius-sm);width:32px;height:32px;color:var(--clr-text-muted);background:var(--clr-surface);border:1px solid var(--clr-border);flex-shrink:0;justify-content:center;align-items:center;font-size:.8rem;font-weight:700;display:flex}.result-card:first-child .result-rank{background:linear-gradient(135deg, var(--clr-gradient-start), var(--clr-gradient-end));color:#fff;border-color:#0000}.result-card:nth-child(2) .result-rank,.result-card:nth-child(3) .result-rank{background:var(--clr-accent-glow);color:var(--clr-accent);border-color:#818cf833}.result-info{flex-direction:column;gap:2px;min-width:0;display:flex}.result-font-name{color:var(--clr-text);white-space:nowrap;text-overflow:ellipsis;font-size:.9rem;font-weight:600;overflow:hidden}.result-font-name-row{align-items:center;gap:var(--space-xs);min-width:0;display:flex}.btn-copy{color:var(--clr-text-dim);cursor:pointer;border-radius:var(--radius-sm);transition:all var(--duration-fast) var(--ease-out);background:0 0;border:none;outline:none;flex-shrink:0;justify-content:center;align-items:center;padding:4px;display:inline-flex}.btn-copy:hover{background:var(--clr-surface);color:var(--clr-text)}.btn-copy:active{transform:scale(.9)}.btn-copy.copied{color:var(--clr-success)}.result-score{color:var(--clr-text-dim);font-size:.75rem;font-family:var(--font-mono)}.result-compare{align-items:center;gap:var(--space-md);justify-content:flex-end;display:flex}.compare-item{align-items:center;gap:var(--space-xs);flex-direction:column;display:flex}.compare-label{color:var(--clr-text-dim);text-transform:uppercase;letter-spacing:.05em;font-size:.6rem;font-weight:600}.result-crop-img{object-fit:contain;background:var(--clr-surface);border:1px solid var(--clr-border);border-radius:var(--radius-sm);max-width:90px;height:38px;padding:4px;display:block}.compare-arrow{color:var(--clr-text-dim);margin-top:10px;font-size:1.15rem;font-weight:600}.result-preview{color:var(--clr-text);height:38px;padding:0 var(--space-md);background:var(--clr-surface);border-radius:var(--radius-sm);border:1px solid var(--clr-border);text-overflow:ellipsis;white-space:nowrap;box-sizing:border-box;text-align:center;justify-content:center;align-items:center;min-width:48px;max-width:120px;font-size:1.25rem;line-height:1;display:inline-flex;overflow:hidden}.app-footer{padding:var(--space-2xl) 0 var(--space-3xl);text-align:center;border-top:1px solid var(--clr-border);margin-top:var(--space-2xl)}.footer-author{margin-bottom:var(--space-md);flex-direction:column;align-items:center;gap:4px;display:flex}.author-name{color:var(--clr-text);letter-spacing:.02em;font-size:1rem;font-weight:600}.author-title{color:var(--clr-accent);font-size:.85rem;font-weight:500}.author-location{color:var(--clr-text-dim);font-size:.8rem}.footer-contacts{justify-content:center;align-items:center;gap:var(--space-sm);margin-bottom:var(--space-lg);font-size:.85rem;display:flex}.footer-link{color:var(--clr-text-dim);transition:color var(--duration-fast) var(--ease-out);text-decoration:none}.footer-link:hover{color:var(--clr-text)}.footer-dot{color:var(--clr-border-hover)}.footer-tech{color:var(--clr-text-dim);max-width:600px;margin:0 auto;font-size:.75rem;line-height:1.6}[hidden]{display:none!important}@media (width<=640px){#app{padding:0 var(--space-md)}.step-section{padding:var(--space-lg)}.drop-zone{padding:var(--space-2xl) var(--space-md)}.logo h1{font-size:1.35rem}.result-card{gap:var(--space-sm);grid-template-columns:auto 1fr}.result-compare{margin-top:var(--space-xs);grid-column:1/-1;justify-content:flex-start}.match-context{gap:var(--space-md);flex-wrap:wrap}}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--clr-surface-raised);border-radius:99px}::-webkit-scrollbar-thumb:hover{background:var(--clr-text-dim)}@keyframes spin{to{transform:rotate(360deg)}}.btn.loading .btn-icon{animation:.8s linear infinite spin}.global-drag-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:9999;pointer-events:none;background:#0f172ae6;justify-content:center;align-items:center;width:100vw;height:100vh;display:flex;position:fixed;top:0;left:0}.global-drag-overlay__content{align-items:center;gap:var(--space-md);color:var(--clr-accent);border:2px dashed var(--clr-accent);padding:var(--space-2xl) var(--space-3xl);border-radius:var(--radius-lg);background:var(--clr-surface-raised);box-shadow:var(--shadow-lg);pointer-events:none;flex-direction:column;font-size:1.25rem;font-weight:500;display:flex}