*{margin:0;padding:0;box-sizing:border-box}:root{--color-primary: #4A90D9;--color-primary-dark: #3A7BC8;--color-secondary: #5CB85C;--color-warning: #F0AD4E;--color-danger: #D9534F;--color-bg-main: #F5F7FA;--color-bg-panel: #FFFFFF;--color-bg-dark: #2D3748;--color-text-primary: #2D3748;--color-text-secondary: #718096;--color-text-light: #FFFFFF;--color-border: #E2E8F0;--color-led-off: #4A5568;--color-led-red: #FF4444;--color-led-green: #44FF44;--color-led-blue: #4444FF;--font-main: "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;--font-mono: "SF Mono", "Consolas", monospace;--font-size-large: 1.25rem;--font-size-normal: 1rem;--font-size-small: .875rem;--border-radius: 12px;--spacing-xs: .5rem;--spacing-sm: .75rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem}html,body,#root{width:100%;height:100%;font-family:var(--font-main);background-color:var(--color-bg-main);color:var(--color-text-primary);overflow:hidden}.app-container{display:grid;grid-template-columns:1fr 400px;grid-template-rows:60px 1fr auto;height:100vh;gap:var(--spacing-sm);padding:var(--spacing-sm)}.app-footer{grid-column:1 / -1;display:flex;justify-content:center;align-items:center;padding:var(--spacing-xs);color:var(--color-text-secondary);font-size:.75rem;font-weight:500;letter-spacing:.05em;opacity:.8}.app-header{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-dark) 100%);color:var(--color-text-light);padding:0 var(--spacing-lg);border-radius:var(--border-radius);box-shadow:0 4px 12px #4a90d94d}.app-header h1{font-size:1.5rem;font-weight:700;letter-spacing:.05em}.header-status{display:flex;align-items:center;gap:var(--spacing-md)}.status-indicator{display:flex;align-items:center;gap:var(--spacing-xs);background:#fff3;padding:var(--spacing-xs) var(--spacing-sm);border-radius:20px;font-size:var(--font-size-small)}.status-dot{width:10px;height:10px;border-radius:50%;background:var(--color-secondary);animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.simulation-panel{background:var(--color-bg-panel);border-radius:var(--border-radius);overflow:hidden;position:relative;box-shadow:0 2px 8px #00000014}.simulation-panel canvas{display:block}.controller-overlay{position:absolute;bottom:var(--spacing-md);left:var(--spacing-md);background:#2d3748e6;color:var(--color-text-light);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--border-radius);font-size:var(--font-size-small)}.controller-hint{display:flex;flex-wrap:wrap;gap:var(--spacing-sm)}.key-hint{display:flex;align-items:center;gap:4px}.key{background:var(--color-bg-panel);color:var(--color-text-primary);padding:2px 8px;border-radius:4px;font-family:var(--font-mono);font-size:.75rem;font-weight:600}.code-panel{display:flex;flex-direction:column;gap:var(--spacing-sm);overflow:hidden}.panel-tabs{display:flex;background:var(--color-bg-panel);border-radius:var(--border-radius);padding:var(--spacing-xs);box-shadow:0 2px 8px #00000014}.panel-tab{flex:1;padding:var(--spacing-sm);border:none;background:transparent;font-family:var(--font-main);font-size:var(--font-size-normal);font-weight:600;color:var(--color-text-secondary);cursor:pointer;border-radius:8px;transition:all .2s ease}.panel-tab:hover{color:var(--color-text-primary);background:var(--color-bg-main)}.panel-tab.active{color:var(--color-text-light);background:var(--color-primary)}.editor-container{flex:1;background:var(--color-bg-panel);border-radius:var(--border-radius);overflow:hidden;display:flex;flex-direction:column;box-shadow:0 2px 8px #00000014}.editor-header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-sm) var(--spacing-md);background:var(--color-bg-dark);color:var(--color-text-light)}.editor-title{font-size:var(--font-size-small);font-weight:600}.editor-actions{display:flex;gap:var(--spacing-xs)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-xs);padding:var(--spacing-xs) var(--spacing-md);border:none;border-radius:8px;font-family:var(--font-main);font-size:var(--font-size-small);font-weight:600;cursor:pointer;transition:all .2s ease}.btn-primary{background:var(--color-secondary);color:var(--color-text-light)}.btn-primary:hover{background:#4cae4c;transform:translateY(-1px)}.btn-secondary{background:var(--color-bg-main);color:var(--color-text-primary)}.btn-secondary:hover{background:var(--color-border)}.btn-danger{background:var(--color-danger);color:var(--color-text-light)}.btn-danger:hover{background:#c9433c}.error-panel{background:#fff5f5;border:2px solid var(--color-danger);border-radius:var(--border-radius);padding:var(--spacing-md);margin-top:var(--spacing-sm)}.error-header{display:flex;align-items:center;gap:var(--spacing-sm);color:var(--color-danger);font-weight:700;margin-bottom:var(--spacing-sm)}.error-icon{font-size:1.5rem}.error-message{background:var(--color-bg-panel);padding:var(--spacing-sm);border-radius:8px;font-family:var(--font-mono);font-size:var(--font-size-small);color:var(--color-text-primary);white-space:pre-wrap}.error-hint{margin-top:var(--spacing-sm);padding:var(--spacing-sm);background:#fef3c7;border-radius:8px;color:#92400e;font-size:var(--font-size-small)}.lesson-selector{background:var(--color-bg-panel);border-radius:var(--border-radius);padding:var(--spacing-md);box-shadow:0 2px 8px #00000014}.lesson-title{font-size:var(--font-size-large);font-weight:700;margin-bottom:var(--spacing-sm);color:var(--color-primary)}.lesson-description{font-size:var(--font-size-normal);color:var(--color-text-secondary);line-height:1.6}.lesson-list{display:flex;flex-direction:column;gap:var(--spacing-xs);margin-top:var(--spacing-md)}.lesson-item{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);background:var(--color-bg-main);border:2px solid transparent;border-radius:8px;cursor:pointer;transition:all .2s ease}.lesson-item:hover{border-color:var(--color-primary)}.lesson-item.active{border-color:var(--color-primary);background:#ebf4ff}.lesson-number{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:var(--color-primary);color:var(--color-text-light);border-radius:50%;font-size:var(--font-size-small);font-weight:700}.lesson-item.completed .lesson-number{background:var(--color-secondary)}.success-panel{background:#f0fff4;border:2px solid var(--color-secondary);border-radius:var(--border-radius);padding:var(--spacing-md);text-align:center}.success-header{color:var(--color-secondary);font-size:var(--font-size-large);font-weight:700;margin-bottom:var(--spacing-sm)}.success-message{color:var(--color-text-secondary)}.robot-status{position:absolute;top:var(--spacing-md);left:var(--spacing-md);background:#fffffff2;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--border-radius);box-shadow:0 2px 8px #0000001a}.status-row{display:flex;align-items:center;gap:var(--spacing-sm);font-size:var(--font-size-small)}.status-label{color:var(--color-text-secondary);min-width:80px}.led-indicator{width:16px;height:16px;border-radius:50%;border:2px solid var(--color-border);transition:all .3s ease}.led-indicator.on{box-shadow:0 0 10px currentColor}.touch-controls{display:none}.touch-controls-inner{display:flex;align-items:center;justify-content:center;gap:var(--spacing-md);padding:var(--spacing-sm);background:var(--color-bg-panel);border-radius:var(--border-radius);box-shadow:0 2px 8px #00000014}.touch-dpad{display:grid;grid-template-columns:48px 48px 48px;grid-template-rows:48px 48px 48px;gap:4px}.touch-btn{width:48px;height:48px;border:none;border-radius:10px;font-size:1.2rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s ease;-webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-user-select:none;user-select:none}.touch-btn-move{background:var(--color-primary);color:var(--color-text-light);box-shadow:0 3px 6px #4a90d94d}.touch-btn-move:active{background:var(--color-primary-dark);transform:scale(.92);box-shadow:0 1px 3px #4a90d94d}.touch-btn-action{width:56px;height:56px;border-radius:50%;font-size:.7rem;font-weight:700;box-shadow:0 3px 6px #00000026}.touch-btn-led{background:var(--color-warning);color:var(--color-text-primary)}.touch-btn-led:active{background:#e09a3e;transform:scale(.92)}.touch-btn-reset{background:var(--color-bg-main);color:var(--color-text-primary);border:2px solid var(--color-border)}.touch-btn-reset:active{background:var(--color-border);transform:scale(.92)}.touch-action-buttons{display:flex;flex-direction:column;gap:var(--spacing-sm);align-items:center}@media (max-width: 768px){html,body,#root{overflow:auto;height:auto;min-height:100%}.app-container{grid-template-columns:1fr;grid-template-rows:50px 40vh auto auto;height:auto;min-height:100vh;gap:var(--spacing-xs);padding:var(--spacing-xs)}.app-header{padding:0 var(--spacing-md)}.app-header h1{font-size:1.1rem}.simulation-panel{min-height:250px}.code-panel{grid-row:auto;min-height:0;overflow:visible}.editor-container{min-height:250px}.touch-controls{display:block}.controller-overlay{display:none}.robot-status{padding:var(--spacing-xs) var(--spacing-sm);font-size:.75rem}.status-label{min-width:50px}.lesson-selector{padding:var(--spacing-sm)}.code-explanation{max-height:150px}.panel-tab{padding:var(--spacing-xs) var(--spacing-sm);font-size:var(--font-size-small)}.guide-modal{width:95%;max-height:90vh;border-radius:16px;border-width:3px}.guide-header{padding:var(--spacing-sm) var(--spacing-md)}.guide-header h2{font-size:1.2rem}.guide-content{padding:var(--spacing-md)}.step-icon{width:40px;height:40px;font-size:1.5rem}.guide-section h3{font-size:1rem;padding:var(--spacing-xs) var(--spacing-sm)}.guide-step{gap:var(--spacing-sm)}.btn-large{font-size:1rem;padding:10px 36px}.reset-position-btn{padding:6px 10px;font-size:.75rem}.app-footer{padding:var(--spacing-xs);font-size:.65rem}}@media (max-width: 480px){.app-container{grid-template-rows:44px 35vh auto auto;gap:4px;padding:4px}.app-header h1{font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.app-header{padding:0 var(--spacing-sm);border-radius:8px}.header-status{gap:var(--spacing-xs)}.status-indicator{padding:4px 8px;font-size:.7rem}.status-indicator .status-dot{width:7px;height:7px}.header-status .btn{padding:5px 10px!important;font-size:.7rem;border-radius:16px!important}.simulation-panel{min-height:200px;border-radius:8px}.robot-status{top:var(--spacing-xs);left:var(--spacing-xs);padding:4px 8px;border-radius:8px;font-size:.65rem}.led-indicator{width:12px;height:12px}.reset-position-btn{top:var(--spacing-xs);right:var(--spacing-xs);padding:4px 8px;font-size:.65rem;border-radius:6px}.touch-dpad{grid-template-columns:42px 42px 42px;grid-template-rows:42px 42px 42px;gap:3px}.touch-btn{width:42px;height:42px;font-size:1rem;border-radius:8px}.touch-btn-action{width:48px;height:48px;font-size:.6rem}.touch-controls-inner{padding:var(--spacing-xs);gap:var(--spacing-sm)}.editor-container{min-height:200px;border-radius:8px}.editor-header{padding:var(--spacing-xs) var(--spacing-sm)}.editor-title{font-size:.75rem}.btn{padding:6px 10px;font-size:.75rem}.language-selector{padding:4px var(--spacing-xs);border-radius:8px}.language-selector-label{font-size:.7rem}.language-option{padding:4px 8px;font-size:.7rem;border-radius:6px}.panel-tabs{border-radius:8px;padding:4px}.panel-tab{padding:6px;font-size:.75rem;border-radius:6px}.lesson-title{font-size:1rem}.lesson-item{padding:var(--spacing-xs) var(--spacing-sm)}.lesson-number{width:24px;height:24px;font-size:.7rem}.guide-modal{width:98%;max-height:95vh;border-radius:12px;border-width:2px}.guide-header h2{font-size:1rem}.guide-content{padding:var(--spacing-sm)}.guide-section h3{font-size:.9rem;margin-bottom:var(--spacing-sm)}.guide-section p{font-size:.85rem;line-height:1.6}.step-icon{width:36px;height:36px;font-size:1.2rem}.step-text h4{font-size:.85rem}.step-text p{font-size:.8rem}.key-list{padding:var(--spacing-sm);font-size:.8rem}.key-list b{padding:3px 6px;min-width:30px;font-size:.7rem}.btn-large{font-size:.9rem;padding:8px 28px}.error-panel{padding:var(--spacing-sm)}.error-message,.error-hint{font-size:.75rem}.code-explanation{max-height:120px;padding:var(--spacing-sm);border-radius:8px}}.language-selector{display:flex;flex-wrap:wrap;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-xs) var(--spacing-sm);background:var(--color-bg-panel);border-radius:var(--border-radius);box-shadow:0 2px 8px #00000014}.language-selector-label{font-size:var(--font-size-small);color:var(--color-text-secondary);white-space:nowrap;margin-right:var(--spacing-xs)}.language-options{display:flex;flex-wrap:wrap;gap:4px}.language-option{padding:var(--spacing-xs) var(--spacing-sm);border:2px solid var(--color-border);background:var(--color-bg-main);border-radius:8px;font-family:var(--font-main);font-size:var(--font-size-small);font-weight:600;color:var(--color-text-secondary);cursor:pointer;transition:all .2s ease}.language-option:hover{border-color:var(--color-primary);color:var(--color-primary)}.language-option.active{border-color:var(--color-primary);background:var(--color-primary);color:var(--color-text-light)}.code-explanation{background:var(--color-bg-panel);border-radius:var(--border-radius);padding:var(--spacing-md);box-shadow:0 2px 8px #00000014;max-height:200px;overflow-y:auto}.explanation-header{font-size:var(--font-size-normal);font-weight:700;color:var(--color-primary);margin-bottom:var(--spacing-sm);padding-bottom:var(--spacing-xs);border-bottom:2px solid var(--color-border)}.explanation-empty{font-size:var(--font-size-small);color:var(--color-text-secondary);text-align:center;padding:var(--spacing-md)}.explanation-list{display:flex;flex-direction:column;gap:var(--spacing-xs)}.explanation-item{background:var(--color-bg-main);border-radius:8px;cursor:pointer;transition:all .2s ease;overflow:hidden}.explanation-item:hover{background:#ebf4ff}.explanation-item-header{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm)}.explanation-keyword{background:var(--color-bg-dark);color:#e2e8f0;padding:2px 8px;border-radius:4px;font-family:var(--font-mono);font-size:.75rem}.explanation-title{flex:1;font-size:var(--font-size-small);font-weight:600;color:var(--color-text-primary)}.explanation-toggle{font-family:var(--font-mono);font-size:.75rem;color:var(--color-text-secondary)}.explanation-content{padding:0 var(--spacing-sm) var(--spacing-sm) var(--spacing-sm);font-size:var(--font-size-small);color:var(--color-text-secondary);line-height:1.6;border-top:1px solid var(--color-border);margin-top:var(--spacing-xs);padding-top:var(--spacing-sm)}.explanation-item.expanded{background:#ebf4ff}.scratch-view{font-family:var(--font-main);padding:var(--spacing-md);background:#f0f0f0;min-height:200px}.scratch-block{display:inline-block;padding:8px 12px;margin:4px 0;border-radius:8px;font-size:var(--font-size-normal);font-weight:600;color:#fff;box-shadow:0 2px 4px #0003}.scratch-block.motion{background:#4c97ff}.scratch-block.looks{background:#96f}.scratch-block.control{background:#ffab19}.scratch-block.events{background:#ffbf00}.reset-position-btn{position:absolute;top:var(--spacing-md);right:var(--spacing-md);background:#ffffffe6;border:2px solid var(--color-border);border-radius:8px;padding:var(--spacing-xs) var(--spacing-sm);font-family:var(--font-main);font-size:var(--font-size-small);font-weight:600;color:var(--color-text-secondary);cursor:pointer;transition:all .2s ease;z-index:10;box-shadow:0 2px 4px #0000001a}.reset-position-btn:hover{background:#fff;border-color:var(--color-primary);color:var(--color-primary);transform:translateY(-1px);box-shadow:0 4px 8px #00000026}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;display:flex;justify-content:center;align-items:center;z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn .3s ease}.guide-modal{background:#fff;width:90%;max-width:700px;border-radius:20px;overflow:hidden;box-shadow:0 10px 25px #0003;display:flex;flex-direction:column;animation:slideUp .3s ease;border:4px solid var(--color-primary);max-height:85vh}.guide-header{background:var(--color-bg-main);padding:var(--spacing-md) var(--spacing-lg);display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid var(--color-border);flex-shrink:0}.guide-header h2{color:var(--color-primary);font-size:1.5rem;margin:0}.close-btn{background:none;border:none;font-size:2rem;line-height:1;color:var(--color-text-secondary);cursor:pointer;padding:0 8px;border-radius:8px}.close-btn:hover{background:#0000000d;color:var(--color-danger)}.guide-content{padding:var(--spacing-lg);overflow-y:auto;flex:1}.guide-section{margin-bottom:var(--spacing-xl);padding-bottom:var(--spacing-lg);border-bottom:2px dashed var(--color-border)}.guide-section:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}.guide-section h3{background:#ebf4ff;padding:var(--spacing-sm) var(--spacing-md);border-left:6px solid var(--color-secondary);border-radius:0 8px 8px 0;color:var(--color-primary-dark);font-size:1.15rem;margin-bottom:var(--spacing-lg);font-weight:700}.guide-section p{line-height:1.8;color:var(--color-text-primary);margin-bottom:var(--spacing-md);padding:0 var(--spacing-xs)}.guide-step{display:flex;gap:var(--spacing-md);margin-bottom:var(--spacing-md);align-items:flex-start;background:#ffffff80;padding:var(--spacing-xs);border-radius:8px}.guide-step:last-child{margin-bottom:0}.step-icon{font-size:2rem;line-height:1;flex-shrink:0;background:#fff;width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:50%;box-shadow:0 2px 4px #0000001a}.step-text h4{color:var(--color-primary);margin-bottom:4px;font-size:1rem;font-weight:700}.step-text p{margin-bottom:0;font-size:.95rem}.step-text code{background:#fff5f5;padding:2px 6px;border-radius:4px;font-family:var(--font-mono);color:var(--color-danger);font-weight:700;border:1px solid #FED7D7}.key-list{list-style:none;background:#f7fafc;padding:var(--spacing-md);border-radius:12px;margin:var(--spacing-md) 0;border:1px solid var(--color-border)}.key-list li{margin-bottom:var(--spacing-sm);display:flex;align-items:center;gap:var(--spacing-sm);color:var(--color-text-primary);font-weight:500}.key-list li:last-child{margin-bottom:0}.key-list b{background:#fff;padding:4px 10px;border-radius:6px;box-shadow:0 2px #e2e8f0;font-family:var(--font-mono);min-width:40px;text-align:center;display:inline-block;border:1px solid #CBD5E0;color:var(--color-text-primary)}.guide-footer{padding:var(--spacing-md);background:var(--color-bg-main);display:flex;justify-content:center;border-top:2px solid var(--color-border);flex-shrink:0}.btn-large{font-size:1.2rem;padding:12px 48px;border-radius:50px;box-shadow:0 4px 6px #5cb85c4d}.btn-large:hover{transform:translateY(-2px);box-shadow:0 6px 8px #5cb85c66}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}