*{box-sizing:border-box}html{scroll-behavior:smooth}body{color:#211d2b;background:#faf8fc;margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}a{color:inherit;text-decoration:none}button,input{font:inherit}.shell{width:min(1120px,100% - 40px);margin:auto}.nav{justify-content:space-between;align-items:center;height:76px;display:flex}.brand{align-items:center;gap:11px;font-size:18px;font-weight:800;display:flex}.brand small{letter-spacing:.12em;text-transform:uppercase;color:#8a8294;font-size:10px;font-weight:700;display:block}.brand-mark{color:#fff;background:#241d31;border-radius:12px;place-items:center;width:36px;height:36px;display:grid}.nav-link{color:#665e70;font-size:14px;font-weight:700}.hero{grid-template-columns:1.35fr .65fr;align-items:center;gap:60px;min-height:500px;padding:60px 0;display:grid}.hero-copy{min-width:0}.eyebrow{color:#806b9b;text-transform:uppercase;letter-spacing:.11em;align-items:center;gap:7px;font-size:11px;font-weight:800;display:flex}.hero h1{letter-spacing:-.055em;margin:18px 0;font-size:clamp(42px,6vw,72px);line-height:.98}.hero h1 span{color:#a06bb8}.hero-copy>p{color:#6d6675;max-width:620px;font-size:17px;line-height:1.7}.hero-actions{flex-wrap:wrap;gap:12px;margin-top:30px;display:flex}.primary,.secondary{cursor:pointer;border:0;border-radius:14px;justify-content:center;align-items:center;gap:9px;padding:13px 18px;font-weight:800;display:inline-flex}.primary{color:#fff;background:#251e31;box-shadow:0 10px 30px #241d3120}.primary:disabled{opacity:.6;cursor:wait}.secondary{color:#40384a;background:#fff;border:1px solid #e8e1ec}.helper-card{background:linear-gradient(145deg,#fff,#f5eef8);border:1px solid #ebe1ef;border-radius:28px;padding:30px;box-shadow:0 25px 70px #4c285c12}.avatar{background:#fff;border-radius:24px;place-items:center;width:74px;height:74px;margin-bottom:22px;font-size:0;display:grid;box-shadow:0 10px 30px #4c285c12}.avatar:before{content:"";background:url(/ryuna.png) 50%/contain no-repeat;width:38px;height:38px}.helper-name{font-size:22px;font-weight:900}.helper-name span{color:#5f9b78;vertical-align:middle;text-transform:uppercase;background:#e9f7ee;border-radius:20px;margin-left:5px;padding:5px 8px;font-size:10px}.helper-card p{color:#716978;margin-bottom:0;line-height:1.65}.trust{color:#716978;border-top:1px solid #e8e1eb;border-bottom:1px solid #e8e1eb;flex-wrap:wrap;gap:30px;padding:22px 0;font-size:13px;font-weight:700;display:flex}.trust div{align-items:center;gap:8px;display:flex}.trust svg{color:#9870ad;width:17px}.help{padding:90px 0}.section-head{justify-content:space-between;align-items:end;gap:20px;margin-bottom:28px;display:flex}.section-head h2,.assistant h2{letter-spacing:-.04em;margin:8px 0 0;font-size:36px}.search{background:#fff;border:1px solid #e6dfe9;border-radius:13px;align-items:center;gap:8px;width:250px;padding:10px 13px;display:flex}.search input{background:0 0;border:0;outline:0;width:100%}.search>span{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23655b6d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E") 50%/contain no-repeat;width:17px;height:17px;font-size:0;display:block}.problem-grid{grid-template-columns:1fr 1fr;gap:12px;display:grid}.problem{text-align:left;cursor:pointer;background:#fff;border:1px solid #e9e2ec;border-radius:18px;align-items:center;gap:15px;padding:18px;transition:all .18s;display:flex}.problem:hover,.problem.active{border-color:#cdb5d8;transform:translateY(-2px);box-shadow:0 12px 35px #4c285c0d}.problem-icon{color:#8d62a1;background:#f6f0f8;border-radius:13px;flex:0 0 44px;place-items:center;width:44px;height:44px;display:grid}.problem-copy{flex:1;gap:5px;display:grid}.problem-copy strong{font-size:15px}.problem-copy span{color:#817986;font-size:12px;line-height:1.45}.guide{color:#fff;background:#251e31;border-radius:24px;margin-top:18px;padding:28px 30px}.guide-label{color:#d6b8e3;text-transform:uppercase;letter-spacing:.12em;font-size:10px;font-weight:900}.guide h3{margin:8px 0;font-size:26px}.guide p{color:#d8d0dc;line-height:1.6}.guide ol{color:#eee8f0;padding-left:22px;line-height:1.75}.assistant{background:#eee6f2;border-radius:28px;align-items:center;gap:22px;margin-bottom:70px;padding:30px;display:flex}.assistant-icon{background:#fff;border-radius:20px;flex:0 0 62px;place-items:center;width:62px;height:62px;font-size:0;display:grid}.assistant-icon:before{content:"";background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239870ad' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8 8 0 0 1-8 8 8.6 8.6 0 0 1-3.8-.9L5 20l1.4-3.4A8 8 0 1 1 21 11.5Z'/%3E%3Cpath d='M8.5 11.5h.01M12 11.5h.01M15.5 11.5h.01'/%3E%3C/svg%3E") 50%/contain no-repeat;width:32px;height:32px}.assistant>div:nth-child(2){flex:1}.assistant p{color:#706879;max-width:650px;margin:8px 0 0;line-height:1.6}.footer{color:#938b98;border-top:1px solid #e8e1eb;justify-content:space-between;padding:25px 0 35px;font-size:11px;display:flex}.chat-backdrop{z-index:20;background:#18121d66;place-items:end center;padding:20px;display:grid;position:fixed;inset:0}.chat{background:#fff;border-radius:26px;flex-direction:column;width:min(560px,100%);height:min(700px,100dvh - 40px);min-height:0;display:flex;overflow:hidden;box-shadow:0 30px 90px #0004}.chat header{border-bottom:1px solid #eee7f0;flex:none;justify-content:space-between;align-items:center;padding:18px 20px;display:flex}.chat header>div:first-child{gap:3px;display:grid}.chat header strong{align-items:center;gap:8px;font-size:0;display:flex}.chat header strong:before{content:"";background:url(/ryuna.png) 50%/contain no-repeat;width:19px;height:19px;display:block}.chat header strong:after{content:"Ryuna";font-size:17px}.chat header span{color:#8b8291;font-size:11px}.chat header button{cursor:pointer;background:#f5f1f6;border:0;border-radius:10px;place-items:center;width:36px;height:36px;display:grid}.chat-header-actions{align-items:center;gap:7px;display:flex!important}.chat-header-actions .icon-button{color:#655b6d}.chat-header-actions .icon-button:hover{color:#8d62a1;background:#eee8f2}.chat-header-actions button:disabled{opacity:.45;cursor:not-allowed}.history-panel{z-index:5;background:#fff;border:1px solid #e7dfea;border-radius:18px;align-self:center;width:min(510px,100% - 30px);margin-top:72px;padding:12px;position:absolute;box-shadow:0 18px 50px #0002}.history-head{border-bottom:1px solid #eee7f0;justify-content:space-between;align-items:center;padding:7px 8px 10px;display:flex!important}.history-head strong{font-size:14px}.history-head span{color:#8b8291;font-size:11px}.history-list{max-height:270px;padding-top:5px;overflow:auto}.history-item{border-radius:12px;align-items:center;gap:5px;display:flex}.history-item.active{background:#f5eef7}.history-item>button:first-child{text-align:left;cursor:pointer;background:0 0;border:0;border-radius:10px;flex:1;gap:3px;min-width:0;padding:10px 8px;display:grid}.history-item>button:first-child:hover{background:#f7f2f8}.history-item strong{text-overflow:ellipsis;white-space:nowrap;font-size:13px;overflow:hidden}.history-item span{color:#918894;font-size:10px}.history-delete{color:#9a909d;cursor:pointer;flex:0 0 30px;place-items:center;margin-right:5px;background:0 0!important;border:0!important;width:30px!important;height:30px!important;display:grid!important}.history-delete:hover{color:#8d62a1;background:#f1ebf3!important}.chat-body{background:#fcfbfd;flex-direction:column;flex:1;gap:10px;min-height:0;padding:20px;display:flex;overflow:auto}.bubble{white-space:pre-wrap;border-radius:16px;max-width:82%;padding:11px 14px;font-size:14px;line-height:1.55}.bubble.assistant{color:#352d3c;background:#f0e8f3;align-self:flex-start}.bubble.user{color:#fff;background:#251e31;align-self:flex-end}.bubble.assistant:first-child{font-size:0}.bubble.assistant:first-child:after{content:"Hai! Aku Ryuna. Apa yang terjadi saat kamu mencoba memakai Pagaska Music?";font-size:14px}.thinking{align-items:center;gap:8px;display:flex}.thinking>span:first-child{animation:.35s thinking-fade}.thinking-dots{gap:3px;display:inline-flex}.thinking-dots i{background:#806b9b;border-radius:50%;width:4px;height:4px;animation:1s ease-in-out infinite thinking-dot}.thinking-dots i:nth-child(2){animation-delay:.15s}.thinking-dots i:nth-child(3){animation-delay:.3s}@keyframes thinking-fade{0%{opacity:.45}to{opacity:1}}@keyframes thinking-dot{0%,60%,to{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}.chat form{z-index:2;padding:13px;padding-bottom:max(13px,env(safe-area-inset-bottom));background:#fff;border-top:1px solid #eee7f0;flex:none;gap:8px;display:flex;position:relative}.file-input{display:none}.attach{color:#655b6d;cursor:pointer;background:#fff;border:1px solid #e5dfe8;border-radius:12px;flex:0 0 42px;place-items:center;width:42px;display:grid}.attach:hover,.attach.selected{color:#8d62a1;background:#f3ebf6;border-color:#cdb5d8}.composer{flex:1;min-width:0;position:relative}.chat form .composer input{border:1px solid #e5dfe8;border-radius:12px;outline:none;width:100%;min-width:0;padding:11px 38px 11px 13px}.chat form .composer input:focus{border-color:#bda5c8;box-shadow:0 0 0 3px #bda5c822}.clear-file{color:#776d7e;cursor:pointer;background:#f3eef5;border:0;border-radius:8px;place-items:center;width:25px;height:25px;display:grid;position:absolute;top:50%;right:7px;transform:translateY(-50%)}.chat form>.primary{flex:none;padding:11px 15px}@media (max-width:760px){.hero{grid-template-columns:1fr;padding:40px 0}.hero h1{font-size:48px}.problem-grid{grid-template-columns:1fr}.section-head{flex-direction:column;align-items:stretch}.search{width:100%}.assistant{flex-wrap:wrap;align-items:flex-start}.assistant .secondary{width:100%}.footer{flex-direction:column;gap:8px}.trust{grid-template-columns:1fr;display:grid}.chat-backdrop{place-items:stretch stretch;padding:0}.chat{border-radius:0;width:100%;height:100dvh;max-height:none}.chat-body{padding:16px}.chat form{padding:10px;padding-bottom:max(10px,env(safe-area-inset-bottom))}.chat form>.primary{padding:11px 14px}.attach{flex-basis:40px;width:40px}.history-panel{width:calc(100% - 20px);margin-top:68px}.history-list{max-height:230px}}