*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:system-ui,-apple-system,sans-serif;background:#0a0f1a;color:#e2e8f0;height:100vh;overflow:hidden}.layout{display:flex;height:100vh}.canvas-area{flex:1;position:relative;min-width:0}#canvas-container{width:100%;height:100%;position:relative}#canvas-container canvas{display:block;width:100%!important;height:100%!important}.sidebar{width:340px;flex-shrink:0;background:#111827;border-left:1px solid #1f2937;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:14px}.back-link{position:absolute;top:14px;left:14px;font-size:11px;color:#6b7280;text-decoration:none;background:#111827d9;padding:5px 12px;border-radius:20px;border:1px solid #374151;transition:color .15s}.back-link:hover{color:#f3f4f6}.canvas-hint{position:absolute;bottom:12px;left:14px;font-size:11px;color:#374151;font-family:monospace;pointer-events:none}.scene-label{position:absolute;background:#0a0a14ed;border-radius:8px;padding:8px 12px;font-family:monospace;font-size:12px;line-height:1.7;pointer-events:none;white-space:nowrap;transform:translate(-50%,calc(-100% - 12px))}.scene-label hr{opacity:.2;margin:4px 0}.scene-label .label-title{font-weight:700;font-size:13px;margin-bottom:2px}.scene-label .label-sub{font-size:10px;opacity:.65;margin-bottom:2px}.lesson-badge{font-family:monospace;font-size:11px;color:#f59e0b;letter-spacing:.12em}.sidebar h1{font-size:20px;font-weight:700;line-height:1.25;color:#f9fafb}.sidebar .subtitle{font-size:12px;color:#6b7280;margin-top:4px}.sidebar hr{border:none;border-top:1px solid #1f2937}.sidebar section h3{font-size:11px;font-weight:600;color:#9ca3af;text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}.sidebar section p{font-size:12px;color:#9ca3af;line-height:1.6;margin-bottom:6px}.label-blue{color:#60a5fa;font-weight:600}.label-orange{color:#fb923c;font-weight:600}.slider-row{margin-bottom:16px}.slider-row label{display:flex;justify-content:space-between;font-size:13px;font-weight:500;color:#e2e8f0;margin-bottom:5px}.slider-row label span{font-family:monospace;color:#f59e0b;min-width:52px;text-align:right}.slider-row input[type=range]{width:100%;accent-color:#f59e0b;cursor:pointer;margin-bottom:5px}.note{font-size:11px;color:#6b7280;line-height:1.55}.note-highlight{font-size:11px;font-weight:500;color:#f59e0b;margin-bottom:3px}#drop-btn{width:100%;background:#f59e0b;color:#000;font-weight:700;font-size:14px;border:none;border-radius:8px;padding:10px;cursor:pointer;transition:background .15s;margin-top:4px}#drop-btn:hover{background:#fbbf24}#drop-btn:active{background:#d97706}.btn-note{font-size:10px;color:#4b5563;text-align:center;margin-top:4px}.note-card{background:#ffffff08;border-radius:8px;padding:10px 12px;margin-bottom:8px;font-size:12px;color:#9ca3af;line-height:1.55}.note-card.amber{border:1px solid rgba(245,158,11,.3)}.note-card.blue{border:1px solid rgba(96,165,250,.3)}.note-card.orange{border:1px solid rgba(251,146,60,.3)}.note-card .note-title{font-weight:600;margin-bottom:4px}.note-card.amber .note-title{color:#f59e0b}.note-card.blue .note-title{color:#60a5fa}.note-card.orange .note-title{color:#fb923c}.note-card code{background:#ffffff14;padding:1px 5px;border-radius:3px;font-family:monospace;font-size:11px;color:#e2e8f0}.footer-nav{font-size:11px;color:#4b5563;text-align:center;padding:6px 0;margin-top:auto}