:root{--ink: #071512;--panel: #0d2420;--panel-2: #12332d;--line: rgba(232, 245, 240, .12);--fog: #c5d7d1;--paper: #eef6f2;--accent: #c8f542;--accent-ink: #102416;--warn: #ffb454;--danger: #ff7a6e;--display: "Fraunces", "Iowan Old Style", Georgia, serif;--sans: "IBM Plex Sans", "Segoe UI", sans-serif;--radius: 18px;--shadow: 0 24px 60px rgba(0, 0, 0, .35)}*{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0;color:var(--paper);font-family:var(--sans);background:radial-gradient(ellipse 90% 60% at 10% -10%,#1a4a3f 0%,transparent 55%),radial-gradient(ellipse 70% 50% at 100% 0%,#2a3d18 0%,transparent 45%),linear-gradient(165deg,#06110f,#0b1f1c 45%,#102820);background-attachment:fixed}body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.18;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");mix-blend-mode:soft-light;animation:grain 8s steps(6) infinite}@keyframes grain{0%,to{transform:translate(0)}50%{transform:translate(-1.5%,1%)}}@keyframes rise{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse-bar{0%,to{opacity:.55}50%{opacity:1}}.page{width:min(1080px,calc(100% - 2rem));margin:0 auto;padding:1.25rem 0 3rem}.topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:2rem;animation:rise .55s ease both}.brand-logo{height:36px;width:auto;display:block}.pill{font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;color:var(--fog);border:1px solid var(--line);padding:.4rem .7rem;border-radius:999px}.hero{margin-bottom:1.6rem;animation:rise .7s ease .05s both}.brand-mark{margin:0 0 .35rem;font-family:var(--display);font-size:clamp(2.6rem,7vw,4.4rem);font-weight:700;line-height:.95;letter-spacing:-.03em}.brand-mark span{color:var(--accent)}.lede{margin:.65rem 0 0;max-width:34rem;color:var(--fog);font-size:1.05rem;line-height:1.5}.workspace{display:grid;gap:1rem;animation:rise .75s ease .12s both}@media(min-width:900px){.workspace{grid-template-columns:1.05fr .95fr;align-items:start}}.panel{background:linear-gradient(160deg,var(--panel),var(--panel-2));border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.1rem}.drop{min-height:240px;border:1.5px dashed rgba(200,245,66,.35);border-radius:calc(var(--radius) - 6px);display:grid;place-items:center;text-align:center;padding:1.5rem;cursor:pointer;transition:border-color .25s ease,background .25s ease,transform .25s ease}.drop:hover,.drop.is-over{border-color:var(--accent);background:#c8f5420f;transform:translateY(-2px)}.drop h2{margin:.4rem 0 .2rem;font-family:var(--display);font-size:1.45rem}.drop p{margin:0;color:var(--fog);font-size:.92rem}.preview{width:min(100%,360px);max-height:280px;object-fit:contain;border-radius:12px;background:#0006}.controls{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:1rem;align-items:end}label.field{display:grid;gap:.3rem;font-size:.8rem;color:var(--fog)}select,button,textarea{font:inherit}select{background:var(--ink);color:var(--paper);border:1px solid var(--line);border-radius:10px;padding:.55rem .7rem;min-width:9rem}.btn{border:0;border-radius:12px;padding:.7rem 1.05rem;font-weight:600;cursor:pointer;transition:transform .2s ease,filter .2s ease}.btn:disabled{opacity:.45;cursor:not-allowed}.btn:not(:disabled):hover{transform:translateY(-1px);filter:brightness(1.05)}.btn-primary{background:var(--accent);color:var(--accent-ink)}.btn-ghost{background:transparent;color:var(--paper);border:1px solid var(--line)}.progress{margin-top:1rem}.progress-track{height:8px;border-radius:999px;background:#ffffff14;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,#8fbf2a,var(--accent));border-radius:inherit;transition:width .25s ease;animation:pulse-bar 1.4s ease infinite}.progress-meta{display:flex;justify-content:space-between;margin-top:.45rem;font-size:.82rem;color:var(--fog)}.out-head{display:flex;justify-content:space-between;align-items:center;gap:.75rem;margin-bottom:.75rem}.out-head h2{margin:0;font-family:var(--display);font-size:1.35rem}textarea.result{width:100%;min-height:280px;resize:vertical;background:var(--ink);color:var(--paper);border:1px solid var(--line);border-radius:12px;padding:.9rem;line-height:1.55}.error{color:var(--danger);margin:.75rem 0 0;font-size:.92rem}.footer{margin-top:2.2rem;color:var(--fog);font-size:.85rem;text-align:center;animation:rise .8s ease .2s both}.footer a{color:var(--accent)}