.app-shell{width:100%;min-height:100vh;display:flex;justify-content:center;align-items:center;padding:32px 16px}.app-panel{width:min(960px,100%);background:linear-gradient(145deg,#ff00fff2,#c800ffeb,#6464ffeb,#00c8ffeb,#00fffff2);border:4px ridge #ffff00;border-radius:0;box-shadow:0 0 0 2px #000080cc,0 0 0 6px #ff09,0 0 30px #ff06,0 8px 32px #0009,inset 0 2px 4px #ffffff4d,inset 0 -2px 4px #0000004d;display:flex;flex-direction:column;overflow:hidden;position:relative;transition:transform .3s cubic-bezier(.4,0,.2,1)}.app-panel:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(255,255,255,.02) 2px,rgba(255,255,255,.02) 4px);pointer-events:none;z-index:1;border-radius:0}.app-panel:after{content:"";position:absolute;top:0;left:0;right:0;height:120px;background:linear-gradient(180deg,rgba(255,255,255,.15) 0%,transparent 100%);pointer-events:none;z-index:1;border-radius:0}.app-header{padding:28px 40px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:4px dashed #ffff00;background:linear-gradient(180deg,rgba(0,0,0,.4) 0%,transparent 100%);position:relative;z-index:2}.brand{display:flex;flex-direction:column;gap:4px}.brand-title{margin:0;font-size:2.4rem;font-weight:700;letter-spacing:.08em;background:linear-gradient(180deg,#ff0,#ff6,#ff0 30%,#fc0,#f90 70%,#fc0,#ff0);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(2px 2px 0 #ff00ff) drop-shadow(4px 4px 0 #00ffff) drop-shadow(0 0 8px rgba(255,255,0,.8)) drop-shadow(6px 6px 12px rgba(0,0,0,.9));font-family:Impact,Arial Black,sans-serif;transform:perspective(400px) rotateX(8deg);transform-style:preserve-3d}.brand-subtitle{margin:0;font-size:.95rem;color:#0f0;text-shadow:1px 1px 2px rgba(0,0,0,.8);font-style:italic}.header-actions{display:flex;align-items:center;gap:12px;position:relative;z-index:2}.address-pill{padding:10px 18px;border-radius:0;background:linear-gradient(135deg,#000,#001a00);border:2px solid #00ff00;font-family:Courier New,monospace;font-size:.85rem;letter-spacing:.05em;color:#0f0;box-shadow:0 0 20px #0f06,inset 0 0 12px #0f03,inset 0 2px 4px #00ff001a;text-shadow:0 0 8px rgba(0,255,0,.8);animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{box-shadow:0 0 20px #0f06,inset 0 0 12px #0f03,inset 0 2px 4px #00ff001a}50%{box-shadow:0 0 30px #0f09,inset 0 0 16px #00ff004d,inset 0 2px 4px #00ff0026}}.disconnect-button{background:linear-gradient(180deg,#f33,red,#c00);border:3px solid #ff6666;border-radius:0;color:#fff;padding:10px 20px;font-weight:700;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);box-shadow:0 4px #600,0 6px 12px #f006,inset 0 2px 4px #ffffff4d,inset 0 -2px 4px #6400004d}.disconnect-button:hover:not(:disabled){background:linear-gradient(180deg,#f66,#f33,red);transform:translateY(-2px);box-shadow:0 6px #600,0 10px 20px #ff000080,inset 0 2px 4px #fff6,inset 0 -2px 4px #6400004d}.disconnect-button:active:not(:disabled){transform:translateY(2px);box-shadow:0 2px #600,0 3px 6px #ff00004d,inset 0 2px 6px #64000066}.disconnect-button:disabled{opacity:.4;cursor:not-allowed}.app-body{display:flex;flex-direction:column;gap:32px;padding:40px;background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.3) 100%);position:relative;z-index:2}.connect-screen{text-align:center;padding:60px 12px 80px;display:flex;flex-direction:column;gap:32px;align-items:center;position:relative;z-index:2}.connect-card{max-width:460px;background:linear-gradient(145deg,#cc00ccf2,#9632c8eb,#0099ccf2);border:4px solid rgba(255,255,0,.8);border-radius:0;padding:40px 36px;display:flex;flex-direction:column;gap:24px;box-shadow:0 0 0 2px #00008099,0 12px 40px #000000b3,0 0 40px #ffff004d,inset 0 2px 8px #fff3,inset 0 -2px 8px #0003;position:relative;overflow:hidden}.connect-card:before{content:"";position:absolute;top:0;left:0;right:0;height:100px;background:linear-gradient(180deg,rgba(255,255,255,.2) 0%,transparent 100%);pointer-events:none;border-radius:0}.connect-title{font-size:2.8rem;margin:0;background:linear-gradient(180deg,#ff0,#ff6,#ff0 30%,#fc0,#f90 70%,#fc0,#ff0);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(2px 2px 0 #ff00ff) drop-shadow(4px 4px 0 #00ffff) drop-shadow(0 0 12px rgba(255,255,0,.9)) drop-shadow(6px 6px 16px rgba(0,0,0,.9));font-family:Impact,Arial Black,sans-serif;letter-spacing:.08em;transform:perspective(500px) rotateX(10deg);transform-style:preserve-3d}.connect-description{margin:0;color:#fff;line-height:1.6;text-shadow:1px 1px 2px rgba(0,0,0,.8);font-size:1rem}.button-grid{display:flex;flex-direction:column;gap:12px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 24px;border-radius:0;border:3px solid;font-weight:700;font-size:.95rem;letter-spacing:.08em;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);color:inherit;position:relative;overflow:hidden;text-shadow:1px 1px 2px rgba(0,0,0,.4)}.btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.3) 50%,transparent 100%);transition:left .5s ease}.btn:hover:before{left:100%}.btn-primary{background:linear-gradient(180deg,#0f0,#0d0,#0a0);border-color:#6f6;color:#000;box-shadow:0 4px #060,0 6px 12px #0f06,inset 0 2px 4px #ffffff80,inset 0 -2px 4px #0064004d}.btn-primary:hover:not(:disabled){background:linear-gradient(180deg,#3f3,#0f0,#0c0);transform:translateY(-2px);box-shadow:0 6px #060,0 10px 20px #00ff0080,inset 0 2px 4px #fff9,inset 0 -2px 4px #0064004d}.btn-primary:active:not(:disabled){transform:translateY(2px);box-shadow:0 2px #060,0 3px 6px #00ff004d,inset 0 2px 6px #00640066}.btn-secondary{background:linear-gradient(180deg,#ff0,#fd0,#da0);border-color:#ff9;color:#000;box-shadow:0 4px #960,0 6px 12px #ff06,inset 0 2px 4px #ffffff80,inset 0 -2px 4px #9664004d}.btn-secondary:hover:not(:disabled){background:linear-gradient(180deg,#ff3,#ff0,#fc0);transform:translateY(-2px);box-shadow:0 6px #960,0 10px 20px #ffff0080,inset 0 2px 4px #fff9,inset 0 -2px 4px #9664004d}.btn-secondary:active:not(:disabled){transform:translateY(2px);box-shadow:0 2px #960,0 3px 6px #ffff004d,inset 0 2px 6px #96640066}.btn-danger{background:linear-gradient(180deg,red,#900);border-color:#ff6666 #660000 #660000 #ff6666;color:#fff}.btn:disabled{opacity:.5;cursor:not-allowed;filter:grayscale(.5)}.image-stage{display:grid;gap:24px}.image-frame{position:relative;border-radius:0;border:6px ridge #ffff00;background:radial-gradient(circle at 30% 30%,rgba(255,0,255,.1) 0%,transparent 50%),radial-gradient(circle at 70% 70%,rgba(0,255,255,.1) 0%,transparent 50%),linear-gradient(45deg,#000000 25%,transparent 25%,transparent 75%,#000000 75%,#000000),linear-gradient(45deg,#000000 25%,transparent 25%,transparent 75%,#000000 75%,#000000),#0a0a0a;background-size:100% 100%,100% 100%,20px 20px,20px 20px,100% 100%;background-position:0 0,0 0,0 0,10px 10px,0 0;padding:24px;min-height:380px;display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 0 0 2px #00008099,0 8px 32px #0009,inset 0 0 40px #ffff0026,inset 0 2px 4px #ffffff1a}.image-frame img{border-radius:0;border:4px solid #ffffff;box-shadow:0 0 0 2px #000,0 0 0 6px #0ff9,0 12px 32px #000000b3,0 0 20px #00ffff4d;max-height:480px;object-fit:contain;transition:transform .3s cubic-bezier(.4,0,.2,1)}.image-frame img:hover{transform:scale(1.02)}.image-placeholder{text-align:center;color:#0ff;display:flex;flex-direction:column;gap:12px;text-shadow:2px 2px 0 rgba(0,0,0,.8)}.image-placeholder strong{font-size:1.5rem;color:#ff0;font-family:Impact,Arial Black,sans-serif;letter-spacing:.1em}.chooser-actions{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.flow-footer{display:flex;flex-direction:column;gap:16px}.cost-banner{background:linear-gradient(135deg,#ff00ffe6,#9632ffe6,#00ffffe6);border:3px solid rgba(255,255,0,.8);border-radius:0;padding:18px 24px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-weight:700;color:#fff;text-shadow:1px 1px 3px rgba(0,0,0,.8);box-shadow:0 4px 16px #f0f6,inset 0 2px 4px #ffffff4d,inset 0 -2px 4px #0003;position:relative;overflow:hidden}.cost-banner:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.2) 50%,transparent 100%);animation:shimmer 3s ease-in-out infinite}@keyframes shimmer{0%,to{left:-100%}50%{left:100%}}.cost-banner strong{color:#ff0;font-size:1.3rem;text-shadow:0 0 10px rgba(255,255,0,.8),1px 1px 3px rgba(0,0,0,.9)}.status-banner{border-radius:0;padding:16px 20px;display:flex;align-items:center;gap:12px;border:3px solid;font-weight:600;text-shadow:1px 1px 0 rgba(0,0,0,.5);box-shadow:4px 4px #0006}.camera-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000080f2;-webkit-backdrop-filter:none;backdrop-filter:none;display:flex;justify-content:center;align-items:center;padding:24px;z-index:50}.camera-surface{width:min(640px,100%);background:linear-gradient(135deg,#90c,#09c);border:5px ridge #ffff00;border-radius:0;padding:24px;display:flex;flex-direction:column;gap:16px;box-shadow:0 0 0 3px navy,10px 10px #000000b3,inset 0 0 30px #ffffff1a}.camera-header{display:flex;align-items:center;justify-content:space-between}.camera-header h3{color:#ff0;text-shadow:2px 2px 0 rgba(0,0,0,.8);font-family:Impact,Arial Black,sans-serif;margin:0}.camera-preview{position:relative;border-radius:0;overflow:hidden;background:#000;min-height:320px;display:flex;align-items:center;justify-content:center;border:4px solid #00ffff;box-shadow:0 0 0 2px #000,inset 0 0 20px #00ffff4d}.camera-video{width:100%;height:100%;object-fit:cover}.camera-loading{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#000000b3;font-weight:700;letter-spacing:.05em;color:#0f0;text-shadow:0 0 10px #00ff00}.camera-error{padding:24px;text-align:center;color:red;font-weight:700;text-shadow:0 0 10px #ff0000}.camera-actions{display:flex;justify-content:center}.status-info{background:linear-gradient(135deg,#0000ffe6,#0096ffe6,#00ffffe6);border-color:#ff0c;border-radius:0;color:#fff;box-shadow:0 4px 16px #0064ff66,inset 0 2px 4px #ffffff4d}.status-success{background:linear-gradient(135deg,#00ff00e6,#00dc00e6,#00b400e6);border-color:#ff0c;border-radius:0;color:#000;box-shadow:0 4px 16px #0f06,inset 0 2px 4px #fff6}.status-error{background:linear-gradient(135deg,#ff0000e6,#dc0000e6,#b40000e6);border-color:#ff0c;border-radius:0;color:#fff;box-shadow:0 4px 16px #f006,inset 0 2px 4px #ffffff4d}.spinner{width:18px;height:18px;border-radius:50%;border:3px solid #ffff00;border-right-color:transparent;animation:spin .6s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes blink{0%,49%{opacity:1}50%,to{opacity:.5}}@media (max-width: 768px){.app-header{flex-direction:column;align-items:flex-start}.header-actions{width:100%;justify-content:space-between}.app-body{padding:24px}.image-frame{min-height:240px}.camera-surface{padding:18px}.camera-preview{min-height:240px}.brand-title{font-size:1.8rem}.chooser-actions{grid-template-columns:1fr}}.btn-primary:focus,.btn-secondary:focus,.disconnect-button:focus{outline:3px dashed #ffff00;outline-offset:4px}.status-banner.status-info strong,.status-banner.status-success strong{animation:blink 1.5s ease-in-out infinite}.app-footnote{padding:16px 20px;text-align:center;font-size:.8rem;color:#0ff;text-shadow:1px 1px 2px rgba(0,0,0,.8);border-top:2px dashed rgba(255,255,0,.3);margin-top:auto;background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.2) 100%);position:relative;z-index:2}.footnote-link{color:#ff0;text-decoration:none;font-weight:700;text-shadow:0 0 8px rgba(255,255,0,.6),1px 1px 2px rgba(0,0,0,.9);transition:all .2s cubic-bezier(.4,0,.2,1)}.footnote-link:hover{color:#0f0;text-shadow:0 0 12px rgba(0,255,0,.8),1px 1px 2px rgba(0,0,0,.9);text-decoration:underline}:root{font-size:16px;font-family:Comic Sans MS,Trebuchet MS,Arial,sans-serif;color:#ff0;background-color:navy;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 20% 30%,rgba(255,0,255,.15) 0%,transparent 50%),radial-gradient(circle at 80% 70%,rgba(0,255,255,.15) 0%,transparent 50%),radial-gradient(circle at 50% 50%,rgba(255,255,0,.08) 0%,transparent 60%),linear-gradient(135deg,navy,#000050,navy);background-attachment:fixed;display:flex;align-items:stretch;justify-content:center;color:inherit;image-rendering:pixelated}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background:url('data:image/svg+xml,<svg width="4" height="4" xmlns="http://www.w3.org/2000/svg"><rect width="1" height="1" fill="%23ffffff" opacity="0.02"/></svg>');pointer-events:none;z-index:0}#root{width:100%;position:relative;z-index:1}button{font:inherit;text-transform:uppercase}img{max-width:100%;display:block;image-rendering:auto}a{color:#0ff;text-decoration:underline}a:visited{color:#f0f}