/* R3: one readable viewport, a generous book, and a guided detail camera. */
#desk{height:100svh;min-height:0;overflow:hidden;padding:28px 58px;gap:22px}
#desk>.eyebrow{font-size:12px;letter-spacing:.14em}
#open-book{--book-h:min(71svh,660px);height:var(--book-h);width:calc(var(--book-h)*.72);margin:2px 58px 40px 0;transform:perspective(1600px) rotateY(-19deg) rotateX(7deg) rotateZ(-4deg);box-shadow:35px 46px 45px #081d2480}
#open-book:hover{transform:perspective(1600px) rotateY(-13deg) rotateX(4deg) rotateZ(-2deg) translateY(-4px)}
#open-book .book-spine{width:14%;padding:5% 4%;font-size:clamp(9px,1.6vh,13px);border-right:2px solid #978969;background:linear-gradient(90deg,#a99e81,#e6ddc5 50%,#cbbd9c)}
#open-book .book-cover{padding:5% 5.5% 4%;min-width:0;position:relative;border-width:3px}
#open-book .book-cover strong{font-size:calc(var(--book-h)*.064);line-height:1.02;margin-top:7%;letter-spacing:-.055em;font-weight:700}
#open-book .book-cover strong span{white-space:nowrap}
#open-book .book-edition{font-size:calc(var(--book-h)*.015);padding-bottom:5%;letter-spacing:.05em}
#open-book .cover-drawing{display:block;align-self:center;width:100%;height:49%;min-height:0;object-fit:contain;margin:4% 0 2%;transform:none;mix-blend-mode:multiply}
#open-book .book-bottom{display:flex;justify-content:space-between;gap:8px;border-top:1px solid #8b9f91;padding-top:5%;font-size:calc(var(--book-h)*.014);line-height:1.2}
#open-book .book-bottom>span{white-space:nowrap}
#open-book .page-block{left:14%;right:-12%;top:5%;bottom:-6%;background:repeating-linear-gradient(0deg,#d8cfb9 0 1px,#f2ebda 1px 3px,#bfb198 3px 3.6px);transform:skewY(4deg);box-shadow:5px 7px 0 #c1b491,8px 11px 0 #253d38,12px 14px 5px #142c3060}
#open-book .book-marker{right:-16%;font-size:calc(var(--book-h)*.021);padding:2% 3% 2% 8%}
#open-book .marker-controls{top:23%}#open-book .marker-transactions{top:55%}
.title-row{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:end;column-gap:20px;row-gap:8px;padding-top:17px}
.title-row>div:first-child{grid-column:1;grid-row:1}.title-row .eyebrow{margin-bottom:9px}
.title-row h2{white-space:normal;font-size:clamp(34px,3.7vw,57px);line-height:1.03}
.title-row .intro{grid-column:1;grid-row:2;max-width:none;white-space:normal;margin:0;font-size:14px;line-height:1.4}
.title-row .plate-number{grid-column:2;grid-row:1/3;font-size:clamp(58px,6.5vw,94px)}
.controls-show .plate-body{grid-template-columns:minmax(0,1fr) 308px}
.controls-show .annotations{container-type:normal;display:flex;min-width:0;padding-bottom:45px}
.controls-show .note-list{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:3px;grid-auto-rows:31px;flex:none}
.controls-show .note{position:static;display:flex;align-items:center;justify-content:center;padding:0;min-height:31px;height:31px;border:1px solid var(--rule);gap:0}
.controls-show .note>b{padding:0;font-size:12px}.controls-show .note>span,.controls-show .note.is-current>span{display:none}
.controls-show .note.is-current{background:var(--ink);border-color:var(--ink)}.controls-show .note.is-current>b{color:var(--paper)}
#selected-note{padding-top:15px}#selected-note h3{font-size:17px;font-weight:600;line-height:1.2;margin:0 0 7px}#selected-note p{font-size:14px;line-height:1.45;color:var(--muted);margin:0}
#guided-view{display:flex;flex-direction:column;min-height:0;margin-top:20px;flex:1;padding-top:12px;border-top:1px solid var(--rule)}
.guided-top{display:flex;justify-content:space-between;gap:10px;font:11px AtlasMono,monospace;letter-spacing:.05em;color:var(--green);flex:none}
#guide-canvas{width:100%;height:auto;min-height:0;aspect-ratio:4/3;object-fit:contain;flex:1;max-height:310px;margin:9px 0 13px;border:1px solid #d9ddcf;background:#eeeade}
#guide-title{font-size:19px;line-height:1.2;letter-spacing:-.025em;margin:0 0 7px;flex:none}
#guide-caption{font-size:14px;line-height:1.45;margin:0;min-height:62px;flex:none}
#guide-progress{height:3px;margin-top:14px;background:#d5dbce;position:relative;flex:none}
#guide-progress:after{content:'';display:block;transform-origin:left;width:100%;height:100%;background:#a6772c;transform:scaleX(var(--progress,0))}
.active-cue{position:absolute;transform:translateX(-50%);padding:5px 8px;background:#e9ce92;color:#493b22;font:11px AtlasMono,monospace;border:1px solid #bc9451;pointer-events:none;z-index:3;white-space:nowrap}
.active-cue:after{content:'';position:absolute;height:14px;width:1px;background:#b28a49;top:100%;left:50%}
.key-controls{position:absolute;inset:0;pointer-events:none;z-index:6}.key-controls .key-hit{position:absolute;pointer-events:none;min-width:0;min-height:0;margin:0;padding:0;border:0;border-radius:4px;background:transparent;box-shadow:none}.key-controls .key-hit:focus-visible{outline:2px solid #a77626;outline-offset:3px;background:#d8b65b25}.key-controls .key-hit:disabled{opacity:1}
.service-controls{position:absolute;inset:0;pointer-events:none;z-index:7}.service-controls button{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;background:transparent;border:1px solid transparent;border-radius:50%;width:36px;height:36px;min-height:0;padding:0}
.service-controls button:hover:not(:disabled),.service-controls button:focus-visible{border-color:#a77626;background:#d8b65b25;box-shadow:0 0 0 3px #d8b65b30}.service-controls .tape-hit{width:45px;height:80px;border-radius:4px}
.service-note{position:absolute;bottom:9px;left:50%;transform:translateX(-50%);margin:0;max-width:95%;padding:5px 9px;background:#f3f0e7eb;font:11px AtlasMono,monospace;white-space:nowrap;pointer-events:none}
.controls-show .operation{gap:14px}.controls-show .operation ol{gap:13px}.controls-show .operation li{font-size:11px}.controls-show .operation p{font-size:13px;min-height:28px;max-width:250px}
.controls-show .operation li.active{box-shadow:0 0 0 4px #efd7a1}
@media(min-width:901px) and (max-height:740px){.title-row{padding-top:10px;row-gap:5px}.title-row h2{font-size:36px}.title-row .plate-number{font-size:70px}.controls-show .plate-body{grid-template-columns:minmax(0,1fr) 286px}#guided-view{margin-top:9px;padding-top:8px}#guide-canvas{margin:6px 0 8px}#guide-title{font-size:16px}#guide-caption{font-size:13px;min-height:52px;line-height:1.3}#guide-progress{margin-top:8px}}
@media(max-width:1100px){.controls-show .operation>.eyebrow{display:none}.controls-show .operation ol{gap:11px}.controls-show .operation li{font-size:10px}.controls-show .operation p{font-size:12px;max-width:170px}}
@media(max-width:900px){
 #desk{padding:25px 34px;gap:20px}#desk>.eyebrow{font-size:9px}#open-book{--book-h:min(67svh,108vw,610px);margin-right:40px}
 .title-row{display:block;padding-top:10px}.title-row h2{font-size:clamp(26px,5.5vw,42px);line-height:1.02}.title-row .intro{margin-top:6px;font-size:12px}.title-row .plate-number{display:none}
 .controls-show .plate-body{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) 180px;gap:10px}
 .controls-show .annotations{padding-bottom:34px}.controls-show .annotations>.eyebrow{margin:4px 0 6px;font-size:9px}
 #selected-note{padding-top:8px}#selected-note h3{font-size:14px;margin-bottom:4px}#selected-note p{font-size:12px;line-height:1.3}
 #guided-view{display:grid;grid-template-columns:115px 1fr;grid-template-rows:auto auto 1fr;column-gap:12px;margin-top:7px;padding-top:0;border-top:0;position:relative}
 .guided-top{grid-column:2;font-size:9px}#guide-canvas{grid-column:1;grid-row:1/4;width:115px;height:86px;max-height:100%;margin:0;align-self:center;flex:none}#guide-title{grid-column:2;font-size:14px;margin:5px 0 3px}#guide-caption{grid-column:2;font-size:12px;line-height:1.3;min-height:0}#guide-progress{display:none}
 .controls-show .operation{flex-direction:row;flex-wrap:wrap;gap:5px;padding:7px 0}.controls-show .operation ol{gap:8px;flex-wrap:nowrap}.controls-show .operation li{font-size:9px}.controls-show .operation li span{display:none}.controls-show .operation p{min-height:0;max-width:none;margin-left:auto;font-size:11px}
 .service-note{font-size:9px;bottom:3px}.active-cue{font-size:9px;padding:3px 5px}
}
@media(min-width:480px) and (max-height:540px){
 .title-row{padding-top:6px}.title-row h2{font-size:26px}.title-row .intro{font-size:12px}.title-row .eyebrow{margin-bottom:5px}
 .controls-show .plate-body{grid-template-columns:minmax(0,1fr) 236px;grid-template-rows:minmax(0,1fr);gap:14px}.controls-show .annotations{padding-bottom:30px}
 .controls-show .note-list{grid-auto-rows:25px;gap:2px}.controls-show .note{height:25px;min-height:25px}.controls-show .note>b{font-size:10px}
 #guided-view{display:flex;margin-top:6px;gap:0}.guided-top{font-size:9px}#guide-canvas{width:100%;height:auto;min-height:0;flex:1;margin:4px 0;max-height:110px;aspect-ratio:4/3}#guide-title{font-size:13px;margin:3px 0}#guide-caption{font-size:11px;min-height:0;line-height:1.2}#guide-progress{display:none}
 .controls-show .operation p{font-size:10px;min-height:16px}.controls-show .operation{padding:5px 0}.controls-show .operation ol{gap:8px}.controls-show .operation li{font-size:9px}.controls-show .operation li span{display:none}
 #selected-note p{font-size:12px}#selected-note h3{font-size:14px}.controls-show .plate-tools #read-note{display:block}
}
@media(min-width:480px) and (max-height:380px){.title-row .intro{display:none}.controls-show .plate-body{grid-template-columns:minmax(0,1fr) 208px}.controls-show .annotations>.eyebrow{display:none}.controls-show .note-list{grid-auto-rows:23px}.controls-show .note{height:23px;min-height:23px}#guide-title{display:none}#guide-caption{font-size:10px}#guide-state{display:none}#selected-note p{display:none}.controls-show .operation{display:none}.controls-show[open]{grid-template-rows:auto auto minmax(0,1fr) auto}}
@media(prefers-reduced-motion:reduce){#open-book{transition:none}}
@media(min-width:480px) and (max-height:380px){
 .controls-show #guide-canvas{display:none}.controls-show #guide-title{display:block;font-size:13px;margin:5px 0}.controls-show #guide-caption{font-size:11px;line-height:1.3}
 .controls-show #pins{display:none}.controls-show .active-cue{font-size:8px;padding:2px 4px}.controls-show .active-cue:after{height:5px}
}
@media(min-width:680px) and (max-width:900px) and (max-height:760px){
 .controls-show .plate-body{grid-template-columns:minmax(0,1fr) 236px;grid-template-rows:minmax(0,1fr);gap:14px}
 #guided-view{display:flex;margin-top:10px}#guide-canvas{width:100%;height:auto;flex:1;max-height:185px;margin:7px 0}#guide-title{font-size:15px}#guide-caption{font-size:12px;min-height:48px}
 .controls-show .reader-footer{flex-wrap:nowrap}.controls-show .controls{width:auto}.controls-show .spread-nav{width:auto}
}
@media(max-width:479px) and (max-height:680px){
 .controls-show .plate-body{grid-template-rows:minmax(0,1fr) 138px;gap:7px}.title-row .intro{display:none}.title-row h2{font-size:27px}.title-row .eyebrow{font-size:8px;letter-spacing:0}.title-row{padding-bottom:6px}
 .controls-show .annotations>.eyebrow{display:none}.controls-show .annotations{padding-bottom:34px}.controls-show .note-list{grid-auto-rows:25px}.controls-show .note{min-height:25px;height:25px}
 #guided-view{grid-template-columns:88px 1fr;column-gap:8px}#guide-canvas{width:88px;height:66px}#guide-title{font-size:12px}#guide-caption{font-size:11px}#guide-state{display:none}
 .controls-show #inspect{display:none}.controls-show .operation{display:none}.controls-show[open]{grid-template-rows:auto auto minmax(0,1fr) auto}
 #selected-note h3{font-size:13px}#selected-note p{font-size:11px}.service-note{white-space:normal;text-align:center;font-size:8px}
}