:root{--bg:#0f131c;--surface:#181c24;--surface-2:#262a33;--surface-3:#31353e;--border:#464554;--text:#dfe2ee;--muted:#908fa0;--accent:#6366f1;--accent-hover:#8083ff;--accent-soft:#c0c1ff;--accent-2:#4edea3;--accent-2-bright:#6ffbbe;--secondary:#4cd7f6;--danger:#ffb4ab;--font-display:"Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-body:"Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;--radius:16px;--radius-sm:12px;--gap:16px;--shadow:0 10px 30px -12px #0009;--speed:.16s}*{box-sizing:border-box}body{color:var(--text);font-family:var(--font-body);background:radial-gradient(1200px 600px at 50% -10%, #6366f11f, transparent 60%), radial-gradient(900px 500px at 100% 0%, #4edea312, transparent 55%), var(--bg);min-height:100vh;margin:0}.wrap{max-width:760px;margin:0 auto;padding:24px 16px}.site-header{padding:14px 0 6px}.brand{color:var(--text);align-items:center;gap:10px;text-decoration:none;display:inline-flex}.brand-logo{border-radius:9px;width:34px;height:34px;box-shadow:0 4px 14px -4px #6366f199}.brand-word{font-family:var(--font-display);letter-spacing:.04em;font-size:1.2rem;font-weight:700}.brand-accent{background:linear-gradient(90deg, var(--accent), #a78bfa);color:#0000;-webkit-background-clip:text;background-clip:text}.hero{text-align:center;margin:28px 0}.hero h1{font-family:var(--font-display);letter-spacing:-.03em;background:linear-gradient(90deg, #fff, var(--accent-soft));color:#0000;-webkit-background-clip:text;background-clip:text;margin:0;font-size:2.3rem;font-weight:700}.hero .sub{color:var(--muted);margin-top:8px}.grid{gap:var(--gap);grid-template-columns:repeat(auto-fill,minmax(210px,1fr));display:grid}.tool-card{background:linear-gradient(180deg, var(--surface), var(--bg));border:1px solid var(--border);border-radius:var(--radius);color:var(--text);transition:border-color var(--speed) ease, transform var(--speed) ease, box-shadow var(--speed) ease;animation:rise var(--speed) ease both;flex-direction:column;gap:8px;padding:20px;text-decoration:none;display:flex;position:relative;overflow:hidden}.tool-card:before{content:"";background:linear-gradient(90deg, var(--accent), var(--accent-2));opacity:0;height:2px;transition:opacity var(--speed) ease;position:absolute;inset:0 0 auto}.tool-card:hover{box-shadow:var(--shadow);border-color:#0000;transform:translateY(-3px)}.tool-card:hover:before{opacity:1}.tool-icon{transition:transform var(--speed) ease;font-size:1.7rem}.tool-card:hover .tool-icon{transform:scale(1.12)rotate(-4deg)}.tool-name{font-family:var(--font-display);font-weight:700}.tool-desc{color:var(--muted);font-size:.85rem;line-height:1.4}.card{background:linear-gradient(180deg, var(--surface), var(--bg));border:1px solid var(--border);border-radius:var(--radius);max-width:600px;box-shadow:var(--shadow);animation:rise var(--speed) ease both;flex-direction:column;gap:18px;margin:8px auto 0;padding:26px;display:flex}.tool-title{font-family:var(--font-display);letter-spacing:-.02em;margin:0;font-size:1.35rem;font-weight:700}.card textarea,.card input[type=text],.card input[type=number],.card input:not([type]),.card select{background:var(--surface-container,#0a0e16);width:100%;color:var(--text);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:.95rem;font-family:var(--font-body);transition:border-color var(--speed) ease, box-shadow var(--speed) ease;outline:none;padding:12px 14px}.card textarea{resize:vertical;min-height:110px}.card textarea:focus,.card input:focus,.card select:focus{border-color:var(--accent);box-shadow:0 0 0 3px #6366f147}.card textarea[readonly],.card input[readonly],.output{color:var(--accent-2-bright);font-family:var(--font-mono);animation:fade var(--speed) ease both;background:#0a0e16;font-size:.9rem}.drop{border:2px dashed var(--border);border-radius:var(--radius-sm);text-align:center;color:var(--muted);cursor:pointer;transition:border-color var(--speed) ease, color var(--speed) ease, background var(--speed) ease;padding:30px 16px}.drop:hover{border-color:var(--accent);color:var(--text);background:#6366f10f}.modes{flex-wrap:wrap;gap:10px;display:flex}.modes button{min-width:120px;color:var(--muted);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;font-weight:500;font-family:var(--font-mono);transition:all var(--speed) ease;background:0 0;flex:1;padding:11px;font-size:.88rem}.modes button:hover{color:var(--text);border-color:var(--accent)}.modes button.on{background:linear-gradient(180deg, var(--accent), var(--accent-hover));color:#fff;border-color:#0000}.modes button:active{transform:translateY(1px)}.row{flex-direction:column;gap:8px;display:flex}.row label{color:var(--muted);font-size:.9rem;font-family:var(--font-mono)}.row input[type=range]{width:100%;accent-color:var(--accent)}.go{background:linear-gradient(180deg, var(--accent), var(--accent-hover));color:#fff;border-radius:var(--radius-sm);font-size:.95rem;font-weight:500;font-family:var(--font-mono);cursor:pointer;transition:transform var(--speed) ease, box-shadow var(--speed) ease, filter var(--speed) ease;border:none;padding:14px}.go:hover{filter:brightness(1.08);box-shadow:0 8px 24px -8px #6366f18c}.go:active{transform:translateY(1px)}.go:disabled{opacity:.45;cursor:not-allowed;filter:none;box-shadow:none}.go:focus-visible,.modes button:focus-visible,.dl:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.err{color:var(--danger);margin:0}.result{text-align:center;border-top:1px solid var(--border);animation:fade var(--speed) ease both;padding-top:18px}.result img{border-radius:var(--radius-sm);border:1px solid var(--border);max-width:100%;max-height:260px}.result p{color:var(--muted)}.dl{background:linear-gradient(180deg, var(--accent-2), var(--tertiary-container,#00885d));color:#05271c;border-radius:var(--radius-sm);font-weight:700;font-family:var(--font-mono);transition:transform var(--speed) ease, box-shadow var(--speed) ease;margin-top:8px;padding:11px 20px;text-decoration:none;display:inline-block}.dl:hover{transform:translateY(-1px);box-shadow:0 8px 24px -8px #4edea380}.ad{max-width:600px;min-height:90px;margin:26px auto 0}.ad-placeholder{border:1px dashed var(--border);border-radius:var(--radius-sm);color:var(--muted);font-size:.82rem;font-family:var(--font-mono);background:#ffffff05;justify-content:center;align-items:center;display:flex}footer{text-align:center;color:var(--muted);font-size:.8rem;font-family:var(--font-mono);margin-top:30px;padding-bottom:16px}footer a{color:var(--muted);transition:color var(--speed) ease}footer a:hover{color:var(--text)}.btn-ghost{color:var(--muted);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;font-weight:500;font-family:var(--font-mono);transition:all var(--speed) ease;background:0 0;padding:11px 16px;font-size:.88rem}.btn-ghost:hover{color:var(--text);border-color:var(--accent)}.btn-ghost:active{transform:translateY(1px)}.badge{border-radius:var(--radius-pill);font-family:var(--font-mono);letter-spacing:.04em;border:1px solid var(--border);color:var(--muted);padding:4px 12px;font-size:.72rem;font-weight:500;display:inline-block}.badge-cyan{color:var(--cyan);border-color:color-mix(in srgb, var(--cyan) 40%, transparent)}.badge-green{color:var(--green);border-color:color-mix(in srgb, var(--green) 40%, transparent)}.badge-violet{color:var(--violet);border-color:color-mix(in srgb, var(--violet) 40%, transparent)}.badge-default{color:var(--muted)}@keyframes rise{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes fade{0%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}html,body,#root{min-height:100%;margin:0}