/* ---------- "On the desk" as a Blender-style workspace ---------- */
.desk.ws{grid-template-columns:200px minmax(0,1fr) 260px}
.viewport{display:flex;flex-direction:column;min-width:0;border-right:1px solid var(--canvas-line-strong)}
.vp-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;border-bottom:1px solid var(--canvas-line-strong);background:#211F36;font-size:13px;color:#B9B5D4}
.vp-bar .mode{display:inline-flex;align-items:center;gap:8px;padding:5px 10px;border-radius:6px;background:#2E2A4A;color:#fff;font-weight:600}
.vp-bar .mode::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--select)}
.vp-bar.grab .mode{background:var(--select);color:var(--ink)}
.vp-bar.grab .mode::before{background:var(--ink)}
.vp-tools{display:flex;gap:6px}
.vp-tools button{font:inherit;color:#E9E7F5;background:#2E2A4A;border:1px solid #3A3658;border-radius:6px;padding:5px 12px;cursor:pointer}
.vp-tools button:hover{background:#3A3658}
.vp-stat{white-space:nowrap}
.desk.ws .card{width:calc(var(--w,230px) * .82)}
.board.anim .card{transition:left .6s cubic-bezier(.2,.8,.2,1),top .6s cubic-bezier(.2,.8,.2,1),transform .6s cubic-bezier(.2,.8,.2,1)}
.board.grabbing .card.on{cursor:move;box-shadow:0 30px 60px -20px rgba(0,0,0,.85)}
.gizmo{position:absolute;right:14px;bottom:14px;width:70px;height:70px;pointer-events:none;z-index:200;opacity:.95}

.props{padding:14px 16px 18px;font-size:14px;color:#D8D5EA;display:flex;flex-direction:column;gap:14px;min-width:0}
.props h3{margin:0;font:500 12px var(--display);letter-spacing:.06em;color:#8D88AE}
.props .obj{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:600;color:#fff}
.props .obj::before{content:"";width:10px;height:10px;border-radius:2px;background:var(--select);flex:none}
.props .kind{margin:-8px 0 0;color:#A9A5C4}
.props .grp{border:1px solid var(--canvas-line-strong);border-radius:8px;overflow:hidden}
.props .grp > b{display:block;padding:6px 10px;background:#26233C;font-size:12px;font-weight:600;color:#B9B5D4}
.props .row{display:grid;grid-template-columns:58px repeat(3,minmax(0,1fr));gap:4px;padding:6px 10px;align-items:center}
.props .row span{font-variant-numeric:tabular-nums;background:#2E2A4A;border-radius:4px;padding:3px 5px;text-align:right;font-size:12px;white-space:nowrap;overflow:hidden}
.props .row span.x{box-shadow:inset 2px 0 0 #E5484D}
.props .row span.y{box-shadow:inset 2px 0 0 #6BBF59}
.props .row span.z{box-shadow:inset 2px 0 0 #4C8DFF}
.props .row em{font-style:normal;color:#A9A5C4;font-size:12.5px}
.props .thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:8px 10px 10px}
.props .thumbs button{padding:0;border:0;border-radius:6px;overflow:hidden;cursor:zoom-in;background:#2E2A4A;aspect-ratio:1}
.props .thumbs img{width:100%;height:100%;object-fit:cover}
.props .none{padding:8px 10px 10px;color:#8D88AE;font-size:13px}
.props .open{font:600 14px var(--body);color:var(--ink);background:var(--paper);border:0;border-radius:999px;padding:10px 16px;cursor:pointer}
.props .tip{margin:auto 0 0;color:#8D88AE;font-size:12.5px;line-height:1.5}
.props kbd{font:600 11px var(--body);background:#2E2A4A;border:1px solid #4A4664;border-bottom-width:2px;border-radius:4px;padding:1px 6px;color:#fff}

@media (max-width:1100px){
  .desk.ws{grid-template-columns:minmax(0,1fr) 240px}
  .desk.ws .outliner{display:none}
}
@media (max-width:900px){
  .desk.ws{grid-template-columns:1fr}
  .viewport{border-right:0}
  .vp-tools,.gizmo,.props{display:none}
}