body { font-size: 15.5px; }
.hero { min-height: 100svh; display: grid; align-content: center; padding: 7rem 0 3rem; }
.term { border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: rgba(8,12,18,.72); backdrop-filter: blur(18px); box-shadow: 0 30px 80px rgba(0,0,0,.5), 0 0 60px color-mix(in srgb, var(--accent) 10%, transparent); max-width: 860px; }
.term .bar { display: flex; align-items: center; gap: 7px; padding: .7rem 1rem; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.03); color: var(--muted); font-size: .8rem; }
.term .bar i { width: 11px; height: 11px; border-radius: 50%; } .bar i:nth-child(1){background:#ff5f56} .bar i:nth-child(2){background:#ffbd2e} .bar i:nth-child(3){background:#27c93f}
.term .bar span { margin-left: .6rem; }
.term pre { padding: 1.4rem 1.5rem 1.8rem; font: 1rem/1.75 var(--mono); white-space: pre-wrap; min-height: 330px; }
.p { color: var(--accent); } .c { color: var(--muted); } .k { color: var(--accent3); } .s { color: #f9c859; } .n { color: var(--accent2); }
.cursor { display: inline-block; width: .6em; height: 1.1em; background: var(--accent); vertical-align: text-bottom; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.hero .actions { margin-top: 2rem; }
.btn { border-radius: 8px; font-family: var(--mono); }
.btn::before { content: "$"; opacity: .6; }
.title { font: 700 clamp(1.8rem, 5vw, 3rem)/1.1 var(--mono); text-transform: none; letter-spacing: -.03em; }
.title::before { content: "// "; color: var(--accent); }
.eyebrow { font-family: var(--mono); text-transform: none; letter-spacing: 0; }
.files { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1rem; }
.file { padding: 1.4rem; display: flex; flex-direction: column; gap: .6rem; min-height: 210px; position: relative; overflow: hidden; }
.file::after { content: ""; position: absolute; inset: 0; background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%); opacity: 0; transition: opacity .3s; pointer-events: none; }
.file:hover::after { opacity: 1; } .file:hover { border-color: var(--accent); }
.file .nm { color: var(--accent2); font-weight: 700; }
.file .nm::before { content: "▸ "; color: var(--accent); }
.file p { color: var(--muted); flex: 1; }
.tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.tags span { font-size: .72rem; padding: .22rem .55rem; border-radius: 6px; border: 1px solid var(--line); color: var(--accent3); }
.file .go { color: var(--accent); font-size: .85rem; }
.code-block { padding: 1.4rem 1.6rem; font: .95rem/1.8 var(--mono); overflow-x: auto; max-width: 760px; }
.cta { text-align: center; padding: 5rem 0 2rem; }
.cta h2 { font: 700 clamp(2rem, 7vw, 4.5rem)/1.05 var(--mono); letter-spacing: -.04em; margin: 1rem 0 2rem; }
.cta .actions { justify-content: center; }
#repos .loading { color: var(--muted); }

.phead { display: flex; align-items: center; gap: .9rem; }
.phead .nm { display: block; }
.plogo { position: relative; width: 52px; height: 52px; flex: none; border-radius: 13px; display: grid; place-items: center; overflow: hidden; background: linear-gradient(135deg, color-mix(in srgb, var(--lc) 55%, #0a0e14), color-mix(in srgb, var(--lc) 18%, #0a0e14)); border: 1px solid color-mix(in srgb, var(--lc) 45%, transparent); font: 800 1.5rem var(--mono); color: #fff; }
.plogo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #0a0e14; }
.vis { display: inline-block; margin-top: .2rem; padding: .1rem .55rem; border-radius: 999px; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; border: 1px solid var(--line); color: var(--muted); }
.vis.pub { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.proj .go { color: var(--accent); font-size: .85rem; }
.proj .go.off { color: var(--muted); }
.proj a.go::after { content: ""; position: absolute; inset: 0; }
.proj { position: relative; }
.proj.priv { cursor: default; }

@media (max-width: 760px) {
  .hero { padding-top: 4.5rem; }
  .term pre { font-size: .84rem; padding: 1rem 1rem 1.3rem; min-height: 270px; }
  .hero .actions { flex-wrap: nowrap; gap: .5rem; }
  .hero .actions .btn { padding: .7rem .9rem; font-size: .8rem; white-space: nowrap; flex: 1; justify-content: center; }
  .files { grid-template-columns: 1fr; }
  .cta h2 { font-size: clamp(1.7rem, 8vw, 2.4rem); }
}

.hero { grid-template-columns: minmax(0, 1fr); }
.term { min-width: 0; max-width: 100%; }
.term pre { overflow-wrap: anywhere; word-break: break-word; }
@media (max-width: 760px) {
  .hero { justify-items: center; text-align: center; }
  .term { width: 100%; text-align: left; }
  .hero .actions { width: 100%; justify-content: center; }
  .sec-head { text-align: center; justify-items: center; }
  .sec-head p { text-align: center; }
  .file { text-align: center; align-items: center; }
  .phead { flex-direction: column; text-align: center; gap: .6rem; }
  .tags { justify-content: center; }
  .cta { padding-inline: 0; }
}