/* ==================================================
   GLOBAL
================================================== */

:root {

    --bg-color: #020617;
    --die-color: #0f172a;
    --die-inner: #111827;

    --glow-color: #00d2ff;
    --trace-color: #22d3ee;

    --accent-active: #f59e0b;
    --accent-active-glow: rgba(245,158,11,0.35);

    --text-color: #e2e8f0;
    --muted-text: #94a3b8;

    --pad-color: #475569;
    --pad-highlight: #64748b;

    --border-color: #1e293b;

    --modal-surface: rgba(5,9,18,0.9);

    --font-display: "IBM Plex Mono", "JetBrains Mono", "Fira Code", monospace;
    --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    --transition-speed: 0.3s;

    /* Die-surface textures, generated from a real die-photo reference:
       each die-block gets its OWN authentic macro texture (fine grid
       for memory, coarse active-array for the accelerator, irregular
       cell placement for logic/mixed-signal) rather than one pattern
       tiled everywhere. Popups use two progressively finer variants
       so drilling down (category -> item detail) visually reads as
       zooming into denser routing detail. Warm gold/olive palette
       matches the reference photo rather than an EDA-viewer rainbow. */
    --surface-memory: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Crect width='48' height='48' fill='%2313100a'/%3E%3Crect x='0.8' y='0.8' width='6.5' height='6.5' fill='%238a6a28' opacity='0.55'/%3E%3Crect x='8.8' y='0.8' width='6.5' height='6.5' fill='%23c9a13b' opacity='0.44'/%3E%3Crect x='16.8' y='0.8' width='6.5' height='6.5' fill='%239a8f4a' opacity='0.62'/%3E%3Crect x='24.8' y='0.8' width='6.5' height='6.5' fill='%239a8f4a' opacity='0.58'/%3E%3Crect x='32.8' y='0.8' width='6.5' height='6.5' fill='%238a6a28' opacity='0.38'/%3E%3Crect x='40.8' y='0.8' width='6.5' height='6.5' fill='%23c9a13b' opacity='0.66'/%3E%3Crect x='0.8' y='8.8' width='6.5' height='6.5' fill='%239a8f4a' opacity='0.5'/%3E%3Crect x='8.8' y='8.8' width='6.5' height='6.5' fill='%23c9a13b' opacity='0.59'/%3E%3Crect x='16.8' y='8.8' width='6.5' height='6.5' fill='%236b6a3a' opacity='0.6'/%3E%3Crect x='24.8' y='8.8' width='6.5' height='6.5' fill='%238a6a28' opacity='0.56'/%3E%3Crect x='32.8' y='8.8' width='6.5' height='6.5' fill='%23c9a13b' opacity='0.67'/%3E%3Crect x='40.8' y='8.8' width='6.5' height='6.5' fill='%23c9a13b' opacity='0.36'/%3E%3Crect x='0.8' y='16.8' width='6.5' height='6.5' fill='%233a2f18' opacity='0.35'/%3E%3Crect x='8.8' y='16.8' width='6.5' height='6.5' fill='%239a8f4a' opacity='0.59'/%3E%3Crect x='16.8' y='16.8' width='6.5' height='6.5' fill='%239a8f4a' opacity='0.6'/%3E%3Crect x='24.8' y='16.8' width='6.5' height='6.5' fill='%233a2f18' opacity='0.43'/%3E%3Crect x='32.8' y='16.8' width='6.5' height='6.5' fill='%239a8f4a' opacity='0.68'/%3E%3Crect x='40.8' y='16.8' width='6.5' height='6.5' fill='%233a2f18' opacity='0.43'/%3E%3Crect x='0.8' y='24.8' width='6.5' height='6.5' fill='%238a6a28' opacity='0.59'/%3E%3Crect x='8.8' y='24.8' width='6.5' height='6.5' fill='%239a8f4a' opacity='0.68'/%3E%3Crect x='16.8' y='24.8' width='6.5' height='6.5' fill='%23c9a13b' opacity='0.5'/%3E%3Crect x='24.8' y='24.8' width='6.5' height='6.5' fill='%233a2f18' opacity='0.67'/%3E%3Crect x='32.8' y='24.8' width='6.5' height='6.5' fill='%23c9a13b' opacity='0.42'/%3E%3Crect x='40.8' y='24.8' width='6.5' height='6.5' fill='%236b6a3a' opacity='0.39'/%3E%3Crect x='0.8' y='32.8' width='6.5' height='6.5' fill='%236b6a3a' opacity='0.66'/%3E%3Crect x='8.8' y='32.8' width='6.5' height='6.5' fill='%233a2f18' opacity='0.68'/%3E%3Crect x='16.8' y='32.8' width='6.5' height='6.5' fill='%239a8f4a' opacity='0.53'/%3E%3Crect x='24.8' y='32.8' width='6.5' height='6.5' fill='%238a6a28' opacity='0.46'/%3E%3Crect x='32.8' y='32.8' width='6.5' height='6.5' fill='%233a2f18' opacity='0.69'/%3E%3Crect x='40.8' y='32.8' width='6.5' height='6.5' fill='%239a8f4a' opacity='0.65'/%3E%3Crect x='0.8' y='40.8' width='6.5' height='6.5' fill='%233a2f18' opacity='0.49'/%3E%3Crect x='8.8' y='40.8' width='6.5' height='6.5' fill='%23c9a13b' opacity='0.52'/%3E%3Crect x='16.8' y='40.8' width='6.5' height='6.5' fill='%239a8f4a' opacity='0.5'/%3E%3Crect x='24.8' y='40.8' width='6.5' height='6.5' fill='%238a6a28' opacity='0.48'/%3E%3Crect x='32.8' y='40.8' width='6.5' height='6.5' fill='%236b6a3a' opacity='0.38'/%3E%3Crect x='40.8' y='40.8' width='6.5' height='6.5' fill='%233a2f18' opacity='0.39'/%3E%3C/svg%3E");
    --surface-accelerator: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Crect width='96' height='96' fill='%2313100a'/%3E%3Crect x='1.5' y='1.5' width='13.0' height='13.0' fill='%23c9a13b' opacity='0.38'/%3E%3Crect x='17.5' y='1.5' width='13.0' height='13.0' fill='%236b6a3a' opacity='0.64'/%3E%3Crect x='33.5' y='1.5' width='13.0' height='13.0' fill='%236b6a3a' opacity='0.44'/%3E%3Crect x='49.5' y='1.5' width='13.0' height='13.0' fill='%238a6a28' opacity='0.56'/%3E%3Crect x='65.5' y='1.5' width='13.0' height='13.0' fill='%233a2f18' opacity='0.59'/%3E%3Crect x='81.5' y='1.5' width='13.0' height='13.0' fill='%239a8f4a' opacity='0.57'/%3E%3Crect x='1.5' y='17.5' width='13.0' height='13.0' fill='%233a2f18' opacity='0.68'/%3E%3Crect x='17.5' y='17.5' width='13.0' height='13.0' fill='%233a2f18' opacity='0.68'/%3E%3Crect x='33.5' y='17.5' width='13.0' height='13.0' fill='%233a2f18' opacity='0.44'/%3E%3Crect x='49.5' y='17.5' width='13.0' height='13.0' fill='%23c9a13b' opacity='0.65'/%3E%3Crect x='65.5' y='17.5' width='13.0' height='13.0' fill='%236b6a3a' opacity='0.51'/%3E%3Crect x='81.5' y='17.5' width='13.0' height='13.0' fill='%236b6a3a' opacity='0.67'/%3E%3Crect x='1.5' y='33.5' width='13.0' height='13.0' fill='%239a8f4a' opacity='0.66'/%3E%3Crect x='17.5' y='33.5' width='13.0' height='13.0' fill='%233a2f18' opacity='0.41'/%3E%3Crect x='33.5' y='33.5' width='13.0' height='13.0' fill='%238a6a28' opacity='0.43'/%3E%3Crect x='49.5' y='33.5' width='13.0' height='13.0' fill='%23c9a13b' opacity='0.41'/%3E%3Crect x='65.5' y='33.5' width='13.0' height='13.0' fill='%238a6a28' opacity='0.4'/%3E%3Crect x='81.5' y='33.5' width='13.0' height='13.0' fill='%233a2f18' opacity='0.48'/%3E%3Crect x='1.5' y='49.5' width='13.0' height='13.0' fill='%233a2f18' opacity='0.59'/%3E%3Crect x='17.5' y='49.5' width='13.0' height='13.0' fill='%238a6a28' opacity='0.7'/%3E%3Crect x='33.5' y='49.5' width='13.0' height='13.0' fill='%239a8f4a' opacity='0.63'/%3E%3Crect x='49.5' y='49.5' width='13.0' height='13.0' fill='%233a2f18' opacity='0.67'/%3E%3Crect x='65.5' y='49.5' width='13.0' height='13.0' fill='%236b6a3a' opacity='0.63'/%3E%3Crect x='81.5' y='49.5' width='13.0' height='13.0' fill='%236b6a3a' opacity='0.48'/%3E%3Crect x='1.5' y='65.5' width='13.0' height='13.0' fill='%239a8f4a' opacity='0.41'/%3E%3Crect x='17.5' y='65.5' width='13.0' height='13.0' fill='%239a8f4a' opacity='0.6'/%3E%3Crect x='33.5' y='65.5' width='13.0' height='13.0' fill='%239a8f4a' opacity='0.58'/%3E%3Crect x='49.5' y='65.5' width='13.0' height='13.0' fill='%238a6a28' opacity='0.52'/%3E%3Crect x='65.5' y='65.5' width='13.0' height='13.0' fill='%239a8f4a' opacity='0.53'/%3E%3Crect x='81.5' y='65.5' width='13.0' height='13.0' fill='%236b6a3a' opacity='0.58'/%3E%3Crect x='1.5' y='81.5' width='13.0' height='13.0' fill='%239a8f4a' opacity='0.66'/%3E%3Crect x='17.5' y='81.5' width='13.0' height='13.0' fill='%239a8f4a' opacity='0.47'/%3E%3Crect x='33.5' y='81.5' width='13.0' height='13.0' fill='%233a2f18' opacity='0.6'/%3E%3Crect x='49.5' y='81.5' width='13.0' height='13.0' fill='%239a8f4a' opacity='0.58'/%3E%3Crect x='65.5' y='81.5' width='13.0' height='13.0' fill='%236b6a3a' opacity='0.64'/%3E%3Crect x='81.5' y='81.5' width='13.0' height='13.0' fill='%238a6a28' opacity='0.66'/%3E%3Cline x1='46.5' y1='8.0' x2='49.5' y2='8.0' stroke='%236b6a3a' stroke-width='1' opacity='0.5'/%3E%3Cline x1='78.5' y1='24.0' x2='81.5' y2='24.0' stroke='%238a6a28' stroke-width='1' opacity='0.5'/%3E%3Cline x1='14.5' y1='40.0' x2='17.5' y2='40.0' stroke='%236b6a3a' stroke-width='1' opacity='0.5'/%3E%3Cline x1='62.5' y1='40.0' x2='65.5' y2='40.0' stroke='%236b6a3a' stroke-width='1' opacity='0.5'/%3E%3Cline x1='30.5' y1='56.0' x2='33.5' y2='56.0' stroke='%23c9a13b' stroke-width='1' opacity='0.5'/%3E%3Cline x1='46.5' y1='56.0' x2='49.5' y2='56.0' stroke='%23c9a13b' stroke-width='1' opacity='0.5'/%3E%3Cline x1='62.5' y1='56.0' x2='65.5' y2='56.0' stroke='%238a6a28' stroke-width='1' opacity='0.5'/%3E%3Cline x1='46.5' y1='72.0' x2='49.5' y2='72.0' stroke='%236b6a3a' stroke-width='1' opacity='0.5'/%3E%3Cline x1='62.5' y1='72.0' x2='65.5' y2='72.0' stroke='%238a6a28' stroke-width='1' opacity='0.5'/%3E%3Cline x1='14.5' y1='88.0' x2='17.5' y2='88.0' stroke='%23c9a13b' stroke-width='1' opacity='0.5'/%3E%3Cline x1='30.5' y1='88.0' x2='33.5' y2='88.0' stroke='%236b6a3a' stroke-width='1' opacity='0.5'/%3E%3Cline x1='46.5' y1='88.0' x2='49.5' y2='88.0' stroke='%23c9a13b' stroke-width='1' opacity='0.5'/%3E%3Cline x1='62.5' y1='88.0' x2='65.5' y2='88.0' stroke='%23c9a13b' stroke-width='1' opacity='0.5'/%3E%3Cline x1='78.5' y1='88.0' x2='81.5' y2='88.0' stroke='%23c9a13b' stroke-width='1' opacity='0.5'/%3E%3C/svg%3E");
    --surface-cpu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='110'%3E%3Crect width='110' height='110' fill='%2313100a'/%3E%3Crect x='69' y='16' width='15' height='26' fill='%236b6a3a' opacity='0.62'/%3E%3Crect x='74' y='8' width='23' height='28' fill='%233a2f18' opacity='0.3'/%3E%3Crect x='70' y='29' width='23' height='16' fill='%238a6a28' opacity='0.65'/%3E%3Crect x='70' y='60' width='23' height='25' fill='%239a8f4a' opacity='0.52'/%3E%3Crect x='81' y='19' width='12' height='15' fill='%233a2f18' opacity='0.44'/%3E%3Crect x='20' y='97' width='8' height='10' fill='%233a2f18' opacity='0.31'/%3E%3Crect x='60' y='76' width='8' height='16' fill='%239a8f4a' opacity='0.55'/%3E%3Crect x='73' y='56' width='21' height='20' fill='%238a6a28' opacity='0.61'/%3E%3Crect x='17' y='63' width='11' height='9' fill='%238a6a28' opacity='0.39'/%3E%3Crect x='38' y='53' width='21' height='28' fill='%233a2f18' opacity='0.59'/%3E%3Crect x='68' y='74' width='26' height='19' fill='%239a8f4a' opacity='0.5'/%3E%3Crect x='35' y='77' width='18' height='8' fill='%238a6a28' opacity='0.54'/%3E%3Crect x='73' y='72' width='18' height='25' fill='%23c9a13b' opacity='0.55'/%3E%3Crect x='73' y='34' width='14' height='28' fill='%236b6a3a' opacity='0.34'/%3E%3Crect x='61' y='11' width='23' height='28' fill='%236b6a3a' opacity='0.58'/%3E%3Crect x='2' y='37' width='21' height='12' fill='%239a8f4a' opacity='0.57'/%3E%3Crect x='77' y='78' width='11' height='9' fill='%23c9a13b' opacity='0.43'/%3E%3Crect x='70' y='35' width='26' height='18' fill='%233a2f18' opacity='0.38'/%3E%3Crect x='0' y='9' width='9' height='17' fill='%23c9a13b' opacity='0.51'/%3E%3Crect x='52' y='37' width='9' height='14' fill='%233a2f18' opacity='0.39'/%3E%3Crect x='40' y='46' width='9' height='18' fill='%238a6a28' opacity='0.61'/%3E%3Crect x='58' y='66' width='20' height='20' fill='%239a8f4a' opacity='0.53'/%3E%3Cline x1='71' y1='0' x2='71' y2='110' stroke='%23c9a13b' stroke-width='1' opacity='0.25'/%3E%3Cline x1='103' y1='0' x2='103' y2='110' stroke='%233a2f18' stroke-width='1' opacity='0.25'/%3E%3Cline x1='0' y1='81' x2='110' y2='81' stroke='%238a6a28' stroke-width='1' opacity='0.25'/%3E%3Cline x1='55' y1='0' x2='55' y2='110' stroke='%236b6a3a' stroke-width='1' opacity='0.25'/%3E%3Cline x1='70' y1='0' x2='70' y2='110' stroke='%236b6a3a' stroke-width='1' opacity='0.25'/%3E%3Cline x1='0' y1='53' x2='110' y2='53' stroke='%233a2f18' stroke-width='1' opacity='0.25'/%3E%3C/svg%3E");
    --surface-vlsi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Crect width='150' height='150' fill='%2313100a'/%3E%3Crect x='13' y='92' width='35' height='39' fill='%239a8f4a' opacity='0.47'/%3E%3Crect x='2' y='51' width='25' height='24' fill='%233a2f18' opacity='0.62'/%3E%3Crect x='92' y='35' width='23' height='34' fill='%238a6a28' opacity='0.59'/%3E%3Crect x='3' y='106' width='36' height='33' fill='%236b6a3a' opacity='0.58'/%3E%3Crect x='39' y='37' width='32' height='30' fill='%236b6a3a' opacity='0.33'/%3E%3Crect x='64' y='31' width='41' height='44' fill='%238a6a28' opacity='0.39'/%3E%3Crect x='104' y='110' width='37' height='25' fill='%233a2f18' opacity='0.59'/%3E%3Crect x='79' y='108' width='20' height='38' fill='%233a2f18' opacity='0.37'/%3E%3Crect x='55' y='57' width='47' height='38' fill='%238a6a28' opacity='0.38'/%3E%3Crect x='10' y='11' width='36' height='22' fill='%239a8f4a' opacity='0.52'/%3E%3Crect x='68' y='82' width='37' height='53' fill='%239a8f4a' opacity='0.55'/%3E%3Crect x='8' y='52' width='29' height='32' fill='%238a6a28' opacity='0.52'/%3E%3Crect x='23' y='45' width='48' height='37' fill='%239a8f4a' opacity='0.56'/%3E%3Crect x='25' y='41' width='40' height='55' fill='%23c9a13b' opacity='0.59'/%3E%3Cline x1='71' y1='0' x2='71' y2='150' stroke='%233a2f18' stroke-width='1' opacity='0.25'/%3E%3Cline x1='60' y1='0' x2='60' y2='150' stroke='%23c9a13b' stroke-width='1' opacity='0.25'/%3E%3Cline x1='0' y1='45' x2='150' y2='45' stroke='%236b6a3a' stroke-width='1' opacity='0.25'/%3E%3C/svg%3E");
    --surface-popup-l1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Crect width='90' height='90' fill='%2313100a'/%3E%3Crect x='47' y='45' width='29' height='18' fill='%233a2f18' opacity='0.31'/%3E%3Crect x='6' y='20' width='24' height='17' fill='%23c9a13b' opacity='0.43'/%3E%3Crect x='69' y='13' width='17' height='22' fill='%233a2f18' opacity='0.39'/%3E%3Crect x='35' y='23' width='16' height='23' fill='%239a8f4a' opacity='0.36'/%3E%3Crect x='56' y='16' width='12' height='14' fill='%238a6a28' opacity='0.3'/%3E%3Crect x='27' y='21' width='10' height='16' fill='%238a6a28' opacity='0.4'/%3E%3Crect x='26' y='23' width='16' height='27' fill='%238a6a28' opacity='0.64'/%3E%3Crect x='2' y='46' width='22' height='19' fill='%239a8f4a' opacity='0.36'/%3E%3Crect x='8' y='42' width='14' height='18' fill='%236b6a3a' opacity='0.59'/%3E%3Crect x='38' y='43' width='28' height='10' fill='%23c9a13b' opacity='0.41'/%3E%3Crect x='40' y='23' width='19' height='25' fill='%239a8f4a' opacity='0.47'/%3E%3Crect x='32' y='2' width='15' height='11' fill='%236b6a3a' opacity='0.6'/%3E%3Crect x='53' y='46' width='10' height='27' fill='%239a8f4a' opacity='0.5'/%3E%3Crect x='5' y='23' width='10' height='24' fill='%233a2f18' opacity='0.63'/%3E%3Crect x='31' y='59' width='16' height='13' fill='%236b6a3a' opacity='0.48'/%3E%3Crect x='59' y='13' width='26' height='18' fill='%233a2f18' opacity='0.56'/%3E%3Crect x='4' y='55' width='21' height='19' fill='%23c9a13b' opacity='0.37'/%3E%3Crect x='46' y='58' width='26' height='29' fill='%238a6a28' opacity='0.42'/%3E%3Crect x='39' y='40' width='27' height='12' fill='%236b6a3a' opacity='0.36'/%3E%3Crect x='19' y='46' width='12' height='30' fill='%236b6a3a' opacity='0.65'/%3E%3Cline x1='0' y1='6' x2='90' y2='6' stroke='%23c9a13b' stroke-width='1' opacity='0.25'/%3E%3Cline x1='68' y1='0' x2='68' y2='90' stroke='%239a8f4a' stroke-width='1' opacity='0.25'/%3E%3Cline x1='0' y1='76' x2='90' y2='76' stroke='%236b6a3a' stroke-width='1' opacity='0.25'/%3E%3Cline x1='58' y1='0' x2='58' y2='90' stroke='%239a8f4a' stroke-width='1' opacity='0.25'/%3E%3Cline x1='0' y1='81' x2='90' y2='81' stroke='%23c9a13b' stroke-width='1' opacity='0.25'/%3E%3C/svg%3E");
    --surface-popup-l2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='55' height='55'%3E%3Crect width='55' height='55' fill='%2313100a'/%3E%3Crect x='31' y='48' width='14' height='6' fill='%236b6a3a' opacity='0.31'/%3E%3Crect x='37' y='30' width='7' height='15' fill='%236b6a3a' opacity='0.41'/%3E%3Crect x='31' y='12' width='5' height='9' fill='%239a8f4a' opacity='0.62'/%3E%3Crect x='6' y='12' width='13' height='15' fill='%233a2f18' opacity='0.49'/%3E%3Crect x='39' y='43' width='16' height='9' fill='%23c9a13b' opacity='0.6'/%3E%3Crect x='23' y='26' width='10' height='6' fill='%236b6a3a' opacity='0.46'/%3E%3Crect x='44' y='40' width='6' height='8' fill='%236b6a3a' opacity='0.33'/%3E%3Crect x='12' y='41' width='5' height='14' fill='%236b6a3a' opacity='0.47'/%3E%3Crect x='36' y='41' width='8' height='13' fill='%233a2f18' opacity='0.64'/%3E%3Crect x='23' y='15' width='5' height='15' fill='%233a2f18' opacity='0.45'/%3E%3Crect x='7' y='5' width='10' height='14' fill='%233a2f18' opacity='0.61'/%3E%3Crect x='7' y='38' width='13' height='8' fill='%236b6a3a' opacity='0.41'/%3E%3Crect x='30' y='14' width='8' height='11' fill='%238a6a28' opacity='0.51'/%3E%3Crect x='0' y='12' width='16' height='13' fill='%238a6a28' opacity='0.31'/%3E%3Crect x='42' y='39' width='10' height='13' fill='%233a2f18' opacity='0.41'/%3E%3Crect x='24' y='18' width='11' height='13' fill='%238a6a28' opacity='0.54'/%3E%3Crect x='11' y='27' width='12' height='5' fill='%233a2f18' opacity='0.56'/%3E%3Crect x='28' y='15' width='11' height='6' fill='%23c9a13b' opacity='0.61'/%3E%3Crect x='28' y='24' width='15' height='12' fill='%23c9a13b' opacity='0.48'/%3E%3Crect x='26' y='5' width='12' height='9' fill='%238a6a28' opacity='0.56'/%3E%3Crect x='31' y='11' width='9' height='12' fill='%23c9a13b' opacity='0.31'/%3E%3Crect x='37' y='23' width='6' height='9' fill='%238a6a28' opacity='0.39'/%3E%3Crect x='33' y='16' width='12' height='10' fill='%239a8f4a' opacity='0.62'/%3E%3Crect x='31' y='17' width='11' height='14' fill='%233a2f18' opacity='0.47'/%3E%3Cline x1='0' y1='9' x2='55' y2='9' stroke='%239a8f4a' stroke-width='1' opacity='0.25'/%3E%3Cline x1='0' y1='40' x2='55' y2='40' stroke='%239a8f4a' stroke-width='1' opacity='0.25'/%3E%3Cline x1='0' y1='42' x2='55' y2='42' stroke='%238a6a28' stroke-width='1' opacity='0.25'/%3E%3Cline x1='39' y1='0' x2='39' y2='55' stroke='%239a8f4a' stroke-width='1' opacity='0.25'/%3E%3Cline x1='17' y1='0' x2='17' y2='55' stroke='%236b6a3a' stroke-width='1' opacity='0.25'/%3E%3Cline x1='31' y1='0' x2='31' y2='55' stroke='%238a6a28' stroke-width='1' opacity='0.25'/%3E%3Cline x1='18' y1='0' x2='18' y2='55' stroke='%233a2f18' stroke-width='1' opacity='0.25'/%3E%3Cline x1='0' y1='28' x2='55' y2='28' stroke='%23c9a13b' stroke-width='1' opacity='0.25'/%3E%3C/svg%3E");
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {

    background-color: var(--bg-color);
    background-image: var(--surface-vlsi);
    background-size: 300px 300px;
    background-blend-mode: screen;

    color: var(--text-color);

    font-family: var(--font-body);

    min-height: 100vh;

    overflow-x: hidden;

    position: relative;
}

/* The page background uses the calmer, larger-grained surface texture
   (same family as the die-blocks, just the least busy variant) at a
   much lower opacity, so it reads as ambient material rather than
   competing with foreground content. A thin scrim sits between the
   pattern and the body's own children to keep that restraint even
   where elements don't have their own opaque background. */
body::before {

    content: "";

    position: fixed;

    inset: 0;

    background: rgba(2,6,23,0.86);

    pointer-events: none;

    z-index: -2;
}

/* ==================================================
   SCAN CHAIN CANVAS
   Sized and positioned in JS to hug the pad-ring's
   own boundary. Sits behind the pad-ring's translucent
   background, so the trace reads as a faint signal
   glowing beneath the package surface.
================================================== */

#network-canvas {

    position: absolute;

    top: 0;
    left: 0;

    pointer-events: none;

    z-index: -1;
}

