The <<revision>> macros provide a good deal of expressive power, though some potential uses may not be immediately obvious. Here are a few examples which may provide some inspiration.

An extended form of <<cyclinglink>>

This combination of <<cycle>> and <<set>> changes a variable every time you cycle the passage using the link.

<<cycle attire>>
<<set $shirt="red">>[<img[redshirt.png]] You eagerly slip on a red shirt.
<<becomes>>
<<set $shirt="blue">>[<img[blueshirt.png]] No! Clearly, a blue shirt is required.
<<becomes>>
<<set $shirt="vermillion">>[<img[yellowshirt.png]] Nope, it ''has'' to be vermillion! Or so you think...
<<endcycle>>
<<revise attire "Reconsider shirt">>

A music picker

This uses my HTML5 sound macros to create a link that changes the currently playing music when you click it. (If the music isn't meant to loop, of course substitute <<loopsound>> with <<playsound>>)

<<cycle music>>
<<stopallsound>><<loopsound "piano.ogg">>Piano music
<<becomes>>
<<stopallsound>><<loopsound "chiptune.ogg">>Chiptune music
<<becomes>>
<<stopallsound>><<loopsound "acapella.ogg">>A capella music
<<endcycle>>
<<revise music "Change current music">>

More info / Less info

This functions similar to <<replace>> but also provides a link to hide the inserted text after it's been shown.

<<revision info>>You see here a spotted stripe frog.<<revise info "(More info)">><<gains>>
Poisonous in 3 countries and illegal contraband in 7, this fearsomely shaded amphibian is an aesthetic and biological terror.
<<revert info "(Less info)">>
<<endrevision>>

More examples to come...

You can load jQuery into your Twine game via Google Hosted Libraries using this simple script code:

(function(){
  var s = document.createElement('script');
  s.src = 'http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js';
  s.onload = function f(){ 
    if (jQuery) {
      jQuery.noConflict(); 
    }
  }
  document.body.appendChild(s);
}());

Change whatever you want the function passed to ready() to do.
Notes:
* Since Twine's engine uses '$' for something, jQuery must sadly relinquish that convenient abbreviation.
* Due to a minor bug, Twine's runtime currently doesn't work at all in IE 8 or below, so there's not much reason to use jQuery 1.9 over 2.0
* Using Google Hosted Libraries of course means that people can't play your game without a live internet connection - which, in the extremely rare chance you intend your Twine game to be available offline, should be borne in mind. Nevertheless, it can be more convenient for you, the author, due to not having to provide the jQuery file yourself.
_{Feel free to report any bugs to @webbedspace.}

As you know from reading my macro reference, code parameters passed to <<if>>, <<set>>, <<print>> and <<remember>> have their operators ("and", "or", "$", "not", etc.) converted to Javascript equivalents ("&&", "||", etc.) when they're executed.

But, due to a bug, this conversion is also applied to "operators" that are inside strings passed to these macros. So, <<print "Vast and large">> will print "Vast && large", and <<print "You find $10">> will print "You find state.history[0].variables.10".

Now, I've sent out a pullreq to the Twine GitHub repo that fixes this, but in the meantime, if you're stymied by this bug, you can fix it with this script:

(function(){
var bs = String.fromCharCode(92);
if ("\\".length>1) {
  eval(scripts[i].text.replace(new RegExp(bs+"/"+bs+"/","g"),"").replace(new RegExp(bs+bs+"s","g"),bs));
}
else {
Wikifier.parse = function (b) {
    function alter(from,to) {
        //var g = "(?=(?:[^\"'\\\\]*(?:\\\\.|['\"](?:[^\"'\\\\]*\\\\.)*[^\"'\\\\]*['\"]))*[^'\"]*$)";
        //return b.replace(new RegExp(from+g,"gi"),to);
    }
    b = alter("\\$","state.history[0].variables.");
    b = alter("\\beq\\b", " == ");
    b = alter("\\bneq\\b", " != ");
    b = alter("\\bgt\\b", " > ");
    b = alter("\\beq\\b", " == ");
    b = alter("\\bneq\\b", " != ");
    b = alter("\\bgt\\b", " > ");
    b = alter("\\bgte\\b", " >= ");
    b = alter("\\blt\\b", " < ");
    b = alter("\\blte\\b", " <= ");
    b = alter("\\band\\b", " && ");
    b = alter("\\bor\\b", " || ");
    b = alter("\\bnot\\b", " ! ");
    return b
};
}
}());

Again, note that in some versions this will be loaded after the Start passage has rendered.
_{Feel free to report any bugs to @webbedspace.}

The <<hoverrevise>> macro is an extension of the <<revision>> / <<revise>> macros. It lets you make a span of passage text briefly appear or disappear whenever you mouseover another span of text in the same passage.

Code

Just install the latest version of <<revision>> (1.1.0 or later). It's included already.

CSS

You may want a "dissolve" type of transition to be applied to the text that appears or disappears. For that, give the <<insertion>> or <<removal>> macro a name that, say, contains "hover", and then use this CSS to exclusively target it:

.revision-span-in[class*=hover] {
	opacity: 0;
}
.revision-span[class*=hover] {
	transition: 1s;
	-webkit-transition: 1s;
}
.revision-span-out[class*=hover] {
	position:absolute;
	opacity: 0;
}

If you aren't using any normal <<revise>> macros, you could omit "[class*=hover]" to make every <<revision>> span have this transition.

Usage examples

Use this in conjunction with <<revision>>, <<insertion>> or <<removal>> spans, as you would with <<revise>>. The <<hoverrevise>> macro covers a full span of text, ending with <<endhoverrevise>>

To make the text "Aah! A ghost!" appear when you mouseover a span:

<<insertion hoverghost>>Aah! A ghost!<<endinsertion>>
<<hoverrevise hoverghost>>You'd better [[go to the chapel|chapel]]<<endhoverrevise>>

To make the text "Don't leave me" disappear when you mouseover a span:

<<removal words>>"Don't leave me"<<endremoval>>
<<hoverrevise words>>[[Go to the beach|beach]]<<endhoverrevise>>

To make the text "Cold" change to "Warm" when you mouseover a span:

<<revision hovermetal>>Cold<<becomes>>Warm<<endrevision>>
<<hoverrevise hovermetal>>[img[gold.png]]<<endhoverrevise>>

These are just a few of the possibilities allowed by this macro.

Notes:
This wraps the contained text in a <span> with the class "hoverrevise" as well as "hoverrevise_" suffixed with the identifier you use (for instance, "hoverrevise_boo" for <<hoverrevise boo>>").
_{Feel free to report any bugs to @webbedspace.}

I'm still mucking around with AGK. I got some of the files I need to test it on after a bit of digging, and having to update other files. I'm running out of room again on my computer, but a few deletes and some backups will free space.

About to go home, eat dinner, then code and see if my games compile for Android, and then I'm in business.

The <<revision>> macro is a more powerful variation of the <<replace>> macro. It lets you alter a span of passage text by clicking a link from anywhere in the passage.

Install my <<Replace>> Macro Set to use these macros.

Basic usage
First, use the <<revision>> macro to define two different versions of some text:

You see here <<revision tome>>a closed book.<<becomes>>an open book.<<endrevision>> Each section of text separated by <<becomes>> is a different "version" of the text. The name "tome" in the macro is an identifier. You can use any single word you want as an identifier.

Then, you can create a link using the <<revise>> like so:
<<revise tome "Open the book.">>
This creates a link reading "Open the book" that changes any "tome" revision in the passage into the next version - in this case, changing "a closed book" into "an open book".

(Notice that the word "revise" is the verb form of "revision", reflecting the fact that the hyperlink serves as a verb for the player to perform.)

Running code in revisions
Just like with <<replace>>, any macros inside a revision are run as soon as they are made to appear:

<<revision button>>You see a button.<<becomes>>The button is pushed.<<set $button=true>><<endrevision>>
<<revise button "Push it.">>

The above code will set $button to true when you click the "Push it." link.

Multiple versions
You can have many versions of a span of text:

You see here <<revision books>>a closed book.<<becomes>>a chewed book.<<becomes>>paper scraps.<<endrevision>>
<<revise books "Chew book">>

In this case, the link "Chew book" will change "a closed book" into "a chewed book", then "paper scraps". When it reaches the end, the link vanishes.

Back and forth
The <<revert>> macro functions to reverse the effects of the <<revise>> macro.

<<revision box>>Here is a closed box.<<becomes>>Here is an open box.<<endrevision>>
<<revise box "Open the box.">>
<<revert box "Close the box.">>

The <<revert>> macro's link won't be displayed if it's at the first revision, just as the <<revise>> macro won't be visible if it's at the last revision.

Cycling link text options (New)
The <<revise>> and <<revert>> macros have a number of additional options similar to the <<cyclinglink>> macro. You can supply additional link text strings after the first, and it will change to the next string after you click it.
<<revise wall "Smash wall" "Smash it again" "Keep smashing">>

If the second parameter begins with the "$" sigil, then it will interpret it as a variable to be altered by clicking the link. When the player clicks the link, the variable will be changed to match the text of the link.
<<revise heat $warmth "Set it to warm" "Set it to hot" "Set it to boiling">>

If the last parameter is the word "end", then it will disable the link at the parameter before last, leaving just the text. If the last parameter is the word "out", then it will vanish altogether once it's reached the final string.
<<revise roast "Devour roast" "Munch some more" "You're too full now" end>>
<<revise amphora "Drink wine" out>>

<<hoverrevise>>
Click here to read about <<hoverrevise>>.

<<becomes>> vs. <<gains>>
Just as the <<replace>> macro has a variation, <<insert>>, so too does <<becomes>>.

The vase contains:<<revision vase>>Two roses<<gains>>, an orchid<<gains>>, a pencil<<gains>>, a straw<<endrevision>>.
<<revise vase "Put something in the vase">>.

When you click "Put something in the vase", the text changes from "Two roses" to "Two roses, an orchid", then to "Two roses, an orchid, a pencil" and so forth.

You can mix and match <<gains>> and <<becomes>> at will:

<<revision count>>One<<becomes>>Two<<gains>>and a half<<becomes>>Three!<<endrevision>>

This changes from "One" to "Two", "Two and a half", and finally "Three!".

<<cycle>>
Normally, when a <<revision>> macro reaches the end of its revisions, its links disappear. If you change "revision" to "cycle", then you can keep clicking the link to return to the first revision.

You see here <<cycle pet>>a dog<<becomes>>a cat<<endcycle>>.
<<revise pet "Change pet">>

This will change "a dog" to "a cat" and vice-versa, with the link never expiring.

<<insertion>> and <<removal>>
Two other variations exist, which are roughly analogous to <<timedinsert>> and <<timedremove>>.
You look at the plate. <<insertion grain>>1 grain.<<becomes>>2 grains.<<becomes>>3 grains.<<endinsertion>>
For <<insertion>>, the first version "1 grain" is initially invisible. Clicking a <<revise>> link will make it visible. Then, it functions as normal.
You look at the plate. <<removal seed>>3 seeds.<<becomes>>2 seeds.<<becomes>>1 seed.<<endremoval>>
For <<removal>>, the <<revise>> link will remain when you get to "1 seed". Clicking it a final time will remove the text altogether.

Example program
http://www.glorioustrainwrecks.com/files/TwineMacro-RevisionTest.html

Technical details

1. Each version inside a <<revision>> macro is a <span> classed with "revision-span" as well as the kind of version they are ("becomes", "gains"). When they appear, they are given the class "revision-span-in" and their display is set to "inline". When they disappear, they gain the class "revision-span-out" and, after 1 second, their display is set to "none". All of these are inside a container <span> classed with the name of the macro ("insertion", "removal", "cycle", "revision") and the name of the identifier ("book" or whatever the author set it to be).

Version history:

1. 16-6-2013: Updated regarding Combined Replace Macro Set.
2. 26-4-2013: Added extra options to <<revise>>.
3. 20-4-2013: Added <<hoverrevise>> and support for <<randomise>>.
4. 18-4-2013: Initial

_{Feel free to report any bugs to @webbedspace.}

I got a new Android tablet from my sis so I can finally shut up about not having a real device to program on... kinda. I did have an Entourage Pocket Edge but that was too quirky to program on and no one uses Android 1.6--except me.

I'm too stuck on BASIC and I wish QB64 ran on Android. QuickBasic... wheeee, fun times. Then Visual Basic, ugh, nightmares....I have to dust off my HTML knowledge cos I haven't hard coded any HTML since HTML 3. I know, I'm ancient as hell :P I want to learn HTML5 and Java so I can make some online games... I wish I could just hammer out something in TGF, use Vitalize and be done with it, but I got to learn Flash... don't have to, but it's an option. All those braces scare me. I have nightmares of missing closing braces.

If only I could use KNP/TGF on this android tablet and go nuts. I'd crank out half finished games again, haha!

I was messing around with TGF2 Newgrounds version and was trying to decompile and hack the game I made, but after 2 days of eye bleeding code reading and brute force, I'm like forget it, I just need to write some PC games and sell em so I can go legit and buy the damn thing. I want to make a living making games so why not? I have a copy of DarkBasic. I should do something with it, right? I tried using AGK but damn it, it broke my machine. I couldn't get it compile for Android at all (and AGK is just like DarkBasic in syntax. The programmers swapped pararetheses for brackets, sneaky programmers.)

This macro is similar to <<timedreplace>>, but instead of replacing one block of text with another, it just re-runs a passage section, re-drawing the text and running the contained macros again.

http://www.glorioustrainwrecks.com/files/TwineMacro-TimedLoop-1.1.0.txt

Much like <<timedreplace>>, the transition between each rewrite is handled by CSS. Here's a default "fade-in" transition:

.timedloop.replacement-in {
	opacity: 0;
}
.timedloop {
	transition: 1s;
	-webkit-transition: 1s;
}
.timedloop.replacement-out {
	display:none;
}

You can easily modify this CSS. If you want an "instant" transition, for instance, change "opacity: 0;" to "display:none;"

New: This now takes CSS time values, which are decimal numbers ending in "s" (for seconds) or "ms" (for milliseconds).

Here's a usage example:

<<set $red=1>>
<<timedloop 1s>>You have <<set $red += 1>><<print $red>> seed pods.<<endtimedloop>>

The text will initially read "You have 2 seed pods.", then change to "You have 3 seed pods." after 1 second, then "You have 4 seed pods." after another second, and so forth until you leave the passage. The time value is in half-seconds, like <<timedreplace>>.

Known bug: When you click a link to leave a passage, the loop will still run while the passage is transitioning out. This may cause unexpected behaviour (if, for instance, a <<timedgoto>> is inside the looped code).

Implementation details:
* If inserted text appears and descends below the bottom of the screen, the page should automatically scroll down to make it visible.
* Note: due to the way the browser and Twine interact, any changes made by code inside a <<timedloop>> tag after the first iteration will be forgotten if you use the Back or Forward browser buttons. This means that if you put long-term variable changes that affect future passages inside one, you should disable the Back button.

Version history:
* 11-4-2013: Fixed bug where the timeout wouldn't expire if you clicked a "refresher" link to the same passage.
* 5-4-2013: Initial.

_{Feel free to report any bugs to @webbedspace.}

These are some CSS snippets that alter the Sugarcane format. Insert them directly into a "stylesheet" passage in your Twine games to use them. They probably won't work with Jonah, though.

I don't consider myself a graphic designer or web designer, so these are to be regarded solely as amateur efforts.

Click here for live previews of all these stylesheets!

"HTML Adventures"
Largely based on a website design by A. Hussie. All text is centered. Special features: 1) Use the blockquote syntax to put text inside a dotted box. 2) Hyperlinks in bullet-point lists will be displayed in a large font size.

