{# Login hero scene. Concept: tungsten is the metal that glows inside a light bulb. Here the filament is the
   Tungsten "T", and its light falls on the things the package builds: stats, charts, tables and Python code.
   Colors follow the primary palette. #}
{% set coil = 'M336.0 198.0 L337.5 202.1 L339.0 201.5 L340.5 197.0 L342.0 193.6 L343.5 195.2 L345.0 200.0 L346.5 202.5 L348.0 199.9 L349.5 195.1 L351.0 193.6 L352.5 197.1 L354.0 201.6 L355.5 202.0 L357.0 197.8 L358.5 193.9 L360.0 194.6 L361.5 199.2 L363.0 202.4 L364.5 200.6 L366.0 195.8 L367.5 193.5 L369.0 196.3 L370.5 201.0 L372.0 202.3 L373.5 198.7 L375.0 194.3 L376.5 194.1 L378.0 198.4 L379.5 202.2 L381.0 201.3 L382.5 196.6 L384.0 193.5 L385.5 195.6 L387.0 200.4 L388.5 202.5 L390.0 199.5 L391.5 194.8 L393.0 193.8 L394.5 197.5 L396.0 201.8 L397.5 201.8 L399.0 197.4 L400.5 193.7 L402.0 194.9 L403.5 199.6 L405.0 202.5 L406.5 200.3 L408.0 195.5 L409.5 193.5 L411.0 196.7 L412.5 201.3 L414.0 202.2 L415.5 198.3 L417.0 194.1 L418.5 194.3 L420.0 198.8 L421.5 202.3 L423.0 201.0 L424.5 196.2 L426.0 193.5 L427.5 195.9 L429.0 200.7 L430.5 202.4 L432.0 199.1 L433.5 194.6 L435.0 193.9 L436.5 197.9 L438.0 202.0 L439.5 201.6 L441.0 197.1 L442.5 193.6 L444.0 195.2 L445.5 199.9 L447.0 202.5 L448.5 199.9 L450.0 195.2 L451.5 193.6 L453.0 197.0 L454.5 201.6 L456.0 202.0 L457.5 197.9 L459.0 193.9 L460.5 194.6 L462.0 199.1 L463.5 202.4 M400.0 206.0 L404.1 207.5 L403.5 209.0 L399.0 210.5 L395.6 212.0 L397.2 213.5 L402.0 215.0 L404.5 216.5 L401.9 218.0 L397.1 219.5 L395.6 221.0 L399.1 222.5 L403.6 224.0 L404.0 225.5 L399.8 227.0 L395.9 228.5 L396.6 230.0 L401.2 231.5 L404.4 233.0 L402.6 234.5 L397.8 236.0 L395.5 237.5 L398.3 239.0 L403.0 240.5 L404.3 242.0 L400.7 243.5 L396.3 245.0 L396.1 246.5 L400.4 248.0 L404.2 249.5 L403.3 251.0 L398.6 252.5 L395.5 254.0 L397.6 255.5 L402.4 257.0 L404.5 258.5 L401.5 260.0 L396.8 261.5 L395.8 263.0 L399.5 264.5 L403.8 266.0 L403.8 267.5 L399.4 269.0 L395.7 270.5 L396.9 272.0 L401.6 273.5 L404.5 275.0 L402.3 276.5 L397.5 278.0 L395.5 279.5 L398.7 281.0' %}
<svg class="pointer-events-none absolute inset-x-0 bottom-0 h-[50%] w-full" viewBox="0 0 800 520" preserveAspectRatio="xMidYMax slice" aria-hidden="true"
     font-family="ui-sans-serif, system-ui, sans-serif">
  <defs>
    <radialGradient id="tw-ls-glow" cx="400" cy="215" r="300" gradientUnits="userSpaceOnUse">
      <stop offset="0" style="stop-color: rgb(var(--tw-c-primary-400)); stop-opacity: .7"/>
      <stop offset=".3" style="stop-color: rgb(var(--tw-c-primary-600)); stop-opacity: .28"/>
      <stop offset="1" style="stop-color: rgb(var(--tw-c-primary-900)); stop-opacity: 0"/>
    </radialGradient>
    <radialGradient id="tw-ls-glass" cx="400" cy="200" r="130" gradientUnits="userSpaceOnUse">
      <stop offset="0" style="stop-color: rgb(var(--tw-c-primary-200)); stop-opacity: .22"/>
      <stop offset=".7" style="stop-color: rgb(var(--tw-c-primary-500)); stop-opacity: .06"/>
      <stop offset="1" stop-color="#fff" stop-opacity=".05"/>
    </radialGradient>
    <linearGradient id="tw-ls-glass-edge" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#fff" stop-opacity=".45"/><stop offset=".6" style="stop-color: rgb(var(--tw-c-primary-300)); stop-opacity: .35"/>
      <stop offset="1" stop-color="#fff" stop-opacity=".15"/>
    </linearGradient>
    <linearGradient id="tw-ls-cap" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="#2a221d"/><stop offset=".35" stop-color="#6b5a4c"/><stop offset=".55" stop-color="#3b302a"/><stop offset="1" stop-color="#17120f"/>
    </linearGradient>
    <linearGradient id="tw-ls-card" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#fff" stop-opacity=".07"/><stop offset="1" stop-color="#fff" stop-opacity=".02"/>
    </linearGradient>
    <linearGradient id="tw-ls-bar" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" style="stop-color: rgb(var(--tw-c-primary-300))"/><stop offset="1" style="stop-color: rgb(var(--tw-c-primary-600))"/>
    </linearGradient>
    <linearGradient id="tw-ls-spark" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" style="stop-color: rgb(var(--tw-c-primary-400)); stop-opacity: .35"/><stop offset="1" style="stop-color: rgb(var(--tw-c-primary-400)); stop-opacity: 0"/>
    </linearGradient>
    <filter id="tw-ls-blur-lg" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="9"/></filter>
    <filter id="tw-ls-blur-sm" x="-20%" y="-20%" width="140%" height="140%"><feGaussianBlur stdDeviation="2"/></filter>
  </defs>

  {# light from the bulb #}
  <rect width="800" height="520" fill="url(#tw-ls-glow)"/>
  <g style="stroke: rgb(var(--tw-c-primary-300))" stroke-width="1" stroke-dasharray="2 7" stroke-linecap="round" opacity=".35">
    <path d="M400 215 L268 128"/><path d="M400 215 L250 300"/><path d="M400 215 L250 420"/>
    <path d="M400 215 L560 150"/><path d="M400 215 L575 300"/><path d="M400 215 L400 40"/>
  </g>

  {# floor + reflection #}
  <ellipse cx="400" cy="470" rx="230" ry="18" style="fill: rgb(var(--tw-c-primary-500))" opacity=".18" filter="url(#tw-ls-blur-lg)"/>
  <path d="M0 470 H800" stroke="#fff" stroke-opacity=".06"/>
  <g stroke="#fff" stroke-opacity=".04">
    <path d="M400 470 L120 520"/><path d="M400 470 L260 520"/><path d="M400 470 L540 520"/><path d="M400 470 L680 520"/><path d="M0 492 H800"/>
  </g>

  {# ---------------- the bulb #}
  <path d="M352 372 C352 334 300 312 288 270 A125 125 0 1 1 512 270 C500 312 448 334 448 372 Z" fill="url(#tw-ls-glass)" stroke="url(#tw-ls-glass-edge)" stroke-width="1.5"/>
  <path d="M310 170 A100 100 0 0 1 372 108" fill="none" stroke="#fff" stroke-opacity=".28" stroke-width="5" stroke-linecap="round"/>
  {# glass stem and the wires holding the filament #}
  <path d="M384 372 L390 318 H410 L416 372" fill="#fff" fill-opacity=".05" stroke="#fff" stroke-opacity=".12"/>
  <g stroke="#a8a29e" stroke-opacity=".55" stroke-width="1.2" fill="none">
    <path d="M394 372 V300 L338 202"/><path d="M406 372 V300 L462 202"/><path d="M400 318 V284"/>
  </g>
  {# the filament: the Tungsten "T", glowing #}
  <ellipse cx="400" cy="225" rx="85" ry="70" style="fill: rgb(var(--tw-c-primary-300))" opacity=".22" filter="url(#tw-ls-blur-lg)"/>
  <path d="{{ coil }}" fill="none" style="stroke: rgb(var(--tw-c-primary-500))" stroke-width="22" stroke-linecap="round" stroke-linejoin="round" opacity=".85" filter="url(#tw-ls-blur-lg)"/>
  <path d="{{ coil }}" fill="none" style="stroke: rgb(var(--tw-c-primary-300))" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" filter="url(#tw-ls-blur-sm)"/>
  <path d="{{ coil }}" fill="none" stroke="#fff7ed" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/>
  {# screw cap #}
  <path d="M354 372 H446 V384 C446 390 354 390 354 384 Z" fill="url(#tw-ls-cap)"/>
  <g fill="url(#tw-ls-cap)">
    <rect x="358" y="388" width="84" height="12" rx="6"/><rect x="360" y="402" width="80" height="12" rx="6"/><rect x="362" y="416" width="76" height="12" rx="6"/>
  </g>
  <path d="M372 430 H428 L414 446 H386 Z" fill="#17120f"/><circle cx="400" cy="449" r="5" fill="#3b302a"/>

  {# ---------------- what the light falls on #}
  {# periodic table tile: tungsten, element 74 #}
  <g transform="translate(176 66)">
    <rect width="92" height="104" rx="12" fill="url(#tw-ls-card)" style="stroke: rgb(var(--tw-c-primary-400))" stroke-opacity=".55"/>
    <text x="12" y="22" font-size="12" fill="#fff" fill-opacity=".6">74</text>
    <text x="46" y="66" font-size="38" font-weight="700" text-anchor="middle" style="fill: rgb(var(--tw-c-primary-300))">W</text>
    <text x="46" y="84" font-size="11" text-anchor="middle" fill="#fff" fill-opacity=".75">Tungsten</text>
    <text x="46" y="97" font-size="9" text-anchor="middle" fill="#fff" fill-opacity=".4">183.84</text>
  </g>

  {# stat card #}
  <g transform="translate(84 252)">
    <rect width="168" height="84" rx="12" fill="url(#tw-ls-card)" stroke="#fff" stroke-opacity=".12"/>
    <rect x="14" y="14" width="26" height="26" rx="7" style="fill: rgb(var(--tw-c-primary-500))" fill-opacity=".2"/>
    <path d="M22 32 L27 26 L31 29 L35 22" fill="none" style="stroke: rgb(var(--tw-c-primary-300))" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
    <text x="50" y="34" font-size="18" font-weight="700" fill="#fff">1,248</text>
    <rect x="108" y="20" width="44" height="17" rx="8.5" fill="#22c55e" fill-opacity=".15"/>
    <text x="130" y="32" font-size="10" font-weight="600" text-anchor="middle" fill="#4ade80">↑ 12%</text>
    <path d="M14 70 L34 62 L52 66 L72 54 L92 58 L112 46 L132 50 L154 40 V76 H14 Z" fill="url(#tw-ls-spark)"/>
    <path d="M14 70 L34 62 L52 66 L72 54 L92 58 L112 46 L132 50 L154 40" fill="none" style="stroke: rgb(var(--tw-c-primary-400))" stroke-width="1.8" stroke-linejoin="round" stroke-linecap="round"/>
  </g>

  {# python code chip #}
  <g transform="translate(64 372)" font-family="ui-monospace, SFMono-Regular, Menlo, monospace" font-size="11.5">
    <rect width="214" height="62" rx="12" fill="url(#tw-ls-card)" stroke="#fff" stroke-opacity=".12"/>
    <circle cx="16" cy="14" r="2.5" fill="#fff" fill-opacity=".2"/><circle cx="25" cy="14" r="2.5" fill="#fff" fill-opacity=".2"/><circle cx="34" cy="14" r="2.5" fill="#fff" fill-opacity=".2"/>
    <text x="14" y="36"><tspan style="fill: rgb(var(--tw-c-primary-400))">class</tspan><tspan fill="#fff"> Order</tspan><tspan fill="#a8a29e">(Resource):</tspan></text>
    <text x="38" y="52"><tspan fill="#a8a29e">icon = </tspan><tspan fill="#86efac">"cart"</tspan></text>
  </g>

  {# bar chart card #}
  <g transform="translate(556 100)">
    <rect width="168" height="104" rx="12" fill="url(#tw-ls-card)" stroke="#fff" stroke-opacity=".12"/>
    <rect x="14" y="14" width="56" height="6" rx="3" fill="#fff" fill-opacity=".35"/>
    <rect x="14" y="25" width="34" height="5" rx="2.5" fill="#fff" fill-opacity=".15"/>
    <g fill="url(#tw-ls-bar)">
      <rect x="16" y="66" width="14" height="24" rx="3"/><rect x="40" y="54" width="14" height="36" rx="3"/><rect x="64" y="72" width="14" height="18" rx="3"/>
      <rect x="88" y="46" width="14" height="44" rx="3"/><rect x="112" y="58" width="14" height="32" rx="3"/><rect x="136" y="40" width="14" height="50" rx="3"/>
    </g>
    <path d="M14 91 H154" stroke="#fff" stroke-opacity=".12"/>
  </g>

  {# table card #}
  <g transform="translate(572 262)">
    <rect width="168" height="108" rx="12" fill="url(#tw-ls-card)" stroke="#fff" stroke-opacity=".12"/>
    <g>
      <circle cx="24" cy="26" r="9" style="fill: rgb(var(--tw-c-primary-500))" fill-opacity=".35"/>
      <rect x="40" y="20" width="58" height="5" rx="2.5" fill="#fff" fill-opacity=".4"/><rect x="40" y="29" width="38" height="4" rx="2" fill="#fff" fill-opacity=".15"/>
      <rect x="114" y="19" width="40" height="14" rx="7" fill="#22c55e" fill-opacity=".2"/>
    </g>
    <path d="M14 44 H154" stroke="#fff" stroke-opacity=".07"/>
    <g>
      <circle cx="24" cy="58" r="9" fill="#60a5fa" fill-opacity=".35"/>
      <rect x="40" y="52" width="50" height="5" rx="2.5" fill="#fff" fill-opacity=".4"/><rect x="40" y="61" width="44" height="4" rx="2" fill="#fff" fill-opacity=".15"/>
      <rect x="114" y="51" width="40" height="14" rx="7" style="fill: rgb(var(--tw-c-primary-500))" fill-opacity=".25"/>
    </g>
    <path d="M14 76 H154" stroke="#fff" stroke-opacity=".07"/>
    <g>
      <circle cx="24" cy="90" r="9" fill="#c084fc" fill-opacity=".35"/>
      <rect x="40" y="84" width="62" height="5" rx="2.5" fill="#fff" fill-opacity=".4"/><rect x="40" y="93" width="32" height="4" rx="2" fill="#fff" fill-opacity=".15"/>
      <rect x="114" y="83" width="40" height="14" rx="7" fill="#60a5fa" fill-opacity=".2"/>
    </g>
  </g>

  {# a few sparks in the air #}
  <g style="fill: rgb(var(--tw-c-primary-200))">
    <circle cx="330" cy="70" r="1.4" opacity=".6"/><circle cx="480" cy="60" r="1.1" opacity=".5"/><circle cx="520" cy="230" r="1.3" opacity=".5"/>
    <circle cx="290" cy="230" r="1" opacity=".45"/><circle cx="455" cy="110" r=".9" opacity=".5"/><circle cx="350" cy="320" r="1" opacity=".4"/>
  </g>
</svg>