/* ==================================================
   HERO
================================================== */

.hero {

    text-align: center;

    padding-top: 50px;
    padding-bottom: 30px;

    position: relative;
    z-index: 5;
}

.hero h1 {

    font-family: var(--font-display);

    font-size: 3rem;
    letter-spacing: 4px;

    color: var(--glow-color);

    text-shadow:
        0 0 10px var(--glow-color),
        0 0 30px rgba(0,210,255,0.3);
}

.subtitle {

    margin-top: 12px;

    color: var(--muted-text);

    font-size: 1rem;
}

.hero-links {

    display: flex;

    justify-content: center;
    flex-wrap: wrap;

    gap: 12px;

    margin-top: 25px;
}

.hero-links a {

    font-family: var(--font-display);

    color: var(--glow-color);

    text-decoration: none;

    padding: 10px 18px;

    border: 1px solid var(--glow-color);

    transition: var(--transition-speed);

    border-radius: 6px;
}

.hero-links a:hover {

    background: var(--glow-color);

    color: black;

    box-shadow:
        0 0 20px var(--glow-color);
}

/* ==================================================
   PAD RING
================================================== */

.pad-ring {

    width: min(1400px, 95%);

    margin: auto;

    margin-top: 20px;

    padding: 30px;

    border: 14px solid var(--pad-color);

    position: relative;

    background:
        linear-gradient(
            135deg,
            rgba(15,23,42,0.85),
            rgba(2,6,23,0.95)
        );

    box-shadow:
        0 0 25px rgba(0,0,0,0.5),
        inset 0 0 25px rgba(255,255,255,0.03);
}

