:root{font-family:Arial,Hiragino Kaku Gothic ProN,sans-serif;color:#173331;background:#dce4dc;font-synthesis:none}*{box-sizing:border-box}body{margin:0;overflow:hidden}canvas#scene{display:block;width:100vw;height:100vh;touch-action:none;object-fit:contain}#ui{position:absolute;inset:0;pointer-events:none}header{position:absolute;left:36px;top:30px}h1{font-size:50px;line-height:.94;letter-spacing:-3px;margin:16px 0;color:#143330;font-weight:800}h1 i{font-family:Georgia,serif;font-weight:400}h1 span{display:block;font-size:12px;letter-spacing:3px;font-weight:400;margin-top:17px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:2px}.tag{font-size:9px;letter-spacing:1px;border-top:1px solid #17333144;padding-top:12px;margin-top:18px}.tag b{padding-left:20px}aside{position:absolute;right:30px;top:32px;width:190px;padding:19px;background:#f9faf0dc;border:1px solid #ffffff8c;border-radius:3px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}#time{float:right;font-variant-numeric:tabular-nums}ol{padding:0;list-style:none;margin:15px 0 8px}li{display:flex;align-items:center;gap:9px;font-size:11px;padding:5px 0;border-bottom:1px solid #18332c12}li em{font-style:normal;color:#71847a;font-size:10px;width:10px}li strong{font-size:10px;margin-left:auto}li .dot{width:20px;height:20px;border-radius:50%;color:#fff;text-shadow:0 1px 2px #000;display:grid;place-content:center;font-size:10px;border:2px solid #ffffffa8}#phase{font-size:11px;line-height:1.7;margin-bottom:0}.controls{position:absolute;bottom:20px;left:50%;transform:translate(-50%);text-align:center;pointer-events:auto;min-width:570px;background:#f7f9f1ec;border:1px solid #fff9;padding:12px 17px 6px;border-radius:7px;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}button,select,input,.file{font:inherit;font-size:12px;pointer-events:auto;border:1px solid #23453d33;color:#173331;background:#f9fbf4;border-radius:4px;padding:10px 12px;cursor:pointer}button:hover{background:#e0e8da}button:focus-visible,select:focus-visible{outline:3px solid #c16a3f}.accent{background:#163b35;color:#fff;border-color:#163b35}.accent:hover{background:#2c584b}.primary,.secondary,.row{display:flex;gap:7px;align-items:center;justify-content:center}.secondary{margin-top:8px}.secondary button,.secondary select{padding:6px 9px;font-size:10px}.secondary label{font-size:10px}.hint{font-size:9px;letter-spacing:1px;color:#61776b;margin:9px 0 3px}dialog{pointer-events:auto;border:1px solid #c1ccb8;border-radius:12px;padding:26px;width:420px;max-width:95vw;background:#f6f8ee;color:#173331;box-shadow:0 20px 100px #1237}dialog::backdrop{background:#132f3566;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}dialog h2{font-family:Georgia,serif;font-size:24px}dialog p{font-size:12px;line-height:1.8}dialog label{display:flex;align-items:center;justify-content:space-between;margin:10px 0;font-size:12px}dialog .close{float:right;padding:5px;border:0;background:none}.file input{display:none}.fine{font-size:10px!important;color:#60766c}hr{border:0;border-top:1px solid #bcc7b4;margin:20px 0}#count{position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);font:700 100px Georgia;color:#fff;text-shadow:0 4px 30px #1238;pointer-events:none}#notice{position:absolute;top:18px;left:50%;transform:translate(-50%);background:#163b35;color:#fff;border-radius:5px;font-size:12px;padding:10px;opacity:0;transition:opacity .2s;pointer-events:none}#notice.show{opacity:1}#restore{position:absolute;bottom:20px;left:20px;opacity:.75}#recording{position:absolute;bottom:15px;right:15px;background:#173331;color:#fff;padding:8px;border-radius:8px;font-size:11px}#recording button{padding:6px}#recording span{margin:8px;color:#ffb7a0}[hidden]{display:none!important}@media(max-width:680px){header{top:20px;left:20px}h1{font-size:33px;letter-spacing:-1px}h1 span{font-size:9px;letter-spacing:1px}.eyebrow{font-size:8px}.tag{font-size:7px}.tag b{padding-left:8px}aside{width:124px;right:14px;top:20px;padding:10px}li{font-size:9px;gap:4px;padding:3px 0}li strong{font-size:8px}li .dot{width:17px;height:17px}#phase{font-size:9px}.controls{min-width:0;width:calc(100% - 24px);padding:10px;bottom:12px}.primary{flex-wrap:wrap}.primary button{padding:9px;font-size:10px}.secondary{gap:4px}.secondary button{font-size:9px}.hint{font-size:8px}}.secondary{flex-wrap:wrap}#courseDescription{max-width:620px;line-height:1.6}dialog input[type=range]{width:58%;padding:0;accent-color:#23675b}