<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" width="800" height="600" role="img"
     aria-label="A BIM model of a three level structural frame with one beam selected, its properties listed beside it">
  <defs>
    <pattern id="bimGrid" width="40" height="40" patternUnits="userSpaceOnUse">
      <path d="M40 0H0v40" fill="none" stroke="#e3e9f0" stroke-width="1"/>
    </pattern>
    <filter id="bimShadow" x="-20%" y="-20%" width="140%" height="140%">
      <feDropShadow dx="0" dy="10" stdDeviation="18" flood-color="#071a33" flood-opacity=".10"/>
    </filter>
    <style>
      .s  { font-family: 'Helvetica Neue', Arial, sans-serif; }
      .m  { font-family: Menlo, 'DejaVu Sans Mono', monospace; letter-spacing: .08em; }
      .ttl{ font-weight: 600; fill: #071a33; }
      .met{ fill: #66798d; }
      .sub{ fill: #8b9bab; }
      .lvl{ fill: none; stroke: #4d7fa8; stroke-width: 1.6; }
      .col{ stroke: #6f96b5; stroke-width: 1.6; }
    </style>
  </defs>

  <rect width="800" height="600" fill="#f7f9fc"/>
  <rect width="800" height="600" fill="url(#bimGrid)" opacity=".7"/>

  <!-- viewer card -->
  <g filter="url(#bimShadow)">
    <rect x="64" y="72" width="672" height="452" rx="10" fill="#fff" stroke="#e3e9f0"/>
  </g>
  <text class="s ttl" x="96" y="116" font-size="21">Model · structural frame</text>
  <text class="m sub" x="704" y="114" font-size="11" text-anchor="end">IFC · LEVELS 1–3</text>
  <line x1="64" y1="138" x2="736" y2="138" stroke="#e3e9f0"/>

  <!-- model canvas -->
  <rect x="64" y="138" width="440" height="386" fill="#0a2140"/>
  <g opacity=".28" stroke="#3c6382" stroke-width="1">
    <path d="M64 452 504 452M64 420 504 420M64 484 504 484"/>
  </g>

  <!-- isometric frame: three floor plates, clipped to the model canvas -->
  <clipPath id="bimCanvas"><rect x="64" y="138" width="440" height="386"/></clipPath>
  <g clip-path="url(#bimCanvas)">
    <!-- floor plate at cy=440 -->
    <polygon points="284,382 434,440 284,498 134,440" fill="#1b4a6b" stroke="#6fa3c8" stroke-width="1.5"/>
    <g stroke="#4d7fa8" stroke-width="1" opacity=".55">
      <path d="M209,411 359,469M209,469 359,411"/>
    </g>
    <polygon points="134,440 284,498 284,509 134,451" fill="#103048" stroke="#5b90b6" stroke-width="1"/>
    <polygon points="284,498 434,440 434,451 284,509" fill="#103048" stroke="#5b90b6" stroke-width="1"/>
    <!-- columns from level 1 to level 2 -->
    <g class="col" stroke-width="2.4">
      <path d="M134,451v-100M434,451v-100M284,509v-100"/>
    </g>
    <!-- floor plate at cy=340 -->
    <polygon points="284,282 434,340 284,398 134,340" fill="#1f5679" stroke="#6fa3c8" stroke-width="1.5"/>
    <g stroke="#4d7fa8" stroke-width="1" opacity=".4">
      <path d="M209,311 359,369M209,369 359,311"/>
    </g>
    <polygon points="134,340 284,398 284,409 134,351" fill="#12384f" stroke="#5b90b6" stroke-width="1"/>
    <polygon points="284,398 434,340 434,351 284,409" fill="#12384f" stroke="#5b90b6" stroke-width="1"/>
    <!-- columns from level 2 to level 3 -->
    <g class="col" stroke-width="2.4">
      <path d="M134,351v-100M434,351v-100M284,409v-100M284,293v-40"/>
    </g>
    <!-- floor plate at cy=240 -->
    <polygon points="284,182 434,240 284,298 134,240" fill="#246288" stroke="#6fa3c8" stroke-width="1.5"/>
    <g stroke="#4d7fa8" stroke-width="1" opacity=".3">
      <path d="M209,211 359,269M209,269 359,211"/>
    </g>
    <polygon points="134,240 284,298 284,309 134,251" fill="#154059" stroke="#5b90b6" stroke-width="1"/>
    <polygon points="284,298 434,240 434,251 284,309" fill="#154059" stroke="#5b90b6" stroke-width="1"/>

    <!-- selected beam on level 2, on the top face of its plate -->
    <g>
      <path d="M134,340 284,398" stroke="#f5b335" stroke-width="7" stroke-linecap="round"/>
      <circle cx="209" cy="369" r="20" fill="none" stroke="#f5b335" stroke-opacity=".5"/>
      <path d="M228,374 300,404" stroke="#f5b335" stroke-width="1.2" stroke-dasharray="3 3"/>
    </g>
  </g>

  <!-- viewer chrome -->
  <g class="m" font-size="9" fill="#7f97ad">
    <text x="88" y="168">MODEL VIEW · LEVEL 2 SELECTED</text>
    <text x="88" y="504">SCALE 1:200</text>
  </g>
  <g transform="translate(464 496)" stroke="#7f97ad" stroke-width="1.4" fill="none">
    <path d="M0-12v24M-12 0h24"/>
  </g>

  <!-- properties panel -->
  <g>
    <rect x="504" y="138" width="232" height="386" fill="#fff"/>
    <line x1="504" y1="138" x2="504" y2="524" stroke="#e3e9f0"/>
    <text class="m" x="528" y="172" font-size="10" fill="#f5b335">SELECTED ELEMENT</text>
    <text class="s ttl" x="528" y="200" font-size="17">Beam B-214</text>
    <line x1="528" y1="216" x2="712" y2="216" stroke="#e3e9f0"/>

    <g class="m" font-size="10">
      <text class="sub" x="528" y="244">TYPE</text>
      <text class="met" x="712" y="244" text-anchor="end" font-size="11">RC 300×600</text>
      <text class="sub" x="528" y="274">LEVEL</text>
      <text class="met" x="712" y="274" text-anchor="end" font-size="11">2</text>
      <text class="sub" x="528" y="304">GRID</text>
      <text class="met" x="712" y="304" text-anchor="end" font-size="11">C3 – D3</text>
      <text class="sub" x="528" y="334">CONCRETE</text>
      <text class="met" x="712" y="334" text-anchor="end" font-size="11">2.4 M³</text>
      <text class="sub" x="528" y="364">ACTIVITY</text>
      <text class="met" x="712" y="364" text-anchor="end" font-size="11">L2 FRAME</text>
    </g>
    <line x1="528" y1="384" x2="712" y2="384" stroke="#e3e9f0"/>

    <!-- linked progress -->
    <text class="m sub" x="528" y="410" font-size="10">PROGRESS</text>
    <rect x="528" y="420" width="184" height="8" rx="4" fill="#eef3f8"/>
    <rect x="528" y="420" width="122" height="8" rx="4" fill="#159669"/>
    <text class="m met" x="528" y="446" font-size="10">66% · CAST 12 MAR</text>

    <!-- open item -->
    <rect x="528" y="464" width="184" height="40" rx="5" fill="#fdf4f3" stroke="#d65b4c" stroke-opacity=".3"/>
    <circle cx="548" cy="484" r="5" fill="#d65b4c"/>
    <text class="m" x="562" y="481" font-size="9" fill="#96382a">RFI-022 OPEN</text>
    <text class="m met" x="562" y="495" font-size="9">DUCT CLASH HERE</text>
  </g>

  <text class="m met" x="64" y="556" font-size="11">MODEL, SCHEDULE AND OPEN ITEMS READ FROM THE SAME PROJECT</text>
</svg>
