*,:after,:before{box-sizing:border-box;margin:0;padding:0}body{background:#0a0f1a;color:#e2e8f0;font-family:system-ui,-apple-system,sans-serif;height:100vh;overflow:hidden}.layout{display:flex;height:100vh}.canvas-area{flex:1;min-width:0;overflow:hidden;position:relative}#canvas-container{height:100%;position:relative;width:100%}#canvas-container canvas{display:block;height:100%!important;width:100%!important}.sidebar{background:#111827;border-left:1px solid #1f2937;display:flex;flex-direction:column;flex-shrink:0;gap:14px;isolation:isolate;overflow-y:auto;padding:20px;width:340px}.back-link{background:#111827d9;border:1px solid #374151;border-radius:20px;color:#6b7280;font-size:11px;left:14px;padding:5px 12px;position:absolute;text-decoration:none;top:14px;transition:color .15s ease}.back-link:hover{color:#f3f4f6}.canvas-hint{bottom:12px;color:#374151;font-size:11px;left:14px}.canvas-hint,.scene-label{font-family:monospace;pointer-events:none;position:absolute}.scene-label{background:#0a0a14ed;border-radius:8px;font-size:12px;line-height:1.7;padding:8px 12px;transform:translate(-50%,calc(-100% - 12px));transition:opacity .18s ease,box-shadow .18s ease,border-color .18s ease;white-space:nowrap}.scene-label hr{margin:4px 0;opacity:.2}.scene-label .label-title{font-size:13px;font-weight:700;margin-bottom:2px}.scene-label .label-sub{font-size:10px;margin-bottom:2px;opacity:.65}.scene-label.label-focused{border-color:#ffffff73!important;box-shadow:0 0 0 1px #ffffff40,0 6px 24px #000000b3;opacity:1!important;z-index:500!important}.scene-label.label-dimmed{opacity:.2;pointer-events:none}.lesson-badge{color:#f59e0b}.lesson-badge,.pattern-badge{font-family:monospace;font-size:11px;letter-spacing:.12em}.pattern-badge{color:#a78bfa}.sidebar h1{color:#f9fafb;font-size:20px;font-weight:700;line-height:1.25}.sidebar .subtitle{color:#6b7280;font-size:12px;margin-top:4px}.sidebar hr{border:none;border-top:1px solid #1f2937}.sidebar section h3{color:#9ca3af;font-size:11px;font-weight:600;letter-spacing:.08em;margin-bottom:8px;text-transform:uppercase}.sidebar section p{color:#9ca3af;font-size:12px;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{color:#e2e8f0;display:flex;font-size:13px;font-weight:500;justify-content:space-between;margin-bottom:5px}.slider-row label span{color:#f59e0b;font-family:monospace;min-width:52px;text-align:right}.slider-row input[type=range]{accent-color:#f59e0b;cursor:pointer;margin-bottom:5px;width:100%}.slider-label{color:#e2e8f0;display:flex;font-size:13px;font-weight:500;justify-content:space-between;margin-bottom:5px}.slider-value{color:#f59e0b;font-family:monospace;min-width:52px;text-align:right}.note{color:#6b7280;font-size:11px;line-height:1.55}.note-highlight{color:#f59e0b;font-size:11px;font-weight:500;margin-bottom:3px}#drop-btn{background:#f59e0b;border:none;border-radius:8px;color:#000;cursor:pointer;font-size:14px;font-weight:700;margin-top:4px;padding:10px;transition:background .15s ease;width:100%}#drop-btn:hover{background:#fbbf24}#drop-btn:active{background:#d97706}.btn-note{color:#4b5563;font-size:10px;margin-top:4px;text-align:center}.note-card{background:#ffffff08;border-radius:8px;color:#9ca3af;font-size:12px;line-height:1.55;margin-bottom:8px;padding:10px 12px}.note-card .note-title{font-weight:600;margin-bottom:4px}.note-card code{background:#ffffff14;border-radius:3px;color:#e2e8f0;font-family:monospace;font-size:11px;padding:1px 5px}.note-card.amber{border:1px solid rgba(245,158,11,.3)}.note-card.amber .note-title{color:#f59e0b}.note-card.blue{border:1px solid rgba(96,165,250,.3)}.note-card.blue .note-title{color:#60a5fa}.note-card.orange{border:1px solid rgba(251,146,60,.3)}.note-card.orange .note-title{color:#fb923c}.footer-nav{color:#4b5563;font-size:11px;margin-top:auto;padding:6px 0;text-align:center}.canvas-btn-bar{align-items:center;display:flex;gap:8px;left:14px;position:absolute;top:14px;z-index:10}.canvas-btn-bar .back-link,.canvas-btn-bar .label-toggle-btn{align-items:center;background:#111827d9;border:1px solid #374151;border-radius:20px;color:#6b7280;cursor:pointer;display:flex;font-family:system-ui,-apple-system,sans-serif;font-size:11px;gap:5px;padding:5px 12px;text-decoration:none;transition:color .15s ease,border-color .15s ease;white-space:nowrap}.canvas-btn-bar .back-link:hover,.canvas-btn-bar .label-toggle-btn:hover{border-color:#4b5563;color:#f9fafb}.canvas-btn-bar .back-link,.canvas-btn-bar .label-toggle-btn{position:static}.canvas-btn-bar .label-toggle-btn.labels-hidden{border-color:#1f2937;color:#374151}.btn-icon{font-style:normal;line-height:1}.sheet-handle{align-items:center;background:#111827;border-radius:20px 20px 0 0;cursor:grab;display:none;flex-direction:column;gap:6px;margin:-20px -20px 4px;padding:14px 20px 10px;position:sticky;top:0;touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;z-index:10}.sheet-handle:active{cursor:grabbing}.sheet-handle-bar{background:#374151;border-radius:2px;flex-shrink:0;height:4px;width:40px}.sheet-handle-title{color:#6b7280;font-size:12px;font-weight:700;letter-spacing:.04em;max-width:80vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.builds-on{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}.builds-on a{background:#a78bfa1a;border:1px solid rgba(167,139,250,.3);border-radius:4px;color:#a78bfa;font-family:monospace;font-size:10px;padding:2px 8px;text-decoration:none;transition:background .15s ease}.builds-on a:hover{background:#a78bfa33}@media(max-width:768px){.layout,body{overflow:hidden}.layout{position:relative}.canvas-area{height:100%;inset:0;position:absolute;width:100%}#canvas-container{height:100%}.sidebar{border-left:none;border-radius:20px 20px 0 0;border-top:1px solid #374151;bottom:0;box-shadow:0 -6px 32px #0000008c;height:45vh;left:0;max-height:90vh;overflow-y:auto;overscroll-behavior:contain;position:fixed;right:0;width:100%;z-index:100;-webkit-overflow-scrolling:touch;padding-top:0}.sheet-handle{display:flex}.canvas-hint{color:#4b5563;font-size:10px;inset:12px 14px auto auto}.canvas-btn-bar .btn-text{display:none}.slider-row input[type=range]{height:28px}.sidebar section h3{font-size:12px}.sidebar section p{font-size:13px}.note{font-size:12px}.note-card{font-size:13px}.scene-label{font-size:11px;padding:6px 10px}}