.f3d{border:1px solid var(--line);border-radius:var(--radius);color:#14213d;background:#eef0ea;display:grid;position:relative;overflow:hidden}.f3d [data-f3d=stage]{height:min(64vh,560px);position:relative}.f3d canvas{cursor:grab;outline:none;width:100%;height:100%;display:block}.f3d canvas.drag{cursor:grabbing}.f3d-loading{color:#4a5263;place-items:center;font-weight:500;display:grid;position:absolute;inset:0}.f3d [data-f3d=pins]{pointer-events:none;position:absolute;inset:0}.f3d .pin3d{pointer-events:auto;cursor:pointer;will-change:transform;align-items:center;gap:.5rem;display:flex;position:absolute;top:0;left:0}.f3d .pin3d .disc{background:#14213d;border:3px solid #fff;border-radius:999px;flex-shrink:0;width:32px;height:32px;transition:background-color .2s,transform .2s;box-shadow:0 4px 12px #14213d59}.f3d .pin3d .lbl{white-space:nowrap;background:#fff;border-radius:999px;gap:.4rem;padding:.3rem .7rem;font-size:.75rem;font-weight:600;display:flex;box-shadow:0 4px 12px #14213d2e}.f3d .pin3d .lbl b{color:#8a5a0a}.f3d .pin3d.on .disc,.f3d .pin3d:hover .disc{background:#f2a50c;transform:scale(1.12)}.f3d.zoomed .pin3d:not(.on) .lbl{display:none}@media (max-width:859px){.f3d .pin3d:not(.on) .lbl{display:none}}.f3d [data-f3d=card]{border-top:1px solid var(--line);background:#fff;padding:1.25rem}.f3d [data-f3d=card].swap{animation:.32s ease-out f3d-swap}.f3d .eyebrow{letter-spacing:.09em;text-transform:uppercase;color:#8a5a0a;font-size:.75rem;font-weight:700}.f3d .title{font-family:var(--font-display);margin-top:.5rem;font-size:1.25rem;font-weight:700;line-height:1.25}.f3d [data-f3d=card]>p:not(.title){color:#4a5263;margin-top:.5rem;font-size:.9rem}.f3d .jobs{gap:.35rem;margin-top:.75rem;font-size:.875rem;font-weight:500;display:grid}.f3d .jobs li{gap:.6rem;display:flex}.f3d .jobs li:before{content:"";background:#8a5a0a;flex-shrink:0;width:.75rem;height:1px;margin-top:.7em}.f3d .actions{flex-wrap:wrap;gap:.5rem;margin-top:1rem;display:flex}.f3d .btn{color:#fff;background:#14213d;border-radius:999px;justify-content:center;align-items:center;min-height:44px;padding:0 1.1rem;font-size:.875rem;font-weight:600;transition:background-color .2s;display:inline-flex}.f3d .btn:hover{background:#1e386b}.f3d .btn.ghost{color:#14213d;background:#fff;border:1px solid #c9cdd5}.f3d .btn.ghost:hover{background:#efebe3}.f3d .btn.icon{width:44px;padding:0}.f3d [data-f3d=steps]{border-top:1px solid var(--line);scrollbar-width:none;background:#fff;gap:.25rem;padding:.5rem;display:flex;overflow-x:auto}.f3d [data-f3d=steps]::-webkit-scrollbar{display:none}.f3d .step{color:#4a5263;border-radius:999px;flex-shrink:0;align-items:center;gap:.45rem;min-height:44px;padding:0 .8rem;font-size:.8rem;font-weight:600;transition:background-color .2s,color .2s;display:flex}.f3d .step>span:first-child{color:#8a5a0a}.f3d .step .ic svg{fill:none;stroke:currentColor;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round;width:18px;height:18px}.f3d .step:hover{color:#14213d;background:#efebe3}.f3d .step.on{color:#fff;background:#14213d}.f3d .step.on>span:first-child{color:#f2a50c}.f3d-tools{flex-direction:column;gap:.4rem;display:flex;position:absolute;top:.75rem;right:.75rem}.f3d-tools button{color:#14213d;background:#fff;border:1px solid #c9cdd5;border-radius:999px;justify-content:center;align-items:center;width:44px;height:44px;font-size:.95rem;font-weight:700;display:inline-flex;box-shadow:0 2px 8px #14213d1f}.f3d-tools button:hover{background:#efebe3}.f3d [data-f3d=hint]{color:#fff;pointer-events:none;white-space:nowrap;background:#14213dc7;border-radius:999px;padding:.35rem .85rem;font-size:.75rem;transition:opacity .4s;position:absolute;bottom:.75rem;left:50%;transform:translate(-50%)}.f3d :focus-visible{outline-offset:2px;outline:2px solid #f2a50c}@media (min-width:860px){.f3d{grid-template-rows:1fr auto}.f3d [data-f3d=stage]{height:min(78vh,820px)}.f3d [data-f3d=card]{border:1px solid var(--line);border-radius:var(--radius);width:360px;max-height:calc(100% - 6rem);box-shadow:var(--shadow-md);position:absolute;top:1rem;left:1rem;overflow-y:auto}.f3d [data-f3d=steps]{justify-content:center}}@media (pointer:coarse){.f3d [data-f3d=hint]{display:none}}@keyframes f3d-swap{0%{opacity:0;transform:translateY(6px)}}@media (prefers-reduced-motion:reduce){.f3d [data-f3d=card].swap{animation:none}}