.pad-ring::before {

    content: "";

    position: absolute;

    inset: 10px;

    border: 2px dashed rgba(255,255,255,0.08);

    pointer-events: none;
}

/* ==================================================
   CHIP LABEL
================================================== */

.chip-label {

    font-family: var(--font-display);

    text-align: center;

    margin-bottom: 25px;

    color: var(--glow-color);

    letter-spacing: 2px;

    font-size: 0.9rem;
}

/* ==================================================
   CHIP DIE
================================================== */

.chip-die {

    position: relative;

    display: grid;

    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;

    /* A narrow routing channel, not generous card-grid whitespace --
       real floorplans don't leave empty space between macros, the
       gap is exactly wide enough to show the interconnect fabric
       running through it. */
    gap: 28px;

    min-height: 650px;

    padding: 40px;
}

/* ==================================================
   ROUTING FABRIC (NoC + bus interconnect)
   Each connection is a real multi-bit bus, not a bare
   wire: a thicker trace plus a slash-and-width tag,
   the standard schematic symbol for an n-bit bus.
   Traces flow on hover (via :has(), no JS needed) and
   persist flowing in amber while their section's popup
   is open.
================================================== */

.die-routing {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    pointer-events: none;

    z-index: 1;
}

.trace {

    fill: none;

    stroke: var(--trace-color);
    stroke-width: 5;
    stroke-linecap: round;
    stroke-dasharray: 11 8;

    opacity: 0.45;

    filter: drop-shadow(0 0 4px rgba(34,211,238,0.45));

    transition: opacity 0.3s ease, stroke 0.3s ease;
}

