*{box-sizing:border-box}html{background:#111c1b;color:#e8eddf;font-family:Arial,Helvetica,sans-serif}body{margin:0}header{height:76px;padding:0 5vw;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ffffff17;font-size:12px;letter-spacing:1.5px}a{color:inherit;text-decoration:none}header a{letter-spacing:0;color:#b9c6c0}header i{font-style:normal;color:#82988b;padding:0 12px}.edition{font-size:10px;color:#a6b7aa}main{max-width:1200px;margin:auto;display:grid;grid-template-columns:1fr 410px;gap:85px;align-items:center;padding:36px 45px}.intro{max-width:560px}.eyebrow{font-size:10px;color:#c2d3a0;letter-spacing:2px;margin:0 0 22px}h1{font-size:68px;line-height:.98;letter-spacing:-4px;font-weight:400;margin:0 0 26px;color:#dce9b6}.lead{font-size:16px;line-height:1.65;color:#b7c4bd;max-width:400px}.tags{display:flex;gap:6px;flex-wrap:wrap;margin:24px 0 32px}.tags span{padding:7px 10px;border:1px solid #ffffff20;border-radius:20px;font-size:10px;color:#c3cfc5}button{font:inherit;cursor:pointer;border:0}button:disabled{opacity:.45;cursor:wait}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #deef97;outline-offset:5px}.controls{display:flex;gap:10px}.controls button{height:46px;border-radius:7px;background:#dce9b6;color:#12201c;padding:0 22px;font-size:13px}.controls #restart{padding:0;width:46px;font-size:24px;background:#24362d;color:#dce9b6}.timeline-label{display:flex;justify-content:space-between;margin:27px 0 11px;font-size:11px;color:#c9d2c4}#time{font-weight:400;font-variant-numeric:tabular-nums}input[type=range]{width:100%;accent-color:#d5e8ad;cursor:pointer;margin:0}.stages{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 28px}.stages button{background:none;color:#9dae9f;font-size:10px;padding:6px 8px;border:1px solid #ffffff12;border-radius:4px}.stages button:hover{color:#dce9b6;border-color:#dce9b6}.export{padding-top:20px;border-top:1px solid #ffffff16;display:flex;flex-wrap:wrap;gap:12px;align-items:center}.export button,.export a{font-size:12px;color:#dce9b6;background:none;padding:10px 13px;border:1px solid #8eaa7166;border-radius:5px}.export a{background:#dce9b6;color:#19231b}.export progress{width:100%;height:5px;accent-color:#dce9b6}.export p{font-size:11px;color:#b4c5ad;line-height:1.5;margin:0;width:100%;min-height:17px}.note{font-size:10px;color:#819789;line-height:1.55;margin:21px 0 0;max-width:370px}.viewport{aspect-ratio:480/854;position:relative;overflow:hidden;border-radius:10px;box-shadow:0 20px 75px #030c0b90;background:#7f9cac}.viewport canvas{display:block;width:100%;height:100%}#loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;letter-spacing:1px}footer{max-width:1200px;padding:8px 45px 25px;margin:auto;display:flex;justify-content:space-between;color:#799085;font-size:9px}footer a{text-decoration:underline;text-underline-offset:3px}[hidden]{display:none!important}@media(max-width:800px){header{height:60px;padding:0 22px;font-size:10px}.edition{display:none}main{grid-template-columns:1fr;gap:30px;padding:25px 24px}.intro{display:contents}h1{font-size:46px;letter-spacing:-2px}.eyebrow{margin-bottom:-14px}.lead,.tags,.note{display:none}h1{margin:0}.viewport{grid-row:3;width:min(100%,340px);justify-self:center}.controls{margin:0}.timeline-label{margin:0 0 -20px}.stages{margin:0}.export{margin:0}footer{padding:20px 24px;gap:18px;line-height:1.5}}