*{box-sizing:border-box}:root{font-family:"Segoe UI","Malgun Gothic",sans-serif;color:#234b62;background:#e7f0f5}body{margin:0;min-height:100dvh;display:grid;place-items:center;padding:22px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:disabled{opacity:.45;cursor:default}button:focus-visible,a:focus-visible,#rig:focus-visible{outline:3px solid #e67a6c;outline-offset:3px}[hidden]{display:none!important}main{width:100%;max-width:1100px;height:740px;display:flex;flex-direction:column;background:#f3f8fb;box-shadow:0 18px 50px #20465c1c;overflow:hidden}header{height:58px;min-height:58px;display:flex;align-items:center;gap:15px;padding:0 20px;border-bottom:1px solid #cadde7;background:#f8fbfc}header h1{font-size:19px;margin:0}header h1 small{font-size:9px;letter-spacing:1px;color:#6c8b9e;margin-left:10px}header button{margin-left:auto;border:1px solid #cbdde7;background:white;border-radius:8px;padding:8px 12px;color:#52758a;font-size:11px}.exit{text-decoration:none;font-size:12px;color:#356178;background:#edf5f9;border:1px solid #c6dce7;border-radius:12px;padding:12px}.hud{display:flex;justify-content:space-between;align-items:center;padding:9px 30px;border-bottom:3px solid #66a6bc;background:#fff}.hud span{display:flex;align-items:center;gap:12px}.hud small{font-size:10px;color:#708d9d}.hud b{font-size:20px;font-variant-numeric:tabular-nums}#site{position:relative;flex:1;min-height:0;background:#d9ecf5 url('city.png') center/cover no-repeat;overflow:hidden;isolation:isolate}.crane-mast{position:absolute;width:27px;right:8%;top:15px;bottom:0;background:repeating-linear-gradient(45deg,transparent 0 13px,#b9504b 14px 18px,transparent 19px 35px),repeating-linear-gradient(-45deg,#efb5a900 0 13px,#d76c62 14px 18px,transparent 19px 35px);border-left:5px solid #bf5d55;border-right:5px solid #dd8b7c;z-index:0}.crane-beam{position:absolute;top:22px;left:8%;right:4%;height:26px;background:repeating-linear-gradient(45deg,transparent 0 13px,#c56b62 14px 18px,transparent 19px 30px);border-top:5px solid #e19687;border-bottom:5px solid #af564f;filter:drop-shadow(0 4px 3px #41637b22)}.crane-cabin{position:absolute;top:47px;right:8%;width:58px;height:36px;border:5px solid #c86e63;background:linear-gradient(140deg,#e4f5fd,#4d869e);border-radius:0 0 4px 4px}.mission{position:absolute;left:3%;top:73px;max-width:330px;width:31%;background:#fbfdffeb;border:1px solid #c1d7e4;border-left:4px solid #438daf;border-radius:10px;padding:13px 17px;z-index:4;box-shadow:0 7px 20px #264f6610}.mission>span{font-size:9px;letter-spacing:1px;color:#7b99ab}.mission p{font-size:21px;line-height:1.5;font-weight:700;margin:9px 0;color:#204a63}.mission small{font-size:11px;line-height:1.7;color:#6d899b}.blank{color:#2d8caa;border-bottom:3px solid #5cacbe;padding:0 8px;white-space:nowrap}.height-mark{position:absolute;left:4%;bottom:35px;display:flex;flex-direction:column;gap:7px}.height-mark b{font-size:28px;color:#4f839a;font-weight:900}.height-mark span{font-size:8px;letter-spacing:2px;color:#688fa3}#construction{position:absolute;bottom:0;left:62%;width:206px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center}.foundation{width:235px;height:25px;background:linear-gradient(#7999a9,#466879);border-top:5px solid #a4c4d4;border-radius:4px 4px 0 0;color:#dceaf0;letter-spacing:3px;font-size:9px;text-align:center;padding:5px}#tower{display:flex;flex-direction:column-reverse;width:190px}.floor{height:25px;flex:none;position:relative;border-top:3px solid #a9ccd9;border-bottom:3px solid #537e97;border-left:7px solid #ccdfeb;border-right:7px solid #8eafc4;background:repeating-linear-gradient(90deg,#b7dbe9 0 20px,#4e819e 21px 23px);box-shadow:6px 0 0 #537e9744;animation:build .4s ease-out}.floor:nth-child(3n){border-color:#b87f78;border-left-color:#f0b1a4;background:repeating-linear-gradient(90deg,#e6c9c3 0 20px,#a77068 21px 23px)}.floor span{position:absolute;right:100%;margin-right:16px;font-size:9px;background:#f7fbffe0;padding:2px 5px;color:#557b91;border-radius:3px;white-space:nowrap;top:0}#target{width:204px;height:44px;border:2px dashed #288ca7;border-radius:7px;background:#e2f8ffe0;display:flex;align-items:center;justify-content:center;gap:12px;color:#347c95;font-size:11px;margin-bottom:3px;box-shadow:0 0 0 5px #c8f2ff22}#target i{font-size:23px;font-style:normal}#rig{position:absolute;top:28px;left:24%;width:170px;transform:translateX(-50%);height:190px;z-index:5;touch-action:none;cursor:grab;outline-offset:6px;user-select:none;transition:left .07s linear}.trolley{position:absolute;top:0;left:calc(50% - 15px);width:30px;height:20px;background:#365e73;border:4px solid #9abacb;border-radius:4px}.cable{position:absolute;top:16px;left:calc(50% - 2px);height:117px;width:4px;background:linear-gradient(90deg,#496171,#bdd7e2,#4f6c7c)}.hook{position:absolute;top:121px;left:calc(50% - 10px);font-size:26px;color:#385a6a;font-weight:900;height:28px}#cargo{position:absolute;top:153px;left:0;width:170px;min-height:48px;padding:7px;background:linear-gradient(#f2b7a9,#db8679);border:2px solid #a66059;border-bottom:6px solid #97544e;border-radius:6px;color:#522d32;font-weight:800;font-size:17px;letter-spacing:.6px;box-shadow:0 5px 8px #31556933;pointer-events:none;opacity:1}#cargo:disabled{background:linear-gradient(#ddebf3,#bed4df);border-color:#8aaabf;color:#688ca1;font-size:13px}#rig.dropping{transition:left .4s ease-in-out,top .5s ease-in}#feedback{position:absolute;left:62%;top:48%;transform:translate(-50%,-50%);z-index:8;pointer-events:none;font-size:26px;font-weight:900;color:#2b846e;text-shadow:0 2px white;white-space:nowrap}#feedback.show{animation:pop 1.3s both}#intro{position:absolute;inset:0;z-index:10;background:#eaf4f3ab;backdrop-filter:blur(3px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.intro-tag{font-size:9px;letter-spacing:3px;color:#527d91}#intro h2{font-size:38px;line-height:1.2;margin:14px 0;color:#214e68}#intro p{font-size:13px;line-height:1.9;color:#507288}#start,dialog .primary{padding:13px 30px;background:#2e799d;color:white;border:0;border-bottom:4px solid #195673;border-radius:10px;font-weight:750;font-size:16px}.dock{flex:none;padding:12px 24px;background:#f5fafc;border-top:1px solid #c4dbe8}.dock-label{display:flex;justify-content:space-between;font-size:10px;color:#809baa}.dock-label b{color:#50778f}#choices{display:flex;justify-content:center;gap:12px;margin:12px 0}#choices button{width:190px;min-height:49px;background:linear-gradient(#fff,#e9f2f8);border:1px solid #99b8cc;border-bottom:4px solid #7fa5ba;border-radius:7px;color:#26536b;font-size:16px;font-weight:800;padding:9px}#choices button.selected{background:#f4c4b8;border-color:#c98276;color:#713d37;transform:translateY(2px)}.operate{display:flex;align-items:center;gap:12px}.arrows{display:flex;gap:6px}.arrows button{width:39px;height:36px;border:1px solid #b7d1df;background:white;border-radius:7px;color:#4f7d94;font-size:20px}#status{flex:1;font-size:11px;line-height:1.6;color:#567f95;margin:0}#drop{padding:11px 20px;background:#2e7f9f;color:white;border:0;border-bottom:4px solid #1b5674;border-radius:8px;font-weight:700;font-size:13px}#drop small{margin-left:12px;font-size:9px;opacity:.7}dialog{width:min(460px,90vw);border:1px solid #b0cfdf;border-radius:17px;background:#fff;color:#294f66;padding:30px;box-shadow:0 20px 80px #1c486633}dialog::backdrop{background:#28495e66;backdrop-filter:blur(5px)}dialog p{font-size:14px;line-height:1.9;color:#608297}#close{position:absolute;right:9px;top:5px;border:0;background:none;color:#65889c;font-size:25px}.big{font-size:43px;font-weight:900;color:#328199}dialog a{display:block;margin-top:20px;color:#568397;font-size:13px}button:focus-visible{outline:3px solid #e58979}@keyframes build{from{transform:translateY(-15px);opacity:.3}to{transform:translateY(0);opacity:1}}@keyframes pop{0%{opacity:0;transform:translate(-50%,-30%) scale(.8)}20%,70%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-90%)}}@media(max-width:700px){body{padding:0}main{height:100dvh;min-height:760px}header{padding:0 10px;gap:9px}header h1{font-size:16px}header h1 small{display:none}.hud{padding:8px 15px}.hud span{gap:7px}.hud b{font-size:16px}.mission{top:65px;left:3%;width:54%;padding:10px;max-width:none}.mission p{font-size:15px}.mission small{font-size:10px}.height-mark{left:3%;bottom:18px}.height-mark b{font-size:20px}.height-mark span{display:none}#construction{left:68%;width:130px}#tower{width:116px}.foundation{width:144px;font-size:7px}.floor{height:19px}#target{width:134px;height:38px;font-size:9px}.floor span{display:none}#rig{width:114px;height:180px}#cargo{width:114px;font-size:12px}#choices{gap:6px}#choices button{width:33.3%;font-size:12px;overflow-wrap:anywhere;padding:8px 4px}.dock{padding:10px}.dock-label span{font-size:9px}.operate{flex-wrap:wrap;gap:8px}#status{font-size:10px}#drop{padding:10px 14px}.arrows button{width:32px}#feedback{font-size:20px;left:60%}#intro h2{font-size:31px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.crane-art{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none;z-index:0}.cargo-art{position:absolute;top:135px;left:-12px;width:194px;height:83px;pointer-events:none}.cargo-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;filter:drop-shadow(0 4px 3px #365c7422)}#cargo{top:30px;left:17px;width:160px;min-height:28px;height:28px;border:0;border-radius:0;box-shadow:none;background:transparent;color:#254958;padding:0 5px;font-size:15px;letter-spacing:0;line-height:1.1}#cargo:disabled{background:transparent;border:0;color:#637c8b;font-size:12px}.hook{display:none}.floor{height:25px;background:none!important;border:0!important;box-shadow:none;isolation:isolate}.floor>img{position:absolute;width:110%;height:130%;left:-5%;top:-15%;object-fit:fill;z-index:-1}.floor:nth-child(3n)>img{filter:brightness(1.08)}@media(max-width:700px){.cargo-art{left:-10px;width:134px;height:62px}#cargo{top:23px;left:12px;width:110px;height:23px;min-height:23px;font-size:10px}#cargo:disabled{font-size:9px}.floor{height:19px}}

.floor>img{width:102%;left:-1%;height:175%;top:-34%}#cargo{top:40px}@media(max-width:700px){#cargo{top:29px}}

.blank{display:inline-block;min-width:2.6em;height:1.1em;vertical-align:baseline}

/* Secondary instructions are available before play or through help. */
.dock-label,.height-mark>span{display:none}.operate{min-height:44px}#status{transition:opacity .18s}.mission #sentence{visibility:visible!important}.mission #meaning{visibility:visible!important}

/* Suspended construction sign. */
.mission{top:88px;left:3%;width:32%;max-width:350px;padding:16px 18px 20px;background:linear-gradient(145deg,#fff1a6,#f6cd4e);border:3px solid #35444d;border-radius:9px;box-shadow:0 5px 0 #243740,0 12px 25px #253b5033;overflow:visible}.mission:before,.mission:after{content:'';position:absolute;top:-42px;width:5px;height:42px;background:linear-gradient(90deg,#425967,#d7e4e8,#405763);border-radius:3px;box-shadow:0 0 0 1px #31475044}.mission:before{left:25px}.mission:after{right:25px}.mission>span{display:block;color:#5a512e;font-size:9px;font-weight:800;letter-spacing:1.5px;border-bottom:2px solid #a28939;padding-bottom:8px}.mission #sentence{font-size:20px;line-height:1.45;color:#263d48;margin:12px 0 0;text-shadow:none}.mission .blank{border-bottom-color:#344c57;min-width:2.3em}.mission{background-image:repeating-linear-gradient(135deg,#35444d 0 8px,#f6cd4e 8px 16px),linear-gradient(145deg,#fff1a6,#f6cd4e);background-size:100% 7px,100% 100%;background-position:bottom,center;background-repeat:no-repeat}@media(max-width:700px){.mission{top:79px;width:54%;padding:11px 12px 17px}.mission #sentence{font-size:15px}.mission:before,.mission:after{top:-30px;height:30px}}