:root{--effects-bg: #11131a;--effects-panel: rgba(19, 23, 32, .78);--effects-panel-strong: rgba(20, 24, 34, .94);--effects-line: rgba(255, 255, 255, .12);--effects-text: #f5f7fb;--effects-muted: rgba(245, 247, 251, .66);--effects-accent: #56d8ff;--effects-hot: #ff7861;--effects-good: #9affb8}*{box-sizing:border-box}html,body{min-height:100%}body.image-effects-app{margin:0;color:var(--effects-text);background:radial-gradient(circle at 16% 12%,rgba(86,216,255,.18),transparent 30%),radial-gradient(circle at 84% 18%,rgba(255,120,97,.14),transparent 28%),linear-gradient(145deg,#11131a,#171923 48%,#0d1017);font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;overflow-x:hidden}.effects-header{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:58px;padding:12px clamp(16px,4vw,42px);border-bottom:1px solid var(--effects-line);background:#0a0c12b8;backdrop-filter:blur(14px)}.effects-brand,.effects-nav a{color:var(--effects-text);text-decoration:none}.effects-brand{font-weight:800;letter-spacing:.02em}.effects-nav a{display:inline-flex;align-items:center;min-height:34px;padding:0 12px;border:1px solid var(--effects-line);border-radius:8px;color:var(--effects-muted)}.effects-nav a:hover{color:var(--effects-text);border-color:#56d8ff70}.effects-shell{width:min(1420px,100%);margin:0 auto;padding:clamp(16px,3vw,36px)}.effects-stage{display:grid;gap:16px}.stage-toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:end;padding:14px;border:1px solid var(--effects-line);border-radius:8px;background:var(--effects-panel);box-shadow:0 18px 50px #00000047;backdrop-filter:blur(12px)}.url-form{display:grid;gap:8px;min-width:0}.url-form label,.effect-picker legend{color:var(--effects-muted);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.12em}.url-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}.url-row input,.url-row button{min-height:42px;border-radius:8px;font:inherit}.url-row input{width:100%;min-width:0;border:1px solid rgba(255,255,255,.14);background:#ffffff12;color:var(--effects-text);padding:0 12px;outline:none}.url-row input:focus{border-color:#56d8ffb3;box-shadow:0 0 0 3px #56d8ff29}.url-row button{border:0;background:var(--effects-accent);color:#071018;font-weight:800;padding:0 18px;cursor:pointer}.url-row button:hover{filter:brightness(1.06)}.effect-select-wrap{display:grid;gap:8px}.effect-select-wrap label{color:var(--effects-muted);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.12em}.effect-select-wrap select{min-height:42px;min-width:160px;padding:0 36px 0 12px;border:1px solid rgba(255,255,255,.14);border-radius:8px;background-color:#ffffff12;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a0aabb' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;color:var(--effects-text);font:inherit;font-weight:700;cursor:pointer;outline:none;-webkit-appearance:none;appearance:none}.effect-select-wrap select:focus{border-color:#56d8ffb3;box-shadow:0 0 0 3px #56d8ff29}.effect-select-wrap select option{background:#11131a;color:var(--effects-text)}.canvas-wrap{position:relative;min-height:clamp(420px,70vh,820px);overflow:hidden;border:1px solid rgba(255,255,255,.14);border-radius:8px;background:linear-gradient(45deg,rgba(255,255,255,.035) 25%,transparent 25%),linear-gradient(-45deg,rgba(255,255,255,.035) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(255,255,255,.035) 75%),linear-gradient(-45deg,transparent 75%,rgba(255,255,255,.035) 75%),var(--effects-panel-strong);background-position:0 0,0 12px,12px -12px,-12px 0;background-size:24px 24px;box-shadow:0 26px 70px #00000057}.three-image-stage,.three-image-stage canvas{position:absolute;inset:0;width:100%;height:100%}.three-image-stage canvas{display:block;cursor:crosshair}.canvas-status{position:absolute;top:14px;left:14px;z-index:5;max-width:min(520px,calc(100% - 28px));padding:9px 12px;border:1px solid rgba(255,255,255,.14);border-radius:8px;background:#080a0fc7;color:var(--effects-muted);font-size:13px;line-height:1.4;backdrop-filter:blur(12px);pointer-events:none}.canvas-status.is-hidden{opacity:0;transform:translateY(-4px);transition:opacity .2s ease,transform .2s ease}.canvas-status.is-error{color:#ffd5cf;border-color:#ff786161;background:#2e1111d1}@media (max-width: 820px){.stage-toolbar,.url-row{grid-template-columns:1fr}.canvas-wrap{min-height:62vh}}.embed-bar{display:grid;gap:10px}.embed-toggle{justify-self:start;display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 16px;border:1px solid rgba(86,216,255,.3);border-radius:8px;background:#56d8ff14;color:var(--effects-accent);font:800 13px/1 inherit;letter-spacing:.04em;cursor:pointer;transition:background .15s,border-color .15s}.embed-toggle:hover{background:#56d8ff24;border-color:#56d8ff8c}.embed-panel{padding:16px;border:1px solid rgba(86,216,255,.18);border-radius:8px;background:#0a141cd6;backdrop-filter:blur(14px);display:grid;gap:12px}.embed-hint,.embed-cors-note{margin:0;font-size:13px;line-height:1.55;color:var(--effects-muted)}.embed-cors-note{font-size:12px;opacity:.7}.embed-code-wrap{position:relative}.embed-code{margin:0;padding:14px 56px 14px 14px;border:1px solid rgba(255,255,255,.1);border-radius:6px;background:#00000070;color:var(--effects-good);font:400 12px/1.65 Fira Code,Cascadia Code,JetBrains Mono,ui-monospace,monospace;white-space:pre-wrap;word-break:break-all;user-select:all}.embed-copy{position:absolute;top:8px;right:8px;min-width:56px;padding:5px 10px;border:1px solid rgba(255,255,255,.16);border-radius:6px;background:#ffffff1a;color:var(--effects-text);font:700 11px/1 inherit;cursor:pointer;transition:background .12s}.embed-copy:hover{background:#ffffff2e}