Actions

Work Header

Rating:
Archive Warning:
Fandoms:
Character:
Additional Tags:
Language:
English
Series:
Part 26 of Izzy's HTML & CSS Experiments , Part 3 of HTML/CSS AO3 Skins & Tutorials
Collections:
Fanfiction Reference Works, Ao3 Skins
Stats:
Published:
2026-05-04
Words:
8,671
Chapters:
1/1
Comments:
9
Kudos:
29
Bookmarks:
11
Hits:
668

Diluc-Inspired Site Skin & Workskin

Summary:

The Darknight Hero keeps his own counsel. Your AO3 interface can keep his aesthetic.

A free site skin and workskin inspired by Diluc Ragnvindr, the brooding wine tycoon and vigilante of Mondstadt (Genshin Impact). Reskins your entire AO3 in void black, scorched wine-red, and burnished gold, with ember glow and fire-touched details throughout. Includes full installation instructions for both the site skin (which reskins your entire AO3 interface) and the workskin (which adds drop caps, glowing scene breaks, ashfall dividers, spoiler boxes, and ember-lit styling to your own fic text). No prior CSS knowledge needed.

Notes:

This work uses custom HTML and CSS formatting. For the intended experience, please enable Creator's Style (or ensure workskins are turned on in your AO3 preferences).

(See the end of the work for more notes.)

Work Text:

A free AO3 site skin inspired by Diluc Ragnvindr, the Darknight Hero and wine tycoon of Mondstadt (Genshin Impact). This skin dresses your entire AO3 interface in deep ember-black, scorched wine-red, and burnished gold — as if the Archive itself has been touched by pyro and grief. The header burns, the blurbs smolder, and the tags glow like coals.

The skin reskins your header, navigation, sidebar dashboard, work listings, tags, pagination, comments, forms, and footer. A workskin is also included to style the body text of works you write, so your fic experience can match the aesthetic.

Free to use and adapt. Credit is appreciated but not required. If you make changes and want to share your version, go ahead.

Preview

The workskin — the styled text area you see when reading a fic — looks like this:

It begins with a boy. It always begins with a boy.

A boy too quiet, too polished, too well-bred for the world he was born to endure.

Not made of wine, like his name. Not made of fire, like his Vision. But made of expectation.

Of ritual. Of heirloom and hush. Of things unsaid.

He is twelve years old the first time he understands death isn't poetic.

By sixteen, he can already recognize every shade of regret in a man's eyes.

They call it coming-of-age. He calls it forgetting how to sleep.

The drop cap, ember-glow header, and fire-ornament scene breaks all appear automatically from the CSS — no special markup required in your fic text. Hover states on blurbs, tags, and paragraphs add a subtle ember pulse throughout.

Screenshots of the site skin in action. Mobile users: zoom in!

Colour Palette

For reference if you want to customise the skin:

Void black #070505 — page and main content background

Deep ember #180606 — header background base

Scorched red #a33a25 — borders, accents, border-left on blurbs

Living fire #ff8a4c — glows, hover states, drop caps, HR ornaments

Burnished gold #e3bd75 — links, tags, legend text

Warm gold #f0c17d — headings, blurb titles

Ash parchment #e2d6c6 — body text

Pale ash #b4a28f — timestamps, secondary metadata

Installing the Site Skin

What is a site skin? Site skins only change how you see AO3. Other users will not see this skin. It affects the entire interface — header, listings, tags, comments, forms, everything. It does not change how your works appear to readers.

  1. Go to your Dashboard → Skins. Click your username in the top-right corner, then navigate to Archive → My Dashboard → Skins directly.
  2. Click "Create Site Skin." Give it a name. For example, Local Genshin Batman. Make sure the skin type is set to Site Skin.
  3. Expand the CSS block below, select all the text inside it, and copy it. Paste it into the large CSS field on the creation page. Do not add anything before or after the CSS.
  4. Click "Submit." AO3 will validate and save the skin. If you see an error, check that you copied the full block without any extra characters at the start.
  5. Activate the skin. Go back to My Dashboard → Skins, find your new skin in the list, and click Use. The page will reload wreathed in fire.
  6. To uninstall at any time, go back to Skins and click Stop Using. Everything reverts to AO3 default immediately.
Site Skin CSS — click to expand/view

Copy everything in the box below. Please scroll.

body {
  background: radial-gradient(circle at 8% 12%, rgba(255, 174, 88, 0.36) 0, rgba(255, 174, 88, 0.13) 0.16em, transparent 0.42em),
    radial-gradient(circle at 22% 38%, rgba(255, 116, 72, 0.32) 0, rgba(255, 116, 72, 0.11) 0.15em, transparent 0.40em),
    radial-gradient(circle at 41% 18%, rgba(255, 210, 140, 0.30) 0, rgba(255, 210, 140, 0.10) 0.14em, transparent 0.38em),
    radial-gradient(circle at 63% 54%, rgba(255, 116, 72, 0.31) 0, rgba(255, 116, 72, 0.10) 0.16em, transparent 0.40em),
    radial-gradient(circle at 78% 28%, rgba(255, 174, 88, 0.34) 0, rgba(255, 174, 88, 0.11) 0.18em, transparent 0.42em),
    radial-gradient(circle at 91% 72%, rgba(255, 210, 140, 0.28) 0, rgba(255, 210, 140, 0.09) 0.14em, transparent 0.36em),
    radial-gradient(circle at 14% 82%, rgba(255, 116, 72, 0.24) 0, rgba(255, 116, 72, 0.08) 0.12em, transparent 0.34em),
    radial-gradient(circle at 49% 76%, rgba(255, 174, 88, 0.22) 0, rgba(255, 174, 88, 0.07) 0.12em, transparent 0.32em),
    radial-gradient(circle at 50% 0%, rgba(255, 140, 66, 0.42), transparent 23em),
    radial-gradient(circle at 12% 28%, rgba(170, 35, 22, 0.42), transparent 27em),
    radial-gradient(circle at 88% 62%, rgba(255, 190, 95, 0.24), transparent 26em),
    radial-gradient(circle at 50% 100%, rgba(42, 18, 24, 0.95), transparent 30em),
    linear-gradient(180deg, #070505 0%, #180606 28%, #0d0808 64%, #050405 100%);
  background-size: 22em 22em,
    26em 26em,
    30em 30em,
    24em 24em,
    28em 28em,
    32em 32em,
    20em 20em,
    34em 34em,
    auto,
    auto,
    auto,
    auto,
    auto;
  color: #e8d9c5;
  font-family: Georgia, "Times New Roman", serif;
}

#outer {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 18% 18%, rgba(255, 116, 72, 0.16) 0, rgba(255, 116, 72, 0.06) 0.18em, transparent 0.44em),
    radial-gradient(circle at 74% 42%, rgba(255, 198, 112, 0.14) 0, rgba(255, 198, 112, 0.05) 0.16em, transparent 0.40em),
    radial-gradient(circle at 36% 74%, rgba(255, 116, 72, 0.13) 0, rgba(255, 116, 72, 0.05) 0.14em, transparent 0.38em),
    linear-gradient(to bottom, rgba(34, 8, 8, 0.88), rgba(12, 6, 6, 0.96) 22em, rgba(7, 5, 5, 0.98) 100%);
  background-size: 24em 24em,
    30em 30em,
    28em 28em,
    auto;
}

#inner {
  position: relative;
  background: radial-gradient(circle at 50% 0%, rgba(255, 116, 72, 0.14), transparent 26em),
    linear-gradient(to bottom, rgba(12, 6, 6, 0.36), rgba(7, 5, 5, 0.84));
}

#main {
  position: relative;
  background: radial-gradient(circle at top left, rgba(255, 116, 72, 0.15), transparent 22em),
    radial-gradient(circle at bottom right, rgba(255, 190, 95, 0.12), transparent 18em),
    linear-gradient(180deg, rgba(20, 9, 9, 0.97), rgba(9, 6, 6, 0.98));
  color: #e2d6c6;
  border: 1px solid rgba(180, 58, 34, 0.48);
  border-radius: 20px;
  box-shadow: 0 0 34px rgba(0, 0, 0, 0.86),
    0 0 48px rgba(180, 36, 20, 0.38),
    0 0 72px rgba(255, 116, 72, 0.10),
    inset 0 0 60px rgba(255, 116, 72, 0.10),
    inset 0 0 120px rgba(70, 0, 0, 0.28);
  padding: 1.4em;
}

#main:before {
  content: none;
}

#main:after {
  content: "and still, he burns.";
  display: block;
  text-align: center;
  color: rgba(255, 128, 70, 0.88);
  font-size: 0.85em;
  letter-spacing: 0.2em;
  text-transform: lowercase;
  padding: 1.4em 0 0 0;
  margin: 2em 0 0 0;
  border-top: 1px solid rgba(180, 58, 34, 0.42);
  text-shadow: 0 0 10px rgba(255, 116, 72, 0.78),
    0 0 24px rgba(180, 35, 20, 0.55),
    0 0 36px rgba(255, 190, 95, 0.22);
}

