style.css

/**
 * Variables
 */

#easing > svg,
#fontfamily,
#entity {
	background: url(/img/noise.png), linear-gradient(hsla(200, 10%, 20%, .8), hsl(200, 10%, 20%));
}

/**
 * Styles
 */

fieldset {
	padding: .5em;
	border: 0;
	margin-top: .5em;
}

[aria-hidden="true"] {
	display: none !important;
}

input:focus + label[for],
label.focus {
	outline: auto;
	outline: 2px auto -webkit-focus-ring-color; /* Warning: nonstandard */
}

button.danger,
.button.danger {
	background-color: rgba(196, 0, 0, .8);
	text-shadow: 0 -1px 1px rgba(0,0,0,.5), 0 -1px 2px rgba(0,0,0,.5);
}

button.danger:hover,
.button.danger:hover {
	background-color: red;
}

input[type="checkbox"] {
	appearance: none;
	display: inline-block;
	width: .9rem;
	height: .9rem;
	padding-left: .1rem;
	border: 0;
	box-sizing: border-box;
	margin: 0;
	background: rgba(0,0,0,.1);
	font: inherit;
	letter-spacing: inherit;
	outline: none;
	border-radius: 2px;
	box-shadow: 1px 1px 5px rgba(0,0,0,.3) inset;
	text-align: right;
	overflow: visible;
	font-size: 1.2rem;
	line-height: .6rem;
}

	input[type="checkbox"]:checked {
		text-shadow: inherit;
	}
	
	input[type="checkbox"]::after {
		content: '✓';
	}

.-webkit- input[type="range"] {
	appearance: none;
	height: 1px;
	border-top: 1px solid #cfc6b0;
	background: white;
}
	
	/* Warning: nonstandard */
	input[type="range"]::-webkit-slider-thumb {
		appearance: none;
		width: 1.4em;
		height: 1.4em;
		border: 1px solid #cfc6b0;
		border-radius: 50%;
		cursor: pointer;
		background: url(img/noise.png) hsl(44, 39%, 90%);
		box-shadow: white 0 1px 0 inset, 
					rgba(255, 255, 255, .5) 0 5px 6px -2px inset, 
					rgba(0, 0, 0, .3) 0 1px 2px;
	}
	
	input[type="range"]::-webkit-slider-thumb:active {
		width: 1.6em;
		height: 1.6em;
	}

label.slider {
	display: none;
}

html.supports-range label.slider {
	display: block;
}

.segmented-control {
	display: table;
}

	.segmented-control > input[type="radio"] {
		position: absolute;
		z-index: 1;
		opacity: 0;
	}
	
	.segmented-control > input[type="radio"] + label {
		float: none;
		display: table-cell;
		padding: .4em .9em;
		margin: .15em;
		overflow: hidden;
		text-align: left;
		line-height: 25px;
		border-radius: 0;
	}
	
	.segmented-control > input[type="radio"] + label:first-of-type,
	.segmented-control > input[type="radio"] + label:last-of-type {
		border-radius: .4em;
	}
	
	.segmented-control > input[type="radio"] + label:first-of-type {
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
	}
	
	.segmented-control > input[type="radio"] + label:not(:first-of-type) {
		border-left: 0;
	}
	
	.segmented-control > input[type="radio"] + label:last-of-type {
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
	}
	
.no-cors #cloud {
	display: none;
}

.amp {
	font: italic 160%/.5 Baskerville, 'Palatino Linotype', 'Goudy Old Style', Constantia, Palatino, serif;
	vertical-align: -.1em;
	opacity: .7;
}

.page {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
	outline: none;
	resize: none;
	background: transparent;
	transition-duration: .5s;
	transition-property: top, left, width, height;
}

.editor.page {
	display: none;
	box-sizing: border-box;
	height: 100%;
	overflow: auto;
	background: url('http://docs.webplatform.org/w/skins/webplatform/images/bg-pattern.png') #e6decc;
	font: 100%/1.5em Monaco, Consolas, Inconsolata, 'Deja Vu Sans Mono', 'Droid Sans Mono', 'Andale Mono', 'Lucida Console', monospace;
	tab-size: 4;
	word-wrap: normal;
	text-shadow: 0 1px white;
	box-shadow: 1px 1px 2px rgba(0,0,0,.3) inset;
}

body[data-page="all"]:not([data-seethrough]) #html-container {
	background-color: hsl(24, 20%, 92%);
}

