* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100vh;

}

body {
  display: flex;
  flex-direction: column;
  font-family: monospace;
  background: #fff;
}

.header {
  height: 48px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  border-bottom: 1px solid #ccc;
  background: #f8f8f8;
}

.logo {
  font-weight: bold;
  font-size: 18px;
}

.tabs {
  margin-left: 20px;
  display: flex;
  align-items: center;
  height: 100%;
}

.tab-btn {
  padding: 0 16px;
  height: 100%;
  display: flex;
  align-items: center;
  border: none;
  background: none;
  cursor: pointer;
  font-family: monospace;
  font-size: 14px;
  border-right: 1px solid #e0e0e0;
}

.tab-btn.active {
  font-weight: bold;
  background: white;
  border-bottom: 2px solid #1289d8;
}

.tab-content {
  display: none;
  flex: 1;
  min-height: 0;
  flex-direction: column;
}

.tab-content.active {
  display: flex;
}

.main-content {
  flex: 1;
  display: flex;
  min-height: 0;
}

.editor-panel {
  width: 30%;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #ccc;
}

.CodeMirror {
  height: 100%;
  font-size: 14px;
  background: #fdf6e3;
}

.visualization-panel {
  width: 70%;

}

#canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: default;
}

.footer {
  height: 48px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  border-top: 1px solid #ccc;
  background: #f8f8f8;
}

.button {
  padding: 8px 16px;
  margin-right: 10px;
  font-family: monospace;
  border: none;
  background: #e0e0e0;
  cursor: pointer;
  border-radius: 4px;
}

.button:hover {
  background: #d0d0d0;
}

/* Editor mode control: Code | Blocks | Shapes.
   One segmented control rather than three loose buttons, because the three
   are mutually exclusive views of the same document and a segment group is
   how that reads. Sized off .button (8px/16px, monospace) so it carries the
   same weight as the rest of the chrome. */
.editor-modes {
  display: inline-flex;
  flex: none;
  background: #e0e0e0;
  border-radius: 4px;
  padding: 2px;
  gap: 2px;
}

.editor-mode {
  padding: 6px 14px;
  font-family: monospace;
  font-size: 13px;
  border: none;
  background: transparent;
  color: #555;
  cursor: pointer;
  border-radius: 3px;
  transition: background 0.15s ease, color 0.15s ease;
}

.editor-mode:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #222;
}

.editor-mode.active {
  background: #ffffff;
  color: #222;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

/* Multi-document tabs (Code editor) */
.editor-top-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
}

.doc-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  overflow-x: auto;
  padding: 2px 4px;
  min-height: 40px;
}

.doc-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 320px;
  min-width: 160px;
  padding: 8px 12px;
  border: 1px solid #ddd;
  background: #f6f6f6;
  border-radius: 8px;
  cursor: pointer;
  font-family: monospace;
  font-size: 12px;
  white-space: nowrap;
  user-select: none;
}

.doc-tab.active {
  background: white;
  border-color: #FF5722;
}

.doc-tab-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.doc-tab-close {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  opacity: 0.6;
  padding: 0;
  flex: 0 0 auto;
}

.doc-tab-close:hover {
  opacity: 1;
}

.doc-tab-add {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid #ddd;
  background: #fff;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

.button.error {
  background: #ffebee;
}

.button.error:hover {
  background: #ffcdd2;
}

/* Export Menu Styles */
.export-container {
  position: relative;
  display: inline-block;
}

.export-menu {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 5px;
  background: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  z-index: 1000;
  min-width: 120px;
}

/* `visible` is the class MorphToShell.wireExportMenu toggles, and the one
   every other panel in the app uses (#ast-panel, #error-panel). The rule used
   to be written for `.show`, which nothing ever added -- so the menu was
   wired, dispatched correctly, and never appeared. */
.export-menu.visible {
  display: block;
}

.export-option {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  font-family: monospace;
  font-size: 14px;
  color: #333;
}

.export-option:hover {
  background: #f0f0f0;
}

.export-option:first-child {
  border-radius: 4px 4px 0 0;
}

.export-option:last-child {
  border-radius: 0 0 4px 4px;
}

.export-option:only-child {
  border-radius: 4px;
}

.panel {
  position: absolute;
  bottom: 48px;
  left: 0;
  right: 0;
  height: 200px;
  background: white;
  border-top: 1px solid #ccc;
  padding: 16px;
  display: none;
  font-family: monospace;
  font-size: 12px;
  overflow: auto;
}

.panel.visible {
  display: block;
}

#error-panel .error-message {
  color: #d32f2f;
  margin-bottom: 8px;
  white-space: pre-wrap;
}

