.effects-page-hero{grid-template-columns:minmax(0,1fr) 260px;align-items:end;gap:2rem;padding:2rem 0 1.5rem;display:grid}.effects-page-hero>div>span,.effects-preview-panel>header span,.effects-presets>header span,.effects-adjustments>header span,.effects-export-copy>span,.effects-explain article>span{color:#d45236;font:780 .66rem var(--mono);letter-spacing:.12em;text-transform:uppercase}.effects-page-hero h1{letter-spacing:-.058em;max-width:17ch;margin:.42rem 0 .7rem;font-size:clamp(2.2rem,5.7vw,4.9rem);line-height:.94}.effects-page-hero .lead{max-width:65ch;margin:0}.effects-hero-proof{border:1px solid var(--border);background:var(--bg-raised);box-shadow:var(--shadow-lg);border-radius:18px;grid-template-columns:auto 1fr auto;align-items:center;gap:.5rem;padding:.85rem;display:grid;transform:rotate(2deg)}.effects-hero-proof>div{background:#16233f;border-radius:11px;grid-column:1/-1;grid-template-columns:1.2fr .8fr 1fr;height:112px;display:grid;overflow:hidden}.effects-hero-proof i:first-child{background:linear-gradient(145deg,#182540,#536e8f 52%,#d7a46d)}.effects-hero-proof i:nth-child(2){background:linear-gradient(145deg,#f2b56b,#db684d)}.effects-hero-proof i:nth-child(3){background:linear-gradient(145deg,#486b70,#102a38)}.effects-hero-proof b{font:740 .56rem var(--mono);letter-spacing:.08em}.effects-hero-proof>b:last-child{color:#d45236}.effects-hero-proof>span{background:linear-gradient(90deg,var(--border),#d45236);height:1px}.effects-studio{--fx:#d45236;--fx-soft:color-mix(in srgb,var(--fx) 8%,var(--bg-raised));margin:1rem 0 2.5rem}.effects-drop{border:1px dashed color-mix(in srgb,var(--fx) 45%,var(--border));background:var(--bg-raised);text-align:center;cursor:pointer;min-height:320px;box-shadow:var(--shadow);border-radius:24px;flex-direction:column;justify-content:center;align-items:center;padding:2rem;transition:all .18s;display:flex;position:relative;overflow:hidden}.effects-drop:hover,.effects-drop.is-over,.effects-studio.is-pasting .effects-drop{border-color:var(--fx);transform:translateY(-2px);box-shadow:0 18px 46px #0f172a1c}.effects-drop:before{border:1px solid color-mix(in srgb,var(--fx) 15%,transparent);width:190px;height:190px;box-shadow:0 0 0 28px color-mix(in srgb,var(--fx) 3%,transparent),0 0 0 56px color-mix(in srgb,var(--fx) 2%,transparent);content:"";pointer-events:none;border-radius:50%;position:absolute;inset:17% auto auto -8%}.effects-drop-art{border:5px solid var(--bg-raised);background:linear-gradient(145deg,#192943 0 45%,#e09b61 45% 70%,#536e72 70%);border-radius:16px;justify-content:center;align-items:flex-end;width:104px;height:74px;margin-bottom:1rem;display:flex;position:relative;overflow:hidden;box-shadow:0 12px 30px #0f172a33}.effects-drop-art i{mix-blend-mode:overlay;background:#ffffff61;width:20px;display:block}.effects-drop-art i:first-child{height:35px}.effects-drop-art i:nth-child(2){height:58px}.effects-drop-art i:nth-child(3){height:45px}.effects-drop-art b{background:#fff;width:3px;height:100%;position:absolute;top:0;left:50%;box-shadow:0 0 0 1px #00000024}.effects-drop>strong{font-size:1.18rem}.effects-browse{background:var(--fx);color:#fff;border-radius:999px;margin-top:.65rem;padding:.58rem .9rem;font-size:.76rem;font-weight:760}.effects-paste{color:var(--text-muted);align-items:center;gap:.42rem;margin-top:.72rem;font-size:.68rem;display:flex}.effects-paste kbd{border:1px solid var(--border);background:var(--bg-subtle);font:650 .58rem var(--mono);border-radius:5px;padding:.2rem .34rem}.effects-drop small{color:var(--text-muted);margin-top:.55rem;font-size:.65rem}.effects-error{border:1px solid color-mix(in srgb,var(--danger) 30%,var(--border));background:var(--danger-subtle);color:var(--danger);border-radius:10px;margin:.75rem 0;padding:.72rem .82rem;font-size:.76rem}.effects-workspace{gap:1rem;display:grid}.effects-source-bar{border:1px solid var(--border);background:var(--bg-subtle);border-radius:12px;justify-content:space-between;align-items:center;gap:1rem;padding:.7rem .82rem;display:flex}.effects-source-bar span{min-width:0;color:var(--text-muted);font:.68rem var(--mono);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.effects-source-bar button,.effects-reset,.effects-export-actions button{appearance:none;border:1px solid var(--border);background:var(--bg-raised);color:var(--text);font:700 .7rem var(--font);cursor:pointer;border-radius:8px;padding:.52rem .72rem}.effects-source-bar button:hover,.effects-reset:hover,.effects-export-actions button:hover{border-color:color-mix(in srgb,var(--fx) 48%,var(--border));color:var(--fx)}.effects-preview-panel,.effects-presets,.effects-adjustments,.effects-export{border:1px solid var(--border);background:var(--bg-raised);box-shadow:var(--shadow);border-radius:20px;overflow:hidden}.effects-preview-panel>header,.effects-presets>header{border-bottom:1px solid var(--border);background:var(--bg-subtle);justify-content:space-between;align-items:end;gap:1rem;padding:.9rem 1rem;display:flex}.effects-preview-panel h2,.effects-presets h2,.effects-adjustments h2,.effects-export h2{margin:.18rem 0 0;font-size:1rem}.effects-preview-panel>header p,.effects-presets>header p{max-width:42ch;color:var(--text-muted);text-align:right;margin:0;font-size:.7rem}.effects-stage{background-color:#20232a;background-image:linear-gradient(45deg,#292d35 25%,#0000 25%),linear-gradient(-45deg,#292d35 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#292d35 75%),linear-gradient(-45deg,#0000 75%,#292d35 75%);background-position:0 0,0 10px,10px -10px,-10px 0;background-size:20px 20px;place-items:center;min-height:390px;padding:1rem;display:grid;position:relative;overflow:hidden}.effects-stage>canvas{border-radius:10px;width:auto;max-width:100%;height:auto;max-height:min(70vh,680px);display:block;box-shadow:0 16px 42px #00000047}.effects-result-layer{clip-path:inset(0 calc(100% - var(--split)) 0 0);pointer-events:none;place-items:center;display:grid;position:absolute;inset:1rem;overflow:hidden}.effects-result-layer canvas{border-radius:10px;width:auto;max-width:100%;height:auto;max-height:min(70vh,680px);display:block;box-shadow:0 16px 42px #00000047}.effects-divider{top:1rem;bottom:1rem;left:var(--split);pointer-events:none;background:#fff;width:2px;position:absolute;transform:translate(-1px);box-shadow:0 0 0 1px #00000042,0 0 20px #00000047}.effects-divider b{color:#fff;width:38px;height:38px;font:800 .76rem var(--mono);background:#16191d;border:2px solid #fff;border-radius:50%;place-items:center;display:grid;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 7px 20px #00000059}.effects-stage>input{opacity:0;cursor:ew-resize;width:calc(100% - 2rem);height:calc(100% - 2rem);margin:0;position:absolute;inset:1rem}.effects-tag{color:#fff;font:720 .56rem var(--mono);letter-spacing:.08em;pointer-events:none;background:#111318c2;border-radius:6px;padding:.28rem .46rem;position:absolute;top:1.7rem}.effects-tag.is-after{left:1.7rem}.effects-tag.is-before{right:1.7rem}.effects-preview-status{min-height:31px;color:var(--fx);font:.67rem var(--mono);text-align:center;padding:.48rem 1rem}.effects-edit-grid{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:1rem;display:grid}.effects-presets>div{grid-template-columns:repeat(5,minmax(0,1fr));gap:.55rem;padding:1rem;display:grid}.effects-presets button{appearance:none;border:1px solid var(--border);background:var(--bg-raised);min-width:0;color:var(--text);cursor:pointer;border-radius:11px;gap:.38rem;padding:.42rem;display:grid}.effects-presets button:hover{border-color:color-mix(in srgb,var(--fx) 38%,var(--border));transform:translateY(-1px)}.effects-presets button[aria-pressed=true]{border-color:var(--fx);background:var(--fx-soft);box-shadow:0 0 0 2px var(--fx-soft)}.effects-presets button>span{height:58px;filter:var(--preset-filter);background:linear-gradient(140deg,#182740,#63768b 48%,#db9b61);border-radius:7px}.effects-presets button strong{text-overflow:ellipsis;white-space:nowrap;font-size:.61rem;overflow:hidden}.effects-presets button[data-effects-preset=clean]>span{--preset-filter:brightness(1.08) contrast(1.06)}.effects-presets button[data-effects-preset=vivid]>span{--preset-filter:saturate(1.5) contrast(1.14)}.effects-presets button[data-effects-preset=warm]>span{background:linear-gradient(140deg,#45314e,#b16655 48%,#efbd68)}.effects-presets button[data-effects-preset=cool]>span{background:linear-gradient(140deg,#142c4f,#37768a 48%,#7fa5b3)}.effects-presets button[data-effects-preset=mono]>span{--preset-filter:grayscale(1) contrast(1.1)}.effects-presets button[data-effects-preset=sepia]>span{--preset-filter:sepia(.85) contrast(1.05)}.effects-presets button[data-effects-preset=duotone]>span{background:linear-gradient(140deg,#16233f 0 48%,#f3b562 52%)}.effects-presets button[data-effects-preset=pixel]>span{background:conic-gradient(from 90deg,#182740 0 25%,#d86d4e 0 50%,#587783 0 75%,#efb568 0);image-rendering:pixelated;background-size:18px 18px}.effects-presets button[data-effects-preset=dream]>span{--preset-filter:blur(2px) brightness(1.12) saturate(.85)}.effects-adjustments>header{border-bottom:1px solid var(--border);background:var(--bg-subtle);padding:.9rem 1rem}.effects-control-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.72rem 1rem;padding:1rem;display:grid}.effects-control{gap:.42rem;min-width:0;display:grid}.effects-control>span{color:var(--text-muted);justify-content:space-between;gap:.5rem;font-size:.68rem;font-weight:680;display:flex}.effects-control output{background:var(--fx-soft);min-width:34px;color:var(--fx);font:.61rem var(--mono);border-radius:5px;place-items:center;padding:.1rem .28rem;display:grid}.effects-control input{width:100%;accent-color:var(--fx)}.effects-duotone{border:1px solid color-mix(in srgb,var(--fx) 22%,var(--border));background:var(--fx-soft);border-radius:10px;align-items:center;gap:.8rem;margin:0 1rem 1rem;padding:.72rem;display:flex}.effects-duotone>strong{margin-right:auto;font-size:.69rem}.effects-duotone label{color:var(--text-muted);align-items:center;gap:.4rem;font-size:.62rem;display:flex}.effects-duotone input{border:1px solid var(--border);cursor:pointer;background:0 0;border-radius:6px;width:34px;height:28px;padding:0}.effects-reset{margin:0 1rem 1rem}.effects-export{grid-template-columns:minmax(170px,.75fr) minmax(260px,1fr) minmax(220px,1fr);align-items:center;gap:1rem;padding:1rem;display:grid}.effects-export-copy p{color:var(--text-muted);font:.66rem var(--mono);margin:.25rem 0 0}.effects-export-options{grid-template-columns:.8fr 1.2fr;gap:.55rem;display:grid}.effects-export-options label{color:var(--text-muted);grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.5rem;font-size:.65rem;font-weight:680;display:grid}.effects-export-options label:first-child{grid-template-columns:auto 1fr}.effects-export-options select{border:1px solid var(--border);background:var(--bg-subtle);min-width:0;color:var(--text);font:700 .68rem var(--font);border-radius:8px;padding:.48rem .55rem}.effects-export-options input{width:100%;min-width:0;accent-color:var(--fx)}.effects-export-options output{font:.62rem var(--mono)}.effects-export-options label.is-disabled{opacity:.45}.effects-export-actions{flex-wrap:wrap;justify-content:flex-end;gap:.45rem;display:flex}.effects-export-actions button.is-primary{background:var(--fx);color:#fff;border-color:#0000}.effects-export-actions button:disabled{opacity:.55;cursor:wait}.effects-private{color:var(--text-muted);text-align:center;margin:0;font-size:.68rem}.effects-private:before{content:"✓";background:color-mix(in srgb,var(--success) 12%,transparent);width:18px;height:18px;color:var(--success);border-radius:50%;place-items:center;margin-right:.4rem;font-weight:800;display:inline-grid}.effects-explain{grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem;margin:2.2rem 0;display:grid}.effects-explain article{border:1px solid var(--border);background:var(--bg-raised);border-radius:15px;padding:1rem}.effects-explain h2{margin:.35rem 0 .48rem;font-size:1rem}.effects-explain p{color:var(--text-muted);margin:0;font-size:.76rem;line-height:1.6}.effects-related{margin:1.2rem 0 3rem}.effects-related h2{margin-bottom:.7rem}.effects-related>div{grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem;display:grid}.effects-related a{border:1px solid var(--border);background:var(--bg-raised);color:var(--text);border-radius:12px;justify-content:space-between;align-items:center;gap:.8rem;padding:.85rem 1rem;font-size:.78rem;font-weight:700;text-decoration:none;transition:all .16s;display:flex}.effects-related a:hover{border-color:color-mix(in srgb,#d45236 42%,var(--border));color:#d45236;transform:translateY(-2px)}@media (prefers-color-scheme:dark){.effects-page-hero>div>span,.effects-preview-panel>header span,.effects-presets>header span,.effects-adjustments>header span,.effects-export-copy>span,.effects-explain article>span,.effects-hero-proof>b:last-child{color:#f39a7f}}@media (width<=900px){.effects-edit-grid{grid-template-columns:1fr}.effects-presets>div{grid-template-columns:repeat(5,minmax(0,1fr))}.effects-export{grid-template-columns:1fr 1fr}.effects-export-actions{grid-column:1/-1;justify-content:flex-start}.effects-explain{grid-template-columns:1fr}}@media (width<=680px){.effects-page-hero{grid-template-columns:1fr;padding-top:1.3rem}.effects-page-hero h1{font-size:clamp(2.05rem,11.5vw,3.3rem)}.effects-hero-proof{display:none}.effects-drop{border-radius:17px;min-height:275px}.effects-preview-panel,.effects-presets,.effects-adjustments,.effects-export{border-radius:15px}.effects-preview-panel>header,.effects-presets>header{flex-direction:column;align-items:flex-start}.effects-preview-panel>header p,.effects-presets>header p{text-align:left}.effects-stage{min-height:270px;padding:.6rem}.effects-result-layer{inset:.6rem}.effects-divider{top:.6rem;bottom:.6rem}.effects-stage>input{width:calc(100% - 1.2rem);height:calc(100% - 1.2rem);inset:.6rem}.effects-tag{top:1.1rem}.effects-tag.is-after{left:1.1rem}.effects-tag.is-before{right:1.1rem}.effects-presets>div{grid-template-columns:repeat(2,minmax(0,1fr))}.effects-control-grid{grid-template-columns:1fr}.effects-duotone{flex-wrap:wrap;align-items:flex-start}.effects-duotone>strong{width:100%}.effects-export{grid-template-columns:1fr}.effects-export-actions{grid-column:auto}.effects-export-options{grid-template-columns:1fr}.effects-export-actions button{flex:100%}.effects-related>div{grid-template-columns:1fr}}.effects-source-bar button,.effects-duotone label,.effects-reset,.effects-export-options select,.effects-export-actions button{min-height:44px}
