.tutorial-container[data-v-0b94be5c]{max-width:1200px;margin:0 auto;padding:20px}.tutorial-content[data-v-0b94be5c]{line-height:1.6}section[data-v-0b94be5c]{margin-bottom:40px}.example-container[data-v-0b94be5c]{display:flex;flex-direction:column;gap:20px;margin:20px 0;padding:20px;border:1px solid #e0e0e0;border-radius:8px}.interactive-demo[data-v-0b94be5c]{padding:20px;background-color:#f5f5f5;border-radius:8px}.demo-button[data-v-0b94be5c]{padding:10px 20px;font-size:16px;background-color:#4caf50;color:#fff;border:none;border-radius:4px;cursor:pointer;transition:background-color .3s}.demo-button[data-v-0b94be5c]:hover{background-color:#45a049}.result-text[data-v-0b94be5c]{margin-top:10px;font-size:16px;color:#666}.mouse-area[data-v-0b94be5c]{width:300px;height:150px;border:2px solid #ddd;margin:20px 0;padding:10px;text-align:center;line-height:150px;background-color:#fff;transition:background-color .3s}.demo-form[data-v-0b94be5c]{max-width:400px}.form-group[data-v-0b94be5c]{margin-bottom:15px}.form-group label[data-v-0b94be5c]{display:block;margin-bottom:5px}.form-group input[data-v-0b94be5c]{width:100%;padding:8px;border:1px solid #ddd;border-radius:4px}.validation-message[data-v-0b94be5c]{font-size:14px;margin-left:10px}.validation-message.valid[data-v-0b94be5c]{color:#4caf50}.validation-message.invalid[data-v-0b94be5c]{color:#f44336}.form-result[data-v-0b94be5c]{margin-top:20px;padding:10px;border-radius:4px}.form-result.success[data-v-0b94be5c]{background-color:#e8f5e9;color:#2e7d32}.form-result.error[data-v-0b94be5c]{background-color:#ffebee;color:#c62828}.todo-list[data-v-0b94be5c]{max-width:400px}.todo-list ul[data-v-0b94be5c]{list-style:none;padding:0}.todo-list li[data-v-0b94be5c]{display:flex;justify-content:space-between;align-items:center;padding:10px;margin:5px 0;background-color:#fff;border:1px solid #ddd;border-radius:4px}.delete-btn[data-v-0b94be5c]{background:none;border:none;cursor:pointer;font-size:16px;padding:0 5px}.add-todo[data-v-0b94be5c]{margin-top:20px;display:flex;gap:10px}.add-todo input[data-v-0b94be5c]{flex:1;padding:8px;border:1px solid #ddd;border-radius:4px}.add-todo button[data-v-0b94be5c]{padding:8px 16px;background-color:#4caf50;color:#fff;border:none;border-radius:4px;cursor:pointer}.info-box[data-v-0b94be5c]{background-color:#e3f2fd;padding:20px;border-radius:8px;margin:20px 0}.recommendation-card[data-v-0b94be5c]:hover{transform:translateY(-2px)}code[data-v-0b94be5c]{background-color:#f8f9fa;padding:2px 4px;border-radius:4px;font-family:monospace}pre code[data-v-0b94be5c]{display:block;padding:15px;overflow-x:auto}.propagation-box[data-v-0b94be5c]{padding:20px}.outer-box[data-v-0b94be5c],.middle-box[data-v-0b94be5c],.inner-box[data-v-0b94be5c]{padding:20px;margin:10px;border:2px solid #ccc;cursor:pointer;transition:background-color .3s}.outer-box[data-v-0b94be5c]{background-color:#f0f0f0}.middle-box[data-v-0b94be5c]{background-color:#e0e0e0}.inner-box[data-v-0b94be5c]{background-color:#d0d0d0}.propagation-result[data-v-0b94be5c]{margin-top:10px;padding:10px;background-color:#f8f9fa;border-radius:4px}.keyboard-demo[data-v-0b94be5c]{padding:20px;background-color:#f8f9fa;border-radius:8px}.demo-section[data-v-0b94be5c]{margin:20px 0;padding:15px;background-color:#fff;border-radius:4px;box-shadow:0 1px 3px #0000001a}.demo-section h4[data-v-0b94be5c]{margin-bottom:10px;color:#333}.keyboard-info[data-v-0b94be5c]{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;padding:15px;background-color:#f8f9fa;border-radius:4px}.special-keys ul[data-v-0b94be5c]{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}.special-keys li[data-v-0b94be5c]{padding:8px;background-color:#f8f9fa;border-radius:4px;text-align:center}.special-key-result[data-v-0b94be5c],.shortcut-result[data-v-0b94be5c]{margin-top:10px;padding:10px;background-color:#e3f2fd;border-radius:4px;min-height:40px}.event-properties[data-v-0b94be5c]{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:15px;margin:20px 0}.event-properties li[data-v-0b94be5c]{padding:10px;background-color:#f8f9fa;border-radius:4px}.event-properties code[data-v-0b94be5c]{background-color:#e3f2fd;padding:2px 4px;border-radius:3px;font-family:monospace}.touch-demo[data-v-0b94be5c]{padding:20px}.touch-area[data-v-0b94be5c]{width:300px;height:200px;background-color:#f0f0f0;display:flex;align-items:center;justify-content:center;border:2px solid #ccc;border-radius:4px;cursor:pointer}.touch-result[data-v-0b94be5c]{margin-top:10px;padding:10px;background-color:#f8f9fa;border-radius:4px}.error-demo[data-v-0b94be5c]{padding:20px;background-color:#f8f9fa;border-radius:8px}.error-demo .demo-section[data-v-0b94be5c]{margin:20px 0;padding:15px;background-color:#fff;border-radius:4px;box-shadow:0 1px 3px #0000001a}.error-demo .demo-section h4[data-v-0b94be5c]{margin-bottom:10px;color:#333}.error-result[data-v-0b94be5c]{margin-top:10px;padding:10px;background-color:#ffebee;color:#c62828;border-radius:4px;min-height:40px}.error-demo .form-group[data-v-0b94be5c]{display:flex;gap:10px;margin-bottom:10px}.error-demo input[data-v-0b94be5c]{padding:8px;border:1px solid #ddd;border-radius:4px}.performance-demo[data-v-0b94be5c]{padding:20px}.scroll-area[data-v-0b94be5c]{height:200px;overflow-y:auto;padding:20px;background-color:#f0f0f0;border:2px solid #ccc;border-radius:4px}.performance-result[data-v-0b94be5c]{margin-top:20px;padding:10px;background-color:#f8f9fa;border-radius:4px}.event-categories[data-v-0b94be5c]{list-style:none;padding:0}.event-categories li[data-v-0b94be5c]{margin:10px 0;padding:10px;background-color:#f8f9fa;border-radius:4px}.event-bubbling-diagram[data-v-0b94be5c]{margin:20px 0;padding:20px;background-color:#f8f9fa;border-radius:8px;display:flex;gap:20px;align-items:flex-start}.bubbling-image[data-v-0b94be5c]{max-width:400px;height:auto;border:1px solid #ddd;border-radius:4px}.diagram-explanation[data-v-0b94be5c]{flex:1}.diagram-explanation ol[data-v-0b94be5c]{margin-left:20px}.code-explanation[data-v-0b94be5c]{margin-top:15px;padding:15px;background-color:#f8f9fa;border-radius:4px}.code-explanation ul[data-v-0b94be5c]{margin-left:20px}.code-explanation li[data-v-0b94be5c]{margin:5px 0}.diagram-explanation>.code-explanation[data-v-0b94be5c]{width:30vw}.touch-device-message[data-v-0b94be5c],.non-touch-device-message[data-v-0b94be5c]{text-align:center;color:#666}.touch-device-message[data-v-0b94be5c]{display:none}.non-touch-device-message[data-v-0b94be5c]{display:block;color:#f44336;font-weight:700}@media (hover: none) and (pointer: coarse){.touch-device-message[data-v-0b94be5c]{display:block}.non-touch-device-message[data-v-0b94be5c]{display:none}}