:root{--bg-start:#081525;--bg-end:#0c1f34;--panel:#11253e;--panel-strong:#0e2137;--border:#29496d;--input-bg:#0b1a2a;--input-border:#3c638f;--text-heading:#f0f6ff;--text-muted:#b8cce5;--button-default:#2f6fd0;--button-active:#00a476;--button-submit:#0a8ecf;--focus:#6bb7ff;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Manrope,Segoe UI,sans-serif;font-weight:400;line-height:1.5}*{box-sizing:border-box}body{background:radial-gradient(circle at 12% 18%, #12365e 0%, transparent 40%), radial-gradient(circle at 86% 10%, #0c3c6e 0%, transparent 36%), linear-gradient(150deg, var(--bg-start), var(--bg-end));min-height:100vh;color:var(--text-heading);margin:0}#root{min-height:100vh}.app-shell{gap:1.5rem;width:min(1080px,100% - 2rem);margin:2rem auto;display:grid}.app-header{border:1px solid var(--border);background:linear-gradient(120deg, var(--panel-strong), var(--panel));border-radius:1rem;padding:1.5rem;box-shadow:0 10px 30px #020c1b47}.app-header h1{letter-spacing:.02em;margin:0;font-size:clamp(1.8rem,3vw,2.5rem)}.app-header p{color:var(--text-muted);margin-top:.5rem}.test-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;display:grid}.test-card{background:var(--panel);border:1px solid var(--border);border-radius:1rem;gap:.9rem;padding:1.25rem;display:grid;box-shadow:0 8px 24px #020c1b33}.test-card h2{margin:0;font-size:1.15rem}.test-card p{color:var(--text-muted);margin:0;line-height:1.4}.color-toggle,.submit-button{color:#fff;cursor:pointer;border:1px solid #0000;border-radius:.7rem;padding:.65rem .95rem;font-size:.95rem;font-weight:600;transition:transform .15s,box-shadow .15s,background-color .15s}.color-toggle{background:var(--button-default)}.color-toggle.active{background:var(--button-active)}.submit-button{background:var(--button-submit)}.color-toggle:hover,.submit-button:hover{transform:translateY(-1px);box-shadow:0 8px 18px #0a61b847}.color-toggle:focus-visible,.submit-button:focus-visible,.text-input:focus-visible{outline:2px solid var(--focus);outline-offset:2px}.field-label{color:var(--text-heading);font-size:.9rem;font-weight:600}.text-input{box-sizing:border-box;border:1px solid var(--input-border);background:var(--input-bg);width:100%;color:var(--text-heading);font:inherit;border-radius:.7rem;padding:.65rem .8rem}.echo-output,.submit-status{border:1px dashed var(--border);min-height:1.4rem;color:var(--text-heading);background:var(--panel-strong);border-radius:.7rem;padding:.65rem .75rem}.image-placeholder{aspect-ratio:16/9;border:1px dashed var(--input-border);background-image:linear-gradient(135deg,#1e3a5f8c,#0b2442eb);border-radius:.85rem;place-content:center;width:100%;display:grid}.image-placeholder span{color:#d6e6f9;font-weight:600}.smoke-form{gap:.6rem;display:grid}@media (width<=860px){.app-shell{width:min(100% - 1rem,1080px);margin:1rem auto}.test-grid{grid-template-columns:1fr}}