.bus-tag line {

    stroke: var(--muted-text);
    stroke-width: 2;

    opacity: 0.6;

    transition: stroke 0.3s ease, opacity 0.3s ease;
}

.bus-tag text {

    font-family: var(--font-display);

    font-size: 13px;

    fill: var(--muted-text);

    opacity: 0.7;

    transition: fill 0.3s ease, opacity 0.3s ease;
}

/* Hover-driven flow: hovering a die-block lights up its
   own bus without needing any JS event wiring. */

.chip-die:has(.cpu-core:hover) #trace-experience,
.chip-die:has(.memory-subsystem:hover) #trace-education,
.chip-die:has(.project-cluster:hover) #trace-projects,
.chip-die:has(.accelerator-cluster:hover) #trace-competitions {

    opacity: 0.9;

    stroke: var(--glow-color);

    animation: trace-flow 1s linear infinite;
}

.chip-die:has(.cpu-core:hover) #bustag-experience line,
.chip-die:has(.memory-subsystem:hover) #bustag-education line,
.chip-die:has(.project-cluster:hover) #bustag-projects line,
.chip-die:has(.accelerator-cluster:hover) #bustag-competitions line {
    stroke: var(--glow-color);
    opacity: 1;
}

.chip-die:has(.cpu-core:hover) #bustag-experience text,
.chip-die:has(.memory-subsystem:hover) #bustag-education text,
.chip-die:has(.project-cluster:hover) #bustag-projects text,
.chip-die:has(.accelerator-cluster:hover) #bustag-competitions text {
    fill: var(--glow-color);
    opacity: 1;
}

