railscope 0.1.2 → 0.1.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6a891dab66be8ea0c685b4edbf8ac6089426d0f8bc48159cefcd8e709afb5f0d
-  data.tar.gz: f0a40a9df1579a6fd37e8c77861d4a07a9f0155794c4440fe23bb7bf55251c05
+  metadata.gz: 365fa77a20cf2375e26da9f92c52dae76d20ff8cce31a793f921e7e392208149
+  data.tar.gz: 838667bc52bf55f90c2372d713d4677407675f2ec8b27cdcc460eb701ea89931
 SHA512:
-  metadata.gz: badbe24c5d96dd3ae5be0c51e57db45e0c83cef4a7fdeb79c2640a50c7fd591b5f0ecc973e79fe9ca996361cace6765f2fd0027200733f3750559df8f3b2c3c1
-  data.tar.gz: 72c8ce099532400ebec6cf4b5c22b862ec8ab1fd742b087a69db1d1ead106d4f0a61a0ef2e7030c135359de5d7936d3eff92ef404077e15c92df1bd4566a955d
+  metadata.gz: 25d34d2449ae7cd8c9b0940438a93de8357cb4f5a73b85fab3f762bbd46cb0a41f87e905c474d467b15330f83ce7c35f3e7d9adbaf4a3bd88a8f0c0f8ee683b1
+  data.tar.gz: 392dfb08fe6a2fbda012364e0a0e705a913337626e4fef890deb1bff469cb009ee68e8bb851988e8814a7e7f578cd04df6295e0f821dd5364205b337af2c30b8

data/client/src/components/ui/JsonViewer.tsx

@@ -64,14 +64,27 @@ function JsonValue({ value, indent = 0 }: { value: unknown; indent?: number }) {
     }
     return (
       <div>
-        {entries.map(([key, val], i) => (
-          <div key={key} className="flex">
-            <span className="text-blue-400">"{key}"</span>
-            <span className="text-dark-muted mr-2">:</span>
-            <JsonValue value={val} indent={indent + 1} />
-            {i < entries.length - 1 && <span className="text-dark-muted">,</span>}
-          </div>
-        ))}
+        <span className="text-dark-muted">{'{'}</span>
+        <div className="pl-4">
+          {entries.map(([key, val], i) => {
+            const isComplex = val !== null && typeof val === 'object'
+            return (
+              <div key={key}>
+                <span className="text-blue-400">"{key}"</span>
+                <span className="text-dark-muted mr-1">:</span>
+                {isComplex ? (
+                  <JsonValue value={val} indent={indent + 1} />
+                ) : (
+                  <>
+                    <JsonValue value={val} indent={indent + 1} />
+                  </>
+                )}
+                {i < entries.length - 1 && <span className="text-dark-muted">,</span>}
+              </div>
+            )
+          })}
+        </div>
+        <span className="text-dark-muted">{'}'}</span>
       </div>
     )
   }

data/lib/generators/railscope/templates/initializer.rb

@@ -20,6 +20,21 @@ Railscope.configure do |config|
   #
   # config.enabled = true
 
+  # Storage Backend
+  # ---------------
+  # :database - Direct writes to PostgreSQL (simpler, no Redis needed)
+  # :redis    - Buffer in Redis, batch flush to PostgreSQL (faster requests)
+  #
+  # When using :redis, entries are buffered in Redis during requests and
+  # flushed to PostgreSQL periodically via Railscope::FlushService.
+  # You can trigger the flush with:
+  #   - Railscope::FlushService.call (from a job, cron, etc.)
+  #   - rake railscope:flush
+  #
+  # Can also be set via RAILSCOPE_STORAGE env var.
+  #
+  # config.storage_backend = :database
+
   # Retention Period
   # ----------------
   # Number of days to keep entries before purging.

data/lib/railscope/engine.rb

@@ -78,7 +78,7 @@ module Railscope
     end
 
     rake_tasks do
-      # Load sample tasks for testing
+      load Railscope::Engine.root.join("lib/tasks/railscope.rake")
       load Railscope::Engine.root.join("lib/tasks/railscope_sample.rake")
 
       # Subscribe to rake tasks after they're loaded

