2026-05-26 11:12:08 +01:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > Blog — Tinqs Studio< / title >
< meta name = "description" content = "Dev logs, behind-the-scenes, and lessons learned from building games, tools, and platform infrastructure at Tinqs Studio." >
< meta name = "robots" content = "index, follow" >
< link rel = "canonical" href = "https://www.tinqs.com/blog/" >
< meta property = "og:type" content = "website" >
< meta property = "og:url" content = "https://www.tinqs.com/blog/" >
< meta property = "og:title" content = "Blog — Tinqs Studio" >
< meta property = "og:description" content = "Dev logs, behind-the-scenes, and lessons learned from building games, tools, and platform at Tinqs Studio." >
< meta property = "og:image" content = "https://www.tinqs.com/img/og-cover.jpg" >
2026-06-14 01:32:08 +01:00
< link rel = "preconnect" href = "https://fonts.googleapis.com" >
< link rel = "preconnect" href = "https://fonts.gstatic.com" crossorigin >
< link href = "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Inter:wght@400;500;600;700&display=swap" rel = "stylesheet" >
2026-06-02 22:50:20 +01:00
< style >
2026-06-14 01:32:08 +01:00
/* ── Tinqs Studio brand — index styles ── */
2026-06-05 23:34:53 +01:00
: root {
2026-06-14 01:32:08 +01:00
/* Studio near-black base */
--c-bg : #0B0C0E ;
--c-bg-raised : #15171A ;
/* Foreground */
--c-fg : #ECEEF1 ;
--c-muted : #8A95A3 ;
/* Family accents */
--c-lime : #B6FF3C ;
--c-violet : #7C5CFF ;
/* Borders */
--c-border : rgba ( 255 , 255 , 255 , .07 ) ;
--c-border-strong : rgba ( 255 , 255 , 255 , .12 ) ;
2026-06-05 23:34:53 +01:00
}
* , * :: before , * :: after { box-sizing : border-box ; }
body {
margin : 0 ;
padding : 0 ;
2026-06-14 01:32:08 +01:00
background : var ( - - c - bg ) ;
color : var ( - - c - fg ) ;
font-family : 'Inter' , system-ui , - apple-system , sans-serif ;
font-size : 16 px ;
2026-06-05 23:34:53 +01:00
line-height : 1.6 ;
-webkit- font-smoothing : antialiased ;
}
2026-06-02 22:50:20 +01:00
/* ── Section label kicker ── */
. section-label {
display : inline-block ;
2026-06-14 01:32:08 +01:00
font-family : 'JetBrains Mono' , ui-monospace , 'SF Mono' , Consolas , monospace ;
2026-06-02 22:50:20 +01:00
font-size : 0.72 rem ;
2026-06-14 01:32:08 +01:00
letter-spacing : 0.18 em ;
2026-06-02 22:50:20 +01:00
text-transform : uppercase ;
2026-06-14 01:32:08 +01:00
color : var ( - - c - muted ) ;
border : 1 px solid var ( - - c - border ) ;
2026-06-02 22:50:20 +01:00
border-radius : 999 px ;
padding : 4 px 14 px ;
margin-bottom : 16 px ;
}
2026-06-05 23:34:53 +01:00
/* ── Blog header ── */
. blog-header {
max-width : 720 px ;
margin : 0 auto ;
padding : 60 px 24 px 32 px ;
}
2026-06-14 01:32:08 +01:00
/* ── Gradient index title — lime → violet ── */
2026-06-02 22:50:20 +01:00
. blog-header__title {
2026-06-14 01:32:08 +01:00
font-family : 'Space Grotesk' , system-ui , - apple-system , sans-serif ;
background : linear-gradient ( 90 deg , var ( - - c - lime ) , var ( - - c - violet ) ) ;
2026-06-02 22:50:20 +01:00
-webkit- background-clip : text ;
background-clip : text ;
color : transparent ;
2026-06-14 01:32:08 +01:00
font-weight : 700 ;
2026-06-05 23:34:53 +01:00
font-size : 2.4 rem ;
2026-06-14 01:32:08 +01:00
line-height : 1.2 ;
2026-06-05 23:34:53 +01:00
margin : 0 0 12 px ;
}
. blog-header__subtitle {
color : var ( - - c - muted ) ;
font-size : 1.05 rem ;
line-height : 1.6 ;
margin : 0 ;
}
/* ── Blog list ── */
. blog-list {
max-width : 720 px ;
margin : 0 auto ;
padding : 0 24 px 60 px ;
display : flex ;
flex-direction : column ;
gap : 16 px ;
}
/* ── Blog card ── */
. blog-card {
display : block ;
text-decoration : none ;
2026-06-14 01:32:08 +01:00
background : var ( - - c - bg - raised ) ;
2026-06-05 23:34:53 +01:00
border : 1 px solid var ( - - c - border ) ;
2026-06-14 01:32:08 +01:00
border-radius : 8 px ;
2026-06-05 23:34:53 +01:00
padding : 20 px 24 px ;
transition : border-color 0.2 s ;
}
. blog-card : hover {
2026-06-14 01:32:08 +01:00
border-color : var ( - - c - lime ) ;
2026-06-02 22:50:20 +01:00
}
/* ── Date pill ── */
. blog-card__date {
display : inline-block ;
2026-06-14 01:32:08 +01:00
font-family : 'JetBrains Mono' , ui-monospace , 'SF Mono' , Consolas , monospace ;
2026-06-02 22:50:20 +01:00
font-size : 0.72 rem ;
2026-06-14 01:32:08 +01:00
letter-spacing : 0.18 em ;
2026-06-02 22:50:20 +01:00
text-transform : uppercase ;
2026-06-14 01:32:08 +01:00
color : var ( - - c - muted ) ;
border : 1 px solid var ( - - c - border ) ;
2026-06-02 22:50:20 +01:00
border-radius : 999 px ;
padding : 4 px 14 px ;
margin-bottom : 10 px ;
}
2026-06-05 23:34:53 +01:00
. blog-card__title {
2026-06-14 01:32:08 +01:00
font-family : 'Space Grotesk' , system-ui , - apple-system , sans-serif ;
font-weight : 600 ;
color : var ( - - c - fg ) ;
font-size : 1.2 rem ;
line-height : 1.3 ;
2026-06-05 23:34:53 +01:00
margin : 0 0 8 px ;
}
. blog-card__excerpt {
color : var ( - - c - muted ) ;
font-size : 0.92 rem ;
line-height : 1.55 ;
margin : 0 0 12 px ;
2026-06-02 22:50:20 +01:00
}
/* ── Read link accent ── */
. blog-card__read {
2026-06-14 01:32:08 +01:00
color : var ( - - c - lime ) ;
font-size : 0.875 rem ;
2026-06-05 23:34:53 +01:00
font-weight : 500 ;
2026-06-02 22:50:20 +01:00
}
. blog-card : hover . blog-card__read {
2026-06-14 01:32:08 +01:00
color : var ( - - c - violet ) ;
2026-06-02 22:50:20 +01:00
}
< / style >
2026-05-26 11:12:08 +01:00
< / head >
< body >
<!-- BLOG HEADER -->
< div class = "blog-header" >
< span class = "section-label" > Dev Log< / span >
< h1 class = "blog-header__title" > From the Workshop< / h1 >
< p class = "blog-header__subtitle" > Behind-the-scenes notes on building games, forging tools, and running a small studio that punches above its weight.< / p >
< / div >
<!-- BLOG LIST -->
< div class = "blog-list" >
2026-06-03 02:47:06 +01:00
<!-- hand - authored HTML posts (not from build.js) -->
< a href = "pi-flow-native-brain" class = "blog-card" >
2026-06-04 21:05:43 +01:00
< span class = "blog-card__date" > 4 June 2026< / span >
2026-06-03 02:47:06 +01:00
< h2 class = "blog-card__title" > How Pi Agents Build, Test, and Ship Game Code with Oracle-Backed Flows< / h2 >
2026-06-10 21:47:13 +01:00
< p class = "blog-card__excerpt" > A flow spawns, agents fan out through five oracle gates, the game-builder fixes 19 red tests while vision judges check the live game — and it all runs as one autonomous flow.< / p >
2026-06-03 02:47:06 +01:00
< span class = "blog-card__read" > Read → < / span >
< / a >
2026-05-26 11:12:08 +01:00
{{CARDS}}
< / div >
< / body >
< / html >