#error-panel .error-location {
  color: #666;
  font-size: 11px;
  margin-bottom: 16px;
}

.error-count {
  background: #d32f2f;
  color: white;
  border-radius: 10px;
  padding: 2px 6px;
  font-size: 11px;
  margin-left: 6px;
  display: none;
}

.error-count.visible {
  display: inline-block;
}

/* Documentation styles */
.docs-content {
  flex: 1;
  padding: 20px 40px;
  overflow-y: auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  color: #333;
}

.docs-content h1 {
  font-size: 28px;
  margin-bottom: 20px;
  color: #333;
}

.docs-content h2 {
  font-size: 22px;
  margin-top: 30px;
  margin-bottom: 15px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
  color: #444;
}

.docs-content h3 {
  font-size: 18px;
  margin-top: 25px;
  margin-bottom: 10px;
  color: #555;
}

.docs-content h4 {
  font-size: 16px;
  margin-top: 20px;
  margin-bottom: 10px;
  color: #666;
}

.docs-content p {
  margin-bottom: 16px;
}

.docs-content code {
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  background-color: #f5f5f5;
  padding: 2px 4px;
  border-radius: 3px;
  font-size: 85%;
}

.docs-content pre {
  background-color: #f5f5f5;
  padding: 16px;
  border-radius: 3px;
  overflow: auto;
  margin-bottom: 16px;
}

.docs-content pre code {
  background-color: transparent;
  padding: 0;
  font-size: 14px;
}

.docs-content ul, .docs-content ol {
  margin-bottom: 16px;
  padding-left: 30px;
}

.docs-content li {
  margin-bottom: 8px;
}

.docs-content a {
  color: #0366d6;
  text-decoration: none;
}

.docs-content a:hover {
  text-decoration: underline;
}

.docs-content blockquote {
  border-left: 4px solid #ddd;
  padding-left: 16px;
  color: #666;
  margin: 0 0 16px;
}

.docs-content hr {
  height: 1px;
  background-color: #ddd;
  border: none;
  margin: 24px 0;
}

.docs-content table {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 16px;
}

.docs-content th, .docs-content td {
  padding: 8px 12px;
  border: 1px solid #ddd;
}

.docs-content th {
  background-color: #f5f5f5;
  font-weight: bold;
  text-align: left;
}

/* Parameter Manager Styles */
.parameters-container {
  position: absolute;
  top: 60px;
  right: 20px;
  width: 250px;
  z-index: 1000;
  background-color: #f8f8e8;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  padding: 12px;
  display: none;
  max-height: 70vh;
  overflow-y: auto;
}

.parameters-content {
  width: 100%;
}

.shape-selector {
  width: 100%;
  margin-bottom: 12px;
  padding: 6px;
  font-family: monospace;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

.parameters-list {
  font-family: monospace;
  font-size: 14px;
}

.parameter-item {
  margin-bottom: 15px;
}

.parameter-label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.parameter-slider-container {
  display: flex;
  align-items: center;
}

.parameter-slider {
  flex-grow: 1;
  margin-right: 8px;
  cursor: pointer;
}

.parameter-value {
  width: 50px;
  padding: 3px;
  border: 1px solid #ccc;
  border-radius: 3px;
  text-align: center;
}

.no-shapes-message {
  font-style: italic;
  color: #666;
}

.update-button {
  position: absolute;
  bottom: 15px;
  left: 15px;
  padding: 8px 12px;
  font-size: 13px;
  font-family: monospace;
  background-color: #1289d8;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  transition: all 0.2s ease-in-out;
}

/* Smooth slider styling */
.parameter-slider::-webkit-slider-thumb {
  appearance: none;
  width: 16px;
  height: 16px;
  background: #1289d8;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.parameter-slider::-webkit-slider-thumb:hover {
  background: #0d6efd;
}

.parameter-slider::-webkit-slider-track {
  height: 4px;
  background: #ddd;
  border-radius: 2px;
}

.parameter-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: #1289d8;
  border-radius: 50%;
  cursor: pointer;
  border: none;
}