#passages {
  position:relative;
  width: 75%;
  width: 75vw;
  max-width:950px;
  background-color:#c6c6c6;
  margin:0 auto 0 auto;
  padding:24px 0 24px 0;
  border:0;
  transition: height 2s; -webkit-transition:height 2s;
}
.passage {
  font: bold 1.75em Courier, monospace !important;
  background-color:#eee;
  width: 51.3vw;
  max-width:650px;
  color:black;
  margin:0 auto 0 auto;
  padding:2em 2.5em;
  text-align:center;
}
a.internalLink, a.externalLink, a.internalLink:hover, a.externalLink:hover  {
  color:#00E;
  text-decoration:underline;
}
li a.internalLink, li a.externalLink {
  font-size: x-large;
}
.passage blockquote {
  border: 1px dashed gray;
  padding: 1em;
}
.header {
  height: 7px;
}
body {
  background-color:#5a5a5a;
  margin:0;
  padding:0;
}
#sidebar {
  position:relative;
  text-align:center;
  top:0px;
  left:0px;
  width: 75%;
  width: 75vw;
  max-width: 950px;
  height: 1.5em;
  margin:0 auto 0 auto;
  padding: 0.2em 0;
  overflow:hidden;
  background-color:#000;
}
#storyTitle { color: #fff; }
#storySubtitle { color: deepskyblue; }
#storyAuthor { color: lime; }
#sidebar #snapback { color: yellow; }
#sidebar #restart { color: orange; }
#sidebar #share { color: red; }
#sidebar * {
  font:bold 12px Arial, sans-serif !important;
  background-color:clear !important;
  display:inline !important;
}
#sidebar a.internalLink {
  color: #00e !important;
}
#sidebar a.externalLink {
  color: #f6f !important;
}
#sidebar a:hover, #sidebar #snapback:hover,  #sidebar #restart:hover, #sidebar #share:hover {
  color:#fff !important;
  text-decoration:underline !important;
}
#sidebar a:active, #sidebar #snapback:active,  #sidebar #restart:active, #sidebar #share:active  {
  color:#fff !important;
  background-color:#000 !important;
  display:inline !important;
}
#sidebar li, #sidebar li span {
  margin-left: 1em;
  margin-right: 1em;
}
#sidebar a, #sidebar a:hover {
  border: 0 !important;
  box-shadow: none;
}
.menu {
  z-index:4;
  background-color:#eee;
  color:#00e;
  opacity:1;
  border: solid #000 1px;
  box-shadow: #000 0.1em 0.1em 0;
}
.menu div:hover {
  background-color:deepskyblue;
  color:#fff;
}
#credits, #titleSeparator {
  display:none !important;
}
@media screen and (max-width: 960px) {
  .passage {
    font-size: 1.33em  !important;
  }
  #storySubtitle {
    display:none !important;
  }
}
@media screen and (max-width: 640px) {
  .passage {
    font-size: 1.25em !important;
  }
  #share, #storyAuthor {
    display:none !important;
  }
}

