:root{--bg:#020204;--bg-soft:#050507;--bg-card:#050506;--line:#17171d;--line-bright:#262630;--fg:#fff;--fg-dim:#ceced6;--fg-faint:#8d8d97;--red:#ff5f56;--green:#66ff73;--yellow:#ffd562;--blue:#5daeff;--magenta:#cc9dff;--cyan:#37d4df;--link:var(--magenta);--mono:"SFMono-Regular", "JetBrains Mono", "Fira Code", Menlo, Consolas, "Liberation Mono", monospace;--fs:14px;--fs-sm:10px;--radius:4px;--maxw:1100px}*{box-sizing:border-box}html{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}body{background:var(--bg);color:var(--fg);font-family:var(--mono);font-size:var(--fs);-webkit-font-smoothing:antialiased;margin:0;line-height:1.55}body.no-scroll{overflow:hidden}a{color:var(--link);border-bottom:1px solid #0000;text-decoration:none}a:hover{border-bottom-color:currentColor}a.muted{color:var(--fg-dim)}.comment{color:var(--fg-faint)}.prompt{color:var(--green)}::selection{color:#000;background:var(--yellow)}#app{max-width:var(--maxw);margin:0 auto;padding:clamp(1.5rem,4vw,3.5rem) clamp(1rem,4vw,2rem) 4rem}.site-head{margin-bottom:2.5rem}.ascii-name{font-size:var(--fs);color:var(--green);white-space:pre;text-shadow:0 0 12px #7ee78740;margin:0 0 1.5rem;line-height:1.15;overflow:hidden}.site-title{font-size:var(--fs);letter-spacing:-.01em;margin:0 0 .4rem;font-weight:600}.site-sub{color:var(--fg-dim);max-width:70ch;margin:0}.cat{margin-bottom:3rem}.cat-title{font-size:var(--fs);color:var(--yellow);border-bottom:1px solid var(--line);align-items:baseline;gap:.5rem;margin:0 0 1rem;padding-bottom:.5rem;font-weight:500;display:flex}.cat-count{color:var(--fg-faint);font-size:var(--fs-sm)}.grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem;display:grid}.site-foot{border-top:1px solid var(--line);font-size:var(--fs);margin-top:3rem;padding-top:1rem}.card{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;flex-direction:column;transition:border-color .15s,transform .15s;display:flex;overflow:hidden}.card:hover,.card:focus-visible{border-color:var(--line-bright);outline:none;transform:translateY(-2px)}.card:focus-visible{border-color:var(--link)}.preview{border-bottom:1px solid var(--line);background:#000;height:150px;position:relative;overflow:hidden}.preview--live .preview-frame{transform-origin:0 0;pointer-events:none;border:0;width:200%;height:200%;position:absolute;top:0;left:0;transform:scale(.5)}.preview--image{background:#010105}.preview-img{object-fit:cover;object-position:top center;width:100%;height:100%;display:block}.preview--code{background:var(--bg-soft)}.preview-code{font-size:var(--fs-sm);color:var(--fg-dim);white-space:pre;height:100%;margin:0;padding:.75rem .9rem;line-height:1.5;overflow:hidden;-webkit-mask-image:linear-gradient(#000 60%,#0000);mask-image:linear-gradient(#000 60%,#0000)}.preview-lang{font-size:var(--fs-sm);color:var(--fg-faint);background:var(--bg);border:1px solid var(--line);border-radius:3px;padding:1px 6px;position:absolute;bottom:.4rem;right:.5rem}.card-body{flex-direction:column;flex:1;gap:.55rem;padding:.9rem 1rem 1rem;display:flex}.card-head{justify-content:space-between;align-items:center;gap:.5rem;display:flex}.card-title{font-size:var(--fs);color:var(--fg);margin:0;font-weight:600}.badge{font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;border:1px solid;border-radius:3px;padding:2px 6px}.badge--live{color:var(--green)}.badge--code-only{color:var(--blue)}.card-desc{color:var(--fg-dim);font-size:var(--fs);flex:1;margin:0;line-height:1.5}.tags{flex-wrap:wrap;gap:.4rem;margin:0;padding:0;list-style:none;display:flex}.tag{color:var(--blue);font-size:var(--fs);opacity:.85}.card-links{border-top:1px solid var(--line);font-size:var(--fs);gap:1rem;padding-top:.4rem;display:flex}.overlay{z-index:100;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#000000b8;place-items:center;padding:clamp(.5rem,3vw,2rem);animation:.12s fade;display:grid;position:fixed;inset:0}@keyframes fade{0%{opacity:0}}.ov-panel{background:var(--bg-card);border:1px solid var(--line-bright);border-radius:6px;flex-direction:column;width:min(1000px,100%);height:min(760px,100%);display:flex;overflow:hidden;box-shadow:0 20px 60px #0009}.ov-bar{border-bottom:1px solid var(--line);background:var(--bg-soft);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;padding:.6rem .9rem;display:flex}.ov-meta{align-items:center;gap:.55rem;min-width:0;display:flex}.ov-path{color:var(--fg-faint)}.ov-title{color:var(--fg);font-weight:600}.ov-actions{font-size:var(--fs);align-items:center;gap:1rem;display:flex}.ov-close{border:1px solid var(--line-bright);color:var(--fg-dim);font-family:var(--mono);font-size:var(--fs-sm);cursor:pointer;background:0 0;border-radius:3px;width:26px;height:26px;padding:0;line-height:1}.ov-close:hover{color:var(--red);border-color:var(--red)}.ov-frame{background:#000;border:0;flex:1;width:100%}.ov-codewrap{background:var(--bg);flex:1;overflow:auto}.ov-code{font-size:var(--fs);white-space:pre;min-width:max-content;margin:0;padding:1.25rem 1.5rem;line-height:1.65}.tok-keyword{color:var(--magenta)}.tok-string{color:var(--green)}.tok-number{color:var(--yellow)}.tok-comment{color:var(--fg-faint);font-style:italic}.tok-literal{color:var(--blue)}@media (width<=600px){.grid{grid-template-columns:1fr}.ov-panel{height:100%}}