.parameter-slider::-moz-range-track {
  height: 4px;
  background: #ddd;
  border-radius: 2px;
  border: none;
}

/* Shape handles and interactive elements */
.shape-handles {
  position: absolute;
  pointer-events: none;
}

.shape-handle {
  width: 8px;
  height: 8px;
  background-color: white;
  border: 2px solid #ff5722;
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: all;
  cursor: pointer;
}

.shape-handle.tl { cursor: nwse-resize; }
.shape-handle.tr { cursor: nesw-resize; }
.shape-handle.br { cursor: nwse-resize; }
.shape-handle.bl { cursor: nesw-resize; }
.shape-handle.rotate { cursor: grab; }
.shape-handle.rotate:active { cursor: grabbing; }

.rotation-handle {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #ff5722;
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: all;
  cursor: grab;
}

.rotation-handle:active {
  cursor: grabbing;
}

.rotation-line {
  position: absolute;
  width: 1px;
  height: 30px;
  background-color: #ff5722;
  transform-origin: bottom center;
  pointer-events: none;
}

.shape-controls {
  position: absolute;
  top: 20px;
  left: 20px;
  background: rgba(255, 255, 255, 0.9);
  padding: 10px;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  z-index: 100;
}

.shape-controls button {
  margin-right: 5px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 3px 8px;
  cursor: pointer;
}

.shape-controls button:hover {
  background-color: #e0e0e0;
}

.selected-shape-info {
  font-family: monospace;
  font-size: 12px;
  margin-top: 8px;
}

.keyboardShortcuts {
  position: absolute;
  bottom: 20px;
  left: 20px;
  background: rgba(255, 255, 255, 0.9);
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 100;
  display: block;
}

/* Property editor modal */
#shape-properties-modal {
  display: none; 
  position: fixed; 
  z-index: 2000; 
  left: 0; 
  top: 0; 
  width: 100%; 
  height: 100%; 
  background-color: rgba(0,0,0,0.4);
}

#shape-properties-modal .modal-content {
  background-color: white; 
  margin: 15% auto; 
  padding: 20px; 
  border-radius: 5px; 
  width: 400px; 
  max-width: 80%;
}

#property-fields {
  margin-top: 15px;
}

.property-field {
  margin-bottom: 10px;
}

.property-field label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.property-field input {
  width: 100%;
  padding: 5px;
  border: 1px solid #ddd;
  border-radius: 3px;
}

.modal-buttons {
  margin-top: 20px; 
  text-align: right;
}

.modal-buttons button {
  padding: 5px 10px;
  border-radius: 3px;
  cursor: pointer;
}

#apply-properties {
  background-color: #4CAF50; 
  color: white; 
  border: none;
  margin-left: 10px;
}

#cancel-properties {
  background-color: #f0f0f0;
  border: 1px solid #ddd;
}

/* Modern Canvas Styles - Add these to your styles.css */

/* Canvas container styling */
.visualization-panel {
  width: 50%;
  position: relative;
  background: #FAFAFA;
  border-left: 1px solid #E5E7EB;
}

/* Modern canvas styling */
#canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: default;
  background: #FAFAFA;
  image-rendering: crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: pixelated;
}

/* Custom cursor definitions - Classic black and white paper airplane style */
#canvas.cursor-move {
  cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIgMkwyMiA5TDE0IDE0TDkgMjJMMiAyWiIgZmlsbD0iIzAwMDAwMCIgc3Ryb2tlPSIjRkZGRkZGIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMTQgMTRMOSAyMkwyIDJMMTQgMTRaIiBmaWxsPSIjMzMzMzMzIiBmaWxsLW9wYWNpdHk9IjAuNyIvPgo8L3N2Zz4K') 4 4, auto;
}

#canvas.cursor-grab {
  cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIgMkwyMiA5TDE0IDE0TDkgMjJMMiAyWiIgZmlsbD0iIzAwMDAwMCIgc3Ryb2tlPSIjRkZGRkZGIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMTQgMTRMOSAyMkwyIDJMMTQgMTRaIiBmaWxsPSIjMzMzMzMzIiBmaWxsLW9wYWNpdHk9IjAuNyIvPgo8L3N2Zz4K') 4 4, grab;
}