#header {
  background: radial-gradient(circle at 50% 0%, rgba(255, 140, 66, 0.52), transparent 18em),
    radial-gradient(circle at 16% 32%, rgba(160, 35, 25, 0.42), transparent 20em),
    radial-gradient(circle at 86% 20%, rgba(255, 198, 112, 0.24), transparent 18em),
    linear-gradient(180deg, #070505 0%, #1a0707 48%, #3a0b0b 78%, #0a0505 100%);
  border-bottom: 4px solid #a33a25;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.72),
    0 0 34px rgba(255, 100, 45, 0.32),
    inset 0 -45px 60px rgba(0, 0, 0, 0.55);
}

#header .heading {
  height: 245px;
  padding: 0;
}

#header h1 {
  padding-top: 3.2em;
}

#header .heading a {
  color: #f8e2c2;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.55em;
  font-variant: small-caps;
  letter-spacing: 0.14em;
  text-decoration: none;
  text-shadow: 2px 2px 0 #3b0808,
    0 0 12px rgba(255, 116, 72, 0.75),
    0 0 26px rgba(180, 45, 24, 0.82),
    0 0 44px rgba(255, 190, 95, 0.28);
  padding-left: 0.55em;
}

#header .heading a:before {
  content: "🔥 ";
  color: #ff8a4c;
  text-shadow: 0 0 10px rgba(255, 116, 72, 0.95),
    0 0 24px rgba(255, 190, 95, 0.45),
    0 0 36px rgba(192, 57, 43, 0.55);
}

#header .heading a:after {
  content: " 🔥";
  color: #ff8a4c;
  text-shadow: 0 0 10px rgba(255, 116, 72, 0.95),
    0 0 24px rgba(255, 190, 95, 0.45),
    0 0 36px rgba(192, 57, 43, 0.55);
}

#header h1 sup,
#header .button,
#header .landmark,
#header .logo {
  display: none;
}

#header #greeting,
#header .primary,
#header .secondary,
#header .menu {
  background: linear-gradient(180deg, rgba(82, 17, 13, 0.98), rgba(24, 8, 8, 0.99));
  border-color: rgba(255, 198, 112, 0.50);
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.56),
    inset 0 0 20px rgba(255, 116, 72, 0.10);
}

#header .primary {
  border-top: 1px solid rgba(255, 116, 72, 0.34);
  border-bottom: 1px solid rgba(255, 198, 112, 0.58);
}

#header .primary a,
#header .secondary a,
#header .menu a,
#header #greeting a {
  color: #ead9c5;
  text-decoration: none;
  text-shadow: 1px 1px 0 #070505;
}

#header .primary a:hover,
#header .secondary a:hover,
#header .menu a:hover,
#header #greeting a:hover {
  color: #fff1d2;
  background: linear-gradient(180deg, #8f2418 0%, #c84224 52%, #ff8a4c 100%);
  text-shadow: 0 0 8px rgba(255, 210, 140, 0.85),
    1px 1px 0 #3b0808;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(255, 116, 72, 0.52),
    0 0 18px rgba(255, 190, 95, 0.24);
}

#header .dropdown:hover a,
#header .open a {
  background: rgba(160, 47, 30, 0.32);
}

#header .menu {
  border: 1px solid rgba(255, 198, 112, 0.48);
  border-radius: 0 0 14px 14px;
}

#header .menu li {
  border-bottom: 1px solid rgba(255, 198, 112, 0.20);
}

#header .search input[type=text],
#header .search input[type=search] {
  background: linear-gradient(180deg, #fff7e8, #f4dcc2);
  color: #2a0907;
  border: 1px solid rgba(255, 198, 112, 0.70);
  border-radius: 14px;
  box-shadow: inset 0 0 10px rgba(255, 116, 72, 0.16),
    0 0 10px rgba(0, 0, 0, 0.35);
}

a,
a:link,
a:visited {
  color: #e3bd75;
  text-decoration: none;
}

a:hover,
a:focus {
  color: #ffae65;
  text-decoration: none;
  text-shadow: 0 0 8px rgba(255, 116, 72, 0.75),
    0 0 18px rgba(192, 57, 43, 0.36),
    0 0 28px rgba(255, 190, 95, 0.18);
}

#main a:hover {
  background: linear-gradient(to bottom, transparent 58%, rgba(160, 47, 30, 0.42) 58%);
  border-radius: 4px;
}

h2,
h3,
h4,
.heading,
.name,
.title {
  color: #f0c17d;
}

h2.heading,
h3.heading,
#main h2,
#main h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-variant: small-caps;
  letter-spacing: 0.08em;
  text-shadow: 1px 1px 0 #070505,
    0 0 10px rgba(255, 116, 72, 0.48),
    0 0 22px rgba(180, 47, 28, 0.40);
}

#main h2:before,
#main h2:after {
  color: #ff8a4c;
  text-shadow: 0 0 10px rgba(255, 116, 72, 0.88),
    0 0 18px rgba(255, 190, 95, 0.35);
}

#main h2:before {
  content: "✦ ";
}

#main h2:after {
  content: " ✦";
}

.work.blurb,
.bookmark.blurb,
.series.blurb,
.index .blurb {
  background: radial-gradient(circle at 0% 0%, rgba(255, 116, 72, 0.16), transparent 14em),
    radial-gradient(circle at 100% 100%, rgba(255, 198, 112, 0.08), transparent 16em),
    linear-gradient(135deg, rgba(31, 12, 12, 0.96), rgba(13, 8, 8, 0.98));
  border: 1px solid rgba(180, 58, 34, 0.54);
  border-left: 7px solid #a33a25;
  border-radius: 16px;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.58),
    0 0 20px rgba(180, 35, 20, 0.12),
    inset 0 0 24px rgba(255, 116, 72, 0.08);
  padding: 1.1em;
  margin: 1.1em 0;
}

.work.blurb:nth-of-type(even),
.bookmark.blurb:nth-of-type(even),
.series.blurb:nth-of-type(even) {
  background: radial-gradient(circle at 100% 0%, rgba(255, 198, 112, 0.13), transparent 14em),
    radial-gradient(circle at 0% 100%, rgba(255, 116, 72, 0.10), transparent 16em),
    linear-gradient(135deg, rgba(24, 9, 9, 0.98), rgba(8, 6, 6, 0.98));
  border-left-color: #d8a35c;
}

.blurb h4 a,
.blurb h5 a,
.blurb .heading a {
  color: #f0c17d;
  font-weight: bold;
  text-shadow: 1px 1px 0 #070505,
    0 0 8px rgba(255, 198, 112, 0.24);
}

.blurb h4 a:hover,
.blurb h5 a:hover,
.blurb .heading a:hover {
  color: #ffae65;
  text-shadow: 0 0 10px rgba(255, 116, 72, 0.88),
    0 0 22px rgba(192, 57, 43, 0.46),
    0 0 34px rgba(255, 198, 112, 0.20);
}

.blurb .datetime {
  color: #b4a28f;
}

.blurb blockquote {
  background: linear-gradient(to right, rgba(160, 47, 30, 0.24), rgba(12, 7, 7, 0.62));
  border-left: 4px solid rgba(255, 116, 72, 0.80);
  color: #d8c7b6;
  border-radius: 0 12px 12px 0;
  box-shadow: inset 0 0 16px rgba(255, 116, 72, 0.10);
}

.tags a,
a.tag {
  background: linear-gradient(180deg, #2d1010, #130808);
  color: #d8ba78;
  border: 1px solid rgba(180, 58, 34, 0.66);
  border-radius: 999px;
  padding: 0.16em 0.58em;
  line-height: 1.8;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.45),
    inset 0 0 10px rgba(255, 116, 72, 0.08);
}

