@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');

:root { --ink:#f5fbf8; --muted:#9db3aa; --green:#87e8a7; --navy:#071b18; --line:rgba(220,255,235,.16); }
* { box-sizing:border-box; }
html,body { width:100%; min-height:100%; }
body { margin:0; overflow:hidden; color:var(--ink); background:radial-gradient(circle at 17% 14%,rgba(42,129,91,.18),transparent 31rem),radial-gradient(circle at 82% 85%,rgba(24,80,64,.22),transparent 33rem),var(--navy); font-family:"DM Sans",system-ui,sans-serif; }
button,a { -webkit-tap-highlight-color:transparent; }
button { font:inherit; }
.presentation { width:100vw; height:100vh; height:100dvh; display:grid; grid-template-rows:72px minmax(0,1fr) 76px; padding:0 clamp(18px,3.6vw,64px); }
.topbar { z-index:10; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { display:inline-flex; gap:11px; align-items:center; color:var(--ink); font-family:"Manrope",sans-serif; font-weight:800; letter-spacing:-.02em; text-decoration:none; }
.brand-mark { display:grid; place-items:center; width:34px; height:34px; color:#082018; background:var(--green); border-radius:10px 10px 10px 3px; font-size:13px; font-weight:800; }
.topbar-actions { display:flex; gap:8px; align-items:center; }
.slide-count { margin-right:10px; color:var(--muted); font-size:12px; letter-spacing:.15em; }
.slide-count strong { color:var(--ink); font-weight:700; }
.icon-button,.nav-button { display:grid; place-items:center; color:var(--ink); background:rgba(255,255,255,.055); border:1px solid var(--line); border-radius:50%; cursor:pointer; transition:transform .18s ease,background .18s ease,border-color .18s ease; }
.icon-button { width:38px; height:38px; }
.icon-button svg { width:18px; fill:currentColor; }
.icon-button:hover,.nav-button:hover { transform:translateY(-2px); background:rgba(135,232,167,.13); border-color:rgba(135,232,167,.48); }
.icon-button:focus-visible,.nav-button:focus-visible,.dot:focus-visible,.resource-card:focus-visible,.brand:focus-visible { outline:3px solid var(--green); outline-offset:3px; }
.pause-icon { display:none; }
.is-playing .play-icon { display:none; }
.is-playing .pause-icon { display:block; }
.slide-stage { position:relative; min-height:0; margin:clamp(12px,2vh,24px) auto; width:min(100%,1720px); overflow:hidden; border:1px solid rgba(255,255,255,.13); border-radius:clamp(13px,1.4vw,24px); background:#f7f8f6; box-shadow:0 24px 70px rgba(0,0,0,.35); touch-action:pan-y; }
.slide { position:absolute; inset:0; min-width:0; min-height:0; display:grid; place-items:center; overflow:hidden; visibility:hidden; opacity:0; transform:translateX(2.5%); transition:opacity .38s ease,transform .38s ease,visibility .38s; }
.slide.is-active { visibility:visible; opacity:1; transform:translateX(0); z-index:2; }
.slide.was-active { transform:translateX(-2.5%); }
.slide>picture { position:absolute; inset:0; display:block; min-width:0; min-height:0; background:#fff; }
.slide>picture img { width:100%; height:100%; min-width:0; min-height:0; object-fit:contain; display:block; background:#fff; }
.resources-slide { overflow:hidden; isolation:isolate; color:var(--ink); background:linear-gradient(rgba(135,232,167,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(135,232,167,.045) 1px,transparent 1px),#0a211d; background-size:44px 44px; }
.resources-slide::before { position:absolute; inset:0; content:""; background:linear-gradient(90deg,#0a211d 0%,rgba(10,33,29,.9) 50%,rgba(10,33,29,.48) 100%); z-index:-1; }
.resources-content { width:min(920px,88%); text-align:center; }
.eyebrow { margin:0 0 12px; color:var(--green); font-size:clamp(11px,1vw,14px); font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
.resources-content h1 { margin:0; font-family:"Manrope",sans-serif; font-size:clamp(30px,4.2vw,72px); line-height:1.04; letter-spacing:-.045em; }
.resources-content h1 span { color:var(--green); }
.resources-intro { margin:16px auto 24px; color:var(--muted); font-size:clamp(14px,1.2vw,18px); }
.resource-links { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; text-align:left; }
.resource-card { min-width:0; display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:13px; align-items:center; min-height:92px; padding:17px; color:var(--ink); background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.14); border-radius:16px; text-decoration:none; backdrop-filter:blur(10px); transition:transform .2s ease,background .2s ease,border-color .2s ease; }
.resource-card:hover { transform:translateY(-5px); background:rgba(135,232,167,.1); border-color:rgba(135,232,167,.55); }
.resource-icon { display:grid; place-items:center; width:43px; height:43px; color:#092019; background:var(--green); border-radius:12px; font-family:ui-monospace,monospace; font-weight:800; }
.resource-icon svg { width:23px; fill:currentColor; }
.pypi-icon { color:#ffdf78; background:#235b83; font-size:14px; }
.web-icon { color:#17345e; background:#b7d9ff; }
.resource-copy { display:block; min-width:0; }
.resource-copy strong,.resource-copy small { display:block; }
.resource-copy strong { margin-bottom:3px; font-family:"Manrope",sans-serif; font-size:17px; }
.resource-copy small { overflow:hidden; color:var(--muted); font-size:11px; line-height:1.4; text-overflow:ellipsis; white-space:nowrap; }
.resource-copy code { color:#c7f8d6; font-size:10px; }
.arrow { color:var(--green); font-size:18px; }
.ambient { position:absolute; z-index:-1; width:380px; height:380px; border-radius:50%; filter:blur(85px); opacity:.16; }
.ambient-one { top:-160px; right:-50px; background:#7bf4a3; }
.ambient-two { bottom:-190px; left:12%; background:#3894ff; }
.controls { position:relative; display:flex; align-items:center; justify-content:center; gap:15px; }
.nav-button { width:40px; height:40px; }
.nav-button svg { width:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.pagination { display:flex; align-items:center; gap:7px; }
.dot { width:8px; height:8px; padding:0; border:0; border-radius:99px; background:#547068; cursor:pointer; transition:width .2s ease,background .2s ease; }
.dot.is-active { width:30px; background:var(--green); }
.keyboard-hint { position:absolute; right:0; color:#718b82; font-size:11px; }
kbd { padding:2px 5px; color:#9fb5ad; border:1px solid rgba(255,255,255,.13); border-radius:4px; font-family:inherit; }
.progress { position:fixed; z-index:15; right:0; bottom:0; left:0; height:3px; background:rgba(255,255,255,.04); }
.progress span { display:block; width:11.1111%; height:100%; background:var(--green); transition:width .35s ease; }
@media(max-width:760px) { .presentation{grid-template-rows:60px minmax(0,1fr) 64px;padding-inline:12px}.brand{font-size:14px}.brand-mark{width:30px;height:30px}.slide-stage{margin-block:10px}.resource-links{grid-template-columns:1fr;gap:8px}.resource-card{min-height:68px;padding:10px 13px}.resource-icon{width:37px;height:37px;border-radius:10px}.resources-content{width:88%}.resources-intro{margin-block:10px 14px}.keyboard-hint{display:none} }
@media(max-height:620px) { .presentation{grid-template-rows:52px minmax(0,1fr) 54px}.slide-stage{margin-block:8px}.brand-mark{width:29px;height:29px}.resource-card{min-height:62px;padding:9px 12px}.resource-icon{width:36px;height:36px}.resources-intro{margin-block:8px 13px} }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important} }