@layer tokens, base, components, themes;

/* Begin bundled CSS: web/css/fonts.css */
@layer base {
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../assets/fonts/space-grotesk-latin-400-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/space-mono-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/space-mono-latin-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Space Mono";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/space-mono-latin-italic-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Space Mono";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/space-mono-latin-italic-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

}

/* End bundled CSS: web/css/fonts.css */
/* Begin bundled CSS: web/css/tokens.css */
@layer tokens {
/* ==========================================================================
   Front-my-End: Core Neo-Brutalist Foundations (BeaverFlow OS Inspired)
   ========================================================================== */

/* Colors - Light Mode Default */
:root, body.light-mode {
  color-scheme: light;

  --primary-container: #ff5f1f; /* Orange */
  --surface-variant: #f9dcd4;    /* Retro Tan */
  --surface-tint: #ab3600;       /* Rust Crimson */
  --surface-container: #ffe9e3;  /* Peach Cream */
  --surface-container-lowest: #ffffff; /* Pure White */
  --on-surface: #271813;         /* Deep Coffee */
  --on-surface-variant: #5b4138; /* Muted Charcoal */
  --outline-variant: #e3bfb3;    /* Tan Muted Border */
  
  --brutal-shadow: #271813;
  --brutal-shadow-rgb: 39, 24, 19;
  
  /* Layout Metrics */
  --border-width: 3px;
  --border-width-sm: 2px;
  --border-radius: 0px;
  --border-size: 3px;
  --card-shadow: 8px 8px 0 var(--brutal-shadow);
  --btn-shadow: 3px 3px 0 var(--brutal-shadow);
  --text-shadow: 2px 2px 0 var(--brutal-shadow);
  --hover-transform: translate(-2px, -2px);
  --hover-shadow: 5px 5px 0 var(--brutal-shadow);
  --active-transform: translate(1px, 1px);
  --active-shadow: 1px 1px 0 var(--brutal-shadow);
  
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  
  --top-bar-height: 48px;
  --bottom-bar-height: 56px;
  
  /* Font Stacks */
  --font-ui: "Space Grotesk", sans-serif;
  --font-code: "Space Mono", monospace;
  
  /* Theme Highlights */
  --color-success: #10b981; /* Green */
  --color-warning: #f59e0b; /* Yellow */
  --color-error: #ef4444;   /* Red */
  
  --color-info: #3b82f6;    /* Soft Blue for Console logs */
  
  /* Panel Badge Custom Accent colors */
  --color-html-badge: #ef4444; /* HTML Red */
  --color-css-badge: #3b82f6;  /* CSS Blue */
  --color-js-badge: #eab308;   /* JS Yellow */
  --color-preview-badge: #a855f7; /* Preview Purple */
  --color-console-badge: var(--surface-tint); /* Console Coral-Orange */
  --color-scratch-badge: #10b981; /* Scratchpad Green */
  
  /* Syntax Highlighting Tokens */
  --token-keyword: #ab3600;
  --token-string: #059669;
  --token-number: #d97706;
  --token-comment: #78716c;
  --token-operator: #271813;
  --token-punctuation: #5b4138;
  --token-tag: #2563eb;
  --token-attr: #db2777;
  --token-property: #7c3aed;
  --token-value: #059669;
  --token-selector: #b91c1c;
  --token-identifier: #271813;
}

body.dark-mode,
body.boring-dark {
  color-scheme: dark;
}

body.boring-light {
  color-scheme: light;
}

}

