body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background-color:#f4f7f9;color:#333;line-height:1.6;margin:0;padding:20px}.app-container{display:flex;max-width:1400px;margin:0 auto;background:#fff;border-radius:10px;box-shadow:0 4px 20px rgba(0,0,0,.05);overflow:hidden;flex-wrap:wrap}.demo-panel{flex:1;padding:30px;border-right:1px solid #e0e0e0;min-width:450px}.demo-panel h1{color:#0052cc;border-bottom:2px solid #0052cc;padding-bottom:10px}.state-box{background-color:#f9f9f9;border:1px solid #ddd;border-radius:8px;padding:20px;margin-bottom:25px}.state-box h3{margin-top:0}.state-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:15px;margin-bottom:20px}.state-metric{background:#fff;border:1px solid #e0e0e0;border-radius:6px;padding:15px}.state-metric span{display:block;font-size:.85em;color:#555;margin-bottom:5px;font-weight:500}.state-metric strong{font-size:1.2em;color:#0052cc;word-break:break-all}.state-metric strong.address{font-size:1em;font-family:SFMono-Regular,Consolas,Menlo,monospace;color:#333}.state-section{margin-top:20px}.state-section h4{margin-bottom:10px;border-bottom:1px solid #ddd;padding-bottom:5px}.state-table{width:100%;border-collapse:collapse;font-size:.95em}.state-table td,.state-table th{text-align:left;padding:10px 8px;border-bottom:1px solid #eee}.state-table th{background-color:#f7f7f7;color:#333}.state-table .address{font-family:SFMono-Regular,Consolas,Menlo,monospace;font-size:.9em;color:#666}.controls-box .step{margin-bottom:20px;padding-bottom:20px;border-bottom:1px dashed #ccc}.controls-box .step:last-child{border-bottom:none}.controls-box .note{font-size:.9em;color:#555;margin-top:10px}button{font-size:1.1em;font-weight:700;color:#fff;background-color:#007bff;border:none;padding:12px 20px;border-radius:6px;cursor:pointer;transition:background-color .2s ease,transform .1s ease}button:hover{background-color:#0056b3}button:active{transform:scale(.98)}button#btn-reset{background-color:#6c757d}button#btn-reset:hover{background-color:#5a6268}.hidden{display:none}.code-panel{flex:1.2;padding:30px;background-color:#2d2d2d;color:#f8f8f2;overflow-y:auto;max-height:90vh;min-width:450px}.code-panel h2,.code-panel h3{color:#50fa7b;border-bottom:1px solid #555;padding-bottom:5px}#explanation-box{background:#44475a;padding:15px;border-radius:5px;margin-bottom:20px;border-left:5px solid #ff79c6}#explanation-text{font-size:1.05em;margin:0}#btn-toggle-details{font-size:.9em;font-weight:700;color:#f8f8f2;background-color:#6272a4;border:none;padding:10px 15px;border-radius:6px;cursor:pointer;transition:background-color .2s ease;width:100%}#btn-toggle-details:hover{background-color:#44475a}.collapsible{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease-out}.collapsible.open{grid-template-rows:1fr}.collapsible-content{overflow:hidden}pre{background-color:#282a36;padding:15px;border-radius:5px;overflow-x:auto;font-size:.9em;margin-top:20px}code{font-family:SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace}.highlight{background-color:#44475a;display:block;margin:-15px;padding:15px;border-left:5px solid #50fa7b}