@import "https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Share+Tech+Mono&display=swap";*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--red:#e63910;--red-bright:#ff5a2e;--red-dim:#7a1e08;--red-glow:#e6391059;--bg:#060606;--surface:#0f0f0f;--border:#1f1f1f;--text:#f0ece8;--muted:#5a5350;--mono:"Share Tech Mono", monospace;--display:"Bebas Neue", "Impact", sans-serif;--radius:4px}html{scroll-behavior:smooth}body{background-color:var(--bg);color:var(--text);font-family:var(--mono);background-image:linear-gradient(#e639100a 1px,#0000 1px),linear-gradient(90deg,#e639100a 1px,#0000 1px);background-size:48px 48px;justify-content:center;align-items:center;min-height:100vh;padding:32px 16px;display:flex}.scanlines{pointer-events:none;z-index:9999;background:repeating-linear-gradient(0deg,#0000,#0000 3px,#00000014 3px 4px);animation:8s step-end infinite flicker;position:fixed;top:0;bottom:0;left:0;right:0}@keyframes flicker{0%,95%,to{opacity:1}96%{opacity:.85}97%{opacity:1}98%{opacity:.9}}.container{flex-direction:column;gap:28px;width:100%;max-width:560px;display:flex}header{text-align:center}.header-tag{font-family:var(--mono);letter-spacing:.25em;color:var(--red);opacity:.8;margin-bottom:8px;font-size:.7rem}h1{font-family:var(--display);letter-spacing:.02em;text-transform:uppercase;color:var(--text);text-shadow:0 0 20px var(--red-glow), 0 0 60px #e6391026;font-size:clamp(4rem,14vw,6.5rem);line-height:.9}.subtitle{font-family:var(--mono);letter-spacing:.3em;color:var(--muted);margin-top:10px;font-size:.68rem}.bracket{border-color:var(--red-dim);border-style:solid;width:18px;height:18px;transition:border-color .2s,width .2s,height .2s;position:absolute}.bracket--tl{border-width:2px 0 0 2px;top:-1px;left:-1px}.bracket--tr{border-width:2px 2px 0 0;top:-1px;right:-1px}.bracket--bl{border-width:0 0 2px 2px;bottom:-1px;left:-1px}.bracket--br{border-width:0 2px 2px 0;bottom:-1px;right:-1px}.drop-zone{border:1px solid var(--border);border-radius:var(--radius);text-align:center;cursor:pointer;background:var(--surface);outline:none;padding:52px 24px;transition:border-color .2s,background .2s;position:relative}.drop-zone:hover,.drop-zone.drag-over{border-color:var(--red-dim);background:#120a08}.drop-zone:focus-visible{border-color:var(--red-dim);background:#120a08}.drop-zone:hover .bracket,.drop-zone.drag-over .bracket{border-color:var(--red);width:24px;height:24px}.drop-zone:focus-visible .bracket{border-color:var(--red);width:24px;height:24px}.drop-zone__inner{flex-direction:column;align-items:center;gap:10px;display:flex}.crosshair{width:56px;height:56px;color:var(--red-dim);transition:color .2s;animation:12s linear infinite crosshair-spin}.drop-zone:hover .crosshair,.drop-zone.drag-over .crosshair{color:var(--red)}@keyframes crosshair-spin{to{transform:rotate(360deg)}}.drop-zone__label{font-family:var(--mono);letter-spacing:.12em;color:var(--text);font-size:.95rem}.drop-zone__hint{color:var(--muted);letter-spacing:.1em;font-size:.72rem}.drop-zone__cta{color:var(--red-dim);letter-spacing:.15em;font-size:.7rem;transition:color .2s}.drop-zone:hover .drop-zone__cta{color:var(--red)}.preview-section{flex-direction:column;align-items:center;gap:12px;display:flex}.preview-frame{border-radius:var(--radius);line-height:0;display:inline-block;position:relative;overflow:hidden}.preview-img{border-radius:var(--radius);filter:contrast(1.05)saturate(.9);max-width:100%;max-height:320px;display:block}.scan-line{background:linear-gradient(90deg, transparent, var(--red), transparent);height:2px;box-shadow:0 0 8px var(--red), 0 0 20px var(--red-glow);animation:2.4s ease-in-out infinite scan;position:absolute;top:0;left:0;right:0}@keyframes scan{0%{opacity:0;top:0%}5%{opacity:1}95%{opacity:1}to{opacity:0;top:100%}}.clear-btn{border:1px solid var(--border);color:var(--muted);font-family:var(--mono);letter-spacing:.15em;border-radius:var(--radius);cursor:pointer;background:0 0;padding:6px 16px;font-size:.7rem;transition:color .2s,border-color .2s}.clear-btn:hover{color:var(--red);border-color:var(--red-dim)}.analyze-btn{background:var(--red);color:#fff;border-radius:var(--radius);width:100%;font-family:var(--display);letter-spacing:.15em;cursor:pointer;border:none;padding:16px;font-size:1.5rem;transition:background .2s;position:relative;overflow:hidden}.analyze-btn:before{content:"";background:linear-gradient(90deg,#0000 0%,#ffffff14 50%,#0000 100%);transition:transform;position:absolute;top:0;bottom:0;left:0;right:0;transform:translate(-100%)}.analyze-btn:hover{background:var(--red-bright)}.analyze-btn:hover:before{transition:transform .5s;transform:translate(100%)}.analyze-btn:active{transform:scale(.99)}.loading{justify-content:center;padding:24px 0;display:flex}.hud-loading{flex-direction:column;gap:12px;width:100%;display:flex}.hud-loading__bar-wrap{background:var(--border);border-radius:2px;width:100%;height:3px;overflow:hidden}.hud-loading__bar{background:linear-gradient(90deg, var(--red-dim), var(--red), var(--red-bright));width:0%;height:100%;box-shadow:0 0 8px var(--red);border-radius:2px;transition:width .4s}.hud-loading__msg{font-family:var(--mono);letter-spacing:.12em;color:var(--red);min-height:1.2em;font-size:.8rem}.hud-loading__msg:after{content:"▌";margin-left:2px;animation:.8s step-end infinite blink}@keyframes blink{50%{opacity:0}}.hud-loading__hint{color:var(--muted);letter-spacing:.08em;font-size:.68rem}.result{border:1px solid var(--border);border-radius:var(--radius);text-align:center;background:var(--surface);flex-direction:column;align-items:center;gap:20px;padding:36px 28px;display:flex;position:relative;overflow:hidden}.result:before{content:"";pointer-events:none;background:radial-gradient(at 50% 30%,#e639100f 0%,#0000 70%);position:absolute;top:0;bottom:0;left:0;right:0}.result .bracket{border-color:var(--red-dim)}.result__header{letter-spacing:.3em;color:var(--muted);font-size:.68rem}.result__score-wrap{align-items:baseline;gap:8px;display:flex}.result__score-label{letter-spacing:.2em;color:var(--muted);font-size:.7rem}.result__number{font-family:var(--display);color:var(--red);text-shadow:0 0 30px var(--red-glow), 0 0 80px #e6391033;font-size:clamp(5rem,20vw,8rem);line-height:1;transition:text-shadow .3s}.result__number[data-score="5"]{color:#f20;text-shadow:0 0 40px #f209,0 0 100px #f203}.result__number[data-score="4"]{color:#f41}.result__number[data-score="3"]{color:#e06020}.result__number[data-score="2"]{color:#b07030}.result__number[data-score="1"]{color:#705040}.result__meter{align-items:flex-end;gap:6px;display:flex}.meter-seg{background:var(--border);border-radius:2px;width:36px;transition:background .3s,box-shadow .3s,height .3s}.meter-seg[data-seg="1"]{height:16px}.meter-seg[data-seg="2"]{height:22px}.meter-seg[data-seg="3"]{height:30px}.meter-seg[data-seg="4"]{height:40px}.meter-seg[data-seg="5"]{height:52px}.meter-seg.active{background:var(--red);box-shadow:0 0 10px var(--red-glow)}.result__message{font-family:var(--mono);color:var(--text);max-width:380px;font-size:.95rem;font-style:italic;line-height:1.5}.result__data{letter-spacing:.1em;align-items:center;gap:12px;font-size:.72rem;display:flex}.data-label{color:var(--muted)}.data-value{color:var(--red)}.error-box{border:1px solid var(--red-dim);border-radius:var(--radius);text-align:center;background:#0d0504;flex-direction:column;align-items:center;gap:16px;padding:28px 24px;display:flex}.error-icon{width:36px;height:36px;color:var(--red-dim)}.error-message{color:#e08070;letter-spacing:.06em;font-size:.82rem;line-height:1.5}.secondary-btn{color:var(--muted);border:1px solid var(--border);border-radius:var(--radius);font-family:var(--mono);letter-spacing:.15em;cursor:pointer;background:0 0;padding:10px 24px;font-size:.75rem;transition:color .2s,border-color .2s}.secondary-btn:hover{color:var(--text);border-color:var(--muted)}footer{letter-spacing:.12em;color:var(--muted);flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;font-size:.65rem;display:flex}footer a{color:var(--muted);text-decoration:none;transition:color .2s}footer a:hover{color:var(--red)}.footer-dot{font-size:.4rem}.hidden{display:none!important}@keyframes fadeUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}header{animation:.6s both fadeUp}main{animation:.6s .15s both fadeUp}footer{animation:.6s .3s both fadeUp}