app/assets/stylesheets/sass-zero/breadboard.scss in sass-zero-0.0.56 vs app/assets/stylesheets/sass-zero/breadboard.scss in sass-zero-0.0.57

@@ -5,23 +5,23 @@
 
 $radius-input:  $rounded;
 $radius-button: $rounded;
 
 :root {
-  --color-bg--main:    #{$white};
-  --color-bg--surface: #{$gray-100};
-  --color-primary:     #{$gray-900};
-  --color-text:        #{$gray-900};
-  --color-focus-ring:  #{rgba($gray-900, $opacity-50)};
+  --color-bg--main:      #{$white};
+  --color-bg--surface:   #{$gray-100};
+  --color-bg--highlight: #{$gray-200};
+  --color-primary:       #{$gray-900};
+  --color-text:          #{$gray-900};
+  --color-focus-ring:    #{rgba($gray-900, $opacity-50)};
 }
 
 html {
   accent-color: var(--color-primary);
   background: var(--color-bg--main);
   color: var(--color-text);
   font-family: $font-family;
-  font-size: 16px;
 }
 
 .btn {
   border-radius: $radius-button;
   border-width: $border;
@@ -66,11 +66,11 @@
   border-width: $border;
   padding: $size-2 $size-3;
   width: $w-full;
 
   &--select {
-    background-image: linear-gradient(45deg, transparent 49%, var(--color-primary) 51%), linear-gradient(135deg, var(--color-primary) 51%, transparent 49%);
+    background-image: linear-gradient(45deg, transparent 49%, var(--color-text) 51%), linear-gradient(135deg, var(--color-text) 51%, transparent 49%);
     background-position: calc(100% - 20px), calc(100% - 15px);
     background-repeat: no-repeat;
     background-size: 5px 5px, 5px 5px;
   }
 
@@ -80,27 +80,31 @@
   }
 }
 
 input[type="checkbox"], input[type="radio"] {
   transform: scale(1.2, 1.2);
+  margin: $size-1;
 
   &:focus {
-    box-shadow: ring($width: 1.5px, $color: var(--color-focus-ring));
+    box-shadow: ring($width: 2px, $color: var(--color-focus-ring));
     @include outline-none;
   }
 }
 
 blockquote {
   border-left-width: $border-4;
   padding: $size-3 $size-4;
 }
 
+cite {
+  font-size: $text-sm;
+}
+
 code {
   background-color: var(--color-bg--surface);
   border-radius: $rounded;
   font-size: $text-sm;
-  margin: $size-0 $size-1;
   padding: $size-1 $size-2;
   white-space: nowrap;
 }
 
 pre {
@@ -114,10 +118,24 @@
     padding: $size-2 $size-3;
     white-space: pre;
   }
 }
 
+kbd {
+  background-color: var(--color-primary);
+  border-radius: $rounded;
+  font-size: $text-sm;
+  padding: $size-1 $size-2;
+  color: var(--color-bg--main);
+}
+
+mark {
+  background-color: var(--color-bg--highlight);
+  border-radius: $rounded;
+  padding: $size-1 $size-2;
+}
+
 hr {
   margin: $size-6 $size-0;
 }
 
 a {
@@ -146,11 +164,21 @@
 
 fieldset, .input {
   margin-bottom: $size-6;
 }
 
-blockquote, figure, p, pre, table, ul, ol, dl {
+table, details, blockquote, p, pre, ul, ol, dl {
   margin-bottom: $size-6;
+}
+
+details {
+  padding: $size-2 $size-3;
+  background-color: var(--color-bg--surface);
+  border-left-width: $border-4;
+}
+
+summary {
+  cursor: pointer;
 }
 
 table {
   width: $w-full;
 }