.viz-login{display:flex;align-items:center;justify-content:center;background:var(--black);padding:5rem 2rem}.viz-login-page{min-height:100vh}.viz-login[hidden]{display:none}.viz-login-card{background:var(--dark);border:1px solid var(--faint);padding:2.5rem 2rem;max-width:380px;width:100%;text-align:center}.viz-login-card .logo-wrap{justify-content:center;margin-bottom:1.5rem}.viz-login-card h2{font-family:Oswald,sans-serif;font-size:1.2rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--warm);margin-bottom:.4rem}.viz-login-sub{font-size:.8rem;color:var(--ash);font-weight:300;margin-bottom:1.5rem}.viz-login-card form{text-align:left}.viz-login-card label{display:block;font-family:Oswald,sans-serif;font-size:.72rem;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--ash);margin-bottom:.3rem;margin-top:1rem}.viz-login-card label:first-of-type{margin-top:0}.viz-login-card input{width:100%;padding:.65rem .8rem;background:var(--black);border:1px solid var(--faint);color:var(--warm);font-family:Inter,sans-serif;font-size:.85rem;outline:none;transition:border-color .2s;box-sizing:border-box}.viz-login-card input:focus{border-color:var(--orange)}.viz-login-card button[type=submit]{margin-top:1.2rem}.viz-login-error{display:none;background:#dc3c3c1f;border:1px solid rgba(220,60,60,.3);color:#e55;font-size:.8rem;padding:.5rem .8rem;margin-bottom:.8rem;text-align:center}.viz-login-success{background:#2ecc711f;border:1px solid rgba(46,204,113,.3);color:#2ecc71;font-size:.8rem;padding:.7rem .8rem;margin-bottom:.8rem;text-align:center;line-height:1.5}.nav-avatar{background:none;border:1px solid var(--faint);color:var(--ash);cursor:pointer;width:2rem;height:2rem;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:border-color .2s,color .2s;padding:0}.nav-avatar:hover{border-color:var(--orange);color:var(--orange)}#nav-avatar-li{position:relative}.nav-avatar-menu{display:none;position:absolute;right:0;top:calc(100% + .6rem);background:var(--dark);border:1px solid var(--faint);padding:.8rem 1rem;min-width:180px;box-shadow:var(--shadow-md);z-index:400}.nav-avatar-menu.open{display:block}.nav-avatar-email{display:block;font-family:Inter,sans-serif;font-size:.72rem;color:var(--ash);font-weight:300;margin-bottom:.6rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nav-avatar-menu button{background:none;border:1px solid var(--faint);color:var(--ash);font-family:Oswald,sans-serif;font-size:.7rem;font-weight:400;letter-spacing:.1em;text-transform:uppercase;padding:.35rem .8rem;cursor:pointer;width:100%;transition:border-color .2s,color .2s}.nav-avatar-menu button:hover{border-color:var(--orange);color:var(--orange)}.viz-admin-toggle{text-align:center;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--faint)}.viz-admin-toggle a{font-family:Oswald,sans-serif;font-size:.68rem;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--ash);text-decoration:none;transition:color .2s}.viz-admin-toggle a:hover{color:var(--orange)}.viz-hero{background:var(--dark);padding:8rem 3.5rem 4rem;text-align:center;position:relative;overflow:hidden}.viz-hero:before{content:"VISUALIZER";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:Oswald,sans-serif;font-size:clamp(4rem,12vw,12rem);font-weight:700;color:#f2ede605;white-space:nowrap;pointer-events:none;-webkit-user-select:none;user-select:none}.viz-hero h1{font-size:clamp(2.2rem,5vw,4rem);margin-bottom:.8rem;animation:none}.viz-hero .hero-sub{max-width:50ch;margin:0 auto;font-size:.92rem;color:var(--ash);font-weight:300;line-height:1.65;animation:none}body:has(.viz-hero) nav{background:#111010eb;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-bottom:1px solid var(--faint)}body:has(.viz-hero) nav a{color:var(--ash);text-shadow:none}body:has(.viz-hero) nav a:hover{color:var(--warm)}.viz-section{background:var(--black);max-width:900px;margin:0 auto;padding:3.5rem 2rem 5rem}.viz-step{margin-bottom:2.5rem}.viz-step-header{display:flex;align-items:center;gap:1rem;margin-bottom:1.2rem;padding-bottom:.8rem;border-bottom:1px solid var(--faint)}.viz-step-num{width:2.4rem;height:2.4rem;flex-shrink:0;background:var(--dark);border:2px solid var(--orange);display:flex;align-items:center;justify-content:center;font-family:Oswald,sans-serif;font-size:.9rem;font-weight:700;color:var(--orange)}.viz-step-header h2{font-family:Oswald,sans-serif;font-size:1.1rem;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--warm);margin:0}.viz-step-header p{font-size:.82rem;color:var(--ash);font-weight:300;margin:0}.viz-upload{border:2px dashed rgba(242,237,230,.15);min-height:200px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem;padding:2rem;cursor:pointer;transition:border-color .2s,background .2s}.viz-upload:hover,.viz-upload.drag-over{border-color:var(--orange);background:#e8741a0d}.viz-upload svg{color:var(--ash)}.viz-upload-text{font-size:.85rem;color:var(--ash);font-weight:300}.viz-preview{background:var(--dark);padding:1rem;display:flex;align-items:center;gap:1rem}.viz-preview[hidden]{display:none}.viz-preview img{width:100px;height:75px;object-fit:cover}.viz-preview-info{flex:1;display:flex;align-items:center;justify-content:space-between;gap:1rem}.viz-preview-info span{font-size:.82rem;color:var(--ash);font-weight:300;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.viz-remove-btn{background:none;border:1px solid var(--faint);color:var(--ash);font-family:Oswald,sans-serif;font-size:.72rem;font-weight:400;letter-spacing:.1em;text-transform:uppercase;padding:.35rem .8rem;cursor:pointer;transition:border-color .2s,color .2s;flex-shrink:0}.viz-remove-btn:hover{border-color:var(--orange);color:var(--orange)}.viz-pattern-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}.viz-pattern-card{background:var(--panel);border:2px solid transparent;padding:1.2rem .8rem;display:flex;flex-direction:column;align-items:center;gap:.6rem;cursor:pointer;transition:border-color .2s,background .2s}.viz-pattern-card:hover{background:var(--mid)}.viz-pattern-card.active{border-color:var(--orange)}.viz-pattern-card span{font-family:Oswald,sans-serif;font-size:.78rem;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--warm)}.viz-pattern-swatch{--pline: var(--faint);width:100%;height:60px;background:var(--dark);position:relative;overflow:hidden}.viz-pattern-swatch[data-pattern=ashlar-slate]{background-image:linear-gradient(var(--pline) 1px,transparent 1px),linear-gradient(90deg,var(--pline) 1px,transparent 1px);background-size:32px 16px;background-position:0 0,16px 0}.viz-pattern-swatch[data-pattern=herringbone-brick]{background-image:repeating-linear-gradient(-45deg,transparent,transparent 6px,var(--pline) 6px,var(--pline) 7px),repeating-linear-gradient(45deg,transparent,transparent 6px,var(--pline) 6px,var(--pline) 7px)}.viz-pattern-swatch[data-pattern=european-cobblestone]{background-image:linear-gradient(var(--pline) 1px,transparent 1px),linear-gradient(90deg,var(--pline) 1px,transparent 1px);background-size:10px 10px}.viz-pattern-swatch[data-pattern=random-flagstone]{background-image:linear-gradient(135deg,var(--pline) 1px,transparent 1px),linear-gradient(225deg,var(--pline) 1px,transparent 1px),linear-gradient(var(--pline) 1px,transparent 1px);background-size:24px 20px,30px 18px,18px 26px}.viz-pattern-swatch[data-pattern=wood-plank]{background-image:repeating-linear-gradient(0deg,transparent,transparent 11px,var(--pline) 11px,var(--pline) 12px)}.viz-pattern-swatch[data-pattern=fan-scallop]{background-image:radial-gradient(circle at 0% 100%,transparent 18px,var(--pline) 18px,var(--pline) 19px,transparent 19px),radial-gradient(circle at 100% 100%,transparent 18px,var(--pline) 18px,var(--pline) 19px,transparent 19px);background-size:24px 24px}.viz-color-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:.8rem}.viz-color-swatch{aspect-ratio:1;border:3px solid transparent;cursor:pointer;position:relative;transition:border-color .2s,transform .2s;display:flex;align-items:flex-end;justify-content:center;padding-bottom:.3rem}.viz-color-swatch:hover{transform:scale(1.06)}.viz-color-swatch.active{border-color:var(--orange);transform:scale(1.06)}.viz-color-name{font-family:Oswald,sans-serif;font-size:.6rem;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.7);text-align:center}.viz-generate-btn{display:flex;margin:2rem auto 0;font-size:.88rem;padding:1rem 2.5rem}.viz-generate-btn:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.viz-loading{text-align:center;padding:3rem 1rem}.viz-spinner{width:40px;height:40px;border:3px solid var(--faint);border-top-color:var(--orange);border-radius:50%;margin:0 auto 1.2rem;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.viz-progress-wrap{width:80%;max-width:320px;height:8px;background:var(--faint);border-radius:4px;margin:0 auto .5rem;overflow:hidden}.viz-progress-bar{height:100%;width:0%;background:var(--orange);border-radius:4px;transition:width .4s ease}.viz-progress-pct{font-size:.82rem;color:var(--orange);font-weight:600;margin:0 0 .4rem}.viz-loading-text{font-size:.88rem;color:var(--ash);font-weight:300}.viz-result{text-align:center;margin-top:2.5rem}.viz-result h2{font-family:Oswald,sans-serif;font-size:1.3rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--warm);margin-bottom:1.5rem}.viz-compare{position:relative;width:100%;aspect-ratio:1/1;overflow:hidden;background:var(--dark);--split:50%}.viz-compare-before,.viz-compare-after{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.viz-compare-after{clip-path:inset(0 0 0 var(--split))}.viz-compare-handle{position:absolute;top:0;bottom:0;left:var(--split);transform:translate(-50%);width:36px;cursor:ew-resize;display:flex;align-items:center;justify-content:center;z-index:10;touch-action:none}.viz-compare-handle-line{width:3px;height:100%;background:#fffc;box-shadow:0 0 6px #00000080;position:relative}.viz-compare-handle-line:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:32px;height:32px;background:#ffffffe6;border-radius:50%;box-shadow:0 2px 8px #0006}.viz-compare-handle-line:after{content:"↔";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:14px;color:var(--dark);z-index:1}.viz-compare-label{position:absolute;top:.8rem;font-family:Oswald,sans-serif;font-size:.7rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:#ffffffd9;background:#00000080;padding:.25rem .6rem;pointer-events:none;z-index:5}.viz-label-before{left:.8rem}.viz-label-after{right:.8rem}.viz-result-actions{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:1.5rem}.viz-error{text-align:center;padding:2rem 1rem}.viz-error svg{color:var(--orange);margin-bottom:.8rem}.viz-error p{font-size:.88rem;color:var(--ash);font-weight:300;margin-bottom:1.2rem;max-width:40ch;margin-left:auto;margin-right:auto}.viz-disclaimer{font-size:.75rem;color:var(--ash);font-weight:300;line-height:1.6;max-width:500px;margin:1rem auto 0;text-align:center}.viz-disclaimer a{color:var(--orange);text-decoration:underline}body.light .viz-login{background:var(--black)}body.light .viz-login-card{background:var(--dark);border-color:#1a18161a}body.light .viz-login-card input{background:var(--black);border-color:#1a18161f;color:var(--warm)}body.light .viz-hero:before{color:#1a181608}body.light:has(.viz-hero) nav{background:#ffffffeb;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-bottom:1px solid rgba(26,24,22,.1)}body.light:has(.viz-hero) nav a{color:var(--ash);text-shadow:none}body.light:has(.viz-hero) nav a:hover{color:var(--warm)}body.light .viz-upload{border-color:#1a181633}body.light .viz-upload:hover,body.light .viz-upload.drag-over{border-color:var(--orange)}body.light .viz-pattern-swatch{background-color:#fff}body.light .viz-pattern-swatch,body.light .viz-pattern-swatch[data-pattern]{--pline:rgba(26,24,22,.45)}body.light .viz-step-num{background:var(--dark)}body.light .nav-avatar-menu{background:var(--dark);border-color:#1a18161a}body.light .nav-avatar{border-color:#1a181626}.theme-toggle{background:none;border:1px solid var(--faint);color:var(--ash);cursor:pointer;width:2rem;height:2rem;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:border-color .2s,color .2s;padding:0}.theme-toggle:hover{border-color:var(--orange);color:var(--orange)}.viz-seo-hero{background:var(--dark);padding:9rem 3.5rem 4rem;text-align:center;position:relative;overflow:hidden}.viz-seo-hero:before{content:"VISUALIZER";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:Oswald,sans-serif;font-size:clamp(4rem,12vw,12rem);font-weight:700;color:#f2ede605;white-space:nowrap;pointer-events:none;-webkit-user-select:none;user-select:none}.viz-seo-hero h1{font-size:clamp(2.2rem,5vw,4rem);margin-bottom:.8rem}.viz-seo-sub{max-width:55ch;margin:0 auto;font-size:.92rem;color:var(--ash);font-weight:300;line-height:1.65}.viz-seo-patterns{background:var(--black);padding:4.5rem 3.5rem;text-align:center}.viz-seo-intro{font-size:.88rem;color:var(--ash);font-weight:300;line-height:1.65;max-width:55ch;margin:.8rem auto 2.5rem}.viz-seo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;max-width:900px;margin:0 auto}.viz-seo-card{background:var(--dark);border:1px solid var(--faint);padding:1.5rem 1.2rem;text-align:left}.viz-seo-card .viz-pattern-swatch{margin-bottom:1rem}.viz-seo-card h3{font-family:Oswald,sans-serif;font-size:.88rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--warm);margin-bottom:.5rem}.viz-seo-card p{font-size:.82rem;color:var(--ash);font-weight:300;line-height:1.6}.viz-seo-colors{background:var(--mid);padding:3.5rem;text-align:center}.viz-seo-color-row{display:flex;justify-content:center;gap:1.5rem;flex-wrap:wrap;margin-top:1.8rem}.viz-seo-color{display:flex;flex-direction:column;align-items:center;gap:.5rem;font-family:Oswald,sans-serif;font-size:.72rem;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--ash)}.viz-seo-color span{display:block;width:48px;height:48px;border-radius:50%;border:2px solid var(--faint)}.viz-seo-steps{background:var(--black);padding:4.5rem 3.5rem;text-align:center}.viz-seo-step-row{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;max-width:800px;margin:2rem auto 0}.viz-seo-step{text-align:center}.viz-seo-step-num{width:2.8rem;height:2.8rem;background:var(--dark);border:2px solid var(--orange);display:inline-flex;align-items:center;justify-content:center;font-family:Oswald,sans-serif;font-size:1rem;font-weight:700;color:var(--orange);margin-bottom:1rem}.viz-seo-step h3{font-family:Oswald,sans-serif;font-size:.88rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--warm);margin-bottom:.5rem}.viz-seo-step p{font-size:.82rem;color:var(--ash);font-weight:300;line-height:1.6}.viz-seo-faq{background:var(--mid);padding:4.5rem 3.5rem;max-width:700px;margin:0 auto}.viz-seo-faq h2{text-align:center;margin-bottom:2rem}.viz-seo-faq details{border-bottom:1px solid var(--faint);padding:1.2rem 0}.viz-seo-faq details:first-of-type{border-top:1px solid var(--faint)}.viz-seo-faq summary{font-family:Oswald,sans-serif;font-size:.88rem;font-weight:500;text-transform:uppercase;letter-spacing:.05em;color:var(--warm);cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between}.viz-seo-faq summary:after{content:"+";font-size:1.1rem;color:var(--orange)}.viz-seo-faq details[open] summary:after{content:"−"}.viz-seo-faq details p{font-size:.85rem;color:var(--ash);font-weight:300;line-height:1.7;margin-top:.8rem}.viz-seo-faq details a{color:var(--orange)}body:has(.viz-seo-hero) nav{background:#111010eb;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-bottom:1px solid var(--faint)}body:has(.viz-seo-hero) nav a{color:var(--ash);text-shadow:none}body:has(.viz-seo-hero) nav a:hover{color:var(--warm)}body.light .viz-seo-hero:before{color:#1a181608}body.light:has(.viz-seo-hero) nav{background:#ffffffeb;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-bottom:1px solid rgba(26,24,22,.1)}body.light:has(.viz-seo-hero) nav a{color:var(--ash);text-shadow:none}body.light:has(.viz-seo-hero) nav a:hover{color:var(--warm)}body.light .viz-seo-card .viz-pattern-swatch{background-color:#fff;--pline:rgba(26,24,22,.45)}@media(max-width:900px){.viz-seo-hero{padding:7rem 1.5rem 3rem}.viz-seo-patterns{padding:3rem 1.5rem}.viz-seo-grid{grid-template-columns:1fr 1fr}.viz-seo-colors{padding:2.5rem 1.5rem}.viz-seo-steps{padding:3rem 1.5rem}.viz-seo-step-row{grid-template-columns:1fr;gap:1.5rem}.viz-seo-faq{padding:3rem 1.5rem}.viz-hero{padding:7rem 1.5rem 3rem}.viz-section{padding:2.5rem 1.2rem 4rem}.viz-pattern-grid{grid-template-columns:repeat(2,1fr)}.viz-color-grid{grid-template-columns:repeat(3,1fr)}.viz-step-header{flex-wrap:wrap}.viz-preview{flex-direction:column;align-items:flex-start}.viz-preview-info{width:100%}.viz-result-actions{flex-direction:column}}