#canvas.cursor-grabbing {
  cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIgMkwyMiA5TDE0IDE0TDkgMjJMMiAyWiIgZmlsbD0iIzMzMzMzMyIgc3Ryb2tlPSIjRkZGRkZGIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMTQgMTRMOSAyMkwyIDJMMTQgMTRaIiBmaWxsPSIjNTU1NTU1IiBmaWxsLW9wYWNpdHk9IjAuOCIvPgo8L3N2Zz4K') 4 4, grabbing;
}

#canvas.cursor-rotate {
  cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iOSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjEuNSIgZmlsbD0iI0ZGRkZGRiIvPgo8cGF0aCBkPSJNMTUgOUwxOCA2SDE0VjEwTDE1IDlaIiBmaWxsPSIjMDAwMDAwIi8+CjxwYXRoIGQ9Ik0xMiA4QTE2IDE2IDAgMCAwIDggMTIiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgo8L3N2Zz4K') 12 12, grab;
}

#canvas.cursor-resize-nwse {
  cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMgM0wyMSAyMSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgo8cGF0aCBkPSJNNyAzSDNWN00yMSAxN1YyMUgxNyIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K') 12 12, nwse-resize;
}

#canvas.cursor-resize-nesw {
  cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMgMjFMMjEgMyIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgo8cGF0aCBkPSJNMTcgM0gyMVY3TTMgMTdWMjFIN00iIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+') 12 12, nesw-resize;
}

/* Smooth transitions for canvas interactions */
#canvas {
  transition: opacity 0.2s ease;
}

/* Canvas overlay for loading states */
.canvas-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(250, 250, 250, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 10;
}

.canvas-overlay.visible {
  opacity: 1;
  pointer-events: all;
}

.canvas-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: #6B7280;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
}

.canvas-loading-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid #E5E7EB;
  border-top: 2px solid #FF5722;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Modern toolbar styling */
.canvas-toolbar {
  position: absolute;
  top: 16px;
  left: 16px;
  display: flex;
  gap: 8px;
  z-index: 100;
}

.canvas-tool-button {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  color: #6B7280;
}

.canvas-tool-button:hover {
  background: rgba(255, 255, 255, 1);
  color: #FF5722;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.canvas-tool-button.active {
  background: #FF5722;
  color: white;
}

/* Zoom controls */
.canvas-zoom-controls {
  position: absolute;
  bottom: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 100;
}

.zoom-button {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 500;
  color: #6B7280;
  transition: all 0.2s ease;
}

.zoom-button:hover {
  background: rgba(255, 255, 255, 1);
  color: #FF5722;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.zoom-level {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  color: #6B7280;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  font-family: 'SF Mono', Monaco, monospace;
}

/* Status indicators */
.canvas-status {
  position: absolute;
  bottom: 16px;
  left: 16px;
  display: flex;
  gap: 8px;
  z-index: 100;
}

.status-indicator {
  padding: 6px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  font-size: 11px;
  color: #6B7280;
  font-family: 'SF Mono', Monaco, monospace;
  display: flex;
  align-items: center;
  gap: 6px;
}

.status-indicator.grid-enabled {
  color: #FF5722;
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* Selection info panel */
.selection-info {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  font-size: 12px;
  color: #6B7280;
  font-family: 'SF Mono', Monaco, monospace;
  transform: translateY(-10px);
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s ease;
  z-index: 100;
  min-width: 200px;
}

.selection-info.visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: all;
}

