:root {

  --w-disc:#242321;
  --w-band:#332f22;
  --w-band2:#24221c;
  --w-mark:#242321;

  --w-rule:#c5b990;
  --w-rule-h:#c5b990;
  --w-rule2:rgba(197,185,144,.42);
  --w-rule2-h:rgba(197,185,144,.60);
  --w-cusp:rgba(197,185,144,.38);

  --w-cusp-major:var(--w-rule-h);
  --w-tick:rgba(197,185,144,.7);

  --w-aspbg:var(--w-disc);

  --w-rule-w:1.4;
  --w-rule-h-w:1.3;
  --w-rule2-w:1;
  --w-tick-w:2.2;
  --w-mtick-w:3;
  --w-mtick-op:1;
  --w-asc:rgba(197,185,144,.70);
  --w-angl:#c5b990;
  --w-retro:#db919a;

  --e-fire:#ff8080;
  --e-earth:#bfbf80;
  --e-air:#80e5e3;
  --e-water:#8080ff;

  --a-soft:#8080f6;
  --a-hard:#ff8080;
  --a-neutral:#9aa2b8;
  --ag-soft:#a6a6f9;
  --ag-hard:#ff8c8c;
  --ag-neutral:#848a94;

  --w-hno:#a5acbf;

  --b-太陽:#c9a882;
  --b-月:#d8b494;
  --b-水星:#d39bd3;
  --b-金星:#71bab6;
  --b-火星:#fd8d91;
  --b-木星:#acadb3;
  --b-土星:#d6bbab;
  --b-天王星:#a4aadd;
  --b-海王星:#89b6af;
  --b-冥王星:#d99f9f;
}

  .wheel { width:100%; height:auto; display:block; }

  .wheel .disc      { fill:var(--w-disc); }
  .wheel .band      { fill:var(--w-band); }
  .wheel .band.alt  { fill:var(--w-band); }

  .wheel .band2, .wheel .band2.alt { fill:var(--w-band2); }
  .wheel .edge  { fill:none; stroke:var(--w-rule); stroke-width:var(--w-rule-w); }

  .wheel .edge.house { stroke:var(--w-rule-h); stroke-width:var(--w-rule-h-w); }
  .wheel .cusp  { stroke:var(--w-cusp); stroke-width:1; }

  .wheel .edge2 { fill:none; stroke:var(--w-rule2); stroke-width:var(--w-rule2-w); }
  .wheel .edge2.house { stroke:var(--w-rule2-h); stroke-width:var(--w-rule2-w); }
  .wheel .cusp.major { stroke:var(--w-cusp-major); stroke-width:1.6; }

  .wheel .ascHead { fill:var(--w-asc); }

  .wheel .angL { fill:var(--w-angl); font-size:13px; font-weight:700;
                 text-anchor:middle; dominant-baseline:middle; letter-spacing:.02em; }
  .wheel text { font-family:inherit; text-anchor:middle; dominant-baseline:middle; fill:var(--ink-2); }

  .wheel .cs, .wheel .bs, .wheel .bg {
    font-family:"Apple Symbols","Segoe UI Symbol","Noto Sans Symbols 2","Noto Sans Symbols2",serif;
    font-variant-emoji:text;
  }
  .wheel .hno { font-size:13px; fill:var(--w-hno, var(--dim)); }

  .wheel .markBg { fill:var(--w-mark); }
  .wheel .mg { font-size:17px;
               font-family:"Apple Symbols","Segoe UI Symbol","Noto Sans Symbols 2",serif;
               font-variant-emoji:text; }

  .wheel .signName { font-size:13px; fill:var(--dim); letter-spacing:.02em; }
  .wheel .signTick { stroke:var(--w-tick); stroke-width:var(--w-tick-w); }

  .wheel .cd, .wheel .bd { font-size:13px; }
  .wheel .cm, .wheel .bm { font-size:12px; }
  .wheel .cs, .wheel .bs { font-size:17px; }
  .wheel .cd, .wheel .cm { fill:var(--ink-2); }
  .wheel .bg { font-size:22px; }

  .wheel .retro { fill:var(--w-retro); }
  .wheel .tick  { stroke-width:var(--w-mtick-w); opacity:var(--w-mtick-op); }

  .wheel .fire  { fill:var(--e-fire); } .wheel .earth { fill:var(--e-earth); }
  .wheel .air   { fill:var(--e-air); } .wheel .water { fill:var(--e-water); }

  .b-太陽   { --p:var(--b-太陽); }
  .b-月     { --p:var(--b-月); }
  .b-水星   { --p:var(--b-水星); }
  .b-金星   { --p:var(--b-金星); }
  .b-火星   { --p:var(--b-火星); }
  .b-木星   { --p:var(--b-木星); }
  .b-土星   { --p:var(--b-土星); }
  .b-天王星 { --p:var(--b-天王星); }
  .b-海王星 { --p:var(--b-海王星); }
  .b-冥王星 { --p:var(--b-冥王星); }
  .wheel .bg, .wheel .mg { fill:var(--p, var(--ink-2)); }
  .wheel line.tick       { stroke:var(--p, var(--dim)); }

  .wheel .markBg         { stroke:var(--p, var(--w-rule2-h)); stroke-width:1.4; }

  .wheel .mark.retro .markBg { stroke-dasharray:3.2 2.6; stroke-width:1.6; }

  .wheel .asp        { stroke-width:1.2; opacity:.8; fill:none; }
  .wheel .asp.soft   { stroke:var(--a-soft); }
  .wheel .asp.hard   { stroke:var(--a-hard); }
  .wheel .asp.neutral{ stroke:var(--a-neutral); }
  .wheel .aspBg      { fill:var(--w-aspbg); opacity:.92; }
  .wheel .aspG       { font-size:11px;
                       font-family:"Apple Symbols","Segoe UI Symbol","Noto Sans Symbols 2",serif;
                       font-variant-emoji:text; }
  .wheel .aspG.soft  { fill:var(--ag-soft, var(--a-soft)); }
  .wheel .aspG.hard  { fill:var(--ag-hard, var(--a-hard)); }
  .wheel .aspG.neutral { fill:var(--ag-neutral, var(--a-neutral)); }