.editor.page.focus {
	box-shadow: .1em .1em .4em rgba(0,0,0,.5) inset;
}

body[data-seethrough] > .editor.page {
	background: transparent;
}

body[data-seethrough] .editor.page,
body[data-seethrough] .editor.page > pre,
body[data-seethrough] .editor.page > pre > span.token {
	text-shadow: 0 .1em white, 0 -.1em white, .1em 0 white, -.1em 0 white,
				 .1em .1em white, -.1em .1em white, .1em -.1em white, -.1em -.1em white;
	text-shadow: 0 0 0 .1em white;
}

	.editor.page > pre {
		position: relative;
		padding: 1em 1.5em 1em 3em;
		overflow: visible;
		background: linear-gradient(90deg, hsl(24, 20%, 87%) 1px, hsl(24, 20%, 95%)) -3px no-repeat;
		background-size: 2px 100%;
		background-origin: content-box;
		word-wrap: normal;
		font: inherit;
		outline: none;
	}
	
#result {
	z-index: 0;
}

body[data-page="css"] #css-container,
body[data-page="html"] #html-container,
body[data-page="javascript"] #javascript-container,
body[data-page="all"] .page:not(#javascript-container) {
	display: block;
}

/*
 * Define the different views
 */

body[data-view="split-vertical"] > .page,
body[data-page="all"][data-view="separate"] .editor.page {
	width: 50%;
}

body[data-view="split-vertical"] > #result,
body[data-page="all"][data-view="separate"] #html-container {
	left: 50%;
}

body[data-view="split"] > .page,
body[data-page="all"][data-view="separate"] > .page,
body:not([data-view]) > .page {
	height: 50%;
}

body[data-view="split"] > .editor.page,
body:not([data-view]) > .editor.page,
body[data-page="all"][data-view="separate"] .editor.page {
	top: 50%;
}

body[data-page="all"][data-view="split"] .page {
	height: 40%;
}

body[data-page="all"][data-view="split"] #css-container {
	top: 40%;
}

body[data-page="all"][data-view="split-vertical"] .page:not(#html-container) {
	height: 80%;
}

body[data-page="all"][data-view^="split"] #html-container {
	width: 100%;
	height: 20%;
	top: 80%;
}

body[data-seethrough] > #result,
body[data-page="result"] > #result {
	top: 0 !important; 
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
}

.for-code {
	display: none;
	position: absolute;
	right: 0;
	top: 0;
	margin: 10px 10px 0 0;
	font-weight: bold;
	transition-duration: .5s;
	transition-property: top, right;
}

body[data-page="css"] .for-code.css,
body[data-page="javascript"] .for-code.javascript,
body[data-page="html"] .for-code.html {
	display: block;
}

body[data-view="split-vertical"] .for-code {
	right: 50%;
}

body[data-view="split"] .for-code {
	top: 50%;
}

.line-highlight {
	position: absolute;
	left: 0;
	right: 0;
	padding-left: .6em;
	margin-top: 1em;
	background: url(/img/noise.png) hsla(24, 20%, 50%,.05);
	background: url(/img/noise.png), linear-gradient(left, hsla(24, 20%, 50%,.08) 70%, hsla(24, 20%, 50%,0));
}

.editor.page:not(.focus) > .line-highlight,
body[data-seethrough] .line-highlight {
	display: none;
}

	.line-highlight:before,
	#jserror .line-number {
		display: inline-block;
		min-width: 1em;
		padding: 0 .5em;
		background: inherit;
		font: bold 65%/1.5 sans-serif;
		text-align: center;
		vertical-align: .3em;
		border-radius: 999px;
		text-shadow: none;
		box-shadow: 0 1px white;
	}
	
	.line-highlight:before {
		content: attr(data-line);
		background-color: hsla(24, 20%, 50%,.4);
		color: hsl(24, 20%, 95%);
	}

@keyframes jserror {
	50% {
		padding-top: 1em;
	}
}

#jserror {
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: .2em .5em;
	border-top: 1px solid #ebb;
	background: #edd;
	color: #800;
	text-shadow: 0 1px 1px white;
	line-height: 1.5;
}