.selection-info .shape-name {
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

.selection-info .shape-props {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

.selection-info .prop-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.selection-info .prop-label {
  color: #9CA3AF;
}

.selection-info .prop-value {
  color: #FF5722;
  font-weight: 500;
}

/* Modern keyboard shortcuts display - matches uploaded image style */
.keyboardShortcuts {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(8px);
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 13px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  z-index: 100;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  color: #FFFFFF;
  border: none;
  white-space: nowrap;
  font-weight: 400;
}

.keyboardShortcuts strong {
  color: #FFFFFF;
  font-weight: 600;
}

/* Smooth focus rings for accessibility */
*:focus-visible {
  outline: 2px solid #FF5722;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Performance optimizations */
.visualization-panel * {
  will-change: transform;
}

/* Clean scrollbars */
.visualization-panel::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

/* High DPI display optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  #canvas {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* Dark mode support (optional) */
@media (prefers-color-scheme: dark) {
  .visualization-panel {
    background: #1F2937;
  }
  
  #canvas {
    background: #1F2937;
  }
  
  .canvas-tool-button {
    background: rgba(55, 65, 81, 0.9);
    color: #D1D5DB;
  }
  
  .canvas-tool-button:hover {
    background: rgba(55, 65, 81, 1);
    color: #FF5722;
  }
}

/* Drag & Drop Shape Palette Styles */

/* Shapes pane: the third editor mode, peer of the code and blocks panes. */
#shape-palette-pane {
  flex-direction: column;
  min-height: 0;          /* so the content scrolls instead of pushing the panel */
  background: #fdf6e3;    /* the code editor's ground, so the modes read as one surface */
}

/* Palette Content */
.palette-content {
  padding: 16px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* Custom scrollbar */
.palette-content::-webkit-scrollbar {
  width: 6px;
}

.palette-content::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 3px;
}

.palette-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

.palette-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* Palette Grid */
.palette-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 10px;
  align-content: start;
}

/* Individual Palette Items */
.palette-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.7);
  border: 2px solid transparent;
  cursor: grab;
  transition: all 0.2s ease;
  user-select: none;
  position: relative;
}

.palette-item:hover {
  background: rgba(255, 255, 255, 1);
  border-color: #FF5722;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 87, 34, 0.2);
}

.palette-item:active,
.palette-item.dragging {
  cursor: grabbing;
  transform: scale(1.05);
}

/* Shape Icons */
.shape-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-bottom: 6px;
  color: #6B7280;
  transition: color 0.2s ease;
}

.palette-item:hover .shape-icon {
  color: #FF5722;
}

.shape-icon svg {
  width: 24px;
  height: 24px;
}

