:root{--metal-1: linear-gradient(145deg, #2a2a2a 0%, #1a1a1a 100%);--metal-2: linear-gradient(145deg, #f5f5dc 0%, #f5f5dc 50%, #f5f5dc 100%);--metal-3: linear-gradient(145deg, #404040 0%, #2a2a2a 100%);--text-light: #e0e0e0;--text-dark: #1a1a1a;--accent-color: #f5f5dc;--purple-accent: #444460;--border-radius: 8px;--transition-speed: .3s;--bg-color-1: #1f2833;--bg-color-2: #2c3e50;--bg-color-3: #0b0c10;--popover-bg-dark: rgba(25, 25, 30, .98);--section-border-color: rgba(90, 90, 90, .6);--section-bg-color: rgba(0, 0, 0, .15);--text-medium-grey: #b0b0b0;--text-darker-grey: #8a8a8a}html{scroll-behavior:smooth;height:auto}body{background:linear-gradient(135deg,var(--bg-color-3) 0%,var(--bg-color-1) 50%,var(--bg-color-2) 100%);color:light-dark(black,white);font-family:Roboto,sans-serif;min-height:100vh;line-height:1.6;container-type:unset;container-name:unset}body:before{content:none}.gradient-text{background:var(--metal-2);-webkit-background-clip:text;background-clip:text;color:transparent;text-align:center;margin-bottom:1.5rem;font-weight:700}.word-count{font-size:.8rem;text-align:right;color:var(--text-darker-grey);margin-top:.25rem;min-height:1.2em}.word-count.error{color:#f66;font-weight:700}.metallic-input,.metallic-select,.metallic-textarea,select#fontFamily{width:100%;padding:.8rem 1rem;margin-bottom:1rem;background:#ffffff14;border:1px solid var(--accent-color);color:var(--text-light);font-family:inherit;border-radius:var(--border-radius);transition:all var(--transition-speed) ease;font-size:1rem;-webkit-appearance:none;appearance:none}select#fontFamily{background-repeat:no-repeat;background-position:right 1rem center;padding-right:3rem;cursor:pointer}select option{background:#2a2a2a;color:var(--text-light);padding:5px 10px}select#fontFamily option{background:#333;color:#f0f0f0}.metallic-input:focus,.metallic-select:focus,.metallic-textarea:focus,select#fontFamily:focus{outline:none;box-shadow:0 0 8px rgba(var(--accent-color),.6);background:#ffffff1f}textarea.metallic-input,textarea.metallic-textarea{resize:vertical;min-height:60px}.color-input{padding:.3rem;height:40px;cursor:pointer;border:none;background:transparent;width:200px}.file-input{padding:.5rem}.file-input::file-selector-button{background:var(--metal-3);border:1px solid var(--accent-color);padding:.5rem 1rem;border-radius:var(--border-radius);color:var(--text-light);cursor:pointer;transition:background var(--transition-speed) ease;margin-right:1rem}.file-input::file-selector-button:hover{background:var(--accent-color);color:var(--text-dark)}.metallic-button{background:light-dark(#ffffff,#0f172a);border:1px solid #1e293b;padding:.8rem 1.5rem;border-radius:var(--border-radius);position:relative;overflow:hidden;width:100%;transition:all var(--transition-speed) ease;cursor:pointer;text-align:center;font-size:1rem;display:inline-flex;justify-content:center;align-items:center}.metallic-button:disabled{opacity:.6;cursor:not-allowed;border-color:#666}.metallic-button:disabled .btn-gradient{background:linear-gradient(145deg,#777,#555);-webkit-background-clip:text;background-clip:text;color:transparent}.metallic-button:hover:not(:disabled){box-shadow:0 0 10px rgba(var(--accent-color),.6);transform:translateY(-2px)}.metallic-button:active:not(:disabled){transform:translateY(0)}.metallic-button .btn-gradient{background:var(--metal-2);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700;display:inline-block}.small-btn{padding:.5rem 1rem;font-size:.9rem;margin-top:.5rem}.loading-spinner{display:inline-block;width:1.2em;height:1.2em;border:3px solid rgba(var(--accent-color),.6);border-radius:50%;border-top-color:var(--accent-color);animation:spin 1s ease-in-out infinite;margin-left:.5em}@keyframes spin{to{transform:rotate(360deg)}}[slot=header-right]{display:flex;gap:1rem;align-items:center;margin-left:auto;padding-right:1.5rem;position:relative}.header-controls{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:0rem 1.5rem 1.5rem;width:100%}.right-header-buttons{display:flex;align-items:center;gap:.7rem}.design-container{display:grid;grid-template-columns:1fr;gap:1.5rem;padding:0rem 1.5rem 1.5rem}.preview-panel{display:flex;justify-content:center;align-items:center;min-height:calc(100vh - 3rem - var(--header-h, 0) - var(--footer-h, 0))}.preview-container{background-color:transparent;border:3px solid light-dark(#171717,#27334b);border-radius:var(--border-radius);padding:1rem;box-shadow:inset 0 0 0 16px light-dark(#e2dfd2,#0f172a);width:100%;height:100%;display:flex;justify-content:center;align-items:center;overflow:hidden;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}#aspectRatioWrapper{width:100%;height:100%;display:flex;justify-content:center;align-items:center;transition:all var(--transition-speed) ease;overflow:hidden;position:relative}#aspectRatioWrapper.aspect-ratio-square{width:auto;height:100%;aspect-ratio:1 / 1;max-width:100%}#aspectRatioWrapper.aspect-ratio-landscape{width:100%;height:auto;aspect-ratio:16 / 9;max-height:100%}#aspectRatioWrapper.aspect-ratio-portrait{width:auto;height:100%;aspect-ratio:9 / 16;max-width:100%}#quotePreview{transition:all var(--transition-speed) ease;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:2rem;background-size:cover;background-position:center;background-repeat:no-repeat;overflow-wrap:break-word;word-wrap:break-word;hyphens:auto;position:absolute;inset:0}.header-icon{width:1.6em;height:1.6em;fill:light-dark(#000000,#ffffff);transition:fill var(--transition-speed) ease;flex-shrink:0}.header-tools-btn{display:flex;align-items:center;gap:.1em;padding:.5rem 1rem;font-size:.9rem;width:auto;margin-top:0;transition:all var(--transition-speed) ease}.header-tools-btn .button-text{max-width:0;overflow:hidden;white-space:nowrap;transition:max-width .3s ease-out,opacity .3s ease-out;opacity:0;color:light-dark(#000000,#ffffff);font-weight:700}.header-tools-btn:hover .button-text,.header-tools-btn.active-popover-trigger .button-text{max-width:100px;opacity:1;margin-left:.5em;color:light-dark(#000000,#ffffff)}.header-tools-btn.active-popover-trigger{background:light-dark(#808080,#21213b);border-color:var(--accent-color);box-shadow:0 0 10px rgba(var(--accent-color),.6)}.header-tools-btn.active-popover-trigger .header-icon,.header-tools-btn.active-popover-trigger .button-text-initial{fill:var(--text-dark);color:light-dark(#000000,#ffffff)}.popover-trigger-btn .button-text-initial,.header-tools-btn .button-text-initial{display:flex;justify-content:center;align-items:center;width:1.2em;height:1.2em;font-size:1.3em;font-weight:700;color:light-dark(#000000,#ffffff);transition:color var(--transition-speed) ease}.popover-trigger-btn:hover .button-text-initial{color:light-dark(#000000,#ffffff)}.control-group{margin-bottom:1.5rem}.control-group:last-child{margin-bottom:.5rem}.control-group label{display:block;margin-bottom:.5rem;font-weight:700;color:var(--text-medium-grey);font-size:.9rem}.metallic-slider{width:100%;height:8px;background:#555;border-radius:4px;margin:1rem 0 .5rem;cursor:pointer;-webkit-appearance:none;appearance:none}.metallic-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;background:var(--metal-2);border-radius:50%;cursor:pointer;border:2px solid var(--text-dark)}.metallic-slider::-moz-range-thumb{width:18px;height:18px;background:var(--metal-2);border-radius:50%;cursor:pointer;border:2px solid var(--text-dark)}#fontSizeValue{font-weight:700;color:var(--text-light)}.alignment-controls,.text-format-controls{display:flex;justify-content:space-between;gap:.5rem}.alignment-btn,.format-btn{background:#ffffff1a;border:1px solid var(--accent-color);color:var(--text-medium-grey);padding:.6rem 0;border-radius:var(--border-radius);flex-grow:1;margin:0;transition:all var(--transition-speed) ease;cursor:pointer;font-size:.9rem}.format-btn{flex-grow:0;padding:.6rem 2rem;font-weight:700}.format-btn[data-format=italic]{font-style:italic}.format-btn[data-format=underline]{text-decoration:underline}.format-btn[data-format=bold]{font-weight:700}.alignment-btn.active,.format-btn.active{background:var(--accent-color);color:var(--text-dark);font-weight:700}.alignment-btn:hover:not(.active),.format-btn:hover:not(.active){background:rgba(var(--accent-color),.2);color:var(--text-light)}#quotePreview .quote-text{width:100%;font-weight:400;font-style:normal;color:light-dark(#000000,#ffffff);text-decoration:none;transition:all var(--transition-speed) ease}#quotePreview .quote-text.bold{font-weight:700}#quotePreview .quote-text.italic{font-style:italic!important}#quotePreview .quote-text.underline{text-decoration:underline}#quotePreview .author-name{width:100%;margin-top:1rem;font-size:.9em;font-style:italic;color:light-dark(#000000,#ffffff);opacity:.9;transition:all var(--transition-speed) ease}.background-image-selector{margin-bottom:1rem}.background-image-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:.5rem;margin-bottom:1rem}.background-image-option{border:3px solid transparent;border-radius:var(--border-radius);overflow:hidden;cursor:pointer;transition:all var(--transition-speed) ease;aspect-ratio:1 / 1;position:relative}.background-image-option img{width:100%;height:100%;object-fit:cover;display:block}.background-image-option.active{border-color:var(--accent-color);box-shadow:0 0 8px rgba(var(--accent-color),.6)}.background-image-option:hover:not(.active){transform:scale(1.05)}.popover-details{border:none;border-radius:0;margin-bottom:0;background:transparent}.popover-details summary{padding:.8rem 1rem;font-weight:700;color:var(--accent-color);cursor:pointer;outline:none;list-style:none;position:relative;border-bottom:1px solid transparent;transition:border-bottom var(--transition-speed) ease}.popover-details[open] summary{border-bottom-color:var(--section-border-color)}.popover-details summary::-webkit-details-marker{display:none}.popover-details summary:after{content:"+";position:absolute;right:1rem;font-size:1.2em;transition:transform var(--transition-speed) ease}.popover-details[open] summary:after{transform:rotate(45deg)}.popover-details[open]>div{padding:0 1rem 1rem;margin-top:.5rem}.control-section{border:1px solid var(--section-border-color);border-radius:var(--border-radius);margin-bottom:1rem;background:var(--section-bg-color)}.control-section summary{padding:.8rem 1rem;font-weight:700;color:var(--accent-color);cursor:pointer;outline:none;list-style:none;position:relative;border-bottom:1px solid transparent;transition:border-bottom var(--transition-speed) ease}.control-section[open] summary{border-bottom-color:var(--section-border-color)}.control-section summary::-webkit-details-marker{display:none}.control-section summary:after{content:"+";position:absolute;right:1rem;font-size:1.2em;transition:transform var(--transition-speed) ease}.control-section[open] summary:after{transform:rotate(45deg)}.control-section[open]>div{padding:0 1rem 1rem;margin-top:.5rem}.aspect-ratio-controls{display:flex;flex-wrap:wrap;gap:.5rem 1rem}.aspect-ratio-controls label{display:inline-flex;align-items:center;gap:.3rem;font-weight:400;color:var(--text-medium-grey);font-size:.9rem;cursor:pointer}.aspect-ratio-controls input[type=radio]{accent-color:var(--accent-color);cursor:pointer}.header-tools-wrapper{display:flex;gap:.5rem;align-items:center;margin-left:auto;padding-right:1.5rem;position:relative}.design-tools-popover{position:absolute;width:320px;max-height:80vh;overflow-y:auto;background:var(--popover-bg-dark);border:1px solid var(--accent-color);border-radius:var(--border-radius);box-shadow:0 8px 24px #000000b3;padding:1.5rem;z-index:1000;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .3s ease,transform .3s ease,visibility .3s ease}.design-tools-popover.open{opacity:1;visibility:visible;transform:translateY(0)}#editTextPopover{top:90px;right:395px}#backgroundPopover{top:90px;right:327px}#textStylePopover{top:90px;right:258px}#layoutPopover{top:90px;right:190px}@media (max-width: 768px){.design-container{grid-template-columns:1fr;padding:1rem;gap:1rem}.preview-panel{min-height:35vh;order:1}#quotePreview{padding:1rem}select#fontFamily{background-position:right .5rem center;padding-right:2.5rem}.design-tools-popover{right:1rem;left:auto;width:calc(100vw - 2rem);max-width:350px;transform:translateY(10px)}#editTextPopover,#backgroundPopover,#textStylePopover,#layoutPopover{top:60px;right:1rem}[slot=header-right]{justify-content:flex-end;width:100%;padding-right:1rem;padding-top:.5rem;gap:.5rem}.header-tools-btn{margin-top:0;padding:.5rem .8rem;font-size:.8rem;gap:.25em}.header-tools-btn .button-text{max-width:0;opacity:0;margin-left:0}}@media (max-width: 480px){.preview-panel{min-height:40vh}.preview-container{box-shadow:inset 0 0 0 8px light-dark(#e2dfd2,#0f172a);padding:.5rem}.header-controls{flex-wrap:wrap;gap:.5rem;padding:1rem}.right-header-buttons{gap:.3rem}.header-tools-btn{padding:.4rem .6rem;font-size:.7rem}.button-text-initial{font-size:1.1em!important}}@media (max-width: 380px){.preview-panel{min-height:45vh}.right-header-buttons{flex-wrap:wrap;justify-content:flex-end}.header-tools-btn{flex-grow:1;min-width:44px}#quotePreview{padding:.5rem}}