:root{--chalk-green: #2d5a3d;--chalk-dark: #1a3a25;--chalk-light: #3d6a4d;--chalk-white: #f5f5f0;--chalk-yellow: #e0d070;--chalk-blue: #5ca0d3;--chalk-red: #e07070;--chalk-green-light: #70c070;--font-chalk: "Comic Sans MS", "Chalkboard SE", cursive;--font-mono: "JetBrains Mono", "Fira Code", monospace;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{font-family:var(--font-chalk);background:var(--chalk-dark);color:var(--chalk-white);line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.app-wrapper{display:flex;height:100vh;width:100%}.app-container{display:flex;flex-direction:column;flex:1;min-width:0;padding:var(--spacing-md);gap:var(--spacing-md)}.app-header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-sm) var(--spacing-md);background:var(--chalk-green);border-radius:var(--radius-md);flex-shrink:0}.header-left{display:flex;align-items:center;gap:var(--spacing-md)}.app-title{font-size:1.5rem;font-weight:400;color:var(--chalk-yellow);text-shadow:0 0 2px rgba(224,208,112,.5)}.header-controls{display:flex;align-items:center;gap:var(--spacing-sm)}.history-selector select{background:var(--chalk-dark);color:var(--chalk-white);border:1px solid rgba(255,255,255,.3);border-radius:var(--radius-sm);padding:var(--spacing-xs) var(--spacing-sm);font-family:var(--font-chalk);font-size:.85rem;cursor:pointer;max-width:200px;text-overflow:ellipsis}.history-selector select:hover{border-color:var(--chalk-yellow)}.problem-section{background:#2d5a3d99;border-radius:var(--radius-md);padding:var(--spacing-sm) var(--spacing-md);flex-shrink:0}.problem-label{font-size:.8rem;color:var(--chalk-yellow);margin-bottom:var(--spacing-xs)}.problem-text{font-size:.95rem;color:var(--chalk-white);line-height:1.5;opacity:.9}.wavy-underline{text-decoration:underline wavy;text-decoration-color:#e07070;text-underline-offset:3px;text-decoration-thickness:1.5px}.model-selector select{background:var(--chalk-dark);color:var(--chalk-white);border:1px solid rgba(255,255,255,.3);border-radius:var(--radius-sm);padding:var(--spacing-xs) var(--spacing-sm);font-family:var(--font-chalk);font-size:.9rem;cursor:pointer;transition:border-color .2s}.model-selector select:hover{border-color:var(--chalk-yellow)}.model-selector select:focus{outline:none;border-color:var(--chalk-yellow)}.debug-toggle{background:var(--chalk-dark);border:1px solid rgba(255,255,255,.3);border-radius:var(--radius-sm);padding:var(--spacing-xs) var(--spacing-sm);color:var(--chalk-white);font-size:1.1rem;cursor:pointer;transition:border-color .2s,background .2s}.debug-toggle:hover{border-color:var(--chalk-yellow);background:#ffffff1a}.debug-toggle.active{background:var(--chalk-yellow);color:var(--chalk-dark);border-color:var(--chalk-yellow)}.main-content{flex:1;display:flex;flex-direction:column;gap:var(--spacing-md);overflow:hidden;min-height:0}.canvas-section{flex:1;min-height:250px;background:var(--chalk-green);border-radius:var(--radius-md);overflow:hidden;position:relative}.canvas-section canvas{width:100%;height:100%;display:block}.narration-section{display:flex;align-items:flex-start;gap:var(--spacing-sm);padding:var(--spacing-md);background:#2d5a3dcc;border-radius:var(--radius-md);flex-shrink:0;min-height:60px;max-height:200px}.narration-icon{font-size:1.5rem;flex-shrink:0;line-height:1}.narration-text{font-size:1.1rem;line-height:1.6;color:var(--chalk-white);flex:1}.narration-text.typing:after{content:"|";animation:blink 1s step-end infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}.board-section{height:150px;min-height:150px;max-height:150px;background:#2d5a3d99;border-radius:var(--radius-md);padding:var(--spacing-sm) var(--spacing-md);flex-shrink:0;display:flex;flex-direction:column}.board-header{display:flex;align-items:center;gap:var(--spacing-sm);padding-bottom:var(--spacing-sm);border-bottom:1px dashed rgba(255,255,255,.3);margin-bottom:var(--spacing-sm)}.board-icon{font-size:1rem}.board-title{font-size:.9rem;color:var(--chalk-yellow)}.board-container{flex:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent}.board-container::-webkit-scrollbar{width:6px}.board-container::-webkit-scrollbar-track{background:transparent}.board-container::-webkit-scrollbar-thumb{background:#ffffff4d;border-radius:3px}.board-item{display:flex;align-items:baseline;gap:var(--spacing-sm);padding:var(--spacing-xs) 0;color:var(--chalk-white);font-size:.95rem;transition:opacity .15s,transform .15s,background .15s}.board-bullet{color:var(--chalk-yellow);font-weight:700;flex-shrink:0}.board-text{flex:1}.board-item.highlighted{background:#ffff001a;border-radius:var(--radius-sm);padding-left:var(--spacing-sm);margin-left:calc(-1 * var(--spacing-sm))}.board-item.highlight-blink{animation:board-blink .12s ease-in-out 4}@keyframes board-blink{0%,to{opacity:1}50%{opacity:.3}}.board-item.highlight-scale{animation:board-scale .15s ease-in-out 3;transform-origin:left center}@keyframes board-scale{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.board-item.highlight-focus_box{outline:2px dashed var(--highlight-color, var(--chalk-yellow));outline-offset:2px;animation:board-focus .5s ease-in-out infinite}@keyframes board-focus{0%,to{outline-offset:2px}50%{outline-offset:4px}}.input-section{background:var(--chalk-green);border-radius:var(--radius-md);padding:var(--spacing-sm) var(--spacing-md);flex-shrink:0}.input-wrapper{display:flex;gap:var(--spacing-sm);align-items:flex-end}.input-field{flex:1;background:var(--chalk-dark);border:1px solid rgba(255,255,255,.3);border-radius:var(--radius-md);padding:var(--spacing-sm) var(--spacing-md);color:var(--chalk-white);font-family:var(--font-chalk);font-size:1rem;resize:none;min-height:44px;max-height:120px;line-height:1.5;transition:border-color .2s}.input-field:focus{outline:none;border-color:var(--chalk-yellow)}.input-field::placeholder{color:#ffffff80}.input-field:disabled{opacity:.6;cursor:not-allowed}.send-button{background:var(--chalk-blue);border:none;border-radius:var(--radius-md);padding:var(--spacing-sm) var(--spacing-lg);color:#fff;font-size:1.2rem;cursor:pointer;transition:background .2s,transform .1s;display:flex;align-items:center;justify-content:center;min-height:44px}.send-button:hover:not(:disabled){background:#4a90c3}.send-button:active:not(:disabled){transform:scale(.95)}.send-button:disabled{background:#666;cursor:not-allowed;opacity:.7}.send-icon{display:block}@media(max-width:768px){.app-container{padding:var(--spacing-sm);gap:var(--spacing-sm)}.app-title{font-size:1.2rem}.canvas-section{min-height:200px}.narration-section{padding:var(--spacing-sm)}.narration-text{font-size:1rem}.board-section{max-height:150px;padding:var(--spacing-sm)}.board-container{max-height:100px}.input-field{font-size:.95rem}.send-button{padding:var(--spacing-sm) var(--spacing-md)}}@media(min-width:1024px){.canvas-section{min-height:350px}.narration-text{font-size:1.2rem}}.hidden{display:none!important}.loading{position:relative;pointer-events:none}.loading:after{content:"";position:absolute;top:50%;left:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border:2px solid rgba(255,255,255,.3);border-top-color:var(--chalk-white);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.debug-panel{width:40%;min-width:350px;background:var(--chalk-dark);border-left:1px solid rgba(255,255,255,.2);display:flex;flex-direction:column;height:100vh;flex-shrink:0}.debug-panel.collapsed{display:none}.debug-panel-header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-sm) var(--spacing-md);background:var(--chalk-green);border-bottom:1px solid rgba(255,255,255,.2);flex-shrink:0}.debug-panel-title{font-size:1rem;color:var(--chalk-yellow);font-weight:400}.debug-close{background:none;border:none;color:var(--chalk-white);font-size:1.5rem;cursor:pointer;padding:0;line-height:1;opacity:.7;transition:opacity .2s}.debug-close:hover{opacity:1}.debug-panel-content{flex:1;padding:var(--spacing-md);overflow-y:auto;display:flex;flex-direction:column;gap:var(--spacing-md)}.debug-section{display:flex;flex-direction:column;gap:var(--spacing-xs);flex:1;min-height:0}.debug-section.prompt-section{flex:2}.debug-section.response-section{flex:1}.debug-label{font-size:.85rem;color:var(--chalk-yellow);font-weight:400;flex-shrink:0}.debug-textarea{width:100%;flex:1;min-height:200px;background:#0000004d;border:1px solid rgba(255,255,255,.2);border-radius:var(--radius-sm);padding:var(--spacing-sm);color:var(--chalk-white);font-family:var(--font-mono);font-size:.8rem;line-height:1.5;resize:none}.debug-textarea:focus{outline:none;border-color:var(--chalk-yellow)}.debug-actions{display:flex;gap:var(--spacing-sm);flex-shrink:0}.debug-btn{flex:1;padding:var(--spacing-sm);border:none;border-radius:var(--radius-sm);font-family:var(--font-chalk);font-size:.9rem;cursor:pointer;transition:background .2s,transform .1s}.debug-btn:active{transform:scale(.98)}.debug-btn-primary{background:var(--chalk-blue);color:#fff}.debug-btn-primary:hover{background:#4a90c3}.debug-btn-secondary{background:#ffffff1a;color:var(--chalk-white);border:1px solid rgba(255,255,255,.3)}.debug-btn-secondary:hover{background:#fff3}.version-section{flex:0 0 auto!important}.version-save-row{display:flex;gap:var(--spacing-sm)}.version-name-input{flex:1;background:#0000004d;border:1px solid rgba(255,255,255,.2);border-radius:var(--radius-sm);padding:var(--spacing-xs) var(--spacing-sm);color:var(--chalk-white);font-family:var(--font-mono);font-size:.8rem}.version-name-input:focus{outline:none;border-color:var(--chalk-yellow)}.version-name-input::placeholder{color:#fff6}.version-save-btn{flex-shrink:0;white-space:nowrap}.version-list-row{display:flex;gap:var(--spacing-sm);margin-top:var(--spacing-xs)}.version-select{flex:1;background:#0000004d;border:1px solid rgba(255,255,255,.2);border-radius:var(--radius-sm);padding:var(--spacing-xs) var(--spacing-sm);color:var(--chalk-white);font-family:var(--font-mono);font-size:.8rem;cursor:pointer}.version-select:focus{outline:none;border-color:var(--chalk-yellow)}.version-action-btn{flex-shrink:0;padding:var(--spacing-xs) var(--spacing-sm)!important;font-size:.8rem!important}.version-action-btn:disabled{opacity:.4;cursor:not-allowed}.debug-btn-danger{background:#e070704d;color:var(--chalk-red);border:1px solid rgba(224,112,112,.5)}.debug-btn-danger:hover:not(:disabled){background:#e0707080}.debug-btn-active{background:#5ca0d34d;color:var(--chalk-blue);border:1px solid rgba(92,160,211,.5)}.debug-btn-active:hover:not(:disabled){background:#5ca0d380}.version-select option.is-active{font-weight:700}.version-tag{font-size:.7rem;color:var(--chalk-blue);opacity:.8}.debug-response{width:100%;flex:1;min-height:100px;background:#0000004d;border:1px solid rgba(255,255,255,.2);border-radius:var(--radius-sm);padding:var(--spacing-sm);color:var(--chalk-green-light);font-family:var(--font-mono);font-size:.75rem;line-height:1.4;overflow-y:auto;white-space:pre-wrap;word-break:break-all;margin:0}@media(max-width:1024px){.debug-panel{width:45%}}@media(max-width:768px){.debug-panel{width:100%;position:fixed;top:0;right:0;z-index:100}.debug-panel.collapsed{display:none}}.log-toggle{background:var(--chalk-dark);border:1px solid rgba(255,255,255,.3);border-radius:var(--radius-sm);padding:var(--spacing-xs) var(--spacing-sm);color:var(--chalk-white);font-size:1.1rem;cursor:pointer;transition:border-color .2s,background .2s}.log-toggle:hover{border-color:var(--chalk-yellow);background:#ffffff1a}.log-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#0009;z-index:200;display:flex;align-items:center;justify-content:center}.log-modal{background:var(--chalk-dark);border:1px solid rgba(255,255,255,.2);border-radius:var(--radius-lg);width:90%;max-width:900px;height:80vh;display:flex;flex-direction:column}.log-modal-header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-md);background:var(--chalk-green);border-radius:var(--radius-lg) var(--radius-lg) 0 0;border-bottom:1px solid rgba(255,255,255,.2);flex-shrink:0}.log-modal-title{font-size:1.1rem;color:var(--chalk-yellow)}.log-modal-close{background:none;border:none;color:var(--chalk-white);font-size:1.5rem;cursor:pointer;opacity:.7;transition:opacity .2s}.log-modal-close:hover{opacity:1}.log-modal-body{flex:1;overflow-y:auto;padding:var(--spacing-md);min-height:0}.log-modal-footer{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-sm) var(--spacing-md);border-top:1px solid rgba(255,255,255,.2);flex-shrink:0}.log-total{font-size:.85rem;color:#fff9}.log-pagination{display:flex;gap:var(--spacing-sm)}.log-list{display:flex;flex-direction:column;gap:var(--spacing-xs)}.log-loading{text-align:center;color:#ffffff80;padding:var(--spacing-lg)}.log-item{display:flex;flex-direction:column;gap:2px;padding:var(--spacing-sm) var(--spacing-md);background:#ffffff0d;border-radius:var(--radius-sm);cursor:pointer;transition:background .15s}.log-item:hover{background:#ffffff1a}.log-item-top{display:flex;justify-content:space-between;align-items:center;gap:var(--spacing-sm)}.log-item-model{font-size:.75rem;color:var(--chalk-blue);background:#5ca0d326;padding:1px 6px;border-radius:3px;flex-shrink:0}.log-item-time{font-size:.75rem;color:#fff6;flex-shrink:0}.log-item-problem{font-size:.85rem;color:var(--chalk-white);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.log-item-preview{font-size:.75rem;color:#ffffff80;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.log-detail-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-md)}.log-detail-back{background:none;border:none;color:var(--chalk-blue);font-family:var(--font-chalk);font-size:.9rem;cursor:pointer;padding:0}.log-detail-back:hover{text-decoration:underline}.log-detail-delete{padding:var(--spacing-xs) var(--spacing-sm)!important;font-size:.8rem!important}.log-detail-meta{font-size:.85rem;color:#fff9;margin-bottom:var(--spacing-md);line-height:1.8}.log-detail-meta strong{color:var(--chalk-yellow);font-weight:400}.log-detail-response{background:#0000004d;border:1px solid rgba(255,255,255,.2);border-radius:var(--radius-sm);padding:var(--spacing-md);color:var(--chalk-green-light);font-family:var(--font-mono);font-size:.8rem;line-height:1.5;white-space:pre-wrap;word-break:break-all;max-height:50vh;overflow-y:auto;margin:0}.chalk-text{text-shadow:0 0 1px rgba(255,255,255,.8),0 0 2px rgba(255,255,255,.4),0 0 4px rgba(255,255,255,.2)}.chalk-text-yellow{color:var(--chalk-yellow, #e0d070);text-shadow:0 0 1px rgba(224,208,112,.8),0 0 2px rgba(224,208,112,.4)}.chalk-text-blue{color:var(--chalk-blue, #5ca0d3);text-shadow:0 0 1px rgba(92,160,211,.8),0 0 2px rgba(92,160,211,.4)}.chalk-text-red{color:var(--chalk-red, #e07070);text-shadow:0 0 1px rgba(224,112,112,.8),0 0 2px rgba(224,112,112,.4)}.blackboard-bg{background-image:repeating-linear-gradient(45deg,transparent,transparent 2px,rgba(0,0,0,.02) 2px,rgba(0,0,0,.02) 4px),radial-gradient(ellipse at 50% 50%,transparent 0%,rgba(0,0,0,.15) 100%),linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.08) 100%)}.chalk-border{position:relative}.chalk-border:before{content:"";position:absolute;inset:-2px;border:2px solid var(--chalk-white, #f5f5f0);border-radius:inherit;opacity:.6;pointer-events:none}.handwritten{font-family:Comic Sans MS,Chalkboard SE,cursive;font-style:normal;letter-spacing:.5px}.chalk-smudge{position:relative}.chalk-smudge:after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent 0%,rgba(255,255,255,.02) 50%,transparent 100%);pointer-events:none}.chalk-highlight{position:relative;display:inline-block}.chalk-highlight:before{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:60%;transform:translateY(-50%);background:#ffff0026;border-radius:4px;z-index:-1}@keyframes chalk-write{0%{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}.chalk-write-anim{animation:chalk-write .5s ease-out forwards}@keyframes chalk-erase{0%{opacity:1;filter:blur(0)}to{opacity:0;filter:blur(4px)}}.chalk-erase-anim{animation:chalk-erase .3s ease-out forwards}@keyframes chalk-fade-in{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.chalk-fade-in{animation:chalk-fade-in .3s ease-out forwards}