:root{--p5-red:#e60012;--p5-red-lite:#ff2d3a;--p5-black:#0b0b0b;--p5-black-soft:#1a1a1a;--p5-white:#fff;--p5-paper:#f4f4f4;--p5-muted:#a5a5a5;--p5-ink-muted:#4a4a4a;--border:3px;--skew-card:-3deg;--skew-chip:-9deg;--skew-btn:-6deg;--shadow:8px 8px 0 var(--p5-red);--shadow-sm:4px 4px 0 var(--p5-red);--shadow-hover:14px 14px 0 var(--p5-red);--nav-height:64px;--page-max:1120px;--gap:clamp(.85rem, .4rem + 1.4vw, 1.6rem);--pad-page:clamp(1rem, .5rem + 2vw, 2.25rem);--font-body:system-ui, -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;--font-display:"Impact", "Haettenschweiler", "Arial Narrow Bold", "Arial Black", "PingFang SC", "Microsoft YaHei", sans-serif;--font-mono:ui-monospace, SFMono-Regular, Consolas, monospace}*,:before,:after{box-sizing:border-box}*{margin:0}html{-webkit-text-size-adjust:100%;height:100%}body{background-color:var(--p5-black);min-height:100%;color:var(--p5-white);font-family:var(--font-body);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;background-image:radial-gradient(#ffffff0f 1.6px,#0000 1.7px),radial-gradient(circle at 84% -12%,#e6001252,#0000 55%);background-size:14px 14px,100% 100%;font-size:clamp(15px,.9rem + .2vw,17px);line-height:1.65}::selection{background:var(--p5-red);color:#fff}img,svg,iframe{max-width:100%;display:block}a{color:var(--p5-red-lite);text-decoration:none}a:hover{text-decoration:underline}:focus-visible{outline:3px solid var(--p5-red);outline-offset:3px}.app{flex-direction:column;min-height:100dvh;display:flex}.app--fluid{height:100dvh;overflow:hidden}.nav{z-index:20;background-color:var(--p5-black);border-bottom:4px solid var(--p5-red);position:sticky;top:0}.nav__inner{width:100%;max-width:var(--page-max);min-height:var(--nav-height);justify-content:space-between;align-items:center;gap:var(--gap);padding:.55rem var(--pad-page);margin:0 auto;display:flex}.brand{isolation:isolate;color:var(--p5-white);font-family:var(--font-display);letter-spacing:.04em;align-items:center;gap:.6rem;padding:.3rem 1rem .3rem .75rem;font-size:1.12rem;font-weight:900;text-decoration:none;display:inline-flex;position:relative}.brand:before{content:"";z-index:-1;background-color:var(--p5-red);transition:transform .16s;position:absolute;inset:2% -3% 2% -6%;transform:skew(-12deg)}.brand:hover{color:var(--p5-white);text-decoration:none}.brand:hover:before{transform:skew(-12deg)scaleX(1.04)translate(2px)}.brand__logo{width:20px;height:20px;color:var(--p5-white);flex:none}.nav__links{align-items:center;gap:.5rem;display:flex}.nav__link{isolation:isolate;min-height:42px;color:var(--p5-white);font-family:var(--font-display);letter-spacing:.08em;text-transform:uppercase;align-items:center;padding:0 1rem;font-size:.95rem;font-weight:900;text-decoration:none;display:inline-flex;position:relative}.nav__link:before{content:"";z-index:-1;border:2px solid #0000;transition:background-color .14s,border-color .14s;position:absolute;inset:0;transform:skew(-10deg)}.nav__link:hover{color:var(--p5-white);text-decoration:none}.nav__link:hover:before{border-color:var(--p5-white);background-color:var(--p5-red)}.main{width:100%;min-height:0;max-width:var(--page-max);padding:var(--pad-page);flex-direction:column;flex:auto;margin:0 auto;display:flex}.footer{background-color:var(--p5-black);border-top:4px solid var(--p5-red);color:var(--p5-muted);letter-spacing:.1em;text-align:center;flex:none;font-size:.78rem}.footer__inner{padding:1rem var(--pad-page);text-transform:uppercase}.hero{margin-bottom:var(--gap);position:relative}.hero__title{isolation:isolate;color:var(--p5-white);font-family:var(--font-display);letter-spacing:.02em;text-shadow:4px 0 0 var(--p5-black), -4px 0 0 var(--p5-black), 0 4px 0 var(--p5-black), 0 -4px 0 var(--p5-black), 4px 4px 0 var(--p5-black), -4px -4px 0 var(--p5-black), 4px -4px 0 var(--p5-black), -4px 4px 0 var(--p5-black);padding:.25rem 1.3rem .35rem .85rem;font-size:clamp(2.1rem,1.2rem + 4.4vw,3.6rem);font-weight:900;line-height:1.1;display:inline-block;position:relative}.hero__title:before{content:"";z-index:-1;background-color:var(--p5-red);clip-path:polygon(0 0,100% 0,100% 62%,90% 100%,0 100%);position:absolute;inset:4% -5% 6% -4%;transform:skew(-12deg)}.hero__subtitle{color:var(--p5-muted);letter-spacing:.04em;margin-top:.6rem;font-size:.92rem}.hero__subtitle a{color:var(--p5-white);border-bottom:2px solid var(--p5-red)}.hero:after{content:"";background-image:repeating-linear-gradient(90deg, var(--p5-white) 0 8px, transparent 8px 18px);opacity:.3;width:clamp(70px,12vw,150px);height:10px;position:absolute;top:.55rem;right:0;transform:skew(-24deg)}.tag-nav{width:fit-content;max-width:100%;margin-bottom:calc(var(--gap) + .35rem);background-color:var(--p5-red);clip-path:polygon(0 0,100% 0,100% 64%,97.5% 100%,0 100%);-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:.55rem;padding:.9rem .95rem;display:flex;overflow-x:auto}.tag-nav::-webkit-scrollbar{display:none}.tag-nav__item{border:3px solid var(--p5-black);background-color:var(--p5-white);min-height:40px;color:var(--p5-black);letter-spacing:.03em;white-space:nowrap;transform:skewX(var(--skew-chip));box-shadow:3px 3px 0 var(--p5-black);flex:none;align-items:center;gap:.45rem;padding:0 .85rem;font-size:.88rem;font-weight:800;transition:transform .14s,box-shadow .14s,background-color .14s,color .14s;display:inline-flex}.tag-nav__item:hover{background-color:var(--p5-black);color:var(--p5-white);box-shadow:3px 3px 0 var(--p5-white);transform:skewX(var(--skew-chip)) translate(-2px, -2px);text-decoration:none}.tag-nav__item.is-active,.tag-nav__item.is-active:hover{background-color:var(--p5-black);color:var(--p5-white);box-shadow:3px 3px 0 var(--p5-white)}.tag-nav__count{background-color:var(--p5-black);color:var(--p5-white);font-family:var(--font-mono);padding:0 .3rem;font-size:.72rem;font-weight:700;line-height:1.5}.tag-nav__item:hover .tag-nav__count,.tag-nav__item.is-active .tag-nav__count{background-color:var(--p5-red);color:var(--p5-white)}@media (width>=640px){.tag-nav{flex-wrap:wrap;overflow:visible}}.card-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:clamp(1rem,.5rem + 1.6vw,1.5rem);margin:0;padding:.4rem;list-style:none;display:grid}.card{display:flex}.card__link{isolation:isolate;border:var(--border) solid var(--p5-black);background-color:var(--p5-white);width:100%;color:var(--p5-black);box-shadow:var(--shadow);transform:skewX(var(--skew-card));flex-direction:column;gap:.55rem;padding:1.15rem 1.35rem 1.1rem;text-decoration:none;transition:transform .16s,box-shadow .16s;display:flex;position:relative}.card__link>*{transform:skewX(calc(var(--skew-card) * -1))}.card__link:before{content:"";background-color:var(--p5-red);width:64px;height:10px;position:absolute;top:0;left:0}.card__link:hover,.card__link:focus-visible{box-shadow:var(--shadow-hover);color:var(--p5-black);transform:skewX(var(--skew-card)) translate(-4px, -4px);text-decoration:none}.card__title{color:var(--p5-black);letter-spacing:.01em;font-size:1.18rem;font-weight:900;line-height:1.3;transition:color .16s}.card__link:hover .card__title,.card__link:focus-visible .card__title{color:var(--p5-red)}.card__desc{color:var(--p5-ink-muted);font-size:.9rem}.card__meta{border-top:2px solid var(--p5-black);flex-wrap:wrap;align-items:center;gap:.45rem;margin-top:auto;padding-top:.5rem;display:flex}.card__file{color:#6b6b6b;font-family:var(--font-mono);font-size:.72rem}.tag{background-color:var(--p5-black);color:var(--p5-white);letter-spacing:.02em;align-items:center;padding:.1rem .5rem;font-size:.72rem;font-weight:700;display:inline-flex;transform:skew(-8deg)}.empty{padding:calc(var(--pad-page) * 1.6);border:var(--border) dashed var(--p5-white);color:var(--p5-muted);text-align:center;background-color:#ffffff0a}.lesson{flex-direction:column;flex:auto;gap:.75rem;min-height:0;display:flex}.lesson__bar{flex-wrap:wrap;align-items:center;gap:.7rem;display:flex}.button{border:2px solid var(--p5-white);background-color:var(--p5-white);min-height:42px;color:var(--p5-black);letter-spacing:.03em;transform:skewX(var(--skew-btn));box-shadow:var(--shadow-sm);align-items:center;gap:.4rem;padding:0 1.05rem;font-size:.88rem;font-weight:800;text-decoration:none;transition:transform .14s,box-shadow .14s,background-color .14s,color .14s;display:inline-flex}.button:hover{background-color:var(--p5-red);color:var(--p5-white);box-shadow:6px 6px 0 var(--p5-white);transform:skewX(var(--skew-btn)) translate(-2px, -2px);text-decoration:none}.lesson__title{color:var(--p5-muted);letter-spacing:.04em;text-overflow:ellipsis;white-space:nowrap;font-size:.9rem;overflow:hidden}.iframe-wrap{border:var(--border) solid var(--p5-black);background-color:var(--p5-white);min-height:0;box-shadow:var(--shadow);flex:auto;overflow:hidden}.iframe-wrap iframe{border:0;width:100%;height:100%}.prose{border:var(--border) solid var(--p5-black);background-color:var(--p5-white);box-shadow:var(--shadow);color:#1a1a1a;margin-top:.8rem;padding:clamp(1.25rem,.8rem + 2.4vw,2.75rem);font-size:clamp(15px,.9rem + .25vw,17px);line-height:1.85}.prose>:first-child{margin-top:0}.prose>:last-child{margin-bottom:0}.prose h1{border-bottom:4px solid var(--p5-black);margin:0 0 .9em;padding-bottom:.35em;font-size:1.85em;line-height:1.3}.prose h1:before{content:"";background-color:var(--p5-red);width:64px;height:10px;margin-bottom:.7em;display:block}.prose h2{border-left:6px solid var(--p5-red);margin:2em 0 .7em;padding-left:.6em;font-size:1.35em;line-height:1.45}.prose h3{margin:1.7em 0 .5em;font-size:1.12em}.prose h4{margin:1.4em 0 .5em;font-size:1em}.prose p{margin:.85em 0}.prose a{color:#c3000f;text-decoration:underline}.prose strong{font-weight:800}.prose hr{border:0;border-top:3px solid var(--p5-black);margin:2.2em 0}.prose ul,.prose ol{margin:.85em 0;padding-left:1.5em}.prose li{margin:.3em 0}.prose li::marker{color:var(--p5-red);font-weight:700}.prose code{background-color:var(--p5-black);color:var(--p5-white);font-family:var(--font-mono);padding:.12em .4em;font-size:.88em}.prose pre{border-left:6px solid var(--p5-red);background-color:var(--p5-black);color:#f5f5f5;margin:1.2em 0;padding:1em 1.15em;line-height:1.65;overflow:auto}.prose pre code{color:inherit;background-color:#0000;padding:0;font-size:.9em}.prose pre.astro-code{color:#f5f5f5;background-color:var(--p5-black)!important}.prose blockquote{border-left:6px solid var(--p5-red);color:#444;background-color:#f7f7f7;margin:1.3em 0;padding:.7em 1.1em}.prose blockquote>:first-child{margin-top:0}.prose blockquote>:last-child{margin-bottom:0}.prose table{border-collapse:collapse;width:100%;margin:1.3em 0;font-size:.95em;display:block;overflow-x:auto}.prose th,.prose td{border:2px solid var(--p5-black);text-align:left;padding:.55em .75em}.prose th{background-color:var(--p5-red);color:var(--p5-white)}.prose img{max-width:100%;height:auto;margin:1.2em auto;display:block}.prose input[type=checkbox]{accent-color:var(--p5-red)}@media (width<=900px){.hero:after{display:none}}@media (width<=640px){:root{--shadow:5px 5px 0 var(--p5-red);--shadow-sm:3px 3px 0 var(--p5-red);--shadow-hover:8px 8px 0 var(--p5-red);--skew-card:-2deg}.card__link{padding:1rem 1.1rem}.tag-nav{padding:.75rem .8rem}}@media (width<=480px){:root{--nav-height:56px}.brand{font-size:.98rem}.brand__logo{width:24px;height:24px}.lesson__title{display:none}}@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important}}