@import"https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Inter:wght@300;400;500;600&display=swap";*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0}:root{font-family:Inter,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;color:gold;background-color:#1a0022}body{margin:0;padding:0;width:100vw;height:100vh;overflow:hidden}#root{width:100%;height:100%}.app-container{width:100%;height:100%;position:relative}.canvas-wrapper{width:100%;height:100%;position:absolute;top:0;left:0;z-index:1}.overlay{position:absolute;bottom:50px;left:50px;z-index:2;pointer-events:none;background:#2c003e66;padding:12px 18px;border-radius:50px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);box-shadow:0 4px 16px #0003;display:flex;align-items:center;gap:12px;transition:opacity .2s ease}h1{font-family:Inter,sans-serif;font-size:1.1em;line-height:1;margin:0;color:#fff;font-weight:500;letter-spacing:.5px}p{color:#e6e6fa;font-size:1em;margin-top:8px;margin-bottom:0;font-weight:300;letter-spacing:1px;text-transform:uppercase}.overlay>*{pointer-events:auto}.overlay a svg{fill:#fff;transition:fill .3s ease}.overlay a:hover svg{fill:gold}.overlay-preview{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;display:flex;justify-content:center;z-index:2}.overlay-preview--center{align-items:center}.overlay-preview--bottom{align-items:flex-end;padding-bottom:10%;box-sizing:border-box}.overlay-preview h2{font-family:Inter,sans-serif;font-weight:500;color:#ffffffe6;font-size:5vmin;text-shadow:0 10px 20px rgba(0,0,0,.5);margin:0;text-align:center;white-space:pre-wrap;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);padding:10px 20px;border-radius:20px}.status-banner{position:absolute;top:24px;left:50%;transform:translate(-50%);z-index:6;min-width:min(560px,calc(100vw - 32px));max-width:calc(100vw - 32px);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px;border-radius:18px;border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 18px 48px #0000003d}.status-banner--info{background:#161a27c7}.status-banner--success{background:#123327c7}.status-banner--error{background:#4a1720d1}.status-banner span{color:#fff;font-size:.95rem}.status-banner button{flex-shrink:0;background:transparent;color:#ffffffe6;border:0;cursor:pointer;font:inherit}.status-banner button:hover{color:gold}.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}.dock-root{position:fixed;inset:auto 0 0;z-index:5;display:flex;flex-direction:column;align-items:center;pointer-events:none;transition:opacity .3s ease,visibility .3s ease}.dock-root--hidden{opacity:0;visibility:hidden}.dock{display:flex;gap:2px;padding:6px;margin-bottom:14px;background:#0d0b16c7;border:1px solid rgba(255,255,255,.08);border-radius:16px;box-shadow:0 12px 32px #00000073;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);pointer-events:auto}.dock__tab{display:flex;align-items:center;gap:7px;padding:8px 12px;border:0;border-radius:11px;background:transparent;color:#b9b9d4;cursor:pointer;font:inherit;font-size:.7rem;font-weight:500;letter-spacing:.3px;transition:background .18s ease,color .18s ease,transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s ease}.dock__tab svg{transition:transform .2s cubic-bezier(.34,1.56,.64,1)}.dock__tab:hover{background:#ffffff12;color:gold}.dock__tab:hover svg{transform:scale(1.15)}.dock__tab:active{transform:scale(.94)}.dock__tab:focus-visible{outline:2px solid #FFD700;outline-offset:2px}.dock__tab[aria-selected=true]{background:linear-gradient(135deg,gold,#d4af37);color:#17001f;box-shadow:0 4px 14px #ffd70047}.dock__label{font-weight:600;text-transform:uppercase}.dock__panel{pointer-events:auto;width:min(580px,calc(100vw - 24px));max-height:min(50vh,460px);overflow-y:auto;margin-bottom:10px;padding:14px 16px;background:#0d0b16e0;border:1px solid rgba(255,255,255,.08);border-radius:16px;box-shadow:0 22px 54px #0000008c;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);color:#e4e4f2;scrollbar-width:thin;scrollbar-color:rgba(255,215,0,.35) transparent;animation:dock-panel-in .32s cubic-bezier(.22,1,.36,1)}@keyframes dock-panel-in{0%{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.dock__panel--closing{animation:dock-panel-out .26s cubic-bezier(.55,0,.55,.2) forwards}@keyframes dock-panel-out{to{opacity:0;transform:translateY(10px) scale(.98)}}.dock__panel::-webkit-scrollbar{width:8px}.dock__panel::-webkit-scrollbar-thumb{background:#ffd70059;border-radius:4px}.panel-grid{display:flex;flex-direction:column;gap:14px}.panel-section{display:flex;flex-direction:column;gap:10px}.panel-section--actions{flex-direction:row;flex-wrap:wrap;gap:8px}.panel-title{font-size:.62rem;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:#ffd700cc}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.panel-action{background:#ffffff12;color:#d8d8ec;border:1px solid rgba(255,255,255,.12);border-radius:9px;padding:5px 11px;font:inherit;font-size:.74rem;cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease}.panel-action:hover{background:#ffd7001f;border-color:#ffd70099;color:gold}.panel-hint{font-size:.72rem;color:#9c9cb8;margin:0;text-transform:none;letter-spacing:.2px}.palette-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:8px}.swatch{position:relative;display:block;aspect-ratio:1;border-radius:10px;border:1px solid rgba(255,255,255,.12);overflow:hidden;cursor:pointer;transition:border-color .15s ease,transform .18s cubic-bezier(.34,1.56,.64,1)}.swatch:hover{border-color:#ffd700b3;transform:scale(1.1)}.swatch input[type=color]{position:absolute;inset:-10px;width:calc(100% + 20px);height:calc(100% + 20px);border:0;padding:0;cursor:pointer;background:transparent}.style-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.style-picker button{padding:8px 6px;border-radius:10px;border:1px solid rgba(255,255,255,.1);background:#ffffff0a;color:#cfcfe4;font:inherit;font-size:.78rem;font-weight:500;cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease,transform .15s ease}.style-picker button:hover{background:#ffd70014;border-color:#ffd70066;transform:translateY(-1px)}.style-picker button[aria-pressed=true]{background:linear-gradient(135deg,gold,#d4af37);border-color:gold;color:#17001f;font-weight:600}.slider{display:flex;flex-direction:column;gap:4px}.slider__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}.slider__label{font-size:.76rem;color:#cfcfe4}.slider__value{font-size:.72rem;font-variant-numeric:tabular-nums;color:#ffd700e6;background:#ffd70012;border-radius:6px;padding:1px 7px}.slider input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:2px;background:linear-gradient(90deg,#ffd700d9,#d4af374d);outline:none;cursor:pointer}.slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid #FFD700;box-shadow:0 2px 8px #0006;transition:transform .15s cubic-bezier(.34,1.56,.64,1)}.slider input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.25)}.slider input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid #FFD700;box-shadow:0 2px 8px #0006}.slider input[type=range]:focus-visible{outline:2px solid #FFD700;outline-offset:3px}.segmented-wrap{display:flex;flex-direction:column;gap:4px}.control-label{font-size:.72rem;color:#9c9cb8}.segmented{display:inline-flex;gap:3px;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:3px}.segmented button{flex:1;padding:6px 11px;border-radius:8px;border:0;background:transparent;color:#c2c2da;font:inherit;font-size:.76rem;font-weight:500;cursor:pointer;transition:background .15s ease,color .15s ease}.segmented button:hover{color:gold}.segmented button[aria-pressed=true]{background:linear-gradient(135deg,gold,#d4af37);color:#17001f;font-weight:600}.segmented button:focus-visible{outline:2px solid #FFD700;outline-offset:1px}.export-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.text-input{width:100%;padding:8px 11px;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:#ffffff0d;color:#fff;font:inherit;font-size:.84rem;outline:none;transition:border-color .15s ease,box-shadow .15s ease}.text-input::placeholder{color:#8585a2}.text-input:focus{border-color:#ffd700b3;box-shadow:0 0 0 3px #ffd7001f}.button{padding:8px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:#ffffff0d;color:#e4e4f2;font:inherit;font-size:.8rem;font-weight:500;cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease,transform .15s ease}.button:hover:not(:disabled){background:#ffd7001a;border-color:#ffd70099;color:gold}.button:active:not(:disabled){transform:scale(.97)}.button:disabled{opacity:.55;cursor:not-allowed}.button--primary{background:linear-gradient(135deg,gold,#d4af37);border-color:gold;color:#17001f;font-weight:600}.button--primary:hover:not(:disabled){background:linear-gradient(135deg,#ffdf4d,#e0b83e);border-color:#ffe27a;color:#17001f}.button--large{flex:1;min-width:190px;padding:11px 20px;font-size:.88rem}.button:focus-visible{outline:2px solid #FFD700;outline-offset:2px}