:root{--primary-color: #0a66c2;--path-color: #f8c77e;--path-stroke-color: #f5b042;--path-border: #e7a33e;--bg-color: #f3f2ef;--board-bg: #ffffff;--text-color: #333;--error-bg: #fff0f0;--error-color: #d32f2f;--error-border: #ffcdd2}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;background-color:var(--bg-color);color:var(--text-color);-webkit-font-smoothing:antialiased}.app{max-width:100%;margin:0 auto;padding:20px;display:flex;flex-direction:column;align-items:center;min-height:100vh}header h1{font-size:1.5rem;margin-bottom:1rem;color:var(--text-color)}.controls{width:100%;max-width:600px;margin-bottom:20px;background:white;padding:10px;border-radius:8px;box-shadow:0 2px 4px #0000000d}.top-row,.actions-row{display:flex;justify-content:space-between;gap:10px;margin-bottom:10px;flex-wrap:wrap}.actions-row{margin-bottom:0}button,select{padding:8px 16px;border-radius:16px;border:1px solid #ccc;background:white;cursor:pointer;font-weight:600;font-size:.9rem;transition:background .2s}button:hover{background-color:#f0f0f0}button:disabled{opacity:.5;cursor:not-allowed}.board-wrapper{position:relative;display:flex;flex-direction:column;align-items:center}.error-banner{background-color:var(--error-bg);color:var(--error-color);border:1px solid var(--error-border);padding:8px 16px;border-radius:4px;margin-bottom:10px;font-weight:600;text-align:center;width:100%;max-width:300px;box-shadow:0 2px 4px #0000001a;animation:slideDown .3s ease-out}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.board-container{background:var(--board-bg);padding:8px;border-radius:8px;box-shadow:0 4px 12px #0000001a;touch-action:none}.board-container.mode-drag .cell:not(.head){cursor:default}.board-container.mode-drag .cell.head{cursor:grab}.board-container.mode-drag .cell.head:active{cursor:grabbing}.board-container.mode-click .cell{cursor:pointer}.board-container.mode-click .cell.head{cursor:default}.cell{background-color:#fff;border:1px solid #eee;border-radius:0;position:relative;cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;transition:transform .1s;box-sizing:border-box;width:100%;height:100%;z-index:1}.cell.head{border:2px solid var(--primary-color);z-index:15;box-shadow:0 0 5px #0003;border-radius:4px}.checkpoint{width:60%;height:60%;background-color:#000;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.2em;font-weight:700;z-index:20}.checkpoint.visited{background-color:#333;box-shadow:0 0 0 2px #fff}.help-panel{width:100%;max-width:600px;margin-bottom:15px}.help-toggle{background:none;border:none;color:var(--primary-color);padding:0;text-decoration:underline}.help-content{background:white;padding:10px;border-radius:8px;margin-top:5px;font-size:.9rem}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:100}.modal{background:white;padding:24px;border-radius:8px;max-width:300px;text-align:center}.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}.btn-primary{background-color:var(--primary-color);color:#fff;border:none}.btn-primary:hover{background-color:#004182}@keyframes shake{0%{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}to{transform:translate(0)}}.shake{animation:shake .3s}