.grok-wrapper{--grok-card-bg:#000;--grok-card-border:#333;--grok-guide-bg:#15181c;--grok-guide-step-bg:#1e2226;--grok-guide-border:#2f3336;--grok-text:#e7e9ea;--grok-text-strong:#fff;--grok-text-soft:#cbd5e1;--grok-text-muted:#94a3b8;--grok-accent:#1d9bf0;--grok-accent-hover:#1a8cd8;--grok-accent-soft:rgba(29,155,240,.1);--grok-success:#00ba7c;--grok-error:#f4212e;--grok-neutral:#333;--grok-neutral-hover:#444;--grok-radius-lg:16px;--grok-radius-md:10px;--grok-radius-sm:8px;--grok-pad:24px;max-width:600px;margin:20px auto;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}.grok-wrapper .grok-card{background:var(--grok-card-bg);color:var(--grok-text-strong);border:1px solid var(--grok-card-border);border-radius:var(--grok-radius-lg);padding:var(--grok-pad);max-width:100%;margin:0 0 var(--grok-pad) 0;box-shadow:0 4px 12px rgba(0,0,0,.5)}.grok-wrapper .grok-header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:15px}.grok-wrapper .grok-genre{color:var(--grok-accent);font-weight:bold;font-size:14px;background:var(--grok-accent-soft);padding:4px 12px;border-radius:20px;white-space:nowrap}.grok-wrapper .grok-status{font-size:12px;line-height:1.4;text-align:right;opacity:0;transition:opacity .2s ease}.grok-wrapper .grok-status.is-visible{opacity:1}.grok-wrapper .grok-status.is-success{color:var(--grok-success)}.grok-wrapper .grok-status.is-error{color:var(--grok-error)}.grok-wrapper .grok-body{min-height:100px;font-size:18px;line-height:1.5;white-space:pre-wrap;word-break:break-word;margin-bottom:20px;color:var(--grok-text);position:relative}.grok-wrapper .grok-card.is-typing .grok-body::after{content:'|';animation:grp-blink 1s infinite;margin-left:2px}@keyframes grp-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0; }
}.grok-wrapper .grok-footer{display:flex;gap:10px;flex-wrap:wrap;border-top:1px solid var(--grok-card-border);padding-top:15px}.grok-wrapper .grok-btn{cursor:pointer;border:none;border-radius:var(--grok-radius-sm);padding:10px 16px;font-size:14px;font-weight:bold;font-family:inherit;line-height:1.2;transition:background-color .2s ease , opacity .2s ease;display:inline-flex;align-items:center;gap:6px}.grok-wrapper .grok-btn:disabled{cursor:default;opacity:.6}.grok-wrapper .grok-btn:focus-visible{outline:2px solid var(--grok-accent);outline-offset:2px}.grok-wrapper .btn-shuffle{background:var(--grok-accent);color:#fff}.grok-wrapper .btn-shuffle:hover:not(:disabled) {background:var(--grok-accent-hover)}.grok-wrapper .btn-copy{background:var(--grok-neutral);color:#fff}.grok-wrapper .btn-copy:hover:not(:disabled) {background:var(--grok-neutral-hover)}.grok-wrapper .btn-x{background:#fff;color:#000}.grok-wrapper .btn-x:hover:not(:disabled) {background:#e6e6e6}.grok-wrapper .grok-guide{background:var(--grok-guide-bg);color:var(--grok-text);border:1px solid var(--grok-guide-border);border-radius:var(--grok-radius-lg);padding:var(--grok-pad);box-shadow:0 4px 12px rgba(0,0,0,.15)}.grok-wrapper .grok-guide-title{font-size:1.25rem;font-weight:bold;margin:0 0 16px 0;color:var(--grok-accent);border-bottom:2px solid var(--grok-guide-border);padding-bottom:10px}.grok-wrapper .grok-guide-intro{font-size:14.5px;line-height:1.6;margin:0 0 20px 0;color:var(--grok-text)}.grok-wrapper .grok-guide-steps{display:flex;flex-direction:column;gap:16px;margin-bottom:20px}.grok-wrapper .grok-guide-step{background:var(--grok-guide-step-bg);padding:16px;border-radius:var(--grok-radius-md);border:1px solid var(--grok-guide-border)}.grok-wrapper .grok-guide-step h3{font-size:15px;font-weight:bold;margin:0 0 8px 0;color:var(--grok-text-strong)}.grok-wrapper .grok-guide-step p{font-size:13.5px;line-height:1.5;margin:0 0 8px 0;color:var(--grok-text-soft)}.grok-wrapper .grok-guide-step p:last-child{margin-bottom:0}.grok-wrapper .grok-guide-step ul{margin:0;padding-left:20px}.grok-wrapper .grok-guide-step li{font-size:13px;line-height:1.5;color:var(--grok-text-muted)}.grok-wrapper .grok-guide-outro{font-size:13.5px;line-height:1.6;border-top:1px dashed var(--grok-guide-border);padding-top:16px;color:var(--grok-text-muted)}.grok-empty{max-width:600px;margin:20px auto}@media (prefers-reduced-motion:reduce){.grok-wrapper .grok-card.is-typing .grok-body::after{animation:none}.grok-wrapper .grok-btn,.grok-wrapper .grok-status{transition:none}}@media (max-width:480px){.grok-wrapper{--grok-pad:18px}.grok-wrapper .grok-body{font-size:16px}.grok-wrapper .grok-btn{flex:1 1 auto;justify-content:center}}