/* Persistent active state: this section's popup is open. Wins
   over the hover rules above by appearing later in the file. */

.trace.active-trace {

    stroke: var(--accent-active);

    opacity: 1;

    filter: drop-shadow(0 0 9px var(--accent-active));

    animation: trace-flow 1.1s linear infinite;
}

.bus-tag.active-tag line {
    stroke: var(--accent-active);
    opacity: 1;
}

.bus-tag.active-tag text {
    fill: var(--accent-active);
    opacity: 1;
}

@keyframes trace-flow {

    to {
        stroke-dashoffset: -38;
    }
}

.noc-block {

    position: absolute;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    width: 140px;

    padding: 14px 10px;

    text-align: center;

    background:
        linear-gradient(
            145deg,
            #111827,
            #0a0f1c
        );

    border: 1px solid rgba(0,210,255,0.35);

    border-radius: 4px;

    z-index: 2;

    box-shadow: 0 0 18px rgba(0,210,255,0.15);
}

.noc-block h3 {

    font-family: var(--font-display);

    font-size: 0.85rem;

    color: var(--glow-color);

    letter-spacing: 1px;
}

.noc-block span {

    display: block;

    margin-top: 4px;

    font-family: var(--font-display);

    font-size: 0.6rem;

    color: var(--muted-text);

    letter-spacing: 0.5px;
}