"Sugarcaneagon"
Features: the restart button is in the upper-right corner. The colours and hexagon are animated. (Note: some colours wrong in Safari - will investigate).

/* Hexagon */
head {
    display:block;
    z-index:-10;
    position:fixed;
    top: 50%;
    left: 50%;
    margin-left: -10em;
    margin-top: -10em;
    animation: spin 10s linear infinite, colour 10s linear infinite; -webkit-animation: spin 10s linear infinite,colour 10s linear infinite;
}
head, head::before, head::after {
    width: 20em;
    height: 11.54em;
    background-color:transparent;
    border-left: 1em solid #f38506;
    border-right: 1em solid #f38506; 
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
head::before, head::after {
    content: "";
    position: absolute;
    left: -1em;
    transform:rotate(60deg);-webkit-transform:rotate(60deg);
    animation: colour 10s linear infinite; -webkit-animation: colour 10s linear infinite;
}
head::after {
    transform:rotate(-60deg);-webkit-transform:rotate(-60deg);
}
@keyframes  colour {
  0%, 50%,100% { border-left: 1em solid #f38506; border-right: 1em solid #f38506; }
  25%, 75% { border-left: 1em solid #2ce969; border-right: 1em solid #2ce969;  }
}
@-webkit-keyframes colour {
  0%, 100% { border-left: 1em solid #f38506; border-right: 1em solid #f38506; }
  50% { border-left: 1em solid #2ce969; border-right: 1em solid #2ce969;  }
}
@keyframes spin {
  0% {}
  100% { transform:rotate(60deg); }
  50% { transform:rotate(30deg); }
}
@-webkit-keyframes spin {
  0% {}
  100% { -webkit-transform:rotate(60deg); }
  50% { -webkit-transform:rotate(30deg); }
}
/* Text */
html {
  animation: bgcolour 10s linear infinite; -webkit-animation: bgcolour 10s linear infinite;
}
body {
  margin: 0;
  background:transparent;
}
@keyframes bgcolour {
  25%, 75% { background-color: #000; }
  0%, 100% { background-color: #271400; }
  50% { background-color: #072400; }
}
@-webkit-keyframes bgcolour {
  25%, 75% { background-color: #000; }
  0%, 100% { background-color: #271400; }
  50% { background-color: #072400; }
}
#passages {
  border-left: 0;
  margin: 0;
  padding: 0;
  line-height:100vh;
}
.passage {
  position:absolute;
  top: 0;  bottom: 0;  left: 0;  right: 0;
  width: 75%;
  height: 75%;
  margin:auto;
  font: bolder 5em/1.25em Verdana, Geneva, Tahoma, sans-serif;
  text-shadow: 0.15em 0.15em 0 #000;
  color: #fff;
  letter-spacing: -0.04em;
  text-align:center;
}
a.internalLink:hover, a.externalLink:hover {
  color:#c4ff40 !important;
  text-decoration: none;
}
a.internalLink, a.externalLink {
  color:#8cc740;
}
/* Sidebar */
#sidebar #title, #sidebar li {
  font-size:100% !important;
}
#storyTitle::before, #restart::before {
 content: "";
 position:absolute;
 top:0;
 left:0;
 z-index:-2;
 width:110%;
 height:100%;
 transform: skewX(-30deg);  -webkit-transform: skewX(-30deg);
 animation: bgcolour2 10s linear infinite;  -webkit-animation: bgcolour2 10s linear infinite;
}
li#restart::before {
 left:auto; right:0;
 transform: skewX(30deg);  -webkit-transform: skewX(30deg);
}
#storyTitle, li#restart {
  position:fixed;
  left: 0;
  top: 0;
  font: bolder 4em/1.25em Verdana, Geneva, Tahoma, sans-serif !important;
  letter-spacing: -0.04em;
  padding: 0.05em 0.75em 0.1em 0.75em;
  animation: bgcolour2 10s linear infinite;  -webkit-animation: bgcolour2 10s linear infinite;
  color:#fff;
}
li#restart {
  left: auto;
  right: 0;
}
@keyframes  bgcolour2 {
  0%, 100% { background-color: #f38506; }
  50% { background-color: #2ce969;  }
}
@-webkit-keyframes bgcolour2 {
  0%, 100% { background-color: #f38506; }
  50% { background-color: #2ce969;  }
}
#title :not(#storyTitle){
  display:none;
}
#storymenu, #snapback, #share, #credits {
  display:none;
}
@media screen and (max-width: 960px) {
  body { font-size: 55%; }
}
@media screen and (max-width: 840px) {
  body { font-size: 45%; }
}
@media screen and (max-width: 720px) {
  body { font-size: 40%; }
}

"Squillions"
"It's a Twine game that you can imagine James Bond playing." — Ian Bogost.

head {
  box-shadow: inset 0px 0px 30em #bbb;
  width:100%;
  height:100%;
  display:block;
  position:fixed;
}
head * {
  display:none;
}
body {
  background-color:#fff;
  margin: 0;
  text-align:center;
}
#passages {
  border-left: 0;
  margin: 0;
  padding: 0;
  line-height:100vh;
}
.passage {
  position:absolute;
  top: 0;  bottom: 0;  left: 0;  right: 0;
  width: 75%;
  height: 75%;
  margin:auto;
  font: bolder 6em/1.25em Helvetica, "Helvetica Neue", Arial, sans-serif;
  color: #000;
  letter-spacing: -0.05em;
  text-align:center;
}
#sidebar {
  display:table;
  position:fixed;
  top: 0; left: 0;
  width:100%;
  height:100%;
}
#sidebar #title {
  display:table-cell; 
  vertical-align:middle;
  text-align:center;
}
#sidebar #title #storyTitle {
  font: bolder 12em/1.25em Helvetica, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -0.05em;
  color:rgba(0,0,0,0.15);
}
#title :not(#storyTitle){
  display:none;
}
#storymenu, #snapback, #restart, #share, #credits {
  display:none;
}
a.internalLink:hover, a.externalLink:hover {
  color:#de0000 !important;
  text-decoration: none;
}
a.internalLink:nth-child(3n), a.externalLink:nth-child(3n) {
  color: #666;
}
a.internalLink:nth-child(3n+1), a.externalLink:nth-child(3n+1) {
  color: #777;
}
a.internalLink:nth-child(3n+2), a.externalLink:nth-child(3n+2) {
  color: #888;
}
@media screen and (max-width: 960px) {
  body { font-size: 50%; }
}
@media screen and (max-width: 840px) {
  body { font-size: 40%; }
}
@media screen and (max-width: 720px) {
  body { 
    font-size: 30%;
  }
}

"The Earth's Story Illustrated"
Best used with a dissolve transition.
This stylesheet is capable of displaying a 480-pixels-tall scene image above every passage's text! You can set scene images using Tag CSS. To assign, say, the image "classroom_afternoon.jpg" to the tag "classroom", simply also include CSS much like this:

.passage[data-tags~=classroom] .header {
  background-image: url(classroom_afternoon.jpg);
}

And then tag various passages with "classroom" to use the image.
To have multiple images overlaid on each other, add multiple url() declarations separated by commas, in order from frontmost to rearmost:

.passage[data-tags~=classroom-cry] .header {
  background-image: url(character_funnycry.png), url(classroom_afternoon.jpg);
}

That's how you do it!

#sidebar {
  display:none;
}
body {
  margin: 0;
  padding: 0;
  height:100%;
}
#passages {
  margin:0;
  padding: 0;
  height:100%;
}
#passages * {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
.passage {
  position:relative;
  width: 60%;
  font-size:2em;
  font-family: "Lucida Sans Typewriter", Consolas, Monaco, monospace;
  margin: 2em auto 0 auto;
}
.passage .header {
  width:100%;
  height:480px;
  min-height: 480px;
  border: #fff double 0.5em;
  border-radius: 1em;
  margin: 0 auto 1.5em auto;
  padding: 0;
  background-position: center;
  background-repeat: no-repeat;
}
.passage .content {
  top: 500px;
  width:100%;
  border: #fff double 0.5em;
  border-radius: 1em;
  padding: 1em;
}
a.internalLink, a.externalLink {
  border-bottom: solid #fff 1px;
  color:#eee;
  font-weight:normal;
}
a.internalLink:hover, a.externalLink:hover {
  text-decoration:none;
  border-bottom: none;
  color:#000;
  background-color:#fff;
  font-weight:normal;
  padding-left: 0;
}
a.internalLink:active, a.externalLink:active {
  border-bottom: 0;
}
@media screen and (max-width: 960px) {
  .passage {
    font-size: 1.5em;
  width: 75%;
  }
}
@media screen and (max-width: 640px) {
  .passage {
    font-size: 1.25em;
  width: 95%;
  }
}