/* End bundled CSS: web/css/tokens.css */
/* Begin bundled CSS: web/css/base.css */
@layer base {
/* ==========================================================================
   Resets and General Styling
   ========================================================================== */

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

html {
  height: 100%;
  overflow: hidden;
}

body {
  font-family: var(--font-ui);
  background-color: var(--surface-variant, #f9dcd4);
  color: var(--on-surface, #271813);
  line-height: 1.4;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: background-color 0.2s ease, color 0.2s ease;
}

:where(
  button,
  [href],
  input,
  select,
  textarea,
  summary,
  [tabindex]:not([tabindex="-1"])
):focus-visible {
  outline: var(--border-width-sm, 2px) solid var(--primary-container, #ff5f1f);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}



/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--surface-container, #ffe9e3);
  border-left: var(--border-width-sm, 2px) solid var(--brutal-shadow, #271813);
  border-top: var(--border-width-sm, 2px) solid var(--brutal-shadow, #271813);
}
::-webkit-scrollbar-thumb {
  background: var(--primary-container, #ff5f1f);
  border: var(--border-width-sm, 2px) solid var(--brutal-shadow, #271813);
  box-shadow: 2px 2px 0 var(--brutal-shadow, #271813);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--surface-tint, #ab3600);
}

}

/* End bundled CSS: web/css/base.css */
/* Begin bundled CSS: web/css/layout.css */
@layer base {
/* ==========================================================================
   Header and Actions Layout
   ========================================================================== */

.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--top-bar-height);
  background-color: var(--surface-container);
  border-bottom: var(--border-width) solid var(--brutal-shadow);
  padding: 0 var(--spacing-md);
  box-shadow: 0 4px 0 rgba(var(--brutal-shadow-rgb), 0.15);
  z-index: 1000;
  position: relative;
  transition: background-color 0.2s ease;
}

.top-bar-left {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
}

.brand-logo {
  font-family: var(--font-ui);
  font-weight: 900;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background-color: var(--primary-container);
  color: #fff;
  border: var(--border-width-sm) solid var(--brutal-shadow);
  padding: 2px 10px;
  box-shadow: 2px 2px 0 var(--brutal-shadow);
  text-shadow: 1px 1px 0 var(--brutal-shadow);
  user-select: none;
  white-space: nowrap;
}

body.dark-mode .brand-logo {
  color: #000;
  text-shadow: none;
}

.control-group {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.control-label {
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--on-surface);
}

/* Brutalist Dropdown Styling */
.select-wrapper {
  position: relative;
}

.select-wrapper::after {
  content: "▼";
  font-size: 8px;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--on-surface);
}

#view-select, #menu-template-select, #menu-theme-select, #menu-view-select {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 11px;
  color: var(--on-surface);
  background-color: var(--surface-container-lowest);
  border: var(--border-width-sm) solid var(--brutal-shadow);
  padding: 4px 22px 4px 10px;
  border-radius: 0;
  appearance: none;
  cursor: pointer;
  box-shadow: 1.5px 1.5px 0 var(--brutal-shadow);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

#view-select:hover, #menu-template-select:hover, #menu-theme-select:hover, #menu-view-select:hover {
  transform: translate(-0.5px, -0.5px);
  box-shadow: 2px 2px 0 var(--brutal-shadow);
}

#view-select:focus, #menu-template-select:focus, #menu-theme-select:focus, #menu-view-select:focus {
  outline: none;
  border-color: var(--primary-container);
}

#view-select:focus-visible,
#menu-template-select:focus-visible,
#menu-theme-select:focus-visible,
#menu-view-select:focus-visible {
  outline: var(--border-width-sm, 2px) solid var(--primary-container, #ff5f1f);
  outline-offset: 2px;
}

.top-bar-right {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

/* Retro-Brutalist Buttons */
.icon-btn {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--on-surface);
  background-color: var(--surface-container-lowest);
  border: var(--border-width-sm) solid var(--brutal-shadow);
  padding: 4px 12px;
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--brutal-shadow);
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  /* Optimized: only transition transform and box-shadow, not all properties */
  transition: transform 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.1s ease;
  border-radius: 0;
  transform: translateZ(0);
}

.icon-btn:hover {
  background-color: var(--surface-container);
  transform: translate(-1.5px, -1.5px) translateZ(0);
  box-shadow: 3.5px 3.5px 0 var(--brutal-shadow);
}

.icon-btn:active {
  transform: translate(1px, 1px) translateZ(0);
  box-shadow: 1px 1px 0 var(--brutal-shadow);
}

/* Accent Buttons */
.icon-btn.action-btn {
  background-color: var(--primary-container);
  color: white;
  box-shadow: 4px 4px 0 var(--brutal-shadow);
  font-weight: 900;
  text-shadow: 1px 1px 0 var(--brutal-shadow);
}

body.dark-mode .icon-btn.action-btn {
  color: black;
  text-shadow: none;
}

.icon-btn.action-btn:hover {
  background-color: var(--surface-tint);
  box-shadow: 5px 5px 0 var(--brutal-shadow);
}

.icon-btn.warning {
  border-color: var(--color-error);
}

.icon-btn.warning:hover {
  background-color: var(--color-error);
  color: white;
  border-color: var(--brutal-shadow);
}

/* Sizing and alignment for header icon-only buttons */
.top-bar-right .icon-btn.only-icon {
  padding: 4px !important;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.top-bar-right .icon-btn.only-icon svg {
  width: 14px;
  height: 14px;
  display: block;
}

}

/* End bundled CSS: web/css/layout.css */
/* Begin bundled CSS: web/css/components.css */
@layer components {
/* Begin bundled CSS: web/css/components/panels.css */
.workspace {
  flex: 1;
  display: grid;
  padding: var(--spacing-md);
  gap: var(--spacing-md);
  min-height: 0; /* Important for scroll nested elements */
  background-color: var(--surface-variant);
  background-image: radial-gradient(var(--outline-variant) 1.5px, transparent 1.5px);
  background-size: 24px 24px;
}

/* Core Panel Style */
.panel {
  background-color: var(--surface-container-lowest);
  border: var(--border-width) solid var(--brutal-shadow);
  box-shadow: 4px 4px 0 var(--brutal-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Standard containment */
  resize: both; /* Standard CSS resizability */
  min-width: 180px;
  min-height: 120px;
  position: relative;
  /* Define panel as a queryable container to adjust titles/text sizes based on actual widget dimensions */
  container-type: inline-size;
  /* Optimized: only transition specific properties, not 'all' */
  transition: box-shadow 0.15s ease, transform 0.15s ease;
  /* GPU acceleration: promote panel to its own compositor layer */
  transform: translateZ(0);
  /* Paint containment: isolate repaint regions for performance */
  contain: layout style paint;
}

.panel:hover {
  box-shadow: 6px 6px 0 var(--brutal-shadow);
}

.panel.dragging {
  transition: none;
  cursor: grabbing;
  z-index: 200;
  opacity: 0.95;
}

.panel.inspect-pulse {
  animation: inspectPulse 0.7s ease-in-out 3;
}

@keyframes inspectPulse {
  0%, 100% {
    box-shadow: 4px 4px 0 var(--brutal-shadow);
  }
  50% {
    box-shadow: 0 0 0 4px var(--primary-container), 6px 6px 0 var(--brutal-shadow);
  }
}

.panel-header {
  height: 40px;
  background-color: var(--surface-container);
  background-image: radial-gradient(var(--on-surface-variant) 1.2px, transparent 1.2px);
  background-size: 6px 6px;
  background-repeat: repeat-y;
  background-position: 72px center;
  border-bottom: var(--border-width-sm) solid var(--brutal-shadow);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-xs);
  padding: 0 var(--spacing-sm) 0 var(--spacing-sm); /* Pulled closer to the left edge */
  user-select: none;
}

/* Keep the badge (and console clear+badge cluster) pushed to the right edge,
   while the minimize/focus controls group at the left. */
.panel-header > .panel-badge,
.panel-header > .panel-header-right {
  margin-left: auto;
}
.panel.minimized .panel-badge {
  margin-left: 0 !important;
}

.panel-title {
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  color: var(--on-surface-variant);
  letter-spacing: 0.02em;
  transition: font-size 0.15s ease;
}

/* Ensure panel badges remain fully visible and aligned regardless of panel sizing */

.panel-header-actions, .panel-header-right {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

/* Minimize Button — Neo-Brutalist styled */
.minimize-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-weight: 900;
  font-size: 18px;
  line-height: 1;
  color: var(--on-surface);
  background-color: var(--surface-container-lowest);
  border: var(--border-width-sm) solid var(--brutal-shadow);
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--brutal-shadow);
  padding: 0;
  transition: transform 0.1s ease, box-shadow 0.1s ease, background-color 0.1s ease;
  transform: translateZ(0);
}

.minimize-btn:hover {
  background-color: var(--primary-container);
  color: white;
  transform: translate(-1px, -1px) translateZ(0);
  box-shadow: 3px 3px 0 var(--brutal-shadow);
}

.minimize-btn:active {
  transform: translate(1px, 1px) translateZ(0);
  box-shadow: 1px 1px 0 var(--brutal-shadow);
}

/* Focus Mode + Close buttons — share the Neo-Brutalist control styling */
.focus-btn,
.inspect-btn,
.close-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-weight: 900;
  font-size: 14px;
  line-height: 1;
  color: var(--on-surface);
  background-color: var(--surface-container-lowest);
  border: var(--border-width-sm) solid var(--brutal-shadow);
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--brutal-shadow);
  padding: 0;
  transition: transform 0.1s ease, box-shadow 0.1s ease, background-color 0.1s ease;
  transform: translateZ(0);
}

.focus-svg,
.inspect-svg {
  width: 15px;
  height: 15px;
  display: block;
}

.focus-btn:hover,
.inspect-btn:hover,
.close-btn:hover {
  background-color: var(--primary-container);
  color: white;
  transform: translate(-1px, -1px) translateZ(0);
  box-shadow: 3px 3px 0 var(--brutal-shadow);
}

body.dark-mode .focus-btn:hover,
body.dark-mode .inspect-btn:hover,
body.dark-mode .close-btn:hover {
  color: black;
}

.focus-btn:active,
.inspect-btn:active,
.close-btn:active {
  transform: translate(1px, 1px) translateZ(0);
  box-shadow: 1px 1px 0 var(--brutal-shadow);
}

.close-btn:hover {
  background-color: var(--color-error);
  color: white;
}

/* Eliminate browser-default generic focus rings and apply a premium themed indicator */
.minimize-btn:focus,
.focus-btn:focus,
.inspect-btn:focus,
.close-btn:focus {
  outline: none;
}

.minimize-btn:focus-visible,
.focus-btn:focus-visible,
.inspect-btn:focus-visible,
.close-btn:focus-visible {
  outline: var(--border-width-sm) solid var(--primary-container);
  outline-offset: 1px;
}

/* Active (engaged) Focus Mode button state */
.focus-btn.active {
  background-color: var(--primary-container);
  color: white;
}
body.dark-mode .focus-btn.active {
  color: black;
}

.inspect-btn[aria-pressed="true"] {
  background-color: var(--primary-container);
  color: white;
}

body.dark-mode .inspect-btn[aria-pressed="true"] {
  color: black;
}

/* Hide secondary controls when a panel is collapsed (keep the fused badge+restore pill clean) */
.panel.minimized .focus-btn,
.panel.minimized .inspect-btn,
.panel.minimized .close-btn {
  display: none !important;
}

/* Boring themes: round the control buttons to match the modern shell */
body.boring-light .focus-btn, body.boring-dark .focus-btn,
body.boring-light .inspect-btn, body.boring-dark .inspect-btn,
body.boring-light .close-btn, body.boring-dark .close-btn {
  border-radius: 6px;
  border-width: 1px;
  box-shadow: none;
}
body.boring-light .focus-btn:hover, body.boring-dark .focus-btn:hover,
body.boring-light .inspect-btn:hover, body.boring-dark .inspect-btn:hover,
body.boring-light .close-btn:hover, body.boring-dark .close-btn:hover {
  transform: none;
  box-shadow: none;
}

.panel-badge {
  font-size: 13px; /* Scaled up from 10px for readability */
  font-weight: 900;
  padding: 3px 10px; /* Enhanced box dimensions */
  border: var(--border-width-sm) solid var(--brutal-shadow);
  text-transform: uppercase;
  box-shadow: 2px 2px 0 var(--brutal-shadow); /* Solid brutalist accent */
  letter-spacing: 0.05em;
}

.html-badge { background-color: #ef4444; color: white; }
.css-badge { background-color: #3b82f6; color: white; }
.js-badge { background-color: #eab308; color: black; }
.preview-badge { background-color: #a855f7; color: white; }
.console-badge { background-color: var(--surface-tint); color: white; }
.scratch-badge { background-color: #10b981; color: white; }

/* Hidden panels (e.g. the scratch pad before it is opened) */
.hidden-panel { display: none !important; }

/* End bundled CSS: web/css/components/panels.css */
/* Begin bundled CSS: web/css/components/editor.css */
/* Editor Fields */
/* Editor Fields Wrapper & Highlighting Layers */
.editor-wrapper {
  position: relative;
  flex: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  --editor-code-padding-left: var(--spacing-md);
  background-color: var(--surface-container-lowest, #ffffff);
}

.editor-textarea {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border: none;
  outline: none;
  resize: none;
  font-family: var(--font-code);
  font-size: 14px;
  line-height: 1.5;
  padding: var(--spacing-md) var(--spacing-md) var(--spacing-md) var(--editor-code-padding-left);
  color: transparent; /* Makes text transparent but keeps the caret visible */
  caret-color: var(--on-surface, #271813);
  background-color: transparent;
  tab-size: 4;
  z-index: 2;
  overflow: auto;
  white-space: pre;
  word-wrap: normal;
  box-sizing: border-box;
}

.editor-textarea:focus {
  background-color: rgba(255, 95, 31, 0.03);
}

.editor-textarea:focus-visible {
  box-shadow: inset 0 0 0 var(--border-width-sm, 2px) var(--primary-container, #ff5f1f);
}

.highlight-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border: none;
  padding: var(--spacing-md) var(--spacing-md) var(--spacing-md) var(--editor-code-padding-left);
  font-family: var(--font-code);
  font-size: 14px;
  line-height: 1.5;
  color: var(--on-surface, #271813);
  background-color: transparent;
  z-index: 1;
  pointer-events: none; /* Let scrolls/clicks fall through */
  overflow: hidden;
  white-space: pre;
  word-wrap: normal;
  box-sizing: border-box;
}

.editor-wrapper.syntax-highlight-disabled .editor-textarea {
  color: var(--on-surface, #271813);
}

.editor-wrapper.syntax-highlight-disabled .highlight-overlay {
  display: none;
}

.inspect-line-marker {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 0;
  height: 21px;
  pointer-events: none;
  background-color: rgba(255, 95, 31, 0.18);
  border-top: 1px solid rgba(255, 95, 31, 0.24);
  border-bottom: 1px solid rgba(255, 95, 31, 0.24);
}

body.dark-mode .inspect-line-marker {
  background-color: rgba(255, 138, 61, 0.24);
  border-color: rgba(255, 176, 138, 0.28);
}

body.boring-light .inspect-line-marker {
  background-color: rgba(249, 115, 22, 0.14);
  border-color: rgba(249, 115, 22, 0.22);
}

body.boring-dark .inspect-line-marker {
  background-color: rgba(251, 146, 60, 0.2);
  border-color: rgba(251, 146, 60, 0.28);
}

.editor-wrapper.with-line-numbers {
  --editor-code-padding-left: 54px;
}

.line-number-gutter {
  position: absolute;
  top: var(--spacing-md);
  left: 0;
  width: 42px;
  z-index: 3;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  padding-right: 9px;
  box-sizing: border-box;
  color: var(--on-surface-variant, #5b4138);
  opacity: 0.58;
  font-family: var(--font-code);
  font-size: 12px;
  line-height: 1.5;
  user-select: none;
  background: linear-gradient(
    90deg,
    var(--surface-container-lowest, #ffffff) 0%,
    var(--surface-container-lowest, #ffffff) 78%,
    transparent 100%
  );
}

.line-number-gutter span {
  display: block;
  height: 21px;
}

.editor-wrapper.with-line-numbers::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 42px;
  z-index: 3;
  border-right: 1px dashed var(--outline-variant, #e3bfb3);
  pointer-events: none;
}

/* Token classes for syntax highlighting */
.token-keyword { color: var(--token-keyword, #ab3600); font-weight: 700; }
.token-string { color: var(--token-string, #059669); }
.token-number { color: var(--token-number, #d97706); }
.token-comment { color: var(--token-comment, #78716c); font-style: italic; }
.token-operator { color: var(--token-operator, #271813); }
.token-punctuation { color: var(--token-punctuation, #5b4138); }
.token-tag { color: var(--token-tag, #2563eb); font-weight: 700; }
.token-attr { color: var(--token-attr, #db2777); }
.token-property { color: var(--token-property, #7c3aed); }
.token-value { color: var(--token-value, #059669); }
.token-selector { color: var(--token-selector, #b91c1c); font-weight: 700; }
.token-identifier { color: var(--token-identifier, #271813); }

/* End bundled CSS: web/css/components/editor.css */
/* Begin bundled CSS: web/css/components/preview-frame.css */
/* Preview Rendering Iframe */
.iframe-container {
  flex: 1;
  background-color: #ffffff;
  position: relative;
  min-height: 0;
}

#preview-iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  background-color: #ffffff;
}

/* Block iframe inputs only while active drag coordinates are being tracked, preserving full preview interactions otherwise */
.panel.dragging #preview-iframe {
  pointer-events: none !important;
}


/* End bundled CSS: web/css/components/preview-frame.css */
/* Begin bundled CSS: web/css/components/console.css */
/* Console Panel Layout */
.console-panel {
  display: flex;
  flex-direction: column;
}

.console-output {
  flex: 1;
  padding: var(--spacing-sm);
  background-color: var(--surface-container-lowest);
  overflow-y: auto;
  font-family: var(--font-code);
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  min-height: 0;
}

.console-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 6px var(--spacing-sm);
  border-bottom: 1px dashed var(--outline-variant);
}

.console-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}

.console-time {
  color: var(--on-surface-variant);
  opacity: 0.6;
  user-select: none;
  font-size: 10px;
  margin-right: 2px;
}

.console-level,
.console-source,
.console-location,
.console-repeat {
  display: inline-flex;
  align-items: center;
  min-height: 17px;
  padding: 1px 5px;
  border: 1px solid var(--brutal-shadow);
  background-color: var(--surface-container-lowest);
  color: var(--on-surface);
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  box-shadow: 1px 1px 0 var(--brutal-shadow);
}

.console-source,
.console-location {
  color: var(--on-surface-variant);
}

.console-repeat {
  display: none;
  background-color: var(--surface-tint);
  color: white;
}

.console-repeat:not(:empty):not([data-count="1"]) {
  display: inline-flex;
}

.console-body {
  white-space: pre-wrap;
  word-break: normal;
  overflow-wrap: anywhere;
  color: var(--on-surface);
}

.console-details {
  width: 100%;
  margin: 0;
  padding: 6px;
  overflow-x: auto;
  white-space: pre-wrap;
  border-left: 2px solid var(--outline-variant);
  background-color: var(--surface-container);
  color: var(--on-surface-variant);
  font-family: var(--font-code);
  font-size: 11px;
  line-height: 1.45;
}

.console-tree-list {
  width: 100%;
  display: grid;
  gap: 4px;
}

.console-tree,
.console-tree-leaf {
  width: 100%;
  color: var(--on-surface);
  font-family: var(--font-code);
  font-size: 11px;
}

.console-tree summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--on-surface);
}

.console-tree-children {
  display: grid;
  gap: 3px;
  margin: 4px 0 0 12px;
  padding-left: 8px;
  border-left: 1px dashed var(--outline-variant);
}

/* Console Message Levels */
.console-row.log-info {
  background-color: rgba(59, 130, 246, 0.05);
  border-left: 3px solid var(--color-info);
}
.console-row.log-info .console-level {
  background-color: var(--color-info);
  color: white;
}
.console-row.log-info .console-body {
  color: var(--color-info);
}

.console-row.log-warn {
  background-color: rgba(245, 158, 11, 0.05);
  border-left: 3px solid var(--color-warning);
}
.console-row.log-warn .console-level {
  background-color: var(--color-warning);
  color: black;
}
.console-row.log-warn .console-body {
  color: var(--color-warning);
}

.console-row.log-error {
  background-color: rgba(239, 68, 68, 0.05);
  border-left: 3px solid var(--color-error);
}
.console-row.log-error .console-level {
  background-color: var(--color-error);
  color: white;
}
.console-row.log-error .console-body {
  color: var(--color-error);
}

.console-row.system-msg {
  background-color: var(--surface-container);
  border-left: 3px solid var(--brutal-shadow);
  font-style: italic;
}

.console-row.system-msg .console-level {
  background-color: var(--brutal-shadow);
  color: var(--surface-container-lowest);
}

/* Console Toolbar (Filters & Actions) */
.console-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  padding: 4px var(--spacing-sm);
  background-color: var(--surface-container);
  border-bottom: var(--border-width-sm) solid var(--brutal-shadow);
  user-select: none;
}

.console-filter-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}

.console-filter-tabs::-webkit-scrollbar {
  display: none;
}

.console-filter-btn {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 7px;
  min-height: 22px;
  background-color: var(--surface-container-lowest);
  border: 1px solid var(--brutal-shadow);
  box-shadow: 1px 1px 0 var(--brutal-shadow);
  color: var(--on-surface);
  cursor: pointer;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  transition: background-color 0.1s ease, transform 0.1s ease, box-shadow 0.1s ease;
  white-space: nowrap;
}

.console-filter-btn:hover {
  background-color: var(--surface-container);
  transform: translate(-0.5px, -0.5px);
  box-shadow: 2px 2px 0 var(--brutal-shadow);
}

.console-filter-btn.active {
  background-color: var(--primary-container);
  color: white;
  transform: translate(0.5px, 0.5px);
  box-shadow: none;
}

body.dark-mode .console-filter-btn.active {
  color: black;
}

.console-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  font-size: 9px;
  font-weight: 800;
  border-radius: 999px;
  background-color: var(--surface-container-high);
  color: var(--on-surface-variant);
  min-width: 14px;
  height: 14px;
  line-height: 1;
}

.console-filter-count[data-count="0"] {
  display: none;
}

.console-filter-btn.active .console-filter-count {
  background-color: rgba(255, 255, 255, 0.35);
  color: inherit;
}

body.dark-mode .console-filter-btn.active .console-filter-count {
  background-color: rgba(0, 0, 0, 0.3);
  color: black;
}

.console-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.console-tool-btn {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 7px;
  min-height: 22px;
  background-color: var(--surface-container-lowest);
  border: 1px solid var(--brutal-shadow);
  box-shadow: 1px 1px 0 var(--brutal-shadow);
  color: var(--on-surface);
  cursor: pointer;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  transition: background-color 0.1s ease, transform 0.1s ease, box-shadow 0.1s ease;
  white-space: nowrap;
}

.console-tool-btn:hover {
  background-color: var(--surface-container);
  transform: translate(-0.5px, -0.5px);
  box-shadow: 2px 2px 0 var(--brutal-shadow);
}

.console-tool-btn:active {
  transform: translate(0.5px, 0.5px);
  box-shadow: none;
}

.console-tool-btn.copied {
  background-color: var(--color-success, #22c55e);
  color: white;
  border-color: var(--brutal-shadow);
}

/* Modern Flat Boring Mode overrides for Console Toolbar */
body.boring-light .console-toolbar,
body.boring-dark .console-toolbar {
  border-bottom: 1px solid var(--outline-variant);
  background-color: var(--surface-container);
  padding: 5px var(--spacing-sm);
}

body.boring-light .console-filter-btn,
body.boring-dark .console-filter-btn,
body.boring-light .console-tool-btn,
body.boring-dark .console-tool-btn {
  border-radius: 4px;
  border: 1px solid var(--outline-variant);
  box-shadow: none;
  font-weight: 500;
  text-transform: none;
}

body.boring-light .console-filter-btn:hover,
body.boring-dark .console-filter-btn:hover,
body.boring-light .console-tool-btn:hover,
body.boring-dark .console-tool-btn:hover {
  background-color: var(--surface-container-high, rgba(0, 0, 0, 0.05));
  transform: none;
  box-shadow: none;
}

body.boring-light .console-filter-btn.active,
body.boring-dark .console-filter-btn.active {
  background-color: var(--primary-container);
  border-color: var(--primary-container);
  color: white;
}

body.boring-light .console-filter-count,
body.boring-dark .console-filter-count {
  border-radius: 8px;
}

body.boring-light .console-tool-btn.copied,
body.boring-dark .console-tool-btn.copied {
  background-color: #16a34a;
  color: white;
  border-color: #16a34a;
}



/* End bundled CSS: web/css/components/console.css */
/* Begin bundled CSS: web/css/components/panel-drag.css */
/* ==========================================================================
   Panel Drag System — GPU-accelerated transform-based dragging
   ========================================================================== */

.panel-header {
  cursor: grab;
  user-select: none;
  touch-action: none; /* Prevent browser scroll during drag on touch devices */
}

.panel-header:active {
  cursor: grabbing;
}

.panel.dragging {
  transition: none !important;
  cursor: grabbing;
  z-index: 200;
  opacity: 0.95;
  /* Ensure the dragged panel renders on its own GPU layer */
  will-change: transform;
  transform: translateZ(0);
  /* Slightly scale up for visual feedback while keeping it on GPU */
  box-shadow: 8px 8px 0 var(--brutal-shadow);
}

/* Ghost placeholder shown where panel was originally */
.panel-placeholder {
  opacity: 0.3;
  border: var(--border-width) dashed var(--outline-variant);
  box-shadow: none;
  pointer-events: none;
}


/* End bundled CSS: web/css/components/panel-drag.css */
/* Begin bundled CSS: web/css/components/responsive.css */
/* ==========================================================================
   Responsive Navigation Tabs (Bottom Nav)
   ========================================================================== */

.bottom-nav {
  display: none; /* Hidden on Desktop */
  height: var(--bottom-bar-height);
  background-color: var(--surface-container);
  border-top: var(--border-width) solid var(--brutal-shadow);
  grid-template-columns: repeat(5, 1fr);
  z-index: 100;
  box-shadow: 0 -4px 0 rgba(var(--brutal-shadow-rgb), 0.1);
  position: relative;
}

.bottom-nav-item {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--on-surface-variant);
  cursor: pointer;
  font-family: var(--font-ui);
  font-weight: 900; /* Ultra prominent bold weight */
  font-size: 14px; /* Far larger size */
  text-transform: uppercase;
  letter-spacing: 0.03em;
  transition: background-color 0.1s ease, color 0.1s ease, border-color 0.1s ease, margin-top 0.1s ease;
  border-right: var(--border-width-sm) dashed var(--outline-variant);
}

.bottom-nav-item:last-child {
  border-right: none;
}

.bottom-nav-item.active {
  background-color: var(--primary-container);
  color: white;
  border-top: var(--border-width) solid var(--brutal-shadow);
  margin-top: calc(-1 * var(--border-width));
  position: relative;
  z-index: 10;
}

body.dark-mode .bottom-nav-item.active {
  color: black;
}

/* ==========================================================================
   Media Queries & Layout Modes (Responsive Engine)
   ========================================================================== */

/* 1. Desktop & Tablet Split Screens (Min 880px Width) */
body.desktop-view {
  .workspace {
    position: relative;
    display: block;
    height: calc(100vh - var(--top-bar-height));
    padding: var(--spacing-md);
    overflow: hidden;
  }

  /* Dissolve column wrappers so absolute positioning works relative to .workspace */
  .workspace-left, .workspace-middle, .workspace-right {
    display: contents;
  }

  /* Make panels draggable, absolute, and resizable independently in both directions */
  .panel {
    position: absolute;
    resize: both;
    overflow: hidden;
  }

  /* HTML Panel */
  #panel-html {
    left: var(--spacing-md);
    top: var(--spacing-md);
    width: calc(30% - 11px - var(--spacing-md));
    height: calc(33.33% - 11px - var(--spacing-md));
  }

  /* CSS Panel */
  #panel-css {
    left: var(--spacing-md);
    top: calc(33.33% + 5px);
    width: calc(30% - 11px - var(--spacing-md));
    height: calc(33.33% - 11px);
  }

  /* JS Panel */
  #panel-js {
    left: var(--spacing-md);
    top: calc(66.66% + 10px);
    width: calc(30% - 11px - var(--spacing-md));
    height: calc(33.33% - 10px - var(--spacing-md));
  }

  /* Preview Panel */
  #panel-preview {
    left: calc(30% + 5px);
    top: var(--spacing-md);
    width: calc(45% - 10px);
    height: calc(100% - var(--spacing-md) * 2);
  }

  /* Console Panel */
  #panel-console {
    left: calc(75% + 11px);
    top: var(--spacing-md);
    width: calc(25% - 11px - var(--spacing-md));
    height: calc(100% - var(--spacing-md) * 2);
  }

  /* Scratch Pad Panel — floats centered-ish over the workspace when opened */
  #panel-scratchpad {
    left: calc(50% - 310px);
    top: 14%;
    width: min(620px, calc(100% - 48px));
    height: 62%;
    z-index: 150;
  }

  /* Prevent iframe mouse interception during preview resizing or panel dragging */
  .workspace-middle:active iframe,
  #panel-preview:active iframe {
    pointer-events: none;
  }

  /* Collapsed panel state — hide all children except header */
  .panel.minimized > :not(.panel-header) {
    display: none;
  }

  .panel.minimized {
    flex: 0 0 auto;
    width: max-content !important;
    height: auto !important;
    min-height: unset !important;
    min-width: unset !important;
    overflow: visible !important;
    container-type: normal !important; /* Fixes browser inline size containment bug that collapses minimized panels to 0px width */
    
    border: var(--border-width) solid var(--brutal-shadow);
    box-shadow: 3px 3px 0 var(--brutal-shadow);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    border-radius: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .panel.minimized:hover {
    box-shadow: 5px 5px 0 var(--brutal-shadow);
  }

  /* Theme color matching */
  #panel-html.minimized { background-color: #ef4444; }
  #panel-css.minimized { background-color: #3b82f6; }
  #panel-js.minimized { background-color: #eab308; }
  #panel-preview.minimized { background-color: #a855f7; }
  #panel-console.minimized { background-color: var(--surface-tint); }
  #panel-scratchpad.minimized { background-color: #10b981; }

  /* Keep header transparent inside the minimized colored panel */
  .panel.minimized .panel-header {
    background: transparent;
    border: none;
    padding: 0;
    height: auto;
    width: max-content;
    display: flex;
    align-items: center;
    gap: 0;
  }

  /* Styling the badge name inside the minimized panel */
  .panel.minimized .panel-badge {
    display: inline-block;
    height: auto;
    line-height: 1;
    padding: 4px 8px 4px 10px;
    margin: 0;
    vertical-align: middle;
    background: transparent;
    border: none;
    box-shadow: none;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    order: 1;
  }

  /* Text color matching */
  #panel-html.minimized .panel-badge,
  #panel-html.minimized .minimize-btn {
    color: #ffffff;
  }
  #panel-css.minimized .panel-badge,
  #panel-css.minimized .minimize-btn {
    color: #ffffff;
  }
  #panel-js.minimized .panel-badge,
  #panel-js.minimized .minimize-btn {
    color: #000000;
  }
  #panel-preview.minimized .panel-badge,
  #panel-preview.minimized .minimize-btn {
    color: #ffffff;
  }
  #panel-console.minimized .panel-badge,
  #panel-console.minimized .minimize-btn {
    color: #ffffff;
  }
  #panel-scratchpad.minimized .panel-badge,
  #panel-scratchpad.minimized .minimize-btn {
    color: #ffffff;
  }

  /* Style the expand/restore button */
  .panel.minimized .minimize-btn {
    height: 25px;
    width: 25px;
    font-size: 14px;
    margin: 0;
    border: none;
    box-shadow: none;
    transform: none;
    z-index: 1;
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    order: 2;
    transition: background-color 0.15s ease;
  }

  /* Dividing line between badge name and restore button */
  #panel-js.minimized .minimize-btn {
    border-left: 1px solid rgba(0, 0, 0, 0.15);
  }
  #panel-html.minimized .minimize-btn,
  #panel-css.minimized .minimize-btn,
  #panel-preview.minimized .minimize-btn,
  #panel-console.minimized .minimize-btn,
  #panel-scratchpad.minimized .minimize-btn {
    border-left: 1px solid rgba(255, 255, 255, 0.25);
  }

  /* Hover highlights for the restore button */
  .panel.minimized .minimize-btn:hover {
    background-color: rgba(255, 255, 255, 0.15);
  }
  #panel-js.minimized .minimize-btn:hover {
    background-color: rgba(0, 0, 0, 0.08);
  }

  /* Console-specific minimization layouts */
  .panel.minimized .panel-header-right {
    display: contents;
  }

  /* Boring Mode overrides */
  body.boring-light .panel.minimized,
  body.boring-dark .panel.minimized {
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(0, 0, 0, 0.1);
  }

  body.boring-dark .panel.minimized {
    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  body.boring-light .panel.minimized .minimize-btn,
  body.boring-dark .panel.minimized .minimize-btn {
    border-radius: 0;
  }
}

/* 2. Mobile Layout & Tab Navigation (Max 879.98px Width)
   The page shell is fixed to three rows: top bar, active panel, bottom tabs.
   Scrolling is contained inside the active panel contents only. */
body.mobile-view {
  display: grid;
  grid-template-rows: var(--top-bar-height) minmax(0, 1fr) var(--bottom-bar-height);
  height: 100dvh;
  min-height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  
  .top-bar {
    grid-row: 1;
    padding: 0 var(--spacing-sm);
    min-height: 0;
  }
  
  /* Hide templates/theme selector groups in top-bar on mobile */
  .top-bar-left .control-group {
    display: none;
  }
  
  .top-bar-left {
    gap: var(--spacing-sm);
  }
  
  .brand-logo {
    font-size: 18px;
    padding: 2px 8px;
  }

  /* Hide header action buttons on mobile since they collapse into the menu bar */
  #run-btn, #export-btn, #reset-btn, #live-btn, #import-btn {
    display: none;
  }

  #share-btn {
    display: none;
  }
  
  /* Hide desktop-only window manager controls on mobile */
  .minimize-btn,
  .inspect-btn,
  .focus-btn {
    display: none;
  }
  
  /* Dissolve column wrappers into direct children in mobile active tab grid */
  .workspace-left, .workspace-middle, .workspace-right {
    display: contents;
  }
  
  .workspace {
    grid-row: 2;
    padding: 8px var(--spacing-sm);
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "active-panel";
    height: 100%;
    min-height: 0;
    overflow: hidden;
    position: relative;
  }
  
  /* Scrap the window header system completely on mobile, making headers invisible */
  .panel-header {
    background: transparent;
    border: none;
    height: 0;
    min-height: 0;
    padding: 0;
    box-shadow: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    pointer-events: none; /* Allow clicking through invisible header space to textareas */
  }
  
  /* Hide all header element children by default */
  .panel-header > * {
    display: none;
  }
  
  /* Keep only the scratch close action visible in the top right corner */
  .panel-header .scratch-close-btn {
    display: flex;
    pointer-events: auto; /* Enable interaction */
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
  }
  
  /* In mobile mode, hide all panels by default, show active */
  .panel {
    display: none;
    grid-area: active-panel;
    position: relative;
    height: 100% !important;
    min-height: 0;
    width: 100% !important;
    box-shadow: 3px 3px 0 var(--brutal-shadow);
    overflow: hidden !important;
    resize: none;
    touch-action: pan-y;
  }
  
  .panel.mobile-active {
    display: flex;
    animation: slideUp 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .mobile-swipe-edge {
    display: none;
  }

  .panel.mobile-active .mobile-swipe-edge {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 28px;
    z-index: 120;
    pointer-events: auto;
    touch-action: none;
  }

  .panel.mobile-active .mobile-swipe-edge.left {
    left: 0;
  }

  .panel.mobile-active .mobile-swipe-edge.right {
    right: 0;
  }
  
  .bottom-nav {
    grid-row: 3;
    display: grid;
    min-height: 0;
  }

  /* Scratch pad panel overlay on mobile when opened */
  .panel.scratch-panel:not(.hidden-panel) {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    min-width: 0;
    min-height: 0;
    width: 100% !important;
    height: 100% !important;
    z-index: 200;
  }
}

/* 3. Intermediate Desktop Breakpoint (880px to 1099.98px)
   Hides non-essential action buttons from the top bar to prevent squeezing
   and logo vertical wrapping. Buttons remain accessible in the hamburger menu. */
body.desktop-view.intermediate-width {
  #reset-btn, #export-btn, #share-btn, #import-btn, #live-btn {
    display: none;
  }
}

@keyframes slideUp {
  from {
    opacity: 0.7;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* End bundled CSS: web/css/components/responsive.css */
/* Begin bundled CSS: web/css/components/context-menu.css */
/* Custom Right-Click Context Menu overlay */
.custom-context-menu {
  position: absolute;
  z-index: 10000;
  min-width: 160px;
  background-color: var(--surface-container);
  border: var(--border-width-sm) solid var(--brutal-shadow);
  box-shadow: 4px 4px 0 var(--brutal-shadow);
  font-family: var(--font-ui);
  padding: 4px 0;
  display: flex;
  flex-direction: column;
  animation: contextMenuScaleUp 0.1s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: top left;
}

@keyframes contextMenuScaleUp {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.custom-context-menu .menu-item {
  padding: 8px 16px;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  color: var(--on-surface);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  box-sizing: border-box;
  transition: background-color 0.1s ease, color 0.1s ease;
}

.custom-context-menu .menu-item:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.custom-context-menu .menu-item:disabled:hover {
  background-color: transparent;
  color: var(--on-surface) !important;
}

.custom-context-menu .menu-item:hover {
  background-color: var(--primary-container);
  color: white !important;
}

.custom-context-menu .menu-item.active {
  background-color: var(--primary-container);
  color: white !important;
}

body.dark-mode .custom-context-menu .menu-item:hover,
body.dark-mode .custom-context-menu .menu-item.active {
  color: black !important;
}

/* Dividing line between groups */
.custom-context-menu .menu-divider {
  height: 1px;
  border-bottom: 1px dashed var(--outline-variant);
  margin: 4px 0;
}

/* Modern Flat Boring Mode overrides for Context Menu */
body.boring-light .custom-context-menu,
body.boring-dark .custom-context-menu {
  border-radius: 6px;
  border: 1px solid var(--outline-variant);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 4px;
}

body.boring-light .custom-context-menu .menu-item,
body.boring-dark .custom-context-menu .menu-item {
  font-weight: 500;
  text-transform: none;
  border-radius: 4px;
}

body.boring-light .custom-context-menu .menu-item:hover,
body.boring-dark .custom-context-menu .menu-item:hover,
body.boring-light .custom-context-menu .menu-item.active,
body.boring-dark .custom-context-menu .menu-item.active {
  border-radius: 4px;
  background-color: var(--surface-container);
  color: var(--on-surface) !important;
}

body.boring-light .custom-context-menu .menu-item:active,
body.boring-dark .custom-context-menu .menu-item:active {
  background-color: var(--outline-variant);
}

body.boring-light .custom-context-menu .menu-divider,
body.boring-dark .custom-context-menu .menu-divider {
  border-bottom: 1px solid var(--outline-variant);
  margin: 4px 0;
}


/* End bundled CSS: web/css/components/context-menu.css */
/* Begin bundled CSS: web/css/components/editor-search.css */
/* Inline Editor Search Bar */
.editor-search-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 38px;
  background-color: var(--surface-container-lowest);
  border-bottom: var(--border-width-sm) solid var(--brutal-shadow);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  padding: 0 var(--spacing-sm);
  box-sizing: border-box;
}

.editor-search-bar .search-input-group {
  display: flex;
  align-items: center;
  flex: 1;
  gap: var(--spacing-xs);
}

.editor-search-bar .search-input {
  flex: 1;
  height: 26px;
  border: var(--border-width-sm) solid var(--brutal-shadow);
  background-color: var(--surface-container);
  color: var(--on-surface);
  padding: 0 8px;
  font-family: var(--font-code);
  font-size: 12px;
  outline: none;
  box-sizing: border-box;
}

.editor-search-bar .search-input:focus-visible {
  outline: var(--border-width-sm, 2px) solid var(--primary-container, #ff5f1f);
  outline-offset: 1px;
}

.editor-search-bar .search-btn:focus-visible,
.editor-search-bar .search-close-btn:focus-visible {
  outline: var(--border-width-sm, 2px) solid var(--primary-container, #ff5f1f);
  outline-offset: 2px;
}

.editor-search-bar .search-btn {
  height: 26px;
  padding: 0 8px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--on-surface);
  background-color: var(--surface-container);
  border: var(--border-width-sm) solid var(--brutal-shadow);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 1px 1px 0 var(--brutal-shadow);
  box-sizing: border-box;
}

.editor-search-bar .search-btn:hover {
  background-color: var(--primary-container);
  color: white;
}

body.dark-mode .editor-search-bar .search-btn:hover {
  color: black;
}

.editor-search-bar .search-btn:active {
  transform: translate(1px, 1px);
  box-shadow: none;
}

.editor-search-bar .search-badge {
  font-family: var(--font-code);
  font-size: 11px;
  font-weight: 700;
  color: var(--on-surface-variant);
  background-color: var(--surface-container);
  border: var(--border-width-sm) dashed var(--outline-variant);
  padding: 2px 6px;
  user-select: none;
}

.editor-search-bar .search-close-btn {
  background: transparent;
  border: none;
  font-weight: 900;
  font-size: 14px;
  cursor: pointer;
  color: var(--on-surface-variant);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.editor-search-bar .search-close-btn:hover {
  color: var(--color-error);
}

/* Adjust Textarea offsets when search is open to prevent overlapping text */
.editor-wrapper.search-active .editor-textarea,
.editor-wrapper.search-active .highlight-overlay {
  top: 38px !important;
  height: calc(100% - 38px) !important;
}

/* Boring Mode overrides for Search Bar */
body.boring-light .editor-search-bar,
body.boring-dark .editor-search-bar {
  border-bottom: 1px solid var(--outline-variant);
}

body.boring-light .editor-search-bar .search-input,
body.boring-dark .editor-search-bar .search-input {
  border-radius: 4px;
  border: 1px solid var(--outline-variant);
}

body.boring-light .editor-search-bar .search-btn,
body.boring-dark .editor-search-bar .search-btn {
  border-radius: 4px;
  border: 1px solid var(--outline-variant);
  box-shadow: none;
}
body.boring-light .editor-search-bar .search-btn:active,
body.boring-dark .editor-search-bar .search-btn:active {
  transform: none;
}

/* End bundled CSS: web/css/components/editor-search.css */
/* Begin bundled CSS: web/css/components/resize.css */
/* Custom Edge Resize Handles */
.panel .resize-handle {
  position: absolute;
  z-index: 15;
  background: transparent;
}

.panel .resize-left {
  left: -4px;
  top: 0;
  bottom: 0;
  width: 8px;
  cursor: ew-resize;
}

.panel .resize-right {
  right: -4px;
  top: 0;
  bottom: 0;
  width: 8px;
  cursor: ew-resize;
}

.panel .resize-top {
  top: -4px;
  left: 0;
  right: 0;
  height: 8px;
  cursor: ns-resize;
}

.panel .resize-bottom {
  bottom: -4px;
  left: 0;
  right: 0;
  height: 8px;
  cursor: ns-resize;
}

/* Hide browser-native resizer indicators on desktop to keep visual system premium */
@media (min-width: 880px) {
  .panel {
    resize: none !important;
  }
}


/* End bundled CSS: web/css/components/resize.css */
/* Begin bundled CSS: web/css/components/preview-presets.css */
/* Live Preview Viewport Presets & Bezel Frames */
.preview-viewport-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #ffffff;
  transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1), width 0.2s cubic-bezier(0.25, 0.8, 0.25, 1), height 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.preview-viewport-wrapper.device-frame-active {
  box-sizing: border-box;
  background-color: #ffffff;
  overflow: hidden;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

/* Boring Mode keeps the simulated viewport truthful: no decorative frame. */
body.boring-light .preview-viewport-wrapper.device-frame-active,
body.boring-dark .preview-viewport-wrapper.device-frame-active {
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.preview-viewport-wrapper.device-shell-active {
  border: none;
  border-radius: 42px;
  box-shadow: 0 0 0 10px #111111, 0 18px 42px rgba(0, 0, 0, 0.38);
  isolation: isolate;
  overflow: hidden;
}

.preview-viewport-wrapper.device-custom-frame {
  border-radius: 28px;
  box-shadow: 0 0 0 8px #202020, 0 14px 30px rgba(0, 0, 0, 0.28);
}

body.boring-light .preview-viewport-wrapper.device-shell-active,
body.boring-dark .preview-viewport-wrapper.device-shell-active {
  border-radius: 24px;
  box-shadow: 0 0 0 1px var(--outline-variant), 0 12px 28px rgba(0, 0, 0, 0.18);
}

.preview-viewport-wrapper.device-shell-active #preview-iframe {
  position: relative;
  z-index: 1;
  border-radius: inherit;
}

.preview-device-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(
      to bottom,
      rgba(8, 8, 8, 0.06) 0 var(--preview-safe-top, 0px),
      transparent var(--preview-safe-top, 0px) calc(100% - var(--preview-safe-bottom, 0px)),
      rgba(8, 8, 8, 0.06) calc(100% - var(--preview-safe-bottom, 0px)) 100%
    );
}

.preview-device-overlay::before,
.preview-device-overlay::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 4;
}

.preview-browser-chrome {
  position: absolute;
  inset: 0;
  z-index: 3;
  color: #111111;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  pointer-events: none;
  user-select: none;
}

.preview-browser-status {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  min-height: 22px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 8px 24px 0;
  color: #050505;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.34);
}

.preview-browser-status-android {
  min-height: 24px;
  padding: 6px 18px 0;
  color: #1f1f1f;
}

.preview-browser-status-icons {
  display: flex;
  align-items: center;
  gap: 5px;
}

.preview-browser-signal,
.preview-browser-wifi,
.preview-browser-battery {
  position: relative;
  display: inline-block;
  color: currentColor;
}

.preview-browser-signal {
  width: 13px;
  height: 10px;
  background:
    linear-gradient(to top, currentColor 0 35%, transparent 35%) 0 0 / 3px 100% no-repeat,
    linear-gradient(to top, currentColor 0 55%, transparent 55%) 5px 0 / 3px 100% no-repeat,
    linear-gradient(to top, currentColor 0 78%, transparent 78%) 10px 0 / 3px 100% no-repeat;
}

.preview-browser-wifi {
  width: 12px;
  height: 9px;
}

.preview-browser-wifi::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 1px;
  width: 10px;
  height: 7px;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
}

.preview-browser-wifi::after {
  content: "";
  position: absolute;
  left: 5px;
  bottom: 0;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
}

.preview-browser-battery {
  width: 18px;
  height: 9px;
  border: 1.5px solid currentColor;
  border-radius: 3px;
}

.preview-browser-battery::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 11px;
  height: 3px;
  border-radius: 2px;
  background: currentColor;
}

.preview-browser-battery::after {
  content: "";
  position: absolute;
  top: 2px;
  right: -3px;
  width: 2px;
  height: 4px;
  border-radius: 0 2px 2px 0;
  background: currentColor;
}

.preview-browser-toolbar {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  gap: 8px;
  color: #1b1b1f;
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
}

.preview-browser-toolbar-bottom {
  bottom: 0;
  flex-direction: column;
  padding: 8px 14px max(8px, var(--preview-safe-bottom, 0px));
  background: rgba(247, 247, 249, 0.82);
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.08);
}

.preview-browser-toolbar-top {
  top: 0;
  align-items: center;
  min-height: 48px;
  padding: 6px 10px;
  background: rgba(250, 250, 250, 0.9);
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.preview-browser-chrome-ios .preview-browser-toolbar-bottom {
  border-radius: 0 0 36px 36px;
}

.preview-browser-chrome-android .preview-browser-toolbar-top {
  top: var(--preview-safe-top, 24px);
  min-height: 54px;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid rgba(32, 33, 36, 0.14);
  box-shadow: 0 4px 14px rgba(32, 33, 36, 0.08);
}

.preview-browser-chrome-android-tablet .preview-browser-toolbar-top {
  top: 0;
  min-height: 56px;
  padding: 8px 16px;
}

.preview-browser-chrome-android-tablet .preview-browser-status {
  display: none;
}

.preview-browser-toolbar-tablet {
  min-height: 52px;
  padding: 8px 12px;
  background: rgba(244, 244, 247, 0.86);
}

.preview-browser-address {
  flex: 1 1 auto;
  min-width: 0;
  height: 31px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  color: #202124;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.01em;
  overflow: hidden;
}

.preview-browser-chrome-android .preview-browser-address {
  height: 36px;
  justify-content: flex-start;
  background: #f1f3f4;
  box-shadow: inset 0 0 0 1px rgba(60, 64, 67, 0.08);
  font-family: system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
}

.preview-browser-toolbar-tablet .preview-browser-address {
  max-width: 430px;
}

.preview-browser-host {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preview-browser-lock {
  position: relative;
  flex: 0 0 auto;
  width: 8px;
  height: 7px;
  border: 1.5px solid currentColor;
  border-radius: 2px;
  opacity: 0.74;
}

.preview-browser-lock::before {
  content: "";
  position: absolute;
  left: 1px;
  top: -6px;
  width: 4px;
  height: 5px;
  border: 1.5px solid currentColor;
  border-bottom: 0;
  border-radius: 5px 5px 0 0;
}

.preview-browser-icon-row {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 26px;
}

.preview-browser-toolbar-bottom .preview-browser-icon-row {
  width: 100%;
  justify-content: space-around;
  padding: 0 4px;
}

.preview-browser-icon {
  position: relative;
  width: 23px;
  height: 23px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
  opacity: 0.82;
}

.preview-browser-icon::before,
.preview-browser-icon::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
}

.preview-browser-icon-back::before,
.preview-browser-icon-forward::before {
  width: 9px;
  height: 9px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}

.preview-browser-icon-back::before {
  transform: rotate(45deg);
}

.preview-browser-icon-forward::before {
  transform: rotate(-135deg);
}

.preview-browser-icon-share::before {
  bottom: 4px;
  width: 14px;
  height: 12px;
  border: 2px solid currentColor;
  border-top: 0;
  border-radius: 3px;
}

.preview-browser-icon-share::after {
  top: 3px;
  width: 8px;
  height: 8px;
  border-left: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(45deg);
}

.preview-browser-icon-bookmarks::before {
  width: 12px;
  height: 17px;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 2px 2px 0 0;
}

.preview-browser-icon-bookmarks::after {
  bottom: 2px;
  width: 10px;
  height: 8px;
  background: currentColor;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 55%, 0 100%);
}

.preview-browser-icon-tabs::before {
  width: 12px;
  height: 13px;
  border: 2px solid currentColor;
  border-radius: 3px;
  transform: translate(2px, -2px);
}

.preview-browser-icon-tabs::after {
  width: 12px;
  height: 13px;
  border: 2px solid currentColor;
  border-radius: 3px;
  transform: translate(-3px, 3px);
  background: rgba(255, 255, 255, 0.42);
}

.preview-browser-icon-menu::before {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 -7px 0 currentColor, 0 7px 0 currentColor;
}

.preview-browser-icon-sidebar::before {
  width: 18px;
  height: 14px;
  border: 2px solid currentColor;
  border-radius: 3px;
}

.preview-browser-icon-sidebar::after {
  left: 7px;
  width: 2px;
  height: 14px;
  background: currentColor;
}

.preview-browser-icon-plus::before,
.preview-browser-icon-plus::after {
  width: 14px;
  height: 2px;
  background: currentColor;
  border-radius: 999px;
}

.preview-browser-icon-plus::after {
  transform: rotate(90deg);
}

.preview-viewport-wrapper.device-cutout-dynamic-island .preview-device-overlay::before {
  top: 11px;
  left: 50%;
  width: 126px;
  height: 37px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #050505;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.preview-viewport-wrapper.device-cutout-hole-punch .preview-device-overlay::before {
  top: 12px;
  left: 50%;
  width: 16px;
  height: 16px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #050505;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.preview-viewport-wrapper.device-cutout-none .preview-device-overlay::before {
  display: none;
}

.preview-device-overlay::after {
  left: 50%;
  bottom: 8px;
  width: 38%;
  max-width: 140px;
  height: 4px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(8, 8, 8, 0.42);
}

.preview-viewport-wrapper.device-chrome-android-chrome-approx .preview-device-overlay::after,
.preview-viewport-wrapper.device-chrome-android-tablet-approx .preview-device-overlay::after,
.preview-viewport-wrapper.device-chrome-custom .preview-device-overlay::after,
.preview-viewport-wrapper.device-chrome-none .preview-device-overlay::after {
  display: none;
}

/* Zoom/status badge sits in reserved space and never overlays the preview. */
.preview-preset-badge {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 50;
  background-color: var(--surface-container);
  color: var(--on-surface);
  border: var(--border-size) solid var(--on-surface);
  border-radius: var(--border-radius);
  padding: 4px 10px;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  pointer-events: none;
  box-shadow: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.preview-preset-badge .badge-zoom {
  opacity: 0.8;
  font-weight: 400;
  font-size: 10px;
  padding-left: 6px;
  border-left: 1px solid var(--outline-variant);
}

/* If dragging or resizing a panel, disable transitions for absolute 60fps performance */
.panel.dragging .preview-viewport-wrapper {
  transition: none !important;
}
.panel.resizing-active .preview-viewport-wrapper {
  transition: none !important;
}

/* End bundled CSS: web/css/components/preview-presets.css */
/* Begin bundled CSS: web/css/components/custom-select.css */
/* ==========================================================================
   Native-backed themed select skins
   ========================================================================== */

.select-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
}

/* Keep the real native select interactive for labels, keyboard, forms, tests,
   and assistive tech. It sits above the visual skin but remains transparent. */
.select-wrapper select {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 26px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  appearance: none !important;
  transition: none !important;
  color: transparent !important;
  opacity: 1 !important;
  cursor: pointer !important;
  z-index: 2 !important;
}

.select-wrapper select:disabled {
  cursor: not-allowed !important;
}

.select-wrapper select option,
.select-wrapper select optgroup {
  font-family: var(--font-ui);
  font-weight: 800;
  color: var(--on-surface);
  background-color: var(--surface-container-lowest);
}

.select-wrapper select option {
  padding: 8px 10px;
}

.select-wrapper select option:checked {
  color: #fff;
  background-color: var(--primary-container);
}

body.dark-mode .select-wrapper select option:checked {
  color: #000;
}

body.boring-light .select-wrapper select option,
body.boring-light .select-wrapper select optgroup,
body.boring-dark .select-wrapper select option,
body.boring-dark .select-wrapper select optgroup {
  font-weight: 500;
}

body.boring-dark .select-wrapper select option:checked {
  color: #fff;
}

/* Remove the older wrapper arrow; the skin owns the visible arrow. */
.select-wrapper::after {
  display: none !important;
}

.custom-select-trigger {
  font-family: var(--font-ui);
  font-weight: 900;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--on-surface);
  background-color: var(--surface-container-lowest);
  border: var(--border-width-sm) solid var(--brutal-shadow);
  padding: 4px 22px 4px 10px;
  border-radius: 0;
  box-shadow: 2px 2px 0 var(--brutal-shadow);
  transition: transform 0.1s ease, box-shadow 0.1s ease, background-color 0.1s ease;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  user-select: none;
  min-width: 110px;
  min-height: 30px;
  width: 100%;
  white-space: nowrap;
  pointer-events: none;
  box-sizing: border-box;
}

.select-wrapper select:hover + .custom-select-trigger {
  transform: translate(-0.5px, -0.5px);
  box-shadow: 3px 3px 0 var(--brutal-shadow);
  background-color: var(--surface-container);
}

.select-wrapper select:focus-visible + .custom-select-trigger {
  outline: var(--border-width-sm) solid var(--primary-container);
  outline-offset: 2px;
  border-color: var(--primary-container);
}

.select-wrapper select:disabled + .custom-select-trigger {
  opacity: 0.65;
}

.custom-select-text {
  overflow: hidden;
  text-overflow: ellipsis;
}

.custom-select-arrow {
  font-size: 8px;
  color: var(--on-surface);
  pointer-events: none;
  flex: 0 0 auto;
}

/* End bundled CSS: web/css/components/custom-select.css */

}

/* End bundled CSS: web/css/components.css */
/* Begin bundled CSS: web/css/themes.css */
@layer themes {
/* Begin bundled CSS: web/css/themes/boring-shell.css */
/* ==========================================================================
   Boring Mode: Flat and Modern Visual Shell Overrides
   ========================================================================== */

body.boring-light, body.boring-dark {
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  cursor: default;
}


body.boring-light .brand-logo, body.boring-dark .brand-logo {
  border-radius: 4px;
  border-width: 1px;
  box-shadow: none;
  text-shadow: none;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: normal;
  padding: 2px 10px;
}

body.boring-light .top-bar, body.boring-dark .top-bar {
  border-bottom: 1px solid var(--outline-variant);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

body.boring-light #view-select, body.boring-dark #view-select,
body.boring-light #menu-template-select, body.boring-dark #menu-template-select,
body.boring-light #menu-theme-select, body.boring-dark #menu-theme-select,
body.boring-light #menu-view-select, body.boring-dark #menu-view-select,
body.boring-light .custom-select-trigger, body.boring-dark .custom-select-trigger {
  border-radius: 6px;
  border-width: 1px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  font-weight: 600;
  text-transform: none;
  padding: 4px 22px 4px 10px;
}

body.boring-light #view-select:hover, body.boring-dark #view-select:hover,
body.boring-light #menu-template-select:hover, body.boring-dark #menu-template-select:hover,
body.boring-light #menu-theme-select:hover, body.boring-dark #menu-theme-select:hover,
body.boring-light #menu-view-select:hover, body.boring-dark #menu-view-select:hover,
body.boring-light .select-wrapper select:hover + .custom-select-trigger,
body.boring-dark .select-wrapper select:hover + .custom-select-trigger {
  transform: none;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  background-color: var(--surface-container-lowest);
}

body.boring-light .select-wrapper::after, body.boring-dark .select-wrapper::after {
  content: "▾";
  font-size: 10px;
}

body.boring-light .icon-btn, body.boring-dark .icon-btn {
  border-radius: 6px;
  border-width: 1px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  font-weight: 600;
  padding: 4px 10px;
}

body.boring-light .icon-btn:hover, body.boring-dark .icon-btn:hover {
  transform: none;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
  background-color: var(--surface-container);
}

body.boring-light .icon-btn:active, body.boring-dark .icon-btn:active {
  transform: none;
  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
}

body.boring-light .icon-btn.action-btn, body.boring-dark .icon-btn.action-btn {
  background-color: var(--primary-container);
  color: white;
  text-shadow: none;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

body.boring-light .icon-btn.action-btn:hover, body.boring-dark .icon-btn.action-btn:hover {
  background-color: var(--surface-tint);
}

body.boring-light .icon-btn.warning, body.boring-dark .icon-btn.warning {
  border-color: var(--color-error);
  color: var(--color-error);
}

body.boring-light .icon-btn.warning:hover, body.boring-dark .icon-btn.warning:hover {
  background-color: var(--color-error);
  color: white;
}

/* Panel modern adjustments */
body.boring-light .panel, body.boring-dark .panel {
  border-radius: 8px;
  border-width: 1px;
  border-color: var(--outline-variant);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px 0 rgba(0, 0, 0, 0.03);
}

body.boring-light .panel:hover, body.boring-dark .panel:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}

/* Symmetrical Header Orange-ish backgrounds across all themes */
body.light-mode .panel-header {
  background-color: #ffd2c2 !important; /* Brighter, glowing pastel melon-orange */
}
body.dark-mode .panel-header {
  background-color: #4e2e22 !important; /* Brighter, glowing dark copper-orange */
}
body.boring-light .panel-header {
  border-bottom: 1px solid var(--outline-variant);
  background-color: #ffe6d4 !important; /* Brighter, elegant apricot-orange slate */
}
body.boring-dark .panel-header {
  border-bottom: 1px solid var(--outline-variant);
  background-color: #38231a !important; /* Brighter, saturated warm dark amber slate */
}

body.boring-light .panel-badge, body.boring-dark .panel-badge {
  border-radius: 4px;
  border-width: 1px;
  box-shadow: none;
}

body.boring-light .panel.minimized .panel-header {
  background-color: var(--primary-container) !important;
  color: white !important;
  border-bottom: none !important;
}
body.boring-dark .panel.minimized .panel-header {
  background-color: var(--surface-container) !important;
  color: var(--on-surface) !important;
  border-bottom: none !important;
}

/* Tab Controls modern adjustments */
body.boring-light .bottom-nav, body.boring-dark .bottom-nav {
  border-top: 1px solid var(--outline-variant);
  box-shadow: 0 -1px 3px 0 rgba(0, 0, 0, 0.05);
}

body.boring-light .bottom-nav-item, body.boring-dark .bottom-nav-item {
  border-right: 1px solid var(--outline-variant);
}

body.boring-light .bottom-nav-item.active, body.boring-dark .bottom-nav-item.active {
  background-color: var(--primary-container);
  color: white;
  border-top: none;
  margin-top: 0;
}

/* Custom Scrollbars overrides for Boring themes */
body.boring-light ::-webkit-scrollbar-track, body.boring-dark ::-webkit-scrollbar-track {
  background: var(--surface-container-lowest);
  border-left: none;
  border-top: none;
}

body.boring-light ::-webkit-scrollbar-thumb, body.boring-dark ::-webkit-scrollbar-thumb {
  background: var(--outline-variant);
  border: none;
  border-radius: 10px;
  box-shadow: none;
}

body.boring-light ::-webkit-scrollbar-thumb:hover, body.boring-dark ::-webkit-scrollbar-thumb:hover {
  background: var(--on-surface-variant);
}

/* End bundled CSS: web/css/themes/boring-shell.css */
/* Begin bundled CSS: web/css/themes/modals.css */
/* ==========================================================================
   Custom Modal / Dialog Styling
   ========================================================================== */

dialog.custom-modal {
  border: var(--border-width) solid var(--brutal-shadow);
  background-color: var(--surface-container-lowest);
  color: var(--on-surface);
  box-shadow: 6px 6px 0 var(--brutal-shadow);
  max-width: 400px;
  width: 90%;
  padding: 0;
  margin: auto;
  border-radius: 0;
  contain: content;
}

/* Boring mode style overrides */
body.boring-light dialog.custom-modal,
body.boring-dark dialog.custom-modal {
  border-radius: 12px;
  border-width: 1px;
  border-color: var(--outline-variant);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Modal layout */
.modal-content {
  display: flex;
  flex-direction: column;
}

.modal-header {
  height: 40px;
  background-color: var(--surface-container);
  border-bottom: var(--border-width-sm) solid var(--brutal-shadow);
  display: flex;
  align-items: center;
  padding: 0 var(--spacing-md);
}

/* Custom glowing orange-ish header for dialog to match other panel headers */
body.light-mode dialog.custom-modal .modal-header {
  background-color: #ffd2c2 !important;
}
body.dark-mode dialog.custom-modal .modal-header {
  background-color: #4e2e22 !important;
}
body.boring-light dialog.custom-modal .modal-header {
  background-color: #ffe6d4 !important;
  border-bottom: 1px solid var(--outline-variant);
}
body.boring-dark dialog.custom-modal .modal-header {
  background-color: #38231a !important;
  border-bottom: 1px solid var(--outline-variant);
}

.modal-header h3 {
  font-family: var(--font-ui);
  font-weight: 900;
  font-size: 14px;
  text-transform: uppercase;
  color: var(--on-surface);
  letter-spacing: 0.05em;
}

.modal-body {
  padding: var(--spacing-md);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.5;
  color: var(--on-surface-variant);
}

.form-modal-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.field-label,
.theme-checks legend {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--on-surface);
}

.text-field,
.form-select,
.form-modal-body .custom-select-trigger {
  width: 100%;
  min-height: 34px;
  box-sizing: border-box;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  color: var(--on-surface);
  background-color: var(--surface-container-lowest);
  border: var(--border-width-sm) solid var(--brutal-shadow);
  box-shadow: 2px 2px 0 var(--brutal-shadow);
  padding: 6px 10px;
  outline: none;
  text-transform: none;
}

.text-field:focus,
.form-select:focus {
  border-color: var(--primary-container);
}

.text-field:focus-visible,
.form-select:focus-visible,
.theme-checks input:focus-visible {
  outline: var(--border-width-sm, 2px) solid var(--primary-container, #ff5f1f);
  outline-offset: 2px;
}

.theme-checks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-xs) var(--spacing-sm);
  margin: var(--spacing-xs) 0 0;
  padding: var(--spacing-sm);
  border: var(--border-width-sm) dashed var(--outline-variant);
}

.theme-checks label {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  color: var(--on-surface);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
}

.theme-checks input {
  accent-color: var(--primary-container);
}

.share-link-output {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-xs);
}

.preview-size-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-sm);
}

.preview-size-grid > div {
  min-width: 0;
}

@media (max-width: 520px) {
  .preview-size-grid {
    grid-template-columns: 1fr;
  }
}

.share-link-output[hidden] {
  display: none !important;
}

.share-challenge {
  min-height: 65px;
  margin-top: var(--spacing-xs);
}

.share-challenge[hidden],
.share-challenge-status[hidden] {
  display: none !important;
}

.share-challenge-status {
  margin: 0;
  color: var(--on-surface-variant);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
}

body.boring-light .text-field,
body.boring-dark .text-field,
body.boring-light .form-select,
body.boring-dark .form-select,
body.boring-light .form-modal-body .custom-select-trigger,
body.boring-dark .form-modal-body .custom-select-trigger {
  border-radius: 6px;
  border-width: 1px;
  box-shadow: none;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  border-top: 1px dashed var(--outline-variant);
  background-color: var(--surface-container);
}

/* Styled backdrop */
dialog.custom-modal::backdrop {
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  transition: backdrop-filter 0.2s ease, background-color 0.2s ease;
}

/* Animation for custom dialog */
dialog.custom-modal[open] {
  animation: modalScaleUp 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modalScaleUp {
  from {
    transform: scale(0.95);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* End bundled CSS: web/css/themes/modals.css */
/* Begin bundled CSS: web/css/themes/menu.css */
/* ==========================================================================
   Quick Menu Dropdown Styling
   ========================================================================== */

/* Hamburger Button sizing */
.menu-btn-icon {
  padding: 4px !important;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hamburger-svg {
  width: 14px;
  height: 14px;
  display: block;
}

/* Dropdown Container */
.menu-dropdown {
  position: absolute;
  top: calc(var(--top-bar-height) - 2px);
  right: var(--spacing-md);
  width: 284px;
  background-color: var(--surface-container-lowest);
  border: var(--border-width) solid var(--brutal-shadow);
  box-shadow: 4px 4px 0 var(--brutal-shadow);
  display: none; /* Toggle via active class */
  flex-direction: column;
  z-index: 9999;
  border-radius: 0;
  overflow: hidden;
  animation: dropdownScaleUp 0.12s cubic-bezier(0.34, 1.56, 0.64, 1);
  contain: content;
}

.menu-dropdown.active {
  display: flex;
}

body.desktop-view #menu-run-btn {
  display: none;
}

body.desktop-view:not(.intermediate-width) #menu-import-btn,
body.desktop-view:not(.intermediate-width) #menu-export-btn,
body.desktop-view:not(.intermediate-width) #menu-share-btn {
  display: none;
}

/* Boring mode overrides */
body.boring-light .menu-dropdown,
body.boring-dark .menu-dropdown {
  border-radius: 10px;
  border-width: 1px;
  border-color: var(--outline-variant);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  top: calc(var(--top-bar-height) + 2px);
}

body.boring-light .menu-btn-icon,
body.boring-dark .menu-btn-icon {
  border-radius: 6px;
}

/* Dropdown elements */
.menu-dropdown-header {
  height: 34px;
  padding: 0 var(--spacing-sm);
  display: flex;
  align-items: center;
  font-family: var(--font-ui);
  font-weight: 900;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--on-surface);
}

body.light-mode .menu-dropdown-header { background-color: #ffd2c2 !important; }
body.dark-mode .menu-dropdown-header { background-color: #4e2e22 !important; }
body.boring-light .menu-dropdown-header { background-color: #ffe6d4 !important; border-bottom: 1px solid var(--outline-variant); }
body.boring-dark .menu-dropdown-header { background-color: #38231a !important; border-bottom: 1px solid var(--outline-variant); }

.menu-dropdown-body {
  padding: var(--spacing-sm);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.menu-item-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.menu-item-group.divider {
  border-top: 1px dashed var(--outline-variant);
  padding-top: var(--spacing-sm);
}

.menu-item-label {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--on-surface-variant);
  opacity: 0.8;
  margin-bottom: var(--spacing-xs);
}

/* Dropdown buttons */
.menu-item-btn {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  color: var(--on-surface);
  background-color: var(--surface-container);
  border: var(--border-width-sm) solid var(--brutal-shadow);
  padding: var(--spacing-xs) var(--spacing-sm);
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--brutal-shadow);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  transition: transform 0.1s ease, box-shadow 0.1s ease, background-color 0.1s ease;
  border-radius: 0;
  text-align: left;
}

body.boring-light .menu-item-btn,
body.boring-dark .menu-item-btn {
  border-radius: 6px;
  border-width: 1px;
  box-shadow: none;
  background-color: var(--surface-container-lowest);
  font-weight: 500;
  text-transform: none;
}

.menu-item-btn:hover {
  background-color: var(--primary-container);
  color: white;
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--brutal-shadow);
}

body.dark-mode .menu-item-btn:hover {
  color: black;
}

body.boring-light .menu-item-btn:hover,
body.boring-dark .menu-item-btn:hover {
  background-color: var(--surface-container);
  color: var(--on-surface) !important;
  transform: none;
  box-shadow: none;
}

.menu-item-btn:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--brutal-shadow);
}

body.boring-light .menu-item-btn:active,
body.boring-dark .menu-item-btn:active {
  transform: none;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.menu-item-btn.warning {
  border-color: var(--color-error);
}
.menu-item-btn.warning:hover {
  background-color: var(--color-error);
  color: white;
}

/* Info Row styling */
.menu-info-row {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--on-surface-variant);
}

.menu-info-row .label {
  font-weight: 700;
}

.menu-info-row .val {
  font-family: var(--font-code);
  font-size: 10px;
}

@keyframes dropdownScaleUp {
  from {
    transform: scale(0.95);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Align and size Workspace Settings controls to prevent overflow */
.menu-dropdown .control-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.menu-dropdown .select-wrapper {
  flex: 0 0 155px;
  width: 155px;
}

.menu-dropdown select {
  width: 100%;
  box-sizing: border-box;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

/* End bundled CSS: web/css/themes/menu.css */
/* Begin bundled CSS: web/css/themes/focus.css */
/* ==========================================================================
   Focus Mode — single-panel popup (Goal 11, desktop only)
   ========================================================================== */

.focus-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(2px);
  z-index: 8000;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.focus-backdrop.active {
  opacity: 1;
}

/* The focused panel becomes a centered popup floating above the darkened rest */
.panel.focused {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: min(900px, 86vw) !important;
  height: min(680px, 82vh) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  z-index: 8500 !important;
  resize: both !important;
  overflow: hidden !important;
  box-shadow: 12px 12px 0 var(--brutal-shadow);
  animation: focusPop 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}
body.boring-light .panel.focused,
body.boring-dark .panel.focused {
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.5);
}

@keyframes focusPop {
  from { transform: translate(-50%, -50%) scale(0.96); opacity: 0.4; }
  to   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* End bundled CSS: web/css/themes/focus.css */
/* Begin bundled CSS: web/css/themes/live-toggle.css */
/* ==========================================================================
   Live Reflection toggle (Goal 6)
   ========================================================================== */

.live-toggle .live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-success);
  display: inline-block;
  margin-right: 5px;
  vertical-align: middle;
}
.live-toggle[aria-pressed="true"] .live-dot {
  animation: livePulse 1.6s ease-out infinite;
}
.live-toggle[aria-pressed="false"] {
  opacity: 0.7;
}
.live-toggle[aria-pressed="false"] .live-dot {
  background-color: var(--on-surface-variant);
  animation: none;
}

@keyframes livePulse {
  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6); }
  70%  { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* End bundled CSS: web/css/themes/live-toggle.css */
/* Begin bundled CSS: web/css/themes/mobile-context-fab.css */
/* ==========================================================================
   Mobile Floating Context trigger
   ========================================================================== */

.mobile-context-fab {
  display: none; /* shown only inside the mobile media query */
  position: fixed;
  right: 16px;
  bottom: calc(var(--bottom-bar-height) + 16px);
  width: 50px;
  height: 50px;
  align-items: center;
  justify-content: center;
  z-index: 9000;
  background-color: var(--color-info);
  color: white;
  border: var(--border-width) solid var(--brutal-shadow);
  box-shadow: 4px 4px 0 var(--brutal-shadow);
  cursor: pointer;
  padding: 0;
  box-sizing: border-box;
  line-height: 0;
  overflow: hidden;
  flex: 0 0 auto;
}

.mobile-context-fab[hidden] {
  display: none !important;
}

body.mobile-view .mobile-context-fab {
  display: flex;
}

.mobile-context-fab svg {
  width: 26px;
  height: 26px;
  max-width: 26px;
  max-height: 26px;
  flex: 0 0 26px;
  display: block;
}

.mobile-context-fab:active,
.mobile-context-fab[aria-expanded="true"] {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--brutal-shadow);
}

body.dark-mode .mobile-context-fab {
  color: white;
}
body.boring-light .mobile-context-fab,
body.boring-dark .mobile-context-fab {
  border-radius: 50%;
  border-width: 0;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

/* End bundled CSS: web/css/themes/mobile-context-fab.css */
/* Begin bundled CSS: web/css/themes/drop-overlay.css */
/* ==========================================================================
   Drag-and-drop Import overlay (Goal 12)
   ========================================================================== */

.drop-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9500;
  background-color: rgba(var(--brutal-shadow-rgb), 0.45);
  backdrop-filter: blur(3px);
}
.drop-overlay.active {
  display: flex;
}
.drop-overlay-card {
  background-color: var(--surface-container-lowest);
  border: var(--border-width) dashed var(--primary-container);
  box-shadow: 8px 8px 0 var(--brutal-shadow);
  padding: 32px 48px;
  text-align: center;
  pointer-events: none;
}
.drop-overlay-icon {
  font-size: 44px;
}
.drop-overlay-title {
  font-family: var(--font-ui);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 18px;
  margin-top: 8px;
  color: var(--on-surface);
}
.drop-overlay-sub {
  font-family: var(--font-code);
  font-size: 12px;
  opacity: 0.7;
  margin-top: 4px;
  color: var(--on-surface);
}
body.boring-light .drop-overlay-card,
body.boring-dark .drop-overlay-card {
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* End bundled CSS: web/css/themes/drop-overlay.css */
/* Begin bundled CSS: web/css/themes/tooltip.css */
/* ==========================================================================
   Custom Themed Tooltips (Brutalist Style)
   ========================================================================== */

.custom-tooltip {
  position: fixed;
  pointer-events: none;
  z-index: 10000;
  display: none;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 8px;
  white-space: nowrap;
  background-color: var(--surface-container-lowest);
  color: var(--on-surface);
  border: var(--border-width-sm) solid var(--brutal-shadow);
  box-shadow: 2px 2px 0 var(--brutal-shadow);
  transform: translateZ(0);
}

/* Bright yellow pop for Retro Light tooltips */
body.light-mode .custom-tooltip {
  background-color: #ffffdd; /* Retro yellow accent */
}

/* Boring mode overrides */
body.boring-light .custom-tooltip,
body.boring-dark .custom-tooltip {
  border-radius: 4px;
  border-width: 1px;
  border-color: var(--outline-variant);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* End bundled CSS: web/css/themes/tooltip.css */
/* Begin bundled CSS: web/css/themes/misc.css */
/* ==========================================================================
   Message modal extras (Goal 12 import guidelines) + Scratch pad
   ========================================================================== */

.message-list {
  margin: 8px 0 8px 18px;
  padding: 0;
}
.message-list li {
  margin-bottom: 4px;
  word-break: break-word;
}
.message-guidelines {
  margin-top: 10px;
  font-size: 13px;
}

.legal-doc-content {
  text-align: left;
  line-height: 1.6;
  font-size: 13px;
  font-family: var(--font-ui);
  color: var(--on-surface);
}
.legal-doc-content p {
  margin-bottom: 12px;
}

/* Scratch notes need a little breathing room apart from code-editor overlays. */
.scratch-panel:not(.minimized) {
  min-width: 420px;
  min-height: 320px;
}

.scratch-panel:not(.minimized) .panel-header {
  flex: 0 0 auto;
  height: 54px;
  min-height: 54px;
  gap: 8px;
  padding: 8px 14px;
  background-position: 92px center;
}

.scratch-textarea {
  position: static;
  flex: 1 1 auto;
  width: auto;
  height: auto;
  min-height: 0;
  margin: 14px;
  padding: 16px 18px;
  border: var(--border-width-sm) solid var(--brutal-shadow);
  box-shadow: inset 0 0 0 1px var(--outline-variant);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.6;
  color: var(--on-surface);
  background-color: var(--surface-container-lowest);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  z-index: auto;
}

.scratch-textarea::placeholder {
  color: var(--on-surface-variant);
  opacity: 0.72;
}

body.boring-light .scratch-textarea,
body.boring-dark .scratch-textarea {
  border-radius: 8px;
  border-color: var(--outline-variant);
  box-shadow: none;
}

/* End bundled CSS: web/css/themes/misc.css */

}

/* End bundled CSS: web/css/themes.css */