/* ==================================================
   DIE BLOCKS
   Restructured around a hand-drawn circuit-element icon:
   small reference-designator eyebrow, icon, then the
   plain-English label ("Experience") as the prominent text.
================================================== */

.die-block {

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    /* A dark scrim layered over that block's own die-surface texture
       -- keeps the resume text legible while still letting the real
       macro texture read clearly, especially at the block's edges. */
    background-image:
        linear-gradient(165deg, rgba(8,10,6,0.82), rgba(4,5,3,0.9)),
        var(--surface-cpu);
    background-size: 100% 100%, 64px 64px;

    border: 1px solid rgba(0,210,255,0.16);

    padding: 24px;

    cursor: pointer;

    position: relative;

    z-index: 2;

    transition: filter 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;

    overflow: hidden;

    font-family: inherit;

    text-align: left;

    width: 100%;
}

/* Each block gets its own authentic macro texture -- a real die photo
   shows visibly different regions for different circuit types, not
   one pattern tiled uniformly across the whole surface. */

.cpu-core {
    background-image:
        linear-gradient(165deg, rgba(8,10,6,0.82), rgba(4,5,3,0.9)),
        var(--surface-cpu);
    background-size: 100% 100%, 80px 80px;
}

.memory-subsystem {
    background-image:
        linear-gradient(165deg, rgba(8,10,6,0.82), rgba(4,5,3,0.9)),
        var(--surface-memory);
    background-size: 100% 100%, 48px 48px;
}

