:root{--enigma-bg: #1a1a1a;--enigma-panel: rgba(255, 255, 255, .05);--enigma-border: rgba(255, 255, 255, .1);--enigma-text: #e0e0e0;--enigma-accent: #d4af37;--enigma-glow: rgba(212, 175, 55, .3);--enigma-lamp-off: #333;--enigma-lamp-on: #ffcc00;--enigma-lamp-glow: 0 0 15px #ffcc00, 0 0 30px #ffaa00}.enigma-container{background-color:var(--enigma-bg);color:var(--enigma-text);font-family:Courier New,Courier,monospace;min-height:100vh;padding:2rem;display:flex;flex-direction:column;gap:2rem;background-image:radial-gradient(circle at 50% 50%,#2a2a2a,#1a1a1a)}.enigma-panel{background:var(--enigma-panel);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--enigma-border);border-radius:12px;padding:1.5rem;box-shadow:0 4px 6px #0000004d;transition:transform .2s ease,box-shadow .2s ease}.enigma-panel:hover{box-shadow:0 6px 12px #0006}.enigma-title{font-size:1.5rem;font-weight:700;margin-bottom:1rem;color:var(--enigma-accent);text-transform:uppercase;letter-spacing:2px;border-bottom:1px solid var(--enigma-border);padding-bottom:.5rem}.text-enigma-accent{color:var(--enigma-accent)}.enigma-select{background:#0000004d;border:1px solid var(--enigma-border);color:var(--enigma-text);padding:.5rem;border-radius:4px;font-family:inherit;cursor:pointer;transition:border-color .2s}.enigma-select:hover{border-color:var(--enigma-accent)}.enigma-btn{background:#d4af371a;border:1px solid var(--enigma-accent);color:var(--enigma-accent);padding:.5rem 1rem;border-radius:4px;cursor:pointer;transition:all .2s;font-weight:700;text-transform:uppercase;display:inline-flex;justify-content:center;align-items:center}.enigma-btn:hover{background:var(--enigma-accent);color:#000;box-shadow:0 0 10px var(--enigma-glow)}.rotor-group{display:flex;gap:1rem;justify-content:center;align-items:center;flex-wrap:wrap}.rotor-unit{display:flex;flex-direction:column;align-items:center;gap:.5rem;background:#0006;padding:1rem;border-radius:8px;border:1px solid var(--enigma-border)}.rotor-window{font-size:2rem;font-weight:700;background:#000;color:#fff;padding:.5rem 1rem;border-radius:4px;border:2px solid #444;box-shadow:inset 0 2px 5px #000c;min-width:3rem;text-align:center}.rotor-stack{display:flex;flex-direction:column;align-items:center;gap:.5rem;width:100%}.rotor-btn-vertical{width:100%;max-width:3rem;padding:.25rem 0}.plugboard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(40px,1fr));gap:.5rem;max-width:800px;margin:0 auto}.plug-socket{width:40px;height:40px;border-radius:50%;background:#222;border:2px solid #555;display:flex;justify-content:center;align-items:center;cursor:pointer;position:relative;font-weight:700;color:#888;transition:all .2s}.plug-socket:hover{border-color:var(--enigma-accent);color:#fff}.plug-socket.connected{background:#d4af3733;border-color:var(--enigma-accent);color:var(--enigma-accent);box-shadow:0 0 10px var(--enigma-glow)}.keyboard-layout{display:flex;flex-direction:column;gap:.5rem;align-items:center}.keyboard-row{display:flex;gap:.5rem;justify-content:center}.lamp{width:50px;height:50px;border-radius:50%;background:var(--enigma-lamp-off);border:2px solid #444;display:flex;justify-content:center;align-items:center;font-weight:700;color:#ffffff80;font-size:1.2rem;transition:all .1s}.lamp.active{background:var(--enigma-lamp-on);color:#000;box-shadow:var(--enigma-lamp-glow);border-color:#fff}.key{width:45px;height:45px;border-radius:50%;background:#111;border:2px solid #666;display:flex;justify-content:center;align-items:center;color:#fff;cursor:pointer;-webkit-user-select:none;user-select:none;box-shadow:0 4px #333;transition:all .1s}.key:active,.key.pressed{transform:translateY(4px);box-shadow:0 0 #333;background:#222}.io-area{width:100%;background:#00000080;border:1px solid var(--enigma-border);color:var(--enigma-text);padding:1rem;font-family:Courier New,Courier,monospace;font-size:1.2rem;resize:vertical;min-height:100px;border-radius:8px}.io-area:focus{outline:none;border-color:var(--enigma-accent);box-shadow:0 0 10px #d4af371a}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.gap-2{gap:.5rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mt-2{margin-top:.5rem}.w-full{width:100%}.text-xs{font-size:.75rem}.text-sm{font-size:.875rem}.text-gray-400{color:#9ca3af}.text-gray-500{color:#6b7280}.text-white{color:#fff}.text-gray-100{color:#f3f4f6}.text-gray-200{color:#e5e7eb}.text-gray-300{color:#d1d5db}.text-indigo-200{color:#c7d2fe}.text-indigo-300{color:#a5b4fc}.text-indigo-400{color:#818cf8}.bg-gray-700{background-color:#374151}.bg-gray-800{background-color:#1f2937}.bg-gray-900{background-color:#111827}.border-gray-500{border-color:#6b7280}.border-gray-600{border-color:#4b5563}.border-gray-700{border-color:#374151}.shadow-md{box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.drop-shadow-sm{filter:drop-shadow(0 1px 1px rgba(0,0,0,.05))}.rounded-full{border-radius:9999px}:root{--color-primary: #4f46e5;--color-primary-rgb: 79, 70, 229;--color-primary-hover: #4338ca;--color-secondary: #0ea5e9;--color-accent: #8b5cf6;--color-bg-body: #f8fafc;--color-bg-card: rgba(255, 255, 255, .9);--color-bg-card-hover: rgba(255, 255, 255, 1);--color-text-main: #0f172a;--color-text-muted: #475569;--color-text-subtle: #94a3b8;--color-border: #e2e8f0;--color-border-hover: #cbd5e1;--font-sans: "Inter", "Noto Sans JP", system-ui, -apple-system, sans-serif;--font-mono: "JetBrains Mono", "Fira Code", monospace;--font-classic: "Playfair Display", "Noto Serif JP", serif;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--spacing-2xl: 48px;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--radius-sm: 6px;--radius-md: 12px;--radius-lg: 18px;--radius-full: 9999px}[data-theme=classic]{--color-primary: #8b7355;--color-primary-rgb: 139, 115, 85;--color-primary-hover: #6f5c44;--color-secondary: #b5a642;--color-accent: #d4af37;--color-bg-body: #f4ecd8;--color-bg-card: rgba(255, 255, 255, .6);--color-bg-card-hover: rgba(255, 255, 255, .8);--color-text-main: #2c2c2c;--color-text-muted: #5d5d5d;--color-text-subtle: #8e8e8e;--color-border: #dcd0b9;--color-border-hover: #c4b69c;--font-sans: var(--font-classic);--font-mono: "Courier Prime", "Courier New", monospace}[data-theme=hacker]{--color-primary: #39ff14;--color-primary-rgb: 57, 255, 20;--color-primary-hover: #32e612;--color-secondary: #00f3ff;--color-accent: #ff00ff;--color-bg-body: #0a0a0a;--color-bg-card: rgba(26, 26, 26, .8);--color-bg-card-hover: rgba(38, 38, 38, 1);--color-text-main: #ffffff;--color-text-muted: #f1f5f9;--color-text-subtle: #e2e8f0;--color-border: #333;--color-border-hover: #444;--font-sans: var(--font-mono);--font-mono: var(--font-mono);--shadow-md: 0 0 10px rgba(57, 255, 20, .2);--shadow-lg: 0 0 20px rgba(57, 255, 20, .3);--color-link: #00f3ff;--color-link-hover: #39ff14}[data-subtheme=math]{--color-primary: #0ea5e9;--color-primary-rgb: 14, 165, 233;--color-secondary: #38bdf8;--color-accent: #818cf8}[data-subtheme=pqc]{--color-primary: #ff00ff;--color-primary-rgb: 255, 0, 255;--color-secondary: #00f3ff;--color-accent: #39ff14}*,*:before,*:after{box-sizing:border-box}body{margin:0;font-family:var(--font-sans);color:var(--color-text-main);background-color:var(--color-bg-body);background-image:radial-gradient(at 0% 0%,hsla(253,16%,96%,1) 0,transparent 50%),radial-gradient(at 50% 0%,hsla(225,39%,96%,1) 0,transparent 50%),radial-gradient(at 100% 0%,hsla(339,49%,96%,1) 0,transparent 50%);background-attachment:fixed;line-height:1.6;-webkit-font-smoothing:antialiased;min-height:100vh;transition:background-color .5s ease,color .5s ease}a{color:var(--color-primary);text-decoration:none;transition:all .2s ease}a:hover{color:var(--color-primary-hover);text-decoration:underline}[data-theme=hacker] a{color:var(--color-link);text-shadow:0 0 5px rgba(0,243,255,.3)}[data-theme=hacker] a:hover{color:var(--color-link-hover);text-shadow:0 0 8px rgba(57,255,20,.5)}[data-theme=classic] body{background-image:url(https://www.transparenttextures.com/patterns/old-map.png),radial-gradient(circle at center,#f4ecd8cc,#d2be96e6);background-color:#f4ecd8}[data-theme=hacker] body{background-image:linear-gradient(rgba(0,255,0,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,255,0,.05) 1px,transparent 1px);background-size:20px 20px;background-color:#0a0a0a}[data-subtheme=math] body{background-image:linear-gradient(rgba(14,165,233,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(14,165,233,.1) 1px,transparent 1px);background-size:40px 40px;background-color:#050505}[data-subtheme=pqc] body{background-image:linear-gradient(rgba(255,0,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,243,255,.05) 1px,transparent 1px),radial-gradient(circle at 50% 50%,rgba(255,0,255,.05) 0%,transparent 70%);background-size:30px 30px,30px 30px,100% 100%;background-color:#080508}[data-theme=hacker] .card{border:1px solid rgba(57,255,20,.2);box-shadow:0 0 15px #39ff141a}[data-theme=classic] .card{border:1px solid rgba(139,115,85,.3);box-shadow:2px 2px 10px #0000001a;border-radius:4px}#app{min-height:100vh;display:flex;flex-direction:column}.site-shell{display:flex;flex-direction:column;min-height:100vh}.site-main{flex:1;width:100%;max-width:1200px;margin:0 auto;padding:var(--spacing-lg) var(--spacing-md)}@media(min-width:768px){.site-main{padding:var(--spacing-xl) var(--spacing-lg)}}.navbar{position:sticky;top:0;z-index:50;background:var(--color-bg-card);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--color-border);padding:var(--spacing-md);transition:all .5s cubic-bezier(.4,0,.2,1)}[data-theme=hacker] .navbar{background:#0a0a0acc;border-bottom:1px solid var(--color-primary);box-shadow:0 0 20px #39ff1426}[data-theme=classic] .navbar{background:#f4ecd8f2;border-bottom:3px double var(--color-primary);box-shadow:0 2px 10px #0000000d}.navbar-container{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center}.nav-brand{display:flex;align-items:center;gap:var(--spacing-sm);font-weight:800;font-size:1.5rem;color:var(--color-text-main);text-decoration:none;transition:transform .2s}.nav-brand:hover{transform:scale(1.02)}[data-theme=classic] .nav-brand{font-family:var(--font-classic);letter-spacing:.05em}[data-theme=hacker] .nav-brand{font-family:var(--font-mono);text-shadow:0 0 8px var(--color-primary)}.logo-dot{width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));box-shadow:0 0 10px var(--color-primary)}.menu-toggle{display:none;background:none;border:none;cursor:pointer;font-size:1.5rem;color:var(--color-text-main);padding:var(--spacing-xs)}@media(max-width:768px){.menu-toggle{display:block}.nav-links{display:none;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:var(--color-bg-card);padding:var(--spacing-md);border-bottom:1px solid var(--color-border);z-index:100}.nav-links.open{display:flex}}.nav-links{display:flex;align-items:center;gap:var(--spacing-sm)}.nav-link{color:var(--color-text-muted);text-decoration:none;font-weight:600;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-full);transition:all .3s ease;position:relative}.nav-link:hover{color:var(--color-primary);background:rgba(var(--color-primary-rgb),.1)}[data-theme=hacker] .nav-link:hover{text-shadow:0 0 8px var(--color-primary);background:#39ff141a}[data-theme=classic] .nav-link{font-family:var(--font-classic);text-transform:uppercase;letter-spacing:.1em;font-size:.9rem}.nav-link.active{color:var(--color-primary);background:rgba(var(--color-primary-rgb),.15)}[data-theme=hacker] .nav-link.active{box-shadow:inset 0 0 10px #39ff1433;border:1px solid var(--color-primary)}[data-theme=classic] .nav-link.active{border-bottom:2px solid var(--color-primary);border-radius:0;background:transparent}.nav-dropdown{position:relative}.nav-dropdown-trigger{cursor:pointer;display:flex;align-items:center;gap:4px}.nav-dropdown-menu{position:absolute;top:100%;right:0;background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-md);min-width:180px;padding:var(--spacing-xs);box-shadow:var(--shadow-lg);display:none;flex-direction:column;z-index:100}.nav-dropdown:hover .nav-dropdown-menu{display:flex}.nav-dropdown-item{padding:var(--spacing-sm) var(--spacing-md);color:var(--color-text-muted);text-decoration:none;font-weight:600;border-radius:var(--radius-sm);transition:all .2s}.nav-dropdown-item:hover{background:rgba(var(--color-primary-rgb),.1);color:var(--color-primary)}.nav-dropdown-item.active{color:var(--color-primary);background:rgba(var(--color-primary-rgb),.15)}[data-theme=hacker] .nav-dropdown-menu{background:#0a0a0af2;border:1px solid var(--color-primary);box-shadow:0 0 20px #39ff1433}[data-theme=classic] .nav-dropdown-menu{background:#f4ecd8;border:2px solid var(--color-primary);border-radius:0}[data-theme=classic] .nav-dropdown-item{font-family:var(--font-classic);text-transform:uppercase;font-size:.8rem}.site-footer{background:#0f172a;color:#e2e8f0;padding:var(--spacing-2xl) var(--spacing-md);margin-top:auto;transition:all .5s ease}[data-theme=hacker] .site-footer{background:#000;border-top:1px solid var(--color-primary);box-shadow:0 -10px 30px #39ff140d}[data-theme=hacker] .site-footer a{color:var(--color-link)}[data-theme=hacker] .site-footer a:hover{color:var(--color-link-hover)}[data-theme=classic] .site-footer{background:#2c2c2c;border-top:4px solid var(--color-primary);font-family:var(--font-classic)}.card{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-xl);box-shadow:var(--shadow-md);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:all .4s cubic-bezier(.4,0,.2,1);margin-bottom:var(--spacing-lg);position:relative;overflow:hidden}[data-theme=hacker] .card{background:#0f0f0fe6;border:1px solid rgba(57,255,20,.2);box-shadow:0 0 20px #00000080}[data-theme=hacker] .card:hover{border-color:var(--color-primary);box-shadow:0 0 30px #39ff1426;transform:translateY(-4px)}[data-theme=classic] .card{background:#ffffffb3;border:1px solid rgba(139,115,85,.2);border-radius:2px;box-shadow:5px 5px 15px #0000000d}[data-theme=classic] .card:hover{background:#ffffffe6;box-shadow:8px 8px 20px #00000014;transform:translate(-2px,-2px)}.btn,button.primary,button.secondary,button.ghost{display:inline-flex;align-items:center;justify-content:center;padding:14px 28px;border-radius:var(--radius-full);font-weight:700;text-decoration:none;transition:all .3s cubic-bezier(.4,0,.2,1);cursor:pointer;border:none;font-size:1rem;gap:8px}.btn-primary,button.primary{background:linear-gradient(135deg,var(--color-primary),var(--color-accent));color:#fff;box-shadow:0 4px 15px rgba(var(--color-primary-rgb),.4)}[data-theme=hacker] .btn-primary,[data-theme=hacker] button.primary{background:transparent;border:1px solid var(--color-primary);color:var(--color-primary);box-shadow:0 0 15px #39ff1433;text-transform:uppercase;letter-spacing:.1em}[data-theme=hacker] .btn-primary:hover,[data-theme=hacker] button.primary:hover{background:var(--color-primary);color:#000;box-shadow:0 0 25px var(--color-primary)}[data-theme=classic] .btn-primary,[data-theme=classic] button.primary{background:var(--color-primary);border-radius:0;box-shadow:3px 3px 0 var(--color-text-main);font-family:var(--font-classic)}[data-theme=classic] .btn-primary:hover,[data-theme=classic] button.primary:hover{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--color-text-main)}input[type=text],input[type=number],input[type=email],input[type=password],select,textarea{width:100%;padding:12px 16px;background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:1rem;color:var(--color-text-main);transition:all .3s cubic-bezier(.4,0,.2,1);font-family:var(--font-sans)}select{padding-right:16px;cursor:pointer}input:focus,select:focus,textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(var(--color-primary-rgb),.1);background:var(--color-bg-card-hover)}input:hover,select:hover,textarea:hover{border-color:var(--color-border-hover)}[data-theme=hacker] input,[data-theme=hacker] select,[data-theme=hacker] textarea{background:#0009;border:1px solid rgba(57,255,20,.3);font-family:var(--font-mono);color:var(--color-primary)}[data-theme=hacker] input:focus,[data-theme=hacker] select:focus,[data-theme=hacker] textarea:focus{border-color:var(--color-primary);box-shadow:0 0 15px #39ff1433;background:#000c}[data-theme=classic] input,[data-theme=classic] select,[data-theme=classic] textarea{background:#fff6;border:1px solid #8b7355;border-radius:0;font-family:var(--font-mono)}[data-theme=classic] input:focus,[data-theme=classic] select:focus,[data-theme=classic] textarea:focus{background:#fffc;border-color:var(--color-primary);box-shadow:2px 2px 0 var(--color-text-main)}.text-input{max-width:100%}.page-header{text-align:center;padding:var(--spacing-2xl) 0;margin-bottom:var(--spacing-xl)}.page-header h1{font-size:clamp(2.5rem,8vw,4rem);margin-bottom:var(--spacing-md);line-height:1.1}[data-theme=classic] .page-header h1{font-family:var(--font-classic);font-style:italic}[data-theme=hacker] .page-header h1{font-family:var(--font-mono);text-transform:uppercase;text-shadow:0 0 20px var(--color-primary)}.eyebrow{font-family:var(--font-mono);font-weight:700;letter-spacing:.2em;text-transform:uppercase;font-size:.875rem;margin-bottom:var(--spacing-sm)}.lede{font-size:1.25rem;color:var(--color-text-muted);max-width:800px;margin:0 auto;line-height:1.6}[data-theme=classic] .lede{font-family:var(--font-classic);font-style:italic}.tab-bar{display:flex;gap:var(--spacing-sm);padding:4px;background:#0000000d;border-radius:var(--radius-full);margin-bottom:var(--spacing-xl)}[data-theme=hacker] .tab-bar{background:#111;border:1px solid #333}[data-theme=classic] .tab-bar{background:transparent;border-bottom:2px solid var(--color-border);border-radius:0}.tab{padding:12px 24px;border-radius:var(--radius-full);border:none;background:transparent;color:var(--color-text-muted);font-weight:700;cursor:pointer;transition:all .3s ease}.tab.active{background:#fff;color:var(--color-primary);box-shadow:var(--shadow-md)}[data-theme=hacker] .tab.active{background:var(--color-primary);color:#000;box-shadow:0 0 15px var(--color-primary)}[data-theme=classic] .tab{border-radius:0;font-family:var(--font-classic)}[data-theme=classic] .tab.active{background:var(--color-primary);color:#fff;box-shadow:none}.callout{padding:var(--spacing-md);border-radius:var(--radius-md);margin-bottom:var(--spacing-lg);border-left:4px solid transparent}.callout-info{background:#0ea5e91a;border-left-color:#0ea5e9;color:var(--color-text-main)}.callout-warning{background:#ef44441a;border-left-color:#ef4444;color:var(--color-text-main)}.callout-success{background:#22c55e1a;border-left-color:#22c55e;color:var(--color-text-main)}.info-panel,.hint,.callout-info{padding:var(--spacing-md);border-radius:var(--radius-md);margin-bottom:var(--spacing-lg);border-left:4px solid #0ea5e9;background:#0ea5e91a;color:var(--color-text-main)}.caution,.callout-warning{padding:var(--spacing-md);border-radius:var(--radius-md);margin-bottom:var(--spacing-lg);border-left:4px solid #ef4444;background:#ef44441a;color:var(--color-text-main)}[data-theme=hacker] .info-panel,[data-theme=hacker] .hint,[data-theme=hacker] .callout-info{background:#00f3ff1a;border-left-color:var(--color-secondary);color:var(--color-secondary)}[data-theme=hacker] .caution,[data-theme=hacker] .callout-warning{background:#ff00ff1a;border-left-color:var(--color-accent);color:var(--color-accent)}[data-theme=classic] .info-panel,[data-theme=classic] .hint,[data-theme=classic] .caution{border-radius:0;border:1px solid var(--color-border);border-left-width:6px}pre,code{font-family:var(--font-mono);background:#0000000d;border-radius:var(--radius-sm)}pre{padding:var(--spacing-md);overflow-x:auto}[data-theme=hacker] pre,[data-theme=hacker] code{background:#ffffff0d;color:var(--color-primary);border:1px solid rgba(57,255,20,.2)}[data-theme=classic] pre,[data-theme=classic] code{background:#00000008;border:1px solid var(--color-border)}table{width:100%;border-collapse:collapse;margin-bottom:var(--spacing-lg)}th,td{padding:var(--spacing-sm) var(--spacing-md);text-align:left;border-bottom:1px solid var(--color-border)}th{background:#00000005;font-weight:700}[data-theme=hacker] th{background:#ffffff0d;color:var(--color-primary)}[data-theme=hacker] td{border-bottom-color:#222}