/* A project idea, made visible: interactive 3D blueprint. */
.bp{margin:6px 0 4px;user-select:none;-webkit-user-select:none}
.bp *{-webkit-user-select:none;user-select:none}
.bp-paper{position:relative;overflow:hidden;aspect-ratio:16/11;border-radius:14px;color:#cfe8ff;background-color:#082544;background-image:linear-gradient(rgba(170,215,255,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(170,215,255,.10) 1px,transparent 1px),linear-gradient(rgba(170,215,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(170,215,255,.05) 1px,transparent 1px),radial-gradient(ellipse 70% 60% at 50% 50%,#0d3a63,#082544);background-size:60px 60px,60px 60px,12px 12px,12px 12px,100% 100%;box-shadow:inset 0 0 0 1px rgba(207,232,255,.28),inset 0 0 0 6px #082544,inset 0 0 0 7px rgba(207,232,255,.14),inset 0 0 90px rgba(0,8,20,.55),0 18px 40px -20px rgba(0,24,51,.55)}
.bp-cap{position:absolute;left:18px;top:14px;right:150px;z-index:3;pointer-events:none;display:flex;flex-direction:column;gap:2px;text-shadow:0 1px 8px rgba(8,37,68,.95)}
.bp-kicker{font:500 10px/1.4 var(--mono,'IBM Plex Mono',monospace);letter-spacing:.12em;color:#72dfbd}
.bp-text{font-size:12.5px;line-height:1.45;color:#e6f3ff}
.bp-text.is-swapping{animation:bp-swap .5s cubic-bezier(.16,1,.3,1) both}
@keyframes bp-swap{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.bp-sheet{position:absolute;right:14px;top:12px;z-index:3;display:grid;grid-template-columns:auto auto;gap:1px 10px;padding:7px 10px;border:1px solid rgba(207,232,255,.32);background:rgba(8,37,68,.65);font:9.5px/1.4 var(--mono,'IBM Plex Mono',monospace);color:rgba(207,232,255,.8);pointer-events:none}.bp-sheet b{font-weight:500;color:#fff}.bp-sheet b.ok{color:#72dfbd}
.bp-stage{position:absolute;inset:0;perspective:1500px;perspective-origin:50% 22%;cursor:grab;touch-action:pan-y}
.bp-stage.dragging{cursor:grabbing}
.bp-stage:focus-visible{outline:2px solid #72dfbd;outline-offset:-4px}
.bp-plane{transform-style:preserve-3d;will-change:transform}
.bp-hint{position:absolute;right:14px;bottom:10px;z-index:3;font:9.5px var(--mono,'IBM Plex Mono',monospace);letter-spacing:.08em;color:rgba(207,232,255,.7);pointer-events:none;text-transform:uppercase}
.bp.is-active .bp-hint{color:#72dfbd}
.bp-dock{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
.bp-play{display:inline-flex;align-items:center;gap:9px;flex:none;padding:5px 16px 5px 5px;border:0;border-radius:999px;background:#72dfbd;color:#062a3f;font:600 13.5px var(--font,Inter,Arial,sans-serif);cursor:pointer;box-shadow:0 10px 22px -10px rgba(10,163,127,.8);animation:bp-pulse 2.4s cubic-bezier(.16,1,.3,1) infinite;transition:transform .2s cubic-bezier(.65,0,.35,1),background .3s ease}
.bp-play:hover{transform:translateY(-1px);background:#8ff0cb}
.bp-play-ic{width:30px;height:30px;border-radius:50%;background:#062a3f;color:#72dfbd;display:flex;align-items:center;justify-content:center;font-size:12px}
.bp-play.is-playing{animation:none;background:#fff}
@keyframes bp-pulse{0%{box-shadow:0 0 0 0 rgba(114,223,189,.6),0 10px 22px -10px rgba(10,163,127,.8)}100%{box-shadow:0 0 0 14px rgba(114,223,189,0),0 10px 22px -10px rgba(10,163,127,.8)}}
.bp-steps{position:relative;flex:1 1 300px;display:flex;padding:3px;border-radius:999px;background:#082544;border:1px solid rgba(207,232,255,.25);overflow:hidden}
.bp-fill{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,rgba(114,223,189,.16),rgba(114,223,189,.3));transition:width .9s cubic-bezier(.65,0,.35,1);pointer-events:none}
.bp-step{position:relative;flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 4px;border:0;border-radius:999px;background:transparent;color:#cfe8ff;font:500 12px var(--font,Inter,Arial,sans-serif);cursor:pointer;white-space:nowrap;transition:background .35s cubic-bezier(.65,0,.35,1),color .35s cubic-bezier(.65,0,.35,1)}
.bp-step b{display:inline-flex;width:17px;height:17px;flex:none;border-radius:50%;align-items:center;justify-content:center;font-size:10px;border:1px solid rgba(207,232,255,.5)}
.bp-step.done b{background:#72dfbd;border-color:#72dfbd;color:#062a3f}
.bp-step.on{background:#fff;color:#062a3f;box-shadow:0 6px 14px -6px rgba(114,223,189,.7)}.bp-step.on b{background:#062a3f;border-color:#062a3f;color:#fff}
.bp-step:hover:not(.on){background:rgba(207,232,255,.08)}
.bp-tools{display:flex;gap:6px;flex:none}
.bp-tool{display:inline-flex;align-items:center;gap:5px;padding:8px 10px;border-radius:10px;border:1px solid #c3d8d0;background:#fff;color:#0b3a55;font:500 12px var(--font,Inter,Arial,sans-serif);cursor:pointer;transition:all .3s cubic-bezier(.65,0,.35,1)}
.bp-tool:hover{border-color:#0aa37f}.bp-tool.on{border-color:#0aa37f;color:#00684f;background:#e3f9f3}
.bp-play:focus-visible,.bp-step:focus-visible,.bp-tool:focus-visible{outline:2px solid #0aa37f;outline-offset:3px}
body.motion-paused .bp *{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.bp *{animation:none!important;transition:none!important}}
@media(max-width:560px){.bp-sheet{display:none}.bp-cap{right:14px}.bp-text{font-size:11.5px}.bp-step{font-size:0;gap:0}.bp-step b{font-size:10px}.bp-tool span{display:none}.bp-paper{aspect-ratio:4/3}}
.bp .bx i{display:block}
.bp .fdn{opacity:0}
.bp .ph-1 .fdn,.bp .ph-2 .fdn,.bp .ph-3 .fdn{opacity:1}
.bp .grow{transform:scale3d(1,1,0.001);opacity:0}
.bp .ph-2 .grow,.bp .ph-3 .grow{transform:scale3d(1,1,1);opacity:1}
.bp .ph-3 .grow i{background:rgba(114,223,189,0.16)!important;border-color:#e9fff7!important;transition:background .8s cubic-bezier(0.65, 0, 0.35, 1),border-color .8s cubic-bezier(0.65, 0, 0.35, 1)}
.bp .ann,.bp .dmv{opacity:0}
.bp .fac{pointer-events:none}
.bp .ph-2 .ann,.bp .ph-3 .ann,.bp .ph-1 .dmv,.bp .ph-2 .dmv,.bp .ph-3 .dmv{opacity:1}
.bp .jib{animation:bp-jib 9s cubic-bezier(0.65, 0, 0.35, 1) infinite alternate}
@keyframes bp-jib{0%{transform:translateZ(190px) rotateZ(-20deg)}100%{transform:translateZ(190px) rotateZ(70deg)}}
.bp .truck{opacity:0;transition:opacity .6s cubic-bezier(0.65, 0, 0.35, 1)}
.bp .ph-1 .truck,.bp .ph-2 .truck{opacity:1;animation:bp-truck 7s cubic-bezier(0.65, 0, 0.35, 1) infinite alternate}
@keyframes bp-truck{0%{transform:translateX(0)}100%{transform:translateX(440px)}}
.bp .bp-plane{top:57%!important}
@media(max-width:560px){.bp-paper{aspect-ratio:1/1}.bp .bp-plane{top:60%!important}.bp-long{display:none}}