*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:Libre Franklin,system-ui,sans-serif;min-height:100vh;background-color:#1a1a1e;background-image:radial-gradient(ellipse at 20% 20%,rgba(80,80,100,.18) 0%,transparent 60%),radial-gradient(ellipse at 80% 80%,rgba(60,60,80,.14) 0%,transparent 60%);color:#d4d4d8;padding:24px 16px}.wrapper{display:flex;justify-content:center;align-items:flex-start;min-height:calc(100vh - 48px)}.container{width:100%;max-width:640px;background:#24242ad9;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.07);border-radius:14px;padding:28px 28px 24px;box-shadow:0 4px 24px #00000073,0 1px #ffffff0a inset}h1{text-align:center;font-size:1.35rem;font-weight:600;letter-spacing:.03em;color:#e4e4e7;margin-bottom:24px}.form-group{margin-bottom:16px}label{display:block;margin-bottom:6px;font-size:.78rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:#a1a1aa}textarea{width:100%;padding:10px 12px;background:#0f0f12b3;border:1px solid rgba(255,255,255,.08);border-radius:8px;color:#e4e4e7;font-family:JetBrains Mono,Fira Mono,monospace;font-size:.82rem;line-height:1.6;resize:vertical;min-height:140px;transition:border-color .2s;outline:none}textarea::placeholder{color:#52525b}textarea:focus{border-color:#a1a1aa59;background:#0f0f12e6}textarea[readonly]{cursor:default;color:#a1a1aa}button#copyButton{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:10px 0;background:#ffffff0f;color:#d4d4d8;border:1px solid rgba(255,255,255,.1);border-radius:8px;font-size:.9rem;font-weight:500;cursor:pointer;transition:background .2s,border-color .2s,color .2s;margin-bottom:20px;letter-spacing:.02em}button#copyButton:hover{background:#ffffff1c;border-color:#ffffff2e;color:#f4f4f5}button#copyButton:active{background:#ffffff0a}.btn-icon{font-size:1.05rem;line-height:1}.preview-section{border-top:1px solid rgba(255,255,255,.06);padding-top:18px}.preview-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-bottom:12px}.section-label{font-size:.78rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:#a1a1aa;margin-bottom:0}.font-upload{display:flex;align-items:center;gap:8px}.font-label{font-size:.75rem;color:#71717a;text-transform:none;letter-spacing:0;font-weight:400;margin-bottom:0}input[type=file]#fontInput{font-size:.75rem;color:#71717a;cursor:pointer;max-width:160px}input[type=file]#fontInput::file-selector-button{padding:4px 10px;background:#ffffff0f;border:1px solid rgba(255,255,255,.1);border-radius:6px;color:#a1a1aa;font-size:.75rem;cursor:pointer;transition:background .2s;margin-right:8px}input[type=file]#fontInput::file-selector-button:hover{background:#ffffff1c}#inputField{width:100%;padding:10px 12px;margin-bottom:12px;background:#0f0f1299;border:1px solid rgba(255,255,255,.08);border-radius:8px;color:#e4e4e7;font-size:1.1rem;outline:none;transition:border-color .2s}#inputField::placeholder{color:#3f3f46}#inputField:focus{border-color:#a1a1aa4d}#pixiContainer{width:100%;height:200px;background:#0a0a0db3;border:1px solid rgba(255,255,255,.06);border-radius:10px;display:flex;justify-content:center;align-items:center;overflow:hidden}@media (max-width: 480px){body{padding:12px 10px}.container{padding:20px 16px 18px}h1{font-size:1.15rem}.preview-header{flex-direction:column;align-items:flex-start}input[type=file]#fontInput{max-width:100%}}