*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
    :root{
      --bg:#0A0A0F;--bg2:#0F0F1A;--card:#13131F;--surface:#1A1A28;
      --border:#252535;--border2:#363650;
      --txt:#F5F3FF;--txt2:#8A88B8;--txt3:#4A4870;
      --fire:#FF4500;--amber:#FF8C00;--yellow:#FFD700;
      --red:#FF2D55;--orange:#FF6B00;--smoke:#C0BEDD;
      --green:#00FF94;--blue:#4FC3F7;
      --ff:'Syne',sans-serif;--fb:'Outfit',sans-serif;--fm:'DM Mono',monospace;
      --spring:cubic-bezier(.34,1.56,.64,1);
      --bounce:cubic-bezier(.68,-0.55,.27,1.55);
    }
    html{scroll-behavior:smooth}
    body{
      font-family:var(--fb);background:var(--bg);color:var(--txt);
      min-height:100vh;overflow-x:hidden;cursor:none;
      display:flex;flex-direction:column;align-items:center;
    }

    /* grid bg */
    body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
      background-image:
        linear-gradient(rgba(255,69,0,.04) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,69,0,.04) 1px,transparent 1px);
      background-size:40px 40px}
    /* fire glow top */
    body::after{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
      background:radial-gradient(ellipse 70% 40% at 50% 0%,rgba(255,69,0,.12),transparent 65%)}

    /* CURSOR */
    #cursor{pointer-events:none;position:fixed;z-index:9999;width:14px;height:14px;
      background:rgba(255,69,0,.3);border-radius:50%;border:2px solid var(--fire);
      transition:width .15s var(--spring),height .15s var(--spring),background .15s;
      transform:translate(-50%,-50%)}
    #cursor-trail{pointer-events:none;position:fixed;z-index:9998;width:6px;height:6px;
      background:var(--fire);border-radius:50%;opacity:.4;
      transition:left .08s,top .08s,opacity .3s;
      transform:translate(-50%,-50%)}

    /* NAV */
    nav{position:fixed;top:0;left:0;right:0;z-index:200;height:58px;
      display:flex;align-items:center;justify-content:space-between;padding:0 2rem;
      background:rgba(10,10,15,.92);border-bottom:1px solid var(--border);
      backdrop-filter:blur(20px)}
    .nav-brand{display:flex;align-items:center;gap:.6rem;text-decoration:none}
    .nav-logo{width:34px;height:34px;border-radius:8px;
      background:linear-gradient(135deg,var(--fire),var(--amber));
      display:flex;align-items:center;justify-content:center;font-size:1.1rem;
      box-shadow:0 0 16px rgba(255,69,0,.4)}
    .nav-title{font-family:var(--ff);font-size:1.05rem;font-weight:800;
      background:linear-gradient(90deg,var(--fire),var(--yellow));
      -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
      letter-spacing:.05em}
    .nav-right{display:flex;align-items:center;gap:.5rem}
    .nav-badge{font-family:var(--fm);font-size:.58rem;color:var(--txt3);
      background:var(--surface);border:1px solid var(--border);padding:3px 8px;border-radius:20px}
    .nav-link{width:32px;height:32px;border-radius:7px;background:var(--surface);
      border:1px solid var(--border);display:flex;align-items:center;justify-content:center;
      color:var(--txt2);font-size:.8rem;text-decoration:none;
      transition:all .15s var(--spring)}
    .nav-link:hover{background:var(--border2);color:var(--txt);transform:scale(1.08)}

    /* WRAPPER */
    .wrapper{position:relative;z-index:1;width:100%;max-width:700px;
      padding:78px 1.2rem 3rem;display:flex;flex-direction:column;gap:1.4rem}

    /* HERO */
    .hero{text-align:center;padding:2rem 0 1rem;display:flex;flex-direction:column;align-items:center;gap:.8rem}
    .hero-icon{font-size:4rem;display:block;
      animation:fire-pulse 1.5s ease-in-out infinite alternate;
      filter:drop-shadow(0 0 20px rgba(255,69,0,.6))}
    @keyframes fire-pulse{from{transform:scale(1) rotate(-3deg)}to{transform:scale(1.08) rotate(3deg)}}
    .hero-title{font-family:var(--ff);font-size:clamp(3rem,10vw,5.5rem);font-weight:800;
      text-transform:uppercase;letter-spacing:-.04em;line-height:.88;
      background:linear-gradient(135deg,var(--fire) 0%,var(--amber) 50%,var(--yellow) 100%);
      -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
    .hero-sub{font-family:var(--fm);font-size:.72rem;color:var(--txt2);
      letter-spacing:.12em;text-transform:uppercase}
    .hero-tagline{font-family:var(--fm);font-size:.75rem;color:var(--txt3);
      max-width:380px;line-height:1.7;text-align:center}

    /* SECTION LABEL */
    .sec-label{font-family:var(--fm);font-size:.6rem;color:var(--txt3);
      text-transform:uppercase;letter-spacing:.15em;
      display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}
    .sec-label i{color:var(--fire);font-size:.65rem}

    /* INPUT MODES */
    .mode-tabs{display:flex;gap:.4rem;flex-wrap:wrap}
    .mode-tab{padding:.45rem 1rem;border-radius:8px;border:1.5px solid var(--border2);
      background:var(--card);color:var(--txt2);
      font-family:var(--fm);font-size:.62rem;font-weight:700;cursor:pointer;
      display:flex;align-items:center;gap:.4rem;
      transition:all .15s var(--spring);text-transform:uppercase;letter-spacing:.08em}
    .mode-tab:hover{border-color:var(--fire);color:var(--txt)}
    .mode-tab.active{background:rgba(255,69,0,.12);border-color:var(--fire);
      color:var(--fire);box-shadow:0 0 12px rgba(255,69,0,.15)}

    /* INPUT PANELS */
    .input-panel{display:none;flex-direction:column;gap:.8rem;animation:fade-in .2s ease}
    .input-panel.show{display:flex}
    @keyframes fade-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

    textarea,input[type=text],input[type=url]{
      width:100%;padding:.85rem 1rem;border-radius:10px;
      border:1.5px solid var(--border2);background:var(--card);
      color:var(--txt);font-family:var(--fb);font-size:.9rem;
      resize:vertical;outline:none;
      transition:border-color .15s,box-shadow .15s}
    textarea:focus,input[type=text]:focus,input[type=url]:focus{
      border-color:var(--fire);box-shadow:0 0 0 3px rgba(255,69,0,.12)}
    textarea::placeholder,input::placeholder{color:var(--txt3)}
    textarea{min-height:130px;line-height:1.6}

    /* PHOTO UPLOAD */
    .photo-drop{width:100%;min-height:160px;border-radius:12px;
      border:2px dashed var(--border2);background:var(--card);
      display:flex;flex-direction:column;align-items:center;justify-content:center;
      gap:.6rem;cursor:pointer;transition:all .2s var(--spring);
      position:relative;overflow:hidden}
    .photo-drop:hover,.photo-drop.drag{border-color:var(--fire);
      background:rgba(255,69,0,.05);box-shadow:0 0 20px rgba(255,69,0,.1)}
    .photo-drop i{font-size:2rem;color:var(--txt3)}
    .photo-drop span{font-family:var(--fm);font-size:.65rem;color:var(--txt3);text-transform:uppercase;letter-spacing:.1em}
    .photo-drop input{position:absolute;inset:0;opacity:0;cursor:pointer}
    #photo-preview{width:100%;max-height:240px;object-fit:cover;border-radius:10px;display:none}

    /* INTENSITY */
    .intensity-row{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
    .intensity-btn{padding:.7rem .5rem;border-radius:10px;border:2px solid var(--border2);
      background:var(--card);cursor:pointer;text-align:center;
      transition:all .18s var(--spring);box-shadow:3px 3px 0 var(--border)}
    .intensity-btn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--border2)}
    .intensity-btn.active{transform:translate(-2px,-2px)}
    .intensity-btn .i-icon{font-size:1.4rem;display:block;margin-bottom:.3rem}
    .intensity-btn .i-name{font-family:var(--ff);font-size:.75rem;font-weight:800;display:block}
    .intensity-btn .i-desc{font-family:var(--fm);font-size:.55rem;color:var(--txt3);display:block;margin-top:.15rem}
    .intensity-btn[data-i="mild"]{border-color:#FFD700}
    .intensity-btn[data-i="mild"].active{background:rgba(255,215,0,.1);box-shadow:5px 5px 0 rgba(255,215,0,.3)}
    .intensity-btn[data-i="mild"] .i-name{color:var(--yellow)}
    .intensity-btn[data-i="savage"]{border-color:var(--orange)}
    .intensity-btn[data-i="savage"].active{background:rgba(255,107,0,.1);box-shadow:5px 5px 0 rgba(255,107,0,.3)}
    .intensity-btn[data-i="savage"] .i-name{color:var(--orange)}
    .intensity-btn[data-i="nuclear"]{border-color:var(--red)}
    .intensity-btn[data-i="nuclear"].active{background:rgba(255,45,85,.1);box-shadow:5px 5px 0 rgba(255,45,85,.3)}
    .intensity-btn[data-i="nuclear"] .i-name{color:var(--red)}

    /* PERSONA */
    .persona-row{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}
    @media(min-width:480px){.persona-row{grid-template-columns:repeat(4,1fr)}}
    .persona-btn{padding:.65rem .4rem;border-radius:10px;border:1.5px solid var(--border2);
      background:var(--card);cursor:pointer;text-align:center;
      transition:all .15s var(--spring)}
    .persona-btn:hover{border-color:var(--amber);background:rgba(255,140,0,.06)}
    .persona-btn.active{border-color:var(--fire);background:rgba(255,69,0,.1);
      box-shadow:0 0 14px rgba(255,69,0,.15)}
    .persona-btn .p-icon{font-size:1.3rem;display:block;margin-bottom:.25rem}
    .persona-btn .p-name{font-family:var(--fm);font-size:.6rem;color:var(--txt2);
      text-transform:uppercase;letter-spacing:.08em}
    .persona-btn.active .p-name{color:var(--fire)}

    /* ROAST BUTTON */
    .roast-btn{width:100%;padding:1.1rem;border-radius:12px;
      border:3px solid var(--fire);background:var(--fire);
      color:#0A0A0F;font-family:var(--ff);font-size:1.15rem;font-weight:800;
      cursor:pointer;letter-spacing:.06em;text-transform:uppercase;
      box-shadow:6px 6px 0 rgba(255,69,0,.3);
      transition:all .18s var(--spring);
      display:flex;align-items:center;justify-content:center;gap:.7rem}
    .roast-btn:hover{transform:translate(-3px,-3px);
      box-shadow:10px 10px 0 rgba(255,69,0,.3);background:#FF5500}
    .roast-btn:active{transform:translate(2px,2px);box-shadow:none}
    .roast-btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important;box-shadow:none!important}
    .roast-btn.loading{background:var(--card);border-color:var(--border2);
      color:var(--txt2);cursor:not-allowed;transform:none;box-shadow:none}

    /* LOADING */
    .loading-bar{width:100%;height:3px;background:var(--surface);border-radius:2px;overflow:hidden;display:none}
    .loading-bar.show{display:block}
    .loading-fill{height:100%;background:linear-gradient(90deg,var(--fire),var(--yellow),var(--fire));
      background-size:200% 100%;animation:shimmer 1.2s linear infinite;border-radius:2px}
    @keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

    /* ROAST CARD */
    .roast-card{display:none;flex-direction:column;gap:1.2rem;
      background:var(--card);border:2px solid var(--border2);
      border-radius:16px;padding:1.8rem;
      box-shadow:8px 8px 0 var(--border);
      animation:card-in .4s var(--spring)}
    .roast-card.show{display:flex}
    @keyframes card-in{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}

    .roast-card-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.6rem}
    .roast-badge{display:flex;align-items:center;gap:.5rem}
    .roast-badge-icon{width:36px;height:36px;border-radius:8px;
      background:linear-gradient(135deg,var(--fire),var(--amber));
      display:flex;align-items:center;justify-content:center;font-size:1rem;
      box-shadow:0 0 12px rgba(255,69,0,.3)}
    .roast-badge-text{font-family:var(--fm);font-size:.6rem;color:var(--txt3);text-transform:uppercase;letter-spacing:.1em}
    .roast-badge-name{font-family:var(--ff);font-size:.85rem;font-weight:800;color:var(--fire)}

    .intensity-tag{font-family:var(--fm);font-size:.58rem;font-weight:700;
      padding:3px 10px;border-radius:20px;text-transform:uppercase;letter-spacing:.1em}
    .intensity-tag.mild{color:var(--yellow);background:rgba(255,215,0,.1);border:1px solid rgba(255,215,0,.3)}
    .intensity-tag.savage{color:var(--orange);background:rgba(255,107,0,.1);border:1px solid rgba(255,107,0,.3)}
    .intensity-tag.nuclear{color:var(--red);background:rgba(255,45,85,.1);border:1px solid rgba(255,45,85,.3)}

    .roast-divider{height:1px;background:var(--border);margin:.2rem 0}

    .roast-text{font-family:var(--ff);font-size:1.05rem;font-weight:700;
      color:var(--txt);line-height:1.65;
      border-left:3px solid var(--fire);padding-left:1.1rem}

    /* roast paragraphs */
    .roast-text p{margin-bottom:.8rem}
    .roast-text p:last-child{margin-bottom:0}

    /* SCORE METER */
    .burn-meter{display:flex;flex-direction:column;gap:.4rem}
    .burn-label{display:flex;justify-content:space-between;align-items:center}
    .burn-label-txt{font-family:var(--fm);font-size:.6rem;color:var(--txt3);text-transform:uppercase;letter-spacing:.1em}
    .burn-val{font-family:var(--ff);font-size:1rem;font-weight:800;color:var(--fire)}
    .burn-track{height:8px;background:var(--surface);border-radius:4px;overflow:hidden;border:1px solid var(--border)}
    .burn-fill{height:100%;border-radius:4px;
      background:linear-gradient(90deg,var(--yellow),var(--orange),var(--red));
      transition:width 1.2s var(--spring);box-shadow:0 0 8px rgba(255,69,0,.4)}

    /* ROAST ACTIONS */
    .roast-actions{display:flex;gap:.5rem;flex-wrap:wrap}
    .action-btn{flex:1;min-width:120px;padding:.65rem 1rem;border-radius:8px;
      border:1.5px solid var(--border2);background:var(--surface);
      color:var(--txt2);font-family:var(--fm);font-size:.62rem;font-weight:700;
      cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.4rem;
      transition:all .15s var(--spring);text-transform:uppercase;letter-spacing:.06em}
    .action-btn:hover{transform:translate(-1px,-1px);border-color:var(--fire);color:var(--fire)}
    .action-btn.share-x:hover{border-color:#1DA1F2;color:#1DA1F2}
    .action-btn.copy-btn:hover{border-color:var(--green);color:var(--green)}

    /* CARD EXPORT area (hidden, used for screenshot) */
    #export-card{
      position:fixed;left:-9999px;top:0;
      width:600px;background:#0A0A0F;
      border:2px solid #FF4500;border-radius:16px;
      padding:2rem;font-family:'Syne',sans-serif;
    }

    /* THINKING MESSAGES */
    .thinking-msgs{display:flex;flex-direction:column;gap:.3rem}
    .thinking-msg{font-family:var(--fm);font-size:.68rem;color:var(--txt3);
      display:flex;align-items:center;gap:.5rem;
      animation:msg-in .3s var(--spring)}
    @keyframes msg-in{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
    .thinking-msg i{color:var(--fire);font-size:.65rem}

    /* FOOTER */
    .footer-bar{position:relative;z-index:1;width:100%;max-width:700px;
      display:flex;align-items:center;justify-content:space-between;
      padding:.6rem 1.2rem;border-top:1px solid var(--border);
      flex-wrap:wrap;gap:.4rem;margin-top:auto}
    .footer-credit{font-family:var(--fm);font-size:.6rem;color:var(--txt3)}
    .footer-credit a{color:var(--fire);text-decoration:none;font-weight:600}
    .footer-links{display:flex;gap:.4rem}
    .footer-links a{width:26px;height:26px;border-radius:6px;background:var(--surface);
      border:1px solid var(--border);display:flex;align-items:center;justify-content:center;
      color:var(--txt3);font-size:.75rem;text-decoration:none;
      transition:all .12s var(--spring)}
    .footer-links a:hover{background:var(--fire);color:#fff;border-color:var(--fire)}

    /* SECTION CARD */
    .sec-card{background:var(--card);border:1px solid var(--border);
      border-radius:14px;padding:1.2rem 1.4rem;display:flex;flex-direction:column;gap:.9rem}

    ::-webkit-scrollbar{width:5px}
    ::-webkit-scrollbar-track{background:transparent}
    ::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}

    /* shake animation for nuclear */
    @keyframes nuke-shake{0%,100%{transform:rotate(0)}20%{transform:rotate(-2deg)}40%{transform:rotate(2deg)}60%{transform:rotate(-1.5deg)}80%{transform:rotate(1.5deg)}}
    .nuke-shake{animation:nuke-shake .4s ease}

    /* copied flash */
    .copied{color:var(--green)!important;border-color:var(--green)!important}