:root{
 --paper:#eee9dd;--paper2:#f7f2e7;--ink:#171611;--muted:#6b675e;--rule:#28261f;
 --soft:rgba(23,22,17,.13);--soft2:rgba(23,22,17,.055);--accent:#725342;
 --family:#6c725e;--admin:#303842;
 --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
 --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace
}
*{box-sizing:border-box}
html{background:var(--paper);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:1rem/1.5 var(--serif)}
button,a{color:inherit}button{font:inherit}
button:focus-visible,a:focus-visible,.mark:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.sheet{width:min(86rem,calc(100% - 1rem));margin:.5rem auto;border:1px solid var(--rule);background:linear-gradient(rgba(255,255,255,.2),rgba(255,255,255,.06)),var(--paper)}
.mast{min-height:2.45rem;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;padding:.55rem .8rem;border-bottom:1px solid var(--rule);font:.62rem/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.mast a{text-decoration:none}.mast span:last-child{text-align:right}
.opening{display:grid;grid-template-columns:1.4fr .6fr;gap:2rem;align-items:end;padding:clamp(1rem,3vw,2rem) .9rem 1.6rem;border-bottom:1px solid var(--rule)}
.eyebrow{margin:0 0 .4rem;font:.62rem/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.opening h1{margin:0;font-weight:400;font-size:clamp(3.8rem,9vw,8.5rem);line-height:.82;letter-spacing:-.065em}
.opening-note{max-width:25rem;margin:0 0 .45rem;font-size:1.06rem}
.source-piece{position:relative}
.source-head{display:flex;justify-content:space-between;gap:1rem;padding:.8rem .9rem;border-bottom:1px solid var(--rule);font:.7rem/1.4 var(--mono)}
.source-head p{margin:0}.source-state{display:flex;gap:.75rem;flex-wrap:wrap;justify-content:flex-end;color:var(--muted)}
.transcript{width:min(49rem,calc(100% - 2rem));margin:0 auto;padding:2.4rem 0 4.25rem;font-size:1.07rem;line-height:1.58}
.transcript>p,.source-beat>p,.record p,.register p{margin:.2rem 0 1.22rem}
.speaker{margin-top:1.95rem!important;margin-bottom:.18rem!important;font:.57rem/1.25 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.speaker.human{color:var(--ink)}
.register,.record{margin:2rem 0;padding:.8rem .9rem;border:1px solid var(--rule);background:rgba(247,242,231,.45)}
.register b,.record b{font:.59rem/1.2 var(--mono);letter-spacing:.1em}
.record{border-left:4px solid var(--admin)}
.statement{margin:1.2rem 0}
.silence{font-style:italic;color:var(--muted);padding:1.1rem 0}
.source-beat{position:relative}
.source-beat::before{content:"";position:absolute;left:-1.45rem;top:.3rem;width:.36rem;height:.36rem;border:1px solid var(--muted);border-radius:50%;background:var(--paper);transition:.25s}
.source-beat.is-read::before{background:var(--ink);border-color:var(--ink)}
.carrier-field{border-top:1px solid var(--rule);background:var(--paper2)}
.field-head{display:flex;justify-content:space-between;gap:1rem;align-items:end;padding:1rem .9rem;border-bottom:1px solid var(--rule)}
.field-head-note{max-width:22rem;text-align:right;font:.57rem/1.35 var(--mono);letter-spacing:.04em;color:var(--muted)}
.field-head h2{margin:0;font-size:clamp(2.5rem,6vw,5.5rem);font-weight:400;line-height:.9;letter-spacing:-.05em}
.field-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(15rem,22rem);min-height:38rem}
.field-stage{position:relative;min-height:38rem;overflow:auto;background:
 linear-gradient(to right,transparent 49.9%,rgba(23,22,17,.03) 50%,transparent 50.1%),
 radial-gradient(circle at 20% 35%,rgba(23,22,17,.025),transparent 20rem)}
.properties{border-left:1px solid var(--rule);padding:.8rem;min-width:0}
.properties-label{font:.6rem/1 var(--mono);letter-spacing:.1em;margin:0 0 1.2rem}
.empty{font-style:italic;color:var(--muted)}
.mark{position:absolute;appearance:none;width:10.2rem;border:1px solid rgba(23,22,17,.32);background:rgba(247,242,231,.92);text-align:left;cursor:pointer;padding:.52rem .58rem .56rem;z-index:2;box-shadow:2px 2px 0 rgba(23,22,17,.055);transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.mark .dot{display:block;width:.5rem;height:.5rem;border-radius:50%;border:1px solid var(--ink);background:var(--paper2);margin-bottom:.42rem}
.mark.person .dot{background:var(--ink)}
.mark.recordmark .dot{border-radius:0;transform:rotate(45deg)}
.mark.proposition .dot{border-style:dashed}
.mark-kind{display:block;margin-bottom:.22rem;font:.46rem/1.1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.mark strong{display:block;font-size:.98rem;font-weight:500;line-height:1.08}
.mark small{display:block;margin-top:.25rem;font:.55rem/1.3 var(--mono);color:var(--muted)}
.mark:hover{transform:translateY(-2px);box-shadow:3px 4px 0 rgba(23,22,17,.08);background:var(--paper2)}
.mark.is-active{background:var(--paper2);box-shadow:inset 0 0 0 1px var(--ink)}
.mark.is-active strong{text-decoration:underline;text-underline-offset:.2em}
.line{position:absolute;height:1px;background:var(--rule);transform-origin:0 0;z-index:0}
.line.family{background:none;border-top:1px dashed var(--family)}
.line.admin{height:2px;background:var(--admin)}
.line-label{position:absolute;z-index:1;font:.5rem/1.15 var(--mono);letter-spacing:.04em;background:var(--paper2);padding:.12rem .2rem;color:var(--muted);max-width:8rem}
.prop-kind{font:.56rem/1.3 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.prop-title{font-size:1.7rem;line-height:1;margin:.4rem 0 1.2rem}
.prop-row{padding:.55rem 0;border-top:1px solid var(--soft)}
.prop-row b{display:block;font:.54rem/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:.16rem}
.prop-row p{margin:0}
.brake{margin-top:1.2rem;border:1px solid var(--rule);padding:.65rem;font:.61rem/1.45 var(--mono)}
.field-foot{display:flex;justify-content:space-between;gap:1rem;padding:.6rem .8rem;border-top:1px solid var(--rule);font:.58rem/1.2 var(--mono);letter-spacing:.08em;color:var(--muted)}
.beyond{min-height:18rem;padding:2rem .9rem;border-top:1px solid var(--rule)}
.beyond h2{font-size:clamp(2rem,5vw,4rem);font-weight:400;margin:.2rem 0 .6rem}.beyond p:last-child{max-width:28rem}
@media(max-width:760px){
 .transcript{font-size:1.03rem;line-height:1.6}
 .sheet{width:100%;margin:0;border-left:0;border-right:0}
 .mast{grid-template-columns:1fr auto}.mast span:nth-child(2){display:none}
 .opening{grid-template-columns:1fr}.opening h1{font-size:4.6rem}.opening-note{margin:0}
 .source-head{align-items:flex-start;flex-direction:column}.source-state{justify-content:flex-start}
 .transcript{width:calc(100% - 2.8rem);padding-top:1.6rem}
 .source-beat::before{left:-.85rem}
 .field-layout{grid-template-columns:1fr}.field-stage{min-height:34rem}.properties{border-left:0;border-top:1px solid var(--rule);min-height:12rem}
 .field-head{align-items:flex-start}.field-head h2{font-size:3.3rem}
 .mark{width:8.7rem;padding:.46rem .48rem}.field-head-note{display:none}.field-foot{align-items:flex-start;flex-direction:column}
 .field-toggle{right:.6rem;bottom:max(.6rem,env(safe-area-inset-bottom));min-width:9.3rem}
}
.field-toggle{
 position:fixed;
 right:max(.8rem,env(safe-area-inset-right));
 bottom:max(.8rem,env(safe-area-inset-bottom));
 z-index:40;
 min-width:10.8rem;
 display:grid;
 grid-template-columns:1fr auto;
 gap:.18rem .8rem;
 align-items:center;
 border:1px solid var(--rule);
 background:rgba(238,233,221,.96);
 backdrop-filter:blur(7px);
 padding:.55rem .62rem .5rem;
 font:.59rem/1 var(--mono);
 letter-spacing:.09em;
 text-transform:uppercase;
 box-shadow:3px 3px 0 rgba(23,22,17,.09);
 cursor:pointer
}
.field-toggle span{font-weight:700}
.field-toggle b{font-weight:400;font-size:.8rem}
.field-toggle em{grid-column:1/-1;font-style:normal;font:.47rem/1.2 var(--mono);letter-spacing:.03em;text-transform:none;color:var(--muted)}
.field-toggle:hover{background:var(--ink);color:var(--paper)}
.field-toggle:hover em{color:var(--paper)}

@media(max-width:760px){
 .field-toggle{right:.6rem;bottom:max(.6rem,env(safe-area-inset-bottom));min-width:9.3rem}
}

.opening-next{
 border-top:1px solid var(--rule);
 min-height:19rem;
 align-items:center;
 background:rgba(255,255,255,.055)
}
.opening-next .opening-note{font-style:italic;color:var(--muted)}

.page-shelf{
 position:sticky;top:0;z-index:24;
 display:grid;grid-template-columns:7rem auto 1fr;gap:.8rem;align-items:center;
 min-height:4.25rem;padding:.45rem .7rem;
 border-bottom:1px solid var(--rule);
 background:rgba(238,233,221,.97);backdrop-filter:blur(7px)
}
.page-shelf-label{display:flex;flex-direction:column;gap:.14rem;font:.52rem/1.15 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.page-shelf-label strong{font-weight:400;color:var(--muted);letter-spacing:.03em;text-transform:none}
.page-tabs{display:flex;gap:.42rem;align-items:center}
.page-tab{
 appearance:none;border:0;background:transparent;padding:.18rem .18rem .1rem;cursor:pointer;
 display:grid;gap:.2rem;justify-items:center;color:var(--muted)
}
.page-tab[hidden]{display:none}
.page-tab.is-active{color:var(--ink)}
.page-glyph{
 width:1.85rem;height:2.35rem;border:1px solid currentColor;background:var(--paper2);
 display:flex;flex-direction:column;gap:.23rem;padding:.38rem .28rem;box-shadow:1px 1px 0 rgba(23,22,17,.08)
}
.page-glyph i{display:block;height:1px;background:currentColor;opacity:.58}
.page-glyph i:nth-child(2){width:78%}.page-glyph i:nth-child(3){width:62%}
.page-tab.is-active .page-glyph{box-shadow:inset 0 0 0 1px var(--ink),2px 2px 0 rgba(23,22,17,.07)}
.page-tab-label{font:.46rem/1 var(--mono);letter-spacing:.07em}
.page-peek{min-width:0;border-left:1px solid var(--rule);padding-left:.7rem}
.page-peek b{display:block;font:.58rem/1.2 var(--mono);letter-spacing:.05em;text-transform:uppercase;font-weight:600}
.page-peek span{display:block;margin-top:.12rem;color:var(--muted);font:.58rem/1.25 var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.source-page[hidden]{display:none}
.source-page{display:block}
@media(max-width:760px){
 .page-shelf{grid-template-columns:4.4rem auto 1fr;gap:.45rem;min-height:3.75rem;padding:.4rem .45rem}
 .page-shelf-label{font-size:.47rem}
 .page-glyph{width:1.55rem;height:2rem;padding:.32rem .22rem}
 .page-peek b{font-size:.5rem}.page-peek span{font-size:.49rem}
}


.page-turn{
 width:100%;
 margin:.9rem 0 .2rem;
 border:1px solid var(--rule);
 background:var(--ink);
 color:var(--paper2);
 padding:.8rem .9rem;
 text-align:left;
 cursor:pointer;
 display:grid;
 gap:.18rem;
 box-shadow:3px 3px 0 rgba(23,22,17,.1);
}
.page-turn[hidden]{display:none}
.page-turn span{
 font:.5rem/1.2 var(--mono);
 letter-spacing:.09em;
 text-transform:uppercase;
 opacity:.72;
}
.page-turn strong{
 font:400 1.15rem/1.25 var(--serif);
}
.page-turn:hover{transform:translateY(-1px)}