:root{font-family:Arial,Helvetica,sans-serif;color:#263e35;background:#edf0ec}*{box-sizing:border-box}body{margin:0}main{position:relative;height:100svh;min-height:640px;overflow:hidden}header{position:absolute;z-index:2;top:28px;left:34px;right:34px;display:flex;justify-content:space-between;align-items:center}.brand{display:flex;gap:12px;align-items:center;font-weight:bold;letter-spacing:2px;color:inherit;text-decoration:none;font-size:18px}.brand small{display:block;font-size:9px;margin-top:4px}.mark{background:#284d40;color:white;padding:8px;font-size:23px;letter-spacing:-3px}.edition{font-size:10px;letter-spacing:2px;color:#6c7b70}.edition b{margin-left:12px}.intro{position:absolute;z-index:2;top:123px;left:34px;pointer-events:none}.eyebrow{font-size:10px;letter-spacing:1.7px;font-weight:700}h1{font-size:46px;font-weight:500;letter-spacing:-2px;margin:18px 0 12px}.intro p{font-size:15px;color:#6b796e;margin:0}#viewport{position:absolute;inset:0}canvas{display:block;touch-action:none}button{font:inherit;cursor:pointer;border:0;color:inherit;background:none}button:focus-visible,a:focus-visible{outline:2px solid #3f936a;outline-offset:4px}button:disabled{opacity:.45;cursor:default}.begin{position:absolute;z-index:3;left:34px;top:278px;background:#284d40;color:white;padding:14px 18px;border-radius:7px;font-size:13px}.begin span{margin-left:20px}.views{position:absolute;z-index:2;right:34px;top:132px;font-size:12px}.tip{position:absolute;z-index:2;bottom:150px;left:50%;transform:translateX(-50%);padding:15px 19px;background:#fffffff2;border:1px solid #dde5db;border-radius:9px;max-width:400px;width:max-content;box-shadow:0 8px 25px #233a2910;pointer-events:none}.tip strong{display:block;font-size:17px;margin-top:9px}.tip p{font-size:12px;line-height:1.6;max-width:350px;margin:8px 0 0;color:#617265}.next-step{position:absolute;left:34px;top:130px;max-width:270px;background:#ffffffeb;padding:16px;border-radius:8px}.next-step p{font-size:12px;line-height:1.6}.controls{display:flex;gap:25px;align-items:center;padding:16px 20px}.controls #pause{background:#284d40;color:white;padding:13px 17px;border-radius:6px;font-size:12px}.controls #replay{font-size:12px;margin-left:auto}#progress{font-size:12px;color:#718174}.footnote{border-top:1px solid #e0e6de;display:flex;justify-content:space-between;padding:12px 20px;font-size:10px;color:#79867a;gap:12px}footer{position:absolute;z-index:2;bottom:22px;left:32px;right:32px;border:1px solid white;border-radius:12px;background:#ffffffde;backdrop-filter:blur(12px)}#loading{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:15px;background:white;z-index:4;font-size:13px;border-radius:6px}[hidden]{display:none!important}body.playing .intro,body.playing .begin,body.playing .views{display:none}dialog{width:min(650px,90vw);border:1px solid #ccd9cc;border-radius:12px;padding:23px;color:#263e35}dialog::backdrop{background:#18382bc9}dialog>div{display:flex;justify-content:space-between;align-items:center}dialog h2{font-size:21px}dialog img{width:100%;max-height:55vh;object-fit:contain}dialog p{font-size:12px;color:#6b796e}@media(max-width:700px){header{left:20px;right:20px;top:22px}.edition{font-size:9px;letter-spacing:1px}.intro{left:22px;top:99px}h1{font-size:36px}.intro p{font-size:12px}.begin{left:22px;top:231px;font-size:11px}.views{top:290px;left:22px;right:auto;font-size:11px}footer{left:13px;right:13px;bottom:13px}.controls{padding:12px;gap:10px}#progress{display:none}.footnote{padding:10px 12px;flex-direction:column;font-size:9px;gap:6px}.tip{width:calc(100% - 28px);bottom:154px;max-width:390px}.next-step{left:20px;top:94px;max-width:235px}}