:root {            --bg-color: #f8f9fa;            --main-border: #000000;            --box-bg: rgba(255, 255, 255, 0.35);            --active-bg: rgba(0, 0, 0, 0.15);            --text-color: #000000;            --line-color: #000000;            --font-main: 'Times New Roman', Times, serif;            --glass-blur: blur(50px);            --glass-border: 1px solid rgba(0, 0, 0, 0.2);            --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);        }        body {            font-family: var(--font-main);            color: var(--text-color);            margin: 0;            padding: 0;            display: flex;            justify-content: center;            align-items: center;            width: 100vw;            min-height: 100vh;            overflow: hidden;            user-select: none;            background-color: #f4f7fa;            background-image:                linear-gradient(rgba(170, 180, 190, 0.25) 1px, transparent 1px),                linear-gradient(90deg, rgba(170, 180, 190, 0.25) 1px, transparent 1px);            background-size: 40px 40px;            background-position: center center;        }        .container {            position: absolute;            left: 50%;            top: 50%;            transform: translate(-50%, -50%);            width: 1450px;            height: 950px;            background: transparent;            border: none;            box-shadow: none;            margin: 0;            transition: left 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);        }        .circuit-wrapper {            position: absolute;            top: 40px;            left: 95px;            width: 1000px;            height: 800px;        }        #connections {            position: absolute;            top: 0;            left: 0;            width: 100%;            height: 100%;            pointer-events: none;            z-index: 1;            overflow: visible;        }        line,        polyline,        path {            stroke: var(--line-color);            stroke-width: 1.5;            fill: none;        }        .arrowhead {            fill: var(--line-color);        }        .alu-enclosure {            position: absolute;            top: 50px;            left: 200px;            width: 650px;            height: 700px;            border: 2px solid rgba(0, 0, 0, 0.3);            z-index: 2;            background: rgba(255, 255, 255, 0.15);            backdrop-filter: var(--glass-blur);            -webkit-backdrop-filter: var(--glass-blur);            border-radius: 16px;            box-shadow: var(--glass-shadow);        }        .block {            position: absolute;            background: rgba(200, 220, 255, 0.3);            border: 2px solid rgba(0, 0, 0, 0.25);            display: flex;            justify-content: center;            align-items: center;            font-weight: bold;            font-size: 1.2rem;            backdrop-filter: blur(8px);            -webkit-backdrop-filter: blur(8px);            border-radius: 12px;            box-shadow: var(--glass-shadow);            text-align: center;        }        .arithmetic-unit {            top: 20px;            left: 20px;            width: 400px;            height: 280px;        }        .logic-unit {            bottom: 20px;            left: 20px;            width: 400px;            height: 280px;        }        .multiplexer {            position: absolute;            right: 40px;            width: 100px;            height: 400px;            writing-mode: vertical-rl;            text-orientation: mixed;            transform: rotate(180deg);        }        .pill-shape {            background: rgba(255, 255, 255, 0.5);            border-radius: 20px;            padding: 10px 30px;            border: 1px solid rgba(0, 0, 0, 0.2);            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);            font-weight: normal;            backdrop-filter: blur(6px);            -webkit-backdrop-filter: blur(6px);        }        .io-node {            position: absolute;            font-size: 1rem;            cursor: pointer;            display: flex;            align-items: center;            gap: 5px;            z-index: 10;        }        .io-label {            font-weight: bold;        }        .io-value {            width: 25px;            height: 25px;            border: 1px solid var(--main-border);            display: flex;            justify-content: center;            align-items: center;            background: rgba(255, 255, 255, 0.6);            backdrop-filter: blur(4px);            -webkit-backdrop-filter: blur(4px);            transition: all 0.2s;            font-family: var(--font-main);            z-index: 10;            border-radius: 6px;        }        .input-group {            position: absolute;            background: rgba(230, 210, 240, 0.3);            border: 2px solid rgba(0, 0, 0, 0.2);            border-radius: 12px;            backdrop-filter: blur(10px);            -webkit-backdrop-filter: blur(10px);            box-shadow: var(--glass-shadow);            z-index: 1;            display: flex;            align-items: center;        }        .input-group-label {            position: absolute;            left: -80px;            font-weight: bold;            font-size: 1.2rem;            color: var(--text-color);            transform: rotate(-90deg);            letter-spacing: 2px;            text-transform: uppercase;        }        .group-a {            position: absolute;            left: 35px;            width: 80px;        }        .group-b {            position: absolute;            left: 35px;            width: 80px;        }        .group-s {            bottom: -55px;            left: 260px;            width: 320px;            height: 80px;        }        .group-s .input-group-label {            left: -30px;            top: 30px;        }        .io-value.active {            background: #000;            color: #fff;        }        .in-cin {            top: 30px;            left: 50px;        }        .in-a3,        .in-a2,        .in-a1,        .in-a0 {            left: 50px;        }        .in-b3,        .in-b2,        .in-b1,        .in-b0 {            left: 50px;        }        .in-m {            bottom: -40px;            left: 710px;            flex-direction: column;        }        .mode-big-btn {            width: 140px !important;            height: 40px !important;            font-size: 1rem !important;            letter-spacing: 2px;            background: #fff;            color: #000;        }        .io-value.mode-big-btn.active {            background: #000;            color: #fff;        }        .in-s3 {            bottom: -40px;            left: 288px;            flex-direction: column;        }        .in-s2 {            bottom: -40px;            left: 368px;            flex-direction: column;        }        .in-s1 {            bottom: -40px;            left: 448px;            flex-direction: column;        }        .in-s0 {            bottom: -40px;            left: 528px;            flex-direction: column;        }        .group-out {            position: absolute;            background: rgba(210, 235, 230, 0.3);            border: 2px solid rgba(0, 0, 0, 0.2);            border-radius: 12px;            backdrop-filter: blur(10px);            -webkit-backdrop-filter: blur(10px);            box-shadow: var(--glass-shadow);            z-index: 1;            display: flex;            align-items: center;        }        .group-out .input-group-label {            position: absolute;            bottom: -35px;            left: 50%;            transform: translateX(-50%);            font-weight: bold;            font-size: 1.2rem;            color: var(--text-color);            letter-spacing: 2px;            text-transform: uppercase;        }        .out-f-node {            flex-direction: column;        }        .hud {            position: absolute;            bottom: 20px;            left: 1140px;            border: 1px solid rgba(0, 0, 0, 0.2);            padding: 20px 22px;            background: rgba(255, 255, 255, 0.35);            backdrop-filter: blur(14px);            -webkit-backdrop-filter: blur(14px);            border-radius: 12px;            width: 240px;            z-index: 20;            box-shadow: var(--glass-shadow);            font-size: 1.3rem;        }        .hud-title {            font-weight: bold;            border-bottom: 1px solid #000;            margin-bottom: 15px;            padding-bottom: 5px;            text-align: center;            font-size: 1.5rem;        }        .hud-row {            display: flex;            justify-content: space-between;            margin-bottom: 10px;        }        .equation {            font-style: italic;            text-align: center;            margin-top: 15px;            font-size: 1.4rem;            border-top: 1px dashed #000;            padding-top: 10px;        }        path.pulse {            stroke-width: 2.5;            stroke-dasharray: 5, 5;            animation: dash 1s linear infinite;        }        @keyframes dash {            to {                stroke-dashoffset: -10;            }        }        svg {            position: absolute;        }        .page-header {            position: absolute;            top: 0;            left: 0;            width: 100%;            height: 70px;            display: flex;            align-items: center;            justify-content: center;            background: rgba(255, 255, 255, 0.25);            backdrop-filter: blur(24px);            -webkit-backdrop-filter: blur(24px);            border-bottom: 1px solid rgba(0, 0, 0, 0.15);            font-size: 2rem;            font-weight: bold;            color: var(--text-color);            letter-spacing: 5px;            z-index: 100;            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);        }        .page-footer {            position: absolute;            bottom: 20px;            width: 100%;            text-align: center;            font-size: 1rem;            color: var(--text-color);            letter-spacing: 2px;            z-index: 100;            opacity: 0.6;        }        .glass-btn {            position: absolute;            right: 40px;            background: rgba(255, 255, 255, 0.5);            border: 1px solid rgba(0, 0, 0, 0.2);            padding: 10px 20px;            border-radius: 8px;            font-family: var(--font-main);            font-weight: bold;            font-size: 1.1rem;            cursor: pointer;            backdrop-filter: blur(4px);            -webkit-backdrop-filter: blur(4px);            transition: all 0.2s;            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);        }        .glass-btn:hover {            background: rgba(255, 255, 255, 0.8);            transform: translateY(-2px);        }        .side-panel {            position: fixed;            top: 0;            right: -500px;            width: 450px;            height: 100vh;            background: rgba(235, 240, 245, 0.85);            backdrop-filter: var(--glass-blur);            -webkit-backdrop-filter: var(--glass-blur);            border-left: 2px solid rgba(0, 0, 0, 0.2);            box-shadow: -8px 0 32px rgba(0, 0, 0, 0.1);            z-index: 1000;            transition: right 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);            display: flex;            flex-direction: column;        }        .side-panel.open {            right: 0;        }        .panel-header {            display: flex;            justify-content: space-between;            align-items: center;            padding: 20px 30px;            border-bottom: 2px solid rgba(0, 0, 0, 0.1);            background: rgba(255, 255, 255, 0.4);        }        .panel-header h2 {            margin: 0;            font-size: 1.8rem;            letter-spacing: 2px;        }        .close-btn {            background: transparent;            border: none;            font-size: 2.5rem;            cursor: pointer;            color: var(--text-color);            line-height: 1;            transition: transform 0.2s;        }        .close-btn:hover {            transform: scale(1.2);        }        .panel-content {            flex: 1;            overflow-y: auto;            padding: 20px;        }        .panel-content h3 {            letter-spacing: 1px;            margin-bottom: 15px;            padding-bottom: 5px;            border-bottom: 1px dashed rgba(0, 0, 0, 0.3);        }        .truth-table {            width: 100%;            border-collapse: collapse;            margin-bottom: 40px;            background: rgba(255, 255, 255, 0.6);            border-radius: 8px;            overflow: hidden;            font-size: 0.9rem;            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);        }        .truth-table th,        .truth-table td {            border: 1px solid rgba(0, 0, 0, 0.3);            padding: 6px 4px;            text-align: center;        }        .truth-table th {            background: rgba(0, 0, 0, 0.15);            font-weight: bold;        }        .truth-table tbody tr:hover {            background: rgba(255, 255, 255, 0.9);        }        .panel-content::-webkit-scrollbar {            width: 10px;        }        .panel-content::-webkit-scrollbar-track {            background: rgba(0, 0, 0, 0.05);        }        .panel-content::-webkit-scrollbar-thumb {            background: rgba(0, 0, 0, 0.2);            border-radius: 5px;        }        .table-container {            display: none;        }        .theme-toggle-btn {            position: fixed;            bottom: 20px;            left: 20px;            z-index: 200;            background: transparent;            border: none;            width: 32px;            height: 32px;            cursor: pointer;            display: flex;            justify-content: center;            align-items: center;            color: var(--text-color);            padding: 0;            transition: all 0.2s;        }        .theme-toggle-btn:hover {            transform: scale(1.1);        }        .theme-toggle-btn svg {            width: 20px;            height: 20px;            fill: currentColor;            transition: transform 0.2s;        }        body.dark-mode {            --bg-color: #121212;            --main-border: rgba(255, 255, 255, 0.418);            --box-bg: #191919;            --active-bg: rgba(0, 0, 0, 0.35);            --text-color: #BBE1FA;            --line-color: #ffffff93;            background-color: var(--bg-color);            background-image:                linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),                linear-gradient(90deg, rgba(66, 66, 66, 0.08) 1px, transparent 1px);            color: var(--text-color);        }        body.dark-mode .alu-enclosure,        body.dark-mode .block,        body.dark-mode .input-group,        body.dark-mode .hud,        body.dark-mode .page-header,        body.dark-mode .truth-table,        body.dark-mode .side-panel {            background: var(--box-bg);            border-color: var(--main-border);            color: var(--text-color);            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);        }        body.dark-mode .panel-header {            background: rgba(30, 35, 45, 0.7);            border-bottom: 2px solid rgba(255, 255, 255, 0.1);        }        body.dark-mode .hud-title {            border-bottom: 1px solid var(--main-border);        }        body.dark-mode .equation {            border-top: 1px dashed var(--main-border);        }        body.dark-mode .truth-table th {            background: rgba(255, 255, 255, 0.1);        }        body.dark-mode .truth-table th,        body.dark-mode .truth-table td {            border-color: rgba(255, 255, 255, 0.15);        }        body.dark-mode .truth-table tbody tr:hover {            background: rgba(255, 255, 255, 0.1);        }        body.dark-mode .io-value {            background: rgba(40, 45, 55, 1);            border-color: rgba(255, 255, 255, 0.3);            color: var(--text-color);        }        body.dark-mode .io-value.active {            background: rgba(181, 244, 255, 0.3);            border-color: #88bbff;            color: #ffffff;            box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.5);        }        body.dark-mode .pill-shape {            background: rgba(40, 45, 55, 0.8);            border-color: rgba(255, 255, 255, 0.15);        }        body.dark-mode .glass-btn {            background: rgba(30, 35, 45, 0.65);            border-color: rgba(255, 255, 255, 0.2);            color: var(--text-color);        }        body.dark-mode .glass-btn:hover {            background: rgba(60, 70, 85, 0.8);        }        body.dark-mode circle {            fill: var(--text-color) !important;        }        body.dark-mode path.arrowhead {            fill: var(--line-color) !important;        }        body.dark-mode path,        body.dark-mode line,        body.dark-mode polyline {            stroke: var(--line-color);        }        .page-footer a { text-decoration: none; color: inherit; }