.tags a:hover,
a.tag:hover {
  background: linear-gradient(180deg, #8f2418, #c84224 48%, #ff8a4c);
  color: #fff1d2;
  border-color: rgba(255, 210, 140, 0.80);
  text-shadow: 0 0 7px rgba(255, 210, 140, 0.90),
    1px 1px 0 #3b0808;
  box-shadow: 0 0 10px rgba(255, 116, 72, 0.72),
    0 0 20px rgba(255, 198, 112, 0.26),
    0 0 28px rgba(160, 35, 22, 0.36);
}

.warnings .tag,
.required-tags .warnings,
.required-tags .rating,
.required-tags .category,
.required-tags .complete-no,
.required-tags .complete-yes {
  box-shadow: 0 0 10px rgba(255, 116, 72, 0.52),
    inset 0 0 10px rgba(255, 116, 72, 0.10);
}

.actions a,
.actions a:link,
.action,
.action:link,
.actions input,
input[type=submit],
button,
.actions label {
  background: #a33a25;
  background-image: linear-gradient(180deg, #e3bd75 0%, #b84226 44%, #4d1010 100%) !important;
  color: #fff1d2 !important;
  border: 1px solid rgba(255, 198, 112, 0.68) !important;
  border-bottom: 2px solid #260808 !important;
  border-radius: 999px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.55),
    0 0 12px rgba(255, 116, 72, 0.18),
    inset 0 1px 0 rgba(255, 230, 190, 0.40),
    inset 0 0 14px rgba(255, 116, 72, 0.14) !important;
  text-shadow: 1px 1px 0 #260808;
}

.actions a:hover,
.action:hover,
.actions input:hover,
input[type=submit]:hover,
button:hover,
.actions label:hover {
  background-image: linear-gradient(180deg, #fff0b8 0%, #ffae65 42%, #c84224 100%) !important;
  color: #260808 !important;
  text-shadow: 0 0 5px rgba(255, 241, 210, 0.80);
  box-shadow: 0 0 12px rgba(255, 116, 72, 0.92),
    0 0 26px rgba(192, 57, 43, 0.50),
    0 0 38px rgba(255, 198, 112, 0.22),
    inset 0 1px 0 rgba(255, 241, 210, 0.72) !important;
}

.current,
.actions .current,
.pagination .current {
  background: linear-gradient(180deg, #7b1e16, #1a0707) !important;
  color: #f3dfc4 !important;
  border-color: #e3bd75 !important;
  border-radius: 999px;
}

input,
textarea,
select,
#work_title,
#work_summary,
#work_notes,
#work_endnotes,
#chapter_title,
#chapter_summary,
#chapter_notes,
#chapter_endnotes,
#content textarea,
form textarea,
form input[type=text],
form input[type=email],
form input[type=password],
form input[type=url],
form input[type=search] {
  background: linear-gradient(180deg, #fff7e8, #f4dcc2) !important;
  color: #2a0907 !important;
  border: 1px solid rgba(160, 47, 30, 0.72) !important;
  border-radius: 10px !important;
  box-shadow: inset 0 0 8px rgba(255, 116, 72, 0.12),
    0 1px 6px rgba(0, 0, 0, 0.35) !important;
  text-shadow: none !important;
}

textarea::placeholder,
input::placeholder {
  color: #7b3a2b !important;
  opacity: 1 !important;
}

input:focus,
textarea:focus,
select:focus,
form textarea:focus,
form input[type=text]:focus,
form input[type=email]:focus,
form input[type=password]:focus,
form input[type=url]:focus,
form input[type=search]:focus {
  background: linear-gradient(180deg, #fffaf0, #ffe7c9) !important;
  color: #1a0504 !important;
  border-color: #ff8a4c !important;
  box-shadow: 0 0 12px rgba(255, 116, 72, 0.58),
    0 0 20px rgba(255, 198, 112, 0.18),
    inset 0 0 10px rgba(255, 116, 72, 0.12) !important;
}

form label,
form dt,
form dd,
form p,
form .notice,
form .caution,
form .footnote,
form .instructions,
form .required,
form .landmark {
  color: #f0d6b8;
}

form .notice,
.notice {
  background: linear-gradient(180deg, #fff1d2, #f4dcc2) !important;
  color: #5a1610 !important;
  border: 1px solid rgba(255, 138, 76, 0.65) !important;
  border-radius: 10px;
  text-shadow: none !important;
}

fieldset {
  background: radial-gradient(circle at top left, rgba(255, 116, 72, 0.13), transparent 15em),
    linear-gradient(180deg, rgba(24, 9, 9, 0.98), rgba(10, 6, 6, 0.98));
  border: 1px solid rgba(180, 58, 34, 0.56);
  border-radius: 16px;
}

legend {
  color: #e3bd75;
  font-variant: small-caps;
  letter-spacing: 0.06em;
  text-shadow: 0 0 8px rgba(255, 198, 112, 0.28);
}

#dashboard,
#sidebar,
.filters,
.navigation,
#main .navigation {
  background: radial-gradient(circle at 0% 0%, rgba(255, 116, 72, 0.13), transparent 14em),
    linear-gradient(180deg, rgba(25, 9, 9, 0.98), rgba(9, 6, 6, 0.98));
  border: 1px solid rgba(180, 58, 34, 0.54);
  border-radius: 16px;
  box-shadow: 0 3px 16px rgba(0, 0, 0, 0.50),
    inset 0 0 18px rgba(255, 116, 72, 0.08);
}

#dashboard a,
#sidebar a,
.filters a,
.navigation a {
  color: #e3bd75;
}

#dashboard a:hover,
#sidebar a:hover,
.filters a:hover,
.navigation a:hover {
  color: #ffae65;
}

#dashboard ul,
#sidebar ul,
.filters ul {
  border-color: rgba(180, 58, 34, 0.40);
}

#dashboard .current {
  background: linear-gradient(to right, rgba(160, 47, 30, 0.40), rgba(255, 116, 72, 0.18));
  border-left: 4px solid #ff8a4c;
  color: #f3dfc4;
}

.comment,
.comment div.icon,
.thread .comment {
  background: radial-gradient(circle at 0% 0%, rgba(255, 116, 72, 0.13), transparent 14em),
    linear-gradient(180deg, #1a0a0a, #0d0707);
  border-color: rgba(180, 58, 34, 0.54);
  color: #e2d6c6;
}

.comment {
  border-radius: 16px;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.50),
    inset 0 0 16px rgba(255, 116, 72, 0.08);
}

.comment h4.byline {
  background: linear-gradient(to right, #3b0808, #a33a25, #c45452);
  color: #f3dfc4;
  border-radius: 12px 12px 0 0;
  padding: 0.45em 0.75em;
  text-shadow: 1px 1px 0 #070505;
}

.comment h4.byline a {
  color: #f3dfc4;
}

.comment .userstuff {
  background: rgba(12, 7, 7, 0.56);
  border-radius: 0 0 12px 12px;
}

dl.stats,
.meta,
.preface,
.notes,
.summary,
.associations,
.series,
.bookmark .user {
  background: radial-gradient(circle at top right, rgba(255, 198, 112, 0.10), transparent 16em),
    linear-gradient(180deg, rgba(24, 9, 9, 0.90), rgba(9, 6, 6, 0.92));
  border: 1px solid rgba(180, 58, 34, 0.42);
  border-radius: 14px;
  padding: 0.75em;
  box-shadow: inset 0 0 18px rgba(255, 116, 72, 0.07),
    0 2px 10px rgba(0, 0, 0, 0.30);
}

dl.stats dt,
dl.stats dd {
  color: #d8c7b6;
}

table,
thead,
tbody,
tfoot,
tr,
td,
th {
  border-color: rgba(180, 58, 34, 0.46);
}

th {
  background: linear-gradient(180deg, #6b1a1a, #260808);
  color: #f0c17d;
  text-shadow: 1px 1px 0 #070505;
}

td {
  background: rgba(15, 8, 8, 0.82);
  color: #e2d6c6;
}

.pagination,
#main .pagination {
  background: transparent;
}

.pagination a,
.pagination span {
  background: linear-gradient(180deg, #2d1010, #130808);
  border: 1px solid rgba(180, 58, 34, 0.64);
  border-radius: 999px;
  color: #e3bd75;
  margin: 0.12em;
  padding: 0.28em 0.65em;
}

.pagination a:hover {
  background: linear-gradient(180deg, #8f2418, #c84224 48%, #ff8a4c);
  color: #fff1d2;
  box-shadow: 0 0 12px rgba(255, 116, 72, 0.62),
    0 0 22px rgba(255, 198, 112, 0.18);
}

#footer {
  background: radial-gradient(circle at 50% 0%, rgba(255, 116, 72, 0.22), transparent 20em),
    linear-gradient(180deg, #3b0808, #160707 55%, #070505);
  color: #e8d9c5;
  border-top: 4px solid #a33a25;
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.58),
    0 0 24px rgba(255, 116, 72, 0.22);
}

#footer a {
  color: #e3bd75;
}

#footer a:hover {
  color: #ffae65;
  text-shadow: 0 0 8px rgba(255, 116, 72, 0.82),
    0 0 18px rgba(255, 198, 112, 0.22);
}

#main .landmark,
.landmark {
  color: #b4a28f;
}

hr {
  border: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(160, 47, 30, 0.76), rgba(255, 116, 72, 1), rgba(255, 198, 112, 0.72), rgba(160, 47, 30, 0.76), transparent);
  margin: 1.8em auto;
}

hr:after {
  content: "🔥";
  display: block;
  text-align: center;
  color: #ff8a4c;
  margin-top: -0.78em;
  text-shadow: 0 0 10px rgba(255, 116, 72, 1),
    0 0 20px rgba(192, 57, 43, 0.60),
    0 0 30px rgba(255, 198, 112, 0.28);
}

a,
.actions a,
.action,
button,
input[type=submit],
.tags a,
.blurb,
.comment,
#dashboard a,
#sidebar a,
.pagination a {
  transition: background 0.35s ease,
    color 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease,
    text-shadow 0.35s ease;
}

#header .heading a {
  opacity: 0.86;
  transform: scale(1);
  transition: opacity 1.8s ease,
    text-shadow 1.8s ease,
    transform 1.8s ease;
}

body.javascript #header .heading a {
  opacity: 1;
  text-shadow: 2px 2px 0 #3b0808,
    0 0 16px rgba(255, 116, 72, 0.88),
    0 0 30px rgba(180, 47, 28, 0.90),
    0 0 50px rgba(255, 198, 112, 0.34);
}

.blurb:hover,
.comment:hover {
  box-shadow: 0 0 18px rgba(255, 116, 72, 0.54),
    0 0 34px rgba(160, 47, 30, 0.30),
    0 0 46px rgba(255, 198, 112, 0.12),
    inset 0 0 26px rgba(255, 116, 72, 0.10);
  border-color: rgba(255, 116, 72, 0.72);
}

.tags a:hover {
  box-shadow: 0 0 10px rgba(255, 116, 72, 0.76),
    0 0 20px rgba(160, 47, 30, 0.44),
    0 0 28px rgba(255, 198, 112, 0.20);
}

.userstuff {
  color: #e2d6c6;
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.86;
}

#chapters,
.chapter,
#workskin,
.userstuff {
  background: radial-gradient(circle at top center, rgba(255, 116, 72, 0.10), transparent 24em),
    radial-gradient(circle at bottom right, rgba(255, 198, 112, 0.06), transparent 18em),
    linear-gradient(180deg, rgba(12, 7, 7, 0.62), rgba(6, 5, 5, 0.72));
}

#workskin {
  padding: 1.25em;
  border-radius: 20px;
  box-shadow: inset 0 0 30px rgba(255, 116, 72, 0.10),
    inset 0 0 76px rgba(70, 0, 0, 0.24);
}

