/* 84 · 태엽 장치 — static styles only: paper, ink, washes. Every moving value is SMIL inside the SVG. */
.paper { position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 50% 42%, rgba(255, 250, 236, 0) 55%, rgba(120, 84, 40, .22) 100%),
    radial-gradient(14% 9% at 18% 22%, rgba(170, 120, 60, .07), transparent 70%),
    radial-gradient(10% 7% at 82% 66%, rgba(170, 120, 60, .06), transparent 70%),
    radial-gradient(18% 10% at 70% 12%, rgba(150, 110, 60, .05), transparent 70%),
    linear-gradient(180deg, #f3e9d3, #ecdfc3); }
/* paper grain: a static SVG noise tile multiplied over the cream */
.paper::after { content: ''; position: absolute; inset: 0; opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .55 0 0 0 0 .45 0 0 0 0 .32 0 0 0 .55 0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");
  background-size: 240px 240px; }
.plate-svg { position: absolute; left: 0; top: 0; }

/* ink */
.plate-svg .ink { fill: none; stroke: #2b2219; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.plate-svg .ink.thin { stroke-width: .8; }
.plate-svg .ink.hair { stroke-width: .6; opacity: .7; }
.plate-svg .ink.frame { stroke-width: 2.6; }
.plate-svg .ink.rod { stroke-width: 1.3; }
.plate-svg .turn circle, .plate-svg .drumlines circle { fill: none; stroke: #2b2219; stroke-width: .6; opacity: .45; }
.plate-svg .shade { fill: url(#hatch); }
/* hand-tinted washes */
.plate-svg .wash { stroke: none; }
.plate-svg .wash.brass { fill: #dcbc7c; fill-opacity: .62; }
.plate-svg .wash.steel { fill: #7d8aa3; fill-opacity: .55; }
.plate-svg .plate { fill: url(#hatch); fill-opacity: .16; }
.plate-svg .bar { fill: #d7b979; fill-opacity: .55; }
.plate-svg .drum { fill: #e6d6b4; stroke: none; }
.plate-svg .drumback { fill: #e3d2ae; stroke: none; }
.plate-svg .hub { fill: #e8d3a0; stroke: #2b2219; stroke-width: 1.1; }
.plate-svg .arbor circle, .plate-svg .screw { fill: #f1e4c4; stroke: #2b2219; stroke-width: 1.1; }
.plate-svg .arbor line { stroke: #2b2219; stroke-width: 1.2; }
.plate-svg .spring { fill: none; stroke: #33405a; stroke-width: 2.4; stroke-linejoin: round; }
.plate-svg .springwire { fill: none; stroke: #2b2219; stroke-width: 1.6; }
.plate-svg .gleam { fill: none; stroke: #fff6dc; stroke-width: 2.4; stroke-linecap: round; opacity: .8; }
.plate-svg .jewel { fill: #b9361e; fill-opacity: .8; }
.plate-svg .anchorink { fill: none; stroke: #2b2219; stroke-width: 10.5; stroke-linecap: round; stroke-linejoin: round; }
.plate-svg .anchorwash { fill: none; stroke: #e2c88f; stroke-width: 7.5; stroke-linecap: round; stroke-linejoin: round; }
.plate-svg .key .keyshaft { fill: #ecdcb6; stroke: #2b2219; stroke-width: 1.3; }
.plate-svg .key .keybow { fill: #dcbc7c; fill-opacity: .7; stroke: #2b2219; stroke-width: 1.5; }
.plate-svg .key .keyhole { fill: #efe4cc; stroke: #2b2219; stroke-width: 1; }
.plate-svg .corner { fill: none; stroke: #2b2219; stroke-width: 1.2; }

/* the orrery */
.plate-svg .orbit { fill: none; stroke: #2b2219; stroke-width: .9; stroke-dasharray: 2 5; opacity: .75; }
.plate-svg .calring { fill: none; stroke: #2b2219; stroke-width: 1.4; }
.plate-svg .calring.thin { stroke-width: .7; }
.plate-svg .tick { stroke: #2b2219; stroke-width: .8; }
.plate-svg .tick.major { stroke-width: 1.6; }
.plate-svg .arm { stroke: #2b2219; stroke-width: 2.2; stroke-linecap: round; }
.plate-svg .armend { fill: #e8d3a0; stroke: #2b2219; stroke-width: 1; }
.plate-svg .pointer { fill: #b9361e; fill-opacity: .85; stroke: #2b2219; stroke-width: 1; }
.plate-svg .post { stroke: #2b2219; stroke-width: 1.6; }
.plate-svg .postfoot { fill: #2b2219; }
.plate-svg .body { stroke: none; }
.plate-svg .bodyline { fill: none; stroke: #2b2219; stroke-width: 1.2; }
.plate-svg .night { stroke: none; opacity: .75; }
.plate-svg .land { fill: #6f9a62; fill-opacity: .8; stroke: none; }
.plate-svg .moon { fill: #e4ddcc; stroke: #2b2219; stroke-width: 1; }
.plate-svg .moonorbit { fill: none; stroke: #2b2219; stroke-width: .6; stroke-dasharray: 1.5 3; opacity: .6; }
.plate-svg .ray { fill: #e9bd5c; fill-opacity: .7; stroke: #2b2219; stroke-width: 1; stroke-linejoin: round; }
.plate-svg .ray.flame { fill: none; stroke-width: 1.4; }
.plate-svg .spark { fill: none; stroke: #c8432a; stroke-width: 1.6; }

/* lettering */
.plate-svg text { font-family: "Nanum Myeongjo", serif; fill: #2b2219; }
.plate-svg .title { font-size: 44px; font-weight: 800; text-anchor: middle; letter-spacing: .04em; }
.plate-svg .small { font-size: 23px; font-weight: 400; letter-spacing: .06em; }
.plate-svg .small.end { text-anchor: end; }
.plate-svg .it { font-family: "Instrument Serif", serif; font-style: italic; font-size: 28px; }
.plate-svg .roman { font-family: "Instrument Serif", serif; text-anchor: middle; fill: #8d806a; }
.plate-svg .label { font-size: 30px; font-weight: 800; }
.plate-svg .legend { font-size: 25px; font-weight: 400; fill: #eadcb9; text-anchor: middle; letter-spacing: .03em; }
.plate-svg .sealbox { fill: #b9361e; fill-opacity: .92; }
.plate-svg .sealline { fill: none; stroke: #f6e6c8; stroke-width: 1.4; }
.plate-svg .sealtext { font-size: 27px; font-weight: 800; fill: #f8ead0; text-anchor: middle; }