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-02 22:50:20 +01:00
< style >
2026-06-05 23:34:53 +01:00
/* ── Self-contained index styles (Studio provides site chrome) ── */
: root {
--c-accent : #c9935a ;
--c-accent-l : #d4a87c ;
--c-bg : #0d1117 ;
--c-text : #e6edf3 ;
--c-muted : #9aa7b4 ;
--c-border : #2a3340 ;
--c-blue : #38bdf8 ;
--c-purple : #a855f7 ;
--c-gold : #f59e0b ;
}
* , * :: before , * :: after { box-sizing : border-box ; }
body {
margin : 0 ;
padding : 0 ;
background : transparent ;
color : var ( - - c - text ) ;
font-family : system-ui , - apple-system , 'Segoe UI' , Roboto , Helvetica , Arial , sans-serif ;
line-height : 1.6 ;
-webkit- font-smoothing : antialiased ;
}
2026-06-02 22:50:20 +01:00
/* ── Section label kicker ── */
. section-label {
display : inline-block ;
font-family : ui-monospace , 'SF Mono' , 'Cascadia Code' , Consolas , monospace ;
font-size : 0.72 rem ;
letter-spacing : 0.22 em ;
text-transform : uppercase ;
2026-06-05 23:34:53 +01:00
color : var ( - - c - blue ) ;
2026-06-02 22:50:20 +01:00
border : 1 px solid rgba ( 147 , 140 , 129 , 0.25 ) ;
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-02 22:50:20 +01:00
/* ── Gradient index title ── */
. blog-header__title {
background : linear-gradient ( 90 deg , #c9935a , #f59e0b 40 % , #38bdf8 ) ;
-webkit- background-clip : text ;
background-clip : text ;
color : transparent ;
font-weight : 800 ;
2026-06-05 23:34:53 +01:00
font-size : 2.4 rem ;
line-height : 1.25 ;
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 ;
background : #0c1119 ;
border : 1 px solid var ( - - c - border ) ;
border-radius : 12 px ;
padding : 20 px 24 px ;
transition : border-color 0.2 s ;
}
. blog-card : hover {
border-color : var ( - - c - accent ) ;
2026-06-02 22:50:20 +01:00
}
/* ── Date pill ── */
. blog-card__date {
display : inline-block ;
font-family : ui-monospace , 'SF Mono' , 'Cascadia Code' , Consolas , monospace ;
font-size : 0.72 rem ;
letter-spacing : 0.22 em ;
text-transform : uppercase ;
2026-06-05 23:34:53 +01:00
color : var ( - - c - blue ) ;
2026-06-02 22:50:20 +01:00
border : 1 px solid rgba ( 147 , 140 , 129 , 0.25 ) ;
border-radius : 999 px ;
padding : 4 px 14 px ;
margin-bottom : 10 px ;
}
2026-06-05 23:34:53 +01:00
. blog-card__title {
color : var ( - - c - text ) ;
font-size : 1.25 rem ;
font-weight : 700 ;
line-height : 1.35 ;
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-05 23:34:53 +01:00
color : var ( - - c - blue ) ;
font-size : 0.9 rem ;
font-weight : 500 ;
2026-06-02 22:50:20 +01:00
}
. blog-card : hover . blog-card__read {
2026-06-05 23:34:53 +01:00
color : var ( - - c - purple ) ;
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 >
