.cl-enigma-app{
            --bg: #1c1008;
            --bg-soft: #2a180e;
            --panel: rgba(42, 24, 14, 0.95);
            --panel-soft: rgba(58, 33, 20, 0.92);
            --ink: #fdfaf3;
            --muted: #d8c2ad;
            --accent: #dca757;
            --accent-strong: #fadb8a;
            --accent-cool: #e4c486;
            --border: rgba(220, 167, 87, 0.45);
            --shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
        }
.cl-enigma-app *{
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
.cl-enigma-app,
.cl-enigma-app{
            min-height: 100%;
        }
.cl-enigma-app{
            font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
            background:
                radial-gradient(circle at top, rgba(145, 80, 32, 0.22), transparent 36%),
                radial-gradient(circle at bottom right, rgba(220, 167, 87, 0.16), transparent 30%),
                linear-gradient(180deg, #180d07 0%, #24140c 50%, #1a0e08 100%);
            color: var(--ink);
            padding: 18px;
        }
.cl-enigma-app::before{
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            background-image:
                linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
            background-size: 26px 26px;
            opacity: 0.14;
        }
.cl-enigma-app.embedded{
            padding: 10px;
        }
.cl-enigma-app.overlay-mode{
            padding: 8px;
        }
.cl-enigma-app.overlay-mode .enigma-shell{
            max-width: 1680px;
            padding: 18px;
        }
.cl-enigma-app.overlay-mode .hero{
            margin-bottom: 14px;
        }
.cl-enigma-app.overlay-mode .hero-title{
            font-size: clamp(28px, 4vw, 42px);
        }
.cl-enigma-app.overlay-mode .hero-note{
            font-size: 14px;
            line-height: 1.55;
        }
.cl-enigma-app.overlay-mode .hero-side{
            min-width: 240px;
            gap: 10px;
        }
.cl-enigma-app.overlay-mode .mode-callout{
            margin-bottom: 14px;
            padding: 12px 14px;
        }
.cl-enigma-app.overlay-mode .status-card{
            padding: 12px 14px;
        }
.cl-enigma-app .enigma-shell{
            max-width: 1480px;
            margin: 0 auto;
            padding: 26px;
            border-radius: 30px;
            background:
                radial-gradient(circle at top left, rgba(165, 95, 45, 0.15), transparent 40%),
                linear-gradient(180deg, rgba(42, 24, 14, 0.98) 0%, rgba(30, 17, 10, 0.97) 100%);
            border: 2px solid rgba(220, 167, 87, 0.42);
            box-shadow: var(--shadow);
            position: relative;
            z-index: 1;
        }
.cl-enigma-app .hero{
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 18px;
            align-items: start;
            margin-bottom: 22px;
        }
.cl-enigma-app .hero-copy{
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
.cl-enigma-app .hero-kicker{
            font-size: 12px;
            letter-spacing: 0.28em;
            text-transform: uppercase;
            color: var(--accent-cool);
        }
.cl-enigma-app .hero-title{
            font-family: Georgia, "Times New Roman", serif;
            font-size: clamp(34px, 5vw, 54px);
            letter-spacing: 0.08em;
            color: var(--accent-strong);
            text-shadow: 0 0 20px rgba(246, 208, 122, 0.16);
        }
.cl-enigma-app .hero-note{
            max-width: 860px;
            color: var(--muted);
            font-size: 15px;
            line-height: 1.7;
        }
.cl-enigma-app .hero-side{
            min-width: 280px;
            display: grid;
            gap: 14px;
        }
.cl-enigma-app .lang-bar{
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-end;
            gap: 10px;
        }
.cl-enigma-app .lang-btn,
.cl-enigma-app .btn,
.cl-enigma-app .hero-nav-btn,
.cl-enigma-app .rotor-btn,
.cl-enigma-app .key,
.cl-enigma-app .plug{
            border: 1px solid rgba(215, 165, 77, 0.42);
            cursor: pointer;
            transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
        }
.cl-enigma-app .lang-btn:hover,
.cl-enigma-app .btn:hover,
.cl-enigma-app .rotor-btn:hover,
.cl-enigma-app .key:hover,
.cl-enigma-app .plug:hover{
            transform: translateY(-1px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
            border-color: rgba(246, 208, 122, 0.6);
        }
.cl-enigma-app .lang-btn{
            padding: 10px 16px;
            font-size: 14px;
            font-weight: 600;
            border-radius: 999px;
            background: linear-gradient(180deg, rgba(62, 38, 24, 0.95), rgba(42, 25, 15, 0.96));
            color: var(--ink);
        }
.cl-enigma-app .lang-btn.active{
            background: linear-gradient(180deg, rgba(246, 208, 122, 0.94), rgba(215, 165, 77, 0.95));
            color: #1b1207;
        }
.cl-enigma-app .status-card{
            padding: 16px 18px;
            border-radius: 22px;
            background: linear-gradient(180deg, rgba(44, 26, 16, 0.96), rgba(26, 15, 9, 0.96));
            border: 1px solid rgba(220, 167, 87, 0.24);
        }
.cl-enigma-app .status-row{
            display: flex;
            justify-content: space-between;
            gap: 16px;
            align-items: center;
        }
.cl-enigma-app .status-row + .status-row{
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px solid rgba(255, 255, 255, 0.06);
        }
.cl-enigma-app .rotor-error{ color: #ffd0c2; min-height: 1.4em; margin-top: 8px; }
.cl-enigma-app .hero-nav-btn{
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 44px;
            padding: 11px 14px;
            border-radius: 14px;
            background: linear-gradient(180deg, rgba(65, 40, 25, 0.98), rgba(38, 23, 14, 0.96));
            color: var(--ink);
            font-weight: 800;
            letter-spacing: 0.03em;
            text-decoration: none;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
        }
.cl-enigma-app .status-label{
            color: var(--muted);
            font-size: 13px;
        }
.cl-enigma-app .status-value{
            color: var(--accent-strong);
            font-size: 15px;
            font-weight: 700;
            letter-spacing: 0.12em;
        }
.cl-enigma-app .mode-callout{
            margin-bottom: 20px;
            padding: 16px 18px;
            border-radius: 22px;
            border: 1px solid rgba(220, 167, 87, 0.22);
            background: linear-gradient(135deg, rgba(45, 27, 17, 0.94), rgba(58, 35, 22, 0.88));
            color: var(--muted);
            line-height: 1.7;
        }
.cl-enigma-app .layout{
            display: grid;
            gap: 18px;
        }
.cl-enigma-app .two-col{
            display: grid;
            grid-template-columns: 1.35fr 1fr;
            gap: 18px;
        }
.cl-enigma-app .machine-top-grid{
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            gap: 16px;
            align-items: start;
        }
.cl-enigma-app .machine-shell-panel{
            display: grid;
            gap: 16px;
        }
.cl-enigma-app .machine-subpanel{
            padding: 14px;
            border-radius: 22px;
            background: linear-gradient(180deg, rgba(28, 16, 10, 0.95), rgba(36, 21, 13, 0.9));
            border: 1px solid rgba(215, 165, 77, 0.16);
        }
.cl-enigma-app .machine-subhead{
            display: flex;
            justify-content: space-between;
            gap: 14px;
            align-items: end;
            margin-bottom: 12px;
        }
.cl-enigma-app .machine-subhead h2{
            font-family: Georgia, "Times New Roman", serif;
            font-size: 20px;
            color: var(--accent-strong);
        }
.cl-enigma-app .machine-subhead p{
            color: var(--muted);
            font-size: 13px;
            line-height: 1.5;
            max-width: 620px;
        }
.cl-enigma-app .console-panel{
            display: grid;
            gap: 12px;
        }
.cl-enigma-app .console-text-grid{
            grid-template-columns: 1fr;
        }
.cl-enigma-app .console-text-grid .text-area{
            min-height: 96px;
        }
.cl-enigma-app .machine-bottom-grid{
            display: grid;
            grid-template-columns: minmax(0, 1.18fr) minmax(300px, 0.82fr);
            gap: 18px;
            align-items: start;
        }
.cl-enigma-app .machine-details{
            border-radius: 22px;
            background: rgba(26, 15, 9, 0.88);
            border: 1px solid rgba(215, 165, 77, 0.18);
            overflow: hidden;
        }
.cl-enigma-app .machine-details summary{
            list-style: none;
            cursor: pointer;
            padding: 14px 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 14px;
        }
.cl-enigma-app .machine-details summary::-webkit-details-marker{
            display: none;
        }
.cl-enigma-app .machine-summary-copy{
            display: grid;
            gap: 6px;
        }
.cl-enigma-app .machine-summary-title{
            font-family: Georgia, "Times New Roman", serif;
            font-size: 20px;
            color: var(--accent-strong);
        }
.cl-enigma-app .machine-summary-note{
            color: var(--muted);
            font-size: 13px;
            line-height: 1.5;
        }
.cl-enigma-app .machine-summary-toggle{
            color: var(--accent-cool);
            font-size: 13px;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            white-space: nowrap;
        }
.cl-enigma-app .machine-details[open] .machine-summary-toggle::after{
            content: " -";
        }
.cl-enigma-app .machine-details:not([open]) .machine-summary-toggle::after{
            content: " +";
        }
.cl-enigma-app .machine-details-body{
            padding: 0 16px 16px;
        }
.cl-enigma-app .panel{
            padding: 18px;
            border-radius: 26px;
            background: linear-gradient(180deg, var(--panel) 0%, var(--bg-soft) 100%);
            border: 1px solid rgba(215, 165, 77, 0.22);
        }
.cl-enigma-app .panel-head{
            display: flex;
            justify-content: space-between;
            align-items: end;
            gap: 18px;
            margin-bottom: 16px;
        }
.cl-enigma-app .panel-head h2{
            font-family: Georgia, "Times New Roman", serif;
            font-size: 22px;
            color: var(--accent-strong);
        }
.cl-enigma-app .panel-head p{
            color: var(--muted);
            font-size: 14px;
            line-height: 1.55;
            max-width: 720px;
        }
.cl-enigma-app .rotors-grid{
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 14px;
        }
.cl-enigma-app .rotor-card{
            padding: 16px;
            border-radius: 22px;
            background: linear-gradient(180deg, rgba(52, 32, 20, 0.96), rgba(36, 22, 14, 0.96));
            border: 1px solid rgba(215, 165, 77, 0.22);
        }
.cl-enigma-app .rotor-top{
            display: flex;
            justify-content: space-between;
            gap: 10px;
            align-items: start;
        }
.cl-enigma-app .rotor-top strong{
            color: var(--accent-strong);
            font-size: 16px;
        }
.cl-enigma-app .rotor-type{
            color: var(--accent-cool);
            font-size: 14px;
            font-weight: 700;
            letter-spacing: 0.12em;
        }
.cl-enigma-app .rotor-display{
            margin: 14px 0 12px;
            display: grid;
            grid-template-columns: 44px 1fr 44px;
            gap: 10px;
            align-items: center;
        }
.cl-enigma-app .rotor-window{
            text-align: center;
            padding: 14px 10px;
            border-radius: 18px;
            background: linear-gradient(180deg, rgba(18, 10, 6, 0.96), rgba(30, 17, 10, 0.98));
            border: 2px solid rgba(215, 165, 77, 0.45);
        }
.cl-enigma-app .rotor-letter{
            color: var(--accent-strong);
            font-size: 34px;
            font-weight: 700;
            letter-spacing: 0.12em;
        }
.cl-enigma-app .rotor-btn{
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: linear-gradient(180deg, rgba(82, 50, 31, 0.95), rgba(52, 32, 20, 0.95));
            color: #f7f1e3;
            font-size: 24px;
        }
.cl-enigma-app .rotor-controls{
            display: grid;
            gap: 10px;
        }
.cl-enigma-app .field-label{
            display: block;
            margin-bottom: 6px;
            color: var(--muted);
            font-size: 12px;
            letter-spacing: 0.05em;
            text-transform: uppercase;
        }
.cl-enigma-app .field-row{
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 10px;
            align-items: center;
        }
.cl-enigma-app .rotor-select,
.cl-enigma-app .ring-input,
.cl-enigma-app .text-area{
            width: 100%;
            border-radius: 14px;
            border: 1px solid rgba(215, 165, 77, 0.28);
            background: rgba(22, 13, 8, 0.88);
            color: var(--ink);
            padding: 10px 12px;
            font-size: 14px;
        }
.cl-enigma-app .ring-pill{
            padding: 10px 12px;
            border-radius: 14px;
            background: rgba(22, 13, 8, 0.88);
            border: 1px solid rgba(220, 167, 87, 0.25);
            color: var(--accent-cool);
            font-size: 13px;
            font-weight: 600;
            white-space: nowrap;
        }
.cl-enigma-app .rotor-card details{
            margin-top: 14px;
            border-top: 1px solid rgba(255,255,255,0.06);
            padding-top: 12px;
        }
.cl-enigma-app .rotor-card summary{
            cursor: pointer;
            color: var(--accent-cool);
            font-weight: 600;
            outline: none;
        }
.cl-enigma-app .wiring-grid{
            margin-top: 12px;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(98px, 1fr));
            gap: 8px;
            max-height: 220px;
            overflow: auto;
        }
.cl-enigma-app .wiring-item,
.cl-enigma-app .reflector-pair{
            padding: 8px 10px;
            border-radius: 12px;
            background: rgba(22, 13, 8, 0.7);
            border: 1px solid rgba(255,255,255,0.06);
            color: var(--muted);
            font-family: Consolas, "Courier New", monospace;
            font-size: 13px;
        }
.cl-enigma-app .wiring-item strong{
            color: var(--accent-strong);
        }
.cl-enigma-app .reflector-grid,
.cl-enigma-app .lamp-grid,
.cl-enigma-app .keyboard-grid,
.cl-enigma-app .plug-grid{
            display: grid;
            gap: 8px;
        }
.cl-enigma-app .machine-key-rows{
            display: grid;
            gap: 8px;
        }
.cl-enigma-app .machine-row{
            display: flex;
            justify-content: center;
            gap: 6px;
            flex-wrap: wrap;
        }
.cl-enigma-app .reflector-grid{
            grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
        }
.cl-enigma-app .lamp-grid,
.cl-enigma-app .keyboard-grid{
            grid-template-columns: 1fr;
        }
.cl-enigma-app .plug-grid{
            grid-template-columns: repeat(10, minmax(0, 1fr));
        }
.cl-enigma-app .lamp,
.cl-enigma-app .key,
.cl-enigma-app .plug{
            min-height: 40px;
            border-radius: 13px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            user-select: none;
            font-size: 13px;
        }
.cl-enigma-app .lamp{
            background: radial-gradient(circle at top, rgba(255, 234, 170, 0.12), rgba(32, 19, 12, 0.96));
            color: var(--muted);
            min-width: 42px;
        }
.cl-enigma-app .lamp.active{
            color: #241600;
            background: radial-gradient(circle, rgba(255, 239, 178, 1) 0%, rgba(246, 208, 122, 0.94) 68%, rgba(190, 130, 30, 0.95) 100%);
            box-shadow: 0 0 22px rgba(246, 208, 122, 0.52);
        }
.cl-enigma-app .key,
.cl-enigma-app .plug,
.cl-enigma-app .btn{
            border-radius: 16px;
            background: linear-gradient(180deg, rgba(56, 36, 24, 0.98), rgba(32, 20, 13, 0.98));
            color: var(--ink);
        }
.cl-enigma-app .key{
            min-width: 44px;
            min-height: 44px;
            touch-action: manipulation;
        }
.cl-enigma-app .plug{
            min-width: 42px;
        }
.cl-enigma-app .plug.connected{
            background: linear-gradient(180deg, rgba(246, 208, 122, 0.95), rgba(215, 165, 77, 0.95));
            color: #1b1207;
        }
.cl-enigma-app .plug.selected{
            outline: 2px solid var(--accent-cool);
            outline-offset: 2px;
        }
.cl-enigma-app .text-grid{
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 14px;
        }
.cl-enigma-app .text-card{
            display: grid;
            gap: 8px;
        }
.cl-enigma-app .text-area{
            min-height: 150px;
            resize: vertical;
            line-height: 1.65;
        }
.cl-enigma-app .text-area[readonly]{
            background: rgba(18, 10, 6, 0.98);
        }
.cl-enigma-app .actions{
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
.cl-enigma-app .btn{
            padding: 10px 16px;
            font-size: 13px;
            font-weight: 700;
        }
.cl-enigma-app .machine-actions-panel .panel-head{
            margin-bottom: 12px;
        }
.cl-enigma-app .btn-primary{
            background: linear-gradient(180deg, rgba(246, 208, 122, 0.96), rgba(215, 165, 77, 0.98));
            color: #1b1207;
        }
.cl-enigma-app .btn-ghost{
            background: rgba(255,255,255,0.06);
        }
.cl-enigma-app .steps-log{
            display: none;
            max-height: 420px;
            overflow: auto;
            padding-right: 4px;
        }
.cl-enigma-app .steps-log.visible{
            display: grid;
            gap: 10px;
        }
.cl-enigma-app .step-item{
            padding: 14px;
            border-radius: 18px;
            background: rgba(22, 13, 8, 0.84);
            border: 1px solid rgba(215, 165, 77, 0.14);
        }
.cl-enigma-app .step-title{
            color: var(--accent-strong);
            font-weight: 700;
            margin-bottom: 10px;
        }
.cl-enigma-app .step-grid{
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px;
        }
.cl-enigma-app .step-line{
            color: var(--muted);
            font-size: 13px;
            line-height: 1.5;
        }
.cl-enigma-app .step-line strong{
            color: var(--ink);
        }
.cl-enigma-app .modal{
            position: fixed;
            inset: 0;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 20px;
            background: rgba(12, 7, 4, 0.76);
            z-index: 50;
        }
.cl-enigma-app .modal.open{
            display: flex;
        }
.cl-enigma-app .modal-card{
            width: min(980px, 100%);
            max-height: 90vh;
            overflow: auto;
            border-radius: 26px;
            padding: 22px;
            background: linear-gradient(180deg, rgba(42, 24, 14, 0.98), rgba(28, 16, 10, 0.98));
            border: 1px solid rgba(215, 165, 77, 0.3);
            box-shadow: var(--shadow);
        }
.cl-enigma-app .modal-head{
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 16px;
            margin-bottom: 16px;
        }
.cl-enigma-app .modal-head h3{
            font-family: Georgia, "Times New Roman", serif;
            font-size: 24px;
            color: var(--accent-strong);
        }
.cl-enigma-app .signal-grid{
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
        }
.cl-enigma-app .signal-card{
            padding: 12px 14px;
            border-radius: 16px;
            background: rgba(22, 13, 8, 0.88);
            border: 1px solid rgba(255,255,255,0.06);
        }
.cl-enigma-app .signal-card strong{
            color: var(--accent-strong);
            display: block;
            margin-bottom: 6px;
        }
.cl-enigma-app .signal-output{
            grid-column: 1 / -1;
            background: linear-gradient(180deg, rgba(246, 208, 122, 0.96), rgba(215, 165, 77, 0.98));
            color: #1b1207;
            font-weight: 800;
        }
.cl-enigma-app .signal-output strong{
            color: inherit;
        }
.cl-enigma-app .signal-footer{
            margin-top: 14px;
            color: var(--accent-cool);
            font-size: 14px;
        }
@media (max-width: 1080px){.cl-enigma-app .hero,
.cl-enigma-app .machine-top-grid,
.cl-enigma-app .machine-bottom-grid,
.cl-enigma-app .two-col,
.cl-enigma-app .text-grid,
.cl-enigma-app .rotors-grid,
.cl-enigma-app .signal-grid,
.cl-enigma-app .step-grid{
                grid-template-columns: 1fr;
            }
}
@media (max-width: 720px){.cl-enigma-app,
.cl-enigma-app.embedded{
                padding: 8px;
            }
.cl-enigma-app .enigma-shell{
                padding: 16px;
                border-radius: 22px;
            }
.cl-enigma-app .machine-subhead{
                align-items: start;
                flex-direction: column;
            }
.cl-enigma-app .panel{
                padding: 16px;
            }
.cl-enigma-app .panel-head{
                align-items: start;
                flex-direction: column;
            }
.cl-enigma-app .plug-grid{
                grid-template-columns: repeat(5, minmax(0, 1fr));
            }
}
@media (max-width: 640px){.cl-enigma-app{ padding: 0 !important; }
.cl-enigma-app .header{ padding: 12px 14px !important; gap: 12px !important; flex-wrap: wrap !important; }
.cl-enigma-app .logo{ width: 100% !important; }
.cl-enigma-app .site-title{ font-size: 20px !important; }
.cl-enigma-app .lab-title{ font-size: 14px !important; }
.cl-enigma-app .container{ margin: 14px auto !important; padding: 0 10px !important; }
.cl-enigma-app .card{ padding: 14px !important; border-radius: 14px !important; }
.cl-enigma-app h1{ font-size: 24px !important; line-height: 1.15 !important; }
.cl-enigma-app .description,
.cl-enigma-app .formula-box{ padding: 14px !important; font-size: 14px !important; }
.cl-enigma-app .button-group{ flex-direction: column !important; align-items: stretch !important; }
.cl-enigma-app .btn{ width: 100% !important; justify-content: center !important; }
.cl-enigma-app .matrix-container,
.cl-enigma-app .alphabet-display{ overflow-x: auto !important; }
.cl-enigma-app .matrix-row{ justify-content: flex-start !important; }
.cl-enigma-app .matrix-input{ width: 52px !important; height: 42px !important; }
.cl-enigma-app .steps-table,
.cl-enigma-app .matrix-table{ display: block !important; width: 100% !important; overflow-x: auto !important; white-space: nowrap !important; }
.cl-enigma-app .result-text,
.cl-enigma-app .input-field,
.cl-enigma-app .select-field{ font-size: 15px !important; }
}

.cl-enigma-app {position:relative;isolation:isolate;min-width:0;--ink:#fdfaf3;--muted:#d8c2ad;}
.cl-enigma-app [hidden] {display:none !important;}
.cl-enigma-app #enigma-error {padding:12px;border:1px solid #fc8181;border-radius:8px;color:#fff;background:#742a2a;margin:12px 0;}
.cl-enigma-app button,.cl-enigma-app select {min-height:44px;touch-action:manipulation;}
.cl-enigma-app .reflector-choice {display:flex;align-items:center;gap:12px;margin-bottom:12px;}
.cl-enigma-app .reflector-choice select {background:#22140c;color:#fff;padding:8px;border:1px solid #d7a54d;border-radius:8px;}
.cl-enigma-app .text-area {font-size:16px;}
.cl-enigma-app .rotor-display button {width:44px;}
.cl-enigma-app .hero-nav-btn {display:inline-flex;align-items:center;min-height:44px;}
.cl-enigma-app .key.is-pressed {background:#d7a54d;color:#1b1207;box-shadow:inset 0 2px 5px #382400;}

/* Keep the normal portal guide readable beside the dark machine view. */
.cl-app-guide:has(+ [data-enigma-app]) .cl-text {color:#172b40;}

/* The expanded guide uses a light surface, independently of the machine theme. */
.cl-cipher-id--enigma .cl-app-guide .cl-details {
  background:#f4f7fb;
  border-color:#a5b4c4;
  color:#172b40;
  color-scheme:light;
}
.cl-cipher-id--enigma .cl-app-guide .cl-details :is(summary,.cl-param-guide,p,ul,ol,li,strong,code,span) {
  color:#172b40 !important;
  text-shadow:none;
}
.cl-cipher-id--enigma .cl-app-guide .cl-details code {
  background:#e1e9f2;
  border:1px solid #b6c6d6;
  border-radius:4px;
  padding:1px 4px;
}

/* Isolate the dark machine from the portal's light reading/workspace skin. */
.cl-main.cl-cipher-id--enigma {color:#172b40;background:#f4f7fb;}
.cl-main.cl-cipher-id--enigma :is(h1,h2,h3,h4,p,label,summary,small,li,span):not(.cl-enigma-app *) {color:#172b40;}
.cl-main.cl-cipher-id--enigma .cl-app-guide {background:#fff;color:#172b40;}
.cl-main.cl-cipher-id--enigma .cl-enigma-app {color:var(--ink);color-scheme:dark;}
.cl-main.cl-cipher-id--enigma .cl-enigma-app :is(h1,h2,h3) {color:var(--accent-strong);font-family:"Segoe UI",sans-serif;}
.cl-main.cl-cipher-id--enigma .cl-enigma-app :is(.hero-note,.panel-subtitle,.field-label,.step-line) {color:var(--muted);}
.cl-main.cl-cipher-id--enigma .cl-enigma-app :is(.key,.plug,.btn,.lang-btn) {color:var(--ink);}
.cl-main.cl-cipher-id--enigma .cl-enigma-app .lamp {color:var(--muted);}
.cl-main.cl-cipher-id--enigma .cl-enigma-app .lamp.active {color:#241600;background:#ffe9a3;box-shadow:0 0 24px #f6d07a;}
.cl-main.cl-cipher-id--enigma .cl-enigma-app :is(.key.is-pressed,.plug.connected,.btn-primary,.signal-output) {color:#241600;background:#f6d07a;}

/* Portal-wide button defaults must not repaint the machine's bakelite controls. */
.cl-main.cl-cipher-id--enigma .cl-enigma-app :is(.key,.plug,.lang-btn,.btn:not(.btn-primary),.rotor-display button) {
  background:linear-gradient(180deg,#382418,#20140d) !important;
  color:var(--ink) !important;
  border-color:rgba(220,167,87,.55) !important;
}
.cl-main.cl-cipher-id--enigma .cl-enigma-app :is(.key.is-pressed,.plug.connected,.lang-btn.active) {
  background:#f6d07a !important;
  color:#241600 !important;
}

/* Reading cards are light even when a legacy Enigma skin is still cached. */
.cl-main.cl-cipher-id--enigma :is(.cl-material-unified,.cl-material-reading,.cl-classical-material) {color:#172b40 !important;}
.cl-main.cl-cipher-id--enigma :is(.cl-material-unified,.cl-material-reading,.cl-classical-material) :is(p,li,span,div,small,strong,em,td,th,code,.cl-text) {color:#172b40 !important;}
.cl-main.cl-cipher-id--enigma :is(.cl-material-unified,.cl-material-reading,.cl-classical-material) a {color:#174ea6 !important;}
.cl-main.cl-cipher-id--enigma > .cl-card {background:#fff !important;color:#172b40 !important;}
.cl-main.cl-cipher-id--enigma > .cl-card :is(h1,h2,h3,p,.cl-text,.cl-card-meta,span,strong) {color:#172b40 !important;}