"Troubled Dreaming"
A slightly distorted, mold-broken variant of the default Sugarcane interface. Note: text too large for the window will be pushed flush with the top.

body {
  background-image: linear-gradient(20deg, rgba(63,190,255,0.4) 0%,rgba(0,0,0,0) 30%),  
    linear-gradient(115deg, rgba(63,255,165,0.4) 0%,rgba(0,0,0,0) 30%), 
    linear-gradient(200deg, rgba(255,190,64,0.4) 0%,rgba(0,0,0,0) 30%),
    linear-gradient(320deg, rgba(255,64,190,0.4) 0%,rgba(0,0,0,0) 30%);
  background-image: -webkit-linear-gradient(20deg, rgba(63,190,255,0.4) 0%,rgba(0,0,0,0) 30%),  
    -webkit-linear-gradient(115deg, rgba(63,255,165,0.4) 0%,rgba(0,0,0,0) 30%), 
    -webkit-linear-gradient(200deg, rgba(255,190,64,0.4) 0%,rgba(0,0,0,0) 30%),
    -webkit-linear-gradient(320deg, rgba(255,64,190,0.4) 0%,rgba(0,0,0,0) 30%);
  background-attachment:fixed;
  margin: 0;
}
html {
  height:100%;
  width:100%;
}
#passages {
  border-left: 0;
  margin: 0;
  padding: 0;
  line-height:100vh;
  text-align:center;
}
.passage {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin:auto;
  font-size: 2em;
  width: 50%;
  height: 50%;
  transform: rotate(-0.3deg);
  -webkit-transform: rotate(-0.3deg);
}
.passage {
  text-align:center;
}
#sidebar li:nth-child(3n) {
  transform: rotate(3deg);
  -webkit-transform: rotate(3deg);
  margin-right: -1em;
}
#sidebar li:nth-child(3n+1) {
  transform: rotate(2deg);
  -webkit-transform: rotate(2deg);
}
#sidebar li:nth-child(3n+2) {
  transform: rotate(-2deg);
  -webkit-transform: rotate(-2deg);
  margin-right: 1em;
}
#sidebar li, #sidebar li a {
  color: #555;
}
#sidebar #share {
  display:none;
}
@media screen and (max-width: 960px) {
  body { font-size: 55%; }
}
@media screen and (max-width: 840px) {
  body { font-size: 45%; }
}
@media screen and (max-width: 720px) {
  body { 
    font-size: 40%;
  }
  #sidebar, #sidebar:hover {
    width: 100%;
    height: 6em;
    left: 0em;
    font-size:1.8em;
  }
  #sidebar li#title { display:block; }
  #sidebar li { margin-right: 2em; }
  #sidebar #credits { display: none; }
  #passages {
    margin: 10em 0 0 0em;
  }
}

"Guest of a Bluish Orb"
Features: Horizontal sidebar. No Share menu. Moody, but a little prim and proper too.

