/* Somebody Has to Be Snigg: the AO3 work skin, scoped to #workskin */
#workskin div.userstuff > p:not([class]), #workskin div.userstuff > p.opening {max-width: 44em; margin: 0 auto 0.75em; font-family: "Palatino Linotype", Palatino, "Book Antiqua", "URW Palladio L", "TeX Gyre Pagella", Georgia, serif; line-height: 1.6; text-align: justify; text-indent: 1.4em; hyphens: auto; -webkit-hyphens: auto;}
#workskin div.userstuff > p:not([class]) :not([class]), #workskin div.userstuff > p.opening :not([class]) {font-family: inherit;}
#workskin div.userstuff > p:not([class]):first-of-type, #workskin div.userstuff > p:not([class]):empty:first-of-type + p:not([class]), #workskin div.userstuff > p.divider + p:not([class]) {text-indent: 0;}
#workskin div.userstuff > p:not([class]):not([align]):first-of-type::first-line, #workskin div.userstuff > p:not([class]):empty:first-of-type + p:not([class]):not([align])::first-line {font-variant: small-caps; letter-spacing: 0.04em;}
#workskin div.userstuff > p.opening {text-indent: 0;}
#workskin div.userstuff > p.opening::first-line {font-variant: small-caps; letter-spacing: 0.04em;}
#workskin div.userstuff > p:not([class]):not(:has(:not(br))):has(+ p.opening) {display: none;}
#workskin div.userstuff > p:not([class]):empty {display: none;}
#workskin div.userstuff > p[align=center]:not([class]) {text-align: center; text-indent: 0;}
#workskin .chapter .preface h3.title {position: relative; margin: 0.8em 0 0.6em; padding-bottom: 22px; font-family: "Palatino Linotype", Palatino, "Book Antiqua", "URW Palladio L", "TeX Gyre Pagella", Georgia, serif; font-size: 1.5em; font-variant: small-caps; letter-spacing: 0.06em; line-height: 1.3;}
#workskin .chapter .preface h3.title a {color: inherit; border-bottom: 0;}
#workskin .chapter .preface h3.title::after {content: ""; position: absolute; left: 50%; bottom: 0; width: 0; height: 0; margin-left: -13px; border-left: 13px solid transparent; border-right: 13px solid transparent; border-bottom: 9px solid currentColor; opacity: 0.5;}
#workskin div.userstuff iframe {display: block; width: 100%; max-width: 28em; margin: 1.4em auto; border: 0; border-radius: 12px;}
#workskin div.userstuff > p:first-of-type:has(iframe) ~ p:not([class]):nth-of-type(2) {text-indent: 0;}
#workskin div.userstuff > p:first-of-type:has(iframe) ~ p:not([class]):not([align]):nth-of-type(2)::first-line {font-variant: small-caps; letter-spacing: 0.04em;}
#workskin div.userstuff > p.divider + p:has(iframe) + p:not([class]) {text-indent: 0;}
#workskin details.song {max-width: 28em; margin: 1.6em auto; text-align: center;}
#workskin details.song summary {display: block; list-style: none; cursor: pointer; font-family: "Palatino Linotype", Palatino, "Book Antiqua", "URW Palladio L", "TeX Gyre Pagella", Georgia, serif; font-size: 0.95em; font-variant: small-caps; letter-spacing: 0.1em; opacity: 0.65; transition: opacity 0.3s ease;}
#workskin details.song summary::-webkit-details-marker {display: none;}
#workskin details.song summary:hover, #workskin details.song[open] summary {opacity: 1;}
#workskin details.song iframe {margin-top: 0.8em;}
#workskin div.userstuff::after {content: ""; display: block; width: 0; height: 0; margin: 2.2em auto 0.6em; border-left: 12px solid transparent; border-right: 12px solid transparent; border-bottom: 8px solid currentColor; opacity: 0.5;}
#workskin div.userstuff > p:not([class]):not([align]):first-of-type, #workskin div.userstuff > p:not([class]):empty:first-of-type + p:not([class]):not([align]) {display: flow-root;}
#workskin div.userstuff > p:not([class]):not([align]):first-of-type::first-letter, #workskin div.userstuff > p:not([class]):empty:first-of-type + p:not([class]):not([align])::first-letter {float: left; margin: 0.06em 0.09em 0 0; font-size: 3.45em; line-height: 0.8;}
#workskin div.userstuff > p:first-of-type:has(iframe) ~ p:not([class]):not([align]):nth-of-type(2) {display: flow-root;}
#workskin div.userstuff > p:first-of-type:has(iframe) ~ p:not([class]):not([align]):nth-of-type(2)::first-letter {float: left; margin: 0.06em 0.09em 0 0; font-size: 3.45em; line-height: 0.8;}
#workskin div.userstuff > p.opening {display: flow-root;}
#workskin div.userstuff > p.opening::first-letter {float: left; margin: 0.06em 0.09em 0 0; font-size: 3.45em; line-height: 0.8;}
#workskin .frost p, #workskin .stone p, #workskin .coin p, #workskin .pinned-note p, #workskin .pinned-note span, #workskin .minutes p, #workskin .leaflet p, #workskin .leaflet span, #workskin .storybook p, #workskin .storybook span, #workskin .remembrance p, #workskin .stars p, #workskin .stars i, #workskin .clipping p, #workskin .clipping span, #workskin .prophet p, #workskin .headstone p, #workskin .unsent p, #workskin .unsent span, #workskin .getwell p, #workskin .getwell span, #workskin .sampler p, #workskin .folklore p, #workskin .exhibit p, #workskin .tome p, #workskin .roll p, #workskin .roll span, #workskin .roll th, #workskin .roll td, #workskin .access p, #workskin .access span, #workskin .diary p, #workskin .badge p, #workskin .tithe p, #workskin .tithe span, #workskin .veil p, #workskin .howler p, #workskin .howler span, #workskin .floobag p, #workskin .teamsheet p, #workskin .teamsheet span {font-family: inherit;}
#workskin .exhibit div, #workskin .diary div, #workskin .floobag div, #workskin .roll table, #workskin .roll thead, #workskin .roll tbody, #workskin .roll tr {font-family: inherit;}
#workskin .divider {display: flex; align-items: center; justify-content: center; max-width: 20em; margin: 2.4em auto; opacity: 0.55;}
#workskin .divider::before, #workskin .divider::after {content: ""; flex: 1; border-bottom: 1px solid currentColor;}
#workskin .tor {position: relative; display: inline-block; width: 0; height: 0; margin: 0 14px; font-size: 0; border-left: 18px solid transparent; border-right: 18px solid transparent; border-bottom: 13px solid currentColor;}
#workskin .tor::before {content: ""; position: absolute; left: -2px; top: -8px; width: 4px; height: 11px; background: currentColor;}
#workskin .frost {max-width: 24em; margin: 2.6em auto; padding: 3.2em 3em 3em; background: radial-gradient(ellipse at 50% 50%, rgba(214,232,245,0) 40%, rgba(214,232,245,0.3) 55%, rgba(226,239,248,0.78) 72%, rgba(241,248,252,0.96) 90%), repeating-linear-gradient(118deg, rgba(255,255,255,0) 0, rgba(255,255,255,0) 6px, rgba(255,255,255,0.05) 7px, rgba(255,255,255,0) 8px), repeating-linear-gradient(62deg, rgba(255,255,255,0) 0, rgba(255,255,255,0) 9px, rgba(255,255,255,0.04) 10px, rgba(255,255,255,0) 11px), radial-gradient(circle at 80% 18%, #fbf6e2 0, #fbf6e2 7px, rgba(251,246,226,0.25) 9px, rgba(251,246,226,0) 24px), radial-gradient(ellipse at 60% 40%, #1e2d47 0%, #101a2c 60%, #080d18 100%); color: #eef6fb; border: 10px solid #3b2b1f; outline: 2px solid #5b4431; outline-offset: -12px; box-shadow: inset 0 0 18px rgba(0,0,0,0.55), 0 5px 14px rgba(0,0,0,0.35); text-align: center; font-family: Georgia, "Palatino Linotype", serif; font-size: 1.08em; font-style: italic; line-height: 1.7; text-shadow: 0 0 2px rgba(8,13,24,0.95), 0 0 8px rgba(150,200,235,0.7);}
#workskin .frost p {margin: 0.2em 0;}
#workskin .frost .source {margin-top: 1.1em; font-size: 0.72em; font-style: normal; font-variant: small-caps; letter-spacing: 0.16em; opacity: 0.75;}
#workskin .sampler {max-width: 23em; margin: 2.8em auto; padding: 2.3em 2.2em 2em; background: repeating-linear-gradient(0deg, rgba(110,90,60,0.08) 0, rgba(110,90,60,0.08) 1px, rgba(110,90,60,0) 1px, rgba(110,90,60,0) 4px), repeating-linear-gradient(90deg, rgba(110,90,60,0.08) 0, rgba(110,90,60,0.08) 1px, rgba(110,90,60,0) 1px, rgba(110,90,60,0) 4px), linear-gradient(#efe5cf, #efe5cf); color: #7a2430; border: 12px solid #5b3d28; outline: 2px dashed #7a2430; outline-offset: -28px; box-shadow: inset 0 0 0 3px #3e2a1b, inset 0 0 24px rgba(90,60,30,0.28), 0 6px 14px rgba(0,0,0,0.3); text-align: center; font-family: "Courier New", Courier, monospace; font-weight: bold; letter-spacing: 0.12em; line-height: 1.75; text-transform: uppercase;}
#workskin .sampler p {margin: 0.3em 0;}
#workskin .sampler .motif {margin: 0.5em 0 1.2em; color: #4f6b3c;}
#workskin .sampler .motif .tor {transform: scale(1.6);}
#workskin .sampler .saying {font-size: 0.92em;}
#workskin .sampler .row {margin-top: 0.7em; color: #3f5a7a; font-size: 0.8em; letter-spacing: 0.5em;}
#workskin .sampler .source {margin-top: 0.6em; color: #3f5a7a; font-size: 0.66em; letter-spacing: 0.18em;}
#workskin .folklore {max-width: 24em; margin: 2.8em auto; padding: 1.5em 2.2em 1.2em; background: radial-gradient(circle at 85% 15%, rgba(150,110,50,0.13) 0, rgba(150,110,50,0) 1.3em), radial-gradient(circle at 10% 80%, rgba(150,110,50,0.12) 0, rgba(150,110,50,0) 1.5em), linear-gradient(#f3ead6, #f3ead6); color: #2a241b; border: 1px solid #ddcfae; box-shadow: 0 3px 10px rgba(0,0,0,0.18); text-align: center; font-family: "Hoefler Text", Garamond, "EB Garamond", Georgia, serif; line-height: 1.6;}
#workskin .folklore p {margin: 0.35em 0;}
#workskin .folklore .booktitle {color: #7d6f55; font-size: 0.66em; letter-spacing: 0.28em; text-transform: uppercase;}
#workskin .folklore .vignette {margin: 1.6em 0 1em;}
#workskin .folklore .vignette .tor {transform: scale(1.9);}
#workskin .folklore .number {color: #7d6f55; font-size: 0.8em; letter-spacing: 0.1em;}
#workskin .folklore .saying {font-size: 1.1em; font-style: italic;}
#workskin .folklore .gloss {margin-top: 1em; padding-top: 0.6em; border-top: 1px solid #d9caa6; color: #6b5f48; font-size: 0.76em; text-align: left;}
#workskin .stone {max-width: 30em; margin: 2.6em auto; padding: 1.6em 2em 1.4em; background: radial-gradient(ellipse at 0% 100%, rgba(96,112,62,0.45) 0%, rgba(96,112,62,0) 45%), linear-gradient(165deg, #bdb9ae 0%, #a39e93 50%, #8e897f 100%); color: #3b3833; border-radius: 14px 24px 10px 28px; box-shadow: inset 0 2px 3px rgba(255,255,255,0.4), inset 0 -4px 10px rgba(0,0,0,0.3), 0 5px 12px rgba(0,0,0,0.3); text-align: center; font-family: "Copperplate", "Copperplate Gothic Light", "Trajan Pro", Georgia, serif; font-size: 1.05em; letter-spacing: 0.05em; line-height: 1.7; text-shadow: 0 1px 0 rgba(255,255,255,0.45), 0 -1px 0 rgba(0,0,0,0.3);}
#workskin .stone::before {content: "✦"; display: block; margin-bottom: 0.5em; opacity: 0.55;}
#workskin .stone p {margin: 0.2em 0;}
#workskin .stone .source {margin-top: 1em; font-size: 0.72em; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.8;}
#workskin .stone.night {background: radial-gradient(ellipse at 50% 110%, rgba(255,166,64,0.38) 0%, rgba(255,166,64,0) 60%), linear-gradient(165deg, #4b4842 0%, #35322d 55%, #24221f 100%); color: #ecdcb8; text-shadow: 0 0 8px rgba(255,170,70,0.5), 0 1px 0 rgba(0,0,0,0.6); box-shadow: inset 0 2px 3px rgba(255,255,255,0.12), inset 0 -4px 12px rgba(0,0,0,0.5), 0 5px 14px rgba(0,0,0,0.45);}
#workskin .stone.night::before {content: "☾"; opacity: 0.7;}
#workskin .unsent {position: relative; max-width: 27em; margin: 2.6em auto 2.8em; padding: 1.3em 1.9em 2.1em; background: repeating-linear-gradient(to right, #f7f0dd 0, #f7f0dd 3px, #efe6cf 3px, #efe6cf 4px); color: #2e2a24; border: 1px solid #ddd0b3; box-shadow: inset 0 0 22px rgba(140,110,60,0.2), 0 3px 8px rgba(0,0,0,0.16);}
#workskin .unsent p {margin: 0.35em 0;}
#workskin .unsent .letterhead {margin: 0 0 1.1em; padding-bottom: 0.6em; border-bottom: 1px solid #cbbd9c; color: #6b5e48; font-family: Georgia, serif; font-size: 0.78em; font-variant: small-caps; letter-spacing: 0.16em; line-height: 1.6; text-align: center;}
#workskin .unsent .family {font-size: 1.4em; letter-spacing: 0.32em;}
#workskin .unsent .old {text-decoration: line-through; opacity: 0.8;}
#workskin .unsent .new {display: inline-block; color: #2e2a24; font-family: "Snell Roundhand", "Lucida Handwriting", "Apple Chancery", "Segoe Script", cursive; font-size: 1.2em; font-variant: normal; letter-spacing: 0; transform: rotate(-1.5deg);}
#workskin .unsent .script {font-family: "Snell Roundhand", "Lucida Handwriting", "Apple Chancery", "Segoe Script", cursive; font-size: 0.96em; line-height: 1.6; letter-spacing: -0.01em;}
#workskin .unsent .t1 {opacity: 0.7;}
#workskin .unsent .t2 {opacity: 0.42;}
#workskin .unsent .t3 {opacity: 0.18;}
#workskin .unsent .lift {display: inline-block; width: 3.5em; margin-left: 0.2em; border-bottom: 1px solid #2e2a24; opacity: 0.22; transform: rotate(-5deg); vertical-align: middle;}
#workskin .unsent::after {content: ""; position: absolute; right: 2.4em; bottom: 0.9em; width: 1.1em; height: 0.8em; border-radius: 50% 40% 55% 45%; background: radial-gradient(ellipse at 40% 40%, #2b2a3a 0%, #1d1c2a 60%, rgba(29,28,42,0) 100%); box-shadow: 1.1em -0.35em 0 -0.32em rgba(29,28,42,0.55); opacity: 0.75; transform: rotate(-12deg);}
#workskin .coinimg {margin: 2.8em auto; text-align: center;}
#workskin .coinimg img {width: 19em; max-width: 100%; height: auto; border-radius: 50%; box-shadow: 0 0 0 2px rgba(214,158,34,0.35), 0 0 26px 8px rgba(255,150,30,0.5), 0 0 64px 20px rgba(255,105,20,0.22);}
#workskin .coin {position: relative; width: 19em; height: 19em; margin: 2.6em auto; border-radius: 50%; font-family: "Palatino Linotype", Palatino, "Book Antiqua", "URW Palladio L", "TeX Gyre Pagella", Georgia, serif; text-align: center; background-image: radial-gradient(circle closest-side, rgba(255,168,72,0.45) 0, rgba(255,150,60,0.22) 74%, rgba(255,150,60,0) 87%), radial-gradient(0.95em 0.55em at 84% 15%, #d6c4a2 0, #ccb790 55%, rgba(204,183,144,0) 100%), radial-gradient(circle closest-side, #eee8dc 0, #f3efe6 72%, #e1d9ca 76.5%, #f6f2ea 81%, #fbf9f4 84%, #34548f 85%, #34548f 85.9%, #fbf9f4 86.6%, #fbf9f4 87.6%, #34548f 88.1%, #34548f 88.5%, #fdfcf8 89.2%, #fdfcf8 94%, #e4ded1 97.6%, #c8bfaf 100%); box-shadow: 0 6px 14px rgba(0,0,0,0.25), 0 1px 3px rgba(0,0,0,0.2);}
#workskin .coin::before, #workskin .coin::after {content: ""; position: absolute; left: 50%; top: 50%; height: 0.34em; margin-top: -0.17em; background-image: linear-gradient(to top right, rgba(78,62,46,0) 40%, rgba(78,62,46,0.75) 50%, rgba(78,62,46,0) 60%), linear-gradient(to bottom right, rgba(78,62,46,0) 40%, rgba(78,62,46,0.55) 50%, rgba(78,62,46,0) 60%); background-size: 42% 100%, 58% 100%; background-position: 0 0, 100% 0; background-repeat: no-repeat; transform-origin: 0 50%;}
#workskin .coin::before {width: 2.3em; transform: rotate(146deg) translateX(6.95em) scaleX(0.45);}
#workskin .coin::after {width: 1.9em; transform: rotate(-31deg) translateX(6.95em) scaleX(0.45);}
#workskin .coin p {margin: 0;}
#workskin .coin .galleon {position: absolute; left: 50%; top: 50%; width: 14em; height: 14em; margin: -7em 0 0 -7em; border-radius: 50%; background-image: radial-gradient(circle closest-side, rgba(255,204,128,0.5) 0, rgba(255,166,80,0.2) 46%, rgba(255,166,80,0) 74%), radial-gradient(circle at 34% 27%, rgba(255,247,212,0.6) 0, rgba(255,247,212,0) 28%), radial-gradient(circle at 71% 76%, rgba(92,54,12,0.34) 0, rgba(92,54,12,0) 24%), radial-gradient(circle at 22% 66%, rgba(92,54,12,0.26) 0, rgba(92,54,12,0) 17%), radial-gradient(circle at 62% 18%, rgba(92,54,12,0.2) 0, rgba(92,54,12,0) 14%), radial-gradient(circle closest-side, #e9bd55 0, #dcaa44 40%, #c8932f 66%, #a8761f 75.5%, #7c5212 77%, #e9c463 78.6%, #f3d57c 81%, #d9aa48 86%, #b07c26 90.5%, #80561a 92%, rgba(128,86,26,0) 92.4%), repeating-conic-gradient(#94672a 0deg 1.2deg, #c99a3e 1.2deg 2.4deg); box-shadow: 0 0 0 1px rgba(110,70,15,0.6), 0 0 14px 3px rgba(255,150,40,0.55), 0 0 34px 10px rgba(255,112,26,0.25);}
#workskin .coin .rim {position: absolute; left: 50%; top: 50%; width: 0; height: 0; color: rgba(92,52,10,0.8); font-size: 0.64em; font-weight: bold; line-height: 1; text-shadow: 0 1px 0 rgba(255,236,170,0.5), 0.12em 0 0.1em rgba(92,52,10,0.5), -0.12em 0 0.1em rgba(92,52,10,0.5); filter: blur(0.6px);}
#workskin .coin .rim span {position: absolute; left: 0; top: 0; width: 0; height: 0; line-height: 0;}
#workskin .coin .rim span::before, #workskin .coin .rim span::after {position: absolute; left: -0.5em; top: -0.5em; width: 1em; height: 1em; line-height: 1em; text-align: center;}
#workskin .coin .rim span::before {transform: translateY(-9.32em);}
#workskin .coin .rim span::after {transform: rotate(22.5deg) translateY(-9.32em);}
#workskin .coin .rim span:nth-child(2) {transform: rotate(45deg);}
#workskin .coin .rim span:nth-child(3) {transform: rotate(90deg);}
#workskin .coin .rim span:nth-child(4) {transform: rotate(135deg);}
#workskin .coin .rim span:nth-child(5) {transform: rotate(180deg);}
#workskin .coin .rim span:nth-child(6) {transform: rotate(225deg);}
#workskin .coin .rim span:nth-child(7) {transform: rotate(270deg);}
#workskin .coin .rim span:nth-child(8) {transform: rotate(315deg);}
#workskin .coin .rim span:nth-child(4n+1)::before {content: "0";}
#workskin .coin .rim span:nth-child(4n+1)::after {content: "3";}
#workskin .coin .rim span:nth-child(4n+2)::before {content: "0";}
#workskin .coin .rim span:nth-child(4n+2)::after {content: "7";}
#workskin .coin .rim span:nth-child(4n+3)::before {content: "3";}
#workskin .coin .rim span:nth-child(4n+3)::after {content: "1";}
#workskin .coin .rim span:nth-child(4n)::before {content: "1";}
#workskin .coin .rim span:nth-child(4n)::after {content: "0";}
#workskin .coin .face {position: absolute; left: 50%; top: 50%; width: 10.2em; padding: 0.9em 0; transform: translate(-50%, -50%); background-image: radial-gradient(ellipse closest-side, rgba(70,28,4,0.42) 0, rgba(70,28,4,0.24) 55%, rgba(70,28,4,0) 100%);}
#workskin .coin .legend {color: #fff0c4; font-size: 0.66em; font-weight: bold; letter-spacing: 0.09em; line-height: 1.42; text-shadow: 0 0 1px #6e2a00, 0 0 2px #8a3600, 0 0 5px rgba(255,124,24,0.9), 0 0 11px rgba(255,92,12,0.55);}
#workskin .coin .legend + .legend {margin-top: 0.6em;}
#workskin .coin .mark {margin-top: 0.75em; color: rgba(112,70,18,0.85); font-size: 0.54em; font-weight: bold; letter-spacing: 0.34em; text-shadow: 0 1px 0 rgba(255,238,180,0.6), 0 -1px 0 rgba(90,50,10,0.3);}
#workskin .pinned-note {position: relative; box-sizing: border-box; width: 94%; max-width: 28.9em; margin: 3em auto 2.6em; padding: 26px 1.6em 26px 3.3em; background: linear-gradient(to right, rgba(0,0,0,0) 2.4em, #e8a1a1 2.4em, #e8a1a1 2.5em, rgba(0,0,0,0) 2.5em), repeating-linear-gradient(to bottom, #fffef7 0, #fffef7 25px, #c4d7ea 25px, #c4d7ea 26px); color: #273a5e; font-family: "Segoe Print", "Bradley Hand", "Marker Felt", "Comic Sans MS", cursive; line-height: 26px; box-shadow: 1px 2px 0 rgba(0,0,0,0.05), 4px 9px 16px rgba(0,0,0,0.22); transform: rotate(-1.6deg);}
#workskin .pinned-note::before {content: ""; position: absolute; top: -9px; left: 50%; margin-left: -9px; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 32%, #ffb0b0 0%, #d01530 50%, #6e0716 100%); box-shadow: 2px 4px 4px rgba(0,0,0,0.35);}
#workskin .pinned-note p {margin: 0;}
#workskin .pinned-note .underlined {border-bottom: 3px double #273a5e;}
#workskin .pinned-note .source {margin-top: 26px; font-family: Georgia, serif; font-style: italic; font-size: 0.74em; line-height: 26px; color: #6b5f4b; text-align: right;}
#workskin .minutes {position: relative; max-width: 30em; margin: 2.6em auto; padding: 0 0 1.4em; background: #f7f6f1; color: #26231f; border: 1px solid #cbc5b8; box-shadow: 0 3px 9px rgba(0,0,0,0.18); font-family: "Courier New", Courier, monospace; font-size: 0.92em; line-height: 1.55; overflow: hidden;}
#workskin .minutes p {margin: 0.5em 1.4em;}
#workskin .minutes .letterhead {margin: 0 0 1.1em; padding: 0.7em 1.2em; background: #5a1a29; color: #f3e5c4; border-bottom: 3px double #c9a227; font-family: Georgia, serif; font-size: 0.82em; letter-spacing: 0.14em; line-height: 1.5; text-align: center; text-transform: uppercase;}
#workskin .minutes .source {margin-top: 1.2em; padding-right: 8.5em; font-size: 0.82em; color: #6a645a;}
#workskin .minutes::after {content: "MINUTED"; position: absolute; right: 1.1em; bottom: 1.1em; padding: 0.12em 0.45em; border: 3px solid #b3122a; border-radius: 5px; color: #b3122a; font-family: Georgia, serif; font-size: 1.15em; font-weight: bold; letter-spacing: 0.18em; transform: rotate(-12deg); opacity: 0.7;}
#workskin .leaflet {position: relative; max-width: 25em; margin: 2.6em auto; padding: 0 0 1.3em; background: radial-gradient(circle at 95.5% 57%, #f3dcf9 0, #b866d6 2px, #7a2f96 4px, rgba(122,47,150,0.25) 6px, rgba(122,47,150,0) 9px), radial-gradient(circle at 91.5% 66%, #f3dcf9 0, #b866d6 1.5px, #7a2f96 3px, rgba(122,47,150,0) 6px), radial-gradient(circle at 96% 73%, #b866d6 0, #7a2f96 1.5px, rgba(122,47,150,0) 3.5px), radial-gradient(circle at 3.2% 79%, #f3dcf9 0, #b866d6 1.5px, #7a2f96 3px, rgba(122,47,150,0.25) 5px, rgba(122,47,150,0) 7px), linear-gradient(to bottom, #fbfcf7 0%, #fbfcf7 62%, #eef2e8 62.4%, #fbfcf7 63%, #fbfcf7 100%); color: #24312a; border: 1px solid #c9d3c0; border-radius: 3px; box-shadow: 0 3px 9px rgba(0,0,0,0.18); font-family: "Gill Sans", "Gill Sans MT", "Trebuchet MS", Helvetica, Arial, sans-serif; line-height: 1.6; overflow: hidden;}
#workskin .leaflet p {margin: 0.55em 1.4em;}
#workskin .leaflet .hospital {display: flex; align-items: center; margin: 0; padding: 0.75em 1.6em; background: #a9d651; color: #1f3812; border-bottom: 3px solid #6f9f2a; font-size: 0.72em; font-weight: bold; letter-spacing: 0.08em; line-height: 1.35; text-transform: uppercase;}
#workskin .leaflet .crest {position: relative; display: inline-block; width: 2.9em; min-width: 2.9em; height: 2.9em; margin-right: 1em; border-radius: 50%; background: #1f3812; box-shadow: 0 0 0 2px #fbfcf7;}
#workskin .leaflet .crest::before {content: ""; position: absolute; left: 1.38em; top: 0.4em; width: 0.16em; height: 2.1em; background: #c99a5b; border-radius: 1px; transform: rotate(45deg);}
#workskin .leaflet .crest::after {content: ""; position: absolute; left: 1.15em; top: 0.45em; width: 0.6em; height: 2em; background: radial-gradient(circle at 24% 10%, #fbf8ec 0, #fbf8ec 0.15em, rgba(251,248,236,0) 0.17em), radial-gradient(circle at 76% 10%, #fbf8ec 0, #fbf8ec 0.15em, rgba(251,248,236,0) 0.17em), radial-gradient(circle at 24% 90%, #fbf8ec 0, #fbf8ec 0.15em, rgba(251,248,236,0) 0.17em), radial-gradient(circle at 76% 90%, #fbf8ec 0, #fbf8ec 0.15em, rgba(251,248,236,0) 0.17em), linear-gradient(to right, rgba(251,248,236,0) 30%, #fbf8ec 30%, #fbf8ec 70%, rgba(251,248,236,0) 70%); transform: rotate(-45deg);}
#workskin .leaflet .condition {margin: 0.55em 0.76em 0; color: #5d1f78; font-size: 1.85em; font-weight: bold; letter-spacing: 0.02em; line-height: 1.15;}
#workskin .leaflet .series {margin: 0.3em 1.9em 1em; padding-bottom: 0.9em; border-bottom: 1px solid #d5ddcc; color: #5f6b58; font-size: 0.74em; letter-spacing: 0.14em; text-transform: uppercase;}
#workskin .leaflet .warn {font-weight: bold; background: linear-gradient(to bottom, rgba(197,138,216,0) 58%, rgba(197,138,216,0.5) 58%);}
#workskin .leaflet::after {content: "Second Floor · Magical Bugs & Diseases"; display: block; margin: 1.7em 2.1em 0; padding-top: 0.7em; border-top: 1px solid #d5ddcc; color: #5f6b58; font-size: 0.66em; letter-spacing: 0.12em; text-transform: uppercase;}
#workskin .storybook {position: relative; max-width: 25em; margin: 2.8em auto; padding: 1.3em 2.3em 1.1em 2.7em; background: radial-gradient(circle at 12% 18%, rgba(150,110,50,0.16) 0, rgba(150,110,50,0) 1.4em), radial-gradient(circle at 88% 30%, rgba(150,110,50,0.12) 0, rgba(150,110,50,0) 1em), radial-gradient(circle at 76% 86%, rgba(150,110,50,0.15) 0, rgba(150,110,50,0) 1.6em), radial-gradient(circle at 30% 92%, rgba(150,110,50,0.1) 0, rgba(150,110,50,0) 0.8em), linear-gradient(to right, rgba(90,60,20,0.16) 0, rgba(90,60,20,0) 1.6em), linear-gradient(#f6eedb, #f6eedb); color: #2b2418; border: 1px solid #e0d3b4; border-radius: 1px 3px 3px 1px; box-shadow: 0 3px 10px rgba(0,0,0,0.2); font-family: Baskerville, "Baskerville Old Face", "Book Antiqua", Georgia, serif; line-height: 1.65;}
#workskin .storybook p {margin: 0.4em 0;}
#workskin .storybook .runninghead {margin: 0 0 1.2em; padding-bottom: 0.55em; border-bottom: 1px solid #d9c9a3; color: #8a7a5c; font-size: 0.62em; letter-spacing: 0.16em; text-align: center; text-transform: uppercase;}
#workskin .storybook .text {font-size: 1.06em;}
#workskin .storybook::before {content: ""; position: absolute; left: 0.5em; top: -0.5em; bottom: -0.5em; width: 1.3em; background: rgba(238,214,140,0.5); border-left: 1px solid rgba(190,160,80,0.35); border-right: 1px solid rgba(190,160,80,0.35); transform: rotate(0.6deg);}
#workskin .storybook .pencil {display: inline-block; padding: 0 0.3em; border: 1.5px solid rgba(110,110,110,0.6); border-radius: 50%; transform: rotate(-3deg); white-space: nowrap;}
#workskin .storybook .scrawl {margin: 0.6em 0 0.2em 30%; color: #6a6a6a; font-family: "Bradley Hand", "Segoe Print", "Chalkboard SE", "Comic Sans MS", cursive; font-size: 1.05em; letter-spacing: 0.02em; transform: rotate(-5deg);}
#workskin .storybook .folio {margin-top: 1.3em; color: #8a7a5c; font-size: 0.72em; letter-spacing: 0.2em; text-align: center;}
#workskin .storybook .source {margin: 0.2em 0 0; color: #8a7a5c; font-size: 0.66em; font-style: italic; letter-spacing: 0.04em; text-align: center;}
#workskin .remembrance {position: relative; max-width: 28em; margin: 2.6em auto 3em; padding: 1.4em 1.9em 2.2em; background: repeating-linear-gradient(to right, #fbf8f0 0, #fbf8f0 3px, #f3eee2 3px, #f3eee2 4px); color: #2d2925; border: 1px solid #ddd4c3; box-shadow: 0 3px 8px rgba(0,0,0,0.16);}
#workskin .remembrance p {margin: 0.4em 0;}
#workskin .remembrance .letterhead {margin: 0 0 1.2em; padding-bottom: 0.6em; border-bottom: 1px solid #c9bda6; color: #6b5e48; font-family: Georgia, serif; font-size: 0.8em; font-variant: small-caps; letter-spacing: 0.16em; line-height: 1.5; text-align: center;}
#workskin .remembrance .script {font-family: "Snell Roundhand", "Lucida Handwriting", "Apple Chancery", "Segoe Script", cursive; font-size: 1.1em; line-height: 1.65;}
#workskin .remembrance .source {margin-top: 1.2em; color: #6b5e48; font-family: Georgia, serif; font-size: 0.8em; font-style: italic; text-align: right;}
#workskin .remembrance::after {content: "✿"; position: absolute; left: 1.6em; bottom: -1em; width: 2.1em; height: 2.1em; border-radius: 50%; background: radial-gradient(circle at 36% 32%, #e24a52 0%, #a8131f 55%, #6a0912 100%); box-shadow: 1px 2px 4px rgba(0,0,0,0.4); color: #4e050c; font-size: 1.15em; line-height: 2.1em; text-align: center;}
#workskin .stars {max-width: 28em; margin: 2.6em auto; padding: 2.4em 2.6em 2em; background: radial-gradient(circle at 88% 80%, #ffc2a8 0, #ff7a55 2px, rgba(255,122,85,0.35) 3px, rgba(255,122,85,0) 8px), radial-gradient(circle at 6% 22%, #ffffff 0, rgba(255,255,255,0) 1.5px), radial-gradient(circle at 23% 10%, #ffffff 0, rgba(255,255,255,0) 2px), radial-gradient(circle at 47% 7%, #dfe8ff 0, rgba(223,232,255,0) 1.5px), radial-gradient(circle at 79% 13%, #ffffff 0, rgba(255,255,255,0) 2px), radial-gradient(circle at 95% 45%, #ffffff 0, rgba(255,255,255,0) 1.5px), radial-gradient(circle at 13% 84%, #ffffff 0, rgba(255,255,255,0) 2px), radial-gradient(circle at 4% 58%, #dbe5ff 0, rgba(219,229,255,0) 1.5px), radial-gradient(circle at 63% 92%, #ffffff 0, rgba(255,255,255,0) 1.5px), radial-gradient(ellipse at 50% 125%, #2c4473 0%, #131c38 55%, #070b18 100%); color: #e8e3d2; border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,0.35); text-align: center; font-family: Georgia, serif; font-size: 1.05em; font-style: italic; line-height: 1.7; text-shadow: 0 0 7px rgba(190,210,255,0.5);}
#workskin .stars p {margin: 0.2em 0;}
#workskin .stars .source {margin-top: 1em; font-size: 0.74em; font-style: normal; font-variant: small-caps; letter-spacing: 0.12em; opacity: 0.8;}
#workskin .stars .source i {font-style: italic; font-variant: normal; letter-spacing: 0;}
#workskin .clipping {position: relative; max-width: 26em; margin: 3em auto 2.6em; padding: 0 0 1em; background: #fffafc; color: #3a2531; border: 2px dashed #c7a1b3; box-shadow: 3px 6px 12px rgba(0,0,0,0.18); font-family: "Didot", "Bodoni MT", Georgia, serif; transform: rotate(1.2deg);}
#workskin .clipping::before {content: "✂"; position: absolute; top: -1.05em; left: 0.4em; color: #8d6b7c; font-size: 1.3em;}
#workskin .clipping p {margin: 0.45em 1.3em; line-height: 1.55;}
#workskin .clipping .masthead {margin: 0 0 0.9em; padding: 0.45em 1.2em; background: linear-gradient(90deg, #7a2b5c 0%, #c4487f 100%); color: #ffffff; font-size: 1.1em; font-style: italic; letter-spacing: 0.03em;}
#workskin .clipping .masthead .column {float: right; margin-top: 0.4em; font-size: 0.62em; font-style: normal; letter-spacing: 0.22em; text-transform: uppercase;}
#workskin .clipping .quote::first-letter {float: left; margin: 0.06em 0.08em 0 0; color: #7a2b5c; font-size: 2.7em; line-height: 0.85;}
#workskin .clipping .source {color: #7b6070; font-size: 0.8em; font-style: italic; text-align: right;}
#workskin .prophet {max-width: 22em; margin: 2.6em auto; padding: 0.7em 1.3em 1em; background: #ecebe3; color: #1e1d1a; border-top: 5px double #1e1d1a; border-bottom: 1px solid #1e1d1a; box-shadow: 0 3px 8px rgba(0,0,0,0.15); font-family: "Times New Roman", Times, Georgia, serif;}
#workskin .prophet p {margin: 0.3em 0;}
#workskin .prophet .masthead {font-family: "Old English Text MT", "Engravers Old English", "UnifrakturMaguntia", Georgia, serif; font-size: 1.6em; line-height: 1.2; text-align: center;}
#workskin .prophet .section {margin: 0.4em 0 0.8em; padding: 0.2em 0; border-top: 1px solid #1e1d1a; border-bottom: 1px solid #1e1d1a; font-size: 0.68em; letter-spacing: 0.35em; text-align: center; text-transform: uppercase;}
#workskin .prophet .notice {font-size: 0.93em; line-height: 1.45; text-align: justify; hyphens: auto;}
#workskin .prophet .notice::first-line {font-variant: small-caps; letter-spacing: 0.04em;}
#workskin .prophet .source {margin-top: 0.7em; font-size: 0.75em; font-style: italic; text-align: right; color: #55524b;}
#workskin .headstone {max-width: 16em; margin: 3.2em auto 3em; padding: 2.8em 1.5em 1.9em; background: radial-gradient(circle at 30% 18%, #c9c6bf 0%, #aaa79f 45%, #8a877f 100%); color: #45423c; border-radius: 8em 8em 5px 5px; box-shadow: inset 0 3px 6px rgba(255,255,255,0.3), inset 0 -6px 14px rgba(0,0,0,0.32), 0 9px 0 -3px #6d6a63, 0 12px 16px rgba(0,0,0,0.35); text-align: center; font-family: "Copperplate", "Copperplate Gothic Light", "Trajan Pro", Georgia, serif; letter-spacing: 0.1em; text-shadow: 0 1px 0 rgba(255,255,255,0.42), 0 -1px 0 rgba(0,0,0,0.32);}
#workskin .headstone::before {content: "❦"; display: block; margin-bottom: 0.4em; font-size: 1.4em; opacity: 0.55;}
#workskin .headstone p {margin: 0.25em 0;}
#workskin .headstone .name {font-size: 0.95em; text-transform: uppercase;}
#workskin .headstone .dates {font-size: 0.78em; letter-spacing: 0.18em;}
#workskin .headstone .epitaph {margin-top: 0.8em; font-size: 1.45em; font-style: italic; letter-spacing: 0.06em;}
#workskin .headstone .source {margin-top: 1.4em; font-size: 0.62em; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.75;}
#workskin .getwell {position: relative; max-width: 25em; margin: 2.8em auto; padding: 1.8em 1.8em 2.6em 2.5em; background: radial-gradient(circle at 84% 80%, rgba(139,94,60,0) 0, rgba(139,94,60,0) 1.5em, rgba(139,94,60,0.26) 1.58em, rgba(139,94,60,0.1) 1.75em, rgba(139,94,60,0) 1.85em), radial-gradient(circle at 10% 9%, #d9a6ea 0, #8a3aa8 3px, rgba(122,47,150,0) 6px), radial-gradient(circle at 94% 7%, #d9a6ea 0, #8a3aa8 2px, rgba(122,47,150,0) 5px), radial-gradient(circle at 5% 62%, #8a3aa8 0, #8a3aa8 2px, rgba(122,47,150,0) 4px), linear-gradient(to right, rgba(0,0,0,0.13) 0, rgba(0,0,0,0) 1.3em), linear-gradient(#fdfaf2, #fdfaf2); color: #2a2a2a; border: 1px solid #d9d2c3; border-radius: 2px; box-shadow: 0 4px 12px rgba(0,0,0,0.22); transform: rotate(-1deg); line-height: 1.5;}
#workskin .getwell p {margin: 0.55em 0;}
#workskin .getwell .printed {margin: 0 0 1em; text-align: center; color: #c0567a; font-family: "Brush Script MT", "Snell Roundhand", "Apple Chancery", cursive; font-size: 2em; line-height: 1.2;}
#workskin .getwell .printed .mrs {display: block; margin-top: 0.15em; color: #1f3a8a; font-family: "Marker Felt", "Segoe Print", "Comic Sans MS", cursive; font-size: 0.5em; letter-spacing: 0.08em; transform: rotate(-3deg);}
#workskin .getwell .sig {font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive; font-size: 0.95em;}
#workskin .getwell .s1 {color: #1f3a8a; transform: rotate(-2deg);}
#workskin .getwell .s2, #workskin .getwell .s6 {color: #151515; font-family: Georgia, "Times New Roman", serif; font-style: italic;}
#workskin .getwell .s2 {text-align: right;}
#workskin .getwell .s6 {font-size: 0.82em;}
#workskin .getwell .s3 {color: #6b6b6b; font-family: "Courier New", Courier, monospace; font-size: 0.85em; transform: rotate(1.5deg);}
#workskin .getwell .s4 {color: #1e6b3a; font-family: "Lucida Handwriting", "Segoe Script", cursive; font-size: 0.85em;}
#workskin .getwell .s5 {color: #c22a2a; font-family: "Marker Felt", "Chalkboard SE", "Comic Sans MS", cursive; transform: rotate(-3deg);}
#workskin .getwell .s7 {margin-top: 1.2em; color: #0b5d3b; font-family: "Bradley Hand", "Segoe Print", cursive; text-align: right; transform: rotate(2deg);}
#workskin .getwell::after {content: "Gambol & Japes \00B7  Cards for Every Occasion"; position: absolute; left: 0; right: 0; bottom: 0.7em; text-align: center; color: #a39a88; font-family: Georgia, serif; font-size: 0.6em; letter-spacing: 0.14em; text-transform: uppercase;}
#workskin .teamsheet {max-width: 25em; margin: 2.8em auto; padding: 1.5em 1.6em 1.3em; background: radial-gradient(ellipse at 20% 28%, rgba(255,255,255,0.07) 0, rgba(255,255,255,0) 38%), radial-gradient(ellipse at 80% 70%, rgba(255,255,255,0.06) 0, rgba(255,255,255,0) 42%), radial-gradient(ellipse at 55% 8%, rgba(255,255,255,0.05) 0, rgba(255,255,255,0) 28%), linear-gradient(170deg, #34413a 0%, #29342e 55%, #212a25 100%); color: #ecebe3; border: 12px solid #6e4b2c; box-shadow: 0 0 0 2px #3c2814, inset 0 0 0 3px #4d331c, inset 0 0 28px rgba(0,0,0,0.5), 0 6px 14px rgba(0,0,0,0.32); font-family: Chalkduster, "Chalkboard SE", "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive; line-height: 1.35;}
#workskin .teamsheet p {margin: 0;}
#workskin .teamsheet .day {margin-bottom: 0.8em; text-align: center; letter-spacing: 0.3em;}
#workskin .teamsheet .day span {padding: 0 0.2em 0.1em 0.5em; border-bottom: 4px double rgba(236,235,227,0.8);}
#workskin .teamsheet .pos {display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; padding: 0.4em 0; border-bottom: 1px dashed rgba(236,235,227,0.16);}
#workskin .teamsheet .title {margin-right: 1em; letter-spacing: 0.1em; text-transform: uppercase;}
#workskin .teamsheet .who {margin-left: auto; font-size: 0.9em; text-align: right; color: #d9d8cf;}
#workskin .teamsheet .small {font-size: 0.8em; color: #b9b8ae;}
#workskin .teamsheet .snitch .title {color: #e9c14b; text-shadow: 0 0 6px rgba(233,193,75,0.55);}
#workskin .teamsheet .keepers .title {font-size: 1.5em; letter-spacing: 0.06em; border-bottom: 2px solid #ecebe3; transform: rotate(-1.5deg);}
#workskin .teamsheet .medi s {color: #9d9c93;}
#workskin .teamsheet .george .title {font-size: 2.3em; line-height: 0.9; transform: rotate(8deg);}
#workskin .teamsheet .percy {font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 0.78em; color: #cfcec5;}
#workskin .teamsheet .later {margin-top: 1em; padding: 0.4em 0.6em 0.5em; border: 1px solid rgba(236,235,227,0.22); font-size: 0.82em; transform: rotate(-1deg);}
#workskin .teamsheet .later .title {display: block; margin-bottom: 0.2em;}
#workskin .teamsheet .later .smudge::before {content: ""; display: inline-block; width: 9em; height: 0.35em; border-radius: 0.3em; background: rgba(236,235,227,0.16); box-shadow: 0 0 5px 2px rgba(236,235,227,0.08); vertical-align: middle;}
#workskin .teamsheet .later .s2::before {width: 6.5em;}
#workskin .teamsheet .later .s3::before {width: 11em;}
#workskin .teamsheet .draco {margin-top: 0.9em; text-align: right; color: #f4f3ec; font-family: "Snell Roundhand", "Apple Chancery", "Lucida Calligraphy", "Segoe Script", cursive; font-size: 0.85em;}
#workskin .exhibit {position: relative; max-width: 32em; margin: 3.6em auto 2.6em; padding: 0.9em 0.7em 1em; background: linear-gradient(170deg, #e8d6a8 0%, #dcc591 100%); color: #2a2620; border: 1px solid #bda56c; border-radius: 0 5px 5px 5px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 3px 10px rgba(0,0,0,0.22); font-family: Georgia, "Times New Roman", serif;}
#workskin .exhibit::before {content: "Exhibit A"; position: absolute; left: -1px; top: -2.3em; height: 2.3em; padding: 0 1.4em; background: #e8d6a8; border: 1px solid #bda56c; border-bottom: none; border-radius: 7px 7px 0 0; color: #7a1f1f; font-family: Georgia, serif; font-size: 0.74em; font-weight: bold; letter-spacing: 0.22em; line-height: 2.4em; text-transform: uppercase;}
#workskin .exhibit p {margin: 0;}
#workskin .exhibit .label {max-width: 22em; margin: 0 auto 0.4em; padding: 0.35em 0.8em; background: #fffdf6; border: 1px solid #c9b78a; border-radius: 3px; color: #23314f; font-family: "Bradley Hand", "Segoe Print", "Chalkboard SE", cursive; font-size: 0.8em; line-height: 1.4; text-align: center;}
#workskin .exhibit .pair {display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;}
#workskin .exhibit .memo {position: relative; flex: 1 1 10.5em; max-width: 14.5em; margin: 1.5em 0.4em 0.3em; padding: 1.3em 0.9em 0.9em; background: #fbf8ef; border: 1px solid #ddd5c2; box-shadow: 0 2px 6px rgba(0,0,0,0.2);}
#workskin .exhibit .was {transform: rotate(-1.4deg);}
#workskin .exhibit .now {transform: rotate(1.2deg);}
#workskin .exhibit .printed {margin-bottom: 0.7em; padding-bottom: 0.45em; border-bottom: 1px solid #d8cfba; color: #6a6355; font-size: 0.54em; letter-spacing: 0.14em; line-height: 1.6; text-align: center; text-transform: uppercase;}
#workskin .exhibit .tag {position: absolute; top: -1.15em; right: 0.5em; padding: 0.15em 0.6em 0.15em 1.3em; background: #ffffff; border: 1px solid #c8c2b2; box-shadow: 0 1px 2px rgba(0,0,0,0.15); color: #7a1f1f; font-family: "Bradley Hand", "Segoe Print", "Chalkboard SE", cursive; font-size: 0.72em; transform: rotate(3deg);}
#workskin .exhibit .tag::before {content: ""; position: absolute; left: 0.35em; top: -0.55em; width: 0.45em; height: 1.5em; border: 2px solid #9aa0a7; border-radius: 0.3em;}
#workskin .exhibit .hand-a {color: #1d2740; font-family: "Segoe Script", "Lucida Handwriting", "Apple Chancery", cursive; font-size: 0.72em; letter-spacing: -0.05em; line-height: 1.35; transform: skewX(-14deg);}
#workskin .exhibit .hand-b {color: #1d2740; font-family: "Chalkboard SE", "Comic Sans MS", "Marker Felt", "Segoe Print", cursive; font-size: 1.1em; letter-spacing: 0.02em; line-height: 1.35;}
#workskin .exhibit .date {margin-bottom: 0.4em; text-align: right;}
#workskin .exhibit .sig {margin-top: 0.6em;}
#workskin .exhibit .hand-a.sig {font-size: 0.8em;}
#workskin .exhibit .hand-b.sig {font-size: 1.25em;}
#workskin .tome {position: relative; max-width: 26em; margin: 2.6em auto;}
#workskin .tome p {margin: 0.3em 0;}
#workskin .tome.binding {max-width: 14.5em; padding: 3.4em 1.6em 3.2em; background: radial-gradient(circle at 22% 28%, rgba(255,255,255,0.05) 0, rgba(255,255,255,0) 2.4em), radial-gradient(circle at 78% 74%, rgba(255,255,255,0.04) 0, rgba(255,255,255,0) 3em), linear-gradient(to right, #050506 0, #19191c 0.8em, #222226 1.1em, #151517 100%); color: #c4c8ce; border-radius: 2px 8px 8px 2px; outline: 1px solid rgba(196,200,206,0.4); outline-offset: -0.8em; box-shadow: inset 0 0 1.4em rgba(0,0,0,0.75), 0 5px 12px rgba(0,0,0,0.4); text-align: center; font-family: "Trajan Pro", Copperplate, "Copperplate Gothic Light", Georgia, serif; letter-spacing: 0.08em; line-height: 1.45; text-shadow: 0 1px 0 #000000, 0 0 4px rgba(196,200,206,0.3);}
#workskin .tome.binding::after {content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: radial-gradient(circle at 34% 22%, #1d1d20 0, #1d1d20 0.14em, rgba(29,29,32,0) 0.2em), radial-gradient(circle at 61% 25%, #1d1d20 0, #1d1d20 0.1em, rgba(29,29,32,0) 0.16em), radial-gradient(ellipse at 47% 31%, #1d1d20 0, #1d1d20 0.18em, rgba(29,29,32,0) 0.26em), radial-gradient(circle at 70% 47%, #1d1d20 0, #1d1d20 0.12em, rgba(29,29,32,0) 0.18em), radial-gradient(circle at 29% 52%, #1d1d20 0, #1d1d20 0.09em, rgba(29,29,32,0) 0.15em), radial-gradient(ellipse at 55% 70%, #1d1d20 0, #1d1d20 0.15em, rgba(29,29,32,0) 0.22em), radial-gradient(circle at 40% 82%, #1d1d20 0, #1d1d20 0.11em, rgba(29,29,32,0) 0.17em);}
#workskin .tome .t1 {font-size: 1.15em; font-variant: small-caps; letter-spacing: 0.1em;}
#workskin .tome .t2 {margin: 1em 0; padding: 0.7em 0; border-top: 1px solid rgba(196,200,206,0.35); border-bottom: 1px solid rgba(196,200,206,0.35); font-size: 0.66em; font-style: italic; letter-spacing: 0.06em;}
#workskin .tome .t3 {font-size: 0.78em; font-variant: small-caps; letter-spacing: 0.14em;}
#workskin .tome .t4 {margin-top: 1em; font-size: 0.7em; letter-spacing: 0.3em;}
#workskin .tome.page {padding: 1.4em 2em 1.5em; font-family: Georgia, "Times New Roman", serif; background: radial-gradient(circle at 14% 22%, rgba(120,72,30,0.22) 0, rgba(120,72,30,0) 0.9em), radial-gradient(circle at 84% 14%, rgba(120,72,30,0.16) 0, rgba(120,72,30,0) 0.6em), radial-gradient(circle at 72% 80%, rgba(120,72,30,0.2) 0, rgba(120,72,30,0) 1.3em), radial-gradient(circle at 28% 90%, rgba(120,72,30,0.12) 0, rgba(120,72,30,0) 0.7em), radial-gradient(ellipse at 50% 45%, #e4d2aa 0%, #d6bd8f 70%, #c3a272 100%); color: #2a1a0e; border-radius: 2px; box-shadow: 0 3px 10px rgba(0,0,0,0.25);}
#workskin .tome .runninghead {margin-bottom: 0.9em; color: #6e5232; font-family: Georgia, serif; font-size: 0.66em; font-style: italic; letter-spacing: 0.12em; text-align: center;}
#workskin .tome .phineas {font-family: "Apple Chancery", "Lucida Calligraphy", "Monotype Corsiva", "Lucida Handwriting", cursive; font-size: 1em; letter-spacing: -0.02em; line-height: 1.55;}
#workskin .tome .phineas::first-letter {float: left; margin: 0.06em 0.1em 0 0; color: #5a160f; font-size: 2.7em; line-height: 0.85;}
#workskin .tome .finis {color: #6e5232; font-size: 1.1em; text-align: center; opacity: 0.8;}
#workskin .tome .later {margin: 1.2em 3.2em 0 0; color: #7d5a3a; font-family: "Snell Roundhand", "Segoe Script", "Lucida Handwriting", cursive; font-size: 0.86em; letter-spacing: 0.02em; line-height: 1.5; opacity: 0.7;}
#workskin .tome .folio {margin-top: 1em; color: #6e5232; font-family: Georgia, serif; font-size: 0.7em; letter-spacing: 0.2em; text-align: center;}
#workskin .tome.foot::after {content: "D.M."; position: absolute; right: 1.6em; bottom: 2.2em; width: 3.1em; height: 3.1em; border: 2px solid rgba(80,40,70,0.32); border-radius: 50%; color: rgba(80,40,70,0.38); font-family: Georgia, serif; font-size: 0.72em; font-weight: bold; letter-spacing: 0.08em; line-height: 3.1em; text-align: center; transform: rotate(-16deg);}
#workskin .roll {position: relative; max-width: 32em; margin: 2.6em auto; padding: 1.1em 1.2em 1.3em; background: repeating-linear-gradient(to right, #fbf8f0 0, #fbf8f0 3px, #f3eee2 3px, #f3eee2 4px); color: #2d2925; border: 1px solid #d9cfbd; box-shadow: 0 3px 8px rgba(0,0,0,0.16); font-family: Georgia, serif;}
#workskin .roll p {margin: 0;}
#workskin .roll .letterhead {margin-bottom: 0.8em; padding-bottom: 0.5em; border-bottom: 1px solid #c9bda6; color: #6b5e48; font-size: 0.78em; font-variant: small-caps; letter-spacing: 0.16em; line-height: 1.5; text-align: center;}
#workskin .roll .poppy {color: #b3121f;}
#workskin .roll table {width: 100%; margin: 0; border-collapse: collapse;}
#workskin .roll th {padding: 0.2em 0.35em 0.35em; border: none; border-bottom: 1px solid #b9ab8f; background: transparent; color: #6b5e48; font-size: 0.62em; font-weight: normal; letter-spacing: 0.12em; text-align: left; text-transform: uppercase; vertical-align: bottom;}
#workskin .roll td {padding: 0.45em 0.35em; border: none; border-bottom: 1px solid #e0d6c3; background: transparent; font-size: 0.86em; line-height: 1.3; vertical-align: bottom;}
#workskin .roll .lost {border-left: 1px solid #d3c6ad;}
#workskin .roll .hand1 td {color: #26304f; font-family: "Segoe Print", "Bradley Hand", "Chalkboard SE", cursive;}
#workskin .roll .hand2 td {color: #3b2a22; font-family: "Lucida Handwriting", "Apple Chancery", "Segoe Script", cursive; font-size: 0.8em;}
#workskin .roll .more td {height: 1.4em; border-bottom: 1px solid #e0d6c3;}
#workskin .roll.fresh {max-width: 22em; padding: 1.2em 1.5em 1.3em;}
#workskin .roll .ink {color: #08080f; font-family: "Segoe Script", "Snell Roundhand", "Lucida Handwriting", cursive; font-size: 1.12em; line-height: 1.5; text-align: center; text-shadow: 0 0 1px rgba(8,8,15,0.9), -1px -1px 0 rgba(255,255,255,0.7), 0 0 3px rgba(40,50,110,0.35); transform: rotate(-2deg);}
#workskin .access {position: relative; max-width: 27em; margin: 2.6em auto; padding: 0 0 3.6em; background: #f4f3ee; color: #1f1f24; border: 1px solid #c9c7bd; box-shadow: 0 3px 9px rgba(0,0,0,0.2); font-family: Georgia, "Times New Roman", serif; overflow: hidden;}
#workskin .access p {margin: 0.6em 1.4em;}
#workskin .access .dept {margin: 0 0 1em; padding: 0.75em 1.2em 0.65em; background: #16152b; color: #cfd2dc; border-bottom: 3px double #8f93a3; font-size: 0.68em; letter-spacing: 0.24em; line-height: 1.6; text-align: center; text-transform: uppercase;}
#workskin .access .form {font-size: 1.02em; font-weight: bold; letter-spacing: 0.08em; text-align: center; text-transform: uppercase;}
#workskin .access .oversight {margin-top: -0.3em; margin-bottom: 1.1em; color: #5c5b63; font-size: 0.7em; font-style: italic; text-align: center;}
#workskin .access .field {display: flex; flex-wrap: wrap; align-items: baseline; padding-bottom: 0.25em; border-bottom: 1px dotted #a9a7a0;}
#workskin .access .label {flex: none; min-width: 12.5em; color: #5c5b63; font-size: 0.66em; letter-spacing: 0.14em; text-transform: uppercase;}
#workskin .access .fill {flex: 0 1 auto; color: #1d2a5a; font-family: "Segoe Script", "Lucida Handwriting", "Apple Chancery", cursive; font-size: 0.92em;}
#workskin .access .seal {display: inline-block; width: 2.1em; height: 2.1em; margin: -0.5em 0.3em -0.5em 0.5em; border-radius: 48% 52% 50% 46%; background: radial-gradient(circle at 38% 34%, #e0545a 0%, #a8131f 55%, #6a0912 100%); box-shadow: 1px 2px 3px rgba(0,0,0,0.35); color: #57060f; font-family: Georgia, serif; font-size: 0.9em; font-weight: bold; line-height: 2.1em; text-align: center; text-shadow: 0 1px 0 rgba(255,255,255,0.25); vertical-align: middle;}
#workskin .access .small {color: #5c5b63; font-family: Georgia, serif; font-size: 0.66em; font-style: italic;}
#workskin .access .stroud {color: #1d2a5a; font-family: "Chalkboard SE", "Comic Sans MS", "Segoe Print", cursive; font-size: 1.05em;}
#workskin .access .stamp {position: absolute; right: 0.9em; bottom: 0.9em; padding: 0.3em 0.6em; border: 2px solid rgba(30,70,150,0.6); border-radius: 4px; color: rgba(30,70,150,0.75); font-family: "Courier New", Courier, monospace; font-size: 0.64em; font-weight: bold; letter-spacing: 0.1em; line-height: 1.4; text-align: center; text-transform: uppercase; transform: rotate(-7deg);}
#workskin .diary {max-width: 34em; margin: 2.6em auto; padding: 1.1em 0.8em 1em; background: radial-gradient(ellipse at 50% 40%, #f8f2e1 0%, #f1e7cf 75%, #e8dabb 100%); color: #23314f; border: 1px solid #ddd0ae; box-shadow: 0 3px 9px rgba(0,0,0,0.18); font-family: "Bradley Hand", "Segoe Print", "Chalkboard SE", cursive;}
#workskin .diary p {margin: 0;}
#workskin .diary .title {margin: 0 0.4em; font-size: 0.98em; letter-spacing: 0.03em; text-align: center;}
#workskin .diary .week {margin: 0.1em 0.4em 0.7em; font-size: 0.72em; text-align: center;}
#workskin .diary .days {display: flex; flex-wrap: wrap;}
#workskin .diary .day {flex: 1 1 13em; margin: 0.3em; padding: 0.35em 0.55em 0.5em; border: 1px solid #8d9ab5;}
#workskin .diary .date {margin-bottom: 0.3em; padding-bottom: 0.15em; border-bottom: 1px solid #8d9ab5; font-size: 0.82em; font-weight: bold;}
#workskin .diary .appt {font-size: 0.7em; letter-spacing: -0.01em; line-height: 1.3;}
#workskin .diary .over {margin-top: 0.25em; color: #3e4f78; font-size: 0.6em; line-height: 1.25; transform: rotate(-1.5deg);}
#workskin .diary .blank {min-height: 7em;}
#workskin .diary .half {margin-top: 0.5em; padding-top: 0.25em; border-top: 1px solid #8d9ab5;}
#workskin .diary .copy {margin: 0.6em 0.5em 0; font-size: 0.68em; text-align: right;}
#workskin .badge {max-width: 11.5em; margin: 2.8em auto; padding: 1.3em 1.1em 1.2em; background: radial-gradient(circle at 7% 8%, #8c9198 0, #8c9198 0.13em, rgba(140,145,152,0) 0.2em), radial-gradient(circle at 93% 8%, #8c9198 0, #8c9198 0.13em, rgba(140,145,152,0) 0.2em), radial-gradient(circle at 7% 92%, #8c9198 0, #8c9198 0.13em, rgba(140,145,152,0) 0.2em), radial-gradient(circle at 93% 92%, #8c9198 0, #8c9198 0.13em, rgba(140,145,152,0) 0.2em), linear-gradient(135deg, #f3f5f7 0%, #c3c8ce 28%, #eef0f2 48%, #a6acb3 72%, #dfe2e6 100%); color: #3c4148; border-radius: 6px; outline: 1px solid rgba(60,65,72,0.35); outline-offset: -0.55em; box-shadow: inset 0 1px 1px rgba(255,255,255,0.9), inset 0 -2px 3px rgba(0,0,0,0.25), 0 0 0 1px #8b9097, 0 4px 10px rgba(0,0,0,0.3); text-align: center; font-family: Copperplate, "Copperplate Gothic Light", "Trajan Pro", Georgia, serif; line-height: 1.35; text-shadow: 0 1px 0 rgba(255,255,255,0.85), 0 -1px 0 rgba(0,0,0,0.2); transform: rotate(-3deg);}
#workskin .badge p {margin: 0.35em 0;}
#workskin .badge .kind {font-size: 0.66em; letter-spacing: 0.4em; text-transform: uppercase;}
#workskin .badge .name {margin: 0.5em 0 0.4em; font-size: 1.25em; letter-spacing: 0.06em;}
#workskin .badge .purpose {font-size: 0.78em; font-style: italic; letter-spacing: 0.03em;}
#workskin .badge .issued {margin-top: 0.8em; padding-top: 0.5em; border-top: 1px solid rgba(60,65,72,0.3); font-size: 0.56em; letter-spacing: 0.16em; text-transform: uppercase;}
#workskin .tithe {position: relative; max-width: 24em; margin: 2.6em auto; padding: 0.3em 1.6em 1em 1.8em; background: radial-gradient(circle at 84% 14%, rgba(140,100,50,0.08) 0, rgba(140,100,50,0) 1.1em), radial-gradient(circle at 18% 86%, rgba(140,100,50,0.1) 0, rgba(140,100,50,0) 0.8em), radial-gradient(circle at 66% 62%, rgba(140,100,50,0.07) 0, rgba(140,100,50,0) 0.6em), radial-gradient(ellipse at 55% 42%, #f0e9d6 0%, #e9e0c8 62%, #dacdae 100%); color: #2a1c12; border-left: 14px solid #1e1416; border-radius: 0 3px 3px 0; box-shadow: inset 1.6em 0 1.3em -1.2em rgba(60,35,15,0.38), 0 1px 0 #d8ccaf, 0 2px 0 #c7b996, 0 3px 0 #d8ccaf, 0 4px 0 #c2b38f, 0 6px 12px rgba(0,0,0,0.28); font-family: "Snell Roundhand", "Apple Chancery", "Lucida Handwriting", "Segoe Script", cursive; font-size: 1.06em; line-height: 1.4em;}
#workskin .tithe p {margin: 0;}
#workskin .tithe .title {margin: 0 -1.1034em 0 -1.2414em; padding: 0.3em 1.1034em 0.25em 1.2414em; border-bottom: 3px double rgba(155,28,28,0.75); color: #9b1c1c; font-size: 1.45em; line-height: 1.5em; text-align: center;}
#workskin .tithe .entry, #workskin .tithe .known, #workskin .tithe .blur, #workskin .tithe .gap {margin: 0 -1.6em 0 -1.8em; padding: 0.6em 1.6em 0 1.8em; line-height: 1.4em; white-space: nowrap; background: linear-gradient(to right, rgba(155,28,28,0) 4.1em, rgba(155,28,28,0.45) 4.1em, rgba(155,28,28,0.45) 4.16em, rgba(155,28,28,0) 4.16em, rgba(155,28,28,0) 4.26em, rgba(155,28,28,0.45) 4.26em, rgba(155,28,28,0.45) 4.32em, rgba(155,28,28,0) 4.32em), linear-gradient(to left, rgba(155,28,28,0) 7.9em, rgba(155,28,28,0.45) 7.9em, rgba(155,28,28,0.45) 7.96em, rgba(155,28,28,0) 7.96em), repeating-linear-gradient(to bottom, rgba(80,105,125,0) 0, rgba(80,105,125,0) 1.92em, rgba(80,105,125,0.3) 1.92em, rgba(80,105,125,0.3) 2em); text-shadow: 0 0 0.6px rgba(42,28,18,0.5);}
#workskin .tithe .no {display: inline-block; width: 2.05em; margin-right: 0.75em; text-align: right;}
#workskin .tithe .tick {float: right; width: 6em; color: #9b1c1c; text-align: right; text-shadow: 0 0 0.6px rgba(155,28,28,0.5);}
#workskin .tithe .known::before, #workskin .tithe .blur::before {content: ""; display: inline-block; width: 1.3em; height: 0.34em; margin: 0 0.9em 0 0.6em; border-radius: 0.3em; background: rgba(42,28,18,0.2); box-shadow: 0 0 5px 2px rgba(42,28,18,0.1); vertical-align: 0.2em;}
#workskin .tithe .blur::after {content: ""; display: inline-block; width: 10em; height: 0.36em; border-radius: 0.3em; background: rgba(42,28,18,0.2); box-shadow: 0 0 5px 3px rgba(42,28,18,0.1); vertical-align: 0.2em;}
#workskin .tithe .blur.b2::after {width: 7em;}
#workskin .tithe .blur.b3::after {width: 11.5em;}
#workskin .tithe .known {color: #1a110a; text-shadow: 0 0 0.7px rgba(26,17,10,0.6);}
#workskin .tithe .f1 {opacity: 0.55;}
#workskin .tithe .f2 {opacity: 0.3;}
#workskin .tithe .f3 {opacity: 0.12;}
#workskin .tithe .hard {margin-bottom: -0.3em; padding: 0.3em 1.6em 0 4.6em; color: #0a0604; line-height: 2em; text-indent: -2.8em; white-space: normal; text-shadow: 0 0 1px rgba(10,6,4,0.9), 0.5px 0.3px 0 rgba(10,6,4,0.7), -0.3px 0 0 rgba(10,6,4,0.5), 0 1.5px 0 rgba(255,250,235,0.55);}
#workskin .tithe .hard::after {content: ""; display: inline-block; width: 0.5em; height: 0.42em; margin-left: 0.12em; border-radius: 55% 45% 60% 40%; background: radial-gradient(circle at 42% 40%, #0a0604 0, #0a0604 50%, rgba(10,6,4,0) 74%); box-shadow: 0.5em -0.08em 0 -0.16em rgba(10,6,4,0.8), 0.28em 0.36em 0 -0.18em rgba(10,6,4,0.6); text-indent: 0; vertical-align: 0;}
#workskin .tithe.verso {padding: 2.4em 1.8em 2.2em 1.6em; border-left: none; border-right: 14px solid #1e1416; border-radius: 3px 0 0 3px; box-shadow: inset -1.6em 0 1.3em -1.2em rgba(60,35,15,0.38), 0 1px 0 #d8ccaf, 0 2px 0 #c7b996, 0 3px 0 #d8ccaf, 0 4px 0 #c2b38f, 0 6px 12px rgba(0,0,0,0.28); line-height: 2em; text-align: center;}
#workskin .tithe.verso::before {content: "100. Malfoy, Draco. Reserved. All Hallows."; position: absolute; right: 2.2em; bottom: 0.6em; color: #0a0604; opacity: 0.08; text-shadow: 0 0 1px #0a0604; white-space: nowrap; transform: scaleX(-1);}
#workskin .tithe.verso::after {content: "99. Burke, Ambrose."; position: absolute; right: 2.2em; bottom: 4.6em; color: #2a1c12; opacity: 0.05; white-space: nowrap; transform: scaleX(-1);}
#workskin .tithe .master {color: #9b1c1c; font-size: 1.2em; text-shadow: 0 0 0.6px rgba(155,28,28,0.5);}
#workskin .tithe .sign {margin: 0.9em 0 0.6em; line-height: 0;}
#workskin .hallows {position: relative; display: inline-block; width: 0; height: 0; font-size: 0; line-height: 0; border-left: 24px solid transparent; border-right: 24px solid transparent; border-bottom: 42px solid #a3191c; vertical-align: top;}
#workskin .hallows::before {content: ""; position: absolute; left: -19.7px; top: 5px; width: 0; height: 0; border-left: 19.7px solid transparent; border-right: 19.7px solid transparent; border-bottom: 34px solid #ebe6d7;}
#workskin .hallows::after {content: ""; position: absolute; left: -11.4px; top: 16.4px; width: 17.8px; height: 17.8px; border: 2.5px solid #a3191c; border-radius: 50%;}
#workskin .hallows .wand {position: absolute; left: -1.25px; top: 0; width: 2.5px; height: 42px; background: #a3191c; font-size: 0;}
#workskin .veil {position: relative; max-width: 15em; margin: 3em auto 3.4em; padding: 3.4em 1.4em 2.6em; background: repeating-linear-gradient(90deg, #070709 0, #111115 0.9em, #1c1c22 1.4em, #111115 1.9em, #070709 2.9em); color: #dfe3ea; border: 0.9em solid #7a776f; border-bottom: none; border-radius: 8em 8em 0 0; box-shadow: inset 0 0 2.2em rgba(0,0,0,0.95), 0 6px 14px rgba(0,0,0,0.4); text-align: center; font-family: Georgia, "Times New Roman", serif; font-style: italic; letter-spacing: 0.32em; text-shadow: 0 0 6px rgba(200,215,240,0.65), 0 0 16px rgba(160,185,230,0.35);}
#workskin .veil::after {content: ""; position: absolute; left: -1.6em; right: -1.6em; bottom: -0.9em; height: 0.9em; background: linear-gradient(#8a877f, #5e5b55); border-radius: 2px; box-shadow: 0 3px 6px rgba(0,0,0,0.35);}
#workskin .veil p {margin: 0.5em 0;}
#workskin .veil .w1 {font-size: 0.82em; opacity: 0.36;}
#workskin .veil .w2 {font-size: 1.02em; opacity: 0.68;}
#workskin .veil .w3 {font-size: 1.32em; opacity: 1;}
#workskin .howler {position: relative; max-width: 24em; font-family: Georgia, "Times New Roman", serif; margin: 2.4em auto 3.2em; padding: 1.6em 0.5em 0; background: radial-gradient(ellipse at 50% 56%, rgba(255,232,140,0.9) 0%, rgba(255,170,70,0.6) 26%, rgba(255,120,40,0.22) 48%, rgba(255,120,40,0) 68%); text-align: center;}
#workskin .howler::before, #workskin .howler::after {content: ""; position: absolute; top: 1.2em; width: 1.5em; height: 1.5em; border-radius: 50%; background: rgba(110,100,95,0.32);}
#workskin .howler::before {left: 8%; box-shadow: 1em -0.7em 0 0.25em rgba(110,100,95,0.26), 0.3em 1.3em 0 -0.2em rgba(110,100,95,0.22), 2.2em 0.2em 0 -0.4em rgba(110,100,95,0.2);}
#workskin .howler::after {right: 8%; box-shadow: -1.1em -0.6em 0 0.2em rgba(110,100,95,0.26), -0.2em 1.4em 0 -0.25em rgba(110,100,95,0.22), -2.3em 0.4em 0 -0.45em rgba(110,100,95,0.2);}
#workskin .howler p {margin: 0;}
#workskin .howler .shout {position: relative; color: #8f0e14; font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif; font-size: 1.9em; font-weight: 900; letter-spacing: 0.01em; line-height: 1.08; text-shadow: 2px 2px 0 #fff6e0, -2px -2px 0 #fff6e0, 2px -2px 0 #fff6e0, -2px 2px 0 #fff6e0, 0 0 16px rgba(255,190,70,0.95);}
#workskin .howler .shout span {display: block;}
#workskin .howler .w1 {font-size: 0.62em; transform: translateX(-2.2em) rotate(-9deg);}
#workskin .howler .w2 {font-size: 1.12em; transform: rotate(-2deg);}
#workskin .howler .w3 {font-size: 0.82em; transform: translateX(1.6em) rotate(5deg);}
#workskin .howler .sparks {margin: 0.35em 0 0; color: #e8762a; font-size: 1.1em; letter-spacing: 0.9em; text-shadow: 0 0 6px rgba(255,200,90,0.9);}
#workskin .howler .envelope {position: relative; width: 13em; height: 7.4em; margin: 4em auto 0; background: radial-gradient(circle at 97% 6%, rgba(35,12,6,0.75) 0, rgba(35,12,6,0.4) 0.7em, rgba(35,12,6,0) 1.4em), radial-gradient(circle at 3% 94%, rgba(35,12,6,0.6) 0, rgba(35,12,6,0) 1.2em), linear-gradient(160deg, #d3343d 0%, #b5222b 55%, #8c151d 100%); border-radius: 3px; box-shadow: 0 6px 12px rgba(0,0,0,0.35); font-size: 1em; line-height: 0; transform: rotate(-4deg);}
#workskin .howler .envelope::before {content: ""; position: absolute; left: 0; top: -4.1em; width: 0; height: 0; border-left: 6.5em solid transparent; border-right: 6.5em solid transparent; border-bottom: 4.1em solid #e4646c;}
#workskin .howler .envelope::after {content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 0; border-left: 6.5em solid transparent; border-right: 6.5em solid transparent; border-bottom: 4.5em solid #a51c25;}
#workskin .floobag {max-width: 25em; margin: 2.3em auto 2.1em; text-align: center; font-family: Georgia, "Times New Roman", serif;}
#workskin .floobag .bag {position: relative; padding: 2.65em 1.7em 2.05em; background: radial-gradient(circle at 8% 94%, #e4ffe9 0, #37c864 1.5px, rgba(55,200,100,0) 3.5px), radial-gradient(circle at 13.5% 97%, #e4ffe9 0, #37c864 1px, rgba(55,200,100,0) 3px), radial-gradient(circle at 5% 98.5%, #e4ffe9 0, #37c864 1px, rgba(55,200,100,0) 3px), radial-gradient(ellipse at 7% 100%, rgba(90,235,130,0.3) 0, rgba(90,235,130,0) 2.4em), radial-gradient(ellipse at 84% 1.05em, rgba(28,24,20,0.3) 0, rgba(28,24,20,0.16) 0.4em, rgba(28,24,20,0) 0.95em), linear-gradient(to bottom, rgba(255,244,222,0.5) 0, rgba(255,244,222,0) 0.25em, rgba(255,244,222,0) 1.75em, rgba(66,38,12,0.6) 1.75em, rgba(66,38,12,0.6) 1.85em, rgba(66,38,12,0.28) 1.85em, rgba(66,38,12,0) 2.5em), linear-gradient(to top, rgba(66,38,12,0.16) 0, rgba(66,38,12,0.07) 0.95em, rgba(255,244,222,0.3) 0.95em, rgba(255,244,222,0.3) 1.03em, rgba(66,38,12,0.18) 1.03em, rgba(66,38,12,0) 1.55em), linear-gradient(to right, rgba(66,38,12,0.3) 0, rgba(66,38,12,0.08) 6%, rgba(66,38,12,0.35) 6.3%, rgba(255,244,222,0.22) 6.8%, rgba(255,244,222,0) 13%, rgba(255,244,222,0) 87%, rgba(66,38,12,0.1) 93.4%, rgba(66,38,12,0.35) 93.7%, rgba(255,244,222,0.12) 94.2%, rgba(66,38,12,0.3) 100%), linear-gradient(140deg, rgba(0,0,0,0) 85%, rgba(255,244,222,0.24) 85.3%, rgba(66,38,12,0.16) 85.8%, rgba(0,0,0,0) 86.6%), linear-gradient(300deg, rgba(0,0,0,0) 90%, rgba(66,38,12,0.12) 90.3%, rgba(255,244,222,0.18) 90.7%, rgba(0,0,0,0) 91.4%), repeating-linear-gradient(100deg, rgba(255,255,255,0) 0, rgba(255,255,255,0) 7px, rgba(255,255,255,0.05) 8px, rgba(255,255,255,0) 9px), repeating-linear-gradient(8deg, rgba(90,55,20,0) 0, rgba(90,55,20,0) 11px, rgba(90,55,20,0.035) 12px, rgba(90,55,20,0) 13px), linear-gradient(to bottom, #cda773 0, #c69f69 1.75em, #be955d 1.75em, #b38851 100%); color: #1d1b17; border-radius: 2px 2px 3px 3px; box-shadow: 0 4px 10px rgba(0,0,0,0.22), 0 1px 2px rgba(0,0,0,0.2); transform: rotate(-1.2deg);}
#workskin .floobag .bag::before {content: ""; position: absolute; left: 50%; top: 0.74em; width: 1.8em; height: 0.26em; margin-left: -0.9em; background: linear-gradient(to bottom, #f6f8fa 0, #c5ccd2 45%, #8a939b 100%); border-radius: 1px; box-shadow: 0 1px 1px rgba(0,0,0,0.5); transform: rotate(3deg);}
#workskin .floobag .bag::after {content: ""; position: absolute; left: 0.2em; bottom: -1.35em; width: 5em; height: 1.5em; background: radial-gradient(circle at 6% 8%, #e4ffe9 0, #37c864 1.5px, rgba(55,200,100,0.3) 2.3px, rgba(55,200,100,0) 5px), radial-gradient(circle at 15% 30%, #e4ffe9 0, #37c864 1px, rgba(55,200,100,0.3) 1.8px, rgba(55,200,100,0) 4.5px), radial-gradient(circle at 9% 52%, #e4ffe9 0, #37c864 1.5px, rgba(55,200,100,0.3) 2.3px, rgba(55,200,100,0) 5px), radial-gradient(circle at 26% 46%, #e4ffe9 0, #37c864 1px, rgba(55,200,100,0.3) 1.8px, rgba(55,200,100,0) 4.5px), radial-gradient(circle at 21% 78%, #e4ffe9 0, #37c864 1.5px, rgba(55,200,100,0.3) 2.3px, rgba(55,200,100,0) 5px), radial-gradient(circle at 38% 70%, #e4ffe9 0, #37c864 1px, rgba(55,200,100,0.3) 1.8px, rgba(55,200,100,0) 4.5px), radial-gradient(circle at 52% 88%, #e4ffe9 0, #37c864 1px, rgba(55,200,100,0.3) 1.8px, rgba(55,200,100,0) 4.5px), radial-gradient(circle at 33% 22%, #e4ffe9 0, #37c864 1px, rgba(55,200,100,0.3) 1.8px, rgba(55,200,100,0) 4.5px);}
#workskin .floobag p {margin: 0;}
#workskin .floobag .stamp {display: inline-block; margin-bottom: 0.5em; padding: 0.25em 0.7em 0.2em; border: 2px solid rgba(194,24,91,0.8); outline: 1px solid rgba(194,24,91,0.55); outline-offset: 2px; border-radius: 2px; color: rgba(194,24,91,0.92); font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif; font-size: 0.55em; font-weight: bold; letter-spacing: 0.16em; line-height: 1.3; text-transform: uppercase; text-shadow: 0 0 1px rgba(194,24,91,0.4); opacity: 0.9; transform: rotate(-4deg);}
#workskin .floobag .name {position: relative; margin-bottom: 0.6em; padding-bottom: 0.3em; font-family: Noteworthy, "Ink Free", casual, "Bradley Hand", "Segoe Print", cursive; font-size: 1.3em; font-weight: bold; letter-spacing: 0.03em; line-height: 1.15; text-transform: uppercase; text-shadow: 0 0 1px rgba(29,27,23,0.35); transform: rotate(-1deg);}
#workskin .floobag .name::before, #workskin .floobag .name::after {content: ""; position: absolute; height: 0; border-radius: 3px;}
#workskin .floobag .name .tm {display: inline-block; margin-left: 0.06em; font-family: inherit; font-size: 0.5em; line-height: 1; letter-spacing: 0; vertical-align: 0.8em;}
#workskin .floobag .name::before {left: 5%; right: 3%; bottom: 0; border-top: 3px solid rgba(29,27,23,0.85); transform: rotate(-0.8deg);}
#workskin .floobag .name::after {left: 11%; right: 8%; bottom: -0.32em; border-top: 2px solid rgba(29,27,23,0.75); transform: rotate(0.9deg);}
#workskin .floobag .hand {margin: 0.3em 0; font-family: Noteworthy, "Ink Free", casual, "Bradley Hand", "Segoe Print", cursive; font-size: 0.98em; line-height: 1.35; text-shadow: 0 0 1px rgba(29,27,23,0.25);}
#workskin .floobag .ish {position: absolute; right: 0.75em; bottom: 0.4em; margin: 0; white-space: nowrap; color: #c0141f; font-family: Noteworthy, "Ink Free", casual, "Bradley Hand", "Segoe Print", cursive; font-size: 1.45em; font-weight: bold; line-height: 1; text-shadow: 0 0 1px rgba(192,20,31,0.4); transform: rotate(-10deg);}
#workskin .floobag .ish::after {content: ""; position: absolute; left: 0.1em; right: -0.1em; bottom: -0.2em; height: 0.35em; border-bottom: 2px solid #c0141f; border-radius: 0 0 70% 40%;}
#workskin .floobag .source {margin-top: 1.3em; font-size: 0.8em; font-style: italic; opacity: 0.75;}
#workskin details.live {margin: 0; padding: 0;}
#workskin details.live summary {display: block; list-style: none; cursor: pointer;}
#workskin details.live summary::-webkit-details-marker {display: none;}
#workskin details.live summary:focus {outline: none;}
#workskin details.live summary:focus-visible {outline: 2px dotted currentColor; outline-offset: 6px;}
#workskin .sampler, #workskin .coin, #workskin .wclock, #workskin .frost, #workskin .pinned-note, #workskin .minutes, #workskin .leaflet, #workskin .storybook, #workskin .floobag, #workskin .memos, #workskin .remembrance, #workskin .frostprints, #workskin .stars, #workskin .clipping, #workskin .prophet, #workskin .treeletters, #workskin .wireless, #workskin .stone, #workskin .earsbox, #workskin .headstone {cursor: pointer;}
#workskin .sampler .motif .tor::after {content: ""; position: absolute; left: -2.5px; top: 6.5px; width: 5px; height: 6.5px; border-radius: 2.5px 2.5px 0 0; background: #ffd77a; box-shadow: 0 0 3px 1px rgba(255,205,95,0.9), 0 0 8px 3px rgba(255,190,80,0.45); opacity: 0; transition: opacity 0.5s ease;}
#workskin .sampler .row span {position: relative; display: inline-block; transition: opacity 0.4s ease, transform 0.4s ease, color 0.4s ease;}
#workskin .sampler .row span:nth-child(4)::after {content: "✿"; position: absolute; left: 0; top: 0; color: #7a2430; letter-spacing: 0; opacity: 0; transform: translateY(0.45em); transition: opacity 0.4s ease, transform 0.4s ease;}
#workskin .sampler:hover .motif .tor::after, #workskin details.live[open] .sampler .motif .tor::after {opacity: 1;}
#workskin .sampler:hover .row span:nth-child(2), #workskin details.live[open] .sampler .row span:nth-child(2) {opacity: 0.14; transform: translateY(0.35em) scale(0.85); transition: opacity 0.9s ease 0.7s, transform 0.9s ease 0.7s;}
#workskin .sampler:hover .row span:nth-child(4), #workskin details.live[open] .sampler .row span:nth-child(4) {color: rgba(63,90,122,0); transition: color 0.6s ease 1.3s;}
#workskin .sampler:hover .row span:nth-child(4)::after, #workskin details.live[open] .sampler .row span:nth-child(4)::after {opacity: 1; transform: translateY(0) rotate(36deg) scale(1.3); transition: opacity 0.8s ease 2.2s, transform 0.8s ease 2.2s;}
#workskin .coin .galleon {transition: box-shadow 0.8s ease;}
#workskin .coin .legend {transition: color 0.8s ease, text-shadow 0.8s ease;}
#workskin .coin::before, #workskin .coin::after {transition: transform 0.4s ease;}
#workskin .coin:hover .rim, #workskin details.live[open] .coin .rim {transform: rotate(360deg); transition: transform 2.4s ease-out;}
#workskin .coin:hover .galleon, #workskin details.live[open] .coin .galleon {box-shadow: 0 0 0 1px rgba(110,70,15,0.6), 0 0 20px 6px rgba(255,160,50,0.75), 0 0 52px 18px rgba(255,112,26,0.35);}
#workskin .coin:hover .legend, #workskin details.live[open] .coin .legend {color: #fffbe8; text-shadow: 0 0 1px #6e2a00, 0 0 3px #b14a00, 0 0 8px rgba(255,140,30,1), 0 0 16px rgba(255,100,15,0.8); transition-delay: 0.4s;}
#workskin .coin:hover::before, #workskin details.live[open] .coin::before {transform: rotate(146deg) translateX(6.95em) scaleX(1); transition: transform 0.9s ease 1s;}
#workskin .coin:hover::after, #workskin details.live[open] .coin::after {transform: rotate(-31deg) translateX(6.95em) scaleX(1); transition: transform 0.8s ease 1.6s;}
#workskin .frost {position: relative; z-index: 0;}
#workskin .frost::before {content: ""; position: absolute; left: 3%; bottom: 0.3em; z-index: -1; width: 8.5em; height: 4.4em; border-radius: 50%; background: radial-gradient(ellipse at 50% 55%, rgba(226,239,249,0.55) 0%, rgba(226,239,249,0.3) 40%, rgba(226,239,249,0.08) 60%, rgba(226,239,249,0) 72%); opacity: 0; transform: scale(0.5); transition: opacity 0.8s ease, transform 1.1s ease;}
#workskin .frost::after {content: ""; position: absolute; left: 12%; bottom: 1.1em; width: 1.5em; height: 1.5em; border-top: 2px solid rgba(6,10,20,0.78); border-left: 2px solid rgba(6,10,20,0.78); border-radius: 2px 0 0 0; transform: rotate(45deg); filter: blur(0.4px); opacity: 0; transition: opacity 0.5s ease 0.7s;}
#workskin .frost p:first-child::after {content: ""; position: absolute; left: 12%; bottom: 2.85em; width: 2px; height: 0.6em; margin-left: 0.69em; background: rgba(6,10,20,0.78); filter: blur(0.4px); opacity: 0; transition: opacity 0.4s ease 1.2s;}
#workskin .frost:hover::before, #workskin details.live[open] .frost::before {opacity: 1; transform: scale(1);}
#workskin .frost:hover::after, #workskin details.live[open] .frost::after, #workskin .frost:hover p:first-child::after, #workskin details.live[open] .frost p:first-child::after {opacity: 1;}
#workskin .pinned-note {transform-origin: 50% 0; transition: transform 0.7s ease;}
#workskin .pinned-note:hover, #workskin details.live[open] .pinned-note {transform: rotate(1.2deg);}
#workskin .pinned-note::after {content: "SNEAK"; position: absolute; left: 50%; top: 56%; color: #8a2d86; background-image: radial-gradient(circle, #c35ac0 0, #9b2f97 34%, rgba(155,47,151,0) 46%), linear-gradient(rgba(206,120,200,0.4), rgba(206,120,200,0.4)); background-size: 8px 8px, 100% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-family: Impact, "Arial Black", "Helvetica Neue", Arial, sans-serif; font-size: 4.2em; font-weight: bold; letter-spacing: 0.06em; line-height: 1; filter: drop-shadow(0 0 1px rgba(110,20,105,0.45)); opacity: 0; transform: translate(-50%, -50%) rotate(-12deg) scale(0.55); transition: opacity 0.45s ease 0.25s, transform 0.6s ease 0.25s;}
#workskin .pinned-note:hover::after, #workskin details.live[open] .pinned-note::after {opacity: 0.88; transform: translate(-50%, -50%) rotate(-12deg) scale(1);}
#workskin .minutes::before {content: ""; position: absolute; right: 2.4em; top: 4.2em; width: 4.4em; height: 4.4em; border-radius: 50%; background: radial-gradient(circle, rgba(150,95,40,0) 52%, rgba(150,95,40,0.32) 56%, rgba(150,95,40,0.14) 60%, rgba(150,95,40,0) 64%); opacity: 0; transform: rotate(-30deg) scale(0.9); transition: opacity 0.5s ease, transform 0.6s ease;}
#workskin .minutes .letterhead::after {content: ""; position: absolute; left: 40%; bottom: 0.25em; width: 3.4em; height: 2.1em; border-radius: 0.35em; background: radial-gradient(circle at 104% 50%, #f7f6f1 0, #f7f6f1 0.62em, rgba(247,246,241,0) 0.64em), radial-gradient(circle at 30% 40%, #b98235 0, #b98235 1.5px, rgba(185,130,53,0) 2px), radial-gradient(circle at 55% 62%, #b98235 0, #b98235 1.5px, rgba(185,130,53,0) 2px), linear-gradient(160deg, #eac485 0%, #d9a65a 100%); border: 2px dotted rgba(150,100,35,0.55); box-shadow: 1px 2px 3px rgba(0,0,0,0.25); transform: translateY(3.4em) rotate(-4deg); transition: transform 0.8s ease 0.2s;}
#workskin .minutes::after {transition: opacity 0.4s ease, transform 0.4s ease;}
#workskin .minutes:hover::before, #workskin details.live[open] .minutes::before {opacity: 1; transform: rotate(-30deg) scale(1);}
#workskin .minutes:hover .letterhead::after, #workskin details.live[open] .minutes .letterhead::after {transform: translateY(0) rotate(-13deg);}
#workskin .minutes:hover::after, #workskin details.live[open] .minutes::after {opacity: 0.92; transform: rotate(-9deg) scale(1.06);}
#workskin .leaflet::before, #workskin .leaflet .condition::after, #workskin .leaflet .series::after {content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; opacity: 0; transform: scale(0.85); transition: opacity 0.35s ease, transform 0.5s ease;}
#workskin .leaflet::before {background: radial-gradient(circle at 88% 38%, #f3dcf9 0, #b866d6 1.5px, #7a2f96 3px, rgba(122,47,150,0.25) 5px, rgba(122,47,150,0) 7px), radial-gradient(circle at 6% 44%, #f3dcf9 0, #b866d6 2px, #7a2f96 4px, rgba(122,47,150,0.25) 6px, rgba(122,47,150,0) 9px), radial-gradient(circle at 93% 88%, #b866d6 0, #7a2f96 1.5px, rgba(122,47,150,0) 3.5px);}
#workskin .leaflet .condition::after {background: radial-gradient(circle at 72% 24%, #f3dcf9 0, #b866d6 2px, #7a2f96 4px, rgba(122,47,150,0.25) 6px, rgba(122,47,150,0) 9px), radial-gradient(circle at 4% 64%, #b866d6 0, #7a2f96 1.5px, rgba(122,47,150,0) 3.5px), radial-gradient(circle at 97% 30%, #f3dcf9 0, #b866d6 1.5px, #7a2f96 3px, rgba(122,47,150,0) 6px); transition-delay: 0.25s;}
#workskin .leaflet .series::after {background: radial-gradient(circle at 12% 92%, #f3dcf9 0, #b866d6 2px, #7a2f96 4px, rgba(122,47,150,0.25) 6px, rgba(122,47,150,0) 9px), radial-gradient(circle at 84% 52%, #b866d6 0, #7a2f96 1.5px, rgba(122,47,150,0) 3.5px), radial-gradient(circle at 58% 33%, #f3dcf9 0, #b866d6 1.5px, #7a2f96 3px, rgba(122,47,150,0) 5px), radial-gradient(circle at 2.5% 20%, #b866d6 0, #7a2f96 1.5px, rgba(122,47,150,0) 3.5px); transition-delay: 0.5s;}
#workskin .leaflet:hover::before, #workskin details.live[open] .leaflet::before, #workskin .leaflet:hover .condition::after, #workskin details.live[open] .leaflet .condition::after, #workskin .leaflet:hover .series::after, #workskin details.live[open] .leaflet .series::after {opacity: 1; transform: scale(1);}
#workskin .storybook .scrawl::before {content: "✦ ✧"; position: absolute; left: 8.3em; top: -0.7em; color: #7a7a7a; font-size: 0.8em; letter-spacing: 0.1em; opacity: 0; transition: opacity 0.4s ease 0.75s;}
#workskin .storybook .scrawl::after {content: ""; position: absolute; left: 5em; top: 0.85em; width: 2.6em; height: 0; border-top: 1.5px solid rgba(100,100,100,0.75); transform-origin: 0 50%; transform: rotate(-24deg) scaleX(0); transition: transform 0.6s ease 0.2s;}
#workskin .storybook:hover .scrawl::before, #workskin details.live[open] .storybook .scrawl::before {opacity: 1;}
#workskin .storybook:hover .scrawl::after, #workskin details.live[open] .storybook .scrawl::after {transform: rotate(-24deg) scaleX(1);}
#workskin .floobag {position: relative;}
#workskin .floobag .bag {transition: box-shadow 0.6s ease, transform 0.6s ease;}
#workskin .floobag .bag::after {transition: transform 0.6s ease, filter 0.6s ease;}
#workskin .floobag .ish {transition: transform 0.4s ease;}
#workskin .floobag::before, #workskin .floobag::after {content: ""; position: absolute; left: 0.4em; bottom: 3em; width: 2.6em; height: 4.5em; opacity: 0;}
#workskin .floobag::before {background: radial-gradient(circle at 30% 85%, #e4ffe9 0, #37c864 1.5px, rgba(55,200,100,0) 4px), radial-gradient(circle at 62% 60%, #e4ffe9 0, #37c864 1px, rgba(55,200,100,0) 3.5px), radial-gradient(circle at 22% 38%, #e4ffe9 0, #37c864 1.5px, rgba(55,200,100,0) 4px), radial-gradient(circle at 70% 14%, #e4ffe9 0, #37c864 1px, rgba(55,200,100,0) 3px); transform: translateY(1.6em); transition: opacity 0.4s ease, transform 1.4s ease;}
#workskin .floobag::after {left: 1.4em; background: radial-gradient(circle at 40% 80%, #e4ffe9 0, #37c864 1px, rgba(55,200,100,0) 3.5px), radial-gradient(circle at 75% 45%, #e4ffe9 0, #37c864 1.5px, rgba(55,200,100,0) 4px), radial-gradient(circle at 30% 20%, #e4ffe9 0, #37c864 1px, rgba(55,200,100,0) 3px); transform: translateY(2em); transition: opacity 0.5s ease 0.3s, transform 1.8s ease 0.3s;}
#workskin .floobag:hover .bag, #workskin details.live[open] .floobag .bag {box-shadow: 0 6px 14px rgba(0,0,0,0.28), 0 1px 2px rgba(0,0,0,0.22), 0 0 18px rgba(70,220,120,0.45), inset 0 -2em 2.2em -1.4em rgba(90,235,130,0.4); transform: rotate(-0.5deg);}
#workskin .floobag:hover .bag::after, #workskin details.live[open] .floobag .bag::after {transform: translate(-0.2em, 0.15em) scale(1.12); filter: brightness(1.35) saturate(1.3);}
#workskin .floobag:hover .ish, #workskin details.live[open] .floobag .ish {transform: rotate(5deg) scale(1.15);}
#workskin .floobag:hover::before, #workskin details.live[open] .floobag::before, #workskin .floobag:hover::after, #workskin details.live[open] .floobag::after {opacity: 1; transform: translateY(-1.4em);}
#workskin .remembrance::before, #workskin .remembrance .letterhead::after, #workskin .remembrance .source::after {content: ""; position: absolute; left: 2.3em; bottom: -0.2em; width: 0.85em; height: 0.55em; border-radius: 80% 0 80% 0; background: linear-gradient(135deg, #e24a52 0%, #a8131f 100%); box-shadow: 0 1px 1px rgba(0,0,0,0.2); opacity: 0;}
#workskin .remembrance::before {transition: opacity 0.3s ease, transform 1.6s ease;}
#workskin .remembrance .letterhead::after {transition: opacity 0.3s ease 0.35s, transform 1.9s ease 0.35s;}
#workskin .remembrance .source::after {transition: opacity 0.3s ease 0.7s, transform 1.7s ease 0.7s;}
#workskin .remembrance::after {transition: transform 0.5s ease;}
#workskin .remembrance:hover::before, #workskin details.live[open] .remembrance::before {opacity: 1; transform: translate(2.8em, 1.25em) rotate(140deg);}
#workskin .remembrance:hover .letterhead::after, #workskin details.live[open] .remembrance .letterhead::after {opacity: 0.9; transform: translate(5.2em, 0.9em) rotate(-110deg);}
#workskin .remembrance:hover .source::after, #workskin details.live[open] .remembrance .source::after {opacity: 0.85; transform: translate(1.2em, 1.55em) rotate(220deg);}
#workskin .remembrance:hover::after, #workskin details.live[open] .remembrance::after {transform: rotate(-12deg);}
#workskin .stars {position: relative;}
#workskin .stars::before, #workskin .stars::after, #workskin .stars p:first-child::before, #workskin .stars p:first-child::after, #workskin .stars .source::before {content: ""; position: absolute; opacity: 0; transition: opacity 0.5s ease;}
#workskin .stars::before {left: 6%; top: 10%; width: 17%; height: 12%; background: linear-gradient(to bottom right, rgba(205,220,255,0) 48.5%, rgba(205,220,255,0.7) 50%, rgba(205,220,255,0) 51.5%);}
#workskin .stars::after {left: 23%; top: 7%; width: 24%; height: 3%; background: linear-gradient(to bottom right, rgba(205,220,255,0) 46%, rgba(205,220,255,0.7) 50%, rgba(205,220,255,0) 54%); transition-delay: 0.15s;}
#workskin .stars p:first-child::before {left: 47%; top: 7%; width: 32%; height: 6%; background: linear-gradient(to top right, rgba(205,220,255,0) 47%, rgba(205,220,255,0.7) 50%, rgba(205,220,255,0) 53%); transition-delay: 0.3s;}
#workskin .stars p:first-child::after {left: 79%; top: 13%; width: 16%; height: 32%; background: linear-gradient(to top right, rgba(205,220,255,0) 49.2%, rgba(205,220,255,0.7) 50%, rgba(205,220,255,0) 50.8%); transition-delay: 0.45s;}
#workskin .stars .source::before {left: 88%; top: 45%; width: 7%; height: 35%; background: linear-gradient(to bottom right, rgba(205,220,255,0) 48.8%, rgba(205,220,255,0.7) 50%, rgba(205,220,255,0) 51.2%); transition-delay: 0.6s;}
#workskin .stars .source::after {content: ""; position: absolute; left: 88%; top: 80%; width: 1.6em; height: 1.6em; margin: -0.8em 0 0 -0.8em; border-radius: 50%; background: radial-gradient(circle, rgba(255,190,160,0.95) 0, rgba(255,122,85,0.55) 22%, rgba(255,122,85,0) 68%); opacity: 0; transform: scale(0.4); transition: opacity 0.6s ease 0.8s, transform 0.8s ease 0.8s;}
#workskin .stars:hover::before, #workskin details.live[open] .stars::before, #workskin .stars:hover::after, #workskin details.live[open] .stars::after, #workskin .stars:hover p:first-child::before, #workskin details.live[open] .stars p:first-child::before, #workskin .stars:hover p:first-child::after, #workskin details.live[open] .stars p:first-child::after, #workskin .stars:hover .source::before, #workskin details.live[open] .stars .source::before {opacity: 1;}
#workskin .stars:hover .source::after, #workskin details.live[open] .stars .source::after {opacity: 1; transform: scale(1.3);}
#workskin .clipping {transition: transform 0.6s ease, box-shadow 0.6s ease;}
#workskin .clipping::before {transition: left 1.5s ease-in-out;}
#workskin .clipping:hover, #workskin details.live[open] .clipping {transform: rotate(0.2deg) translateY(-3px); box-shadow: 5px 12px 20px rgba(0,0,0,0.22);}
#workskin .clipping:hover::before, #workskin details.live[open] .clipping::before {left: 88%;}
#workskin .prophet {position: relative;}
#workskin .prophet::after {content: "The Ministry of Magic\A requests your company\A at the Winter Ball"; position: absolute; right: 0.4em; bottom: -1.6em; width: 9.5em; padding: 0.55em 0.6em; background: #fbf6e8; border: 3px double #c2a050; box-shadow: 0 3px 8px rgba(0,0,0,0.25); color: #6b5a2c; font-family: "Snell Roundhand", "Apple Chancery", "Lucida Handwriting", Georgia, serif; font-size: 0.74em; font-style: italic; line-height: 1.4; text-align: center; white-space: pre-line; opacity: 0; transform: translateY(-2.2em) rotate(1deg); transition: opacity 0.35s ease, transform 0.7s ease;}
#workskin .prophet .source::after {content: "No."; position: absolute; right: 1.45em; bottom: -0.05em; z-index: 1; color: #9b72c4; font-family: "Bradley Hand", "Segoe Print", "Chalkboard SE", "Comic Sans MS", cursive; font-size: 2.6em; font-weight: bold; font-style: normal; line-height: 1; opacity: 0; transform: rotate(-12deg) scale(1.6); transition: opacity 0.3s ease 0.75s, transform 0.35s ease 0.75s;}
#workskin .prophet:hover::after, #workskin details.live[open] .prophet::after {opacity: 1; transform: translateY(0) rotate(-5deg);}
#workskin .prophet:hover .source::after, #workskin details.live[open] .prophet .source::after {opacity: 0.95; transform: rotate(-12deg) scale(1);}
#workskin .stone.night {position: relative; transition: text-shadow 1.2s ease, color 1.2s ease;}
#workskin .stone.night::before {transition: opacity 1.2s ease;}
#workskin .stone.night::after, #workskin .stone.night .source::after {content: ""; position: absolute; width: 30px; height: 12px; background: radial-gradient(circle at 7px 6px, #f4faff 0, #f4faff 2px, rgba(170,205,255,0.6) 3.5px, rgba(170,205,255,0) 6px), radial-gradient(circle at 23px 6px, #f4faff 0, #f4faff 2px, rgba(170,205,255,0.6) 3.5px, rgba(170,205,255,0) 6px); opacity: 0; transform: scaleY(0.15);}
#workskin .stone.night::after {left: 1.1em; bottom: 0.9em; transition: opacity 0.5s ease 0.9s, transform 0.5s ease 0.9s;}
#workskin .stone.night .source::after {right: 1.6em; top: 1.2em; transform: scale(0.75, 0.12); transition: opacity 0.5s ease 1.6s, transform 0.5s ease 1.6s;}
#workskin .stone.night:hover, #workskin details.live[open] .stone.night {color: #d9d0c0; text-shadow: 0 0 3px rgba(255,170,70,0.18), 0 1px 0 rgba(0,0,0,0.6);}
#workskin .stone.night:hover::before, #workskin details.live[open] .stone.night::before {opacity: 0.2;}
#workskin .stone.night:hover::after, #workskin details.live[open] .stone.night::after {opacity: 1; transform: scaleY(1);}
#workskin .stone.night:hover .source::after, #workskin details.live[open] .stone.night .source::after {opacity: 0.85; transform: scale(0.75, 0.75);}
#workskin .headstone {position: relative; z-index: 0;}
#workskin .headstone::after {content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: -1; border-radius: inherit; background: linear-gradient(115deg, rgba(255,214,150,0) 25%, rgba(255,214,150,0.38) 52%, rgba(255,226,180,0.12) 70%, rgba(255,226,180,0) 85%); opacity: 0; transition: opacity 1.6s ease;}
#workskin .headstone .epitaph::after {content: ""; position: absolute; left: 50%; bottom: -0.55em; width: 1.5em; height: 0; margin-left: -1.2em; border-top: 2px solid #4f6e3a; transform: rotate(4deg); opacity: 0; transition: opacity 0.6s ease 0.9s;}
#workskin .headstone .dates::after {content: ""; position: absolute; left: 50%; bottom: -1em; width: 1.1em; height: 0.55em; margin-left: -0.6em; border-radius: 80% 0 80% 0; background: linear-gradient(135deg, #6f9150 0%, #3f5d2d 100%); transform: rotate(-25deg); opacity: 0; transition: opacity 0.6s ease 1s;}
#workskin .headstone .name::after {content: ""; position: absolute; left: 50%; bottom: -1.75em; width: 1.8em; height: 1.8em; margin-left: 0.6em; border-radius: 50%; background: radial-gradient(circle at 50% 47%, #cdc4b5 0, #cdc4b5 9%, rgba(205,196,181,0) 13%), radial-gradient(circle at 40% 40%, #ffffff 0, #ffffff 24%, #e3dbcf 29%, rgba(227,219,207,0) 33%), radial-gradient(circle at 62% 45%, #fdfcf9 0, #fdfcf9 25%, #e1d9cc 30%, rgba(225,217,204,0) 34%), radial-gradient(circle at 48% 63%, #fbf9f5 0, #fbf9f5 27%, #ded6c8 32%, rgba(222,214,200,0) 36%), radial-gradient(circle, #f7f3ed 0, #e8e1d6 70%, #d4cbbd 100%); box-shadow: 0 1px 3px rgba(0,0,0,0.4); opacity: 0; transform: translateY(-0.5em) rotate(-20deg); transition: opacity 0.6s ease 0.9s, transform 0.6s ease 0.9s;}
#workskin .headstone:hover::after, #workskin details.live[open] .headstone::after {opacity: 1;}
#workskin .headstone:hover .epitaph::after, #workskin details.live[open] .headstone .epitaph::after, #workskin .headstone:hover .dates::after, #workskin details.live[open] .headstone .dates::after {opacity: 1;}
#workskin .headstone:hover .name::after, #workskin details.live[open] .headstone .name::after {opacity: 1; transform: translateY(0) rotate(-20deg);}
#workskin .wclock {position: relative; width: 17em; height: 17em; margin: 2.6em auto; border-radius: 50%; font-family: "Palatino Linotype", Palatino, "Book Antiqua", "URW Palladio L", "TeX Gyre Pagella", Georgia, serif; text-align: center; background-image: radial-gradient(circle at 35% 28%, rgba(255,226,180,0.22) 0, rgba(255,226,180,0) 45%), radial-gradient(circle closest-side, #6b4426 0, #6b4426 82%, #c9a35a 82.6%, #f1d996 84%, #b38a3e 86.4%, #4a2c16 87.2%, #6e4527 90%, #5a371d 96%, #3d2412 100%); box-shadow: 0 7px 16px rgba(0,0,0,0.3), 0 2px 4px rgba(0,0,0,0.25);}
#workskin .wclock p {margin: 0;}
#workskin .wclock .dialface {position: absolute; left: 50%; top: 50%; width: 13.9em; height: 13.9em; margin: -6.95em 0 0 -6.95em; border-radius: 50%; background-image: radial-gradient(circle closest-side, #fbf3dc 0, #f6ebcd 58%, #efdfb8 87.1%, #7a5228 87.3%, #7a5228 87.8%, rgba(232,214,168,0) 88%), repeating-conic-gradient(from -1.2deg, rgba(110,72,30,0.7) 0deg 2.4deg, rgba(110,72,30,0) 2.4deg 45deg), repeating-conic-gradient(from -0.5deg, rgba(110,72,30,0.35) 0deg 1deg, rgba(110,72,30,0) 1deg 11.25deg), radial-gradient(circle closest-side, #eadbb2 0, #e6d3a4 100%); box-shadow: inset 0 0 0.6em rgba(90,60,20,0.35);}
#workskin .wclock .dialface::before {content: ""; position: absolute; left: 50%; top: 50%; width: 9.4em; height: 9.4em; margin: -4.7em 0 0 -4.7em; border-radius: 50%; border: 1px solid rgba(110,72,30,0.35);}
#workskin .wclock .dialface::after {content: ""; position: absolute; left: 50%; top: 50%; z-index: 2; width: 0.9em; height: 0.9em; margin: -0.45em 0 0 -0.45em; border-radius: 50%; background-image: radial-gradient(circle at 35% 30%, #fff3c4 0, #e1bd62 40%, #9a7128 100%); box-shadow: 0 1px 2px rgba(0,0,0,0.45);}
#workskin .wclock .places {position: absolute; left: 50%; top: 50%; width: 0; height: 0; color: #4e3216; font-size: 0.56em; font-variant: small-caps; letter-spacing: 0.04em; line-height: 1;}
#workskin .wclock .places span {position: absolute; left: -4em; top: -0.5em; width: 8em; transition: color 0.6s ease, text-shadow 0.6s ease;}
#workskin .wclock .places span:nth-child(1) {transform: rotate(0deg) translateY(-9.3em) rotate(0deg);}
#workskin .wclock .places span:nth-child(2) {transform: rotate(45deg) translateY(-8.85em) rotate(-45deg);}
#workskin .wclock .places span:nth-child(3) {transform: rotate(90deg) translateY(-8.05em) rotate(-90deg);}
#workskin .wclock .places span:nth-child(4) {transform: rotate(135deg) translateY(-8.85em) rotate(-135deg);}
#workskin .wclock .places span:nth-child(5) {transform: rotate(180deg) translateY(-9.3em) rotate(-180deg);}
#workskin .wclock .places span:nth-child(6) {transform: rotate(225deg) translateY(-8.85em) rotate(-225deg);}
#workskin .wclock .places span:nth-child(7) {transform: rotate(270deg) translateY(-8.4em) rotate(-270deg);}
#workskin .wclock .places span:nth-child(8) {transform: rotate(315deg) translateY(-8.85em) rotate(-315deg);}
#workskin .wclock .hand {position: absolute; left: 50%; top: 50%; z-index: 1; width: 0; height: 0; transition: transform 1.8s ease-in-out;}
#workskin .wclock .hand::before {content: ""; position: absolute; left: -0.08em; bottom: -0.3em; width: 0.16em; height: 4.9em; border-radius: 0.1em 0.1em 0.05em 0.05em; background-image: linear-gradient(to right, #8a6420, #f0d07a 45%, #a07a2c); box-shadow: 0 1px 2px rgba(0,0,0,0.35);}
#workskin .wclock .hand::after {content: ""; position: absolute; left: -0.28em; bottom: 4.45em; width: 0; height: 0; border-left: 0.28em solid transparent; border-right: 0.28em solid transparent; border-bottom: 0.55em solid #c9a24a;}
#workskin .wclock .hand span {position: absolute; left: 0; bottom: 5.35em; padding: 0.14em 0.5em 0.1em; border-radius: 0.25em; background-image: linear-gradient(#f4dc95, #d1aa52); box-shadow: 0 1px 2px rgba(0,0,0,0.35); color: #3a250e; font-size: 0.56em; font-weight: bold; letter-spacing: 0.08em; line-height: 1.2; white-space: nowrap; transform: translateX(-50%) rotate(-90deg);}
#workskin .wclock .harry {transform: rotate(-12deg);}
#workskin .wclock .ginny {transform: rotate(12deg);}
#workskin .wclock .kreacher {transform: rotate(180deg);}
#workskin .wclock .kreacher::before {height: 3.4em; width: 0.13em; left: -0.065em;}
#workskin .wclock .kreacher::after {bottom: 2.95em; border-left-width: 0.22em; border-right-width: 0.22em; border-bottom-width: 0.45em; left: -0.22em;}
#workskin .wclock .kreacher span {bottom: 4.15em; font-size: 0.4em;}
#workskin .wclock:hover .harry, #workskin details.live[open] .wclock .harry {transform: rotate(160deg);}
#workskin .wclock:hover .ginny, #workskin details.live[open] .wclock .ginny {transform: rotate(200deg); transition-delay: 0.25s;}
#workskin .wclock:hover .places span:nth-child(5), #workskin details.live[open] .wclock .places span:nth-child(5) {color: #b3261e; text-shadow: 0 0 0.45em rgba(255,70,50,0.55); transition-delay: 1.7s;}
#workskin .memos {position: relative; max-width: 30em; height: 6.6em; margin: 2em auto; overflow: hidden;}
#workskin .memos span {position: absolute; width: 0; height: 0; border-style: solid; border-width: 0.5em 0 0.5em 1.85em; border-color: transparent transparent transparent #c7b1ef; filter: drop-shadow(0 2px 2px rgba(60,30,110,0.28)); transition: left 1.4s ease-in-out, top 1.4s ease-in-out, transform 1.4s ease-in-out;}
#workskin .memos span::before {content: ""; position: absolute; left: -1.85em; top: -0.5em; width: 1.85em; height: 0; border-top: 1px solid rgba(90,60,160,0.35); transform-origin: 0 0; transform: rotate(15.1deg);}
#workskin .memos span::after {content: ""; position: absolute; left: -1.85em; top: 0; width: 0; height: 0; border-style: solid; border-width: 0.5em 1.85em 0 0; border-color: #8e6fd3 transparent transparent transparent;}
#workskin .memos span:nth-child(1) {left: 5%; top: 1.1em; transform: rotate(-14deg) scale(0.9);}
#workskin .memos span:nth-child(2) {left: 17%; top: 3.9em; transform: rotate(8deg) scale(0.7);}
#workskin .memos span:nth-child(3) {left: 30%; top: 0.6em; transform: rotate(-4deg) scale(1.0);}
#workskin .memos span:nth-child(4) {left: 43%; top: 3.1em; transform: rotate(16deg) scale(0.8);}
#workskin .memos span:nth-child(5) {left: 54%; top: 1.3em; transform: rotate(-10deg) scale(1.1);}
#workskin .memos span:nth-child(6) {left: 65%; top: 4.3em; transform: rotate(4deg) scale(0.75);}
#workskin .memos span:nth-child(7) {left: 75%; top: 0.7em; transform: rotate(-18deg) scale(0.85);}
#workskin .memos span:nth-child(8) {left: 85%; top: 3.3em; transform: rotate(10deg) scale(0.95);}
#workskin .memos span:nth-child(9) {left: 93%; top: 1.8em; transform: rotate(-6deg) scale(0.6);}
#workskin .memos span:nth-child(10) {left: 24%; top: 2.2em; transform: rotate(12deg) scale(0.65);}
#workskin .memos span:nth-child(11) {left: -14%; top: 1.0em; transform: rotate(10deg) scale(0.9);}
#workskin .memos span:nth-child(12) {left: -12%; top: 4.0em; transform: rotate(-12deg) scale(0.8);}
#workskin .memos span:nth-child(13) {left: 108%; top: 0.8em; transform: rotate(175deg) scale(0.85);}
#workskin .memos span:nth-child(14) {left: 106%; top: 3.6em; transform: rotate(190deg) scale(0.7);}
#workskin .memos span:nth-child(15) {left: 20%; top: -2.6em; transform: rotate(50deg) scale(0.8);}
#workskin .memos span:nth-child(16) {left: 62%; top: -2.4em; transform: rotate(40deg) scale(0.9);}
#workskin .memos span:nth-child(17) {left: 38%; top: 7.4em; transform: rotate(-40deg) scale(0.75);}
#workskin .memos span:nth-child(18) {left: 80%; top: 7.2em; transform: rotate(-30deg) scale(0.8);}
#workskin .memos:hover span:nth-child(1), #workskin details.live[open] .memos span:nth-child(1) {left: 11.4%; top: 2.55em; transform: rotate(49deg) scale(0.9); transition-delay: 0.49s;}
#workskin .memos:hover span:nth-child(2), #workskin details.live[open] .memos span:nth-child(2) {left: 93%; top: 2.22em; transform: rotate(-49deg) scale(0.7); transition-delay: 0.21s;}
#workskin .memos:hover span:nth-child(3), #workskin details.live[open] .memos span:nth-child(3) {left: 21.2%; top: 0.14em; transform: rotate(30deg) scale(1.0); transition-delay: 0.47s;}
#workskin .memos:hover span:nth-child(4), #workskin details.live[open] .memos span:nth-child(4) {left: 1.2%; top: 4.07em; transform: rotate(43deg) scale(0.8); transition-delay: 0.48s;}
#workskin .memos:hover span:nth-child(5), #workskin details.live[open] .memos span:nth-child(5) {left: 45.0%; top: 2.62em; transform: rotate(-70deg) scale(1.1); transition-delay: 0.29s;}
#workskin .memos:hover span:nth-child(6), #workskin details.live[open] .memos span:nth-child(6) {left: 53.1%; top: 4.22em; transform: rotate(50deg) scale(0.75); transition-delay: 0.35s;}
#workskin .memos:hover span:nth-child(7), #workskin details.live[open] .memos span:nth-child(7) {left: 2.6%; top: 0.19em; transform: rotate(44deg) scale(0.85); transition-delay: 0.4s;}
#workskin .memos:hover span:nth-child(8), #workskin details.live[open] .memos span:nth-child(8) {left: 68.4%; top: 4.04em; transform: rotate(-20deg) scale(0.95); transition-delay: 0.47s;}
#workskin .memos:hover span:nth-child(9), #workskin details.live[open] .memos span:nth-child(9) {left: 36.3%; top: 0.32em; transform: rotate(63deg) scale(0.6); transition-delay: 0.33s;}
#workskin .memos:hover span:nth-child(10), #workskin details.live[open] .memos span:nth-child(10) {left: 48.5%; top: 0.4em; transform: rotate(-57deg) scale(0.65); transition-delay: 0.15s;}
#workskin .memos:hover span:nth-child(11), #workskin details.live[open] .memos span:nth-child(11) {left: 64.3%; top: 0.36em; transform: rotate(53deg) scale(0.9); transition-delay: 0.36s;}
#workskin .memos:hover span:nth-child(12), #workskin details.live[open] .memos span:nth-child(12) {left: 80.6%; top: 0.15em; transform: rotate(14deg) scale(0.8); transition-delay: 0.47s;}
#workskin .memos:hover span:nth-child(13), #workskin details.live[open] .memos span:nth-child(13) {left: 33.4%; top: 4.35em; transform: rotate(210deg) scale(0.85); transition-delay: 0.31s;}
#workskin .memos:hover span:nth-child(14), #workskin details.live[open] .memos span:nth-child(14) {left: 60.6%; top: 2.29em; transform: rotate(218deg) scale(0.7); transition-delay: 0.11s;}
#workskin .memos:hover span:nth-child(15), #workskin details.live[open] .memos span:nth-child(15) {left: 25.0%; top: 2.18em; transform: rotate(83deg) scale(0.8); transition-delay: 0.37s;}
#workskin .memos:hover span:nth-child(16), #workskin details.live[open] .memos span:nth-child(16) {left: 79.8%; top: 2.08em; transform: rotate(90deg) scale(0.9); transition-delay: 0.46s;}
#workskin .memos:hover span:nth-child(17), #workskin details.live[open] .memos span:nth-child(17) {left: 18.5%; top: 4.49em; transform: rotate(-10deg) scale(0.75); transition-delay: 0.08s;}
#workskin .memos:hover span:nth-child(18), #workskin details.live[open] .memos span:nth-child(18) {left: 80.5%; top: 4.12em; transform: rotate(30deg) scale(0.8); transition-delay: 0.14s;}
#workskin .frostprints {position: relative; max-width: 30em; height: 5em; margin: 2.2em auto; overflow: hidden; border-radius: 0.5em; background-image: radial-gradient(circle at 30% 40%, rgba(58,52,44,0.55) 0, rgba(58,52,44,0) 2px), radial-gradient(circle at 70% 20%, rgba(184,174,158,0.75) 0, rgba(184,174,158,0) 2.2px), radial-gradient(circle at 50% 70%, rgba(98,92,84,0.6) 0, rgba(98,92,84,0) 3px), radial-gradient(circle at 15% 85%, rgba(150,142,130,0.6) 0, rgba(150,142,130,0) 2.6px), radial-gradient(ellipse at 22% 50%, rgba(118,110,98,0.45) 0, rgba(118,110,98,0) 45%), radial-gradient(ellipse at 78% 40%, rgba(160,152,140,0.35) 0, rgba(160,152,140,0) 40%), linear-gradient(#8f8b84, #86827b); background-size: 11px 13px, 19px 17px, 29px 23px, 37px 31px, 100% 100%, 100% 100%, 100% 100%; box-shadow: inset 0 0 1.2em rgba(40,40,45,0.35);}
#workskin .frostprints::before {content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-image: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.85) 0, rgba(255,255,255,0) 1.3px), radial-gradient(circle at 70% 60%, rgba(238,247,255,0.8) 0, rgba(238,247,255,0) 1.1px), radial-gradient(circle at 40% 80%, rgba(255,255,255,0.7) 0, rgba(255,255,255,0) 1.7px), radial-gradient(circle at 85% 15%, rgba(250,252,255,0.75) 0, rgba(250,252,255,0) 0.9px), radial-gradient(ellipse at 50% 50%, rgba(240,246,252,0) 50%, rgba(240,246,252,0.4) 100%), linear-gradient(rgba(228,237,245,0.42), rgba(228,237,245,0.42)); background-size: 13px 11px, 17px 19px, 23px 29px, 7px 9px, 100% 100%, 100% 100%; transition: opacity 1.6s ease;}
#workskin .frostprints::after {content: ""; position: absolute; left: -40%; top: 0; width: 40%; bottom: 0; z-index: 2; background-image: linear-gradient(100deg, rgba(255,250,230,0) 0, rgba(255,250,230,0.35) 50%, rgba(255,250,230,0) 100%); transition: left 2.2s ease-in-out 0.3s;}
#workskin .frostprints span {position: absolute; z-index: 1; width: 1.1em; height: 0.5em; border-radius: 45% 55% 55% 45%; background-image: radial-gradient(ellipse at 62% 32%, rgba(255,255,255,0.5) 0, rgba(255,255,255,0) 38%), linear-gradient(#5a5650, #47443f); box-shadow: 0 0 0.1em 0.06em rgba(70,66,60,0.35); transition: box-shadow 0.8s ease, filter 0.8s ease;}
#workskin .frostprints span::after {content: ""; position: absolute; left: -0.62em; top: 0.06em; width: 0.42em; height: 0.38em; border-radius: 50%; background-image: radial-gradient(ellipse at 55% 35%, rgba(255,255,255,0.45) 0, rgba(255,255,255,0) 45%), linear-gradient(#5a5650, #47443f); box-shadow: 0 0 0.1em 0.06em rgba(70,66,60,0.35); transition: box-shadow 0.8s ease;}
#workskin .frostprints span:nth-child(odd)::before {content: ""; position: absolute; left: 0.25em; top: 1.05em; width: 0.22em; height: 0.22em; border-radius: 50%; background: #4d4a44; box-shadow: 0 0 0.08em 0.05em rgba(70,66,60,0.35);}
#workskin .frostprints span:nth-child(1) {left: 5.0%; top: 1.35em; transform: rotate(-5deg);}
#workskin .frostprints span:nth-child(2) {left: 14.3%; top: 2.75em; transform: rotate(4deg);}
#workskin .frostprints span:nth-child(3) {left: 23.6%; top: 1.35em; transform: rotate(-3deg);}
#workskin .frostprints span:nth-child(4) {left: 32.9%; top: 2.75em; transform: rotate(6deg);}
#workskin .frostprints span:nth-child(5) {left: 42.2%; top: 1.35em; transform: rotate(-6deg);}
#workskin .frostprints span:nth-child(6) {left: 51.5%; top: 2.75em; transform: rotate(3deg);}
#workskin .frostprints span:nth-child(7) {left: 60.8%; top: 1.35em; transform: rotate(-4deg);}
#workskin .frostprints span:nth-child(8) {left: 70.1%; top: 2.75em; transform: rotate(5deg);}
#workskin .frostprints span:nth-child(9) {left: 79.4%; top: 1.35em; transform: rotate(-2deg);}
#workskin .frostprints span:nth-child(10) {left: 88.7%; top: 2.75em; transform: rotate(4deg);}
#workskin .frostprints:hover::before, #workskin details.live[open] .frostprints::before {opacity: 0.55;}
#workskin .frostprints:hover::after, #workskin details.live[open] .frostprints::after {left: 105%;}
#workskin .frostprints:hover span:nth-child(1), #workskin details.live[open] .frostprints span:nth-child(1) {box-shadow: 0 0 0.45em 0.3em rgba(70,66,60,0.45); filter: brightness(1.2); transition-delay: 0.0s;}
#workskin .frostprints:hover span:nth-child(2), #workskin details.live[open] .frostprints span:nth-child(2) {box-shadow: 0 0 0.45em 0.3em rgba(70,66,60,0.45); filter: brightness(1.2); transition-delay: 0.15s;}
#workskin .frostprints:hover span:nth-child(3), #workskin details.live[open] .frostprints span:nth-child(3) {box-shadow: 0 0 0.45em 0.3em rgba(70,66,60,0.45); filter: brightness(1.2); transition-delay: 0.3s;}
#workskin .frostprints:hover span:nth-child(4), #workskin details.live[open] .frostprints span:nth-child(4) {box-shadow: 0 0 0.45em 0.3em rgba(70,66,60,0.45); filter: brightness(1.2); transition-delay: 0.45s;}
#workskin .frostprints:hover span:nth-child(5), #workskin details.live[open] .frostprints span:nth-child(5) {box-shadow: 0 0 0.45em 0.3em rgba(70,66,60,0.45); filter: brightness(1.2); transition-delay: 0.6s;}
#workskin .frostprints:hover span:nth-child(6), #workskin details.live[open] .frostprints span:nth-child(6) {box-shadow: 0 0 0.45em 0.3em rgba(70,66,60,0.45); filter: brightness(1.2); transition-delay: 0.75s;}
#workskin .frostprints:hover span:nth-child(7), #workskin details.live[open] .frostprints span:nth-child(7) {box-shadow: 0 0 0.45em 0.3em rgba(70,66,60,0.45); filter: brightness(1.2); transition-delay: 0.9s;}
#workskin .frostprints:hover span:nth-child(8), #workskin details.live[open] .frostprints span:nth-child(8) {box-shadow: 0 0 0.45em 0.3em rgba(70,66,60,0.45); filter: brightness(1.2); transition-delay: 1.05s;}
#workskin .frostprints:hover span:nth-child(9), #workskin details.live[open] .frostprints span:nth-child(9) {box-shadow: 0 0 0.45em 0.3em rgba(70,66,60,0.45); filter: brightness(1.2); transition-delay: 1.2s;}
#workskin .frostprints:hover span:nth-child(10), #workskin details.live[open] .frostprints span:nth-child(10) {box-shadow: 0 0 0.45em 0.3em rgba(70,66,60,0.45); filter: brightness(1.2); transition-delay: 1.35s;}
#workskin .wireless {position: relative; width: 17em; max-width: 100%; height: 14.6em; margin: 2.4em auto; border-radius: 8.5em 8.5em 0.8em 0.8em; background-image: linear-gradient(to right, rgba(0,0,0,0.25), rgba(0,0,0,0) 12%, rgba(255,230,190,0.12) 50%, rgba(0,0,0,0) 88%, rgba(0,0,0,0.25)), repeating-linear-gradient(92deg, rgba(60,30,10,0) 0, rgba(60,30,10,0) 7px, rgba(60,30,10,0.12) 8px, rgba(60,30,10,0) 10px), linear-gradient(#7a4a26, #5c3418); box-shadow: inset 0 0 0 0.35em rgba(40,20,8,0.35), inset 0 0.6em 1em rgba(255,220,170,0.15), 0 7px 16px rgba(0,0,0,0.32); font-family: "Palatino Linotype", Palatino, "Book Antiqua", "URW Palladio L", "TeX Gyre Pagella", Georgia, serif;}
#workskin .wireless p {margin: 0;}
#workskin .wireless .grille {position: absolute; left: 2.4em; right: 2.4em; top: 1.5em; height: 7.4em; overflow: hidden; border-radius: 6.1em 6.1em 0.3em 0.3em; background-image: repeating-linear-gradient(90deg, rgba(0,0,0,0) 0, rgba(0,0,0,0) 0.95em, #6a3c1d 0.95em, #8a5530 1.15em, #5e3418 1.35em), repeating-linear-gradient(45deg, rgba(255,240,210,0.08) 0, rgba(255,240,210,0.08) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 3px), repeating-linear-gradient(-45deg, rgba(0,0,0,0.12) 0, rgba(0,0,0,0.12) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 3px), linear-gradient(#b89a6e, #a08257); box-shadow: inset 0 0 0.6em rgba(0,0,0,0.55);}
#workskin .wireless .grille::before {content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-image: radial-gradient(ellipse at 50% 70%, rgba(255,170,70,0.55) 0, rgba(255,140,40,0.2) 45%, rgba(255,140,40,0) 70%); opacity: 0; transition: opacity 1.4s ease;}
#workskin .wireless .grille::after {content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0) 0, rgba(255,255,255,0) 3px, rgba(255,255,255,0.22) 3px, rgba(255,255,255,0) 4px), repeating-linear-gradient(0deg, rgba(0,0,0,0) 0, rgba(0,0,0,0) 5px, rgba(0,0,0,0.18) 5px, rgba(0,0,0,0) 7px); transition: opacity 1.2s ease;}
#workskin .wireless .dial {position: absolute; left: 3.1em; right: 3.1em; top: 9.6em; height: 1.9em; overflow: hidden; border-radius: 0.3em; background-image: linear-gradient(#efe2c0, #e3d2a8); box-shadow: inset 0 0 0 0.12em #3b220f, inset 0 0.15em 0.35em rgba(0,0,0,0.35); transition: box-shadow 1.2s ease, background-color 1.2s ease;}
#workskin .wireless .dial::before {content: "550 · 700 · 850 · 1000 · 1200 · 1500"; position: absolute; left: 0; right: 0; top: 0.28em; color: #4a3218; font-size: 0.5em; letter-spacing: 0.06em; text-align: center; white-space: nowrap;}
#workskin .wireless .dial::after {content: "HOME · LIGHT · WWN · · · ·"; position: absolute; left: 0; right: 0; bottom: 0.3em; color: #6a4a26; font-size: 0.44em; letter-spacing: 0.14em; text-align: center; white-space: nowrap;}
#workskin .wireless .needle {position: absolute; left: 14%; top: 0.15em; bottom: 0.15em; width: 0.12em; background: #b3261e; box-shadow: 0 0 2px rgba(179,38,30,0.6); transition: left 2s ease-in-out;}
#workskin .wireless .knobs span {position: absolute; bottom: 1em; width: 1.6em; height: 1.6em; border-radius: 50%; background-image: radial-gradient(circle at 38% 32%, #8a5a30 0, #3b2210 70%), repeating-conic-gradient(#2a170a 0deg 6deg, #5a361a 6deg 12deg); box-shadow: 0 0.12em 0.25em rgba(0,0,0,0.5); transition: transform 2s ease-in-out;}
#workskin .wireless .knobs span::after {content: ""; position: absolute; left: 50%; top: 0.18em; width: 0.12em; height: 0.5em; margin-left: -0.06em; border-radius: 0.06em; background: #e8d3a5;}
#workskin .wireless .knobs span:nth-child(1) {left: 1.5em;}
#workskin .wireless .knobs span:nth-child(2) {right: 1.5em;}
#workskin .wireless:hover .grille::before, #workskin details.live[open] .wireless .grille::before {opacity: 1;}
#workskin .wireless:hover .grille::after, #workskin details.live[open] .wireless .grille::after {opacity: 0; transition-delay: 1.4s;}
#workskin .wireless:hover .dial, #workskin details.live[open] .wireless .dial {box-shadow: inset 0 0 0 0.12em #3b220f, inset 0 0 0.9em rgba(255,170,60,0.85), 0 0 0.9em rgba(255,170,60,0.45);}
#workskin .wireless:hover .needle, #workskin details.live[open] .wireless .needle {left: 71%;}
#workskin .wireless:hover .knobs span:nth-child(2), #workskin details.live[open] .wireless .knobs span:nth-child(2) {transform: rotate(250deg);}
#workskin .wireless::after {content: "Fred"; position: absolute; left: 1.7em; top: 9.05em; z-index: 1; padding: 0.15em 0.5em 0.1em; background-image: linear-gradient(#fbf6e6, #efe5c9); box-shadow: 0 1px 2px rgba(0,0,0,0.35); color: #2c3e6b; font-family: "Bradley Hand", "Ink Free", casual, "Segoe Print", cursive; font-size: 0.72em; line-height: 1.2; transform: rotate(-9deg);}
#workskin .treeletters {position: relative; max-width: 23em; margin: 2.8em auto; padding: 1.8em 2em 1.5em; background-image: radial-gradient(circle at 12% 88%, rgba(150,120,70,0.14) 0, rgba(150,120,70,0) 22%), radial-gradient(circle at 90% 12%, rgba(150,120,70,0.1) 0, rgba(150,120,70,0) 18%), linear-gradient(#f8f2e2, #f1e8d1); color: #2f3a2c; border: 1px solid #d6c9a8; box-shadow: inset 0 0 0 0.45em #f8f2e2, inset 0 0 0 0.52em rgba(75,95,60,0.55), 0 4px 10px rgba(0,0,0,0.18); text-align: center; font-family: "Palatino Linotype", Palatino, "Book Antiqua", "URW Palladio L", "TeX Gyre Pagella", Georgia, serif;}
#workskin .treeletters p {margin: 0;}
#workskin .treeletters .ogham {position: relative; height: 3.6em; margin: 0 auto 1.1em; width: 13em; background-image: linear-gradient(#2f3a2c, #2f3a2c); background-size: 100% 0.13em; background-position: 0 1.4em; background-repeat: no-repeat;}
#workskin .treeletters .ogham span {position: absolute; top: 0.25em; width: 2.6em; height: 2.3em; color: #2f3a2c; background-repeat: no-repeat; transition: color 0.7s ease, filter 0.7s ease;}
#workskin .treeletters .ogham span::after {position: absolute; left: -1em; right: -1em; top: 4.15em; color: #6b6a55; font-size: 0.62em; font-style: italic; letter-spacing: 0.06em;}
#workskin .treeletters .ogham span:nth-child(1) {left: 0.9em; background-image: linear-gradient(currentColor, currentColor); background-size: 0.13em 1.05em; background-position: 50% 1.2em;}
#workskin .treeletters .ogham span:nth-child(1)::after {content: "birch";}
#workskin .treeletters .ogham span:nth-child(2) {left: 5.2em; background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor); background-size: 0.13em 1.05em, 0.13em 1.05em; background-position: 32% 1.2em, 68% 1.2em;}
#workskin .treeletters .ogham span:nth-child(2)::after {content: "rowan";}
#workskin .treeletters .ogham span:nth-child(3) {left: 9.5em; background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor); background-size: 0.13em 2.1em, 0.13em 2.1em; background-position: 34% 0.1em, 66% 0.1em; transform: skewX(-32deg);}
#workskin .treeletters .ogham span:nth-child(3)::after {content: "ivy"; transform: skewX(32deg);}
#workskin .treeletters .rhyme {font-size: 0.98em; font-style: italic; line-height: 1.55;}
#workskin .treeletters .source {margin-top: 0.9em; color: #6b6a55; font-size: 0.72em; letter-spacing: 0.08em;}
#workskin .treeletters:hover .ogham span, #workskin details.live[open] .treeletters .ogham span {color: #86a8ee; filter: drop-shadow(0 0 0.1em #5f84d6) drop-shadow(0 0 0.32em rgba(120,160,245,0.95));}
#workskin .treeletters:hover .ogham span:nth-child(2), #workskin details.live[open] .treeletters .ogham span:nth-child(2) {transition-delay: 0.5s;}
#workskin .treeletters:hover .ogham span:nth-child(3), #workskin details.live[open] .treeletters .ogham span:nth-child(3) {transition-delay: 1s;}
#workskin .earsbox {position: relative; width: 19em; max-width: 100%; height: 11.5em; margin: 2.4em auto; border-radius: 0.3em; background-image: linear-gradient(#c49a63, #b88c55); box-shadow: inset 0 0 0 0.3em #a87d47, 0 6px 14px rgba(0,0,0,0.28); font-family: "Palatino Linotype", Palatino, Georgia, serif; text-align: center;}
#workskin .earsbox p {margin: 0;}
#workskin .earsbox .inside {position: absolute; left: 0.45em; right: 0.45em; top: 0.45em; bottom: 0.45em; background-image: radial-gradient(ellipse at 50% 40%, #f6d3b5 0, #e7b08c 34%, #b47b57 56%, rgba(180,123,87,0) 60%), radial-gradient(circle at 50% 50%, rgba(80,50,30,0.35) 0, rgba(80,50,30,0) 70%), linear-gradient(#6b4a2c, #5a3d23); background-size: 1.15em 0.95em, 1.15em 0.95em, 100% 100%; background-position: 0.1em 0.15em, 0.1em 0.3em, 0 0; box-shadow: inset 0 0 1em rgba(0,0,0,0.55);}
#workskin .earsbox .flap {position: absolute; top: 0; bottom: 0; width: 50%; background-image: repeating-linear-gradient(90deg, rgba(120,80,40,0) 0, rgba(120,80,40,0) 5px, rgba(120,80,40,0.08) 5px, rgba(120,80,40,0.08) 6px), linear-gradient(160deg, #d2a874, #c09058); box-shadow: inset 0 0 0 1px rgba(110,72,35,0.5); transition: transform 1.1s ease-in-out;}
#workskin .earsbox .flap:nth-of-type(2) {left: 0; transform-origin: 0 50%;}
#workskin .earsbox .flap:nth-of-type(3) {right: 0; transform-origin: 100% 50%; background-image: repeating-linear-gradient(90deg, rgba(120,80,40,0) 0, rgba(120,80,40,0) 5px, rgba(120,80,40,0.08) 5px, rgba(120,80,40,0.08) 6px), linear-gradient(200deg, #cda36e, #b98a52);}
#workskin .earsbox .flap:nth-of-type(3)::before {content: ""; position: absolute; left: -0.6em; top: 44%; width: 1.2em; height: 1.4em; background-image: linear-gradient(rgba(214,196,150,0.85), rgba(200,182,136,0.85)); box-shadow: 0 0 1px rgba(0,0,0,0.25);}
#workskin .earsbox .stamp {display: inline-block; margin: 1.4em 0 0.6em; padding: 0.22em 0.6em 0.18em; border: 2px solid rgba(194,24,91,0.75); border-radius: 2px; color: rgba(194,24,91,0.9); font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif; font-size: 0.42em; font-weight: bold; letter-spacing: 0.14em; text-transform: uppercase; transform: rotate(-5deg);}
#workskin .earsbox .label {color: #1d1b17; font-family: Noteworthy, "Ink Free", casual, "Bradley Hand", "Segoe Print", cursive; font-size: 1.12em; font-weight: bold; letter-spacing: 0.02em; line-height: 1.1; text-transform: uppercase; transform: rotate(-3deg);}
#workskin .earsbox .label .tm {display: inline-block; margin-left: 0.05em; font-family: inherit; font-size: 0.5em; vertical-align: 0.8em;}
#workskin .earsbox .small {margin-top: 0.4em; color: #1d1b17; font-family: Noteworthy, "Ink Free", casual, "Bradley Hand", "Segoe Print", cursive; font-size: 0.78em; line-height: 1.25; transform: rotate(-2deg);}
#workskin .earsbox:hover .flap:nth-of-type(2), #workskin details.live[open] .earsbox .flap:nth-of-type(2) {transform: scaleX(0.14) skewY(-8deg);}
#workskin .earsbox:hover .flap:nth-of-type(3), #workskin details.live[open] .earsbox .flap:nth-of-type(3) {transform: scaleX(0.14) skewY(8deg); transition-delay: 0.25s;}
#workskin .spell {position: relative; font-family: "Apple Chancery", "Monotype Corsiva", "Lucida Calligraphy", Gabriola, "Snell Roundhand", "URW Chancery L", "Z003", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif; font-size-adjust: 0.47; font-style: italic; font-weight: normal; font-synthesis: none; letter-spacing: 0.02em; line-height: 1; cursor: pointer; background-image: linear-gradient(100deg, currentColor 0%, currentColor 37%, #d99a1e 44%, #ffcf4d 50%, #d99a1e 56%, currentColor 63%, currentColor 100%); background-size: 320% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 0.12em rgba(224,169,58,0.55)); transition: background-position 1.3s ease-in-out, filter 0.6s ease;}
#workskin .spell::after {content: "✦"; position: absolute; right: 0; top: -0.5em; font-family: "Palatino Linotype", Palatino, Georgia, serif; font-size: 0.72em; font-style: normal; line-height: 1; color: #e0a93a; -webkit-text-fill-color: #e0a93a; opacity: 0; transform: scale(0.2) rotate(-40deg); transition: opacity 0.25s ease, transform 0.4s ease;}
#workskin .spell:hover {background-position: 0 0; filter: drop-shadow(0 0 0.25em rgba(255,198,80,0.9));}
#workskin .spell:hover::after {opacity: 1; transform: translate(0.4em, -0.15em) scale(1) rotate(15deg); transition: opacity 0.3s ease 0.8s, transform 0.6s ease 0.8s;}
#workskin .spell.red {background-image: linear-gradient(100deg, currentColor 0%, currentColor 37%, #c62a1e 44%, #ff5a45 50%, #c62a1e 56%, currentColor 63%, currentColor 100%); filter: drop-shadow(0 0 0.12em rgba(217,54,43,0.5));}
#workskin .spell.red:hover {filter: drop-shadow(0 0 0.25em rgba(255,72,52,0.85));}
#workskin .spell.red::after {color: #e0483c; -webkit-text-fill-color: #e0483c;}
#workskin .spell.silver {background-image: linear-gradient(100deg, currentColor 0%, currentColor 37%, #7894c8 44%, #a9c4f0 50%, #7894c8 56%, currentColor 63%, currentColor 100%); filter: drop-shadow(0 0 0.12em rgba(150,185,240,0.65));}
#workskin .spell.silver:hover {filter: drop-shadow(0 0 0.25em rgba(190,215,255,0.95));}
#workskin .spell.silver::after {color: #9fb8e6; -webkit-text-fill-color: #9fb8e6;}
#workskin .patronus {font-family: inherit; font-style: italic; text-shadow: 0 0 0.2em rgba(150,190,255,0.95), 0 0 0.6em rgba(150,190,255,0.7), 0 0 1.2em rgba(170,205,255,0.45); transition: text-shadow 0.6s ease; cursor: pointer;}
#workskin .patronus:hover {text-shadow: 0 0 0.25em rgba(170,205,255,1), 0 0 0.8em rgba(150,190,255,0.95), 0 0 1.8em rgba(150,190,255,0.7);}
#workskin div.userstuff > p.hill {max-width: 44em; margin: 1.5em auto; font-family: "Palatino Linotype", Palatino, "Book Antiqua", "URW Palladio L", "TeX Gyre Pagella", Georgia, serif; font-style: italic; line-height: 1.6; text-align: center; text-indent: 0; letter-spacing: 0.42em; opacity: 0.62; filter: blur(0.7px); text-shadow: 0 0 0.35em rgba(200,222,245,0.95), 0 0 0.9em rgba(200,222,245,0.7); cursor: pointer; transition: letter-spacing 1.4s ease, opacity 1.4s ease, filter 1.4s ease;}
#workskin div.userstuff > p.hill:hover {letter-spacing: 0.22em; opacity: 1; filter: blur(0);}
#workskin details.reread {max-width: 44em; margin: 0 auto 1.6em; padding: 0; text-align: right;}
#workskin details.reread summary {display: inline-block; list-style: none; cursor: pointer; padding: 0.2em 0.8em 0.25em; border: 1px solid currentColor; border-radius: 1em; font-family: "Palatino Linotype", Palatino, "Book Antiqua", "URW Palladio L", "TeX Gyre Pagella", Georgia, serif; font-size: 0.8em; font-variant: small-caps; letter-spacing: 0.1em; opacity: 0.45; transition: opacity 0.3s ease;}
#workskin details.reread summary::-webkit-details-marker {display: none;}
#workskin details.reread summary::after {content: " · off";}
#workskin details.reread summary:hover, #workskin details.reread[open] summary {opacity: 1;}
#workskin details.reread[open] summary::after {content: " · on";}
#workskin .clue {position: relative; background-image: linear-gradient(rgba(222,176,60,0) 56%, rgba(222,176,60,0.42) 56%); background-size: 0 100%; background-repeat: no-repeat; transition: background-size 0.9s ease;}
#workskin .clue::before {content: ""; position: absolute; left: 0.1em; top: -0.5em; width: 0; height: 0; border-left: 0.26em solid transparent; border-right: 0.26em solid transparent; border-bottom: 0.32em solid #c79a2e; opacity: 0; transition: opacity 0.4s ease 0.5s;}
#workskin details.reread[open] ~ p .clue {background-size: 100% 100%;}
#workskin details.reread[open] ~ p .clue::before {opacity: 1;}
#workskin .carved {font-family: "Copperplate", "Copperplate Gothic Light", "Trajan Pro", Georgia, serif; font-style: normal; font-weight: normal; letter-spacing: 0.16em; opacity: 0.8; text-shadow: 0 1px 0 rgba(255,255,255,0.75), 0 -1px 0 rgba(0,0,0,0.35); cursor: pointer; transition: opacity 0.6s ease, text-shadow 0.6s ease;}
#workskin .carved:hover {opacity: 1; text-shadow: 0 0 0.25em rgba(110,210,130,0.95), 0 0 0.7em rgba(110,210,130,0.55);}
#workskin p.wall {max-width: 44em; margin: 1.4em auto; text-align: center; text-indent: 0; font-size: 1.05em;}