:root{font-family:Yu Gothic UI,Yu Gothic,YuGothic,Hiragino Kaku Gothic ProN,Noto Sans JP,Meiryo,Segoe UI,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html{overflow:hidden;width:100%;height:100%}pre,code,.code-box{font-family:Consolas,Courier New,Menlo,Monaco,monospace;font-size:14px;line-height:1.4}.lesson-container{box-sizing:border-box;color:inherit;font-family:Yu Gothic UI,Yu Gothic,Noto Sans JP,Meiryo,Segoe UI,Arial,sans-serif}.lesson-container{background:#ffffffd9;border-radius:18px;box-shadow:0 10px 30px #0a141e38;width:min(420px,92vw);height:min(92vh,920px);padding:12px 16px 16px;margin:24px auto;color:#111;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}.problem-header{text-align:left;margin-bottom:4px}.problem-count{font-weight:700;margin-bottom:3px;font-size:14px}.problem-text{font-size:16px;margin-bottom:4px}.code-box{background-color:#2b2b2b;color:#e8e8e8;border-radius:10px;padding:8px;box-sizing:border-box;overflow:auto;margin:4px auto 8px}.inline-code-container{display:inline-flex;align-items:center;flex-wrap:wrap;white-space:pre-wrap;font-family:Consolas,Courier New,Menlo,Monaco,monospace;color:#e8e8e8}.inline-answer{background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.6);color:#fff;font-family:Consolas,Courier New,Menlo,Monaco,monospace;font-size:14px;padding:2px 6px;margin:0 2px;display:inline-block;min-width:36px;max-width:120px;width:auto}.inline-answer:focus{outline:none;background:#ffffff08}.answer-box{width:90%;max-width:720px;margin:0 auto;display:block;box-sizing:border-box;border-radius:10px;padding:8px;font-size:15px}.submit-button-wrap{position:static;left:auto;transform:none;margin-top:6px;z-index:900;display:flex;justify-content:center}.submit-button{display:inline-block;padding:10px 18px;border-radius:12px;border:none;background:#fff;color:#1a1a1a;font-weight:700}.result-window{border-radius:12px}@media (max-width: 600px){.code-box{width:80%;height:20vh}.answer-box{width:90%;min-height:60px;margin:8px auto;position:relative;z-index:auto}}@media (min-width: 601px){.code-box{width:70%;height:160px}}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;padding:0;min-width:320px;width:100vw;height:100vh;overflow:hidden;background:linear-gradient(180deg,#4466a0,#7ac5db);background-attachment:fixed}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.choices-container{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:12px auto;width:90%}.choice-block{background:#f8f8f8;border:2px solid #e0e0e0;border-radius:8px;padding:8px 12px;font-size:14px;cursor:pointer;transition:background-color .2s,border-color .2s;text-align:center;-webkit-user-select:none;user-select:none;font-family:Consolas,Courier New,Menlo,Monaco,monospace}.choice-block:hover{background:#f0f0f0;border-color:silver}.choice-block.selected{background:#c8f5c8;border-color:#70cc70}.reorder-container{width:90%;margin:12px auto}.reorder-answer-display{background:#fff;border:2px solid #d0d0d0;border-radius:8px;padding:10px 12px;font-family:Consolas,Courier New,Menlo,Monaco,monospace;font-size:14px;height:50px;color:#333;white-space:pre-wrap;margin-bottom:12px;overflow-y:auto}.reorder-main{display:flex;gap:8px;align-items:center}.choices-container.reorder-choices{flex:1;width:auto;margin:0}.reorder-buttons{display:flex;flex-direction:column;gap:8px}.undo-button,.newline-button{background:#f0f0f0;border:2px solid #d0d0d0;border-radius:8px;cursor:pointer;transition:background-color .2s;font-size:13px;display:flex;align-items:center;justify-content:center}.undo-button{width:44px;height:44px;font-size:18px;padding:0}.newline-button{width:44px;height:80px;writing-mode:vertical-rl;text-orientation:upright;letter-spacing:-2px;background:#e8f4f8;border-color:#b0d4e0}.submit-newline-button{width:44px;height:80px;writing-mode:vertical-rl;text-orientation:upright;letter-spacing:-2px;background:#e8f4f8;color:#10b981;border:2px solid #10b981;border-radius:8px;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;font-size:13px}.undo-button:hover:not(:disabled),.newline-button:hover{background:#e0e0e0}.newline-button:hover{background:#d0e8f0}.submit-newline-button:hover{background:#d1fae5;border-color:#10b981}.undo-button:disabled{opacity:.4;cursor:not-allowed}.choice-block.used{background:#d0d0d0;border-color:#b0b0b0;cursor:not-allowed;opacity:.6}.debug-visualizer{display:flex;gap:10px;padding:6px 8px;margin:4px 0;min-height:140px;max-height:160px;position:relative}@media (max-width: 600px){.debug-visualizer{min-height:130px;max-height:150px;gap:8px;padding:4px}}.character-area{flex:1;display:flex;align-items:center;justify-content:center;position:relative}.character-image{width:100%;height:auto;max-width:140px;object-fit:contain}@media (max-width: 600px){.character-image{max-width:100px}}.output-area{flex:1;display:flex;flex-direction:column;gap:8px;position:relative}.bubble{background:#fff;border-radius:10px;padding:6px 8px;box-shadow:0 2px 8px #0000001a;display:flex;flex-direction:column;position:relative}.bubble-title{font-size:9px;font-weight:700;color:#666;margin-bottom:3px;text-align:left}.bubble-content{flex:1;overflow-y:auto;overflow-x:hidden;font-family:Consolas,Courier New,Menlo,Monaco,monospace;font-size:13px;line-height:1.4;color:#333;text-align:left}.variable-bubble{flex:1;position:relative}.variable-bubble:before{content:"";position:absolute;left:-8px;top:50%;transform:translateY(-50%);width:6px;height:6px;background:#fff;border-radius:50%;z-index:10;box-shadow:0 0 0 1px #0000001a,-10px 5px 0 -1px #fff,-10px 5px #0000001a,-20px 10px 0 -2px #fff,-20px 10px 0 -1px #0000001a}.variable-item{margin-bottom:4px;white-space:nowrap}.var-name{color:#2c5282;font-weight:600}.var-equals{color:#666}.var-value{color:#c05621}.stdout-bubble{flex:1;transition:background-color .3s ease;position:relative}.stdout-bubble:before{content:"";position:absolute;left:0;top:50%;width:0;height:0;border-style:solid;border-width:8px 12px 8px 0;border-color:transparent white transparent transparent;transform:translate(-12px,-50%) translateY(-8px);filter:drop-shadow(-1px 0 1px rgba(0,0,0,.1));z-index:10}.stdout-bubble.has-error{background:#fee}.stdout-line{margin-bottom:2px;word-wrap:break-word}.stdout-line.error-line{color:#c53030;font-weight:600}.empty-message{color:#999;font-size:11px;font-style:italic;text-align:center;padding:8px 0}.run-button{position:absolute;right:-16px;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:2px solid #4466A0;background:#fff;color:#4466a0;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 10px #4466a04d;transition:all .2s ease;z-index:10}@media (max-width: 600px){.run-button{width:42px;height:42px;font-size:18px;right:-12px}.bubble-title{font-size:8px}.bubble-content{font-size:13px}}.run-button:hover:not(:disabled){background:#4466a0;color:#fff;transform:translateY(-50%) scale(1.05)}.run-button:disabled{opacity:.5;cursor:not-allowed}.hint-button{position:absolute;bottom:-30px;right:-10px;background:#fffde7;color:#5d4037;border:1px solid #f9a825;border-radius:20px;padding:4px 12px;font-size:11px;cursor:pointer;transition:all .2s;box-shadow:0 1px 3px #0000001a;z-index:10}.hint-button:hover{background:#fff9c4;border-color:#f57f17;color:#4e342e}.hint-overlay{position:fixed;inset:0;background:#0006;z-index:1000}.hint-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;border-radius:12px;box-shadow:0 4px 20px #0000004d;width:85%;max-width:300px;z-index:1001;overflow:hidden}.hint-header{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:#f8f8f8;border-bottom:1px solid #e0e0e0}.hint-title{font-size:14px;font-weight:700;color:#333}.hint-close{background:none;border:none;font-size:24px;color:#666;cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;transition:color .2s}.hint-close:hover{color:#333}.hint-content{padding:14px;font-size:13px;line-height:1.6;color:#333;text-align:left;white-space:pre-wrap;max-height:200px;overflow-y:auto}@keyframes error-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-4px)}20%,40%,60%,80%{transform:translate(4px)}}.error-shake{animation:error-shake .6s ease-in-out;background:#fee!important}.bubble-content::-webkit-scrollbar{width:6px}.bubble-content::-webkit-scrollbar-track{background:#0000000d;border-radius:3px}.bubble-content::-webkit-scrollbar-thumb{background:#0003;border-radius:3px}.bubble-content::-webkit-scrollbar-thumb:hover{background:#0000004d}.result-container{background:transparent!important;box-shadow:none!important;position:relative}.result-content{display:flex;flex-direction:column;height:100%;padding:16px 16px 78px;overflow-y:hidden;position:relative}.home-circle-button{position:absolute;top:0;right:0;width:56px;height:56px;border-radius:50%;background:#ffffff4d;border:2px solid white;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:background-color .2s,transform .1s;padding:0;z-index:10}.home-circle-button:hover{background:#fff6;transform:scale(1.05)}.home-icon{font-size:24px;font-weight:700;color:#fff;line-height:1;margin-bottom:2px}.home-label{font-size:9px;font-weight:600;color:#fff;line-height:1}.result-lesson-title{font-size:18px;font-weight:700;margin-bottom:16px;color:#fff;text-align:left;align-self:flex-start}.result-report-title{font-size:14px;font-weight:600;color:#fff;margin-bottom:8px;text-align:left;align-self:flex-start}.result-report-bubble{position:relative;background:#fff;border-radius:12px;padding:20px;margin-bottom:12px;align-self:center;flex-shrink:0}.result-report-bubble:after{content:"";position:absolute;bottom:-10px;left:50%;transform:translate(-50%);width:0;height:0;border-left:12px solid transparent;border-right:12px solid transparent;border-top:10px solid white}.result-summary{display:flex;gap:24px;justify-content:center}.result-score{text-align:center}.score-label{font-size:14px;color:#666;margin-bottom:6px}.score-value{font-size:32px;font-weight:700;color:#333}.result-accuracy{text-align:center}.accuracy-label{font-size:14px;color:#666;margin-bottom:6px}.accuracy-value{font-size:32px;font-weight:700;color:#4466a0}.explanation-header-fixed{margin-bottom:12px;flex-shrink:0}.explanation-section{flex:1;overflow-y:auto;display:flex;flex-direction:column;min-height:0;position:relative}.explanation-section::-webkit-scrollbar{width:8px}.explanation-section::-webkit-scrollbar-track{background:#fff3;border-radius:4px}.explanation-section::-webkit-scrollbar-thumb{background:#fff9;border-radius:4px}.explanation-section::-webkit-scrollbar-thumb:hover{background:#fffc}.explanation-title{font-size:18px;font-weight:600;margin-bottom:8px;color:#fff;text-align:left}.explanation-divider{width:110%;height:1px;background:#fff;margin-left:-5%;margin-bottom:0}.explanation-list{display:flex;flex-direction:column;gap:10px;flex:1;padding-top:12px}.explanation-card{background:#f8f8f8;border-radius:10px;padding:12px 16px;cursor:pointer;transition:background-color .2s,box-shadow .2s;border:2px solid transparent}.explanation-card:hover{background:#f0f0f0}.explanation-card.correct{border-color:#70cc70;background:#e8f5e8}.explanation-card.incorrect{border-color:#f88;background:#ffe8e8}.explanation-card.expanded{box-shadow:0 4px 12px #0000001a}.explanation-hint{flex:1;text-align:center;font-size:11px;color:#999;font-weight:400;margin:0 8px}.explanation-header{display:flex;justify-content:space-between;align-items:center}.explanation-number{font-weight:600;color:#333;font-size:15px}.explanation-status{font-weight:700;font-size:22px;line-height:1}.explanation-card.correct .explanation-status{color:#2a9d2a}.explanation-card.incorrect .explanation-status{color:#d93636}.explanation-body{margin-top:12px;padding-top:12px;border-top:1px solid rgba(0,0,0,.1)}.explanation-question-text{font-size:14px;color:#333;margin-bottom:10px;line-height:1.5}.explanation-code{margin:10px 0;font-size:13px}.explanation-text{font-size:14px;color:#444;line-height:1.6;margin-top:10px;padding:10px;background:#ffffff80;border-radius:6px}.result-buttons{position:absolute;bottom:20px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;gap:12px;width:51%;max-width:143px}.result-button{padding:14px 24px;font-size:16px;font-weight:600;border-radius:16px;border:none;cursor:pointer;transition:background-color .2s,transform .1s}.result-button:hover{transform:translateY(-2px)}.retry-button{background:#fff;color:#4466a0}.retry-button:hover{background:#f0f0f0}.home-button{background:#ffffff4d;color:#fff;border:2px solid white}.home-button:hover{background:#fff6}.ai-question-btn{position:relative;background:#007aff;color:#fff;padding:8px 16px;font-size:.9rem;font-weight:700;border:none;border-radius:20px;cursor:pointer;box-shadow:0 2px 5px #0003;transition:transform .1s ease,background-color .2s;margin-left:10px;margin-bottom:8px}.ai-question-btn:hover{background:#0063cc;transform:scale(1.05)}.ai-question-btn:active{transform:scale(.95)}.ai-question-btn:after{content:"";position:absolute;bottom:-6px;left:12px;width:0;height:0;border-style:solid;border-width:8px 6px 0 6px;border-color:#007AFF transparent transparent transparent;transform:rotate(20deg)}.ai-question-btn:hover:after{border-color:#0063cc transparent transparent transparent}