.userstuff p {
  line-height: 1.9;
  margin: 1.1em auto;
  max-width: 72em;
}

.userstuff p:hover {
  color: #f0e4d4;
  text-shadow: 0 0 8px rgba(255, 198, 112, 0.18),
    0 0 14px rgba(255, 116, 72, 0.10);
}

.userstuff p:first-of-type {
  margin-top: 1.4em;
}

.userstuff p:first-of-type:first-letter {
  color: #ff8a4c;
  font-size: 3.25em;
  line-height: 0.85;
  float: left;
  padding: 0.08em 0.12em 0 0;
  font-family: Georgia, "Times New Roman", serif;
  text-shadow: 1px 1px 0 #3b0808,
    0 0 12px rgba(255, 116, 72, 0.90),
    0 0 30px rgba(180, 47, 28, 0.52),
    0 0 42px rgba(255, 198, 112, 0.22);
}

.userstuff h1,
.userstuff h2,
.userstuff h3,
.userstuff h4,
.userstuff h5,
.userstuff h6 {
  color: #f3dfc4;
  font-family: Georgia, "Times New Roman", serif;
  font-variant: small-caps;
  letter-spacing: 0.08em;
  text-align: center;
  text-shadow: 1px 1px 0 #070505,
    0 0 12px rgba(255, 116, 72, 0.54),
    0 0 24px rgba(180, 47, 28, 0.46),
    0 0 34px rgba(255, 198, 112, 0.16);
}

.userstuff h1:before,
.userstuff h2:before,
.userstuff h3:before {
  content: "✦ ";
  color: #ff8a4c;
  text-shadow: 0 0 10px rgba(255, 116, 72, 0.90);
}

.userstuff h1:after,
.userstuff h2:after,
.userstuff h3:after {
  content: " ✦";
  color: #ff8a4c;
  text-shadow: 0 0 10px rgba(255, 116, 72, 0.90);
}

.userstuff h1 {
  font-size: 2em;
  padding: 0.5em 0;
  border-top: 1px solid rgba(255, 198, 112, 0.22);
  border-bottom: 1px solid rgba(180, 58, 34, 0.48);
  background: linear-gradient(to right, transparent, rgba(160, 47, 30, 0.24), rgba(255, 116, 72, 0.14), rgba(255, 198, 112, 0.08), rgba(160, 47, 30, 0.24), transparent);
}

.userstuff h2 {
  font-size: 1.65em;
  padding: 0.35em 0;
}

.userstuff h3 {
  font-size: 1.32em;
}

.userstuff em,
.userstuff i,
.userstuff cite,
.userstuff dfn {
  color: #ffae65;
  text-shadow: 0 0 7px rgba(255, 116, 72, 0.44);
}

.userstuff strong,
.userstuff b {
  color: #e3bd75;
  text-shadow: 0 0 8px rgba(255, 198, 112, 0.32);
}

.userstuff strong em,
.userstuff em strong,
.userstuff b i,
.userstuff i b {
  color: #ff8a4c;
  text-shadow: 0 0 9px rgba(255, 116, 72, 0.82),
    0 0 20px rgba(160, 47, 30, 0.42),
    0 0 30px rgba(255, 198, 112, 0.18);
}

.userstuff u,
.userstuff ins {
  text-decoration-color: #ff8a4c;
  text-decoration-thickness: 0.14em;
  text-underline-offset: 0.16em;
}

.userstuff s,
.userstuff del,
.userstuff strike {
  color: #9a9288;
  text-decoration-color: rgba(180, 50, 34, 0.82);
}

.userstuff small {
  color: #b9aa9a;
  letter-spacing: 0.03em;
}

.userstuff big {
  color: #ffae65;
  text-shadow: 0 0 10px rgba(255, 116, 72, 0.58),
    0 0 20px rgba(255, 198, 112, 0.18);
}

.userstuff a {
  color: #e3bd75;
  border-bottom: 1px solid rgba(255, 198, 112, 0.42);
  box-shadow: inset 0 -0.18em rgba(160, 47, 30, 0.34);
}

.userstuff a:hover {
  color: #ffae65;
  border-bottom-color: #ff8a4c;
  box-shadow: inset 0 -0.45em rgba(160, 47, 30, 0.42),
    0 0 10px rgba(255, 116, 72, 0.42);
}

.userstuff blockquote {
  background: radial-gradient(circle at top left, rgba(255, 116, 72, 0.14), transparent 14em),
    radial-gradient(circle at bottom right, rgba(255, 198, 112, 0.08), transparent 12em),
    linear-gradient(to right, rgba(55, 0, 0, 0.46), rgba(12, 7, 7, 0.78));
  color: #d8c7b6;
  border-left: 5px solid rgba(255, 116, 72, 0.86);
  border-right: 1px solid rgba(255, 198, 112, 0.30);
  border-top: 1px solid rgba(180, 58, 34, 0.42);
  border-bottom: 1px solid rgba(180, 58, 34, 0.42);
  border-radius: 0 18px 18px 0;
  padding: 1.1em 1.4em;
  margin: 1.8em auto;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.34),
    inset 0 0 24px rgba(255, 116, 72, 0.10);
}

.userstuff blockquote:before {
  content: "❝";
  display: block;
  color: #ff8a4c;
  font-size: 2.2em;
  line-height: 0.7;
  text-shadow: 0 0 10px rgba(255, 116, 72, 0.95),
    0 0 20px rgba(180, 47, 28, 0.50),
    0 0 30px rgba(255, 198, 112, 0.20);
}

.userstuff blockquote p:first-of-type:first-letter {
  float: none;
  font-size: inherit;
  line-height: inherit;
  padding: 0;
  color: inherit;
  text-shadow: none;
}

.userstuff hr {
  width: 74%;
  border: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(160, 47, 30, 0.78), rgba(255, 116, 72, 1), rgba(255, 198, 112, 0.72), rgba(160, 47, 30, 0.78), transparent);
  margin: 2.4em auto;
}

.userstuff hr:after {
  content: "🔥";
  display: block;
  text-align: center;
  color: #ff8a4c;
  margin-top: -0.78em;
  text-shadow: 0 0 10px rgba(255, 116, 72, 1),
    0 0 22px rgba(192, 57, 43, 0.62),
    0 0 34px rgba(255, 198, 112, 0.28);
}

.userstuff code,
.userstuff pre,
.userstuff kbd,
.userstuff samp {
  background: linear-gradient(180deg, #140707, #070505);
  color: #e3bd75;
  border: 1px solid rgba(255, 198, 112, 0.46);
  border-radius: 8px;
  text-shadow: 0 0 6px rgba(255, 198, 112, 0.30);
}

.userstuff code,
.userstuff kbd,
.userstuff samp {
  padding: 0.08em 0.35em;
}

.userstuff pre {
  padding: 1em;
  box-shadow: inset 0 0 20px rgba(255, 116, 72, 0.14),
    0 3px 14px rgba(0, 0, 0, 0.42);
  white-space: pre-wrap;
}

.userstuff pre code {
  background: transparent;
  border: 0;
  padding: 0;
}

.userstuff address {
  background: linear-gradient(180deg, rgba(40, 25, 14, 0.72), rgba(14, 10, 8, 0.82));
  border: 1px solid rgba(255, 198, 112, 0.36);
  border-radius: 14px;
  padding: 0.8em 1em;
  color: #e3bd75;
}

.userstuff details {
  background: radial-gradient(circle at top left, rgba(255, 116, 72, 0.13), transparent 14em),
    linear-gradient(180deg, rgba(24, 9, 9, 0.96), rgba(9, 6, 6, 0.98));
  border: 1px solid rgba(180, 58, 34, 0.50);
  border-radius: 16px;
  padding: 0.75em 1em;
  margin: 1.2em auto;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.42),
    inset 0 0 20px rgba(255, 116, 72, 0.10);
}

.userstuff summary {
  color: #e3bd75;
  font-weight: bold;
  font-variant: small-caps;
  letter-spacing: 0.06em;
  text-shadow: 0 0 7px rgba(255, 198, 112, 0.38);
}

