.driver-active .driver-overlay,.driver-active *{pointer-events:none}.driver-active .driver-active-element,.driver-active .driver-active-element *,.driver-popover,.driver-popover *{pointer-events:auto}@keyframes animate-fade-in{0%{opacity:0}to{opacity:1}}.driver-fade .driver-overlay{animation:animate-fade-in .2s ease-in-out}.driver-fade .driver-popover{animation:animate-fade-in .2s}.driver-popover{all:unset;box-sizing:border-box;color:#2d2d2d;margin:0;padding:15px;border-radius:5px;min-width:250px;max-width:300px;box-shadow:0 1px 10px #0006;z-index:1000000000;position:fixed;top:0;right:0;background-color:#fff}.driver-popover *{font-family:Helvetica Neue,Inter,ui-sans-serif,"Apple Color Emoji",Helvetica,Arial,sans-serif}.driver-popover-title{font:19px/normal sans-serif;font-weight:700;display:block;position:relative;line-height:1.5;zoom:1;margin:0}.driver-popover-close-btn{all:unset;position:absolute;top:0;right:0;width:32px;height:28px;cursor:pointer;font-size:18px;font-weight:500;color:#d2d2d2;z-index:1;text-align:center;transition:color;transition-duration:.2s}.driver-popover-close-btn:hover,.driver-popover-close-btn:focus{color:#2d2d2d}.driver-popover-title[style*=block]+.driver-popover-description{margin-top:5px}.driver-popover-description{margin-bottom:0;font:14px/normal sans-serif;line-height:1.5;font-weight:400;zoom:1}.driver-popover-footer{margin-top:15px;text-align:right;zoom:1;display:flex;align-items:center;justify-content:space-between}.driver-popover-progress-text{font-size:13px;font-weight:400;color:#727272;zoom:1}.driver-popover-footer button{all:unset;display:inline-block;box-sizing:border-box;padding:3px 7px;text-decoration:none;text-shadow:1px 1px 0 #fff;background-color:#fff;color:#2d2d2d;font:12px/normal sans-serif;cursor:pointer;outline:0;zoom:1;line-height:1.3;border:1px solid #ccc;border-radius:3px}.driver-popover-footer .driver-popover-btn-disabled{opacity:.5;pointer-events:none}:not(body):has(>.driver-active-element){overflow:hidden!important}.driver-no-interaction,.driver-no-interaction *{pointer-events:none!important}.driver-popover-footer button:hover,.driver-popover-footer button:focus{background-color:#f7f7f7}.driver-popover-navigation-btns{display:flex;flex-grow:1;justify-content:flex-end}.driver-popover-navigation-btns button+button{margin-left:4px}.driver-popover-arrow{content:"";position:absolute;border:5px solid #fff}.driver-popover-arrow-side-over{display:none}.driver-popover-arrow-side-left{left:100%;border-right-color:transparent;border-bottom-color:transparent;border-top-color:transparent}.driver-popover-arrow-side-right{right:100%;border-left-color:transparent;border-bottom-color:transparent;border-top-color:transparent}.driver-popover-arrow-side-top{top:100%;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}.driver-popover-arrow-side-bottom{bottom:100%;border-left-color:transparent;border-top-color:transparent;border-right-color:transparent}.driver-popover-arrow-side-center{display:none}.driver-popover-arrow-side-left.driver-popover-arrow-align-start,.driver-popover-arrow-side-right.driver-popover-arrow-align-start{top:15px}.driver-popover-arrow-side-top.driver-popover-arrow-align-start,.driver-popover-arrow-side-bottom.driver-popover-arrow-align-start{left:15px}.driver-popover-arrow-align-end.driver-popover-arrow-side-left,.driver-popover-arrow-align-end.driver-popover-arrow-side-right{bottom:15px}.driver-popover-arrow-side-top.driver-popover-arrow-align-end,.driver-popover-arrow-side-bottom.driver-popover-arrow-align-end{right:15px}.driver-popover-arrow-side-left.driver-popover-arrow-align-center,.driver-popover-arrow-side-right.driver-popover-arrow-align-center{top:50%;margin-top:-5px}.driver-popover-arrow-side-top.driver-popover-arrow-align-center,.driver-popover-arrow-side-bottom.driver-popover-arrow-align-center{left:50%;margin-left:-5px}.driver-popover-arrow-none{display:none}*{box-sizing:border-box;margin:0;padding:0;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.app{background-color:#0f172a;color:#e2e8f0;padding:20px;line-height:1.6;min-height:100vh;background-image:radial-gradient(circle at 10% 20%,rgba(56,189,248,.05) 0%,transparent 20%),radial-gradient(circle at 90% 80%,rgba(139,92,246,.05) 0%,transparent 20%)}.container{max-width:1200px;margin:0 auto}header{text-align:center;margin-bottom:30px;padding-bottom:20px;border-bottom:1px solid #334155}h1{color:#38bdf8;margin-bottom:10px;font-size:2.5rem;display:flex;align-items:center;justify-content:center;gap:15px}h1 i{font-size:2.2rem}.tutorial-btn{background:transparent;border:none;color:#64748b;font-size:1.4rem;cursor:pointer;padding:4px 8px;border-radius:6px;transition:color .2s ease,background-color .2s ease;margin-left:8px}.tutorial-btn:hover{color:#38bdf8;background-color:#38bdf81a}.driver-popover{background-color:#1e293b!important;border:1px solid #334155!important;color:#e2e8f0!important}.driver-popover-title{color:#38bdf8!important;font-size:1.1rem!important}.driver-popover-description{color:#cbd5e1!important}.driver-popover-progress-text{color:#64748b!important}.driver-popover-prev-btn,.driver-popover-next-btn{background-color:#334155!important;color:#f8fafc!important;border:1px solid #475569!important;border-radius:6px!important}.driver-popover-prev-btn:hover,.driver-popover-next-btn:hover{background-color:#475569!important}.driver-popover-close-btn{color:#94a3b8!important}.driver-popover-close-btn:hover{color:#f8fafc!important}.driver-popover-arrow-side-left.driver-popover-arrow,.driver-popover-arrow-side-right.driver-popover-arrow,.driver-popover-arrow-side-top.driver-popover-arrow,.driver-popover-arrow-side-bottom.driver-popover-arrow{border-color:#1e293b!important}.subtitle{color:#94a3b8;font-size:1.1rem;max-width:800px;margin:0 auto}.input-section{background-color:#1e293b;border-radius:10px;padding:25px;margin-bottom:30px;box-shadow:0 4px 6px #0003;border:1px solid #334155;position:relative}.input-row{display:flex;flex-wrap:wrap;gap:20px}.input-group{flex:1;min-width:250px}label{display:block;margin-bottom:8px;color:#cbd5e1;font-weight:600;display:flex;align-items:center;gap:8px}input,select{width:100%;padding:12px;background-color:#334155;border:1px solid #475569;border-radius:6px;color:#f8fafc;font-size:1rem;transition:border-color .3s ease,box-shadow .3s ease}input:focus,select:focus{outline:none;border-color:#38bdf8;box-shadow:0 0 0 3px #38bdf833}.output-section{margin-top:40px}.output-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.section-title{color:#38bdf8;font-size:1.8rem;display:flex;align-items:center;gap:10px}.code-selector{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:25px;border-bottom:1px solid #334155;padding-bottom:15px}.code-tab{padding:12px 24px;background-color:#334155;border-radius:6px;cursor:pointer;transition:background-color .3s ease;display:flex;align-items:center;gap:8px;font-weight:500;flex:1;min-width:180px;justify-content:center}.code-tab.active{background:linear-gradient(135deg,#0ea5e9,#3b82f6);color:#fff;box-shadow:0 4px 8px #2563eb4d}.pulse-display{background-color:#1e293b;border-radius:10px;padding:25px;margin-bottom:30px;box-shadow:0 4px 6px #0003;border:1px solid #334155;overflow-x:auto}.pulse-title{display:flex;justify-content:space-between;margin-bottom:20px;color:#38bdf8;font-size:1.4rem;flex-wrap:wrap;gap:15px}.bit-count{background-color:#334155;padding:8px 16px;border-radius:20px;font-size:1rem;color:#cbd5e1}.pulse-grid{display:flex;flex-wrap:nowrap;gap:var(--bit-gap, 0px);margin-top:30px;padding:15px;background-color:#0f172a;border-radius:8px;min-height:150px;overflow-x:auto;overflow-y:visible}.char-group{display:flex;flex-direction:column;padding:50px 0 10px;border-radius:0;position:relative;margin-right:0;width:var(--bit-group-width, auto);min-width:min-content}.char-label{position:absolute;top:-5px;left:50%;transform:translate(-50%);font-size:1rem;font-weight:600;color:#38bdf8;background-color:#1e293b;padding:4px 12px;border-radius:6px;border:1px solid #334155;white-space:nowrap;z-index:10}.char-group:nth-child(1){background-color:#ef44440d}.char-group:nth-child(2){background-color:#fb923c0d}.char-group:nth-child(3){background-color:#facc150d}.char-group:nth-child(4){background-color:#22c55e0d}.char-group:nth-child(5){background-color:#3b82f60d}.char-group:nth-child(6){background-color:#8b5cf60d}.char-group:nth-child(7){background-color:#ec48990d}.char-group:nth-child(n+8){background-color:#94a3b80d}.bits-row{display:flex;gap:var(--bit-gap, 0px);margin-bottom:8px;flex-shrink:0;padding:0 var(--bit-gap, 0px)}.toggle{display:flex;align-items:center;flex-shrink:0}.toggle input[type=checkbox]{width:16px;height:16px;accent-color:#38bdf8}.toggle-label{display:none}.options-toggle{position:fixed;left:0;top:50%;transform:translateY(-50%);width:36px;height:64px;border-radius:0 8px 8px 0;border:1px solid #334155;background-color:#0f172a;color:#38bdf8;font-size:1.2rem;font-weight:700;cursor:pointer;z-index:2000}.options-toggle.open{left:220px}.options-panel{position:fixed;left:0;top:0;height:100vh;width:220px;display:flex;flex-direction:column;gap:16px;padding:16px 12px;box-sizing:border-box;border-radius:0 12px 12px 0;background-color:#0f172a;border-right:1px solid #334155;transform:translate(-100%);transition:transform .3s ease;z-index:1500;overflow-y:auto;overflow-x:hidden}.options-panel.open{transform:translate(0)}.options-row{display:flex;flex-direction:column;gap:12px;padding-bottom:12px;border-bottom:1px solid #334155}.options-row:last-child{border-bottom:none;padding-bottom:0}.option-item{display:flex;align-items:center;justify-content:space-between;gap:8px}.option-title{display:flex;align-items:center;gap:6px;color:#cbd5e1;font-weight:600;font-size:.8rem;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.option-title i{font-size:.85rem;flex-shrink:0}.option-item input[type=range]{width:70px;height:6px;flex-shrink:0}.slider-row{display:flex;align-items:center;gap:6px;flex-shrink:0}.slider-row input[type=range]{width:60px}.range-value{color:#94a3b8;font-size:.7rem;min-width:24px}.color-input{width:32px;height:24px;border:none;border-radius:4px;background-color:transparent;cursor:pointer;flex-shrink:0}.grid-size-select{width:60px;padding:4px 8px;font-size:.8rem;flex-shrink:0}.export-actions{display:flex;gap:8px;flex-wrap:wrap}.export-actions button{background-color:#334155;color:#f8fafc;border:1px solid #475569;border-radius:6px;padding:4px 10px;cursor:pointer;font-weight:600;font-size:.8rem}.export-actions button:hover{background-color:#475569}.bit-container{display:flex;flex-direction:column;align-items:center;flex-shrink:0}.bit-label{font-size:.75rem;color:#94a3b8;margin-top:5px;text-align:center;min-height:30px;display:flex;align-items:center;justify-content:center;background-color:#1e293bb3;padding:4px 6px;border-radius:4px;flex-direction:column;white-space:nowrap}.bit-box{width:var(--bit-size, 45px);height:var(--bit-size, 45px);min-width:var(--bit-size, 45px);min-height:var(--bit-size, 45px);display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;border:none;border-top:1px solid #475569;border-bottom:1px solid #475569;border-left:1px solid rgba(139,92,246,.2);position:relative;background-color:#0f172a;border-radius:0;overflow:visible;flex-shrink:0}.bit-box:before{content:"";position:absolute;top:0;bottom:0;left:0;width:1px;background-color:#8b5cf633;z-index:4;pointer-events:none}.bit-cell{position:relative;border-right:1px solid rgba(71,85,105,.3);border-bottom:1px solid rgba(71,85,105,.3)}.bit-cell:nth-child(2n){border-right:none}.bit-cell:nth-child(n+3){border-bottom:none}.voltage-line{position:absolute;left:0;right:0;height:1px;z-index:5;pointer-events:none}.top-line,.middle-line,.bottom-line{background-color:#38bdf833}.vertical-line{position:absolute;top:0;bottom:0;width:1px;z-index:5;pointer-events:none}.left-line,.center-line,.right-line{background-color:#8b5cf626}.pulse-segment{position:absolute;z-index:10;pointer-events:none}.horizontal-pulse{height:4px;margin-top:-2px;border-radius:0}.vertical-pulse{width:4px;margin-left:-2px;border-radius:0}.smooth-connectors .horizontal-pulse,.smooth-connectors .vertical-pulse{border-radius:999px}.midbit-marker{left:50%;top:12%;bottom:12%;width:2px;margin-left:-1px;background-color:#38bdf8e6}.bit-box.active-bit{box-shadow:0 0 0 2px #38bdf8cc}.pulse-grid.hide-grid-lines .voltage-line,.pulse-grid.hide-grid-lines .vertical-line,.pulse-grid.hide-grid-lines .bit-cell{display:none}.pulse-grid.hide-grid-lines .bit-box:before{opacity:0}.pulse-grid.hide-bit-labels .bit-label,.pulse-grid.hide-char-boundaries .char-label{display:none}.pulse-grid.hide-char-boundaries .char-group{background-color:transparent}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;color:#64748b;background-color:#0f172a;border-radius:8px;margin-top:30px}.empty-state i{font-size:3rem;margin-bottom:15px;color:#475569}.empty-state p{font-size:1.1rem}.conversion-steps{background-color:#1e293b;border-radius:10px;padding:25px;margin-top:30px;box-shadow:0 4px 6px #0003;border:1px solid #334155}.steps-title{color:#38bdf8;margin-bottom:20px;font-size:1.4rem;display:flex;align-items:center;gap:10px}.step{margin-bottom:15px;padding:15px;border-bottom:1px solid #334155;border-radius:6px}.step:last-child{border-bottom:none}.step-title{color:#cbd5e1;font-weight:600;margin-bottom:8px;font-size:1.1rem}.step-content{color:#94a3b8;font-family:Courier New,monospace;background-color:#0f172a;padding:10px;border-radius:4px;overflow-x:auto;white-space:nowrap}.legend{display:flex;justify-content:center;gap:30px;margin-top:20px;flex-wrap:wrap}.legend-item{display:flex;align-items:center;gap:8px}.legend-color{width:20px;height:4px}.legend-color.high{background-color:#10b981}.legend-color.zero{background-color:#f59e0b}.legend-color.low{background-color:#ef4444}.legend-color.timing{background-color:#8b5cf6;width:4px;height:20px}.legend-color.connector{background-color:#38bdf8;width:4px;height:20px}.legend-text{font-size:.9rem;color:#94a3b8}.pulse-description{margin-top:15px;color:#94a3b8;font-style:italic;font-size:.95rem;padding:12px;background-color:#1e293bb3;border-radius:6px;border-left:4px solid #0ea5e9}.encoding-aids{margin-top:15px;display:flex;flex-direction:column;gap:12px;background-color:#0f172acc;padding:12px;border-radius:6px;border:1px solid #334155}.encoding-row{display:flex;flex-direction:column;gap:6px}.encoding-label{font-size:.85rem;color:#94a3b8;font-weight:600;text-transform:uppercase;letter-spacing:.04em}.encoding-value{font-family:Courier New,monospace;color:#e2e8f0;font-size:.9rem;white-space:nowrap;overflow-x:auto}footer{margin-top:40px;text-align:center;padding:20px;color:#94a3b8;border-top:1px solid #334155;font-size:.9rem}@media (max-width: 768px){.input-row{flex-direction:column}.code-selector{justify-content:center}.code-tab{min-width:150px}.pulse-grid{justify-content:flex-start}h1{font-size:2rem}.pulse-title{flex-direction:column;align-items:flex-start;gap:10px}.legend{gap:15px}}@media (max-width: 480px){.app{padding:10px}h1{font-size:1.8rem}.code-tab{min-width:100%}}body{margin:0;padding:0}#root{width:100%;min-height:100vh}