@charset "UTF-8";
:root {
  color-scheme: dark;
  --ink: #07090a;
  --paper: #eee9dd;
  --muted: #92968f;
  --accent: #accaa0;
  --serif: "Songti TC", "Noto Serif CJK TC", "PMingLiU", Georgia, serif;
  --sans: "Helvetica Neue", "PingFang TC", "Microsoft JhengHei", Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-width: 320px; background: var(--ink); }
body { color: var(--paper); font: 13px var(--sans); -webkit-font-smoothing: antialiased; }
button { border: 0; background: none; color: inherit; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 1px solid #e1d6ad; outline-offset: 5px; }
button[hidden], [hidden] { display: none !important; }
button:disabled { opacity: .4; cursor: default; }
a { color: #c5cdbb; }
::selection { background: #accaa037; }
.universe { visibility: visible; position: relative; height: 100svh; height: 100dvh; min-height: 650px; overflow: hidden; isolation: isolate; }
#field { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: -3; }
.vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 42%, transparent 18%, #07090a80 80%, #07090ae0 100%); z-index: -2; pointer-events: none; }
.vignette::after { content: ""; position: absolute; inset: 0; opacity: .05; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.87' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath filter='url(%23n)' fill='%23fff' d='M0 0h160v160H0z'/%3E%3C/svg%3E"); }
.controls { position: absolute; left: 42px; right: 42px; top: 24px; height: 45px; display: flex; align-items: center; justify-content: space-between; z-index: 5; }
.signature { margin: 0; font: 24px var(--serif); letter-spacing: .22em; display: flex; gap: 18px; align-items: center; }
.signature span { font: 9px var(--sans); letter-spacing: .27em; color: #a0a499; }
.layout-switch { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: 22px; }
.layout-switch button { display: flex; gap: 8px; align-items: center; min-height: 44px; padding: 0 1px; color: #8e938e; font-size: 11px; position: relative; }
.layout-switch svg { width: 24px; height: 18px; fill: var(--ink); stroke: currentColor; stroke-width: .8; }
.layout-switch [aria-pressed=true] { color: #e0ddcc; }
.layout-switch [aria-pressed=true]::after { content: ""; position: absolute; bottom: 1px; left: 50%; width: 3px; height: 3px; border-radius: 50%; background: #e0ddcc; }
.preferences { display: flex; align-items: center; gap: 24px; }
.icon-button { width: 44px; height: 44px; display: grid; place-items: center; color: #c0c3b8; }
.icon-button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1; }
.play-icon { display: none; }
#motion[aria-pressed=false] .pause-icon { display: none; }
#motion[aria-pressed=false] .play-icon { display: block; }
.languages { display: flex; align-items: center; gap: 10px; font-size: 11px; }
.languages button { min-height: 44px; min-width: 24px; padding: 0; color: #7f877f; }
.languages span { color: #505a53; }
.languages [aria-pressed=true] { color: #e6e3d5; }
.stage { position: absolute; top: 85px; bottom: 225px; left: 5%; right: 5%; }
.geometry { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.idle-axis { stroke: #aaa88c20; stroke-width: .7; }
.idle-circle { fill: none; stroke: #b4b7a313; stroke-width: .7; }
[data-layout=line] .idle-circle, [data-layout=circle] .idle-axis { visibility: hidden; }
.active-link { opacity: 1; }
.link-glow { stroke: url(#connection-gradient); stroke-width: 4; opacity: .1; filter: blur(3px); }
.link-line { stroke: url(#connection-gradient); stroke-width: .85; opacity: .65; }
.active-link[data-kind=ke] .link-line { stroke-dasharray: 3 6; }
.link-flow { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 2 98; animation: current 3.5s linear infinite; filter: drop-shadow(0 0 4px var(--accent)); }
.link-arrow { fill: none; stroke: var(--accent); stroke-width: 1; }
.link-end { fill: var(--accent); }
.link-label { fill: #d9d6c6; font: 11px var(--sans); letter-spacing: .06em; paint-order: stroke; stroke: #07090a; stroke-width: 6px; stroke-linejoin: round; }
.element { position: absolute; width: 154px; height: 164px; padding: 0; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; justify-content: center; touch-action: manipulation; color: var(--color); transition: left .8s cubic-bezier(.2,.8,.2,1), top .8s cubic-bezier(.2,.8,.2,1); }
.glyph-wrap { position: relative; display: block; width: 115px; height: 112px; }
.glyph { display: block; font: 80px/112px var(--serif); letter-spacing: 0; text-align: center; color: #dfdfd0; text-shadow: 0 0 40px color-mix(in srgb, var(--color) 12%, transparent); transition: transform .6s cubic-bezier(.2,.8,.2,1), color .6s, text-shadow .6s, opacity .6s; }
.glyph-echo { position: absolute; inset: 0; font: 80px/112px var(--serif); text-align: center; filter: blur(10px); color: var(--color); opacity: 0; transform: scale(1.4); pointer-events: none; transition: opacity .6s, transform .6s; }
.element-en { color: #a5ac9d; font-size: 9px; letter-spacing: .28em; margin-left: .28em; transition: color .4s, opacity .4s; }
.element-phase { font: 13px var(--serif); color: #c0c2af; letter-spacing: .24em; margin: 13px 0 0 .24em; transition: color .4s, opacity .4s; }
.element-words { position: absolute; left: 50%; top: calc(100% + 18px); width: 230px; transform: translate(-50%, 8px); font-size: 11px; letter-spacing: .14em; color: var(--color); opacity: 0; transition: opacity .5s, transform .5s; pointer-events: none; line-height: 1.8; }
.element-words span + span::before { content: "· "; }
.element::before { content: ""; position: absolute; left: 50%; top: -20px; height: 12px; width: 1px; background: var(--color); opacity: .3; transition: height .6s, opacity .6s; }
.element::after { content: ""; position: absolute; bottom: -7px; width: 3px; height: 3px; border-radius: 50%; background: var(--color); opacity: 0; }
.element.active .glyph { color: var(--color); transform: scale(1.17); text-shadow: 0 0 30px color-mix(in srgb, var(--color) 35%, transparent), 0 0 90px color-mix(in srgb, var(--color) 25%, transparent); }
.element.active .glyph-echo { opacity: .22; transform: scale(1.08); }
.element.active .element-words { opacity: 1; transform: translate(-50%, 0); }
.element.active::before { height: 22px; opacity: .8; }
.element.pinned::after { opacity: .8; }
[data-active]:not([data-active=none]) .element:not(.active):not(.peer) .glyph { opacity: .24; transform: scale(.91); }
[data-active]:not([data-active=none]) .element:not(.active):not(.peer) .element-en, [data-active]:not([data-active=none]) .element:not(.active):not(.peer) .element-phase { opacity: .38; }
.element.peer .glyph { color: var(--color); opacity: .75; }
.element.active .element-phase, .element.active .element-en { color: var(--color); }
.reading { position: absolute; bottom: 76px; left: 50%; transform: translateX(-50%); width: min(880px, calc(100% - 96px)); display: grid; grid-template-columns: 1fr 1.05fr; gap: 60px; animation: reveal .45s both; }
.nature-heading { display: flex; align-items: baseline; gap: 11px; }
#nature-number { font-size: 9px; color: var(--accent); letter-spacing: .12em; }
#nature-title { font: 20px var(--serif); font-weight: 400; letter-spacing: .13em; margin: 0; }
#nature-en { font: 10px var(--sans); color: #adb2a4; letter-spacing: .08em; }
#nature-meaning { font-size: 13px; line-height: 1.9; color: #cacabc; margin: 14px 0 8px; }
#nature-tension { font-size: 11px; line-height: 1.8; color: #969e91; margin: 0; }
.relation-choices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.relation-choice { text-align: left; min-height: 49px; padding: 0 0 10px; border-bottom: 1px solid #a9b29b1f; position: relative; }
.relation-choice .role { display: block; color: #899485; font-size: 10px; line-height: 1.5; white-space: nowrap; }
.relation-choice .peer-name { display: block; color: #b7c1ae; font: 17px var(--serif); margin-top: 5px; }
.relation-choice[aria-pressed=true] { border-bottom-color: var(--accent); }
.relation-choice[aria-pressed=true] .role, .relation-choice[aria-pressed=true] .peer-name { color: var(--accent); }
#relation-meaning { color: #b4bcae; font-size: 12px; line-height: 1.85; margin: 12px 0 0; min-height: 45px; }
.edge-controls { position: absolute; bottom: max(18px, env(safe-area-inset-bottom)); left: 42px; right: 42px; height: 36px; display: flex; justify-content: space-between; align-items: center; z-index: 4; }
.edge-controls button { padding: 10px 0; min-width: 44px; min-height: 44px; color: #a8ad9f; font-size: 11px; }
#gesture { position: absolute; left: 50%; transform: translateX(-50%); color: #8b9487; font-size: 11px; letter-spacing: .1em; white-space: nowrap; pointer-events: none; }
#release { margin-left: auto; color: #c3c8b6; }
[data-active=none] #gesture { color: #b4baa9; }
[data-motion=off] .link-flow { animation: none; opacity: 0; }
.is-transforming .active-link { visibility: hidden; }
.is-transforming .idle-axis, .is-transforming .idle-circle { opacity: 0; }
html[lang=en] .element-words { font-size: 10px; letter-spacing: .02em; }
html[lang=en] .element-phase { font: 11px var(--sans); letter-spacing: .04em; }
html[lang=en] #nature-title { letter-spacing: 0; font-size: 20px; }
html[lang=en] #nature-en { display: none; }
html[lang=en] .relation-choice .role { font-size: 9px; }
html[lang=en] .relation-choice .peer-name { font: 13px var(--sans); }
html[lang=en] .reading { width: min(960px, calc(100% - 96px)); gap: 50px; }
dialog { background: #101412; border: 1px solid #68736155; padding: 26px 30px; color: var(--paper); width: min(550px, calc(100% - 36px)); max-height: calc(100% - 60px); box-shadow: 0 25px 100px #0008; }
dialog::backdrop { background: #030504c0; backdrop-filter: blur(10px); }
.dialog-header { display: flex; align-items: center; justify-content: space-between; }
.dialog-header h2 { font: 25px var(--serif); font-weight: 400; margin: 0; }
.dialog-header .icon-button { font-size: 25px; }
dialog p { font-size: 13px; line-height: 1.95; color: #bdc4b5; }
dialog a { display: block; font-size: 12px; line-height: 1.8; margin-top: 16px; text-underline-offset: 5px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.noscript { position: fixed; bottom: 12px; width: 100%; padding: 20px; text-align: center; background: #161c17; }
@keyframes current { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes reveal { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
@media (min-width: 1600px) {
  .stage { left: calc((100% - 1450px) / 2); right: calc((100% - 1450px) / 2); }
  .glyph, .glyph-echo { font-size: 94px; }
}
@media (max-width: 1000px) {
  .controls, .edge-controls { left: 26px; right: 26px; }
  .preferences { gap: 9px; }
  .signature span { display: none; }
  .stage { left: 2%; right: 2%; }
  .element { width: min(154px, 16vw); }
  .glyph, .glyph-echo { font-size: 67px; }
  .reading, html[lang=en] .reading { gap: 30px; width: calc(100% - 70px); }
  .element-words { width: 190px; font-size: 10px; letter-spacing: .06em; }
}
@media (max-width: 680px) {
  .universe { min-height: 730px; }
  .controls { top: 16px; left: 20px; right: 16px; }
  .signature { font-size: 22px; }
  .layout-switch { gap: 17px; }
  .layout-switch button { font-size: 10px; gap: 5px; }
  .layout-switch svg { width: 19px; }
  .preferences { gap: 3px; }
  .languages { gap: 5px; font-size: 10px; }
  .icon-button { width: 34px; }
  .stage { top: 86px; bottom: 285px; left: 0; right: 0; }
  .element { width: 67px; height: 103px; }
  .glyph-wrap { width: 62px; height: 68px; }
  .glyph, .glyph-echo { font-size: 44px; line-height: 68px; }
  .element-en { font-size: 8px; letter-spacing: .09em; margin-left: 0; }
  .element-phase { font-size: 12px; margin-top: 11px; letter-spacing: .12em; }
  .element::before { top: -14px; height: 8px; }
  .element.active::before { height: 14px; }
  .element-words { width: 76px; top: calc(100% + 19px); font-size: 10px; line-height: 1.95; letter-spacing: .04em; }
  .element-words span { display: block; }
  .element-words span + span::before { content: none; }
  [data-layout=circle] .element-words { display: none; }
  .reading, html[lang=en] .reading { bottom: 69px; width: calc(100% - 44px); grid-template-columns: 1fr; gap: 17px; }
  #nature-title { font-size: 18px; }
  #nature-meaning { font-size: 12px; line-height: 1.85; margin: 10px 0 5px; }
  #nature-tension { font-size: 10px; }
  #nature-en { font-size: 9px; }
  .relation-choices { gap: 14px; }
  .relation-choice { min-height: 44px; padding-bottom: 7px; }
  .relation-choice .peer-name { font-size: 17px; margin-top: 3px; }
  #relation-meaning { font-size: 11px; line-height: 1.8; margin-top: 8px; min-height: 39px; }
  .edge-controls { left: 20px; right: 20px; bottom: max(12px, env(safe-area-inset-bottom)); }
  .edge-controls button { font-size: 10px; }
  #gesture { font-size: 9px; letter-spacing: .035em; }
  .link-label { font-size: 10px; }
  html[lang=en] .element-phase { font-size: 8px; letter-spacing: 0; }
  html[lang=en] .element-words { font-size: 8px; }
  html[lang=en] .reading { gap: 12px; }
  html[lang=en] #nature-title { font-size: 18px; }
  html[lang=en] #gesture { font-size: 8px; }
  html[lang=en] [data-active]:not([data-active=none]) #gesture { visibility: hidden; }
  html[lang=en] .relation-choice .role { font-size: 8px; }
  html[lang=en] #nature-meaning { font-size: 11px; line-height: 1.7; }
  html[lang=en] #nature-tension { font-size: 9px; }
}
@media (max-width: 360px) {
  .controls { left: 14px; right: 10px; }
  .signature { font-size: 19px; }
  .layout-switch { gap: 11px; }
  .layout-switch svg { display: none; }
  .element { width: 58px; }
  .glyph, .glyph-echo { font-size: 38px; }
  .glyph-wrap { width: 58px; }
  .element-words { width: 62px; font-size: 9px; }
  .reading, html[lang=en] .reading { width: calc(100% - 32px); }
  .edge-controls { left: 16px; right: 16px; }
  #gesture { font-size: 8px; }
  #nature-meaning { font-size: 11px; }
}
@media (max-height: 740px) and (min-width: 681px) {
  .universe { min-height: 570px; }
  .stage { top: 85px; bottom: 195px; }
  .glyph, .glyph-echo { font-size: 58px; }
  .element { height: 128px; }
  .glyph-wrap { height: 85px; }
  .glyph, .glyph-echo { line-height: 85px; }
  .element-words { top: calc(100% + 10px); }
  [data-layout=circle] .element { width: 90px; height: 103px; }
  [data-layout=circle] .glyph-wrap { height: 65px; }
  [data-layout=circle] .glyph, [data-layout=circle] .glyph-echo { font-size: 48px; line-height: 65px; }
  [data-layout=circle] .element-words { display: none; }
  .reading { bottom: 61px; }
  .controls { top: 13px; }
  #nature-meaning { font-size: 12px; margin-top: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .link-flow { display: none; }
}