#storeArea {
  display:block;
  position:fixed;
  background-color: lightblue;
  background-image: -webkit-radial-gradient(center, ellipse cover, #c1e3ff 0%,#329fff 99%);
  background-image: radial-gradient(ellipse at center, #c1e3ff 0%,#329fff 99%);
  border-radius:35rem; border-radius:35vw;
  box-shadow: 0 0 3rem 0.5rem #329fff;
  width: 35rem; width: 35vw;
  height: 35rem; height: 35vw;
  top: 70%; top: 70vh;
  left: 70%; left: 70vw;
  z-index: -8;
}
#sidebar {
  font-family: inherit;
  font-size: 0.9rem;
  width: 100%;
  padding: 2em;
  top: 0;
  left: 0;
  background-color: rgba(22,22,44,0.9);
}
#sidebar #titleSeparator, #sidebar #share {
 display:none;
}
#sidebar li {
  color: inherit;
  text-align:inherit;
  display:inline;
  font-weight:normal;
}
#sidebar #storyTitle {
  position:relative;
  top:-0.1em;
}
#sidebar #snapback, #sidebar #restart, #sidebar a.externalLink, .menu {
  border-radius:0.5em;
  border: solid 1px #333;
  padding: 0.2em 0.8em;
  color:#bbb;
}
#sidebar #snapback, #sidebar #restart {
  margin-left: 1.5em;
}
#sidebar #snapback:hover, #sidebar #restart:hover, .menu {
  border: solid 1px white;
}
.menu {
  padding: 0;
  background-color: rgba(22,22,44,0.9);
}
.menu div {
  padding: 0.2em 0.8em;
}
a.internalLink, a.externalLink {
  border-radius:0.5em;
  border: solid 1px #666;
  padding: 0.05em 0.3em;
  color: #fff;
  font-weight:normal;
  white-space:pre-line;
}
a.internalLink:hover, a.externalLink:hover {
  text-decoration:none;
  border-color:#fff;
  color: #fff;
}
#sidebar #credits {
  display:none;
}
#storeArea * {
  display:none;
}
#passages {
  z-index:-5;
  border-left: 0;
  margin: 16em 0 4em 0;
}
.passage {
  font-size: 1.9em;
}
body {
  font-family: "Century Gothic", CenturyGothic, sans-serif;
  background-image: -webkit-linear-gradient(-45deg, #002 0%,#000 100%);
  background-image: linear-gradient(135deg, #002 0%,#000 100%);
  letter-spacing:2px;
}

"Remembering the 90's"
Best used with an instant passage transition.

body {
  background:LightGrey;
  color: #000;
  font: medium "Times New Roman", Times, serif;
  margin: auto;
  padding: 8px;
}
#passages {
  margin: auto;
  border: 0;
  padding: 0;
}
.header, .footer {
  border: 1px inset;
  margin: 0.5rem auto;
}
.passage {
  font: inherit;
  line-height: inherit;
  margin: auto;
}
.passage ul {
  padding: 0;
  text-align: left;
}
.passage li {
  display:inherit;
  margin: 0;
}
a, #sidebar #snapback, #sidebar #restart, #sidebar #share, .menu div {
  font-weight:inherit !important;
  text-decoration: underline !important;
  color: #00F !important;
}
a.visited {
  color: #7F007F;
}
#sidebar {
  font: inherit !important;
  position:static;
  width: auto;
  list-style: disc outside;
}
#sidebar ul {
  padding: inherit;
}
#sidebar li {
  color: inherit;
  text-align:inherit;
  margin:inherit;
  display:inline;
}
#sidebar #titleSeparator {
  display:none;
}
#sidebar #title, #sidebar #title:hover {
  color:inherit;
}
#sidebar #storyTitle, #sidebar #storyTitle:hover {
  font-size: 2rem;
  margin: .67rem 0;
  font-weight:bolder;
}
#sidebar #storySubtitle {
  font-size: inherit;
  font-weight:bolder;
}
#sidebar #storyAuthor::before {
  content: "by ";
}
#sidebar #storyAuthor {
  font-size:medium;
  display:block;
  font-weight:bolder !important;
}
#sidebar #credits {
  display:block;
  font-size: smaller;
  padding: inherit;
}
#snapbackMenu::before {
  content: "Rewind to:";
  font-weight:bolder;
}
#shareMenu::before {
  content: "Share this story at:";
  font-weight:bolder;
}
.menu::before {
  content: "Rewind to:";
  font-weight:bolder;
}
.menu, .menu div:hover {
  position: static;
  background-color:inherit;
  color:inherit;
  opacity:1;
  border:0;
  font:inherit;
  line-height:inherit;
}
.menu div {
  margin: 0 1.12rem;
  display: list-item;
  list-style:disc outside;
}

"Porthole"
Features: Very roughly inspired by the title screen of "The Sea Will Claim Everything"; Designed for games with brief passage text. No sidebar.

body {
  width: 100%;
  margin-left: 0;
  text-align:center;
}
#passages {
  position:relative;
  display:inline-block;
  font-size: 1.5em;
  background-color:skyblue;
  background-image: -webkit-linear-gradient(top, #87ceeb 0%,#87ceeb 75%,#008eed 75%,#008eed 100%);
  background-image: linear-gradient(to bottom, #87ceeb 0%,#87ceeb 75%,#008eed 75%,#008eed 100%);
  width: 60em;
  height: 60em;
  border-radius: 30em;
  border: darkgoldenrod 1em solid;
  margin-left: 0;
  padding-left: 0;
}
.passage {
  position: absolute;
 text-align:center;
  top: 20em;
  bottom: 0;
  margin: -10em 5em auto 5em;
  display:inline-block;
  width: 40em;
  height: 40em;
  overflow-y: hidden;
  box-shadow: 0 0 2.5em 2.5em;
}
a.internalLink, a.externalLink {
  color: white;
  font-size: 1.2em;
}
a.internalLink:hover, a.externalLink:hover {
  color: white;
  text-decoration: none;
  text-shadow: 0 0 0.5em white;
}
.passage .body {
  color: white;
}
#sidebar {
  display:none;
}
@media screen and (max-width: 960px) {
  body { font-size: 55%; }
}
@media screen and (max-width: 840px) {
  body { font-size: 45%; }
}
@media screen and (max-width: 720px) {
  body { font-size: 40%; }
}

"Glowing Eggs"
As used in 3x3x3.
Features: similar to Sugarcane. Marine colours and faint glows. Hopefully resizes on mobile devices. Removes "Rewind" and "Share".

html {
  height: 100%;
  height: 100vh;
}
body {
  background-image: -webkit-linear-gradient(bottom, hsla(255,100%,20%,0.4) 0%,hsla(219,100%,50%,0) 100%);
  background-image: linear-gradient(to top, hsla(255,100%,20%,0.4) 0%,hsla(219,100%,50%,0) 100%);
  background-repeat: no-repeat;
  background-attachment:fixed;
  height: 90%;
}
.passage {
  color: hsl(240,100%,90%);
  font-weight: lighter;
  font-size: 1.5em;
}
#passages {
  margin: 0 0 0 18rem;
  border-left: 0;
}
#snapback, #share {
	display:none;
}
a.internalLink, a.externaLink {
	color: hsl(300,100%,40%);
	transition: 0.5s;
	-webkit-transition: 0.5s;
}
.passage ul {
	padding-top:1.3em; 
	text-align:center;
}
.passage li {
	display:inline;
	margin-right:6em;
}
a.internalLink:hover, a.externaLink:hover, #sidebar li:hover, #sidebar li a:hover {
	color: hsl(300,100%,70%);
	text-shadow: fuchsia 0 0 1emt;
	text-decoration: none;
}
#sidebar li, #sidebar li a {
	color: hsla(300, 100%, 40%, 0.25);
	transition: 1s;
	-webkit-transition: 1s;
}
#sidebar li a {
	color: hsla(300, 100%, 40%, 0.35);
}
#sidebar, #sidebar:hover {
	background:#005;
	font-size: 1.6em;
      background: -webkit-linear-gradient(top, hsla(255,100%,50%,0.3) 0%,hsla(219,100%,50%,0) 100%);
      background: linear-gradient(to bottom, hsla(255,100%,50%,0.3) 0%,hsla(219,100%,50%,0) 100%);
	left: 0;
	top: 0;
	width: 12.5rem;
	padding: 4rem 2rem 0rem 4rem;
	height: 100%;
}
#storyTitle {
	color: rgba(255,0,255,0.75) !important;
	font-size: 1.4em;
}
#sidebar #title, #sidebar #title:hover {
	color: rgba(255,0,255,0.50);
	transition: 1s;
	-webkit-transition: 1s;
}
#sidebar #title:hover {
	color: rgba(255,128,255,0.50);
	text-shadow: fuchsia 0 0 2em;
}

