@playwright-repl/browser-extension 0.24.0

package/dist/index.css

@@ -0,0 +1,1353 @@
+/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
+@layer properties {
+  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+    *, :before, :after, ::backdrop {
+      --tw-border-style: solid;
+      --tw-leading: initial;
+      --tw-shadow: 0 0 #0000;
+      --tw-shadow-color: initial;
+      --tw-shadow-alpha: 100%;
+      --tw-inset-shadow: 0 0 #0000;
+      --tw-inset-shadow-color: initial;
+      --tw-inset-shadow-alpha: 100%;
+      --tw-ring-color: initial;
+      --tw-ring-shadow: 0 0 #0000;
+      --tw-inset-ring-color: initial;
+      --tw-inset-ring-shadow: 0 0 #0000;
+      --tw-ring-inset: initial;
+      --tw-ring-offset-width: 0px;
+      --tw-ring-offset-color: #fff;
+      --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-outline-style: solid;
+      --tw-blur: initial;
+      --tw-brightness: initial;
+      --tw-contrast: initial;
+      --tw-grayscale: initial;
+      --tw-hue-rotate: initial;
+      --tw-invert: initial;
+      --tw-opacity: initial;
+      --tw-saturate: initial;
+      --tw-sepia: initial;
+      --tw-drop-shadow: initial;
+      --tw-drop-shadow-color: initial;
+      --tw-drop-shadow-alpha: 100%;
+      --tw-drop-shadow-size: initial;
+      --tw-ease: initial;
+    }
+  }
+}
+
+@layer theme {
+  :root, :host {
+    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
+      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+      "Courier New", monospace;
+    --color-black: #000;
+    --color-white: #fff;
+    --spacing: .25rem;
+    --radius-sm: .25rem;
+    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
+    --default-font-family: var(--font-sans);
+    --default-mono-font-family: var(--font-mono);
+  }
+}
+
+@layer base {
+  *, :after, :before, ::backdrop {
+    box-sizing: border-box;
+    border: 0 solid;
+    margin: 0;
+    padding: 0;
+  }
+
+  ::file-selector-button {
+    box-sizing: border-box;
+    border: 0 solid;
+    margin: 0;
+    padding: 0;
+  }
+
+  html, :host {
+    -webkit-text-size-adjust: 100%;
+    tab-size: 4;
+    line-height: 1.5;
+    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
+    font-feature-settings: var(--default-font-feature-settings, normal);
+    font-variation-settings: var(--default-font-variation-settings, normal);
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  hr {
+    height: 0;
+    color: inherit;
+    border-top-width: 1px;
+  }
+
+  abbr:where([title]) {
+    -webkit-text-decoration: underline dotted;
+    text-decoration: underline dotted;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    font-size: inherit;
+    font-weight: inherit;
+  }
+
+  a {
+    color: inherit;
+    -webkit-text-decoration: inherit;
+    -webkit-text-decoration: inherit;
+    -webkit-text-decoration: inherit;
+    text-decoration: inherit;
+  }
+
+  b, strong {
+    font-weight: bolder;
+  }
+
+  code, kbd, samp, pre {
+    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
+    font-feature-settings: var(--default-mono-font-feature-settings, normal);
+    font-variation-settings: var(--default-mono-font-variation-settings, normal);
+    font-size: 1em;
+  }
+
+  small {
+    font-size: 80%;
+  }
+
+  sub, sup {
+    vertical-align: baseline;
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+  }
+
+  sub {
+    bottom: -.25em;
+  }
+
+  sup {
+    top: -.5em;
+  }
+
+  table {
+    text-indent: 0;
+    border-color: inherit;
+    border-collapse: collapse;
+  }
+
+  :-moz-focusring {
+    outline: auto;
+  }
+
+  progress {
+    vertical-align: baseline;
+  }
+
+  summary {
+    display: list-item;
+  }
+
+  ol, ul, menu {
+    list-style: none;
+  }
+
+  img, svg, video, canvas, audio, iframe, embed, object {
+    vertical-align: middle;
+    display: block;
+  }
+
+  img, video {
+    max-width: 100%;
+    height: auto;
+  }
+
+  button, input, select, optgroup, textarea {
+    font: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+    opacity: 1;
+    background-color: #0000;
+    border-radius: 0;
+  }
+
+  ::file-selector-button {
+    font: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+    opacity: 1;
+    background-color: #0000;
+    border-radius: 0;
+  }
+
+  :where(select:is([multiple], [size])) optgroup {
+    font-weight: bolder;
+  }
+
+  :where(select:is([multiple], [size])) optgroup option {
+    padding-inline-start: 20px;
+  }
+
+  ::file-selector-button {
+    margin-inline-end: 4px;
+  }
+
+  ::placeholder {
+    opacity: 1;
+  }
+
+  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
+    ::placeholder {
+      color: currentColor;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      ::placeholder {
+        color: color-mix(in oklab, currentcolor 50%, transparent);
+      }
+    }
+  }
+
+  textarea {
+    resize: vertical;
+  }
+
+  ::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+
+  ::-webkit-date-and-time-value {
+    min-height: 1lh;
+    text-align: inherit;
+  }
+
+  ::-webkit-datetime-edit {
+    display: inline-flex;
+  }
+
+  ::-webkit-datetime-edit-fields-wrapper {
+    padding: 0;
+  }
+
+  ::-webkit-datetime-edit {
+    padding-block: 0;
+  }
+
+  ::-webkit-datetime-edit-year-field {
+    padding-block: 0;
+  }
+
+  ::-webkit-datetime-edit-month-field {
+    padding-block: 0;
+  }
+
+  ::-webkit-datetime-edit-day-field {
+    padding-block: 0;
+  }
+
+  ::-webkit-datetime-edit-hour-field {
+    padding-block: 0;
+  }
+
+  ::-webkit-datetime-edit-minute-field {
+    padding-block: 0;
+  }
+
+  ::-webkit-datetime-edit-second-field {
+    padding-block: 0;
+  }
+
+  ::-webkit-datetime-edit-millisecond-field {
+    padding-block: 0;
+  }
+
+  ::-webkit-datetime-edit-meridiem-field {
+    padding-block: 0;
+  }
+
+  ::-webkit-calendar-picker-indicator {
+    line-height: 1;
+  }
+
+  :-moz-ui-invalid {
+    box-shadow: none;
+  }
+
+  button, input:where([type="button"], [type="reset"], [type="submit"]) {
+    appearance: button;
+  }
+
+  ::file-selector-button {
+    appearance: button;
+  }
+
+  ::-webkit-inner-spin-button {
+    height: auto;
+  }
+
+  ::-webkit-outer-spin-button {
+    height: auto;
+  }
+
+  [hidden]:where(:not([hidden="until-found"])) {
+    display: none !important;
+  }
+}
+
+@layer components;
+
+@layer utilities {
+  .visible {
+    visibility: visible;
+  }
+
+  .absolute {
+    position: absolute;
+  }
+
+  .fixed {
+    position: fixed;
+  }
+
+  .relative {
+    position: relative;
+  }
+
+  .static {
+    position: static;
+  }
+
+  .inset-0 {
+    inset: calc(var(--spacing) * 0);
+  }
+
+  .start {
+    inset-inline-start: var(--spacing);
+  }
+
+  .end {
+    inset-inline-end: var(--spacing);
+  }
+
+  .top-1 {
+    top: calc(var(--spacing) * 1);
+  }
+
+  .top-\[10px\] {
+    top: 10px;
+  }
+
+  .right-1 {
+    right: calc(var(--spacing) * 1);
+  }
+
+  .right-\[10px\] {
+    right: 10px;
+  }
+
+  .right-\[50px\] {
+    right: 50px;
+  }
+
+  .z-100 {
+    z-index: 100;
+  }
+
+  .container {
+    width: 100%;
+  }
+
+  @media (min-width: 40rem) {
+    .container {
+      max-width: 40rem;
+    }
+  }
+
+  @media (min-width: 48rem) {
+    .container {
+      max-width: 48rem;
+    }
+  }
+
+  @media (min-width: 64rem) {
+    .container {
+      max-width: 64rem;
+    }
+  }
+
+  @media (min-width: 80rem) {
+    .container {
+      max-width: 80rem;
+    }
+  }
+
+  @media (min-width: 96rem) {
+    .container {
+      max-width: 96rem;
+    }
+  }
+
+  .m-0 {
+    margin: calc(var(--spacing) * 0);
+  }
+
+  .mx-0 {
+    margin-inline: calc(var(--spacing) * 0);
+  }
+
+  .mx-1 {
+    margin-inline: calc(var(--spacing) * 1);
+  }
+
+  .my-\[6px\] {
+    margin-block: 6px;
+  }
+
+  .mt-0\.5 {
+    margin-top: calc(var(--spacing) * .5);
+  }
+
+  .ml-1 {
+    margin-left: calc(var(--spacing) * 1);
+  }
+
+  .block {
+    display: block;
+  }
+
+  .contents {
+    display: contents;
+  }
+
+  .flex {
+    display: flex;
+  }
+
+  .hidden {
+    display: none;
+  }
+
+  .inline {
+    display: inline;
+  }
+
+  .inline-block {
+    display: inline-block;
+  }
+
+  .inline-flex {
+    display: inline-flex;
+  }
+
+  .table {
+    display: table;
+  }
+
+  .h-4\.5 {
+    height: calc(var(--spacing) * 4.5);
+  }
+
+  .h-\[2px\] {
+    height: 2px;
+  }
+
+  .h-\[6px\] {
+    height: 6px;
+  }
+
+  .max-h-\[95\%\] {
+    max-height: 95%;
+  }
+
+  .min-h-20 {
+    min-height: calc(var(--spacing) * 20);
+  }
+
+  .min-h-\[80px\] {
+    min-height: 80px;
+  }
+
+  .w-10 {
+    width: calc(var(--spacing) * 10);
+  }
+
+  .w-full {
+    width: 100%;
+  }
+
+  .w-px {
+    width: 1px;
+  }
+
+  .max-w-100 {
+    max-width: calc(var(--spacing) * 100);
+  }
+
+  .max-w-\[95\%\] {
+    max-width: 95%;
+  }
+
+  .min-w-0 {
+    min-width: calc(var(--spacing) * 0);
+  }
+
+  .flex-1 {
+    flex: 1;
+  }
+
+  .shrink-0 {
+    flex-shrink: 0;
+  }
+
+  .cursor-default {
+    cursor: default;
+  }
+
+  .cursor-pointer {
+    cursor: pointer;
+  }
+
+  .cursor-row-resize {
+    cursor: row-resize;
+  }
+
+  .cursor-zoom-in {
+    cursor: zoom-in;
+  }
+
+  .resize {
+    resize: both;
+  }
+
+  .flex-col {
+    flex-direction: column;
+  }
+
+  .flex-wrap {
+    flex-wrap: wrap;
+  }
+
+  .items-center {
+    align-items: center;
+  }
+
+  .items-start {
+    align-items: flex-start;
+  }
+
+  .justify-between {
+    justify-content: space-between;
+  }
+
+  .justify-center {
+    justify-content: center;
+  }
+
+  .gap-1 {
+    gap: calc(var(--spacing) * 1);
+  }
+
+  .gap-2 {
+    gap: calc(var(--spacing) * 2);
+  }
+
+  .gap-3 {
+    gap: calc(var(--spacing) * 3);
+  }
+
+  .overflow-auto {
+    overflow: auto;
+  }
+
+  .overflow-hidden {
+    overflow: hidden;
+  }
+
+  .overflow-y-auto {
+    overflow-y: auto;
+  }
+
+  .rounded {
+    border-radius: .25rem;
+  }
+
+  .rounded-\[1px\] {
+    border-radius: 1px;
+  }
+
+  .rounded-\[3px\] {
+    border-radius: 3px;
+  }
+
+  .rounded-\[4px\] {
+    border-radius: 4px;
+  }
+
+  .rounded-none {
+    border-radius: 0;
+  }
+
+  .rounded-sm {
+    border-radius: var(--radius-sm);
+  }
+
+  .border {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
+
+  .border-0 {
+    border-style: var(--tw-border-style);
+    border-width: 0;
+  }
+
+  .border-y {
+    border-block-style: var(--tw-border-style);
+    border-block-width: 1px;
+  }
+
+  .border-b {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 1px;
+  }
+
+  .border-solid {
+    --tw-border-style: solid;
+    border-style: solid;
+  }
+
+  .border-\(--border-button\) {
+    border-color: var(--border-button);
+  }
+
+  .border-\(--border-primary\) {
+    border-color: var(--border-primary);
+  }
+
+  .border-white\/30 {
+    border-color: #ffffff4d;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .border-white\/30 {
+      border-color: color-mix(in oklab, var(--color-white) 30%, transparent);
+    }
+  }
+
+  .bg-\(--bg-button\) {
+    background-color: var(--bg-button);
+  }
+
+  .bg-\(--bg-editor\) {
+    background-color: var(--bg-editor);
+  }
+
+  .bg-\(--bg-line-highlight\) {
+    background-color: var(--bg-line-highlight);
+  }
+
+  .bg-\(--bg-splitter\) {
+    background-color: var(--bg-splitter);
+  }
+
+  .bg-\(--bg-toolbar\) {
+    background-color: var(--bg-toolbar);
+  }
+
+  .bg-\(--color-splitter-handle\) {
+    background-color: var(--color-splitter-handle);
+  }
+
+  .bg-\(--color-toolbar-sep\) {
+    background-color: var(--color-toolbar-sep);
+  }
+
+  .bg-black\/80 {
+    background-color: #000c;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-black\/80 {
+      background-color: color-mix(in oklab, var(--color-black) 80%, transparent);
+    }
+  }
+
+  .bg-white\/15 {
+    background-color: #ffffff26;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-white\/15 {
+      background-color: color-mix(in oklab, var(--color-white) 15%, transparent);
+    }
+  }
+
+  .p-2 {
+    padding: calc(var(--spacing) * 2);
+  }
+
+  .px-1 {
+    padding-inline: calc(var(--spacing) * 1);
+  }
+
+  .px-1\.5 {
+    padding-inline: calc(var(--spacing) * 1.5);
+  }
+
+  .px-2 {
+    padding-inline: calc(var(--spacing) * 2);
+  }
+
+  .px-3 {
+    padding-inline: calc(var(--spacing) * 3);
+  }
+
+  .px-\[14px\] {
+    padding-inline: 14px;
+  }
+
+  .py-0\.5 {
+    padding-block: calc(var(--spacing) * .5);
+  }
+
+  .py-1 {
+    padding-block: calc(var(--spacing) * 1);
+  }
+
+  .py-2 {
+    padding-block: calc(var(--spacing) * 2);
+  }
+
+  .py-\[2px\] {
+    padding-block: 2px;
+  }
+
+  .pt-0\.5 {
+    padding-top: calc(var(--spacing) * .5);
+  }
+
+  .pb-1 {
+    padding-bottom: calc(var(--spacing) * 1);
+  }
+
+  .font-\[inherit\] {
+    font-family: inherit;
+  }
+
+  .font-mono {
+    font-family: var(--font-mono);
+  }
+
+  .text-\[10px\] {
+    font-size: 10px;
+  }
+
+  .text-\[11px\] {
+    font-size: 11px;
+  }
+
+  .text-\[12px\] {
+    font-size: 12px;
+  }
+
+  .text-\[18px\] {
+    font-size: 18px;
+  }
+
+  .leading-4 {
+    --tw-leading: calc(var(--spacing) * 4);
+    line-height: calc(var(--spacing) * 4);
+  }
+
+  .leading-none {
+    --tw-leading: 1;
+    line-height: 1;
+  }
+
+  .wrap-break-word {
+    overflow-wrap: break-word;
+  }
+
+  .whitespace-pre-wrap {
+    white-space: pre-wrap;
+  }
+
+  .text-\(--color-command\) {
+    color: var(--color-command);
+  }
+
+  .text-\(--color-error\) {
+    color: var(--color-error);
+  }
+
+  .text-\(--color-prompt\) {
+    color: var(--color-prompt);
+  }
+
+  .text-\(--color-success\) {
+    color: var(--color-success);
+  }
+
+  .text-\(--text-default\) {
+    color: var(--text-default);
+  }
+
+  .text-\(--text-dim\) {
+    color: var(--text-dim);
+  }
+
+  .text-white {
+    color: var(--color-white);
+  }
+
+  .lowercase {
+    text-transform: lowercase;
+  }
+
+  .italic {
+    font-style: italic;
+  }
+
+  .underline {
+    text-decoration-line: underline;
+  }
+
+  .shadow-\[0_4px_20px_rgba\(0\,0\,0\,0\.5\)\] {
+    --tw-shadow: 0 4px 20px var(--tw-shadow-color, #00000080);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
+  .outline {
+    outline-style: var(--tw-outline-style);
+    outline-width: 1px;
+  }
+
+  .blur {
+    --tw-blur: blur(8px);
+    filter: var(--tw-blur,  ) var(--tw-brightness,  ) var(--tw-contrast,  ) var(--tw-grayscale,  ) var(--tw-hue-rotate,  ) var(--tw-invert,  ) var(--tw-saturate,  ) var(--tw-sepia,  ) var(--tw-drop-shadow,  );
+  }
+
+  .filter {
+    filter: var(--tw-blur,  ) var(--tw-brightness,  ) var(--tw-contrast,  ) var(--tw-grayscale,  ) var(--tw-hue-rotate,  ) var(--tw-invert,  ) var(--tw-saturate,  ) var(--tw-sepia,  ) var(--tw-drop-shadow,  );
+  }
+
+  .ease-in-out {
+    --tw-ease: var(--ease-in-out);
+    transition-timing-function: var(--ease-in-out);
+  }
+
+  .last\:border-b-0:last-child {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 0;
+  }
+
+  @media (hover: hover) {
+    .hover\:bg-\(--bg-button-hover\):hover {
+      background-color: var(--bg-button-hover);
+    }
+
+    .hover\:bg-white\/30:hover {
+      background-color: #ffffff4d;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-white\/30:hover {
+        background-color: color-mix(in oklab, var(--color-white) 30%, transparent);
+      }
+    }
+  }
+}
+
+:root {
+  --bg-body: #fff;
+  --bg-toolbar: #f3f3f3;
+  --bg-editor: #fff;
+  --bg-line-highlight: #e8e8e8;
+  --bg-run-line: #d4ecfb;
+  --bg-button: #e0e0e0;
+  --bg-button-hover: #d0d0d0;
+  --bg-splitter: #f3f3f3;
+  --bg-splitter-hover: #e8e8e8;
+  --bg-scrollbar-track: #fff;
+  --bg-scrollbar-thumb: #c1c1c1;
+  --bg-scrollbar-thumb-hover: #a8a8a8;
+  --text-default: #1e1e1e;
+  --text-line-numbers: #858585;
+  --text-dim: #6e6e6e;
+  --text-placeholder: #a0a0a0;
+  --border-primary: #d4d4d4;
+  --border-button: #c8c8c8;
+  --border-screenshot: #d4d4d4;
+  --color-run-bg: #2ea043;
+  --color-run-bg-hover: #3fb950;
+  --color-recording-bg: #fde8e8;
+  --color-recording-text: #d32f2f;
+  --color-recording-border: #d32f2f;
+  --color-error: #d32f2f;
+  --color-success: #2e7d32;
+  --color-command: #0451a5;
+  --color-snapshot: #0070c1;
+  --color-comment: #6a9955;
+  --color-string: #a31515;
+  --color-flag: #795e26;
+  --color-url: #0070c1;
+  --color-active-line: #795e26;
+  --color-line-pass: #2e7d32;
+  --color-line-fail: #d32f2f;
+  --color-prompt: #2e7d32;
+  --color-splitter-handle: #a0a0a0;
+  --color-splitter-handle-hover: #007acc;
+  --color-toolbar-sep: #d4d4d4;
+  --color-caret: #1e1e1e;
+  --color-breakpoint: #e51400;
+  --color-inline-value: #6e6e6e;
+}
+
+.theme-dark {
+  --bg-body: #1e1e1e;
+  --bg-toolbar: #252526;
+  --bg-editor: #1e1e1e;
+  --bg-line-highlight: #2a2d2e;
+  --bg-run-line: #1a3a50;
+  --bg-button: #333;
+  --bg-button-hover: #3c3c3c;
+  --bg-splitter: #252526;
+  --bg-splitter-hover: #2a2d2e;
+  --bg-scrollbar-track: #1e1e1e;
+  --bg-scrollbar-thumb: #444;
+  --bg-scrollbar-thumb-hover: #555;
+  --text-default: #d4d4d4;
+  --text-line-numbers: #858585;
+  --text-dim: #888;
+  --text-placeholder: #555;
+  --border-primary: #333;
+  --border-button: #444;
+  --border-screenshot: #444;
+  --color-run-bg: #2ea043;
+  --color-run-bg-hover: #3fb950;
+  --color-recording-bg: #5c2020;
+  --color-recording-text: #f44747;
+  --color-recording-border: #f44747;
+  --color-error: #f44747;
+  --color-success: #6a9955;
+  --color-command: #569cd6;
+  --color-snapshot: #9cdcfe;
+  --color-comment: #6a9955;
+  --color-string: #ce9178;
+  --color-flag: #dcdcaa;
+  --color-url: #9cdcfe;
+  --color-active-line: #dcdcaa;
+  --color-line-pass: #6a9955;
+  --color-line-fail: #f44747;
+  --color-prompt: #6a9955;
+  --color-splitter-handle: #555;
+  --color-splitter-handle-hover: #007acc;
+  --color-toolbar-sep: #444;
+  --color-caret: #d4d4d4;
+  --color-breakpoint: #e51400;
+  --color-inline-value: #888;
+}
+
+html, body {
+  background: var(--bg-body);
+  height: 100%;
+  color: var(--text-default);
+  flex-direction: column;
+  font-family: Cascadia Code, Fira Code, Consolas, Courier New, monospace;
+  font-size: 13px;
+  display: flex;
+}
+
+#root {
+  flex-direction: column;
+  flex: 1;
+  display: flex;
+  overflow: hidden;
+}
+
+#toolbar button {
+  background: var(--bg-button);
+  color: var(--text-default);
+  border: 1px solid var(--border-button);
+  cursor: pointer;
+  border-radius: 4px;
+  justify-content: center;
+  align-items: center;
+  padding: 4px 6px;
+  font-family: inherit;
+  font-size: 11px;
+  display: inline-flex;
+}
+
+#toolbar button:hover {
+  background: var(--bg-button-hover);
+}
+
+#toolbar button:disabled {
+  opacity: .4;
+  cursor: default;
+}
+
+#toolbar [data-testid="mode-toggle"] button[data-active] {
+  background: var(--color-run-bg);
+  color: #fff;
+  font-weight: 600;
+}
+
+#toolbar [data-testid="mode-toggle"] button:not([data-active]) {
+  opacity: .6;
+  background: none;
+}
+
+#run-btn, #step-btn {
+  text-align: center;
+  min-width: 28px;
+  padding: 4px 8px;
+  font-size: 14px;
+}
+
+#debug-btn, #step-btn, #stop-run-btn {
+  color: var(--text-primary);
+}
+
+#run-btn {
+  font-weight: bold;
+  background: var(--color-run-bg) !important;
+  color: #fff !important;
+  border-color: var(--color-run-bg) !important;
+}
+
+#run-btn:hover {
+  background: var(--color-run-bg-hover) !important;
+}
+
+#record-btn.recording, #video-btn.video-recording {
+  background: var(--color-recording-bg) !important;
+  color: var(--color-recording-text) !important;
+  border-color: var(--color-recording-border) !important;
+}
+
+[data-testid="pick-btn"].picking {
+  color: #1565c0 !important;
+  background: #e3f2fd !important;
+  border-color: #1565c0 !important;
+}
+
+.theme-dark [data-testid="pick-btn"].picking {
+  color: #64b5f6 !important;
+  background: #1a3a5c !important;
+  border-color: #64b5f6 !important;
+}
+
+#splitter:hover {
+  background: var(--bg-splitter-hover);
+}
+
+#splitter:hover #splitter-handle {
+  background: var(--color-splitter-handle-hover);
+}
+
+.cm-scroller::-webkit-scrollbar {
+  width: 8px;
+}
+
+.cm-scroller::-webkit-scrollbar-track {
+  background: var(--bg-scrollbar-track);
+}
+
+.cm-scroller::-webkit-scrollbar-thumb {
+  background: var(--bg-scrollbar-thumb);
+  border-radius: 4px;
+}
+
+.cm-scroller::-webkit-scrollbar-thumb:hover {
+  background: var(--bg-scrollbar-thumb-hover);
+}
+
+.ot-key {
+  color: var(--color-flag);
+}
+
+.ot-colon {
+  color: var(--text-dim);
+}
+
+.ot-string {
+  color: var(--color-string);
+}
+
+.ot-number, .ot-boolean {
+  color: var(--color-url);
+}
+
+.ot-null, .ot-undefined {
+  color: var(--text-dim);
+  font-style: italic;
+}
+
+.ot-empty {
+  color: var(--text-dim);
+}
+
+.ot-toggle {
+  cursor: pointer;
+  -webkit-user-select: none;
+  user-select: none;
+  color: var(--text-dim);
+}
+
+.ot-toggle:hover {
+  color: var(--text-default);
+}
+
+.ot-summary {
+  color: var(--text-dim);
+}
+
+.ot-children {
+  padding-left: 12px;
+}
+
+.ot-row {
+  align-items: baseline;
+  display: flex;
+}
+
+#debug-bar {
+  z-index: 20;
+  background: var(--bg-toolbar);
+  border: 1px solid var(--border-primary);
+  border-radius: 6px;
+  align-items: center;
+  gap: 2px;
+  padding: 3px 6px;
+  display: flex;
+  position: fixed;
+  top: 3px;
+  left: 50%;
+  transform: translateX(-50%);
+  box-shadow: 0 2px 8px #00000026;
+}
+
+#debug-bar button {
+  color: var(--text-default);
+  cursor: pointer;
+  background: none;
+  border: 1px solid #0000;
+  border-radius: 4px;
+  justify-content: center;
+  align-items: center;
+  padding: 3px 5px;
+  display: inline-flex;
+}
+
+#debug-bar button:hover {
+  background: var(--bg-button-hover);
+  border-color: var(--border-button);
+}
+
+.debug-bar-sep {
+  background: var(--color-toolbar-sep);
+  width: 1px;
+  height: 16px;
+  margin: 0 2px;
+}
+
+.console-clear-btn {
+  color: var(--text-dim);
+  cursor: pointer;
+  background: none;
+  border: none;
+  border-radius: 3px;
+  padding: 2px 6px;
+  font-family: inherit;
+  font-size: 10px;
+}
+
+.console-clear-btn:hover {
+  color: var(--text-default);
+  background: var(--bg-button);
+}
+
+[data-testid="bottom-pane"] > div:first-child button[data-active] {
+  opacity: 1;
+  border-bottom: 2px solid var(--color-run-bg);
+}
+
+[data-testid="bottom-pane"] > div:first-child button:not([data-active]) {
+  opacity: .6;
+  border-bottom: 2px solid #0000;
+}
+
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+
+@property --tw-leading {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+
+@property --tw-shadow-color {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+
+@property --tw-inset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+
+@property --tw-inset-shadow-color {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-inset-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+
+@property --tw-ring-color {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+
+@property --tw-inset-ring-color {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-inset-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+
+@property --tw-ring-inset {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-ring-offset-width {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --tw-ring-offset-color {
+  syntax: "*";
+  inherits: false;
+  initial-value: #fff;
+}
+
+@property --tw-ring-offset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+
+@property --tw-outline-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+
+@property --tw-blur {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-brightness {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-contrast {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-grayscale {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-hue-rotate {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-invert {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-opacity {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-saturate {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-sepia {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-drop-shadow {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-drop-shadow-color {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-drop-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+
+@property --tw-drop-shadow-size {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-ease {
+  syntax: "*";
+  inherits: false
+}