.project-cluster {
    background-image:
        linear-gradient(165deg, rgba(8,10,6,0.82), rgba(4,5,3,0.9)),
        var(--surface-vlsi);
    background-size: 100% 100%, 150px 150px;
}

.accelerator-cluster {
    background-image:
        linear-gradient(165deg, rgba(8,10,6,0.82), rgba(4,5,3,0.9)),
        var(--surface-accelerator);
    background-size: 100% 100%, 96px 96px;
}

.die-block::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,0.03),
            transparent
        );

    transform: translateX(-100%);
}

.die-block:hover::before {

    transform: translateX(100%);

    transition: 0.8s;
}

/* Hover/focus reads as "this region is energized," not "this card
   lifted off the surface" -- no translateY, since a floating card
   breaks the continuous-chip illusion. Brightness + border-glow
   instead. */
.die-block:hover,
.die-block:focus-visible {

    filter: brightness(1.2) saturate(1.15);

    border-color: var(--glow-color);

    box-shadow:
        0 0 28px rgba(0,210,255,0.3);
}

.die-block.selected {

    border-color: var(--accent-active);

    box-shadow:
        0 0 25px var(--accent-active-glow),
        inset 0 0 15px rgba(245,158,11,0.08);
}

.die-tag {

    font-family: var(--font-display);

    font-size: 0.68rem;

    letter-spacing: 1px;

    color: var(--muted-text);

    opacity: 0.65;

    margin-bottom: 14px;
}

.die-icon {

    width: 58px;
    height: 58px;

    color: var(--glow-color);

    stroke: var(--glow-color);
    stroke-width: 2;
    fill: none;

    margin-bottom: 16px;

    transition: stroke 0.25s ease, color 0.25s ease;
}

.die-block:hover .die-icon,
.die-block:focus-visible .die-icon {
    stroke: var(--text-color);
    color: var(--text-color);
}

.die-block.selected .die-icon {
    stroke: var(--accent-active);
    color: var(--accent-active);
}

.die-block h2 {

    font-family: var(--font-display);

    color: var(--glow-color);

    margin-bottom: 10px;

    font-size: 1.4rem;
}

.block-meta {

    display: inline-block;

    font-family: var(--font-display);

    color: var(--muted-text);

    font-size: 0.8rem;

    margin-bottom: 15px;
}

.die-block p {

    color: var(--text-color);

    line-height: 1.6;
}

.coord-tag {

    position: absolute;

    top: 12px;
    right: 16px;

    font-family: var(--font-display);

    font-size: 0.65rem;

    letter-spacing: 1px;

    color: var(--muted-text);

    opacity: 0.55;
}

/* ==================================================
   BLOCK POSITIONS
================================================== */

.cpu-core {
    grid-column: 1;
    grid-row: 1;
}

.memory-subsystem {
    grid-column: 2;
    grid-row: 1;
}

.project-cluster {
    grid-column: 1;
    grid-row: 2;
}

.accelerator-cluster {
    grid-column: 2;
    grid-row: 2;
}

/* ==================================================
   MODAL: BACKDROP + PANEL
   One shared popup shell for every category. The GDSII
   pattern is the panel's outer texture; the inner body
   sits on its own near-solid surface so the resume
   content underneath stays comfortably legible.
================================================== */

.modal-backdrop {

    position: fixed;

    inset: 0;

    background: rgba(2,6,23,0.78);

    backdrop-filter: blur(4px);

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 24px;

    z-index: 100;

    opacity: 0;

    pointer-events: none;

    transition: opacity 0.25s ease;
}

.modal-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}

.modal-panel {

    width: min(640px, 100%);

    max-height: min(720px, 90vh);

    display: flex;
    flex-direction: column;

    background-color: var(--die-inner);
    background-image: var(--surface-popup-l1);
    background-size: 180px 180px;

    border: 1px solid rgba(0,210,255,0.3);

    box-shadow: 0 0 50px rgba(0,210,255,0.12);

    /* Default entrance for the no-FLIP-source case (e.g. opening
       straight from a #hash link, where there's no clicked block to
       zoom from). When script.js runs a FLIP transition, it sets
       transform/transition via inline style, which simply takes
       precedence over this while it's doing its own animation. */
    transform: translateY(14px) scale(0.98);

    transition: transform 0.25s ease;
}

.modal-backdrop.open .modal-panel {
    transform: translateY(0) scale(1);
}

.modal-header {

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 16px;

    padding: 18px 22px;

    border-bottom: 1px solid rgba(0,210,255,0.2);

    background: rgba(2,6,23,0.55);
}

.modal-header-text h2 {

    font-family: var(--font-display);

    font-size: 1.1rem;

    color: var(--glow-color);

    letter-spacing: 1px;
}

.modal-header-text span {

    display: block;

    margin-top: 4px;

    font-family: var(--font-display);

    font-size: 0.7rem;

    color: var(--muted-text);

    letter-spacing: 0.5px;
}

