Automata & Experiments Lab
/* ——— NOTEBOOK ROOT ——— */
.open-notebook{
–paper:#FDFCF8;
–ink:#0A0A0A;
–line:rgba(0,0,0,.08);
–gutter:rgba(0,0,0,.15);
–staple:rgba(140,110,80,.35);
–left-skew:1.2deg;
–right-skew:-0.8deg;
display:flex;
justify-content:center;
margin:2rem 0 4rem;
perspective:1200px; /* subtle 3-D */
}
/* single sheet */
.page{
width:50%;
max-width:360px;
background:var(–paper);
box-shadow:0 0 0 1px rgba(0,0,0,.05);
font-family:var(–wp–preset–font-family–body), “Helvetica Neue”, sans-serif;
font-weight:300;
line-height:1.6;
color:var(–ink);
position:relative;
padding:48px 36px 64px 48px;
}
/* ruled lines */
.page::before{
content:””;
position:absolute;
inset:0;
background-image:repeating-linear-gradient(
var(–line) 0 1px,
transparent 1px 24px
);
pointer-events:none;
}
/* left margin on both pages */
.page::after{
content:””;
position:absolute;
top:0;bottom:0;left:36px;
width:1px;
background:var(–line);
}
/* ——— LEFT PAGE ——— */
.left{
transform:rotateY(var(–left-skew));
transform-origin:right center;
border-right:1px solid var(–gutter);
}
/* staples only on left */
.left .staple{
position:absolute;
left:20px;
width:14px;height:2px;
background:var(–staple);
border-radius:1px;
}
.left .staple:nth-of-type(1){top:48px;transform:rotate(-2deg);}
.left .staple:nth-of-type(2){top:168px;transform:rotate(1deg);}
.left .staple:nth-of-type(3){top:288px;transform:rotate(-1deg);}
/* coffee ring */
.coffee{
position:absolute;
top:60px;right:40px;
width:80px;height:80px;
border:1px solid rgba(120,70,20,.12);
border-radius:50%;
transform:rotate(-18deg);
opacity:.45;
}
.coffee::before{
content:””;
position:absolute;
inset:8px;
border:inherit;
border-radius:inherit;
transform:rotate(24deg);
}
/* ——— RIGHT PAGE ——— */
.right{
transform:rotateY(var(–right-skew));
transform-origin:left center;
border-left:1px solid var(–gutter);
}
/* different staples (shorter) */
.right .staple{
position:absolute;
left:20px;
width:10px;height:2px;
background:var(–staple);
border-radius:1px;
opacity:.6;
}
.right .staple:nth-of-type(1){top:88px;transform:rotate(1deg);}
.right .staple:nth-of-type(2){top:208px;transform:rotate(-1deg);}
/* ——— CONTENT UTILITIES ——— */
h3{
font-size:20px;
font-weight:400;
margin:0 0 8px;
letter-spacing:.02em;
}
.date{
font-size:13px;
opacity:.6;
margin-bottom:24px;
}
p{margin:0 0 24px;font-size:16px;}
.sketch{
margin:24px 0;
height:120px;
background:
linear-gradient(90deg,var(–line) 1px,transparent 1px),
linear-gradient(var(–line) 1px,transparent 1px);
background-size:16px 16px;
opacity:.25;
}
.correction{
display:inline-block;
transform:rotate(-1deg);
border-bottom:1px solid var(–ink);
}
/* ——— MOBILE: stack pages ——— */
@media(max-width:720px){
.open-notebook{flex-direction:column;align-items:center;}
.page{width:100%;max-width:400px;transform:none;border:none;margin-bottom:1px;}
}
Copy
Entry #001
2025-12-17 · 07:43
The laboratory opens flat.
Left page: observations.
Hypothesis: if the gutter is only CSS,
the book will never run out of pages.
Copy
Entry #002
2025-12-17 · 08:02
Right page: next steps.
Todo list:
1. Ship before coffee cools.
2. Document the failure.
3. Turn the page.
(Staples shorter here—budget cuts.)