/* Reference layout: cootoe.com desktop and mobile structure; current COTO identity. */
@font-face{font-family:Poppins;src:url('./assets/poppins-400.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Poppins;src:url('./assets/poppins-600.ttf') format('truetype');font-weight:500 600;font-display:swap}
@font-face{font-family:Poppins;src:url('./assets/poppins-700.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:Poppins;src:url('./assets/poppins-800.ttf') format('truetype');font-weight:800 900;font-display:swap}
:root{font-size:16px;background:#000;--text:#f5f3ff;color-scheme:dark;scroll-padding-top:70px}
body{background:#000;color:#f5f3ff;overflow:hidden;font-family:Outfit,sans-serif}
.match-header{position:fixed;inset:0 0 auto;height:60px;display:flex;align-items:center;gap:27px;padding:0 14px;background:#000;z-index:50;border-bottom:1px solid #151515;font-family:Outfit;font-weight:700}
.match-brand{display:flex;align-items:center;gap:8px;font-size:16px;flex-shrink:0}.match-brand img{width:34px;height:34px;border-radius:50%}
.match-header nav{display:flex;align-items:stretch;gap:23px;height:100%}.match-header nav>a,.match-header nav>button{display:flex;align-items:center;gap:6px;position:relative;padding:0;background:none;color:#666;font-size:15px;font-weight:700;white-space:nowrap}.match-header nav svg{width:20px;height:20px}.match-header nav .active{color:white}.match-header nav .active:after{position:absolute;bottom:6px;left:0;right:0;height:2px;content:'';background:#f0a634;border-radius:5px}.match-header nav a:hover,.match-header nav button:hover{color:white}
.match-header-actions{margin-left:auto;display:flex;align-items:center;gap:17px}.match-header-actions .language-button{color:#aaa;font-size:11px}.login-button{border:1px solid #ad54fc;background:#8d1dff;border-radius:30px;padding:6px 15px;color:#fff;display:flex;align-items:center;gap:7px;font-weight:700;font-size:14px;white-space:nowrap}.login-button svg{height:17px;width:17px}
.match-scroll{height:100dvh;overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth;scroll-padding-top:70px;position:relative;background:linear-gradient(180deg,#1e0f00,transparent 100dvh)}
.match-showcase{height:100dvh;position:relative;background:#000;isolation:isolate}.galaxy{position:absolute;inset:0;overflow:hidden;z-index:-1;background:#000}.galaxy>i{position:absolute;background:#fff;opacity:.5;animation:star-drift 18s linear infinite;box-shadow:0 0 2px #fff6}
.carousel-window{max-width:1000px;margin:0 auto;height:100%;overflow:hidden}.card-stage{position:relative;display:flex;justify-content:center;align-items:center;perspective:1100px;transform-style:preserve-3d;z-index:2;top:20vh}
.match-card{position:absolute;top:0;width:calc(60vw + 6px);height:calc(85vw + 6px);max-width:326px;max-height:456px;border-radius:24px;overflow:hidden;border:3px solid transparent;background:#1a1a1a;transition:transform .4s cubic-bezier(.34,1.56,.64,1),opacity .3s,border-color .3s;will-change:transform}.match-card img{width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.15)}.pos-center{z-index:10;transform:translateZ(0);opacity:1;border-color:#8d1dff;box-shadow:0 0 30px #ff3c7833}.pos-left{z-index:5;transform:translate3d(-100%,0,-200px) rotateY(25deg);opacity:.5}.pos-right{z-index:5;transform:translate3d(100%,0,-200px) rotateY(-25deg);opacity:.5}.pos-back{z-index:0;transform:translateZ(-350px);opacity:0}
.match-bottom{position:absolute;bottom:120px;left:50%;transform:translateX(-50%);text-align:center;z-index:12;color:#fff}.online-count{font-size:14px;line-height:22px}.online-count>i{display:inline-block;width:8px;height:8px;background:#25ffb3;border-radius:50%;margin-right:10px;vertical-align:middle}.start-match{font-family:Outfit;display:flex;align-items:center;justify-content:center;gap:10px;width:295px;height:52px;margin:20px auto;border-radius:30px;font-size:14px;font-weight:700;background:linear-gradient(101deg,#8d1dff 15%,#a45bff 83%);color:white;position:relative;overflow:hidden}.start-match svg{height:16px;width:16px}.start-match:after{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,#ffffff80,transparent);transform:skewX(-20deg);animation:reference-shine 2s ease-in-out infinite}.bottom-blank{height:60px}
.ref-page{background:radial-gradient(37.5rem 18.75rem at 100% 0,rgba(124,58,237,.05),transparent 10%),radial-gradient(37.5rem 18.75rem at 100% 10%,rgba(124,58,237,.22),transparent 60%),radial-gradient(31.25rem 25rem at -10% 50%,rgba(167,139,250,.15),transparent 70%),#0e0815;color:#f5f3ff;font-family:DM Sans,-apple-system,BlinkMacSystemFont,sans-serif;font-size:.9375rem;line-height:1.6;min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased;max-width:31rem;margin:-7.5rem auto 0;padding:0 1.125rem 2.5rem;position:relative}
.ref-page .page-nav{display:flex;align-items:center;justify-content:space-between;padding:.875rem 0 1.25rem}
.ref-page .logo-text{font-family:Poppins,sans-serif;font-weight:800;font-size:1.5rem;letter-spacing:-.03125rem;background:linear-gradient(135deg,#a78bfa,#ff7fb6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.ref-page .nav-badge{font-size:.6875rem;font-weight:600;letter-spacing:.1em;color:#ffb3d4;background:rgba(255,127,182,.12);border:.0625rem solid rgba(255,127,182,.3);border-radius:62.4375rem;padding:.3125rem .625rem;display:inline-flex;align-items:center;gap:.375rem}
.ref-page .nav-badge:before{content:"";width:.375rem;height:.375rem;border-radius:50%;background:#ff7fb6;box-shadow:0 0 .375rem #ff7fb6;animation:reference-pulse 1.4s ease-in-out infinite}
.ref-page .hero-card{background:linear-gradient(150deg,#7c3aed,#4a1a8a 50%,#2a0f4a);border-radius:1.5rem;padding:2rem 1.625rem 1.75rem;position:relative;overflow:hidden;box-shadow:0 1.5rem 3.75rem -1.25rem rgba(124,58,237,.55);animation:reference-fade .5s ease both}
.ref-page .hero-card:before{content:"";position:absolute;top:-5rem;right:-3.75rem;width:12.5rem;height:12.5rem;background:radial-gradient(closest-side,#a78bfa,transparent);opacity:.5;pointer-events:none}
.ref-page .hero-card:after{content:"";position:absolute;bottom:-3.75rem;left:-2.5rem;width:11.25rem;height:11.25rem;background:radial-gradient(closest-side,#ff7fb6,transparent);opacity:.5;pointer-events:none}
.ref-page .hero-tag{font-size:.6875rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#e5d9ff;background:hsla(0,0%,100%,.15);border:.0625rem solid hsla(0,0%,100%,.22);border-radius:62.4375rem;padding:.375rem .75rem;display:inline-block;margin-bottom:1.375rem;position:relative;z-index:1}
.ref-page .hero-title{font-family:Poppins,sans-serif;font-weight:900;font-size:2.625rem;line-height:1.05;letter-spacing:-.09375rem;color:#fff;margin-bottom:.75rem;position:relative;z-index:1}
.ref-page .hero-title span{display:block;background:linear-gradient(135deg,#fff,#ffe0ed);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.ref-page .hero-desc{font-size:.875rem;color:hsla(0,0%,100%,.78);line-height:1.65;margin-bottom:1.5rem;position:relative;z-index:1}
.ref-page .btn-primary{box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;padding:.875rem 1.375rem;border:none;border-radius:.875rem;background:#fff;color:#7c3aed;font-family:Poppins,sans-serif;font-weight:700;font-size:.9375rem;letter-spacing:.0125rem;cursor:pointer;text-decoration:none;box-shadow:0 .625rem 1.875rem -.5rem hsla(0,0%,100%,.25);-webkit-tap-highlight-color:transparent;transition:transform .15s;position:relative;z-index:1}
.ref-page .btn-primary:active{transform:scale(.98)}
.ref-page .btn-primary svg{stroke:#7c3aed}
.ref-page .sub-hint{text-align:center;font-size:.6875rem;color:hsla(0,0%,100%,.6);margin-top:.625rem;letter-spacing:.04em;position:relative;z-index:1}
.ref-page .section-head{display:flex;align-items:baseline;justify-content:space-between;margin:2.5rem .125rem .875rem}
.ref-page .section-title{font-family:Poppins,sans-serif;font-weight:800;font-size:1.125rem;letter-spacing:-.01875rem}
.ref-page .section-meta{font-size:.6875rem;color:#a78bfa;font-weight:600;letter-spacing:.1em}
.ref-page .feature-list{display:flex;flex-direction:column;gap:.625rem;animation:reference-fade .5s ease .15s both}
.ref-page .feature-item{display:flex;align-items:stretch;background:#1f1330;border:.0625rem solid rgba(167,139,250,.18);border-radius:1rem;overflow:hidden;transition:border-color .2s,transform .15s}
.ref-page .feature-item:hover{border-color:rgba(167,139,250,.45)}
.ref-page .feature-bar{flex-shrink:0;width:2.625rem;background:linear-gradient(180deg,#a78bfa,#ff7fb6);display:grid;place-items:center;font-family:Poppins,sans-serif;font-weight:800;font-size:.875rem;color:#fff;letter-spacing:-.03125rem}
.ref-page .feature-body{padding:.875rem 1rem .875rem .875rem;flex:1}
.ref-page .feature-body h3{font-family:Poppins,sans-serif;font-weight:700;font-size:.9375rem;letter-spacing:-.0125rem;margin-bottom:.1875rem;color:#fff}
.ref-page .feature-body p{font-size:.75rem;color:#a1a0b8;line-height:1.55}
.ref-page .stats-wrap{margin-top:1.75rem;background:#1f1330;border:.0625rem solid rgba(167,139,250,.18);border-radius:1.25rem;padding:1.375rem 1.25rem;animation:reference-fade .5s ease .1s both}
.ref-page .stats-label{font-size:.6875rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#a78bfa;margin-bottom:.625rem}
.ref-page .big-stat{font-family:Poppins,sans-serif;font-weight:900;font-size:3rem;line-height:1;letter-spacing:-.125rem;background:linear-gradient(135deg,#a78bfa,#ff7fb6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:flex;align-items:baseline;gap:.375rem}
.ref-page .big-stat small{font-size:1.125rem;font-weight:700;color:#f5f3ff;-webkit-text-fill-color:#f5f3ff}
.ref-page .stats-desc{font-size:.8125rem;color:#a1a0b8;margin-top:.25rem}
.ref-page .stats-chips{display:flex;gap:.5rem;margin-top:1.125rem;flex-wrap:wrap}
.ref-page .chip{flex:1;min-width:0;background:rgba(167,139,250,.08);border:.0625rem solid rgba(167,139,250,.18);border-radius:.75rem;padding:.625rem .75rem;text-align:center}
.ref-page .chip-num{font-family:Poppins,sans-serif;font-weight:800;font-size:1.125rem;color:#fff;line-height:1.1}
.ref-page .chip-label{font-size:.625rem;color:#a1a0b8;letter-spacing:.08em;text-transform:uppercase;margin-top:.125rem}
.ref-page .steps-wrap{margin-top:1.75rem;background:#1f1330;border:.0625rem solid rgba(167,139,250,.18);border-radius:1.25rem;padding:1.375rem 1.25rem;animation:reference-fade .5s ease .18s both}
.ref-page .steps-list{display:flex;flex-direction:column;gap:1rem}
.ref-page .step-item{display:flex;gap:.875rem;align-items:flex-start}
.ref-page .step-num{flex-shrink:0;width:2.125rem;height:2.125rem;border-radius:.625rem;background:linear-gradient(135deg,#a78bfa,#ff7fb6);display:grid;place-items:center;font-family:Poppins,sans-serif;font-weight:800;font-size:.9375rem;color:#fff}
.ref-page .step-body h4{font-family:Poppins,sans-serif;font-weight:700;font-size:.875rem;letter-spacing:-.00625rem;margin-bottom:.1875rem;color:#fff}
.ref-page .step-body p{font-size:.75rem;color:#a1a0b8;line-height:1.6}
.ref-page .about-block{margin-top:1.75rem;padding:1.375rem 1.25rem;background:linear-gradient(150deg,rgba(124,58,237,.12),rgba(255,127,182,.08));border:.0625rem solid rgba(167,139,250,.18);border-radius:1.25rem;animation:reference-fade .5s ease .22s both}
.ref-page .about-block h3{font-family:Poppins,sans-serif;font-weight:800;font-size:1.0625rem;margin-bottom:.75rem;color:#fff}
.ref-page .about-block p{font-size:.8125rem;color:rgba(220,216,255,.82);line-height:1.75;margin-bottom:.625rem}
.ref-page .about-block p:last-child{margin-bottom:0}
.ref-page .cta-banner{margin-top:1.75rem;background:linear-gradient(120deg,#2a174a,#4a1a6a);border:.0625rem solid rgba(167,139,250,.45);border-radius:1.125rem;padding:1.125rem 1.125rem;display:flex;align-items:center;gap:.875rem;animation:reference-fade .5s ease .3s both;cursor:pointer;transition:transform .15s}
.ref-page .cta-banner:active{transform:scale(.98)}
.ref-page .cta-icon{flex-shrink:0;width:2.75rem;height:2.75rem;border-radius:.75rem;background:linear-gradient(135deg,#a78bfa,#ff7fb6);display:grid;place-items:center;color:#fff;font-size:1.25rem;box-shadow:0 .5rem 1.25rem -.375rem rgba(124,58,237,.45)}
.ref-page .cta-content{flex:1;min-width:0}
.ref-page .cta-content h4{font-family:Poppins,sans-serif;font-weight:700;font-size:.9375rem;letter-spacing:-.0125rem;color:#fff}
.ref-page .cta-content p{font-size:.6875rem;color:#a1a0b8;margin-top:.125rem}
.ref-page .cta-btn{flex-shrink:0;padding:.625rem .875rem;border-radius:.625rem;background:#fff;color:#7c3aed;font-family:Poppins,sans-serif;font-weight:700;font-size:.8125rem;text-decoration:none}
.ref-page .faq-list{display:flex;flex-direction:column;gap:.375rem;animation:reference-fade .5s ease .25s both}
.ref-page .faq-item{background:#1f1330;border:.0625rem solid rgba(167,139,250,.18);border-radius:.875rem;overflow:hidden;transition:border-color .2s,background .2s}
.ref-page .faq-item.open{border-color:rgba(167,139,250,.45);background:linear-gradient(180deg,#1f1330,rgba(167,139,250,.08))}
.ref-page .faq-item.open .faq-toggle{transform:rotate(45deg);background:rgba(167,139,250,.18)}
.ref-page .faq-item.open .faq-body{max-height:25rem}
.ref-page .faq-trigger{width:100%;display:flex;align-items:center;gap:.75rem;padding:.875rem .875rem .875rem .875rem;background:none;border:none;cursor:pointer;text-align:left;-webkit-tap-highlight-color:transparent;font-family:inherit}
.ref-page .faq-num{flex-shrink:0;width:1.5rem;height:1.5rem;border-radius:.5rem;background:linear-gradient(135deg,#a78bfa,#ff7fb6);display:grid;place-items:center;font-family:Poppins,sans-serif;font-weight:700;font-size:.75rem;color:#fff}
.ref-page .faq-q{flex:1;font-family:Poppins,sans-serif;font-weight:600;font-size:.8125rem;letter-spacing:-.00625rem;line-height:1.4;color:#fff}
.ref-page .faq-toggle{flex-shrink:0;width:1.375rem;height:1.375rem;border-radius:50%;border:.0625rem solid rgba(167,139,250,.45);display:grid;place-items:center;color:#a78bfa;font-size:.875rem;font-weight:600;transition:transform .25s,background .25s;line-height:1}
.ref-page .faq-body{max-height:0;overflow:hidden;transition:max-height .35s ease,padding .35s ease}
.ref-page .faq-a{font-size:.78125rem;color:rgba(200,195,230,.72);line-height:1.7;padding:0 .875rem .875rem 3.125rem}
.ref-page .footer{text-align:center;padding:1.75rem .625rem .625rem;margin-top:2rem;border-top:.0625rem solid rgba(167,139,250,.18);animation:reference-fade .5s ease .35s both}
.ref-page .footer-logo{font-family:Poppins,sans-serif;font-weight:800;font-size:1.75rem;letter-spacing:-.03125rem;background:linear-gradient(135deg,#a78bfa,#ff7fb6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.375rem}
.ref-page .footer-tag{font-size:.6875rem;color:#a1a0b8;letter-spacing:.12em;text-transform:uppercase;margin-bottom:1rem}
.ref-page .footer-copy{font-size:.6875rem;color:#a1a0b8;margin-bottom:.875rem}
.ref-page .footer-contact{display:flex;flex-direction:column;gap:.25rem;margin-bottom:1.25rem;font-size:.75rem}
.ref-page .footer-contact a{color:rgba(220,216,255,.75);text-decoration:none}
.ref-page .footer-contact a:hover{color:#a78bfa}
.ref-page .dl-wrap{display:flex;gap:.5rem;margin-bottom:1.25rem}
.ref-page .dl-btn{flex:1;padding:.6875rem .625rem;background:#1f1330;border:.0625rem solid rgba(167,139,250,.18);border-radius:.75rem;text-decoration:none;color:#f5f3ff;text-align:center;font-size:.75rem;font-weight:600;transition:border-color .2s}
.ref-page .dl-btn:hover{border-color:rgba(167,139,250,.45)}
.ref-page .dl-btn small{display:block;font-size:.625rem;color:#a1a0b8;font-weight:400;margin-top:.125rem}
.ref-page .footer-links{display:flex;align-items:center;justify-content:center;gap:.625rem;font-size:.6875rem}
.ref-page .footer-links a{color:rgba(220,216,255,.55);text-decoration:none}
.ref-page .footer-divider{color:rgba(167,139,250,.28)}
.ref-page{z-index:14}.ref-page h1,.ref-page h2,.ref-page h3,.ref-page h4{margin-top:0}.ref-page .hero-title .hero-first{background:none;-webkit-text-fill-color:#fff;color:#fff}.ref-page .section-head{gap:12px}.ref-page .section-title{line-height:1.6;margin:0}.ref-page .section-meta{line-height:1.6}.ref-page .feature-list{margin:0}.ref-page .feature-item{margin:0}.ref-page .feature-bar-two{background:linear-gradient(180deg,#ff7fb6,#a78bfa)}.ref-page .feature-bar-three{background:linear-gradient(180deg,#7c3aed,#ff7fb6)}.ref-page .stats-wrap,.ref-page .steps-wrap{margin-bottom:0}.ref-page .steps-wrap{margin-top:28px}.ref-page .step-body h5{font-family:'DM Sans',sans-serif;font-size:12.45px;font-weight:700;line-height:1.6;margin:0;color:#f5f3ff}.ref-page .cta-banner{width:100%;text-align:left;font-family:inherit;color:inherit}.ref-page .cta-content strong{display:block;font-family:Poppins,sans-serif;font-weight:700;font-size:15px;letter-spacing:-.2px;color:#fff}.ref-page .cta-content small{display:block;font-size:11px;color:#a1a0b8;margin-top:2px}.ref-page .cta-icon svg{width:22px;height:22px}.ref-page .btn-primary svg{width:16px;height:16px}.ref-page .faq-list{margin:0;gap:6px}.ref-page .faq-list details{padding:0;margin:0;border:1px solid #a78bfa2e;border-radius:14px;background:#1f1330;overflow:hidden}.ref-page .faq-list details[open]{border-color:#a78bfa73;background:linear-gradient(180deg,#1f1330,#a78bfa14)}.ref-page .faq-list summary{list-style:none;padding:14px;display:flex;align-items:center;gap:12px;font-family:inherit;line-height:1.4;cursor:pointer}.ref-page .faq-list summary::-webkit-details-marker{display:none}.ref-page .faq-list summary .faq-index{width:24px;height:24px;border:0;border-radius:8px;background:linear-gradient(135deg,#a78bfa,#ff7fb6);display:grid;place-items:center;font-family:Poppins;font-weight:700;font-size:12px;color:#fff;flex-shrink:0}.ref-page .faq-question{flex:1;font-family:Poppins;font-weight:600;font-size:13px;letter-spacing:-.1px;color:#fff}.ref-page .faq-list summary .faq-plus{width:22px;height:22px;flex-shrink:0;border-radius:50%;border:1px solid #a78bfa73;display:grid;place-items:center;color:#a78bfa;font-size:14px;line-height:1;transition:transform .25s,background .25s}.ref-page details[open] .faq-plus{transform:rotate(45deg);background:#a78bfa2e}.ref-page .faq-list details>p{font-size:12.5px;color:#c8c3e6b8;line-height:1.7;padding:0 14px 14px 50px;margin:0}.ref-page .footer-contact button{color:#dcd8ffbf;font-size:12px;line-height:1.6;padding:0;background:none}.ref-page .footer-links button{color:#dcd8ff8c;font-size:11px;padding:0;min-height:0;background:none}.ref-page .footer-logo{font-family:Outfit;font-size:32px}.ref-page .logo-text{font-family:Outfit;font-size:24px}.preview-disclosure{font-size:10px;line-height:1.7;color:#a1a0b8;margin-top:18px}
.explore-dialog{width:1000px;padding:32px;max-height:90dvh}.explore-dialog>h2{font-size:28px;margin-bottom:24px}.explore-dialog .discover-section .section-heading{display:none}.explore-dialog .profile-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.explore-dialog .profile-image{height:240px}.explore-prompt{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#b9a5c8;border-top:1px solid #382747;margin-top:20px;padding-top:15px;gap:15px}
@keyframes reference-fade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes reference-pulse{50%{opacity:.4}}@keyframes reference-shine{0%{left:-100%}30%{left:100%}100%{left:200%}}@keyframes star-drift{to{transform:translate(18px,10px)}}
@media(max-width:768px){.match-header{height:60px;gap:12px;padding:0 12px}.match-header nav{display:none}.match-brand{font-size:18px}.match-header-actions{gap:12px}.match-header-actions .login-button{font-size:12px;padding:7px 13px}.match-scroll{scroll-padding-top:60px}.ref-page{max-width:496px}.explore-dialog{padding:24px 18px}.explore-dialog .profile-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.explore-dialog .profile-image{height:220px}.match-header .match-brand img{height:30px;width:30px}}
@media(max-width:370px){.ref-page{padding-inline:18px}.ref-page .hero-title{font-size:39px}.ref-page .hero-card{padding-inline:23px}.ref-page .section-title{font-size:17px}.ref-page .section-meta{font-size:10px}.ref-page .cta-content strong{font-size:13px}.ref-page .cta-btn{font-size:11px;padding:9px}.explore-dialog .profile-image{height:180px}}
@media(prefers-reduced-motion:reduce){.galaxy>i,.ref-page,.ref-page *,.start-match:after{animation:none!important}.match-card{transition:none}.match-scroll{scroll-behavior:auto}}

.ref-page .reset-preferences{font-size:10px;margin-top:12px;padding:0;background:none;color:#a1a0b8}