@import"https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&display=swap";:root{color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5;--gold: #c9a84c;--red: #c0392b;--blue: #1a5276;--green: #39ff14;--bg: #0f0f0f;--card-bg: rgba(26, 26, 26, .9)}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;background:var(--bg);color:#e0e0e0}body{overflow-x:hidden}.batik-bg{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cdefs%3E%3Cpattern id='kawung' width='60' height='60' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='30' cy='30' r='12' fill='none' stroke='%23c9a84c' stroke-width='0.8'/%3E%3Ccircle cx='30' cy='30' r='6' fill='none' stroke='%23c9a84c' stroke-width='0.5'/%3E%3Ccircle cx='0' cy='0' r='12' fill='none' stroke='%23c9a84c' stroke-width='0.8'/%3E%3Ccircle cx='0' cy='60' r='12' fill='none' stroke='%23c9a84c' stroke-width='0.8'/%3E%3Ccircle cx='60' cy='0' r='12' fill='none' stroke='%23c9a84c' stroke-width='0.8'/%3E%3Ccircle cx='60' cy='60' r='12' fill='none' stroke='%23c9a84c' stroke-width='0.8'/%3E%3Cline x1='18' y1='30' x2='42' y2='30' stroke='%23c9a84c' stroke-width='0.3'/%3E%3Cline x1='30' y1='18' x2='30' y2='42' stroke='%23c9a84c' stroke-width='0.3'/%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23kawung)' width='120' height='120'/%3E%3C/svg%3E");background-size:120px 120px}.app{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:2rem 1rem 4rem}.title-wrapper{text-align:center;margin-bottom:1.5rem}.title{font-family:Cinzel,serif;font-size:clamp(1.8rem,5vw,3rem);font-weight:700;color:var(--gold);text-shadow:0 0 20px rgba(201,168,76,.4),0 0 60px rgba(201,168,76,.15);letter-spacing:.08em;line-height:1.2}.subtitle{font-size:.85rem;color:#c9a84c80;margin-top:.4rem;letter-spacing:.15em;text-transform:uppercase}.batik-divider{width:min(90%,500px);height:20px;margin:0 auto 2rem;opacity:.6}.slang-toggle{display:flex;gap:0;margin-bottom:2rem;border-radius:8px;overflow:hidden;border:1px solid rgba(201,168,76,.2)}.slang-btn{background:#1a1a1acc;color:#ffffff80;border:none;padding:.5rem 1rem;font-size:.8rem;cursor:pointer;transition:all .3s;font-family:inherit;letter-spacing:.03em}.slang-btn:hover{color:#fffc}.slang-btn.active{background:#c9a84c26;color:var(--gold)}.input-area{width:min(90%,600px);margin-bottom:2.5rem}.input-wrapper{position:relative}.question-input{width:100%;background:#1a1a1acc;border:none;border-bottom:2px solid rgba(201,168,76,.4);color:#e0e0e0;font-size:1.05rem;padding:1rem 1.2rem;font-family:inherit;border-radius:8px 8px 0 0;outline:none;transition:border-color .3s,box-shadow .3s}.question-input::placeholder{color:#ffffff40}.question-input:focus{border-bottom-color:var(--gold);box-shadow:0 2px 20px #c9a84c26}.ask-btn{width:100%;margin-top:1rem;background:linear-gradient(135deg,#c9a84c33,#c9a84c0d);border:1px solid rgba(201,168,76,.3);color:var(--gold);font-family:Cinzel,serif;font-size:1rem;font-weight:600;padding:.8rem 2rem;border-radius:8px;cursor:pointer;transition:all .3s;letter-spacing:.05em}.ask-btn:hover{background:linear-gradient(135deg,#c9a84c4d,#c9a84c1a);box-shadow:0 0 20px #c9a84c33}.ask-btn:disabled{opacity:.4;cursor:not-allowed}.cards-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;width:min(95%,900px)}@media(max-width:700px){.cards-grid{grid-template-columns:1fr}}.char-card{background:var(--card-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:2px solid;border-radius:12px;padding:1.5rem;position:relative;overflow:hidden;transition:transform .2s,box-shadow .3s}.char-card:hover{transform:translateY(-2px)}.char-card.semar{border-color:#c9a84c66;box-shadow:0 0 30px #c9a84c14,inset 0 0 30px #c9a84c08}.char-card.gareng{border-color:#c0392b66;box-shadow:0 0 30px #c0392b14,inset 0 0 30px #c0392b08}.char-card.petruk{border-color:#1a527680;box-shadow:0 0 30px #1a52761a,inset 0 0 30px #1a527608}.char-card.baiwor{border-color:#39ff144d;box-shadow:0 0 30px #39ff1414,inset 0 0 30px #39ff1405}.batik-strip{position:absolute;top:0;left:0;right:0;height:4px}.char-card.semar .batik-strip{background:linear-gradient(90deg,transparent,var(--gold),transparent)}.char-card.gareng .batik-strip{background:linear-gradient(90deg,transparent,var(--red),transparent)}.char-card.petruk .batik-strip{background:linear-gradient(90deg,transparent,var(--blue),transparent)}.char-card.baiwor .batik-strip{background:linear-gradient(90deg,transparent,var(--green),transparent)}.card-header{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}.avatar-wrapper{width:56px;height:56px;flex-shrink:0}.char-name{font-family:Cinzel,serif;font-size:1.1rem;font-weight:600}.char-card.semar .char-name{color:var(--gold)}.char-card.gareng .char-name{color:var(--red)}.char-card.petruk .char-name{color:#3498db}.char-card.baiwor .char-name{color:var(--green)}.char-role{font-size:.75rem;color:#fff6;letter-spacing:.05em}.answer-area{min-height:60px;font-size:.9rem;line-height:1.7;color:#ffffffbf}.answer-area.empty{color:#fff3;font-style:italic}.typewriter-cursor{display:inline-block;width:2px;height:1em;background:var(--gold);margin-left:2px;vertical-align:text-bottom;animation:blink .8s infinite}.char-card.gareng .typewriter-cursor{background:var(--red)}.char-card.petruk .typewriter-cursor{background:#3498db}.char-card.baiwor .typewriter-cursor{background:var(--green)}@keyframes blink{0%,50%{opacity:1}51%,to{opacity:0}}.share-btn{display:inline-flex;align-items:center;gap:.4rem;margin-top:1rem;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);color:#ffffff80;font-size:.75rem;padding:.4rem .8rem;border-radius:6px;cursor:pointer;transition:all .2s;font-family:inherit}.share-btn:hover{background:#ffffff1a;color:#fffc}.loading-dots{display:flex;gap:4px;padding:.5rem 0}.loading-dots span{width:6px;height:6px;border-radius:50%;background:#ffffff4d;animation:dotPulse 1.2s ease-in-out infinite}.loading-dots span:nth-child(2){animation-delay:.2s}.loading-dots span:nth-child(3){animation-delay:.4s}@keyframes dotPulse{0%,80%,to{opacity:.3;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}.footer{margin-top:3rem;text-align:center;font-size:.75rem;color:#ffffff26;letter-spacing:.05em}