@media screen and (max-width: 960px) {
  #sidebar, #sidebar:hover {
    width: 10rem;
    padding: 2rem 1rem 0rem 2rem;
  }
  #passages {
    margin: 0 0 0 12rem;
  }
  .passage li {
	display:list-item;
      list-style-type: none;
  }
}
@media screen and (max-width: 640px) {
  #sidebar, #sidebar:hover {
    width: 100%;
    height: 5rem;
    padding: 2rem 1rem 0rem 2rem;
    text-align:center;
    background: #000;
  }
  #sidebar #storySubtitle { display: inline-block; padding-left: 2em;}
  #sidebar li { display:inline; margin-right: 2em; }
  #credits, #snapback, #share { display: none !important; }
  #passages {
    margin: 12rem 0 0 0em;
  }
}

"Grave-scale"
As used in GRAVEDIG.TWS
Features: Similar to Sugarcane. Good for stories involving moors, mires, mist and mortality. Removes "Share". Should resize to fit mobile screens.

#share, #credits { display: none !important; }
.passage {
  color:rgba(0,0,0,0) !important;
  text-shadow: #bbb 0 0 0.1em, #bbb 0 0 1em;
}
#passages {
  border-left: 0;
  border-left: 0;
  margin-left: 18em;
  margin-top: 6em;
}
html {
  height:100%;
  height:100vh;
}
body {
  font-size: 0.9em;
  background-repeat: no-repeat;
  background-image: -webkit-linear-gradient(top, #000000 0%,#353535 57%,#1e1e1e 64%,#000000 100%);
  background-image: linear-gradient(to bottom, #000000 0%,#353535 57%,#1e1e1e 64%,#000000 100%);
}
a.internalLink, a.externalLink {
  color:rgba(0,0,0,0);
  text-shadow: silver 0 0 0.1em, silver 0 0 1em;
}
a.internalLink:hover, a.externalLink:hover {
  color:rgba(255,255,255,0.5) !important;
  text-shadow: silver 0 0 0.1em, silver 0 0 1em;
  text-decoration:none;
}
#sidebar {
  top:0;
  left:0;
  padding-top: 4.2em;
  padding-left: 4.2em;
  width: 16em;
  height: 100%;
  background-image: -webkit-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
  background-image: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
}
#sidebar, #sidebar #title, #sidebar a {
  color: rgba(0,0,0,0);
  text-shadow: #555 0 0 0.1em, #555 0 0 1em !important;
}
#sidebar #title:hover, #sidebar a.hover, #sidebar li:hover {
  color:rgba(255,255,255,0.25) !important;
}
#sidebar li {
  text-align: left;
}
@media screen and (max-width: 960px) {
  body {
      font-size: 0.8em;
  }
  #sidebar {
    padding-top: 3em;
    padding-left: 3em;
    width: 9em;
  }
  #passages {
    margin-left: 15em;
  }
}
@media screen and (max-width: 640px) {
  body {
      font-size: 0.8em;
  }
  #sidebar, #sidebar:hover {
    width: 100%;
    height: 6em;
    padding: 2em 1em 2em 2em;
    text-align:center;
    background-image: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
    background-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
  }
  #sidebar li { display:inline; margin-right: 2em; }
  #passages {
    margin: 14em 0 0 0em;
  }
}

"The Earth's Story 1.0"
Features: No sidebar. Similar to ZX Spectwine, below. Reminiscent of early 90s Nintendo RPGs - hence its gray sensibilities. Use Tag CSS and tag your passages "mint", "strawberry", "banana" or "peanut" to get different coloured borders for specific passages!

body {
  margin: 0;
  background-color:#000;
}
#passages {
  margin: 0;
  padding: 0;
  border: 0;
}
.passage {
  width: 40%;
  min-width: 26em;
  height: 33%;
  min-height: 33%;
  font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.1em;
  padding: 1.5em;
  padding-left: 2em;
  font-size:1.8em;
  background-color:#000;
  color:#eee;
  margin: 10%;
  border: silver ridge 0.8em;
  border-radius: 1em;
}
.passage[data-tags~=mint] {
  border-color: MediumAquaMarine;
}
.passage[data-tags~=strawberry] {
  border-color: HotPink;
}
.passage[data-tags~=banana] {
  border-color: Gold;
}
.passage[data-tags~=peanut] {
  border-color: Peru;
}
.content::before {
  content: '•';
  position: relative;
  left: -0.6em;
  margin-right: -0.4em;
}
a.internalLink, a.externalLink {
  border-bottom: solid #fff 1px;
  color:#eee;
  font-weight:normal;
}
a.internalLink:hover, a.externalLink:hover {
  text-decoration:none;
  border-bottom: solid #fff 2px;
  color:#fff;
  font-weight:normal;
  padding-left: 0;
}
a.internalLink:active, a.externalLink:active {
  border-bottom: 0;
}
#sidebar {
  display:none;
}

"Hypercane 1.0"
As used in Myriad
Features: Sidebar is converted to a top bar (minus Share); vaguely resembles System 6, but nowhere near enough for true aficionados.

body {
  margin: 10% 0 10% 0;
}
#passages{
  margin: 0;
  padding: 0;
  border: 0;
}
.passage, #sidebar * {
  font-family: Geneva, "Helvetica Neue", Helvetica, sans-serif;
  color:#000;
  text-align:left;
}
.passage {
  border-radius: 0.2em;
  width: 60%;
  margin: auto;
  padding: 2em;
  font-size:1.5rem;
  background-color:#fff;
  border: solid #000 0.05em;
  box-shadow: #000 0.5em 0.5em 0;
}
a.internalLink, a.externalLink {
  border: solid #000 0.05em;
  white-space: nowrap;
  padding: 0.1em 0.2em 0.1em 0.2em;
  border-radius: 0.5em;
  color:#000;
}
a.internalLink:hover, a.externalLink:hover {
  text-decoration: none;
  box-shadow: #000 0 0 0 0.1em;
  color:#000;
}
a.internalLink:active, a.externalLink:active {
  color: #fff;
  background-color:#000;
}
body {
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAEAQMAAACTPww9AAAABGdBTUEAALGPC/xhBQAAAAZQTFRFAAAA////pdmf3QAAAA5JREFUeF5jOACEBgwGAAnIAeGomjuiAAAAAElFTkSuQmCC);
}
#sidebar {
  position:absolute;
  top:0px;
  left:0px;
  width:99.2%;
  overflow-x:hidden;
  background-color:#fff;
  border-bottom: solid #000 1px;
}
#sidebar * {
  color: #000 !important;
  font-size:1.5rem;
  background-color:clear !important;
  display:inline !important;
}
#sidebar a:hover, #sidebar #snapback:hover,  #sidebar #restart:hover {
  text-decoration:underline !important;
}
#sidebar a:active, #sidebar #snapback:active,  #sidebar #restart:active  {
  color:#fff !important;
  font-size:1.5rem;
  background-color:#000 !important;
  display:inline !important;
}
#sidebar li, #sidebar li span {
  margin-left: 1rem;
  margin-right: 1rem;
}
#sidebar a, #sidebar a:hover {
  border: 0 !important;
  box-shadow: none;
}
.menu {
  background-color:#fff;
  color:#000;
  opacity:1;
  font-size: 1.5rem;
  border: solid #000 1px;
  box-shadow: #000 0.1em 0.1em 0;
}
.menu div:hover {
  background-color:#000;
  color:#fff;
}
#credits, #share, #titleSeparator {
  display:none !important;
}