.userstuff details[open] {
  background: radial-gradient(circle at top right, rgba(255, 116, 72, 0.18), transparent 16em),
    linear-gradient(180deg, rgba(44, 12, 12, 0.98), rgba(12, 7, 7, 0.98));
  border-color: rgba(255, 116, 72, 0.68);
  box-shadow: 0 0 14px rgba(255, 116, 72, 0.44),
    0 0 24px rgba(255, 198, 112, 0.12),
    inset 0 0 24px rgba(255, 116, 72, 0.12);
}

.userstuff details[open] summary {
  color: #ffae65;
}

.userstuff table {
  background: linear-gradient(180deg, rgba(24, 9, 9, 0.92), rgba(9, 6, 6, 0.98));
  border: 1px solid rgba(180, 58, 34, 0.48);
  border-radius: 14px;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.40);
}

.userstuff th {
  background: linear-gradient(180deg, #6b1a1a, #260808);
  color: #f0c17d;
  text-shadow: 1px 1px 0 #070505;
}

.userstuff td {
  background: rgba(13, 7, 7, 0.82);
}

.userstuff sup,
.userstuff sub {
  color: #ffae65;
}

.userstuff abbr {
  color: #e3bd75;
  border-bottom: 1px dotted #ff8a4c;
}

.userstuff ruby rt {
  color: #ff8a4c;
}

.preface h2,
.preface h3,
.preface .title,
.preface .byline {
  text-align: center;
}

.preface .title {
  color: #f3dfc4;
  text-shadow: 1px 1px 0 #070505,
    0 0 14px rgba(255, 116, 72, 0.62),
    0 0 26px rgba(180, 47, 28, 0.46),
    0 0 36px rgba(255, 198, 112, 0.16);
}

.preface .byline {
  color: #e3bd75;
}

.summary,
.notes,
.end.notes,
.beginning.notes,
.preface .summary,
.preface .notes {
  background: radial-gradient(circle at top left, rgba(255, 116, 72, 0.13), transparent 15em),
    radial-gradient(circle at bottom right, rgba(255, 198, 112, 0.08), transparent 12em),
    linear-gradient(180deg, rgba(24, 9, 9, 0.92), rgba(9, 6, 6, 0.96));
  border: 1px solid rgba(180, 58, 34, 0.46);
  border-radius: 18px;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.36),
    inset 0 0 22px rgba(255, 116, 72, 0.09);
  padding: 1em;
}

.summary h3,
.notes h3,
.end.notes h3,
.beginning.notes h3 {
  color: #e3bd75;
  font-variant: small-caps;
  letter-spacing: 0.06em;
}

.summary h3:before,
.notes h3:before {
  content: "✦ ";
  color: #ff8a4c;
}

.summary h3:after,
.notes h3:after {
  content: " ✦";
  color: #ff8a4c;
}

.userstuff em:hover,
.userstuff i:hover {
  color: #ffc078;
  text-shadow: 0 0 12px rgba(255, 154, 95, 0.82),
    0 0 26px rgba(192, 57, 43, 0.44),
    0 0 36px rgba(255, 198, 112, 0.18);
}

.userstuff strong:hover,
.userstuff b:hover {
  color: #fff0b8;
  text-shadow: 0 0 12px rgba(255, 198, 112, 0.72),
    0 0 24px rgba(255, 116, 72, 0.34);
}

.userstuff p:nth-of-type(4n) em,
.userstuff p:nth-of-type(4n) i {
  color: #ff9a5f;
  text-shadow: 0 0 8px rgba(255, 116, 72, 0.52),
    0 0 18px rgba(160, 47, 30, 0.28);
}

.userstuff p:nth-of-type(5n) strong,
.userstuff p:nth-of-type(5n) b {
  color: #c45452;
  text-shadow: 0 0 8px rgba(107, 26, 26, 0.50),
    0 0 16px rgba(255, 116, 72, 0.18);
}

.userstuff p:nth-of-type(6n) em,
.userstuff p:nth-of-type(6n) i {
  color: #d8ba78;
  text-shadow: 0 0 8px rgba(255, 198, 112, 0.42);
}

.userstuff p:nth-of-type(7n) {
  background: linear-gradient(to right, transparent, rgba(160, 47, 30, 0.10), rgba(255, 116, 72, 0.04), transparent);
  border-radius: 12px;
}

.userstuff p:nth-of-type(9n) {
  color: #c8beb3;
}

.userstuff p:nth-of-type(11n) {
  text-shadow: 0 0 8px rgba(255, 116, 72, 0.10),
    0 0 14px rgba(255, 198, 112, 0.06);
}

#header .heading {
  height: 185px;
}

#header h1 {
  padding-top: 2.35em;
}

#header .heading a {
  font-size: 1.05em;
  letter-spacing: 0.07em;
  padding-left: 0;
}

#main {
  border-radius: 12px;
  padding: 0.8em;
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.72),
      0 0 26px rgba(180, 36, 20, 0.30),
      inset 0 0 36px rgba(255, 116, 72, 0.08);
}

#main:before {
  content: none;
}

#workskin {
  padding: 0.75em;
  border-radius: 14px;
}

.userstuff p {
  line-height: 1.78;
}

.userstuff p:first-of-type:first-letter {
  font-size: 2.45em;
}

.work.blurb,
.bookmark.blurb,
.series.blurb,
.index .blurb,
.comment {
  border-radius: 12px;
  padding: 0.8em;
}

.tags a,
a.tag {
  line-height: 2.1;
  padding: 0.22em 0.62em;
}

.actions a,
.action,
.actions input,
input[type=submit],
button,
.actions label {
  line-height: 1.6;
  padding: 0.35em 0.8em;
}

#header .heading {
  height: 150px;
}

#header h1 {
  padding-top: 2em;
}

#header .heading a {
  font-size: 0.88em;
  letter-spacing: 0.04em;
  text-shadow: 1px 1px 0 #3b0808,
      0 0 12px rgba(255, 116, 72, 0.82);
}

#main {
  padding: 0.55em;
}

#main:before {
  content: none;
}

#main:after {
  content: "still burning.";
  font-size: 0.74em;
}

#workskin {
  padding: 0.45em;
}

.userstuff h1 {
  font-size: 1.5em;
}

.userstuff h2 {
  font-size: 1.32em;
}

.userstuff h3 {
  font-size: 1.15em;
}

.userstuff blockquote {
  padding: 0.9em 1em;
  margin: 1.4em auto;
}

.userstuff p:first-of-type:first-letter {
  font-size: 2.05em;
  padding-right: 0.09em;
}

Workskin (for your own fic text)

The workskin styles the text of works you have written. It will affect how other users see your work when they read it, but it does not affect other people's works. You must apply it per-work when posting.

With the workskin active, your fic will have:

  • A large decorative drop cap on the first paragraph, glowing ember-orange
  • A full fire-and-ash background on the text container, with subtle floating particle effects if JavaScript is enabled
  • Animated ashfall dividers — use the .ashfall class on a div for a sparks-and-embers break between scenes
  • Styled headings with ✦ ornaments and golden text shadow — use h2 for part titles, h3 for sub-sections
  • Blockquotes with a decorative large opening mark and ember glow
  • Collapsible spoiler/content boxes using <details><summary>...</summary>...</details>
  • Special utility classes: .divider for inline scene breaks, .coda for end-of-fic flourishes, .fire-note for marginal callouts, .ember-line for a glowing horizontal rule
  1. Go to Dashboard → Skins → Create Work Skin. Select Work Skin as the type. This is different from a site skin.
  2. Give it a name (e.g. Diluc — And Still He Burns) and paste the CSS block below into the CSS field.
  3. When posting or editing a work, scroll down to the Work Skin dropdown in the Associations section and select your new workskin before submitting.
Workskin CSS — click to expand/view

Copy everything in the box below. Please scroll.

#workskin {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.05em;
  line-height: 1.9;
  color: #e2d6c6;
  background: radial-gradient(circle at 8% 12%, rgba(255, 174, 88, 0.18) 0, rgba(255, 174, 88, 0.08) 0.12em, transparent 0.34em),
    radial-gradient(circle at 24% 38%, rgba(255, 116, 72, 0.16) 0, rgba(255, 116, 72, 0.07) 0.12em, transparent 0.32em),
    radial-gradient(circle at 42% 18%, rgba(255, 210, 140, 0.14) 0, rgba(255, 210, 140, 0.06) 0.10em, transparent 0.30em),
    radial-gradient(circle at 68% 58%, rgba(255, 116, 72, 0.15) 0, rgba(255, 116, 72, 0.06) 0.12em, transparent 0.32em),
    radial-gradient(circle at 86% 30%, rgba(255, 174, 88, 0.16) 0, rgba(255, 174, 88, 0.06) 0.12em, transparent 0.32em),
    radial-gradient(circle at 92% 78%, rgba(255, 210, 140, 0.12) 0, rgba(255, 210, 140, 0.05) 0.10em, transparent 0.28em),
    radial-gradient(circle at 50% 0%, rgba(255, 116, 72, 0.30), transparent 20em),
    radial-gradient(circle at 14% 18%, rgba(160, 45, 22, 0.28), transparent 26em),
    radial-gradient(circle at 10% 45%, rgba(92, 8, 8, 0.26), transparent 28em),
    radial-gradient(circle at 88% 75%, rgba(201, 163, 102, 0.16), transparent 24em),
    radial-gradient(circle at 78% 20%, rgba(255, 198, 112, 0.10), transparent 18em),
    linear-gradient(135deg, rgba(62, 10, 8, 0.48), transparent 34%),
    linear-gradient(225deg, rgba(120, 26, 18, 0.28), transparent 42%),
    linear-gradient(180deg, #070505 0%, #160707 28%, #0b0809 70%, #050405 100%);
  background-size: 18em 18em,
    22em 22em,
    26em 26em,
    24em 24em,
    28em 28em,
    32em 32em,
    auto,
    auto,
    auto,
    auto,
    auto,
    auto,
    auto,
    auto;
  max-width: 780px;
  margin: 0 auto;
  padding: 3em 2.5em 4em;
  box-sizing: border-box;
  border: 1px solid rgba(180, 58, 34, 0.54);
  border-radius: 20px;
  box-shadow: 0 0 34px rgba(0, 0, 0, 0.88),
    0 0 48px rgba(180, 36, 20, 0.34),
    0 0 72px rgba(255, 116, 72, 0.08),
    inset 0 0 60px rgba(255, 116, 72, 0.10),
    inset 0 0 120px rgba(70, 0, 0, 0.24);
}

