html{scroll-behavior:smooth}body.legacy-site{background:radial-gradient(circle at 100% 0, color-mix(in srgb, var(--accent) 10%, transparent), transparent 34rem), var(--bg);color:var(--text);margin:0}.legacy-skip{inset-inline-start:1rem;z-index:100;background:var(--text);color:var(--surface);border-radius:.7rem;padding:.7rem 1rem;position:fixed;top:-5rem}.legacy-skip:focus{top:1rem}.legacy-header{z-index:5;justify-content:space-between;align-items:center;gap:1rem;max-width:1180px;margin:0 auto;padding:1.1rem 1.25rem;display:flex;position:relative}.legacy-brand{color:var(--text);letter-spacing:-.02em;align-items:center;gap:.65rem;font-weight:800;text-decoration:none;display:inline-flex}.legacy-brand svg{width:2rem;color:var(--accent)}.legacy-header details{position:relative}.legacy-header summary{cursor:pointer;border:1px solid var(--border);background:var(--surface);border-radius:999px;place-items:center;min-height:44px;padding:.5rem .8rem;display:grid}.legacy-header nav{inset-inline-end:0;border:1px solid var(--border);background:var(--surface);width:min(18rem,100vw - 2rem);box-shadow:var(--shadow-2);border-radius:1rem;grid-template-columns:1fr 1fr;gap:.25rem;padding:.5rem;display:grid;position:absolute;top:calc(100% + .5rem)}.legacy-header nav a{color:var(--text);border-radius:.6rem;padding:.6rem;text-decoration:none}.legacy-header nav a[aria-current=page]{background:var(--accent-soft);color:var(--accent);font-weight:700}.legacy-container.container{max-width:1180px;margin:0 auto;padding:1rem 1.25rem 4rem}.legacy-hero{grid-template-columns:minmax(15rem,.72fr) minmax(0,1.28fr);align-items:start;gap:clamp(1.5rem,4vw,4.5rem);padding:clamp(1rem,4vw,4rem) 0 4rem;display:grid}.legacy-intro{position:sticky;top:1rem}.legacy-eyebrow,.legacy-section-label{color:var(--accent);letter-spacing:.13em;text-transform:uppercase;margin:0 0 .85rem;font-size:.75rem;font-weight:800}.legacy-intro h1{letter-spacing:-.065em;max-width:12ch;margin:0;font-size:clamp(2.9rem,6vw,6rem);line-height:.94}.legacy-intro>p:not(.legacy-eyebrow){color:var(--text-muted);font-size:clamp(1rem,1.7vw,1.22rem);line-height:1.65}.legacy-intro ul{flex-wrap:wrap;gap:.5rem;padding:0;list-style:none;display:flex}.legacy-intro li{border:1px solid color-mix(in srgb, var(--accent) 35%, var(--border));color:color-mix(in srgb, var(--accent) 75%, var(--text));border-radius:999px;padding:.45rem .7rem;font-size:.8rem;font-weight:700}.legacy-tool-card{border:1px solid color-mix(in srgb, var(--accent) 28%, var(--border));background:color-mix(in srgb, var(--surface) 96%, var(--accent));border-radius:1.6rem;min-width:0;padding:clamp(1rem,3vw,2rem);overflow:hidden;box-shadow:0 20px 60px #1c1b1814}.legacy-tool-card>:first-child{margin-top:0}.legacy-tool-card button,.legacy-tool-card input,.legacy-tool-card select,.legacy-tool-card textarea{min-height:44px}.legacy-tool-card button,.legacy-tool-card select,.legacy-tool-card input[type=range],.legacy-tool-card input[type=color]{cursor:pointer}.legacy-site :focus-visible{outline:3px solid color-mix(in srgb, var(--accent) 75%, white);outline-offset:3px}.legacy-section{border-top:1px solid var(--border);padding:clamp(3rem,7vw,6rem) 0}.legacy-section>h2,.legacy-detail-grid h2{letter-spacing:-.045em;margin:0 0 1.5rem;font-size:clamp(2rem,4vw,3.7rem);line-height:1}.legacy-steps{grid-template-columns:repeat(3,1fr);gap:1rem;display:grid}.legacy-steps article{border:1px solid var(--border);background:var(--surface);border-radius:1rem;padding:1.25rem}.legacy-steps article>span{color:var(--accent);font:700 .8rem ui-monospace,monospace}.legacy-steps h3{margin:1.4rem 0 .5rem}.legacy-steps p,.legacy-detail-grid p,.legacy-detail-grid li{color:var(--text-muted);line-height:1.65}.legacy-detail-grid{grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,6rem);display:grid}.legacy-detail-grid details{border-bottom:1px solid var(--border);padding:1rem 0}.legacy-detail-grid summary{cursor:pointer;font-weight:700}.family-nav{border-top:1px solid var(--border);grid-template-columns:.7fr 1.3fr;gap:2rem;margin-top:2rem;padding:2rem 0;display:grid}.family-nav>div{align-content:start;gap:.8rem;display:grid}.legacy-acquire{color:var(--accent);font-weight:800}.family-nav nav{flex-wrap:wrap;gap:.55rem 1rem;display:flex}.family-nav nav a{color:var(--text-muted)}.legacy-status{inset-inline-start:50%;z-index:50;background:var(--text);max-width:min(90vw,34rem);color:var(--surface);opacity:0;pointer-events:none;border-radius:.8rem;padding:.8rem 1rem;transition:opacity .18s,transform .18s;position:fixed;bottom:1rem;transform:translate(50%,1rem)}.legacy-status.is-visible{opacity:1;transform:translate(50%)}[dir=ltr] .legacy-status{transform:translate(-50%,1rem)}[dir=ltr] .legacy-status.is-visible{transform:translate(-50%)}[dir=rtl] .legacy-intro h1{letter-spacing:0}@media (width<=900px){.legacy-hero{grid-template-columns:1fr}.legacy-intro{position:static}.legacy-intro h1{max-width:16ch}}@media (width<=640px){.legacy-header,.legacy-container.container{padding-inline:.9rem}.legacy-hero{padding-top:1rem}.legacy-intro h1{font-size:clamp(2.7rem,14vw,4.4rem)}.legacy-tool-card{border-radius:1.2rem;padding:1rem}.legacy-steps,.legacy-detail-grid,.family-nav{grid-template-columns:1fr}.legacy-header nav{grid-template-columns:1fr;max-height:70vh;overflow:auto}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}:root{--bg:#fafaf7;--surface:#fff;--surface-2:#f1f0ec;--border:#e3e1db;--text:#1c1b18;--text-muted:#6e6b63;--accent:#0f766e;--accent-hover:#0d655e;--on-accent:#fff;--accent-soft:#0f766e1a;--success:#15803d;--danger:#b91c1c;--warning:#b45309;--radius-sm:8px;--radius-md:14px;--radius-lg:22px;--shadow-1:0 1px 2px #0000000f;--shadow-2:0 8px 24px #1c1b181a;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--font-display:"Bricolage Grotesque", sans-serif;--font-body:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--font-mono:ui-monospace, "JetBrains Mono", monospace}@media (prefers-color-scheme:dark){:root{--bg:#131311;--surface:#1c1b18;--surface-2:#24231f;--border:#33312c;--text:#f2f1ed;--text-muted:#a3a099}}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);font-family:var(--font-body);margin:0;font-size:16px;line-height:1.5}h1,h2,.display{font-family:var(--font-display);margin:0 0 var(--space-3);line-height:1.15}h1{font-size:34px}h2{font-size:24px}h3{margin:0 0 var(--space-2);font-size:18px}code,.mono{font-family:var(--font-mono)}a{color:var(--accent)}.dropzone{border:2px dashed var(--border);border-radius:var(--radius-lg);background:var(--surface-2);padding:var(--space-7) var(--space-5);text-align:center;color:var(--text-muted);cursor:pointer;transition:border-color .15s,background .15s}.dropzone:hover,.dropzone.is-dragover{border-color:var(--accent);background:var(--accent-soft)}.btn{align-items:center;gap:var(--space-2);border-radius:var(--radius-md);padding:var(--space-3) var(--space-5);font:inherit;cursor:pointer;border:none;font-weight:600;display:inline-flex}.btn-primary{background:var(--accent);color:var(--on-accent);box-shadow:var(--shadow-1)}.btn-primary:hover{background:var(--accent-hover)}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.slider-row{align-items:center;gap:var(--space-3);display:flex}.slider-row input[type=range]{accent-color:var(--accent);flex:1}.slider-row .value{font-family:var(--font-mono);color:var(--text-muted);text-align:right;min-width:3.5em;font-size:13px}.segmented{background:var(--surface-2);border-radius:var(--radius-md);padding:var(--space-1);gap:var(--space-1);display:inline-flex}.segmented button{padding:var(--space-2) var(--space-4);border-radius:var(--radius-sm);font:inherit;color:var(--text-muted);cursor:pointer;background:0 0;border:none}.segmented button.is-active{background:var(--surface);color:var(--text);box-shadow:var(--shadow-1)}.comparator{border-radius:var(--radius-md);user-select:none;position:relative;overflow:hidden}.comparator img,.comparator canvas{width:100%;height:auto;display:block}.comparator .after-layer{clip-path:inset(0 50% 0 0);position:absolute;inset:0;overflow:hidden}.comparator .divider{background:var(--on-accent);width:3px;box-shadow:var(--shadow-2);cursor:ew-resize;position:absolute;top:0;bottom:0;left:50%}.progress{background:var(--surface-2);border-radius:999px;height:8px;overflow:hidden}.progress-fill{background:var(--accent);height:100%;transition:width .1s linear}.progress-label{font-family:var(--font-mono);color:var(--text-muted);margin-top:var(--space-2);font-size:13px}.toast{bottom:var(--space-5);background:var(--text);color:var(--bg);padding:var(--space-3) var(--space-5);border-radius:var(--radius-md);box-shadow:var(--shadow-2);opacity:0;pointer-events:none;z-index:1000;font-size:14px;transition:opacity .15s,transform .15s;position:fixed;left:50%;transform:translate(-50%)translateY(8px)}.toast.is-visible{opacity:1;transform:translate(-50%)translateY(0)}.perf-chip{align-items:center;gap:var(--space-2);font-family:var(--font-mono);color:var(--accent);background:var(--accent-soft);padding:var(--space-1) var(--space-3);border-radius:999px;font-size:13px;animation:.2s ease-out perf-chip-in;display:inline-flex}@keyframes perf-chip-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.family-nav{border-top:1px solid var(--border);margin-top:var(--space-8);padding:var(--space-6) 0;color:var(--text-muted);font-size:14px}.family-nav a{color:var(--text-muted);margin-right:var(--space-4);text-decoration:none}.family-nav a:hover{color:var(--accent)}.container{max-width:720px;padding:var(--space-6) var(--space-4);margin:0 auto}.collage-grid-wrap{width:100%;margin:var(--space-4) 0;border-radius:var(--radius-md);background:var(--surface-2);box-shadow:var(--shadow-1);position:relative;overflow:hidden}.collage-grid{position:absolute;inset:0}.collage-cell{box-sizing:border-box;padding:2px;position:absolute}.collage-cell canvas{border-radius:var(--radius-sm);cursor:pointer;background:var(--surface);border:2px dashed var(--border);width:100%;height:100%;display:block}.collage-cell.is-filled canvas{border:2px solid #0000}.collage-cell.is-selected canvas{border:2px solid var(--accent)}.cell-panel{margin:var(--space-4) 0;padding:var(--space-4);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md)}select{font:inherit;padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface);color:var(--text)}:root{--accent:#b45309;--accent-hover:#954507;--accent-soft:#b453091a}.controls{margin:var(--space-5) 0;padding:var(--space-4);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md)}.control-row{align-items:center;gap:var(--space-4);margin:var(--space-3) 0;display:flex}.control-label{min-width:6em;color:var(--text-muted);font-size:14px}#bg-color{border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;width:36px;height:36px;padding:0}#export-btn{margin:var(--space-3) 0 var(--space-5)}.seo-copy{margin-top:var(--space-8);color:var(--text-muted)}[hidden]{display:none!important}