:root{font-family:Inter,PingFang SC,system-ui,sans-serif;color:#dfede7;background:#0c2025;color-scheme:dark}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button,a,input{touch-action:manipulation}a{color:#b9e9c6;text-decoration:none}header{display:flex;justify-content:space-between;padding:22px 5vw;border-bottom:1px solid #ffffff15;font-size:13px}main{max-width:1500px;margin:auto;padding:32px 5vw}.intro small,aside>small{color:#92baa9;font-size:11px;letter-spacing:.15em}h1{font-size:clamp(25px,3vw,40px);margin:12px 0}.intro p{color:#93aaa4;font-size:14px}.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;margin-top:26px}.viewer{border:1px solid #52786966;border-radius:20px;overflow:hidden;background:radial-gradient(ellipse at 50% 38%,#244c50,#102b30 70%)}button{border:1px solid #60887866;border-radius:8px;background:#17373c;color:#dceddf;padding:9px 12px;cursor:pointer}button:hover,button:focus-visible{border-color:#d0ef9b}button[aria-pressed=true]{background:#cce8a8;color:#183c35}.toolbar{display:flex;justify-content:space-between;gap:10px;padding:15px;border-bottom:1px solid #ffffff12}.toolbar>div{display:flex;gap:5px}.toolbar button{font-size:12px}#viewport{height:510px;position:relative;perspective:1000px;touch-action:none;cursor:grab;overflow:hidden}#viewport:active{cursor:grabbing}.world{position:absolute;left:50%;top:57%;width:0;height:0;transform-style:preserve-3d}.platform{position:absolute;left:-195px;top:-175px;width:390px;height:350px;background:repeating-linear-gradient(0deg,transparent 0 29px,#72c3ac22 30px),repeating-linear-gradient(90deg,transparent 0 29px,#72c3ac22 30px);border:1px solid #6ca99c77;border-radius:40px;transform:translateZ(-60px);box-shadow:0 0 40px #a7ebbd18}.part{position:absolute;left:0;top:0;width:var(--w);height:var(--d);padding:0;border:0;background:transparent!important;transform-style:preserve-3d;transition:transform .65s cubic-bezier(.2,.8,.2,1);border-radius:0}.face{display:block;position:absolute;background:var(--color);border:1px solid #ffffff33;backface-visibility:visible;pointer-events:auto}.top,.bottom{width:var(--w);height:var(--d)}.top{transform:translateZ(var(--h));filter:brightness(1.12)}.bottom{filter:brightness(.5)}.front,.back{width:var(--w);height:var(--h);transform-origin:top;transform:rotateX(90deg)}.front{top:var(--d);filter:brightness(.72)}.back{filter:brightness(.65)}.left,.right{width:var(--h);height:var(--d);transform-origin:left;transform:rotateY(-90deg)}.right{left:var(--w);filter:brightness(.85)}.left{filter:brightness(.6)}.part.selected .face{border-color:#e5ffa8;box-shadow:inset 0 0 8px #d0ff9e88}.round .top,.blade .top{border-radius:45%}.orientation{position:absolute;left:18px;bottom:16px;font-size:11px;line-height:1.8;color:#8eafa6;pointer-events:none}.explode{padding:15px 18px;display:grid;grid-template-columns:auto auto 1fr;gap:16px;align-items:center;border-top:1px solid #ffffff15}.explode button{background:#cce8a8;color:#183c35;font-weight:700}.explode label{font-size:12px}.explode output{display:block;color:#b4cfbd;margin-top:3px}input{width:100%;accent-color:#cce8a8}.note{padding:0 18px 12px;font-size:11px;color:#86a198;line-height:1.6}aside{padding:15px 0}h2{font-size:26px;margin:10px 0}aside p{font-size:13px;color:#a2b8af;line-height:1.9}#parts{display:flex;flex-wrap:wrap;gap:6px;margin:20px 0}#parts button{font-size:11px;padding:7px 9px}article{padding:18px;border:1px solid #8db29044;border-radius:12px;background:#213e39}article>span{font-size:10px;color:#b3d58e}h3{margin:8px 0;font-size:20px}article p{margin-bottom:0}.mission{margin-top:20px;padding:16px;border-left:2px solid #c2d895;background:#ffffff04}.mission b{font-size:12px}.mission p{margin-bottom:0}:focus-visible{outline:2px solid #dcffa2;outline-offset:4px}@media(max-width:850px){.layout{grid-template-columns:1fr}aside{padding:15px}#viewport{height:440px}.toolbar{flex-wrap:wrap}.explode{grid-template-columns:auto 1fr}.explode input{grid-column:1/-1}main{padding:24px 14px}header{padding:18px 14px;font-size:11px}}@media(prefers-reduced-motion:reduce){.part{transition:none}}#viewport{perspective:none;height:560px;background:radial-gradient(ellipse at 50% 40%,#375159,#162e35 76%)}#viewport canvas{width:100%;height:100%;display:block;outline:none;touch-action:none}.orientation{z-index:2;background:#142e35a6;padding:8px 12px;border-radius:8px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.orientation{font-size:11px;white-space:normal;max-width:90%}.viewer{box-shadow:0 24px 70px #0003}@media(max-width:850px){#viewport{height:460px}}.toolbar>div{flex-wrap:wrap}.explode{display:flex;flex-wrap:wrap}.explode input{flex:1;min-width:120px}.explode [hidden]{display:none}