#workskin * {
  box-sizing: border-box;
}

#workskin p {
  margin: 0 0 1.25em 0;
}

#workskin p:hover {
  color: #f0e4d4;
  text-shadow: 0 0 8px rgba(201, 163, 102, 0.16),
    0 0 14px rgba(255, 116, 72, 0.08);
  transition: color 0.35s, text-shadow 0.35s;
}

#workskin p:first-of-type::first-letter {
  color: #ff8a4c;
  font-size: 3.5em;
  float: left;
  line-height: 0.80;
  padding: 0.06em 0.12em 0 0;
  font-family: Georgia, "Times New Roman", serif;
  text-shadow: 1px 1px 0 #3b0808,
    0 0 12px rgba(255, 116, 72, 0.90),
    0 0 30px rgba(180, 47, 28, 0.52),
    0 0 42px rgba(255, 198, 112, 0.26);
}

#workskin h1,
#workskin h2,
#workskin h3,
#workskin h4,
#workskin h5,
#workskin h6 {
  color: #f0c17d;
  font-family: Georgia, "Times New Roman", serif;
  font-variant: small-caps;
  letter-spacing: 0.08em;
  text-align: center;
  text-shadow: 1px 1px 0 #070505,
    0 0 10px rgba(255, 116, 72, 0.50),
    0 0 22px rgba(180, 47, 28, 0.42),
    0 0 32px rgba(255, 198, 112, 0.12);
}

#workskin h1::before,
#workskin h2::before,
#workskin h3::before {
  content: "✦ ";
  color: #ff8a4c;
  text-shadow: 0 0 10px rgba(255, 116, 72, 0.90),
    0 0 18px rgba(255, 198, 112, 0.25);
}

#workskin h1::after,
#workskin h2::after,
#workskin h3::after {
  content: " ✦";
  color: #ff8a4c;
  text-shadow: 0 0 10px rgba(255, 116, 72, 0.90),
    0 0 18px rgba(255, 198, 112, 0.25);
}

#workskin h1 {
  font-size: 2em;
  padding: 0.55em 0;
  border-top: 1px solid rgba(255, 198, 112, 0.26);
  border-bottom: 1px solid rgba(180, 58, 34, 0.52);
  background: radial-gradient(circle at 50% 50%, rgba(255, 198, 112, 0.12), transparent 9em),
    linear-gradient(to right, transparent, rgba(70, 8, 8, 0.40), rgba(160, 47, 30, 0.30), rgba(255, 116, 72, 0.16), rgba(160, 47, 30, 0.30), rgba(70, 8, 8, 0.40), transparent);
  box-shadow: inset 0 0 18px rgba(255, 116, 72, 0.08),
    0 0 18px rgba(0, 0, 0, 0.24);
}

#workskin h2 {
  font-size: 1.65em;
  padding: 0.4em 0;
  background: linear-gradient(to right, transparent, rgba(160, 47, 30, 0.18), rgba(255, 198, 112, 0.08), transparent);
  border-radius: 999px;
}

#workskin h3 {
  font-size: 1.32em;
}

#workskin h4 {
  font-size: 1.1em;
  color: #e3bd75;
}

#workskin a,
#workskin a:link,
#workskin a:visited {
  color: #e3bd75;
  border-bottom: 1px solid rgba(255, 198, 112, 0.42);
  box-shadow: inset 0 -0.18em rgba(160, 47, 30, 0.34),
    0 0 0 rgba(255, 116, 72, 0);
  text-decoration: none;
  transition: color 0.35s, border-color 0.35s, box-shadow 0.35s, text-shadow 0.35s;
}

#workskin a:hover {
  color: #ffae65;
  border-bottom-color: #ff8a4c;
  box-shadow: inset 0 -0.45em rgba(160, 47, 30, 0.42),
    0 0 10px rgba(255, 116, 72, 0.42),
    0 0 18px rgba(255, 198, 112, 0.12);
  text-shadow: 0 0 8px rgba(255, 116, 72, 0.42),
    0 0 14px rgba(255, 198, 112, 0.16);
}

#workskin em,
#workskin i,
#workskin cite,
#workskin dfn {
  color: #ffae65;
  text-shadow: 0 0 7px rgba(255, 116, 72, 0.44),
    0 0 14px rgba(180, 47, 28, 0.18);
}

#workskin strong,
#workskin b {
  color: #e3bd75;
  text-shadow: 0 0 8px rgba(255, 198, 112, 0.32),
    0 0 16px rgba(255, 116, 72, 0.10);
}

#workskin strong em,
#workskin em strong,
#workskin b i,
#workskin i b {
  color: #ff8a4c;
  text-shadow: 0 0 9px rgba(255, 116, 72, 0.82),
    0 0 20px rgba(160, 47, 30, 0.42),
    0 0 30px rgba(255, 198, 112, 0.18);
}

#workskin small {
  color: #b9aa9a;
  letter-spacing: 0.03em;
}

#workskin s,
#workskin del,
#workskin strike {
  color: #9a9288;
  text-decoration-color: rgba(180, 50, 34, 0.82);
}

#workskin u,
#workskin ins {
  text-decoration-color: #ff8a4c;
  text-decoration-thickness: 0.14em;
  text-underline-offset: 0.16em;
}

#workskin sup,
#workskin sub {
  color: #ffae65;
}

#workskin abbr {
  color: #e3bd75;
  border-bottom: 1px dotted #ff8a4c;
}

#workskin ruby rt {
  color: #ff8a4c;
}

#workskin blockquote {
  background: radial-gradient(circle at top left, rgba(255, 116, 72, 0.18), transparent 14em),
    radial-gradient(circle at bottom right, rgba(255, 198, 112, 0.10), transparent 12em),
    linear-gradient(135deg, rgba(80, 8, 8, 0.50), rgba(24, 9, 9, 0.86) 48%, rgba(12, 7, 7, 0.82)),
    linear-gradient(to right, rgba(55, 0, 0, 0.46), rgba(12, 7, 7, 0.78));
  color: #d8c7b6;
  border-left: 5px solid rgba(255, 116, 72, 0.86);
  border-right: 1px solid rgba(255, 198, 112, 0.30);
  border-top: 1px solid rgba(180, 58, 34, 0.42);
  border-bottom: 1px solid rgba(180, 58, 34, 0.42);
  border-radius: 0 18px 18px 0;
  padding: 1.1em 1.4em;
  margin: 1.8em auto;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.34),
    inset 0 0 24px rgba(255, 116, 72, 0.12),
    inset 0 0 50px rgba(255, 198, 112, 0.04);
}

#workskin blockquote::before {
  content: "❝";
  display: block;
  color: #ff8a4c;
  font-size: 2.2em;
  line-height: 0.7;
  text-shadow: 0 0 10px rgba(255, 116, 72, 0.95),
    0 0 20px rgba(180, 47, 28, 0.50),
    0 0 30px rgba(255, 198, 112, 0.22);
}

#workskin blockquote p:first-of-type::first-letter {
  float: none;
  font-size: inherit;
  line-height: inherit;
  padding: 0;
  color: inherit;
  text-shadow: none;
}

#workskin hr {
  border: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(80, 8, 8, 0.72), rgba(160, 47, 30, 0.90), rgba(255, 116, 72, 1), rgba(255, 198, 112, 0.82), rgba(160, 47, 30, 0.90), rgba(80, 8, 8, 0.72), transparent);
  margin: 2.4em auto;
  width: 74%;
  position: relative;
  box-shadow: 0 0 10px rgba(255, 116, 72, 0.40),
    0 0 18px rgba(255, 198, 112, 0.14);
}

#workskin hr::after {
  content: "🔥";
  display: block;
  text-align: center;
  color: #ff8a4c;
  margin-top: -0.78em;
  text-shadow: 0 0 10px rgba(255, 116, 72, 1),
    0 0 22px rgba(192, 57, 43, 0.62),
    0 0 34px rgba(255, 198, 112, 0.28);
}

