// asynchronous self-invoking function to not pollute global namespace
(function(window, document, undefined) {
  var TAB_KEY_CODE = 9;
  var M_KEY_CODE = 77;

  var SOFT_TAB = '    ';
  var SOFT_TAB_LENGTH = SOFT_TAB.length;

  window.addEventListener('DOMContentLoaded', function(event) {
    var head = document.getElementsByTagName('head')[0];
    var body = document.body;

    var style = document.createElement('style');
    var textarea = document.createElement('textarea');

    // hide textarea by default
    textarea.style.display = 'none';
    textarea.id = 'my-style-input';

    head.appendChild(style);
    body.appendChild(textarea);

    style.innerHTML = localStorage.myStyle || '';
    textarea.value = style.innerHTML;

    // default help message
    if (textarea.value === '') {
      textarea.value = '/* Enter your styles here. */';
    }

    // continually update styles with textarea content
    textarea.addEventListener('keyup', function(event) {
      style.innerHTML = textarea.value;
      localStorage.myStyle = style.innerHTML;
    });

    // pressing tab should insert spaces instead of focusing another element
    textarea.addEventListener('keydown', function(event) {
      var value = textarea.value;
      var caret = textarea.selectionStart;

      // if tab is pressed, insert four spaces
      if (event.keyCode === TAB_KEY_CODE) {
        textarea.value = value.substring(0, caret) + SOFT_TAB +
          value.substring(caret);

        // move caret to after soft tab
        textarea.setSelectionRange(caret + SOFT_TAB_LENGTH, caret +
          SOFT_TAB_LENGTH);

        // prevent default tab action that shifts focus to the next element
        event.preventDefault();
      }
    });

    window.addEventListener('keydown', function(event) {
      // control + m toggles text area
      if (event.ctrlKey && event.keyCode === M_KEY_CODE) {
        if (textarea.style.display == 'none') {
          textarea.style.display = 'block';
        } else {
          textarea.style.display = 'none';
        }
      }
    });
  });
})(this, this.document);

@@ -220,16 +220,857 @@
 ength;%0A%0A
+  /* Throttle the given function, condensing multiple calls into one call after%0A   * the given timeout period. In other words, allow at most one call to go%0A   * through per timeout period. Returns the throttled function.%0A   *%0A   * Arguments:%0A   * fn -- the function to throttle%0A   * timeout -- the timeout to throttle for%0A   */%0A  function throttle(fn, timeout) %7B%0A    return function throttledFn() %7B%0A      if (!throttledFn.timer) %7B%0A        // keep track of the arguments to the function and the context%0A        var args = arguments;%0A        var that = this;%0A%0A        // call the function after the provided timeout%0A        throttledFn.timer = setTimeout(function() %7B%0A          fn.apply(that, args);%0A%0A          // finished calling the function; unset the timer%0A          throttledFn.timer = undefined;%0A        %7D, timeout);%0A      %7D%0A    %7D;%0A  %7D%0A%0A
   window
@@ -1707,98 +1707,35 @@
     
-// continually
+var
  update
- s
+S
 tyle
-s with textarea content%0A    textarea.addEventListener('keyup', 
+ = throttle(
 func
@@ -1731,37 +1731,32 @@
 rottle(function(
-event
 ) %7B%0A      style.
@@ -1830,24 +1830,192 @@
 rHTML;%0A    %7D
+, 500);%0A%0A    // continually update styles with textarea content%0A    textarea.addEventListener('keyup', updateStyle);%0A    textarea.addEventListener('change', updateStyle
 );%0A%0A    // p

Save CSS less frequently. Handle change event so copy-pasting saves CSS.