/* A physical page surface above incomplete, authored code fragments. */
.chapter-shell{position:relative;isolation:isolate;background:#080b0b}
.chapter-stage{position:sticky;isolation:isolate}
.chapter-shell .studio{background:#000}
.chapter-shell .chapter-surface{position:relative;top:auto;z-index:2;will-change:clip-path}
.chapter-under{position:absolute;inset:0;z-index:0;overflow:clip;pointer-events:none;color:#a6c79e;background:#080d0c;--layer-reveal:0}
.chapter-under::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#a6d99a06 1px,transparent 1px),linear-gradient(#a6d99a06 1px,transparent 1px);background-size:44px 44px}
.chapter-under::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,#ffffff04 0 1px,transparent 1px 4px)}
.layer-panel{position:absolute;bottom:0;left:0;width:100%;height:100svh;padding:24px var(--pad);display:flex;flex-direction:column;gap:24px;font-family:"Space Mono",monospace}
.layer-meta,.layer-tail{display:flex;justify-content:space-between;gap:16px;font-size:clamp(9px,.9vw,12px);line-height:1.6;letter-spacing:0;color:#9cbd937a}
.layer-meta span:last-child{white-space:nowrap}
.layer-codefield{position:relative;flex:1;min-height:0;display:flex;align-items:center}
.layer-code,.layer-trace{margin:0;font:clamp(12px,min(1.45vw,1.75svh),20px)/1.7 "Space Mono",monospace;font-weight:400;letter-spacing:0;tab-size:2;white-space:pre-wrap;overflow-wrap:anywhere}
.layer-code{position:relative;z-index:1;width:min(100%,64ch);text-shadow:0 0 18px #a6d99a15}
.code-line{display:flex;counter-increment:source-line;min-height:1.7em}
.code-line::before{content:counter(source-line,decimal-leading-zero);flex:none;width:4ch;color:#a6d99a38;user-select:none}
.code-line>span{min-width:0}
.layer-code>code,.layer-trace>code{display:block;counter-reset:source-line;font:inherit}
.code-comment{color:#667761}.code-string{color:#ced4a2}.code-keyword{color:#86ab89}.code-value{color:#d8b987}
.layer-trace{position:absolute;left:58%;top:0;bottom:0;width:70%;overflow:hidden;font-size:clamp(10px,1.1vw,16px);line-height:2.2;opacity:.14;transform:translateY(calc(var(--layer-reveal)*-45px));mask-image:linear-gradient(transparent,#000 8%,#000 85%,transparent)}
.layer-trace .code-line{min-height:2.2em}
.layer-tail{border-top:1px solid #a6d99a1c;padding-top:14px}
.layer-tail span:last-child{color:#b3d9a3;opacity:calc(.2 + var(--layer-reveal)*.8)}
.chapter-cut{position:absolute;top:0;left:0;right:0;height:1px;z-index:4;opacity:0;pointer-events:none;background:#eee6d7;box-shadow:0 -4px 0 #0005,0 7px 22px #0009;transform-origin:center}
.layer-signal{background:#080d10}.layer-frame{background:#10100b}.layer-tape{background:#100d09}
.layer-frame .code-keyword,.layer-tape .code-keyword{color:#adad86}.layer-frame .code-string,.layer-tape .code-string{color:#d9cba5}
.reduced .chapter-shell{height:auto!important}.reduced .chapter-stage{position:relative;top:auto!important}.reduced .chapter-under,.reduced .chapter-cut{display:none}.reduced .chapter-surface{clip-path:none!important;will-change:auto}
@media(max-width:600px){.layer-panel{padding:24px 20px;gap:20px}.layer-code{font-size:clamp(10px,3.05vw,15px);line-height:1.75}.code-line{min-height:1.75em}.code-line::before{width:3ch}.layer-meta,.layer-tail{font-size:9px}.layer-trace{left:24%;width:120%;font-size:11px;opacity:.085}.layer-codefield{align-items:center}}
@media(max-height:680px){.layer-panel{gap:12px;padding-top:18px;padding-bottom:18px}.layer-code{font-size:clamp(9px,1.75svh,12px);line-height:1.6}.code-line{min-height:1.6em}.layer-tail{padding-top:10px}}
@media(max-height:460px){.layer-panel{padding-top:12px;padding-bottom:12px;gap:10px}.layer-code{font-size:clamp(8px,2.5svh,11px);line-height:1.6;width:100%}.layer-code>code{columns:2;column-gap:28px}.code-line{break-inside:avoid}.layer-meta,.layer-tail{font-size:8px}.layer-trace{left:40%;opacity:.07}}