"Closed In"
As used in Solitary
Features: No sidebar; Enormous screen-filling font size designed for very terse stories; Font should scale down on mobile devices.

body {
  margin: 2%;
}
#passages{
  margin: 0;
  padding: 0;
  border: 0;
  width:96%;
  margin: auto;
}
.passage {
  font-size:6em; 
  color: #888;
  text-shadow: #888 0 0 0.05em;
}
@media screen and (max-width: 960px) {
  .passage {
    font-size: 4em;
  }
}
@media screen and (max-width: 640px) {
  .passage {
    font-size: 3em;
  }
}
a.internalLink, a.externalLink {
  color: #eee;
  text-shadow: #eee 0 0 0.07em;
}
a.internalLink:hover, a.externalLink:hover {
  color: #fff;
  text-decoration: none;
  text-shadow: #fff 0 0 0.09em;
}
#sidebar {
	display:none;
}

"Orange Highlight"
As used in To my Grandma
Features: No sidebar; External links are a different colour to internal links.

body {
  margin: 5% 0 0 0;
  background-color:#000;
}
#passages{
  margin: 0;
  padding: 0;
  border: 0;
}
.passage {
  font-family: "Times New Roman",serif;
  text-align:left;
  color:#000;
  width: 40em;
  padding: 2em;
  font-size:3em;
  background-color:#fff;
  background: -webkit-linear-gradient(left, #aaa 0%,#fff 19%);
  background: linear-gradient(to right, #aaa 0%,#fff 19%);
}
a.internalLink {
  color:#620;
  background-color:hsla(48, 100%, 50%, 0.5);
}
a.externalLink {
  color:#602;
  background-color:hsla(320, 100%, 50%, 0.5);
}
a.internalLink:hover {
  color:#410;
  background-color:hsla(40, 100%, 50%, 0.85);
  text-decoration: none;
}
a.externalLink:hover {
  color:#401;
  background-color:hsla(320, 100%, 50%, 0.85);
  text-decoration: none;
}
a.internalLink:active {
  color:#140;
  background-color:hsla(80, 100%, 50%, 0.85);
  text-decoration: none;
}
a.externalLink:active {
  color:#104;
  background-color:hsla(280, 100%, 50%, 0.85);
  text-decoration: none;
}
#sidebar {
  display:none;
}

"ZX Spectwine"
Features: No sidebar; is a little bit garish.

body {
  margin: 0;
  background-color:#000;
}
#passages {
  margin: 0;
  padding: 0;
  border: 0;
}
.passage {
  width: 40%;
  min-width: 26em;
  font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.1em;
  font-size:1.8em;
  margin: 10% 0 10% 10%;
  box-shadow: orangered 0 0 0 0.4em;
  border: gold solid 0.4em;
  padding:0.4em;
  background-color:lawngreen;
  border-radius: 1em;
}
.passage .content, .passage .body {
  margin: 0;
  padding: 1.5em;
  background-color:#000;
  box-shadow: lawngreen 0 0 0 0.4em;
  border: cornflowerblue solid 0.4em;
  border-radius:0.2em;
  text-align:left;
  font-family: sans-serif;
  font-weight: lighter;
  color:#fff;
}

a.internalLink, a.externalLink {
  background-color:#506070;
  box-shadow: #304050 0.1em 0.1em 0 0.1em;
  position:relative;
  left: -0.1em;
  top: -0.1em;
  padding: 0.2em 0.3em 0.2em 0.3em;
  font-weight: lighter;
  color:#fff;
}
a.internalLink:hover, a.externalLink:hover {
  color:#fff;
  background-color:slategray;
  text-decoration:none;
}
a.internalLink:active, a.externalLink:active {
  box-shadow: none;
  background-color:#304050;
  position:static;
  margin: 0;
}
#sidebar {
  display:none;
}

"Warm Cabin"
Features: no sidebar; denotes a vague memory of varnished wood as approximated by the MS PowerPoint designers.

body {
  margin: 0;
  padding: 0;
}
#passages {
  margin: 0 5% 0 5%;
  padding: 2.5% 0 5% 0;
  border-left: saddlebrown solid 1.5em;
  height:auto;
  background: #3d1d08;
  background: -webkit-radial-gradient(center, ellipse cover,  #3d1d08 0%,#000000 80%);
  background: radial-gradient(ellipse at center,  #3d1d08 0%,#000000 80%);
}
.header {
  width: 25%;
  border-top: saddlebrown solid 0.1em;
  margin: auto;
  padding: 0 0 2.5% 0;
}
.passage {
  margin: 2em;
  font-family: "Georgia", serif;
  font-size:2.2em; 
  color: peru;
  text-shadow: sienna 0.05em 0.05em 0.05em;
}
a.internalLink, a.externalLink {
  color: burlywood;
  text-shadow: peru 0.05em 0.05em 0.05em;
}
a.internalLink:hover, a.externalLink:hover {
  color: cornsilk;
  text-decoration: none;
  text-shadow: peru 0.05em 0.05em 0.05em;
}
#sidebar {
	display:none;
}

"One Hundred Candles"
As used in One Hundred Candles
Features: hopefully able to resize on mobile screens; very similar to Sugarcane, but with faint ghostly touches. Leaves the sidebar but removes Share.

html {
  height: 100%;
  height:100vh;
}
body {
  margin: 0;
  padding: 0;
  background-color: #000;
  height: 90%;
  background: -webkit-radial-gradient(center 99%, ellipse cover,  #666 0%,#111 40%) #000;
  background: radial-gradient(ellipse at center 99%,  #666 0%, #111 40%) #000;
}
#passages {
  margin: 0 0 0 24em;
  border-left: 0;
}
.passage {
  margin: 2em;
  font-size:1.7em; 
  color: white;
  text-shadow: gray 0em -0.4em 0.8em;
}
a.internalLink, a.externalLink {
  color: #58f;
  text-decoration:none;
  text-shadow: #666 0em -0.8em 6em, #58f 0em -0.3em 2em;
}
a.internalLink:hover, a.externalLink:hover {
  color: #9Cf;
  text-decoration: none;
  text-shadow: #666 0em -0.8em 3em, #58f 0em -0.3em 1em;
}
#sidebar, #sidebar:hover {
  background:#000;
  left: 0;
  top: 0;
  width: 16.5em;
  padding: 4em 2em 0em 4em;
  height: 100%;
  text-shadow: #444 -1.5em -0.75em 0.6em;
}
#sidebar #title,#sidebar #title:hover {
  color:white;
  font-size: 2em;
}
#sidebar #titleSeparator, #sidebar #share {
  display:none;
}
@media screen and (max-width: 960px) {
  #sidebar, #sidebar:hover {
    width: 10em;
    padding: 2em 1em 0em 2em;
  }
  #passages {
    margin: 0 0 0 12em;
  }
}
@media screen and (max-width: 640px) {
  body {
    background: -webkit-linear-gradient(90deg,  #666 0%,#111 40%) #000;
    background: linear-gradient(90deg  #666 0%, #111 40%) #000;
  }
  #sidebar, #sidebar:hover {
    width: 100%;
    height: 6em;
    padding: 2em 1em 0em 2em;
    text-align:center;
  }
  #sidebar li { display:inline; margin-right: 2em; }
  #sidebar #credits { display: none; }
  #passages {
    margin: 10em 0 0 0em;
  }
}

