@import"https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&display=swap";:root{--manila: #F5E6C8;--manila-dark: #E8D5B0;--manila-light: #FBF3E4;--ibm-blue: #0530AD;--ibm-blue-light: #1A5AE0;--brown: #3E2723;--brown-light: #6D4C41;--punch-hole: #1A1A1A;--terminal-bg: #0A0A0A;--terminal-green: #33FF33;--terminal-dim: #1A7A1A;--bg: #2C2C2C;--surface: #383838;--surface-light: #444444;--text: #E0E0E0;--text-dim: #999;--cursor-color: rgba(255, 200, 50, .4);--border: #555;--cell-height: 14px;--cell-font-size: 9px;--row-label-width: 22px;--row-label-font-size: 8px;--col-num-font-size: 6px;--col-num-height: 10px;--cell-min-width: 0px}*{margin:0;padding:0;box-sizing:border-box}html{font-size:14px}body{font-family:IBM Plex Mono,Courier New,monospace;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden;display:flex;flex-direction:column;height:100vh;padding-bottom:41px}.app-header{background:var(--ibm-blue);color:#fff;padding:.75rem 1.5rem;display:flex;align-items:center;justify-content:space-between;box-shadow:0 2px 8px #0006}.app-header h1{font-size:1.2rem;font-weight:700;letter-spacing:.05em}.app-header .subtitle{font-size:.75rem;opacity:.8;font-weight:400}.lang-toggle{display:flex;align-items:center;gap:.3rem;background:#ffffff1a;border:1px solid rgba(255,255,255,.3);border-radius:4px;padding:.25rem .6rem;cursor:pointer;font-family:inherit;font-size:.8rem;color:#fff9;transition:background .15s}.lang-toggle:hover{background:#fff3}.lang-option{font-weight:400;transition:color .15s,font-weight .15s}.lang-option.active{color:#fff;font-weight:700}.lang-divider{opacity:.5}.header-toggles{display:flex;align-items:center;gap:.5rem}.mode-toggle{display:flex;align-items:center;gap:.3rem;background:#ffffff1a;border:1px solid rgba(255,255,255,.3);border-radius:4px;padding:.25rem .6rem;cursor:pointer;font-family:inherit;font-size:.8rem;color:#fff9;transition:background .15s}.mode-toggle:hover{background:#fff3}.mode-option{font-weight:400;transition:color .15s,font-weight .15s}.mode-option.active{color:#fff;font-weight:700}.mode-divider{opacity:.5}.toolbar{background:var(--surface);padding:.5rem 1rem;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;border-bottom:1px solid var(--border)}.toolbar-group{display:flex;align-items:center;gap:.35rem}.toolbar-divider{width:1px;height:24px;background:var(--border);margin:0 .4rem}.btn{font-family:inherit;font-size:.8rem;padding:.3rem .7rem;border:1px solid var(--border);border-radius:3px;background:var(--surface-light);color:var(--text);cursor:pointer;transition:background .15s;white-space:nowrap}.btn:hover:not(:disabled){background:#555}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-primary{background:var(--ibm-blue);border-color:var(--ibm-blue);color:#fff}.btn-primary:hover:not(:disabled){background:var(--ibm-blue-light)}.btn-danger{border-color:#8b0000}.btn-danger:hover:not(:disabled){background:#8b0000;color:#fff}#card-counter{font-size:.8rem;color:var(--text-dim);min-width:100px;text-align:center}select{font-family:inherit;font-size:.8rem;padding:.3rem .5rem;border:1px solid var(--border);border-radius:3px;background:var(--surface-light);color:var(--text);cursor:pointer}.card-area{padding:1rem;display:flex;justify-content:center;overflow-x:auto}.punch-card{background:var(--manila);border-radius:4px;padding:8px 10px 12px;box-shadow:0 2px 12px #00000080,inset 0 0 0 1px #0000001a;position:relative;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%);-webkit-user-select:none;user-select:none}.card-char-row{display:grid;grid-template-columns:var(--row-label-width) repeat(80,1fr);gap:0;margin-bottom:2px}.card-char-row .char-cell{width:100%;height:var(--cell-height);min-width:var(--cell-min-width);text-align:center;font-size:var(--cell-font-size);font-weight:600;color:var(--brown);line-height:var(--cell-height);overflow:hidden}.card-char-row .char-cell.cursor{background:var(--cursor-color);border-radius:2px}.card-col-numbers{display:grid;grid-template-columns:var(--row-label-width) repeat(80,1fr);gap:0;margin-bottom:1px}.col-num{text-align:center;font-size:var(--col-num-font-size);color:var(--brown-light);line-height:var(--col-num-height);min-width:var(--cell-min-width);opacity:.7}.card-grid{display:grid;grid-template-columns:var(--row-label-width) repeat(80,1fr);gap:0}.row-label{font-size:var(--row-label-font-size);font-weight:600;color:var(--brown);display:flex;align-items:center;justify-content:center;height:var(--cell-height);-webkit-user-select:none;user-select:none}.row-label.spacer{visibility:hidden}.grid-cell{width:100%;height:var(--cell-height);min-width:var(--cell-min-width);border:.5px solid rgba(62,39,35,.12);cursor:pointer;transition:background .1s;position:relative}.grid-cell:hover{background:#3e272326}.grid-cell.punched{background:var(--punch-hole);border-color:#0000004d;box-shadow:inset 0 1px 2px #00000080}.grid-cell.cursor{background:var(--cursor-color)}.grid-cell.cursor.punched{background:var(--punch-hole);box-shadow:inset 0 1px 2px #00000080,0 0 0 1px #ffc83299}.punch-card.hard-mode .grid-cell:hover{background:#3e272340;box-shadow:inset 0 0 0 1px #3e27234d}.punch-card.hard-mode .grid-cell.punched:hover{background:var(--punch-hole);box-shadow:inset 0 1px 2px #00000080,0 0 0 1px #ffc83266}.tab-bar{background:var(--surface);display:flex;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:0 1rem}.tab-btn{font-family:inherit;font-size:.8rem;padding:.5rem 1rem;background:none;border:none;border-bottom:2px solid transparent;color:var(--text-dim);cursor:pointer;transition:color .15s,border-color .15s}.tab-btn:hover{color:var(--text)}.tab-btn.active{color:#fff;border-bottom-color:var(--ibm-blue-light)}.tab-content{flex:1;min-height:120px;height:auto;overflow:hidden;position:relative}.tab-panel{display:none;height:100%;overflow-y:auto;padding:.75rem 1rem}.tab-panel.active{display:block}#tab-deck{display:none;padding:.5rem}#tab-deck.active{display:flex;flex-wrap:wrap;gap:.5rem;align-content:flex-start}.card-thumbnail{background:var(--manila);border:2px solid transparent;border-radius:3px;padding:6px 8px;cursor:pointer;width:200px;transition:border-color .15s}.card-thumbnail:hover{border-color:var(--ibm-blue-light)}.card-thumbnail.current{border-color:var(--ibm-blue);box-shadow:0 0 6px #0530ad66}.thumb-label{font-size:.7rem;font-weight:600;color:var(--brown);margin-bottom:2px}.thumb-text{font-size:.65rem;color:var(--brown-light);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:4px}.thumb-grid{display:block;width:100%;height:auto;image-rendering:pixelated}#tab-output{background:var(--terminal-bg);font-family:IBM Plex Mono,monospace;position:relative;border-radius:8px;box-shadow:inset 0 0 60px #00ff0008,0 0 20px #00000080}#tab-output:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.15) 2px,rgba(0,0,0,.15) 4px);pointer-events:none;z-index:1;border-radius:8px}#terminal-output{color:var(--terminal-green);font-size:.85rem;line-height:1.5;white-space:pre-wrap;text-shadow:0 0 5px rgba(51,255,51,.4);position:relative;z-index:0}.terminal-line{padding:1px 0}.terminal-line:nth-child(2n){background:#33ff3308}.terminal-line.system{color:var(--terminal-dim);font-style:italic}.terminal-line.input-echo{color:#fc0}.terminal-cursor-blink:after{content:"_";animation:blink 1s step-end infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}#terminal-input-area{margin-top:.5rem;display:flex;align-items:center;gap:.5rem}#terminal-input-area.hidden{display:none}#terminal-input-label{color:var(--terminal-green);font-size:.8rem}#terminal-input{font-family:inherit;font-size:.85rem;background:transparent;border:none;border-bottom:1px solid var(--terminal-green);color:#fc0;outline:none;padding:2px 4px;width:120px}.encoding-table{border-collapse:collapse;font-size:.7rem;width:100%}.encoding-table th,.encoding-table td{border:1px solid var(--border);padding:3px 5px;text-align:center}.encoding-table th{background:var(--surface-light);font-weight:600;position:sticky;top:0}.encoding-table .char-col{font-weight:700;font-size:.85rem;color:var(--ibm-blue-light)}.encoding-table .punch-mark{color:var(--terminal-green);font-size:.6rem}.encoding-table .group-header td{background:var(--surface);font-weight:600;text-align:left;color:var(--text-dim);font-size:.75rem;letter-spacing:.05em}.tutorial-section{margin-bottom:1.2rem}.tutorial-section h3{font-size:.95rem;color:var(--ibm-blue-light);margin-bottom:.4rem;border-bottom:1px solid var(--border);padding-bottom:.2rem}.tutorial-section p{margin-bottom:.5rem;line-height:1.6;font-size:.85rem}.tutorial-section ul,.tutorial-section ol{margin:.3rem 0 .5rem 1.5rem;font-size:.85rem;line-height:1.6}.tutorial-section code{background:var(--surface-light);padding:1px 4px;border-radius:2px;font-size:.8rem}.instruction-table{border-collapse:collapse;width:100%;margin-top:.3rem;font-size:.8rem}.instruction-table th,.instruction-table td{border:1px solid var(--border);padding:4px 8px;text-align:left}.instruction-table th{background:var(--surface-light);font-weight:600}.instruction-table td:first-child{font-weight:700;color:var(--terminal-green)}.exec-bar{background:var(--surface);padding:.5rem 1rem;display:flex;align-items:center;gap:.5rem;border-top:1px solid var(--border);position:fixed;bottom:0;left:0;right:0;z-index:10}.exec-helper-text{color:var(--text-dim);font-size:.75rem;margin-left:.5rem}.hidden{display:none!important}.speed-control{display:flex;align-items:center;gap:.35rem}.speed-label{font-size:.75rem;color:var(--text-dim)}.speed-control select{font-size:.75rem;padding:.2rem .3rem}.job-phase-label{font-size:.75rem;color:var(--terminal-green);font-weight:600;letter-spacing:.03em;text-shadow:0 0 4px rgba(51,255,51,.3)}.audio-toggle{display:flex;align-items:center;gap:.3rem;background:#ffffff1a;border:1px solid rgba(255,255,255,.3);border-radius:4px;padding:.25rem .6rem;cursor:pointer;font-family:inherit;font-size:.75rem;color:#fff9;transition:background .15s}.audio-toggle:hover{background:#fff3}.card-thumbnail.card-reading{border-color:var(--terminal-green)!important;box-shadow:0 0 10px #3f36;animation:card-slide .3s ease-out}.card-thumbnail.card-read{opacity:.6;filter:sepia(.3) saturate(.8)}@keyframes card-slide{0%{transform:translateY(-4px)}to{transform:translateY(0)}}@media(max-width:1200px){:root{--cell-height: 12px;--cell-font-size: 8px;--row-label-width: 20px;--row-label-font-size: 7px;--col-num-font-size: 5px;--col-num-height: 9px}}@media(max-width:768px){:root{--cell-height: 28px;--cell-font-size: 14px;--row-label-width: 32px;--row-label-font-size: 12px;--col-num-font-size: 9px;--col-num-height: 16px;--cell-min-width: 16px}.card-area{justify-content:flex-start;-webkit-overflow-scrolling:touch}.punch-card{min-width:max-content}.toolbar .btn{padding:.4rem .6rem;font-size:.75rem}.app-header h1{font-size:1rem}.app-header .subtitle{display:none}.exec-bar{flex-wrap:wrap}.exec-helper-text{display:none}}.zoom-level-label{font-size:.75rem;color:var(--text-dim);min-width:3em;text-align:center}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--surface-light);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#666}