:root{
         --primary:#7a5cff;
         --primary-dark:#4b2bbd;
         --text:#111827;
         --muted:#6b7280;
         --soft:#eef2ff;
         --radius:14px;
         }
         @font-face{
         font-family:inter;
         src:url(https://www.sudokuki.org/assets/fonts/inter.ttf) 
         }
         *{box-sizing:border-box;margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto}
         body{background:#fff;color:var(--text)}
         .main{
         width:100vw;
         display:flex;
         justify-content:center;
         margin-top:15px;
         }
         .ribbon-pop{
         display:none;
         }
         .container{
         width:100%;
         max-width:420px;
         padding:20px;
         display:flex;
         align-items:center;
         justify-content:space-between;
         flex-direction:column;
         }
         /* ---------- LOGO ---------- */
         .logo{
         display:flex;
         justify-content:center;
         margin-bottom:10px;
         }
         .logo img{width:42px;height:42px}
         /* ---------- LANDING ---------- */
         .hidden{display:none}
         .badges{display:flex;gap:10px;justify-content:center;margin-bottom:24px}
         .badge{
         padding:8px 12px;border-radius:999px;
         border:2px solid #dcd6ff;
         font-size:12px;font-weight:600;color:#4c1d95;font-family:"inter";
         }
         .hero{height:220px;display:flex;justify-content:center;align-items:center;margin-bottom:10px}
         .hero img{width:220px;height:220px}
         .title-wrap{position:relative;height:73px;margin-bottom:6px;display:flex;align-items:center;width:100%;}
         .title{
         position:absolute;inset:0;
         font-size:26px;font-weight:800;line-height:1.25;
         opacity:0;transform:translateY(10px);
         transition:.45s ease;
         text-align:center;
         font-family:"inter";
         }
         .title.active{opacity:1;transform:none;}
         .title span{color:var(--primary)}
         .sub{font-size:15px;color:var(--muted);margin-bottom:18px;display:flex;align-items:center;width:100%;justify-content:center;font-family:"inter";font-weight:500;}
         .features{display:flex;justify-content:center;gap:14px;margin-bottom:22px}
         .feature{
         background:var(--soft);color:#4338ca;
         padding:6px 12px;border-radius:999px;font-size:13px;
         font-family:"inter";font-weight:400;
         }
         .cta{
         width:100%;padding:16px;border-radius:var(--radius);
         background:linear-gradient(135deg,#2b2e73,#6b4bd8);
         color:#fff;font-size:17px;font-weight:600;border:none;cursor:pointer;
         font-family:"inter";
         }
         /* ---------- QUIZ ---------- */
         .quiz-top{
         display:flex;align-items:center;gap:10px;margin-bottom:10px;
         }
         .back{
         font-size:20px;
         cursor:pointer;
         }
         .quiz-title{flex:1;text-align:center;color:var(--muted);font-family:"inter";font-weight:800;}
         .quiz-step{color:var(--primary);font-weight:600;font-family:"inter";}
         .progress{height:6px;background:#e5e7eb;border-radius:999px;margin-bottom:20px}
         .bar{height:100%;width:0%;background:var(--primary);transition:.3s}
         .question{
         font-size:24px;
         font-weight:800;
         margin-bottom:20px;
         font-family:"inter";
         }
         .options{display:flex;flex-direction:column;gap:14px}
         .option{
         background:#f1f4f9;
         border-radius:16px;
         padding:16px;
         display:flex;
         gap:14px;
         cursor:pointer;
         transition:.15s;
         box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
         font-family:"inter";
         font-weight:500;
         }
         .option.selected{
         background:#e6e0ff;
         border:2px solid var(--primary);
         }
         .ad-320x100,.ad-option{
         width:100%;
         height:100px;
         background:#eef2ff;
         border-radius:12px;
         display:flex;
         align-items:center;
         justify-content:center;
         font-size:12px;
         color:#4338ca;
         font-weight:600;
         box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
         }
         #result{
         width:100%;
         display:flex;
         align-items:center;
         flex-direction:column;
         }
         .result-desc{
         width:100%;
         text-align:justify;
         line-height:1.6;
         font-size:16px;
         margin-bottom:20px;
         font-family:"inter";
         font-weight:500;
         }
         .highlight {
         background: linear-gradient(120deg, rgba(122,92,255,0.18), rgba(122,92,255,0.08));
         color: #4b2bbd;
         padding: 2px 6px;
         border-radius: 6px;
         font-weight: 700;
         white-space: nowrap;
         }
         .result-heading {
         font-size: 28px;
         font-weight: 800;
         margin: 20px 0 10px;
         }
         .result-heading span {
         color: #363485;
         }
         .result-image {
         width: 100%;
         height: 150px;
         object-fit: cover;
         display: block;
         margin: 0 auto 20px;
         }
         .sr-only {
         position: absolute;
         width: 1px;
         height: 1px;
         padding: 0;
         margin: -1px;
         overflow: hidden;
         clip: rect(0, 0, 0, 0);
         white-space: nowrap;
         border: 0;
         }
         .question, .options {
         transition: opacity .3s ease;
         }
         .fade-out {
         opacity: 0;
         }
         /* ---------- QUESTION CARD ANIMATION ---------- */
         .card {
         position: relative;
         will-change: transform, opacity;
         }
         .slide-out-left {
         animation: slideOutLeft 0.35s ease forwards;
         }
         .slide-out-right {
         animation: slideOutRight 0.35s ease forwards;
         }
         .slide-in-left {
         animation: slideInLeft 0.35s ease forwards;
         }
         .slide-in-right {
         animation: slideInRight 0.35s ease forwards;
         }
         @keyframes slideOutLeft {
         to {
         transform: translateX(-30px);
         opacity: 0;
         }
         }
         @keyframes slideOutRight {
         to {
         transform: translateX(30px);
         opacity: 0;
         }
         }
         @keyframes slideInLeft {
         from {
         transform: translateX(-30px);
         opacity: 0;
         }
         to {
         transform: translateX(0);
         opacity: 1;
         }
         }
         @keyframes slideInRight {
         from {
         transform: translateX(30px);
         opacity: 0;
         }
         to {
         transform: translateX(0);
         opacity: 1;
         }
         }
         #ad-300x600{
         display:block;
         width:300px;
         height:300px;
         }
         #ad-300x250{
         display:block;
         width:300px;
         height:250px;
         }
         #ad-320x100{
         display:block;
         width:300px;
         height:100px;
         }
         @media (max-width:1050px){
         #ad-300x600{
         display:none;
         }
         }
         @media (max-width:735px){
         #ad-300x250{
         display:none;
         }
		 }
         @media (max-width:600px){ 
         .container{
         padding:10px;
         }
         .main{
         margin-top:5px;
         }
         }