@charset "UTF-8";.Modify{display:flex;flex-direction:column;width:100%;height:100%}.nav{display:flex;justify-content:space-between;align-items:center;padding:1.5rem;border:1px solid var(--color-primary);border-radius:var(--radius-md);box-shadow:0 .5rem 1rem -.25rem var(--color-primary)}.nav-left{background:linear-gradient(90deg,var(--color-primary),var(--color-tertiary),var(--color-quaternary),var(--color-primary),var(--color-quaternary),var(--color-tertiary),var(--color-primary));background-size:400%;letter-spacing:.25em;font-weight:600;word-spacing:.25em;-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;animation:gradient-shift 20s linear infinite}@keyframes gradient-shift{0%{background-position:0% center}50%{background-position:400% center}to{background-position:0% center}}@media(prefers-reduced-motion:reduce){.nav-left{animation:none;background:var(--color-primary);-webkit-text-fill-color:var(--color-secondary)}}.nav-right{width:2.5rem;height:2.5rem;display:flex;justify-content:center;align-items:center}.nav-btn_mode{cursor:pointer;width:100%;height:100%;border-radius:50%;border:2px solid var(--color-primary);display:flex;justify-content:center;align-items:center;transition:all var(--transition-normal)}.nav-btn_mode:hover{background-color:var(--color-primary);color:var(--color-secondary)}.content{display:flex;flex-direction:column;flex:1;margin-top:1rem;padding:1.5rem;gap:1.5rem;border:1px solid var(--color-primary);border-radius:var(--radius-md);box-shadow:0 .5rem 1rem -.25rem var(--color-primary)}.form-intensity,.form-color,.form-solidColor{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem}.form-intensity_text,.form-color_text{font-size:.875rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em}.form-intensity_range{flex:1;min-width:6rem;height:.5rem;background:var(--color-tertiary);border-radius:var(--radius-sm);-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}.form-intensity_range::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:1rem;height:1.5rem;background-color:var(--color-quaternary);border:1px solid var(--color-primary);border-radius:var(--radius-sm);cursor:pointer;transition:transform var(--transition-fast)}.form-intensity_range::-webkit-slider-thumb:hover{transform:scale(1.1)}.form-intensity_value{min-width:1.5rem;text-align:center;font-weight:600}.form-color_input{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:3rem;height:3rem;background-color:transparent;border:none;cursor:pointer;padding:0}.form-color_input::-webkit-color-swatch{border-radius:var(--radius-md);border:2px solid var(--color-primary)}.form-color_value{font-family:monospace;font-size:.875rem}.form-solidColor_box{display:flex;justify-content:center;align-items:center;width:100%;height:2rem;border:1px solid var(--color-primary);border-radius:var(--radius-sm);font-family:monospace;font-size:.75rem;text-transform:uppercase;letter-spacing:.1em}.content-css{display:flex;flex-direction:column;gap:1rem;flex:1}.content-css_textarea{width:100%;min-height:8rem;flex:1;resize:none;background-color:var(--color-secondary);border-radius:var(--radius-md);border:1px solid var(--color-primary);padding:1rem;font-family:monospace;font-size:.75rem;line-height:1.6}.content-btn{display:flex;justify-content:center}.content-btn_copy{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;padding:.75rem 1.5rem;background-color:var(--color-primary);color:var(--color-secondary);border-radius:var(--radius-md);border:none;cursor:pointer;font-weight:600;text-transform:uppercase;letter-spacing:.05em;transition:all var(--transition-fast)}.content-btn_copy:hover{opacity:.9;transform:translateY(-1px)}.content-btn_copy.success{background-color:#22c55e;color:#fff}@media(max-width:768px){.nav{padding:1rem}.nav-left{font-size:.75rem;letter-spacing:.15em}.content{padding:1rem}.form-intensity,.form-color{flex-direction:column;align-items:stretch}.form-intensity_range{width:100%}}.Sample{display:flex;flex-direction:column;gap:1rem;padding:1rem;border:1px solid var(--color-primary);border-radius:var(--radius-md);box-shadow:0 .5rem 1rem -.25rem var(--color-primary);overflow:auto}.Sample-type{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;padding:1rem}.sample-type_btn{cursor:pointer;padding:.75rem 1.5rem;border-radius:var(--radius-md);border:2px solid var(--color-primary);background-color:transparent;color:var(--color-primary);font-weight:600;text-transform:capitalize;transition:all var(--transition-fast)}.sample-type_btn:hover{background-color:var(--color-primary);color:var(--color-secondary)}.sample-type_btn.active{background-color:var(--color-primary);color:var(--color-secondary);border-color:var(--color-tertiary)}.Sample-colors{display:grid;grid-template-columns:repeat(auto-fit,minmax(8rem,1fr));gap:.75rem;padding:1rem}.color-box{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;padding:1rem;border:2px solid var(--color-primary);border-radius:var(--radius-md);min-height:4rem}.color-box_label{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em}.color-box_value{font-size:.625rem;font-family:monospace;opacity:.8}.Sample-content{display:flex;flex-direction:column;gap:.75rem;padding:1rem;border-radius:var(--radius-md)}.Sample-content label{font-size:.875rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin-top:.5rem}.content-preview,.button-preview,.link-preview{padding:1rem;border-radius:var(--radius-md);border:1px solid var(--color-primary)}.content-preview h1{font-size:1.5rem;margin-bottom:.5rem}.content-preview p{font-size:.875rem;line-height:1.6;opacity:.9}.button-preview{display:flex;justify-content:center;padding:1.5rem}.button-preview button{cursor:pointer;padding:.75rem 1.5rem;border-radius:var(--radius-md);border:2px solid transparent;font-weight:600;transition:all var(--transition-fast)}.button-preview button:hover{opacity:.9;transform:translateY(-1px)}.link-preview{display:flex;justify-content:center;padding:1.5rem}.link-preview a{cursor:pointer;padding:.75rem 1.5rem;border-radius:var(--radius-md);font-weight:600;transition:all var(--transition-fast)}.link-preview a:hover{opacity:.9;text-decoration:underline}@media(max-width:768px){.Sample-colors{grid-template-columns:repeat(2,1fr)}.content-preview h1{font-size:1.25rem}.content-preview p{font-size:.8125rem}}.App{display:grid;grid-template-columns:1fr 3fr;gap:1rem;padding:1rem;min-height:100vh}@media(max-width:768px){.App{grid-template-columns:1fr;grid-template-rows:auto 1fr}}::-webkit-scrollbar{width:.5rem;background-color:var(--color-background, #f0f0f0)}::-webkit-scrollbar-thumb{background-color:var(--color-primary, #181818);border-radius:.25rem}:root{--color-primary: #181818;--color-secondary: #f0f0f0;--color-tertiary: #0056b3;--color-quaternary: #0099f7;--color-background: #ffffff;--color-text: #000000;--typography-primary: Helvetica, arial, sans-serif;--typography-secondary: Verdana, sans-serif;--transition-fast: .15s ease;--transition-normal: .3s ease;--radius-sm: .25rem;--radius-md: .5rem;--radius-lg: 1rem}.dark{--color-primary: #f0f0f0;--color-secondary: #181818;--color-tertiary: #0099f7;--color-quaternary: #0056b3}.light{--color-primary: #181818;--color-secondary: #f0f0f0;--color-tertiary: #0056b3;--color-quaternary: #0099f7}.contrast{--color-primary: #000000;--color-secondary: #ffffff;--color-tertiary: #00f260;--color-quaternary: #007bff}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}*,*:before,*:after{margin:0;padding:0;border:0;box-sizing:border-box;vertical-align:baseline}img,picture,video,iframe,figure{max-width:100%;width:100%;display:block;object-fit:cover;object-position:center center}a{display:block}p a{display:inline}li{list-style-type:none}html{scroll-behavior:smooth}h1,h2,h3,h4,h5,h6,p,span,a,strong,blockquote,i,b,u,em{font-size:1em;font-weight:inherit;font-style:inherit;text-decoration:none;color:inherit}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}::selection{background-color:var(--color-primary);color:var(--color-secondary)}form,input,textarea,select,button,label{font-family:inherit;font-size:inherit;-webkit-hyphens:auto;hyphens:auto;background-color:transparent;display:block;color:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none}table,tr,td{border-collapse:collapse;border-spacing:0}svg{width:100%;display:block;fill:currentColor}body{min-height:100vh;font-size:100%;font-family:var(--typography-primary);color:var(--color-primary);background-color:var(--color-secondary);line-height:1.4;-webkit-hyphens:auto;hyphens:auto;font-smooth:always;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:focus-visible{outline:2px solid var(--color-tertiary);outline-offset:2px}