.wheel .wt { text-anchor:start; font-size:14px; font-weight:700; fill:var(--ink-2); opacity:.8; }
.wheel .ws { text-anchor:end;   font-size:12px; font-weight:600; fill:var(--gold);
             opacity:.7; letter-spacing:.03em; }

:root[data-preset="ivory"] {

  --w-rule:rgba(47,143,168,.75);
  --w-rule-h:rgba(47,143,168,.8);
  --w-rule2:rgba(47,143,168,.42);
  --w-rule2-h:rgba(47,143,168,.6);
  --w-cusp:rgba(47,143,168,.35);
  --w-cusp-major:rgba(47,143,168,.75);
  --w-tick:rgba(47,143,168,.7);
  --w-asc:rgba(23,82,99,.8);
  --w-angl:#175263;
  --w-retro:#b72335;

  --w-disc:#fcf9e7;
  --w-band:#fce7a8;
  --w-band2:#fdf0c9;
  --w-mark:#fcf9e7;
  --w-aspbg:#fcf9e7;

  --e-fire:#ff0000;
  --e-earth:#7d7f00;
  --e-air:#008e8b;
  --e-water:#0000ff;

  --a-soft:#0000ee;
  --a-hard:#ff0000;
  --a-neutral:#5a6270;

  --ag-soft:#0000ee;
  --ag-hard:#ff0000;
  --ag-neutral:#5a6270;
  --w-hno:var(--dim);

  --b-太陽:#935106;
  --b-月:#a24b00;
  --b-水星:#91028f;

  --b-金星:#077e79;
  --b-火星:#e40009;
  --b-木星:#5c5f6b;
  --b-土星:#98542c;
  --b-天王星:#404eb7;
  --b-海王星:#1e7567;
  --b-冥王星:#b23e3e;
}