data/lib/railscope/flush_service.rb

@@ -0,0 +1,92 @@
+# frozen_string_literal: true
+
+module Railscope
+  class FlushService
+    BUFFER_KEY = "railscope:buffer"
+    UPDATES_KEY = "railscope:buffer:updates"
+    BATCH_SIZE = 1000
+
+    def self.call
+      new.call
+    end
+
+    def call
+      total = flush_entries
+      apply_pending_updates
+      total
+    end
+
+    private
+
+    def flush_entries
+      total = 0
+
+      loop do
+        batch = pop_batch(BUFFER_KEY)
+        break if batch.empty?
+
+        entries = batch.map { |json| JSON.parse(json, symbolize_names: true) }
+        batch_insert_to_database(entries)
+        total += entries.size
+      end
+
+      total
+    end
+
+    def apply_pending_updates
+      loop do
+        batch = pop_batch(UPDATES_KEY)
+        break if batch.empty?
+
+        batch.each do |json|
+          update = JSON.parse(json, symbolize_names: true)
+          apply_update(update)
+        end
+      end
+    end
+
+    def apply_update(update)
+      entry = Entry.where(
+        batch_id: update[:batch_id],
+        entry_type: update[:entry_type].to_s
+      ).order(created_at: :desc).first
+      return unless entry
+
+      entry.payload = entry.payload.merge(
+        update[:payload_updates].transform_keys(&:to_s)
+      )
+      entry.save!
+    rescue StandardError => e
+      Rails.logger.debug("[Railscope] Failed to apply buffered update: #{e.message}")
+    end
+
+    def batch_insert_to_database(entries)
+      now = Time.current
+
+      records = entries.map do |entry|
+        {
+          uuid: entry[:uuid],
+          batch_id: entry[:batch_id],
+          family_hash: entry[:family_hash],
+          entry_type: entry[:entry_type],
+          payload: entry[:payload],
+          tags: entry[:tags] || [],
+          should_display_on_index: entry.fetch(:should_display_on_index, true),
+          occurred_at: entry[:occurred_at] || now,
+          created_at: entry[:created_at] || now,
+          updated_at: entry[:updated_at] || now
+        }
+      end
+
+      Entry.insert_all(records)
+    end
+
+    def pop_batch(key)
+      redis.lpop(key, BATCH_SIZE) || []
+    end
+
+    def redis
+      Railscope.redis
+    end
+  end
+end

data/lib/railscope/middleware.rb

@@ -80,20 +80,9 @@ module Railscope
       end
       session_data = extract_session_from_env(context_data[:env])
 
-      # Parse JSON if applicable
+      # Determine response type and handle accordingly (like Telescope)
       content_type = response_headers["Content-Type"] || response_headers["content-type"] || ""
-      looks_like_json = response_body.to_s.start_with?("{", "[")
-      is_json = content_type.include?("application/json") || looks_like_json
-
-      parsed_body = if is_json
-                      begin
-                        JSON.parse(response_body)
-                      rescue StandardError
-                        response_body
-                      end
-                    else
-                      response_body
-                    end
+      parsed_body = parse_response_body(response_body, content_type, context_data[:env])
 
       payload_updates = {
         "response" => parsed_body.presence,
@@ -101,24 +90,129 @@ module Railscope
         "session" => session_data
       }
 
-      storage = Railscope.storage
+      Railscope.storage.update_by_batch(
+        batch_id: context_data[:batch_id],
+        entry_type: "request",
+        payload_updates: payload_updates
+      )
+    rescue StandardError => e
+      Rails.logger.debug("[Railscope] Failed to update entry with response: #{e.message}")
+    end
 
-      if storage.is_a?(Railscope::Storage::Database)
-        entry = Entry.where(batch_id: context_data[:batch_id], entry_type: "request").order(created_at: :desc).first
-        return unless entry
+    def self.parse_response_body(response_body, content_type, env)
+      body_str = response_body.to_s
 
-        entry.payload = entry.payload.merge(payload_updates)
-        entry.save!
+      # Empty response
+      return "Empty Response" if body_str.blank?
 
