/* A spatial illustration: OpenBuildRoom controls local parts; it does not contain them. */
.hero-project-layer{position:relative;z-index:1;width:min(1148px,calc(100% - 88px));margin:34px auto 0;color:#254455;text-align:left}
.hero-project-heading{display:flex;justify-content:space-between;align-items:start;gap:28px;max-width:1040px;margin:0 auto 12px}
.hero-project-heading small{display:block;margin-bottom:8px;color:#557788;font-size:10px;font-weight:800;letter-spacing:.17em}
.hero-project-heading h2{margin:0;color:#183e50;font-size:clamp(23px,2.7vw,34px);line-height:1.16;letter-spacing:-.045em}
.hero-project-heading p{max-width:610px;margin:9px 0 0;color:#55798a;font-size:13px;line-height:1.55}
.hero-project-heading>span{padding-top:4px;color:#6f91a0;font-size:9px;font-weight:750;letter-spacing:.13em;white-space:nowrap}
.hero-project-body{position:relative;height:370px;isolation:isolate;perspective:1100px}
.hero-project-body:before{content:"";position:absolute;left:4%;right:1%;bottom:8px;height:130px;border-radius:50%;background:radial-gradient(ellipse at center,#6c9daf30 0,#6c9daf0d 48%,transparent 75%);transform:perspective(500px) rotateX(64deg);pointer-events:none}
.hero-control-device{position:absolute;z-index:2;left:2%;top:34px;width:53%;height:296px;overflow:hidden;border:1px solid #a8c4ce;border-radius:15px;background:#f7fbfc;box-shadow:0 33px 50px #164a5a30,0 8px 14px #164a5a1c,inset 0 1px #fff;transform:perspective(1100px) rotateY(9deg) rotateZ(-2deg);transform-origin:left center}
.hero-control-top{height:39px;display:flex;align-items:center;gap:10px;padding:0 15px;border-bottom:1px solid #d6e4e8;background:#e6f0f3;color:#23495a}
.hero-control-top strong{font-size:11px;letter-spacing:-.035em}
.hero-control-top small{margin-left:auto;color:#7092a0;font-size:8px;font-weight:800;letter-spacing:.15em}
.hero-control-dots{display:flex;gap:5px}.hero-control-dots i{width:6px;height:6px;border-radius:50%;background:#b0c6cd}.hero-control-dots i:first-child{background:#d9a68c}.hero-control-dots i:nth-child(2){background:#d9c38f}
.hero-control-inner{height:calc(100% - 39px);display:grid;grid-template-columns:45px 1fr}
.hero-control-rail{display:flex;flex-direction:column;align-items:center;gap:12px;padding:18px 0;border-right:1px solid #dae7eb;background:#edf4f6;color:#7893a0;font-size:16px}.hero-control-rail span{width:27px;height:27px;display:grid;place-items:center;border-radius:6px}.hero-control-rail .active{background:#d5e6ec;color:#2d6178}
.hero-control-main{min-width:0;padding:17px 21px}.hero-control-main>small{color:#7093a2;font-size:8px;font-weight:800;letter-spacing:.16em}.hero-control-main h3{margin:5px 0 1px;color:#204457;font-size:18px;letter-spacing:-.045em}.hero-control-main>p{margin:0 0 11px;color:#78929e;font-size:9px}
.hero-control-row{height:39px;display:flex;align-items:center;gap:10px;border-top:1px solid #dfe9ec;color:#315367}.hero-control-row>span{width:23px;height:23px;display:grid;place-items:center;border-radius:6px;background:#e2edf1;color:#4b788a;font-size:13px}.hero-control-row b{font-size:10px}.hero-control-row em{margin-left:auto;padding:4px 7px;border-radius:20px;background:#e9eef0;color:#7e949f;font-size:8px;font-style:normal;font-weight:750}.hero-control-row em.is-running{background:#def2e5;color:#26704d}
.hero-control-bottom{display:flex;justify-content:space-between;gap:10px;padding-top:9px;border-top:1px solid #dfe9ec;color:#688895;font-size:9px;font-weight:700}
.hero-project-components{position:absolute;z-index:1;left:56%;right:0;top:0;bottom:0;perspective:800px}
.hero-project-components button{position:absolute;display:grid;grid-template-columns:33px minmax(0,1fr);column-gap:9px;align-items:center;width:44%;min-width:165px;min-height:85px;padding:11px 12px;border:1px solid #b4d0d8;border-radius:11px;background:linear-gradient(145deg,#fff,#e7f2f4);color:#2c5060;box-shadow:11px 14px 0 -7px #a6c1ca,0 23px 35px #23566d28,inset 0 1px #fff;text-align:left;cursor:pointer;transform:rotateY(-11deg) rotateZ(3deg);transition:transform .22s,box-shadow .22s,border-color .22s}
.hero-project-components button:nth-child(1){left:3%;top:39px}.hero-project-components button:nth-child(2){right:2%;top:3px;transform:rotateY(-15deg) rotateZ(-3deg)}.hero-project-components button:nth-child(3){left:7%;bottom:24px;transform:rotateY(-7deg) rotateZ(-4deg)}.hero-project-components button:nth-child(4){right:0;bottom:53px;transform:rotateY(-14deg) rotateZ(4deg)}
.hero-project-components button:hover,.hero-project-components button:focus-visible{z-index:3;transform:translateY(-6px) rotateY(-5deg);border-color:#729daf;box-shadow:11px 17px 0 -7px #8badba,0 30px 40px #23566d38;outline:none}
.hero-project-components button.is-focused{border-color:#6e9caf;box-shadow:11px 14px 0 -7px #8badba,0 24px 36px #23566d36}
.hero-project-components i{grid-row:1/3;width:33px;height:33px;display:grid;place-items:center;border-radius:8px;background:#dcebef;color:#477c90;font-size:18px;font-style:normal}
.hero-project-components button>span{display:grid;gap:4px;min-width:0}.hero-project-components b{font-size:11px;white-space:nowrap}.hero-project-components small{color:#7899a6;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-project-components em{grid-column:2;justify-self:start;margin-top:4px;padding:3px 6px;border-radius:20px;background:#e8eef0;color:#7d95a0;font-size:8px;font-style:normal;font-weight:750}.hero-project-components button.is-starting em{background:#fff1d9;color:#9b6a28}.hero-project-components button.is-running em{background:#dff1e6;color:#2c7650}.hero-project-components button.is-running i{background:#daf1e5;color:#397b5d}.hero-project-components button[data-project-component="db"] em{background:#deebef;color:#567b8c}
.hero-project-footer{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;max-width:1040px;margin:0 auto;color:#5d7e8d;font-size:10px}.hero-project-footer span:last-child{color:#72909c;font-size:9px}.hero-project-layer.has-tests .hero-project-footer span:nth-child(2){color:#29704d;font-weight:750}
html[data-theme="dark"] .hero-project-layer{color:#d9e8ee}html[data-theme="dark"] .hero-project-heading h2{color:#e6f3f6}html[data-theme="dark"] .hero-project-heading small,html[data-theme="dark"] .hero-project-heading p,html[data-theme="dark"] .hero-project-heading>span,html[data-theme="dark"] .hero-project-footer{color:#a8c4d0}html[data-theme="dark"] .hero-project-body:before{background:radial-gradient(ellipse at center,#2b78904b 0,#2b78901a 48%,transparent 75%)}
html[data-theme="dark"] .hero-control-device{background:#1c3748;border-color:#527284;box-shadow:0 33px 50px #03192788,0 8px 14px #03192766,inset 0 1px #537282}html[data-theme="dark"] .hero-control-top{background:#264555;border-color:#3b5b6a;color:#e3eff2}html[data-theme="dark"] .hero-control-top small{color:#a6c2ce}html[data-theme="dark"] .hero-control-rail{background:#203d4e;border-color:#3c5969;color:#9bb9c5}html[data-theme="dark"] .hero-control-rail .active{background:#355d71;color:#e7f2f4}html[data-theme="dark"] .hero-control-main>small,html[data-theme="dark"] .hero-control-main>p{color:#9eb8c3}html[data-theme="dark"] .hero-control-main h3,html[data-theme="dark"] .hero-control-row{color:#e6f1f4}html[data-theme="dark"] .hero-control-row,html[data-theme="dark"] .hero-control-bottom{border-color:#3b5969}html[data-theme="dark"] .hero-control-row>span{background:#2d5264;color:#bbdae4}html[data-theme="dark"] .hero-control-row em{background:#345365;color:#c0d4dc}html[data-theme="dark"] .hero-control-row em.is-running{background:#245843;color:#bce9d0}html[data-theme="dark"] .hero-control-bottom{color:#a7c0cb}
html[data-theme="dark"] .hero-project-components button{background:linear-gradient(145deg,#2e4e60,#203b4b);border-color:#557486;color:#e3eff2;box-shadow:11px 14px 0 -7px #1b3543,0 23px 35px #03192780,inset 0 1px #608095}html[data-theme="dark"] .hero-project-components button:hover,html[data-theme="dark"] .hero-project-components button.is-focused{border-color:#9bc3d1}html[data-theme="dark"] .hero-project-components i{background:#355e71;color:#cee7ef}html[data-theme="dark"] .hero-project-components small{color:#acc6d0}html[data-theme="dark"] .hero-project-components em{background:#365767;color:#c0d5df}html[data-theme="dark"] .hero-project-components button.is-starting em{background:#5b492c;color:#f4d29c}html[data-theme="dark"] .hero-project-components button.is-running em{background:#245843;color:#bce9d0}html[data-theme="dark"] .hero-project-components button.is-running i{background:#285b47;color:#c3e8d2}html[data-theme="dark"] .hero-project-components button[data-project-component="db"] em{background:#345b6e;color:#c4e0ea}
@media(max-width:900px){.hero-project-heading>span{display:none}.hero-control-device{width:57%}.hero-project-components{left:54%}.hero-project-components button{min-width:145px;padding:9px}.hero-project-components b{font-size:10px}.hero-project-components small{font-size:8px}}
@media(max-width:700px){.hero-project-layer{width:calc(100% - 30px);margin-top:25px}.hero-project-heading{margin-bottom:18px}.hero-project-heading h2{font-size:25px}.hero-project-body{height:auto;display:grid;gap:26px;perspective:none}.hero-project-body:before{height:90px;bottom:0}.hero-control-device{position:relative;left:auto;top:auto;width:92%;height:280px;margin:0 auto;transform:rotate(-2deg)}.hero-project-components{position:relative;left:auto;right:auto;top:auto;bottom:auto;display:grid;grid-template-columns:1fr 1fr;gap:15px;perspective:none;padding:0 5px 15px}.hero-project-components button,.hero-project-components button:nth-child(n){position:relative;left:auto;right:auto;top:auto;bottom:auto;width:auto;min-width:0;min-height:78px;transform:none}.hero-project-components button:hover,.hero-project-components button:focus-visible{transform:translateY(-4px)}.hero-project-footer{margin-top:8px;gap:8px}.hero-project-footer span:last-child{width:100%}}
@media(max-width:430px){.hero-project-heading h2{font-size:22px}.hero-project-heading p{font-size:12px}.hero-control-device{width:100%;height:258px}.hero-control-main{padding:13px}.hero-control-main>p{font-size:8px}.hero-control-row{height:36px}.hero-control-bottom{font-size:8px}.hero-project-components{gap:9px;padding-inline:0}.hero-project-components button,.hero-project-components button:nth-child(n){grid-template-columns:26px minmax(0,1fr);column-gap:6px;padding:8px;min-height:75px}.hero-project-components i{width:26px;height:26px;font-size:14px}.hero-project-components b{font-size:9px}.hero-project-components small{font-size:8px}.hero-project-components em{font-size:7px}}
@media(prefers-reduced-motion:reduce){.hero-project-components button{transition:none}}