@font-face{font-family:Jost;src:url(assets/jost.woff2)}@font-face{font-family:Cormorant;src:url(assets/serif.woff2)}
*{box-sizing:border-box}body{margin:0;background:#251e18;color:#3a2a20;font-family:Jost,Arial,sans-serif}#viewport{position:fixed;inset:0;display:grid;place-items:center;overflow:hidden}#stage{width:1920px;height:1080px;position:relative;flex-shrink:0;transform-origin:center;background:#f3eadb}canvas{position:absolute;inset:0}header{position:absolute;left:100px;right:100px;top:52px;display:flex;align-items:center;gap:62px;font-size:23px;letter-spacing:2px}header img{width:180px;max-height:48px}header .edition{margin-left:auto;font-size:19px;letter-spacing:1.5px;color:#796653}.copy{position:absolute;left:100px;top:166px;width:650px}#location{font-size:24px;color:#796653;min-height:34px}h1{font-family:Cormorant,Georgia,serif;font-style:italic;font-size:70px;line-height:1.02;font-weight:400;margin:17px 0 32px;min-height:145px;display:flex;align-items:center}ol{list-style:none;padding:0;margin:0;display:grid;gap:16px}li button{width:100%;min-height:94px;text-align:left;background:transparent;border:1.5px solid #d8c9b3;border-radius:16px;display:flex;align-items:center;gap:20px;padding:14px 20px;color:#796653;font:400 29px/1.2 Jost;cursor:pointer}li button .num{width:44px;height:44px;flex-shrink:0;border:1px solid #d8c9b3;border-radius:50%;display:grid;place-items:center;font-size:24px}li button.active{background:#fbf6ee;color:#3a2a20;border-color:#b8893b;box-shadow:0 8px 20px #3a2a2009}li button.active .num{background:#b8893b;color:#fffdf8;border-color:#b8893b}.exercise{margin-top:28px;border-left:3px solid #b8893b;padding-left:23px}.exercise span{font-size:18px;letter-spacing:2px;color:#796653}.exercise p{font-size:26px;line-height:1.3;margin:9px 0;max-width:620px}.demo-label{position:absolute;left:850px;top:190px;font-size:20px;letter-spacing:2px;color:#796653;width:950px;display:flex;justify-content:space-between}#demoState{letter-spacing:0;font-size:21px}footer{position:absolute;left:100px;right:100px;bottom:48px;display:flex;align-items:center;gap:15px;border-top:1px solid #d8c9b3;padding-top:24px}button{font-family:inherit;cursor:pointer}footer button{font-size:22px;border:1px solid #d8c9b3;border-radius:30px;padding:11px 23px;background:#fbf6ee;color:#3a2a20}button:hover{border-color:#b8893b}button:focus-visible{outline:4px solid #527b91;outline-offset:4px}button:disabled{opacity:.35;cursor:default}#count{font-size:24px;min-width:105px;text-align:center}.keys{font-size:18px;color:#796653;margin-left:auto}dialog{border:1px solid #d8c9b3;border-radius:20px;background:#fbf6ee;color:#3a2a20;max-width:1000px;width:90vw;max-height:85vh;padding:30px;box-shadow:0 20px 100px #0005}dialog::backdrop{background:#251e18bb}.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:20px}.dialog-head h2{font-size:30px;margin:0 0 20px}.dialog-head button{border:1px solid #d8c9b3;border-radius:20px;background:#f3eadb;padding:10px 20px;font-size:17px}#lessonList{display:grid;grid-template-columns:1fr 1fr;gap:8px}#lessonList button{text-align:left;background:#f3eadb;border:1px solid #d8c9b3;border-radius:8px;padding:13px;font-size:18px;color:#3a2a20}#noteBody{font-size:22px;line-height:1.55}.small{font-size:16px;color:#796653;line-height:1.5}@media(max-width:600px){#lessonList{grid-template-columns:1fr}}
h1{min-height:164px;line-height:1.12;padding-bottom:8px;font-size:68px}
.demo-label{top:174px;height:60px;align-items:center;letter-spacing:0}.view-choice{display:flex;gap:8px}.view-choice button{font-size:23px;border:1.5px solid #d8c9b3;border-radius:30px;padding:11px 24px;background:#fbf6ee;color:#796653}.view-choice button[aria-pressed="true"]{background:#3a2a20;color:#fbf6ee;border-color:#3a2a20}#realUiPanel{position:absolute;left:850px;top:250px;width:960px;height:660px;border:1px solid #d8c9b3;border-radius:20px;background:#fbf6ee;overflow:hidden;box-shadow:0 15px 38px #3a2a201a}#realUiPanel[hidden]{display:none}.ui-image-button{border:0;padding:0;margin:0;width:100%;height:520px;background:#e8dbc5;position:relative;display:grid;place-items:center}.ui-shot{position:relative;display:block;width:100%;line-height:0}.ui-shot img{display:block;width:100%;height:auto}.ui-image-button .ui-shot{width:auto;max-width:100%;height:100%;aspect-ratio:var(--shot-ratio,1.6)}.ui-image-button .ui-shot img{width:100%;height:100%;object-fit:contain}.ui-focus{position:absolute;border:3px solid #b8893b;background:#d9b26018;box-shadow:0 0 0 2px #fffdf8dd;border-radius:5px;pointer-events:none}.ui-focus[hidden]{display:none}.enlarge-hint{position:absolute;right:18px;bottom:14px;padding:7px 16px;background:#3a2a20;color:#fbf6ee;border-radius:25px;font:400 21px Jost;box-shadow:0 2px 8px #0003}.ui-caption{padding:17px 25px}.ui-caption strong{font-size:25px;font-weight:500;display:block;line-height:1.2}.ui-caption p{font-size:22px;color:#796653;line-height:1.25;margin:5px 0}.ui-caption small{font-size:16px;color:#796653}#realUiDialog{max-width:1800px;width:96vw;max-height:96vh;padding:20px}#realUiDialog .dialog-head h2{font-size:25px;margin:0 0 4px}#realUiDialogCaption{font-size:18px;color:#796653;margin:0 0 15px}.zoom-controls{display:flex;align-items:center;gap:12px;flex-shrink:0}.zoom-controls button{margin-bottom:10px}.zoom-controls span{font-size:17px;min-width:50px}#uiZoomViewport{overflow:auto;max-height:70vh;background:#e8dbc5;border:1px solid #d8c9b3;border-radius:8px}#uiZoomCanvas{min-width:100%;max-width:none}#realUiDialog .small{margin-bottom:0}@media(max-width:650px){#realUiDialog .dialog-head{align-items:flex-start;flex-direction:column;gap:5px}#realUiDialog .dialog-head h2{font-size:20px}#realUiDialogCaption{font-size:15px;margin-bottom:3px}#uiZoomViewport{max-height:58vh}.zoom-controls button{padding:7px 15px}}
#uiZoomCanvas{min-width:0;margin:0 auto}
.ui-image-button .ui-shot{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.ui-caption{padding:10px 25px}
#viewport{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
#animationPanel{position:absolute;inset:0;pointer-events:none}
@media(max-width:900px){
 body{background:#f3eadb}
 #viewport{position:relative;inset:auto;display:block;overflow:visible;min-height:100vh;min-height:100svh}
 #stage{width:100%;height:auto;min-height:100vh;min-height:100svh;transform:none!important;display:grid;grid-template-areas:"header" "copy" "choices" "visual";grid-template-columns:minmax(0,1fr);gap:22px;padding:22px 16px calc(140px + env(safe-area-inset-bottom,0px));}
 header{grid-area:header;position:static;display:flex;flex-wrap:wrap;align-items:center;gap:12px;font-size:13px;letter-spacing:1px;min-width:0}
 header a{display:flex;min-height:44px;align-items:center}header img{width:122px;max-height:36px}header .edition{width:100%;margin-left:0;font-size:11px;letter-spacing:1px}
 .copy{grid-area:copy;position:static;width:auto;min-width:0}#location{font-size:16px;line-height:1.4;min-height:0;overflow-wrap:anywhere}
 h1{font-size:42px;line-height:1.08;min-height:0;margin:10px 0 22px;padding:0;display:block;overflow-wrap:break-word}
 ol{gap:10px}li button{min-height:64px;padding:12px;gap:12px;font-size:18px;line-height:1.3}li button .num{width:32px;height:32px;font-size:17px}li button span:last-child{min-width:0;overflow-wrap:anywhere}
 .exercise{margin-top:22px;padding-left:15px}.exercise span{font-size:12px;letter-spacing:1.3px}.exercise p{font-size:17px;line-height:1.45;max-width:none;margin:8px 0 0}
 .demo-label{grid-area:choices;position:static;width:auto;height:auto;min-height:44px;gap:10px;flex-wrap:wrap;min-width:0}.view-choice{flex:1;display:grid;grid-template-columns:1fr 1fr;min-width:250px;gap:8px}.view-choice button{min-height:44px;font-size:15px;padding:10px 12px}#demoState{font-size:14px;margin-left:auto}
 #animationPanel{grid-area:visual;position:relative;inset:auto;width:100%;aspect-ratio:960/660;overflow:hidden;border:1px solid #d8c9b3;border-radius:14px;background:#f3eadb}
 #animationPanel.mobile-hidden{display:none}#art{position:absolute;width:200%;height:auto;max-width:none;left:-88.541667%;top:-37.878788%}
 #realUiPanel{grid-area:visual;position:relative;left:auto;top:auto;width:100%;height:auto;min-width:0;border-radius:14px;box-shadow:0 8px 22px #3a2a2010}
 .ui-image-button{height:auto;aspect-ratio:1.6}.ui-focus{border-width:2px;box-shadow:0 0 0 1px #fffdf8dd}.enlarge-hint{font-size:14px;padding:7px 12px;right:10px;bottom:10px}.ui-caption{padding:14px}.ui-caption strong{font-size:18px;line-height:1.3}.ui-caption p{font-size:16px;line-height:1.4;margin:7px 0}.ui-caption small{font-size:12px;line-height:1.4;display:block;margin-top:9px}
 footer{position:fixed;z-index:20;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:0;padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px));background:#fbf6ee;border-top:1px solid #d8c9b3;box-shadow:0 -4px 20px #3a2a200d}
 footer button{min-height:44px;min-width:0;width:100%;font-size:14px;padding:8px 4px}#prev{order:1}#next{order:2}#count{order:3;min-width:0;font-size:15px;align-self:center}#contents{order:4}#replay{order:5}#pause{order:6}#notes{order:7}#full{order:8}footer .keys{display:none}footer button[hidden]{display:none}
 dialog{max-height:90vh;max-height:90svh;padding:18px;width:calc(100vw - 24px);overflow:auto}.dialog-head h2{font-size:23px;margin-bottom:12px}.dialog-head button{min-height:44px;padding:10px 16px}#noteBody{font-size:18px;line-height:1.5}#lessonList{grid-template-columns:1fr}#lessonList button{font-size:16px;min-height:48px;padding:12px}.small{font-size:14px}
 #realUiDialog{width:calc(100vw - 16px);max-height:96vh;max-height:96svh;padding:12px}#realUiDialog .dialog-head{align-items:flex-start;flex-direction:column;gap:5px}#realUiDialog .dialog-head h2{font-size:21px}#realUiDialogCaption{font-size:15px;margin-bottom:5px}.zoom-controls{gap:8px;flex-wrap:wrap}.zoom-controls button{min-width:44px;min-height:44px;margin-bottom:8px;padding:8px 14px}#uiZoomViewport{max-height:55vh;max-height:55svh}#realUiDialog .small{font-size:12px;line-height:1.35}
}