/* Shape Names */
.shape-name {
  font-size: 11px;
  font-weight: 500;
  color: #6B7280;
  text-align: center;
  line-height: 1.2;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

.palette-item:hover .shape-name {
  color: #374151;
}

/* Drag Preview */
.drag-preview {
  position: fixed;
  width: 70px;
  height: auto;
  pointer-events: none;
  z-index: 10000;
  opacity: 0.8;
  transform: scale(1.1);
  transition: none;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  border: 2px solid #FF5722;
}

.drag-preview.over-canvas {
  opacity: 1;
  background: rgba(255, 87, 34, 0.1);
  border-color: #FF5722;
  box-shadow: 0 8px 24px rgba(255, 87, 34, 0.3);
}

/* Responsive Design */
@media (max-width: 768px) {
  .palette-grid {
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    gap: 8px;
  }
  
  .palette-item {
    padding: 8px 4px;
  }
  
  .shape-icon {
    width: 28px;
    height: 28px;
  }
  
  .shape-icon svg {
    width: 20px;
    height: 20px;
  }
  
  .shape-name {
    font-size: 10px;
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  #shape-palette-pane {
    background: rgba(31, 41, 55, 0.95);
  }
  
  .palette-item {
    background: rgba(55, 65, 81, 0.7);
  }
  
  .palette-item:hover {
    background: rgba(55, 65, 81, 1);
    border-color: #FF5722;
  }
  
  .shape-icon {
    color: #D1D5DB;
  }
  
  .palette-item:hover .shape-icon {
    color: #FF5722;
  }
  
  .shape-name {
    color: #D1D5DB;
  }
  
  .palette-item:hover .shape-name {
    color: #F3F4F6;
  }
  
}

/* Animation for shape creation feedback */
@keyframes shapeCreated {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.palette-item.shape-created {
  animation: shapeCreated 0.4s ease-out;
}

/* Enhanced visual feedback */
.palette-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 8px;
  background: linear-gradient(45deg, transparent, rgba(255, 87, 34, 0.1), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.palette-item:hover::before {
  opacity: 1;
}

/* Accessibility improvements */
.palette-item:focus {
  outline: 2px solid #FF5722;
  outline-offset: 2px;
}

.editor-mode:focus-visible {
  outline: 2px solid #FF5722;
  outline-offset: 2px;
}

/* Smooth entrance animation */
.palette-grid .palette-item {
  opacity: 0;
  transform: translateY(10px);
  animation: fadeInUp 0.3s ease-out forwards;
}

.palette-grid .palette-item:nth-child(1) { animation-delay: 0.05s; }
.palette-grid .palette-item:nth-child(2) { animation-delay: 0.1s; }
.palette-grid .palette-item:nth-child(3) { animation-delay: 0.15s; }
.palette-grid .palette-item:nth-child(4) { animation-delay: 0.2s; }
.palette-grid .palette-item:nth-child(5) { animation-delay: 0.25s; }
.palette-grid .palette-item:nth-child(6) { animation-delay: 0.3s; }
.palette-grid .palette-item:nth-child(7) { animation-delay: 0.35s; }
.palette-grid .palette-item:nth-child(8) { animation-delay: 0.4s; }
.palette-grid .palette-item:nth-child(9) { animation-delay: 0.45s; }
.palette-grid .palette-item:nth-child(10) { animation-delay: 0.5s; }
.palette-grid .palette-item:nth-child(11) { animation-delay: 0.55s; }
.palette-grid .palette-item:nth-child(12) { animation-delay: 0.6s; }

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.examples-menu__title {
  font-size: 28px;
  margin-bottom: 20px;
  color: #333;
}

.examples-menu {
  padding: 20px 40px;
}
.examples-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 24px;
}
.example-card {
  background: #f0f0f0;
  border-radius: 8px;
  padding: 16px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.2s;
}
.example-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.example-card img {
  width: 240px;
  height: auto;
  margin-top: 8px;
}
.example-detail {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  padding: 40px;
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.example-detail.visible {
  display: flex;
}
.detail-back {
  align-self: flex-end;
  background-color: rgb(239, 162, 115);
  color: #ffffff;
  border: none;
  padding: 8px 16px;
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.detail-back:hover {
  background-color: rgb(179, 83, 15);
  transform: translateY(-1px);
}
.detail-back:active {
  background-color: rgb(179, 83, 15);
  transform: translateY(0);
}
.detail-image {
  width: 100%;
  max-height: 35vh;      /* limit height to 35% of viewport */
  object-fit: contain;    /* preserve aspect ratio */
  margin-bottom: 20px;
}
.detail-panels {
  display: flex;
  gap: 20px;
  flex: 1;
  overflow: hidden;
}
.detail-code,
.detail-info {
  flex: 1;
  background: #e8e8e8;
  padding: 16px;
  border-radius: 4px;
  overflow-y: auto;
}
.detail-code {
  white-space: pre-wrap;
  font-family: monospace;
  max-height: 100%;
  white-space: pre-wrap;
  font-family: monospace;
}

.tutorials-container {
  padding: 24px 40px;
}

.tutorials-title {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  color: #333;
}

.tutorial-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.tutorial-card h3 {
  font-size: 1.125rem;
  font-weight: 500;
  margin: 0;
  padding: 16px;
  background: #f9f9f9;
  border-bottom: 1px solid #e5e5e5;
}

.tutorial-card p {
  flex: 1;
  padding: 16px;
  font-size: 0.95rem;
  line-height: 1.4;
  color: #444;
}

.tutorials-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;             
}

@media (max-width: 768px) {
  .tutorials-grid {
    grid-template-columns: 1fr;
  }
}

.tutorial-card {
  overflow: visible; 
}

.tutorial-video {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: contain; 
}

.example-blockly-viewer {
  width: 100%;
  height: 360px;               
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fafafa;         
  overflow: hidden;              
}

@media (min-width: 1280px) {
  .example-blockly-viewer { height: 420px; }
}
@media (max-width: 900px) {
  .example-blockly-viewer { height: 320px; }
}

.detail-info {
  background: #fff;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.detail-code::-webkit-scrollbar,
.example-blockly-viewer::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.detail-code::-webkit-scrollbar-thumb,
.example-blockly-viewer::-webkit-scrollbar-thumb {
  background: #c9cdd3;
  border-radius: 8px;
}
.detail-code::-webkit-scrollbar-track,
.example-blockly-viewer::-webkit-scrollbar-track {
  background: transparent;
}

.example-blockly-viewer .blocklyMainBackground { fill: #fafafa !important; }

.example-blockly-viewer .blocklyZoom > g > image,
.example-blockly-viewer .blocklyZoom > g > svg {
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
}

.example-blockly-viewer .blocklySvg {
  width: 100% !important;
  height: 100% !important;
  border-radius: 8px;
}

@media (prefers-color-scheme: dark) {
  .detail-info {
    background: #1f2937;
    border-color: #374151;
  }
  .example-blockly-viewer {
    background: #111827;
    border-color: #374151;
  }
  .example-blockly-viewer .blocklyMainBackground { fill: #111827 !important; }
}

.example-blockly-viewer .blocklyMainBackground { cursor: grab; }
.example-blockly-viewer .blocklyMainBackground:active { cursor: grabbing; }

/* ── Engine mount points ───────────────────────────────────────────────────
   Everything below exists because the engine's components need somewhere to
   mount or render markup morphTo never had. Anything morphTo already styles
   is left to morphTo's own rules above. */

/* Off-screen live regions: announced by assistive tech, never painted. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Mount host for ZoomControls. It must not form a containing block of its
   own: the controls it renders are morphTo's .canvas-zoom-controls, already
   positioned against .visualization-panel, so the host box is dissolved. */
.zoom-controls-container {
  display: contents;
}

/* Inspector popup: the engine's PropertiesPanel sits above its
   ParametersMenu inside one of morphTo's .parameters-container popups. */
#properties-panel-container {
  border-bottom: 1px solid #ccc;
  padding-bottom: 8px;
  margin-bottom: 8px;
}

/* Misleadingly named: the constraint list does NOT use this. morphTo styled
   its rows inline (constraints/ui.mjs:159-191) and ConstraintController
   reproduces that, so the list needs no rule at all. The pair exists solely
   for ParametersMenu, which reuses the class for the delete button on its
   parameter meta row (ui/ParametersMenu.js:344-346) -- that is its only
   consumer, so do not remove it as constraint leftovers. */
.constraint-remove {
  border: none;
  background: transparent;
  color: #888;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}

.constraint-remove:hover {
  color: #FF5722;
}

/* ── Otto-only affordances in the parameters popup ──────────────────────────
   REF has no equivalent for any of these: its parameter menu offers sliders
   only, with no title, no add button and no min/max/step editing. The meta
   row is hidden until a parameter is expanded, so the popup's resting state
   is unchanged. Without these the four number boxes overflow the 250px
   popup, since .parameter-value's default width is sized for one value.
   Emitted by ui/ParametersMenu.js:166, 185, 294-332. */
.parameters-title {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #333;
}

.parameter-meta-row {
  gap: 4px;
  margin-top: 6px;
}

.parameter-meta-row .parameter-value {
  width: 44px;
  font-size: 11px;
}

/* Must follow the rule above: same specificity, and the name box carries both
   classes, so source order is what lets it keep its flexible width. */
.parameter-meta-row .param-name {
  flex: 1;
  min-width: 0;
  width: auto;
  text-align: left;
}

.parameter-add {
  width: 100%;
  margin-right: 0;
  padding: 6px 10px;
  font-size: 12px;
}

/* Entrance stagger for the 5 Otto-only palette tiles. morphTo's own sequence
   (styles.css:1440-1451) runs 1-12 at a flat +0.05s; these continue it rather
   than editing that block, so REF's region of this file stays byte-identical. */
.palette-grid .palette-item:nth-child(13) { animation-delay: 0.65s; }
.palette-grid .palette-item:nth-child(14) { animation-delay: 0.7s; }
.palette-grid .palette-item:nth-child(15) { animation-delay: 0.75s; }
.palette-grid .palette-item:nth-child(16) { animation-delay: 0.8s; }
.palette-grid .palette-item:nth-child(17) { animation-delay: 0.85s; }

/* ── Constraints popup ─────────────────────────────────────────────────────
   The panel morphTo built in ui.mjs styled every control inline, which is
   exactly why it never matched the rest of Otto -- inline styles win, so the
   panel could not inherit the chrome. The controls now carry classes and the
   look lives here, on the same scheme as the code interface: monospace
   throughout, #e0e0e0 buttons, 4px radii, #FF5722 for the accent and focus.
   Toggled by ConstraintController.togglePanel, which sets display. */
#constraints-panel {
  position: fixed;
  right: 12px;
  bottom: 64px;
  width: 380px;
  max-width: calc(100vw - 24px);
  z-index: 9999;
  background: #f8f8f8;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .15);
  font-family: monospace;
  font-size: 13px;
  color: #333;
  display: none;
  max-height: 70vh;
  overflow-y: auto;
}

/* Header: sticky, so the title and the way out stay put while the builder
   scrolls under them. */
.constraints-header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #f8f8f8;
  border-bottom: 1px solid #ddd;
}

.constraints-title {
  margin: 0;
  font-family: monospace;
  font-size: 14px;
  font-weight: bold;
  color: #222;
}

.constraints-close {
  border: none;
  background: none;
  font-family: monospace;
  font-size: 18px;
  line-height: 1;
  color: #888;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}

.constraints-close:hover {
  background: #e0e0e0;
  color: #222;
}

/* ── A builder section ──────────────────────────────────────────────────── */
.constraint-section {
  padding: 12px 14px;
  border-bottom: 1px solid #e4e4e4;
}

.constraint-section:last-child {
  border-bottom: none;
}

.constraint-section__title {
  margin: 0 0 10px;
  font-family: monospace;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #FF5722;
}

/* Two columns: A on the left, B on the right, shapes above their anchors. */
.constraint-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* A captioned control. The selects used to be anonymous -- four dropdowns in
   two rows with nothing saying which was which. */
.constraint-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.constraint-field__label {
  font-family: monospace;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #888;
}

#constraints-panel select,
#constraints-panel input {
  width: 100%;
  box-sizing: border-box;
  padding: 5px 6px;
  font-family: monospace;
  font-size: 12px;
  color: #333;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
}

#constraints-panel select:hover,
#constraints-panel input:hover {
  border-color: #aaa;
}

#constraints-panel select:focus,
#constraints-panel input:focus {
  outline: none;
  border-color: #FF5722;
  box-shadow: 0 0 0 2px rgba(255, 87, 34, 0.18);
}

/* The Distance field spans the pair, since it is one value for both ends. */
.constraint-section .constraint-field:not(.constraint-grid .constraint-field) {
  margin-top: 8px;
}

/* ── Actions ────────────────────────────────────────────────────────────── */
.constraint-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

/* Sized off .button (8px/16px monospace on #e0e0e0) so the panel's actions
   carry the same weight as the footer's. */
.constraint-action {
  flex: 1;
  padding: 8px 12px;
  font-family: monospace;
  font-size: 12px;
  color: #333;
  background: #e0e0e0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.constraint-action:hover {
  background: #d0d0d0;
}

.constraint-action:active {
  background: #FF5722;
  color: #fff;
}

.constraint-action:focus-visible {
  outline: 2px solid #FF5722;
  outline-offset: 2px;
}

/* ── The active list ────────────────────────────────────────────────────── */
.constraints-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.constraint-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
}

.constraint-row__label {
  font-family: monospace;
  font-size: 12px;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.constraint-row__remove {
  flex: none;
  border: none;
  background: none;
  font-family: monospace;
  font-size: 15px;
  line-height: 1;
  color: #999;
  cursor: pointer;
  padding: 0 4px;
  border-radius: 3px;
}

.constraint-row__remove:hover {
  background: #ffe9e2;
  color: #c0392b;
}

/* An empty box reads as broken; saying so reads as empty. */
.constraints-empty {
  font-family: monospace;
  font-size: 12px;
  color: #999;
  font-style: italic;
}

/* ── 3D form viewport ──────────────────────────────────────────────────────
   The preview of a lifted developable form (src/views/viewport3d/). It sits
   over the 2D canvas inside the same .visualization-panel rather than taking
   a panel of its own, so both views share one work area and one set of
   surrounding chrome. Hidden until a form exists; whoever builds one reveals
   it. Appended at EOF like every other addition to this file, so morphTo's
   own rules above stay byte-identical. */
.viewport3d-panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #FAFAFA;
  z-index: 2;
}

/* The empty-state message on the GPU path. A GPU draws triangles, so the
   text Renderer3D paints into the canvas is an element here instead. */
.viewport3d-empty {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 13px monospace;
  color: #9CA3AF;
  pointer-events: none;
}

#viewport3d-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: default;
  /* Orbit and pan are pointer gestures; the browser must not steal them for
     scrolling the page on a trackpad or a touch screen. */
  touch-action: none;
}