@layer components{.course-card{border:1px solid var(--border);background:var(--card);height:100%;box-shadow:var(--shadow-soft);transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .45s var(--ease-out-expo), box-shadow .4s, border-color .4s;border-radius:1.75rem;flex-direction:column;display:flex;position:relative;overflow:hidden}.group:hover .course-card{border-color:color-mix(in oklab, var(--track) 40%, var(--border));box-shadow:var(--shadow-lift)}.course-card__preview{border-bottom:1px solid var(--border);background:radial-gradient(120% 130% at 15% 0%, color-mix(in oklab, var(--track) 28%, var(--card)), color-mix(in oklab, var(--track) 6%, var(--card)) 70%);height:11rem;position:relative;overflow:hidden}.course-card__track{background:var(--card);font-family:var(--font-mono);box-shadow:var(--shadow-soft);border-radius:999px;align-items:center;gap:.4rem;padding:.32rem .7rem;font-size:.68rem;font-weight:500;display:inline-flex;position:absolute;top:1rem;left:1rem}.course-card__track:before{content:"";background:var(--track);border-radius:50%;width:.45rem;height:.45rem}.course-card__lang{background:color-mix(in oklab, var(--card) 75%, transparent);font-family:var(--font-mono);text-transform:uppercase;border-radius:.5rem;padding:.32rem .55rem;font-size:.68rem;position:absolute;top:1rem;right:1rem}.course-card__chip{background:var(--secondary);border-radius:999px;padding:.3rem .75rem;font-size:.8rem}.course-card__link{color:inherit;outline:none}.course-card__link:after{content:"";z-index:1;border-radius:inherit;position:absolute;inset:0}.course-card:has(.course-card__link:focus-visible){outline:2px solid var(--caret);outline-offset:3px}.course-card__cta{background:var(--foreground);color:var(--background);transition:gap .3s var(--ease-out-expo), background-color .3s, color .3s;border-radius:999px;align-items:center;gap:.45rem;padding:.65rem 1.05rem;font-size:.875rem;font-weight:600;display:inline-flex}.course-card__cta:hover{background:var(--primary);color:#fff;gap:.7rem}.pv{justify-content:center;align-items:center;gap:.75rem;padding:3rem 1.25rem 1rem;display:flex;position:absolute;inset:0}.pv-code__editor{border:1px solid var(--border);background:color-mix(in oklab, var(--background) 70%, transparent);border-radius:.75rem;flex-direction:column;flex:1.1;justify-content:center;gap:.45rem;height:100%;padding:.75rem;display:flex}.pv-code__line{width:var(--w);background:linear-gradient(90deg, var(--track), color-mix(in oklab, var(--track) 35%, var(--muted-foreground)));transform-origin:0;height:.45rem;animation:pv-type 6s calc(var(--i) * .35s) infinite both;border-radius:99px;display:block}.pv-code__line:nth-child(2),.pv-code__line:nth-child(3){margin-left:.8rem}.pv-code__browser{border:1px solid var(--border);background:var(--card);height:100%;box-shadow:var(--shadow-soft);border-radius:.75rem;flex-direction:column;flex:1;gap:.4rem;padding:.5rem;display:flex}.pv-code__bar{background:var(--secondary);border-radius:99px;width:40%;height:.45rem}.pv-code__block{background:color-mix(in oklab, var(--track) 22%, var(--secondary));animation:pv-pop 6s calc(1.2s + var(--i) * .4s) infinite both;border-radius:.4rem;flex:1}.pv-code__block--hero{background:linear-gradient(120deg, color-mix(in oklab, var(--track) 55%, transparent), color-mix(in oklab, var(--caret) 30%, transparent));flex:1.6}.pv-server{gap:0}.pv-server__node{border:1px solid var(--border);background:var(--card);width:2.75rem;height:2.75rem;color:var(--muted-foreground);box-shadow:var(--shadow-soft);border-radius:.9rem;flex:none;place-items:center;display:grid}.pv-server__node--main{border-color:color-mix(in oklab, var(--track) 45%, var(--border));width:3.25rem;height:3.25rem;color:var(--track)}.pv-server__wire{background:repeating-linear-gradient(90deg, var(--border) 0 6px, transparent 6px 10px);flex:1;max-width:6rem;height:2px;position:relative}.pv-server__wire--short{max-width:3.5rem}.pv-server__packet{background:var(--track);width:.55rem;height:.55rem;box-shadow:0 0 10px var(--track);border-radius:50%;margin-top:-.275rem;animation:2.4s ease-in-out infinite pv-packet;position:absolute;top:50%;left:0}.pv-server__packet--back{background:var(--caret);box-shadow:0 0 10px var(--caret);animation-name:pv-packet-back}.pv-server__packet--db{animation-duration:1.2s;animation-delay:.6s}.pv-server__status{background:color-mix(in oklab, var(--track-backend) 14%, transparent);color:var(--track-backend);font-family:var(--font-mono);border-radius:.4rem;padding:.25rem .5rem;font-size:.68rem;font-weight:600;animation:2.4s infinite pv-status;position:absolute;bottom:.9rem;right:1rem}.pv-design__board{border:1px solid var(--border);background-color:var(--card);background-image:radial-gradient(var(--grid-line) 1px, transparent 1.3px);height:100%;box-shadow:var(--shadow-soft);background-size:12px 12px;border-radius:.75rem;flex:1;position:relative;overflow:hidden}.pv-design__shape{animation:pv-snap 6s var(--ease-spring) infinite both;border-radius:.6rem;position:absolute}.pv-design__shape--circle{--dx:-24px;--dy:-16px;background:var(--track);border-radius:50%;width:2.6rem;height:2.6rem;top:22%;left:12%}.pv-design__shape--card{--dx:26px;--dy:-12px;background:color-mix(in oklab, var(--track) 35%, var(--secondary));width:42%;height:38%;animation-delay:.3s;top:18%;right:10%}.pv-design__shape--pill{--dx:-18px;--dy:16px;background:var(--caret);border-radius:99px;width:36%;height:.9rem;animation-delay:.6s;bottom:18%;left:14%}.pv-design__cursor{color:var(--foreground);animation:6s ease-in-out infinite pv-cursor;position:absolute;top:58%;left:56%}.pv-design__swatches{flex-direction:column;gap:.4rem;display:flex}.pv-design__swatches>span{border:2px solid var(--card);width:1.3rem;height:1.3rem;box-shadow:var(--shadow-soft);animation:pv-swatch 3s calc(var(--i) * .25s) ease-in-out infinite;border-radius:50%}.pv-design__swatches>span:first-child{background:var(--track)}.pv-design__swatches>span:nth-child(2){background:var(--caret)}.pv-design__swatches>span:nth-child(3){background:var(--track-basics)}.pv-design__swatches>span:nth-child(4){background:var(--foreground)}.pv-network svg{width:min(100%,17rem);height:auto;overflow:visible}.pv-network line{stroke:var(--track);stroke-width:2px;stroke-dasharray:1;stroke-dashoffset:1px;animation:pv-draw 6s calc(var(--i) * .35s) infinite both}.pv-network circle{fill:var(--card);stroke:var(--track);stroke-width:2.5px;transform-box:fill-box;transform-origin:50%;animation:pv-node 6s calc(var(--i) * .35s) infinite both}}