:root{--primary:#85c742;--primary-dim:#6ba832;--primary-glow:#85c74233;--bg-base:#0a0a0a;--bg-surface:#141414;--bg-elevated:#1e1e1e;--text-bright:#fff;--text-dim:#999;--text-muted:#555;--border-color:#2a2a2a;--border-dim:#1f1f1f;--radius:10px}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg-base);min-height:100vh;color:var(--text-bright);flex-direction:column;align-items:center;font-family:Inter,system-ui,-apple-system,sans-serif;display:flex}header{text-align:center;padding:48px 20px 32px}.logo-row{justify-content:center;align-items:center;gap:16px;display:flex}.logo-icon{background:var(--primary);color:#0a0a0a;width:48px;height:48px;box-shadow:0 0 30px var(--primary-glow);border-radius:12px;justify-content:center;align-items:center;font-size:28px;font-weight:800;display:flex}.logo-text{letter-spacing:-.02em;background:linear-gradient(135deg, var(--primary) 0%, #a4e06c 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:32px;font-weight:800}.subtitle{color:var(--text-muted);max-width:420px;margin-top:8px;margin-left:auto;margin-right:auto;font-size:14px;font-weight:400}main{width:100%;max-width:560px;padding:0 20px 40px}.theme-switcher{z-index:100;-webkit-overflow-scrolling:touch;scrollbar-width:none;align-items:center;gap:8px;max-width:calc(100vw - 40px);display:flex;position:fixed;top:16px;right:20px;overflow-x:auto}.theme-switcher::-webkit-scrollbar{display:none}.theme-switcher-label{letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);flex-shrink:0;margin-right:4px;font-size:11px;font-weight:600}.theme-dot{border:2px solid var(--border-dim);cursor:pointer;border-radius:50%;flex-shrink:0;width:22px;height:22px;padding:0;transition:border-color .2s,transform .2s,box-shadow .2s}.theme-dot:hover{transform:scale(1.15)}.theme-dot.active{border-color:var(--text-bright);box-shadow:0 0 8px #ffffff26}@media (width<=600px){.theme-switcher{max-width:calc(100vw - 24px);top:10px;right:12px}}.theme-dot[data-theme=dark]{background:#0a0a0a}.theme-dot[data-theme=highcontrast]{background:#000;box-shadow:inset 0 0 0 1px #333}.theme-dot[data-theme=dracula]{background:#1a0e2e}.theme-dot[data-theme=nord]{background:#2e3440}.theme-dot[data-theme=solarized]{background:#002b36}.theme-dot[data-theme=monokai]{background:#272822}.theme-dot[data-theme=gruvbox]{background:#282828}.theme-dot[data-theme=tokyonight]{background:#1a1b2e}.theme-dot[data-theme=catppuccin]{background:#1e1e2e}.theme-dot[data-theme=rosepine]{background:#191724}.theme-dot[data-theme=onedark]{background:#282c34}.theme-dot[data-theme=synthwave]{background:#1a0a42}.theme-dot[data-theme=matrix]{background:#000800}.theme-dot[data-theme=desert]{background:#261e10}.theme-dot[data-theme=iceberg]{background:#141c22}.theme-dot[data-theme=cobalt]{background:#002240}.card{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius);margin-bottom:20px;overflow:hidden}.card-header{background:var(--primary);justify-content:center;align-items:center;gap:8px;height:40px;display:flex;position:relative}.card-header-dots{gap:6px;display:flex;position:absolute;left:12px}.card-header-dots span{background:#00000040;border-radius:50%;width:10px;height:10px}.card-header-title{letter-spacing:.12em;text-transform:uppercase;color:#0a0a0a;font-size:11px;font-weight:700}.card-body{padding:24px}.field{margin-bottom:20px}.field:last-child{margin-bottom:0}.field-label{letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim);margin-bottom:8px;font-size:11px;font-weight:600;display:block}.input{background:var(--bg-base);border:1px solid var(--border-dim);border-radius:var(--radius);width:100%;color:var(--text-bright);outline:none;padding:12px 16px;font-family:inherit;font-size:15px;transition:border-color .2s,box-shadow .2s}.input::placeholder{color:var(--text-muted)}.input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow)}.select{background:var(--bg-base);border:1px solid var(--border-dim);border-radius:var(--radius);width:100%;color:var(--text-bright);cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2385c742' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");background-position:right 12px center;background-repeat:no-repeat;outline:none;padding:10px 36px 10px 14px;font-family:inherit;font-size:14px;transition:border-color .2s,box-shadow .2s}.select:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow)}.select option{background:var(--bg-base);color:var(--text-bright)}.grid-2{grid-template-columns:1fr 1fr;gap:16px;display:grid}.color-row{align-items:center;gap:12px;display:flex}.color-picker-wrap{border:2px solid var(--border-dim);border-radius:8px;flex-shrink:0;width:40px;height:40px;position:relative;overflow:hidden}.color-picker-wrap input[type=color]{cursor:pointer;border:none;width:48px;height:48px;position:absolute;top:-4px;left:-4px}.color-hex{color:var(--text-dim);font-family:Inter,monospace;font-size:13px}.checkbox-grid{grid-template-columns:1fr 1fr;gap:12px;display:grid}.checkbox-wrap{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:10px;display:flex}.checkbox-wrap input[type=checkbox]{opacity:0;width:0;height:0;position:absolute}.checkbox-box{border:1.5px solid var(--border-dim);background:var(--bg-base);border-radius:5px;flex-shrink:0;justify-content:center;align-items:center;width:20px;height:20px;transition:all .2s;display:flex}.checkbox-box:after{content:"";background:var(--primary);opacity:0;border-radius:3px;width:10px;height:10px;transition:opacity .2s}.checkbox-wrap input:checked+.checkbox-box{border-color:var(--primary);box-shadow:0 0 10px var(--primary-glow)}.checkbox-wrap input:checked+.checkbox-box:after{opacity:1}.checkbox-wrap:hover .checkbox-box{border-color:var(--primary)}.checkbox-text{color:var(--text-dim);font-size:13px;transition:color .2s}.checkbox-wrap:hover .checkbox-text,.checkbox-wrap input:checked~.checkbox-text{color:var(--text-bright)}.fade-row{align-items:center;gap:16px;display:flex}.fade-row .checkbox-wrap{flex-shrink:0}.fade-input{flex:1}.fade-input .input{text-align:center;padding:8px 12px;font-size:13px}.fade-input .input:disabled{opacity:.3;cursor:not-allowed}.btn-generate{border:2px solid var(--primary);width:100%;color:var(--primary);letter-spacing:.1em;text-transform:uppercase;border-radius:var(--radius);cursor:pointer;background:0 0;padding:14px;font-family:inherit;font-size:14px;font-weight:700;transition:all .3s;position:relative;overflow:hidden}.btn-generate:hover{background:var(--primary);color:#0a0a0a;box-shadow:0 0 30px var(--primary-glow), 0 0 60px #85c74226;transform:translateY(-1px)}.btn-generate:active{transform:translateY(0)}.url-output{margin-top:20px;display:none}.url-output.visible{display:block}.url-label{letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim);text-align:center;margin-bottom:10px;font-size:11px;font-weight:600}.url-box{border:1px dashed var(--primary);border-radius:var(--radius);cursor:pointer;word-break:break-all;color:var(--primary);background:#00000080;padding:14px 16px;font-size:12px;transition:background .2s,box-shadow .2s;position:relative}.url-box:hover{background:var(--primary-glow);box-shadow:0 0 20px var(--primary-glow)}.url-copied{background:var(--primary);color:#0a0a0a;opacity:0;pointer-events:none;border-radius:6px;padding:6px 16px;font-size:12px;font-weight:600;transition:opacity .3s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.url-copied.show{opacity:1}.preview-area{border:1px solid var(--border-dim);border-radius:var(--radius);background:#0000004d;min-height:120px;padding:20px;position:relative;overflow:hidden}.preview-area:before{content:"";opacity:.3;background:repeating-conic-gradient(#1a1a1a 0% 25%,#0000 0% 50%) 0 0/20px 20px;position:absolute;inset:0}.preview-messages{z-index:1;position:relative}.preview-msg{margin-bottom:8px;line-height:1.4}.preview-msg:last-child{margin-bottom:0}.preview-username{font-weight:700}.preview-colon{margin-right:6px}.preview-text{font-weight:400}.error-msg{color:#f55;text-align:center;margin-top:12px;font-size:13px;display:none}.error-msg.visible{display:block}footer{text-align:center;width:100%;max-width:560px;margin:0 auto;padding:32px 20px}footer p{color:var(--text-muted);font-size:12px}footer a{color:var(--text-dim);text-decoration:none}footer a:hover{color:var(--primary)}@media (width<=480px){header{padding:32px 16px 24px}.logo-text{font-size:24px}.card-body{padding:16px}.grid-2{grid-template-columns:1fr}}.tutorial-intro{color:var(--text-dim);margin-bottom:20px;font-size:13px;line-height:1.7}.tutorial-method{border-bottom:1px solid var(--border-dim);margin-bottom:24px;padding-bottom:24px}.tutorial-method:last-of-type{border-bottom:none;margin-bottom:0;padding-bottom:0}.tutorial-method-title{color:var(--text-bright);margin-bottom:12px;font-size:13px;font-weight:700}.tutorial-steps{color:var(--text-dim);padding-left:22px;font-size:13px;line-height:1.7}.tutorial-steps li{margin-bottom:6px}.tutorial-steps li:last-child{margin-bottom:0}.tutorial-steps strong{color:var(--text-bright)}.tutorial-steps code{background:var(--bg-base);border-radius:3px;padding:1px 6px;font-size:12px}.tutorial-steps kbd{background:var(--bg-elevated);border:1px solid var(--border-dim);border-bottom-width:2px;border-radius:4px;padding:1px 6px;font-family:inherit;font-size:11px}.tutorial-note{border-top:1px solid var(--border-dim);color:var(--text-muted);margin-top:20px;padding-top:16px;font-size:12px;line-height:1.6}.tutorial-spoiler{border-top:1px solid var(--border-dim);margin-top:24px;padding-top:16px}.tutorial-spoiler summary{color:var(--text-muted);cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:6px;font-size:13px;font-weight:600;list-style:none;display:flex}.tutorial-spoiler summary:before{content:"▶";font-size:9px;transition:transform .2s}.tutorial-spoiler[open] summary:before{transform:rotate(90deg)}.tutorial-spoiler summary:hover{color:var(--text-dim)}.tutorial-spoiler-content{margin-top:16px}