.App{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;line-height:1.6;color:#333;transition:background-color .3s ease,color .3s ease}.App.dark-mode{background-color:#1a1a1a;color:#f0f0f0}.App.dark-mode header h1{color:#f0f0f0}.App.dark-mode header p{color:#aaa}.App.dark-mode h2{color:#ddd;border-bottom-color:#444}.App.dark-mode .editor-container,.App.dark-mode .output-container{background-color:#2a2a2a;border-color:#444}.App.dark-mode .output-container pre{background-color:#1e1e1e;color:#d4d4d4}.App.dark-mode .instructions code{background-color:#333;color:#d4d4d4}.App.dark-mode footer{border-top-color:#444;color:#aaa}.App.dark-mode footer a{color:#66b3ff}header{text-align:center;margin-bottom:3rem;padding-bottom:1.5rem;border-bottom:1px solid #eee}header h1{margin-bottom:.5rem;color:#2c3e50}header p{color:#7f8c8d;font-size:1.1rem}section{margin-bottom:3rem}.theme-controls{text-align:center}.theme-buttons{display:flex;justify-content:center;gap:1rem;margin-bottom:2rem;flex-wrap:wrap}.theme-buttons button{padding:.75rem 1.5rem;border:2px solid #ddd;background-color:#fff;border-radius:6px;font-size:1rem;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:.5rem}.theme-buttons button:hover{border-color:#3498db;background-color:#f8f9fa}.theme-buttons button.active{background-color:#3498db;color:#fff;border-color:#3498db}.theme-buttons button.active:hover{background-color:#2980b9;border-color:#2980b9}.App.dark-mode .theme-buttons button{background-color:#2a2a2a;border-color:#444;color:#f0f0f0}.App.dark-mode .theme-buttons button:hover{border-color:#66b3ff;background-color:#333}.App.dark-mode .theme-buttons button.active{background-color:#66b3ff;border-color:#66b3ff;color:#1a1a1a}.App.dark-mode .theme-buttons button.active:hover{background-color:#4da6ff;border-color:#4da6ff}h2{color:#34495e;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:2px solid #f0f0f0}.editor-container,.output-container{border:1px solid #ddd;border-radius:8px;padding:1rem;background-color:#fff;box-shadow:0 2px 4px #0000000d}.demo-editor{min-height:300px!important;font-size:16px;line-height:1.6}.demo-editor:focus{border-color:#3498db;box-shadow:0 0 0 2px #3498db33}.output-container pre{margin:0;padding:1rem;background-color:#f8f9fa;border-radius:4px;overflow-x:auto;font-family:SF Mono,Monaco,Courier New,monospace;font-size:14px;line-height:1.5;white-space:pre-wrap;word-wrap:break-word}.instructions ul{padding-left:1.5rem}.instructions li{margin-bottom:.5rem}.instructions code{background-color:#f1f3f4;padding:.2em .4em;border-radius:3px;font-family:SF Mono,Monaco,Courier New,monospace;font-size:.9em}footer{margin-top:3rem;padding-top:1.5rem;border-top:1px solid #eee;text-align:center;color:#7f8c8d;font-size:.9rem}footer a{color:#3498db;text-decoration:none}footer a:hover{text-decoration:underline}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}#root{max-width:800px;margin:0 auto;padding:2rem}