:root{--bg: #111315;--panel: #1d2227;--panel-soft: #232a31;--text: #ecf1f6;--muted: #9aa7b4;--primary: #f97316;--primary-strong: #ea580c;--line: #34414d;--ok: #34d399;--error: #fb7185;--indigo: #818cf8;--indigo-soft: rgba(129, 140, 248, .12);--unknown-muted: rgba(154, 167, 180, .55)}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 14% 18%,#22313d,#111315 44%),radial-gradient(circle at 88% 82%,#2b1f17,#111315 36%);color:var(--text);font-family:Space Grotesk,sans-serif;overflow-x:hidden}#root{min-height:100vh;position:relative}.skip-link{position:absolute;top:-100%;left:0;z-index:9999;padding:.5rem 1rem;background:var(--primary);color:#22150a;font-weight:700;border-radius:0 0 8px;text-decoration:none}.skip-link:focus{top:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.bg-shape{position:fixed;z-index:0;border-radius:999px;filter:blur(48px);opacity:.32;pointer-events:none}.shape-a{width:320px;height:320px;background:#fb7185;top:-80px;left:-80px;animation:floatA 11s ease-in-out infinite}.shape-b{width:360px;height:360px;background:#f59e0b;bottom:-140px;right:-100px;animation:floatB 14s ease-in-out infinite}.app-shell{position:relative;z-index:1;width:min(1100px,calc(100% - 2rem));margin:0 auto;padding:2.2rem 0 3rem;animation:reveal .5s ease-out}.hero{margin-bottom:1rem}.eyebrow{margin:0;letter-spacing:.18em;text-transform:uppercase;color:var(--primary);font-weight:700;font-size:.75rem}h1{margin:.4rem 0;font-size:clamp(1.8rem,3.8vw,3rem);line-height:1.1}.subtitle{margin:0;color:var(--muted);max-width:720px}.panel{background:linear-gradient(140deg,#1d2227f2,#232a31eb);border:1px solid var(--line);border-radius:18px;padding:1.5rem;margin-top:1.5rem;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 4px 24px #0000004d;transition:box-shadow .3s ease;position:relative}.panel:hover{box-shadow:0 6px 28px #00000059}.demo-note{border-left:4px solid var(--primary)}.demo-title{margin:0 0 .35rem;font-size:.82rem;text-transform:uppercase;letter-spacing:.12em;color:var(--primary);font-weight:700}.demo-text{margin:.15rem 0;color:var(--muted)}label{display:block;font-weight:700;margin-bottom:.6rem}textarea{width:100%;min-height:180px;border-radius:12px;border:1px solid var(--line);background:#101418;color:var(--text);font-family:IBM Plex Mono,monospace;font-size:.95rem;padding:1rem;resize:vertical;transition:border-color .4s cubic-bezier(.25,1,.5,1),box-shadow .4s cubic-bezier(.25,1,.5,1)}textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px #f9731626}textarea::placeholder{color:var(--muted);opacity:.7}.actions{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:.8rem}.btn{border:1px solid transparent;border-radius:10px;padding:.55rem .95rem;font-family:inherit;font-weight:700;cursor:pointer;transition:box-shadow .25s ease,transform .1s ease;box-shadow:0 2px 6px #00000026;position:relative;isolation:isolate}.btn:active{transform:scale(.96) translateY(1px);box-shadow:0 1px 3px #0003}.btn.primary:hover,.btn.copy-all-btn:hover,.copy-all-btn:hover{box-shadow:0 4px 18px #f9731673}.btn.ghost:hover{box-shadow:0 4px 12px #00000040}.btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px}.btn:disabled{opacity:.65;cursor:wait}.btn.primary{color:#22150a;background:linear-gradient(130deg,var(--primary),#f59e0b)}.btn.ghost{color:var(--text);background:transparent;border-color:var(--line)}.copy-all-btn{color:#22150a;background:linear-gradient(130deg,var(--primary),#f59e0b);margin-left:auto}.status{margin:.8rem 0 0;color:var(--ok);min-height:1.1rem}.status.error{color:var(--error)}.outputs-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:1rem;align-items:stretch}.outputs-grid-header{grid-column:1 / -1;display:flex;justify-content:space-between;align-items:center;margin-bottom:-.5rem}.outputs-grid-header h2{margin:0;font-size:1rem;color:var(--muted);font-weight:600}.output-card{background:#101418b3;border:1px solid var(--line);border-radius:14px;padding:1rem;animation:cardRise .42s ease;transition:background .25s ease;min-width:220px;box-shadow:0 2px 8px #00000026;position:relative;display:flex;flex-direction:column}.output-card:hover{background:#14191ed9}.output-card textarea{min-height:120px;flex:1 1 auto;resize:vertical}.full-width{grid-column:1 / -1}.card-head{display:flex;justify-content:space-between;gap:.6rem;align-items:center;margin-bottom:.45rem}.card-head h2{margin:0;font-size:.95rem}.tag-count{font-size:.75rem;color:var(--primary);background:#f973161f;padding:.1em .5em;border-radius:999px;font-weight:600;margin-left:.3em}h2{margin:0;font-size:.95rem}.copy-btn{border:1px solid var(--line);background:#1c2731;color:var(--text);border-radius:8px;padding:.32rem .6rem;cursor:pointer;font-family:inherit;font-size:.82rem;transition:background .2s ease,transform .1s ease,box-shadow .1s ease;position:relative;isolation:isolate}.copy-btn:hover{background:#1e2d3a}.copy-btn:active{transform:scale(.95) translateY(1px);box-shadow:0 1px 2px #0003}.copy-btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px}.source-material{box-shadow:inset 4px 0 0 var(--indigo),0 2px 8px #00000026}.source-material:hover{background:#101418d9}.source-material .copy-btn{border-color:#818cf859}.source-material textarea:focus{border-color:var(--indigo);box-shadow:0 0 0 3px #818cf826}.source-badge{color:var(--indigo);background:var(--indigo-soft)}.unknown-card{opacity:.75}.unknown-card .card-head h2{color:var(--unknown-muted);font-style:italic}.toggle-switch{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none;margin-bottom:0;font-weight:500}.toggle-switch input[type=checkbox]{position:absolute;opacity:0;width:1px;height:1px;overflow:hidden}.toggle-slider{position:relative;width:40px;height:22px;background:var(--line);border-radius:999px;transition:background .25s ease;flex-shrink:0}.toggle-slider:after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;background:var(--text);border-radius:50%;transition:transform .25s ease}.toggle-switch input:checked+.toggle-slider{background:var(--indigo)}.toggle-switch input:checked+.toggle-slider:after{transform:translate(18px)}.toggle-switch input:focus-visible+.toggle-slider{outline:2px solid var(--primary);outline-offset:2px}.toggle-label{font-size:.85rem;color:var(--muted);white-space:nowrap}.nav-btn{background:transparent;color:var(--muted);border:none;font-size:1.1rem;font-weight:700;padding:.5rem 1rem;border-radius:8px;cursor:pointer;transition:color .2s ease,background .2s ease,transform .1s ease;position:relative;isolation:isolate}.nav-btn:hover{color:var(--text);background:#ffffff0d}.nav-btn:active{transform:scale(.96) translateY(1px)}.nav-btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px}.nav-btn.active{color:var(--primary);background:#f9731626}.custom-slider{-webkit-appearance:none;width:100%;height:6px;border-radius:4px;background:var(--line);outline:none;margin-top:.5rem}.custom-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--primary);cursor:pointer;transition:transform .1s,background .15s}.custom-slider::-webkit-slider-thumb:hover{transform:scale(1.2);background:var(--primary-strong)}.custom-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--primary);cursor:pointer;border:none;transition:transform .1s}.custom-slider::-moz-range-thumb:hover{transform:scale(1.2)}.file-preview-grid{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem;opacity:.8}.file-preview-grid img{width:80px;height:80px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}.loading-indicator{display:inline-flex;align-items:center;gap:.4rem;color:var(--muted);font-size:.85rem}.btn .loading-indicator{margin-top:0;color:inherit}.spinner{width:18px;height:18px;border:2px solid var(--line);border-top-color:var(--primary);border-radius:50%;animation:spin .7s linear infinite}.btn .spinner{width:14px;height:14px;border-width:2px;border-color:#22150a4d;border-top-color:#22150a}@keyframes spin{to{transform:rotate(360deg)}}@keyframes floatA{0%,to{transform:translate(0)}50%{transform:translate(28px,10px)}}@keyframes floatB{0%,to{transform:translate(0)}50%{transform:translate(-20px,-18px)}}@keyframes reveal{0%{opacity:0}to{opacity:1}}@keyframes cardRise{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 760px){.app-shell{width:min(1100px,calc(100% - 1rem));padding-top:1.2rem}.outputs-grid{grid-template-columns:1fr}.full-width{grid-column:auto}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.bg-shape,.shape-a,.shape-b{animation:none!important}}