.method{background:linear-gradient(160deg,#03081D,#071440 45%,#0B2372 78%,#1745C7);color:#F7F9FF;position:relative;overflow:hidden}
.method:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 15%,rgba(82,119,255,.25),transparent 45%),radial-gradient(circle at 85% 80%,rgba(65,105,255,.22),transparent 50%);animation:method-drift 16s ease-in-out infinite alternate;pointer-events:none}
@keyframes method-drift{from{opacity:.7;transform:scale(1)}to{opacity:1;transform:scale(1.06)}}
.method .section-head{position:relative;z-index:1}
.method .section-head span{color:#AFC2F5}
.method-hint{position:relative;z-index:1;color:#AFC2F5;max-width:520px;margin:-36px 0 48px;font-size:.95rem}

.cloud-frame{position:relative;z-index:1;max-width:460px;margin:0 auto;border-radius:36px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 80px rgba(2,6,25,.55),inset 0 1px 0 rgba(255,255,255,.08);padding:16px 16px 84px;backdrop-filter:blur(6px);isolation:isolate}
.cloud-frame-bar{display:flex;align-items:center;padding:6px 8px 18px}
.cloud-frame-brand{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:#DCE8FF}
.cloud-frame-brand b{color:#F7F9FF;font-size:1rem;margin-right:6px}

.cloud{position:relative;border-radius:26px}
.cloud-field{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.cloud-item{position:relative;width:100%;aspect-ratio:1;border:0;padding:0;border-radius:27%;background:var(--cover,none) center/cover no-repeat,linear-gradient(155deg,var(--g1),var(--g2));box-shadow:0 10px 24px rgba(2,6,25,.45),inset 0 1px 0 rgba(255,255,255,.25),0 0 0 1px rgba(255,255,255,.08);transform:scale(var(--scale,1));transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease;animation:cloud-breathe 7s ease-in-out infinite;animation-delay:var(--delay,0s);cursor:pointer}
.cloud-item:hover,.cloud-item:focus-visible,.cloud-item.open{transform:scale(1.08);z-index:2;box-shadow:0 20px 40px rgba(2,6,25,.5),0 0 0 1px rgba(255,255,255,.3),0 0 34px rgba(255,255,255,.22)}
.cloud-item:active{transform:scale(.96)}
.cloud-item:focus-visible{outline:2px solid #DCE8FF;outline-offset:3px}
.cloud-item--center{box-shadow:0 10px 24px rgba(2,6,25,.45),0 0 0 2px rgba(255,255,255,.4),0 0 30px rgba(255,255,255,.18)}
.cloud-item--symbol{display:flex;align-items:center;justify-content:center}
.cloud-item--active{box-shadow:0 10px 24px rgba(2,6,25,.45),0 0 0 3px rgba(255,255,255,.55),0 0 30px rgba(255,255,255,.3)}
.cloud-glyph{color:#fff;font-family:Montserrat;font-weight:700;font-size:2.1rem;line-height:1}.cloud-glyph--icon{display:flex;align-items:center;justify-content:center}
@keyframes cloud-breathe{0%,100%{filter:brightness(1)}50%{filter:brightness(1.1)}}
@media(prefers-reduced-motion:reduce){.cloud-item,.method:before{animation:none}}

.cloud-nav{position:absolute;left:16px;right:16px;bottom:16px;display:flex;justify-content:space-around;padding:14px 10px;border-radius:20px;background:rgba(10,20,55,.55);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(10px);font-size:.72rem;letter-spacing:.04em;color:#AFC2F5}
.cloud-nav .active{color:#fff;font-weight:600}

.player-overlay{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px 16px;background:rgba(2,6,25,.55);backdrop-filter:blur(3px);opacity:1;transition:opacity .3s ease;overflow-y:auto}
.player-overlay[hidden]{display:none}
.player{position:relative;width:min(420px,100%);max-height:calc(100svh - 40px);overflow-x:hidden;overflow-y:auto;margin:auto;border-radius:40px;padding:34px 28px 30px;background:linear-gradient(165deg,#7195FF,#254CC5 55%,#071440);box-shadow:0 40px 90px rgba(2,6,25,.55);color:#F7F9FF;animation:player-in .45s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;align-items:center;text-align:center}
.player-bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none}
.player-bg-tint{position:absolute;inset:0;z-index:0;background:linear-gradient(165deg,rgba(113,149,255,.55),rgba(37,76,197,.55) 55%,rgba(7,20,64,.68))}
.player>*:not(.player-bg-video):not(.player-bg-tint):not(.player-close){position:relative;z-index:1}
.player-close{position:absolute;top:18px;right:18px;width:32px;height:32px;border-radius:12px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:#fff;font-size:.85rem;cursor:pointer;z-index:2}
.player-icon{width:min(220px,58vw);height:min(220px,58vw);border-radius:32px;background:var(--cover,none) center/cover no-repeat,linear-gradient(155deg,var(--g1,#5277FF),var(--g2,#254CC5));display:flex;align-items:center;justify-content:center;font-family:Montserrat;font-weight:700;font-size:3rem;color:#fff;margin-bottom:22px;box-shadow:0 20px 45px rgba(2,6,25,.4),inset 0 1px 0 rgba(255,255,255,.3)}
.player-subtitle{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#DCE8FF}
.player-title{font-family:Montserrat;font-weight:700;font-size:1.7rem;margin:8px 0 10px}
.player-desc{color:#DCE8FF;font-size:.92rem;line-height:1.5;max-width:34em;margin:0 0 18px}
.player-demo{display:inline-block;font-size:.66rem;letter-spacing:.12em;padding:5px 10px;border-radius:100px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);margin-bottom:22px}
.player-locked{font-size:.82rem;line-height:1.45;color:#FFE8B0;background:rgba(255,255,255,.12);border:1px solid rgba(255,232,176,.35);border-radius:16px;padding:12px 16px;margin:0 0 16px;max-width:32em}
.player-scrub{display:flex;align-items:center;gap:12px;width:100%;margin-bottom:24px}
.player-scrub span{font-size:.72rem;color:#DCE8FF;flex:0 0 auto;min-width:32px}
.player-scrub span#player-time-total{text-align:right}
.player-progress{display:block;flex:1 1 auto;height:6px;border-radius:100px;background:rgba(255,255,255,.22);border:0;padding:0;cursor:pointer;overflow:hidden}
.player-progress-fill{display:block;height:100%;width:0%;border-radius:100px;background:#fff}
.player-controls{display:flex;align-items:center;justify-content:center;gap:26px;margin-bottom:26px}
.player-controls button{border:0;background:none;color:#fff;cursor:pointer;font-size:.85rem}
#player-toggle{width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);font-size:1.4rem;display:flex;align-items:center;justify-content:center}
@keyframes player-in{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
#player-back,#player-forward{font-size:.85rem;letter-spacing:.02em;color:#DCE8FF}
#player-toggle{width:58px;height:58px;border-radius:50%;background:#fff;color:#254CC5;font-size:1.1rem;display:grid;place-items:center;box-shadow:0 10px 26px rgba(2,6,25,.35)}
#player-toggle:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
.player-cta{display:flex;justify-content:center;width:100%;margin:0;box-sizing:border-box}
.player-sparkles{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:inherit}
.player-sparkles span{position:absolute;width:6px;height:6px;background:#fff;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);opacity:0;animation:sparkle-pop 1.1s ease-out forwards}
@keyframes sparkle-pop{0%{opacity:0;transform:scale(.2)}30%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.6)}}

.practice-preview{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin:44px 0 6px}
.practice-preview-label{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;margin-bottom:14px;color:#413522}.practice-preview-label b{display:block;font-family:Montserrat;font-size:1.9rem;font-weight:800;text-transform:none;letter-spacing:0;margin-bottom:6px;color:#241d10}

/* mosaic: 3 stacked tiles on the left + 1 tall hero on the right, then a row of 4 below — matches the reference screenshot */
.practice-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);gap:8px;margin-bottom:8px;align-items:center}
.practice-col{display:grid;grid-template-rows:repeat(3,1fr);gap:8px;min-width:0}
.practice-col .cloud-item{aspect-ratio:1;width:100%;min-width:0;border-radius:16px}
.practice-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.practice-row .cloud-item{aspect-ratio:1;width:100%;min-width:0;border-radius:16px}
.cloud-item.practice-hero{width:100%;min-width:0;aspect-ratio:1;border-radius:22px;animation:none;transform:none}
.cloud-item.practice-hero:hover,.cloud-item.practice-hero:focus-visible,.cloud-item.practice-hero.open{transform:none;box-shadow:0 20px 40px rgba(23,20,15,.4),0 0 0 1px rgba(255,255,255,.25)}
.practice-tiles .cloud-item:before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(0deg,rgba(15,12,6,.8),rgba(15,12,6,.08) 55%,transparent)}
.tile-badge{position:absolute;z-index:1;top:8px;left:8px;width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.25);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;color:#fff;font-family:Montserrat;font-weight:700;font-size:.62rem}
.tile-label{position:relative;z-index:1;display:block;width:100%;padding:0 10px 9px;color:#fff;text-align:left;align-self:stretch}
.practice-top .cloud-item,.practice-row .cloud-item{display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.tile-label i{display:block;font-style:normal;font-weight:500;font-size:.48rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.tile-label b{display:block;font-family:Montserrat;font-weight:800;font-size:.68rem;letter-spacing:.01em;text-transform:uppercase;line-height:1.2;margin-top:2px}
.practice-col .tile-label b,.practice-row .tile-label b{overflow-wrap:break-word;word-break:break-word;hyphens:auto}
.practice-hero .tile-label b{font-size:1.05rem}
.practice-hero .tile-label i{font-size:.62rem}
@media(max-width:760px){.practice-preview{grid-template-columns:1fr;gap:34px}}
@media(max-width:520px){.practice-row{gap:6px}.practice-row .tile-label{padding:0 5px 6px}.practice-row .tile-label i{display:none}.practice-row .tile-label b{font-size:.56rem;line-height:1.15}.practice-row .tile-badge{width:16px;height:16px;font-size:.5rem;top:5px;left:5px}}

@media(max-width:520px){.method-hint{margin-top:-24px}.cloud-frame{padding:14px 12px 78px}.player{padding:26px 20px 28px;border-radius:32px}.player-title{font-size:1.4rem}}