@import "https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600&display=swap";:root{color:#edf5f0;font-synthesis:none;background:#07110e;font-family:Manrope,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(circle at 72% 14%,#15392c 0,#0000 38%),#07110e;min-width:320px;min-height:100vh;margin:0}button{font:inherit}.opening{text-align:center;flex-direction:column;justify-content:center;align-items:center;width:100vw;height:100vh;display:flex}.opening h1{letter-spacing:-.075em;margin:0;font-size:clamp(90px,11vw,190px);font-weight:500;line-height:.9;animation:.8s both rise}.opening h1 em{color:#779084;font-style:normal}.opening p{color:#62e6a3;letter-spacing:.24em;margin:46px 0 0;font:11px DM Mono;animation:.7s .4s both rise}.construction{grid-template-rows:82px minmax(0,1fr);width:min(1824px,100vw - 72px);height:100vh;margin:auto;padding-bottom:36px;display:grid;position:relative}header{border-bottom:1px solid #ffffff18;grid-template-columns:240px 1fr 70px;align-items:center;display:grid}.brand{letter-spacing:.12em;align-items:center;gap:12px;font:10px DM Mono;display:flex}.brand span{color:#62e6a3;border:1px solid #62e6a3;place-items:center;width:34px;height:34px;font-size:15px;display:grid}header nav{justify-content:center;display:flex}header nav button{color:#4f685d;letter-spacing:.08em;cursor:pointer;background:0 0;border:0;padding:10px 18px;font:8px DM Mono}header nav i{background:#365145;border-radius:50%;width:5px;height:5px;margin-right:7px;display:inline-block}header nav .done{color:#789084}header nav .done i{background:#43765f}header nav .active{color:#c7f2da}header nav .active i{background:#62e6a3;box-shadow:0 0 9px #62e6a3}header>small{color:#637a70;justify-self:end;font:9px DM Mono}.story{background:#08130f;border:1px solid #ffffff1b;border-top:0;grid-template-columns:1.15fr 1fr;min-height:0;display:grid}.build-scene{background:linear-gradient(#0d221a 0 66%,#09130f 66%);border-right:1px solid #ffffff18;position:relative;overflow:hidden}.sky{position:absolute;inset:0}.sky i{background:#62e6a366;border-radius:50%;width:3px;height:3px;position:absolute}.sky i:first-child{top:16%;left:16%}.sky i:nth-child(2){top:12%;left:73%}.sky i:nth-child(3){top:31%;left:88%}.ground{background:#4a6e5d;height:1px;position:absolute;top:66%;left:8%;right:8%}.blueprint{opacity:0;background:#0c281ecf;border:2px solid #5dbb90;width:64%;height:48%;animation:.7s forwards appear;position:absolute;top:16%;left:18%;box-shadow:0 20px 60px #0007}.blueprint:before,.blueprint:after{content:"";border:1px solid #5dbb9066;position:absolute}.blueprint:before{background:linear-gradient(90deg,#0000 49%,#5dbb9044 50%,#0000 51%);inset:10% 8%}.blueprint:after{height:36%;top:42%;left:18%;right:18%}.blueprint span{background:#5dbb9077;position:absolute}.blueprint span:first-child{width:1px;top:10%;bottom:10%;left:49%}.blueprint span:nth-child(2){height:1px;top:42%;left:8%;right:8%}.blueprint span:nth-child(3){width:1px;top:43%;bottom:10%;left:31%}.blueprint b{letter-spacing:.1em;font:10px DM Mono;position:absolute;bottom:4%;left:8%}.blueprint em{color:#62e6a3;border:2px solid #62e6a3;padding:9px;font:12px DM Mono;display:none;position:absolute;top:8%;right:8%;transform:rotate(-8deg)}.foundation{background:#263b32;border:1px solid #698175;height:12%;animation:.8s both foundation;display:none;position:absolute;top:61%;left:14%;right:14%}.foundation i{float:left;border-right:1px solid #ffffff1a;width:33.33%;height:100%}.scaffold{border:2px solid #be9360;height:47%;animation:.6s both appear;display:none;position:absolute;top:19%;left:17%;right:17%}.scaffold i{background:#be9360;position:absolute}.scaffold i:first-child,.scaffold i:nth-child(2){width:2px;top:0;bottom:0}.scaffold i:first-child{left:32%}.scaffold i:nth-child(2){right:32%}.scaffold i:nth-child(3),.scaffold i:nth-child(4){height:2px;left:0;right:0}.scaffold i:nth-child(3){top:33%}.scaffold i:nth-child(4){top:66%}.house{height:36%;animation:.7s both rise;display:none;position:absolute;top:30%;left:26%;right:26%}.roof{clip-path:polygon(50% 0,100% 100%,0 100%);background:#5e806f;height:35%;position:absolute;top:-32%;left:-8%;right:-8%}.wall{background:#b58b61;grid-template-columns:1fr 1fr;gap:25%;padding:18%;display:grid;position:absolute;inset:0}.wall i{background:#b9d6c8;border:5px solid #465d52}.wall span{background:#34483f;width:14%;height:42%;position:absolute;bottom:0;left:43%}.bricks{grid-template-columns:repeat(6,1fr);gap:4px;display:none;position:absolute;bottom:19%;left:18%;right:18%}.bricks i{background:#a56f4c;border:1px solid #d09a70;height:25px;animation:.4s both brick}.bricks i:nth-child(n+7){animation-delay:.25s}.inspection{color:#62e6a3;border:3px solid #62e6a3;border-radius:50%;place-items:center;width:78px;height:78px;font-size:40px;animation:.5s both stamp;display:none;position:absolute;top:17%;right:17%}.scene-caption{position:absolute;bottom:5%;left:5%}.scene-caption small,.scene-caption b{display:block}.scene-caption small{color:#668075;letter-spacing:.12em;text-transform:uppercase;font:8px DM Mono}.scene-caption b{margin-top:6px;font-size:17px;font-weight:500}.story aside{background:linear-gradient(145deg,#10251d,#08120e 70%);padding:9vh 6vw;animation:.55s both rise;position:relative}.story aside>span{color:#62e6a3;letter-spacing:.12em;font:10px DM Mono}.story aside h1{letter-spacing:-.055em;max-width:680px;margin:25px 0 24px;font-size:clamp(43px,4vw,72px);font-weight:500;line-height:1.02}.story aside p{color:#9db2a8;max-width:670px;margin:0;font-size:21px;line-height:1.65}.loop{color:#c4e7d5;letter-spacing:.08em;border:1px solid #438366;margin-top:45px;padding:20px;font:14px DM Mono}.loop i{color:#62e6a3;margin:0 13px;font-style:normal}.loop b{float:right;color:#62e6a3;font-size:22px}.checks{grid-template-columns:1fr 1fr;gap:10px;margin-top:42px;display:grid}.checks span{color:#bde7d2;border:1px solid #397258;padding:15px;font:13px DM Mono}.pause{color:#62e6a3;cursor:pointer;background:#0b1b15;border:1px solid #ffffff24;width:42px;height:42px;position:absolute;bottom:45px;right:18px}.stage-foundation .blueprint{opacity:.3}.stage-foundation .blueprint em,.stage-foundation .foundation{display:block}.stage-workspace .blueprint{opacity:.15}.stage-workspace .foundation,.stage-workspace .scaffold{display:block}.stage-assist .foundation,.stage-assist .scaffold,.stage-assist .bricks{display:grid}.stage-assist .house{opacity:.45;display:block}.stage-evidence .foundation,.stage-evidence .house,.stage-evidence .inspection{display:grid}@keyframes rise{0%{opacity:0;transform:translateY(18px)}}@keyframes appear{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}@keyframes foundation{0%{opacity:0;transform:scaleX(.2)}}@keyframes brick{0%{opacity:0;transform:translateY(-20px)}}@keyframes stamp{0%{opacity:0;transform:scale(1.8)rotate(-15deg)}}@media (width<=900px){.construction{width:100%;padding:0 15px 20px}header{grid-template-columns:1fr auto}header nav{display:none}.story{grid-template-columns:1fr}.build-scene{border-bottom:1px solid #ffffff18;border-right:0;min-height:46vh}.story aside{padding:35px 25px}.story aside h1{font-size:38px}.story aside p{font-size:17px}.opening h1{font-size:70px}}@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important}}