:root{ --bg:#0b0b0c; --bg2:#141416; --card:#18181b; --line:#2a2a2e; --red:#d7262e; --red2:#ff3b44; --white:#f5f3ef; --muted:#a3a1a0; --ease:cubic-bezier(.77,0,.18,1); } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{background:var(--bg);color:var(--white);font-family:Inter,system-ui,sans-serif;line-height:1.6;overflow-x:hidden} html,body{overflow-x:clip} main{overflow-x:clip} a{color:inherit;text-decoration:none} img{max-width:100%} h1,h2,h3,.display{font-family:Anton,"Arial Black",Impact,sans-serif;text-transform:uppercase;letter-spacing:.02em;line-height:1.02;font-weight:400} /* ---------- animated background ---------- */ #bg{position:fixed;inset:0;z-index:0;pointer-events:none} .kanji-bg{display:none;position:fixed;right:-4vw;top:50%;transform:translateY(-50%);font-family:Anton,"Arial Black",sans-serif;font-weight:400;font-size:min(30vw,360px);letter-spacing:.04em; line-height:1;color:transparent;-webkit-text-stroke:1px rgba(215,38,46,.18);writing-mode:vertical-rl;z-index:0;pointer-events:none; animation:kanjiFloat 14s ease-in-out infinite alternate;user-select:none} @keyframes kanjiFloat{from{transform:translateY(-52%) rotate(-1deg)}to{transform:translateY(-46%) rotate(1deg)}} .grain{position:fixed;inset:-50%;z-index:1;pointer-events:none;opacity:.06; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); animation:grain 1.2s steps(4) infinite} @keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}100%{transform:translate(0,0)}} /* ---------- top bar & nav ---------- */ .topbar{position:relative;z-index:20;background:var(--red);font-size:.8rem;font-weight:600;letter-spacing:.06em} .topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:0 20px;max-width:1240px;margin:auto} .topbar a{display:inline-flex;align-items:center;min-height:42px;padding:0 4px} .topbar a:hover{text-decoration:underline} .socials{display:flex;gap:14px} /* ---------- header with black-belt stripe ---------- */ .site-head{position:sticky;top:0;z-index:30} nav.main{position:relative;backdrop-filter:blur(14px);background:rgba(11,11,12,.9)} nav.main::after{content:"";position:absolute;left:0;right:0;bottom:-12px;height:12px;pointer-events:none; background:repeating-linear-gradient(90deg,rgba(255,255,255,.14) 0 6px,transparent 6px 11px) 0 50%/100% 1px no-repeat,#050506; box-shadow:0 1px 0 #2a2a2e,0 6px 18px rgba(0,0,0,.5)} nav.main .wrap{transition:padding .4s var(--ease)} .compact nav.main .wrap{padding-top:12px;padding-bottom:12px} .compact .wordmark b{font-size:2.3rem} @media (min-width:1021px){ nav.main .wrap{max-width:1440px!important;padding:26px 32px!important} .compact nav.main .wrap{padding-top:14px!important;padding-bottom:14px!important} .links{gap:8px} .links a{font-size:1rem!important;padding:10px 14px!important;letter-spacing:.12em} .links a::after{left:14px!important;right:14px!important;height:3px!important} nav.main .nav-cta{padding:18px 32px;font-size:.95rem} } .links a,.nav-cta{white-space:nowrap} @media (min-width:1021px) and (max-width:1440px){.links a{font-size:.8rem!important;padding:8px 7px!important;letter-spacing:.08em}.links{gap:0}nav.main .wrap{padding-left:18px!important;padding-right:18px!important;gap:10px}.wordmark b{font-size:2.1rem}.nav-tools{gap:6px;margin-left:4px}.lang-sw button{padding:6px 7px}.theme-btn{width:36px;height:36px}} @media (min-width:1021px) and (max-width:1180px){.links a{font-size:.74rem!important;padding:8px 5px!important;letter-spacing:.05em}.wordmark b{font-size:1.85rem}.wordmark small{font-size:.6rem}} @media (min-width:1021px) and (max-width:1180px){nav.main .nav-cta{display:none}} nav.main::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,transparent,rgba(215,38,46,.6) 15%,rgba(215,38,46,.6) 85%,transparent)} .faq-tools{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;margin-bottom:26px} .faq-tabs{display:flex;flex-wrap:wrap;gap:8px} .ftab{background:transparent;border:1px solid var(--line);color:#d8d6d2;padding:9px 14px;font:700 .76rem Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:all .3s} .ftab:hover{border-color:var(--red)} .ftab.on{background:var(--red);border-color:var(--red);color:#fff} .faq-search{background:#101012;border:1px solid var(--line);color:#fff;padding:11px 14px;font:inherit;min-width:240px} .faq-search:focus{outline:none;border-color:var(--red)} .acc details{transition:opacity .3s} .acc details.hide{display:none} .faq-empty{padding:26px 0;color:var(--muted)} nav.main .wrap{display:flex;align-items:center;justify-content:space-between;max-width:1240px;margin:auto;padding:14px 20px} .logo{display:flex;align-items:center;gap:12px} .wordmark{display:flex;flex-direction:column;align-items:stretch;line-height:1} .logo{flex:none} .wordmark b{white-space:nowrap;font-family:Anton,"Arial Black","Helvetica Neue",Impact,sans-serif;font-weight:400;font-size:clamp(2.2rem,2.6vw,2.9rem);letter-spacing:.01em;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.4);transition:letter-spacing .4s var(--ease)} .wordmark b em{font-style:normal;color:var(--red)} .wordmark small{display:flex;justify-content:space-between;margin-top:7px;font-size:.72rem;font-weight:600;letter-spacing:.32em;color:#cfccc7;white-space:nowrap} .logo:hover .wordmark b{letter-spacing:.04em} .logo .mark{width:44px;height:44px;border-radius:50%;background:var(--red);display:grid;place-items:center;font-family:Anton,"Arial Black",sans-serif;font-weight:400;font-size:1.3rem;box-shadow:0 0 0 3px var(--bg),0 0 0 4px var(--red);transition:transform .6s var(--ease)} .logo:hover .mark{transform:rotate(360deg)} .links{display:flex;gap:4px;list-style:none} .links a{position:relative;padding:8px 12px;font-size:.82rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#d8d6d2;transition:color .25s} .links a::after{content:"";position:absolute;left:12px;right:12px;bottom:2px;height:2px;background:var(--red);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)} .links a:hover,.links a.active{color:#fff} .links a:hover::after,.links a.active::after{transform:scaleX(1);transform-origin:left} .btn{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;font-weight:800;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;border:2px solid var(--red);background:var(--red);color:#fff;position:relative;overflow:hidden;cursor:pointer;transition:color .3s;isolation:isolate;font-family:inherit} .btn::before{content:"";position:absolute;inset:0;background:#fff;transform:translateX(-130%) skewX(-12deg);transition:transform .45s var(--ease);z-index:-1} .btn:hover{color:var(--red)} .btn:hover::before{transform:translateX(0) skewX(0)} .btn.ghost{background:transparent;border-color:#fff} .btn.ghost::before{background:var(--red)} .btn.ghost:hover{color:#fff} .burger{display:none;background:none;border:0;width:48px;height:48px;margin-right:-4px;cursor:pointer;position:relative;z-index:6;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-appearance:none;appearance:none;padding:0} .burger span{pointer-events:none} .burger span:nth-child(1){top:17px!important}.burger span:nth-child(2){top:23px!important}.burger span:nth-child(3){top:29px!important} .nav-open .burger span:nth-child(1),.nav-open .burger span:nth-child(3){top:23px!important} .mmenu{-webkit-transform:translateX(105%);-webkit-overflow-scrolling:touch}.nav-open .mmenu{-webkit-transform:none} .burger span{position:absolute;left:8px;right:8px;height:2px;background:#fff;transition:.3s} .burger span:nth-child(1){top:13px}.burger span:nth-child(2){top:19px}.burger span:nth-child(3){top:25px} .nav-open .burger span:nth-child(1){top:19px;transform:rotate(45deg)} .nav-open .burger span:nth-child(2){opacity:0} .nav-open .burger span:nth-child(3){top:19px;transform:rotate(-45deg)} .nav-cta{display:block} /* ---------- page transition ---------- */ .transition{position:fixed;inset:0;z-index:100;pointer-events:none;overflow:hidden} .tr-dark{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,#1a0608,#050505 70%);opacity:0} .sweep{position:absolute;left:50%;top:50%;width:220vmax;height:34vmin;min-height:150px;margin-left:-110vmax;transform:translateY(-50%) rotate(-9deg) translateX(-130%)} .sweep-belt{position:absolute;inset:0;background: repeating-linear-gradient(90deg,rgba(255,255,255,.16) 0 10px,transparent 10px 18px) 0 22%/100% 2px no-repeat, repeating-linear-gradient(90deg,rgba(255,255,255,.16) 0 10px,transparent 10px 18px) 0 78%/100% 2px no-repeat, linear-gradient(#1a1a1d,#0a0a0b 50%,#141416);box-shadow:0 30px 80px rgba(0,0,0,.6),inset 0 2px 0 #2c2c30,inset 0 -2px 0 #000} .sweep-tab{position:absolute;left:50%;top:0;bottom:0;width:min(520px,70vw);margin-left:calc(min(520px,70vw)/-2);background:var(--red);display:flex;align-items:center;justify-content:center;gap:0} .sweep-tab i{position:absolute;top:0;bottom:0;width:6px;background:#e9c46a} .sweep-tab i:nth-of-type(1){right:24px}.sweep-tab i:nth-of-type(2){right:40px}.sweep-tab i:nth-of-type(3){right:56px} .sweep-tab .kan{font-family:Anton,"Arial Black",sans-serif;font-size:clamp(2rem,6vw,4.4rem);letter-spacing:.06em;color:#fff;transform:rotate(0);padding-right:50px;white-space:nowrap} .transition.in .tr-dark{animation:darkIn .5s ease forwards} .transition.in .sweep{animation:sweepIn .7s cubic-bezier(.7,0,.25,1) forwards} .transition.out .tr-dark{opacity:1;animation:darkOut .6s .15s ease forwards} .transition.out .sweep{transform:translateY(-50%) rotate(-9deg);animation:sweepOut .7s cubic-bezier(.75,0,.3,1) forwards} @keyframes darkIn{to{opacity:1}}@keyframes darkOut{to{opacity:0}} @keyframes sweepIn{to{transform:translateY(-50%) rotate(-9deg) translateX(0)}} @keyframes sweepOut{to{transform:translateY(-50%) rotate(-9deg) translateX(130%)}} /* ---------- random karate page transitions ---------- */ .tt{position:absolute;inset:0;display:none;overflow:hidden} .transition[data-type=belt] .tt-belt,.transition[data-type=punch] .tt-punch,.transition[data-type=board] .tt-board, .transition[data-type=slash] .tt-slash,.transition[data-type=ranks] .tt-ranks,.transition[data-type=stamp] .tt-stamp{display:block} .tt .kan{font-family:Anton,"Arial Black",sans-serif;letter-spacing:.05em;white-space:nowrap} /* punch */ .p-red{position:absolute;inset:0;background:radial-gradient(circle,#ff4b52,#d7262e 45%,#6e0d12);clip-path:circle(0% at 50% 50%)} .p-ring{position:absolute;left:50%;top:50%;width:60vmin;height:60vmin;margin:-30vmin;border-radius:50%;border:6px solid rgba(255,255,255,.85);transform:scale(0);opacity:0} .p-fist{position:absolute;left:50%;top:50%;width:min(44vmin,320px);margin-left:calc(min(44vmin,320px)/-2);margin-top:calc(min(44vmin,320px)/-2);transform:scale(.12);opacity:0;filter:drop-shadow(0 20px 30px rgba(0,0,0,.5))} .p-crack{position:absolute;inset:0;width:100%;height:100%} .p-crack path{fill:none;stroke:rgba(40,0,4,.45);stroke-width:1.2;stroke-dasharray:400;stroke-dashoffset:400} .p-name{position:absolute;inset:0;display:grid;place-items:center} .p-name .kan{font-size:clamp(3rem,12vw,9rem);color:#fff;text-shadow:0 8px 0 rgba(0,0,0,.25);opacity:0;transform:scale(1.8)} .transition.in .p-fist{animation:pFist .45s cubic-bezier(.6,0,.9,.5) forwards} @keyframes pFist{0%{opacity:0;transform:scale(.12)}25%{opacity:1}80%{opacity:1;transform:scale(1.7)}100%{opacity:0;transform:scale(2.6)}} .transition.in .p-red{animation:pRed .4s .3s cubic-bezier(.2,.8,.3,1) forwards} @keyframes pRed{to{clip-path:circle(150% at 50% 50%)}} .transition.in .p-ring{animation:pRing .6s .32s ease-out forwards}.transition.in .p-ring:nth-of-type(2){animation-delay:.4s}.transition.in .p-ring:nth-of-type(3){animation-delay:.48s} @keyframes pRing{0%{opacity:1;transform:scale(.1)}100%{opacity:0;transform:scale(2.4)}} .transition.in .p-crack path{animation:pCrack .35s .42s ease-out forwards} @keyframes pCrack{to{stroke-dashoffset:0}} .transition.in .p-name .kan{animation:pName .3s .42s cubic-bezier(.2,.8,.2,1.2) forwards} @keyframes pName{to{opacity:1;transform:none}} .transition.out .p-red{animation:pRedOut .6s .1s cubic-bezier(.7,0,.3,1) forwards} @keyframes pRedOut{from{clip-path:circle(150% at 50% 50%)}to{clip-path:circle(0% at 50% 50%)}} .transition.out .p-name .kan{animation:pNameOut .3s ease-in forwards} @keyframes pNameOut{from{opacity:1;transform:none}to{opacity:0;transform:scale(1.4)}} .transition.out .p-crack path{stroke-dashoffset:0;animation:fadeOut .25s forwards} @keyframes fadeOut{to{opacity:0}} /* board break */ .b-half{position:absolute;inset:0;transform:translateY(-110%); background:radial-gradient(ellipse 30% 6% at 30% 30%,rgba(90,50,20,.35),transparent 70%),radial-gradient(ellipse 25% 5% at 70% 70%,rgba(90,50,20,.3),transparent 70%), repeating-linear-gradient(180deg,rgba(80,45,15,.18) 0 2px,transparent 2px 9px,rgba(255,230,190,.08) 9px 11px,transparent 11px 17px),linear-gradient(90deg,#b98552,#c99862 50%,#b07a46); box-shadow:inset 0 0 120px rgba(60,30,10,.55)} .b-half.l{clip-path:polygon(0 0,52% 0,48% 15%,53% 30%,47% 48%,54% 63%,48% 80%,52% 100%,0 100%);transform-origin:20% 100%} .b-half.r{clip-path:polygon(52% 0,100% 0,100% 100%,52% 100%,48% 80%,54% 63%,47% 48%,53% 30%,48% 15%);transform-origin:80% 100%} .b-name{position:absolute;inset:0;display:grid;place-content:center;text-align:center} .b-name .kan{font-size:clamp(3rem,12vw,9rem);color:#1a0c05;opacity:.88;mix-blend-mode:multiply} .b-name small{font-weight:800;letter-spacing:.5em;color:#5a2e12;font-size:.8rem;margin-top:6px} .b-crack{position:absolute;inset:0;width:100%;height:100%} .b-crack path{fill:none;stroke:#fff;stroke-width:3;stroke-dasharray:3000;stroke-dashoffset:3000;filter:drop-shadow(0 0 6px #fff)} .transition.in .b-half{animation:bDrop .55s cubic-bezier(.34,1.3,.64,1) forwards} @keyframes bDrop{to{transform:none}} .transition.out .b-half{transform:none} .transition.out .b-crack path{animation:bCrack .18s ease-out forwards,fadeOut .3s .25s forwards} @keyframes bCrack{to{stroke-dashoffset:0}} .transition.out .b-half.l{animation:bL .75s .15s cubic-bezier(.5,0,.75,0) forwards} .transition.out .b-half.r{animation:bR .75s .15s cubic-bezier(.5,0,.75,0) forwards} @keyframes bL{to{transform:translate(-55%,40%) rotate(-24deg);opacity:.9}} @keyframes bR{to{transform:translate(55%,40%) rotate(24deg);opacity:.9}} /* katana slash */ .s-band{position:absolute;left:-25%;width:150%;height:48%;background:linear-gradient(#141416,#070708);border-top:3px solid var(--red);box-shadow:0 0 40px rgba(0,0,0,.6);transform:rotate(-10deg) translateX(-110%)} .s-band.s1{top:-20%}.s-band.s2{top:24%;transform:rotate(-10deg) translateX(110%)}.s-band.s3{top:64%} .s-bg{position:absolute;inset:0;background:#0a0a0b;opacity:0} .transition.in .s-bg{animation:sBg .3s .5s linear forwards}@keyframes sBg{to{opacity:1}} .transition.out .s-bg{opacity:1;animation:fadeOut .12s forwards} .s-line{position:absolute;left:-10%;width:120%;height:3px;background:#fff;box-shadow:0 0 16px #fff,0 0 34px var(--red);transform:rotate(-10deg) scaleX(0);transform-origin:0 50%;opacity:0} .s-line.l1{top:30%}.s-line.l2{top:68%;transform-origin:100% 50%} .s-name{position:absolute;inset:0;display:grid;place-items:center} .s-name .kan{font-size:clamp(3rem,11vw,8rem);color:#fff;transform:rotate(-10deg);clip-path:inset(0 100% 0 0);border-bottom:6px solid var(--red);padding:0 .2em} .transition.in .s-line{animation:sLine .3s ease-out forwards}.transition.in .s-line.l2{animation-delay:.08s} @keyframes sLine{0%{opacity:1;transform:rotate(-10deg) scaleX(0)}60%{opacity:1;transform:rotate(-10deg) scaleX(1)}100%{opacity:0;transform:rotate(-10deg) scaleX(1)}} .transition.in .s-band{animation:sIn .45s .12s cubic-bezier(.7,0,.25,1) forwards}.transition.in .s-band.s2{animation-delay:.2s}.transition.in .s-band.s3{animation-delay:.28s} @keyframes sIn{to{transform:rotate(-10deg) translateX(0)}} .transition.in .s-name .kan{animation:sName .3s .52s cubic-bezier(.7,0,.3,1) forwards} @keyframes sName{to{clip-path:inset(0 0 0 0)}} .transition.out .s-band{transform:rotate(-10deg);animation:sOutR .55s cubic-bezier(.7,0,.3,1) forwards} .transition.out .s-band.s2{animation-name:sOutL;animation-delay:.06s}.transition.out .s-band.s3{animation-delay:.12s} @keyframes sOutR{to{transform:rotate(-10deg) translateX(110%)}}@keyframes sOutL{to{transform:rotate(-10deg) translateX(-110%)}} .transition.out .s-name .kan{clip-path:inset(0 0 0 0);animation:fadeOut .2s forwards} /* belt ranks */ .r-st{position:absolute;top:0;bottom:0;left:calc(var(--i)*100%/7);width:calc(100%/7 + 1px);background:var(--c);transform:scaleY(0);transform-origin:50% 0; box-shadow:inset -1px 0 0 rgba(0,0,0,.15)} .r-bar{position:absolute;left:0;right:0;top:50%;height:clamp(110px,22vh,190px);margin-top:calc(clamp(110px,22vh,190px)/-2);background:linear-gradient(#1a1a1d,#060607); box-shadow:0 20px 60px rgba(0,0,0,.6);transform:scaleX(0)} .r-bar::before,.r-bar::after{content:"";position:absolute;left:0;right:0;height:1px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.25) 0 8px,transparent 8px 14px)} .r-bar::before{top:22%}.r-bar::after{bottom:22%} .r-tab{position:absolute;left:50%;top:0;bottom:0;transform:translateX(-50%);min-width:min(520px,80vw);background:var(--red);display:grid;place-items:center;padding:0 70px 0 30px} .r-tab .kan{font-size:clamp(2.2rem,6vw,4.4rem);color:#fff} .r-tab em{position:absolute;top:0;bottom:0;width:6px;background:#e9c46a}.r-tab em:nth-of-type(1){right:22px}.r-tab em:nth-of-type(2){right:36px}.r-tab em:nth-of-type(3){right:50px} .transition.in .r-st{animation:rIn .42s calc(var(--i)*55ms) cubic-bezier(.7,0,.3,1) forwards} @keyframes rIn{to{transform:scaleY(1)}} .transition.in .r-bar{animation:rBar .35s .45s cubic-bezier(.7,0,.3,1) forwards} @keyframes rBar{to{transform:scaleX(1)}} .transition.out .r-bar{animation:rBarOut .3s ease-in forwards} @keyframes rBarOut{from{transform:scaleX(1)}to{transform:scaleX(0)}} .transition.out .r-st{transform:scaleY(1);transform-origin:50% 100%;animation:rOut .4s calc(.15s + (6 - var(--i))*50ms) cubic-bezier(.7,0,.3,1) forwards} @keyframes rOut{to{transform:scaleY(0)}} /* hanko stamp */ .st-bg{position:absolute;inset:0;background:radial-gradient(circle,#1d0a0c,#0b0b0c 70%);opacity:0} .st-seal{position:absolute;left:50%;top:50%;width:min(56vmin,440px);aspect-ratio:1;margin-left:calc(min(56vmin,440px)/-2);margin-top:calc(min(56vmin,440px)/-2);background:var(--red);border-radius:14px; box-shadow:0 30px 80px rgba(0,0,0,.5);transform:rotate(-8deg) scale(3);opacity:0;display:grid;place-items:center} .st-in{position:absolute;inset:7%;border:4px solid #fff;border-radius:6px;display:grid;place-content:center;text-align:center;padding:0 6%} .st-in .kan{font-size:clamp(1.8rem,7vmin,4rem);color:#fff;white-space:normal;line-height:1.05} .st-in small{margin-top:10px;font-weight:800;font-size:.7rem;letter-spacing:.35em;color:rgba(255,255,255,.85)} .st-dot{position:absolute;left:calc(50% + var(--x)*1vmin);top:calc(50% + var(--y)*1vmin);width:calc(var(--s)*1px);height:calc(var(--s)*1px);border-radius:50%;background:var(--red);transform:scale(0)} .transition.in .st-bg{animation:stBg .3s forwards}@keyframes stBg{to{opacity:.97}} .transition.in .st-seal{animation:stSeal .32s .18s cubic-bezier(.5,0,.6,1.3) forwards} @keyframes stSeal{to{opacity:1;transform:rotate(-8deg) scale(1)}} .transition.in .st-dot{animation:stDot .25s .46s cubic-bezier(.34,1.56,.64,1) forwards} @keyframes stDot{to{transform:scale(1)}} .transition.in .tt-stamp{animation:stShake .25s .48s linear} @keyframes stShake{25%{transform:translate(-6px,3px)}50%{transform:translate(5px,-4px)}75%{transform:translate(-3px,-2px)}} .transition.out .st-bg{opacity:.97;animation:fadeOut .5s .2s forwards} .transition.out .st-seal{opacity:1;transform:rotate(-8deg) scale(1);animation:stOut .45s ease-in forwards} @keyframes stOut{to{opacity:0;transform:rotate(-14deg) scale(.6)}} .transition.out .st-dot{transform:scale(1);animation:fadeOut .3s forwards} .page.show{animation:pageIn .9s var(--ease)} @keyframes pageIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}} /* ---------- layout ---------- */ main{position:relative;z-index:2;min-height:70vh} .page{display:none} .page.show{display:block} .wrap{max-width:1240px;margin:auto;padding:0 20px} section{padding:96px 0} .eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--red2);font-weight:800;font-size:.78rem;letter-spacing:.3em;text-transform:uppercase;margin-bottom:18px} .eyebrow::before{content:"";width:34px;height:2px;background:var(--red)} .lead{color:#cfccc7;font-size:1.08rem;max-width:620px} .reveal{opacity:0;transform:translateY(40px);transition:opacity .9s var(--ease),transform .9s var(--ease)} .reveal.on{opacity:1;transform:none} .d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}.d4{transition-delay:.4s}.d5{transition-delay:.5s} /* hero */ .hero{min-height:calc(100vh - 110px);display:flex;align-items:center;padding:60px 0;position:relative} .hero h1{font-size:clamp(3rem,9vw,7.6rem);margin:6px 0 24px} .hero h1 .red{color:var(--red);display:inline-block} .hero h1 .line{display:block;overflow:hidden} .hero h1 .line > span{display:inline-block;transform:translateY(110%);animation:rise 1s var(--ease) forwards} .hero h1 .line:nth-child(2) > span{animation-delay:.12s} .hero h1 .line:nth-child(3) > span{animation-delay:.24s} @keyframes rise{to{transform:none}} .hero .ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px} .hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center;width:100%} .belt-ring{position:relative;aspect-ratio:1;max-width:440px;margin-left:auto;width:100%} .belt-ring svg{width:100%;height:100%} .spin{animation:spin 40s linear infinite;transform-origin:center} .spin-rev{animation:spin 26s linear infinite reverse;transform-origin:center} @keyframes spin{to{transform:rotate(360deg)}} .enso{stroke-dasharray:1200;stroke-dashoffset:1200;animation:draw 2.4s .5s var(--ease) forwards} @keyframes draw{to{stroke-dashoffset:120}} .scroll-hint{position:absolute;bottom:24px;left:20px;font-size:.7rem;letter-spacing:.3em;color:var(--muted);display:flex;align-items:center;gap:12px} .scroll-hint i{width:1px;height:46px;background:linear-gradient(var(--red),transparent);animation:drip 1.8s infinite} @keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}} /* marquee */ .marquee{border-block:1px solid var(--line);background:var(--red);overflow:hidden;white-space:nowrap;padding:16px 0;transform:rotate(-1.5deg);margin:20px -20px} .marquee .track{display:inline-flex;gap:40px;animation:mq 26s linear infinite;font-family:Anton,sans-serif;font-size:1.6rem;letter-spacing:.06em} .marquee .track span::after{content:"✦";margin-left:40px;color:#0b0b0c} @keyframes mq{to{transform:translateX(-50%)}} /* stats */ .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)} .stat{background:var(--bg2);padding:34px 26px} .stat .n{font-family:Anton,sans-serif;font-size:3.2rem;color:var(--red2);line-height:1} .stat p{color:var(--muted);font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;margin-top:8px} /* cards */ .grid{display:grid;gap:22px} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)} .g2{grid-template-columns:repeat(2,1fr)} .card{background:linear-gradient(160deg,#1c1c20,#121214);border:1px solid var(--line);padding:32px;position:relative;overflow:hidden;transition:transform .5s var(--ease),border-color .4s} .card::after{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)} .card:hover{transform:translateY(-8px);border-color:#3a3a40} .card:hover::after{transform:scaleX(1)} .card h3{font-size:1.7rem;margin:10px 0 10px} .card p{color:#bdbab5;font-size:.95rem} .price{font-family:Anton,sans-serif;font-size:2.6rem;color:#fff;margin-top:18px} .price small{font-family:Inter,sans-serif;font-size:.8rem;color:var(--muted);letter-spacing:.08em} .tag{display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:.2em;padding:5px 10px;background:rgba(215,38,46,.15);color:var(--red2);text-transform:uppercase} .card ul{list-style:none;margin-top:16px} .card li{padding:6px 0 6px 22px;position:relative;color:#d0cdc8;font-size:.92rem} .card li::before{content:"";position:absolute;left:0;top:14px;width:10px;height:2px;background:var(--red)} .card .num{position:absolute;right:20px;top:10px;font-family:Anton,sans-serif;font-size:5rem;color:rgba(255,255,255,.04);line-height:1} .card.feature{border-color:var(--red);background:linear-gradient(160deg,#2a0d10,#141416)} /* team */ .coach{padding:0} .coach .ph{aspect-ratio:4/5;background:radial-gradient(circle at 50% 35%,#2b2b31,#111113 70%);display:grid;place-items:center;position:relative;overflow:hidden} .coach .ph .ini{font-family:Anton,sans-serif;font-size:5rem;color:#2f2f35;transition:transform .7s var(--ease),color .5s} .coach:hover .ph .ini{transform:scale(1.15);color:var(--red)} .coach .belt{position:absolute;left:0;right:0;bottom:22%;height:16px;background:#050505;box-shadow:0 0 0 1px #333} .coach .belt.brown{background:#5a3317} .coach .belt::after{content:"";position:absolute;right:18%;top:-6px;width:10px;height:28px;background:var(--red)} .coach .body{padding:24px} .coach h3{font-size:1.5rem;margin:0 0 4px} .coach .rank{color:var(--red2);font-weight:700;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase} .coach dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin-top:14px;font-size:.85rem} .coach dt{color:var(--muted);letter-spacing:.1em;text-transform:uppercase;font-size:.72rem;padding-top:2px} /* page header */ .phead{padding:110px 0 70px;position:relative;overflow:hidden;border-bottom:1px solid var(--line)} .phead h1,.phead .ph-title{font-size:clamp(3rem,10vw,8rem)} .phead h1 span,.phead .ph-title span{display:inline-block;animation:rise2 .9s var(--ease) both} @keyframes rise2{from{transform:translateY(60%);opacity:0;filter:blur(8px)}to{transform:none;opacity:1;filter:none}} .phead .ghost{position:absolute;right:20px;bottom:-30px;font-family:Anton,"Arial Black",sans-serif;font-weight:400;font-size:clamp(5rem,16vw,13rem);color:rgba(215,38,46,.09);white-space:nowrap;line-height:1;pointer-events:none} /* split */ .split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center} .frame{aspect-ratio:4/5;border:1px solid var(--line);position:relative;background: radial-gradient(circle at 70% 30%,rgba(215,38,46,.35),transparent 55%), repeating-linear-gradient(135deg,#141416 0 14px,#17171a 14px 28px);display:grid;place-items:center;overflow:hidden} .frame::before{content:"";position:absolute;inset:18px;border:1px solid rgba(255,255,255,.12)} .frame .big{font-family:Anton,"Arial Black",sans-serif;font-weight:400;font-size:clamp(4rem,10vw,8rem);letter-spacing:.04em;color:#fff;text-shadow:0 10px 60px rgba(215,38,46,.6);animation:breathe 5s ease-in-out infinite} @keyframes breathe{50%{transform:scale(1.05)}} .frame .cap{position:absolute;bottom:30px;left:30px;right:30px;font-size:.75rem;letter-spacing:.3em;color:var(--muted);text-transform:uppercase;display:flex;justify-content:space-between} /* schedule */ .sched{width:100%;border-collapse:collapse;min-width:760px} .sched th,.sched td{border:1px solid var(--line);padding:16px 12px;text-align:center;font-size:.9rem} .sched thead th{background:var(--red);font-family:Anton,sans-serif;font-weight:400;font-size:1.15rem;letter-spacing:.06em} .sched th[scope=row]{background:var(--bg2);text-align:left;font-weight:700;white-space:nowrap} .sched td{background:rgba(20,20,22,.7);transition:background .3s} .sched td.c:hover{background:#2a0d10} .slot{display:inline-block;padding:6px 12px;font-weight:700;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;border-left:3px solid var(--red);background:rgba(255,255,255,.04)} .slot.champ{background:var(--red);border-color:#fff} .slot.ninja{border-color:#f5c518} .sec-label{background:#050505 !important;color:var(--red2);font-weight:800;letter-spacing:.3em;font-size:.72rem !important;text-transform:uppercase;text-align:left !important} .scroller{overflow-x:auto;border:1px solid var(--line)} /* faq / accordion */ .acc{border-top:1px solid var(--line)} .acc details{border-bottom:1px solid var(--line)} .acc summary{list-style:none;cursor:pointer;padding:26px 50px 26px 0;font-family:Anton,sans-serif;font-size:1.5rem;letter-spacing:.02em;text-transform:uppercase;position:relative;transition:color .3s} .acc summary::-webkit-details-marker{display:none} .acc summary:hover{color:var(--red2)} .acc summary::after{content:"";position:absolute;right:6px;top:50%;width:18px;height:18px;margin-top:-9px; background:linear-gradient(var(--red),var(--red)) center/100% 2px no-repeat,linear-gradient(var(--red),var(--red)) center/2px 100% no-repeat;transition:transform .4s var(--ease)} .acc details[open] summary::after{transform:rotate(135deg)} .acc .ans{padding:0 0 26px;color:#cfccc7;max-width:760px;animation:fadeDown .5s var(--ease)} @keyframes fadeDown{from{opacity:0;transform:translateY(-10px)}} /* etiquette */ .rule{display:grid;grid-template-columns:90px 1fr;gap:20px;padding:30px 0;border-bottom:1px solid var(--line)} .rule .k{font-family:Anton,sans-serif;font-size:3.4rem;color:var(--red);line-height:1} .rule h3{font-size:1.8rem;margin-bottom:8px} .rule p{color:#cfccc7} /* store */ .store-note{display:flex;gap:16px;align-items:flex-start;border:1px solid var(--red);background:rgba(215,38,46,.1);padding:18px 22px;margin-bottom:34px} .store-note .sn-ic{font-size:1.6rem;line-height:1} .store-note b{display:block;font-family:Anton,sans-serif;font-weight:400;font-size:1.25rem;letter-spacing:.04em;margin-bottom:4px} .store-note p{color:#cfccc7;margin:0}.store-note a{color:var(--red2);font-weight:700} .prod{display:flex;flex-direction:column} .prod .img{all:unset;box-sizing:border-box;display:block;cursor:zoom-in;position:relative;aspect-ratio:1;margin:-32px -32px 22px;border-bottom:1px solid var(--line);background:#0b0b0d;overflow:hidden} .prod .img img{width:100%;height:100%;object-fit:contain;display:block;transition:transform .6s var(--ease)} .prod:hover .img img{transform:scale(1.04)} .prod .zoom{position:absolute;right:12px;bottom:12px;width:34px;height:34px;display:grid;place-items:center;background:rgba(0,0,0,.6);color:#fff;font-size:1rem;opacity:0;transition:opacity .3s} .prod:hover .zoom,.prod .img:focus-visible .zoom{opacity:1} .prod .psub{color:var(--muted);font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;margin:-4px 0 10px} .prod .pfoot{margin-top:auto;padding-top:18px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap} .prod .pfoot .price{margin:0} .prod .reserve{padding:12px 16px;font-size:.72rem} .prod .pickup{display:block;margin-top:10px;color:var(--muted);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase} .lightbox{position:fixed;inset:0;z-index:120;background:rgba(5,5,6,.92);display:grid;place-items:center;padding:24px;opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s} .lightbox.open{opacity:1;visibility:visible;transition:opacity .3s} .lightbox img{max-width:min(1280px,100%);max-height:calc(100vh - 48px);object-fit:contain;box-shadow:0 30px 80px rgba(0,0,0,.6)} .lb-x{position:absolute;top:16px;right:16px;width:46px;height:46px;background:#111;color:#fff;border:1px solid var(--line);font-size:1.1rem;cursor:pointer} :root[data-theme=light] .store-note p{color:#3b3834} :root[data-theme=light] .prod .img{background:#0b0b0d} /* contact */ form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px} .field{display:flex;flex-direction:column;gap:8px;margin-bottom:16px} .field label{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:700} .field input,.field select,.field textarea{background:#101012;border:1px solid var(--line);color:#fff;padding:14px 16px;font:inherit;transition:border-color .3s,box-shadow .3s} .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 4px rgba(215,38,46,.15)} .info-list{list-style:none} .info-list li{display:flex;gap:16px;padding:20px 0;border-bottom:1px solid var(--line)} .info-list .ic{width:44px;height:44px;flex:none;border:1px solid var(--red);display:grid;place-items:center;color:var(--red2)} .info-list small{display:block;color:var(--muted);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase} .toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,calc(100% + 60px));background:var(--red);padding:16px 26px;font-weight:700;z-index:90;transition:transform .5s var(--ease)} .toast.on{transform:translate(-50%,0)} .map{aspect-ratio:16/10;border:1px solid var(--line);position:relative;overflow:hidden;background: linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px) 0 0/40px 40px, linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px) 0 0/40px 40px,#101012;display:grid;place-items:center} .pin{width:22px;height:22px;background:var(--red);border-radius:50% 50% 50% 0;transform:rotate(-45deg);position:relative} .pin::after{content:"";position:absolute;inset:-14px;border:2px solid var(--red);border-radius:50%;animation:ping 1.8s infinite} @keyframes ping{from{transform:scale(.4);opacity:1}to{transform:scale(2.2);opacity:0}} /* CTA band */ .band{background:var(--red);position:relative;overflow:hidden;padding:80px 0} .band::before{content:"KARATE SO";position:absolute;right:-20px;top:50%;transform:translateY(-50%);font-family:Anton,"Arial Black",sans-serif;font-weight:400;font-size:16rem;color:rgba(0,0,0,.12);white-space:nowrap} .band h2{font-size:clamp(2.2rem,5vw,4.2rem);max-width:820px;position:relative} .band .btn{background:#0b0b0c;border-color:#0b0b0c;margin-top:28px} .band .btn::before{background:#fff} /* media */ .video{aspect-ratio:16/9;background:linear-gradient(135deg,#1d1d22,#0e0e10);border:1px solid var(--line);display:grid;place-items:center;position:relative;overflow:hidden} .play{width:84px;height:84px;border-radius:50%;background:var(--red);display:grid;place-items:center;transition:transform .4s var(--ease)} .play::after{content:"";border-left:22px solid #fff;border-top:14px solid transparent;border-bottom:14px solid transparent;margin-left:6px} .video:hover .play{transform:scale(1.12)} .video .ring{position:absolute;width:84px;height:84px;border-radius:50%;border:2px solid var(--red);animation:ping 2s infinite} /* footer */ footer{position:relative;z-index:2;background:#060607;border-top:1px solid var(--line);padding:70px 0 30px} .fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px} footer h4{font-family:Anton,sans-serif;font-weight:400;font-size:1.1rem;letter-spacing:.08em;margin-bottom:16px} footer ul{list-style:none} footer li{margin:8px 0} footer li a{color:var(--muted);transition:color .25s,padding .25s} footer li a:hover{color:#fff;padding-left:6px} .copy{margin-top:50px;padding-top:24px;border-top:1px solid var(--line);color:var(--muted);font-size:.8rem;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap} /* cursor glow */ .glow{position:fixed;width:420px;height:420px;border-radius:50%;pointer-events:none;z-index:1;background:radial-gradient(circle,rgba(215,38,46,.16),transparent 65%);transform:translate(-50%,-50%);transition:opacity .4s;left:-500px;top:-500px} /* photos */ .hero{overflow:hidden} .hero-slides{position:absolute;inset:0;z-index:0} .hero-slides div{position:absolute;inset:0;background:var(--img) 65% 30%/cover no-repeat;opacity:0;animation:kb 21s infinite} .hero-slides div:nth-child(2){animation-delay:7s}.hero-slides div:nth-child(3){animation-delay:14s} @keyframes kb{0%{opacity:0;transform:scale(1.15)}6%{opacity:1}33%{opacity:1}40%{opacity:0;transform:scale(1)}100%{opacity:0}} .hero::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,rgba(11,11,12,.82) 0%,rgba(11,11,12,.45) 42%,rgba(11,11,12,0) 75%),linear-gradient(0deg,var(--bg) 0%,transparent 18%)} .hero h1,.hero .lead,.hero .eyebrow,.phead h2,.phead .lead,.phead .eyebrow{text-shadow:0 2px 14px rgba(0,0,0,.55)} .hero > .wrap,.hero .scroll-hint{position:relative;z-index:1} .hero .scroll-hint{position:absolute} .slide-dots{position:absolute;right:20px;bottom:28px;z-index:2;display:flex;gap:8px} .slide-dots i{width:34px;height:3px;background:rgba(255,255,255,.25);overflow:hidden;position:relative} .slide-dots i::after{content:"";position:absolute;inset:0;background:var(--red);transform:scaleX(0);transform-origin:left;animation:dot 21s infinite linear} .slide-dots i:nth-child(2)::after{animation-delay:7s}.slide-dots i:nth-child(3)::after{animation-delay:14s} @keyframes dot{0%{transform:scaleX(0)}33.3%{transform:scaleX(1)}33.4%,100%{transform:scaleX(0)}} .cimg{margin:-32px -32px 22px;aspect-ratio:16/9;background:var(--img) center 28%/cover no-repeat;position:relative;overflow:hidden;transition:transform .8s var(--ease)} .cimg::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(18,18,20,.55),transparent 22%)} .card:hover .cimg{transform:scale(1.06)} .card .num{z-index:2} .frame.photo{background:var(--img) center 20%/cover no-repeat} .frame.photo::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(11,11,12,.6),transparent 22%)} .frame.photo .cap{z-index:2;color:#ddd} .coach .ph{background:var(--img) center 15%/cover no-repeat,#111113} .coach .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(18,18,20,.6),transparent 18%);transition:opacity .5s} .coach .ph{transition:background-size .8s var(--ease)} .coach:hover .ph::after{opacity:.5} .coach .ph .redbar{position:absolute;left:0;bottom:0;height:4px;width:100%;background:var(--red);z-index:2;transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)} .coach:hover .ph .redbar{transform:scaleX(1)} .phead{background:linear-gradient(90deg,rgba(11,11,12,.8),rgba(11,11,12,.3) 70%,rgba(11,11,12,.15)),var(--img,none) center 35%/cover no-repeat} .phead > .wrap{position:relative;z-index:1} .band.vid{background:#000} .band.vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55} .band.vid::after{content:none} .band.vid .wrap{position:relative;z-index:2} .band.vid::before{z-index:1} .media-video{width:100%;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--line);background:#000;display:block} .sched-photo{margin-top:40px;border:1px solid var(--line);overflow:hidden} .sched-photo img{display:block;width:100%;max-height:620px;object-fit:cover;transition:transform 1.2s var(--ease)} .sched-photo:hover img{transform:scale(1.04)} .newsbg{background:linear-gradient(90deg,rgba(20,10,11,.85),rgba(20,20,22,.35)),var(--img) center/cover no-repeat !important} .online{position:relative;padding:90px 0;background:linear-gradient(90deg,rgba(11,11,12,.82),rgba(11,11,12,.2)),var(--img) center/cover no-repeat} footer{background:linear-gradient(rgba(6,6,7,.95),rgba(6,6,7,.97)),var(--img) center/cover no-repeat} /* coach cards + profile modal */ .coach,.prog{cursor:pointer} .prog .more{display:inline-block;margin-top:16px;color:var(--red2);font-weight:800;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;transition:transform .3s var(--ease)} .prog:hover .more{transform:translateX(6px)} .prog:focus-visible{outline:2px solid var(--red);outline-offset:3px} .pm-photo.wide{background-position:center} button.chip{background:none;color:inherit;font:inherit;font-size:.8rem;font-weight:700;letter-spacing:.06em;cursor:pointer} .pm-sched.pm-medals li{border-left:3px solid var(--c)} .pm-sched .when{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px} .pm-sched .when i{font-style:normal;font-size:.74rem;font-weight:800;letter-spacing:.06em;border:1px solid var(--line);padding:3px 8px} .pm-sched .when i.tm{border-color:var(--c);color:var(--c)} :root[data-theme=light] .pm-sched .when i.tm{color:#111} .coach .ph .ini{display:none;position:relative;z-index:1} .coach .ph.noimg{background:radial-gradient(circle at 50% 35%,#3a1416,#141416 70%)} .coach .ph.noimg .ini{display:block;font-size:5.5rem;color:rgba(255,255,255,.18)} .coach:hover .ph.noimg .ini{color:var(--red)} .coach .mcount{position:absolute;top:14px;left:14px;z-index:2;background:var(--red);font-size:.68rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;padding:5px 10px} .coach .since{color:var(--muted);font-size:.8rem;letter-spacing:.06em;margin-top:2px} .coach .excerpt{font-size:.88rem;margin-top:10px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden} .coach .more{display:inline-block;margin-top:16px;color:var(--red2);font-weight:800;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;transition:transform .3s var(--ease)} .coach:hover .more{transform:translateX(6px)} .coach:focus-visible{outline:2px solid var(--red);outline-offset:3px} .pmodal{position:fixed;inset:0;z-index:95;background:rgba(5,5,6,.82);backdrop-filter:blur(8px);display:grid;place-items:center;padding:20px;opacity:0;visibility:hidden;transition:opacity .4s,visibility 0s .4s} .pmodal.open{opacity:1;visibility:visible;transition:opacity .4s} .pm-panel{position:relative;width:min(1080px,100%);max-height:calc(100vh - 40px);overflow:auto;background:#121214;border:1px solid var(--line);border-top:4px solid var(--red);display:grid;grid-template-columns:380px 1fr;transform:translateY(40px) scale(.97);transition:transform .55s var(--ease)} .pmodal.open .pm-panel{transform:none} .pm-photo{position:sticky;top:0;aspect-ratio:3/4;align-self:start;background:var(--img) center top/cover no-repeat,#151517;display:grid;place-items:center} .pm-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 85%,#121214)} .pm-photo .ini{display:none;font-family:Anton,sans-serif;font-size:7rem;color:rgba(255,255,255,.15)} .pm-photo.noimg{background:radial-gradient(circle at 50% 35%,#3a1416,#141416 70%)} .pm-photo.noimg .ini{display:block} .pm-body{padding:44px 44px 44px 36px} .pm-name{font-size:clamp(2.2rem,4vw,3.4rem);margin-bottom:6px} .pm-since{color:var(--muted);letter-spacing:.06em} .pm-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin:24px 0} .pm-facts div{background:#18181b;padding:14px 16px;font-weight:700} .pm-facts small{display:block;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:4px} .pm-bio p{color:#d4d1cc;margin-bottom:14px} .pm-bio p:last-child{color:#fff;font-style:italic;border-left:3px solid var(--red);padding-left:14px} .pm-medals h4,.pm-classes h4{font-family:Anton,sans-serif;font-weight:400;font-size:1.3rem;letter-spacing:.06em;margin:28px 0 14px} .pm-medals ul{list-style:none;display:grid;gap:10px} .pm-medals li{display:flex;gap:14px;align-items:flex-start;background:#18181b;border:1px solid var(--line);padding:14px 16px;opacity:0;transform:translateX(-14px)} .pmodal.open .pm-medals li{animation:medalIn .5s var(--ease) forwards;animation-delay:calc(.25s + var(--d))} @keyframes medalIn{to{opacity:1;transform:none}} .pm-medals .mi{font-size:1.5rem;line-height:1} .pm-medals b{display:block} .pm-medals li span:not(.mi){color:var(--muted);font-size:.88rem} .chips{display:flex;flex-wrap:wrap;gap:8px} .chip{border:1px solid var(--line);padding:7px 12px;font-size:.8rem;font-weight:700;letter-spacing:.06em;transition:border-color .3s,background .3s} .chip:hover{border-color:var(--red);background:rgba(215,38,46,.12)} .pm-close{position:absolute;top:12px;right:12px;z-index:3;width:44px;height:44px;border:1px solid var(--line);background:#0b0b0c;color:#fff;font-size:1.1rem;cursor:pointer;transition:background .3s,transform .4s var(--ease)} .pm-close:hover{background:var(--red);transform:rotate(90deg)} @media (max-width:820px){.pm-panel{grid-template-columns:1fr}.pm-photo{position:relative;aspect-ratio:auto;height:360px}.pm-photo::after{background:linear-gradient(0deg,#121214,transparent 50%)}.pm-body{padding:28px 22px}.pm-facts{grid-template-columns:1fr 1fr 1fr}} /* hero belt emblem */ .obi .tail{animation:tailSway 3.6s ease-in-out infinite alternate} .obi .tail.tr{animation-delay:-1.8s} @keyframes tailSway{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}} .obi-band{stroke-dasharray:700;stroke-dashoffset:700;animation:draw 2s .4s var(--ease) forwards} /* pillars */ .pillars .pic{width:64px;height:64px;color:#f5f3ef;margin-bottom:6px;transition:transform .5s var(--ease),color .3s} .pillars .card:hover .pic{transform:translateX(6px) rotate(-4deg);color:var(--red2)} .pillars .speed{stroke-dasharray:8;animation:speed 1s linear infinite} @keyframes speed{to{stroke-dashoffset:-16}} .pillars .kpath{stroke-dasharray:160;stroke-dashoffset:160} .pillars .reveal.on .kpath{animation:draw 2.4s .4s var(--ease) forwards} .pillars h3 small{font-family:Inter,sans-serif;font-size:.8rem;color:var(--muted);letter-spacing:.1em} /* belt path */ .belts{list-style:none;display:grid;gap:14px} .belt-row{display:grid;grid-template-columns:minmax(220px,420px) 1fr;gap:26px;align-items:center} .belt-bar{position:relative;height:46px;display:flex;align-items:center;padding-left:64px;color:var(--tc);overflow:hidden; background:repeating-linear-gradient(90deg,rgba(0,0,0,.18) 0 6px,transparent 6px 11px) 0 30%/100% 1px no-repeat,repeating-linear-gradient(90deg,rgba(0,0,0,.18) 0 6px,transparent 6px 11px) 0 70%/100% 1px no-repeat,var(--c); box-shadow:inset 0 2px 0 rgba(255,255,255,.18),inset 0 -3px 0 rgba(0,0,0,.25);opacity:0;-webkit-transform:translateX(-40px);transform:translateX(-40px);transition:opacity .8s ease,transform 1s var(--ease),-webkit-transform 1s var(--ease);transition-delay:calc(var(--i) * 60ms)} .belt-row.on .belt-bar{opacity:1;-webkit-transform:none;transform:none} @media (prefers-reduced-motion:reduce){.belt-bar{opacity:1;transform:none}} .belt-bar{background-color:var(--c)} .belt-bar b{font-family:Anton,"Arial Black",sans-serif;font-weight:400;font-size:1.25rem;letter-spacing:.08em;text-transform:uppercase} .belt-knot{position:absolute;left:14px;top:5px;width:34px;height:36px;border-radius:5px;background:var(--c);box-shadow:0 0 0 2px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.2);transform:rotate(-8deg)} .belt-row:nth-child(7) .belt-bar{box-shadow:inset 0 0 0 1px #3a3a40} .belt-row:nth-child(7) .belt-knot{box-shadow:0 0 0 1px #55555e} .dan{position:absolute;right:0;top:0;bottom:0;width:90px;background:linear-gradient(90deg,var(--red) 0 100%)} .dan::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 14px,#e9c46a 14px 19px)} .belt-row p{color:#cfccc7} /* values */ .values{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border:1px solid var(--line)} .val{background:rgba(20,20,22,.92);padding:28px 22px;position:relative;overflow:hidden;transition:background .4s} .val:hover{background:#2a0d10} .val span{font-family:Anton,sans-serif;color:var(--red);font-size:1.2rem} .val h3{font-size:1.6rem;margin:10px 0 8px} .val p{color:#bdbab5;font-size:.9rem} .val::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)} .val:hover::after{transform:scaleX(1)} @media (max-width:1020px){.values{grid-template-columns:repeat(2,1fr)}.belt-row{grid-template-columns:1fr;gap:8px}} @media (max-width:640px){.values{grid-template-columns:1fr}} /* ---------- karate fist cursor ---------- */ @media (hover:hover) and (pointer:fine){ html,body{cursor:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAE+0lEQVR4AexVDUyVVRh+zne5cO/97sUlgiIXc/5Ea5kGSKUyYOEWlE1B0YyW2ma1LCAQBUNmay3G71AJ5DeUfsQpM7PWVorCHNmsQUNRSQELkKFBXOT3fr3nu1z67HoBia3aujvPOe95z3Pe85z3nO9cAf/w738B/9kMMI1GM0+n0/nSFTIQrMXAfXyMHIwwbhkzAxTMXRTFVJ1OPCGKYqlGI26kdrFeb7isUjk0Miacp7EurVZMIT/ndXEfHyPORUdHcREpcNKRUK1W60m2TbErgCa5C4LqEsDi5s59MEStdowUBJQBwjeiqJsXE/0WcvZnY/mypxhjiOc8f//ljPuio94EzV/o4ICvdTrxNhdFsZrJ/h7Qu0HxsyuAOImSJDkXFuTifE210HCxlnl5PURuyeX5VauEhJ3bsTZ8DfbtzSSfpeTl5si+xIR4BAUF8NizZs5002akp5B/NRhjPjodtlnYlpqTLJZNzfwobQgNeUYe0ev1sAgAnnxiqezjldFohANt1cPDA64zXLhLhvusmXxBvLJlEyJf3IjMjDSo1Wo+FswrK8YQgNmzZ7tDpVJZuXCZbllA7eg46uMG7QwajRM3RzE4OCzbc+bMkVsnJyd4ehrJlhZQNVrsCqCg00ZZU2volOHsCqDzl/OlJE+RfVdcuwJosT9zTx1eKCu8kc9WNkYq7mdgIz1LwwRLn49ZPIDSxsjvngLovLwkCarmphYErwzFG9uiELc9AacrK0GZQVR0LDa88BLeSUrG0ytDMDAwgKuNjbK9O3kPNm/ZirKyT+QlknYnY2fCLqxdtwGNjT+TjyJTbS02AkRRXOLgoL4kCEwYHBpEbV0dyo8cRenBQ7h27bq8i/7+fnx76jTyDhSivr4eBoMBbm6uqK2tQ25eAb44+SWcnZ0RGBCA7u4eFBWX4szZajhaLm+7dXHe2ggg5w4CPszZi/bWZtxsa5HR+st1/HihBl+dPI6S4nykfPAe4mJjsD4iAn5+S9HTY5LFZWely/z6n37A4c8OoaXpqtzncYxGD+IIfTy+FTYCKEEPz3CZLoWHyQ+HlSd/jvRdwtv7cflt2LzpZeyIj0VWZio+/bgU39VUYdo0Z+TlF47OmYhhI4Am3bj9Wxfj50r2hIubqyuJ80Zvb++E53DiPQRI54aHhxHzdhw6O29xzrgwm80oKCzBKboX8+fPG5evJAjKDrdpB2l0DNXlR47hkUeXIDAoGKvXrBsTixb7IHFXEgRBwOuvvcrDTBg2AmjmQG9vzwqzWbrM326jpye5xi4LFyzAc8+G4sTxo/Bfscwuua2tnT5jdCoJgrKjtGkzNfweZGdloOJY+bgoKsyDr6+PMsRd9s2OjpH7ITUoB+wKkCTWyIkZmVm8+dtIS8sciSFdGTHkxq4As3mohF4904H8IjrfZJylh6Sq+hzuFzzte959HyUfHeQLdlNVTBgtdgX09fU1AVIk3YU7+QWFCKenNCw8AveLx+iC7tufwxe8JUnmSLrkrbxjhV0BnEDkCsZwZbqgknJd3DEZPKCSl2gxmXrmUrzPeVwl5FGl4682Y0xrEFTMV6PFZKBnKnp+2R2K+zvBpowrwGbGFDv+/QIkSWq4MTQgbe34FZNBC/2lSxLq7SVu3AyYzcOpw2AVFwb6KicDMBw2m4fSJy2APscz9DSH0S0OnAxMJtN6ilFlT8AfAAAA//+TXeixAAAABklEQVQDAATPUl/Qql73AAAAAElFTkSuQmCC") 15 6,auto} a,button,summary,label,select,[role=button],.card,.ftab,.chip{cursor:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAEv0lEQVR4AexVXWxUVRD+5u7/vbsUaSltYUuBtkIJApEffzCSyIMaiJEHm2AffCFGY3gwUNQQfTMaNLxAg3/YGAnGF38fjKKpRGOMkqCpbWm7/S+0hbZs22232/Zev3O7C1u3222xiZp4MnPO7JyZOd+dM2dWwz88/gfwn82AeL3etbqub2MJBcgJCiid2qNCyBlpzgwwWL5hGMd13fjSMIwPvF7jANfNft3f6HA4QyLaL9wL+3zG69Qru7DSqT2/4a93u41NRODRCdTn8wUpp1BaAHTK10RrAOTwGo/3ERekQtNwFpZ8azi0tZW5K/FeYTEe8C8REVQqu92BJaJ0R3ILoItW4nTia103BhUoTXN0UP4V8OciaaQFQJuXLGDJh6uLUVu2VevctE02eHyAIHv/0mzt5YIgypfl4B3uIz6qV5faulcKCrEnkKVi5+U5Xb6Tq9ag/I5siMjduo7n4ub2ooxsIXWSHfwK7FuabW/5HU6s9xIAf91nBDhPU9DtgUsEQZcby12uaSXnArdLHYinl+fhqZwVqAqug4t60h7yTZoDAAoKGNTB4AnrHKfbFt2S6ub5i27CnK7BIrfX9vHw/gpt2Sq2FfEpNVJ8Q0Sy4uJiL3pywLQALMuKZyzZfFHkGXHTAuBRDvIMmk4qkFgRH0KNSPxHfEkETlYny3EzJOwSv+3V4/HcaVlwtMfGsavhdxxsa8ahjhZ8NzwIZgbPdITweKgelV2tuJ/7MctE03jUll/obsOB1kZUD/TasY5eacPznS3Y21yH5liUOkbmnKAUAGwoW5xOV4OmiTYBC5eiozh34zrODPQhNBGDiCBK/TfDYZy61oPaaAQBzYEVfCWXxiI4Sd3n4QFkUfeQPwvhqSm83d+HmpEhuGHnoDdxuFpTAFB5lIwzbDLDm3diZMs9NocpXy7bipqSjThXVIITK4vwYt4qPLksF/f6Axg2TYgITgfX2vatd23HZ8Ub0E+/RAz1ZEU0lQZ1hM0pAJig9TlOh/UEm4yIjdg2dFBeyTe/jT1gH3vDQb7vY/lBVBWuwyfrNqC2bIv91aeuXbXt5zulAKBj143JKYnxiyjPm3LZM7brfkQW6DcLAOunSR77bGcI/bxzihnJZNpO8+7Pj4RRotp1Ro9bBikARkdH32C8Hz8a7EdR7UXsbPgNDzfVzcnFf1zEYVa/xj+PQ7n5t6LPQ0oBQJ/Y6OjILtO0Gt2890KXh6q5qdSj47GsZThfuhEPBtI30B5mlB/XnxxtNgD2vqbh53FKb7HIviopQyY+u6YUO1igdJmV+nh4hP0CsC4nG6QFYFkSUoav9Xap5W/zqz3d8RhWU1ywl7QATHOyml0vUsXiOtLZipqhMC4MDy2Yr8ZiONbdjnev96gDhzi9T75JaQFEo9F2pqvCtDBWRee9LfV4NFS3YFYFeqLvCiAyYFlmBYt8RqNICwAcNP6Uddhk2YNwWOXWAplejITOSGSkiPG+UD+SeU4AylBEfGQS+BELZ3rQT8YADJNTKCOAFI9FVvz7AfD61bvlwttc4P2relEJ41qn1tk4YwZMc+o4IKoYvxfB7fDHpjn5JtKMjAD4HC+wNe9nFe++HY5EIuWM8UOa8/EnAAAA//8InStUAAAABklEQVQDAKPcKl/5kJGcAAAAAElFTkSuQmCC") 15 6,pointer} input,textarea{cursor:text} } .punch{position:fixed;z-index:200;pointer-events:none;width:0;height:0} .punch i{position:absolute;left:0;top:0;border-radius:50%;transform:translate(-50%,-50%) scale(.2);border:3px solid var(--red);width:54px;height:54px;opacity:1;animation:punchRing .45s cubic-bezier(.2,.8,.3,1) forwards} .punch i:nth-child(2){width:30px;height:30px;border-width:2px;border-color:#fff;animation-duration:.35s} .punch b{position:absolute;left:0;top:0;width:3px;height:14px;background:#ff8a6a;border-radius:2px;transform-origin:50% 0;animation:punchRay .35s ease-out forwards} @keyframes punchRing{to{transform:translate(-50%,-50%) scale(1.25);opacity:0}} @keyframes punchRay{from{opacity:1}to{opacity:0;translate:0 0}} /* ---------- intro: logo · rising sun · ink · belt · katana cut ---------- */ .intro{position:fixed;inset:0;z-index:150;display:none;--k:1;overflow:hidden} .intro.running{display:block} .intro.quick{--k:.72} .in-half{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,#1a0709,#0b0b0c 65%)} .in-half.t{clip-path:polygon(0 0,100% 0,100% calc(var(--cutR,40%) + 1%),0 calc(var(--cutL,60%) + 1%))} .in-half.b{clip-path:polygon(0 var(--cutL,60%),100% var(--cutR,40%),100% 100%,0 100%)} .intro.running .in-half.t{animation:cutT calc(var(--k)*.8s) calc(var(--k)*2.75s) cubic-bezier(.7,0,.2,1) forwards} .intro.running .in-half.b{animation:cutB calc(var(--k)*.8s) calc(var(--k)*2.75s) cubic-bezier(.7,0,.2,1) forwards} @keyframes cutT{to{transform:translate(-6%,-75%) rotate(-3deg)}} @keyframes cutB{to{transform:translate(6%,75%) rotate(-3deg)}} .in-stage{position:absolute;inset:0;display:grid;place-items:center} .intro.running .in-stage{animation:stageShake calc(var(--k)*.32s) calc(var(--k)*1.5s) linear,stageOut calc(var(--k)*.16s) calc(var(--k)*2.66s) linear forwards} @keyframes stageShake{0%,100%{transform:none}20%{transform:translate(-8px,4px)}40%{transform:translate(7px,-5px)}60%{transform:translate(-5px,-3px)}80%{transform:translate(4px,3px)}} @keyframes stageOut{to{opacity:0}} .in-art{position:relative;width:min(78vmin,560px);aspect-ratio:1;display:grid;place-items:center} .in-sun{position:absolute;width:62%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 35%,#ff4b52,#d7262e 55%,#9e1a21);box-shadow:0 0 120px rgba(215,38,46,.55);transform:scale(0)} .intro.running .in-sun{animation:sunUp calc(var(--k)*.9s) calc(var(--k)*.15s) cubic-bezier(.34,1.56,.64,1) forwards} @keyframes sunUp{to{transform:scale(1)}} .in-enso{position:absolute;inset:0;width:100%;height:100%;overflow:visible} .in-enso path{fill:none;stroke-linecap:round;stroke-dasharray:1000;stroke-dashoffset:1000} .intro.running .in-enso path{animation:ensoDraw calc(var(--k)*1s) calc(var(--k)*.5s) cubic-bezier(.6,0,.3,1) forwards} .intro.running .in-enso path.e2{animation-delay:calc(var(--k)*.58s)} @keyframes ensoDraw{to{stroke-dashoffset:0}} .in-belt{position:absolute;left:-30%;right:-30%;top:58%;height:7%;min-height:26px; background:repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0 8px,transparent 8px 14px) 0 30%/100% 1px no-repeat,repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0 8px,transparent 8px 14px) 0 70%/100% 1px no-repeat,linear-gradient(#1c1c1f,#070708); box-shadow:0 10px 30px rgba(0,0,0,.6),inset 0 1px 0 #333;clip-path:inset(0 50% 0 50%)} .intro.running .in-belt{animation:beltIn calc(var(--k)*.5s) calc(var(--k)*1s) cubic-bezier(.7,0,.25,1) forwards} @keyframes beltIn{to{clip-path:inset(0 0 0 0)}} .in-knot{position:absolute;top:calc(58% - 2.2%);width:12%;aspect-ratio:1;border-radius:8px;background:linear-gradient(135deg,#232327,#0b0b0c);box-shadow:0 0 0 2px #3a3a40,0 10px 24px rgba(0,0,0,.6);transform:scale(0) rotate(-40deg)} .in-knot::after{content:"";position:absolute;left:20%;right:20%;top:46%;height:2px;background:#3a3a40;transform:rotate(-35deg)} .intro.running .in-knot{animation:knotPop calc(var(--k)*.4s) calc(var(--k)*1.45s) cubic-bezier(.34,1.56,.64,1) forwards} @keyframes knotPop{to{transform:scale(1) rotate(-8deg)}} .in-logo{position:absolute;top:31%;left:50%;transform:translateX(-50%);text-align:center;white-space:nowrap} .in-logo b{display:block;font-family:Anton,"Arial Black",sans-serif;font-weight:400;font-size:clamp(3.2rem,11vmin,6.6rem);line-height:1;letter-spacing:.02em;color:#fff;text-shadow:0 6px 0 rgba(0,0,0,.35);opacity:0;transform:scale(2.6);filter:blur(10px)} .in-logo b em{font-style:normal;color:#0b0b0c;-webkit-text-stroke:2px #fff;paint-order:stroke fill;text-shadow:0 6px 0 rgba(0,0,0,.35)} .intro.running .in-logo b{animation:slam calc(var(--k)*.3s) calc(var(--k)*1.28s) cubic-bezier(.2,.8,.2,1.2) forwards} @keyframes slam{to{opacity:1;transform:none;filter:none}} .in-sub{position:absolute;top:72%;left:50%;transform:translateX(-50%);white-space:nowrap;font-weight:700;font-size:clamp(.7rem,1.9vmin,.95rem);letter-spacing:.2em;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.6);opacity:0} .intro.running .in-sub{animation:subIn calc(var(--k)*.6s) calc(var(--k)*1.7s) ease forwards} @keyframes subIn{to{opacity:1;letter-spacing:.5em}} .in-osu{position:absolute;right:4%;top:14%;padding:8px 12px;border:3px solid #fff;background:var(--red);color:#fff;font-family:Anton,"Arial Black",sans-serif;font-size:clamp(1rem,3.2vmin,1.6rem);letter-spacing:.08em;transform:rotate(-10deg) scale(0);box-shadow:0 8px 20px rgba(0,0,0,.4)} .intro.running .in-osu{animation:stamp calc(var(--k)*.35s) calc(var(--k)*2.02s) cubic-bezier(.34,1.56,.64,1) forwards} @keyframes stamp{to{transform:rotate(-10deg) scale(1)}} .in-slash{position:absolute;left:50%;top:50%;width:160vmax;height:3px;margin-left:-80vmax;background:linear-gradient(90deg,transparent,#fff 20%,#fff 80%,transparent);box-shadow:0 0 18px #fff,0 0 40px #ff3b44;transform:rotate(var(--ang,-12deg)) scaleX(0);opacity:0;transform-origin:0 50%} .intro.running .in-slash{animation:slash calc(var(--k)*.5s) calc(var(--k)*2.45s) cubic-bezier(.8,0,.2,1) forwards} @keyframes slash{0%{opacity:1;transform:rotate(var(--ang)) scaleX(0)}45%{opacity:1;transform:rotate(var(--ang)) scaleX(1)}100%{opacity:0;transform:rotate(var(--ang)) scaleX(1)}} .in-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none} .intro.running .in-flash{animation:flash calc(var(--k)*.35s) calc(var(--k)*2.62s) ease-out} @keyframes flash{0%{opacity:0}20%{opacity:.55}100%{opacity:0}} .in-skip{position:absolute;right:18px;bottom:18px;z-index:3;background:transparent;border:1px solid rgba(255,255,255,.3);color:#ddd;padding:8px 14px;font:700 .72rem Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase} .in-skip:hover{border-color:var(--red);color:#fff} body.intro-on{overflow:hidden} /* ---------- schedule board ---------- */ .sch-board{--tc:#fff;background:linear-gradient(180deg,rgba(22,22,25,.96),rgba(14,14,16,.96));border:1px solid var(--line);border-top:4px solid var(--red);box-shadow:0 30px 80px rgba(0,0,0,.45);padding:clamp(18px,3vw,36px)} .sch-top{display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;padding-bottom:24px;border-bottom:1px solid var(--line);margin-bottom:24px} .sch-brand b{display:block;font-family:Anton,"Arial Black",sans-serif;font-weight:400;font-size:2.4rem;line-height:1;white-space:nowrap} .sch-brand em{font-style:normal;color:var(--red)} .sch-brand small{display:block;margin-top:6px;font-size:.66rem;font-weight:800;letter-spacing:.24em;color:var(--muted)} .sch-title h2{font-size:clamp(1.8rem,3.6vw,3.1rem)} .sch-title h2 span{color:var(--red)} .sch-contact{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:10px;font-size:.88rem;color:#d4d1cc} .sch-contact a:hover{color:var(--red2)} .sch-stamp{display:block;text-align:center;background:var(--red);padding:12px 18px;transform:rotate(3deg);box-shadow:0 0 0 3px #0b0b0c,0 0 0 5px var(--red),0 14px 30px rgba(0,0,0,.4);transition:transform .4s var(--ease)} .sch-stamp:hover{transform:rotate(0) scale(1.05)} .sch-stamp b{display:block;font-family:Anton,"Arial Black",sans-serif;font-weight:400;font-size:1.7rem;line-height:1.05;letter-spacing:.04em} .sch-stamp small{display:block;font-weight:800;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase} .sch-grid{display:grid;grid-template-columns:128px repeat(6,minmax(0,1fr));gap:4px} .sch-h{background:#050506;padding:14px 8px;text-align:center;font-family:Anton,"Arial Black",sans-serif;font-size:1.15rem;letter-spacing:.06em;position:relative} .sch-h.time{background:var(--red)} .sch-h.today{box-shadow:inset 0 -3px 0 var(--red)} .sch-h.today::after{content:"TODAY";position:absolute;top:-9px;left:50%;transform:translateX(-50%);background:var(--red);font:800 .58rem Inter,sans-serif;letter-spacing:.18em;padding:3px 7px} .sch-t{display:grid;place-items:center;background:#101012;font-family:Anton,"Arial Black",sans-serif;font-size:.95rem;letter-spacing:.03em;text-align:center;padding:10px;border-left:3px solid var(--red)} .sch-c{--c:#555;position:relative;min-height:118px;background:#141416;display:flex;flex-direction:column;gap:8px;align-items:flex-start;justify-content:center;padding:14px 12px 14px 16px;overflow:hidden;transition:transform .35s var(--ease),background .3s} .sch-c.full{background:linear-gradient(135deg,color-mix(in srgb,var(--c) 18%,#141416),#141416 70%)} .sch-c.full::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--c)} .sch-c.full:hover{transform:translateY(-4px);background:linear-gradient(135deg,color-mix(in srgb,var(--c) 30%,#141416),#18181b 70%);z-index:2;box-shadow:0 14px 30px rgba(0,0,0,.4)} .sch-c.empty{justify-content:center;color:#3a3a40;font-size:1.4rem} .sch-c.today{outline:1px solid rgba(215,38,46,.35);outline-offset:-1px} .sch-c svg{width:30px;height:30px;flex:none;color:var(--c);transition:transform .4s var(--ease)} .sch-c.full:hover svg{transform:scale(1.15) rotate(-6deg)} .sch-c b{display:block;overflow-wrap:break-word;hyphens:auto;font-family:Anton,"Arial Black",sans-serif;font-weight:400;font-size:1rem;letter-spacing:.03em;line-height:1.1;color:var(--c);text-transform:uppercase} .sch-c span{display:block;font-size:.7rem;font-weight:600;color:#cfccc7;margin-top:4px;line-height:1.35;text-transform:uppercase;letter-spacing:.04em} .sch-days{display:none} .sch-tabs{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin-bottom:12px} .sch-tabs button{background:#050506;border:1px solid var(--line);color:#ddd;padding:10px 0;font-family:Anton,"Arial Black",sans-serif;font-size:1rem;letter-spacing:.06em;position:relative} .sch-tabs button.on{background:var(--red);border-color:var(--red);color:#fff} .sch-tabs button.td::after{content:"";position:absolute;top:5px;right:5px;width:6px;height:6px;border-radius:50%;background:#fff} .sch-list{display:grid;gap:8px} .sch-list .row{display:grid;grid-template-columns:96px 1fr;gap:8px;animation:fadeDown .4s var(--ease) both} .sch-list .row .sch-t{font-size:.9rem;padding:8px} .sch-list .sch-c{flex-direction:row;align-items:center;gap:14px;min-height:92px}.sch-list .sch-c svg{width:36px;height:36px} .sch-list .none{padding:22px;text-align:center;color:var(--muted);background:#141416} .sch-bottom{display:grid;grid-template-columns:1fr 300px;gap:20px;margin-top:28px} .sch-bottom h3{font-size:1.4rem;color:var(--red2);margin-bottom:14px} .sch-classes,.sch-why{border:1px solid var(--line);padding:22px;background:rgba(11,11,12,.5)} .sch-cl{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 26px} .sch-li{--c:#fff;display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:start} .sch-li svg{width:30px;height:30px;color:var(--c)} .sch-li b{display:block;font-size:.84rem;font-weight:800;color:var(--c);text-transform:uppercase;letter-spacing:.04em} .sch-li b small{font-weight:600;color:var(--muted);letter-spacing:0;text-transform:none} .sch-li p{font-size:.84rem;color:#bdbab5;line-height:1.5;margin-top:2px} .sch-why ul{list-style:none;display:grid;gap:12px} .sch-why li{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;font-size:.92rem;color:#e2dfda} .sch-why svg{width:22px;height:22px} .sch-banner{margin-top:20px;display:grid;grid-template-columns:auto minmax(200px,300px) 1fr auto;gap:18px;align-items:center;background:#050506;border:1px solid var(--line);border-left:4px solid var(--red);padding:16px 20px} .sch-banner .cal{width:34px;height:34px;color:var(--red)} .sch-banner b{font-family:Anton,"Arial Black",sans-serif;font-weight:400;font-size:1.15rem;letter-spacing:.04em;text-transform:uppercase} .sch-banner span{font-size:.86rem;color:#bdbab5;border-left:1px solid var(--line);padding-left:18px} .sch-banner a{font-family:Anton,"Arial Black",sans-serif;color:var(--red2);font-size:1.05rem;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap} .sch-banner a:hover{color:#fff} @media (max-width:1100px){.sch-top{grid-template-columns:1fr auto}.sch-brand{display:none}.sch-banner{grid-template-columns:auto 1fr}.sch-banner span{grid-column:1/-1;border:0;padding:0}.sch-banner a{grid-column:1/-1}} @media (max-width:900px){.sch-grid{display:none}.sch-days{display:block}.sch-bottom{grid-template-columns:1fr}} @media (max-width:640px){.sch-top{grid-template-columns:1fr;gap:16px}.sch-stamp{justify-self:start}.sch-cl{grid-template-columns:1fr}.sch-board{padding:16px}} /* ---------- logo emblem ---------- */ .logo{display:flex;align-items:center;gap:12px} .emblem{flex:none;width:clamp(44px,3.6vw,56px);height:clamp(44px,3.6vw,56px);filter:drop-shadow(0 3px 8px rgba(215,38,46,.35));transition:transform .8s var(--ease),width .4s var(--ease),height .4s var(--ease)} .logo:hover .emblem{transform:rotate(360deg)} .compact nav.main .emblem{width:42px;height:42px} .mm-head .emblem{width:46px;height:46px} footer .emblem{width:52px;height:52px} .sch-brand{display:flex;align-items:center;gap:12px} .sch-em{width:58px;height:58px} @media (max-width:640px){.emblem{width:40px;height:40px}nav.main .wordmark b{font-size:1.9rem}} @media (min-width:1121px) and (max-width:1300px){nav.main .emblem{width:38px;height:38px}nav.main .logo{gap:8px}} /* ---------- nav tools: language + theme ---------- */ .nav-tools{display:flex;align-items:center;gap:10px;margin-left:8px} .lang-sw{display:inline-flex;border:1px solid var(--line);padding:3px;gap:2px;background:rgba(0,0,0,.2)} .lang-sw button{background:none;border:0;color:var(--muted);font:800 .74rem Inter,sans-serif;letter-spacing:.12em;padding:7px 9px;cursor:pointer;transition:background .3s,color .3s} .lang-sw button[aria-pressed=true]{background:var(--red);color:#fff} .lang-sw button:hover{color:var(--white)} .lang-sw button[aria-pressed=true]:hover{color:#fff} .theme-btn{position:relative;width:40px;height:40px;border:1px solid var(--line);background:rgba(0,0,0,.2);color:#e9c46a;cursor:pointer;overflow:hidden;transition:border-color .3s} .theme-btn:hover{border-color:var(--red)} .theme-btn svg{position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px;transition:transform .5s var(--ease),opacity .4s} .theme-btn .ic-sun{transform:translateY(140%) rotate(-90deg);opacity:0} .theme-btn .ic-moon{color:#f5f3ef} :root[data-theme=light] .theme-btn .ic-sun{transform:none;opacity:1;color:#e0a800} :root[data-theme=light] .theme-btn .ic-moon{transform:translateY(-140%) rotate(90deg);opacity:0} @media (max-width:1020px){.nav-tools{display:none}} nav.main .nav-cta{display:none!important} @media (min-width:1441px){.links a{font-size:.94rem!important;padding:10px 10px!important}.links{gap:2px}.links a::after{left:10px!important;right:10px!important}} :root[lang=fr] .links a{letter-spacing:.06em!important} /* ---------- mobile menu ---------- */ .mm-backdrop{position:fixed;inset:0;z-index:89;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:opacity .4s,visibility 0s .4s} .mmenu{position:fixed;top:0;right:0;bottom:0;z-index:90;width:min(420px,100vw);display:flex;flex-direction:column;background:#0e0e10;border-left:1px solid var(--line); transform:translateX(105%);visibility:hidden;transition:transform .55s var(--ease),visibility 0s .55s;overflow-y:auto;overscroll-behavior:contain} .mmenu::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:linear-gradient(#f2f0eb 0 14.3%,#f08c2a 0 28.6%,#2f6fd6 0 42.9%,#e8c32f 0 57.2%,#2f9a5a 0 71.5%,#7a4a26 0 85.8%,#0d0d0f 0);opacity:.9} .nav-open .mm-backdrop{opacity:1;visibility:visible;transition:opacity .4s} .nav-open .mmenu{transform:none;visibility:visible;transition:transform .55s var(--ease)} .mm-head{display:flex;justify-content:space-between;align-items:center;padding:20px 22px 18px 28px;border-bottom:1px solid var(--line)} .mm-head .wordmark b{font-size:2rem} .mm-close{position:relative;width:44px;height:44px;border:1px solid var(--line);background:none;cursor:pointer;transition:background .3s,transform .5s var(--ease)} .mm-close:hover{background:var(--red);transform:rotate(90deg)} .mm-close span{position:absolute;left:11px;right:11px;top:50%;height:2px;margin-top:-1px;background:var(--white)} .mm-close span:first-child{transform:rotate(45deg)}.mm-close span:last-child{transform:rotate(-45deg)} .mm-nav ul{list-style:none;padding:10px 0} .mm-nav li{opacity:0;transform:translateX(40px)} .nav-open .mm-nav li{animation:mmIn .55s calc(.12s + var(--i)*45ms) var(--ease) forwards} @keyframes mmIn{to{opacity:1;transform:none}} .mm-nav a{display:grid;grid-template-columns:10px 34px 1fr 22px;align-items:center;gap:14px;padding:13px 22px 13px 28px;position:relative;transition:background .3s} .mm-nav a:hover,.mm-nav a.active{background:linear-gradient(90deg,rgba(215,38,46,.16),transparent 80%)} .mm-belt{width:10px;height:26px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);transition:height .3s var(--ease)} .mm-nav a.active .mm-belt{height:34px} .mm-n{font:800 .74rem Inter,sans-serif;letter-spacing:.12em;color:var(--muted)} .mm-t{font-family:Anton,"Arial Black",sans-serif;font-size:1.65rem;letter-spacing:.04em;text-transform:uppercase;line-height:1.1} .mm-nav a.active .mm-t{color:var(--red2)} .mm-arr{width:20px;height:20px;color:var(--muted);transform:translateX(-6px);opacity:.5;transition:transform .3s var(--ease),opacity .3s,color .3s} .mm-nav a:hover .mm-arr,.mm-nav a.active .mm-arr{transform:none;opacity:1;color:var(--red2)} .mm-tools{margin:6px 22px 0 28px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:8px 0} .mm-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0} .mm-lbl{font:800 .74rem Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} .lang-sw.big button{font-size:.78rem;padding:9px 12px;letter-spacing:.06em} .switch{position:relative;width:64px;height:34px;border-radius:20px;border:1px solid var(--line);background:#050506;cursor:pointer;transition:background .35s} .switch i{position:absolute;left:3px;top:3px;width:26px;height:26px;border-radius:50%;background:#2a2a30;transition:transform .45s var(--ease),background .35s} .switch svg{position:absolute;left:5px;top:5px;width:16px;height:16px;transition:opacity .3s} .switch .ic-sun{opacity:0;color:#fff}.switch .ic-moon{color:#f5f3ef} :root[data-theme=light] .switch{background:var(--red);border-color:var(--red)} :root[data-theme=light] .switch i{transform:translateX(30px);background:#fff} :root[data-theme=light] .switch .ic-sun{opacity:1;color:#e0a800} :root[data-theme=light] .switch .ic-moon{opacity:0} .mm-cta{margin:22px 22px 0 28px;justify-content:center;white-space:normal;text-align:center;line-height:1.35} :root[lang=fr] .sch-h.today::after{content:"AUJOURD'HUI"} .mm-contact{margin:auto 0 0;padding:24px 22px 28px 28px;display:grid;gap:8px;font-size:.88rem;color:var(--muted)} .mm-contact a:hover{color:var(--red2)} .mm-social{display:flex;gap:16px;margin-top:6px;font-weight:800;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase} .mm-social a{color:var(--white)} body.nav-open{overflow:hidden} @media (min-width:1121px){.mmenu,.mm-backdrop{display:none}} @media (max-width:1120px){.links{display:none!important}.nav-tools{display:none!important}.burger{display:block!important}nav.main .nav-cta{display:none!important} @media (min-width:1441px){.links a{font-size:.94rem!important;padding:10px 10px!important}.links{gap:2px}.links a::after{left:10px!important;right:10px!important}} :root[lang=fr] .links a{letter-spacing:.06em!important}} /* ---------- light theme ---------- */ :root[data-theme=light]{--bg:#f4f0e8;--bg2:#ebe5da;--card:#fff;--line:#ddd5c8;--white:#17171a;--muted:#6d6862} :root[data-theme=light] body{background:var(--bg)} :root[data-theme=light] .grain{opacity:.035} :root[data-theme=light] .topbar,:root[data-theme=light] .marquee,:root[data-theme=light] .band,:root[data-theme=light] .sch-stamp,:root[data-theme=light] .sch-h,:root[data-theme=light] .coach .mcount{color:#fff} :root[data-theme=light] nav.main{background:rgba(250,247,241,.94)} :root[data-theme=light] .links a{color:#3a3a3e} :root[data-theme=light] .links a:hover,:root[data-theme=light] .links a.active{color:#111} :root[data-theme=light] .burger span{background:#111} :root[data-theme=light] .wordmark b{color:#111;text-shadow:none} :root[data-theme=light] .wordmark small{color:#5a5650} :root[data-theme=light] .lang-sw,:root[data-theme=light] .theme-btn{background:#fff} :root[data-theme=light] .btn.ghost{border-color:#111;color:#111} :root[data-theme=light] .btn.ghost:hover{color:#fff} :root[data-theme=light] .hero::after{background:linear-gradient(90deg,rgba(244,240,232,.9) 0%,rgba(244,240,232,.55) 42%,rgba(244,240,232,0) 75%),linear-gradient(0deg,var(--bg) 0%,transparent 18%)} :root[data-theme=light] .hero h1,:root[data-theme=light] .hero .lead,:root[data-theme=light] .phead h2,:root[data-theme=light] .phead .lead{text-shadow:0 1px 10px rgba(255,255,255,.7)} :root[data-theme=light] .card{background:linear-gradient(160deg,#fff,#f8f4ec)} :root[data-theme=light] .card:hover{border-color:#cbbfae} :root[data-theme=light] .card.feature{background:linear-gradient(160deg,#fde6e6,#fff)} :root[data-theme=light] .card p,:root[data-theme=light] .val p,:root[data-theme=light] .sch-li p,:root[data-theme=light] .sch-c span,:root[data-theme=light] .sch-banner span,:root[data-theme=light] .pm-medals li span:not(.mi){color:#57534d} :root[data-theme=light] .card li,:root[data-theme=light] .lead,:root[data-theme=light] .belt-row p,:root[data-theme=light] .acc .ans,:root[data-theme=light] .rule p,:root[data-theme=light] .pm-bio p,:root[data-theme=light] .sch-contact,:root[data-theme=light] .sch-why li{color:#3b3834} :root[data-theme=light] [style*="color:#bdbab5"],:root[data-theme=light] [style*="color:#cfccc7"],:root[data-theme=light] [style*="color:#d4d1cc"],:root[data-theme=light] [style*="color:#ddd"]{color:#4a4743!important} :root[data-theme=light] .card .num{color:rgba(0,0,0,.05)} :root[data-theme=light] .price,:root[data-theme=light] .pm-bio p:last-child{color:#111} :root[data-theme=light] .pillars .pic{color:#17171a} :root[data-theme=light] .phead{background:linear-gradient(90deg,rgba(244,240,232,.88),rgba(244,240,232,.35) 70%,rgba(244,240,232,.15)),var(--img,none) center/cover no-repeat} :root[data-theme=light] .phead .ghost{color:rgba(215,38,46,.12)} :root[data-theme=light] .stat{background:#fff} :root[data-theme=light] .val{background:rgba(255,255,255,.94)} :root[data-theme=light] .val:hover{background:#fde8e8} :root[data-theme=light] .ftab{color:#333} :root[data-theme=light] .ftab.on{color:#fff} :root[data-theme=light] .faq-search,:root[data-theme=light] .field input,:root[data-theme=light] .field select,:root[data-theme=light] .field textarea{background:#fff;color:#111} :root[data-theme=light] .map{background-color:#fff} :root[data-theme=light] .coach .ph::after{background:linear-gradient(0deg,rgba(250,247,241,.6),transparent 18%)} :root[data-theme=light] .coach .ph.noimg{background:radial-gradient(circle at 50% 35%,#f7d4d5,#efe9df 70%)} :root[data-theme=light] .coach .ph.noimg .ini{color:rgba(0,0,0,.14)} :root[data-theme=light] .cimg::after{background:linear-gradient(0deg,rgba(255,255,255,.5),transparent 22%)} :root[data-theme=light] .newsbg{background:linear-gradient(90deg,rgba(255,255,255,.95),rgba(255,255,255,.82)),var(--img) center/cover no-repeat!important} :root[data-theme=light] .online{background:linear-gradient(90deg,rgba(244,240,232,.96),rgba(244,240,232,.65)),var(--img) center/cover no-repeat} :root[data-theme=light] footer{background:linear-gradient(rgba(236,230,220,.96),rgba(236,230,220,.98)),var(--img) center/cover no-repeat} :root[data-theme=light] footer li a:hover{color:#111} :root[data-theme=light] .sch-board{background:linear-gradient(180deg,#fff,#faf7f1)} :root[data-theme=light] .sch-h{background:#17171a} :root[data-theme=light] .sch-h.time{background:var(--red)} :root[data-theme=light] .sch-t{background:#f1ece3} :root[data-theme=light] .sch-c{background:#f7f3ec} :root[data-theme=light] .sch-c.full{background:linear-gradient(135deg,color-mix(in srgb,var(--c) 16%,#fff),#fff 70%)} :root[data-theme=light] .sch-c.full:hover{background:linear-gradient(135deg,color-mix(in srgb,var(--c) 26%,#fff),#fff 70%)} :root[data-theme=light] .sch-c b,:root[data-theme=light] .sch-c svg,:root[data-theme=light] .sch-li b,:root[data-theme=light] .sch-li svg{color:color-mix(in srgb,var(--c) 72%,#000)} :root[data-theme=light] .sch-c.empty{color:#cfc6b8} :root[data-theme=light] .sch-classes,:root[data-theme=light] .sch-why,:root[data-theme=light] .sch-banner{background:#fff} :root[data-theme=light] .sch-banner a:hover{color:#111} :root[data-theme=light] .sch-tabs button{background:#fff;color:#222} :root[data-theme=light] .sch-tabs button.on{background:var(--red);color:#fff} :root[data-theme=light] .sch-tabs button.td::after{background:var(--red)} :root[data-theme=light] .sch-tabs button.on.td::after{background:#fff} :root[data-theme=light] .sch-list .none{background:#f7f3ec} :root[data-theme=light] .sch-stamp{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--red),0 14px 30px rgba(0,0,0,.18)} :root[data-theme=light] .pm-panel{background:#faf7f1} :root[data-theme=light] .pm-photo.noimg{background:radial-gradient(circle at 50% 35%,#f7d4d5,#efe9df 70%)} :root[data-theme=light] .pm-photo .ini{color:rgba(0,0,0,.14)} :root[data-theme=light] .pm-facts div,:root[data-theme=light] .pm-medals li{background:#fff} :root[data-theme=light] .pm-photo::after{background:linear-gradient(90deg,transparent 85%,#faf7f1)} :root[data-theme=light] .pm-close{background:#fff;color:#111} :root[data-theme=light] .pm-close:hover{color:#fff} :root[data-theme=light] .chip:hover{background:rgba(215,38,46,.1)} :root[data-theme=light] .mmenu{background:#faf7f1} :root[data-theme=light] .mm-belt{box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)} @media (max-width:820px){:root[data-theme=light] .pm-photo::after{background:linear-gradient(0deg,#faf7f1,transparent 50%)}} @media (max-width:1020px){:root[data-theme=light] nav.main{background:rgba(250,247,241,.97)}} /* ---------- registration links ---------- */ .tb-right{display:flex;gap:22px;align-items:center} .tb-reg{padding-right:22px;border-right:1px solid rgba(255,255,255,.4)} .links a.nav-reg{color:var(--red2)!important} .links a.nav-reg:hover{color:#fff!important} :root[data-theme=light] .links a.nav-reg:hover{color:#111!important} .mm-reg{margin-top:10px!important} .band-btns{display:flex;flex-wrap:wrap;gap:12px;align-items:center} .band-btns .btn{margin-top:28px} .band .btn.ghost{background:transparent;border-color:#fff;color:#fff} .band .btn.ghost::before{background:#fff}.band .btn.ghost:hover{color:var(--red)} .reg-callout{display:grid;grid-template-columns:1fr auto;gap:2px 16px;align-items:center;padding:18px 20px;margin-bottom:10px;background:var(--red);color:#fff;transition:transform .35s var(--ease)} .reg-callout:hover{transform:translateX(6px)} .reg-callout b{font-family:Anton,sans-serif;font-weight:400;font-size:1.4rem;letter-spacing:.04em;text-transform:uppercase} .reg-callout span{grid-row:2;font-size:.9rem} .reg-callout i{grid-row:1/3;grid-column:2;font-style:normal;font-size:1.8rem} .sch-reg{display:block;margin-top:12px;text-align:center;padding:16px;background:var(--red);color:#fff;font-family:Anton,"Arial Black",sans-serif;font-size:1.2rem;letter-spacing:.05em;text-transform:uppercase;transition:background .3s} .sch-reg:hover{background:#b81f27} /* ---------- live map ---------- */ .map{display:block!important;position:relative;aspect-ratio:16/11;padding:0} .map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:invert(.92) hue-rotate(180deg) saturate(.75) contrast(.92);transition:filter .4s} .map:hover iframe{filter:invert(.92) hue-rotate(180deg) saturate(1) contrast(1)} :root[data-theme=light] .map iframe{filter:none} .map{overflow:hidden;background:#101012} .map-art{position:absolute;inset:0;width:100%;height:100%} .ma-bg{fill:#141417}.ma-blocks rect{fill:#1b1b1f;stroke:#232328}.ma-park{fill:#16231b} .ma-road path{fill:none;stroke:#3a3a42;stroke-width:16;stroke-linecap:round} .ma-street path{fill:none;stroke:#2a2a30;stroke-width:7} .ma-cres{fill:none;stroke:var(--red);stroke-width:8;stroke-linecap:round;opacity:.85} .ma-lbl{font:700 14px Inter,sans-serif;fill:#9a978f;letter-spacing:.06em} .ma-pin{fill:var(--red)} .ma-ring{fill:none;stroke:var(--red);stroke-width:2;transform-origin:center;animation:ping 2s infinite} .map-card{position:absolute;right:12px;top:12px;z-index:2;background:rgba(11,11,12,.88);border:1px solid var(--line);border-left:3px solid var(--red);padding:10px 14px;font-size:.82rem;line-height:1.4;color:#d4d1cc} .map-card b{display:block;font-family:Anton,sans-serif;font-weight:400;font-size:1.05rem;letter-spacing:.05em;color:#fff} .map iframe{z-index:1;background:#141417} .map.live .map-card{display:none} :root[data-theme=light] .map{background:#f1ece3} :root[data-theme=light] .ma-bg{fill:#f1ece3}:root[data-theme=light] .ma-blocks rect{fill:#e7e0d4;stroke:#ddd5c8}:root[data-theme=light] .ma-park{fill:#dbe8d6} :root[data-theme=light] .ma-road path{stroke:#fff}:root[data-theme=light] .ma-street path{stroke:#fbf8f2}:root[data-theme=light] .ma-lbl{fill:#6d6862} :root[data-theme=light] .map-card{background:rgba(255,255,255,.94);color:#3b3834}:root[data-theme=light] .map-card b{color:#111} .map-img{position:absolute;inset:0;display:block} .map-img img{width:100%;height:100%;object-fit:cover;display:block;filter:invert(.9) hue-rotate(180deg) saturate(.6) brightness(.95) contrast(.9);transition:filter .5s,transform 1.2s var(--ease)} .map:hover .map-img img{transform:scale(1.04);filter:invert(.9) hue-rotate(180deg) saturate(.9) brightness(1) contrast(1)} :root[data-theme=light] .map-img img,:root[data-theme=light] .map:hover .map-img img{filter:none} .map-pin{position:absolute;z-index:2;width:38px;height:48px;transform:translate(-50%,-100%);pointer-events:none;filter:drop-shadow(0 6px 10px rgba(0,0,0,.45));animation:pinDrop .9s cubic-bezier(.34,1.56,.64,1) both} .map-pin svg{position:relative;width:100%;height:100%} .map-pin i{position:absolute;left:50%;bottom:-6px;width:60px;height:60px;margin-left:-30px;margin-bottom:-24px;border-radius:50%;border:2px solid var(--red);animation:ping 1.8s infinite} @keyframes pinDrop{from{transform:translate(-50%,-260%);opacity:0}to{transform:translate(-50%,-100%);opacity:1}} .map-attr{position:absolute;right:6px;bottom:4px;z-index:2;font-size:.62rem;color:#bbb;background:rgba(0,0,0,.45);padding:1px 5px} :root[data-theme=light] .map-attr{color:#444;background:rgba(255,255,255,.7)} .map-btn{position:absolute;left:12px;bottom:12px;z-index:2;background:var(--red);color:#fff;font:800 .74rem Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;padding:10px 14px;box-shadow:0 8px 20px rgba(0,0,0,.35);transition:transform .3s var(--ease)} .map-btn:hover{transform:translateY(-2px)} .ns-list{list-style:none;display:grid;gap:8px;margin:10px 0 20px}.ns-list li{padding:10px 14px;border:1px solid var(--line);background:var(--bg2)} .toast.bad{background:#2a0d10;border:1px solid var(--red2);max-width:min(560px,calc(100vw - 32px));text-align:center} .btn:disabled{opacity:.6;cursor:wait} input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,textarea:-webkit-autofill,select:-webkit-autofill{-webkit-text-fill-color:var(--white);-webkit-box-shadow:0 0 0 1000px #101012 inset;box-shadow:0 0 0 1000px #101012 inset;caret-color:var(--white);transition:background-color 9999s ease-out 0s} :root[data-theme=light] input:-webkit-autofill,:root[data-theme=light] input:-webkit-autofill:hover,:root[data-theme=light] input:-webkit-autofill:focus{-webkit-text-fill-color:#111;-webkit-box-shadow:0 0 0 1000px #fff inset;box-shadow:0 0 0 1000px #fff inset} #homeTeam,#fullTeam{grid-template-columns:repeat(5,minmax(0,1fr))} @media (max-width:1100px){#homeTeam,#fullTeam{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (max-width:760px){#homeTeam,#fullTeam{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:480px){#homeTeam,#fullTeam{grid-template-columns:1fr}} /* ===== Japanese elements: sakura, petals, dojo scene, lanterns, koi ===== */ #petals{position:fixed;inset:0;width:100%;height:100%;z-index:3;pointer-events:none} .jp-branch{position:absolute;top:0;right:0;width:clamp(180px,27vw,410px);z-index:3;pointer-events:none;filter:drop-shadow(0 6px 14px rgba(0,0,0,.35))} .jp-branch svg{display:block;width:100%;height:auto;overflow:visible} .phead .jp-branch{width:clamp(150px,21vw,310px)} .jp-branch.left{right:auto;left:0;transform:scaleX(-1)} .jb-wood{fill:none;stroke:#3a2420;stroke-linecap:round;pointer-events:visibleStroke;cursor:pointer} .jb-sway{transform-box:view-box;transform-origin:360px 14px;animation:jbSway 7s ease-in-out infinite} .jp-branch.shake .jb-sway{animation:jbShake .8s cubic-bezier(.3,.7,.4,1)} @keyframes jbSway{0%,100%{transform:rotate(0)}50%{transform:rotate(-2.2deg)}} @keyframes jbShake{0%{transform:rotate(0)}15%{transform:rotate(-7deg)}35%{transform:rotate(5deg)}55%{transform:rotate(-3deg)}75%{transform:rotate(1.5deg)}100%{transform:rotate(0)}} .jb-bl{transform-box:fill-box;transform-origin:center;transition:transform .45s cubic-bezier(.3,1.6,.5,1);pointer-events:visiblePainted;cursor:pointer;animation:jbBreath 4s ease-in-out infinite;animation-delay:calc(var(--i)*-.37s)} .jb-bl path{fill:#ffc8d6;stroke:#ee98b1;stroke-width:.8} .jb-bl .jb-c{fill:#d9466f} .jb-bl .jb-s{stroke:#ffe9a8;stroke-width:1;stroke-linecap:round} .jb-bl:hover{transform:scale(1.4) rotate(36deg);animation-play-state:paused} .jb-bud{fill:#f58aa8} @keyframes jbBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}} :root[data-theme=light] .jb-wood{stroke:#5b3a2e} :root[data-theme=light] .jp-branch{filter:drop-shadow(0 6px 12px rgba(80,30,30,.18))} /* dojo scene */ .dojo{position:relative;border:1px solid var(--line);border-top:4px solid var(--red);overflow:hidden;background:#0d0d10;--dj1:#2a0b0f;--dj2:#0d0d10;--mount:#26262c;--mat:#2a2016;--matl:#3a2d1f;user-select:none;-webkit-user-select:none;touch-action:manipulation} :root[data-theme=light] .dojo{background:#fbf3e8;--dj1:#ffd9c2;--dj2:#fbf3e8;--mount:#8b8f9c;--mat:#d9c49b;--matl:#c7ae80} .dojo-stage svg{display:block;width:100%;height:auto} .dj-s1{stop-color:var(--dj1)}.dj-s2{stop-color:var(--dj2)} .dj-mount{fill:var(--mount)} .dj-mat{fill:var(--mat)}.dj-matl{stroke:var(--matl);stroke-width:2} .dj-sun{fill:var(--red);cursor:pointer;transform-box:fill-box;transform-origin:center;transition:filter .3s} .dj-sun:hover{filter:brightness(1.15)} .dj-sun.pulse{animation:djPulse .9s var(--ease)} @keyframes djPulse{40%{transform:scale(1.12)}} .dj-torii{cursor:pointer;transition:filter .3s} .dj-torii:hover,.dj-torii.glow{filter:drop-shadow(0 0 12px rgba(255,59,68,.85))} .dj-ol{fill:none;stroke:#a59d90;stroke-width:17;stroke-linecap:round} .dj-gi{fill:none;stroke:#f6f3ec;stroke-width:14;stroke-linecap:round} .dj-body{fill:#f6f3ec;stroke:#a59d90;stroke-width:2;stroke-linejoin:round} .dj-lapel{fill:none;stroke:#c9c2b6;stroke-width:2} .dj-f{cursor:pointer;outline:none} .dj-f:focus-visible .dj-body{stroke:var(--red2);stroke-width:3} .dj-shadow{fill:rgba(0,0,0,.35)} .dj-band{fill:var(--red)} .dj-tail{fill:none;stroke:var(--red);stroke-width:3;stroke-linecap:round;transform-box:fill-box;transform-origin:right center;animation:djTail 1.1s ease-in-out infinite} @keyframes djTail{50%{transform:rotate(14deg)}} .dj-lan{cursor:pointer} .dj-lan .lb{fill:url(#djLan)} .dj-lan .lr{fill:none;stroke:rgba(80,0,0,.45);stroke-width:1.4} .dj-lan .lc{fill:#141416} .dj-lan .lg{fill:url(#djLG);opacity:0;transition:opacity .4s} .dj-lan.lit .lg{opacity:1;animation:djFlick 2.2s infinite} .dj-lan .lm{fill:none;stroke:rgba(255,255,255,.85);stroke-width:2.2} @keyframes djFlick{0%,100%{opacity:.9}40%{opacity:1}55%{opacity:.75}70%{opacity:.95}} .dj-fx{pointer-events:none} .dj-spark line{stroke:#ffd76a;stroke-width:4;stroke-linecap:round} .dj-spark circle{fill:#fff3c4} .dj-spark{transform-box:fill-box;transform-origin:center;animation:djSpark .45s ease-out forwards} .dj-spark.blk line{stroke:#9fd3ff} @keyframes djSpark{0%{transform:scale(.2);opacity:1}100%{transform:scale(1.5);opacity:0}} .dj-word{font-family:Anton,"Arial Black",sans-serif;font-size:44px;fill:#fff;stroke:var(--red);stroke-width:3;paint-order:stroke;letter-spacing:2px;text-anchor:middle;animation:djWord .9s var(--ease) forwards} @keyframes djWord{0%{transform:translateY(10px) scale(.6);opacity:0}25%{transform:none;opacity:1}75%{opacity:1}100%{transform:translateY(-26px);opacity:0}} .dj-word{transform-box:fill-box;transform-origin:center} .dojo.shake .dojo-stage svg{animation:djShake .25s} @keyframes djShake{25%{transform:translate(4px,-2px)}50%{transform:translate(-4px,2px)}75%{transform:translate(2px,1px)}} .dojo-hud{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:16px 18px;border-top:1px solid var(--line);background:rgba(0,0,0,.25)} :root[data-theme=light] .dojo-hud{background:rgba(255,255,255,.6)} .dojo-hud button{background:transparent;border:1px solid var(--line);color:inherit;font:inherit;font-weight:800;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;padding:10px 16px;cursor:pointer;transition:background .25s,border-color .25s,transform .15s} .dojo-hud button:hover{background:var(--red);border-color:var(--red);color:#fff} .dojo-hud button:active{transform:scale(.95)} .dojo-score{margin-left:auto;font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:.78rem;color:var(--muted)} .dojo-score b{font-family:Anton,sans-serif;font-weight:400;font-size:1.6rem;color:var(--red2);margin-left:8px;vertical-align:middle;display:inline-block} .dojo-score b.bump{animation:djBump .35s} @keyframes djBump{50%{transform:scale(1.5)}} .dojo .jp-branch{width:clamp(130px,20vw,280px);top:-4px} /* koi pond (footer) */ #koi{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.6} footer>.wrap{position:relative;z-index:1} :root[data-theme=light] #koi{opacity:.75} @media (max-width:760px){ .hero .jp-branch{width:50vw;opacity:.9} .phead .jp-branch{width:40vw} .dojo-score{margin-left:0;width:100%} .dojo-hud button{flex:1 1 40%;padding:10px 8px} } @media (prefers-reduced-motion:reduce){ .jb-sway,.jb-bl,.dj-tail,.dj-lan.lit .lg{animation:none!important} } /* ===== technique library ===== */ .tk{--belt:#f08c2a;--stripe:#f08c2a;display:grid;grid-template-columns:340px 1fr;border:1px solid var(--line);border-top:4px solid var(--red);background:#0f0f12} .tk-side{border-right:1px solid var(--line);display:flex;flex-direction:column;min-width:0} .tk-tabs{display:grid;grid-template-columns:repeat(2,1fr);border-bottom:1px solid var(--line)} .tk-tabs button{display:flex;align-items:center;gap:10px;background:transparent;border:0;border-bottom:3px solid transparent;color:var(--muted);font:inherit;font-weight:800;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;padding:14px 14px;cursor:pointer;text-align:left;transition:color .25s,background .25s,border-color .25s} .tk-tabs button:nth-child(odd){border-right:1px solid var(--line)} .tk-tabs button:nth-child(-n+2){border-bottom-color:var(--line)} .tk-tabs button i{width:26px;height:8px;border-radius:2px;background:linear-gradient(90deg,var(--belt) 0 60%,var(--stripe) 60% 70%,var(--belt) 70% 76%,var(--stripe) 76% 86%,var(--belt) 86%);flex:none;box-shadow:0 0 0 1px rgba(255,255,255,.18)} .tk-tabs button:hover{color:#fff;background:rgba(255,255,255,.03)} .tk-tabs button.on{color:#fff;background:rgba(215,38,46,.12);border-bottom-color:var(--red)} .tk-list{display:flex;flex-direction:column;padding:10px;gap:6px;max-height:640px;overflow:auto} .tk-item{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:transparent;border:1px solid transparent;color:inherit;font:inherit;padding:12px 12px;cursor:pointer;transition:background .25s,border-color .25s,transform .25s;animation:tkIn .45s var(--ease) both} @keyframes tkIn{from{opacity:0;transform:translateX(-12px)}} .tk-item:hover{background:rgba(255,255,255,.04);border-color:var(--line);transform:translateX(4px)} .tk-item.on{background:rgba(215,38,46,.14);border-color:var(--red)} .tk-n{font-family:Anton,sans-serif;font-size:1.3rem;color:var(--red2);width:30px;flex:none} .tk-t{flex:1;min-width:0} .tk-t b{display:block;font-size:.98rem} .tk-t small{display:block;color:var(--muted);font-size:.8rem;margin-top:2px} .tk-kata{flex:none;font-size:.62rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;background:var(--red);color:#fff;padding:4px 7px} .tk-kata.tech{background:transparent;border:1px solid var(--line);color:var(--muted)} .tk-play{flex:none;width:28px;height:28px;display:grid;place-items:center;border:1px solid var(--line);font-size:.65rem;color:var(--muted);transition:all .25s} .tk-item:hover .tk-play,.tk-item.on .tk-play{background:var(--red);border-color:var(--red);color:#fff} .tk-main{min-width:0;display:flex;flex-direction:column} .tk-stage{cursor:pointer} .tk-stage svg{display:block;width:100%;height:auto} .tk-wall{fill:#121216}.tk-frame{fill:#1d1914}.tk-paper{fill:#18171a;stroke:#2c2620;stroke-width:3}.tk-grid{stroke:#2c2620;stroke-width:2} .tk-floor{fill:#2a2016}.tk-plank{stroke:#3a2d1f;stroke-width:2;fill:none} .tk-glow{fill:rgba(215,38,46,.12)}.tk-emb{opacity:.55} .tk-belt{fill:var(--belt)}.tk-belt-t{stroke:var(--belt);stroke-width:4.2;stroke-linecap:round;fill:none} .tk-stripe{fill:var(--stripe);display:none}.tk.striped .tk-stripe{display:block} .tk-ghost{opacity:.35;animation:tkGhost .5s ease-out forwards;pointer-events:none} .tk-ghost .dj-gi{stroke:#ff8f95} @keyframes tkGhost{to{opacity:0}} .tk-burst circle{fill:none;stroke:rgba(255,215,106,.7);stroke-width:3;transform-box:fill-box;transform-origin:center;animation:tkBurst .4s ease-out forwards} @keyframes tkBurst{from{transform:scale(.3);opacity:1}to{transform:scale(1.2);opacity:0}} .tk-step{font-weight:800;font-size:15px;letter-spacing:2px;text-transform:uppercase;fill:#fff;text-anchor:middle;paint-order:stroke;stroke:rgba(0,0,0,.6);stroke-width:4} .tk-ctrl{display:flex;flex-wrap:wrap;gap:8px;padding:12px 16px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(0,0,0,.25)} .tk-ctrl button{background:transparent;border:1px solid var(--line);color:inherit;font:inherit;font-weight:800;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;padding:9px 14px;cursor:pointer;transition:background .25s,border-color .25s} .tk-ctrl button:hover,.tk-ctrl button.on{background:var(--red);border-color:var(--red);color:#fff} .tk-info{padding:22px 24px 26px} .tk-meta{display:flex;gap:10px;align-items:center;margin-bottom:10px} .tk-lv{display:inline-flex;align-items:center;gap:8px;font-size:.7rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} .tk-lv i{width:30px;height:9px;border-radius:2px;background:var(--belt);box-shadow:0 0 0 1px rgba(255,255,255,.18)} .tk.striped .tk-lv i{background:linear-gradient(90deg,var(--belt) 0 60%,var(--stripe) 60% 70%,var(--belt) 70% 76%,var(--stripe) 76% 86%,var(--belt) 86%)} .tk-name{font-size:clamp(1.8rem,3.4vw,2.6rem);line-height:1.05} .tk-en{color:var(--muted);margin-top:4px} .tk-info h4{font-family:Anton,sans-serif;font-weight:400;font-size:1.15rem;letter-spacing:.06em;margin:20px 0 10px} .tk-how{list-style:none;counter-reset:s;display:grid;gap:6px} .tk-how li{counter-increment:s;position:relative;padding:9px 12px 9px 44px;border:1px solid var(--line);color:#cfccc6;font-size:.92rem;transition:background .3s,border-color .3s,color .3s} .tk-how li::before{content:counter(s);position:absolute;left:12px;top:8px;width:22px;height:22px;display:grid;place-items:center;font-weight:800;font-size:.75rem;border:1px solid var(--line);transition:all .3s} .tk-how li.on{border-color:var(--red);background:rgba(215,38,46,.14);color:#fff} .tk-how li.on::before{background:var(--red);border-color:var(--red);color:#fff} .tk-how li.done::before{background:rgba(215,38,46,.35);border-color:transparent} .tk-note{margin-top:14px;font-size:.84rem;color:var(--muted);font-style:italic} :root[data-theme=light] .tk{background:#fffdf8} :root[data-theme=light] .tk-tabs button:hover,:root[data-theme=light] .tk-tabs button.on{color:#111} :root[data-theme=light] .tk-wall{fill:#efe6d6}:root[data-theme=light] .tk-frame{fill:#7a5a3c}:root[data-theme=light] .tk-paper{fill:#fbf6ea;stroke:#8a6a48}:root[data-theme=light] .tk-grid{stroke:#c9b28c} :root[data-theme=light] .tk-floor{fill:#d9c49b}:root[data-theme=light] .tk-plank{stroke:#c7ae80} :root[data-theme=light] .tk-how li{color:#3b3834}:root[data-theme=light] .tk-how li.on{color:#111} :root[data-theme=light] .tk-ctrl{background:rgba(255,255,255,.6)} @media (max-width:900px){ .tk{grid-template-columns:1fr} .tk-side{order:0;border-right:0;border-bottom:1px solid var(--line)} .tk-tabs{grid-template-columns:repeat(4,1fr)} .tk-list{flex-direction:row;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;padding:10px 10px 12px;gap:8px;-webkit-overflow-scrolling:touch;scrollbar-width:none} .tk-list::-webkit-scrollbar{display:none} .tk-item{flex:0 0 auto;width:auto;max-width:78%;min-width:180px;scroll-snap-align:start;border-color:var(--line);padding:10px 12px;gap:10px;animation:none} .tk-item:hover{transform:none} .tk-item .tk-n{font-size:1.05rem;width:auto} .tk-item .tk-play{display:none} .tk-t b{font-size:.92rem;white-space:nowrap} .tk-t small{font-size:.74rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tk-how li{padding:7px 10px 7px 40px;font-size:.86rem} .tk-how li::before{top:6px} .tk-ctrl{padding:10px;gap:6px;flex-wrap:nowrap} .tk-ctrl button{flex:1;padding:10px 4px;font-size:.64rem;letter-spacing:.1em;min-height:44px} .tk-tabs button{flex-direction:column;gap:6px;padding:12px 4px;font-size:.6rem;text-align:center;border-right:1px solid var(--line)} .tk-tabs button:nth-child(-n+2){border-bottom-color:transparent} .tk-tabs button.on{border-bottom-color:var(--red)} .tk-list{max-height:none} .tk-info{padding:18px 16px 22px} } /* first-visit entrance notice */ .entry-sec{padding:60px 0 20px} .entry{display:grid;grid-template-columns:1fr 1.15fr;gap:0;border:2px solid var(--red);background:linear-gradient(135deg,rgba(215,38,46,.16),rgba(18,18,20,.92) 55%);box-shadow:0 24px 60px rgba(0,0,0,.35);overflow:hidden} .entry-txt{padding:34px 34px 30px} .entry-flag span{display:inline-block;background:var(--red);color:#fff;font-weight:800;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;padding:7px 12px;animation:entryPulse 2.4s ease-in-out infinite} @keyframes entryPulse{50%{box-shadow:0 0 0 6px rgba(215,38,46,.25)}} .entry-h{font-size:clamp(2rem,4vw,3.1rem);line-height:1.02;margin:16px 0 20px} .entry-h em{font-style:normal;color:#3fbf6a;display:inline-block} .entry-steps{list-style:none;display:grid;gap:14px;margin:0 0 24px} .entry-steps li{display:flex;gap:14px;align-items:flex-start;font-size:1.02rem;line-height:1.45;color:#e9e6e1} .es-ic{flex:none;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid var(--line);display:grid;place-items:center} .es-ic svg{width:19px;height:19px;fill:var(--red2)} .entry-actions{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center} .entry-addr{color:var(--muted);font-size:.9rem;font-weight:600} .entry-img{all:unset;box-sizing:border-box;position:relative;display:block;cursor:zoom-in;background:#fff;align-self:stretch} .entry-img{display:flex;align-items:center} .entry-img img{display:block;width:100%;height:auto} .entry-img .zoom{position:absolute;right:12px;bottom:12px;width:38px;height:38px;display:grid;place-items:center;background:rgba(0,0,0,.65);color:#fff} .entry-img:focus-visible{outline:3px solid var(--red2);outline-offset:-3px} .rear-note{display:table;margin-top:8px;background:#2f9e57;color:#fff;font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:4px 8px} :root[data-theme=light] .entry{background:linear-gradient(135deg,rgba(215,38,46,.1),#fffdf8 55%)} :root[data-theme=light] .entry-steps li{color:#2b2825} :root[data-theme=light] .entry-h em{color:#1f8a47} :root[data-theme=light] .es-ic{background:#fff} @media (max-width:900px){ .entry{grid-template-columns:1fr} .entry-txt{padding:24px 20px 22px} .entry-sec{padding:36px 0 6px} .entry-steps li{font-size:1rem} .entry-actions .btn{width:100%;justify-content:center} .entry-img img{height:auto} } @media (prefers-reduced-motion:reduce){.entry-flag span{animation:none}} /* designer credit: One Thread Studio */ .credit{display:inline-flex;align-items:center;gap:10px;color:#d9dbe3;text-decoration:none;min-height:44px;transition:color .3s} .credit-by{color:var(--muted);font-size:.85rem} .credit .otl{height:17px;width:auto;display:block;overflow:visible} .credit .lgb{stroke:#8FA2FF;transition:stroke .4s} .credit .lgt{fill:currentColor} .credit-st{color:#A1A1A6;font-size:.85rem;margin-left:-4px} .credit:hover{color:#fff} .credit:hover .lgb{stroke-dasharray:100;animation:otDraw 1.1s cubic-bezier(.65,0,.35,1)} .credit:hover .lgb+.lgb{animation-delay:.25s;animation-fill-mode:backwards} @keyframes otDraw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}} :root[data-theme=light] .credit{color:#141A3A} :root[data-theme=light] .credit .lgb{stroke:#2440FF} :root[data-theme=light] .credit-st{color:#86868B} @media (prefers-reduced-motion:reduce){.credit .lgb{animation:none!important}} /* responsive */ @media (max-width:1020px){ nav.main{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(11,11,12,.97)} .links{display:none!important} .burger{display:block} .nav-cta{display:none} .hero-grid,.split{grid-template-columns:1fr} .belt-ring{max-width:300px;margin:0 auto} .g3,.g4{grid-template-columns:repeat(2,1fr)} .stats{grid-template-columns:repeat(2,1fr)} .fgrid{grid-template-columns:1fr 1fr} } @media (max-width:640px){ section{padding:70px 0} .g2,.g3,.g4{grid-template-columns:1fr} form .row{grid-template-columns:1fr} .topbar .hide-sm{display:none} .fgrid{grid-template-columns:1fr} .rule{grid-template-columns:60px 1fr} .rule .k{font-size:2.4rem} .kanji-bg{opacity:.6} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important} .reveal{opacity:1;transform:none} }