-      elsif storage.respond_to?(:update_by_batch)
-        storage.update_by_batch(
-          batch_id: context_data[:batch_id],
-          entry_type: "request",
-          payload_updates: payload_updates
-        )
+      # Redirect
+      if env && (location = env["action_dispatch.redirect_url"])
+        return "Redirected to #{location}"
       end
-    rescue StandardError => e
-      Rails.logger.debug("[Railscope] Failed to update entry with response: #{e.message}")
+
+      # JSON response
+      if content_type.include?("application/json") || body_str.match?(/\A\s*[\[{]/)
+        begin
+          return JSON.parse(body_str)
+        rescue StandardError
+          return body_str.truncate(2000)
+        end
+      end
+
+      # Plain text response
+      if content_type.include?("text/plain")
+        return body_str.truncate(2000)
+      end
+
+      # HTML view response — extract template path and data like Telescope
+      extract_view_response(env) || "HTML Response"
+    end
+
+    def self.extract_view_response(env)
+      return nil unless env
+
+      controller = env["action_controller.instance"]
+      return nil unless controller
+
+      view_path = resolve_view_path(controller)
+      return nil unless view_path
+
+      {
+        "view" => view_path,
+        "data" => extract_controller_data(controller)
+      }
+    rescue StandardError
+      nil
+    end
+
+    def self.resolve_view_path(controller)
+      # Try to get the actual rendered template from the controller
+      if controller.respond_to?(:rendered_format, true) || controller.respond_to?(:controller_path)
+        template_path = "app/views/#{controller.controller_path}/#{controller.action_name}"
+
+        # Try to find the actual file with extension
+        if defined?(Rails.root)
+          candidates = Dir.glob(Rails.root.join("#{template_path}.*"))
+          return candidates.first&.sub("#{Rails.root}/", "") if candidates.any?
+        end
+
+        template_path
+      end
+    rescue StandardError
+      nil
+    end
+
+    def self.extract_controller_data(controller)
+      data = {}
+
+      controller.instance_variables.each do |ivar|
+        name = ivar.to_s.delete_prefix("@")
+
+        # Skip internal Rails/controller variables
+        next if name.start_with?("_")
+        next if IGNORED_INSTANCE_VARS.include?(name)
+
+        value = controller.instance_variable_get(ivar)
+        data[name] = safe_serialize(value)
+      end
+
+      data.presence || {}
+    rescue StandardError
+      {}
+    end
+
+    IGNORED_INSTANCE_VARS = %w[
+      request response marked_for_same_origin_verification
+      performed_redirect action_has_layout lookup_context
+      view_context_class current_renderer view_renderer
+      action_name pressed_key action_status response_body
+    ].freeze
+
+    def self.safe_serialize(value, depth: 0)
+      return "..." if depth > 5
+
+      case value
+      when String, Numeric, TrueClass, FalseClass, NilClass
+        value
+      when Symbol
+        value.to_s
+      when Time, DateTime
+        value.iso8601
+      when Date
+        value.to_s
+      when ActiveRecord::Relation
+        value.limit(50).map { |record| safe_serialize(record, depth: depth + 1) }
+      when ActiveRecord::Base
+        Railscope.filter(value.attributes.transform_values { |v| safe_serialize(v, depth: depth + 1) })
+      when Array
+        value.first(50).map { |v| safe_serialize(v, depth: depth + 1) }
+      when Hash
+        value.transform_values { |v| safe_serialize(v, depth: depth + 1) }
+      else
+        value.to_s
+      end
+    rescue StandardError
+      value.class.name
     end
 
     def self.extract_session_from_env(env)

data/lib/railscope/storage/database.rb

@@ -10,6 +10,15 @@ module Railscope
         EntryData.from_active_record(record)
       end
 
+      def update_by_batch(batch_id:, entry_type:, payload_updates:)
+        entry = Entry.where(batch_id: batch_id, entry_type: entry_type).order(created_at: :desc).first
+        return nil unless entry
+
+        entry.payload = entry.payload.merge(payload_updates)
+        entry.save!
+        EntryData.from_active_record(entry)
+      end
+
       def find(uuid)
         record = Entry.find_by(uuid: uuid)
         return nil unless record

data/lib/railscope/storage/redis_buffer.rb

@@ -0,0 +1,92 @@
+# frozen_string_literal: true
+
+module Railscope
+  module Storage
+    class RedisBuffer < Base
+      BUFFER_KEY = "railscope:buffer"
+      UPDATES_KEY = "railscope:buffer:updates"
+
+      # WRITE → Redis (fast, ~0.1ms)
+      def write(attributes)
+        entry = build_entry(attributes)
+        redis.rpush(BUFFER_KEY, entry.to_json)
+        entry
+      end
+
+      # UPDATE → Redis buffer (for response data from middleware)
+      def update_by_batch(batch_id:, entry_type:, payload_updates:)
+        update = {
+          batch_id: batch_id,
+          entry_type: entry_type,
+          payload_updates: payload_updates
+        }
+        redis.rpush(UPDATES_KEY, update.to_json)
+      end
+
+      # READ → Database (source of truth)
+      def find(uuid)
+        database_adapter.find(uuid)
+      end
+
+      def all(filters: {}, page: 1, per_page: 25, displayable_only: true)
+        database_adapter.all(filters: filters, page: page, per_page: per_page, displayable_only: displayable_only)
+      end
+
+      def count(filters: {}, displayable_only: true)
+        database_adapter.count(filters: filters, displayable_only: displayable_only)
+      end
+
+      def for_batch(batch_id)
+        database_adapter.for_batch(batch_id)
+      end
+
+      def for_family(family_hash, page: 1, per_page: 25)
+        database_adapter.for_family(family_hash, page: page, per_page: per_page)
+      end
+
+      def family_count(family_hash)
+        database_adapter.family_count(family_hash)
+      end
+
+      def destroy_all!
+        redis.del(BUFFER_KEY, UPDATES_KEY)
+        database_adapter.destroy_all!
+      end
+
+      def destroy_expired!
+        database_adapter.destroy_expired!
+      end
+
+      # READY → needs both Redis AND database
+      def ready?
+        Railscope.redis_available? && database_adapter.ready?
+      end
+
+      private
+
+      def redis
+        Railscope.redis
+      end
+
+      def database_adapter
+        @database_adapter ||= Database.new
+      end
+
+      def build_entry(attributes)
+        now = Time.current
+        EntryData.new(
+          uuid: attributes[:uuid] || SecureRandom.uuid,
+          batch_id: attributes[:batch_id],
+          family_hash: attributes[:family_hash],
+          entry_type: attributes[:entry_type],
+          payload: attributes[:payload] || {},
+          tags: attributes[:tags] || [],
+          should_display_on_index: attributes.fetch(:should_display_on_index, true),
+          occurred_at: attributes[:occurred_at] || now,
+          created_at: attributes[:created_at] || now,
+          updated_at: attributes[:updated_at] || now
+        )
+      end
+    end
+  end
+end

data/lib/railscope/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Railscope
-  VERSION = "0.1.2"
+  VERSION = "0.1.3"
 end

data/lib/railscope.rb

@@ -6,7 +6,8 @@ require_relative "railscope/filter"
 require_relative "railscope/entry_data"
 require_relative "railscope/storage/base"
 require_relative "railscope/storage/database"
-require_relative "railscope/storage/redis_storage"
+require_relative "railscope/storage/redis_buffer"
+require_relative "railscope/flush_service"
 require_relative "railscope/middleware"
 require_relative "railscope/engine"
 
@@ -57,7 +58,7 @@ module Railscope
     def storage
       @storage ||= case storage_backend
                    when STORAGE_REDIS
-                     Storage::RedisStorage.new
+                     Storage::RedisBuffer.new
                    else
                      Storage::Database.new
                    end

data/lib/tasks/railscope.rake

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+namespace :railscope do
+  desc "Flush buffered entries from Redis to database"
+  task flush: :environment do
+    count = Railscope::FlushService.call
+    puts "Flushed #{count} entries"
+  end
+
+  desc "Purge expired entries"
+  task purge: :environment do
+    count = Railscope.storage.destroy_expired!
+    puts "Purged #{count} entries"
+  end
+end

data/public/railscope/assets/app.css

@@ -1 +1 @@
-*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}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;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.relative{position:relative}.inset-y-0{top:0;bottom:0}.left-0{left:0}.right-0{right:0}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mr-2{margin-right:.5rem}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.h-16{height:4rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-screen{height:100vh}.w-12{width:3rem}.w-16{width:4rem}.w-28{width:7rem}.w-32{width:8rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-56{width:14rem}.w-6{width:1.5rem}.w-8{width:2rem}.w-full{width:100%}.min-w-\[3rem\]{min-width:3rem}.max-w-md{max-width:28rem}.max-w-sm{max-width:24rem}.flex-1{flex:1 1 0%}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.space-y-5>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.25rem * var(--tw-space-y-reverse))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse: 0;border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px * var(--tw-divide-y-reverse))}.divide-dark-border>:not([hidden])~:not([hidden]){--tw-divide-opacity: 1;border-color:rgb(48 54 61 / var(--tw-divide-opacity, 1))}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.whitespace-nowrap{white-space:nowrap}.whitespace-pre{white-space:pre}.whitespace-pre-wrap{white-space:pre-wrap}.break-words{overflow-wrap:break-word}.break-all{word-break:break-all}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.border{border-width:1px}.border-0{border-width:0px}.border-b{border-bottom-width:1px}.border-r{border-right-width:1px}.border-t{border-top-width:1px}.border-blue-500{--tw-border-opacity: 1;border-color:rgb(59 130 246 / var(--tw-border-opacity, 1))}.border-dark-border{--tw-border-opacity: 1;border-color:rgb(48 54 61 / var(--tw-border-opacity, 1))}.border-dark-border\/50{border-color:#30363d80}.bg-\[\#1a1a2e\]{--tw-bg-opacity: 1;background-color:rgb(26 26 46 / var(--tw-bg-opacity, 1))}.bg-black\/20{background-color:#0003}.bg-blue-500{--tw-bg-opacity: 1;background-color:rgb(59 130 246 / var(--tw-bg-opacity, 1))}.bg-blue-500\/10{background-color:#3b82f61a}.bg-blue-500\/20{background-color:#3b82f633}.bg-dark-bg{--tw-bg-opacity: 1;background-color:rgb(13 17 23 / var(--tw-bg-opacity, 1))}.bg-dark-border{--tw-bg-opacity: 1;background-color:rgb(48 54 61 / var(--tw-bg-opacity, 1))}.bg-dark-border\/50{background-color:#30363d80}.bg-dark-surface{--tw-bg-opacity: 1;background-color:rgb(22 27 34 / var(--tw-bg-opacity, 1))}.bg-gray-500\/20{background-color:#6b728033}.bg-green-500\/20{background-color:#22c55e33}.bg-purple-500\/20{background-color:#a855f733}.bg-red-500{--tw-bg-opacity: 1;background-color:rgb(239 68 68 / var(--tw-bg-opacity, 1))}.bg-red-500\/20{background-color:#ef444433}.bg-red-500\/30{background-color:#ef44444d}.bg-transparent{background-color:transparent}.bg-yellow-500\/20{background-color:#eab30833}.p-0{padding:0}.p-2{padding:.5rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-16{padding-top:4rem;padding-bottom:4rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pl-10{padding-left:2.5rem}.pl-3{padding-left:.75rem}.pl-4{padding-left:1rem}.pr-10{padding-right:2.5rem}.pr-3{padding-right:.75rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.text-2xl{font-size:1.5rem;line-height:2rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.italic{font-style:italic}.tracking-wide{letter-spacing:.025em}.text-blue-400{--tw-text-opacity: 1;color:rgb(96 165 250 / var(--tw-text-opacity, 1))}.text-blue-500{--tw-text-opacity: 1;color:rgb(59 130 246 / var(--tw-text-opacity, 1))}.text-dark-muted{--tw-text-opacity: 1;color:rgb(139 148 158 / var(--tw-text-opacity, 1))}.text-dark-text{--tw-text-opacity: 1;color:rgb(201 209 217 / var(--tw-text-opacity, 1))}.text-gray-400{--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.text-green-400{--tw-text-opacity: 1;color:rgb(74 222 128 / var(--tw-text-opacity, 1))}.text-purple-300{--tw-text-opacity: 1;color:rgb(216 180 254 / var(--tw-text-opacity, 1))}.text-purple-400{--tw-text-opacity: 1;color:rgb(192 132 252 / var(--tw-text-opacity, 1))}.text-red-400{--tw-text-opacity: 1;color:rgb(248 113 113 / var(--tw-text-opacity, 1))}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.text-yellow-400{--tw-text-opacity: 1;color:rgb(250 204 21 / var(--tw-text-opacity, 1))}.placeholder-dark-muted::-moz-placeholder{--tw-placeholder-opacity: 1;color:rgb(139 148 158 / var(--tw-placeholder-opacity, 1))}.placeholder-dark-muted::placeholder{--tw-placeholder-opacity: 1;color:rgb(139 148 158 / var(--tw-placeholder-opacity, 1))}.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)}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;background-color:#0d1117;color:#c9d1d9}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#161b22}::-webkit-scrollbar-thumb{background:#30363d;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#484f58}.hover\:bg-dark-border:hover{--tw-bg-opacity: 1;background-color:rgb(48 54 61 / var(--tw-bg-opacity, 1))}.hover\:bg-dark-border\/50:hover{background-color:#30363d80}.hover\:bg-white\/\[0\.02\]:hover{background-color:#ffffff05}.hover\:text-blue-300:hover{--tw-text-opacity: 1;color:rgb(147 197 253 / var(--tw-text-opacity, 1))}.hover\:text-dark-text:hover{--tw-text-opacity: 1;color:rgb(201 209 217 / var(--tw-text-opacity, 1))}.focus\:border-blue-500:focus{--tw-border-opacity: 1;border-color:rgb(59 130 246 / var(--tw-border-opacity, 1))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-1:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus\:ring-blue-500:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1))}
+*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}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;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.relative{position:relative}.inset-y-0{top:0;bottom:0}.left-0{left:0}.right-0{right:0}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mr-1{margin-right:.25rem}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.h-16{height:4rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-screen{height:100vh}.w-12{width:3rem}.w-16{width:4rem}.w-28{width:7rem}.w-32{width:8rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-56{width:14rem}.w-6{width:1.5rem}.w-8{width:2rem}.w-full{width:100%}.min-w-\[3rem\]{min-width:3rem}.max-w-md{max-width:28rem}.max-w-sm{max-width:24rem}.flex-1{flex:1 1 0%}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.space-y-5>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.25rem * var(--tw-space-y-reverse))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse: 0;border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px * var(--tw-divide-y-reverse))}.divide-dark-border>:not([hidden])~:not([hidden]){--tw-divide-opacity: 1;border-color:rgb(48 54 61 / var(--tw-divide-opacity, 1))}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.whitespace-nowrap{white-space:nowrap}.whitespace-pre{white-space:pre}.whitespace-pre-wrap{white-space:pre-wrap}.break-words{overflow-wrap:break-word}.break-all{word-break:break-all}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.border{border-width:1px}.border-0{border-width:0px}.border-b{border-bottom-width:1px}.border-r{border-right-width:1px}.border-t{border-top-width:1px}.border-blue-500{--tw-border-opacity: 1;border-color:rgb(59 130 246 / var(--tw-border-opacity, 1))}.border-dark-border{--tw-border-opacity: 1;border-color:rgb(48 54 61 / var(--tw-border-opacity, 1))}.border-dark-border\/50{border-color:#30363d80}.bg-\[\#1a1a2e\]{--tw-bg-opacity: 1;background-color:rgb(26 26 46 / var(--tw-bg-opacity, 1))}.bg-black\/20{background-color:#0003}.bg-blue-500{--tw-bg-opacity: 1;background-color:rgb(59 130 246 / var(--tw-bg-opacity, 1))}.bg-blue-500\/10{background-color:#3b82f61a}.bg-blue-500\/20{background-color:#3b82f633}.bg-dark-bg{--tw-bg-opacity: 1;background-color:rgb(13 17 23 / var(--tw-bg-opacity, 1))}.bg-dark-border{--tw-bg-opacity: 1;background-color:rgb(48 54 61 / var(--tw-bg-opacity, 1))}.bg-dark-border\/50{background-color:#30363d80}.bg-dark-surface{--tw-bg-opacity: 1;background-color:rgb(22 27 34 / var(--tw-bg-opacity, 1))}.bg-gray-500\/20{background-color:#6b728033}.bg-green-500\/20{background-color:#22c55e33}.bg-purple-500\/20{background-color:#a855f733}.bg-red-500{--tw-bg-opacity: 1;background-color:rgb(239 68 68 / var(--tw-bg-opacity, 1))}.bg-red-500\/20{background-color:#ef444433}.bg-red-500\/30{background-color:#ef44444d}.bg-transparent{background-color:transparent}.bg-yellow-500\/20{background-color:#eab30833}.p-0{padding:0}.p-2{padding:.5rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-16{padding-top:4rem;padding-bottom:4rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pl-10{padding-left:2.5rem}.pl-3{padding-left:.75rem}.pl-4{padding-left:1rem}.pr-10{padding-right:2.5rem}.pr-3{padding-right:.75rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.text-2xl{font-size:1.5rem;line-height:2rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.italic{font-style:italic}.tracking-wide{letter-spacing:.025em}.text-blue-400{--tw-text-opacity: 1;color:rgb(96 165 250 / var(--tw-text-opacity, 1))}.text-blue-500{--tw-text-opacity: 1;color:rgb(59 130 246 / var(--tw-text-opacity, 1))}.text-dark-muted{--tw-text-opacity: 1;color:rgb(139 148 158 / var(--tw-text-opacity, 1))}.text-dark-text{--tw-text-opacity: 1;color:rgb(201 209 217 / var(--tw-text-opacity, 1))}.text-gray-400{--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.text-green-400{--tw-text-opacity: 1;color:rgb(74 222 128 / var(--tw-text-opacity, 1))}.text-purple-300{--tw-text-opacity: 1;color:rgb(216 180 254 / var(--tw-text-opacity, 1))}.text-purple-400{--tw-text-opacity: 1;color:rgb(192 132 252 / var(--tw-text-opacity, 1))}.text-red-400{--tw-text-opacity: 1;color:rgb(248 113 113 / var(--tw-text-opacity, 1))}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.text-yellow-400{--tw-text-opacity: 1;color:rgb(250 204 21 / var(--tw-text-opacity, 1))}.placeholder-dark-muted::-moz-placeholder{--tw-placeholder-opacity: 1;color:rgb(139 148 158 / var(--tw-placeholder-opacity, 1))}.placeholder-dark-muted::placeholder{--tw-placeholder-opacity: 1;color:rgb(139 148 158 / var(--tw-placeholder-opacity, 1))}.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)}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;background-color:#0d1117;color:#c9d1d9}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#161b22}::-webkit-scrollbar-thumb{background:#30363d;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#484f58}.hover\:bg-dark-border:hover{--tw-bg-opacity: 1;background-color:rgb(48 54 61 / var(--tw-bg-opacity, 1))}.hover\:bg-dark-border\/50:hover{background-color:#30363d80}.hover\:bg-white\/\[0\.02\]:hover{background-color:#ffffff05}.hover\:text-blue-300:hover{--tw-text-opacity: 1;color:rgb(147 197 253 / var(--tw-text-opacity, 1))}.hover\:text-dark-text:hover{--tw-text-opacity: 1;color:rgb(201 209 217 / var(--tw-text-opacity, 1))}.focus\:border-blue-500:focus{--tw-border-opacity: 1;border-color:rgb(59 130 246 / var(--tw-border-opacity, 1))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-1:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus\:ring-blue-500:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1))}