@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Orbitron:wght@500;600;700;800&display=swap');
:root{--bg:#0a0f1d;--panel:rgba(17,26,46,.76);--cyan:#00f0ff;--blue:#3b82f6;--text:#edf5ff;--muted:#94a3b8;--line:rgba(0,240,255,.2);--font:'Space Grotesk',sans-serif;--display:'Orbitron',sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 50% -20%,#142c50 0%,var(--bg) 52%);color:var(--text);font-family:var(--font);overflow-x:hidden}.wrap{width:min(100% - 36px,980px);margin-inline:auto}.ambient{position:fixed;width:300px;height:300px;border-radius:50%;filter:blur(110px);opacity:.12;pointer-events:none;z-index:-1}.ambient-one{background:var(--cyan);top:25%;left:-180px}.ambient-two{background:#4f46e5;right:-180px;top:60%}
.topbar{height:84px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(148,163,184,.12)}.brand{display:flex;gap:12px;align-items:center;color:var(--text);text-decoration:none;font:700 17px var(--display);letter-spacing:1px}.brand-mark{display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--cyan);border-radius:12px;color:var(--cyan);box-shadow:0 0 20px #00f0ff30}.brand small{display:block;font:600 8px var(--font);letter-spacing:2px;color:var(--muted);margin-top:4px}.accent{color:var(--cyan)}.live-pill{font-size:10px;letter-spacing:1px;color:#a8faff;border:1px solid var(--line);border-radius:30px;padding:9px 12px}.live-pill i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#36f2a1;box-shadow:0 0 10px #36f2a1;margin-right:7px}
.hero{text-align:center;padding:76px 0 38px}.eyebrow{font-size:10px;letter-spacing:2.5px;color:var(--cyan);font-weight:700}.hero h1{font:800 clamp(42px,8vw,76px)/1.08 var(--display);letter-spacing:-3px;margin:20px 0}.gradient-text{background:linear-gradient(90deg,#00f0ff,#5c8cff 55%,#b18cff);-webkit-background-clip:text;background-clip:text;color:transparent}.hero-copy{max-width:590px;margin:auto;color:var(--muted);font-size:15px;line-height:1.7}
.glass{background:var(--panel);border:1px solid rgba(0,240,255,.16);border-radius:22px;backdrop-filter:blur(12px);box-shadow:0 20px 70px #0003}.input-panel{padding:27px}.input-panel label,.small-label{display:block;color:#9bb2ca;font-size:10px;letter-spacing:2px;font-weight:700;margin-bottom:12px}.input-row{display:flex;gap:10px}.input-row input{flex:1;min-width:0;background:#080e1b;border:1px solid #273954;border-radius:12px;padding:17px 16px;color:white;font:500 15px var(--font);outline:none;transition:.2s}.input-row input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px #00f0ff16}.input-row input::placeholder{color:#64748b}.primary-btn,.secondary-btn,.chip,.coffee-btn{border:0;cursor:pointer;font-family:var(--font);font-weight:700;transition:transform .18s,box-shadow .18s}.primary-btn{padding:0 23px;border-radius:12px;background:linear-gradient(110deg,var(--cyan),#3b82f6);color:#06101e;letter-spacing:.6px;box-shadow:0 8px 25px #00cfff26}.primary-btn:hover,.secondary-btn:hover,.chip:hover,.coffee-btn:hover{transform:translateY(-2px)}.quick-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px}.chip{background:#121f35;border:1px solid #263c5c;color:#d8e9ff;border-radius:30px;padding:10px 14px;font-size:12px}.chip.subtle{background:transparent;color:var(--cyan);border-color:var(--line)}.microcopy{font-size:11px;color:#71839c;margin:15px 0 0}.error{margin-top:12px;color:#ff9aab;font-size:13px}
.loading{text-align:center;padding:35px;margin-top:22px}.scanner{height:3px;width:110px;margin:0 auto 20px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);box-shadow:0 0 18px var(--cyan);animation:pulse 1s infinite}.loading h2{font:700 18px var(--display);letter-spacing:2px}.loading p{color:var(--muted);font-size:13px}.loading-track{height:4px;background:#1e2c43;border-radius:10px;overflow:hidden;max-width:300px;margin:20px auto 0}.loading-track span{display:block;height:100%;width:35%;background:var(--cyan);animation:load 1.5s ease-in-out infinite}
.result-section{margin-top:45px;animation:rise .5s ease}.result-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:16px}.result-heading h2,.how h2{font:700 clamp(22px,4vw,30px) var(--display);margin:9px 0 0}.stamp{font:700 9px var(--display);color:#ffcf70;border:1px solid #ffcf7055;padding:8px;border-radius:6px;transform:rotate(3deg)}.roast-card{position:relative;overflow:hidden;padding:25px;border:1px solid #00eaff88;border-radius:18px;background:linear-gradient(145deg,#111d35,#080e1a 72%);box-shadow:0 0 35px #00d9ff13,inset 0 0 40px #00d9ff08}.roast-card:before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,#00f0ff08 50%,transparent 70%);pointer-events:none}.card-topline,.card-footer{display:flex;justify-content:space-between;gap:10px;color:#6f8ba9;font:600 9px var(--display);letter-spacing:1px}.card-main{display:grid;grid-template-columns:110px 1fr auto;align-items:center;gap:22px;padding:28px 0 20px}.avatar-wrap{position:relative;width:100px;height:100px}.avatar-wrap img{width:100%;height:100%;border-radius:22px;border:1px solid var(--cyan);object-fit:cover;background:#14223a;box-shadow:0 0 25px #00eaff30}.avatar-orbit{position:absolute;inset:-7px;border:1px dashed #00f0ff66;border-radius:27px;animation:spin 18s linear infinite;pointer-events:none}.identity h3{font:700 clamp(19px,4vw,28px) var(--display);margin:4px 0 8px;overflow-wrap:anywhere}.identity p{display:inline-block;margin:0;color:#a7f8ff;background:#00eaff12;border:1px solid #00eaff35;padding:7px 9px;border-radius:5px;font-size:10px;font-weight:700;letter-spacing:1px}.score-box{text-align:center;border-left:1px solid #29405b;padding-left:22px}.score-box strong{font:800 46px var(--display);color:var(--cyan);display:block;text-shadow:0 0 22px #00eaff66}.score-box span{color:#71839c;font-size:11px}.score-box small{display:block;color:#a7b8cd;font-size:8px;letter-spacing:1.5px;margin-top:7px}.meter{height:7px;border-radius:9px;background:#1b2b42;overflow:hidden}.meter span{display:block;width:0;height:100%;background:linear-gradient(90deg,#00f0ff,#3b82f6,#b18cff);box-shadow:0 0 14px #00eaff;transition:width .8s}.audit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:20px 0}.audit-stat{background:#0a1425;border:1px solid #223752;border-radius:9px;padding:12px}.audit-stat span{display:block;color:#7f96b2;font-size:9px;letter-spacing:1px}.audit-stat strong{display:block;font:700 21px var(--display);margin-top:6px}.roast-copy{padding:17px 0 20px;border-top:1px solid #23364d}.roast-copy ul{padding-left:20px;margin:12px 0 0;color:#d2deed;font-size:13px;line-height:1.8}.roast-copy li{padding-left:5px;margin:5px 0}.roast-copy li::marker{color:var(--cyan)}.api-note{font-size:10px;color:#7d93ad;min-height:14px;margin-bottom:14px}.card-footer{border-top:1px solid #23364d;padding-top:13px;font-size:8px}
.result-actions{display:flex;gap:9px;flex-wrap:wrap;margin:15px 0}.secondary-btn{background:#12213a;border:1px solid #2a4261;color:#d9eaff;padding:12px 15px;border-radius:9px;font-size:12px}.coffee-btn{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:18px;text-decoration:none;color:#1b1204;background:linear-gradient(100deg,#ffd166,#ffad42);padding:15px;border-radius:11px;box-shadow:0 8px 25px #ffb43c22;letter-spacing:1px;font-size:13px}.coffee-btn span{font-size:18px}
.how{padding:28px;margin-top:55px}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:25px}.steps>div{position:relative;padding:16px;background:#0c1729;border:1px solid #203650;border-radius:13px}.steps b{font:700 10px var(--display);color:var(--cyan)}.step-icon{display:block;font-size:25px;margin:17px 0 8px}.steps h3{font:700 12px var(--display);letter-spacing:1px}.steps p{font-size:12px;color:var(--muted);line-height:1.6;margin-bottom:0}
.creator{margin-top:20px;padding:0 22px}.creator-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;background:none;border:0;color:var(--text);padding:20px 0;text-align:left;cursor:pointer;font:700 12px var(--display);letter-spacing:1px}.creator-toggle small{display:block;font:500 9px var(--font);color:var(--muted);margin-top:6px;letter-spacing:1px}.creator-icon{color:var(--cyan);margin-right:9px}.creator-body{display:flex;gap:18px;align-items:center;border-top:1px solid #263a54;padding:20px 0}.creator-body img{width:78px;height:78px;border-radius:50%;object-fit:cover;border:1px solid var(--cyan);background:#13243c}.creator-body h3{font:700 16px var(--display);margin:0 0 7px}.creator-body p{font-size:12px;color:var(--muted);line-height:1.6;margin:0 0 7px}.creator-body .creator-tag{color:var(--cyan);font-size:9px;letter-spacing:1.5px;font-weight:700}
.ad-slot{display:none;place-items:center;min-height:70px;margin:20px 0;border:1px dashed #52657d;border-radius:10px;color:#7d8da3;font-size:10px;letter-spacing:2px}.ad-slot.is-enabled{display:grid}.footer{text-align:center;padding:35px 0 28px;color:#73839a;font-size:11px}.coffee-link{display:inline-block;color:#ffcf70;text-decoration:none;font-weight:700;margin-bottom:10px}.footer p{margin:7px 0}.disclaimer{font-size:10px}
@keyframes pulse{50%{opacity:.35;transform:scaleX(.7)}}@keyframes load{0%{transform:translateX(-120%)}100%{transform:translateX(360%)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:640px){.wrap{width:min(100% - 24px,980px)}.topbar{height:70px}.live-pill{font-size:8px;padding:8px}.hero{padding:56px 0 28px}.hero h1{letter-spacing:-2px}.hero-copy{font-size:13px}.input-panel{padding:19px}.input-row{flex-direction:column}.primary-btn{padding:15px}.quick-actions{gap:7px}.chip{font-size:11px;padding:9px 11px}.result-heading{align-items:center}.stamp{font-size:7px}.roast-card{padding:17px}.card-main{grid-template-columns:76px 1fr;gap:14px;padding:22px 0 16px}.avatar-wrap{width:68px;height:68px}.avatar-wrap img{border-radius:16px}.avatar-orbit{border-radius:20px}.identity h3{font-size:17px}.identity p{font-size:8px}.score-box{grid-column:1/-1;display:flex;align-items:center;gap:9px;text-align:left;border:0;border-top:1px solid #29405b;padding:12px 0 0}.score-box strong{font-size:27px}.score-box small{margin:0}.audit-grid{gap:6px}.audit-stat{padding:9px}.audit-stat span{font-size:8px}.audit-stat strong{font-size:17px}.card-topline,.card-footer{font-size:7px}.roast-copy ul{font-size:12px}.result-actions>*{flex:1 1 42%;font-size:11px;padding:11px 8px}.steps{grid-template-columns:1fr;gap:10px}.steps>div{display:grid;grid-template-columns:35px 32px 1fr;align-items:center;gap:8px}.steps b,.step-icon{margin:0}.steps h3{margin:0}.steps p{grid-column:3;margin-top:-8px}.creator{padding:0 16px}.creator-body{align-items:flex-start}.creator-body img{width:60px;height:60px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition:none!important}}