:root{--color-primary: #fbf8ff;--color-primary-hover: #fff;--color-secondary: #2d2f31;--color-secondary-hover: #38393b;--color-background-page: #06020a;--color-background-surface: #151519;--color-background-surface-hover: #212325;--color-background-input: #17191a;--color-text-primary: #e0e0e0;--color-text-secondary: #b0b3b8;--color-text-tertiary: #848485;--color-success: #2db132;--color-success-hover: #249428;--color-warning: #ff9800;--color-danger: #f44336;--color-danger-hover: #d32f2f;--color-white: #fff;--color-toast-background: #2a2f358a;--color-border: #282a2d;--color-link: #2c92ff;--color-focus-border: #c1cad3;--color-focus-shadow: #7f828799;--color-background-info-box: #0b0d0e;--font-body: "Noto Sans", sans-serif;--font-heading: "Poppins", sans-serif;--radius-card: 16px;--radius-button: 999px;--radius-input: 4px;--z-index-banner: 500;--z-index-dropdown: 600;--z-index-back-to-top: 600;--z-index-popup: 700;--z-index-toast: 1000}*,*:before,*:after{box-sizing:border-box}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 16px;border:none;border-radius:var(--radius-button);font-family:var(--font-body);font-weight:700;text-align:center;cursor:pointer;text-decoration:none;transition:background-color .2s ease-in-out,transform .15s ease-in-out,box-shadow .2s ease-in-out}.btn:active{transform:scale(.98)}.btn--primary{background-color:var(--color-primary);color:var(--color-background-page)}.btn--secondary{background-color:var(--color-secondary);color:var(--color-white)}.btn--danger{background-color:var(--color-danger);color:var(--color-white)}.btn--success{background-color:var(--color-success);color:var(--color-white)}.btn .material-symbols-rounded{font-size:1.32rem}.delete-link-btn,.copy-link-btn{padding:8px}.delete-link-btn .material-symbols-rounded,.copy-link-btn .material-symbols-rounded{font-size:1.43rem}.card{background-color:var(--color-background-surface);border-radius:var(--radius-card);padding:20px}.card__title{font-weight:700;color:var(--color-white);margin:0;font-family:Poppins,sans-serif}.card__author{color:var(--color-text-secondary);font-size:1rem;margin-bottom:10px}.card__description{color:var(--color-text-primary);font-size:1rem;line-height:1.5;margin-bottom:15px;word-wrap:break-word;word-break:break-word}.form-group{margin-bottom:15px}.form-group label{display:block;margin-bottom:5px;font-weight:500}.card>.form-group>label{font-size:1.1rem;margin-bottom:8px}.form-control{width:100%;padding:8px 12px;border:1px solid var(--color-border);border-radius:var(--radius-input);background-color:var(--color-background-input);color:var(--color-text-primary);font-family:inherit;font-size:1rem;transition:box-shadow .4s,border-color .4s}.form-control:focus,.form-control:focus:hover{outline:none;border-color:var(--color-focus-border);box-shadow:0 0 15px var(--color-focus-shadow)}.form-control.invalid{border-color:var(--color-danger);box-shadow:0 0 8px var(--color-danger-hover)}.form-control.invalid:focus{border-color:var(--color-danger);box-shadow:0 0 8px var(--color-danger-hover)}.toggle-container{display:flex;align-items:center;gap:10px;margin-top:15px;-webkit-user-select:none;user-select:none}.toggle-container label[for=advancedToggle],.toggle-container label[for=amoledToggle]{cursor:pointer}.switch{position:relative;display:inline-block;width:44px;height:24px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:var(--color-secondary);transition:.4s;border-radius:34px}.slider:before{position:absolute;content:"";height:16px;width:16px;left:4px;bottom:4px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:var(--color-primary)}input:checked+.slider:before{transform:translate(20px);background-color:#000}html{background-color:var(--color-background-page);font-size:14px;-webkit-tap-highlight-color:transparent}body{font-family:var(--font-body);max-width:1200px;margin:0 auto;padding:20px 20px 75px;color:var(--color-text-primary)}header{display:flex;flex-direction:column}h1{text-align:center;color:var(--color-white);padding-top:40px;font-family:var(--font-heading);font-size:2.29rem;display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:50px}h1 img{height:120px;max-width:100%}.pills-nav{display:flex;gap:10px;overflow-x:auto;margin-bottom:20px;-ms-overflow-style:none;scrollbar-width:none}.pills-nav::-webkit-scrollbar{display:none}.pill{display:inline-block;padding:8px 20px;border-radius:var(--radius-button);background-color:var(--color-secondary);color:var(--color-text-primary);text-decoration:none;font-weight:500;white-space:nowrap;transition:background-color .2s ease-in-out,color .2s ease-in-out}.pill.active{background-color:var(--color-primary);color:var(--color-background-page);font-weight:700}.fixed-banner{position:fixed;top:0;left:0;width:100%;z-index:var(--z-index-banner);transform:translateY(-100%);opacity:0;transition:transform .1s ease-in-out,opacity .1s ease-in-out;display:flex;justify-content:flex-end;align-items:center;padding:10px 0;height:38px;box-sizing:content-box}.fixed-banner:after{content:"";position:absolute;top:0;left:0;right:0;height:116px;background:var(--color-background-page);-webkit-mask:linear-gradient(to bottom,black 5%,rgb(0 0 0 / 90%) 25%,rgb(0 0 0 / 70%) 50%,transparent 100%) no-repeat 0 0 / 100% 100%;mask:linear-gradient(to bottom,black 5%,rgb(0 0 0 / 90%) 25%,rgb(0 0 0 / 70%) 50%,transparent 100%) no-repeat 0 0 / 100% 100%;pointer-events:none}.fixed-banner.show{transform:translateY(0);opacity:1}.fixed-banner.hide{transform:translateY(-100%);opacity:0}.back-to-top{position:fixed;bottom:20px;right:20px;z-index:var(--z-index-back-to-top);box-shadow:0 4px 15px 2px #0000007f;padding:8px;opacity:0;visibility:hidden;transform:translateY(50px);pointer-events:none;transition:opacity .3s ease-in-out,transform .3s ease-in-out,visibility .3s}.back-to-top.show{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}#toast{visibility:hidden;width:fit-content;position:fixed;left:50%;top:90px;transform:translate(-50%);background-color:var(--color-toast-background);-webkit-backdrop-filter:blur(13px);backdrop-filter:blur(13px);color:var(--color-white);text-align:center;border-radius:var(--radius-button);padding:12px 24px;font-size:1rem;box-shadow:0 4px 15px #0000004d;transition:visibility 0s,opacity .3s ease-in-out;opacity:0;z-index:var(--z-index-toast)}#toast.show{visibility:visible;opacity:1;animation:slideDown .3s ease-out forwards}@keyframes slideDown{0%{transform:translate(-50%) translateY(-75px);opacity:0}to{transform:translate(-50%) translateY(0);opacity:1}}.popup-container{display:none;position:fixed;inset:0;background-color:#000000b3;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:var(--z-index-popup);justify-content:center;align-items:center}.popup-content{max-width:500px;width:90%;color:var(--color-text-primary);margin:0 15px}.popup-title{font-size:1.29rem;font-weight:700;margin-bottom:20px;color:var(--color-white)}.popup-message{margin-bottom:15px;color:var(--color-text-primary)}.popup-message a{color:var(--color-link);text-decoration:none}.popup-message a:hover{text-decoration:underline}.popup-info-box{background-color:var(--color-background-info-box);border-left:4px solid var(--color-primary);padding:10px;margin-bottom:15px;font-size:1rem}.popup-info-box .form-control{font-family:monospace;font-size:.9rem}.popup-buttons{display:flex;justify-content:flex-end;gap:10px}#toast .material-symbols-rounded,.popup-title .material-symbols-rounded{vertical-align:sub;margin-right:8px;font-size:1.2em}@media(pointer:fine){.pill:not(.active):hover{background-color:var(--color-secondary-hover)}.dropdown-menu ul li a:hover{background-color:var(--color-background-surface-hover)}.clear-button:hover{color:var(--color-danger-hover)}.form-control:hover{box-shadow:0 0 5px var(--color-focus-shadow)}.btn--primary:hover{background-color:var(--color-primary-hover);box-shadow:0 0 16px 2px #dcdcdc99}.btn--secondary:hover{background-color:var(--color-secondary-hover)}.btn--danger:hover{background-color:var(--color-danger-hover)}.btn--success:hover{background-color:var(--color-success-hover)}.theme-card:hover{transform:translateY(-4px)}}@media(max-width:600px){#generateBtn{width:100%}.output-header{flex-direction:column;align-items:flex-start;gap:20px}.output-actions{flex-direction:column;width:100%;margin-top:0}}
