*{box-sizing:border-box}:root{color-scheme:light;--color-bg-app: #f7f9fc;--color-bg-surface: #ffffff;--color-bg-surface-muted: #f8f9fa;--color-grid-line: rgba(59, 130, 246, .03);--color-bg-overlay: rgba(15, 23, 42, .45);--color-text-primary: #0f172a;--color-text-secondary: #475569;--color-text-muted: #64748b;--color-border: #dbe1ea;--color-border-strong: #c5d0df;--color-accent: #3b82f6;--color-accent-soft: rgba(59, 130, 246, .12);--color-primary: #0b1220;--color-primary-hover: #0a1633;--color-on-primary: #ffffff;--color-danger: #dc3545;--color-danger-soft: #ffe0e0;--color-success: #10b981;--color-info: #4dabf7;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .1);--shadow-md: 0 4px 14px rgba(11, 18, 32, .12);--shadow-lg: 0 12px 30px rgba(11, 18, 32, .18);font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;line-height:1.5;font-weight:400;color:var(--color-text-primary);background-color:var(--color-bg-app);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media(prefers-color-scheme:dark){:root:not([data-theme]){color-scheme:dark;--color-bg-app: #060b14;--color-bg-surface: #0f1724;--color-bg-surface-muted: #151f2f;--color-grid-line: rgba(125, 145, 175, .03);--color-bg-overlay: rgba(2, 6, 23, .65);--color-text-primary: #e5edf8;--color-text-secondary: #b8c4d6;--color-text-muted: #90a0b8;--color-border: #27364c;--color-border-strong: #35506f;--color-accent: #60a5fa;--color-accent-soft: rgba(96, 165, 250, .2);--color-primary: #1c2940;--color-primary-hover: #263957;--color-on-primary: #f4f8ff;--color-danger: #f87171;--color-danger-soft: rgba(239, 68, 68, .18);--color-success: #34d399;--color-info: #60a5fa;--shadow-sm: 0 2px 10px rgba(0, 0, 0, .35);--shadow-md: 0 6px 18px rgba(0, 0, 0, .4);--shadow-lg: 0 16px 36px rgba(0, 0, 0, .5)}}:root[data-theme=light]{color-scheme:light}:root[data-theme=dark]{color-scheme:dark;--color-bg-app: #060b14;--color-bg-surface: #0f1724;--color-bg-surface-muted: #151f2f;--color-grid-line: rgba(125, 145, 175, .03);--color-bg-overlay: rgba(2, 6, 23, .65);--color-text-primary: #e5edf8;--color-text-secondary: #b8c4d6;--color-text-muted: #90a0b8;--color-border: #27364c;--color-border-strong: #35506f;--color-accent: #60a5fa;--color-accent-soft: rgba(96, 165, 250, .2);--color-primary: #1c2940;--color-primary-hover: #263957;--color-on-primary: #f4f8ff;--color-danger: #f87171;--color-danger-soft: rgba(239, 68, 68, .18);--color-success: #34d399;--color-info: #60a5fa;--shadow-sm: 0 2px 10px rgba(0, 0, 0, .35);--shadow-md: 0 6px 18px rgba(0, 0, 0, .4);--shadow-lg: 0 16px 36px rgba(0, 0, 0, .5)}html,body{margin:0;min-width:320px;height:100%;background-color:var(--color-bg-app);color:var(--color-text-primary)}#root{height:100%}h1,h2,h3,h4,h5,h6{margin:0}html{scroll-behavior:smooth}.landing-page{--landing-bg: var(--color-bg-app);--landing-bg-alt: var(--color-bg-surface-muted);--landing-primary: var(--color-primary);--landing-primary-hover: var(--color-primary-hover);--landing-accent: var(--color-accent);--landing-accent-subtle: var(--color-accent);--landing-text: var(--color-text-primary);--landing-text-muted: var(--color-text-muted);--landing-border: color-mix(in srgb, var(--color-border) 85%, transparent);--landing-on-primary: var(--color-on-primary);--landing-details-bg: linear-gradient(180deg, rgba(248, 250, 252, .88) 0%, rgba(255, 255, 255, .98) 100%);--landing-details-border: rgba(148, 163, 184, .28);--landing-details-accent-border: rgba(59, 130, 246, .28);--landing-details-shadow: 0 4px 14px rgba(11, 18, 32, .06);--landing-visual-bg: rgba(248, 250, 252, .82);--landing-visual-border: rgba(148, 163, 184, .5);--landing-shadow: 0 4px 24px rgba(11, 18, 32, .06);--landing-shadow-lg: 0 12px 48px rgba(11, 18, 32, .08);--landing-radius: 16px;--landing-radius-lg: 24px}.landing-page{min-height:100%;font-family:DM Sans,system-ui,-apple-system,sans-serif;color:var(--landing-text);line-height:1.65;font-weight:400}:root[data-theme=dark] .landing-page{--landing-shadow: 0 8px 28px rgba(2, 6, 23, .42);--landing-shadow-lg: 0 16px 40px rgba(2, 6, 23, .5);--landing-details-bg: linear-gradient( 180deg, color-mix(in srgb, var(--color-bg-surface-muted) 96%, transparent) 0%, color-mix(in srgb, var(--color-bg-surface) 96%, transparent) 100% );--landing-details-border: color-mix(in srgb, var(--color-border-strong) 78%, transparent);--landing-details-accent-border: color-mix(in srgb, var(--color-accent) 45%, transparent);--landing-details-shadow: 0 8px 24px rgba(2, 6, 23, .35);--landing-visual-bg: color-mix(in srgb, var(--color-bg-surface-muted) 80%, transparent);--landing-visual-border: color-mix(in srgb, var(--color-border-strong) 74%, transparent)}.landing-page .landing-content{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:0 1.5rem}@media(min-width:768px){.landing-page .landing-content{padding:0 2.5rem}}.landing-nav{position:sticky;top:0;z-index:100;height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 1.5rem;background:color-mix(in srgb,var(--landing-bg) 85%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:box-shadow .2s ease,background-color .2s ease}.landing-nav.scrolled{box-shadow:var(--landing-shadow);background:color-mix(in srgb,var(--landing-bg) 95%,transparent)}.landing-nav-inner{max-width:1200px;margin:0 auto;width:100%;display:flex;align-items:center;justify-content:space-between}.landing-nav-left{display:flex;align-items:center;gap:.75rem}.landing-nav-logo{width:32px;height:32px}.landing-nav-brand{font-size:1.125rem;font-weight:600;color:var(--landing-text)}.landing-nav-badge{font-size:.7rem;font-weight:500;color:var(--landing-text-muted);padding:.2rem .5rem;background:#94a3b826;border-radius:9999px}.landing-nav-right{display:flex;align-items:center;gap:1.5rem}.landing-nav-link{font-size:.9rem;font-weight:500;color:var(--landing-text-muted);text-decoration:none;cursor:pointer;transition:color .2s}.landing-nav-link:hover{color:var(--landing-accent)}.landing-nav-cta{font-size:.9rem;font-weight:500;padding:.5rem 1rem;background:var(--landing-primary);color:var(--landing-on-primary);border:none;border-radius:8px;cursor:pointer;transition:transform .15s,box-shadow .2s}.landing-nav-cta:hover{background:var(--landing-primary-hover);transform:translateY(-1px);box-shadow:0 4px 12px #0b122033}.landing-hero{padding:3rem 0 4rem}.landing-hero-content{max-width:800px;margin:0 auto;text-align:center}.landing-hero-content h1{font-size:2.25rem;font-weight:600;line-height:1.25;margin:0 0 1rem;letter-spacing:-.015em}@media(min-width:768px){.landing-hero-content h1{font-size:2.75rem}}.landing-hero-headline-accent{color:var(--landing-accent)}.landing-hero-sub{font-size:1rem;color:var(--landing-text-muted);margin:0 auto 2rem;max-width:520px;line-height:1.6}.landing-upload-card{background:var(--color-bg-surface);border:2px dashed var(--landing-border);border-radius:var(--landing-radius-lg);padding:2rem 2.5rem;cursor:pointer;box-shadow:0 4px 20px #0b12201a;transition:border-color .2s,box-shadow .2s,background .2s;max-width:100%}.landing-upload-inner{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;min-height:120px}.landing-upload-card:hover,.landing-upload-card.dragging{border-color:var(--landing-accent);background:#3b82f605;box-shadow:0 6px 28px #0b12201a}.landing-upload-card input{display:none}.landing-upload-btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-size:1rem;font-weight:600;color:var(--landing-on-primary);background:var(--landing-primary);border:none;border-radius:10px;padding:.75rem 1.5rem;cursor:pointer;box-shadow:0 4px 14px #0b122040;transition:background .2s,transform .15s,box-shadow .2s}.landing-upload-icon{width:1.25rem;height:1.25rem;flex-shrink:0}.landing-upload-card:hover .landing-upload-btn-primary,.landing-upload-btn-primary:hover{background:var(--landing-primary-hover);transform:translateY(-1px);box-shadow:0 4px 16px #0b122040}.landing-upload-secondary{font-size:.9rem;color:var(--landing-text-muted);font-weight:400;margin:0}.landing-sample-zone{width:100%;background:color-mix(in srgb,var(--color-bg-surface) 60%,transparent)}:root[data-theme=dark] .landing-sample-zone{background:color-mix(in srgb,var(--color-bg-surface) 20%,transparent)}.landing-how-link-wrap{padding:3rem 1.5rem 2.5rem;text-align:center}@media(min-width:768px){.landing-how-link-wrap{padding:4rem 2.5rem 3rem}}.landing-how-link{display:inline-flex;flex-direction:column;align-items:center;gap:.35rem;font-size:.9rem;font-weight:500;color:var(--landing-text-muted);text-decoration:none;transition:color .2s}.landing-how-link:hover{color:var(--landing-accent)}.landing-how-link-arrow{font-size:1rem;line-height:1;opacity:.8}.landing-sample-section{width:100%;padding:3rem 1.5rem 0;margin-top:0;background:transparent}@media(min-width:768px){.landing-sample-section{padding:4rem 2.5rem 0}}.landing-sample-section .landing-section-header,.landing-sample-section .landing-puzzle-grid,.landing-sample-section .landing-sample-actions{max-width:1400px;margin-left:auto;margin-right:auto}.landing-sample-section .landing-section-header{margin-bottom:1.5rem;text-align:center}.landing-sample-section .landing-puzzle-grid{margin-bottom:1.5rem;justify-content:center}.landing-sample-section .landing-sample-actions{justify-content:center}.landing-section-header{margin-bottom:1.5rem}.landing-section-header h2{font-size:1.5rem;font-weight:600;margin:0 0 .25rem}.landing-section-header p{font-size:.9rem;color:var(--landing-text-muted);margin:0}.landing-puzzle-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:1.5rem;margin-bottom:1.5rem;max-width:100%}.landing-puzzle-card{width:200px;min-width:200px;height:220px;background:var(--color-bg-surface);border:2px solid var(--landing-border);border-radius:var(--landing-radius);overflow:hidden;cursor:pointer;box-shadow:0 4px 20px #0b12201f;transition:all .2s;position:relative;display:flex;flex-direction:column;flex-shrink:0;padding:10px}.landing-puzzle-card:hover{transform:translateY(-2px);box-shadow:0 8px 28px #0b12201f;border-color:#3b82f666}.landing-puzzle-card.selected{border-color:var(--landing-accent);box-shadow:0 4px 20px #3b82f633,0 0 0 1px var(--landing-accent)}.landing-puzzle-card-thumb{width:180px;height:180px;flex-shrink:0;overflow:hidden;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--landing-bg-alt);margin:0 auto 8px}.landing-puzzle-card-thumb img{width:100%;height:100%;object-fit:cover;object-position:center center;border-radius:12px}.landing-puzzle-card-name{flex:1;min-height:0;padding:0 6px;font-size:.95rem;font-weight:500;color:var(--landing-text);text-align:center;display:flex;align-items:center;justify-content:center;word-wrap:break-word;overflow-wrap:break-word}.landing-sample-actions{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:.75rem}.landing-sample-btn{font-size:1rem;font-weight:500;padding:.6rem 1.25rem;border-radius:8px;cursor:pointer;transition:transform .15s,box-shadow .2s,background .2s,border-color .2s}.landing-solve-btn{background:var(--landing-primary);color:var(--landing-on-primary);border:none;box-shadow:0 4px 14px #0b12204d}.landing-solve-btn:hover:not(:disabled){background:var(--landing-primary-hover);transform:translateY(-1px);box-shadow:0 6px 20px #0b12204d}.landing-solve-btn:disabled{opacity:.5;cursor:not-allowed}.landing-play-btn{background:var(--color-bg-surface);color:var(--landing-accent);border:2px solid var(--landing-accent);box-shadow:0 4px 14px #0b12201a}.landing-play-btn:hover:not(:disabled){background:#3b82f614;transform:translateY(-1px);box-shadow:0 6px 20px #3b82f633}.landing-play-btn:disabled{opacity:.5;cursor:not-allowed}.landing-how-section{width:100%;padding:4rem 1.5rem 5rem;flex-shrink:0}@media(min-width:768px){.landing-how-section{padding:4rem 2.5rem 5rem}}.landing-how-section .landing-section-header{max-width:min(1520px,96vw);margin-left:auto;margin-right:auto;margin-bottom:2rem}.landing-how-single{max-width:min(1520px,96vw);margin:0 auto}.landing-step-list{position:relative;background:transparent;border:none;box-shadow:none;padding:0;overflow:visible}.landing-step-list:before{content:"";position:absolute;left:calc(1.5rem + 17px);top:2rem;bottom:2rem;width:0;border-left:2px dotted var(--landing-border);pointer-events:none}.landing-step-item{border-bottom:1px solid var(--landing-border);padding:.1rem 0}.landing-step-item.expanded{padding-bottom:.65rem}.landing-step-item:last-child{border-bottom:none}.landing-step-header{display:flex;align-items:flex-start;gap:1rem;padding:1.3rem 1.5rem}.landing-step-num{flex-shrink:0;width:36px;height:36px;border-radius:50%;background:var(--landing-primary);color:var(--landing-on-primary);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem;position:relative;z-index:1}.landing-step-content{flex:1}.landing-step-content h4{font-size:1.1rem;font-weight:600;margin:0 0 .35rem}.landing-step-preview{font-size:.95rem;color:var(--landing-text-muted);margin:0;line-height:1.55}.landing-step-details-wrap{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .36s ease,opacity .26s ease}.landing-step-details-wrap.expanded{grid-template-rows:1fr;opacity:1}.landing-step-details-inner{overflow:hidden;margin-top:1rem;margin-left:calc(2.5rem + 36px);margin-right:1.5rem;padding:1rem 1.1rem 1.1rem;background:var(--landing-details-bg);border-radius:12px;border:1px solid var(--landing-details-border);border-left:3px solid var(--landing-details-accent-border);box-shadow:var(--landing-details-shadow)}.landing-step-details-wrap:not(.expanded) .landing-step-details-inner{margin-top:0}.landing-step-details{font-size:.95rem;color:var(--landing-text-muted);margin:0 0 .8rem;line-height:1.65}.landing-step-detail-steps{list-style:none;margin:0 0 .8rem;padding:0;display:flex;flex-direction:column;gap:.6rem;counter-reset:detail-step}.landing-step-detail-step{counter-increment:detail-step;display:grid;grid-template-columns:1.6rem 1fr;grid-template-rows:auto auto;column-gap:.55rem;row-gap:.15rem}.landing-step-detail-step:before{content:counter(detail-step);grid-row:1 / 3;grid-column:1;display:flex;align-items:flex-start;justify-content:center;padding-top:.05rem;font-size:.7rem;font-weight:700;color:#3b82f6bf;line-height:1.55}.landing-step-detail-heading{grid-column:2;font-size:.88rem;font-weight:600;color:var(--landing-text);line-height:1.4}.landing-step-detail-body{grid-column:2;font-size:.875rem;color:var(--landing-text-muted);line-height:1.6}.landing-step-visual{--step-visual-slot-max: min(380px, 100%);border:1px dashed var(--landing-visual-border);border-radius:10px;background:var(--landing-visual-bg);padding:.75rem}.landing-step-visual-frame{border-radius:10px;overflow:hidden;border:1px solid rgba(148,163,184,.45);background:var(--color-bg-surface);box-sizing:border-box}.landing-step-visual-frame--code{background:#1a1f2e;border-color:#6378a059}.landing-step-visual-gallery-sequence--uniform-row .landing-step-visual-slot .landing-step-visual-frame.landing-step-visual-frame--code{flex:none;aspect-ratio:1;align-items:stretch;padding:0}.landing-step-code-block{margin:0;padding:1rem 1.25rem;font-family:"ui-monospace",SFMono-Regular,Menlo,Consolas,monospace;font-size:.8rem;line-height:1.75;color:#8b9ab4;white-space:pre;overflow-x:auto;overflow-y:auto;flex:1;min-height:0;width:100%;box-sizing:border-box}.landing-step-code-block .jk{color:#7ec8e3}.landing-step-code-block .js{color:#a8d9a0}.landing-step-code-block .jn{color:#e0c97a}.landing-step-code-block .jp{color:#6e7e9e}.landing-step-visual-frame-single{width:fit-content;max-width:min(100%,980px);margin:0 auto;padding:10px;display:block}.landing-step-visual-single-wrap{display:flex;flex-direction:column;align-items:center;width:100%}.landing-step-visual-single-wrap .landing-step-visual-caption{max-width:42rem}.landing-step-visual-frame img{display:block}.landing-step-visual-gallery .landing-step-visual-slot{margin-inline:auto;display:flex;flex-direction:column;flex-shrink:0}.landing-step-visual-gallery-sequence--square-slots .landing-step-visual-slot{width:min(100%,var(--step-visual-slot-max));aspect-ratio:1;height:auto}.landing-step-visual-gallery-sequence--square-slots .landing-step-visual-slot .landing-step-visual-frame{flex:1;min-height:0;width:100%;padding:8px;box-sizing:border-box;overflow:hidden;display:grid}.landing-step-visual-gallery-sequence--square-slots .landing-step-visual-slot .landing-step-visual-frame img{width:100%;height:100%;object-fit:cover;object-position:center}.landing-step-visual-gallery-sequence--uniform-row>.landing-step-visual-card{align-self:stretch;align-items:stretch}.landing-step-visual-gallery-sequence--uniform-row .landing-step-visual-slot{flex:1 1 auto;min-height:0;width:100%;max-width:var(--step-visual-slot-max)}.landing-step-visual-gallery-sequence--uniform-row .landing-step-visual-slot .landing-step-visual-frame{flex:1;min-height:0;width:100%;display:flex;align-items:center;justify-content:center;padding:8px;box-sizing:border-box}.landing-step-visual-gallery-sequence--uniform-row .landing-step-visual-slot .landing-step-visual-frame img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}.landing-step-visual-gallery-grid .landing-step-visual-card{align-self:stretch;align-items:stretch}.landing-step-visual-gallery-grid .landing-step-visual-slot{flex:1 1 auto;min-height:0;width:100%;max-width:var(--step-visual-slot-max);margin-inline:auto}.landing-step-visual-gallery-grid .landing-step-visual-slot .landing-step-visual-frame{flex:1;min-height:0;width:100%;display:flex;align-items:center;justify-content:center;padding:8px;box-sizing:border-box}.landing-step-visual-gallery-grid .landing-step-visual-slot .landing-step-visual-frame img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}.landing-step-visual-frame-single img{width:auto;height:auto;max-width:min(100%,960px);max-height:min(68vh,680px);object-fit:contain}.landing-step-visual-gallery{width:100%}.landing-step-visual-gallery-sequence{display:flex;align-items:center;gap:.75rem}.landing-step-visual-gallery-sequence>.landing-step-visual-card{flex:1 1 0;min-width:0}.landing-step-visual-gallery-sequence>.landing-step-visual-separator{flex-shrink:0}.landing-step-visual-gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem;align-items:stretch}.landing-step-visual-card-wrap{display:flex;align-items:center;gap:.75rem;flex:1;min-width:0}.landing-step-visual-card{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center}.landing-step-visual-caption{margin-top:.6rem;font-size:.82rem;font-weight:600;color:var(--landing-text);text-align:center;width:100%;line-height:1.35;letter-spacing:.01em}.landing-step-visual-separator{flex-shrink:0;color:var(--landing-text-muted);font-size:1.1rem;font-weight:700}.landing-step-visual-note{margin:.65rem 0 0;font-size:.78rem;color:var(--landing-text-muted)}.landing-step-toggle{flex-shrink:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:none;background:transparent;color:var(--landing-text-muted);cursor:pointer;transition:transform .2s ease,color .2s ease}.landing-step-toggle:focus-visible{outline:2px solid rgba(59,130,246,.55);outline-offset:2px}.landing-step-toggle:hover{color:var(--landing-accent)}.landing-step-toggle svg{width:28px;height:28px}.landing-step-toggle.expanded{transform:rotate(180deg)}@media(max-width:768px){.landing-step-details-inner{margin-right:.75rem}.landing-step-visual-gallery-sequence{flex-direction:column;gap:.9rem}.landing-step-visual-gallery-grid{grid-template-columns:1fr}.landing-step-visual-card-wrap{flex-direction:column;align-items:stretch;gap:.5rem}.landing-step-visual-separator{align-self:center;transform:rotate(90deg)}}.landing-footer{padding:2rem 0 3rem;border-top:1px solid var(--landing-border);text-align:center;flex-shrink:0}.landing-footer-credit{font-size:.9rem;color:var(--landing-text-muted);margin:0}.landing-footer-credit a{color:var(--landing-accent);text-decoration:none}.landing-footer-credit a:hover{text-decoration:underline}.image-crop-container{display:flex;flex-direction:column;align-items:center;padding:.5rem 2%;gap:.5rem}.crop-display{position:relative;display:inline-block;cursor:crosshair;overflow:hidden}.crop-image{display:block;-webkit-user-select:none;user-select:none;pointer-events:none}.crop-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.crop-darken{position:absolute;background-color:#00000080;pointer-events:none}.crop-darken.top{top:0;left:0;width:100%}.crop-darken.bottom{left:0;width:100%}.crop-darken.left{left:0}.crop-darken.right{right:0}.crop-border{position:absolute;border:2px solid var(--color-info);pointer-events:none}.crop-handle{position:absolute;width:12px;height:12px;background-color:var(--color-info);border:2px solid var(--color-bg-surface);border-radius:50%;pointer-events:all;cursor:grab}.crop-handle:active{cursor:grabbing}.crop-handle.top-left{top:-6px;left:-6px;cursor:nwse-resize}.crop-handle.top-right{top:-6px;right:-6px;cursor:nesw-resize}.crop-handle.bottom-left{bottom:-6px;left:-6px;cursor:nesw-resize}.crop-handle.bottom-right{bottom:-6px;right:-6px;cursor:nwse-resize}.crop-page-loading{flex:1;width:100%;min-height:min(70vh,520px);display:flex;align-items:center;justify-content:center;padding:2rem 1.25rem;box-sizing:border-box}.crop-page-loading-inner{width:100%;max-width:22rem;margin:0 auto;padding:2.25rem 1.75rem;background:var(--color-bg-surface);border-radius:12px;box-shadow:0 4px 24px #0f172a0f;border:1px solid rgba(15,23,42,.06)}.crop-page-loading-inner--error{border-color:#dc354533;box-shadow:0 4px 24px #dc35450f}.crop-page-loading-spinner{width:2.5rem;height:2.5rem;margin:0 auto 1.25rem;border:3px solid var(--color-border);border-top-color:var(--color-info);border-radius:50%;animation:crop-loading-spin .75s linear infinite}@keyframes crop-loading-spin{to{transform:rotate(360deg)}}.crop-page-loading-title{margin:0 0 .625rem;font-size:1.125rem;font-weight:600;line-height:1.35;color:var(--color-text-primary);letter-spacing:-.02em;text-align:center}.crop-page-loading-sub{margin:0;font-size:.9375rem;font-weight:400;line-height:1.55;color:var(--color-text-muted);text-align:center}.clusters-container{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;width:100%;margin:0;flex:1;min-height:0;max-width:100%;box-sizing:border-box}.cluster-group{background-color:var(--color-bg-surface);border-radius:6px;box-shadow:var(--shadow-sm);border:2px solid var(--color-border);transition:all .2s ease;overflow:hidden;display:flex;flex-direction:column;height:100%;min-height:0}.cluster-group.drag-over{border-style:dashed;transform:scale(1.02);box-shadow:0 4px 12px #00000026}.cluster-meta{flex-shrink:0;display:flex;justify-content:flex-end;align-items:center;padding:.12rem .35rem;border-bottom:1px solid color-mix(in srgb,var(--color-border) 80%,transparent);background:color-mix(in srgb,var(--color-bg-surface-muted) 92%,transparent)}.cluster-count{font-size:.65rem;font-weight:500;color:var(--color-text-muted);letter-spacing:.02em;line-height:1.2}.cluster-triangles{padding:.35rem;display:grid;grid-template-columns:repeat(2,1fr);gap:.3rem;flex:1;overflow-y:auto;overflow-x:hidden;min-height:0;align-content:start}.triangle-item{display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:grab;transition:transform .2s ease,opacity .2s ease;padding:.15rem;border-radius:4px}.triangle-item:hover{transform:scale(1.05);background-color:var(--color-bg-surface-muted)}.triangle-item:active{cursor:grabbing}.triangle-item.dragging{opacity:.5}.triangle-image{width:100%;min-width:80px;height:auto;border:1px solid var(--color-border);border-radius:3px;background-color:var(--color-bg-surface-muted);padding:.15rem;object-fit:contain;pointer-events:none}.matching-mode{padding:.5rem clamp(.5rem,2vw,1.25rem);flex:1;min-height:0;align-self:stretch;width:100%;max-width:100%;display:flex;flex-direction:column;justify-content:flex-start;box-sizing:border-box}.matching-board{width:90%;max-width:100%;margin:0 auto .75rem;padding:.5rem clamp(.4rem,1.2vw,.75rem);flex:0 0 auto;align-self:center;box-sizing:border-box;background:var(--color-bg-surface);border:1px solid color-mix(in srgb,var(--color-border) 80%,transparent);border-radius:10px;box-shadow:0 4px 20px #0b122012}.matching-container{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto;gap:0;width:100%;position:relative;align-items:start;transition:opacity .25s ease}.matching-column{display:flex;flex-direction:column;gap:0;position:relative;align-items:stretch;width:100%;height:auto}.matching-column-panel{display:flex;flex-direction:column;gap:0;width:100%;height:fit-content;background:linear-gradient(180deg,color-mix(in srgb,var(--color-bg-surface-muted) 95%,transparent),color-mix(in srgb,var(--color-bg-surface-muted) 80%,var(--color-bg-surface)));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--color-border) 85%,transparent);border-radius:6px;overflow:hidden}.matching-column:not(:last-child):after{content:"";position:absolute;right:0;top:0;bottom:0;width:2px;background:repeating-linear-gradient(to bottom,var(--color-border-strong) 0px,var(--color-border-strong) 2px,transparent 2px,transparent 4px);pointer-events:none;z-index:1}.matching-cluster{background:transparent;border:none;border-radius:0;box-shadow:none;transition:box-shadow .2s ease,opacity .2s ease;overflow:hidden;display:flex;flex-direction:column;cursor:grab;flex:0 0 auto;width:100%;margin:0;padding:0}.matching-cluster.top-cluster,.matching-cluster.bottom-cluster{border-bottom:none}.matching-cluster.dragging{opacity:.5}.matching-cluster.drag-over{box-shadow:inset 0 0 0 2px #3b82f673;background:#3b82f60f}.matching-cluster:active{cursor:grabbing}.matching-triangle-image{width:100%;height:auto;margin:0;border:none;border-radius:0;padding:0 .15rem;object-fit:contain;pointer-events:none;display:block;box-sizing:border-box}.matching-cluster.top-cluster .matching-triangle-image{object-position:center bottom}.matching-cluster.bottom-cluster .matching-triangle-image{object-position:center top}.matching-empty{min-height:5rem;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--color-text-muted);padding:1rem .5rem;font-style:italic;font-size:.85rem}.error-message{background-color:var(--color-bg-surface);padding:2rem;border-radius:8px;box-shadow:var(--shadow-sm);text-align:center;max-width:600px;margin:2rem auto}.error-message h2{color:var(--color-danger);margin-bottom:1rem}.error-message p{color:var(--color-text-muted);margin-bottom:1.5rem}@media(max-width:1200px){.clusters-container{grid-template-columns:repeat(2,1fr)}}@media(max-width:768px){.clusters-container{grid-template-columns:1fr}.cluster-triangles{grid-template-columns:repeat(auto-fill,minmax(80px,1fr))}}.solve-page{min-height:0;flex:1;padding:1rem;box-sizing:border-box;align-self:stretch;width:100%;display:flex;flex-direction:column;align-items:center;gap:1rem}.solve-content{display:flex;flex-direction:row;gap:1rem;width:100%;max-width:none}@media(max-width:1024px){.solve-content{flex-direction:column}}@media(max-width:600px){.puzzle-info-grid{flex-wrap:wrap;gap:.75rem}.puzzle-info-item{flex:1 1 45%;min-width:120px}.solve-page-actions{flex-wrap:wrap;justify-content:center}}.original-pieces-section,.solution-section{background-color:var(--color-bg-surface);padding:1rem;border-radius:8px;box-shadow:var(--shadow-sm);flex:1;min-width:0;box-sizing:border-box}.original-pieces-section h2,.solution-section h2{margin:0 0 1rem;color:var(--color-text-primary);font-size:1.25rem}.original-image-container{width:100%}.original-image-container>div{width:100%;border:1px solid var(--color-border);border-radius:4px}.solution-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;width:100%}.solution-row{display:contents}.solution-cell{aspect-ratio:1;position:relative;background-color:var(--color-bg-surface-muted);display:flex;align-items:center;justify-content:center;overflow:hidden}.solution-cell.empty{background-color:color-mix(in srgb,var(--color-border) 38%,transparent);border:1px dashed var(--color-border)}.piece-container{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center}.solution-piece-image{width:100%;height:100%;object-fit:contain;pointer-events:none}.piece-label-container{position:absolute;top:50%;left:50%;display:flex;align-items:center;gap:.25rem;pointer-events:none;z-index:10}.piece-label{width:1.75rem;height:1.75rem;display:flex;align-items:center;justify-content:center;background-color:#0b1220e0;color:var(--color-on-primary);border-radius:50%;font-weight:700;font-size:.8rem;border:2px solid rgba(255,255,255,.6);box-shadow:0 2px 6px #0b122059}.rotation-indicator{width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;background-color:#0b1220b8;color:var(--color-on-primary);border-radius:50%;font-size:.75rem;font-weight:700;border:1.5px solid rgba(255,255,255,.5);box-shadow:0 2px 6px #0b12204d}.loading-message{text-align:center;color:var(--color-text-muted);padding:2rem;font-style:italic}.toggle-icon{font-size:1rem;line-height:1}.puzzle-info-section{display:flex;align-items:center;justify-content:center;background-color:var(--color-bg-surface);border-radius:8px;box-shadow:var(--shadow-sm);padding:.75rem 1.25rem;flex-shrink:0}.puzzle-info-grid{display:flex;gap:1.5rem;align-items:center;justify-content:center}.puzzle-info-item{display:flex;flex-direction:column;gap:.125rem;padding:.25rem 0}.puzzle-info-label{font-size:.65rem;color:var(--color-text-muted);font-weight:500;text-transform:uppercase;letter-spacing:.025em;white-space:nowrap}.puzzle-info-value{font-size:1rem;font-weight:600;color:var(--color-text-primary);white-space:nowrap}.play-page{display:flex;flex-direction:column;align-items:center;width:100%;height:100%;padding:1rem 2rem;gap:1rem}.play-page-content{text-align:center;padding:3rem;background-color:var(--color-bg-surface);border-radius:12px;box-shadow:var(--shadow-md)}.play-page-content h2{margin:0 0 1rem;color:var(--color-text-secondary)}.play-page-content p{margin:0 0 1rem;color:var(--color-text-muted)}.play-page-content p:last-of-type{margin-bottom:1.5rem}.play-page .action-button.back-button{font-family:DM Sans,system-ui,-apple-system,sans-serif;font-size:1rem;font-weight:500;padding:.6rem 1.25rem;border-radius:8px;color:var(--color-accent);background:var(--color-bg-surface);border:2px solid var(--color-accent);box-shadow:0 4px 14px #0b12201a;transition:transform .15s,box-shadow .2s,background .2s}.play-page .action-button.back-button:hover:not(:disabled){background:var(--color-accent-soft);box-shadow:0 6px 20px #3b82f633;transform:translateY(-1px)}.game-container{display:flex;flex-direction:column;align-items:center;flex:1;width:100%;background-color:var(--color-bg-surface);border-radius:12px;padding:1rem 1.5rem 1.5rem;box-shadow:var(--shadow-md);overflow:hidden}.board-title{margin:0;padding-bottom:.75rem;margin-bottom:1rem;font-size:1.25rem;color:var(--color-text-secondary);text-align:center;font-weight:600;flex-shrink:0;border-bottom:1px solid var(--color-border);width:100%}.game-area{position:relative;flex:1;width:100%;touch-action:none;min-height:400px}.board-grid{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:0;width:min(75vh,600px);height:min(75vh,600px);background-color:var(--color-bg-surface);border:2px solid var(--color-border);transition:border-color .3s ease,box-shadow .3s ease}.board-grid.solved{border-color:var(--color-primary);outline:4px solid var(--color-primary);outline-offset:-2px;box-shadow:0 0 24px #0b122059}.board-grid.solved .piece-image{box-shadow:none}.board-grid.solved .board-cell{border:none!important;background:transparent!important}.board-cell{position:relative;aspect-ratio:1;background-color:var(--color-bg-surface);transition:background-color .15s ease,box-shadow .15s ease;padding:0;margin:0;overflow:hidden}.board-cell.empty{background-color:var(--color-bg-surface-muted);border:1px solid var(--color-border)}.board-cell.has-piece{background-color:transparent;border:none}.board-cell.cell-hover{background-color:var(--color-accent-soft);box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--color-accent) 60%,transparent)}.puzzle-piece{width:100%;height:100%;position:relative;cursor:grab;transform:scale(1.01)}.puzzle-piece:active{cursor:grabbing}.piece-image{width:100%;height:100%;object-fit:cover;display:block;transition:transform .15s ease-out,box-shadow .15s ease-out;-webkit-user-select:none;user-select:none;box-shadow:0 4px 12px #0003}.free-piece{position:absolute;cursor:grab;z-index:10}.free-piece:hover{z-index:20}.free-piece:hover .piece-image{box-shadow:0 6px 16px #00000040}.free-piece:active{cursor:grabbing}.free-piece .piece-image{width:100%;height:100%}.dragging-piece{position:absolute;pointer-events:none;z-index:100;opacity:.9}.dragging-piece .piece-image{width:100%;height:100%;box-shadow:0 8px 24px #0000004d}.animating-piece{position:absolute;pointer-events:none;z-index:50;transition:left .5s ease-in-out,top .5s ease-in-out}.animating-piece .piece-image{width:100%;height:100%}.animating-piece .animating-image{transition:transform .5s ease-in-out,box-shadow .5s ease-in-out}.rotate-button{position:absolute;bottom:8px;right:8px;width:32px;height:32px;padding:6px;background-color:color-mix(in srgb,var(--color-bg-surface) 90%,transparent);border:none;border-radius:50%;cursor:pointer;opacity:0;transition:opacity .2s ease,background-color .2s ease,transform .2s ease;box-shadow:0 2px 6px #0000004d;z-index:5}.puzzle-piece:hover .rotate-button,.free-piece:hover .rotate-button{opacity:1}.rotate-button:hover{background-color:var(--color-bg-surface);transform:scale(1.1)}.rotate-button:active{transform:scale(.95)}.rotate-button svg{width:100%;height:100%;color:var(--color-text-secondary)}.play-controls{display:flex;gap:1rem;justify-content:center;align-items:center;flex-wrap:wrap;padding:1rem 1.5rem;background-color:var(--color-bg-surface);border-radius:8px;box-shadow:var(--shadow-sm);flex-shrink:0;min-height:56px}.play-controls .action-button{width:130px;min-width:130px;flex-shrink:0;font-family:DM Sans,system-ui,-apple-system,sans-serif;font-size:1rem;font-weight:500;padding:.6rem 1.25rem;border-radius:8px;box-sizing:border-box;border-width:2px;border-style:solid;transition:transform .15s,box-shadow .2s,background .2s,border-color .2s,color .2s,opacity .2s}.play-controls .action-button:hover:not(:disabled){transform:translateY(-1px)}.play-controls .action-button:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}.play-controls .button-icon{width:1.25rem;height:1.25rem;flex-shrink:0}.play-controls .shuffle-button{color:var(--color-text-secondary);background:var(--color-bg-surface);border-color:var(--color-border-strong);box-shadow:0 4px 14px #0b12201a}.play-controls .shuffle-button:hover:not(:disabled){background:color-mix(in srgb,var(--color-border-strong) 25%,transparent);box-shadow:0 6px 20px #0b12201f}.play-controls .hint-button{color:var(--color-accent);background:var(--color-bg-surface);border-color:var(--color-accent);box-shadow:0 4px 14px #0b12201a}.play-controls .hint-button:hover:not(:disabled){background:var(--color-accent-soft);box-shadow:0 6px 20px #3b82f633}.play-controls .solve-button{color:var(--color-on-primary);background:var(--color-primary);border-color:var(--color-primary);box-shadow:0 4px 14px #0b12204d}.play-controls .solve-button:hover:not(:disabled){background:var(--color-primary-hover);border-color:var(--color-primary-hover);box-shadow:0 6px 20px #0b12204d}.info-section{display:flex;align-items:center;justify-content:center;background-color:var(--color-bg-surface);border-radius:8px;box-shadow:var(--shadow-sm);padding:.75rem 1.25rem;flex-shrink:0}.info-loading,.info-error{color:var(--color-text-muted);font-style:italic}.info-error{color:var(--color-danger)}.info-grid{display:flex;gap:1.5rem;align-items:center}.info-item{display:flex;flex-direction:column;gap:.125rem;padding:.25rem 0}.info-label{font-size:.65rem;color:var(--color-text-muted);font-weight:500;text-transform:uppercase;letter-spacing:.025em;white-space:nowrap}.info-value{font-size:1rem;font-weight:600;color:var(--color-text-primary);white-space:nowrap}@media(max-width:600px){.play-page{padding:.5rem}.board-grid{width:min(90vw,400px);height:min(90vw,400px)}.game-area{min-height:400px}.rotate-button{width:28px;height:28px;bottom:4px;right:4px}.info-section{flex-direction:column;height:auto;width:100%}.info-toggle-button{padding:.75rem 1rem}.chevron-icon{transform:rotate(90deg)}.chevron-icon.open{transform:rotate(270deg)}.info-content{border-left:none;border-top:1px solid var(--color-border);max-width:100%;max-height:0;opacity:0;padding:0 1rem;flex-wrap:wrap;transition:max-height .3s ease,opacity .3s ease,padding .3s ease}.info-content.open{max-width:100%;max-height:200px;opacity:1;padding:.75rem 1rem}.info-grid{flex-wrap:wrap;gap:.75rem}.info-item{flex:1 1 45%;min-width:120px}.play-controls{flex-direction:column;gap:.5rem}.play-controls .action-button{width:100%;justify-content:center}}.toast{position:fixed;top:18px;right:18px;z-index:10000;min-width:320px;max-width:520px;border-radius:14px;border:1px solid rgba(148,163,184,.25);box-shadow:0 10px 30px #0f172a29,0 2px 10px #0f172a14;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:slideIn .24s ease-out}@keyframes slideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.toast-content{display:flex;align-items:flex-start;justify-content:space-between;padding:.9rem 1rem;gap:.8rem}.toast-icon{width:24px;height:24px;flex-shrink:0;margin-top:1px}.toast-icon svg{width:100%;height:100%}.toast-text{flex:1;display:flex;flex-direction:column;gap:.15rem}.toast-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;font-weight:700;opacity:.82}.toast-message{font-size:.92rem;line-height:1.45;color:var(--color-text-primary)}.toast-close{background:#0f172a0a;border:1px solid rgba(148,163,184,.28);cursor:pointer;padding:0;width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--color-text-secondary);opacity:.9;transition:background .2s,color .2s,border-color .2s}.toast-close svg{width:14px;height:14px}.toast-close:hover{background:#0f172a14;color:var(--color-text-primary);border-color:#64748b66}.toast-error{background:color-mix(in srgb,var(--color-bg-surface) 92%,transparent);border-left:4px solid #ef4444}.toast-error .toast-icon,.toast-error .toast-label{color:#b91c1c}.toast-success{background:color-mix(in srgb,var(--color-bg-surface) 92%,transparent);border-left:4px solid #10b981}.toast-success .toast-icon,.toast-success .toast-label{color:#047857}.toast-info{background:color-mix(in srgb,var(--color-bg-surface) 92%,transparent);border-left:4px solid #3b82f6}.toast-info .toast-icon,.toast-info .toast-label{color:#1d4ed8}.toast-error .toast-close{color:#b91c1c}.toast-success .toast-close{color:#047857}.toast-info .toast-close{color:#1d4ed8}@media(max-width:640px){.toast{left:12px;right:12px;top:12px;min-width:0;max-width:none}}.app{height:100%;display:flex;flex-direction:column;background:var(--color-bg-app);overflow:hidden;position:relative}.app:before{content:"";position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(var(--color-grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--color-grid-line) 1px,transparent 1px);background-size:24px 24px;z-index:0}.app-header{position:relative;z-index:1;background-color:var(--color-bg-surface);padding:1rem 2rem;box-shadow:var(--shadow-sm);display:flex;align-items:center;justify-content:space-between;gap:1rem}.app-header-left{display:flex;align-items:center;gap:1.5rem;flex:1}.app-header-right{display:flex;align-items:center;gap:1rem}.theme-toggle-button{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;min-width:36px;min-height:36px;aspect-ratio:1 / 1;padding:0;border-radius:9999px;border:1px solid var(--color-border);background:var(--color-bg-surface-muted);color:var(--color-text-secondary);cursor:pointer;transition:background .2s ease,border-color .2s ease,color .2s ease}.theme-toggle-button svg{width:1.2rem;height:1.2rem}.theme-toggle-button:hover{background:var(--color-accent-soft);border-color:var(--color-accent);color:var(--color-text-primary)}.theme-toggle-button:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.app-header h1{margin:0;color:var(--color-text-primary);font-size:1.5rem}.app-title-clickable,.app-title-static{background:none;border:0;padding:0;color:inherit;font:inherit;display:flex;align-items:center;gap:.5rem}.app-title-clickable{cursor:pointer;transition:opacity .2s}.app-title-static{cursor:default}.app-title-static:disabled{color:inherit}.app-title-clickable:hover{opacity:.7}.app-logo{width:28px;height:28px;border-radius:4px}.help-button{display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;background-color:var(--color-bg-surface-muted);border:1px solid var(--color-border);border-radius:50%;cursor:pointer;transition:all .2s ease}.help-button svg{width:20px;height:20px;color:var(--color-text-secondary)}.help-button:hover{background-color:var(--color-bg-surface-muted);border-color:var(--color-border-strong)}.help-button:hover svg{color:var(--color-text-primary)}.app-header-link{font-size:.9rem;font-weight:500;color:var(--color-text-muted);background:none;border:none;cursor:pointer;padding:.25rem 0}.app-header-link:hover{color:var(--color-accent)}.app-header-cta{font-size:.9rem;font-weight:500;padding:.5rem 1rem;background:var(--color-primary);color:var(--color-on-primary);border:none;border-radius:8px;cursor:pointer;transition:transform .15s,box-shadow .2s;text-decoration:none;display:inline-block}.app-header-cta:hover{background:var(--color-primary-hover);transform:translateY(-1px);box-shadow:0 4px 12px #0b122033}@keyframes flow-help-overlay-in{0%{opacity:0}to{opacity:1}}@keyframes flow-help-overlay-out{0%{opacity:1}to{opacity:0}}@keyframes flow-help-panel-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes flow-help-panel-out{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(4px)}}.flow-help-overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:1.5rem;background:var(--color-bg-overlay);animation:flow-help-overlay-in .2s ease-out forwards}.flow-help-overlay--closing{animation:flow-help-overlay-out .18s ease-in forwards}.flow-help-panel{width:100%;max-width:40rem;max-height:min(85vh,44rem);overflow:hidden;display:flex;flex-direction:column;font-family:DM Sans,system-ui,-apple-system,sans-serif;background:var(--color-bg-surface);border-radius:12px;border:1px solid rgba(148,163,184,.22);box-shadow:0 20px 50px #0b12201f;animation:flow-help-panel-in .2s ease-out forwards}.flow-help-panel--closing{animation:flow-help-panel-out .18s ease-in forwards}.flow-help-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.25rem 1.25rem .75rem;flex-shrink:0}.flow-help-title{margin:0;flex:1;min-width:0;font-size:1.125rem;font-weight:600;letter-spacing:-.02em;line-height:1.3;color:var(--color-text-primary)}.flow-help-close{flex-shrink:0;width:2rem;height:2rem;margin:-.25rem -.25rem -.25rem 0;padding:0;display:flex;align-items:center;justify-content:center;border:none;border-radius:6px;background:transparent;color:var(--color-text-muted);cursor:pointer;transition:background .15s ease,color .15s ease}.flow-help-close:hover{background:var(--color-accent-soft);color:var(--color-text-secondary)}.flow-help-close:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.flow-help-close svg{width:1.125rem;height:1.125rem}.flow-help-body{padding:0 1.25rem 1.25rem;overflow-y:auto;flex:1;min-height:0}.flow-help-block{margin:0 0 .75rem;font-size:.9375rem;line-height:1.6;color:var(--color-text-secondary)}.flow-help-block:last-child{margin-bottom:0}@media(prefers-reduced-motion:reduce){.flow-help-overlay,.flow-help-overlay--closing,.flow-help-panel,.flow-help-panel--closing{animation:none!important}.flow-help-overlay:not(.flow-help-overlay--closing){opacity:1}.flow-help-overlay--closing{opacity:0}.flow-help-panel:not(.flow-help-panel--closing){opacity:1;transform:none}.flow-help-panel--closing{opacity:0}}.app-header-actions{display:flex;align-items:center;gap:.75rem}.test-mode-badge{background-color:#ffd43b;color:#2b2b2b;padding:.25rem .75rem;border-radius:4px;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.app-main{position:relative;z-index:1;flex:1;padding:2rem;display:flex;flex-direction:column;align-items:center;gap:2rem;overflow-y:auto;min-height:0}.app-main--landing{padding:0;align-items:stretch}.upload-section{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:3rem;background-color:var(--color-bg-surface);border-radius:8px;box-shadow:var(--shadow-sm)}.editor-section{width:100%;display:flex;justify-content:center;background-color:var(--color-bg-surface);padding:1rem;border-radius:8px;box-shadow:var(--shadow-sm);overflow-x:auto;overflow-y:auto;flex-shrink:0}.bounding-box-editor{width:100%;display:flex;justify-content:center;align-items:flex-start;overflow:visible;min-height:400px}.bounding-box-editor canvas{display:block;object-fit:contain}.controls-section{display:flex;flex-direction:column;align-items:center;gap:1rem}.button-apply{background-color:var(--color-success);color:#fff;padding:.5rem 1rem;border:none;border-radius:4px;font-size:.85rem;cursor:pointer;transition:background-color .2s ease}.button-apply:hover:not(:disabled){background-color:#40c057}.button-cancel{background-color:var(--color-text-muted);color:#fff;padding:.5rem 1rem;border:none;border-radius:4px;font-size:.85rem;cursor:pointer;transition:background-color .2s ease}.button-cancel:hover:not(:disabled){background-color:#6c757d}.control-buttons{display:flex;gap:1rem}.action-button{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1.5rem;font-size:.95rem;color:#fff;border:none;border-radius:8px;cursor:pointer;transition:all .2s ease;font-weight:500;min-width:120px}.action-button:hover:not(:disabled){transform:translateY(-2px)}.action-button:disabled{opacity:.6;cursor:not-allowed;transform:none}.button{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1.5rem;font-size:.95rem;color:#fff;border:none;border-radius:8px;cursor:pointer;transition:all .2s ease;font-weight:500;min-width:120px}.button:hover:not(:disabled){transform:translateY(-2px)}.button:disabled{opacity:.5;cursor:not-allowed;transform:none}.button-reset{background:linear-gradient(135deg,#ffa94d,#fd7e14);box-shadow:0 2px 8px #fd7e144d}.button-reset:hover:not(:disabled){box-shadow:0 4px 12px #fd7e1466}.button-undo{background:linear-gradient(135deg,#74c0fc,#339af0);box-shadow:0 2px 8px #339af04d}.button-undo:hover:not(:disabled){box-shadow:0 4px 12px #339af066}.button-submit{background:linear-gradient(135deg,#69db7c,#40c057);box-shadow:0 2px 8px #40c0574d}.button-submit:hover:not(:disabled){box-shadow:0 4px 12px #40c05766}.button-submit.button-submit-disabled,.button-disabled-visual{opacity:.6;cursor:not-allowed}.button-back{background:linear-gradient(135deg,#adb5bd,#868e96);box-shadow:0 2px 8px #868e964d}.button-back:hover:not(:disabled){box-shadow:0 4px 12px #868e9666}.upload-button{padding:.75rem 2rem;font-size:1rem;background-color:var(--color-info);color:#fff;border:none;border-radius:4px;cursor:pointer;transition:background-color .2s;font-weight:500}.upload-button:hover:not(:disabled){background-color:var(--color-accent)}.upload-button:disabled{opacity:.5;cursor:not-allowed}.error-message{color:var(--color-danger);padding:.75rem 1rem;background-color:var(--color-danger-soft);border-radius:4px;border:1px solid var(--color-danger);margin-top:.5rem}.loading-message{color:var(--color-info);padding:.75rem 1rem;background-color:var(--color-accent-soft);border-radius:4px;border:1px solid var(--color-info);margin-top:.5rem}.flow-step-instruction{align-self:stretch;flex-shrink:0;margin:0 auto;padding:0 1rem;max-width:42rem;width:100%;box-sizing:border-box;font-family:DM Sans,system-ui,-apple-system,sans-serif;font-size:.9375rem;font-weight:500;line-height:1.45;color:var(--color-text-muted);text-align:center}.home-page{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;width:100%}.crop-page{display:flex;flex-direction:column;align-items:center;width:100%;gap:1.5rem}.crop-page-content{width:100%;display:flex;justify-content:center}.crop-page-actions{display:inline-flex;gap:1rem;justify-content:center;align-items:center;padding:1rem 1.5rem;background-color:var(--color-bg-surface);border-radius:8px;box-shadow:var(--shadow-sm)}.crop-page-actions .button-icon{width:1.25rem;height:1.25rem;flex-shrink:0}.bounding-box-page{display:flex;flex-direction:column;align-items:center;width:100%;gap:1.5rem}.bounding-box-page-actions,.cluster-matching-page-actions,.solve-page-actions{display:inline-flex;gap:1rem;justify-content:center;align-items:center;padding:1rem 1.5rem;background-color:var(--color-bg-surface);border-radius:8px;box-shadow:var(--shadow-sm);flex-shrink:0}.bounding-box-page-actions .button-icon,.cluster-matching-page-actions .button-icon,.solve-page-actions .button-icon{width:1.25rem;height:1.25rem;flex-shrink:0}.crop-page-actions .button,.bounding-box-page-actions .button,.cluster-matching-page-actions .button,.solve-page-actions .button{font-family:DM Sans,system-ui,-apple-system,sans-serif;font-size:1rem;font-weight:500;padding:.6rem 1.25rem;border-radius:8px;min-width:unset;box-sizing:border-box;transition:transform .15s,box-shadow .2s,background .2s,border-color .2s,color .2s}.crop-page-actions .button:hover:not(:disabled),.bounding-box-page-actions .button:hover:not(:disabled),.cluster-matching-page-actions .button:hover:not(:disabled),.solve-page-actions .button:hover:not(:disabled){transform:translateY(-1px)}.crop-page-actions .button-submit,.bounding-box-page-actions .button-submit,.cluster-matching-page-actions .button-submit,.cluster-matching-page-actions .button-solve,.solve-page-actions .button-home{color:var(--color-on-primary);background:var(--color-primary);border:none;box-shadow:0 4px 14px #0b12204d}.crop-page-actions .button-submit:hover:not(:disabled),.bounding-box-page-actions .button-submit:hover:not(:disabled),.cluster-matching-page-actions .button-submit:hover:not(:disabled),.cluster-matching-page-actions .button-solve:hover:not(:disabled),.solve-page-actions .button-home:hover:not(:disabled){background:var(--color-primary-hover);box-shadow:0 6px 20px #0b12204d}.crop-page-actions .button-submit:disabled,.bounding-box-page-actions .button-submit:disabled,.cluster-matching-page-actions .button-submit:disabled,.cluster-matching-page-actions .button-solve:disabled,.solve-page-actions .button-home:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}.crop-page-actions .button-back,.bounding-box-page-actions .button-back,.bounding-box-page-actions .button-undo,.cluster-matching-page-actions .button-edit,.solve-page-actions .button-back,.solve-page-actions .button-toggle{color:var(--color-accent);background:var(--color-bg-surface);border:2px solid var(--color-accent);box-shadow:0 4px 14px #0b12201a}.crop-page-actions .button-back:hover:not(:disabled),.bounding-box-page-actions .button-back:hover:not(:disabled),.bounding-box-page-actions .button-undo:hover:not(:disabled),.cluster-matching-page-actions .button-edit:hover:not(:disabled),.solve-page-actions .button-back:hover:not(:disabled),.solve-page-actions .button-toggle:hover:not(:disabled){background:var(--color-accent-soft);box-shadow:0 6px 20px #3b82f633}.bounding-box-page-actions .button-reset{color:#c2410c;background:var(--color-bg-surface);border:2px solid #f97316;box-shadow:0 4px 14px #0b12201a}.bounding-box-page-actions .button-reset:hover:not(:disabled){background:color-mix(in srgb,#f97316 18%,transparent);box-shadow:0 6px 20px #f9731633}.solve-page-actions .button-logo{width:1.25rem;height:1.25rem;border-radius:4px}.cluster-matching-page{display:flex;flex-direction:column;align-items:center;width:100%;min-height:0;flex:1;gap:1rem}.toggle-label{display:flex;align-items:center;gap:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none}.toggle-label input[type=checkbox]{width:1rem;height:1rem;cursor:pointer}.button-start-over{background-color:var(--color-danger);color:#fff}.button-start-over:hover:not(:disabled){background-color:#ff5252}.error-boundary{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:3rem;text-align:center;color:var(--color-text-secondary)}.error-boundary h2{margin:0;color:var(--color-danger)}.error-boundary p{margin:0;color:var(--color-text-muted);font-family:monospace;font-size:.875rem;max-width:40rem;word-break:break-word}