.modal-close {

    flex-shrink: 0;

    width: 34px;
    height: 34px;

    border: 1px solid rgba(0,210,255,0.35);

    background: transparent;

    color: var(--glow-color);

    font-family: var(--font-display);

    font-size: 1rem;

    cursor: pointer;

    transition: 0.25s;
}

.modal-close:hover,
.modal-close:focus-visible {
    background: var(--glow-color);
    color: black;
}

.modal-body {

    overflow-y: auto;

    padding: 22px;

    background-color: var(--modal-surface);
    background-image: linear-gradient(165deg, rgba(5,9,18,0.88), rgba(5,9,18,0.92));
}

/* Drilling into an item swaps in a finer, denser texture than the
   category list -- the same "zoom in further" cue as a real layout
   viewer, applied to a second level of depth instead of just one. */
.modal-body.depth-2 {
    background-image:
        linear-gradient(165deg, rgba(5,9,18,0.86), rgba(5,9,18,0.92)),
        var(--surface-popup-l2);
    background-size: 100% 100%, 90px 90px;
}

/* ==================================================
   MODAL: ITEM LIST (category -> items)
================================================== */

.item-list {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));

    gap: 12px;
}

.item-btn {

    font-family: var(--font-display);

    font-size: 0.95rem;

    text-align: left;

    color: var(--text-color);

    background-color: rgba(255,255,255,0.02);
    background-image: linear-gradient(165deg, rgba(8,10,6,0.78), rgba(4,5,3,0.85));
    background-size: 100% 100%;

    border: 1px solid rgba(0,210,255,0.25);

    padding: 16px;

    cursor: pointer;

    transition: 0.2s;
}

/* Each category's item buttons pick up a faint slice of that same
   block's macro texture -- still "the same region," just a level
   deeper, rather than a generic unrelated list. */

.item-list.cat-experience .item-btn {
    background-image:
        linear-gradient(165deg, rgba(8,10,6,0.8), rgba(4,5,3,0.86)),
        var(--surface-cpu);
    background-size: 100% 100%, 60px 60px;
}

.item-list.cat-education .item-btn {
    background-image:
        linear-gradient(165deg, rgba(8,10,6,0.8), rgba(4,5,3,0.86)),
        var(--surface-memory);
    background-size: 100% 100%, 36px 36px;
}

.item-list.cat-projects .item-btn {
    background-image:
        linear-gradient(165deg, rgba(8,10,6,0.8), rgba(4,5,3,0.86)),
        var(--surface-vlsi);
    background-size: 100% 100%, 110px 110px;
}

.item-list.cat-competitions .item-btn {
    background-image:
        linear-gradient(165deg, rgba(8,10,6,0.8), rgba(4,5,3,0.86)),
        var(--surface-accelerator);
    background-size: 100% 100%, 70px 70px;
}

.item-btn:hover,
.item-btn:focus-visible {

    border-color: var(--glow-color);

    background: rgba(0,210,255,0.08);

    transform: translateY(-2px);
}

.item-btn span {

    display: block;

    margin-top: 6px;

    font-family: var(--font-body);

    font-size: 0.78rem;

    color: var(--muted-text);
}

/* ==================================================
   MODAL: ITEM DETAIL
================================================== */

.item-detail h3 {

    font-family: var(--font-display);

    font-size: 1.15rem;

    margin-bottom: 10px;

    letter-spacing: 0.5px;
}

.item-detail p {

    line-height: 1.7;

    color: var(--text-color);

    margin-bottom: 16px;
}

.item-detail-links {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 4px;
}

.modal-back-btn {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    font-family: var(--font-display);

    font-size: 0.78rem;

    color: var(--muted-text);

    background: transparent;

    border: none;

    cursor: pointer;

    margin-bottom: 18px;

    padding: 0;

    transition: color 0.2s ease;
}

.modal-back-btn:hover,
.modal-back-btn:focus-visible {
    color: var(--glow-color);
}

/* ==================================================
   SHARED BUTTONS / LINKS
   (reused inside modal content and elsewhere)
================================================== */

.action-btn {

    display: inline-block;

    font-family: var(--font-display);

    color: var(--glow-color);

    text-decoration: none;

    border: 1px solid var(--glow-color);

    padding: 10px 16px;

    transition: 0.3s;
}

.action-btn:hover,
.action-btn:focus-visible {

    background: var(--glow-color);

    color: black;
}

.action-btn.muted {

    color: var(--muted-text);

    border-color: rgba(148,163,184,0.4);
}

.action-btn.muted:hover,
.action-btn.muted:focus-visible {

    background: var(--muted-text);

    color: black;
}

/* ==================================================
   ACCESSIBILITY: FOCUS STATES
================================================== */

.die-block:focus-visible,
.hero-links a:focus-visible,
.action-btn:focus-visible,
.item-btn:focus-visible,
.modal-close:focus-visible,
.modal-back-btn:focus-visible {

    outline: 2px solid var(--glow-color);

    outline-offset: 3px;
}

/* ==================================================
   MOBILE
================================================== */

@media (max-width: 900px) {

    .chip-die {

        grid-template-columns: 1fr;

        grid-template-rows: auto;

        gap: 25px;

        padding: 20px;
    }

    .cpu-core,
    .memory-subsystem,
    .project-cluster,
    .accelerator-cluster {

        grid-column: auto;
        grid-row: auto;
    }

    .die-routing,
    .noc-block {
        display: none;
    }

    .hero h1 {
        font-size: 2rem;
    }

    .modal-panel {
        max-height: 100vh;
    }
}

/* ==================================================
   REDUCED MOTION
================================================== */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;

        scroll-behavior: auto !important;
    }
}