#workskin code,
#workskin pre,
#workskin kbd,
#workskin samp {
  background: radial-gradient(circle at top left, rgba(255, 116, 72, 0.12), transparent 10em),
    linear-gradient(180deg, #1c0908, #140707 45%, #070505);
  color: #e3bd75;
  border: 1px solid rgba(255, 198, 112, 0.46);
  border-radius: 8px;
  text-shadow: 0 0 6px rgba(255, 198, 112, 0.30);
}

#workskin code,
#workskin kbd,
#workskin samp {
  padding: 0.08em 0.35em;
}

#workskin pre {
  padding: 1em;
  white-space: pre-wrap;
  box-shadow: inset 0 0 20px rgba(255, 116, 72, 0.14),
    inset 0 0 44px rgba(255, 198, 112, 0.04),
    0 3px 14px rgba(0, 0, 0, 0.36);
}

#workskin pre code {
  background: transparent;
  border: 0;
  padding: 0;
}

#workskin details {
  background: radial-gradient(circle at top left, rgba(255, 116, 72, 0.12), transparent 13em),
    radial-gradient(circle at bottom right, rgba(255, 198, 112, 0.08), transparent 11em),
    linear-gradient(180deg, rgba(36, 10, 8, 0.98), rgba(24, 9, 9, 0.96) 45%, rgba(9, 6, 6, 0.98));
  border: 1px solid rgba(180, 58, 34, 0.50);
  border-radius: 14px;
  padding: 0 1em;
  margin: 1.4em auto;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.42),
    inset 0 0 20px rgba(255, 116, 72, 0.08),
    inset 0 0 46px rgba(255, 198, 112, 0.04);
  transition: border-color 0.35s, box-shadow 0.35s, background 0.35s;
}

#workskin summary {
  display: block;
  color: #e3bd75;
  font-weight: bold;
  font-variant: small-caps;
  letter-spacing: 0.06em;
  list-style: none;
  min-height: 44px;
  line-height: 44px;
  padding: 0;
  text-shadow: 0 0 7px rgba(255, 198, 112, 0.38),
    0 0 14px rgba(255, 116, 72, 0.12);
  transition: color 0.35s, text-shadow 0.35s;
}

#workskin summary::-webkit-details-marker {
  display: none;
}

#workskin summary::before {
  content: "🔥  ";
}

#workskin details[open] summary {
  color: #ffae65;
  border-bottom: 1px solid rgba(180, 58, 34, 0.38);
  margin-bottom: 0.6em;
  text-shadow: 0 0 8px rgba(255, 116, 72, 0.45),
    0 0 18px rgba(255, 198, 112, 0.16);
}

#workskin details[open] {
  background: radial-gradient(circle at top right, rgba(255, 116, 72, 0.18), transparent 14em),
    radial-gradient(circle at bottom left, rgba(255, 198, 112, 0.10), transparent 12em),
    linear-gradient(180deg, rgba(48, 12, 10, 0.98), rgba(20, 8, 8, 0.98));
  border-color: rgba(255, 116, 72, 0.54);
  padding-bottom: 0.8em;
  box-shadow: 0 0 14px rgba(255, 116, 72, 0.30),
    0 0 24px rgba(255, 198, 112, 0.10),
    inset 0 0 24px rgba(255, 116, 72, 0.10);
}

#workskin details p:first-of-type::first-letter {
  float: none;
  font-size: inherit;
  line-height: inherit;
  padding: 0;
  color: inherit;
  text-shadow: none;
}

#workskin .divider {
  display: block !important;
  text-align: center !important;
  margin: 2.2em 0 !important;
  color: rgba(255, 116, 72, 0.50);
  font-size: 1.2em;
  letter-spacing: 0.55em;
  text-shadow: 0 0 12px rgba(192, 57, 43, 0.44),
    0 0 22px rgba(255, 198, 112, 0.14);
}

#workskin .divider::before,
#workskin .divider::after {
  content: "────";
  color: rgba(201, 163, 102, 0.22);
  letter-spacing: 0;
  padding: 0 0.8em;
}

#workskin .coda {
  text-align: center !important;
  margin-top: 2.4em !important;
  padding-top: 1.2em !important;
  border-top: 1px solid rgba(255, 116, 72, 0.24) !important;
  background: linear-gradient(to right, transparent, rgba(160, 47, 30, 0.14), rgba(255, 198, 112, 0.06), transparent);
  color: rgba(255, 116, 72, 0.84) !important;
  font-style: italic;
  font-size: 0.88em;
  letter-spacing: 0.2em;
  text-shadow: 0 0 10px rgba(255, 116, 72, 0.78),
    0 0 24px rgba(180, 35, 20, 0.55),
    0 0 36px rgba(255, 198, 112, 0.22);
}

#workskin .fire-note {
  background: radial-gradient(circle at top left, rgba(255, 116, 72, 0.12), transparent 12em),
    linear-gradient(135deg, rgba(52, 12, 10, 0.96), rgba(24, 9, 9, 0.94), rgba(9, 6, 6, 0.98));
  border: 1px solid rgba(180, 58, 34, 0.48);
  border-left: 4px solid #a33a25;
  border-radius: 0 14px 14px 0;
  padding: 0.9em 1.1em;
  margin: 1.6em 0;
  color: #d8c7b6;
  box-shadow: inset 0 0 18px rgba(255, 116, 72, 0.08),
    0 3px 12px rgba(0, 0, 0, 0.28);
}

#workskin .fire-note p:first-of-type::first-letter {
  float: none;
  font-size: inherit;
  line-height: inherit;
  padding: 0;
  color: inherit;
  text-shadow: none;
}

#workskin .wine-gradient {
  background: linear-gradient(135deg, rgba(70, 8, 8, 0.62), rgba(130, 30, 22, 0.28), rgba(15, 6, 6, 0.82));
  border: 1px solid rgba(180, 58, 34, 0.46);
  border-radius: 16px;
  padding: 1em 1.2em;
  box-shadow: inset 0 0 18px rgba(255, 116, 72, 0.08),
    0 3px 14px rgba(0, 0, 0, 0.30);
}

#workskin .gold-gradient {
  background: linear-gradient(135deg, rgba(255, 198, 112, 0.14), rgba(160, 47, 30, 0.22), rgba(12, 7, 7, 0.82));
  border: 1px solid rgba(255, 198, 112, 0.32);
  border-radius: 16px;
  padding: 1em 1.2em;
  color: #e8d9c5;
  box-shadow: inset 0 0 20px rgba(255, 198, 112, 0.08),
    0 3px 14px rgba(0, 0, 0, 0.30);
}

#workskin .ember-line {
  display: block;
  height: 1px;
  margin: 2em auto;
  width: 65%;
  background: linear-gradient(to right, transparent, rgba(160, 47, 30, 0.74), rgba(255, 116, 72, 1), rgba(255, 198, 112, 0.72), transparent);
  box-shadow: 0 0 10px rgba(255, 116, 72, 0.52),
    0 0 20px rgba(255, 198, 112, 0.14);
}

#workskin .ashfall {
  display: block !important;
  position: relative;
  height: 9.5em;
  overflow: hidden;
  margin: 0.4em 0 2.4em 0;
  text-align: center;
  line-height: 1;
  background: radial-gradient(circle at 18% 20%, rgba(255, 174, 88, 0.20) 0, rgba(255, 174, 88, 0.08) 0.12em, transparent 0.38em),
    radial-gradient(circle at 42% 66%, rgba(255, 116, 72, 0.18) 0, rgba(255, 116, 72, 0.07) 0.12em, transparent 0.36em),
    radial-gradient(circle at 74% 30%, rgba(255, 210, 140, 0.16) 0, rgba(255, 210, 140, 0.06) 0.10em, transparent 0.34em),
    radial-gradient(circle at 50% 50%, rgba(255, 116, 72, 0.12), transparent 16em),
    linear-gradient(to bottom, rgba(160, 47, 30, 0.10), rgba(255, 116, 72, 0.06), transparent);
  border-radius: 18px;
  box-shadow: inset 0 0 20px rgba(255, 116, 72, 0.10),
    inset 0 0 40px rgba(255, 198, 112, 0.04);
}

#workskin .ashfall::before {
  content: "✦     ·        ✧          ·     ✦       ·        ✧";
  display: block;
  color: rgba(255, 174, 88, 0.42);
  font-size: 0.95em;
  letter-spacing: 0.75em;
  line-height: 1.2;
  padding-top: 0.6em;
  text-shadow: 0 0 8px rgba(255, 116, 72, 0.65),
    0 0 16px rgba(255, 198, 112, 0.24);
}

#workskin .ashfall::after {
  content: "·      ✦          ·       ✧      ·        ✦";
  display: block;
  color: rgba(226, 214, 198, 0.34);
  font-size: 0.85em;
  letter-spacing: 0.85em;
  line-height: 1.2;
  padding-top: 0.8em;
  text-shadow: 0 0 7px rgba(226, 214, 198, 0.26),
    0 0 14px rgba(255, 116, 72, 0.18);
}

#workskin .ashfall-sm {
  height: 5.8em;
  margin: 0.6em 0 0.8em;
  opacity: 0.95;
}

#workskin .ashfall p {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}

#workskin .ashfall br {
  display: none !important;
}