body[data-page="javascript"] #jserror.active {
	display: block;
	animation: jserror .2s;
}

	#jserror .line-number {
		margin-right: .5em;
		background: #e99;
		color: #fee;
		font-size: 80%;
		vertical-align: .15em;
	}
	
	#jserror:before {
		content: '✖';
		float: right;
		width: 1em;
		padding: .2em;
		border: 4px solid hsla(0,0%,100%,.6);
		border-radius: 50%;
		margin-top: -1em;
		text-align: center;
		background: #e00;
		color: white;
		text-shadow: 0 -1px 2px rgba(0,0,0,.5);
		font: bold 200%/1 Arial, sans-serif;
	}
			
.popup {
	display: none;
	position: absolute;
	top: 10%;
	bottom: 10%;
	left: 50%;
	z-index: 20;
	width: 60%;
	padding: .6em .6em 5.2em;
	box-sizing: border-box;
	margin-left: -30%;
}

.popup:target {
	display: block;
}

	.popup > h1 {
		color: white;
		font-size: 160%;
	}
	
	.popup > .close {
		position: absolute;
		top: 10px;
		right: 10px;
		width: 1.2em;
		font-size: 150%;
		line-height: 1.2;
		font-weight: bold;
		text-align: center;
		border-radius: 50%;
	}
	
	.popup > .content {
		height: 100%;
		padding: 1em;
		border: inherit;
		overflow: auto;
		background-clip: padding-box;
		border-radius: 3px;
	}
		
/**
 * Code hightlighting 
 */
.token {
	/* See issue #3 */
	padding: .15em 0;
}

.comment {
	color: hsl(44, 30%, 43%);
}

.property,
.tag,
.boolean,
.number,
.popup > .content a {
	color: hsl(187, 61%, 37%);
}

.selector,
.attr-name,
.string,
.popup > .content a:hover {
	color: #694D9F;
}

.keyword,
.atrule,
.attr-value,
.popup > .content a:active {
	color: hsl(35, 94%, 40%);
}

.operator {
	color: #a67f59;
	background: hsla(0,0%,100%,.5);
}

.important {
	color: #E54E27;
	font-weight: bold;
}

.color,
.abslength,
.easing,
.time,
.angle,
.fontfamily,
.gradient,
.url,
.entity {
	text-shadow: 0 1px white, 0 0 .2em hsla(24, 100%, 50%, .5);
	cursor: help;
}

.token[data-active] {
	text-shadow: 0 1px white, 0 0 .2em hsla(24, 100%, 50%, .8);
}

.punctuation {
	color: #999;
}


/**
 * Cute little value previewers
 */
.previewer {
	display: none;
	position: absolute;
	left: 120%; /* off the page */
	margin-bottom: 10px;
	border-radius: 8px;
	box-shadow: 1px 1px 8px rgba(0,0,0,.7);
}

@keyframes previewer {
	from { transform: scale(.1); }
	
	to { transform: scale(1); }
}

.previewer.active {
	display: block;
	transform-origin: 50% 100%;
	animation: previewer .2s;
	animation-timing-function: cubic-bezier(.5,0,.7,1.8);
}

.previewer.flipped.active {
	transform-origin: 50% 0%;
}

	/* pointer */
	.previewer:before {
		content: '';
		position: absolute;
		bottom: -6px;
		left: 50%;
		width: 12px;
		height: 12px;
		border: inherit;
		border-top-width:0;
		border-left-width:0;
		margin-left: -6px;
		border-radius: 12px 0 0;
		background: white;
		background: linear-gradient(135deg, transparent 48%, white 48%);
		transform: rotate(45deg);
		box-shadow: inherit;
	}
	
	.previewer.flipped:before {
		top: -6px;
		background: linear-gradient(315deg, transparent 48%, white 48%);
		border-radius: 0 0 12px;
	}
	
	.previewer:after,
	#gradient > div {
		content: '';
		position: absolute;
		top: 0; right: 0; bottom: 0; left: 0;
		z-index: 2;
		border: 5px solid white;
		border-radius: inherit;
		box-shadow: 1px 1px 5px rgba(0,0,0,.5) inset;
	}
	
	.previewer > img,
	.previewer > svg {
		display: block;
		z-index: 1;
		position: relative;
	}
	
#color,
#gradient,
#url {
	background: linear-gradient(45deg, #bbb 25%,  transparent 25%, transparent 75%, #bbb 75%, #bbb) 5px 5px, 
		linear-gradient(45deg, #bbb 25%,  #eee 25%,  #eee 75%, #bbb 75%, #bbb) 15px 15px;
	background-size:20px 20px;
}

#color {
	width: 60px;
	height: 60px;
	margin-left: -30px;
}

	#color:after {
		background-color: inherit;
	}

