:root{color-scheme:dark;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif;color:#EDEEF0;background:#09090b;font-size:16px}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{height:100dvh;display:grid;grid-template-rows:76px minmax(0,1fr);background:radial-gradient(ellipse at 65% 0,#242429 0,transparent 55%),#09090b}button,input{font:inherit}button{cursor:pointer;color:#eee;border:1px solid #ffffff1a;background:linear-gradient(#ffffff10,#ffffff06);padding:10px 15px;border-radius:9px;font-size:14px;transition:background .18s,border-color .18s;box-shadow:inset 0 1px #ffffff08}button:hover{background:#ffffff18;border-color:#ffffff35}button:focus-visible,input:focus-visible{outline:2px solid #EDEEF0;outline-offset:3px}header{display:flex;align-items:center;justify-content:space-between;padding:0 26px;gap:20px;border-bottom:1px solid #ffffff0b;background:#14141688;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}.brand{font-weight:650;font-size:29px;letter-spacing:-1.4px;color:#EDEEF0;text-decoration:none}.brand span{font-size:12px;vertical-align:top;letter-spacing:0;padding-left:3px}.tag{color:#8d8d95;font-size:14px}.red{background:linear-gradient(#EDEEF0,#dcdce0);color:#111;border-color:#fff3;font-weight:600;box-shadow:0 2px 10px #0003,inset 0 1px #EDEEF0}.red:hover{background:#EDEEF0}main{display:grid;grid-template-columns:292px minmax(0,1fr);min-height:0;gap:18px;padding:18px}aside{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#555 transparent;border:1px solid #ffffff12;border-radius:14px;background:linear-gradient(135deg,#ffffff0b,#ffffff03);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:inset 0 1px #ffffff08,0 8px 30px #0002}.section{padding:20px;border-bottom:1px solid #ffffff0b}.section:last-child{border:0}.section>span{display:block;font-size:14px;font-weight:600;letter-spacing:.1px;color:#ddd;margin-bottom:12px}.section>button{width:100%;margin-top:6px}.muted{color:#8c8c95;font-size:14px;line-height:1.5;margin:0 0 14px}.quiet{background:transparent;color:#9b9ba5}.effect{border-top:1px solid #ffffff0b;padding:13px 0}.effect:last-child{padding-bottom:0}.effect label.title{display:flex;align-items:center;justify-content:space-between;font-weight:500;font-size:14px;cursor:pointer}.effect input[type=checkbox]{appearance:none;-webkit-appearance:none;width:30px;height:18px;border-radius:12px;background:#ffffff20;position:relative;margin:0;flex-shrink:0;cursor:pointer;transition:background .2s}.effect input[type=checkbox]:before{content:'';position:absolute;width:12px;height:12px;top:3px;left:3px;border-radius:50%;background:#929298;transition:transform .2s}.effect input[type=checkbox]:checked{background:#eee}.effect input[type=checkbox]:checked:before{background:#222;transform:translateX(12px)}.knobs{display:none;padding-top:18px}.effect.active .knobs{display:block}.knob label{display:flex;justify-content:space-between;color:#9999a2;font-size:14px}.knob output{color:#ddd;font-variant-numeric:tabular-nums}.knob input{width:100%;height:4px;accent-color:#eee;margin:16px 0 19px;cursor:pointer}.workspace{min-width:0;min-height:0;display:grid;grid-template-rows:48px minmax(0,1fr) 42px}.toolbar{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;color:#8d8d97;font-size:13px;padding:0 2px}.toolbar span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-top:10px;min-width:0}.toolbar button{flex-shrink:0;padding:8px 13px;background:#ffffff0a;backdrop-filter:blur(16px)}#dropzone{position:relative;min-height:0;min-width:0;overflow:hidden;border-radius:14px;background:conic-gradient(#19191c 25%,#1c1c1f 0 50%,#19191c 0 75%,#1c1c1f 0) 0 0/18px 18px;border:1px solid #ffffff0c;box-shadow:inset 0 1px #ffffff06}#dropzone.over{outline:2px solid #ddd;outline-offset:-3px}canvas{position:absolute;inset:22px;width:calc(100% - 44px);height:calc(100% - 44px);object-fit:contain;display:block}footer{display:flex;justify-content:space-between;align-items:center;color:#83838d;font-size:12px;gap:18px;padding:0 2px}#status{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#dimensions{flex-shrink:0;font-variant-numeric:tabular-nums}@media(max-width:760px){html,body{height:auto;overflow:auto}body{display:block;min-height:100dvh}header{height:64px;padding:0 16px}.tag{display:none}main{display:flex;flex-direction:column;padding:12px;gap:12px}.workspace{order:-1;height:62dvh;min-height:300px}.brand{font-size:26px}aside{overflow:visible}.section{padding:18px}canvas{inset:12px;width:calc(100% - 24px);height:calc(100% - 24px)}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* Colour-coded effect cards */
main{grid-template-columns:340px minmax(0,1fr)}.brand{font-size:32px;font-weight:750;letter-spacing:-1.8px}aside{background:#141416b3}.section{padding:18px}.section>span{font-size:16px}.muted{margin-bottom:18px}#effects{display:grid;gap:9px}.effect,.effect:last-child{border:1px solid transparent;padding:0;border-radius:11px;overflow:hidden;background:var(--effect-color);color:#151515;transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s,border-color .22s}.effect:hover{transform:translateY(-2px);box-shadow:0 6px 18px #0003}.effect.active{border-color:#fff9;box-shadow:0 0 0 1px #fff2}.effect label.title{position:relative;display:flex;min-height:91px;padding:15px 18px;gap:10px;isolation:isolate}.effect-copy{display:flex;flex:1;flex-direction:column;gap:7px}.effect-number{font-size:12px;line-height:1;font-weight:600;opacity:.65;letter-spacing:.05em}.effect-name{font-size:25px;font-weight:600;line-height:1.08;letter-spacing:-1px}.effect-icon{width:42px;height:42px;flex:0 0 42px;transition:transform .35s cubic-bezier(.2,.8,.2,1);margin-right:30px}.effect-icon svg{width:100%;height:100%;display:block}.effect:hover .effect-icon{transform:rotate(-9deg) scale(1.08)}.effect.active .effect-icon{transform:rotate(0) scale(1.04)}.effect input[type=checkbox]{position:absolute;right:12px;top:14px;width:19px;height:19px;border:1px solid #15151550;border-radius:50%;background:transparent;transition:background .2s,transform .2s}.effect input[type=checkbox]:before{width:9px;height:9px;left:4px;top:4px;background:transparent;border-radius:50%;transform:none}.effect input[type=checkbox]:checked{background:#151515;border-color:#151515}.effect input[type=checkbox]:checked:before{background:var(--effect-color);transform:none}.effect:has(input:focus-visible){outline:2px solid #EDEEF0;outline-offset:3px}.effect .knobs,.effect.active .knobs{display:grid;grid-template-rows:0fr;padding:0;opacity:0;transition:grid-template-rows .3s cubic-bezier(.2,.8,.2,1),opacity .2s}.effect.active .knobs{grid-template-rows:1fr;opacity:1}.knobs-inner{min-height:0;overflow:hidden}.knob{margin:0 18px}.knob:first-child{border-top:1px solid #15151525;padding-top:16px}.knob label,.knob output{color:#151515;font-weight:500}.knob label{font-size:14px}.knob input{accent-color:#151515;margin:15px 0 20px}.toolbar button{border-radius:10px;transition:background .2s,transform .2s}.toolbar button:active,.red:active{transform:scale(.97)}.toolbar button[aria-pressed=true]{background:#eee;color:#111}.tag{letter-spacing:0}.red{border-radius:10px}#dropzone{transition:border-color .25s,box-shadow .25s}#dropzone.over{box-shadow:inset 0 0 0 5px #ffffff20}.section>button{transition:background .2s,transform .2s}.section>button:active{transform:scale(.98)}@media(min-width:1600px){main{grid-template-columns:370px minmax(0,1fr)}.effect-name{font-size:28px}.effect label.title{min-height:99px}}@media(max-width:760px){main{display:flex}.effect label.title{min-height:84px}.effect-name{font-size:25px}.effect:hover{transform:none}}@media(prefers-reduced-motion:reduce){.effect,.effect .knobs,.effect.active .knobs,.effect-icon,.toolbar button,.section>button,#dropzone{transition:none!important}.effect:hover,.effect:hover .effect-icon{transform:none}}
/* Typographic opening */
#export,#export:hover,#export:focus-visible,#compare,#compare:hover,#compare:focus-visible,#compare[aria-pressed=true]{background:#000f08!important;color:#EDEEF0!important;border:1px solid #EDEEF0!important;box-shadow:none!important;filter:none!important;text-transform:lowercase}.brand,.knob label,.drawer-heading,.apply-toggle{text-transform:lowercase}#effects .effect,#effects .effect.active,#effects .effect.selected{background:#EDEEF0!important;color:#000f08!important;background-image:none!important;border-color:#EDEEF0!important;box-shadow:none!important}#effects .effect-name,#effects .effect-number,#effects .tile-name,#effects .tile-applied{color:#000f08!important;text-shadow:none!important}#effects .effect-drawer{overflow:hidden!important;border-radius:0!important;opacity:1;transition:height .48s ease,opacity .2s ease}#effects .effect-drawer[aria-hidden=true]{opacity:0;pointer-events:none}#effects .effect-drawer .drawer-content,#effects .drawer-content{background:#000f08!important;background-image:none!important;border:1px solid #EDEEF0!important;color:#EDEEF0!important;box-shadow:none!important;border-radius:8px!important;overflow:visible!important;outline:0!important}#effects .drawer-content .knob label,#effects .drawer-content .knob output,#effects .drawer-heading{color:#EDEEF0!important}.apply-toggle{background:#000f08!important;color:#EDEEF0!important;border:1px solid #EDEEF0!important}#upload{background:#000f08!important;color:#EDEEF0!important;border:1px solid #EDEEF0!important;box-shadow:none!important;filter:none!important}#upload:hover{background:#000f08!important;color:#EDEEF0!important;opacity:.82}@media(min-width:761px){.section:first-child>span,.section:nth-child(2)>span{font-size:16px!important;text-transform:uppercase!important;letter-spacing:.08em!important;font-weight:650!important}}
/* Glass tile studio */
body{display:block;background:#000f08}header{position:absolute;z-index:10;left:45%;right:0;top:0;height:150px;padding:24px 4vw 16px 2vw;background:#000f08;border:0;backdrop-filter:none;gap:20px}.brand{font-size:clamp(44px,6.7vw,108px);font-weight:550;text-transform:uppercase;letter-spacing:-.065em;line-height:1}.brand span{font-size:.35em;letter-spacing:-.05em}.tag{display:none}.red{font-size:16px;white-space:nowrap;padding:9px 13px}main{display:grid;grid-template-columns:minmax(320px,40%) minmax(0,1fr);gap:5%;height:100dvh;padding:24px 4vw;min-height:0}aside{background:transparent;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;padding-right:10px;scrollbar-width:thin}.section{padding:12px 4px 20px;border:0}.section:first-child{max-width:290px}.section>span{font-size:14px}.section>button{margin-top:5px;font-size:13px;padding:8px}.section:nth-child(2)>span{margin-bottom:6px}.muted{font-size:13px;margin-bottom:22px}.workspace{padding-top:126px;grid-template-rows:42px minmax(0,1fr) 34px;min-height:0}.toolbar{align-items:center}.toolbar span{padding:0;font-size:12px}.toolbar button{background:#c9f424;color:#182000;font-weight:550;border:none;backdrop-filter:none}.toolbar button:hover{background:#ddff6b}#dropzone{border-radius:24px;background-color:#151515;border-color:#ffffff18}canvas{inset:16px;width:calc(100% - 32px);height:calc(100% - 32px)}#effects{display:flex;flex-direction:column;gap:0}.tile-pair{display:grid;gap:15px;grid-template-columns:1.4fr 1fr}.pair-wide-right{grid-template-columns:1fr 1.4fr}.effect-row{margin-bottom:15px}.effect,.effect:last-child{border-radius:clamp(23px,3vw,42px);border:1px solid #ffffff48;position:relative;background:radial-gradient(ellipse at 50% 95%,var(--g1) 0,transparent 58%),radial-gradient(ellipse at 75% 25%,var(--g0) 0,transparent 58%),linear-gradient(135deg,var(--g0),var(--g2) 55%,var(--g0));box-shadow:inset 0 1px 5px #fff9,inset 0 0 14px #ffffff80,inset 0 0 33px var(--g0);transition:transform .35s ease,box-shadow .35s ease,border-color .35s;isolation:isolate}.effect:after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 4px 1px #ffffffb3,inset 0 -5px 14px #ffffff66;background:linear-gradient(145deg,#ffffff22,transparent 40%,#ffffff09);z-index:2}.effect:hover{transform:translateY(-3px);box-shadow:inset 0 1px 8px #fffc,inset 0 0 25px var(--g0),0 6px 22px #0008}.effect.active{border-color:#ffffff80;box-shadow:inset 0 1px 5px #fff9,inset 0 0 14px #ffffff80,inset 0 0 33px var(--g0)}.effect.selected{border-color:#EDEEF0;box-shadow:inset 0 0 20px #ffffff60,0 0 0 2px #ffffff30}.tile-button{display:flex;align-items:center;justify-content:center;position:relative;width:100%;height:clamp(138px,15.7vw,225px);border:0;border-radius:inherit;background:transparent!important;box-shadow:none;padding:18px;color:#EDEEF0;overflow:hidden}.tile-name{position:relative;z-index:1;font-size:clamp(16px,1.7vw,25px);font-weight:500;letter-spacing:-.6px;text-shadow:0 1px 10px #000f08,0 0 22px #0009}.tile-applied{position:absolute;bottom:15px;left:50%;transform:translateX(-50%);font-size:11px;background:#0005;padding:4px 9px;border-radius:20px;opacity:0;transition:opacity .25s}.effect.active .tile-applied{opacity:1}.tile-motif{position:absolute;inset:22%;opacity:.46;color:#EDEEF0;font:700 clamp(15px,1.6vw,25px)/1.3 monospace;text-align:center;filter:blur(.35px);transition:transform .65s,opacity .4s;mask-image:radial-gradient(ellipse,#000f08 30%,transparent 75%)}.effect:hover .tile-motif{transform:scale(1.08);opacity:.65}[data-effect=bleed] .tile-motif{inset:18%;border-radius:45% 56% 36% 64%;background:#ffb000;filter:blur(14px);box-shadow:18px 14px 0 #ff1100,-10px -14px 0 #ffdf70}[data-effect=dither] .tile-motif{background:repeating-conic-gradient(#EDEEF0 0 25%,transparent 0 50%) 0 0/10px 10px}[data-effect=half] .tile-motif{background:radial-gradient(circle,#EDEEF0 3px,transparent 4px) 0 0/13px 13px}[data-effect=riso] .tile-motif{background:radial-gradient(circle at 38% 50%,#ffce25 0 32%,transparent 33%),radial-gradient(circle at 62% 50%,#54baff 0 32%,transparent 33%);mix-blend-mode:screen}[data-effect=pixel] .tile-motif{background:repeating-conic-gradient(#ffffffaa 0 25%,transparent 0 50%) 0 0/32px 32px}[data-effect=poster] .tile-motif{background:repeating-radial-gradient(ellipse at 50% 100%,#ffffffbb 0 14px,#ffffff22 15px 30px,transparent 31px 45px)}[data-effect=hatch] .tile-motif{background:repeating-linear-gradient(45deg,transparent 0 9px,#EDEEF0 10px 11px),repeating-linear-gradient(-45deg,transparent 0 9px,#EDEEF0 10px 11px)}[data-effect=edge] .tile-motif{border:3px solid #EDEEF0;border-radius:35% 65% 55% 45%;box-shadow:inset 0 0 0 9px #ffffff22,0 0 0 10px #ffffff44}[data-effect=vhs] .tile-motif{background:repeating-linear-gradient(0deg,transparent 0 4px,#ffffff70 5px 6px);text-align:left;font-size:13px}[data-effect=film] .tile-motif{background:radial-gradient(circle,#EDEEF0 1px,transparent 1.8px) 0 0/7px 9px,radial-gradient(circle,#ffffffaa 1px,transparent 2px) 3px 5px/11px 7px}.effect-drawer{height:0;overflow:hidden;transition:height .48s cubic-bezier(.22,.8,.25,1);border-radius:22px}.drawer-body{padding-top:14px}.drawer-content{background:linear-gradient(140deg,color-mix(in srgb,var(--glow) 35%,#080808),var(--drawer-color));border:1px solid #ffffff24;border-radius:22px;padding:22px;color:#EDEEF0}.drawer-content[hidden]{display:none}.drawer-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:17px;font-weight:550;margin-bottom:22px}.apply-toggle{font-size:12px;padding:7px 10px;background:#ffffff15;white-space:nowrap}.drawer-content .knobs{display:block;opacity:1;padding:0;grid-template-rows:none}.drawer-content .knobs-inner{overflow:visible}.drawer-content .knob{margin:0}.drawer-content .knob:first-child{padding:0;border:0}.drawer-content .knob label,.drawer-content .knob output{color:#EDEEF0}.drawer-content .knob input{accent-color:#EDEEF0}.drawer-content .knob:last-child input{margin-bottom:6px}.effect input[hidden]{display:none}@media(max-width:900px){main{padding:18px 20px;gap:24px;grid-template-columns:minmax(285px,43%) minmax(0,1fr)}header{left:47%;padding-right:20px;height:130px}.brand{font-size:52px}.red{font-size:13px;padding:8px}.workspace{padding-top:112px}.tile-pair{gap:10px}.tile-button{height:150px}.tile-name{font-size:18px}}@media(max-width:760px){body{height:auto}header{position:relative;left:auto;right:auto;height:94px;padding:16px 20px}.brand{font-size:54px}main{height:auto;display:flex;padding:0 14px 20px;gap:14px}.workspace{padding-top:0;height:60dvh;min-height:300px}aside{padding:0;overflow:visible}.section:first-child{max-width:none}.tile-button{height:clamp(140px,40vw,225px)}.tile-name{font-size:22px}.tile-motif{font-size:24px}.effect-row{margin-bottom:12px}.drawer-content{padding:20px}}@media(prefers-reduced-motion:reduce){.effect-drawer,.tile-motif,.tile-applied{transition:none!important}}
/* Compact three-column browser */
.tile-pair,.pair-wide-left,.pair-wide-right{grid-template-columns:1fr 1fr 1fr;gap:12px;transition:grid-template-columns .3s cubic-bezier(.22,.8,.25,1)}.tile-button{height:clamp(105px,10.5vw,150px);padding:12px 6px;transition:height .3s cubic-bezier(.22,.8,.25,1)}.tile-name{font-size:clamp(14px,1.2vw,19px);letter-spacing:-.35px;text-shadow:none;line-height:1.2}.tile-applied{font-size:10px;bottom:10px;padding:3px 7px}.tile-motif{display:none!important}.effect,.effect:last-child{border-radius:25px}.effect:hover{transform:none}.effect-row{transition:margin .3s cubic-bezier(.22,.8,.25,1)}.effect-row.hovering{margin-top:3px;margin-bottom:18px}.effect.hover-expanded .tile-button{height:clamp(111px,11vw,157px)}header .red,header .red:hover,header .red:focus-visible{color:#111;background:linear-gradient(150deg,#EDEEF0,#e7e7ee);border-color:#ffffff80;transition:filter .2s,transform .2s}header .red:hover{filter:brightness(1.08)}.toolbar #compare{color:#EDEEF0;background:radial-gradient(ellipse at 25% 120%,#8a7cff,transparent 65%),radial-gradient(ellipse at 85% 0,#82dcff,transparent 60%),linear-gradient(120deg,#3631b2,#6b53ce);border:1px solid #ffffff50;box-shadow:inset 0 1px 4px #ffffff60;transition:filter .2s,transform .2s}.toolbar #compare:hover{filter:brightness(1.13)}.toolbar #compare[aria-pressed=true]{background:linear-gradient(130deg,#c6f0ff,#d9c9ff);color:#18182d}.drawer-heading{font-size:16px}@media(max-width:900px){.tile-pair{gap:8px}.tile-button{height:112px}.effect.hover-expanded .tile-button{height:119px}.tile-name{font-size:14px}.effect,.effect:last-child{border-radius:20px}}@media(max-width:760px){.tile-button{height:clamp(105px,28vw,150px)}.effect.hover-expanded .tile-button{height:clamp(110px,29vw,155px)}.tile-name{font-size:clamp(13px,3.6vw,18px)}}@media(prefers-reduced-motion:reduce){.tile-pair,.effect-row,.tile-button{transition:none!important}}
/* Stable, asymmetric tiles and softly integrated metaphors */
.effect-row:nth-child(3n+1) .tile-pair{grid-template-columns:1.4fr 1fr .9fr}.effect-row:nth-child(3n+2) .tile-pair{grid-template-columns:.95fr 1.45fr .9fr}.effect-row:nth-child(3n) .tile-pair{grid-template-columns:.9fr 1fr 1.4fr}.tile-pair{transition:none;align-items:stretch;padding:3px}.effect-row,.effect-row.hovering{margin-top:0;margin-bottom:15px;transform:translateY(var(--shift-y,0px));transition:transform .36s cubic-bezier(.22,.8,.25,1)}.effect,.effect:hover,.effect.hover-expanded{transform:translateX(var(--shift-x,0px)) scale(var(--tile-scale,1));transform-origin:center;transition:transform .36s cubic-bezier(.22,.8,.25,1),border-color .3s,box-shadow .3s}.tile-button,.effect.hover-expanded .tile-button{height:clamp(105px,10.5vw,150px);transition:none}.tile-name{font-size:clamp(13px,1.12vw,19px);overflow-wrap:normal;text-shadow:none}.tile-motif{display:block!important;inset:13%;opacity:.13!important;mix-blend-mode:soft-light;filter:blur(1.3px);color:var(--g1);pointer-events:none;transform:none!important;mask-image:radial-gradient(ellipse,#000f08 10%,transparent 74%)}[data-effect=ascii] .tile-motif:before{content:'@ # % / 0 1 + @';font:600 25px/1.8 monospace}[data-effect=sort] .tile-motif{background:repeating-linear-gradient(0deg,transparent 0 9px,var(--g1) 10px 13px);transform:skewX(-20deg)!important}[data-effect=spray] .tile-motif,[data-effect=receipt] .tile-motif,[data-effect=cyano] .tile-motif,[data-effect=faded] .tile-motif{background:radial-gradient(circle,var(--g1) 1px,transparent 2px) 0 0/6px 7px}[data-effect=gameboy] .tile-motif{background:repeating-conic-gradient(var(--g1) 0 25%,transparent 0 50%) 0 0/20px 20px}[data-effect=thermal] .tile-motif{background:repeating-radial-gradient(ellipse,var(--g1) 0 10px,transparent 12px 24px)}[data-effect=glass] .tile-motif{background:repeating-linear-gradient(90deg,transparent 0 15px,var(--g1) 18px 22px)}[data-effect=signal] .tile-motif{background:repeating-linear-gradient(15deg,transparent 0 6px,var(--g1) 7px 9px)}[data-effect=streak] .tile-motif{background:repeating-linear-gradient(-10deg,transparent 0 16px,var(--g1) 17px 20px);filter:blur(3px)}header .red,header .red:hover,header .red:focus-visible{background:linear-gradient(120deg,#e9e1ff,#b7dfff);color:#171622;border:0;box-shadow:none;filter:none}.toolbar #compare,.toolbar #compare:hover{background:linear-gradient(115deg,#bbef65,#78dcb1);color:#102b20;border:0;box-shadow:none;filter:none}.toolbar #compare[aria-pressed=true]{background:linear-gradient(115deg,#d8c7ff,#abcfff);color:#252033}header .red:hover,.toolbar #compare:hover{opacity:.9}header .red,.toolbar #compare{transition:opacity .2s;transform:none;border-radius:9px}.tile-button:focus-visible{outline-offset:-4px}@media(max-width:900px){.tile-button,.effect.hover-expanded .tile-button{height:112px}}@media(max-width:760px){.tile-button,.effect.hover-expanded .tile-button{height:clamp(105px,28vw,150px)}.tile-name{font-size:clamp(12px,3.4vw,18px)}}@media(prefers-reduced-motion:reduce){.effect-row,.effect{transform:none!important;transition:none!important}}
/* Soft luminous gradients; scrolling remains available without visible chrome. */
aside{scrollbar-width:none;-ms-overflow-style:none}aside::-webkit-scrollbar{display:none;width:0;height:0}.effect,.effect.active,.effect.selected{background:radial-gradient(ellipse at 50% 105%,var(--g1) 0%,transparent 65%),radial-gradient(ellipse at 35% 8%,var(--g0) 5%,transparent 72%),radial-gradient(ellipse at 72% 55%,var(--g0) 0%,var(--g2) 70%);border-radius:30px;box-shadow:inset 0 0 5px 1px #ffffffb0,inset 0 0 18px #ffffff90,inset 0 -8px 32px #d8e5ff70;border:1px solid #ffffff65}.effect:hover{box-shadow:inset 0 0 6px 1px #ffffffb0,inset 0 0 20px #ffffff90,inset 0 -8px 32px #d8e5ff70}.effect.selected{border-color:#EDEEF0}.effect:after{background:linear-gradient(155deg,#ffffff25,transparent 38%,#ffffff12);box-shadow:inset 0 1px 7px #fff9,inset 0 -2px 12px #ffffff60}.tile-motif{opacity:.19!important;filter:blur(1px);mix-blend-mode:soft-light}.tile-name{font-weight:450}.effect-row:nth-child(3n+1) .tile-pair{grid-template-columns:1.55fr 1fr .85fr}.effect-row:nth-child(3n+2) .tile-pair{grid-template-columns:.9fr 1.55fr .95fr}.effect-row:nth-child(3n) .tile-pair{grid-template-columns:.85fr 1fr 1.55fr}
/* Diffused colour light inside the effect tiles. */
.tile-motif{opacity:.44!important;filter:blur(3px) drop-shadow(0 0 7px var(--g1)) drop-shadow(0 0 15px var(--g0));mix-blend-mode:screen;color:var(--g1);mask-image:radial-gradient(ellipse,#000f08 5%,#0009 40%,transparent 76%)}[data-effect=bleed] .tile-motif{filter:blur(17px);opacity:.6!important;background:radial-gradient(ellipse,#fff3 0,var(--g1) 25%,var(--g0) 58%,transparent 75%);box-shadow:none}[data-effect=ascii] .tile-motif{filter:blur(1px) drop-shadow(0 0 6px var(--g1)) drop-shadow(0 0 14px var(--g0))}[data-effect=streak] .tile-motif{filter:blur(5px) drop-shadow(0 0 12px var(--g1))}.tile-name{z-index:3;text-shadow:none}
/* Source preview and compact tile refinements */
.source-section{display:block;max-width:none!important}.source-section>span{margin-bottom:10px}.source-section>button{width:100%}.tile-button,.effect.hover-expanded .tile-button{height:clamp(96px,9.3vw,132px)}.workspace{grid-template-rows:56px minmax(0,1fr) 34px}.toolbar{align-items:flex-start;padding-top:0}.toolbar span{padding-top:8px}.effect,.effect.active,.effect.selected{background:radial-gradient(ellipse at 45% 0,var(--g2) 0%,transparent 52%),radial-gradient(ellipse at 58% 100%,var(--g1) 4%,transparent 60%),radial-gradient(ellipse at 15% 45%,var(--g0) 0%,transparent 58%),var(--g0);box-shadow:inset 0 0 3px #ffffff90,inset 0 0 14px #ffffff50,inset 0 0 30px var(--g0)}.effect:nth-child(2){background:radial-gradient(ellipse at 35% 60%,var(--g1) 2%,transparent 36%),radial-gradient(ellipse at 60% 35%,var(--g2) 8%,transparent 65%),var(--g0)}.effect:nth-child(3){background:radial-gradient(ellipse at 50% 70%,var(--g1) 5%,transparent 55%),radial-gradient(ellipse at 50% 10%,var(--g2) 12%,transparent 68%),var(--g0)}.effect:hover{box-shadow:inset 0 0 5px #ffffff90,inset 0 0 18px #ffffff50,inset 0 0 30px var(--g0)}.effect:after{background:linear-gradient(145deg,#ffffff0e,transparent 45%);box-shadow:inset 0 1px 5px #ffffff66,inset 0 -1px 7px #ffffff22}@media(max-width:900px){.tile-button,.effect.hover-expanded .tile-button{height:103px}}@media(max-width:760px){.tile-button,.effect.hover-expanded .tile-button{height:clamp(96px,25vw,124px)}}
/* Image zoom controls */
.workspace{grid-template-rows:56px minmax(0,1fr) 60px 28px}#dropzone{overflow:auto;display:block;scrollbar-width:thin}.zoom-stage{display:grid;place-items:center;min-width:100%;min-height:100%;width:max-content;height:max-content;padding:16px}#canvas{position:static;inset:auto;max-width:none;max-height:none;object-fit:contain;display:block;flex:none}.zoom-bar{align-self:center;justify-self:center;display:flex;align-items:center;gap:2px;border:1px solid #ffffff16;border-radius:12px;padding:4px;background:#202023;position:relative}.zoom-bar button{background:transparent;box-shadow:none;border:0;font-size:16px;padding:7px 13px}.zoom-bar button:hover{background:#ffffff12}.zoom-bar #zoomReadout{min-width:83px;text-align:center;font-size:14px;font-variant-numeric:tabular-nums;pointer-events:none}.zoom-bar select{position:absolute;left:43px;top:5px;width:94px;height:34px;opacity:0;cursor:pointer}.zoom-bar:has(select:focus-visible){outline:2px solid #eee;outline-offset:2px}.zoom-bar #zoomFit{border-left:1px solid #ffffff20;border-radius:0 7px 7px 0;font-size:14px}.zoom-bar select option{background:#222;color:#EDEEF0}@media(max-width:760px){.workspace{grid-template-rows:42px minmax(0,1fr) 56px 28px}}
header .brand{display:block;width:min(42vw,500px);height:126px;flex:none;font-size:0}header .brand img{display:block;width:100%;height:100%;object-fit:contain;object-position:left center}@media(max-width:760px){header .brand{width:min(62vw,310px);height:78px}}#dropzone.pannable,#dropzone.pannable canvas{cursor:grab;touch-action:none}#dropzone.panning,#dropzone.panning canvas{cursor:grabbing;user-select:none}#dropzone.pannable .zoom-stage{user-select:none}

/* Unified geometry and alignment */
:root{--ui-radius:16px;--ui-control-height:42px}button,.red,.toolbar button,.section>button,.apply-toggle,.zoom-bar,#dropzone,aside,.effect,.effect:last-child,.drawer-content{border-radius:var(--ui-radius)!important}button{min-height:var(--ui-control-height);display:inline-flex;align-items:center;justify-content:center;line-height:1.15;text-align:center}.section>button{padding-inline:14px}.source-section>span{line-height:1.2}.effect:after,.tile-button{border-radius:inherit}#effects .drawer-content{border-radius:28px!important}.drawer-heading{align-items:center;line-height:1.2}.zoom-bar{min-height:var(--ui-control-height)}.zoom-bar button{min-width:40px;min-height:34px}.zoom-bar #zoomFit{border-radius:calc(var(--ui-radius) - 5px)!important}footer{line-height:1.2}
@media(max-width:760px){header{gap:12px;padding:10px 16px}header .brand{width:min(55vw,220px);height:68px}header .red{min-height:40px;padding:8px 11px;font-size:12px;line-height:1.15}.section{padding:18px 16px}.source-section{display:block}.source-section>span{margin-bottom:10px}.source-section>button{width:100%;margin:0}.muted{line-height:1.45}.tile-button{padding:12px 10px}.tile-name{display:flex;align-items:center;justify-content:center;min-height:2.4em;line-height:1.2;text-align:center}.drawer-heading{gap:12px}.drawer-heading>span{min-width:0}.apply-toggle{flex-shrink:0;padding:8px 11px}.toolbar{align-items:center}.toolbar span{padding-top:0;line-height:1.2}.workspace{grid-template-rows:46px minmax(0,1fr) 56px 28px}.zoom-bar{max-width:100%}.zoom-bar button{padding-inline:10px}.zoom-bar #zoomReadout{min-width:72px}.zoom-bar select{left:38px;width:82px}footer{padding-inline:4px}}

/* Effect selection state */
#effects .effect,#effects .effect.selected{border-radius:28px!important}#effects .effect.active{background:#961B2B!important;background-image:none!important;border:1px solid #EDEEF0!important;box-shadow:none!important}#effects .effect.active:after{box-shadow:inset 0 0 0 1px #ffffff24!important;background:transparent!important}#effects .effect.active .tile-name,#effects .effect.active .tile-applied{color:#EDEEF0!important}#effects .effect.active .tile-applied{background:#EDEEF0;color:#961B2B!important}#effects .effect.active .tile-button{background:#961B2B!important;background-image:none!important;box-shadow:none!important}@media(min-width:761px){main{grid-template-columns:minmax(0,1fr) minmax(320px,40%)}.workspace{grid-column:1;grid-row:1}aside{grid-column:2;grid-row:1;padding-right:0;padding-left:10px}}#effects .effect,#effects .effect:hover,#effects .effect.selected{background:#EDEEF0!important;background-image:none!important;box-shadow:none!important}#effects .effect.active,#effects .effect.active:hover,#effects .effect.active.selected{background:#961B2B!important;background-image:none!important;border-color:#EDEEF0!important}#effects .effect:after{display:none!important}.apply-toggle[aria-pressed=true]{background:#961B2B!important;border-color:#EDEEF0!important;color:#EDEEF0!important}

/* Subtle interaction motion */
header .brand{animation:ui-enter .55s ease-out both}.workspace{animation:ui-enter .5s .08s ease-out both}aside{animation:ui-enter .5s .14s ease-out both}.effect{animation:tile-enter .38s ease-out both}.effect-row:nth-child(2) .effect{animation-delay:.04s}.effect-row:nth-child(3) .effect{animation-delay:.08s}.effect-row:nth-child(4) .effect{animation-delay:.12s}.effect-row:nth-child(5) .effect{animation-delay:.16s}.effect-row:nth-child(6) .effect{animation-delay:.2s}#effects .effect,#effects .effect:hover,#effects .effect.hover-expanded{transform:none!important}.tile-button{transition:transform .18s ease,opacity .18s ease}.tile-button:hover{transform:scale(1.035)}.tile-button:active{transform:scale(.99)}#upload,#export,.apply-toggle,#reset{transition:transform .18s ease,opacity .18s ease,background-color .18s ease}#upload:hover,#export:not(:disabled):hover,.apply-toggle:hover,#reset:hover{transform:translateY(-2px)}#upload:active,#export:not(:disabled):active,.apply-toggle:active,#reset:active{transform:scale(.98)}#dropzone.over{animation:drop-pulse .8s ease-in-out infinite alternate}canvas{transition:opacity .2s ease} @keyframes ui-enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes tile-enter{from{opacity:0}to{opacity:1}}@keyframes drop-pulse{to{box-shadow:inset 0 0 0 5px #ffffff35,0 0 24px #ffffff18}}@media(prefers-reduced-motion:reduce){header .brand,.workspace,aside,.effect,#dropzone.over{animation:none!important}.tile-button,#upload,#export,.apply-toggle,#reset,canvas{transition:none!important}}

/* Fine surface grain */
body:after{content:'';position:fixed;inset:0;z-index:1000;pointer-events:none;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");mix-blend-mode:soft-light}