/* LND Aura landing page: the LearnNDev look (data-theme="learnndev"), a fixed light theme with its own colours, written by the design team. Loaded after landing.css, fx.css, brand.css, loader.css and themes.css. */ /* ---- block 7 learnndev-theme ---- */ /* ===== LearnNDev eLearning Builder theme (light, warm ground, blue / lavender / pink / orange palette) ===== */ :root[data-theme="learnndev"] { color-scheme: light; --font: "Inter", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif; --serif: "Inter", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif; --bg0: #FBF9F6; --panel: rgba(255,255,255,.82); --panel2: rgba(30,36,51,.035); --panel-solid: #ffffff; --win: rgba(255,255,255,.92); --line: #ECE6DC; --line2: #E0D8CB; --ink: #1E2433; --soft: #3F4657; --muted: #565C6B; --accent: #3A5CA8; --accent2: #6A58B0; --accent3: #E84A9E; --accent-ink: #ffffff; --o1: #5B7FC7; --o2: #A99BD6; --o3: #E84A9E; --o-core: #1E2433; --blob1: rgba(91,127,199,.30); --blob2: rgba(169,155,214,.32); --blob3: rgba(229,147,34,.20); --mkf: none; --lgf: none; } :root[data-theme="learnndev"] .grain, :root[data-theme="learnndev"] .grid-lines { display: none; } :root[data-theme="learnndev"] #backdrop { background: radial-gradient(120% 70% at 50% 0%, rgba(91,127,199,.10), transparent 60%), #FBF9F6; } :root[data-theme="learnndev"] .pal { background: rgba(30,36,51,.35); } :root[data-theme="learnndev"] .ll-mark { filter: none; } :root[data-theme="learnndev"] em { background: linear-gradient(90deg, #3A5CA8 0%, #6A58B0 55%, #C0397F 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* buttons: gradient pills with a colourful glow */ :root[data-theme="learnndev"] .cta { position: relative; overflow: hidden; color: #fff; background: linear-gradient(115deg, #3A5CA8 0%, #4A6DB8 35%, #6A58B0 70%, #A8468E 100%); background-size: 220% 100%; box-shadow: 0 8px 22px -8px rgba(58,92,168,.55); transition: transform .25s ease, box-shadow .3s ease, background-position .6s ease; } :root[data-theme="learnndev"] .cta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.5) 50%, transparent 65%); transform: translateX(-130%); transition: transform .8s ease; pointer-events: none; } :root[data-theme="learnndev"] .cta:hover { transform: translateY(-3px); background-position: 100% 0; box-shadow: -8px 12px 28px -6px rgba(91,127,199,.6), 8px 14px 30px -6px rgba(232,74,158,.4), 0 20px 40px -12px rgba(229,147,34,.35); } :root[data-theme="learnndev"] .cta:hover::after { transform: translateX(130%); } :root[data-theme="learnndev"] .ghost { background: #fff; border-color: #CCC5B9; color: var(--ink); } :root[data-theme="learnndev"] .ghost:hover { border-color: transparent; background: linear-gradient(#fff,#fff) padding-box, linear-gradient(90deg,#5B7FC7,#A99BD6,#E84A9E,#E59322) border-box; box-shadow: -6px 8px 22px -6px rgba(91,127,199,.35), 6px 10px 24px -6px rgba(232,74,158,.25); } :root[data-theme="learnndev"] .card, :root[data-theme="learnndev"] .story { box-shadow: 0 20px 50px -34px rgba(30,36,51,.32); } :root[data-theme="learnndev"] .nav.solid { background: rgba(251,249,246,.86); } /* the old colour-theme picker is not needed any more */ :root[data-theme="learnndev"] .theme { display: none; } /* ===== colour pass: use the landing-page palette (blue / lavender / pink / orange / mint) everywhere ===== */ :root[data-theme="learnndev"] { --c-blue:#3A5CA8; --c-blue2:#5B7FC7; --c-lav:#6A58B0; --c-lav2:#A99BD6; --c-pink:#E84A9E; --c-org:#E59322; --c-mint:#2F9E6E; --c-mint2:#85CBA6; } /* eyebrows cycle through the palette */ :root[data-theme="learnndev"] .sec:nth-of-type(5n+1) .eyebrow{color:var(--c-blue)} :root[data-theme="learnndev"] .sec:nth-of-type(5n+2) .eyebrow{color:var(--c-pink)} :root[data-theme="learnndev"] .sec:nth-of-type(5n+3) .eyebrow{color:var(--c-lav)} :root[data-theme="learnndev"] .sec:nth-of-type(5n+4) .eyebrow{color:var(--c-org)} :root[data-theme="learnndev"] .sec:nth-of-type(5n+5) .eyebrow{color:var(--c-mint)} /* soft tinted washes behind sections */ :root[data-theme="learnndev"] .sec{position:relative} :root[data-theme="learnndev"] .sec::before{content:"";position:absolute;inset:40px -4vw 0;z-index:-1;pointer-events:none;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent),linear-gradient(to right,transparent,#000 10%,#000 90%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent),linear-gradient(to right,transparent,#000 10%,#000 90%,transparent);mask-composite:intersect} :root[data-theme="learnndev"] #orb::before{background:radial-gradient(60% 70% at 15% 30%,rgba(169,155,214,.22),transparent 70%),radial-gradient(50% 60% at 90% 80%,rgba(232,74,158,.10),transparent 70%)} :root[data-theme="learnndev"] #modes::before{background:radial-gradient(55% 60% at 85% 20%,rgba(91,127,199,.20),transparent 70%),radial-gradient(45% 55% at 5% 90%,rgba(133,203,166,.16),transparent 70%)} :root[data-theme="learnndev"] #share::before{background:radial-gradient(55% 55% at 10% 15%,rgba(229,147,34,.15),transparent 70%),radial-gradient(55% 60% at 95% 70%,rgba(169,155,214,.22),transparent 70%)} :root[data-theme="learnndev"] #pricing::before{background:radial-gradient(60% 50% at 50% 0%,rgba(232,74,158,.12),transparent 70%),radial-gradient(50% 50% at 0% 80%,rgba(91,127,199,.16),transparent 70%),radial-gradient(40% 50% at 100% 90%,rgba(229,147,34,.14),transparent 70%)} :root[data-theme="learnndev"] #voices::before{background:radial-gradient(60% 60% at 50% 40%,rgba(169,155,214,.24),transparent 70%)} :root[data-theme="learnndev"] #features::before{background:radial-gradient(50% 50% at 0% 20%,rgba(133,203,166,.18),transparent 70%),radial-gradient(50% 50% at 100% 60%,rgba(91,127,199,.16),transparent 70%)} :root[data-theme="learnndev"] #how::before{background:radial-gradient(60% 60% at 50% 30%,rgba(229,147,34,.13),transparent 70%)} :root[data-theme="learnndev"] #privacy::before{background:radial-gradient(55% 60% at 80% 40%,rgba(133,203,166,.2),transparent 70%)} :root[data-theme="learnndev"] #faq::before{background:radial-gradient(60% 50% at 20% 10%,rgba(232,74,158,.09),transparent 70%)} /* coloured icon chips on every tile */ :root[data-theme="learnndev"] .ti{box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)} :root[data-theme="learnndev"] .tile:nth-child(6n+1) .ti{color:#3A5CA8;background:linear-gradient(135deg,#DCE6F8,#C3D3F1)} :root[data-theme="learnndev"] .tile:nth-child(6n+2) .ti{color:#C0397F;background:linear-gradient(135deg,#FCE0EE,#F7C4DD)} :root[data-theme="learnndev"] .tile:nth-child(6n+3) .ti{color:#6A58B0;background:linear-gradient(135deg,#E8E3F6,#D4CBEE)} :root[data-theme="learnndev"] .tile:nth-child(6n+4) .ti{color:#B86F00;background:linear-gradient(135deg,#FDEBCF,#F9D8A3)} :root[data-theme="learnndev"] .tile:nth-child(6n+5) .ti{color:#2F7D58;background:linear-gradient(135deg,#D9F0E4,#BCE3CE)} :root[data-theme="learnndev"] .tile:nth-child(6n+6) .ti{color:#3A5CA8;background:linear-gradient(135deg,#DCE6F8,#E8E3F6)} :root[data-theme="learnndev"] .tile::after,.sh-tile::after{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,#5B7FC7,#A99BD6,#E84A9E,#E59322);opacity:.0;transition:opacity .3s} :root[data-theme="learnndev"] .tile:hover::after,.sh-tile:hover::after{opacity:1} :root[data-theme="learnndev"] .tile:hover,.sh-tile:hover{box-shadow:0 26px 50px -26px rgba(106,88,176,.45),0 14px 30px -20px rgba(232,74,158,.3)} :root[data-theme="learnndev"] .sh-tile{position:relative;overflow:hidden;transition:transform .3s ease,box-shadow .3s ease} :root[data-theme="learnndev"] .sh-tile:hover{transform:translateY(-4px)} :root[data-theme="learnndev"] .sh-tile:nth-child(4n+1){background:linear-gradient(180deg,#EEF3FC,#fff 60%)} :root[data-theme="learnndev"] .sh-tile:nth-child(4n+2){background:linear-gradient(180deg,#F0ECF9,#fff 60%)} :root[data-theme="learnndev"] .sh-tile:nth-child(4n+3){background:linear-gradient(180deg,#FDEFF6,#fff 60%)} :root[data-theme="learnndev"] .sh-tile:nth-child(4n+4){background:linear-gradient(180deg,#FFF3E0,#fff 60%)} :root[data-theme="learnndev"] .sh-tile h3{color:var(--ink)} /* step numbers */ :root[data-theme="learnndev"] .sh-flow>*:nth-child(1) .sh-n,:root[data-theme="learnndev"] .sh-flow>*:nth-child(1) .sh-n{background:linear-gradient(135deg,#3A5CA8,#5B7FC7)} :root[data-theme="learnndev"] .sh-n{box-shadow:0 8px 18px -8px rgba(58,92,168,.6)} :root[data-theme="learnndev"] .sh-flow>*:nth-child(2) .sh-n{background:linear-gradient(135deg,#6A58B0,#A99BD6)} :root[data-theme="learnndev"] .sh-flow>*:nth-child(3) .sh-n{background:linear-gradient(135deg,#E84A9E,#F08BC1)} :root[data-theme="learnndev"] .sh-flow>*:nth-child(4) .sh-n{background:linear-gradient(135deg,#E59322,#F2B866)} :root[data-theme="learnndev"] .n{box-shadow:0 8px 18px -8px rgba(58,92,168,.6)} :root[data-theme="learnndev"] #how .card:nth-child(1) .n{background:linear-gradient(135deg,#3A5CA8,#5B7FC7)} :root[data-theme="learnndev"] #how .card:nth-child(2) .n{background:linear-gradient(135deg,#6A58B0,#E84A9E)} :root[data-theme="learnndev"] #how .card:nth-child(3) .n{background:linear-gradient(135deg,#E84A9E,#E59322)} /* hero details */ :root[data-theme="learnndev"] .facts li:nth-child(1) b{color:#3A5CA8} :root[data-theme="learnndev"] .facts li:nth-child(2) b{color:#6A58B0} :root[data-theme="learnndev"] .facts li:nth-child(3) b{color:#E84A9E} :root[data-theme="learnndev"] .facts li:nth-child(4) b{color:#E59322} :root[data-theme="learnndev"] .chip svg{padding:5px;width:26px;height:26px;border-radius:50%} :root[data-theme="learnndev"] .chip.c1 svg{background:#DCE6F8;color:#3A5CA8} :root[data-theme="learnndev"] .chip.c2 svg{background:#FCE0EE;color:#C0397F} :root[data-theme="learnndev"] .chip.c3 svg{background:#FDEBCF;color:#B86F00} :root[data-theme="learnndev"] .chip.c4 svg{background:#D9F0E4;color:#2F7D58} :root[data-theme="learnndev"] .chip{box-shadow:0 14px 30px -14px rgba(106,88,176,.45)} :root[data-theme="learnndev"] .pill{background:#fff;border-color:#F3C6DC} /* the orb: bright and colourful instead of dark navy */ :root[data-theme="learnndev"] {--o-core:#4A3FA0} /* product switcher + pricing */ :root[data-theme="learnndev"] .prod:nth-child(1){border-top:3px solid #3A5CA8} :root[data-theme="learnndev"] .prod:nth-child(2){border-top:3px solid #6A58B0} :root[data-theme="learnndev"] .prod:nth-child(3){border-top:3px solid #E84A9E} :root[data-theme="learnndev"] .prod:nth-child(4){border-top:3px solid #E59322} :root[data-theme="learnndev"] .sh-plan{transition:transform .3s ease,box-shadow .3s ease} :root[data-theme="learnndev"] .sh-plan:hover{transform:translateY(-4px);box-shadow:0 26px 50px -26px rgba(106,88,176,.4)} :root[data-theme="learnndev"] .sh-plan:nth-child(1){background:linear-gradient(180deg,#EAF7F0,#fff 55%)} :root[data-theme="learnndev"] .sh-plan:nth-child(3){background:linear-gradient(180deg,#FFF1DC,#fff 55%);border-color:#F2D3A0} :root[data-theme="learnndev"] .sh-plan.on{background:linear-gradient(180deg,#ECE8F8,#fff 60%);border:2px solid transparent;background-clip:padding-box;box-shadow:0 0 0 2px #6A58B0,0 26px 50px -26px rgba(106,88,176,.5)} :root[data-theme="learnndev"] .sh-plan h3{background:linear-gradient(90deg,#3A5CA8,#6A58B0);-webkit-background-clip:text;background-clip:text;color:transparent} :root[data-theme="learnndev"] .sh-flag{background:linear-gradient(115deg,#6A58B0,#E84A9E);color:#fff} /* voice cards */ :root[data-theme="learnndev"] .v1{border-top:4px solid #5B7FC7}:root[data-theme="learnndev"] .v2{border-top:4px solid #E84A9E}:root[data-theme="learnndev"] .v3{border-top:4px solid #E59322}:root[data-theme="learnndev"] .v4{border-top:4px solid #85CBA6} /* FAQ */ :root[data-theme="learnndev"] .faq details{background:#fff;border-left:4px solid #A99BD6} :root[data-theme="learnndev"] .faq details:nth-child(4n+1){border-left-color:#5B7FC7} :root[data-theme="learnndev"] .faq details:nth-child(4n+2){border-left-color:#E84A9E} :root[data-theme="learnndev"] .faq details:nth-child(4n+3){border-left-color:#E59322} :root[data-theme="learnndev"] .faq details:nth-child(4n+4){border-left-color:#85CBA6} /* closing banner */ :root[data-theme="learnndev"] .final-wrap .card{background:radial-gradient(70% 90% at 15% 0%,rgba(91,127,199,.22),transparent 65%),radial-gradient(60% 80% at 90% 10%,rgba(232,74,158,.16),transparent 65%),radial-gradient(60% 70% at 50% 100%,rgba(229,147,34,.16),transparent 70%),#fff} :root[data-theme="learnndev"] .foot{border-top:3px solid transparent;border-image:linear-gradient(90deg,#5B7FC7,#A99BD6,#E84A9E,#E59322) 1} /* ===== palette v3: the 9-colour swatch (stone, tan, blue, lavender, pink, mint, yellow, lime, orange) ===== */ :root[data-theme="learnndev"] .tile:nth-child(9n+1) .ti{color:#3A5CA8;background:linear-gradient(135deg,#DCE6F8,#C3D3F1)} :root[data-theme="learnndev"] .sec:nth-of-type(9n+1) .eyebrow{color:#3A5CA8} :root[data-theme="learnndev"] .faq details:nth-child(9n+1){border-left-color:#5B7FC7} :root[data-theme="learnndev"] .tile:nth-child(9n+2) .ti{color:#A8691F;background:linear-gradient(135deg,#F8EBDD,#EFD3B3)} :root[data-theme="learnndev"] .sec:nth-of-type(9n+2) .eyebrow{color:#A8691F} :root[data-theme="learnndev"] .faq details:nth-child(9n+2){border-left-color:#D4A574} :root[data-theme="learnndev"] .tile:nth-child(9n+3) .ti{color:#C0397F;background:linear-gradient(135deg,#FCE0EE,#F7C4DD)} :root[data-theme="learnndev"] .sec:nth-of-type(9n+3) .eyebrow{color:#C0397F} :root[data-theme="learnndev"] .faq details:nth-child(9n+3){border-left-color:#E84A9E} :root[data-theme="learnndev"] .tile:nth-child(9n+4) .ti{color:#6A58B0;background:linear-gradient(135deg,#EAE5F6,#D4CBEE)} :root[data-theme="learnndev"] .sec:nth-of-type(9n+4) .eyebrow{color:#6A58B0} :root[data-theme="learnndev"] .faq details:nth-child(9n+4){border-left-color:#A99BD6} :root[data-theme="learnndev"] .tile:nth-child(9n+5) .ti{color:#2F7D58;background:linear-gradient(135deg,#DAF1E5,#BCE3CE)} :root[data-theme="learnndev"] .sec:nth-of-type(9n+5) .eyebrow{color:#2F7D58} :root[data-theme="learnndev"] .faq details:nth-child(9n+5){border-left-color:#85CBA6} :root[data-theme="learnndev"] .tile:nth-child(9n+6) .ti{color:#8A7B00;background:linear-gradient(135deg,#F8F3C8,#EFE48E)} :root[data-theme="learnndev"] .sec:nth-of-type(9n+6) .eyebrow{color:#8A7B00} :root[data-theme="learnndev"] .faq details:nth-child(9n+6){border-left-color:#D4C430} :root[data-theme="learnndev"] .tile:nth-child(9n+7) .ti{color:#B86F00;background:linear-gradient(135deg,#FDEBCF,#F9D8A3)} :root[data-theme="learnndev"] .sec:nth-of-type(9n+7) .eyebrow{color:#B86F00} :root[data-theme="learnndev"] .faq details:nth-child(9n+7){border-left-color:#E59322} :root[data-theme="learnndev"] .tile:nth-child(9n+8) .ti{color:#4F8A00;background:linear-gradient(135deg,#E6F8CC,#CDEE9A)} :root[data-theme="learnndev"] .sec:nth-of-type(9n+8) .eyebrow{color:#4F8A00} :root[data-theme="learnndev"] .faq details:nth-child(9n+8){border-left-color:#94D63C} :root[data-theme="learnndev"] .tile:nth-child(9n+9) .ti{color:#7A7366;background:linear-gradient(135deg,#F1EEE8,#E2DDD2)} :root[data-theme="learnndev"] .sec:nth-of-type(9n+9) .eyebrow{color:#7A7366} :root[data-theme="learnndev"] .faq details:nth-child(9n+9){border-left-color:#CBC5B9} :root[data-theme="learnndev"] #orb::before{background:radial-gradient(55% 60% at 12% 25%,rgba(169,155,214,0.26),transparent 70%),radial-gradient(50% 60% at 92% 80%,rgba(232,74,158,0.24),transparent 70%)} :root[data-theme="learnndev"] #modes::before{background:radial-gradient(55% 60% at 12% 25%,rgba(91,127,199,0.26),transparent 70%),radial-gradient(50% 60% at 92% 80%,rgba(133,203,166,0.24),transparent 70%)} :root[data-theme="learnndev"] #share::before{background:radial-gradient(55% 60% at 12% 25%,rgba(212,165,116,0.26),transparent 70%),radial-gradient(50% 60% at 92% 80%,rgba(169,155,214,0.24),transparent 70%)} :root[data-theme="learnndev"] #pricing::before{background:radial-gradient(55% 60% at 12% 25%,rgba(232,74,158,0.26),transparent 70%),radial-gradient(50% 60% at 92% 80%,rgba(212,196,48,0.24),transparent 70%)} :root[data-theme="learnndev"] #voices::before{background:radial-gradient(55% 60% at 12% 25%,rgba(169,155,214,0.26),transparent 70%),radial-gradient(50% 60% at 92% 80%,rgba(148,214,60,0.24),transparent 70%)} :root[data-theme="learnndev"] #features::before{background:radial-gradient(55% 60% at 12% 25%,rgba(133,203,166,0.26),transparent 70%),radial-gradient(50% 60% at 92% 80%,rgba(91,127,199,0.24),transparent 70%)} :root[data-theme="learnndev"] #how::before{background:radial-gradient(55% 60% at 12% 25%,rgba(229,147,34,0.26),transparent 70%),radial-gradient(50% 60% at 92% 80%,rgba(212,165,116,0.24),transparent 70%)} :root[data-theme="learnndev"] #privacy::before{background:radial-gradient(55% 60% at 12% 25%,rgba(148,214,60,0.26),transparent 70%),radial-gradient(50% 60% at 92% 80%,rgba(133,203,166,0.24),transparent 70%)} :root[data-theme="learnndev"] #faq::before{background:radial-gradient(55% 60% at 12% 25%,rgba(212,196,48,0.26),transparent 70%),radial-gradient(50% 60% at 92% 80%,rgba(232,74,158,0.24),transparent 70%)} :root[data-theme="learnndev"] #orb .eyebrow{color:#6A58B0} :root[data-theme="learnndev"] #modes .eyebrow{color:#3A5CA8} :root[data-theme="learnndev"] #share .eyebrow{color:#A8691F} :root[data-theme="learnndev"] #pricing .eyebrow{color:#C0397F} :root[data-theme="learnndev"] #voices .eyebrow{color:#4F8A00} :root[data-theme="learnndev"] #features .eyebrow{color:#2F7D58} :root[data-theme="learnndev"] #how .eyebrow{color:#B86F00} :root[data-theme="learnndev"] #privacy .eyebrow{color:#2F7D58} :root[data-theme="learnndev"] #faq .eyebrow{color:#8A7B00} :root[data-theme="learnndev"] .sh-tile:nth-child(4n+1){background:linear-gradient(180deg,#DCE6F8,#fff 60%)} :root[data-theme="learnndev"] .sh-tile:nth-child(4n+2){background:linear-gradient(180deg,#F8EBDD,#fff 60%)} :root[data-theme="learnndev"] .sh-tile:nth-child(4n+3){background:linear-gradient(180deg,#FCE0EE,#fff 60%)} :root[data-theme="learnndev"] .sh-tile:nth-child(4n+4){background:linear-gradient(180deg,#E6F8CC,#fff 60%)} :root[data-theme="learnndev"] .sh-flow>*:nth-child(1) .sh-n{background:linear-gradient(135deg,#3A5CA8,#5B7FC7)}:root[data-theme="learnndev"] .sh-flow>*:nth-child(2) .sh-n{background:linear-gradient(135deg,#B07A3C,#D4A574)}:root[data-theme="learnndev"] .sh-flow>*:nth-child(3) .sh-n{background:linear-gradient(135deg,#E84A9E,#F08BC1)}:root[data-theme="learnndev"] .sh-flow>*:nth-child(4) .sh-n{background:linear-gradient(135deg,#5BAF3A,#94D63C)} :root[data-theme="learnndev"] .sh-flow>*:nth-child(1){border-top:4px solid #5B7FC7}:root[data-theme="learnndev"] .sh-flow>*:nth-child(2){border-top:4px solid #D4A574}:root[data-theme="learnndev"] .sh-flow>*:nth-child(3){border-top:4px solid #E84A9E}:root[data-theme="learnndev"] .sh-flow>*:nth-child(4){border-top:4px solid #94D63C} :root[data-theme="learnndev"] .prod:nth-child(1){border-top-color:#5B7FC7}:root[data-theme="learnndev"] .prod:nth-child(2){border-top-color:#A99BD6}:root[data-theme="learnndev"] .prod:nth-child(3){border-top-color:#E84A9E}:root[data-theme="learnndev"] .prod:nth-child(4){border-top-color:#E59322} :root[data-theme="learnndev"] .v1{border-top-color:#5B7FC7}:root[data-theme="learnndev"] .v2{border-top-color:#E84A9E}:root[data-theme="learnndev"] .v3{border-top-color:#D4C430}:root[data-theme="learnndev"] .v4{border-top-color:#85CBA6} :root[data-theme="learnndev"] .sh-plan:nth-child(1){background:linear-gradient(180deg,#DAF1E5,#fff 55%)}:root[data-theme="learnndev"] .sh-plan:nth-child(3){background:linear-gradient(180deg,#F8F3C8,#fff 55%);border-color:#E6DB7A} :root[data-theme="learnndev"] .facts li:nth-child(1) b{color:#3A5CA8}:root[data-theme="learnndev"] .facts li:nth-child(2) b{color:#C0397F}:root[data-theme="learnndev"] .facts li:nth-child(3) b{color:#4F8A00}:root[data-theme="learnndev"] .facts li:nth-child(4) b{color:#B86F00} :root[data-theme="learnndev"] .chip.c1 svg{background:#DCE6F8;color:#3A5CA8}:root[data-theme="learnndev"] .chip.c2 svg{background:#FCE0EE;color:#C0397F}:root[data-theme="learnndev"] .chip.c3 svg{background:#F8F3C8;color:#8A7B00}:root[data-theme="learnndev"] .chip.c4 svg{background:#E6F8CC;color:#4F8A00} :root[data-theme="learnndev"] {--blob1:rgba(91,127,199,.30);--blob2:rgba(169,155,214,.32);--blob3:rgba(212,165,116,.28)} :root[data-theme="learnndev"] .foot{border-image:linear-gradient(90deg,#CBC5B9,#D4A574,#5B7FC7,#A99BD6,#E84A9E,#85CBA6,#D4C430,#94D63C,#E59322) 1} :root[data-theme="learnndev"] .tile::after,.sh-tile::after{background:linear-gradient(90deg,#CBC5B9,#D4A574,#5B7FC7,#A99BD6,#E84A9E,#85CBA6,#D4C430,#94D63C,#E59322)} :root[data-theme="learnndev"] .final-wrap .card{background:radial-gradient(60% 90% at 10% 0%,rgba(91,127,199,.24),transparent 65%),radial-gradient(50% 80% at 50% 0%,rgba(232,74,158,.16),transparent 65%),radial-gradient(60% 80% at 92% 10%,rgba(148,214,60,.20),transparent 65%),radial-gradient(60% 70% at 40% 100%,rgba(229,147,34,.18),transparent 70%),#fff} :root[data-theme="learnndev"] .nav::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:linear-gradient(90deg,#CBC5B9 0 11.1%,#D4A574 0 22.2%,#5B7FC7 0 33.3%,#A99BD6 0 44.4%,#E84A9E 0 55.5%,#85CBA6 0 66.6%,#D4C430 0 77.7%,#94D63C 0 88.8%,#E59322 0)} :root[data-theme="learnndev"] .hero h1{font-size:clamp(30px,3.15vw,46px);line-height:1.12;letter-spacing:-.03em} :root[data-theme="learnndev"] .hero h1 .nowrap{white-space:normal} :root[data-theme="learnndev"] .hero .lede{font-size:clamp(16px,1.3vw,18.5px);line-height:1.65} @media (max-width:1000px){:root[data-theme="learnndev"] .hero h1{font-size:clamp(28px,7vw,40px)}} :root[data-theme="learnndev"] .strip-static{-webkit-mask-image:none;mask-image:none;background:#fff;border-block:1px solid var(--line)} :root[data-theme="learnndev"] .strip-static .strip-in{width:auto;animation:none;justify-content:center;align-items:center;flex-wrap:wrap;gap:14px 22px;padding:20px 16px;transform:none} :root[data-theme="learnndev"] .strip-static .strip-in span{gap:0;font-size:14px;letter-spacing:.16em;text-transform:uppercase;font-weight:600} :root[data-theme="learnndev"] .strip-static .strip-in span::after{content:none} :root[data-theme="learnndev"] .strip-static .lead{color:var(--muted);font-weight:500} :root[data-theme="learnndev"] .strip-static .w1{color:#3A5CA8}:root[data-theme="learnndev"] .strip-static .w2{color:#C0397F}:root[data-theme="learnndev"] .strip-static .w3{color:#B86F00}:root[data-theme="learnndev"] .strip-static .w4{color:#4F8A00} :root[data-theme="learnndev"] .strip-static i{font-style:normal;color:#A99BD6;font-weight:700} :root[data-theme="learnndev"] .gap-head{text-align:left;max-width:none;margin-inline:0} :root[data-theme="learnndev"] .gap-head h2{max-width:none} :root[data-theme="learnndev"] .gap-head h2 em{display:block} :root[data-theme="learnndev"] #gap::before{background:radial-gradient(50% 60% at 10% 20%,rgba(169,155,214,.30),transparent 70%),radial-gradient(45% 60% at 95% 55%,rgba(229,147,34,.20),transparent 70%),radial-gradient(40% 50% at 40% 100%,rgba(133,203,166,.24),transparent 70%)} :root[data-theme="learnndev"] #gap .eyebrow{color:#6A58B0} :root[data-theme="learnndev"] .gap-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:40px} :root[data-theme="learnndev"] .gap-card{position:relative;padding:28px 26px 30px;border-radius:26px;overflow:hidden;transition:transform .3s ease,box-shadow .3s ease;box-shadow:0 20px 44px -28px rgba(30,36,51,.35)} :root[data-theme="learnndev"] .gap-card:hover{transform:translateY(-5px);box-shadow:0 28px 54px -26px rgba(106,88,176,.45)} :root[data-theme="learnndev"] .gap-card h3{margin:14px 0 10px;font:700 21px/1.2 var(--serif);letter-spacing:-.02em;color:var(--ink)} :root[data-theme="learnndev"] .gap-card p{margin:0;color:var(--soft);font-size:15.5px;line-height:1.6} :root[data-theme="learnndev"] .gap-n{display:inline-grid;place-items:center;min-width:42px;height:30px;padding:0 12px;border-radius:999px;font:700 13px var(--font);letter-spacing:.06em;color:#fff} :root[data-theme="learnndev"] .g1{background:linear-gradient(180deg,#F8EBDD,#fff 65%);border-top:4px solid #D4A574}:root[data-theme="learnndev"] .g1 .gap-n{background:linear-gradient(135deg,#B07A3C,#D4A574)} :root[data-theme="learnndev"] .g2{background:linear-gradient(180deg,#FCE0EE,#fff 65%);border-top:4px solid #E84A9E}:root[data-theme="learnndev"] .g2 .gap-n{background:linear-gradient(135deg,#E84A9E,#F08BC1)} :root[data-theme="learnndev"] .g3{background:linear-gradient(180deg,#DCE6F8,#fff 65%);border-top:4px solid #5B7FC7}:root[data-theme="learnndev"] .g3 .gap-n{background:linear-gradient(135deg,#3A5CA8,#5B7FC7)} :root[data-theme="learnndev"] .gap-line{margin:52px 0 0;font:700 clamp(26px,3.4vw,42px)/1.15 var(--serif);letter-spacing:-.03em;color:var(--ink)} :root[data-theme="learnndev"] .gap-line em{padding-right:.1em} @media (max-width:860px){:root[data-theme="learnndev"] .gap-cards{grid-template-columns:1fr}} :root[data-theme="learnndev"] #gap2::before{background:radial-gradient(50% 60% at 90% 20%,rgba(212,165,116,.28),transparent 70%),radial-gradient(45% 60% at 5% 60%,rgba(133,203,166,.24),transparent 70%),radial-gradient(40% 50% at 60% 100%,rgba(232,74,158,.14),transparent 70%)} :root[data-theme="learnndev"] #gap2 .eyebrow{color:#B86F00} /* ===== redesigned gap cards: illustrated, animated ===== */ :root[data-theme="learnndev"] .gap-card{padding:0;border:1px solid transparent;border-radius:28px;background:#fff;display:flex;flex-direction:column;box-shadow:0 24px 50px -30px rgba(30,36,51,.4);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease} :root[data-theme="learnndev"] .gap-card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;background:var(--gb);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.55;transition:opacity .3s} :root[data-theme="learnndev"] .gap-card:hover{transform:translateY(-8px) rotate(-.4deg);box-shadow:0 36px 60px -28px var(--gs)} :root[data-theme="learnndev"] .gap-card:hover::before{opacity:1} :root[data-theme="learnndev"] .gap-card.g1{--gb:linear-gradient(135deg,#D4A574,#E59322,#D4C430);--gs:rgba(229,147,34,.55);border-top:1px solid transparent;background:#fff} :root[data-theme="learnndev"] .gap-card.g2{--gb:linear-gradient(135deg,#E84A9E,#A99BD6);--gs:rgba(232,74,158,.5);border-top:1px solid transparent;background:#fff} :root[data-theme="learnndev"] .gap-card.g3{--gb:linear-gradient(135deg,#5B7FC7,#85CBA6);--gs:rgba(58,92,168,.5);border-top:1px solid transparent;background:#fff} :root[data-theme="learnndev"] .gap-art{position:relative;margin:10px 10px 0;border-radius:20px;overflow:hidden;aspect-ratio:2/1;display:grid;place-items:center} :root[data-theme="learnndev"] .gap-art svg{width:100%;height:100%;display:block} :root[data-theme="learnndev"] .ga1{background:linear-gradient(135deg,#FBEBD4,#F6D9B0 55%,#F9E8A8)} :root[data-theme="learnndev"] .ga2{background:linear-gradient(135deg,#FCE0EE,#F3C9E3 50%,#DCD3F3)} :root[data-theme="learnndev"] .ga3{background:linear-gradient(135deg,#DCE6F8,#CFDCF5 50%,#D3EEE0)} :root[data-theme="learnndev"] .gap-card .gap-n{position:relative;align-self:flex-start;margin:-15px 0 0 26px;z-index:2;box-shadow:0 0 0 4px #fff,0 8px 16px -6px rgba(0,0,0,.35)} :root[data-theme="learnndev"] .gap-card h3,:root[data-theme="learnndev"] .gap-card p{padding:0 26px} :root[data-theme="learnndev"] .gap-card h3{margin:12px 0 10px;font-size:22px} :root[data-theme="learnndev"] .gap-card p{margin:0 0 30px} /* animations */ @keyframes gaBob{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-6px) scale(1.08)}} @keyframes gaDash{to{stroke-dashoffset:-36}} @keyframes gaShake{0%,100%{transform:rotate(0)}25%{transform:rotate(-5deg)}75%{transform:rotate(5deg)}} @keyframes gaPop{0%,12%{opacity:0;transform:translateX(-16px)}22%,70%{opacity:1;transform:none}86%,100%{opacity:0;transform:translateX(10px)}} @keyframes gaBadge{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}} @keyframes gaFloat{0%{opacity:0;transform:translate(0,6px)}30%,70%{opacity:1}100%{opacity:0;transform:translate(8px,-10px)}} @keyframes gaSway{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(1.5deg)}} @keyframes gaDust{0%{opacity:0;transform:translateY(0)}40%{opacity:.9}100%{opacity:0;transform:translateY(-14px)}} .ga-q,.gc-q,.gb-badge,.ga-x{transform-box:fill-box;transform-origin:center} .ga-q{animation:gaBob 2.2s ease-in-out infinite} .ga-dash,.gc-path{animation:gaDash 1.4s linear infinite} .ga-learner{transform-box:fill-box;transform-origin:50% 100%;animation:gaShake 3.2s ease-in-out infinite} .ga-x{animation:gaBadge 1.8s ease-in-out infinite} .gb{animation:gaPop 6s ease-in-out infinite;transform-box:fill-box} .gb.b2{animation-delay:.6s}.gb.b3{animation-delay:1.2s}.gb.b4{animation-delay:1.8s} .gb-badge{animation:gaBadge 1.6s ease-in-out infinite} .gb-ans{animation:gaPop 6s ease-in-out infinite;animation-delay:2.4s} .gc-book{transform-box:fill-box;transform-origin:50% 100%;animation:gaSway 5s ease-in-out infinite} .gc-z text{animation:gaFloat 3s ease-in-out infinite}.gc-z text:nth-child(2){animation-delay:.5s}.gc-z text:nth-child(3){animation-delay:1s} .gc-d{animation:gaDust 3.4s ease-in infinite}.gc-d.d2{animation-delay:1.1s}.gc-d.d3{animation-delay:2.2s} .gc-q{animation:gaBob 2s ease-in-out infinite} .gap-card:hover .ga-q,.gap-card:hover .gc-q{animation-duration:.9s} .gap-card:hover .gb,.gap-card:hover .gb-ans{animation-duration:3.4s} @media (prefers-reduced-motion:reduce){.gap-card svg *{animation:none!important}.gb,.gb-ans{opacity:1!important}} /* ===== professional gap cards (v2): clean icon cards ===== */ :root[data-theme="learnndev"] .gap-cards{align-items:stretch;gap:22px} :root[data-theme="learnndev"] .gap-card{--c1:#D4A574;--c2:#B86F00;--tint:#F8EBDD;padding:30px 28px 24px;border:1px solid #ECE6DC;border-radius:24px;background:#fff;box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 18px 40px -30px rgba(30,36,51,.35);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,border-color .3s;overflow:hidden} :root[data-theme="learnndev"] .gap-card.g2{--c1:#E84A9E;--c2:#C0397F;--tint:#FCE6F1} :root[data-theme="learnndev"] .gap-card.g3{--c1:#5B7FC7;--c2:#3A5CA8;--tint:#E3EBF9} :root[data-theme="learnndev"] .gap-card::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;inset:0 0 auto 0;padding:0;border-radius:0;background:linear-gradient(90deg,var(--c1),var(--c2));opacity:1;-webkit-mask:none;mask:none;transform:scaleX(.18);transform-origin:left;transition:transform .5s cubic-bezier(.2,.8,.2,1)} :root[data-theme="learnndev"] .gap-card::after{content:"";position:absolute;right:-60px;top:-60px;width:180px;height:180px;border-radius:50%;background:radial-gradient(closest-side,var(--tint),transparent);opacity:.9;pointer-events:none;transition:transform .5s ease} :root[data-theme="learnndev"] .gap-card:hover{transform:translateY(-6px);border-color:var(--c1);box-shadow:0 30px 56px -30px color-mix(in srgb,var(--c2) 55%,transparent)} :root[data-theme="learnndev"] .gap-card:hover::before{transform:scaleX(1)} :root[data-theme="learnndev"] .gap-card:hover::after{transform:scale(1.25)} :root[data-theme="learnndev"] .gc-top{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;margin-bottom:22px} :root[data-theme="learnndev"] .gc-ico{display:grid;place-items:center;width:54px;height:54px;border-radius:16px;color:var(--c2);background:linear-gradient(135deg,var(--tint),#fff);border:1px solid color-mix(in srgb,var(--c1) 35%,#fff);transition:background .3s,color .3s,transform .35s cubic-bezier(.2,.8,.2,1)} :root[data-theme="learnndev"] .gc-ico svg{width:26px;height:26px} :root[data-theme="learnndev"] .gap-card:hover .gc-ico{background:linear-gradient(135deg,var(--c1),var(--c2));color:#fff;transform:rotate(-6deg) scale(1.06);border-color:transparent} :root[data-theme="learnndev"] .gap-card .gap-n{position:static;margin:0;min-width:0;height:auto;padding:0;background:none;box-shadow:none;border-radius:0;font:700 34px/1 var(--font);letter-spacing:-.02em;color:color-mix(in srgb,var(--c1) 38%,#fff);-webkit-text-stroke:0} :root[data-theme="learnndev"] .gap-card h3{position:relative;z-index:1;margin:0 0 10px;padding:0;font:700 22px/1.2 var(--serif);letter-spacing:-.02em} :root[data-theme="learnndev"] .gap-card p{position:relative;z-index:1;margin:0;padding:0;flex:1;font-size:15.5px;line-height:1.65;color:var(--soft)} :root[data-theme="learnndev"] .gc-tag{position:relative;z-index:1;margin-top:24px;padding-top:16px;border-top:1px solid #ECE6DC;display:flex;align-items:center;gap:9px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--c2)} :root[data-theme="learnndev"] .gc-tag i{width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,var(--c1),var(--c2));box-shadow:0 0 0 4px color-mix(in srgb,var(--c1) 20%,transparent)} /* ===== gap cards v3: bold gradient cards with interface previews ===== */ :root[data-theme="learnndev"] .gap-card{--g1:#B8741F;--g2:#E59322;--g3:#D4A574;color:#fff;border:0;padding:32px 28px 28px;border-radius:28px;background:linear-gradient(145deg,var(--g1),var(--g2) 70%,var(--g3));box-shadow:0 26px 50px -28px color-mix(in srgb,var(--g1) 80%,#000);transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s ease} :root[data-theme="learnndev"] .gap-card.g2{--g1:#C42F82;--g2:#E84A9E;--g3:#A99BD6} :root[data-theme="learnndev"] .gap-card.g3{--g1:#2F4F96;--g2:#5B7FC7;--g3:#85CBA6} :root[data-theme="learnndev"] .gap-card::before{inset:0;height:auto;width:auto;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);transform:translateX(-120%);transform-origin:center;transition:transform .9s ease;border-radius:inherit;opacity:1} :root[data-theme="learnndev"] .gap-card:hover::before{transform:translateX(120%)} :root[data-theme="learnndev"] .gap-card::after{right:-70px;top:-70px;width:230px;height:230px;background:radial-gradient(closest-side,rgba(255,255,255,.30),transparent)} :root[data-theme="learnndev"] .gap-card:hover{transform:translateY(-8px);border:0;box-shadow:0 38px 64px -28px color-mix(in srgb,var(--g1) 85%,#000)} :root[data-theme="learnndev"] .gap-card .gap-n{position:absolute;top:22px;right:26px;z-index:1;font:700 38px/1 var(--font);color:rgba(255,255,255,.4)} :root[data-theme="learnndev"] .gap-card h3{color:#fff;margin:34px 0 12px;font-size:23px;max-width:none;white-space:nowrap} :root[data-theme="learnndev"] .gap-card p{color:rgba(255,255,255,.93);font-size:15.5px} :root[data-theme="learnndev"] .gm{position:relative;z-index:1;margin-top:26px;padding:14px;border-radius:18px;background:rgba(255,255,255,.17);border:1px solid rgba(255,255,255,.38);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:13px;display:grid;gap:10px;transition:transform .4s cubic-bezier(.2,.8,.2,1)} :root[data-theme="learnndev"] .gap-card:hover .gm{transform:translateY(-4px)} :root[data-theme="learnndev"] .gm svg{width:15px;height:15px;flex:none} :root[data-theme="learnndev"] .gm em{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:999px;background:#fff;white-space:nowrap} :root[data-theme="learnndev"] .g1 .gm em{color:#B86F00}:root[data-theme="learnndev"] .g2 .gm em{color:#C0397F}:root[data-theme="learnndev"] .g3 .gm em{color:#3A5CA8} :root[data-theme="learnndev"] .gm-row{display:flex;justify-content:space-between;font-weight:600} :root[data-theme="learnndev"] .gm-bar{height:7px;border-radius:99px;background:rgba(255,255,255,.3);overflow:hidden} :root[data-theme="learnndev"] .gm-bar i{display:block;height:100%;border-radius:inherit;background:#fff} :root[data-theme="learnndev"] .gm-input,:root[data-theme="learnndev"] .gm-q,:root[data-theme="learnndev"] .gm-file{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:12px;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.3)} :root[data-theme="learnndev"] .gm-input span,:root[data-theme="learnndev"] .gm-q span,:root[data-theme="learnndev"] .gm-file span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500} :root[data-theme="learnndev"] .gm-input{opacity:.95;border-style:dashed} :root[data-theme="learnndev"] .gm-q:nth-child(3){opacity:.8}:root[data-theme="learnndev"] .gm-q:nth-child(4){opacity:.6} :root[data-theme="learnndev"] .gm-badge{position:absolute;top:-14px;right:14px;padding:4px 11px;border-radius:999px;background:#fff;color:#C0397F;font-weight:800;font-size:13px;box-shadow:0 8px 16px -6px rgba(0,0,0,.35)} :root[data-theme="learnndev"] .gm-ask{display:flex;justify-content:flex-start} :root[data-theme="learnndev"] .gm-ask span{padding:9px 14px;border-radius:14px 14px 14px 4px;background:#fff;color:#2F4F96;font-weight:600} :root[data-theme="learnndev"] .gm-file svg{width:18px;height:18px} :root[data-theme="learnndev"] .gap-card.g1{background:linear-gradient(145deg,var(--g1),var(--g2) 70%,var(--g3));border:0} :root[data-theme="learnndev"] .gap-card.g2{background:linear-gradient(145deg,var(--g1),var(--g2) 70%,var(--g3));border:0} :root[data-theme="learnndev"] .gap-card.g3{background:linear-gradient(145deg,var(--g1),var(--g2) 70%,var(--g3));border:0} :root[data-theme="learnndev"] .gap-card.g1{--g1:#B8741F;--g2:#E59322;--g3:#D4A574}:root[data-theme="learnndev"] .gap-card.g2{--g1:#C42F82;--g2:#E84A9E;--g3:#A99BD6}:root[data-theme="learnndev"] .gap-card.g3{--g1:#2F4F96;--g2:#5B7FC7;--g3:#85CBA6} :root[data-theme="learnndev"] .gap-card h3{white-space:normal} @media (min-width:1100px){:root[data-theme="learnndev"] .gap-card h3{white-space:nowrap}} /* ===== gap cards v4: white cards, coloured gradient strokes ===== */ :root[data-theme="learnndev"] .gap-card.g1{--s1:#D4A574;--s2:#E59322;--s3:#D4C430;--ink2:#B86F00;--tint:#FFF6E8;--tint2:#FBE7C6} :root[data-theme="learnndev"] .gap-card.g2{--s1:#E84A9E;--s2:#C58AD8;--s3:#A99BD6;--ink2:#C0397F;--tint:#FEF0F7;--tint2:#F9D3E7} :root[data-theme="learnndev"] .gap-card.g3{--s1:#5B7FC7;--s2:#6A9FD0;--s3:#85CBA6;--ink2:#3A5CA8;--tint:#EEF3FC;--tint2:#D3E0F6} :root[data-theme="learnndev"] .gap-card.g1,:root[data-theme="learnndev"] .gap-card.g2,:root[data-theme="learnndev"] .gap-card.g3{color:var(--ink);border:2.5px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,var(--s1),var(--s2) 55%,var(--s3)) border-box;box-shadow:0 20px 44px -30px color-mix(in srgb,var(--ink2) 55%,transparent)} :root[data-theme="learnndev"] .gap-card::before{background:linear-gradient(110deg,transparent 35%,color-mix(in srgb,var(--s1) 22%,transparent) 50%,transparent 65%)} :root[data-theme="learnndev"] .gap-card::after{background:radial-gradient(closest-side,var(--tint2),transparent);opacity:.9} :root[data-theme="learnndev"] .gap-card:hover{box-shadow:0 34px 60px -28px color-mix(in srgb,var(--ink2) 60%,transparent)} :root[data-theme="learnndev"] .gap-card .gap-n{color:color-mix(in srgb,var(--s1) 45%,#fff)} :root[data-theme="learnndev"] .gap-card h3{color:var(--ink)} :root[data-theme="learnndev"] .gap-card p{color:var(--soft)} :root[data-theme="learnndev"] .gm{background:linear-gradient(180deg,var(--tint),#fff);border:1.5px solid color-mix(in srgb,var(--s1) 55%,#fff);-webkit-backdrop-filter:none;backdrop-filter:none;color:var(--ink)} :root[data-theme="learnndev"] .gm-input,:root[data-theme="learnndev"] .gm-q,:root[data-theme="learnndev"] .gm-file{background:#fff;border:1.5px solid color-mix(in srgb,var(--s1) 40%,#fff);color:var(--ink)} :root[data-theme="learnndev"] .gm-input{border-style:dashed;border-color:var(--s1)} :root[data-theme="learnndev"] .gm svg{color:var(--ink2)} :root[data-theme="learnndev"] .gm em{background:linear-gradient(135deg,var(--s1),var(--ink2));color:#fff!important} :root[data-theme="learnndev"] .gm-row b{color:var(--ink2)} :root[data-theme="learnndev"] .gm-bar{background:var(--tint2)} :root[data-theme="learnndev"] .gm-bar i{background:linear-gradient(90deg,var(--s1),var(--ink2))} :root[data-theme="learnndev"] .gm-badge{background:linear-gradient(135deg,var(--s1),var(--ink2));color:#fff} :root[data-theme="learnndev"] .gm-ask span{background:linear-gradient(135deg,var(--s1),var(--ink2));color:#fff} :root[data-theme="learnndev"] .gm-q:nth-child(3){opacity:.8}:root[data-theme="learnndev"] .gm-q:nth-child(4){opacity:.55} /* ===== gap cards v5: no flash; fill with full colour on hover ===== */ :root[data-theme="learnndev"] .gap-card.g1{--f1:#B8741F;--f2:#E59322;--f3:#D4A574} :root[data-theme="learnndev"] .gap-card.g2{--f1:#C42F82;--f2:#E84A9E;--f3:#A99BD6} :root[data-theme="learnndev"] .gap-card.g3{--f1:#2F4F96;--f2:#5B7FC7;--f3:#85CBA6} :root[data-theme="learnndev"] .gap-card::before{content:"";position:absolute;inset:0;z-index:0;width:auto;height:auto;border-radius:inherit;background:linear-gradient(145deg,var(--f1),var(--f2) 70%,var(--f3));transform:none!important;opacity:0;transition:opacity .45s ease} :root[data-theme="learnndev"] .gap-card:hover::before{opacity:1} :root[data-theme="learnndev"] .gap-card h3,:root[data-theme="learnndev"] .gap-card p,:root[data-theme="learnndev"] .gap-card .gap-n,:root[data-theme="learnndev"] .gm,:root[data-theme="learnndev"] .gm *{transition:color .35s ease,background-color .35s ease,background .35s ease,border-color .35s ease} :root[data-theme="learnndev"] .gap-card:hover h3,:root[data-theme="learnndev"] .gap-card:hover p{color:#fff} :root[data-theme="learnndev"] .gap-card:hover p{color:rgba(255,255,255,.93)} :root[data-theme="learnndev"] .gap-card:hover .gap-n{color:rgba(255,255,255,.42)} :root[data-theme="learnndev"] .gap-card:hover ::after{background:radial-gradient(closest-side,rgba(255,255,255,.3),transparent)} :root[data-theme="learnndev"] .gap-card:hover .gm{background:rgba(255,255,255,.17);border-color:rgba(255,255,255,.42);color:#fff} :root[data-theme="learnndev"] .gap-card:hover .gm-input,:root[data-theme="learnndev"] .gap-card:hover .gm-q,:root[data-theme="learnndev"] .gap-card:hover .gm-file{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.35);color:#fff} :root[data-theme="learnndev"] .gap-card:hover .gm-input{border-color:rgba(255,255,255,.7)} :root[data-theme="learnndev"] .gap-card:hover .gm svg,:root[data-theme="learnndev"] .gap-card:hover .gm-row b{color:#fff} :root[data-theme="learnndev"] .gap-card:hover .gm em{background:#fff;color:var(--f1)!important} :root[data-theme="learnndev"] .gap-card:hover .gm-bar{background:rgba(255,255,255,.3)} :root[data-theme="learnndev"] .gap-card:hover .gm-bar i{background:#fff} :root[data-theme="learnndev"] .gap-card:hover .gm-badge,:root[data-theme="learnndev"] .gap-card:hover .gm-ask span{background:#fff;color:var(--f1)} :root[data-theme="learnndev"] .gap-card:hover {border-color:transparent} /* ===== gap cards v6: mild pastel fill on hover ===== */ :root[data-theme="learnndev"] .gap-card.g1{--f1:#FDEFD6;--f2:#FAE0B4;--f3:#F6D08C} :root[data-theme="learnndev"] .gap-card.g2{--f1:#FDE4F0;--f2:#F9D2E6;--f3:#E4D9F6} :root[data-theme="learnndev"] .gap-card.g3{--f1:#E3ECFA;--f2:#D3E2F8;--f3:#D2EEDF} :root[data-theme="learnndev"] .gap-card:hover h3{color:var(--ink)} :root[data-theme="learnndev"] .gap-card:hover p{color:var(--soft)} :root[data-theme="learnndev"] .gap-card:hover .gap-n{color:color-mix(in srgb,var(--s1) 70%,#fff)} :root[data-theme="learnndev"] .gap-card:hover ::after{background:radial-gradient(closest-side,rgba(255,255,255,.7),transparent)} :root[data-theme="learnndev"] .gap-card:hover .gm{background:rgba(255,255,255,.72);border-color:color-mix(in srgb,var(--s1) 60%,#fff);color:var(--ink)} :root[data-theme="learnndev"] .gap-card:hover .gm-input,:root[data-theme="learnndev"] .gap-card:hover .gm-q,:root[data-theme="learnndev"] .gap-card:hover .gm-file{background:#fff;border-color:color-mix(in srgb,var(--s1) 45%,#fff);color:var(--ink)} :root[data-theme="learnndev"] .gap-card:hover .gm-input{border-color:var(--s1)} :root[data-theme="learnndev"] .gap-card:hover .gm svg{color:var(--ink2)}:root[data-theme="learnndev"] .gap-card:hover .gm-row b{color:var(--ink2)} :root[data-theme="learnndev"] .gap-card:hover .gm em{background:linear-gradient(135deg,var(--s1),var(--ink2));color:#fff!important} :root[data-theme="learnndev"] .gap-card:hover .gm-bar{background:rgba(255,255,255,.8)} :root[data-theme="learnndev"] .gap-card:hover .gm-bar i{background:linear-gradient(90deg,var(--s1),var(--ink2))} :root[data-theme="learnndev"] .gap-card:hover .gm-badge,:root[data-theme="learnndev"] .gap-card:hover .gm-ask span{background:linear-gradient(135deg,var(--s1),var(--ink2));color:#fff} :root[data-theme="learnndev"] .gap-card:hover{box-shadow:0 28px 52px -30px color-mix(in srgb,var(--ink2) 40%,transparent)} /* ===== gap cards v7: live animation ===== */ @property --ang{syntax:'';inherits:false;initial-value:0deg} @keyframes gcSpin{to{--ang:360deg}} @keyframes gcFloat{0%,100%{translate:0 0}50%{translate:0 -7px}} @keyframes gcBlink{0%,45%{opacity:1}55%,100%{opacity:0}} @keyframes gcPing{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--s1) 60%,transparent)}70%,100%{box-shadow:0 0 0 9px transparent}} @keyframes gcRow{0%,6%{opacity:0;translate:-18px 0}18%,78%{opacity:var(--o,1);translate:0 0}92%,100%{opacity:0;translate:10px 0}} @keyframes gcShake{0%,86%,100%{rotate:0deg}89%{rotate:-16deg}92%{rotate:14deg}95%{rotate:-10deg}98%{rotate:6deg}} @keyframes gcDot{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-5px);opacity:1}} @keyframes gcDots{0%,3%{opacity:0}6%,30%{opacity:1}36%,100%{opacity:0}} @keyframes gcBubble{0%,34%{opacity:0;transform:scale(.7) translateY(8px)}42%{opacity:1;transform:scale(1.04) translateY(0)}46%,88%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(.96)}} @keyframes gcPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}} :root[data-theme="learnndev"] .gap-card.g1,:root[data-theme="learnndev"] .gap-card.g2,:root[data-theme="learnndev"] .gap-card.g3{background:linear-gradient(#fff,#fff) padding-box,conic-gradient(from var(--ang),var(--s1),var(--s2),var(--s3),var(--s2),var(--s1)) border-box;animation:gcSpin 6s linear infinite,gcFloat 5s ease-in-out infinite} :root[data-theme="learnndev"] .gap-card.g2{animation-delay:0s,-1.6s}:root[data-theme="learnndev"] .gap-card.g3{animation-delay:0s,-3.2s} :root[data-theme="learnndev"] .gap-card:hover{animation-play-state:running,paused} :root[data-theme="learnndev"] .gap-card .gap-n{animation:gcPulse 3s ease-in-out infinite} /* card 1: typing cursor, shaking lock, pulsing chip */ :root[data-theme="learnndev"] .g1 .gm-input span::after{content:"";display:inline-block;width:2px;height:1.05em;margin-left:3px;vertical-align:-2px;background:var(--ink2);animation:gcBlink 1s steps(1) infinite} :root[data-theme="learnndev"] .g1 .gm-input svg{transform-origin:50% 90%;animation:gcShake 4s ease-in-out infinite} :root[data-theme="learnndev"] .g1 .gm em,:root[data-theme="learnndev"] .g3 .gm-file em{animation:gcPing 1.8s ease-out infinite} :root[data-theme="learnndev"] .gm-bar i{width:0;transition:none} /* card 2: rows slide in on a loop, counter badge pulses */ :root[data-theme="learnndev"] .gm-q{animation:gcRow 6s ease-in-out infinite;--o:1} :root[data-theme="learnndev"] .gm-q:nth-child(3){animation-delay:.5s;--o:.8}:root[data-theme="learnndev"] .gm-q:nth-child(4){animation-delay:1s;--o:.55}:root[data-theme="learnndev"] .gm-q:nth-child(2){animation-delay:0s} :root[data-theme="learnndev"] .gm-q:nth-child(n){opacity:var(--o)} :root[data-theme="learnndev"] .gm-badge{animation:gcPulse 1.6s ease-in-out infinite} :root[data-theme="learnndev"] .g2 .gm-q em{animation:none} /* card 3: typing dots then the bubble */ :root[data-theme="learnndev"] .gm-ask{position:relative;min-height:38px} :root[data-theme="learnndev"] .gm-ask .dots{position:absolute;left:0;top:50%;margin-top:-14px;display:flex;gap:5px;padding:10px 14px;border-radius:14px 14px 14px 4px;background:var(--tint2);animation:gcDots 6s ease-in-out infinite} :root[data-theme="learnndev"] .gm-ask .dots b{width:6px;height:6px;border-radius:50%;background:var(--ink2);animation:gcDot 1s ease-in-out infinite} :root[data-theme="learnndev"] .gm-ask .dots b:nth-child(2){animation-delay:.15s}:root[data-theme="learnndev"] .gm-ask .dots b:nth-child(3){animation-delay:.3s} :root[data-theme="learnndev"] .gm-ask span{animation:gcBubble 6s ease-in-out infinite;transform-origin:left bottom} @media (prefers-reduced-motion:reduce){:root[data-theme="learnndev"] .gap-card,:root[data-theme="learnndev"] .gap-card *{animation:none!important}:root[data-theme="learnndev"] .gm-q,:root[data-theme="learnndev"] .gm-ask span{opacity:var(--o,1)!important}:root[data-theme="learnndev"] .gm-ask .dots{display:none}:root[data-theme="learnndev"] .gm-bar i{width:44%}} /* ---- block 9 flat-bg ---- */ html,body{background:#FBF9F6!important} :root[data-theme="learnndev"] #backdrop,:root[data-theme="learnndev"] #backdrop .blob{display:none!important} :root[data-theme="learnndev"] .sec::before,:root[data-theme="learnndev"] .hero::before,:root[data-theme="learnndev"] .hero::after,:root[data-theme="learnndev"] .final-wrap::before{display:none!important} :root[data-theme="learnndev"] .strip-static{background:#FBF9F6} :root[data-theme="learnndev"] .nav.solid{background:rgba(251,249,246,.9)} :root[data-theme="learnndev"] .final-wrap .card{background:#fff} /* ---- block 10 accent-words ---- */ :root[data-theme="learnndev"] em.ac1{background-image:linear-gradient(90deg,#3A5CA8,#E84A9E);-webkit-background-clip:text;background-clip:text;color:transparent} :root[data-theme="learnndev"] em.ac2{background-image:linear-gradient(90deg,#E84A9E,#E59322);-webkit-background-clip:text;background-clip:text;color:transparent} :root[data-theme="learnndev"] em.ac3{background-image:linear-gradient(90deg,#E84A9E,#E59322);-webkit-background-clip:text;background-clip:text;color:transparent} :root[data-theme="learnndev"] em.ac4{background-image:linear-gradient(90deg,#3A5CA8,#8A4FD0);-webkit-background-clip:text;background-clip:text;color:transparent} :root[data-theme="learnndev"] em.ac5{background-image:linear-gradient(90deg,#3A5CA8,#8A4FD0);-webkit-background-clip:text;background-clip:text;color:transparent} :root[data-theme="learnndev"] em.ac6{background-image:linear-gradient(90deg,#6A58B0,#E84A9E);-webkit-background-clip:text;background-clip:text;color:transparent} :root[data-theme="learnndev"] em.ac7{background-image:linear-gradient(90deg,#3A5CA8,#6A58B0);-webkit-background-clip:text;background-clip:text;color:transparent} :root[data-theme="learnndev"] em.ac8{background-image:linear-gradient(90deg,#E59322,#E84A9E);-webkit-background-clip:text;background-clip:text;color:transparent} :root[data-theme="learnndev"] em.ac9{background-image:linear-gradient(90deg,#2F9E6E,#3A5CA8);-webkit-background-clip:text;background-clip:text;color:transparent} :root[data-theme="learnndev"] em.ac10{background-image:linear-gradient(90deg,#E84A9E,#E59322);-webkit-background-clip:text;background-clip:text;color:transparent} :root[data-theme="learnndev"] em.ac11{background-image:linear-gradient(90deg,#3A5CA8,#E84A9E);-webkit-background-clip:text;background-clip:text;color:transparent} :root[data-theme="learnndev"] em.ac12{background-image:linear-gradient(90deg,#6A58B0,#E84A9E);-webkit-background-clip:text;background-clip:text;color:transparent} :root[data-theme="learnndev"] em.ac13{background-image:linear-gradient(90deg,#2F9E6E,#3A5CA8);-webkit-background-clip:text;background-clip:text;color:transparent} :root[data-theme="learnndev"] em.ac14{background-image:linear-gradient(90deg,#E59322,#E84A9E);-webkit-background-clip:text;background-clip:text;color:transparent} :root[data-theme="learnndev"] em.ac15{background-image:linear-gradient(90deg,#3A5CA8,#E84A9E);-webkit-background-clip:text;background-clip:text;color:transparent} /* ---- block 11 workspace-css ---- */ :root[data-theme="learnndev"] em.ac16{background-image:linear-gradient(90deg,#6A58B0,#E84A9E);-webkit-background-clip:text;background-clip:text;color:transparent} :root[data-theme="learnndev"] .ws-head{text-align:left;max-width:none;margin-inline:0} :root[data-theme="learnndev"] .ws-head h2{max-width:none} :root[data-theme="learnndev"] #workspace .eyebrow{color:#6A58B0} :root[data-theme="learnndev"] .ws-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:40px} :root[data-theme="learnndev"] .ws-step{--c1:#5B7FC7;--c2:#3A5CA8;--tint:#E3EBF9;position:relative;padding:30px 28px 32px;border:2.5px solid transparent;border-radius:26px;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,var(--c1),var(--c2)) border-box;box-shadow:0 20px 44px -32px color-mix(in srgb,var(--c2) 55%,transparent);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;overflow:hidden} :root[data-theme="learnndev"] .ws-step.s2{--c1:#A99BD6;--c2:#E84A9E;--tint:#F3E9F8} :root[data-theme="learnndev"] .ws-step.s3{--c1:#85CBA6;--c2:#2F9E6E;--tint:#E0F3E9} :root[data-theme="learnndev"] .ws-step::after{content:"";position:absolute;right:-70px;top:-70px;width:200px;height:200px;border-radius:50%;background:radial-gradient(closest-side,var(--tint),transparent);pointer-events:none;transition:transform .5s} :root[data-theme="learnndev"] .ws-step:hover{transform:translateY(-6px);box-shadow:0 30px 56px -30px color-mix(in srgb,var(--c2) 60%,transparent)} :root[data-theme="learnndev"] .ws-step:hover::after{transform:scale(1.3)} :root[data-theme="learnndev"] .ws-n{position:relative;z-index:1;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;font:700 18px var(--font);color:#fff;background:linear-gradient(135deg,var(--c1),var(--c2));box-shadow:0 10px 20px -8px color-mix(in srgb,var(--c2) 70%,transparent);margin-bottom:22px} :root[data-theme="learnndev"] .ws-step h3{position:relative;z-index:1;margin:0 0 10px;font:700 24px/1.2 var(--serif);letter-spacing:-.02em;color:var(--ink)} :root[data-theme="learnndev"] .ws-step p{position:relative;z-index:1;margin:0;font-size:15.5px;line-height:1.65;color:var(--soft)} :root[data-theme="learnndev"] .ws-demo{margin-top:24px;padding:28px;border-radius:28px;border:2.5px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,#5B7FC7,#A99BD6,#E84A9E,#E59322) border-box;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1.25fr);gap:24px;align-items:center;box-shadow:0 26px 54px -36px rgba(106,88,176,.5)} :root[data-theme="learnndev"] .ws-src{display:grid;gap:12px} :root[data-theme="learnndev"] .ws-chip{display:flex;align-items:center;gap:12px;padding:13px 16px;border-radius:14px;background:#FBF9F6;border:1.5px solid var(--cc);font-weight:600;font-size:15px;color:var(--ink);animation:wsIn 9s ease-in-out infinite} :root[data-theme="learnndev"] .ws-chip b{font-size:11px;letter-spacing:.08em;color:var(--cd);background:var(--ct);padding:3px 8px;border-radius:7px} :root[data-theme="learnndev"] .ws-chip.c1{--cc:#BFD0F0;--cd:#3A5CA8;--ct:#E3EBF9} :root[data-theme="learnndev"] .ws-chip.c2{--cc:#D4CBEE;--cd:#6A58B0;--ct:#EDE8F8;animation-delay:.4s} :root[data-theme="learnndev"] .ws-chip.c3{--cc:#F3C2DB;--cd:#C0397F;--ct:#FCE6F1;animation-delay:.8s} :root[data-theme="learnndev"] .ws-arrow{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;color:#fff;background:linear-gradient(135deg,#5B7FC7,#E84A9E);animation:wsArrow 2s ease-in-out infinite} :root[data-theme="learnndev"] .ws-arrow svg{width:22px;height:22px} :root[data-theme="learnndev"] .ws-chat{padding:22px;border-radius:20px;background:linear-gradient(180deg,#F8F6FE,#fff);border:1.5px solid #E5DFF4;display:grid;gap:14px;min-height:170px;align-content:start} :root[data-theme="learnndev"] .ws-q{justify-self:end;max-width:85%;padding:12px 18px;border-radius:18px 18px 4px 18px;background:linear-gradient(135deg,#6A58B0,#8B6FE0);color:#fff;font-weight:600;font-size:15px;animation:wsQ 9s ease-in-out infinite} :root[data-theme="learnndev"] .ws-a{position:relative;justify-self:start;max-width:92%;min-height:80px} :root[data-theme="learnndev"] .ws-ans{padding:14px 18px;border-radius:18px 18px 18px 4px;background:#EFEBE0;color:var(--ink);font-size:15px;animation:wsA 9s ease-in-out infinite} :root[data-theme="learnndev"] .ws-ans p{margin:0 0 10px} :root[data-theme="learnndev"] .ws-source{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;border:1.5px solid #5FC4A0;color:#1E8F6A;background:#E8F8F1;font-size:12.5px;font-weight:700} :root[data-theme="learnndev"] .ws-source svg{width:14px;height:14px} :root[data-theme="learnndev"] .ws-dots{position:absolute;left:0;top:0;display:flex;gap:5px;padding:12px 16px;border-radius:16px 16px 16px 4px;background:#EFEBE0;animation:wsDots 9s ease-in-out infinite} :root[data-theme="learnndev"] .ws-dots b{width:7px;height:7px;border-radius:50%;background:#6A58B0;animation:gcDot 1s ease-in-out infinite} :root[data-theme="learnndev"] .ws-dots b:nth-child(2){animation-delay:.15s}:root[data-theme="learnndev"] .ws-dots b:nth-child(3){animation-delay:.3s} @keyframes wsIn{0%,3%{opacity:0;transform:translateX(-16px)}12%,88%{opacity:1;transform:none}98%,100%{opacity:0}} @keyframes wsArrow{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}} @keyframes wsQ{0%,18%{opacity:0;transform:translateY(10px) scale(.95)}25%,88%{opacity:1;transform:none}98%,100%{opacity:0}} @keyframes wsDots{0%,28%{opacity:0}31%,44%{opacity:1}48%,100%{opacity:0}} @keyframes wsA{0%,46%{opacity:0;transform:translateY(8px) scale(.96)}54%,88%{opacity:1;transform:none}98%,100%{opacity:0}} @media (max-width:900px){:root[data-theme="learnndev"] .ws-steps{grid-template-columns:1fr}:root[data-theme="learnndev"] .ws-demo{grid-template-columns:1fr}:root[data-theme="learnndev"] .ws-arrow{transform:rotate(90deg);justify-self:center;animation:none}} @media (prefers-reduced-motion:reduce){:root[data-theme="learnndev"] .ws *{animation:none!important}:root[data-theme="learnndev"] .ws-dots{display:none}} /* ---- block 12 workspace-v2 ---- */ /* outlines flow + cards float */ :root[data-theme="learnndev"] .ws-step,:root[data-theme="learnndev"] .ws-demo{animation:gcSpin 7s linear infinite,gcFloat 6s ease-in-out infinite} :root[data-theme="learnndev"] .ws-step.s2{animation-delay:0s,-2s}:root[data-theme="learnndev"] .ws-step.s3{animation-delay:0s,-4s}:root[data-theme="learnndev"] .ws-demo{animation:gcSpin 8s linear infinite} :root[data-theme="learnndev"] .ws-step{background:linear-gradient(#fff,#fff) padding-box,conic-gradient(from var(--ang),var(--c1),var(--c2),var(--c1)) border-box;padding-bottom:26px} :root[data-theme="learnndev"] .ws-demo{background:linear-gradient(#fff,#fff) padding-box,conic-gradient(from var(--ang),#5B7FC7,#A99BD6,#E84A9E,#E59322,#5B7FC7) border-box} :root[data-theme="learnndev"] .ws-n{animation:gcPulse 2.6s ease-in-out infinite} /* mini panels */ :root[data-theme="learnndev"] .wv{position:relative;z-index:1;margin-top:22px;padding:14px;border-radius:18px;background:linear-gradient(180deg,var(--tint),#fff);border:1.5px solid color-mix(in srgb,var(--c1) 40%,#fff);display:grid;gap:9px;font-size:13px;color:var(--ink)} /* step 1 */ :root[data-theme="learnndev"] .wf{display:flex;align-items:center;gap:10px;padding:8px 11px;border-radius:11px;background:#fff;border:1.5px solid color-mix(in srgb,var(--c1) 35%,#fff);animation:wfIn 8s ease-in-out infinite} :root[data-theme="learnndev"] .wf.f2{animation-delay:.5s}:root[data-theme="learnndev"] .wf.f3{animation-delay:1s}:root[data-theme="learnndev"] .wf.f4{animation-delay:1.5s} :root[data-theme="learnndev"] .wf b{font-size:10px;letter-spacing:.08em;padding:3px 7px;border-radius:6px;color:#3A5CA8;background:#E3EBF9} :root[data-theme="learnndev"] .wf.f2 b{color:#6A58B0;background:#EDE8F8}:root[data-theme="learnndev"] .wf.f3 b{color:#2F7D58;background:#DAF1E5}:root[data-theme="learnndev"] .wf.f4 b{color:#B86F00;background:#FDEBCF} :root[data-theme="learnndev"] .wf span{flex:1;font-weight:600} :root[data-theme="learnndev"] .wf i{position:absolute;right:26px;width:20px;height:20px} :root[data-theme="learnndev"] .wf{position:relative} :root[data-theme="learnndev"] .wf .spin{border-radius:50%;border:2.5px solid #D6DEF0;border-top-color:#3A5CA8;animation:wSpin .8s linear infinite,wfSpinHide 8s ease-in-out infinite;animation-delay:0s,0s} :root[data-theme="learnndev"] .wf .ok{display:grid;place-items:center;border-radius:50%;background:#2F9E6E;color:#fff;opacity:0;animation:wfOk 8s ease-in-out infinite} :root[data-theme="learnndev"] .wf .ok svg{width:12px;height:12px} :root[data-theme="learnndev"] .wf.f2 i{animation-delay:.5s}:root[data-theme="learnndev"] .wf.f3 i{animation-delay:1s}:root[data-theme="learnndev"] .wf.f4 i{animation-delay:1.5s} :root[data-theme="learnndev"] .wf.f2 .spin{animation-delay:0s,.5s}:root[data-theme="learnndev"] .wf.f3 .spin{animation-delay:0s,1s}:root[data-theme="learnndev"] .wf.f4 .spin{animation-delay:0s,1.5s} :root[data-theme="learnndev"] .wbar{height:6px;border-radius:99px;background:#DCE6F8;overflow:hidden} :root[data-theme="learnndev"] .wbar i{display:block;height:100%;width:100%;border-radius:inherit;background:linear-gradient(90deg,#5B7FC7,#85CBA6);transform-origin:left;animation:wbar 8s ease-in-out infinite} /* step 2 */ :root[data-theme="learnndev"] .wrow{display:grid;grid-template-columns:52px 1fr;align-items:center;gap:8px} :root[data-theme="learnndev"] .wrow small{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--c2)} :root[data-theme="learnndev"] .wfield{padding:8px 12px;border-radius:10px;background:#fff;border:1.5px solid color-mix(in srgb,var(--c1) 50%,#fff);font-weight:700} :root[data-theme="learnndev"] .tw{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;width:0;border-right:2px solid var(--c2);animation:wType 7s steps(10) infinite} :root[data-theme="learnndev"] .wsw{position:relative;display:flex;gap:10px;padding:4px} :root[data-theme="learnndev"] .wsw u{width:24px;height:24px;border-radius:50%;background:var(--c);box-shadow:0 4px 8px -3px var(--c)} :root[data-theme="learnndev"] .wsw .ring{position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;border:2.5px solid var(--ink);animation:wRing 7s ease-in-out infinite} :root[data-theme="learnndev"] .wseg{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:3px;border-radius:11px;background:#fff;border:1.5px solid color-mix(in srgb,var(--c1) 40%,#fff);font-size:12px;font-weight:700;text-align:center} :root[data-theme="learnndev"] .wseg span{position:relative;z-index:1;padding:6px 4px;animation:wSegTx 7s ease-in-out infinite} :root[data-theme="learnndev"] .wseg span:nth-child(3){animation-name:wSegTx2} :root[data-theme="learnndev"] .wseg .slider{position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:8px;background:linear-gradient(135deg,var(--c1),var(--c2));animation:wSeg 7s ease-in-out infinite} /* step 3 */ :root[data-theme="learnndev"] .wfile,:root[data-theme="learnndev"] .wlink,:root[data-theme="learnndev"] .wcode{display:flex;align-items:center;gap:9px;padding:8px 11px;border-radius:11px;background:#fff;border:1.5px solid color-mix(in srgb,var(--c1) 40%,#fff)} :root[data-theme="learnndev"] .wfile svg,:root[data-theme="learnndev"] .wlink svg{width:16px;height:16px;color:var(--c2);flex:none} :root[data-theme="learnndev"] .wfile svg{animation:wBounce 1.6s ease-in-out infinite} :root[data-theme="learnndev"] .wfile span,:root[data-theme="learnndev"] .wlink span{flex:1;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} :root[data-theme="learnndev"] .live{display:inline-flex;align-items:center;gap:6px;font-style:normal;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:99px;color:#1E8F6A;background:#E0F6EC} :root[data-theme="learnndev"] .live i{width:7px;height:7px;border-radius:50%;background:#2F9E6E;animation:gcPing2 1.6s ease-out infinite} :root[data-theme="learnndev"] .wlink button{position:relative;min-width:76px;height:28px;border:0;border-radius:8px;color:#fff;font:700 12px var(--font);background:linear-gradient(135deg,var(--c1),var(--c2));overflow:hidden} :root[data-theme="learnndev"] .wlink s{text-decoration:none;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:4px} :root[data-theme="learnndev"] .wlink s svg{width:12px;height:12px;color:#fff} :root[data-theme="learnndev"] .wlink .t1{animation:wCopy1 6s ease-in-out infinite}:root[data-theme="learnndev"] .wlink .t2{opacity:0;background:#2F9E6E;animation:wCopy2 6s ease-in-out infinite} :root[data-theme="learnndev"] .wcode code{font:600 12px/1.4 ui-monospace,Menlo,Consolas,monospace;color:#2F6A52;white-space:nowrap;overflow:hidden} :root[data-theme="learnndev"] .tw2{display:inline-block;overflow:hidden;vertical-align:bottom;width:0;border-right:2px solid #2F9E6E;animation:wType2 7s steps(24) infinite} /* demo */ :root[data-theme="learnndev"] .ws-chat{gap:12px} :root[data-theme="learnndev"] .ws-top{display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid #E8E2F4;font-size:14px} :root[data-theme="learnndev"] .ws-top b{flex:1} :root[data-theme="learnndev"] .ws-orb{width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#fff,#A99BD6 40%,#5B7FC7 70%,#6A58B0);animation:gcPulse 2.4s ease-in-out infinite} :root[data-theme="learnndev"] .ws-demo{box-shadow:0 30px 60px -36px rgba(106,88,176,.6)} :root[data-theme="learnndev"] .ws-chip{animation:wsIn 10s ease-in-out infinite}:root[data-theme="learnndev"] .ws-chip.c2{animation-delay:.3s}:root[data-theme="learnndev"] .ws-chip.c3{animation-delay:.6s} :root[data-theme="learnndev"] .ws-arrow{animation:wsArrow 1.6s ease-in-out infinite} :root[data-theme="learnndev"] .ws-q{animation:wsQ 10s ease-in-out infinite}:root[data-theme="learnndev"] .ws-dots{animation:wsDots 10s ease-in-out infinite}:root[data-theme="learnndev"] .ws-ans{animation:wsA 10s ease-in-out infinite} @keyframes wsIn{0%{opacity:0;transform:translateX(-18px)}5%,92%{opacity:1;transform:none}98%,100%{opacity:0}} @keyframes wsQ{0%,10%{opacity:0;transform:translateY(10px) scale(.95)}16%,92%{opacity:1;transform:none}98%,100%{opacity:0}} @keyframes wsDots{0%,24%{opacity:0}27%,38%{opacity:1}42%,100%{opacity:0}} @keyframes wsA{0%,38%{opacity:0;transform:translateY(8px) scale(.96)}46%,92%{opacity:1;transform:none}98%,100%{opacity:0}} @keyframes wSpin{to{transform:rotate(360deg)}} @keyframes wfIn{0%{opacity:0;transform:translateY(10px)}8%,92%{opacity:1;transform:none}98%,100%{opacity:0}} @keyframes wfSpinHide{0%,6%{opacity:0}10%,26%{opacity:1}30%,100%{opacity:0}} @keyframes wfOk{0%,28%{opacity:0;transform:scale(.4)}34%{opacity:1;transform:scale(1.2)}38%,92%{opacity:1;transform:scale(1)}98%,100%{opacity:0}} @keyframes wbar{0%,6%{transform:scaleX(0)}50%,92%{transform:scaleX(1)}98%,100%{transform:scaleX(1);opacity:0}} @keyframes wType{0%,6%{width:0}34%,88%{width:10ch}96%,100%{width:0}} @keyframes wType2{0%,10%{width:0}45%,88%{width:24ch}96%,100%{width:0}} @keyframes wRing{0%,14%{transform:translateX(-4px)}20%,34%{transform:translateX(30px)}40%,54%{transform:translateX(64px)}60%,74%{transform:translateX(98px)}80%,94%{transform:translateX(132px)}100%{transform:translateX(-4px)}} @keyframes wSeg{0%,40%{transform:translateX(0)}50%,90%{transform:translateX(100%)}100%{transform:translateX(0)}} @keyframes wSegTx{0%,40%{color:#fff}50%,90%{color:var(--ink)}100%{color:#fff}} @keyframes wSegTx2{0%,40%{color:var(--ink)}50%,90%{color:#fff}100%{color:var(--ink)}} @keyframes wBounce{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}} @keyframes wCopy1{0%,50%{opacity:1}56%,90%{opacity:0}96%,100%{opacity:1}} @keyframes wCopy2{0%,50%{opacity:0}56%,90%{opacity:1}96%,100%{opacity:0}} @keyframes gcPing2{0%{box-shadow:0 0 0 0 rgba(47,158,110,.55)}70%,100%{box-shadow:0 0 0 8px rgba(47,158,110,0)}} @media (prefers-reduced-motion:reduce){:root[data-theme="learnndev"] .ws *,:root[data-theme="learnndev"] .ws{animation:none!important}:root[data-theme="learnndev"] .wf i.spin{display:none}:root[data-theme="learnndev"] .wf .ok,:root[data-theme="learnndev"] .wlink .t2{opacity:1}:root[data-theme="learnndev"] .wlink .t1{opacity:0}:root[data-theme="learnndev"] .tw,:root[data-theme="learnndev"] .tw2{width:auto}} :root[data-theme="learnndev"] .ws-step{display:flex;flex-direction:column} :root[data-theme="learnndev"] .ws-step p{margin-bottom:22px} :root[data-theme="learnndev"] .wv{margin-top:auto} :root[data-theme="learnndev"] .wseg .slider{display:block;margin:0;padding:0;height:auto} /* ---- block 13 workspace-v3 ---- */ /* ===== workspace cards v3: pastel fill, STEP tag, watermark number, app-window previews ===== */ :root[data-theme="learnndev"] .ws-step.s1{--bgA:#E4ECFA;--bgB:#F6F9FF;--wm:rgba(58,92,168,.10)} :root[data-theme="learnndev"] .ws-step.s2{--bgA:#F4E8F7;--bgB:#FFF6FB;--wm:rgba(200,70,150,.10)} :root[data-theme="learnndev"] .ws-step.s3{--bgA:#DDF3E8;--bgB:#F5FCF8;--wm:rgba(47,158,110,.11)} :root[data-theme="learnndev"] .ws-step{border:1.5px solid color-mix(in srgb,var(--c1) 45%,#fff);background:linear-gradient(160deg,var(--bgA),var(--bgB) 60%,#fff);padding:30px 26px 26px;border-radius:30px;animation:gcFloat 6s ease-in-out infinite;box-shadow:0 26px 50px -34px color-mix(in srgb,var(--c2) 60%,transparent)} :root[data-theme="learnndev"] .ws-step.s2{animation-delay:-2s}:root[data-theme="learnndev"] .ws-step.s3{animation-delay:-4s} :root[data-theme="learnndev"] .ws-step::after{content:attr(data-n);right:6px;top:-26px;left:auto;width:auto;height:auto;border-radius:0;background:none;font:800 200px/1 var(--font);letter-spacing:-.06em;color:var(--wm);transform:none!important;transition:transform .5s,color .4s} :root[data-theme="learnndev"] .ws-step:hover::after{transform:translate(-6px,6px) scale(1.06)!important;color:color-mix(in srgb,var(--c1) 22%,transparent)} :root[data-theme="learnndev"] .ws-step:hover{transform:translateY(-8px);box-shadow:0 36px 64px -32px color-mix(in srgb,var(--c2) 65%,transparent)} :root[data-theme="learnndev"] .ws-n{width:auto;height:30px;padding:0 14px;border-radius:999px;font-size:0;margin-bottom:20px;letter-spacing:.14em;animation:none;box-shadow:0 8px 16px -8px color-mix(in srgb,var(--c2) 75%,transparent)} :root[data-theme="learnndev"] .ws-n::before{font:800 12px var(--font);letter-spacing:.14em;content:"STEP 0" var(--k)} :root[data-theme="learnndev"] .ws-step.s1 .ws-n{--k:"1"}:root[data-theme="learnndev"] .ws-step.s2 .ws-n{--k:"2"}:root[data-theme="learnndev"] .ws-step.s3 .ws-n{--k:"3"} :root[data-theme="learnndev"] .ws-step h3{font-size:27px;margin-bottom:14px} :root[data-theme="learnndev"] .ws-step h3::after{content:"";display:block;width:44px;height:4px;margin-top:10px;border-radius:99px;background:linear-gradient(90deg,var(--c1),var(--c2))} :root[data-theme="learnndev"] .wv{background:#fff;border:1px solid color-mix(in srgb,var(--c1) 35%,#fff);border-radius:18px;padding:12px 14px 16px;box-shadow:0 18px 34px -22px color-mix(in srgb,var(--c2) 70%,transparent),0 1px 0 #fff inset} :root[data-theme="learnndev"] .wv::before{content:"";display:block;width:9px;height:9px;border-radius:50%;background:#FF8FA3;box-shadow:15px 0 0 #FFD27F,30px 0 0 #85CBA6;margin:2px 0 8px} :root[data-theme="learnndev"] .wf,:root[data-theme="learnndev"] .wfield,:root[data-theme="learnndev"] .wseg,:root[data-theme="learnndev"] .wfile,:root[data-theme="learnndev"] .wlink,:root[data-theme="learnndev"] .wcode{background:color-mix(in srgb,var(--bgA) 55%,#fff)} :root[data-theme="learnndev"] .wf.f1,:root[data-theme="learnndev"] .wf{border-color:color-mix(in srgb,var(--c1) 30%,#fff)} /* demo card */ :root[data-theme="learnndev"] .ws-demo{border:1.5px solid #E6DDF5;background:linear-gradient(120deg,#F2ECFC,#FFF4EA 55%,#FDEBF4);animation:none;border-radius:30px;box-shadow:0 30px 60px -38px rgba(106,88,176,.55)} :root[data-theme="learnndev"] .ws-chat{background:#fff;border:1px solid #E6DDF5;box-shadow:0 18px 34px -24px rgba(106,88,176,.6)} :root[data-theme="learnndev"] .ws-chip{background:#fff} :root[data-theme="learnndev"] .ws-n{align-self:flex-start;display:inline-flex;align-items:center;justify-content:center} :root[data-theme="learnndev"] .ws-step::after{z-index:0} /* ---- block 14 workspace-v4 ---- */ /* ===== workspace cards v4: coloured header with floating preview, white body, flow arrows ===== */ :root[data-theme="learnndev"] .ws-steps{gap:34px} :root[data-theme="learnndev"] .ws-step{padding:0;overflow:visible;background:#fff;border:1.5px solid #EAE3D6;border-radius:30px;box-shadow:0 28px 56px -38px rgba(30,36,51,.45);animation:gcFloat 6s ease-in-out infinite;display:flex;flex-direction:column} :root[data-theme="learnndev"] .ws-step.s2{animation-delay:-2s}:root[data-theme="learnndev"] .ws-step.s3{animation-delay:-4s} :root[data-theme="learnndev"] .ws-step:hover{transform:translateY(-8px);border-color:color-mix(in srgb,var(--c1) 55%,#fff);box-shadow:0 40px 70px -36px color-mix(in srgb,var(--c2) 70%,transparent)} :root[data-theme="learnndev"] .ws-step::after{content:none} :root[data-theme="learnndev"] .ws-step.s1::after,:root[data-theme="learnndev"] .ws-step.s2::after{content:"";display:block;position:absolute;z-index:5;right:-35px;top:118px;left:auto;width:36px;height:36px;border-radius:50%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/18px no-repeat,linear-gradient(135deg,#5B7FC7,#E84A9E);box-shadow:0 10px 20px -8px rgba(106,88,176,.7),0 0 0 5px #FBF9F6;transform:none!important;color:transparent;font-size:0;animation:wsNudge 1.6s ease-in-out infinite} @keyframes wsNudge{0%,100%{translate:0 0}50%{translate:4px 0}} :root[data-theme="learnndev"] .wh{position:relative;padding:22px 22px 24px;border-radius:28px 28px 0 0;overflow:hidden;display:flex;flex-direction:column;gap:16px;background:linear-gradient(135deg,var(--h1),var(--h2) 60%,var(--h3));background-size:160% 160%;animation:wsBg 9s ease-in-out infinite} :root[data-theme="learnndev"] .ws-step.s1{--h1:#2F4F96;--h2:#5B7FC7;--h3:#A99BD6} :root[data-theme="learnndev"] .ws-step.s2{--h1:#C0397F;--h2:#E84A9E;--h3:#C9A0E4} :root[data-theme="learnndev"] .ws-step.s3{--h1:#1F8A60;--h2:#4FB88A;--h3:#B7E07A} @keyframes wsBg{0%,100%{background-position:0% 0%}50%{background-position:100% 100%}} :root[data-theme="learnndev"] .wh .ws-n{align-self:flex-start;position:relative;z-index:2;margin:0;height:28px;padding:0 13px;border-radius:999px;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:none;color:#fff} :root[data-theme="learnndev"] .wh .wm{position:absolute;right:10px;top:-20px;font:800 170px/1 var(--font);letter-spacing:-.06em;color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.28);pointer-events:none} :root[data-theme="learnndev"] .wh .wv{position:relative;z-index:2;margin:0;background:#fff;border:0;border-radius:18px;box-shadow:0 24px 40px -22px rgba(10,20,60,.55);transition:transform .4s cubic-bezier(.2,.8,.2,1)} :root[data-theme="learnndev"] .ws-step:hover .wh .wv{transform:translateY(-5px) scale(1.02)} :root[data-theme="learnndev"] .wb{padding:26px 28px 30px;flex:1} :root[data-theme="learnndev"] .wb h3{margin:0 0 12px;font:700 26px/1.2 var(--serif);letter-spacing:-.02em;color:var(--ink)} :root[data-theme="learnndev"] .wb h3::after{content:"";display:block;width:46px;height:4px;margin-top:11px;border-radius:99px;background:linear-gradient(90deg,var(--h1),var(--h3))} :root[data-theme="learnndev"] .wb p{margin:0;font-size:15.5px;line-height:1.65;color:var(--soft)} @media (max-width:900px){:root[data-theme="learnndev"] .ws-step.s1::after,:root[data-theme="learnndev"] .ws-step.s2::after{right:auto;left:50%;top:auto;bottom:-38px;margin-left:-18px;transform:rotate(90deg)!important}:root[data-theme="learnndev"] .ws-steps{gap:44px}} @media (prefers-reduced-motion:reduce){:root[data-theme="learnndev"] .wh,:root[data-theme="learnndev"] .ws-step::after{animation:none!important}} :root[data-theme="learnndev"] .wh{min-height:352px} :root[data-theme="learnndev"] .wh .wv{margin-top:auto} :root[data-theme="learnndev"] #workspace{overflow-x:clip} @media (max-width:900px){:root[data-theme="learnndev"] .wh{min-height:0}} /* ---- block 15 builds-css ---- */ :root[data-theme="learnndev"] em.ac17{background-image:linear-gradient(90deg,#3A5CA8,#E84A9E);-webkit-background-clip:text;background-clip:text;color:transparent} :root[data-theme="learnndev"] .pb-head{text-align:left;max-width:none;margin-inline:0} :root[data-theme="learnndev"] .pb-head h2{max-width:none} :root[data-theme="learnndev"] .pb-head .lede{margin:18px 0 0;max-width:none;text-align:left} :root[data-theme="learnndev"] #builds .eyebrow{color:#C0397F} :root[data-theme="learnndev"] .pb-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:40px} :root[data-theme="learnndev"] .pb-card.p1{--c1:#5B7FC7;--c2:#3A5CA8;--tint:#E3EBF9} :root[data-theme="learnndev"] .pb-card.p2{--c1:#F0B04D;--c2:#C27A00;--tint:#FFF0D6} :root[data-theme="learnndev"] .pb-card.p3{--c1:#85CBA6;--c2:#2F9E6E;--tint:#DDF3E8} :root[data-theme="learnndev"] .pb-card.p4{--c1:#F08BC1;--c2:#C0397F;--tint:#FCE4F0} :root[data-theme="learnndev"] .pb-card.p5{--c1:#A99BD6;--c2:#6A58B0;--tint:#ECE7F8} :root[data-theme="learnndev"] .pb-card.p6{--c1:#D4A574;--c2:#A8691F;--tint:#F8EBDD} :root[data-theme="learnndev"] .pb-card{position:relative;display:flex;flex-direction:column;padding:28px 26px 26px;border:1.5px solid #EAE3D6;border-radius:28px;background:#fff;overflow:hidden;box-shadow:0 22px 46px -34px rgba(30,36,51,.4);animation:gcFloat 6s ease-in-out infinite;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .3s,background .4s} :root[data-theme="learnndev"] .pb-card.p2{animation-delay:-1s}:root[data-theme="learnndev"] .pb-card.p3{animation-delay:-2s}:root[data-theme="learnndev"] .pb-card.p4{animation-delay:-3s}:root[data-theme="learnndev"] .pb-card.p5{animation-delay:-4s}:root[data-theme="learnndev"] .pb-card.p6{animation-delay:-5s} :root[data-theme="learnndev"] .pb-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(180deg,var(--c1),var(--c2));transform:scaleY(.3);transform-origin:top;transition:transform .5s cubic-bezier(.2,.8,.2,1)} :root[data-theme="learnndev"] .pb-card::after{content:"";position:absolute;right:-50px;top:-50px;width:170px;height:170px;border-radius:50%;background:radial-gradient(closest-side,var(--tint),transparent);pointer-events:none;transition:transform .5s} :root[data-theme="learnndev"] .pb-card:hover{transform:translateY(-8px);border-color:var(--c1);background:linear-gradient(160deg,var(--tint),#fff 65%);box-shadow:0 34px 60px -34px color-mix(in srgb,var(--c2) 65%,transparent)} :root[data-theme="learnndev"] .pb-card:hover::before{transform:scaleY(1)}:root[data-theme="learnndev"] .pb-card:hover::after{transform:scale(1.35)} :root[data-theme="learnndev"] .pb-top{position:relative;z-index:1;display:flex;align-items:center;gap:12px;margin-bottom:18px} :root[data-theme="learnndev"] .pb-ico{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;color:#fff;background:linear-gradient(135deg,var(--c1),var(--c2));box-shadow:0 10px 18px -8px color-mix(in srgb,var(--c2) 75%,transparent);transition:transform .4s cubic-bezier(.2,.8,.2,1)} :root[data-theme="learnndev"] .pb-ico svg{width:24px;height:24px} :root[data-theme="learnndev"] .pb-card:hover .pb-ico{transform:rotate(-8deg) scale(1.1)} :root[data-theme="learnndev"] .pb-role{font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;line-height:1.35;color:var(--c2)} :root[data-theme="learnndev"] .pb-card h3{position:relative;z-index:1;margin:0 0 10px;font:700 25px/1.2 var(--serif);letter-spacing:-.02em;color:var(--ink)} :root[data-theme="learnndev"] .pb-card p{position:relative;z-index:1;margin:0;font-size:15.5px;line-height:1.6;color:var(--soft);flex:1} :root[data-theme="learnndev"] .pb-q{position:relative;z-index:1;margin-top:22px;min-height:76px} :root[data-theme="learnndev"] .pb-q blockquote{margin:0;padding:13px 16px;border-left:4px solid var(--c1);border-radius:6px 16px 16px 6px;background:var(--tint);font-style:italic;font-size:14.5px;line-height:1.5;color:var(--ink);animation:pbQ 9s ease-in-out infinite} :root[data-theme="learnndev"] .pb-dots{position:absolute;left:0;top:0;display:flex;gap:5px;padding:12px 16px;border-radius:6px 16px 16px 6px;background:var(--tint);border-left:4px solid var(--c1);animation:pbDots 9s ease-in-out infinite} :root[data-theme="learnndev"] .pb-dots b{width:7px;height:7px;border-radius:50%;background:var(--c2);animation:gcDot 1s ease-in-out infinite} :root[data-theme="learnndev"] .pb-dots b:nth-child(2){animation-delay:.15s}:root[data-theme="learnndev"] .pb-dots b:nth-child(3){animation-delay:.3s} :root[data-theme="learnndev"] .pb-card.p2 .pb-q *{animation-delay:.6s}:root[data-theme="learnndev"] .pb-card.p3 .pb-q blockquote,:root[data-theme="learnndev"] .pb-card.p3 .pb-dots{animation-delay:1.2s}:root[data-theme="learnndev"] .pb-card.p4 .pb-q blockquote,:root[data-theme="learnndev"] .pb-card.p4 .pb-dots{animation-delay:1.8s}:root[data-theme="learnndev"] .pb-card.p5 .pb-q blockquote,:root[data-theme="learnndev"] .pb-card.p5 .pb-dots{animation-delay:2.4s}:root[data-theme="learnndev"] .pb-card.p6 .pb-q blockquote,:root[data-theme="learnndev"] .pb-card.p6 .pb-dots{animation-delay:3s} :root[data-theme="learnndev"] .pb-card.p2 .pb-dots b{animation-delay:.6s} @keyframes pbDots{0%,2%{opacity:0}5%,16%{opacity:1}20%,100%{opacity:0}} @keyframes pbQ{0%,17%{opacity:0;transform:translateY(8px) scale(.97)}25%,90%{opacity:1;transform:none}98%,100%{opacity:0}} @media (max-width:1000px){:root[data-theme="learnndev"] .pb-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:640px){:root[data-theme="learnndev"] .pb-grid{grid-template-columns:1fr}} @media (prefers-reduced-motion:reduce){:root[data-theme="learnndev"] .pb-card,:root[data-theme="learnndev"] .pb-card *{animation:none!important}:root[data-theme="learnndev"] .pb-dots{display:none}} /* ---- block 16 builds-v3 ---- */ /* ===== what people build v3: light pastel colour cards ===== */ :root[data-theme="learnndev"] .pb-card{border:1.5px solid color-mix(in srgb,var(--c1) 45%,#fff);background:linear-gradient(155deg,var(--tint),color-mix(in srgb,var(--tint) 35%,#fff) 70%,#fff);box-shadow:0 24px 46px -34px color-mix(in srgb,var(--c2) 60%,transparent);border-radius:30px} :root[data-theme="learnndev"] .pb-card::before{content:"";position:absolute;inset:0;z-index:0;width:auto;height:auto;border-radius:inherit;background:linear-gradient(155deg,color-mix(in srgb,var(--c1) 55%,#fff),color-mix(in srgb,var(--c1) 25%,#fff));transform:none!important;opacity:0;transition:opacity .45s ease} :root[data-theme="learnndev"] .pb-card::after{right:-40px;top:-40px;width:170px;height:170px;background:radial-gradient(closest-side,rgba(255,255,255,.9),transparent);transition:transform .5s} :root[data-theme="learnndev"] .pb-card:hover{transform:translateY(-8px);border-color:var(--c1);background:linear-gradient(155deg,var(--tint),color-mix(in srgb,var(--tint) 35%,#fff) 70%,#fff);box-shadow:0 36px 62px -34px color-mix(in srgb,var(--c2) 70%,transparent)} :root[data-theme="learnndev"] .pb-card:hover::before{opacity:1} :root[data-theme="learnndev"] .pb-card:hover::after{transform:scale(1.35)} :root[data-theme="learnndev"] .pb-ico{background:#fff;color:var(--c2);border:2px solid color-mix(in srgb,var(--c1) 60%,#fff);box-shadow:0 12px 22px -12px color-mix(in srgb,var(--c2) 70%,transparent)} :root[data-theme="learnndev"] .pb-card:hover .pb-ico{background:linear-gradient(135deg,var(--c1),var(--c2));color:#fff;border-color:transparent;box-shadow:0 12px 22px -8px color-mix(in srgb,var(--c2) 80%,transparent);transform:rotate(-8deg) scale(1.1)} :root[data-theme="learnndev"] .pb-role{color:var(--c2);background:rgba(255,255,255,.85);padding:6px 12px;border-radius:999px;border:1px solid color-mix(in srgb,var(--c1) 45%,#fff)} :root[data-theme="learnndev"] .pb-card:hover .pb-role{color:var(--c2)} :root[data-theme="learnndev"] .pb-card h3{color:var(--ink)} :root[data-theme="learnndev"] .pb-card p{color:#3F4657} :root[data-theme="learnndev"] .pb-card:hover p{color:var(--ink)} :root[data-theme="learnndev"] .pb-q blockquote,:root[data-theme="learnndev"] .pb-dots{background:#fff;border-left:4px solid var(--c1);color:var(--ink);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 10px 20px -14px color-mix(in srgb,var(--c2) 60%,transparent)} :root[data-theme="learnndev"] .pb-card:hover .pb-q blockquote,:root[data-theme="learnndev"] .pb-card:hover .pb-dots{background:#fff;border-left-color:var(--c2)} :root[data-theme="learnndev"] .pb-dots b{background:var(--c2)} :root[data-theme="learnndev"] .pb-card:hover .pb-dots b{background:var(--c2)} :root[data-theme="learnndev"] .pb-role{border-radius:14px} /* ---- block 17 builds-v4 ---- */ /* ===== what people build v4: interactive "pick the job" showcase ===== */ :root[data-theme="learnndev"] .ps .p1{--c1:#5B7FC7;--c2:#3A5CA8;--tint:#E3EBF9;--tint2:#CFDCF5} :root[data-theme="learnndev"] .ps .p2{--c1:#F0B04D;--c2:#C27A00;--tint:#FFF0D6;--tint2:#FADFAE} :root[data-theme="learnndev"] .ps .p3{--c1:#85CBA6;--c2:#2F9E6E;--tint:#DDF3E8;--tint2:#BFE6D1} :root[data-theme="learnndev"] .ps .p4{--c1:#F08BC1;--c2:#C0397F;--tint:#FCE4F0;--tint2:#F8C6DE} :root[data-theme="learnndev"] .ps .p5{--c1:#A99BD6;--c2:#6A58B0;--tint:#ECE7F8;--tint2:#D8CFF0} :root[data-theme="learnndev"] .ps .p6{--c1:#D4A574;--c2:#A8691F;--tint:#F8EBDD;--tint2:#EFD3B3} :root[data-theme="learnndev"] .ps{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.6fr);gap:26px;margin-top:40px;align-items:stretch} :root[data-theme="learnndev"] .ps-tabs{display:flex;flex-direction:column;gap:12px} :root[data-theme="learnndev"] .ps-tab{position:relative;display:flex;align-items:center;gap:14px;text-align:left;padding:14px 18px;border:1.5px solid #EAE3D6;border-radius:20px;background:#fff;cursor:pointer;font:inherit;color:var(--ink);overflow:hidden;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s,background .3s} :root[data-theme="learnndev"] .ps-tab:hover{transform:translateX(6px);border-color:var(--c1)} :root[data-theme="learnndev"] .ps-ico{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;color:var(--c2);background:var(--tint);transition:background .3s,color .3s,transform .3s} :root[data-theme="learnndev"] .ps-ico svg{width:22px;height:22px} :root[data-theme="learnndev"] .ps-tx{display:grid;gap:2px;min-width:0} :root[data-theme="learnndev"] .ps-tx b{font:700 17px/1.2 var(--serif);letter-spacing:-.01em} :root[data-theme="learnndev"] .ps-tx small{font-size:12px;font-weight:600;color:var(--muted);line-height:1.3} :root[data-theme="learnndev"] .ps-prog{position:absolute;left:0;bottom:0;height:3px;width:100%;background:linear-gradient(90deg,var(--c1),var(--c2));transform:scaleX(0);transform-origin:left} :root[data-theme="learnndev"] .ps-tab.on{border-color:var(--c1);background:linear-gradient(100deg,var(--tint),#fff 80%);box-shadow:0 18px 34px -22px color-mix(in srgb,var(--c2) 70%,transparent);transform:translateX(10px)} :root[data-theme="learnndev"] .ps-tab.on .ps-ico{background:linear-gradient(135deg,var(--c1),var(--c2));color:#fff;transform:rotate(-6deg) scale(1.06)} :root[data-theme="learnndev"] .ps-tab.on .ps-prog{animation:psProg var(--dur,6s) linear forwards} :root[data-theme="learnndev"] .ps.paused .ps-tab.on .ps-prog{animation-play-state:paused} @keyframes psProg{to{transform:scaleX(1)}} :root[data-theme="learnndev"] .ps-stage{position:relative;min-height:440px;border-radius:32px;overflow:hidden;border:1.5px solid #EAE3D6;background:#fff;box-shadow:0 34px 64px -40px rgba(30,36,51,.45)} :root[data-theme="learnndev"] .ps-panel{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:28px;align-items:center;padding:38px 38px 38px 44px;background:linear-gradient(135deg,var(--tint) 0%,var(--tint2) 100%);opacity:0;visibility:hidden;transform:translateX(30px) scale(.98);transition:opacity .4s ease,transform .45s cubic-bezier(.2,.8,.2,1),visibility 0s .45s} :root[data-theme="learnndev"] .ps-panel.on{opacity:1;visibility:visible;transform:none;transition:opacity .4s ease,transform .45s cubic-bezier(.2,.8,.2,1)} :root[data-theme="learnndev"] .ps-panel::before{content:"";position:absolute;right:-90px;top:-90px;width:340px;height:340px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--c1) 45%,transparent),transparent);animation:psGlow 6s ease-in-out infinite alternate} :root[data-theme="learnndev"] .ps-panel::after{content:"";position:absolute;left:-70px;bottom:-110px;width:300px;height:300px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.75),transparent)} @keyframes psGlow{to{transform:translate(-30px,40px) scale(1.15)}} :root[data-theme="learnndev"] .ps-copy{position:relative;z-index:1} :root[data-theme="learnndev"] .ps-role{display:inline-block;padding:7px 14px;border-radius:999px;background:#fff;border:1px solid color-mix(in srgb,var(--c1) 55%,#fff);color:var(--c2);font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase} :root[data-theme="learnndev"] .ps-copy h3{margin:18px 0 12px;font:700 clamp(30px,3.2vw,42px)/1.08 var(--serif);letter-spacing:-.03em;color:var(--ink)} :root[data-theme="learnndev"] .ps-copy p{margin:0;font-size:17px;line-height:1.65;color:#3F4657;max-width:30em} :root[data-theme="learnndev"] .ps-chat{position:relative;z-index:1;padding:18px;border-radius:24px;background:#fff;box-shadow:0 30px 50px -28px color-mix(in srgb,var(--c2) 75%,transparent),0 0 0 1px color-mix(in srgb,var(--c1) 30%,#fff);display:grid;gap:14px;align-content:start;min-height:290px} :root[data-theme="learnndev"] .ps-top{display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid #EEE9E0;font-size:14px} :root[data-theme="learnndev"] .ps-top b{flex:1} :root[data-theme="learnndev"] .ps-orb{width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#fff,var(--c1) 45%,var(--c2));animation:gcPulse 2.4s ease-in-out infinite} :root[data-theme="learnndev"] .ps-q{justify-self:end;max-width:90%;padding:12px 16px;border-radius:18px 18px 4px 18px;background:linear-gradient(135deg,var(--c1),var(--c2));color:#fff;font-weight:600;font-size:14.5px;line-height:1.45;opacity:0} :root[data-theme="learnndev"] .ps-bot{position:relative;min-height:112px} :root[data-theme="learnndev"] .ps-dots{position:absolute;left:0;top:0;display:flex;gap:5px;padding:12px 16px;border-radius:16px 16px 16px 4px;background:var(--tint);opacity:0} :root[data-theme="learnndev"] .ps-dots b{width:7px;height:7px;border-radius:50%;background:var(--c2);animation:gcDot 1s ease-in-out infinite} :root[data-theme="learnndev"] .ps-dots b:nth-child(2){animation-delay:.15s}:root[data-theme="learnndev"] .ps-dots b:nth-child(3){animation-delay:.3s} :root[data-theme="learnndev"] .ps-ans{display:grid;gap:9px;padding:14px 16px;border-radius:16px 16px 16px 4px;background:var(--tint);opacity:0} :root[data-theme="learnndev"] .sk{display:block;height:9px;border-radius:99px;background:linear-gradient(90deg,color-mix(in srgb,var(--c1) 40%,#fff),color-mix(in srgb,var(--c1) 18%,#fff),color-mix(in srgb,var(--c1) 40%,#fff));background-size:200% 100%;animation:psShimmer 1.4s linear infinite} :root[data-theme="learnndev"] .sk.s1{width:92%}:root[data-theme="learnndev"] .sk.s2{width:78%}:root[data-theme="learnndev"] .sk.s3{width:56%} @keyframes psShimmer{to{background-position:-200% 0}} :root[data-theme="learnndev"] .ps-src{justify-self:start;display:inline-flex;align-items:center;gap:7px;margin-top:2px;padding:5px 12px;border-radius:999px;border:1.5px solid #5FC4A0;color:#1E8F6A;background:#E8F8F1;font:700 12.5px var(--font);font-style:normal;opacity:0} :root[data-theme="learnndev"] .ps-src svg{width:14px;height:14px} :root[data-theme="learnndev"] .ps-panel.on .ps-q{animation:psPop .35s .15s cubic-bezier(.2,.8,.2,1) forwards} :root[data-theme="learnndev"] .ps-panel.on .ps-dots{animation:psDotsIn .9s .55s ease forwards} :root[data-theme="learnndev"] .ps-panel.on .ps-ans{animation:psPop .35s 1.4s cubic-bezier(.2,.8,.2,1) forwards} :root[data-theme="learnndev"] .ps-panel.on .ps-src{animation:psPop .35s 1.9s cubic-bezier(.2,.8,.2,1) forwards} :root[data-theme="learnndev"] .ps-panel.on .ps-copy>*{animation:psUp .45s cubic-bezier(.2,.8,.2,1) both} :root[data-theme="learnndev"] .ps-panel.on .ps-copy>*:nth-child(2){animation-delay:.05s}:root[data-theme="learnndev"] .ps-panel.on .ps-copy>*:nth-child(3){animation-delay:.1s} @keyframes psPop{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}} @keyframes psDotsIn{0%{opacity:0}12%,80%{opacity:1}100%{opacity:0}} @keyframes psUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} @media (max-width:1000px){:root[data-theme="learnndev"] .ps{grid-template-columns:1fr}:root[data-theme="learnndev"] .ps-tabs{flex-direction:row;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}:root[data-theme="learnndev"] .ps-tab{flex:none;min-width:220px}:root[data-theme="learnndev"] .ps-tab.on,:root[data-theme="learnndev"] .ps-tab:hover{transform:none}:root[data-theme="learnndev"] .ps-stage{min-height:0;display:grid}:root[data-theme="learnndev"] .ps-panel{position:relative;grid-column:1;grid-row:1;grid-template-columns:1fr;padding:28px 22px}} @media (prefers-reduced-motion:reduce){:root[data-theme="learnndev"] .ps *{animation:none!important}:root[data-theme="learnndev"] .ps-q,:root[data-theme="learnndev"] .ps-ans,:root[data-theme="learnndev"] .ps-src{opacity:1}:root[data-theme="learnndev"] .ps-dots{display:none}} /* ---- block 19 kind-voice ---- */ @property --tv1{syntax:'';inherits:true;initial-value:#E59322} @property --tv2{syntax:'';inherits:true;initial-value:#6A58B0} @property --tv3{syntax:'';inherits:true;initial-value:#85CBA6} @property --tv4{syntax:'';inherits:true;initial-value:#E84A9E} :root[data-theme="learnndev"] em.ac18{background-image:linear-gradient(90deg,#6A58B0,#E84A9E);-webkit-background-clip:text;background-clip:text;color:transparent} :root[data-theme="learnndev"] em.ac19{background-image:linear-gradient(90deg,#E84A9E,#E59322);-webkit-background-clip:text;background-clip:text;color:transparent} /* ---------- A: two variations ---------- */ :root[data-theme="learnndev"] #kind .ck-head{max-width:820px;margin:0 auto 52px;text-align:center} :root[data-theme="learnndev"] #kind .ck-head h2{max-width:none} :root[data-theme="learnndev"] #kind .ck-head .lede{margin:18px auto 0;max-width:56ch} :root[data-theme="learnndev"] .ck-grid{display:grid;grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr);align-items:stretch;max-width:1040px;margin:0 auto} :root[data-theme="learnndev"] .ck-card{--c1:#A99BD6;--c2:#6A58B0;--tint:#F1EEFA;--wash:#F6F3FC;position:relative;display:flex;flex-direction:column;padding:30px 28px 26px;border-radius:28px;background:#fff;box-shadow:0 0 0 1.5px #ECE6DC,0 26px 50px -34px rgba(30,36,51,.28);cursor:pointer;outline:none;overflow:hidden;transition:box-shadow .35s,translate .35s,transform .35s} :root[data-theme="learnndev"] .ck-card.k-info{--c1:#5B7FC7;--c2:#3A5CA8;--tint:#EAF0FB;--wash:#F1F5FC} :root[data-theme="learnndev"] .ck-card>*{position:relative;z-index:1} :root[data-theme="learnndev"] .ck-card::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(160deg,var(--wash),#fff 70%);opacity:0;transition:opacity .4s;border-radius:inherit} :root[data-theme="learnndev"] .ck-card:hover::before,:root[data-theme="learnndev"] .ck-card.on::before{opacity:1} :root[data-theme="learnndev"] .ck-card:hover{transform:translateY(-4px)} :root[data-theme="learnndev"] .ck-card:focus-visible{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--c2)} :root[data-theme="learnndev"] .ck-card.on{box-shadow:0 0 0 1.5px transparent,0 34px 60px -30px color-mix(in srgb,var(--c2) 60%,transparent);animation:ckFloat 6s ease-in-out infinite} :root[data-theme="learnndev"] .ck-card.on::after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;padding:2.5px;background:conic-gradient(from var(--ang),var(--c2),var(--c1),#E84A9E,var(--c1),var(--c2));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:gcSpin 5s linear infinite;pointer-events:none} :root[data-theme="learnndev"] .ck-glow{position:absolute!important;z-index:0!important;top:-90px;right:-80px;width:230px;height:230px;border-radius:50%;background:radial-gradient(circle at 40% 40%,color-mix(in srgb,var(--c1) 55%,#fff),color-mix(in srgb,var(--c1) 20%,#fff) 65%,transparent 72%);opacity:.7;animation:ckBreathe 5s ease-in-out infinite} :root[data-theme="learnndev"] .ck-card.on .ck-glow{opacity:1} :root[data-theme="learnndev"] .ck-radio{position:absolute!important;top:22px;right:22px;width:24px;height:24px;border-radius:50%;border:2px solid #CFC8BC;background:#fff;display:grid;place-items:center;transition:border-color .3s} :root[data-theme="learnndev"] .ck-radio i{width:12px;height:12px;border-radius:50%;background:linear-gradient(135deg,var(--c1),var(--c2));transform:scale(0);transition:transform .35s cubic-bezier(.3,1.6,.5,1)} :root[data-theme="learnndev"] .ck-card.on .ck-radio{border-color:var(--c2);animation:ckRing 2s ease-out infinite} :root[data-theme="learnndev"] .ck-card.on .ck-radio i{transform:scale(1)} :root[data-theme="learnndev"] .ck-tag{font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--c2)} :root[data-theme="learnndev"] .ck-card h3{margin:10px 0 0;font:800 clamp(26px,2.5vw,32px)/1.1 var(--serif);letter-spacing:-.025em;color:#1E2433} :root[data-theme="learnndev"] .ck-d{margin:12px 0 0;max-width:34ch;color:#565C6B;font-size:15.5px;line-height:1.6} :root[data-theme="learnndev"] .ck-list{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:11px} :root[data-theme="learnndev"] .ck-list li{display:flex;align-items:center;gap:11px;color:#2A3142;font-size:14.5px;font-weight:600} :root[data-theme="learnndev"] .ck-list li span{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:#DDF3E8;color:#1E8F6A} :root[data-theme="learnndev"] .ck-list li svg{width:12px;height:12px} :root[data-theme="learnndev"] .ck-card.on .ck-list li span{animation:ckTick .5s cubic-bezier(.3,1.7,.5,1) both} :root[data-theme="learnndev"] .ck-card.on .ck-list li:nth-child(1) span{animation-delay:.1s} :root[data-theme="learnndev"] .ck-card.on .ck-list li:nth-child(2) span{animation-delay:.3s} :root[data-theme="learnndev"] .ck-card.on .ck-list li:nth-child(3) span{animation-delay:.5s} :root[data-theme="learnndev"] .ck-chat{margin-top:auto;padding:16px;border-radius:20px;background:var(--tint);display:grid;gap:12px;transition:background .4s} :root[data-theme="learnndev"] .ck-list+.ck-chat{margin-top:24px} :root[data-theme="learnndev"] .ck-chat{position:relative} :root[data-theme="learnndev"] .ck-q{justify-self:end;max-width:92%;padding:11px 15px;border-radius:16px 16px 4px 16px;background:linear-gradient(135deg,var(--c1),var(--c2));color:#fff;font-weight:600;font-size:14px;line-height:1.4} :root[data-theme="learnndev"] .ck-bot{position:relative} :root[data-theme="learnndev"] .ck-dots{position:absolute;left:0;top:0;display:none;gap:5px;padding:12px 15px;border-radius:15px 15px 15px 4px;background:#fff} :root[data-theme="learnndev"] .ck-dots b{width:7px;height:7px;border-radius:50%;background:var(--c2);animation:gcDot 1s ease-in-out infinite} :root[data-theme="learnndev"] .ck-dots b:nth-child(2){animation-delay:.15s}:root[data-theme="learnndev"] .ck-dots b:nth-child(3){animation-delay:.3s} :root[data-theme="learnndev"] .ck-ans{display:grid;gap:9px;justify-items:start;padding:13px 15px;border-radius:15px 15px 15px 4px;background:#fff;color:#2A3142;font-size:14px;line-height:1.5} :root[data-theme="learnndev"] .ck-src{display:inline-flex;align-items:center;gap:7px;padding:4px 11px;border-radius:999px;border:1.5px solid #5FC4A0;color:#1E8F6A;background:#E8F8F1;font:700 12px var(--font);font-style:normal} :root[data-theme="learnndev"] .ck-src svg{width:13px;height:13px} :root[data-theme="learnndev"] .ck-card:hover .ck-q{animation:ckPop .4s .25s cubic-bezier(.2,.8,.2,1) both} :root[data-theme="learnndev"] .ck-card:hover .ck-dots{display:flex;animation:ckDots 1.1s .85s both} :root[data-theme="learnndev"] .ck-card:hover .ck-ans{animation:ckPop .45s 1.95s cubic-bezier(.2,.8,.2,1) both} :root[data-theme="learnndev"] .ck-card:hover .ck-src{animation:ckPop .4s 2.45s cubic-bezier(.2,1.4,.5,1) both} :root[data-theme="learnndev"] .ck-best{margin:18px 0 0;font-size:14px;color:#565C6B;line-height:1.5} :root[data-theme="learnndev"] .ck-best b{color:#1E2433} :root[data-theme="learnndev"] .ck-or{align-self:center;justify-self:center;position:relative;z-index:3;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#6A58B0;font:800 12px var(--font);letter-spacing:.08em;box-shadow:0 0 0 1.5px #E4DDF3,0 12px 24px -10px rgba(106,88,176,.45);animation:ckRingP 2.8s ease-out infinite} @keyframes ckFloat{0%,100%{translate:0 0}50%{translate:0 -6px}} @keyframes ckBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}} @keyframes ckRing{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--c2) 45%,transparent)}70%,100%{box-shadow:0 0 0 10px transparent}} @keyframes ckRingP{0%{box-shadow:0 0 0 1.5px #E4DDF3,0 0 0 0 rgba(106,88,176,.35)}70%,100%{box-shadow:0 0 0 1.5px #E4DDF3,0 0 0 14px rgba(106,88,176,0)}} @keyframes ckTick{from{transform:scale(0) rotate(-40deg);opacity:0}to{transform:none;opacity:1}} @keyframes ckPop{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}} @keyframes ckDots{0%{opacity:0}15%,80%{opacity:1}100%{opacity:0}} @media (max-width:860px){:root[data-theme="learnndev"] .ck-grid{grid-template-columns:1fr;gap:0}:root[data-theme="learnndev"] .ck-or{margin:12px 0}} /* ---------- B: text or voice ---------- */ :root[data-theme="learnndev"] .tv{--tvs:9s} :root[data-theme="learnndev"] .tv-top{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,72px);align-items:center} :root[data-theme="learnndev"] .tv-stage{position:relative;width:min(100%,440px);aspect-ratio:1;margin-inline:auto;border-radius:44px;background:radial-gradient(circle at 50% 46%,color-mix(in srgb,var(--tv2) 22%,#fff),color-mix(in srgb,var(--tv2) 8%,#fff) 62%,#fff);box-shadow:0 0 0 1.5px #ECE6DC,0 40px 70px -40px color-mix(in srgb,var(--tv2) 60%,transparent);display:grid;place-items:center;overflow:hidden;transition:--tv2 .8s} :root[data-theme="learnndev"] .tv-orb{--tv1:#E59322;--tv2:#6A58B0;--tv3:#85CBA6;--tv4:#E84A9E;position:relative;width:58%;aspect-ratio:1;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 50% 50%,var(--tv2) 0 38%,var(--tv1) 100%);box-shadow:0 0 70px 6px color-mix(in srgb,var(--tv1) 45%,transparent),inset 0 0 34px 4px color-mix(in srgb,var(--tv1) 85%,#fff);transition:--tv1 .9s,--tv2 .9s,--tv3 .9s,--tv4 .9s,box-shadow .9s;animation:tvBreathe 5s ease-in-out infinite;isolation:isolate} :root[data-theme="learnndev"] .tv-orb i{position:absolute;border-radius:50%;filter:blur(16px);mix-blend-mode:normal;animation-duration:var(--tvs);animation-iteration-count:infinite;animation-timing-function:ease-in-out;transition:--tv3 .9s} :root[data-theme="learnndev"] .tv-orb .o1{width:62%;height:62%;left:8%;top:6%;background:var(--tv2);animation-name:tvD1} :root[data-theme="learnndev"] .tv-orb .o2{width:34%;height:34%;left:22%;top:16%;background:var(--tv3);opacity:.85;animation-name:tvD2} :root[data-theme="learnndev"] .tv-orb .o3{width:40%;height:40%;left:44%;top:48%;background:var(--tv4);opacity:.8;animation-name:tvD3} :root[data-theme="learnndev"] .tv-orb .o4{width:30%;height:30%;left:56%;top:12%;background:#6A58B0;opacity:.8;animation-name:tvD2;animation-direction:reverse} :root[data-theme="learnndev"] .tv-orb::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 34% 26%,rgba(255,255,255,.5),transparent 38%);z-index:2;pointer-events:none} :root[data-theme="learnndev"] .tv-ring{position:absolute;left:50%;top:50%;width:58%;aspect-ratio:1;border-radius:50%;border:2px solid var(--tv2);translate:-50% -50%;opacity:0;pointer-events:none} :root[data-theme="learnndev"] .tv-arc{position:absolute;left:50%;top:50%;width:70%;aspect-ratio:1;border-radius:50%;translate:-50% -50%;padding:3px;background:conic-gradient(from var(--ang),transparent 0 55%,var(--tv2),var(--tv4),transparent);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .4s;pointer-events:none} :root[data-theme="learnndev"] .tv-status{position:absolute;left:50%;bottom:20px;translate:-50% 0;display:inline-flex;align-items:center;gap:10px;padding:8px 16px;border-radius:999px;background:#fff;box-shadow:0 0 0 1.5px #ECE6DC,0 12px 24px -14px rgba(30,36,51,.35);font:700 13px var(--font);color:#2A3142;white-space:nowrap} :root[data-theme="learnndev"] .tv-bars{display:inline-flex;align-items:center;gap:3px;height:16px} :root[data-theme="learnndev"] .tv-bars b{width:3px;height:5px;border-radius:3px;background:var(--tv2);transition:background .5s} :root[data-theme="learnndev"] .tv[data-state="idle"]{--s-a:#6A58B0} /* states */ :root[data-theme="learnndev"] .tv[data-state="listening"] .tv-orb{--tv1:#5B7FC7;--tv2:#3A5CA8;--tv3:#85CBA6;--tv4:#A99BD6;--tvs:5s} :root[data-theme="learnndev"] .tv[data-state="thinking"] .tv-orb{--tv1:#A99BD6;--tv2:#6A58B0;--tv3:#E84A9E;--tv4:#5B7FC7;--tvs:2.2s} :root[data-theme="learnndev"] .tv[data-state="speaking"] .tv-orb{--tv1:#E59322;--tv2:#C0397F;--tv3:#D4C430;--tv4:#E84A9E;--tvs:3.4s} :root[data-theme="learnndev"] .tv[data-state="listening"] .tv-stage{--tv2:#5B7FC7} :root[data-theme="learnndev"] .tv[data-state="thinking"] .tv-stage{--tv2:#A99BD6} :root[data-theme="learnndev"] .tv[data-state="speaking"] .tv-stage{--tv2:#E59322} :root[data-theme="learnndev"] .tv[data-state="listening"] .tv-ring{--tv2:#3A5CA8;animation:tvWave 2.2s ease-out infinite} :root[data-theme="learnndev"] .tv[data-state="listening"] .tv-ring.r2{animation-delay:1.1s} :root[data-theme="learnndev"] .tv[data-state="listening"] .tv-orb{animation:tvListen 1.4s ease-in-out infinite} :root[data-theme="learnndev"] .tv[data-state="thinking"] .tv-arc{opacity:1;--tv2:#6A58B0;--tv4:#E84A9E;animation:gcSpin 1.4s linear infinite} :root[data-theme="learnndev"] .tv[data-state="thinking"] .tv-orb{animation:tvBreathe 2s ease-in-out infinite} :root[data-theme="learnndev"] .tv[data-state="speaking"] .tv-ring{--tv2:#E59322;animation:tvWave 1.8s ease-out infinite} :root[data-theme="learnndev"] .tv[data-state="speaking"] .tv-ring.r2{animation-delay:.9s} :root[data-theme="learnndev"] .tv[data-state="speaking"] .tv-orb{animation:tvSpeak 1s ease-in-out infinite} :root[data-theme="learnndev"] .tv[data-state="listening"] .tv-bars b,:root[data-theme="learnndev"] .tv[data-state="speaking"] .tv-bars b{animation:tvBar .9s ease-in-out infinite} :root[data-theme="learnndev"] .tv[data-state="listening"] .tv-bars b{background:#3A5CA8} :root[data-theme="learnndev"] .tv[data-state="speaking"] .tv-bars b{background:#E59322} :root[data-theme="learnndev"] .tv[data-state="thinking"] .tv-bars b{background:#A99BD6;animation:gcDot 1s ease-in-out infinite} :root[data-theme="learnndev"] .tv-bars b:nth-child(2){animation-delay:.12s!important}:root[data-theme="learnndev"] .tv-bars b:nth-child(3){animation-delay:.24s!important}:root[data-theme="learnndev"] .tv-bars b:nth-child(4){animation-delay:.36s!important}:root[data-theme="learnndev"] .tv-bars b:nth-child(5){animation-delay:.48s!important} /* right column */ :root[data-theme="learnndev"] #textvoice .tv-copy .eyebrow{color:#3A5CA8} :root[data-theme="learnndev"] .tv-copy h2{margin:0;font:800 clamp(32px,4.2vw,52px)/1.1 var(--serif);letter-spacing:-.03em} :root[data-theme="learnndev"] .tv-copy>p.tv-p{margin:20px 0 0;max-width:52ch;color:#565C6B;font-size:clamp(16px,1.3vw,18px);line-height:1.65} :root[data-theme="learnndev"] .tv-states{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px} :root[data-theme="learnndev"] .tv-st{position:relative;display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:999px;border:0;background:#fff;box-shadow:0 0 0 1.5px #E7E1D6;color:#2A3142;font:700 14px var(--font);cursor:pointer;overflow:hidden;transition:box-shadow .3s,color .3s,background .3s,transform .3s} :root[data-theme="learnndev"] .tv-st::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#6A58B0,#3A5CA8);opacity:0;transition:opacity .35s} :root[data-theme="learnndev"] .tv-st span{position:relative} :root[data-theme="learnndev"] .tv-st:hover{background:#F1EEFA;box-shadow:0 0 0 1.5px #CFC6EC;transform:translateY(-2px)} :root[data-theme="learnndev"] .tv-st.on{color:#fff;box-shadow:0 12px 22px -12px rgba(58,92,168,.7)} :root[data-theme="learnndev"] .tv-st.on::before{opacity:1} :root[data-theme="learnndev"] .tv-st.on:hover{background:#fff} :root[data-theme="learnndev"] .tv-st i{position:relative;width:8px;height:8px;border-radius:50%;background:#CFC8BC;transition:background .3s} :root[data-theme="learnndev"] .tv-st.on i{background:#fff;animation:gcPing2 1.6s ease-out infinite} :root[data-theme="learnndev"] .tv-feats{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px} :root[data-theme="learnndev"] .tv-f{display:inline-flex;align-items:center;gap:9px;padding:9px 16px 9px 11px;border-radius:999px;background:#fff;box-shadow:0 0 0 1.5px #ECE6DC;color:#3F4657;font-size:13.5px;font-weight:600;transition:background .35s,box-shadow .35s,transform .35s} :root[data-theme="learnndev"] .tv-f span{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--fc,#EAF0FB);color:var(--fd,#3A5CA8)} :root[data-theme="learnndev"] .tv-f svg{width:13px;height:13px} :root[data-theme="learnndev"] .tv-f:hover{background:var(--fc,#EAF0FB);box-shadow:0 0 0 1.5px var(--fd,#3A5CA8);transform:translateY(-2px)} /* voices */ :root[data-theme="learnndev"] .tv-voices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:clamp(36px,5vw,60px)} :root[data-theme="learnndev"] .tv-v{--g1:#5B7FC7;--g2:#85CBA6;--vt:#EAF0FB;position:relative;padding:22px 22px 20px;border-radius:22px;background:#fff;border:0;text-align:left;font:inherit;cursor:pointer;box-shadow:0 0 0 1.5px #ECE6DC,0 20px 36px -28px rgba(30,36,51,.3);overflow:hidden;transition:box-shadow .35s,transform .35s} :root[data-theme="learnndev"] .tv-v.a2{--g1:#E84A9E;--g2:#A99BD6;--vt:#FDEEF6} :root[data-theme="learnndev"] .tv-v.a3{--g1:#85CBA6;--g2:#E59322;--vt:#EAF7F0} :root[data-theme="learnndev"] .tv-v.a4{--g1:#6A58B0;--g2:#E84A9E;--vt:#F1EEFA} :root[data-theme="learnndev"] .tv-v::before{content:"";position:absolute;inset:0;background:var(--vt);opacity:0;transition:opacity .4s} :root[data-theme="learnndev"] .tv-v>*{position:relative} :root[data-theme="learnndev"] .tv-v:hover{transform:translateY(-4px);box-shadow:0 0 0 1.5px var(--g1),0 24px 40px -26px color-mix(in srgb,var(--g1) 70%,transparent)} :root[data-theme="learnndev"] .tv-v:hover::before,:root[data-theme="learnndev"] .tv-v.on::before{opacity:1} :root[data-theme="learnndev"] .tv-v.on{box-shadow:0 0 0 2px var(--g1),0 24px 40px -26px color-mix(in srgb,var(--g1) 70%,transparent)} :root[data-theme="learnndev"] .tv-vc{display:block;width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--g1),var(--g2));box-shadow:0 8px 16px -8px var(--g1)} :root[data-theme="learnndev"] .tv-v.on .tv-vc{animation:ckRing 1.4s ease-out infinite} :root[data-theme="learnndev"] .tv-v b{display:block;margin-top:16px;font:800 18px var(--serif);color:#1E2433;letter-spacing:-.01em} :root[data-theme="learnndev"] .tv-v small{display:block;margin-top:4px;font-size:13px;color:#565C6B;line-height:1.4} :root[data-theme="learnndev"] .tv-vb{position:absolute!important;right:18px;top:22px;display:inline-flex;align-items:center;gap:3px;height:18px;opacity:0;transition:opacity .3s} :root[data-theme="learnndev"] .tv-vb i{width:3px;height:5px;border-radius:3px;background:var(--g1)} :root[data-theme="learnndev"] .tv-v.on .tv-vb{opacity:1} :root[data-theme="learnndev"] .tv-v.on .tv-vb i{animation:tvBar .8s ease-in-out infinite} :root[data-theme="learnndev"] .tv-vb i:nth-child(2){animation-delay:.1s!important}:root[data-theme="learnndev"] .tv-vb i:nth-child(3){animation-delay:.2s!important}:root[data-theme="learnndev"] .tv-vb i:nth-child(4){animation-delay:.3s!important} @keyframes tvBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}} @keyframes tvListen{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}} @keyframes tvSpeak{0%,100%{transform:scale(1)}20%{transform:scale(1.07)}45%{transform:scale(.99)}70%{transform:scale(1.05)}} @keyframes tvWave{0%{opacity:.55;transform:scale(1)}100%{opacity:0;transform:scale(1.55)}} @keyframes tvBar{0%,100%{height:4px}50%{height:16px}} @keyframes tvD1{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(22%,14%) scale(1.15)}66%{transform:translate(-8%,22%) scale(.9)}} @keyframes tvD2{0%,100%{transform:translate(0,0)}50%{transform:translate(90%,70%)}} @keyframes tvD3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-70%,-40%) scale(1.25)}} @media (max-width:900px){:root[data-theme="learnndev"] .tv-top{grid-template-columns:1fr}:root[data-theme="learnndev"] .tv-voices{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:520px){:root[data-theme="learnndev"] .tv-voices{gap:12px}:root[data-theme="learnndev"] .tv-v{padding:18px}} /* ---- block 20 shape-css ---- */ @property --sa1{syntax:'';inherits:true;initial-value:#5B7FC7} @property --sa2{syntax:'';inherits:true;initial-value:#3A5CA8} :root[data-theme="learnndev"] em.ac20{background-image:linear-gradient(90deg,#2F9E6E,#3A5CA8);-webkit-background-clip:text;background-clip:text;color:transparent} :root[data-theme="learnndev"] .sx{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center} :root[data-theme="learnndev"] #shape .eyebrow{color:#2F9E6E;display:flex;align-items:center;gap:12px} :root[data-theme="learnndev"] #shape .eyebrow::before{content:"";width:34px;height:2px;border-radius:2px;background:linear-gradient(90deg,#2F9E6E,#3A5CA8)} :root[data-theme="learnndev"] .sx-copy h2{margin:0;font:800 clamp(32px,4.2vw,52px)/1.1 var(--serif);letter-spacing:-.03em} :root[data-theme="learnndev"] .sx-copy>.sx-p{margin:20px 0 0;max-width:50ch;color:#565C6B;font-size:clamp(16px,1.3vw,18px);line-height:1.65} :root[data-theme="learnndev"] .sx-list{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:8px} :root[data-theme="learnndev"] .sx-it{position:relative;display:flex;align-items:center;gap:14px;width:100%;padding:12px 16px;border:0;border-radius:16px;background:transparent;text-align:left;font:600 15.5px var(--font);color:#3F4657;cursor:pointer;overflow:hidden;transition:background .35s,color .35s,box-shadow .35s,transform .35s} :root[data-theme="learnndev"] .sx-it .tk{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#E7E2D8;color:#fff;transition:background .35s,transform .35s} :root[data-theme="learnndev"] .sx-it .tk svg{width:13px;height:13px} :root[data-theme="learnndev"] .sx-it:hover{background:#F1F5FC} :root[data-theme="learnndev"] .sx-it.on{background:#fff;color:#1E2433;box-shadow:0 0 0 1.5px #D8E3F6,0 18px 30px -22px rgba(58,92,168,.6);transform:translateX(6px)} :root[data-theme="learnndev"] .sx-it.on .tk{background:linear-gradient(135deg,#2F9E6E,#3A5CA8);animation:ckTick .5s cubic-bezier(.3,1.7,.5,1) both} :root[data-theme="learnndev"] .sx-prog{position:absolute;left:0;bottom:0;height:3px;width:0;background:linear-gradient(90deg,#2F9E6E,#3A5CA8);border-radius:3px} :root[data-theme="learnndev"] .sx-it.on .sx-prog{animation:sxProg 3.4s linear forwards} :root[data-theme="learnndev"] .sx.paused .sx-it.on .sx-prog{animation:none;width:100%} /* preview */ :root[data-theme="learnndev"] .sx-prev{--sa1:#5B7FC7;--sa2:#3A5CA8;position:relative;padding:20px;border-radius:30px;background:#fff;box-shadow:0 0 0 1.5px #ECE6DC,0 40px 70px -40px rgba(58,92,168,.55);transition:--sa1 .7s,--sa2 .7s,transform .5s,box-shadow .5s} :root[data-theme="learnndev"] .sx[data-step="2"] .sx-prev{--sa1:#E84A9E;--sa2:#C0397F} :root[data-theme="learnndev"] .sx[data-step="3"] .sx-prev{--sa1:#85CBA6;--sa2:#2F9E6E} :root[data-theme="learnndev"] .sx[data-step="4"] .sx-prev{--sa1:#A99BD6;--sa2:#6A58B0} :root[data-theme="learnndev"] .sx[data-step="3"] .sx-prev{transform:translateY(-6px);box-shadow:0 0 0 1.5px #CBE8DA,0 50px 80px -40px rgba(47,158,110,.6)} :root[data-theme="learnndev"] .sx-bar{display:flex;align-items:center;justify-content:space-between;padding-bottom:14px;border-bottom:1px solid #EEE9E0;font-size:13.5px;font-weight:600;color:#565C6B} :root[data-theme="learnndev"] .sx-bar span{display:inline-flex;align-items:center;gap:8px} :root[data-theme="learnndev"] .sx-bar svg{width:14px;height:14px;color:var(--sa2);transition:color .7s} :root[data-theme="learnndev"] .sx-live{background:none;-webkit-text-fill-color:#1E8F6A;font-family:var(--font);font-style:normal;font-size:12.5px;font-weight:700;color:#1E8F6A} :root[data-theme="learnndev"] .sx-live i{display:inline-block;width:8px;height:8px;margin-right:7px;border-radius:50%;background:#2F9E6E;animation:gcPing2 1.6s ease-out infinite} :root[data-theme="learnndev"] .sx[data-step="3"] .sx-live{background:#E0F6EC;padding:4px 11px;border-radius:99px} :root[data-theme="learnndev"] .sx-hello{margin:20px 0 0;padding:12px 14px;border-radius:16px;transition:background .5s,box-shadow .5s} :root[data-theme="learnndev"] .sx[data-step="0"] .sx-hello{background:#EAF0FB;box-shadow:0 0 0 1.5px #C9D8F2} :root[data-theme="learnndev"] .sx-hello b{display:block;font:800 20px var(--serif);letter-spacing:-.02em;color:#1E2433} :root[data-theme="learnndev"] .sx-hello small{display:block;margin-top:4px;font-size:13px;color:#565C6B} :root[data-theme="learnndev"] .sx-name{display:inline-block;transition:opacity .3s,transform .3s} :root[data-theme="learnndev"] .sx-msgs{display:grid;gap:10px;margin-top:16px} :root[data-theme="learnndev"] .sx-m{max-width:88%;padding:12px 15px;border-radius:16px 16px 16px 4px;background:#F1EEE7;color:#2A3142;font-size:14px;font-weight:600;line-height:1.45} :root[data-theme="learnndev"] .sx-m.u{justify-self:end;border-radius:16px 16px 4px 16px;background:linear-gradient(135deg,var(--sa1),var(--sa2));color:#fff} :root[data-theme="learnndev"] .sx-m.b2{background:#F1EEE7} :root[data-theme="learnndev"] .sx-prev.go .sx-m{animation:ckPop .45s both} :root[data-theme="learnndev"] .sx-prev.go .sx-m:nth-child(2){animation-delay:.7s} :root[data-theme="learnndev"] .sx-prev.go .sx-m:nth-child(3){animation-delay:1.6s} :root[data-theme="learnndev"] .sx-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;min-height:34px} :root[data-theme="learnndev"] .sx-chips span{padding:7px 13px;border-radius:99px;border:1.5px solid color-mix(in srgb,var(--sa1) 55%,#fff);background:color-mix(in srgb,var(--sa1) 14%,#fff);color:var(--sa2);font-size:12.5px;font-weight:700;opacity:.0;transform:translateY(8px) scale(.94);transition:opacity .4s,transform .4s,color .7s,background .7s,border-color .7s} :root[data-theme="learnndev"] .sx[data-step="1"] .sx-chips span{opacity:1;transform:none} :root[data-theme="learnndev"] .sx[data-step="1"] .sx-chips span:nth-child(2){transition-delay:.12s} :root[data-theme="learnndev"] .sx[data-step="1"] .sx-chips span:nth-child(3){transition-delay:.24s} :root[data-theme="learnndev"] .sx[data-step="3"] .sx-chips span,:root[data-theme="learnndev"] .sx[data-step="4"] .sx-chips span{opacity:.55;transform:none} :root[data-theme="learnndev"] .sx-sw{display:flex;gap:9px;margin-top:12px;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s} :root[data-theme="learnndev"] .sx[data-step="2"] .sx-sw{opacity:1;transform:none} :root[data-theme="learnndev"] .sx-sw i{width:22px;height:22px;border-radius:50%;box-shadow:0 0 0 2px #fff,0 0 0 3px #E4DED3} :root[data-theme="learnndev"] .sx-sw i:nth-child(1){background:linear-gradient(135deg,#5B7FC7,#3A5CA8)} :root[data-theme="learnndev"] .sx-sw i:nth-child(2){background:linear-gradient(135deg,#E84A9E,#C0397F);box-shadow:0 0 0 2px #fff,0 0 0 3.5px #C0397F;animation:ckBreathe 1.6s ease-in-out infinite} :root[data-theme="learnndev"] .sx-sw i:nth-child(3){background:linear-gradient(135deg,#85CBA6,#2F9E6E)} :root[data-theme="learnndev"] .sx-sw i:nth-child(4){background:linear-gradient(135deg,#A99BD6,#6A58B0)} :root[data-theme="learnndev"] .sx-in{display:flex;align-items:center;gap:10px;margin-top:14px;padding:11px 14px;border-radius:16px;box-shadow:0 0 0 1.5px #E7E1D6;font-size:13.5px;color:#8A8F9B;transition:box-shadow .5s} :root[data-theme="learnndev"] .sx-in em{font:500 13.5px var(--font);font-style:normal;flex:1;background:none;-webkit-text-fill-color:#8A8F9B;color:#8A8F9B} :root[data-theme="learnndev"] .sx-in svg{width:16px;height:16px;flex:none} :root[data-theme="learnndev"] .sx-in .op{display:inline-flex;gap:8px;color:var(--sa2);max-width:0;opacity:0;overflow:hidden;transition:max-width .5s,opacity .5s,color .7s} :root[data-theme="learnndev"] .sx[data-step="4"] .sx-in{box-shadow:0 0 0 1.5px var(--sa1)} :root[data-theme="learnndev"] .sx[data-step="4"] .sx-in .op{max-width:70px;opacity:1} :root[data-theme="learnndev"] .sx-in .send{color:var(--sa2);transition:color .7s} @keyframes sxProg{to{width:100%}} @media (max-width:900px){:root[data-theme="learnndev"] .sx{grid-template-columns:1fr}:root[data-theme="learnndev"] .sx-copy{order:-1}} /* ---- block 21 owners-css ---- */ :root[data-theme="learnndev"] em.ac21{background-image:linear-gradient(90deg,#C0397F,#E59322);-webkit-background-clip:text;background-clip:text;color:transparent} :root[data-theme="learnndev"] #owners .ow-head{text-align:left;max-width:none;margin:0 0 44px} :root[data-theme="learnndev"] #owners .ow-head .eyebrow{color:#6A58B0} :root[data-theme="learnndev"] #owners .ow-head h2{max-width:20em} :root[data-theme="learnndev"] #owners .ow-head .lede{margin:18px 0 0;max-width:54ch;text-align:left} :root[data-theme="learnndev"] .ow-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px} :root[data-theme="learnndev"] .ow-c{--c1:#5B7FC7;--c2:#3A5CA8;--t:#EAF0FB;position:relative;display:flex;flex-direction:column;padding:26px 26px 24px;border-radius:26px;background:#fff;box-shadow:0 0 0 1.5px #ECE6DC,0 24px 44px -34px rgba(30,36,51,.3);overflow:hidden;transition:transform .4s,box-shadow .4s} :root[data-theme="learnndev"] .ow-c.w2{--c1:#E84A9E;--c2:#C0397F;--t:#FDEEF6} :root[data-theme="learnndev"] .ow-c.w3{--c1:#A99BD6;--c2:#6A58B0;--t:#F1EEFA} :root[data-theme="learnndev"] .ow-c.w4{--c1:#E59322;--c2:#B8710F;--t:#FCF1DE} :root[data-theme="learnndev"] .ow-c.w5{--c1:#85CBA6;--c2:#2F9E6E;--t:#EAF7F0} :root[data-theme="learnndev"] .ow-c.w6{--c1:#94D63C;--c2:#5E9A12;--t:#F1F8E4} :root[data-theme="learnndev"] .ow-c::before{content:"";position:absolute;inset:0;background:var(--t);opacity:0;transition:opacity .4s} :root[data-theme="learnndev"] .ow-c>*{position:relative} :root[data-theme="learnndev"] .ow-c:hover{transform:translateY(-5px);box-shadow:0 0 0 1.5px var(--c1),0 30px 48px -30px color-mix(in srgb,var(--c2) 60%,transparent)} :root[data-theme="learnndev"] .ow-c:hover::before{opacity:1} :root[data-theme="learnndev"] .ow-top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:46px} :root[data-theme="learnndev"] .ow-ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,var(--c1),var(--c2));color:#fff;box-shadow:0 12px 20px -12px var(--c2)} :root[data-theme="learnndev"] .ow-ic svg{width:22px;height:22px} :root[data-theme="learnndev"] .ow-c h3{margin:18px 0 0;font:800 20px/1.2 var(--serif);letter-spacing:-.015em;color:#1E2433} :root[data-theme="learnndev"] .ow-c p{margin:10px 0 0;color:#565C6B;font-size:14.5px;line-height:1.6} /* micro visuals */ :root[data-theme="learnndev"] .mv{display:flex;align-items:flex-end;gap:4px;height:34px} :root[data-theme="learnndev"] .mv b{width:7px;border-radius:3px;background:linear-gradient(to top,var(--c2),var(--c1));animation:owBar 2.4s ease-in-out infinite} :root[data-theme="learnndev"] .mv b:nth-child(1){height:40%}:root[data-theme="learnndev"] .mv b:nth-child(2){height:75%;animation-delay:.2s}:root[data-theme="learnndev"] .mv b:nth-child(3){height:55%;animation-delay:.4s}:root[data-theme="learnndev"] .mv b:nth-child(4){height:95%;animation-delay:.6s}:root[data-theme="learnndev"] .mv b:nth-child(5){height:65%;animation-delay:.8s} :root[data-theme="learnndev"] .mv.meter{display:block;width:96px;height:auto} :root[data-theme="learnndev"] .mv.meter .tr{height:9px;border-radius:9px;background:color-mix(in srgb,var(--c1) 25%,#fff);overflow:hidden} :root[data-theme="learnndev"] .mv.meter .tr i{display:block;height:100%;width:30%;border-radius:9px;background:linear-gradient(90deg,var(--c1),var(--c2));animation:owFill 4.8s ease-in-out infinite} :root[data-theme="learnndev"] .mv.meter small{display:block;margin-top:5px;font:700 11px var(--font);color:var(--c2);text-align:right;letter-spacing:.02em} :root[data-theme="learnndev"] .mv.tg{display:flex;flex-direction:column;gap:6px;align-items:flex-end;height:auto} :root[data-theme="learnndev"] .mv.tg span{position:relative;width:34px;height:18px;border-radius:99px;background:color-mix(in srgb,var(--c1) 30%,#fff)} :root[data-theme="learnndev"] .mv.tg span::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(30,36,51,.25);animation:owTg 3.6s ease-in-out infinite} :root[data-theme="learnndev"] .mv.tg span:nth-child(2)::after{animation-delay:1.2s} :root[data-theme="learnndev"] .mv.key{height:auto;gap:3px;align-items:center;font:800 15px var(--font);color:var(--c2);letter-spacing:.12em} :root[data-theme="learnndev"] .mv.key i{width:6px;height:6px;border-radius:50%;background:var(--c2);animation:gcDot 1.4s ease-in-out infinite} :root[data-theme="learnndev"] .mv.key i:nth-child(2){animation-delay:.12s}:root[data-theme="learnndev"] .mv.key i:nth-child(3){animation-delay:.24s}:root[data-theme="learnndev"] .mv.key i:nth-child(4){animation-delay:.36s}:root[data-theme="learnndev"] .mv.key i:nth-child(5){animation-delay:.48s} :root[data-theme="learnndev"] .mv.sw{height:auto} :root[data-theme="learnndev"] .mv.sw span{position:relative;width:52px;height:28px;border-radius:99px;background:#D9E7DF;animation:owSw 4s ease-in-out infinite} :root[data-theme="learnndev"] .mv.sw span::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(30,36,51,.3);animation:owKnob 4s ease-in-out infinite} :root[data-theme="learnndev"] .mv.st{height:auto;gap:6px;align-items:center} :root[data-theme="learnndev"] .mv.st i{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--c1) 30%,#fff);color:#fff;font:800 11px var(--font);font-style:normal;animation:owStep 4s ease-in-out infinite} :root[data-theme="learnndev"] .mv.st i:nth-child(2){animation-delay:.5s}:root[data-theme="learnndev"] .mv.st i:nth-child(3){animation-delay:1s}:root[data-theme="learnndev"] .mv.st i:nth-child(4){animation-delay:1.5s} :root[data-theme="learnndev"] .ow-foot{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-top:34px} :root[data-theme="learnndev"] .ow-foot p{margin:0;flex:1 1 360px;color:#565C6B;font-size:15px;line-height:1.6} :root[data-theme="learnndev"] .ow-btn{position:relative;display:inline-flex;align-items:center;gap:10px;padding:13px 24px;border-radius:99px;background:#fff;color:#1E2433;font:700 15px var(--font);text-decoration:none;box-shadow:0 0 0 1.5px #D9D2C5;transition:background .35s,box-shadow .35s,transform .35s} :root[data-theme="learnndev"] .ow-btn svg{width:18px;height:18px;transition:transform .35s} :root[data-theme="learnndev"] .ow-btn:hover{background:#F1EEFA;box-shadow:0 0 0 1.5px #A99BD6;transform:translateY(-2px)} :root[data-theme="learnndev"] .ow-btn:hover svg{transform:translateX(4px)} @keyframes owBar{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.55)}} :root[data-theme="learnndev"] .mv b{transform-origin:bottom} @keyframes owFill{0%{width:12%}70%,100%{width:96%}} @keyframes owTg{0%,35%{left:2px}50%,85%{left:18px}100%{left:2px}} @keyframes owSw{0%,40%{background:#CBE8DA}50%,90%{background:#C9CFD8}100%{background:#CBE8DA}} @keyframes owKnob{0%,40%{left:27px}50%,90%{left:3px}100%{left:27px}} @keyframes owStep{0%,15%{background:color-mix(in srgb,var(--c1) 30%,#fff);transform:scale(1)}30%,100%{background:linear-gradient(135deg,var(--c1),var(--c2));transform:scale(1)}22%{transform:scale(1.25)}} @media (max-width:980px){:root[data-theme="learnndev"] .ow-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:620px){:root[data-theme="learnndev"] .ow-grid{grid-template-columns:1fr}} /* ---- block 22 pricing-head ---- */ :root[data-theme="learnndev"] em.ac22{background-image:linear-gradient(90deg,#6A58B0,#E84A9E);-webkit-background-clip:text;background-clip:text;color:transparent} :root[data-theme="learnndev"] #pricing .pr-head{text-align:left;max-width:none;margin:0 0 40px} :root[data-theme="learnndev"] #pricing .pr-head .eyebrow{color:#6A58B0} :root[data-theme="learnndev"] #pricing .pr-head h2{max-width:15em}:root[data-theme="learnndev"] #pricing .pr-head h2 em{display:inline} :root[data-theme="learnndev"] #pricing .pr-head .lede{margin:18px 0 0;max-width:46ch;text-align:left} :root[data-theme="learnndev"] .pr-note{display:flex;align-items:center;gap:14px;margin:30px 0 0;padding:14px 20px 14px 14px;max-width:760px;border-radius:20px;background:#fff;box-shadow:0 0 0 1.5px #E4DDF3,0 22px 38px -30px rgba(106,88,176,.5);color:#3F4657;font-size:15px;line-height:1.5;transition:background .4s,box-shadow .4s} :root[data-theme="learnndev"] .pr-note:hover{background:#F6F3FC;box-shadow:0 0 0 1.5px #A99BD6} :root[data-theme="learnndev"] .pr-coin{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#6A58B0,#E84A9E);color:#fff;animation:ckRing 2.4s ease-out infinite} :root[data-theme="learnndev"] .pr-coin svg{width:18px;height:18px} /* ---- block 23 hero-visual ---- */ :root[data-theme="learnndev"] #heroStage{min-height:600px;align-content:start;padding-top:6px} :root[data-theme="learnndev"] #heroStage .orb-wrap{filter:none;aspect-ratio:auto;width:min(100%,400px)} :root[data-theme="learnndev"] .hs{position:relative;padding:22px;border-radius:32px;background:#fff;box-shadow:0 0 0 1.5px #E7E0F3,0 60px 90px -50px rgba(58,92,168,.6),0 26px 44px -32px rgba(106,88,176,.45);animation:gcFloat 8s ease-in-out infinite} :root[data-theme="learnndev"] .hs-hd{display:flex;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid #EEE9E0} :root[data-theme="learnndev"] .hs-av{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#5B7FC7,#A99BD6 60%,#E84A9E);color:#fff;box-shadow:0 12px 20px -10px #6A58B0} :root[data-theme="learnndev"] .hs-av svg{width:22px;height:22px} :root[data-theme="learnndev"] .hs-hd b{display:block;font:800 16px var(--font);color:#1E2433} :root[data-theme="learnndev"] .hs-hd small{display:flex;align-items:center;gap:6px;margin-top:2px;font:600 12.5px var(--font);color:#1E8F6A} :root[data-theme="learnndev"] .hs-hd small i{width:7px;height:7px;border-radius:50%;background:#2F9E6E;animation:gcPing2 1.6s ease-out infinite} :root[data-theme="learnndev"] .hs-bd{display:grid;gap:12px;padding:20px 0 6px;min-height:268px;align-content:start} :root[data-theme="learnndev"] .hs-m{max-width:86%;padding:13px 17px;border-radius:20px 20px 20px 6px;background:#F3F0EA;color:#2A3142;font:600 15px/1.45 var(--font)} :root[data-theme="learnndev"] .hs-hi{animation:hsHi 10s infinite} :root[data-theme="learnndev"] .hs-u{justify-self:end;border-radius:20px 20px 6px 20px;background:linear-gradient(135deg,#5B7FC7,#3A5CA8);color:#fff;opacity:0;animation:hsU 10s infinite} :root[data-theme="learnndev"] .hs-bot{position:relative;min-height:78px} :root[data-theme="learnndev"] .hs-dots{position:absolute;left:0;top:0;display:flex;gap:6px;padding:15px 18px;border-radius:20px 20px 20px 6px;background:#F1EEFA;opacity:0;animation:hsD 10s infinite} :root[data-theme="learnndev"] .hs-dots b{width:8px;height:8px;border-radius:50%;background:#6A58B0;animation:gcDot 1s ease-in-out infinite} :root[data-theme="learnndev"] .hs-dots b:nth-child(2){animation-delay:.15s}:root[data-theme="learnndev"] .hs-dots b:nth-child(3){animation-delay:.3s} :root[data-theme="learnndev"] .hs-a{display:grid;gap:9px;justify-items:start;background:#F1EEFA;opacity:0;animation:hsA 10s infinite} :root[data-theme="learnndev"] .hs-src{display:inline-flex;align-items:center;gap:7px;padding:4px 11px;border-radius:99px;border:1.5px solid #5FC4A0;background:#E8F8F1;font:700 12px var(--font);font-style:normal;-webkit-text-fill-color:#1E8F6A;color:#1E8F6A} :root[data-theme="learnndev"] .hs-src svg{width:13px;height:13px} :root[data-theme="learnndev"] .hs-in{display:flex;align-items:center;gap:10px;margin-top:10px;padding:9px 9px 9px 18px;border-radius:99px;box-shadow:0 0 0 1.5px #E7E1D6;color:#8A8F9B;font:500 14px var(--font)} :root[data-theme="learnndev"] .hs-in span{flex:1} :root[data-theme="learnndev"] .hs-in i{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#5B7FC7,#3A5CA8);color:#fff} :root[data-theme="learnndev"] .hs-in svg{width:16px;height:16px} @keyframes hsHi{0%,1%{opacity:0;transform:translateY(8px)}5%,92%{opacity:1;transform:none}97%,100%{opacity:0}} @keyframes hsU{0%,14%{opacity:0;transform:translateY(8px) scale(.96)}18%,92%{opacity:1;transform:none}97%,100%{opacity:0}} @keyframes hsD{0%,24%{opacity:0}27%,40%{opacity:1}43%,100%{opacity:0}} @keyframes hsA{0%,42%{opacity:0;transform:translateY(8px) scale(.96)}47%,92%{opacity:1;transform:none}97%,100%{opacity:0}} :root[data-theme="learnndev"] #heroStage .chip.c1{left:4%;top:auto;bottom:62px} :root[data-theme="learnndev"] #heroStage .chip.c2{right:4%;top:auto;bottom:62px} :root[data-theme="learnndev"] #heroStage .chip.c3{left:12%;top:auto;bottom:8px} :root[data-theme="learnndev"] #heroStage .chip.c4{right:10%;top:auto;bottom:8px} @media (max-width:1000px){:root[data-theme="learnndev"] #heroStage{min-height:0;padding:8px 0 130px}:root[data-theme="learnndev"] #heroStage .chip.c1{left:0}:root[data-theme="learnndev"] #heroStage .chip.c2{right:0}:root[data-theme="learnndev"] #heroStage .chip.c3{left:6%}:root[data-theme="learnndev"] #heroStage .chip.c4{right:4%}} /* ---- block 24 hero-colour ---- */ :root[data-theme="learnndev"] .hs{padding:0;overflow:hidden;background:linear-gradient(180deg,#fff,#FBF9FF);box-shadow:0 0 0 1.5px #E7E0F3,-30px 40px 80px -40px rgba(91,127,199,.65),30px 50px 80px -40px rgba(232,74,158,.45),0 30px 60px -40px rgba(133,203,166,.7)} :root[data-theme="learnndev"] .hs::after{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;padding:2.5px;background:conic-gradient(from var(--ang),#5B7FC7,#A99BD6,#E84A9E,#E59322,#D4C430,#94D63C,#85CBA6,#5B7FC7);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:gcSpin 6s linear infinite;pointer-events:none} :root[data-theme="learnndev"] .hs-hd{padding:18px 22px;border:0;background:linear-gradient(100deg,#3A5CA8,#6A58B0 55%,#C0397F)} :root[data-theme="learnndev"] .hs-av{background:#fff;color:#6A58B0;box-shadow:0 0 0 4px rgba(255,255,255,.28);animation:ckRing 2.4s ease-out infinite} :root[data-theme="learnndev"] .hs-hd b{color:#fff;font-size:17px} :root[data-theme="learnndev"] .hs-hd small{color:#D8F5E7} :root[data-theme="learnndev"] .hs-hd small i{background:#94D63C} :root[data-theme="learnndev"] .hs-bd{padding:20px 22px 4px;min-height:236px} :root[data-theme="learnndev"] .hs-hi{background:#E3F5EC;color:#14604A} :root[data-theme="learnndev"] .hs-u{background:linear-gradient(135deg,#5B7FC7,#A99BD6 55%,#E84A9E)} :root[data-theme="learnndev"] .hs-a{background:#F1EEFA;box-shadow:inset 3px 0 0 #6A58B0} :root[data-theme="learnndev"] .hs-try{display:flex;flex-wrap:wrap;gap:8px;padding:16px 22px 0} :root[data-theme="learnndev"] .hs-try span{padding:7px 13px;border-radius:99px;font:700 12.5px var(--font);box-shadow:0 0 0 1.5px var(--b);background:var(--t);color:var(--d)} :root[data-theme="learnndev"] .hs-try span:nth-child(1){--t:#EAF0FB;--b:#C9D8F2;--d:#3A5CA8} :root[data-theme="learnndev"] .hs-try span:nth-child(2){--t:#FDEEF6;--b:#F6C6DD;--d:#C0397F} :root[data-theme="learnndev"] .hs-try span:nth-child(3){--t:#FCF1DE;--b:#F1D6A6;--d:#9A5F0A} :root[data-theme="learnndev"] .hs-in{margin:14px 22px 22px;background:#fff} :root[data-theme="learnndev"] .hs-in i{background:linear-gradient(135deg,#E84A9E,#E59322)} :root[data-theme="learnndev"] #heroStage .chip{font-weight:700;color:#2A3142} :root[data-theme="learnndev"] #heroStage .chip.c1{background:#EAF0FB;border-color:#C9D8F2} :root[data-theme="learnndev"] #heroStage .chip.c2{background:#FDEEF6;border-color:#F6C6DD} :root[data-theme="learnndev"] #heroStage .chip.c3{background:#FBF6D2;border-color:#E6DC8A} :root[data-theme="learnndev"] #heroStage .chip.c4{background:#E6F8CC;border-color:#BFE07F} /* ---- block 25 hero-art ---- */ :root[data-theme="learnndev"] #heroStage{min-height:560px;align-content:center;padding:0} :root[data-theme="learnndev"] #heroStage .orb-wrap{width:min(100%,560px)} :root[data-theme="learnndev"] .ha{position:relative;animation:gcFloat 8s ease-in-out infinite} :root[data-theme="learnndev"] .ha img{display:block;width:100%;height:auto;filter:drop-shadow(0 30px 40px rgba(106,88,176,.18))} :root[data-theme="learnndev"] #heroStage .chip{font-weight:700;color:#2A3142} :root[data-theme="learnndev"] #heroStage .chip.c1{left:0;top:2%;bottom:auto;right:auto} :root[data-theme="learnndev"] #heroStage .chip.c2{right:0;top:5%;bottom:auto;left:auto} :root[data-theme="learnndev"] #heroStage .chip.c3{left:0;bottom:3%;top:auto;right:auto} :root[data-theme="learnndev"] #heroStage .chip.c4{right:0;bottom:1%;top:auto;left:auto} @media (max-width:1000px){:root[data-theme="learnndev"] #heroStage{min-height:0;padding:8px 0 20px}} /* ---- block 26 type-space ---- */ :root[data-theme="learnndev"] h1,:root[data-theme="learnndev"] h2{letter-spacing:-.008em!important;line-height:1.26!important;word-spacing:.06em!important} :root[data-theme="learnndev"] h3{letter-spacing:0!important;line-height:1.3!important;word-spacing:.04em} :root[data-theme="learnndev"] .hero h1{line-height:1.2!important} :root[data-theme="learnndev"] .head h2 em,:root[data-theme="learnndev"] h2 em.ac{padding-bottom:.06em} :root[data-theme="learnndev"] .head .lede,:root[data-theme="learnndev"] .lede{line-height:1.7} /* ---- block 27 hero-art2 ---- */ :root[data-theme="learnndev"] .ha-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible} :root[data-theme="learnndev"] .ha-fx .td{fill:#fff;transform-box:fill-box;transform-origin:center;animation:haTy 1.5s ease-in-out infinite} :root[data-theme="learnndev"] .ha-fx .d2{animation-delay:.2s} :root[data-theme="learnndev"] .ha-fx .d3{animation-delay:.4s} @keyframes haTy{0%,60%,100%{transform:translateY(0) scale(1);opacity:.75}30%{transform:translateY(-5px) scale(1.18);opacity:1}} :root[data-theme="learnndev"] .ha-fx .ha-p{filter:drop-shadow(0 0 6px rgba(232,74,158,.45))} @media (prefers-reduced-motion:reduce){:root[data-theme="learnndev"] .ha-fx .td{animation:none}} /* ---- block 28 gap2-new ---- */ :root[data-theme="learnndev"] #gap2 .g1{--s1:#5B7FC7;--s2:#3A5CA8;--s3:#A99BD6;--ink2:#3A5CA8;--c1:#3A5CA8;--tint:#EEF3FD;--tint2:#D3E0F6;--st:linear-gradient(135deg,#7C9BE0,#5B7FC7 45%,#A99BD6)} :root[data-theme="learnndev"] #gap2 .g2{--s1:#2F9E6E;--s2:#2F9E6E;--s3:#85CBA6;--ink2:#23805A;--c1:#2F9E6E;--tint:#EAF7F0;--tint2:#CDEBDB;--st:linear-gradient(135deg,#5CC596,#85CBA6 50%,#C8DE6A)} :root[data-theme="learnndev"] #gap2 .g3{--s1:#C0397F;--s2:#C0397F;--s3:#E59322;--ink2:#C0397F;--c1:#C0397F;--tint:#FDEEF5;--tint2:#F8D3E5;--st:linear-gradient(135deg,#F06CB4,#E84A9E 45%,#F0A04B)} :root[data-theme="learnndev"] #gap2 .gap-card{display:flex!important;flex-direction:column;padding:10px!important;background:#fff!important;border:1px solid #ECE6DC!important;border-radius:30px!important;box-shadow:0 24px 48px -32px rgba(30,36,51,.35)!important;color:var(--ink)!important;animation:none!important;overflow:hidden;transition:transform .35s ease,box-shadow .35s ease!important} :root[data-theme="learnndev"] #gap2 .gap-card::before,:root[data-theme="learnndev"] #gap2 .gap-card::after{content:""!important;display:block!important;position:absolute!important;inset:0!important;z-index:-1;width:auto!important;height:auto!important;border-radius:28px;border:2px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,var(--s1),var(--s2) 55%,var(--s3)) border-box!important;opacity:1!important;transform:none!important;animation:none!important} :root[data-theme="learnndev"] #gap2 .gap-card:hover{transform:translateY(-5px);box-shadow:0 30px 54px -30px color-mix(in srgb,var(--c1) 55%,transparent)!important} :root[data-theme="learnndev"] #gap2 .stage{position:relative;min-height:282px;display:flex;align-items:center;padding:58px 18px 22px;border-radius:22px;background:var(--st)} :root[data-theme="learnndev"] #gap2 .stage .gap-n{position:absolute!important;top:16px!important;left:16px!important;right:auto!important;padding:6px 12px!important;border-radius:999px!important;background:rgba(255,255,255,.28)!important;border:1px solid rgba(255,255,255,.6);font:700 12px/1 var(--font)!important;letter-spacing:.08em;color:#fff!important;-webkit-text-fill-color:#fff} :root[data-theme="learnndev"] #gap2 .stage .gm{width:100%;margin:0!important;background:#fff!important;border:0!important;border-radius:18px!important;box-shadow:0 18px 30px -16px rgba(30,36,51,.4)!important} :root[data-theme="learnndev"] #gap2 .stage .gm-badge{top:-44px!important;right:0!important;background:#fff!important;color:var(--ink2)!important;box-shadow:0 8px 16px -8px rgba(30,36,51,.35)!important} :root[data-theme="learnndev"] #gap2 .txt{padding:22px 18px 20px} :root[data-theme="learnndev"] #gap2 .txt h3{margin:0 0 8px!important;font-size:21px!important;color:var(--ink)!important} :root[data-theme="learnndev"] #gap2 .txt p{margin:0!important;color:#4A5268!important;font-size:15.5px!important;line-height:1.6!important} :root[data-theme="learnndev"] #gap2 .gm-q,:root[data-theme="learnndev"] #gap2 .gm-file{background:var(--tint)!important;border:1px solid color-mix(in srgb,var(--c1) 16%,#fff)!important} :root[data-theme="learnndev"] #gap2 .gm-input{background:var(--tint);border-color:color-mix(in srgb,var(--c1) 45%,#fff)!important} :root[data-theme="learnndev"] #gap2 .gm-ask span{background:linear-gradient(135deg,var(--s1),var(--s2))!important;color:#fff!important} /* ---- block 29 gap2-v9 ---- */ :root[data-theme="learnndev"] #gap2 .gap-cards{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:34px!important;padding-top:34px;max-width:none} :root[data-theme="learnndev"] #gap2 .g1{--s1:#D4A574;--s2:#E59322;--s3:#F2C94C;--ink2:#B86F00;--tint:#FFF3E0;--tint2:#FBE7C6;--ac:#E59322} :root[data-theme="learnndev"] #gap2 .g2{--s1:#E84A9E;--s2:#C0A0E8;--s3:#A99BD6;--ink2:#C0397F;--tint:#FFEFF7;--tint2:#F8D3E5;--ac:#E84A9E} :root[data-theme="learnndev"] #gap2 .g3{--s1:#5B7FC7;--s2:#6FB8D8;--s3:#85CBA6;--ink2:#3A5CA8;--tint:#ECF2FD;--tint2:#D3E0F6;--ac:#5B7FC7} :root[data-theme="learnndev"] #gap2 .gap-card{position:relative;isolation:isolate;display:flex!important;flex-direction:column;align-items:center;text-align:center;padding:52px 24px 24px!important;min-height:0!important;border:0!important;border-radius:28px!important;background:none!important;overflow:visible!important;box-shadow:0 22px 40px -30px color-mix(in srgb,var(--ac) 70%,transparent)!important;animation:none!important;color:#1E2433!important;transition:transform .35s ease!important} :root[data-theme="learnndev"] #gap2 .gap-card::before{content:""!important;display:block!important;position:absolute;inset:0;z-index:-2;border-radius:28px;background:linear-gradient(135deg,var(--tint2),var(--tint));border:2px solid color-mix(in srgb,var(--ac) 35%,#fff);opacity:1!important;transform:rotate(-3deg) translateY(8px)!important;transition:transform .35s ease!important} :root[data-theme="learnndev"] #gap2 .gap-card::after{content:""!important;display:block!important;position:absolute!important;inset:0!important;z-index:-1;width:auto!important;height:auto!important;border-radius:28px;border:2px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,var(--s1),var(--s2) 55%,var(--s3)) border-box!important;opacity:1!important;transform:none!important;animation:none!important} :root[data-theme="learnndev"] #gap2 .gap-card:hover{transform:translateY(-6px)!important} :root[data-theme="learnndev"] #gap2 .gap-card:hover::before{transform:rotate(-5deg) translateY(10px)!important} :root[data-theme="learnndev"] #gap2 .gap-card .gap-n{position:absolute!important;top:-27px;left:50%;transform:translateX(-50%);display:grid!important;place-items:center;width:54px;height:54px;margin:0!important;padding:0!important;border-radius:50%!important;background:linear-gradient(135deg,var(--s1),var(--s2))!important;font:800 18px/1 var(--font)!important;color:#fff!important;-webkit-text-fill-color:#fff;-webkit-text-stroke:0;letter-spacing:0;box-shadow:0 0 0 6px #FBF9F6,0 12px 20px -8px color-mix(in srgb,var(--ac) 80%,transparent)!important;animation:none!important} :root[data-theme="learnndev"] #gap2 .gap-card h3{margin:0 0 8px!important;font:800 23px/1.2 var(--font)!important;color:#1E2433!important;text-align:center!important} :root[data-theme="learnndev"] #gap2 .gap-card p{margin:0 0 22px!important;max-width:none;font-size:15.5px!important;line-height:1.6!important;color:#4A5268!important;text-align:center!important} :root[data-theme="learnndev"] #gap2 .gap-card .gm{box-sizing:border-box;width:100%;margin:auto 0 0!important;padding:14px!important;text-align:left;background:linear-gradient(180deg,var(--tint),#fff)!important;border:1.5px solid color-mix(in srgb,var(--s1) 40%,#fff)!important;border-radius:18px!important;box-shadow:none!important;min-width:0} @media (max-width:860px){:root[data-theme="learnndev"] #gap2 .gap-cards{grid-template-columns:minmax(0,1fr)!important;gap:46px!important}} /* ---- block 30 kind-v4 ---- */ :root[data-theme="learnndev"] #kind .k-gen{--s1:#A99BD6;--s2:#E84A9E;--c1:#6A58B0;--c2:#C0397F;--tint:#F3EFFB;--tint2:#E4DCF6;--g:linear-gradient(135deg,#6A58B0,#E84A9E)} :root[data-theme="learnndev"] #kind .k-info{--s1:#5B7FC7;--s2:#85CBA6;--c1:#3A5CA8;--c2:#2F9E6E;--tint:#EDF3FD;--tint2:#D3E0F6;--g:linear-gradient(135deg,#3A5CA8,#2F9E6E)} :root[data-theme="learnndev"] #kind .ck-card{position:relative;isolation:isolate;display:flex!important;flex-direction:column;padding:0!important;background:none!important;border:0!important;border-radius:28px!important;overflow:visible!important;box-shadow:none!important;animation:none!important;transform:none!important;transition:transform .35s ease!important} :root[data-theme="learnndev"] #kind .ck-card::before{display:none!important} :root[data-theme="learnndev"] #kind .ck-card::after{content:""!important;display:block!important;position:absolute!important;inset:0!important;z-index:-1;border-radius:28px;border:2px solid transparent;background:linear-gradient(180deg,var(--tint),#fff 46%) padding-box,linear-gradient(135deg,var(--s1),var(--s2)) border-box!important;box-shadow:0 24px 46px -30px color-mix(in srgb,var(--c1) 70%,transparent);opacity:1!important;transition:box-shadow .35s ease;padding:0!important;-webkit-mask:none!important;mask:none!important} :root[data-theme="learnndev"] #kind .ck-glow{display:none!important} :root[data-theme="learnndev"] #kind .ck-card:hover{transform:translateY(-4px)!important} :root[data-theme="learnndev"] #kind .ck-card.on::after{box-shadow:0 0 0 4px color-mix(in srgb,var(--s1) 35%,#fff),0 30px 54px -28px color-mix(in srgb,var(--c1) 80%,transparent)} :root[data-theme="learnndev"] #kind .ckt{position:relative;padding:28px 28px 22px;text-align:left;background:none;border-radius:0;color:var(--ink)} :root[data-theme="learnndev"] #kind .kic{display:block;float:left;width:64px;height:64px;margin:0 16px 14px 0;padding:8px;box-sizing:border-box;border-radius:20px;background:#fff;border:1.5px solid color-mix(in srgb,var(--s1) 40%,#fff);stroke:var(--c1);filter:none;animation:gcFloat 5s ease-in-out infinite;box-shadow:0 12px 22px -14px color-mix(in srgb,var(--c1) 70%,transparent)} :root[data-theme="learnndev"] #kind .kic [fill="#fff"]{fill:var(--s1)} :root[data-theme="learnndev"] #kind .ckt .ck-tag{display:inline-block;margin:6px 0 10px;padding:6px 13px;border-radius:999px;background:var(--g);color:#fff!important;font:700 11.5px/1 var(--font);letter-spacing:.1em;text-transform:uppercase;border:0} :root[data-theme="learnndev"] #kind .ckt h3{clear:both;margin:6px 0 8px!important;font:800 30px/1.1 var(--font)!important;color:#1E2433!important;letter-spacing:-.02em} :root[data-theme="learnndev"] #kind .ckt .ck-d{margin:0!important;max-width:none!important;color:#4A5268!important;font-size:15.5px!important;line-height:1.6} :root[data-theme="learnndev"] #kind .ck-radio{top:24px!important;right:24px!important;background:#fff!important;border-color:color-mix(in srgb,var(--s1) 60%,#fff)!important;z-index:3} :root[data-theme="learnndev"] #kind .ckb{display:flex;flex-direction:column;flex:1;padding:4px 28px 26px} :root[data-theme="learnndev"] #kind .ckb .ck-list{margin:0 0 18px!important;padding-top:18px;border-top:1px solid color-mix(in srgb,var(--s1) 25%,#fff)} :root[data-theme="learnndev"] #kind .ck-list li>span{background:var(--g)!important;color:#fff!important} :root[data-theme="learnndev"] #kind .ckb .ck-chat{margin:0 0 16px!important;min-height:160px;background:linear-gradient(180deg,var(--tint),#fff)!important;border:1.5px solid color-mix(in srgb,var(--s1) 40%,#fff)!important;border-radius:20px!important;box-shadow:none} :root[data-theme="learnndev"] #kind .ckb .ck-best{margin:auto 0 0!important;padding-top:14px;border-top:1px dashed color-mix(in srgb,var(--s1) 45%,#fff)} :root[data-theme="learnndev"] #kind .ck-or{background:linear-gradient(135deg,#A99BD6,#5B7FC7 55%,#85CBA6)!important;color:#fff!important;border:0!important;box-shadow:0 12px 22px -8px rgba(91,127,199,.55)!important} /* ---- block 31 kind-v5 ---- */ :root[data-theme="learnndev"] #kind .k-gen{--bgc:linear-gradient(150deg,#8E7CD0 0%,#C070C2 55%,#E8689F 100%);--sh:#B86FC4} :root[data-theme="learnndev"] #kind .k-info{--bgc:linear-gradient(150deg,#5B7FC7 0%,#4F9DBF 55%,#4DB08A 100%);--sh:#4F8FC0} :root[data-theme="learnndev"] #kind .ck-card::after{background:var(--bgc)!important;border:0!important;box-shadow:0 26px 48px -28px var(--sh)!important} :root[data-theme="learnndev"] #kind .ck-card.on::after{box-shadow:0 0 0 4px rgba(255,255,255,.9),0 0 0 7px color-mix(in srgb,var(--sh) 55%,#fff),0 30px 54px -26px var(--sh)!important} :root[data-theme="learnndev"] #kind .ckt h3,:root[data-theme="learnndev"] #kind .ckt .ck-d,:root[data-theme="learnndev"] #kind .ck-list li,:root[data-theme="learnndev"] #kind .ck-best,:root[data-theme="learnndev"] #kind .ck-best b{color:#fff!important} :root[data-theme="learnndev"] #kind .ckt .ck-d{color:rgba(255,255,255,.92)!important} :root[data-theme="learnndev"] #kind .ckt .ck-tag{background:rgba(255,255,255,.26)!important;border:1px solid rgba(255,255,255,.65)!important} :root[data-theme="learnndev"] #kind .ckb .ck-list{border-top-color:rgba(255,255,255,.4)!important} :root[data-theme="learnndev"] #kind .ck-list li>span{background:#fff!important;color:var(--c1)!important} :root[data-theme="learnndev"] #kind .ckb .ck-best{border-top-color:rgba(255,255,255,.45)!important} :root[data-theme="learnndev"] #kind .ck-best{opacity:.95} :root[data-theme="learnndev"] #kind .ck-radio{background:rgba(255,255,255,.3)!important;border-color:#fff!important} :root[data-theme="learnndev"] #kind .ck-card.on .ck-radio{background:#fff!important} :root[data-theme="learnndev"] #kind .ckb .ck-chat{background:#fff!important;border:0!important;box-shadow:0 18px 32px -20px rgba(30,36,51,.45)!important} :root[data-theme="learnndev"] #kind .kic{border-color:rgba(255,255,255,.8)!important;box-shadow:0 12px 22px -12px rgba(30,36,51,.35)!important} /* ---- block 32 kind-v6 ---- */ :root[data-theme="learnndev"] #kind .k-gen{--bgc:linear-gradient(135deg,#E84A9E 0%,#EE6A7C 50%,#E8861E 100%);--sh:#E8606E;--c1:#C0397F} :root[data-theme="learnndev"] #kind .k-info{--bgc:linear-gradient(135deg,#3A5CA8 0%,#6A58B0 45%,#B8479F 80%,#E84A9E 100%);--sh:#6A58B0;--c1:#3A5CA8} :root[data-theme="learnndev"] #kind .ck-or{background:linear-gradient(135deg,#E84A9E,#E8861E)!important;box-shadow:0 12px 22px -8px rgba(232,74,158,.55)!important} :root[data-theme="learnndev"] #kind .k-gen .ck-q,:root[data-theme="learnndev"] #kind .k-gen .ck-bot .ck-dots b{background:linear-gradient(135deg,#E84A9E,#E8861E)!important} :root[data-theme="learnndev"] #kind .k-info .ck-q{background:linear-gradient(135deg,#3A5CA8,#B8479F)!important} /* ---- block 33 kind-v7 ---- */ :root[data-theme="learnndev"] #kind .ck-card.on::after{box-shadow:0 26px 48px -28px var(--sh)!important} :root[data-theme="learnndev"] #kind .ck-card::after{z-index:-2!important} :root[data-theme="learnndev"] #kind .ck-card::before{content:""!important;display:block!important;position:absolute;inset:0;z-index:-1;border-radius:28px;pointer-events:none;opacity:1!important;transform:none!important;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.55) 50%,transparent 62%) no-repeat;background-size:260% 100%;background-position:130% 0} :root[data-theme="learnndev"] #kind .ck-card:hover::before{animation:kFlash .9s ease-out 1} @keyframes kFlash{from{background-position:130% 0}to{background-position:-30% 0}} @media (prefers-reduced-motion:reduce){:root[data-theme="learnndev"] #kind .ck-card:hover::before{animation:none}} /* ---- block 34 gap2-v10 ---- */ @property --s1{syntax:"";inherits:true;initial-value:#ffffff} @property --s2{syntax:"";inherits:true;initial-value:#ffffff} @property --s3{syntax:"";inherits:true;initial-value:#ffffff} @property --ink2{syntax:"";inherits:true;initial-value:#ffffff} @property --tint{syntax:"";inherits:true;initial-value:#ffffff} @property --tint2{syntax:"";inherits:true;initial-value:#ffffff} @property --ac{syntax:"";inherits:true;initial-value:#ffffff} :root[data-theme="learnndev"] #gap2 .g1{--s1:#2F9E6E;--s2:#5CC3A5;--s3:#94D63C;--ink2:#1D6E4D;--tint:#E8F7EF;--tint2:#CDEBDB;--ac:#2F9E6E} :root[data-theme="learnndev"] #gap2 .g2{--s1:#6A58B0;--s2:#A99BD6;--s3:#C7B8F2;--ink2:#5A4A9E;--tint:#F1EEFB;--tint2:#DDD4F4;--ac:#6A58B0} :root[data-theme="learnndev"] #gap2 .g3{--s1:#BF8A3A;--s2:#DDAE45;--s3:#C9B530;--ink2:#8A6410;--tint:#FFF8DE;--tint2:#F6E8B0;--ac:#C99A2E} :root[data-theme="learnndev"] #gap2 .gap-card{transition:transform .35s ease,--f1 .35s ease,--f2 .35s ease!important} /* ---- block 35 gap2-v11 ---- */ @property --f1{syntax:"";inherits:true;initial-value:#ffffff} @property --f2{syntax:"";inherits:true;initial-value:#ffffff} :root[data-theme="learnndev"] #gap2 .g1{--h1:#62C9A3;--h2:#1F8559} :root[data-theme="learnndev"] #gap2 .g2{--h1:#A08FE2;--h2:#56439F} :root[data-theme="learnndev"] #gap2 .g3{--h1:#E8BC52;--h2:#A06E1A} :root[data-theme="learnndev"] #gap2 .gap-card{--f1:#ffffff;--f2:#ffffff} :root[data-theme="learnndev"] #gap2 .gap-card::after{background:linear-gradient(135deg,var(--f1),var(--f2)) padding-box,linear-gradient(135deg,var(--s1),var(--s2) 55%,var(--s3)) border-box!important} :root[data-theme="learnndev"] #gap2 .gap-card:hover{--f1:var(--h1);--f2:var(--h2)} :root[data-theme="learnndev"] #gap2 .gap-card h3,:root[data-theme="learnndev"] #gap2 .gap-card p{transition:color .3s ease!important} :root[data-theme="learnndev"] #gap2 .gap-card:hover h3{color:#fff!important;text-shadow:0 1px 8px rgba(20,20,40,.22)} :root[data-theme="learnndev"] #gap2 .gap-card:hover p{color:#fff!important;text-shadow:0 1px 8px rgba(20,20,40,.22)} :root[data-theme="learnndev"] #gap2 .gap-card .gap-n{transition:background .45s ease,color .45s ease!important} :root[data-theme="learnndev"] #gap2 .gap-card:hover .gap-n{background:#fff!important;color:var(--h2)!important;-webkit-text-fill-color:var(--h2)} /* ---- block 36 gap2-v12 ---- */ :root[data-theme="learnndev"] #gap2 .g1{--s1:#5B7FC7;--s2:#7C9BE8;--s3:#A99BD6;--ink2:#3A5CA8;--tint:#EAF0FC;--tint2:#D3E0F6;--ac:#3A5CA8;--h1:#6E96F0;--h2:#2F4F9E} :root[data-theme="learnndev"] #gap2 .g2{--s1:#E84A9E;--s2:#F27FB8;--s3:#F0A04B;--ink2:#C0397F;--tint:#FFEEF6;--tint2:#F8D3E5;--ac:#C0397F;--h1:#FF7DB8;--h2:#C0357C} :root[data-theme="learnndev"] #gap2 .g3{--s1:#E59322;--s2:#F2B04A;--s3:#D4C430;--ink2:#B86F00;--tint:#FFF3E0;--tint2:#FBE0B8;--ac:#B86F00;--h1:#FFB84D;--h2:#E0701F} /* ---- block 37 shape-v3 ---- */ :root[data-theme="learnndev"] .sx[data-step="1"] .sx-prev{--sa1:#F2B04A;--sa2:#E0701F} :root[data-theme="learnndev"] .sx[data-step="0"] .sx-prev{--sa1:#7C9BE8;--sa2:#3A5CA8} :root[data-theme="learnndev"] .sx-prev{background:radial-gradient(60% 40% at 100% 0%,color-mix(in srgb,var(--sa1) 20%,transparent),transparent 70%),radial-gradient(50% 35% at 0% 100%,color-mix(in srgb,var(--sa2) 14%,transparent),transparent 70%),#fff;box-shadow:0 0 0 2px color-mix(in srgb,var(--sa1) 45%,#fff),0 40px 70px -36px color-mix(in srgb,var(--sa2) 75%,transparent)!important;overflow:hidden} :root[data-theme="learnndev"] .sx-bar{margin:-20px -20px 0;padding:16px 20px;border:0;background:linear-gradient(120deg,var(--sa1),var(--sa2));color:#fff;transition:background .7s} :root[data-theme="learnndev"] .sx-bar svg{color:#fff;width:16px;height:16px} :root[data-theme="learnndev"] .sx-live{background:rgba(255,255,255,.95)!important;padding:5px 12px!important;border-radius:99px} :root[data-theme="learnndev"] .sx-hello{background:linear-gradient(135deg,color-mix(in srgb,var(--sa1) 22%,#fff),color-mix(in srgb,var(--sa2) 10%,#fff))!important;box-shadow:0 0 0 1.5px color-mix(in srgb,var(--sa1) 55%,#fff)!important;margin-top:18px} :root[data-theme="learnndev"] .sx-m{background:color-mix(in srgb,var(--sa1) 11%,#fff);box-shadow:inset 3px 0 0 var(--sa1);transition:background .7s,box-shadow .7s} :root[data-theme="learnndev"] .sx-m.u{box-shadow:0 12px 20px -12px var(--sa2)} :root[data-theme="learnndev"] .sx-m.b2{background:color-mix(in srgb,var(--sa1) 11%,#fff)} :root[data-theme="learnndev"] .sx-chips span:nth-child(1){color:#3A5CA8;border-color:#A9BFEA;background:#EAF0FC} :root[data-theme="learnndev"] .sx-chips span:nth-child(2){color:#C0397F;border-color:#F4B0D2;background:#FFEEF6} :root[data-theme="learnndev"] .sx-chips span:nth-child(3){color:#B86F00;border-color:#F3CF93;background:#FFF3E0} :root[data-theme="learnndev"] .sx-in{box-shadow:0 0 0 2px color-mix(in srgb,var(--sa1) 50%,#fff)!important} :root[data-theme="learnndev"] .sx-in .send{width:30px;height:30px;padding:7px;border-radius:50%;background:linear-gradient(135deg,var(--sa1),var(--sa2));color:#fff!important;box-shadow:0 8px 14px -6px var(--sa2)} :root[data-theme="learnndev"] .sx-list li:nth-child(1){--i1:#5B7FC7;--i2:#3A5CA8;--it:#EAF0FC} :root[data-theme="learnndev"] .sx-list li:nth-child(2){--i1:#F2B04A;--i2:#E0701F;--it:#FFF3E0} :root[data-theme="learnndev"] .sx-list li:nth-child(3){--i1:#F27FB8;--i2:#C0397F;--it:#FFEEF6} :root[data-theme="learnndev"] .sx-list li:nth-child(4){--i1:#5CC3A5;--i2:#1F8559;--it:#E6F7EF} :root[data-theme="learnndev"] .sx-list li:nth-child(5){--i1:#A99BD6;--i2:#6A58B0;--it:#F1EEFB} :root[data-theme="learnndev"] .sx-it .tk{background:linear-gradient(135deg,var(--i1),var(--i2))!important;opacity:.85} :root[data-theme="learnndev"] .sx-it:hover{background:var(--it)!important} :root[data-theme="learnndev"] .sx-it.on{background:linear-gradient(90deg,var(--it),#fff)!important;box-shadow:0 0 0 1.5px var(--i1),0 18px 30px -20px var(--i2)!important} :root[data-theme="learnndev"] .sx-it.on .tk{background:linear-gradient(135deg,var(--i1),var(--i2))!important;opacity:1} :root[data-theme="learnndev"] .sx-prog,:root[data-theme="learnndev"] .sx-it.on .sx-prog{background:linear-gradient(90deg,var(--i1),var(--i2))!important} /* ---- block 38 gap2-v13 ---- */ :root[data-theme="learnndev"] #gap2 .gap-card:hover .gap-n{background:linear-gradient(135deg,var(--h2),var(--h1))!important;color:#fff!important;-webkit-text-fill-color:#fff!important;box-shadow:0 0 0 6px #FBF9F6,0 12px 20px -8px var(--h2)!important} :root[data-theme="learnndev"] #gap2 .gap-card .gap-n::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--h1);opacity:0;pointer-events:none} :root[data-theme="learnndev"] #gap2 .gap-card:hover .gap-n::after{animation:g2Ping 1.3s ease-out infinite} :root[data-theme="learnndev"] #gap2 .gap-card:hover .gap-n::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--h1);opacity:0;pointer-events:none;animation:g2Ping 1.3s ease-out .65s infinite} @keyframes g2Ping{0%{transform:scale(1);opacity:.85}100%{transform:scale(1.9);opacity:0}} @media (prefers-reduced-motion:reduce){:root[data-theme="learnndev"] #gap2 .gap-card:hover .gap-n::after,:root[data-theme="learnndev"] #gap2 .gap-card:hover .gap-n::before{animation:none}} /* ---- block 39 shape-v4 ---- */ :root[data-theme="learnndev"] .sx-it{user-select:none;-webkit-user-select:none} :root[data-theme="learnndev"] .sx-prev{overflow:visible!important} :root[data-theme="learnndev"] .sx-bar{border-radius:30px 30px 0 0} :root[data-theme="learnndev"] .sx[data-step="1"] .sx-chips span{animation:sxChip .5s cubic-bezier(.3,1.6,.5,1) both} :root[data-theme="learnndev"] .sx[data-step="1"] .sx-chips span:nth-child(2){animation-delay:.14s} :root[data-theme="learnndev"] .sx[data-step="1"] .sx-chips span:nth-child(3){animation-delay:.28s} @keyframes sxChip{from{opacity:0;transform:translateY(10px) scale(.9)}to{opacity:1;transform:none}} :root[data-theme="learnndev"] .sx-prev::before{position:absolute;top:-15px;right:22px;z-index:3;padding:7px 14px 7px 26px;border-radius:99px;background:radial-gradient(circle at 13px 50%,#fff 3.5px,transparent 4.5px),linear-gradient(135deg,var(--sa1),var(--sa2));color:#fff;font:700 12px/1 var(--font);letter-spacing:.02em;box-shadow:0 10px 18px -8px var(--sa2),0 0 0 3px #fff;animation:sxTag .45s cubic-bezier(.3,1.5,.5,1) both} :root[data-theme="learnndev"] .sx[data-step="0"] .sx-prev::before{content:"Name & welcome message"} :root[data-theme="learnndev"] .sx[data-step="1"] .sx-prev::before{content:"Suggested questions"} :root[data-theme="learnndev"] .sx[data-step="2"] .sx-prev::before{content:"Light or dark"} :root[data-theme="learnndev"] .sx[data-step="3"] .sx-prev::before{content:"Live preview"} :root[data-theme="learnndev"] .sx[data-step="4"] .sx-prev::before{content:"Visitor options"} @keyframes sxTag{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} :root[data-theme="learnndev"] .sx[data-step="0"] .sx-hello{animation:sxGlow 1.4s ease-out 1} @keyframes sxGlow{0%{box-shadow:0 0 0 1.5px var(--sa1),0 0 0 0 color-mix(in srgb,var(--sa1) 55%,transparent)}100%{box-shadow:0 0 0 1.5px var(--sa1),0 0 0 14px transparent}} :root[data-theme="learnndev"] .sx[data-step="3"] .sx-live i{animation:gcPing2 .9s ease-out infinite} :root[data-theme="learnndev"] .sx[data-step="4"] .sx-in{animation:sxGlow 1.4s ease-out 1} :root[data-theme="learnndev"] .sx[data-step="2"] .sx-sw i{animation:sxChip .5s cubic-bezier(.3,1.6,.5,1) both} :root[data-theme="learnndev"] .sx[data-step="2"] .sx-sw i:nth-child(2){animation:sxChip .5s .1s cubic-bezier(.3,1.6,.5,1) both,ckBreathe 1.6s .6s ease-in-out infinite} :root[data-theme="learnndev"] .sx[data-step="2"] .sx-sw i:nth-child(3){animation-delay:.2s} :root[data-theme="learnndev"] .sx[data-step="2"] .sx-sw i:nth-child(4){animation-delay:.3s} /* ---- block 40 pricing-v2 ---- */ :root[data-theme="learnndev"] #pricing .sh-plan:nth-child(1){--p1:#5CC3A5;--p2:#1F8559;--pt:#E6F7EF;--pb:linear-gradient(135deg,#5CC3A5,#5B7FC7)} :root[data-theme="learnndev"] #pricing .sh-plan:nth-child(2){--p1:#7C6BE0;--p2:#E84A9E;--pt:#F1EEFB;--pb:linear-gradient(145deg,#3A5CA8 0%,#6A58B0 50%,#C0397F 100%)} :root[data-theme="learnndev"] #pricing .sh-plan:nth-child(3){--p1:#F2B04A;--p2:#E0701F;--pt:#FFF3E0;--pb:linear-gradient(135deg,#F2B04A,#E8683A)} :root[data-theme="learnndev"] #pricing .sh-plan{position:relative;overflow:visible!important;padding-top:34px!important;border:0!important;border-radius:28px!important;background:linear-gradient(180deg,var(--pt),#fff 38%)!important;box-shadow:0 0 0 1.5px color-mix(in srgb,var(--p1) 40%,#fff),0 26px 46px -32px var(--p2)!important;transition:transform .35s ease,box-shadow .35s ease!important} :root[data-theme="learnndev"] #pricing .sh-plan::before{content:"";position:absolute;left:0;right:0;top:0;height:8px;border-radius:28px 28px 0 0;background:var(--pb)} :root[data-theme="learnndev"] #pricing .sh-plan:hover{transform:translateY(-6px)!important;box-shadow:0 0 0 2px var(--p1),0 34px 54px -30px var(--p2)!important} :root[data-theme="learnndev"] #pricing .sh-plan h3{display:inline-block;padding:7px 16px;border-radius:99px;background:var(--pb);color:#fff!important;-webkit-text-fill-color:#fff;font:800 14px/1 var(--font)!important;letter-spacing:.06em;text-transform:uppercase;box-shadow:0 10px 18px -10px var(--p2)} :root[data-theme="learnndev"] #pricing .sh-price{background:var(--pb);-webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent;font-weight:800!important} :root[data-theme="learnndev"] #pricing .sh-price small{-webkit-text-fill-color:#6B7080;color:#6B7080} :root[data-theme="learnndev"] #pricing .sh-plan li svg{color:var(--p2)!important} :root[data-theme="learnndev"] #pricing .sh-plan li.no svg{color:#B9B4AA!important} :root[data-theme="learnndev"] #pricing .sh-plan .ghost{border:2px solid transparent!important;background:linear-gradient(#fff,#fff) padding-box,var(--pb) border-box!important;color:var(--p2)!important;font-weight:800;transition:transform .3s,box-shadow .3s,color .3s} :root[data-theme="learnndev"] #pricing .sh-plan .ghost:hover{background:var(--pb)!important;color:#fff!important;transform:translateY(-2px);box-shadow:0 14px 22px -12px var(--p2)} :root[data-theme="learnndev"] #pricing .sh-plan.on{background:var(--pb)!important;transform:translateY(-14px) scale(1.03);box-shadow:0 40px 64px -30px #6A58B0!important;color:#fff} :root[data-theme="learnndev"] #pricing .sh-plan.on:hover{transform:translateY(-20px) scale(1.03)!important} :root[data-theme="learnndev"] #pricing .sh-plan.on::before{display:none} :root[data-theme="learnndev"] #pricing .sh-plan.on h3{background:rgba(255,255,255,.22);box-shadow:none;border:1px solid rgba(255,255,255,.55)} :root[data-theme="learnndev"] #pricing .sh-plan.on .sh-price,:root[data-theme="learnndev"] #pricing .sh-plan.on .sh-price span{background:none;-webkit-text-fill-color:#fff;color:#fff!important} :root[data-theme="learnndev"] #pricing .sh-plan.on .sh-price small,:root[data-theme="learnndev"] #pricing .sh-plan.on .sh-sub,:root[data-theme="learnndev"] #pricing .sh-plan.on li{-webkit-text-fill-color:rgba(255,255,255,.94);color:rgba(255,255,255,.94)!important} :root[data-theme="learnndev"] #pricing .sh-plan.on li b{color:#fff!important;-webkit-text-fill-color:#fff} :root[data-theme="learnndev"] #pricing .sh-plan.on li svg{color:#fff!important} :root[data-theme="learnndev"] #pricing .sh-plan.on .cta{background:#fff!important;color:#3A5CA8!important;-webkit-text-fill-color:#3A5CA8;box-shadow:0 16px 26px -12px rgba(20,20,60,.5)!important} :root[data-theme="learnndev"] #pricing .sh-flag{background:linear-gradient(135deg,#F2B04A,#E84A9E)!important;color:#fff!important;box-shadow:0 8px 14px -6px rgba(232,74,158,.6)} :root[data-theme="learnndev"] #pricing .sh-flag.alt{background:linear-gradient(135deg,#6A58B0,#E84A9E)!important} :root[data-theme="learnndev"] #pricing .bill{box-shadow:0 0 0 1.5px #E4DDF2,0 14px 24px -16px rgba(106,88,176,.5)} :root[data-theme="learnndev"] #pricing .bill [aria-checked="true"]{background:linear-gradient(135deg,#3A5CA8,#6A58B0)!important;color:#fff!important} :root[data-theme="learnndev"] #pricing .prod:nth-child(1){background:linear-gradient(180deg,#EAF0FC,#fff)!important;border-color:#5B7FC755!important} :root[data-theme="learnndev"] #pricing .prod:nth-child(1) b{color:#5B7FC7!important} :root[data-theme="learnndev"] #pricing .prod:nth-child(2){background:linear-gradient(180deg,#E6F7EF,#fff)!important;border-color:#2F9E6E55!important} :root[data-theme="learnndev"] #pricing .prod:nth-child(2) b{color:#2F9E6E!important} :root[data-theme="learnndev"] #pricing .prod:nth-child(3){background:linear-gradient(180deg,#FFEEF6,#fff)!important;border-color:#E84A9E55!important} :root[data-theme="learnndev"] #pricing .prod:nth-child(3) b{color:#E84A9E!important} :root[data-theme="learnndev"] #pricing .prod:nth-child(4){background:linear-gradient(180deg,#FFF3E0,#fff)!important;border-color:#E5932255!important} :root[data-theme="learnndev"] #pricing .prod:nth-child(4) b{color:#E59322!important} :root[data-theme="learnndev"] #pricing .sh-cost-grid>div:nth-child(1){background:linear-gradient(160deg,#EAF0FC,#fff)!important;border:1.5px solid #5B7FC744!important;transition:transform .3s,box-shadow .3s} :root[data-theme="learnndev"] #pricing .sh-cost-grid>div:nth-child(1) b{background:linear-gradient(135deg,#5B7FC7,#3A5CA8);-webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent;font-weight:800} :root[data-theme="learnndev"] #pricing .sh-cost-grid>div:nth-child(2){background:linear-gradient(160deg,#E6F7EF,#fff)!important;border:1.5px solid #2F9E6E44!important;transition:transform .3s,box-shadow .3s} :root[data-theme="learnndev"] #pricing .sh-cost-grid>div:nth-child(2) b{background:linear-gradient(135deg,#2F9E6E,#1F8559);-webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent;font-weight:800} :root[data-theme="learnndev"] #pricing .sh-cost-grid>div:nth-child(3){background:linear-gradient(160deg,#FFEEF6,#fff)!important;border:1.5px solid #E84A9E44!important;transition:transform .3s,box-shadow .3s} :root[data-theme="learnndev"] #pricing .sh-cost-grid>div:nth-child(3) b{background:linear-gradient(135deg,#E84A9E,#C0397F);-webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent;font-weight:800} :root[data-theme="learnndev"] #pricing .sh-cost-grid>div:nth-child(4){background:linear-gradient(160deg,#FFF3E0,#fff)!important;border:1.5px solid #E5932244!important;transition:transform .3s,box-shadow .3s} :root[data-theme="learnndev"] #pricing .sh-cost-grid>div:nth-child(4) b{background:linear-gradient(135deg,#E59322,#B86F00);-webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent;font-weight:800} :root[data-theme="learnndev"] #pricing .sh-cost-grid>div:nth-child(5){background:linear-gradient(160deg,#F1EEFB,#fff)!important;border:1.5px solid #6A58B044!important;transition:transform .3s,box-shadow .3s} :root[data-theme="learnndev"] #pricing .sh-cost-grid>div:nth-child(5) b{background:linear-gradient(135deg,#6A58B0,#A99BD6);-webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent;font-weight:800} :root[data-theme="learnndev"] #pricing .sh-cost-grid>div:nth-child(6){background:linear-gradient(160deg,#E3F6F6,#fff)!important;border:1.5px solid #2F9E9E44!important;transition:transform .3s,box-shadow .3s} :root[data-theme="learnndev"] #pricing .sh-cost-grid>div:nth-child(6) b{background:linear-gradient(135deg,#2F9E9E,#5B7FC7);-webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent;font-weight:800} :root[data-theme="learnndev"] #pricing .sh-cost-grid>div:hover{transform:translateY(-4px);box-shadow:0 16px 24px -16px rgba(30,36,51,.4)} :root[data-theme="learnndev"] #pricing .sh-costs{background:linear-gradient(180deg,#FBF8FF,#fff)!important;border:1.5px solid #E6DEF5!important} :root[data-theme="learnndev"] #pricing .sh-plan h3{width:fit-content;max-width:100%;justify-self:start;align-self:flex-start} :root[data-theme="learnndev"] #pricing .sh-plan.on li svg,:root[data-theme="learnndev"] #pricing .sh-plan.on li svg *{color:#fff!important;stroke:#fff!important;opacity:1!important} :root[data-theme="learnndev"] #pricing .sh-plan li svg,:root[data-theme="learnndev"] #pricing .sh-plan li svg *{stroke:currentColor} :root[data-theme="learnndev"] #pricing .bill-wrap{margin-bottom:34px!important} :root[data-theme="learnndev"] #pricing .sh-plans{align-items:start;padding-top:10px} :root[data-theme="learnndev"] #pricing .sh-plan.on li::before{border-color:#fff!important;color:#fff!important;opacity:1!important} :root[data-theme="learnndev"] #pricing .sh-plan:nth-child(1) li:not(.no)::before{border-color:#1F8559!important} :root[data-theme="learnndev"] #pricing .sh-plan:nth-child(3) li::before{border-color:#E0701F!important} /* ---- block 41 pricing-v3 ---- */ :root[data-theme="learnndev"] #pricing .sh-plan:nth-child(1),:root[data-theme="learnndev"] #pricing .sh-plan:nth-child(3){--p1:#6F8FE0;--p2:#3A5CA8;--pt:#EAF0FC;--pb:linear-gradient(135deg,#6F8FE0,#3A5CA8 60%,#6A58B0)} :root[data-theme="learnndev"] #pricing .sh-plan:nth-child(2){--p1:#ee0979;--p2:#ee0979;--pt:#FFEEF5;--pb:linear-gradient(135deg,#ee0979,#ff6a00)} :root[data-theme="learnndev"] #pricing .sh-plan.on{box-shadow:0 40px 64px -30px #ee0979!important} :root[data-theme="learnndev"] #pricing .sh-plan.on .cta{color:#ee0979!important;-webkit-text-fill-color:#ee0979} :root[data-theme="learnndev"] #pricing .sh-plan:nth-child(1) li:not(.no)::before,:root[data-theme="learnndev"] #pricing .sh-plan:nth-child(3) li::before{border-color:#3A5CA8!important} :root[data-theme="learnndev"] #pricing .sh-plan.on li::before{border-color:#fff!important} :root[data-theme="learnndev"] #pricing .sh-flag{background:#fff!important;color:#ee0979!important;box-shadow:0 8px 14px -6px rgba(0,0,0,.35)!important} :root[data-theme="learnndev"] #pricing .sh-flag.alt{background:linear-gradient(135deg,#6F8FE0,#6A58B0)!important;color:#fff!important} :root[data-theme="learnndev"] #pricing .sh-plan .ghost{color:#3A5CA8!important} /* ---- block 42 pricing-v4 ---- */ :root[data-theme="learnndev"] #pricing .sh-plan:nth-child(1){--p1:#5B7FC7;--p2:#3A5CA8;--pt:#EAF0FC;--pb:linear-gradient(135deg,#3A5CA8 0%,#6A58B0 55%,#B8479F 100%)} :root[data-theme="learnndev"] #pricing .sh-plan:nth-child(3){--p1:#2F9E6E;--p2:#1F8559;--pt:#E6F7EF;--pb:linear-gradient(135deg,#1F8559 0%,#2F9E6E 50%,#7CD3A8 100%)} :root[data-theme="learnndev"] #pricing .sh-plan:nth-child(2){--p1:#E84A9E;--p2:#E8861E;--pt:#FFF0F6;--pb:linear-gradient(135deg,#E84A9E 0%,#EE6A7C 50%,#E8861E 100%)} :root[data-theme="learnndev"] #pricing .sh-plan.on{box-shadow:0 40px 64px -30px #E8606E!important} :root[data-theme="learnndev"] #pricing .sh-plan.on .cta{color:#D63F8D!important;-webkit-text-fill-color:#D63F8D} :root[data-theme="learnndev"] #pricing .sh-flag{color:#D63F8D!important} :root[data-theme="learnndev"] #pricing .sh-flag.alt{background:linear-gradient(135deg,#1F8559,#5CC3A5)!important;color:#fff!important} :root[data-theme="learnndev"] #pricing .sh-plan:nth-child(1) li:not(.no)::before{border-color:#3A5CA8!important} :root[data-theme="learnndev"] #pricing .sh-plan:nth-child(3) li::before{border-color:#1F8559!important} :root[data-theme="learnndev"] #pricing .sh-plan:nth-child(1) .ghost{color:#3A5CA8!important} :root[data-theme="learnndev"] #pricing .sh-plan:nth-child(3) .ghost{color:#1F8559!important} /* ---- block 43 pricing-v5 ---- */ :root[data-theme="learnndev"] #pricing .sh-plan .ghost:hover,:root[data-theme="learnndev"] #pricing .sh-plan:nth-child(1) .ghost:hover,:root[data-theme="learnndev"] #pricing .sh-plan:nth-child(3) .ghost:hover{color:#fff!important;-webkit-text-fill-color:#fff!important} /* ---- block 44 faq-css ---- */ :root[data-theme="learnndev"] #faq .faq-head{text-align:center} :root[data-theme="learnndev"] #faq .faq-head h2 em{background:none;background-image:linear-gradient(90deg,#E59322,#E84A9E);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;font-style:normal;display:inline} :root[data-theme="learnndev"] #faq .fq-list{display:grid;gap:12px;max-width:760px;margin:34px auto 0} :root[data-theme="learnndev"] #faq .fq{position:relative;border-radius:16px;background:#fff;box-shadow:0 0 0 1.5px #ECE6DC,0 10px 22px -18px rgba(30,36,51,.4);border-left:4px solid var(--fc);overflow:hidden;transition:box-shadow .3s ease,transform .3s ease,background .3s ease} :root[data-theme="learnndev"] #faq .fq:hover{transform:translateY(-2px);box-shadow:0 0 0 1.5px color-mix(in srgb,var(--fc) 45%,#fff),0 16px 26px -18px color-mix(in srgb,var(--fc) 70%,transparent)} :root[data-theme="learnndev"] #faq .fq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;cursor:pointer;font:600 15.5px/1.4 var(--font);color:#1E2433;user-select:none} :root[data-theme="learnndev"] #faq .fq summary::-webkit-details-marker{display:none} :root[data-theme="learnndev"] #faq .fq summary i{flex:none;position:relative;width:26px;height:26px;border-radius:50%;background:color-mix(in srgb,var(--fc) 14%,#fff);transition:transform .35s ease,background .3s} :root[data-theme="learnndev"] #faq .fq summary i::before,:root[data-theme="learnndev"] #faq .fq summary i::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:2px;margin:-1px 0 0 -5.5px;border-radius:2px;background:var(--fc);transition:transform .35s ease} :root[data-theme="learnndev"] #faq .fq summary i::after{transform:rotate(90deg)} :root[data-theme="learnndev"] #faq .fq[open]{background:linear-gradient(180deg,color-mix(in srgb,var(--fc) 9%,#fff),#fff 70%)} :root[data-theme="learnndev"] #faq .fq[open] summary i{background:var(--fc);transform:rotate(180deg)} :root[data-theme="learnndev"] #faq .fq[open] summary i::before,:root[data-theme="learnndev"] #faq .fq[open] summary i::after{background:#fff} :root[data-theme="learnndev"] #faq .fq[open] summary i::after{transform:rotate(0)} :root[data-theme="learnndev"] #faq .fa{padding:0 20px 18px} :root[data-theme="learnndev"] #faq .fa p{margin:0;max-width:62ch;color:#4A5268;font-size:15px;line-height:1.65;animation:faIn .4s ease both} @keyframes faIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){:root[data-theme="learnndev"] #faq .fa p{animation:none}} /* ---- block 45 kind-v8 ---- */ :root[data-theme="learnndev"] #kind .k-gen{--bgc:linear-gradient(135deg,#F06CB4 0%,#E84A9E 45%,#C0397F 100%);--sh:#D63F8D;--c1:#C0397F} :root[data-theme="learnndev"] #kind .k-info{--bgc:linear-gradient(135deg,#F7BE5C 0%,#EE9A33 45%,#E0701F 100%);--sh:#E8861E;--c1:#B86F00} :root[data-theme="learnndev"] #kind .k-gen .ck-q{background:linear-gradient(135deg,#F06CB4,#C0397F)!important} :root[data-theme="learnndev"] #kind .k-info .ck-q{background:linear-gradient(135deg,#F2B04A,#E0701F)!important} :root[data-theme="learnndev"] #kind .k-gen .ck-bot .ck-dots b{background:#E84A9E!important} :root[data-theme="learnndev"] #kind .k-info .ck-bot .ck-dots b{background:#E8861E!important} :root[data-theme="learnndev"] #kind .k-gen .ck-list li>span,:root[data-theme="learnndev"] #kind .k-info .ck-list li>span{color:var(--c1)!important} :root[data-theme="learnndev"] #kind .ck-or{background:linear-gradient(135deg,#E84A9E,#E8861E)!important;box-shadow:0 12px 22px -8px rgba(232,74,158,.55)!important} :root[data-theme="learnndev"] #kind .k-gen .ck-card.on .ck-radio i,:root[data-theme="learnndev"] #kind .k-gen .ck-radio i{background:#C0397F!important} :root[data-theme="learnndev"] #kind .k-info .ck-radio i{background:#E0701F!important} /* ---- block 46 kind-v9 ---- */ :root[data-theme="learnndev"] #kind .kic{width:76px!important;height:76px!important;padding:12px!important;stroke:none!important;border:0!important;border-radius:24px!important;background:#fff!important;box-shadow:0 16px 26px -12px rgba(30,36,51,.45),0 0 0 4px rgba(255,255,255,.35)!important;margin:0 18px 14px 0!important} /* ---- block 47 kind-v10 ---- */ :root[data-theme="learnndev"] #textvoice .tv-copy h2{letter-spacing:normal!important} /* ---- block 48 kind-v11 ---- */ :root[data-theme="learnndev"] #kind .k-gen{--k1:#E84A9E;--k2:#C0397F;--kt:#FFF0F7} :root[data-theme="learnndev"] #kind .k-info{--k1:#E8861E;--k2:#C26510;--kt:#FFF4E5} :root[data-theme="learnndev"] #kind .ck-card::after{background:#fff!important;border:2px solid var(--k1)!important;box-shadow:0 22px 40px -30px var(--k1)!important;transition:background .45s ease,border-color .45s ease,box-shadow .45s ease!important} :root[data-theme="learnndev"] #kind .ck-card .ckt h3{color:var(--k2)!important;transition:color .35s} :root[data-theme="learnndev"] #kind .ck-card .ckt .ck-d,:root[data-theme="learnndev"] #kind .ck-card .ck-list li{color:#3F4657!important;transition:color .35s} :root[data-theme="learnndev"] #kind .ck-card .ck-best,:root[data-theme="learnndev"] #kind .ck-card .ck-best b{color:#3F4657!important;transition:color .35s} :root[data-theme="learnndev"] #kind .ck-card .ckt .ck-tag{background:var(--kt)!important;border:1.5px solid var(--k1)!important;color:var(--k2)!important;transition:all .35s} :root[data-theme="learnndev"] #kind .ck-card .ckb .ck-list{border-top-color:color-mix(in srgb,var(--k1) 35%,#fff)!important} :root[data-theme="learnndev"] #kind .ck-card .ckb .ck-best{border-top-color:color-mix(in srgb,var(--k1) 45%,#fff)!important} :root[data-theme="learnndev"] #kind .ck-card .ck-list li>span{background:linear-gradient(135deg,var(--k1),var(--k2))!important;color:#fff!important;transition:all .35s} :root[data-theme="learnndev"] #kind .ck-card .kic{border:1.5px solid var(--k1)!important;box-shadow:0 12px 22px -14px var(--k1)!important;transition:all .35s} :root[data-theme="learnndev"] #kind .ck-card .ck-radio{background:#fff!important;border-color:var(--k1)!important} :root[data-theme="learnndev"] #kind .ck-card .ck-radio i{background:var(--k1)!important} :root[data-theme="learnndev"] #kind .ck-card .ckb .ck-chat{background:var(--kt)!important;border:1.5px solid color-mix(in srgb,var(--k1) 35%,#fff)!important;box-shadow:none!important;transition:all .35s} :root[data-theme="learnndev"] #kind .ck-card:hover::after,:root[data-theme="learnndev"] #kind .ck-card.never::after{background:var(--bgc)!important;border-color:transparent!important;box-shadow:0 26px 48px -28px var(--sh)!important} :root[data-theme="learnndev"] #kind .ck-card:hover .ckt h3,:root[data-theme="learnndev"] #kind .ck-card.never .ckt h3{color:#fff!important} :root[data-theme="learnndev"] #kind .ck-card:hover .ckt .ck-d,:root[data-theme="learnndev"] #kind .ck-card.never .ckt .ck-d{color:#fff!important} :root[data-theme="learnndev"] #kind .ck-card:hover .ck-list li,:root[data-theme="learnndev"] #kind .ck-card.never .ck-list li{color:#fff!important} :root[data-theme="learnndev"] #kind .ck-card:hover .ck-best,:root[data-theme="learnndev"] #kind .ck-card.never .ck-best{color:#fff!important} :root[data-theme="learnndev"] #kind .ck-card:hover .ck-best b,:root[data-theme="learnndev"] #kind .ck-card.never .ck-best b{color:#fff!important} :root[data-theme="learnndev"] #kind .ck-card:hover .ckt .ck-tag,:root[data-theme="learnndev"] #kind .ck-card.never .ckt .ck-tag{background:rgba(255,255,255,.26)!important;border-color:rgba(255,255,255,.7)!important;color:#fff!important} :root[data-theme="learnndev"] #kind .ck-card:hover .ckb .ck-list,:root[data-theme="learnndev"] #kind .ck-card.never .ckb .ck-list{border-top-color:rgba(255,255,255,.4)!important} :root[data-theme="learnndev"] #kind .ck-card:hover .ckb .ck-best,:root[data-theme="learnndev"] #kind .ck-card.never .ckb .ck-best{border-top-color:rgba(255,255,255,.45)!important} :root[data-theme="learnndev"] #kind .ck-card:hover .ck-list li>span,:root[data-theme="learnndev"] #kind .ck-card.never .ck-list li>span{background:#fff!important;color:var(--k2)!important} :root[data-theme="learnndev"] #kind .ck-card:hover .kic,:root[data-theme="learnndev"] #kind .ck-card.never .kic{border-color:transparent!important;box-shadow:0 16px 26px -12px rgba(30,36,51,.45),0 0 0 4px rgba(255,255,255,.35)!important} :root[data-theme="learnndev"] #kind .ck-card:hover .ck-radio,:root[data-theme="learnndev"] #kind .ck-card.never .ck-radio{background:rgba(255,255,255,.3)!important;border-color:#fff!important} :root[data-theme="learnndev"] #kind .ck-card.never .ck-radio{background:#fff!important} :root[data-theme="learnndev"] #kind .ck-card.never .ck-radio i{background:var(--k2)!important} :root[data-theme="learnndev"] #kind .ck-card:hover .ckb .ck-chat,:root[data-theme="learnndev"] #kind .ck-card.never .ckb .ck-chat{background:#fff!important;border-color:transparent!important;box-shadow:0 18px 32px -20px rgba(30,36,51,.45)!important} :root[data-theme="learnndev"] #kind .ck-radio{display:none!important} :root[data-theme="learnndev"] #kind .ck-card{cursor:default!important} :root[data-theme="learnndev"] #kind .ck-card.on::after{box-shadow:0 22px 40px -30px var(--k1)!important} :root[data-theme="learnndev"] #kind .ck-card.on:hover::after{box-shadow:0 26px 48px -28px var(--sh)!important} /* ---- block 49 gap2-nx ---- */ :root[data-theme="learnndev"] #gap2 .gm.nx{min-height:176px;display:flex!important;flex-direction:column;gap:12px;justify-content:space-between;position:relative;font-size:12.5px;color:#3F4657} :root[data-theme="learnndev"] #gap2 .nx>div:first-child{display:flex;align-items:center;justify-content:space-between;font-weight:700} :root[data-theme="learnndev"] #gap2 .nx>div:first-child b{padding:3px 9px;border-radius:99px;background:var(--tint2);color:var(--ink2);font-size:11.5px} :root[data-theme="learnndev"] #gap2 .n1-track{position:relative;height:8px;margin:10px 8px 0;border-radius:8px;background:var(--tint2)} :root[data-theme="learnndev"] #gap2 .n1-fill{position:absolute;left:0;top:0;bottom:0;border-radius:8px;background:linear-gradient(90deg,var(--s1),var(--s2));animation:n1f 6s ease-in-out infinite} :root[data-theme="learnndev"] #gap2 .n1-n{position:absolute;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:#fff;border:3px solid var(--tint2);animation:n1n 6s infinite} :root[data-theme="learnndev"] #gap2 .n1-n.a{left:0}:root[data-theme="learnndev"] #gap2 .n1-n.b{left:50%;animation-delay:0s}:root[data-theme="learnndev"] #gap2 .n1-n.c{left:100%} :root[data-theme="learnndev"] #gap2 .n1-n.b{animation-name:n1nb}:root[data-theme="learnndev"] #gap2 .n1-n.c{animation-name:n1nc}:root[data-theme="learnndev"] #gap2 .n1-n.a{animation-name:n1na} :root[data-theme="learnndev"] #gap2 .n1-dot{position:absolute;top:50%;left:0;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:linear-gradient(135deg,var(--s1),var(--s2));box-shadow:0 0 0 5px color-mix(in srgb,var(--s1) 25%,transparent);animation:n1d 6s ease-in-out infinite} :root[data-theme="learnndev"] #gap2 .n1-lab{display:flex;justify-content:space-between;font-weight:600;font-size:11.5px;color:#7A8092} :root[data-theme="learnndev"] #gap2 .n1-res{position:relative;height:34px} :root[data-theme="learnndev"] #gap2 .n1-res span{position:absolute;left:0;top:0;padding:8px 13px;border-radius:14px 14px 14px 4px;font-weight:700;opacity:0} :root[data-theme="learnndev"] #gap2 .n1-res .q{background:var(--tint2);color:var(--ink2);animation:n1q 6s infinite} :root[data-theme="learnndev"] #gap2 .n1-res .x{background:linear-gradient(135deg,var(--s1),var(--s2));color:#fff;border-radius:99px;animation:n1x 6s infinite} @keyframes n1f{0%{width:0}35%{width:50%}55%{width:50%}90%,100%{width:100%}} @keyframes n1d{0%{left:0}35%,55%{left:50%}90%,100%{left:100%}} @keyframes n1na{0%,100%{background:var(--s1);border-color:var(--s1)}} @keyframes n1nb{0%,30%{background:#fff;border-color:var(--tint2)}40%,100%{background:var(--s1);border-color:var(--s1)}} @keyframes n1nc{0%,85%{background:#fff;border-color:var(--tint2)}92%,100%{background:var(--s2);border-color:var(--s2)}} @keyframes n1q{0%,32%{opacity:0;transform:translateY(8px) scale(.9)}40%,58%{opacity:1;transform:none}66%,100%{opacity:0;transform:translateY(-4px)}} @keyframes n1x{0%,86%{opacity:0;transform:scale(.8)}93%,100%{opacity:1;transform:none}} :root[data-theme="learnndev"] #gap2 .n2-cnt::before{content:"\00d7" counter(n2c);counter-reset:n2c var(--n2n);animation:n2c 6s infinite} @property --n2n{syntax:"";inherits:false;initial-value:0} @keyframes n2c{0%{--n2n:0}45%,100%{--n2n:20}} :root[data-theme="learnndev"] #gap2 .n2-bars{display:flex;align-items:flex-end;gap:10px;height:70px} :root[data-theme="learnndev"] #gap2 .n2-bars>div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:5px;height:100%} :root[data-theme="learnndev"] #gap2 .n2-bars i{display:block;width:100%;height:100%;max-height:48px;border-radius:8px 8px 4px 4px;background:linear-gradient(180deg,var(--s1),var(--s2));transform-origin:bottom;transform:scaleY(0);animation:n2b 6s infinite} :root[data-theme="learnndev"] #gap2 .n2-bars>div:nth-child(2) i{animation-delay:.35s}:root[data-theme="learnndev"] #gap2 .n2-bars>div:nth-child(3) i{animation-delay:.7s}:root[data-theme="learnndev"] #gap2 .n2-bars>div:nth-child(4) i{animation-delay:1.05s} :root[data-theme="learnndev"] #gap2 .n2-bars span{font-size:10.5px;font-weight:600;color:#7A8092} @keyframes n2b{0%{transform:scaleY(0)}18%,80%{transform:scaleY(1)}92%,100%{transform:scaleY(0)}} :root[data-theme="learnndev"] #gap2 .n2-foot{display:flex;align-items:center;gap:8px;padding:8px 11px;border-radius:12px;background:var(--tint2);font-weight:600;color:var(--ink2)} :root[data-theme="learnndev"] #gap2 .n2-foot .ic{display:inline-block;animation:n2r 3s linear infinite} :root[data-theme="learnndev"] #gap2 .n2-foot em{margin-left:auto;font-style:normal;padding:2px 9px;border-radius:99px;background:var(--s1);color:#fff;font-size:10.5px;font-weight:800;text-transform:uppercase;-webkit-text-fill-color:#fff} @keyframes n2r{to{transform:rotate(360deg)}} :root[data-theme="learnndev"] #gap2 .n3-page{position:relative;display:grid;gap:8px;padding:14px 16px 14px;border-radius:12px;background:var(--tint);border:1px solid var(--tint2)} :root[data-theme="learnndev"] #gap2 .n3-page i{display:block;height:7px;border-radius:4px;background:var(--tint2);animation:n3l 6s infinite} :root[data-theme="learnndev"] #gap2 .n3-page .l1{width:92%}:root[data-theme="learnndev"] #gap2 .n3-page .l2{width:78%;animation-delay:.9s}:root[data-theme="learnndev"] #gap2 .n3-page .l3{width:86%;animation-delay:1.8s}:root[data-theme="learnndev"] #gap2 .n3-page .l4{width:64%;animation-delay:2.7s}:root[data-theme="learnndev"] #gap2 .n3-page .l5{width:80%;animation-delay:3.6s} @keyframes n3l{0%,2%{background:var(--tint2)}8%,16%{background:var(--s1)}24%,100%{background:var(--tint2)}} :root[data-theme="learnndev"] #gap2 .n3-mag{position:absolute;left:8%;top:4px;width:30px;height:30px;color:var(--ink2);filter:drop-shadow(0 4px 6px rgba(30,36,51,.25));animation:n3m 6s ease-in-out infinite} @keyframes n3m{0%{transform:translate(0,0)}15%{transform:translate(110px,10px)}30%{transform:translate(20px,22px)}45%{transform:translate(130px,36px)}60%{transform:translate(40px,48px)}80%,100%{transform:translate(150px,52px)}} :root[data-theme="learnndev"] #gap2 .n3-res{position:relative;height:30px} :root[data-theme="learnndev"] #gap2 .n3-res span{position:absolute;left:0;top:0;padding:7px 12px;border-radius:99px;font-weight:700;opacity:0} :root[data-theme="learnndev"] #gap2 .n3-res .s{background:var(--tint2);color:var(--ink2);animation:n3s 6s infinite} :root[data-theme="learnndev"] #gap2 .n3-res .f{background:linear-gradient(135deg,var(--s1),var(--s2));color:#fff;animation:n3f 6s infinite} @keyframes n3s{0%,4%{opacity:0}8%,70%{opacity:1}78%,100%{opacity:0}} @keyframes n3f{0%,76%{opacity:0;transform:translateY(6px)}84%,96%{opacity:1;transform:none}100%{opacity:0}} @media (prefers-reduced-motion:reduce){:root[data-theme="learnndev"] #gap2 .nx *{animation:none!important}:root[data-theme="learnndev"] #gap2 .n2-bars i{transform:none}:root[data-theme="learnndev"] #gap2 .n1-res .x,:root[data-theme="learnndev"] #gap2 .n3-res .f{opacity:1}} /* ---- block 50 kind-kn ---- */ :root[data-theme="learnndev"] #kind .k-kn{--k1:#2F9E6E;--k2:#1F8559;--kt:#EAF8F1;--bgc:linear-gradient(135deg,#5CC3A5 0%,#2F9E6E 50%,#1F8559 100%);--sh:#2F9E6E;--c1:#1F8559} :root[data-theme="learnndev"] #kind .k-kn .ck-q{background:linear-gradient(135deg,#5CC3A5,#1F8559)!important} :root[data-theme="learnndev"] #kind .k-kn .ck-bot .ck-dots b{background:#2F9E6E!important} :root[data-theme="learnndev"] #kind .ck-grid{grid-template-columns:minmax(0,1fr) 54px minmax(0,1fr) 54px minmax(0,1fr)!important;max-width:1260px!important} :root[data-theme="learnndev"] #kind .ck-or{background:linear-gradient(135deg,#E84A9E,#E8861E)!important} :root[data-theme="learnndev"] #kind .ck-grid .ck-or:nth-of-type(2){background:linear-gradient(135deg,#E84A9E,#2F9E6E)!important} :root[data-theme="learnndev"] #kind .ck-grid .ck-or:nth-of-type(3){background:linear-gradient(135deg,#2F9E6E,#E8861E)!important} @media (max-width:1100px){:root[data-theme="learnndev"] #kind .ck-grid{grid-template-columns:1fr!important;gap:0!important;max-width:560px!important}} /* ---- block 51 kind-fix ---- */ :root[data-theme="learnndev"] #kind .ck-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:26px!important;max-width:1260px!important} :root[data-theme="learnndev"] #kind .kic{overflow:visible} @media (max-width:1100px){:root[data-theme="learnndev"] #kind .ck-grid{grid-template-columns:1fr!important;gap:22px!important;max-width:560px!important}} /* ---- block 52 kind-v8 ---- */ /* resting card: soft same-colour gradient, never white */ :root[data-theme="learnndev"] #kind .ck-card::after{background:linear-gradient(160deg,color-mix(in srgb,var(--k1) 30%,#fff),color-mix(in srgb,var(--k1) 10%,#fff) 78%)!important;border:2px solid var(--k1)!important} :root[data-theme="learnndev"] #kind .ck-card:hover::after,:root[data-theme="learnndev"] #kind .ck-card.never::after{background:var(--bgc)!important;border-color:transparent!important} /* the light sweep loops by itself; hover no longer restarts it */ @keyframes kLoop{0%,50%{background-position:130% 0}100%{background-position:-40% 0}} :root[data-theme="learnndev"] #kind .ck-card::before,:root[data-theme="learnndev"] #kind .ck-card:hover::before{animation:kLoop 5s ease-in-out infinite!important} :root[data-theme="learnndev"] #kind .ck-grid>.ck-card:nth-child(3)::before{animation-delay:-1.7s!important} :root[data-theme="learnndev"] #kind .ck-grid>.ck-card:nth-child(5)::before{animation-delay:-3.4s!important} /* icon tile floats continuously */ @keyframes kBob{50%{transform:translateY(-4px) rotate(-3deg)}} :root[data-theme="learnndev"] #kind .ck-card .kic{animation:kBob 4.2s ease-in-out infinite} :root[data-theme="learnndev"] #kind .ck-grid>.ck-card:nth-child(3) .kic{animation-delay:-1.4s} :root[data-theme="learnndev"] #kind .ck-grid>.ck-card:nth-child(5) .kic{animation-delay:-2.8s} /* text flips with the fill, so nothing is unreadable mid-change */ :root[data-theme="learnndev"] #kind .ck-card .ckt h3,:root[data-theme="learnndev"] #kind .ck-card .ckt .ck-d,:root[data-theme="learnndev"] #kind .ck-card .ck-list li,:root[data-theme="learnndev"] #kind .ck-card .ck-best,:root[data-theme="learnndev"] #kind .ck-card .ck-best b,:root[data-theme="learnndev"] #kind .ck-card .ckt .ck-tag,:root[data-theme="learnndev"] #kind .ck-card .ck-list li>span,:root[data-theme="learnndev"] #kind .ck-card .kic,:root[data-theme="learnndev"] #kind .ck-card .ckb .ck-chat{transition:none!important} /* chat demo: loops on its own, hover does not restart it */ @keyframes kQ{0%{opacity:0;transform:translateY(10px) scale(.96)}6%,90%{opacity:1;transform:none}100%{opacity:0;transform:none}} @keyframes kDots{0%,10%{opacity:0}14%,30%{opacity:1}34%,100%{opacity:0}} @keyframes kAns{0%,32%{opacity:0;transform:translateY(10px) scale(.96)}39%,90%{opacity:1;transform:none}100%{opacity:0;transform:none}} @keyframes kSrc{0%,43%{opacity:0;transform:translateY(8px) scale(.9)}49%,90%{opacity:1;transform:none}100%{opacity:0;transform:none}} :root[data-theme="learnndev"] #kind .ck-card .ck-q,:root[data-theme="learnndev"] #kind .ck-card:hover .ck-q{animation:kQ 7.5s cubic-bezier(.2,.8,.2,1) infinite!important} :root[data-theme="learnndev"] #kind .ck-card .ck-dots,:root[data-theme="learnndev"] #kind .ck-card:hover .ck-dots{display:flex!important;animation:kDots 7.5s linear infinite!important} :root[data-theme="learnndev"] #kind .ck-card .ck-ans,:root[data-theme="learnndev"] #kind .ck-card:hover .ck-ans{animation:kAns 7.5s cubic-bezier(.2,.8,.2,1) infinite!important} :root[data-theme="learnndev"] #kind .ck-card .ck-src,:root[data-theme="learnndev"] #kind .ck-card:hover .ck-src{animation:kSrc 7.5s cubic-bezier(.2,1.4,.5,1) infinite!important} :root[data-theme="learnndev"] #kind .ck-grid>.ck-card:nth-child(3) :is(.ck-q,.ck-dots,.ck-ans,.ck-src){animation-delay:-2.5s!important} :root[data-theme="learnndev"] #kind .ck-grid>.ck-card:nth-child(5) :is(.ck-q,.ck-dots,.ck-ans,.ck-src){animation-delay:-5s!important} @media (prefers-reduced-motion:reduce){:root[data-theme="learnndev"] #kind .ck-card :is(.ck-q,.ck-dots,.ck-ans,.ck-src){animation:none!important}:root[data-theme="learnndev"] #kind .ck-card .ck-dots{display:none!important}} @media (prefers-reduced-motion:reduce){:root[data-theme="learnndev"] #kind .ck-card::before,:root[data-theme="learnndev"] #kind .ck-card .kic{animation:none!important}} /* ---- block 53 kind-v10 ---- */ /* ===== split card: colour hero on top, clean white body below ===== */ :root[data-theme="learnndev"] #kind .k-gen.ck-card{--h1:#F06CB4;--h2:#C0397F;--h3:#8E3A9E} :root[data-theme="learnndev"] #kind .k-kn.ck-card{--h1:#5CC3A5;--h2:#1F8559;--h3:#16603F} :root[data-theme="learnndev"] #kind .k-info.ck-card{--h1:#F6B552;--h2:#E8801F;--h3:#C4561A} :root[data-theme="learnndev"] #kind .ck-card::after,:root[data-theme="learnndev"] #kind .ck-card:hover::after,:root[data-theme="learnndev"] #kind .ck-card.never::after{background:#fff!important;border:0!important;border-radius:28px!important;box-shadow:0 30px 56px -30px var(--h2),0 2px 0 rgba(255,255,255,.9) inset,0 0 0 1px color-mix(in srgb,var(--h1) 30%,#fff)!important} :root[data-theme="learnndev"] #kind .ck-card::before,:root[data-theme="learnndev"] #kind .ck-card:hover::before,:root[data-theme="learnndev"] #kind .ck-card.never::before{display:none!important} :root[data-theme="learnndev"] #kind .ck-card .ck-glow,:root[data-theme="learnndev"] #kind .ck-card:hover .ck-glow,:root[data-theme="learnndev"] #kind .ck-card.never .ck-glow{display:none!important} :root[data-theme="learnndev"] #kind .ck-card{transition:transform .5s cubic-bezier(.2,.8,.2,1),filter .4s!important} :root[data-theme="learnndev"] #kind .ck-card:hover{transform:translateY(-8px)!important} /* hero */ :root[data-theme="learnndev"] #kind .ck-card .ckt,:root[data-theme="learnndev"] #kind .ck-card:hover .ckt,:root[data-theme="learnndev"] #kind .ck-card.never .ckt{position:relative;overflow:hidden;padding:30px 28px 56px!important;background:linear-gradient(140deg,var(--h1),var(--h2) 62%,var(--h3))!important;border-radius:28px 28px 0 0!important;color:#fff;-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20400%2040%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%200H400V14C330%2044%20270%200%20200%2016S70%2040%200%2012Z%27%20fill%3D%27black%27/%3E%3C/svg%3E") left bottom/100% 40px no-repeat,linear-gradient(#000 0 0) left top/100% calc(100% - 39px) no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20400%2040%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%200H400V14C330%2044%20270%200%20200%2016S70%2040%200%2012Z%27%20fill%3D%27black%27/%3E%3C/svg%3E") left bottom/100% 40px no-repeat,linear-gradient(#000 0 0) left top/100% calc(100% - 39px) no-repeat} :root[data-theme="learnndev"] #kind .ckt::before{content:"";position:absolute;right:-70px;top:-70px;width:300px;height:300px;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20300%20300%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-opacity%3D%27.11%27%20stroke-width%3D%271.5%27%3E%3Ccircle%20cx%3D%27150%27%20cy%3D%27150%27%20r%3D%2740%27/%3E%3Ccircle%20cx%3D%27150%27%20cy%3D%27150%27%20r%3D%2780%27/%3E%3Ccircle%20cx%3D%27150%27%20cy%3D%27150%27%20r%3D%27120%27/%3E%3Ccircle%20cx%3D%27150%27%20cy%3D%27150%27%20r%3D%27148%27/%3E%3C/g%3E%3Cg%20fill%3D%27white%27%20fill-opacity%3D%27.22%27%3E%3Ccircle%20cx%3D%27150%27%20cy%3D%2730%27%20r%3D%274%27/%3E%3Ccircle%20cx%3D%27270%27%20cy%3D%27150%27%20r%3D%273%27/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;animation:kSpin 40s linear infinite;pointer-events:none} :root[data-theme="learnndev"] #kind .ckt::after{content:""!important;position:absolute!important;inset:0!important;width:auto!important;height:auto!important;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.3) 50%,transparent 62%) no-repeat!important;background-color:transparent!important;background-size:260% 100%!important;background-position:130% 0;animation:kLoop 5.5s ease-in-out infinite!important;pointer-events:none;border:0!important;box-shadow:none!important;border-radius:0!important;opacity:1!important;transform:none!important;z-index:0} @keyframes kSpin{to{transform:rotate(360deg)}} :root[data-theme="learnndev"] #kind .ckt>*{position:relative;z-index:1} :root[data-theme="learnndev"] #kind .ck-card .ckt h3,:root[data-theme="learnndev"] #kind .ck-card:hover .ckt h3,:root[data-theme="learnndev"] #kind .ck-card.never .ckt h3{color:#fff!important;text-shadow:0 2px 14px rgba(0,0,0,.18)} :root[data-theme="learnndev"] #kind .ck-card .ckt h3::after,:root[data-theme="learnndev"] #kind .ck-card:hover .ckt h3::after,:root[data-theme="learnndev"] #kind .ck-card.never .ckt h3::after{background:#fff!important;opacity:.9} :root[data-theme="learnndev"] #kind .ck-card .ckt .ck-d,:root[data-theme="learnndev"] #kind .ck-card:hover .ckt .ck-d,:root[data-theme="learnndev"] #kind .ck-card.never .ckt .ck-d{color:rgba(255,255,255,.94)!important} :root[data-theme="learnndev"] #kind .ck-card .ckt .ck-tag,:root[data-theme="learnndev"] #kind .ck-card:hover .ckt .ck-tag,:root[data-theme="learnndev"] #kind .ck-card.never .ckt .ck-tag{background:rgba(255,255,255,.22)!important;border:1px solid rgba(255,255,255,.7)!important;color:#fff!important;box-shadow:none!important} :root[data-theme="learnndev"] #kind .ck-card .kic,:root[data-theme="learnndev"] #kind .ck-card:hover .kic,:root[data-theme="learnndev"] #kind .ck-card.never .kic{background:#fff!important;border:0!important;stroke:var(--h2)!important;box-shadow:0 16px 26px -12px rgba(0,0,0,.4),0 0 0 5px rgba(255,255,255,.28)!important} /* body */ :root[data-theme="learnndev"] #kind .ckb{padding:6px 28px 28px!important;position:relative;z-index:1} :root[data-theme="learnndev"] #kind .ck-card .ckb .ck-list,:root[data-theme="learnndev"] #kind .ck-card:hover .ckb .ck-list,:root[data-theme="learnndev"] #kind .ck-card.never .ckb .ck-list{background:none!important;border:0!important;box-shadow:none!important;padding:6px 0 0!important;margin:0 0 18px!important;border-radius:0} :root[data-theme="learnndev"] #kind .ck-card .ck-list li,:root[data-theme="learnndev"] #kind .ck-card:hover .ck-list li,:root[data-theme="learnndev"] #kind .ck-card.never .ck-list li{color:#2A3142!important} :root[data-theme="learnndev"] #kind .ck-card .ck-list li>span,:root[data-theme="learnndev"] #kind .ck-card:hover .ck-list li>span,:root[data-theme="learnndev"] #kind .ck-card.never .ck-list li>span{background:linear-gradient(135deg,var(--h1),var(--h2))!important;color:#fff!important} :root[data-theme="learnndev"] #kind .ck-card .ckb .ck-chat,:root[data-theme="learnndev"] #kind .ck-card:hover .ckb .ck-chat,:root[data-theme="learnndev"] #kind .ck-card.never .ckb .ck-chat{background:color-mix(in srgb,var(--h1) 12%,#fff)!important;border:0!important;border-radius:22px!important;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--h1) 40%,#fff)!important;padding:16px!important;overflow:visible} :root[data-theme="learnndev"] #kind .ck-card .ck-chat::before,:root[data-theme="learnndev"] #kind .ck-card:hover .ck-chat::before,:root[data-theme="learnndev"] #kind .ck-card.never .ck-chat::before{display:none!important} :root[data-theme="learnndev"] #kind .ck-card .ck-chat::after,:root[data-theme="learnndev"] #kind .ck-card:hover .ck-chat::after,:root[data-theme="learnndev"] #kind .ck-card.never .ck-chat::after{display:none!important} :root[data-theme="learnndev"] #kind .ck-card .ck-ans,:root[data-theme="learnndev"] #kind .ck-card:hover .ck-ans,:root[data-theme="learnndev"] #kind .ck-card.never .ck-ans{box-shadow:0 10px 20px -14px var(--h2)} :root[data-theme="learnndev"] #kind .ck-card .ck-q,:root[data-theme="learnndev"] #kind .ck-card:hover .ck-q,:root[data-theme="learnndev"] #kind .ck-card.never .ck-q{background:linear-gradient(135deg,var(--h1),var(--h2))!important;box-shadow:0 10px 18px -10px var(--h2)} :root[data-theme="learnndev"] #kind .ck-card .ckb .ck-best,:root[data-theme="learnndev"] #kind .ck-card:hover .ckb .ck-best,:root[data-theme="learnndev"] #kind .ck-card.never .ckb .ck-best{color:#3F4657!important;background:none!important;border:0!important;border-top:2px dashed color-mix(in srgb,var(--h1) 55%,#fff)!important;border-radius:0!important;padding:16px 0 0!important} :root[data-theme="learnndev"] #kind .ck-card .ckb .ck-best b,:root[data-theme="learnndev"] #kind .ck-card:hover .ckb .ck-best b,:root[data-theme="learnndev"] #kind .ck-card.never .ckb .ck-best b{color:var(--h2)!important} :root[data-theme="learnndev"] #kind .ck-card .ckb .ck-best::before,:root[data-theme="learnndev"] #kind .ck-card:hover .ckb .ck-best::before,:root[data-theme="learnndev"] #kind .ck-card.never .ckb .ck-best::before{display:none!important} @media (prefers-reduced-motion:reduce){:root[data-theme="learnndev"] #kind .ckt::before,:root[data-theme="learnndev"] #kind .ckt::after{animation:none!important}} /* ---- block 54 ---- */ /* loader: simple. The mark first, then AURA slides in from both sides, then the line */ #lnd-load .ll-in{gap:0} #lnd-load .ll-lg{position:relative;width:260px;aspect-ratio:560/414} #lnd-load .lp{position:absolute;inset:0;width:100%;height:100%;display:block;max-width:none;filter:var(--lgf,none);opacity:0} #lnd-load .lp-i{animation:lpIcon .7s cubic-bezier(.22,1,.36,1) .1s forwards} #lnd-load .lp-u,#lnd-load .lp-a1{-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 50%,#000 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 50%,#000 100%)} #lnd-load .lp-r1,#lnd-load .lp-a2{-webkit-mask-image:linear-gradient(270deg,transparent 0%,#000 50%,#000 100%);mask-image:linear-gradient(270deg,transparent 0%,#000 50%,#000 100%)} #lnd-load .lp-u,#lnd-load .lp-a1,#lnd-load .lp-r1,#lnd-load .lp-a2{-webkit-mask-size:300% 100%;mask-size:300% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat} #lnd-load .lp-i{animation:lpIcon .5s cubic-bezier(.22,1,.36,1) .05s forwards} #lnd-load .lp-u{animation:lpL .6s cubic-bezier(.25,.8,.3,1) .4s forwards} #lnd-load .lp-r1{animation:lpR .6s cubic-bezier(.25,.8,.3,1) .4s forwards} #lnd-load .lp-a1{animation:lpL2 .65s cubic-bezier(.25,.8,.3,1) .8s forwards} #lnd-load .lp-a2{animation:lpR2 .65s cubic-bezier(.25,.8,.3,1) .8s forwards} #lnd-load .lp-t{animation:lpT .45s ease 1.4s forwards} @keyframes lpIcon{from{opacity:0;transform:translateY(8px) scale(.9)}to{opacity:1;transform:none}} @keyframes lpL{0%{opacity:0;transform:translateX(-42px);-webkit-mask-position:0% 0;mask-position:0% 0}100%{opacity:1;transform:none;-webkit-mask-position:100% 0;mask-position:100% 0}} @keyframes lpR{0%{opacity:0;transform:translateX(42px);-webkit-mask-position:100% 0;mask-position:100% 0}100%{opacity:1;transform:none;-webkit-mask-position:0% 0;mask-position:0% 0}} @keyframes lpL2{0%{opacity:0;transform:translateX(-64px);-webkit-mask-position:0% 0;mask-position:0% 0}100%{opacity:1;transform:none;-webkit-mask-position:100% 0;mask-position:100% 0}} @keyframes lpR2{0%{opacity:0;transform:translateX(64px);-webkit-mask-position:100% 0;mask-position:100% 0}100%{opacity:1;transform:none;-webkit-mask-position:0% 0;mask-position:0% 0}} @keyframes lpT{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){#lnd-load .lp{animation:none;opacity:1;-webkit-mask-image:none;mask-image:none}} /* ---- block 55 ---- */ /* loader: a thin line under the logo that fills while it loads */ #lnd-load .ll-line{display:block;width:140px;height:2px;margin-top:20px;border-radius:2px;background:color-mix(in srgb,var(--ink,#1e2433) 14%,transparent);position:relative;overflow:hidden} #lnd-load .ll-line::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--accent2,#4fd8ff),var(--accent,#8b7cff));transform:translateX(-100%);animation:llLine 1.9s cubic-bezier(.22,1,.36,1) .1s forwards} @keyframes llLine{to{transform:none}} @media (prefers-reduced-motion:reduce){#lnd-load .ll-line::after{animation:none;transform:none}} /* ---- block 56 ---- */ /* loader line: colourful */ #lnd-load .ll-line{width:170px;height:4px;border-radius:4px;background:color-mix(in srgb,var(--ink,#1e2433) 10%,transparent);overflow:visible} #lnd-load .ll-line::after{border-radius:4px;background:linear-gradient(90deg,#F5A93A,#F08A2E 18%,#E84A9E 40%,#8F6FD0 62%,#5B7FC7 82%,#3FB6A8);background-size:200% 100%;box-shadow:0 0 14px rgba(232,74,158,.55),0 4px 16px -2px rgba(91,127,199,.6);animation:llLine 1.9s cubic-bezier(.22,1,.36,1) .1s forwards,llHue 2.4s linear infinite} @keyframes llHue{to{background-position:-200% 0}} /* ---- block 57 ---- */ /* loader line: fixed, only the colours move */ #lnd-load .ll-line::after{transform:none;background:linear-gradient(90deg,#F5A93A,#F08A2E,#E84A9E,#8F6FD0,#5B7FC7,#3FB6A8,#F5A93A);background-size:200% 100%;animation:llHue 2.2s linear infinite} @keyframes llHue{to{background-position:-200% 0}} @media (prefers-reduced-motion:reduce){#lnd-load .ll-line::after{animation:none}} /* ---- added by us: the fourth plan (Enterprise) in the LearnNDev look ---- */ :root[data-theme="learnndev"] #pricing .sh-plan.ent{--p1:#6A58B0;--p2:#4B3D96;--pt:#F1EEFB;--pb:linear-gradient(135deg,#3A5CA8 0%,#6A58B0 55%,#8E7CD0 100%)} :root[data-theme="learnndev"] #pricing .sh-plan.ent li::before{border-color:#6A58B0!important} :root[data-theme="learnndev"] #pricing .sh-plan.ent .sh-flag.alt{background:linear-gradient(135deg,#3A5CA8,#8E7CD0)!important;color:#fff!important} :root[data-theme="learnndev"] #pricing .sh-plan.ent .ghost{color:#4B3D96!important} :root[data-theme="learnndev"] #pricing .sh-plan.ent .ghost:disabled{opacity:.62;cursor:not-allowed;transform:none;box-shadow:none} :root[data-theme="learnndev"] #pricing .sh-plan.ent .ghost:disabled:hover{background:linear-gradient(#fff,#fff) padding-box,var(--pb) border-box!important;color:#4B3D96!important;-webkit-text-fill-color:#4B3D96!important;transform:none;box-shadow:none} /* ---- polish pass: alignment, overflow and class-name clashes (2026-11-11) ---- */ /* plan cards: the coloured top bar follows the card's rounded corners (it used to poke out at the corner) */ :root[data-theme="learnndev"] #pricing .sh-plan::before{inset:0;height:auto;border-radius:28px;-webkit-mask:linear-gradient(#000 0 8px,transparent 8px);mask:linear-gradient(#000 0 8px,transparent 8px)} /* the little app windows in the three steps never grow wider than their card (long rows used to be cut off) */ :root[data-theme="learnndev"] .wv{min-width:0;grid-template-columns:minmax(0,1fr)} :root[data-theme="learnndev"] .wv>*{min-width:0;max-width:100%} :root[data-theme="learnndev"] .wfile,:root[data-theme="learnndev"] .wlink,:root[data-theme="learnndev"] .wcode{overflow:hidden} :root[data-theme="learnndev"] .wfile .live,:root[data-theme="learnndev"] .wlink button{flex:none} :root[data-theme="learnndev"] .wfile svg{animation:none} /* the colour ring sits exactly on each dot (it was 4px to the left) */ :root[data-theme="learnndev"] .wsw .ring{box-sizing:border-box} @keyframes wRing{0%,14%{transform:translateX(0)}20%,34%{transform:translateX(34px)}40%,54%{transform:translateX(68px)}60%,74%{transform:translateX(102px)}80%,94%{transform:translateX(136px)}100%{transform:translateX(0)}} /* the on / off switch in "Pull it back instantly" picked up the old site's .sw pill (a second outline around the track) */ :root[data-theme="learnndev"] .mv.sw{display:flex;align-items:center;height:auto;padding:0;border:0;border-radius:0;background:none;gap:0} :root[data-theme="learnndev"] .mv.sw span{flex:none} /* what people build: the panels fade over each other (they used to slide in 30px, which showed a white strip at the left edge and two texts at once) */ :root[data-theme="learnndev"] .ps-panel{transform:scale(.985);transition:opacity .2s ease,transform .3s cubic-bezier(.2,.8,.2,1),visibility 0s .2s} :root[data-theme="learnndev"] .ps-panel.on{transform:none;transition:opacity .3s ease .12s,transform .4s cubic-bezier(.2,.8,.2,1) .12s} :root[data-theme="learnndev"] .ps-tab:hover{transform:translateX(4px)} :root[data-theme="learnndev"] .ps-tab.on{transform:translateX(6px)} /* old class names (.b2, .c1 to .c3) that the new page reuses must not move anything */ :root[data-theme="learnndev"] .sx-m.b2{top:auto;right:auto} :root[data-theme="learnndev"] .ws-chip.c1,:root[data-theme="learnndev"] .ws-chip.c2,:root[data-theme="learnndev"] .ws-chip.c3{top:auto;left:auto;right:auto} /* the three chatbot kinds: the header, list and footer line up across the cards (landing-new.js measures them), and the demo chat keeps one height while it types */ @media (min-width:1101px){ :root[data-theme="learnndev"] #kind .ckb .ck-chat{min-height:238px;margin-bottom:0!important} :root[data-theme="learnndev"] #kind .ckb .ck-best{margin-top:16px!important} } @media (min-width:1300px){ :root[data-theme="learnndev"] #kind .ckb .ck-chat{min-height:218px} } /* ---- pricing: four even cards, and the struck-through monthly total on the yearly plan (2026-11-11) ---- */ :root[data-theme="learnndev"] #pricing .sh-plans{align-items:stretch!important} :root[data-theme="learnndev"] #pricing .sh-plan{display:flex!important;flex-direction:column} :root[data-theme="learnndev"] #pricing .sh-plan ul{flex:1 1 auto;margin-bottom:22px} :root[data-theme="learnndev"] #pricing .sh-plan>.cta,:root[data-theme="learnndev"] #pricing .sh-plan>.ghost{margin-top:auto;align-self:stretch} :root[data-theme="learnndev"] #pricing .sh-plan .sh-price{min-height:66px;display:flex;align-items:baseline;flex-wrap:wrap;gap:0 8px} :root[data-theme="learnndev"] #pricing .sh-plan.on{transform:none!important} :root[data-theme="learnndev"] #pricing .sh-plan.on:hover{transform:translateY(-6px)!important} :root[data-theme="learnndev"] #pricing .sh-was{font:600 .5em var(--font);text-decoration:line-through;text-decoration-thickness:2px;opacity:.8;-webkit-text-fill-color:rgba(255,255,255,.85);color:rgba(255,255,255,.85)} :root[data-theme="learnndev"] #pricing .sh-was[hidden]{display:none} /* the colour ring now cycles over the four looks (Violet, Amber, Teal, Azure) */ @keyframes wRing{0%,18%{transform:translateX(0)}25%,43%{transform:translateX(34px)}50%,68%{transform:translateX(68px)}75%,93%{transform:translateX(102px)}100%{transform:translateX(0)}} :root[data-theme="learnndev"] #pricing .sh-plans{grid-auto-rows:1fr} :root[data-theme="learnndev"] #pricing .sh-plan .sh-sub{min-height:3.1em} /* ---- step 2 shows both parts of the look: a light or dark mode and four colours ---- */ :root[data-theme="learnndev"] .wsw .wlm{margin-left:auto;align-self:center;display:flex;gap:2px;padding:2px;border-radius:99px;background:#fff;border:1.5px solid color-mix(in srgb,var(--c1) 40%,#fff);font:700 10px/1 var(--font)} :root[data-theme="learnndev"] .wsw .wlm b{padding:4px 8px;border-radius:99px;color:#6B7080;animation:wlmA 7s ease-in-out infinite} :root[data-theme="learnndev"] .wsw .wlm b:nth-child(2){animation-name:wlmB} @keyframes wlmA{0%,45%{background:linear-gradient(135deg,var(--c1),var(--c2));color:#fff}55%,100%{background:transparent;color:#6B7080}} @keyframes wlmB{0%,45%{background:transparent;color:#6B7080}55%,100%{background:linear-gradient(135deg,#2B3350,#4B3D96);color:#fff}} :root[data-theme="learnndev"] .wsw{flex-wrap:wrap;row-gap:8px} :root[data-theme="learnndev"] .wsw .wlm{margin-left:auto;max-width:100%}