*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:focus-visible{outline:2px solid #c8a64e;outline-offset:2px}html,body,#root{width:100%;height:100%;overflow:hidden}body{font-family:Futura,Futura PT,-apple-system,BlinkMacSystemFont,sans-serif;background:#1a1a1a;color:#e0e0e0}.app{position:relative;width:100%;height:100%}.floating-link{position:absolute;z-index:10;display:flex;align-items:center;gap:8px;padding:8px 14px;background:#0009;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:8px;border:1px solid rgba(255,255,255,.1);text-decoration:none;color:#ccc;font-size:14px;font-weight:400;letter-spacing:.02em;transition:background .15s,color .15s}.floating-link:hover{background:#000c;color:#fff}.site-link{top:16px;right:16px}.site-logo{width:26px;height:26px;filter:brightness(0) invert(1)}.svg-layer{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;overflow:hidden}.svg-layer img{min-width:100%;min-height:100%;width:auto;height:auto;object-fit:cover;opacity:0;transition:opacity .4s ease}.svg-layer .svg-layer-back{position:absolute}.svg-layer img.fading-out{opacity:0}.svg-layer img.fading-in{opacity:1}.controls{position:absolute;top:16px;left:16px;z-index:10;display:flex;flex-direction:column;gap:10px;padding:16px;background:#000000bf;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:12px;border:1px solid rgba(255,255,255,.1);min-width:260px;max-height:calc(100vh - 32px);overflow-y:auto}.controls h1{font-size:16px;font-weight:600;letter-spacing:.02em;margin-bottom:2px}.slug-row{display:flex;gap:6px}.slug-row input[type=text]{flex:1;min-width:0}.slug-row .btn-random{flex-shrink:0;padding:6px 12px}.control-group{display:flex;flex-direction:column;gap:4px}.control-group label{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.05em;color:#aaa}.control-group input[type=text],.control-group input[type=number]{background:#ffffff1a;border:1px solid rgba(255,255,255,.15);border-radius:6px;padding:6px 10px;color:#e0e0e0;font-size:13px;transition:border-color .2s}.control-group input[type=text]:focus,.control-group input[type=number]:focus{border-color:#fff6}.control-group input[type=range]{width:100%;accent-color:#c8a64e}.range-row{display:flex;align-items:center;gap:8px}.range-row input[type=range]{flex:1}.range-value{font-size:12px;font-variant-numeric:tabular-nums;min-width:36px;text-align:right;color:#ccc}.radio-group{display:flex;gap:6px}.radio-group button{flex:1;padding:5px 0;background:#ffffff14;border:1px solid rgba(255,255,255,.15);border-radius:6px;color:#ccc;font-size:13px;cursor:pointer;transition:all .15s}.radio-group button:hover{background:#ffffff1f}.radio-group button.active{background:#c8a64e4d;border-color:#c8a64e;color:#fff}.color-palette{display:flex;flex-wrap:wrap;gap:4px}.color-swatch{width:28px;height:28px;border-radius:6px;border:2px solid transparent;cursor:pointer;transition:border-color .15s,transform .15s}.color-swatch:hover{transform:scale(1.1)}.color-swatch.active{border-color:#fff}.color-input-row{display:flex;align-items:center;gap:6px;margin-top:4px}.color-input-row input[type=color]{width:28px;height:28px;border:none;border-radius:6px;cursor:pointer;background:transparent;padding:0}.color-input-row span{font-size:11px;color:#888}.scheme-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#ffffff1a;border:1px solid rgba(255,255,255,.15);border-radius:6px;padding:6px 28px 6px 10px;color:#e0e0e0;font-size:13px;cursor:pointer;transition:border-color .2s;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23aaa'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}.scheme-select:focus{border-color:#fff6}.scheme-select option{background:#2a2a2a;color:#e0e0e0}.scheme-preview{display:flex;gap:3px;margin-top:2px}.scheme-dot{width:14px;height:14px;border-radius:50%;border:1px solid rgba(255,255,255,.15);flex-shrink:0}.button-row{display:flex;gap:8px;margin-top:4px}.btn{flex:1;padding:8px 12px;border:1px solid rgba(255,255,255,.2);border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s}.btn-random{background:#5a8a8e4d;color:#8ed4d8;border-color:#5a8a8e66}.btn-random:hover{background:#5a8a8e80}.btn-download{background:#c8a64e4d;color:#e8d49e;border-color:#c8a64e66}.btn-download:hover{background:#c8a64e80}.layers-section{display:flex;flex-direction:column;gap:6px}.section-label{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.05em;color:#aaa}.layer-card{background:#ffffff0d;border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:8px 10px;display:flex;flex-direction:column;gap:6px}.layer-header{display:flex;align-items:center;gap:6px}.layer-color-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}.layer-name{font-size:12px;font-weight:500;color:#ddd;flex:1}.layer-meta{font-size:10px;color:#777}.layer-controls{display:flex;flex-direction:column;gap:4px}.layer-color-row{display:flex;align-items:center;gap:6px}.layer-color-row input[type=color]{width:22px;height:22px;border:none;border-radius:4px;cursor:pointer;background:transparent;padding:0;flex-shrink:0}.color-palette.compact{gap:2px}.color-swatch.small{width:18px;height:18px;border-radius:4px;border-width:1.5px}.layer-controls .range-row{gap:6px}.layer-controls .range-row input[type=range]{accent-color:#c8a64e}.doc-link{bottom:16px;right:16px;gap:6px}.doc-link svg{flex-shrink:0}.btn-toggle-details{width:100%;padding:6px 0;background:#ffffff0f;border:1px solid rgba(255,255,255,.1);border-radius:6px;color:#999;font-size:12px;font-weight:500;letter-spacing:.03em;cursor:pointer;transition:background .15s,color .15s}.btn-toggle-details:hover{background:#ffffff1a;color:#ccc}.details-section{display:flex;flex-direction:column;gap:10px}