"Dining Table"
Features: no sidebar; highly recommended that you use a dissolve transition.

body {
  margin: 10% 0 10% 0;
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAM0AAAABCAIAAADy9L3xAAAArElEQVR4AaWPMQrCQBBFZ2bZRFBJIaYIaBtJY+MVxAN7AEttTGFnIwrpREOEiLvrzphcYf3lh/94H6XeVseyOZQTpZlZEIJjCD4DXWzWkCYOmCCc1XlosvC61tU5QqfAA3CwGAK3OIyyFSbZ16MQBaNEJCJSzeO+343s+5+PnQMjteyneREvls4joQSLdUMCh2BulxPYJ6Hri9AgimGtx/N0lluJGVQoqd+xyA/TqkKJWL28CQAAAABJRU5ErkJggg%3D%3D);
}
#passages {
  padding: 0;
  border: 0;
  text-align:center;
  margin-left:0;
}
.passage {
  display: inline-block;
  width: 60%;
  border-radius: 0.5em;
  box-shadow: rgba(0,0,0,0.1) 0.5em 0.5em 0.4em;
  background-color: #fff;
  background-color: hsla(0,0%,100%,0.8);
  min-height:40%;
  padding: 3em;
  font-size:1.6em;
  color: rgb(80,10,0);
}
#sidebar {
  display:none;
}
a.internalLink, a.externalLink {
  color: rgb(220,130,80);
}
a.internalLink:hover, a.externalLink:hover {
  color: rgb(240,190,80);
  text-decoration:none;
}

"Capricorn"
Features: another "dialog box" styled design. No sidebar. Border gently pulses using CSS animation. Use Tag CSS and tag your passages "tier1", "tier2", "tier3", "tier4", "tier5", "tier6" or "tier7" to get different coloured borders for specific passages!

@keyframes borderkeyframe
{
0%  {box-shadow: 0 0 1em 1em }
50%  {box-shadow: 0 0 0.5em 0.5em }
100%  {box-shadow: 0 0 1em 1em }
}
@-webkit-keyframes borderkeyframe
{
0%  {box-shadow: 0 0 2em 1em }
50%  {box-shadow: 0 0 2em 0.5em }
100%  {box-shadow: 0 0 2em 1em }
}
.passage[data-tags~=tier6] {
  text-shadow: 0 0 1em hsl(0,100%,60%);
  color: hsl(0,100%,50%);
  background-color: hsl(0,100%,5%);
}
.passage[data-tags~=tier7] {
  text-shadow: 0 0 1em hsl(45,100%,60%);
  color: hsl(45,100%,50%);
  background-color: hsl(45,100%,5%);
}
.passage:not([data-tags*=tier]) {
  text-shadow: 0 0 1em hsl(90,100%,70%);
  color: hsl(90,100%,50%);
  background-color: hsl(90,100%,5%);
}
.passage[data-tags~=tier1]  {
  text-shadow: 0 0 1em hsl(135,100%,60%);
  color: hsl(135,100%,50%);
  background-color: hsl(135,100%,5%);
}
.passage[data-tags~=tier2]  {
  text-shadow: 0 0 1em hsl(180,100%,60%);
  color:  hsl(180,100%,50%);
  background-color: hsl(180,100%,5%);
}
.passage[data-tags~=tier3]  {
  text-shadow: 0 0 1em hsl(225,100%,60%);
  color: hsl(225,100%,50%);
  background-color: hsl(225,100%,5%);
}
.passage[data-tags~=tier4]  {
  text-shadow: 0 0 1em hsl(270,100%,60%);
  color: hsl(270,100%,50%);
  background-color: hsl(270,100%,5%);
}
.passage[data-tags~=tier5]   {
  text-shadow: 0 0 1em hsl(315,100%,60%);
  color: hsl(315,100%,50%);
  background-color: hsl(315,100%,5%);
}
body {
  width: 100%;
  margin-left: 0;
}
#passages {
  font-size: 1.5em;
  text-align:center;
  border-left: 0;
  margin-left: 0;
  padding-left: 0;
}
.passage {
  display: inline-block;
  width: 50%;
  padding: 4em;
  margin: 5em 0 5em 0;
  border-radius: 8em;
  border-color: white;
  border-width: 2px;
  box-shadow: 0 0 2.5em 2.5em;
  animation: borderkeyframe 6s infinite;
  -webkit-animation: borderkeyframe 6s infinite;
}
a.internalLink, a.externalLink {
  color: white;
  font-size: 1.2em;
  text-shadow: 0 0 1em silver;
}
a.internalLink:hover, a.externalLink:hover {
  color: white;
  text-decoration: none;
  text-shadow: 0 0 1.5em silver, 0 0 0.75em white;
}
.passage .content, .passage .body {
  color: white;
  text-shadow: inherit;
}
.passage .title {
  margin-top: 0.2em;
  font-style: italic;
  font-size: 2em;
  color: white;
  text-align: center;
}
.passage img {
 display: block;
 margin-left:auto;
 margin-right:auto;
}
#sidebar {
 display:none;
}

_{Feel free to report any bugs to @webbedspace.},

While CSS passage transitions give you a good degree of creativity with regards to transition animations, a good many potential effects require Javascript. One such effect is the oft vaunted "typewriter" transition:

(function(){var render2=Passage.prototype.render;Passage.prototype.render=function(){var b=render2.call(this);
if(this.tags){var r=new RegExp("t8n.typewriter.([0-9]+)(?:[^0-9]|$)","g");var t=r.exec(this.tags.toString());
if(t){typeout(b,t[1]+0);}}return b;};var typeout=function(c,t){var Furl=function(current){this.n=current;
this.out=false;this.data=current.nodeValue;current.nodeValue="";this.kids=[];var cn=current.childNodes;
if(current.style && current.style.display=="none"){return;}while(cn.length>0){var f=new Furl(cn[0]);
current.removeChild(cn[0]);f.out=true;this.kids.push(f);}};var nodes=new Furl(c);
var unfurl=function(furled,d){var n=furled.n;if(furled.out){d.appendChild(n);furled.out=false;
}if(furled.data){n.nodeValue+=furled.data[0];furled.data=furled.data.slice(1);return true;
}for(var j=0;j<furled.kids.length;j++){var ret=unfurl(furled.kids[j],n);if(ret){return true;
}}return false;};var title=state.history[0].passage.title;var intr=setInterval(function(){if(state.history[0].passage.title==title&&unfurl(nodes,null)){return;
}clearInterval(intr);},t);};}());

To use it for a passage, tag the passage with "t8n-typewriter-" followed by the number of milliseconds between each character appearing - for instance "t8n-typewriter-10" or "t8n-typewriter-2". If you have a lot of text, a low number is highly recommended.

("t8n" is a numeronym for the word "transition". For this and any future transitions of mine, "t8n" will denote a tag that invokes that transition.)

This can be combined with CSS transitions! See this example to see a combination of the two.

Caveats:

1. Images amid the text will currently appear instantly, as if they were single characters. This may appear a little jarring if they are below text.
2. This transition currently does not apply to the <<replace>> macro - replaced text will simply appear normally.
3. This transition currently may interfere with the timing of the <<timedreplace>> macro. If the <<timedreplace>> macro triggers before it has been fully typed out, then it will not function correctly. Simply make sure that the <<timedreplace>> is timed to trigger only after it appears.

These caveats may be improved in future versions. Other possible improvements may include a macro designed to alter typing speed within the text itself, so that the full range of pauses, staccato, blurt-outs, etc. as seen in various RPGs, can be replicated in Twine.

Version history:

1. 22-3-13: Initial.

_{Feel free to report any bugs to @webbedspace.}