#workskin .ashfall span {
  display: inline-block !important;
  position: relative;
  margin: 0 0.32em;
  opacity: 0.95;
  color: rgba(226, 214, 198, 0.72);
  text-shadow: 0 0 6px rgba(226, 214, 198, 0.42),
    0 0 12px rgba(255, 116, 72, 0.42),
    0 0 22px rgba(255, 198, 112, 0.14);
  transform: translate(0, 0) rotate(0);
  transition-property: transform, opacity;
  transition-timing-function: linear;
}

#workskin .ash-row-one {
  top: 0.2em;
}

#workskin .ash-row-two {
  top: 1.2em;
}

#workskin .ash-row-three {
  top: 2.4em;
}

#workskin .ash-row-four {
  top: 3.6em;
}

#workskin .ash-row-five {
  top: 4.8em;
}

#workskin .ash-row-six {
  top: 6.0em;
}

#workskin .ash-row-seven {
  top: 7.1em;
}

#workskin .ash-row-eight {
  top: 8.0em;
}

#workskin .ash-one {
  font-size: 0.8em;
  color: rgba(226, 214, 198, 0.72);
  transition-duration: 36s;
}

#workskin .ash-two {
  font-size: 1.15em;
  color: rgba(255, 170, 105, 0.78);
  transition-duration: 48s;
}

#workskin .ash-three {
  font-size: 0.95em;
  color: rgba(210, 200, 185, 0.64);
  transition-duration: 60s;
}

#workskin .ash-four {
  font-size: 1.25em;
  color: rgba(201, 163, 102, 0.72);
  transition-duration: 72s;
}

#workskin .ash-five {
  font-size: 0.72em;
  color: rgba(170, 158, 146, 0.68);
  transition-duration: 84s;
}

#workskin .ash-six {
  font-size: 1.05em;
  color: rgba(255, 116, 72, 0.70);
  transition-duration: 96s;
}

#workskin .ash-seven {
  font-size: 0.68em;
  color: rgba(255, 210, 140, 0.62);
  transition-duration: 108s;
}

#workskin .ash-eight {
  font-size: 1.35em;
  color: rgba(255, 174, 88, 0.64);
  transition-duration: 120s;
}

#workskin:is(body.javascript *) .ashfall .ash-row-one {
  transform: translate(4em,  6.5em) rotate(540deg);
  opacity: 0.10;
}

#workskin:is(body.javascript *) .ashfall .ash-row-two {
  transform: translate(-5em,-4.5em) rotate(-720deg);
  opacity: 0.12;
}

#workskin:is(body.javascript *) .ashfall .ash-row-three {
  transform: translate(6em, -6em)   rotate(900deg);
  opacity: 0.10;
}

#workskin:is(body.javascript *) .ashfall .ash-row-four {
  transform: translate(-3em, 5.5em) rotate(-540deg);
  opacity: 0.10;
}

#workskin:is(body.javascript *) .ashfall .ash-row-five {
  transform: translate(2em, -5em)   rotate(720deg);
  opacity: 0.12;
}

#workskin:is(body.javascript *) .ashfall .ash-row-six {
  transform: translate(-6em, 4em)   rotate(-900deg);
  opacity: 0.10;
}

#workskin:is(body.javascript *) .ashfall .ash-row-seven {
  transform: translate(5em, -7em)   rotate(680deg);
  opacity: 0.12;
}

#workskin:is(body.javascript *) .ashfall .ash-row-eight {
  transform: translate(-4em, 6em)   rotate(-760deg);
  opacity: 0.10;
}

#workskin table {
  background: radial-gradient(circle at top left, rgba(255, 116, 72, 0.10), transparent 12em),
    linear-gradient(180deg, rgba(32, 10, 9, 0.94), rgba(24, 9, 9, 0.92), rgba(9, 6, 6, 0.98));
  border: 1px solid rgba(180, 58, 34, 0.48);
  border-radius: 14px;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.40),
    inset 0 0 18px rgba(255, 116, 72, 0.06);
}

#workskin th {
  background: linear-gradient(180deg, #9a2a1c, #6b1a1a 42%, #260808);
  color: #f0c17d;
  text-shadow: 1px 1px 0 #070505;
}

#workskin td {
  background: linear-gradient(180deg, rgba(28, 9, 8, 0.88), rgba(13, 7, 7, 0.82));
  color: #e2d6c6;
}

#workskin table,
#workskin th,
#workskin td {
  border-color: rgba(180, 58, 34, 0.46);
}

#workskin {
  padding: 1.5em 1em 2.5em;
  font-size: 1em;
  border-radius: 10px;
}

#workskin p:first-of-type::first-letter {
  font-size: 2.5em;
}

#workskin h1 {
  font-size: 1.5em;
}

#workskin h2 {
  font-size: 1.32em;
}

#workskin h3 {
  font-size: 1.15em;
}

#workskin blockquote {
  padding: 0.8em 0.9em;
  margin: 1.2em auto;
}

#workskin .ashfall {
  height: 7em;
}

#workskin .ashfall span {
  margin: 0 0.14em;
}

#workskin .ashfall::before,
#workskin .ashfall::after {
  letter-spacing: 0.38em;
  font-size: 0.72em;
}

Tips for Using the Workskin

Scene breaks

Use a plain <hr> in your fic HTML for scene breaks. The workskin turns these into glowing ember dividers with a 🔥 ornament automatically. In AO3's rich text editor, the horizontal rule button does this for you.

Ashfall dividers

For a more ornate visual break — floating sparks and cinders — use the .ashfall class. Put the following on a single line in your fic HTML to avoid AO3's formatter breaking the nested spans:

<div class="ashfall"><p><span class="ash-one ash-row-one">·</span><span class="ash-two ash-row-two">✦</span><span class="ash-three ash-row-three">·</span><span class="ash-four ash-row-four">✧</span><span class="ash-five ash-row-five">·</span><span class="ash-one ash-row-two">·</span><span class="ash-two ash-row-four">✦</span><span class="ash-three ash-row-one">·</span></p></div>

When JavaScript is enabled on AO3, the particles slowly drift and fade as if falling through heat. On static pages they render as a soft starfield of dots and sparks.

Chapter / part headings

Use <h2> for part or chapter titles inside your fic text. The CSS will centre them and add flanking gold ✦ symbols with an ember glow. Use <h3> for sub-sections. They appear smaller but with the same ornament.

Spoiler / content boxes

You can use collapsible boxes for spoilers, footnotes, author's notes within text, or hidden content. Keep complex HTML on a single line to prevent AO3's formatter from breaking it:

<details><summary>Click to reveal</summary><p>Hidden content here.</p></details>

The drop cap

The drop cap triggers on the very first letter of the first paragraph in the chapter. If your chapter opens immediately with fic text, the drop cap appears on the opening word automatically. Inside blockquote, details, and .fire-note blocks, the drop cap is suppressed so it doesn't fire unexpectedly mid-fic.

Emphasis colours

Inside your fic, <em> renders in warm amber-orange. <strong> renders in burnished gold. Using both together — <strong><em> — renders in bright living fire: #ff8a4c. Useful for titles, dramatic emphasis, or a character name at a crucial moment.

The .coda class

Place <p class="coda">and still, he burns.</p> at the very end of your fic for a glowing, centered closing line with an automatic top border — the workskin equivalent of the site skin's after-content text. Any short phrase works.

Free to use, adapt, and share. Credit appreciated but not required.
Originally created to accompany No One Taught the Fire How to Mourn (and so it learned to devour).

Notes:

This site skin and workskin were originally meant to be posted alongside my HTML-formatted Diluc character study, No One Taught the Fire How to Mourn (and so it learned to devour), so if you enjoyed the aesthetic here, please consider checking that out too! This skin was designed as a companion piece to it, and I originally was going to post them on the same day. That was the plan, anyway.

Unfortunately, in true AO3 coding gremlin fashion, I broke my AO3 interface approximately six or more times while trying to make this work. And I do mean broke. Not “oops, one button looks weird” broke. I mean laggy screen, frozen layout, buttons refusing to function, parts of the interface becoming deeply cursed, and me sitting there like, “Ah. I may have created a problem.”

So, naturally, I left it alone and procrastinated on it for a while because sometimes the healthiest response to your own code attacking you is simply closing the tab and pretending you are at peace.

But I finally came back to it this weekend, wrestled it into behaving, and now here it is. Please use it, adapt it, break it less than I did, and have fun making AO3 look like it has been haunted by the Darknight Hero.

---

If this moved you, even a little, please consider leaving a kudos or a comment. I'd love to know if anyone installs the skin or uses the workskin on something they're writing—feel free to drop a link.

I've recently realized: I have free will. Which means I've been joyfully and chaotically experimenting with HTML formatting, custom workskins, interactive fic presentation, etc. My plan is to post or update something in this vein weekly: formatted pieces, skins, interactive experiments, small HTML things that probably have no business existing on a fanfiction website but do anyway.

If you want to stay updated on this HTML series, please consider subscribing or bookmarking.

You can find me on Bluesky ( @the_wild_poet25 ) and on Twitter (the_tamed_poet) if you want to connect. I'm also on Discord too!

The comment section also works—feel free to leave a comment! :)