2910 lines
76 KiB
HTML
2910 lines
76 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru" class="bg-background">
|
||
<head>
|
||
<style>
|
||
@font-face {
|
||
font-family: 'IBM Plex Sans';
|
||
font-style: normal;
|
||
font-display: swap;
|
||
font-weight: 400;
|
||
src: url(assets/fonts/ibm-plex-sans-cyrillic-ext-400-normal.woff2) format('woff2');
|
||
unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'IBM Plex Sans';
|
||
font-style: normal;
|
||
font-display: swap;
|
||
font-weight: 400;
|
||
src: url(assets/fonts/ibm-plex-sans-cyrillic-400-normal.woff2) format('woff2');
|
||
unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'IBM Plex Sans';
|
||
font-style: normal;
|
||
font-display: swap;
|
||
font-weight: 400;
|
||
src: url(assets/fonts/ibm-plex-sans-greek-400-normal.woff2) format('woff2');
|
||
unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'IBM Plex Sans';
|
||
font-style: normal;
|
||
font-display: swap;
|
||
font-weight: 400;
|
||
src: url(assets/fonts/ibm-plex-sans-vietnamese-400-normal.woff2) format('woff2');
|
||
unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'IBM Plex Sans';
|
||
font-style: normal;
|
||
font-display: swap;
|
||
font-weight: 400;
|
||
src: url(assets/fonts/ibm-plex-sans-latin-ext-400-normal.woff2) format('woff2');
|
||
unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'IBM Plex Sans';
|
||
font-style: normal;
|
||
font-display: swap;
|
||
font-weight: 400;
|
||
src: url(assets/fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2');
|
||
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
|
||
}
|
||
@font-face {
|
||
font-family: 'IBM Plex Sans';
|
||
font-style: normal;
|
||
font-display: swap;
|
||
font-weight: 500;
|
||
src: url(assets/fonts/ibm-plex-sans-cyrillic-ext-500-normal.woff2) format('woff2');
|
||
unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'IBM Plex Sans';
|
||
font-style: normal;
|
||
font-display: swap;
|
||
font-weight: 500;
|
||
src: url(assets/fonts/ibm-plex-sans-cyrillic-500-normal.woff2) format('woff2');
|
||
unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'IBM Plex Sans';
|
||
font-style: normal;
|
||
font-display: swap;
|
||
font-weight: 500;
|
||
src: url(assets/fonts/ibm-plex-sans-greek-500-normal.woff2) format('woff2');
|
||
unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'IBM Plex Sans';
|
||
font-style: normal;
|
||
font-display: swap;
|
||
font-weight: 500;
|
||
src: url(assets/fonts/ibm-plex-sans-vietnamese-500-normal.woff2) format('woff2');
|
||
unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'IBM Plex Sans';
|
||
font-style: normal;
|
||
font-display: swap;
|
||
font-weight: 500;
|
||
src: url(assets/fonts/ibm-plex-sans-latin-ext-500-normal.woff2) format('woff2');
|
||
unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'IBM Plex Sans';
|
||
font-style: normal;
|
||
font-display: swap;
|
||
font-weight: 500;
|
||
src: url(assets/fonts/ibm-plex-sans-latin-500-normal.woff2) format('woff2');
|
||
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
|
||
}
|
||
@font-face {
|
||
font-family: 'IBM Plex Sans';
|
||
font-style: normal;
|
||
font-display: swap;
|
||
font-weight: 600;
|
||
src: url(assets/fonts/ibm-plex-sans-cyrillic-ext-600-normal.woff2) format('woff2');
|
||
unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'IBM Plex Sans';
|
||
font-style: normal;
|
||
font-display: swap;
|
||
font-weight: 600;
|
||
src: url(assets/fonts/ibm-plex-sans-cyrillic-600-normal.woff2) format('woff2');
|
||
unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'IBM Plex Sans';
|
||
font-style: normal;
|
||
font-display: swap;
|
||
font-weight: 600;
|
||
src: url(assets/fonts/ibm-plex-sans-greek-600-normal.woff2) format('woff2');
|
||
unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'IBM Plex Sans';
|
||
font-style: normal;
|
||
font-display: swap;
|
||
font-weight: 600;
|
||
src: url(assets/fonts/ibm-plex-sans-vietnamese-600-normal.woff2) format('woff2');
|
||
unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'IBM Plex Sans';
|
||
font-style: normal;
|
||
font-display: swap;
|
||
font-weight: 600;
|
||
src: url(assets/fonts/ibm-plex-sans-latin-ext-600-normal.woff2) format('woff2');
|
||
unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'IBM Plex Sans';
|
||
font-style: normal;
|
||
font-display: swap;
|
||
font-weight: 600;
|
||
src: url(assets/fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2');
|
||
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
|
||
}
|
||
@font-face {
|
||
font-family: 'IBM Plex Sans';
|
||
font-style: normal;
|
||
font-display: swap;
|
||
font-weight: 700;
|
||
src: url(assets/fonts/ibm-plex-sans-cyrillic-ext-700-normal.woff2) format('woff2');
|
||
unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'IBM Plex Sans';
|
||
font-style: normal;
|
||
font-display: swap;
|
||
font-weight: 700;
|
||
src: url(assets/fonts/ibm-plex-sans-cyrillic-700-normal.woff2) format('woff2');
|
||
unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'IBM Plex Sans';
|
||
font-style: normal;
|
||
font-display: swap;
|
||
font-weight: 700;
|
||
src: url(assets/fonts/ibm-plex-sans-greek-700-normal.woff2) format('woff2');
|
||
unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'IBM Plex Sans';
|
||
font-style: normal;
|
||
font-display: swap;
|
||
font-weight: 700;
|
||
src: url(assets/fonts/ibm-plex-sans-vietnamese-700-normal.woff2) format('woff2');
|
||
unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'IBM Plex Sans';
|
||
font-style: normal;
|
||
font-display: swap;
|
||
font-weight: 700;
|
||
src: url(assets/fonts/ibm-plex-sans-latin-ext-700-normal.woff2) format('woff2');
|
||
unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'IBM Plex Sans';
|
||
font-style: normal;
|
||
font-display: swap;
|
||
font-weight: 700;
|
||
src: url(assets/fonts/ibm-plex-sans-latin-700-normal.woff2) format('woff2');
|
||
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
|
||
}
|
||
@font-face {
|
||
font-family: 'IBM Plex Mono';
|
||
font-style: normal;
|
||
font-display: swap;
|
||
font-weight: 400;
|
||
src: url(assets/fonts/ibm-plex-mono-cyrillic-ext-400-normal.woff2) format('woff2');
|
||
unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'IBM Plex Mono';
|
||
font-style: normal;
|
||
font-display: swap;
|
||
font-weight: 400;
|
||
src: url(assets/fonts/ibm-plex-mono-cyrillic-400-normal.woff2) format('woff2');
|
||
unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'IBM Plex Mono';
|
||
font-style: normal;
|
||
font-display: swap;
|
||
font-weight: 400;
|
||
src: url(assets/fonts/ibm-plex-mono-vietnamese-400-normal.woff2) format('woff2');
|
||
unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'IBM Plex Mono';
|
||
font-style: normal;
|
||
font-display: swap;
|
||
font-weight: 400;
|
||
src: url(assets/fonts/ibm-plex-mono-latin-ext-400-normal.woff2) format('woff2');
|
||
unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'IBM Plex Mono';
|
||
font-style: normal;
|
||
font-display: swap;
|
||
font-weight: 400;
|
||
src: url(assets/fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2');
|
||
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
|
||
}
|
||
@font-face {
|
||
font-family: 'IBM Plex Mono';
|
||
font-style: normal;
|
||
font-display: swap;
|
||
font-weight: 500;
|
||
src: url(assets/fonts/ibm-plex-mono-cyrillic-ext-500-normal.woff2) format('woff2');
|
||
unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'IBM Plex Mono';
|
||
font-style: normal;
|
||
font-display: swap;
|
||
font-weight: 500;
|
||
src: url(assets/fonts/ibm-plex-mono-cyrillic-500-normal.woff2) format('woff2');
|
||
unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'IBM Plex Mono';
|
||
font-style: normal;
|
||
font-display: swap;
|
||
font-weight: 500;
|
||
src: url(assets/fonts/ibm-plex-mono-vietnamese-500-normal.woff2) format('woff2');
|
||
unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'IBM Plex Mono';
|
||
font-style: normal;
|
||
font-display: swap;
|
||
font-weight: 500;
|
||
src: url(assets/fonts/ibm-plex-mono-latin-ext-500-normal.woff2) format('woff2');
|
||
unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'IBM Plex Mono';
|
||
font-style: normal;
|
||
font-display: swap;
|
||
font-weight: 500;
|
||
src: url(assets/fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2');
|
||
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
|
||
}
|
||
</style>
|
||
<meta charSet="utf-8"/>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||
<style>
|
||
@layer properties {
|
||
@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) {
|
||
*,:before,:after,::backdrop {
|
||
--tw-border-style:solid;
|
||
--tw-font-weight:initial;
|
||
--tw-shadow:0 0 #0000;
|
||
--tw-shadow-color:initial;
|
||
--tw-shadow-alpha:100%;
|
||
--tw-inset-shadow:0 0 #0000;
|
||
--tw-inset-shadow-color:initial;
|
||
--tw-inset-shadow-alpha:100%;
|
||
--tw-ring-color:initial;
|
||
--tw-ring-shadow:0 0 #0000;
|
||
--tw-inset-ring-color:initial;
|
||
--tw-inset-ring-shadow:0 0 #0000;
|
||
--tw-ring-inset:initial;
|
||
--tw-ring-offset-width:0px;
|
||
--tw-ring-offset-color:#fff;
|
||
--tw-ring-offset-shadow:0 0 #0000;
|
||
--tw-outline-style:solid;
|
||
--tw-blur:initial;
|
||
--tw-brightness:initial;
|
||
--tw-contrast:initial;
|
||
--tw-grayscale:initial;
|
||
--tw-hue-rotate:initial;
|
||
--tw-invert:initial;
|
||
--tw-opacity:initial;
|
||
--tw-saturate:initial;
|
||
--tw-sepia:initial;
|
||
--tw-drop-shadow:initial;
|
||
--tw-drop-shadow-color:initial;
|
||
--tw-drop-shadow-alpha:100%;
|
||
--tw-drop-shadow-size:initial;
|
||
--tw-translate-x:0;
|
||
--tw-translate-y:0;
|
||
--tw-translate-z:0;
|
||
--tw-animation-delay:0s;
|
||
--tw-animation-direction:normal;
|
||
--tw-animation-duration:initial;
|
||
--tw-animation-fill-mode:none;
|
||
--tw-animation-iteration-count:1;
|
||
--tw-enter-blur:0;
|
||
--tw-enter-opacity:1;
|
||
--tw-enter-rotate:0;
|
||
--tw-enter-scale:1;
|
||
--tw-enter-translate-x:0;
|
||
--tw-enter-translate-y:0;
|
||
--tw-exit-blur:0;
|
||
--tw-exit-opacity:1;
|
||
--tw-exit-rotate:0;
|
||
--tw-exit-scale:1;
|
||
--tw-exit-translate-x:0;
|
||
--tw-exit-translate-y:0
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
@layer theme {
|
||
:root,:host {
|
||
--font-sans:"IBM Plex Sans", sans-serif;
|
||
--font-mono:"IBM Plex Mono", monospace;
|
||
--spacing:.25rem;
|
||
--text-xs:.75rem;
|
||
--text-xs--line-height:calc(1 / .75);
|
||
--text-sm:.875rem;
|
||
--text-sm--line-height:calc(1.25 / .875);
|
||
--font-weight-medium:500;
|
||
--radius-md:.375rem;
|
||
--radius-lg:.5rem;
|
||
--default-transition-duration:.15s;
|
||
--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);
|
||
--default-font-family:"IBM Plex Sans", sans-serif;
|
||
--default-mono-font-family:"IBM Plex Mono", monospace
|
||
}
|
||
|
||
}
|
||
@layer base {
|
||
*,:after,:before,::backdrop {
|
||
box-sizing:border-box;
|
||
border:0 solid;
|
||
margin:0;
|
||
padding:0
|
||
}
|
||
::file-selector-button {
|
||
box-sizing:border-box;
|
||
border:0 solid;
|
||
margin:0;
|
||
padding:0
|
||
}
|
||
html,:host {
|
||
-webkit-text-size-adjust:100%;
|
||
tab-size:4;
|
||
line-height:1.5;
|
||
font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
|
||
font-feature-settings:var(--default-font-feature-settings,normal);
|
||
font-variation-settings:var(--default-font-variation-settings,normal);
|
||
-webkit-tap-highlight-color:transparent
|
||
}
|
||
hr {
|
||
height:0;
|
||
color:inherit;
|
||
border-top-width:1px
|
||
}
|
||
abbr:where([title]) {
|
||
-webkit-text-decoration:underline dotted;
|
||
text-decoration:underline dotted
|
||
}
|
||
h1,h2,h3,h4,h5,h6 {
|
||
font-size:inherit;
|
||
font-weight:inherit
|
||
}
|
||
a {
|
||
color:inherit;
|
||
-webkit-text-decoration:inherit;
|
||
-webkit-text-decoration:inherit;
|
||
-webkit-text-decoration:inherit;
|
||
-webkit-text-decoration:inherit;
|
||
text-decoration:inherit
|
||
}
|
||
b,strong {
|
||
font-weight:bolder
|
||
}
|
||
code,kbd,samp,pre {
|
||
font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
|
||
font-feature-settings:var(--default-mono-font-feature-settings,normal);
|
||
font-variation-settings:var(--default-mono-font-variation-settings,normal);
|
||
font-size:1em
|
||
}
|
||
small {
|
||
font-size:80%
|
||
}
|
||
sub,sup {
|
||
vertical-align:baseline;
|
||
font-size:75%;
|
||
line-height:0;
|
||
position:relative
|
||
}
|
||
sub {
|
||
bottom:-.25em
|
||
}
|
||
sup {
|
||
top:-.5em
|
||
}
|
||
table {
|
||
text-indent:0;
|
||
border-color:inherit;
|
||
border-collapse:collapse
|
||
}
|
||
:-moz-focusring:where(:not(iframe)) {
|
||
outline:auto
|
||
}
|
||
progress {
|
||
vertical-align:baseline
|
||
}
|
||
summary {
|
||
display:list-item
|
||
}
|
||
ol,ul,menu {
|
||
list-style:none
|
||
}
|
||
img,svg,video,canvas,audio,iframe,embed,object {
|
||
vertical-align:middle;
|
||
display:block
|
||
}
|
||
img,video {
|
||
max-width:100%;
|
||
height:auto
|
||
}
|
||
button,input,select,optgroup,textarea {
|
||
font:inherit;
|
||
font-feature-settings:inherit;
|
||
font-variation-settings:inherit;
|
||
letter-spacing:inherit;
|
||
color:inherit;
|
||
opacity:1;
|
||
background-color:#0000;
|
||
border-radius:0
|
||
}
|
||
::file-selector-button {
|
||
font:inherit;
|
||
font-feature-settings:inherit;
|
||
font-variation-settings:inherit;
|
||
letter-spacing:inherit;
|
||
color:inherit;
|
||
opacity:1;
|
||
background-color:#0000;
|
||
border-radius:0
|
||
}
|
||
:where(select:is([multiple],[size])) optgroup {
|
||
font-weight:bolder
|
||
}
|
||
:where(select:is([multiple],[size])) optgroup option {
|
||
padding-inline-start:20px
|
||
}
|
||
::file-selector-button {
|
||
margin-inline-end:4px
|
||
}
|
||
::placeholder {
|
||
opacity:1
|
||
}
|
||
@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) {
|
||
::placeholder {
|
||
color:currentColor
|
||
}
|
||
@supports (color:color-mix(in lab, red, red)) {
|
||
::placeholder {
|
||
color:color-mix(in oklab, currentcolor 50%, transparent)
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
textarea {
|
||
resize:vertical
|
||
}
|
||
::-webkit-search-decoration {
|
||
-webkit-appearance:none
|
||
}
|
||
::-webkit-date-and-time-value {
|
||
min-height:1lh;
|
||
text-align:inherit
|
||
}
|
||
::-webkit-datetime-edit {
|
||
display:inline-flex
|
||
}
|
||
::-webkit-datetime-edit-fields-wrapper {
|
||
padding:0
|
||
}
|
||
::-webkit-datetime-edit {
|
||
padding-block:0
|
||
}
|
||
::-webkit-datetime-edit-year-field {
|
||
padding-block:0
|
||
}
|
||
::-webkit-datetime-edit-month-field {
|
||
padding-block:0
|
||
}
|
||
::-webkit-datetime-edit-day-field {
|
||
padding-block:0
|
||
}
|
||
::-webkit-datetime-edit-hour-field {
|
||
padding-block:0
|
||
}
|
||
::-webkit-datetime-edit-minute-field {
|
||
padding-block:0
|
||
}
|
||
::-webkit-datetime-edit-second-field {
|
||
padding-block:0
|
||
}
|
||
::-webkit-datetime-edit-millisecond-field {
|
||
padding-block:0
|
||
}
|
||
::-webkit-datetime-edit-meridiem-field {
|
||
padding-block:0
|
||
}
|
||
::-webkit-calendar-picker-indicator {
|
||
line-height:1
|
||
}
|
||
:-moz-ui-invalid {
|
||
box-shadow:none
|
||
}
|
||
button,input:where([type=button],[type=reset],[type=submit]) {
|
||
appearance:button
|
||
}
|
||
::file-selector-button {
|
||
appearance:button
|
||
}
|
||
::-webkit-inner-spin-button {
|
||
height:auto
|
||
}
|
||
::-webkit-outer-spin-button {
|
||
height:auto
|
||
}
|
||
[hidden]:where(:not([hidden=until-found])) {
|
||
display:none!important
|
||
}
|
||
|
||
}
|
||
@layer components;
|
||
@layer utilities {
|
||
.inline-flex {
|
||
display:inline-flex
|
||
}
|
||
.size-6 {
|
||
width:calc(var(--spacing) * 6);
|
||
height:calc(var(--spacing) * 6)
|
||
}
|
||
.size-7 {
|
||
width:calc(var(--spacing) * 7);
|
||
height:calc(var(--spacing) * 7)
|
||
}
|
||
.size-8 {
|
||
width:calc(var(--spacing) * 8);
|
||
height:calc(var(--spacing) * 8)
|
||
}
|
||
.size-9 {
|
||
width:calc(var(--spacing) * 9);
|
||
height:calc(var(--spacing) * 9)
|
||
}
|
||
.h-6 {
|
||
height:calc(var(--spacing) * 6)
|
||
}
|
||
.h-7 {
|
||
height:calc(var(--spacing) * 7)
|
||
}
|
||
.h-8 {
|
||
height:calc(var(--spacing) * 8)
|
||
}
|
||
.h-9 {
|
||
height:calc(var(--spacing) * 9)
|
||
}
|
||
.shrink-0 {
|
||
flex-shrink:0
|
||
}
|
||
.items-center {
|
||
align-items:center
|
||
}
|
||
.justify-center {
|
||
justify-content:center
|
||
}
|
||
.gap-1 {
|
||
gap:var(--spacing)
|
||
}
|
||
.gap-1\.5 {
|
||
gap:calc(var(--spacing) * 1.5)
|
||
}
|
||
.rounded-\[min\(var\(--radius-md\)\,10px\)\] {
|
||
border-radius:min(var(--radius-md), 10px)
|
||
}
|
||
.rounded-\[min\(var\(--radius-md\)\,12px\)\] {
|
||
border-radius:min(var(--radius-md), 12px)
|
||
}
|
||
.rounded-lg {
|
||
border-radius:var(--radius-lg)
|
||
}
|
||
.border {
|
||
border-style:var(--tw-border-style);
|
||
border-width:1px
|
||
}
|
||
.border-border {
|
||
border-color:var(--line)
|
||
}
|
||
.border-transparent {
|
||
border-color:#0000
|
||
}
|
||
.bg-background {
|
||
background-color:var(--background)
|
||
}
|
||
.bg-clip-padding {
|
||
background-clip:padding-box
|
||
}
|
||
.px-2 {
|
||
padding-inline:calc(var(--spacing) * 2)
|
||
}
|
||
.px-2\.5 {
|
||
padding-inline:calc(var(--spacing) * 2.5)
|
||
}
|
||
.text-sm {
|
||
font-size:var(--text-sm);
|
||
line-height:var(--tw-leading,var(--text-sm--line-height))
|
||
}
|
||
.text-xs {
|
||
font-size:var(--text-xs);
|
||
line-height:var(--tw-leading,var(--text-xs--line-height))
|
||
}
|
||
.text-\[0\.8rem\] {
|
||
font-size:.8rem
|
||
}
|
||
.font-medium {
|
||
--tw-font-weight:var(--font-weight-medium);
|
||
font-weight:var(--font-weight-medium)
|
||
}
|
||
.whitespace-nowrap {
|
||
white-space:nowrap
|
||
}
|
||
.underline-offset-4 {
|
||
text-underline-offset:4px
|
||
}
|
||
.antialiased {
|
||
-webkit-font-smoothing:antialiased;
|
||
-moz-osx-font-smoothing:grayscale
|
||
}
|
||
.ring {
|
||
--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
|
||
box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
|
||
}
|
||
.outline {
|
||
outline-style:var(--tw-outline-style);
|
||
outline-width:1px
|
||
}
|
||
.blur {
|
||
--tw-blur:blur(8px);
|
||
filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)
|
||
}
|
||
.grayscale {
|
||
--tw-grayscale:grayscale(100%);
|
||
filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)
|
||
}
|
||
.transition {
|
||
transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;
|
||
transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));
|
||
transition-duration:var(--tw-duration,var(--default-transition-duration))
|
||
}
|
||
.transition-all {
|
||
transition-property:all;
|
||
transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));
|
||
transition-duration:var(--tw-duration,var(--default-transition-duration))
|
||
}
|
||
.outline-none {
|
||
--tw-outline-style:none;
|
||
outline-style:none
|
||
}
|
||
.select-none {
|
||
-webkit-user-select:none;
|
||
user-select:none
|
||
}
|
||
@media (hover:hover) {
|
||
.hover\:text-foreground:hover {
|
||
color:var(--foreground)
|
||
}
|
||
.hover\:underline:hover {
|
||
text-decoration-line:underline
|
||
}
|
||
|
||
}
|
||
.focus-visible\:ring-3:focus-visible {
|
||
--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
|
||
box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
|
||
}
|
||
.active\:not-aria-\[haspopup\]\:translate-y-px:active:not([aria-haspopup]) {
|
||
--tw-translate-y:1px;
|
||
translate:var(--tw-translate-x) var(--tw-translate-y)
|
||
}
|
||
.disabled\:pointer-events-none:disabled {
|
||
pointer-events:none
|
||
}
|
||
.disabled\:opacity-50:disabled {
|
||
opacity:.5
|
||
}
|
||
:where([data-slot=button-group]) .in-data-\[slot\=button-group\]\:rounded-lg {
|
||
border-radius:var(--radius-lg)
|
||
}
|
||
.has-data-\[icon\=inline-end\]\:pr-1\.5:has([data-icon=inline-end]) {
|
||
padding-right:calc(var(--spacing) * 1.5)
|
||
}
|
||
.has-data-\[icon\=inline-end\]\:pr-2:has([data-icon=inline-end]) {
|
||
padding-right:calc(var(--spacing) * 2)
|
||
}
|
||
.has-data-\[icon\=inline-start\]\:pl-1\.5:has([data-icon=inline-start]) {
|
||
padding-left:calc(var(--spacing) * 1.5)
|
||
}
|
||
.has-data-\[icon\=inline-start\]\:pl-2:has([data-icon=inline-start]) {
|
||
padding-left:calc(var(--spacing) * 2)
|
||
}
|
||
.aria-expanded\:text-foreground[aria-expanded=true] {
|
||
color:var(--foreground)
|
||
}
|
||
.aria-invalid\:ring-3[aria-invalid=true] {
|
||
--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
|
||
box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
|
||
}
|
||
.\[\&_svg\]\:pointer-events-none svg {
|
||
pointer-events:none
|
||
}
|
||
.\[\&_svg\]\:shrink-0 svg {
|
||
flex-shrink:0
|
||
}
|
||
.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-3 svg:not([class*=size-]) {
|
||
width:calc(var(--spacing) * 3);
|
||
height:calc(var(--spacing) * 3)
|
||
}
|
||
.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-3\.5 svg:not([class*=size-]) {
|
||
width:calc(var(--spacing) * 3.5);
|
||
height:calc(var(--spacing) * 3.5)
|
||
}
|
||
.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*=size-]) {
|
||
width:calc(var(--spacing) * 4);
|
||
height:calc(var(--spacing) * 4)
|
||
}
|
||
|
||
}
|
||
@property --tw-animation-delay {
|
||
syntax:"*";
|
||
inherits:false;
|
||
initial-value:0s
|
||
}
|
||
@property --tw-animation-direction {
|
||
syntax:"*";
|
||
inherits:false;
|
||
initial-value:normal
|
||
}
|
||
@property --tw-animation-duration {
|
||
syntax:"*";
|
||
inherits:false
|
||
}
|
||
@property --tw-animation-fill-mode {
|
||
syntax:"*";
|
||
inherits:false;
|
||
initial-value:none
|
||
}
|
||
@property --tw-animation-iteration-count {
|
||
syntax:"*";
|
||
inherits:false;
|
||
initial-value:1
|
||
}
|
||
@property --tw-enter-blur {
|
||
syntax:"*";
|
||
inherits:false;
|
||
initial-value:0
|
||
}
|
||
@property --tw-enter-opacity {
|
||
syntax:"*";
|
||
inherits:false;
|
||
initial-value:1
|
||
}
|
||
@property --tw-enter-rotate {
|
||
syntax:"*";
|
||
inherits:false;
|
||
initial-value:0
|
||
}
|
||
@property --tw-enter-scale {
|
||
syntax:"*";
|
||
inherits:false;
|
||
initial-value:1
|
||
}
|
||
@property --tw-enter-translate-x {
|
||
syntax:"*";
|
||
inherits:false;
|
||
initial-value:0
|
||
}
|
||
@property --tw-enter-translate-y {
|
||
syntax:"*";
|
||
inherits:false;
|
||
initial-value:0
|
||
}
|
||
@property --tw-exit-blur {
|
||
syntax:"*";
|
||
inherits:false;
|
||
initial-value:0
|
||
}
|
||
@property --tw-exit-opacity {
|
||
syntax:"*";
|
||
inherits:false;
|
||
initial-value:1
|
||
}
|
||
@property --tw-exit-rotate {
|
||
syntax:"*";
|
||
inherits:false;
|
||
initial-value:0
|
||
}
|
||
@property --tw-exit-scale {
|
||
syntax:"*";
|
||
inherits:false;
|
||
initial-value:1
|
||
}
|
||
@property --tw-exit-translate-x {
|
||
syntax:"*";
|
||
inherits:false;
|
||
initial-value:0
|
||
}
|
||
@property --tw-exit-translate-y {
|
||
syntax:"*";
|
||
inherits:false;
|
||
initial-value:0
|
||
}
|
||
:root {
|
||
--lightningcss-light:initial;
|
||
--lightningcss-dark: ;
|
||
color-scheme:light;
|
||
--background:#eef1f4;
|
||
--foreground:#17212b;
|
||
--panel:#f8fafb;
|
||
--line:#cbd3da;
|
||
--muted:#6d7883;
|
||
--blue:#1769d2;
|
||
--cyan:#00a8c7;
|
||
--amber:#bd7411;
|
||
--radius:4px
|
||
}
|
||
* {
|
||
box-sizing:border-box;
|
||
border-color:var(--line)
|
||
}
|
||
html {
|
||
background:var(--background)
|
||
}
|
||
body {
|
||
background:var(--background);
|
||
color:var(--foreground);
|
||
font-family:var(--font-sans);
|
||
margin:0
|
||
}
|
||
button,input {
|
||
font:inherit
|
||
}
|
||
button {
|
||
cursor:pointer
|
||
}
|
||
.app-shell {
|
||
background-color:var(--background);
|
||
background-image:linear-gradient(#dce2e7 1px,#0000 1px),linear-gradient(90deg,#dce2e7 1px,#0000 1px);
|
||
background-size:32px 32px;
|
||
min-height:100vh
|
||
}
|
||
.dark-mode {
|
||
--background:#11171d;
|
||
--foreground:#e8eef2;
|
||
--panel:#182129;
|
||
--line:#33414c;
|
||
--muted:#91a0ac;
|
||
--blue:#54a2ff;
|
||
background-image:linear-gradient(#1e2a3447 1px,#0000 1px),linear-gradient(90deg,#1e2a3447 1px,#0000 1px)
|
||
}
|
||
.topbar,.brand,.top-actions,.language,.status,.title-row,.pipeline-head,.step-heading,.step-tools,.pipeline-footer,.preview-top,.footer {
|
||
align-items:center;
|
||
display:flex
|
||
}
|
||
.topbar {
|
||
border-bottom:1px solid var(--line);
|
||
background:var(--panel);
|
||
justify-content:space-between;
|
||
height:64px;
|
||
padding:0 clamp(20px,4vw,64px)
|
||
}
|
||
.topbar>.brand {
|
||
color:var(--foreground);
|
||
text-decoration:none
|
||
}
|
||
.top-nav {
|
||
align-items:center;
|
||
gap:22px;
|
||
margin-left:auto;
|
||
margin-right:28px;
|
||
display:flex
|
||
}
|
||
.top-nav a {
|
||
color:var(--muted);
|
||
font:10px var(--font-mono);
|
||
white-space:nowrap;
|
||
text-decoration:none
|
||
}
|
||
.top-nav a:hover,.top-nav a.active {
|
||
color:var(--blue)
|
||
}
|
||
.brand {
|
||
font:600 14px var(--font-mono);
|
||
gap:10px
|
||
}
|
||
.brand-mark {
|
||
background:var(--blue);
|
||
color:#fff;
|
||
place-items:center;
|
||
width:30px;
|
||
height:30px;
|
||
font-size:11px;
|
||
display:grid
|
||
}
|
||
.version,.label,.step-type,.eyebrow {
|
||
font:10px var(--font-mono);
|
||
letter-spacing:.12em;
|
||
color:var(--muted)
|
||
}
|
||
.version,.eyebrow {
|
||
color:var(--blue)
|
||
}
|
||
.top-actions {
|
||
gap:16px
|
||
}
|
||
.status {
|
||
color:var(--muted);
|
||
font:10px var(--font-mono);
|
||
letter-spacing:.08em;
|
||
gap:7px
|
||
}
|
||
.status i,.auto-note i {
|
||
background:#25a96a;
|
||
border-radius:50%;
|
||
width:6px;
|
||
height:6px
|
||
}
|
||
.icon-btn {
|
||
color:var(--muted);
|
||
background:0 0;
|
||
border:0;
|
||
place-items:center;
|
||
padding:6px;
|
||
display:grid
|
||
}
|
||
.language {
|
||
border:1px solid var(--line)
|
||
}
|
||
.language button {
|
||
color:var(--muted);
|
||
font:10px var(--font-mono);
|
||
background:0 0;
|
||
border:0;
|
||
padding:6px 9px
|
||
}
|
||
.language .active {
|
||
background:var(--foreground);
|
||
color:var(--background)
|
||
}
|
||
.page-grid {
|
||
grid-template-columns:minmax(0,1.05fr) minmax(520px,.95fr);
|
||
align-items:start;
|
||
gap:56px;
|
||
width:100%;
|
||
max-width:none;
|
||
margin:auto;
|
||
padding:60px clamp(24px,4vw,72px) 72px;
|
||
display:grid
|
||
}
|
||
.preview-panel {
|
||
min-width:0;
|
||
margin-top:0;
|
||
position:sticky;
|
||
top:24px
|
||
}
|
||
.preview-meta {
|
||
gap:24px;
|
||
display:flex
|
||
}
|
||
.preview-meta div {
|
||
gap:5px;
|
||
display:grid
|
||
}
|
||
.preview-meta span {
|
||
font:10px var(--font-mono);
|
||
color:var(--muted)
|
||
}
|
||
.preview-meta b {
|
||
font:600 11px var(--font-mono)
|
||
}
|
||
.workspace,.preview-panel {
|
||
min-width:0
|
||
}
|
||
.preview-stack {
|
||
grid-template-columns:repeat(2,minmax(0,1fr));
|
||
gap:18px;
|
||
width:100%;
|
||
min-width:0;
|
||
display:grid
|
||
}
|
||
.preview-tile {
|
||
width:100%;
|
||
min-width:0;
|
||
overflow:hidden
|
||
}
|
||
.history-toggle {
|
||
border:1px solid var(--line);
|
||
width:100%;
|
||
color:var(--muted);
|
||
font:10px var(--font-mono);
|
||
letter-spacing:.04em;
|
||
background:0 0;
|
||
justify-content:center;
|
||
align-items:center;
|
||
gap:8px;
|
||
margin-top:18px;
|
||
padding:11px 14px;
|
||
display:flex
|
||
}
|
||
.history-toggle:hover {
|
||
color:var(--foreground);
|
||
background:var(--panel)
|
||
}
|
||
.top-toggle {
|
||
width:auto;
|
||
margin:0;
|
||
padding:8px 10px
|
||
}
|
||
.history-toggle .rotated {
|
||
transform:rotate(180deg)
|
||
}
|
||
.tile-canvas {
|
||
width:100%;
|
||
min-width:0;
|
||
min-height:clamp(300px,22vw,430px);
|
||
overflow:hidden
|
||
}
|
||
.image-preview {
|
||
min-width:0;
|
||
max-width:100%;
|
||
overflow:hidden
|
||
}
|
||
.eyebrow {
|
||
margin-bottom:18px
|
||
}
|
||
.eyebrow span {
|
||
color:var(--muted);
|
||
margin:0 7px
|
||
}
|
||
.title-row {
|
||
justify-content:space-between;
|
||
align-items:flex-end;
|
||
gap:30px;
|
||
margin-bottom:56px
|
||
}
|
||
h1 {
|
||
letter-spacing:-.06em;
|
||
max-width:700px;
|
||
margin:0 0 16px;
|
||
font-size:clamp(36px,4vw,64px);
|
||
font-weight:650;
|
||
line-height:1
|
||
}
|
||
.lede {
|
||
color:var(--muted);
|
||
max-width:550px;
|
||
margin:0;
|
||
line-height:1.6
|
||
}
|
||
.file-chip {
|
||
white-space:nowrap;
|
||
border:1px solid var(--line);
|
||
background:var(--panel);
|
||
font:11px var(--font-mono);
|
||
color:var(--muted);
|
||
align-items:center;
|
||
gap:8px;
|
||
padding:10px 12px;
|
||
display:flex
|
||
}
|
||
.file-chip b {
|
||
color:var(--blue);
|
||
font-weight:500
|
||
}
|
||
.pipeline-head {
|
||
border-bottom:1px solid var(--line);
|
||
justify-content:space-between;
|
||
padding-bottom:12px
|
||
}
|
||
.pipeline-head strong,.preview-top strong {
|
||
font:600 14px var(--font-mono);
|
||
margin-top:5px;
|
||
display:block
|
||
}
|
||
.pipeline-head em {
|
||
color:#25a96a;
|
||
font-size:10px;
|
||
font-style:normal
|
||
}
|
||
.add-btn,.reset-btn {
|
||
color:var(--blue);
|
||
background:0 0;
|
||
border:0;
|
||
align-items:center;
|
||
gap:7px;
|
||
font-size:12px;
|
||
display:flex
|
||
}
|
||
.steps-list {
|
||
gap:10px;
|
||
padding-top:14px;
|
||
display:grid
|
||
}
|
||
.step-card {
|
||
border:1px solid var(--line);
|
||
background:var(--panel);
|
||
grid-template-columns:46px 20px 1fr;
|
||
min-height:138px;
|
||
display:grid
|
||
}
|
||
.step-index {
|
||
font:11px var(--font-mono);
|
||
color:var(--blue);
|
||
padding:17px 0 0 15px
|
||
}
|
||
.drag {
|
||
color:var(--line);
|
||
margin-top:17px
|
||
}
|
||
.step-body {
|
||
padding:15px 18px 18px
|
||
}
|
||
.step-heading {
|
||
justify-content:space-between;
|
||
gap:15px
|
||
}
|
||
.step-heading h2 {
|
||
font:600 15px var(--font-mono);
|
||
margin:5px 0 18px
|
||
}
|
||
.step-tools {
|
||
gap:13px
|
||
}
|
||
.step-tools button {
|
||
color:var(--muted);
|
||
background:0 0;
|
||
border:0
|
||
}
|
||
.check {
|
||
color:#238354;
|
||
font:10px var(--font-mono);
|
||
align-items:center;
|
||
gap:4px;
|
||
display:flex
|
||
}
|
||
.controls {
|
||
grid-template-columns:1.1fr 1fr 1.2fr;
|
||
gap:16px;
|
||
display:grid
|
||
}
|
||
.controls.compact {
|
||
grid-template-columns:1fr 1fr
|
||
}
|
||
.control-block label {
|
||
color:var(--muted);
|
||
font:10px var(--font-mono);
|
||
letter-spacing:.08em;
|
||
justify-content:space-between;
|
||
margin-bottom:8px;
|
||
display:flex
|
||
}
|
||
.control-block output {
|
||
color:var(--foreground)
|
||
}
|
||
.color-field {
|
||
border:1px solid var(--line);
|
||
align-items:center;
|
||
gap:8px;
|
||
height:32px;
|
||
padding:0 8px;
|
||
display:flex
|
||
}
|
||
.swatch {
|
||
border:1px solid var(--line);
|
||
width:14px;
|
||
height:14px
|
||
}
|
||
.swatch.dark {
|
||
background:#16202b
|
||
}
|
||
.color-field input {
|
||
min-width:0;
|
||
color:var(--foreground);
|
||
font:11px var(--font-mono);
|
||
background:0 0;
|
||
border:0;
|
||
outline:0;
|
||
flex:1
|
||
}
|
||
.control-block input[type=range] {
|
||
width:100%;
|
||
accent-color:var(--blue)
|
||
}
|
||
.segmented {
|
||
border:1px solid var(--line);
|
||
height:32px;
|
||
display:flex
|
||
}
|
||
.segmented button {
|
||
border:0;
|
||
border-right:1px solid var(--line);
|
||
color:var(--muted);
|
||
font:10px var(--font-mono);
|
||
background:0 0;
|
||
flex:1
|
||
}
|
||
.segmented .selected {
|
||
background:var(--blue);
|
||
color:#fff
|
||
}
|
||
.transform-note,.auto-note {
|
||
color:var(--muted);
|
||
font:11px var(--font-mono);
|
||
align-items:center;
|
||
gap:8px;
|
||
display:flex
|
||
}
|
||
.pipeline-footer {
|
||
justify-content:space-between;
|
||
padding-top:18px
|
||
}
|
||
.auto-note {
|
||
color:var(--muted)
|
||
}
|
||
.auto-note i {
|
||
display:inline-block
|
||
}
|
||
.preview-panel {
|
||
border:1px solid var(--line);
|
||
background:var(--panel);
|
||
align-self:start;
|
||
padding:18px;
|
||
position:sticky;
|
||
top:24px
|
||
}
|
||
.preview-top {
|
||
border-bottom:1px solid var(--line);
|
||
justify-content:space-between;
|
||
padding-bottom:15px
|
||
}
|
||
.preview-stack {
|
||
grid-template-columns:1fr 1fr;
|
||
gap:12px;
|
||
padding:16px 0;
|
||
display:grid
|
||
}
|
||
.preview-tile {
|
||
border:1px solid var(--line);
|
||
background:var(--background)
|
||
}
|
||
.preview-tile.active {
|
||
border-color:var(--blue)
|
||
}
|
||
.tile-canvas {
|
||
aspect-ratio:1.35;
|
||
background-color:#e4e8eb;
|
||
background-image:linear-gradient(45deg,#d2d8dc 25%,#0000 25%),linear-gradient(-45deg,#d2d8dc 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#d2d8dc 75%),linear-gradient(-45deg,#0000 75%,#d2d8dc 75%);
|
||
background-position:0 0,0 7px,7px -7px,-7px 0;
|
||
background-size:14px 14px;
|
||
place-items:center;
|
||
padding:16px;
|
||
display:grid
|
||
}
|
||
.image-preview {
|
||
aspect-ratio:1.5;
|
||
color:#16202b;
|
||
width:80%;
|
||
font:600 10px var(--font-mono);
|
||
flex-direction:column;
|
||
justify-content:center;
|
||
align-items:center;
|
||
gap:5px;
|
||
display:flex
|
||
}
|
||
.sample-icon {
|
||
border:1px solid;
|
||
padding:3px 5px;
|
||
font-size:9px
|
||
}
|
||
.tile-label {
|
||
border-top:1px solid var(--line);
|
||
font:9px var(--font-mono);
|
||
color:var(--blue);
|
||
justify-content:space-between;
|
||
gap:8px;
|
||
padding:8px;
|
||
display:flex
|
||
}
|
||
.tile-label b {
|
||
color:var(--muted);
|
||
text-align:right;
|
||
font-weight:400
|
||
}
|
||
.preview-meta {
|
||
border-top:1px solid var(--line);
|
||
grid-template-columns:repeat(3,1fr);
|
||
gap:8px;
|
||
padding-top:14px;
|
||
display:grid
|
||
}
|
||
.preview-meta span {
|
||
color:var(--muted);
|
||
font:9px var(--font-mono);
|
||
display:block
|
||
}
|
||
.preview-meta b {
|
||
font:11px var(--font-mono);
|
||
margin-top:5px;
|
||
display:block
|
||
}
|
||
.download-btn {
|
||
background:var(--blue);
|
||
color:#fff;
|
||
width:100%;
|
||
height:42px;
|
||
font:11px var(--font-mono);
|
||
border:0;
|
||
justify-content:center;
|
||
align-items:center;
|
||
gap:9px;
|
||
margin-top:18px;
|
||
display:flex
|
||
}
|
||
.preview-note {
|
||
color:var(--muted);
|
||
margin:12px 0 0;
|
||
font-size:11px;
|
||
line-height:1.5
|
||
}
|
||
.footer {
|
||
border-top:1px solid var(--line);
|
||
color:var(--muted);
|
||
font:10px var(--font-mono);
|
||
justify-content:space-between;
|
||
padding:16px clamp(20px,4vw,72px)
|
||
}
|
||
.footer span {
|
||
align-items:center;
|
||
gap:7px;
|
||
display:flex
|
||
}
|
||
.footer b {
|
||
color:var(--blue);
|
||
font-weight:400
|
||
}
|
||
@media (max-width:1200px) {
|
||
.page-grid {
|
||
grid-template-columns:minmax(0,1fr) minmax(420px,.9fr);
|
||
gap:32px
|
||
}
|
||
|
||
}
|
||
.dark-mode .app-shell {
|
||
background-image:linear-gradient(#1e2a3447 1px,#0000 1px),linear-gradient(90deg,#1e2a3447 1px,#0000 1px)
|
||
}
|
||
.dark-mode .tile-canvas {
|
||
background-color:#202a31;
|
||
background-image:linear-gradient(45deg,#29343c 25%,#0000 25%),linear-gradient(-45deg,#29343c 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#29343c 75%),linear-gradient(-45deg,#0000 75%,#29343c 75%)
|
||
}
|
||
.dark-mode .image-preview {
|
||
color:#16202b
|
||
}
|
||
@media (max-width:800px) {
|
||
.topbar {
|
||
flex-wrap:wrap;
|
||
gap:12px;
|
||
height:auto;
|
||
min-height:64px;
|
||
padding:12px 16px
|
||
}
|
||
.top-nav {
|
||
order:3;
|
||
gap:12px;
|
||
width:100%;
|
||
margin:0;
|
||
padding-bottom:2px;
|
||
overflow:auto
|
||
}
|
||
.top-nav a {
|
||
font-size:9px
|
||
}
|
||
.status {
|
||
display:none
|
||
}
|
||
.page-grid {
|
||
padding:36px 16px 48px;
|
||
display:block
|
||
}
|
||
.title-row {
|
||
margin-bottom:40px;
|
||
display:block
|
||
}
|
||
.file-chip {
|
||
width:max-content;
|
||
margin-top:22px
|
||
}
|
||
.controls,.controls.compact {
|
||
grid-template-columns:1fr
|
||
}
|
||
.preview-panel {
|
||
margin-top:36px;
|
||
position:static
|
||
}
|
||
.footer {
|
||
flex-wrap:wrap;
|
||
gap:12px;
|
||
padding:0 16px 20px
|
||
}
|
||
.footer span:last-child {
|
||
display:none
|
||
}
|
||
|
||
}
|
||
@media (max-width:1100px) {
|
||
.preview-stack {
|
||
grid-template-columns:repeat(3,minmax(220px,1fr))
|
||
}
|
||
|
||
}
|
||
.preview-actions {
|
||
flex-wrap:wrap;
|
||
justify-content:flex-end
|
||
}
|
||
.download-btn {
|
||
white-space:nowrap
|
||
}
|
||
@media (max-width:800px) {
|
||
.preview-top {
|
||
flex-direction:column;
|
||
align-items:flex-start;
|
||
gap:18px
|
||
}
|
||
.preview-actions {
|
||
justify-content:space-between;
|
||
width:100%
|
||
}
|
||
.preview-meta {
|
||
gap:14px
|
||
}
|
||
.preview-stack {
|
||
grid-template-columns:repeat(2,minmax(0,1fr))
|
||
}
|
||
.tile-canvas {
|
||
min-height:260px
|
||
}
|
||
|
||
}
|
||
@media (max-width:480px) {
|
||
.preview-stack {
|
||
grid-template-columns:1fr
|
||
}
|
||
.preview-meta {
|
||
justify-content:space-between;
|
||
width:100%
|
||
}
|
||
.title-row h1 {
|
||
font-size:40px
|
||
}
|
||
.pipeline-footer {
|
||
flex-direction:column;
|
||
align-items:flex-start;
|
||
gap:12px
|
||
}
|
||
|
||
}
|
||
.tool-page {
|
||
width:100%;
|
||
padding:60px clamp(24px,4vw,72px) 72px
|
||
}
|
||
.tool-title {
|
||
justify-content:space-between;
|
||
align-items:end;
|
||
gap:32px;
|
||
margin-bottom:48px;
|
||
display:flex
|
||
}
|
||
.tool-title h1 {
|
||
margin-bottom:14px
|
||
}
|
||
.tool-status {
|
||
color:#25a96a;
|
||
font:10px var(--font-mono);
|
||
white-space:nowrap;
|
||
align-items:center;
|
||
gap:8px;
|
||
display:flex
|
||
}
|
||
.tool-status i,.auto-note i {
|
||
background:#25a96a;
|
||
border-radius:50%;
|
||
width:6px;
|
||
height:6px
|
||
}
|
||
.gradient-layout {
|
||
grid-template-columns:minmax(360px,.7fr) minmax(0,1.3fr);
|
||
align-items:start;
|
||
gap:56px;
|
||
display:grid
|
||
}
|
||
.settings-panel,.gradient-preview {
|
||
background:var(--panel);
|
||
border:1px solid var(--line)
|
||
}
|
||
.panel-heading,.preview-toolbar {
|
||
border-bottom:1px solid var(--line);
|
||
justify-content:space-between;
|
||
align-items:center;
|
||
padding:18px 20px;
|
||
display:flex
|
||
}
|
||
.panel-heading strong,.preview-toolbar strong {
|
||
font:600 14px var(--font-mono);
|
||
margin-top:5px;
|
||
display:block
|
||
}
|
||
.setting-group {
|
||
border-bottom:1px solid var(--line);
|
||
padding:22px 20px
|
||
}
|
||
.setting-group label {
|
||
font:10px var(--font-mono);
|
||
letter-spacing:.1em;
|
||
color:var(--muted);
|
||
justify-content:space-between;
|
||
margin-bottom:12px;
|
||
display:flex
|
||
}
|
||
.setting-group output {
|
||
color:var(--blue)
|
||
}
|
||
.color-row {
|
||
align-items:center;
|
||
gap:10px;
|
||
display:flex
|
||
}
|
||
.color-row .color-field {
|
||
flex:1
|
||
}
|
||
.stop-arrow {
|
||
color:var(--muted)
|
||
}
|
||
.gradient-bar {
|
||
border:1px solid var(--line);
|
||
height:14px;
|
||
margin-top:14px
|
||
}
|
||
.direction-grid {
|
||
grid-template-columns:repeat(4,1fr);
|
||
gap:6px;
|
||
margin-top:14px;
|
||
display:grid
|
||
}
|
||
.direction-grid button,.secondary-btn {
|
||
border:1px solid var(--line);
|
||
color:var(--muted);
|
||
font:10px var(--font-mono);
|
||
background:0 0;
|
||
padding:8px 6px
|
||
}
|
||
.direction-grid button.selected,.secondary-btn:hover {
|
||
background:var(--foreground);
|
||
color:var(--background)
|
||
}
|
||
.wide {
|
||
width:100%
|
||
}
|
||
.settings-footer {
|
||
justify-content:space-between;
|
||
align-items:center;
|
||
padding:16px 20px;
|
||
display:flex
|
||
}
|
||
.large-canvas {
|
||
background-color:#202a31;
|
||
background-image:linear-gradient(45deg,#29343c 25%,#0000 25%),linear-gradient(-45deg,#29343c 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#29343c 75%),linear-gradient(-45deg,#0000 75%,#29343c 75%);
|
||
background-position:0 0,0 14px,14px -14px,-14px 0;
|
||
background-size:28px 28px;
|
||
padding:24px
|
||
}
|
||
.gradient-art {
|
||
color:#fff;
|
||
min-height:clamp(420px,42vw,680px);
|
||
font:12px var(--font-mono);
|
||
place-content:center;
|
||
justify-items:center;
|
||
display:grid
|
||
}
|
||
.art-mark {
|
||
border:1px solid #ffffffa6;
|
||
place-items:center;
|
||
width:70px;
|
||
height:70px;
|
||
margin-bottom:12px;
|
||
font-size:16px;
|
||
display:grid
|
||
}
|
||
.code-block {
|
||
padding:16px 20px
|
||
}
|
||
.code-block>div {
|
||
justify-content:space-between;
|
||
align-items:center;
|
||
display:flex
|
||
}
|
||
.code-block pre {
|
||
background:var(--background);
|
||
color:var(--blue);
|
||
font:12px/1.6 var(--font-mono);
|
||
white-space:pre-wrap;
|
||
margin:12px 0 0;
|
||
padding:14px
|
||
}
|
||
.preview-actions {
|
||
align-items:center;
|
||
gap:10px;
|
||
display:flex
|
||
}
|
||
.secondary-btn {
|
||
align-items:center;
|
||
gap:8px;
|
||
display:flex
|
||
}
|
||
.dark-mode .large-canvas {
|
||
background-color:#202a31
|
||
}
|
||
.remover-layout {
|
||
grid-template-columns:minmax(360px,.62fr) minmax(0,1.38fr);
|
||
align-items:start;
|
||
gap:56px;
|
||
display:grid
|
||
}
|
||
.remover-preview {
|
||
background:var(--panel);
|
||
border:1px solid var(--line);
|
||
min-width:0
|
||
}
|
||
.comparison-grid {
|
||
grid-template-columns:repeat(2,minmax(0,1fr));
|
||
gap:18px;
|
||
padding:20px;
|
||
display:grid
|
||
}
|
||
.image-card {
|
||
min-width:0
|
||
}
|
||
.image-label {
|
||
font:10px var(--font-mono);
|
||
color:var(--muted);
|
||
justify-content:space-between;
|
||
margin-bottom:10px;
|
||
display:flex
|
||
}
|
||
.image-label span {
|
||
color:var(--blue)
|
||
}
|
||
.image-label b {
|
||
font-weight:400
|
||
}
|
||
.remover-canvas {
|
||
border:1px solid var(--line);
|
||
place-items:center;
|
||
min-height:clamp(360px,30vw,560px);
|
||
display:grid;
|
||
position:relative;
|
||
overflow:hidden
|
||
}
|
||
.source-canvas {
|
||
background:#e8eef2
|
||
}
|
||
.subject {
|
||
color:#ffffffd9;
|
||
width:74%;
|
||
height:68%;
|
||
font:600 14px var(--font-mono);
|
||
text-shadow:0 1px 2px #17212b;
|
||
place-items:center;
|
||
transition:all .2s;
|
||
display:grid
|
||
}
|
||
.subject-source {
|
||
transform:rotate(-3deg)
|
||
}
|
||
.canvas-size {
|
||
font:9px var(--font-mono);
|
||
color:var(--muted);
|
||
position:absolute;
|
||
bottom:9px;
|
||
right:10px
|
||
}
|
||
.result-meta {
|
||
border-top:1px solid var(--line);
|
||
font:10px var(--font-mono);
|
||
color:var(--muted);
|
||
gap:24px;
|
||
padding:16px 20px;
|
||
display:flex
|
||
}
|
||
.result-meta b {
|
||
color:var(--foreground);
|
||
margin-left:6px;
|
||
font-weight:600
|
||
}
|
||
.processed {
|
||
color:#25a96a;
|
||
font:10px var(--font-mono);
|
||
align-items:center;
|
||
gap:5px;
|
||
display:flex
|
||
}
|
||
.color-reference,.range-hints {
|
||
color:var(--muted);
|
||
font:10px var(--font-mono);
|
||
justify-content:space-between;
|
||
margin-top:10px;
|
||
display:flex
|
||
}
|
||
.color-reference {
|
||
justify-content:flex-start;
|
||
gap:8px
|
||
}
|
||
.color-reference span {
|
||
border:1px solid var(--line);
|
||
width:9px;
|
||
height:9px
|
||
}
|
||
.native-color {
|
||
width:30px;
|
||
border:0!important;
|
||
padding:0!important
|
||
}
|
||
.toggle-group label {
|
||
cursor:pointer;
|
||
align-items:center
|
||
}
|
||
.toggle-group input {
|
||
display:none
|
||
}
|
||
.toggle {
|
||
border:1px solid var(--line);
|
||
width:32px;
|
||
height:18px;
|
||
position:relative
|
||
}
|
||
.toggle:after {
|
||
content:"";
|
||
background:var(--muted);
|
||
width:10px;
|
||
height:10px;
|
||
transition:transform .2s;
|
||
position:absolute;
|
||
top:3px;
|
||
left:3px
|
||
}
|
||
.toggle-group input:checked+.toggle {
|
||
background:var(--blue);
|
||
border-color:var(--blue)
|
||
}
|
||
.toggle-group input:checked+.toggle:after {
|
||
background:#fff;
|
||
transform:translate(14px)
|
||
}
|
||
.toggle-group p {
|
||
color:var(--muted);
|
||
margin:8px 0 0;
|
||
font-size:12px;
|
||
line-height:1.5
|
||
}
|
||
.catalog-nav {
|
||
border-bottom:1px solid var(--line);
|
||
justify-content:space-between;
|
||
align-items:center;
|
||
gap:24px;
|
||
margin:-64px 0 64px;
|
||
padding:18px 0;
|
||
display:flex
|
||
}
|
||
.catalog-brand {
|
||
color:var(--foreground);
|
||
font:600 14px var(--font-mono);
|
||
text-decoration:none
|
||
}
|
||
.catalog-nav nav {
|
||
gap:24px;
|
||
display:flex
|
||
}
|
||
.catalog-nav nav a,.catalog-nav-status {
|
||
color:var(--muted);
|
||
font:10px var(--font-mono);
|
||
text-decoration:none
|
||
}
|
||
.catalog-nav nav a:hover,.catalog-nav nav a.current {
|
||
color:var(--blue)
|
||
}
|
||
.catalog-nav-status {
|
||
color:#25a96a
|
||
}
|
||
.catalog-page {
|
||
width:100%;
|
||
max-width:none;
|
||
margin:0;
|
||
padding:60px clamp(24px,4vw,72px) 72px
|
||
}
|
||
.catalog-head {
|
||
border-bottom:1px solid var(--line);
|
||
justify-content:space-between;
|
||
align-items:flex-end;
|
||
gap:40px;
|
||
padding-bottom:42px;
|
||
display:flex
|
||
}
|
||
.catalog-head h1 {
|
||
margin:12px 0 14px
|
||
}
|
||
.catalog-head p {
|
||
max-width:660px;
|
||
color:var(--muted);
|
||
font:14px/1.6 var(--font-mono);
|
||
margin:0
|
||
}
|
||
.catalog-total {
|
||
color:var(--muted);
|
||
font:10px/1.4 var(--font-mono);
|
||
text-align:right;
|
||
align-items:center;
|
||
gap:14px;
|
||
display:flex
|
||
}
|
||
.catalog-total b {
|
||
color:var(--blue);
|
||
font:400 clamp(48px,5vw,76px)/.9 var(--font-mono);
|
||
letter-spacing:-.08em
|
||
}
|
||
.catalog-toolbar {
|
||
justify-content:space-between;
|
||
align-items:center;
|
||
gap:24px;
|
||
padding:24px 0 42px;
|
||
display:flex
|
||
}
|
||
.catalog-search {
|
||
border:1px solid var(--line);
|
||
width:min(420px,100%);
|
||
color:var(--muted);
|
||
align-items:center;
|
||
gap:12px;
|
||
padding:12px 14px;
|
||
display:flex
|
||
}
|
||
.catalog-search input {
|
||
width:100%;
|
||
color:var(--foreground);
|
||
font:12px var(--font-mono);
|
||
background:0 0;
|
||
border:0;
|
||
outline:0
|
||
}
|
||
.catalog-filters {
|
||
color:var(--muted);
|
||
flex-wrap:wrap;
|
||
align-items:center;
|
||
gap:6px;
|
||
display:flex
|
||
}
|
||
.catalog-filters button {
|
||
color:var(--muted);
|
||
font:10px var(--font-mono);
|
||
background:0 0;
|
||
border:1px solid #0000;
|
||
padding:8px 10px
|
||
}
|
||
.catalog-filters button:hover,.catalog-filters button.active {
|
||
border-color:var(--blue);
|
||
color:var(--blue)
|
||
}
|
||
.catalog-groups {
|
||
grid-template-columns:repeat(2,minmax(0,1fr));
|
||
gap:56px 28px;
|
||
display:grid
|
||
}
|
||
.catalog-group {
|
||
min-width:0
|
||
}
|
||
.group-title {
|
||
border-bottom:1px solid var(--line);
|
||
color:var(--foreground);
|
||
font:600 11px var(--font-mono);
|
||
letter-spacing:.12em;
|
||
justify-content:space-between;
|
||
align-items:center;
|
||
padding-bottom:12px;
|
||
display:flex
|
||
}
|
||
.group-title i {
|
||
color:var(--muted);
|
||
font:10px var(--font-mono);
|
||
font-style:normal
|
||
}
|
||
.tool-cards {
|
||
gap:10px;
|
||
padding-top:14px;
|
||
display:grid
|
||
}
|
||
.tool-card {
|
||
border:1px solid var(--line);
|
||
background:var(--panel);
|
||
min-height:106px;
|
||
color:var(--foreground);
|
||
grid-template-columns:42px minmax(0,1fr) 24px 18px;
|
||
align-items:center;
|
||
gap:14px;
|
||
padding:16px;
|
||
text-decoration:none;
|
||
transition:border-color .18s,transform .18s,background .18s;
|
||
display:grid
|
||
}
|
||
.tool-card:hover {
|
||
border-color:var(--blue);
|
||
background:var(--panel-strong);
|
||
transform:translateY(-2px)
|
||
}
|
||
.tool-icon {
|
||
background:var(--blue);
|
||
place-items:center;
|
||
width:42px;
|
||
height:42px;
|
||
display:grid
|
||
}
|
||
@supports (color:color-mix(in lab, red, red)) {
|
||
.tool-icon {
|
||
background:color-mix(in srgb,var(--blue) 12%,transparent)
|
||
}
|
||
|
||
}
|
||
.tool-icon {
|
||
color:var(--blue)
|
||
}
|
||
.tool-copy {
|
||
gap:8px;
|
||
min-width:0;
|
||
display:grid
|
||
}
|
||
.tool-copy strong {
|
||
font:600 13px var(--font-mono)
|
||
}
|
||
.tool-copy span {
|
||
color:var(--muted);
|
||
font:12px/1.5 var(--font-mono)
|
||
}
|
||
.tool-index {
|
||
color:var(--muted);
|
||
font:10px var(--font-mono);
|
||
align-self:start
|
||
}
|
||
.tool-arrow {
|
||
color:var(--blue);
|
||
opacity:0;
|
||
transition:opacity .18s,transform .18s
|
||
}
|
||
.tool-card:hover .tool-arrow {
|
||
opacity:1;
|
||
transform:translate(2px,-2px)
|
||
}
|
||
.catalog-empty {
|
||
border:1px dashed var(--line);
|
||
color:var(--muted);
|
||
font:12px var(--font-mono);
|
||
align-items:center;
|
||
gap:10px;
|
||
padding:40px;
|
||
display:flex
|
||
}
|
||
.catalog-footer {
|
||
border-top:1px solid var(--line);
|
||
color:var(--muted);
|
||
font:10px var(--font-mono);
|
||
margin-top:64px;
|
||
padding-top:20px
|
||
}
|
||
.catalog-footer span {
|
||
color:var(--blue);
|
||
margin:0 8px
|
||
}
|
||
@media (max-width:800px) {
|
||
.catalog-nav {
|
||
margin:-36px 0 36px
|
||
}
|
||
.catalog-nav-status {
|
||
display:none
|
||
}
|
||
.catalog-nav nav {
|
||
gap:14px
|
||
}
|
||
.catalog-page {
|
||
padding:36px 16px 48px
|
||
}
|
||
.catalog-head {
|
||
flex-direction:column;
|
||
align-items:flex-start;
|
||
gap:24px
|
||
}
|
||
.catalog-total {
|
||
text-align:left
|
||
}
|
||
.catalog-toolbar {
|
||
flex-direction:column;
|
||
align-items:stretch;
|
||
padding-bottom:30px
|
||
}
|
||
.catalog-search {
|
||
width:100%
|
||
}
|
||
.catalog-groups {
|
||
grid-template-columns:1fr;
|
||
gap:36px
|
||
}
|
||
.tool-card {
|
||
grid-template-columns:38px minmax(0,1fr) 18px;
|
||
gap:12px;
|
||
min-height:96px
|
||
}
|
||
.tool-icon {
|
||
width:38px;
|
||
height:38px
|
||
}
|
||
.tool-index {
|
||
display:none
|
||
}
|
||
.tool-arrow {
|
||
opacity:1
|
||
}
|
||
.tool-page {
|
||
padding:36px 16px 48px
|
||
}
|
||
.tool-title {
|
||
display:block
|
||
}
|
||
.tool-status {
|
||
margin-top:22px
|
||
}
|
||
.gradient-layout,.remover-layout {
|
||
grid-template-columns:1fr;
|
||
gap:24px
|
||
}
|
||
.gradient-preview,.remover-preview {
|
||
order:-1
|
||
}
|
||
.gradient-art {
|
||
min-height:340px
|
||
}
|
||
.preview-toolbar {
|
||
flex-direction:column;
|
||
align-items:flex-start;
|
||
gap:16px
|
||
}
|
||
.preview-actions {
|
||
justify-content:flex-end;
|
||
width:100%
|
||
}
|
||
.comparison-grid {
|
||
grid-template-columns:1fr
|
||
}
|
||
.remover-canvas {
|
||
min-height:300px
|
||
}
|
||
.result-meta {
|
||
flex-wrap:wrap;
|
||
gap:12px 18px
|
||
}
|
||
|
||
}
|
||
@property --tw-border-style {
|
||
syntax:"*";
|
||
inherits:false;
|
||
initial-value:solid
|
||
}
|
||
@property --tw-font-weight {
|
||
syntax:"*";
|
||
inherits:false
|
||
}
|
||
@property --tw-shadow {
|
||
syntax:"*";
|
||
inherits:false;
|
||
initial-value:0 0 #0000
|
||
}
|
||
@property --tw-shadow-color {
|
||
syntax:"*";
|
||
inherits:false
|
||
}
|
||
@property --tw-shadow-alpha {
|
||
syntax:"<percentage>";
|
||
inherits:false;
|
||
initial-value:100%
|
||
}
|
||
@property --tw-inset-shadow {
|
||
syntax:"*";
|
||
inherits:false;
|
||
initial-value:0 0 #0000
|
||
}
|
||
@property --tw-inset-shadow-color {
|
||
syntax:"*";
|
||
inherits:false
|
||
}
|
||
@property --tw-inset-shadow-alpha {
|
||
syntax:"<percentage>";
|
||
inherits:false;
|
||
initial-value:100%
|
||
}
|
||
@property --tw-ring-color {
|
||
syntax:"*";
|
||
inherits:false
|
||
}
|
||
@property --tw-ring-shadow {
|
||
syntax:"*";
|
||
inherits:false;
|
||
initial-value:0 0 #0000
|
||
}
|
||
@property --tw-inset-ring-color {
|
||
syntax:"*";
|
||
inherits:false
|
||
}
|
||
@property --tw-inset-ring-shadow {
|
||
syntax:"*";
|
||
inherits:false;
|
||
initial-value:0 0 #0000
|
||
}
|
||
@property --tw-ring-inset {
|
||
syntax:"*";
|
||
inherits:false
|
||
}
|
||
@property --tw-ring-offset-width {
|
||
syntax:"<length>";
|
||
inherits:false;
|
||
initial-value:0
|
||
}
|
||
@property --tw-ring-offset-color {
|
||
syntax:"*";
|
||
inherits:false;
|
||
initial-value:#fff
|
||
}
|
||
@property --tw-ring-offset-shadow {
|
||
syntax:"*";
|
||
inherits:false;
|
||
initial-value:0 0 #0000
|
||
}
|
||
@property --tw-outline-style {
|
||
syntax:"*";
|
||
inherits:false;
|
||
initial-value:solid
|
||
}
|
||
@property --tw-blur {
|
||
syntax:"*";
|
||
inherits:false
|
||
}
|
||
@property --tw-brightness {
|
||
syntax:"*";
|
||
inherits:false
|
||
}
|
||
@property --tw-contrast {
|
||
syntax:"*";
|
||
inherits:false
|
||
}
|
||
@property --tw-grayscale {
|
||
syntax:"*";
|
||
inherits:false
|
||
}
|
||
@property --tw-hue-rotate {
|
||
syntax:"*";
|
||
inherits:false
|
||
}
|
||
@property --tw-invert {
|
||
syntax:"*";
|
||
inherits:false
|
||
}
|
||
@property --tw-opacity {
|
||
syntax:"*";
|
||
inherits:false
|
||
}
|
||
@property --tw-saturate {
|
||
syntax:"*";
|
||
inherits:false
|
||
}
|
||
@property --tw-sepia {
|
||
syntax:"*";
|
||
inherits:false
|
||
}
|
||
@property --tw-drop-shadow {
|
||
syntax:"*";
|
||
inherits:false
|
||
}
|
||
@property --tw-drop-shadow-color {
|
||
syntax:"*";
|
||
inherits:false
|
||
}
|
||
@property --tw-drop-shadow-alpha {
|
||
syntax:"<percentage>";
|
||
inherits:false;
|
||
initial-value:100%
|
||
}
|
||
@property --tw-drop-shadow-size {
|
||
syntax:"*";
|
||
inherits:false
|
||
}
|
||
@property --tw-translate-x {
|
||
syntax:"*";
|
||
inherits:false;
|
||
initial-value:0
|
||
}
|
||
@property --tw-translate-y {
|
||
syntax:"*";
|
||
inherits:false;
|
||
initial-value:0
|
||
}
|
||
@property --tw-translate-z {
|
||
syntax:"*";
|
||
inherits:false;
|
||
initial-value:0
|
||
}
|
||
</style>
|
||
<meta name="theme-color" content="#eef1f4"/>
|
||
<meta name="color-scheme" content="light"/>
|
||
<title>easy-png-tools / Demo
|
||
</title>
|
||
<meta name="description" content="Technical workspace for building PNG processing pipelines."/>
|
||
<meta name="generator" content="easy-png-tools"/>
|
||
</head>
|
||
<body class="antialiased">
|
||
<div hidden="">
|
||
<!--$-->
|
||
<!--/$-->
|
||
</div>
|
||
<main class="app-shell">
|
||
<header class="topbar">
|
||
<a class="brand" href="/">
|
||
<span class="brand-mark">EP
|
||
</span>
|
||
<span>easy-png-tools
|
||
</span>
|
||
<span class="version">/
|
||
<!-- -->WORKSPACE
|
||
</span>
|
||
</a>
|
||
<nav class="top-nav" aria-label="Primary navigation">
|
||
<a class="" href="/">Workspace
|
||
</a>
|
||
<a class="" href="/easy-png-tools/list-tools">Catalog
|
||
</a>
|
||
<a class="" href="/easy-png-tools/gradient">Gradient
|
||
</a>
|
||
<a class="" href="/easy-png-tools/background-remover">Background remover
|
||
</a>
|
||
</nav>
|
||
<div class="top-actions">
|
||
<span class="status">
|
||
<i>
|
||
</i>
|
||
<!-- -->AUTO PIPELINE
|
||
</span>
|
||
<button class="icon-btn" aria-label="Help">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-question-mark" aria-hidden="true">
|
||
<circle cx="12" cy="12" r="10">
|
||
</circle>
|
||
<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3">
|
||
</path>
|
||
<path d="M12 17h.01">
|
||
</path>
|
||
</svg>
|
||
</button>
|
||
<button class="icon-btn" aria-label="Toggle theme">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-moon" aria-hidden="true">
|
||
<path d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401">
|
||
</path>
|
||
</svg>
|
||
</button>
|
||
<div class="language">
|
||
<button class="active">RU
|
||
</button>
|
||
<span>/
|
||
</span>
|
||
<button>EN
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<div class="page-grid">
|
||
<section class="workspace">
|
||
<div class="eyebrow">PNG PROCESSING
|
||
<span>/
|
||
</span> WORKSPACE
|
||
</div>
|
||
<div class="title-row">
|
||
<div>
|
||
<h1>Build your image pipeline.
|
||
</h1>
|
||
<p class="lede">Chain simple tools together. Every change is processed automatically and previewed at each stage.
|
||
</p>
|
||
</div>
|
||
<div class="file-chip">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-upload" aria-hidden="true">
|
||
<path d="M12 3v12">
|
||
</path>
|
||
<path d="m17 8-5-5-5 5">
|
||
</path>
|
||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4">
|
||
</path>
|
||
</svg>
|
||
<span>source.png
|
||
</span>
|
||
<b>1.8 MB
|
||
</b>
|
||
</div>
|
||
</div>
|
||
<div class="pipeline-head">
|
||
<div>
|
||
<span class="label">PROCESSING PIPELINE
|
||
</span>
|
||
<strong>4
|
||
<!-- --> active steps
|
||
<em>• LIVE
|
||
</em>
|
||
</strong>
|
||
</div>
|
||
<button class="add-btn">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus" aria-hidden="true">
|
||
<path d="M5 12h14">
|
||
</path>
|
||
<path d="M12 5v14">
|
||
</path>
|
||
</svg> Add tool
|
||
</button>
|
||
</div>
|
||
<div class="steps-list">
|
||
<article class="step-card">
|
||
<div class="step-index">01
|
||
</div>
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-grip-vertical drag" aria-hidden="true">
|
||
<circle cx="9" cy="12" r="1">
|
||
</circle>
|
||
<circle cx="9" cy="5" r="1">
|
||
</circle>
|
||
<circle cx="9" cy="19" r="1">
|
||
</circle>
|
||
<circle cx="15" cy="12" r="1">
|
||
</circle>
|
||
<circle cx="15" cy="5" r="1">
|
||
</circle>
|
||
<circle cx="15" cy="19" r="1">
|
||
</circle>
|
||
</svg>
|
||
<div class="step-body">
|
||
<div class="step-heading">
|
||
<div>
|
||
<span class="step-type">BACKGROUND
|
||
</span>
|
||
<h2>Gradient background
|
||
</h2>
|
||
</div>
|
||
<div class="step-tools">
|
||
<span class="check">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check" aria-hidden="true">
|
||
<path d="M20 6 9 17l-5-5">
|
||
</path>
|
||
</svg> AUTO
|
||
</span>
|
||
<button aria-label="Remove step">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x" aria-hidden="true">
|
||
<path d="M18 6 6 18">
|
||
</path>
|
||
<path d="m6 6 12 12">
|
||
</path>
|
||
</svg>
|
||
</button>
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-ellipsis" aria-hidden="true">
|
||
<circle cx="12" cy="12" r="1">
|
||
</circle>
|
||
<circle cx="19" cy="12" r="1">
|
||
</circle>
|
||
<circle cx="5" cy="12" r="1">
|
||
</circle>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
<div class="controls">
|
||
<div class="control-block">
|
||
<label>COLOR
|
||
</label>
|
||
<div class="color-field">
|
||
<span class="swatch" style="background:#DCEBFF">
|
||
</span>
|
||
<input aria-label="Gradient color" value="#DCEBFF"/>
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down" aria-hidden="true">
|
||
<path d="m6 9 6 6 6-6">
|
||
</path>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
<div class="control-block">
|
||
<label>DIRECTION
|
||
<output>135
|
||
<!-- -->°
|
||
</output>
|
||
</label>
|
||
<input type="range" min="0" max="360" value="135"/>
|
||
</div>
|
||
<div class="control-block">
|
||
<label>OPACITY
|
||
<output>100%
|
||
</output>
|
||
</label>
|
||
<div class="segmented">
|
||
<button class="selected">100
|
||
</button>
|
||
<button>75
|
||
</button>
|
||
<button>50
|
||
</button>
|
||
<button>25
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
<article class="step-card">
|
||
<div class="step-index">02
|
||
</div>
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-grip-vertical drag" aria-hidden="true">
|
||
<circle cx="9" cy="12" r="1">
|
||
</circle>
|
||
<circle cx="9" cy="5" r="1">
|
||
</circle>
|
||
<circle cx="9" cy="19" r="1">
|
||
</circle>
|
||
<circle cx="15" cy="12" r="1">
|
||
</circle>
|
||
<circle cx="15" cy="5" r="1">
|
||
</circle>
|
||
<circle cx="15" cy="19" r="1">
|
||
</circle>
|
||
</svg>
|
||
<div class="step-body">
|
||
<div class="step-heading">
|
||
<div>
|
||
<span class="step-type">TRANSFORM
|
||
</span>
|
||
<h2>Remove background
|
||
</h2>
|
||
</div>
|
||
<div class="step-tools">
|
||
<span class="check">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check" aria-hidden="true">
|
||
<path d="M20 6 9 17l-5-5">
|
||
</path>
|
||
</svg> AUTO
|
||
</span>
|
||
<button aria-label="Remove step">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x" aria-hidden="true">
|
||
<path d="M18 6 6 18">
|
||
</path>
|
||
<path d="m6 6 12 12">
|
||
</path>
|
||
</svg>
|
||
</button>
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-ellipsis" aria-hidden="true">
|
||
<circle cx="12" cy="12" r="1">
|
||
</circle>
|
||
<circle cx="19" cy="12" r="1">
|
||
</circle>
|
||
<circle cx="5" cy="12" r="1">
|
||
</circle>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
<div class="transform-note">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sliders-horizontal" aria-hidden="true">
|
||
<path d="M10 5H3">
|
||
</path>
|
||
<path d="M12 19H3">
|
||
</path>
|
||
<path d="M14 3v4">
|
||
</path>
|
||
<path d="M16 17v4">
|
||
</path>
|
||
<path d="M21 12h-9">
|
||
</path>
|
||
<path d="M21 19h-5">
|
||
</path>
|
||
<path d="M21 5h-7">
|
||
</path>
|
||
<path d="M8 10v4">
|
||
</path>
|
||
<path d="M8 12H3">
|
||
</path>
|
||
</svg> Automatic subject detection enabled
|
||
</div>
|
||
</div>
|
||
</article>
|
||
<article class="step-card">
|
||
<div class="step-index">03
|
||
</div>
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-grip-vertical drag" aria-hidden="true">
|
||
<circle cx="9" cy="12" r="1">
|
||
</circle>
|
||
<circle cx="9" cy="5" r="1">
|
||
</circle>
|
||
<circle cx="9" cy="19" r="1">
|
||
</circle>
|
||
<circle cx="15" cy="12" r="1">
|
||
</circle>
|
||
<circle cx="15" cy="5" r="1">
|
||
</circle>
|
||
<circle cx="15" cy="19" r="1">
|
||
</circle>
|
||
</svg>
|
||
<div class="step-body">
|
||
<div class="step-heading">
|
||
<div>
|
||
<span class="step-type">STYLE
|
||
</span>
|
||
<h2>Add outline
|
||
</h2>
|
||
</div>
|
||
<div class="step-tools">
|
||
<span class="check">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check" aria-hidden="true">
|
||
<path d="M20 6 9 17l-5-5">
|
||
</path>
|
||
</svg> AUTO
|
||
</span>
|
||
<button aria-label="Remove step">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x" aria-hidden="true">
|
||
<path d="M18 6 6 18">
|
||
</path>
|
||
<path d="m6 6 12 12">
|
||
</path>
|
||
</svg>
|
||
</button>
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-ellipsis" aria-hidden="true">
|
||
<circle cx="12" cy="12" r="1">
|
||
</circle>
|
||
<circle cx="19" cy="12" r="1">
|
||
</circle>
|
||
<circle cx="5" cy="12" r="1">
|
||
</circle>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
<div class="controls compact">
|
||
<div class="control-block">
|
||
<label>WIDTH
|
||
<output>2
|
||
<!-- -->px
|
||
</output>
|
||
</label>
|
||
<input type="range" min="0" max="8" value="2"/>
|
||
</div>
|
||
<div class="control-block">
|
||
<label>COLOR
|
||
</label>
|
||
<div class="color-field">
|
||
<span class="swatch dark">
|
||
</span>
|
||
<input readOnly="" value="#16202B"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
<article class="step-card">
|
||
<div class="step-index">04
|
||
</div>
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-grip-vertical drag" aria-hidden="true">
|
||
<circle cx="9" cy="12" r="1">
|
||
</circle>
|
||
<circle cx="9" cy="5" r="1">
|
||
</circle>
|
||
<circle cx="9" cy="19" r="1">
|
||
</circle>
|
||
<circle cx="15" cy="12" r="1">
|
||
</circle>
|
||
<circle cx="15" cy="5" r="1">
|
||
</circle>
|
||
<circle cx="15" cy="19" r="1">
|
||
</circle>
|
||
</svg>
|
||
<div class="step-body">
|
||
<div class="step-heading">
|
||
<div>
|
||
<span class="step-type">STYLE
|
||
</span>
|
||
<h2>Round corners
|
||
</h2>
|
||
</div>
|
||
<div class="step-tools">
|
||
<span class="check">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check" aria-hidden="true">
|
||
<path d="M20 6 9 17l-5-5">
|
||
</path>
|
||
</svg> AUTO
|
||
</span>
|
||
<button aria-label="Remove step">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x" aria-hidden="true">
|
||
<path d="M18 6 6 18">
|
||
</path>
|
||
<path d="m6 6 12 12">
|
||
</path>
|
||
</svg>
|
||
</button>
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-ellipsis" aria-hidden="true">
|
||
<circle cx="12" cy="12" r="1">
|
||
</circle>
|
||
<circle cx="19" cy="12" r="1">
|
||
</circle>
|
||
<circle cx="5" cy="12" r="1">
|
||
</circle>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
<div class="controls compact">
|
||
<div class="control-block">
|
||
<label>RADIUS
|
||
<output>18
|
||
<!-- -->px
|
||
</output>
|
||
</label>
|
||
<input type="range" min="0" max="48" value="18"/>
|
||
</div>
|
||
<div class="toggle-row">
|
||
<span>Preserve aspect ratio
|
||
</span>
|
||
<button class="toggle on" aria-label="Preserve aspect ratio">
|
||
<i>
|
||
</i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
<div class="pipeline-footer">
|
||
<button class="reset-btn">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-rotate-ccw" aria-hidden="true">
|
||
<path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8">
|
||
</path>
|
||
<path d="M3 3v5h5">
|
||
</path>
|
||
</svg> Reset pipeline
|
||
</button>
|
||
<span class="auto-note">
|
||
<i>
|
||
</i> changes are applied automatically
|
||
</span>
|
||
</div>
|
||
</section>
|
||
<section class="preview-panel">
|
||
<div class="preview-top">
|
||
<div>
|
||
<span class="label">PIPELINE OUTPUTS
|
||
</span>
|
||
<strong>Visual history
|
||
</strong>
|
||
</div>
|
||
<div class="preview-actions">
|
||
<button class="history-toggle top-toggle" aria-expanded="true">Hide intermediate
|
||
<!-- -->
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down rotated" aria-hidden="true">
|
||
<path d="m6 9 6 6 6-6">
|
||
</path>
|
||
</svg>
|
||
</button>
|
||
<button class="download-btn">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download" aria-hidden="true">
|
||
<path d="M12 15V3">
|
||
</path>
|
||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4">
|
||
</path>
|
||
<path d="m7 10 5 5 5-5">
|
||
</path>
|
||
</svg> Download result
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-down-to-line" aria-hidden="true">
|
||
<path d="M12 17V3">
|
||
</path>
|
||
<path d="m6 11 6 6 6-6">
|
||
</path>
|
||
<path d="M19 21H5">
|
||
</path>
|
||
</svg>
|
||
</button>
|
||
<div class="preview-meta">
|
||
<div>
|
||
<span>DIMENSIONS
|
||
</span>
|
||
<b>1200 × 800 px
|
||
</b>
|
||
</div>
|
||
<div>
|
||
<span>FORMAT
|
||
</span>
|
||
<b>PNG-24
|
||
</b>
|
||
</div>
|
||
<div>
|
||
<span>SIZE
|
||
</span>
|
||
<b>1.2 MB
|
||
</b>
|
||
</div>
|
||
</div>
|
||
<button class="icon-btn" aria-label="Preview settings">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-settings2 lucide-settings-2" aria-hidden="true">
|
||
<path d="M14 17H5">
|
||
</path>
|
||
<path d="M19 7h-9">
|
||
</path>
|
||
<circle cx="17" cy="17" r="3">
|
||
</circle>
|
||
<circle cx="7" cy="7" r="3">
|
||
</circle>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="preview-stack">
|
||
<div class="preview-tile ">
|
||
<div class="tile-canvas">
|
||
<div class="image-preview" style="background:#8d9aa5">
|
||
<span class="sample-icon">PNG
|
||
</span>
|
||
<span>easy-png-tools
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="tile-label">
|
||
<span>SOURCE
|
||
</span>
|
||
<b>original.png · 1200 × 800
|
||
</b>
|
||
</div>
|
||
</div>
|
||
<div class="preview-tile ">
|
||
<div class="tile-canvas">
|
||
<div class="image-preview" style="background:linear-gradient(135deg, #DCEBFF, #8BC8F5)">
|
||
<span class="sample-icon">PNG
|
||
</span>
|
||
<span>easy-png-tools
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="tile-label">
|
||
<span>STEP 01
|
||
</span>
|
||
<b>gradient applied
|
||
</b>
|
||
</div>
|
||
</div>
|
||
<div class="preview-tile ">
|
||
<div class="tile-canvas">
|
||
<div class="image-preview" style="background:linear-gradient(135deg, #DCEBFF, #8BC8F5);clip-path:inset(10% 8% 10% 8% round 12px)">
|
||
<span class="sample-icon">PNG
|
||
</span>
|
||
<span>easy-png-tools
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="tile-label">
|
||
<span>STEP 02
|
||
</span>
|
||
<b>background removed
|
||
</b>
|
||
</div>
|
||
</div>
|
||
<div class="preview-tile ">
|
||
<div class="tile-canvas">
|
||
<div class="image-preview" style="background:linear-gradient(135deg, #DCEBFF, #8BC8F5);box-shadow:0 0 0 2px #16202B">
|
||
<span class="sample-icon">PNG
|
||
</span>
|
||
<span>easy-png-tools
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="tile-label">
|
||
<span>STEP 03
|
||
</span>
|
||
<b>outline added
|
||
</b>
|
||
</div>
|
||
</div>
|
||
<div class="preview-tile active">
|
||
<div class="tile-canvas">
|
||
<div class="image-preview" style="background:linear-gradient(135deg, #DCEBFF, #8BC8F5);border-radius:18px;box-shadow:0 0 0 2px #16202B">
|
||
<span class="sample-icon">PNG
|
||
</span>
|
||
<span>easy-png-tools
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="tile-label">
|
||
<span>FINAL OUTPUT
|
||
</span>
|
||
<b>ready · PNG-24
|
||
</b>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<p class="preview-note">Output is generated in-browser. Your files never leave this device.
|
||
</p>
|
||
</section>
|
||
</div>
|
||
<footer class="footer">
|
||
<span>easy-png-tools
|
||
<b>v2.4.0
|
||
</b>
|
||
</span>
|
||
<span>
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-link2 lucide-link-2" aria-hidden="true">
|
||
<path d="M9 17H7A5 5 0 0 1 7 7h2">
|
||
</path>
|
||
<path d="M15 7h2a5 5 0 1 1 0 10h-2">
|
||
</path>
|
||
<line x1="8" x2="16" y1="12" y2="12">
|
||
</line>
|
||
</svg> pipeline is local-only
|
||
</span>
|
||
<span>© 2024
|
||
</span>
|
||
</footer>
|
||
</main>
|
||
<!--$-->
|
||
<!--/$-->
|
||
<!--$!-->
|
||
<template data-dgst="BAILOUT_TO_CLIENT_SIDE_RENDERING">
|
||
</template>
|
||
<!--/$-->
|
||
|
||
<script>
|
||
(function () {
|
||
var btn = document.querySelector('button[aria-label="Toggle theme"]');
|
||
var shell = document.querySelector('.app-shell');
|
||
if (!btn || window.__themeToggleInjected) return;
|
||
window.__themeToggleInjected = true;
|
||
btn.addEventListener('click', function () {
|
||
document.documentElement.classList.toggle('dark-mode');
|
||
if (shell) shell.classList.toggle('dark-mode');
|
||
});
|
||
})();
|
||
</script>
|
||
|
||
</body>
|
||
</html> |