/* Karotto web design system — shared by landing, Python and blog. */
:root{
  --navy:#172033;--navy-2:#25304A;--indigo:#5B5BD6;--indigo-dark:#4747B8;--indigo-soft:#EEEEFF;
  --orange:#F17843;--paper:#F7F7FA;--surface:#FFFFFF;--ink:#1D2433;--ink-soft:#626A7A;
  --ink-faint:#8991A2;--line:#E4E6EC;--shadow:0 18px 50px rgba(28,35,52,.08);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 var(--font);-webkit-font-smoothing:antialiased}a{color:inherit}img{max-width:100%}
.nav{position:sticky;top:0;z-index:1000;height:68px;display:flex;align-items:center;gap:28px;padding:0 max(20px,calc((100vw - 1180px)/2));background:rgba(255,255,255,.92);border-bottom:1px solid rgba(228,230,236,.9);box-shadow:0 1px 12px rgba(24,30,45,.04);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);font:16px/1 var(--font)}
.nav .brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--navy);white-space:nowrap}.nav .brand span,.brand-mark{width:32px;height:32px;display:grid;place-items:center;border-radius:9px;background:var(--navy);color:#fff;font-size:17px;font-style:normal;font-weight:900;letter-spacing:-.04em}.nav .brand b{font-size:20px;font-weight:850;letter-spacing:-.025em}
.nav nav{display:flex;align-items:stretch;gap:4px;height:100%}.nav .nav-spacer{flex:1}.nav .tab,.course-menu>summary{position:relative;display:flex;align-items:center;text-decoration:none;color:var(--ink-soft);padding:0 13px;font-size:14px;font-weight:650;white-space:nowrap;transition:color .15s ease}.nav .tab:hover,.course-menu>summary:hover{color:var(--navy)}.nav .tab::after,.course-menu>summary::after{content:"";position:absolute;left:13px;right:13px;bottom:0;height:2px;background:transparent;border-radius:2px 2px 0 0}.nav .tab.is-on,.course-menu.is-on>summary{color:var(--navy)}.nav .tab.is-on::after,.course-menu.is-on>summary::after{background:var(--indigo)}.nav .tab em{display:none}.nav .tab i{font-style:normal}
.course-menu{position:relative;height:100%}.course-menu>summary{height:100%;cursor:pointer;list-style:none}.course-menu>summary::-webkit-details-marker{display:none}.course-menu>summary::before{content:"";width:6px;height:6px;margin-right:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px)}.course-menu[open]>summary{color:var(--navy)}.course-menu-popover{position:absolute;top:58px;left:0;width:250px;padding:8px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 18px 45px rgba(28,35,52,.14)}.course-menu-popover a{display:block;padding:11px 12px;border-radius:7px;text-decoration:none}.course-menu-popover a:hover{background:var(--paper)}.course-menu-popover strong{display:block;color:var(--navy);font-size:13px}.course-menu-popover span{display:block;margin-top:2px;color:var(--ink-faint);font-size:11px;line-height:1.4}
.nav .course-coming-link{gap:7px;cursor:default;user-select:none}.nav .course-coming-link em{display:inline-flex;align-items:center;justify-content:center;flex:0 0 78px;min-width:78px;padding:4px 6px;border-radius:999px;background:var(--indigo-soft);color:var(--indigo-dark);font-size:9px;font-style:normal;font-weight:800;letter-spacing:.02em;text-transform:uppercase}
.language-link{margin-left:auto;width:38px;height:38px;display:grid;place-items:center;background:#F1F2F5;border-radius:8px;text-decoration:none;font-size:19px}.language-link:hover{background:#E9EAF0}.account-link{display:inline-flex;align-items:center;min-height:38px;padding:0 14px;background:var(--navy);color:#fff;border-radius:8px;text-decoration:none;font-size:13px;font-weight:750}.account-link:hover{background:var(--navy-2)}.nav a:focus-visible,.nav summary:focus-visible{outline:3px solid rgba(91,91,214,.28);outline-offset:2px;border-radius:8px}
.language-menu{position:relative;margin-left:auto}.language-menu>summary{width:38px;height:38px;display:grid;place-items:center;background:#F1F2F5;border-radius:8px;font-size:19px;cursor:pointer;list-style:none}.language-menu>summary::-webkit-details-marker{display:none}.language-menu[open]>summary,.language-menu>summary:hover{background:#E9EAF0}.language-menu-popover{position:absolute;z-index:80;top:46px;right:0;width:190px;padding:7px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 50px rgba(18,22,33,.15)}.language-menu-popover a{display:flex;align-items:center;gap:10px;padding:9px 10px;color:var(--ink);text-decoration:none;border-radius:8px;font-size:13px;font-weight:650}.language-menu-popover a:hover,.language-menu-popover a[aria-current="true"]{background:#F1F2F5}.language-menu-popover a span{font-size:18px}
.home-main{overflow:hidden}.home-hero{max-width:1180px;margin:0 auto;padding:104px 24px 82px;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(380px,.92fr);gap:76px;align-items:center}.hero-copy{max-width:660px}.kicker{margin:0 0 20px;color:var(--indigo);font-size:13px;font-weight:800;letter-spacing:.11em;text-transform:uppercase}.home-hero h1{margin:0 0 24px;color:var(--navy);font-size:clamp(44px,6vw,72px);line-height:1.02;letter-spacing:-.055em;font-weight:800}.home-hero h1 span{color:var(--indigo)}.hero-lead{max-width:610px;margin:0 0 34px;color:var(--ink-soft);font-size:clamp(18px,2vw,21px);line-height:1.65}
.hero-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.primary-button,.secondary-button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;border-radius:10px;text-decoration:none;font-size:15px;font-weight:750;transition:transform .15s ease,box-shadow .15s ease,background .15s ease}.primary-button{background:var(--indigo);color:#fff;box-shadow:0 8px 22px rgba(91,91,214,.22)}.primary-button:hover{background:var(--indigo-dark);transform:translateY(-1px)}.secondary-button{background:#fff;color:var(--navy);border:1px solid var(--line)}.secondary-button:hover{background:#FAFAFC;transform:translateY(-1px)}.hero-note{margin:18px 0 0;color:var(--ink-faint);font-size:13px}
.product-preview{position:relative;min-height:410px;display:flex;flex-direction:column;background:var(--navy);border-radius:22px;padding:26px;box-shadow:0 28px 70px rgba(26,33,50,.2);overflow:hidden}.preview-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:34px;color:#CBD0DC;font-size:12px;font-weight:700}.preview-dots{display:flex;gap:6px}.preview-dots i{display:block;width:7px;height:7px;border-radius:50%;background:#505A70}.preview-dots i:first-child{background:var(--orange)}.maze{display:grid;width:100%;grid-template-columns:repeat(5,1fr);gap:7px;max-width:350px;margin:0 auto}.maze span{aspect-ratio:1;border-radius:8px;background:#2B354C;border:1px solid rgba(255,255,255,.04)}.maze .path{background:#46516A}.maze .start{background:var(--indigo)}.maze .goal{position:relative;background:#fff}.maze .goal::after{content:"";position:absolute;width:10px;height:18px;border-radius:8px 8px 5px 5px;background:var(--orange);left:50%;top:50%;transform:translate(-50%,-50%) rotate(12deg)}.preview-code{margin-top:auto;padding-top:22px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}.preview-code span{height:36px;padding:0 13px;display:flex;align-items:center;background:#fff;color:var(--navy);border-radius:8px;font:700 12px/1 var(--font)}.preview-code span:nth-child(2){background:#E7E7FF;color:var(--indigo-dark)}
.maze-stage{position:relative;width:100%;max-width:350px;margin:0 auto}.maze-stage .maze{max-width:none;margin:0}.maze-stage .maze>span{transition:background .25s ease,box-shadow .25s ease}.maze-stage .maze .goal::before{content:"";position:absolute;z-index:1;width:7px;height:9px;border-radius:8px 2px 8px 2px;background:#79B94B;left:56%;top:23%;transform:rotate(32deg);transform-origin:bottom left;transition:opacity .2s ease,transform .2s ease}.maze-stage .maze .goal::after{top:53%;transition:opacity .2s ease,transform .2s ease}.maze-stage .maze .goal.is-harvested::before,.maze-stage .maze .goal.is-harvested::after{opacity:0;transform:translate(-50%,-70%) scale(.3) rotate(12deg)}.maze-stage .maze>span.is-current{box-shadow:inset 0 0 0 2px rgba(255,255,255,.7),0 0 18px rgba(169,169,255,.24)}.bunny-runner{position:absolute;z-index:4;left:0;top:0;width:0;height:0;display:grid;place-items:center;transition:transform .42s cubic-bezier(.45,.05,.25,1.18);pointer-events:none}.bunny-sprite{position:absolute;left:0;top:0;display:block;width:76px;max-width:none;height:auto;filter:drop-shadow(0 5px 4px rgba(10,15,28,.32));transform:translate(-50%,-50%);transform-origin:center}.bunny-runner.is-hopping .bunny-sprite{animation:bunny-hop .42s ease-in-out}.bunny-runner.has-carrot::after{content:"🥕";position:absolute;z-index:5;font-size:18px;transform:translate(2px,-20px) rotate(18deg);animation:carrot-pop .38s ease-out}.preview-code span{position:relative;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}.preview-code span.is-running{transform:translateY(-3px);box-shadow:0 7px 16px rgba(0,0,0,.2);background:#FFF2EB;color:#B44D22}.preview-code .loop-count{position:absolute;right:-6px;top:-9px;min-width:22px;height:22px;padding:0 5px;display:none;place-items:center;border-radius:999px;background:var(--orange);color:#fff;font:800 10px/1 var(--font);font-style:normal}.preview-code [data-command="loop"].is-running .loop-count{display:grid}@keyframes bunny-hop{0%,100%{transform:translate(-50%,-50%) rotate(0)}45%{transform:translate(-50%,-78%) rotate(-7deg)}70%{transform:translate(-50%,-50%) rotate(5deg)}}@keyframes carrot-pop{0%{opacity:0;transform:translate(2px,-5px) scale(.4) rotate(18deg)}100%{opacity:1;transform:translate(2px,-20px) scale(1) rotate(18deg)}}
.trust-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}.trust-inner{max-width:1180px;margin:0 auto;padding:20px 24px;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}.trust-item{color:var(--ink-soft);font-size:13px}.trust-item strong{display:block;margin-bottom:2px;color:var(--navy);font-size:15px}
.home-section{max-width:1180px;margin:0 auto;padding:92px 24px}.section-heading{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:34px}.section-heading h2{max-width:620px;margin:0;color:var(--navy);font-size:clamp(32px,4vw,46px);line-height:1.12;letter-spacing:-.04em}.section-heading p{max-width:430px;margin:0;color:var(--ink-soft)}.path-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.path-card{position:relative;min-height:260px;padding:32px;border:1px solid var(--line);border-radius:16px;background:#fff;text-decoration:none;overflow:hidden;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}.path-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#D3D5DF}.path-number{display:block;margin-bottom:42px;color:var(--indigo);font-size:13px;font-weight:800}.path-card h3{margin:0 0 10px;color:var(--navy);font-size:25px;letter-spacing:-.025em}.path-card p{max-width:490px;margin:0 0 24px;color:var(--ink-soft)}.text-link{color:var(--indigo);font-size:14px;font-weight:800}.path-card.dark{background:var(--navy);border-color:var(--navy)}.path-card.dark h3{color:#fff}.path-card.dark p{color:#BFC5D2}.path-card.dark .path-number{color:#A9A9FF}.path-card.dark .text-link{color:#C9C9FF}
.parent-section{background:#EFEFFD}.parent-inner{max-width:1180px;margin:0 auto;padding:88px 24px}.parent-inner .section-heading{align-items:start}.article-list{border-top:1px solid rgba(73,73,150,.18)}.article-row{display:grid;grid-template-columns:150px 1fr auto;gap:28px;align-items:center;padding:24px 0;border-bottom:1px solid rgba(73,73,150,.18);text-decoration:none}.article-row .meta{color:var(--indigo-dark);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}.article-row h3{margin:0;font-size:20px;line-height:1.35;color:var(--navy)}.article-row .arrow{color:var(--indigo);font-size:20px;transition:transform .15s ease}.article-row:hover .arrow{transform:translateX(4px)}
.download-section{padding:0 24px 92px}.download-inner{max-width:1180px;margin:0 auto;padding:clamp(38px,6vw,68px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:64px;align-items:center;background:var(--navy);border-radius:24px;color:#fff;box-shadow:0 26px 70px rgba(26,33,50,.16)}.download-copy{max-width:610px}.download-copy .kicker{color:#A9A9FF}.download-copy h2{margin:0 0 20px;font-size:clamp(34px,4.5vw,52px);line-height:1.08;letter-spacing:-.045em}.download-copy>p:last-child{margin:0;color:#BFC5D2;font-size:17px}.store-grid{display:grid;grid-template-columns:repeat(2,190px);gap:14px}.store-card{padding:14px;background:#fff;color:var(--navy);border-radius:16px;text-decoration:none;transition:transform .16s ease,box-shadow .16s ease}.store-card:hover{transform:translateY(-3px);box-shadow:0 18px 34px rgba(0,0,0,.2)}.store-card img{display:block;width:100%;height:auto;border-radius:8px}.store-label{display:block;padding:10px 5px 3px}.store-label small,.store-label strong{display:block}.store-label small{color:var(--ink-soft);font-size:11px}.store-label strong{margin-top:2px;font-size:20px;line-height:1.2;letter-spacing:-.02em}
.home-footer{background:var(--navy);color:#BFC5D2}.home-footer-inner{max-width:1180px;margin:0 auto;padding:30px 24px;display:flex;justify-content:space-between;gap:18px;font-size:13px}.home-footer strong{color:#fff}
.coming-soon-main{min-height:calc(100vh - 68px);display:grid;place-items:center;padding:64px 20px;background:radial-gradient(circle at 80% 20%,#E8E8FF 0,transparent 36%),var(--paper)}.coming-soon-card{width:min(720px,100%);padding:clamp(34px,7vw,72px);background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow)}.coming-soon-card h1{margin:0 0 22px;color:var(--navy);font-size:clamp(38px,6vw,62px);line-height:1.05;letter-spacing:-.05em}.coming-soon-card>p:not(.kicker){margin:0 0 32px;color:var(--ink-soft);font-size:18px;line-height:1.7}
@media(max-width:900px){.download-inner{grid-template-columns:1fr}.store-grid{grid-template-columns:repeat(2,minmax(0,190px))}}
@media(max-width:820px){.home-hero{grid-template-columns:1fr;padding-top:68px;gap:44px}.product-preview{min-height:370px;max-width:600px;width:100%}.trust-inner{grid-template-columns:repeat(2,1fr)}.section-heading{display:block}.section-heading p{margin-top:14px}.article-row{grid-template-columns:115px 1fr auto}}
@media(max-width:600px){.nav{height:60px;padding:0 12px;gap:6px}.nav .brand b{font-size:18px}.nav .brand span,.brand-mark{width:29px;height:29px;font-size:15px}.nav nav{margin-left:auto}.nav .tab,.course-menu>summary{padding:0 7px;font-size:12px}.nav .tab::after,.course-menu>summary::after{left:7px;right:7px}.nav .course-coming-link{gap:5px}.nav .course-coming-link em{flex-basis:68px;min-width:68px;padding:3px 5px;font-size:8px}.course-menu>summary::before{width:5px;height:5px;margin-right:6px}.course-menu-popover{position:fixed;top:54px;left:12px;right:12px;width:auto}.language-link,.language-menu>summary{width:34px;height:34px;font-size:17px}.language-menu-popover{position:fixed;top:54px;left:12px;right:12px;width:auto;display:grid;grid-template-columns:repeat(2,1fr)}.account-link{min-height:34px;padding:0 9px;font-size:11px}.account-link span{display:none}.account-link::after{content:"↓";font-size:16px}.home-hero{padding:54px 18px 60px}.home-hero h1{font-size:42px}.product-preview{min-height:330px;padding:20px;border-radius:16px}.preview-code{padding-top:18px}.preview-code span{padding:0 10px;white-space:nowrap}.trust-inner{padding:18px;gap:18px}.home-section,.parent-inner{padding:66px 18px}.path-grid{grid-template-columns:1fr}.path-card{min-height:230px;padding:26px}.download-section{padding:0 18px 66px}.download-inner{padding:34px 20px;border-radius:18px;gap:34px}.store-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.store-card{padding:9px;border-radius:12px}.store-label strong{font-size:16px}.article-row{grid-template-columns:1fr auto;gap:8px 18px}.article-row .meta{grid-column:1/-1}.article-row h3{font-size:18px}.home-footer-inner{padding:26px 18px;display:block}.home-footer-inner span{display:block;margin-top:6px}}
@media(min-width:601px){.path-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:390px){.nav .tab,.course-menu>summary{padding:0 5px;font-size:11px}.nav .brand{gap:7px}.nav{padding:0 8px}.nav .brand b{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}.bunny-runner,.bunny-sprite,.bunny-runner::after{animation:none!important}}