@charset "UTF-8";

.theme-bar { position: absolute; top: 83px; left: 42px; right: 42px; z-index: 5; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
.theme-switch { display: flex; align-items: center; gap: 18px; pointer-events: auto; }
.theme-label { color: #899184; font-size: 9px; letter-spacing: .12em; }
.theme-switch button { display: flex; align-items: center; gap: 7px; padding: 0 1px; min-height: 36px; color: #919889; font-size: 11px; }
.theme-switch button[aria-pressed=true] { color: var(--paper); }
.theme-swatch { width: 11px; height: 13px; border: 1px solid #a2a58e70; box-shadow: 2px 2px 0 #a2a58e25; }
.night-swatch { background: #161d17; }
.atelier-swatch { background: linear-gradient(90deg, #d9ccb3 56%, #9b714b 56%, #9b714b 65%, #d9ccb3 65%); }
.theme-switch button[aria-pressed=true] .theme-swatch { outline: 1px solid currentColor; outline-offset: 3px; }
.theme-note { visibility: hidden; margin: 0; font: 9px var(--sans); letter-spacing: .13em; color: #766e59; }
.theme-note span { color: #a18a61; }
.atelier-note, .alchemy-note, .alchemy-motto { display: none; }
.alchemy-swatch { border-radius: 50%; background: #231810; border-color: #bc8c4e; box-shadow: inset 0 0 0 2px #0e0c0b, 0 0 7px #c68c4930; }
.switching-theme .element * { transition: none !important; }

html[data-theme=atelier] {
  --muted: #706d5b;
  --sheng: #425b44;
  --ke: #8d4c37;
}
[data-theme=atelier] .universe::before { content: ""; position: absolute; inset: 12px; border: 1px solid #87795440; pointer-events: none; z-index: -1; }
[data-theme=atelier] .universe::after { content: ""; position: absolute; top: 11px; left: 11px; width: 21px; height: 21px; border-left: 3px solid #8f7750; border-top: 3px solid #8f7750; box-shadow: 5px 5px 0 -3px #e9e4d6, 6px 6px 0 -3px #8f7750; pointer-events: none; }
[data-theme=atelier] .vignette { background: linear-gradient(109deg, #fffbed40 4%, transparent 36%, #8c764219 100%); }
[data-theme=atelier] .vignette::after { opacity: .065; mix-blend-mode: multiply; }
[data-theme=atelier] .controls::after { content: ""; position: absolute; bottom: -7px; left: 0; right: 0; height: 3px; border-top: 1px solid #7a694b6b; border-bottom: 1px solid #7a694b26; pointer-events: none; }
[data-theme=atelier] .signature { color: #393b2f; }
[data-theme=atelier] .signature span { color: #706c59; letter-spacing: .3em; }
[data-theme=atelier] .theme-note { visibility: visible; }
[data-theme=atelier] .theme-label, [data-theme=atelier] .theme-switch button { color: #716d5a; }
[data-theme=atelier] .theme-switch button[aria-pressed=true] { color: #3b4735; }
[data-theme=atelier] .layout-switch button { color: #726e5f; }
[data-theme=atelier] .layout-switch [aria-pressed=true] { color: #344832; }
[data-theme=atelier] .layout-switch [aria-pressed=true]::after { background: #806338; width: 5px; height: 2px; border-radius: 0; }
[data-theme=atelier] .icon-button, [data-theme=atelier] .languages button { color: #706d5c; }
[data-theme=atelier] .languages [aria-pressed=true] { color: #323d30; }
[data-theme=atelier] .languages span { color: #a1957c; }
[data-theme=atelier] button:focus-visible, [data-theme=atelier] a:focus-visible { outline-color: #6a512b; outline-width: 2px; }
[data-theme=atelier] .idle-axis { stroke: #8274544d; }
[data-theme=atelier] .ke-axis { stroke: #97583e40; }
[data-theme=atelier] .idle-circle { stroke: #85764f42; stroke-dasharray: 1 5; }
[data-theme=atelier] .link-glow { opacity: .035; }
[data-theme=atelier] .relationship-link { opacity: 1; }
[data-theme=atelier] .relationship-link.muted { opacity: .52; }
[data-theme=atelier] .link-line { stroke-width: 1; opacity: 1; }
[data-theme=atelier] .link-flow { filter: none; stroke-width: 2; stroke-dasharray: 1 99; }
[data-theme=atelier] .link-label { fill: #343b2c; text-shadow: 0 0 3px #e9e4d6, 0 0 6px #e9e4d6; font-size: 10px; letter-spacing: .11em; }
[data-theme=atelier] .glyph { color: #494b39; text-shadow: 1px 1px 0 #fffae599; }
[data-theme=atelier] .glyph-echo { display: none; }
[data-theme=atelier] .element.active .glyph { color: var(--color); transform: translateY(-3px) scale(1.08); text-shadow: 1px 2px 0 #fffae5, 4px 7px 12px #4c422c22; }
[data-theme=atelier] .element.peer .glyph { opacity: .85; color: var(--color); }
[data-theme=atelier] [data-active]:not([data-active=none]) .element:not(.active):not(.peer) .glyph { opacity: .65; }
[data-theme=atelier] [data-active]:not([data-active=none]) .element:not(.active):not(.peer) .element-en,
[data-theme=atelier] [data-active]:not([data-active=none]) .element:not(.active):not(.peer) .element-phase { opacity: 1; }
[data-theme=atelier] .element-en { color: #625f4e; font-size: 9px; letter-spacing: .22em; }
[data-theme=atelier] .element-phase { color: #66624f; letter-spacing: .22em; }
[data-theme=atelier] .element-en, [data-theme=atelier] .element-phase { background: var(--ink); box-shadow: 0 0 0 3px var(--ink); }
[data-theme=atelier] .element::before { height: 7px; width: 7px; top: -17px; transform: translateX(-50%); background: none; border: 1px solid #8c7550; opacity: .55; }
[data-theme=atelier] .element.active::before { height: 7px; opacity: 1; background: #987740; box-shadow: 0 0 0 3px #e9e4d6, 0 0 0 4px #92764a60; }
[data-theme=atelier] [data-layout=circle] .element::before { top: -6px; }
[data-theme=atelier] .element::after { width: 14px; height: 2px; border-radius: 0; }
[data-theme=atelier] .element-words { display: none; }
[data-theme=atelier] .reading { border-top: 1px solid #9a896644; padding-top: 21px; }
[data-theme=atelier] .nature-heading { gap: 11px; }
[data-theme=atelier] #nature-number { border: 1px solid #9a886e70; padding: 4px; color: #675d42; }
[data-theme=atelier] #nature-title { color: #3f4534; }
[data-theme=atelier] #nature-en { color: #756e59; font-size: 9px; }
[data-theme=atelier] #nature-meaning { color: #505241; }
[data-theme=atelier] #nature-tension { color: #716e5c; }
[data-theme=atelier] .group-caption { color: #79735e; }
[data-theme=atelier] .cycle-step span { color: #7f755f; }
[data-theme=atelier] .relation-choice { border-bottom-color: #7c704c38; }
[data-theme=atelier] .relation-choice .role { color: #7a735f; }
[data-theme=atelier] .relation-choice .peer-name { color: #5e604e; }
[data-theme=atelier] .relation-choice[aria-pressed=true] { border-bottom-color: var(--relation-color); }
[data-theme=atelier] .relation-choice[aria-pressed=true] .role, [data-theme=atelier] .relation-choice[aria-pressed=true] .peer-name { color: var(--relation-color); }
[data-theme=atelier] .relation-meaning { color: #5c5e4e; }
[data-theme=atelier] .edge-controls { border-top: 1px solid #a38f674d; }
[data-theme=atelier] .edge-controls button, [data-theme=atelier] #gesture, [data-theme=atelier] [data-active=none] #gesture { color: #706a53; }
[data-theme=atelier] #release { color: #554e36; }
[data-theme=atelier] dialog { background: #e9e4d6; border-color: #99835d; box-shadow: 8px 8px 0 #7c714e30, 0 20px 80px #262b3240; }
[data-theme=atelier] dialog::backdrop { background: #343c325c; }
[data-theme=atelier] dialog p { color: #545b49; }
[data-theme=atelier] dialog a { color: #526742; }
[data-theme=atelier] .atelier-note { display: block; padding-top: 16px; border-top: 1px solid #95845e55; }
[data-theme=atelier] .noscript { background: #ded6c3; }
[data-theme=atelier] ::selection { background: #8c713b33; }

html[data-theme=alchemy] { --muted: #b0a18b; --sheng: #c7ceaa; --ke: #eca477; }
[data-theme=alchemy] .universe::before { content: ""; position: absolute; inset: 13px; border: 1px solid #c49b5826; pointer-events: none; z-index: -1; }
[data-theme=alchemy] .universe::after { content: ""; position: absolute; left: 13px; right: 13px; top: 13px; height: 10px; border-left: 1px solid #c49b58; border-right: 1px solid #c49b58; pointer-events: none; }
[data-theme=alchemy] .vignette { background: radial-gradient(ellipse at 50% 40%, #8d4f1608, transparent 48%, #0e0c0b99 100%); }
[data-theme=alchemy] .vignette::after { opacity: .035; }
[data-theme=alchemy] .signature { color: #e3c591; }
[data-theme=alchemy] .signature span { color: #a49173; }
[data-theme=alchemy] .theme-note { visibility: visible; letter-spacing: .19em; }
[data-theme=alchemy] .architects { display: none; }
[data-theme=alchemy] .alchemy-motto { display: inline; color: #a08a69; }
[data-theme=alchemy] .theme-label, [data-theme=alchemy] .theme-switch button { color: #aa9c85; }
[data-theme=alchemy] .theme-switch button[aria-pressed=true] { color: #f1cc8f; }
[data-theme=alchemy] .layout-switch button, [data-theme=alchemy] .languages button, [data-theme=alchemy] .icon-button { color: #b1a28b; }
[data-theme=alchemy] .layout-switch [aria-pressed=true], [data-theme=alchemy] .languages [aria-pressed=true] { color: #f0d1a0; }
[data-theme=alchemy] .layout-switch [aria-pressed=true]::after { background: #efc586; box-shadow: 0 0 8px #e0ab60; }
[data-theme=alchemy] button:focus-visible, [data-theme=alchemy] a:focus-visible { outline-color: #e0b97b; }
[data-theme=alchemy] .idle-axis { stroke: #d5ac6745; }
[data-theme=alchemy] .ke-axis { stroke: #d6946445; }
[data-theme=alchemy] .idle-circle { stroke: #e1b56b33; }
[data-theme=alchemy] .element::before { display: none; }
[data-theme=alchemy] .element-words { display: none; }
[data-theme=alchemy] .glyph { color: #e6cfaa; text-shadow: 0 1px 0 #fff1b51f, 0 0 24px #c483342e; font-size: 72px; }
[data-theme=alchemy] .element.active .glyph { color: var(--color); transform: scale(1.1); text-shadow: 0 0 18px color-mix(in srgb, var(--color) 40%, transparent), 0 0 55px #c8894d55; }
[data-theme=alchemy] .element.active .glyph-echo { opacity: .12; }
[data-theme=alchemy] .element-en { color: #bfa680; letter-spacing: .22em; }
[data-theme=alchemy] .element-phase { color: #d4c6ad; }
[data-theme=alchemy] .element-en, [data-theme=alchemy] .element-phase { background: var(--ink); box-shadow: 0 0 0 3px var(--ink); }
[data-theme=alchemy] [data-active]:not([data-active=none]) .element:not(.active):not(.peer) .glyph { opacity: .55; }
[data-theme=alchemy] [data-active]:not([data-active=none]) .element:not(.active):not(.peer) .element-en,
[data-theme=alchemy] [data-active]:not([data-active=none]) .element:not(.active):not(.peer) .element-phase { opacity: .8; }
[data-theme=alchemy] .relationship-link { opacity: .92; }
[data-theme=alchemy] .relationship-link.muted { opacity: .56; }
[data-theme=alchemy] .relationship-link.focused { opacity: 1; }
[data-theme=alchemy] .link-line { opacity: .85; }
[data-theme=alchemy] .link-glow { opacity: .2; }
[data-theme=alchemy] .link-label { fill: #dfc8a3; text-shadow: 0 0 3px #0e0c0b, 0 0 7px #0e0c0b; }
[data-theme=alchemy] .reading { padding-top: 20px; border-top: 1px solid #bd975a38; }
[data-theme=alchemy] .reading::before { content: ""; position: absolute; top: -3px; left: 50%; width: 5px; height: 5px; background: #c59b5c; transform: rotate(45deg); box-shadow: 0 0 8px #d9a15955; }
[data-theme=alchemy] #nature-title { color: #e7cfaa; }
[data-theme=alchemy] #nature-en, [data-theme=alchemy] #nature-tension { color: #af9d81; }
[data-theme=alchemy] #nature-meaning { color: #d0c3ad; }
[data-theme=alchemy] .group-caption { color: #b2a183; }
[data-theme=alchemy] .relation-choice { border-bottom-color: #c49b582b; }
[data-theme=alchemy] .relation-choice .role { color: #b3a187; }
[data-theme=alchemy] .relation-choice .peer-name { color: #c6bba5; }
[data-theme=alchemy] .relation-choice[aria-pressed=true] { border-bottom-color: var(--relation-color); }
[data-theme=alchemy] .relation-choice[aria-pressed=true] .role, [data-theme=alchemy] .relation-choice[aria-pressed=true] .peer-name { color: var(--relation-color); }
[data-theme=alchemy] .relation-meaning { color: #d3c6af; }
[data-theme=alchemy] .edge-controls button, [data-theme=alchemy] #gesture { color: #b6a183; }
[data-theme=alchemy] dialog { background: #15110e; border-color: #9f7c48; box-shadow: 0 20px 100px #0009, inset 0 0 0 5px #9f7c4815; }
[data-theme=alchemy] dialog p { color: #c8baa1; }
[data-theme=alchemy] dialog a { color: #d8bb83; }
[data-theme=alchemy] .alchemy-note { display: block; padding-top: 16px; border-top: 1px solid #9f7c4844; }
[data-theme=alchemy] ::selection { background: #b7853a55; }

@media (max-width: 1000px) {
  .theme-bar { left: 26px; right: 26px; }
  .theme-note { font-size: 8px; letter-spacing: .07em; }
  [data-theme=alchemy] .glyph { font-size: 60px; }
}
@media (min-width: 681px) and (max-width: 1000px) {
  .stage { bottom: 315px; }
  [data-theme=atelier] .universe[data-layout=circle] { min-height: 900px; }
}
@media (max-width: 680px) {
  .theme-bar { top: 73px; left: 20px; right: 20px; }
  .theme-switch { gap: 17px; }
  .theme-label { font-size: 8px; }
  .theme-switch button { font-size: 10px; min-height: 36px; }
  .theme-swatch { width: 9px; height: 11px; }
  .theme-note { display: none; }
  .stage { top: 110px; }
  [data-layout=circle] .stage { top: 110px; }
  [data-theme=atelier] .universe::before { inset: 7px; }
  [data-theme=atelier] .universe::after { top: 6px; left: 6px; width: 13px; height: 13px; border-width: 2px; }
  [data-theme=atelier] .controls::after { bottom: -2px; }
  [data-theme=atelier] .element-en { font-size: 8px; letter-spacing: .07em; }
  [data-theme=atelier] .element-phase { letter-spacing: .1em; }
  [data-theme=atelier] .element::before { top: -16px; width: 5px; height: 5px; }
  [data-theme=atelier] [data-layout=circle] .element::before { top: -16px; }
  [data-theme=atelier] .element.active::before { height: 5px; }
  [data-theme=atelier] .reading { padding-top: 16px; }
  [data-theme=atelier] .nature-heading { gap: 8px; }
  [data-theme=atelier] #nature-number { font-size: 8px; padding: 3px; }
  [data-theme=atelier] #nature-en { font-size: 8px; letter-spacing: .04em; }
  [data-theme=atelier] .link-label { font-size: 9px; letter-spacing: .025em; }
  [data-theme=alchemy] .universe::before { inset: 7px; }
  [data-theme=alchemy] .universe::after { top: 7px; left: 7px; right: 7px; }
  [data-theme=alchemy] .glyph { font-size: 40px; }
  [data-theme=alchemy] .element-en { font-size: 8px; letter-spacing: .1em; }
  [data-theme=alchemy] .element-phase { margin-top: 12px; }
  [data-theme=alchemy] .reading { padding-top: 16px; }
}
@media (max-width: 360px) {
  .theme-bar { left: 16px; right: 16px; }
  .theme-switch { gap: 13px; }
  [data-theme=alchemy] .glyph { font-size: 34px; }
}
@media (min-width: 681px) and (max-height: 740px) {
  [data-theme=alchemy] .glyph { font-size: 54px; }
  [data-theme=alchemy] [data-layout=circle] .glyph { font-size: 46px; }
}