#gradient {
	width: 180px;
	height: 100px;
	margin-left: -100px;
}
	
	#gradient:after {
		content: none;
	}

#abslength {
	max-width: 100%;
	height: 20px;
	border: 1px solid white;
	border-radius: 0;
	transition: .3s;
	transition-property:width, margin-left;
}

	#abslength:before {
		bottom: -7px;
		background: url(/img/noise.png),
					linear-gradient(135deg, hsla(200, 10%, 20%, 0) 47%, hsl(200, 10%, 20%) 48%);
	}
	
	#abslength.flipped:before {
		border: inherit;
		border-right-width: 0;
		border-bottom-width: 0;
		background: url(/img/noise.png),
					linear-gradient(135deg, hsla(200, 10%, 20%, 0.6), hsla(200, 10%, 20%, 0.8) 46%, transparent 46%);
	}

	#abslength[data-size="small"]:before {
		width: 6px;
		height: 6px;
		bottom: -3px;
		margin-left: -3px;
	}

	#abslength.flipped[data-size="small"]:before {
		top: -3px;
	}

	#abslength:after {
		border: 0;
		background: 
			linear-gradient(left, transparent 19px, rgba(255,255,255,.6) 19px) left top repeat-x,
			linear-gradient(left, transparent 4px, rgba(255,255,255,.4) 4px) left top repeat-x,
			url(/img/noise.png), linear-gradient(hsla(200, 10%, 20%, .8), hsl(200, 10%, 20%));
		background: 
			linear-gradient(to right, transparent 19px, rgba(255,255,255,.6) 19px) left top repeat-x,
			linear-gradient(to right, transparent 4px, rgba(255,255,255,.4) 4px) left top repeat-x,
			url(/img/noise.png), linear-gradient(hsla(200, 10%, 20%, .8), hsl(200, 10%, 20%));
		background-size: 20px 10px, 5px 5px, auto, auto;
		box-shadow: none;
	}
	
#time,
#angle {
	width: 74px;
	height: 74px;
	margin-left: -37px;
	background: linear-gradient(right, hsla(24, 20%, 95%, .4), hsl(24, 20%, 95%) 95%);
	border-radius: 37px;
}

	#time:before,
	#angle:before {
		bottom: -4px;
	}
	
	#time:after,
	#angle:after {
		background: url(/img/noise.png);
		z-index: 2;
	}
	
	#angle > svg,
	#time > svg {
		margin: 5px;
		width: 64px;
		height: 64px;
		border-radius: 32px;
		background: inherit;
		transform: rotate(-90deg);
		-webkit-transform: translateZ(0) rotate(-90deg); /* bugfix for WebKit */
	}
	
	#angle[data-negative] > svg {
		transform:  scaleX(-1) rotate(-90deg);
		-webkit-transform:  translateZ(0) scaleX(-1) rotate(-90deg); /* bugfix for WebKit */
	}
	
		#time circle,
		#angle circle {
			stroke: hsl(200, 10%, 20%);
			stroke-opacity: .9;
			fill: transparent;
			stroke-width: 31.8;
		}
	
#fontfamily {
	padding: .5em 0 .3em;
	width: 10em;
	margin-left: -5em;
	color: white;
	font-size: 150%;
	font-style: italic;
	line-height: 1.8;
	text-align: center;
	white-space: pre-line;
}

#fontfamily:first-line {
	display: block;
	font-style: normal;
}
	
#easing {
	width: 100px;
	height: 100px;
	padding: 5px;
	margin-left: -50px;
}
	
	
	#easing:after {
		z-index: 2;
	}
		
		
		#easing circle {
			stroke: white;
			fill: hsl(200, 10%, 20%);
		}
		
		#easing path {
			 fill: none;
			 stroke: white;
			 stroke-width: 4;
			 stroke-linecap: round;
		}
		
		#easing line {
			stroke: white;
			stroke-opacity:.5;
			stroke-width: 2;
			marker: url(#marker);
		}
		
#url {
	padding: 5px;
}

	#url > img {
		max-width: 200px;
		max-height: 200px;
	}
	
	#url > img.error {
		width: 50px;
		height: 50px;
	}
	
#entity {
	min-width: 1.6em;
	margin-left: -.8em;
	font-size: 500%;
	color: white;
	text-align: center;
	text-shadow: .02em .02em .06em black;
}

#gist-user {
	display: none;
}