/* Xuan-paper, ink and cinnabar. Load after style.css and motion.css. */
:root{
  color-scheme:light;
  --xuan:#f3ecd9;
  --paper:#faf5e8;
  --paper-shade:#eee4cd;
  --ink:#292d2a;
  --ink-soft:#55564e;
  --vermilion:#9e3c2f;
  --vermilion-deep:#7e2e25;
  --vermilion-wash:#f0e0d3;
  --bronze:#a2854d;
  --bronze-soft:#c9b68d;
  --muted:#716d60;
  --line:#d0c3a4;
  --rule-soft:#dfd4b9;
  --bg:var(--xuan);
  --green:var(--ink);
  --green-soft:var(--paper-shade);
  --accent:var(--vermilion);
  --serif:Georgia,"Times New Roman",serif;
  --calligraphy:"Kaiti SC",STKaiti,KaiTi,"Noto Serif CJK SC",serif;
  --paper-fibers:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.64' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 .34 0 0 0 0 .28 0 0 0 0 .17 .085 0 0 0 0'/%3E%3C/filter%3E%3Cpath fill='%237c6c45' opacity='.055' d='M13 21l16-3M102 11l9 2M43 83l14-2M120 111l18 1M18 146l9 3M79 134l10-2'/%3E%3Cpath fill='%23695d42' filter='url(%23paper)' d='M0 0h170v170H0z'/%3E%3C/svg%3E");
}

/* The texture is a small, native SVG tile, shared by every page. */
body{
  background-color:var(--xuan);
  background-image:var(--paper-fibers),radial-gradient(ellipse at 12% 0%,#fffdf142,transparent 66%);
  background-size:170px 170px,100% 1250px;
  background-repeat:repeat,no-repeat;
  color:var(--ink);
}
::selection{background:#9e3c2f25;color:var(--ink)}
h1,h2,h3,.entry-title,.reflection-title,.save-area h3{color:var(--ink)}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--vermilion);outline-offset:4px}
input:focus,textarea:focus,select:focus{outline:2px solid var(--vermilion);outline-offset:3px}
.site-header{border-bottom:3px double var(--line)}
.brand{color:var(--ink)}
.brand small{color:var(--muted);letter-spacing:1.8px}
.brand-seal{
  background:var(--vermilion);
  color:var(--paper);
  border:2px solid var(--vermilion);
  border-radius:2px 4px 2px 3px;
  box-shadow:inset 0 0 0 1px #f5e7cbbf;
  outline:1px solid var(--vermilion);
  outline-offset:2px;
  transform:rotate(-3deg);
}
.nav-button{color:var(--muted)}
.nav-button:hover,.nav-button.active{color:var(--vermilion)}
.nav-button.active:after{background:var(--vermilion);border-radius:0;transform:rotate(45deg);width:4px;height:4px}
.header-note,.step-number,.optional,.tiny-label{color:var(--muted)}
.eyebrow{color:var(--vermilion)}
.eyebrow>span{background:var(--vermilion);border-radius:1px;transform:rotate(45deg)}
.serif-accent,.heading-dot{color:var(--vermilion)}

/* A small landscape panel; the text keeps its full reading width. */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,340px);gap:40px;padding:56px 0 42px;align-items:center}
.hero>div:first-child{min-width:0}
.hero-copy{color:var(--ink-soft)}
.hero-aside{width:100%;max-width:360px;justify-self:end;align-self:center;color:var(--muted)}
.hero-aside>p{color:var(--muted);font-size:10px;letter-spacing:.8px;margin-top:0}
.ink-scene{position:relative;width:100%;height:270px;min-width:0}
.ink-landscape{display:block;width:100%;height:100%;object-fit:contain;object-position:center;mix-blend-mode:multiply;opacity:.92;animation:xuan-ink-arrive 1350ms cubic-bezier(.2,.6,.3,1) both}
.scene-calligraphy{position:absolute;top:21px;right:8px;writing-mode:vertical-rl;text-orientation:upright;font-family:var(--calligraphy);font-size:28px;line-height:1.35;letter-spacing:.18em;color:var(--ink);opacity:.76;animation:xuan-script-arrive 1300ms ease-out both;pointer-events:none}
.scene-seal{position:absolute;top:183px;right:13px;display:grid;place-items:center;width:27px;height:29px;padding:3px;border:1px solid var(--vermilion);border-radius:1px;color:var(--vermilion);font-family:var(--calligraphy);font-size:11px;line-height:1.05;writing-mode:vertical-rl;text-orientation:upright;box-shadow:inset 0 0 0 2px var(--paper),inset 0 0 0 3px var(--vermilion);transform:rotate(-5deg);opacity:.9;pointer-events:none}
.orbit{border-color:var(--bronze-soft)}
.orbit:after{border-color:var(--line)}
.orbit b{color:var(--ink-soft)}
.orbit span,.orbit i{color:var(--vermilion)}
.orbit i{background:var(--vermilion)}

/* Book-leaf surfaces: one inset rule and restrained corner joints. */
.paper,.library-card{
  position:relative;
  background-color:var(--paper);
  background-image:var(--paper-fibers),linear-gradient(110deg,#fffef53d,transparent 55%);
  background-size:170px 170px,100% 100%;
  border:1px solid var(--line);
  border-radius:3px;
  box-shadow:0 7px 20px #4b3e2810;
}
.paper::before,.library-card::before{content:"";position:absolute;inset:5px;border:1px solid var(--rule-soft);border-radius:1px;pointer-events:none}
.paper::after,.library-card::after{
  content:"";position:absolute;inset:-1px;pointer-events:none;
  background:linear-gradient(var(--bronze-soft),var(--bronze-soft)) left top/14px 1px no-repeat,
    linear-gradient(var(--bronze-soft),var(--bronze-soft)) left top/1px 14px no-repeat,
    linear-gradient(var(--bronze-soft),var(--bronze-soft)) right top/14px 1px no-repeat,
    linear-gradient(var(--bronze-soft),var(--bronze-soft)) right top/1px 14px no-repeat,
    linear-gradient(var(--bronze-soft),var(--bronze-soft)) left bottom/14px 1px no-repeat,
    linear-gradient(var(--bronze-soft),var(--bronze-soft)) left bottom/1px 14px no-repeat,
    linear-gradient(var(--bronze-soft),var(--bronze-soft)) right bottom/14px 1px no-repeat,
    linear-gradient(var(--bronze-soft),var(--bronze-soft)) right bottom/1px 14px no-repeat;
}
.cast-card{box-shadow:0 10px 28px #51402313}
.guide-links>a:hover,.library-card:hover{border-color:var(--bronze);box-shadow:0 8px 23px #51402316}
.quiet-card{background:var(--paper-shade);background-image:var(--paper-fibers);border:3px double var(--line);border-radius:3px;color:var(--ink-soft)}
.quiet-card h2{color:var(--ink)}
.guide-rule{background:var(--bronze-soft)}
.guide-item>span{border-color:var(--bronze-soft);color:var(--vermilion);border-radius:2px}
.guide-item h3{color:var(--ink)}
.margin-note{color:var(--bronze)}
.margin-note p{color:var(--muted)}

/* Controls retain the existing sizes and interaction rules. */
input,select,textarea{background-color:var(--paper);border-color:var(--line);border-radius:3px;color:var(--ink);box-shadow:inset 0 1px 2px #46371d08}
textarea{background-image:linear-gradient(110deg,#fffcf05e,transparent)}
input::placeholder,textarea::placeholder{color:var(--muted)}
input:disabled,select:disabled,textarea:disabled{background-color:var(--paper-shade);color:var(--ink-soft)}
input::file-selector-button{font:inherit;background:var(--paper-shade);color:var(--ink);border:1px solid var(--bronze-soft);border-radius:2px;padding:5px 8px;cursor:pointer}
.button{border-radius:3px}
.button.primary{background:var(--vermilion);border:1px solid #872e24;color:#fff9e9;box-shadow:0 3px 8px #7b302519,inset 0 0 0 1px #c8785b45}
.button.primary:hover{background:var(--vermilion-deep)}
.button.outline{border-color:var(--bronze-soft);color:var(--ink);background-color:var(--paper)}
.button.outline:hover{background:var(--paper-shade)}
.chip{border-color:var(--line);color:var(--ink-soft);border-radius:2px}
.chip:hover{border-color:var(--vermilion)}
.chip.selected{background:var(--vermilion-wash);border-color:#bc8b72;color:var(--vermilion)}
.mode-switch{background:var(--paper-shade);border:1px solid var(--line);border-radius:3px}
.mode-switch button{color:var(--muted);border-radius:2px}
.mode-switch button.selected{background:var(--paper);color:var(--vermilion);box-shadow:0 1px 4px #69522f12,inset 0 -1px 0 #bc8b7240}
.text-button,.question-examples button,.quiet-link{color:var(--vermilion);text-decoration-color:var(--bronze-soft)}
.quiet-link{border-bottom-color:var(--bronze-soft)}
.question-examples,.under-button,.ritual-message,.manual-key,.ladder-row,.time-details,.time-details label{color:var(--muted)}
.manual-grid label{color:var(--ink-soft)}

/* Antique bronze, with the H/T result still clearly legible. */
.coin{background:radial-gradient(ellipse at 30% 20%,#e9d6a4aa,transparent 55%),linear-gradient(130deg,#b99b60,#d6bc83 43%,#9c7a40);color:#533d1d;box-shadow:inset 0 0 0 2px #785b2b7a,inset 0 0 0 5px #ead6a39e,inset 0 0 0 7px #93713e52,2px 4px 0 #765a2b66,0 10px 17px #73531e1c}
.coin:before{border-color:#775a2f7d}
.coin i{background:var(--paper);box-shadow:inset 1px 2px 3px #785b2e66,0 0 0 2px #95733e99}
.coin b{font-family:Georgia,"Times New Roman",serif;font-weight:700;font-size:13px;color:#4e371b;text-shadow:0 1px 0 #f3dfac8c}
.coin em{font-family:var(--calligraphy);font-style:normal;letter-spacing:5px;color:#654a27}
.yj-coin-back{background:radial-gradient(ellipse at 25% 25%,#ead6a29e,transparent 55%),linear-gradient(130deg,#ad8c52,#d6bb7e 48%,#96713a);color:#4e371b;box-shadow:inset 0 0 0 2px #785b2b7a,inset 0 0 0 5px #ead6a39e,inset 0 0 0 7px #93713e52}
.yj-coin-back::before{border-color:#775a2f7d}
.yj-coin-back::after{background:var(--paper);box-shadow:inset 1px 2px 3px #785b2e66,0 0 0 2px #95733e99}
.yj-ink-ripple{border-color:#45483d55;box-shadow:0 0 3px #a2854d22}
.yao-line i{background:var(--ink)}
.yao-line.pending i{background:#d9cfb8}
.yao-line.moving i{background:var(--vermilion)}
.yao-line .move-dot{color:var(--vermilion)}
.yj-replay-change{color:var(--vermilion);text-decoration-color:var(--bronze-soft)}
.yj-replay-change:hover,.yj-replay-change.yj-change-playing{color:var(--vermilion-deep);text-decoration-color:var(--bronze)}
.yj-replay-change:focus-visible{outline-color:var(--vermilion)}

/* Results, journal and all static guides share the same ink palette. */
.result-question{border-left-color:var(--vermilion)}
.hex-arrow{color:var(--bronze)}
.hex-panel>span,.hex-panel>p,.hex-arrow small,.result-meta,.result-intro>p{color:var(--muted)}
.reflection-head>span{background:var(--paper-shade);color:var(--ink-soft);border-radius:2px}
.reflection-head>small{color:var(--muted)}
.reflection-grid h4,.entry-status{color:var(--vermilion)}
.action-card{background:var(--paper-shade);border:1px solid var(--line);border-left:2px solid var(--bronze);border-radius:3px}
.action-card>span{color:var(--vermilion)}
.traditional summary{color:var(--ink)}
.tag{background:var(--paper-shade);color:var(--ink-soft);border-radius:2px}
.tag.moving{background:var(--vermilion-wash);color:var(--vermilion)}
.table-scroll{border-radius:2px}
.table-scroll th{background:#e9dfc7;color:var(--ink-soft)}
td,th{border-color:var(--line)}
tbody tr:nth-child(even){background:#cbbb9512}
.empty-state{border-color:var(--bronze-soft);border-radius:3px;background:var(--paper-fibers),#f8f0de70}
.empty-state>span,.entry-symbol,.library-card .library-symbol{color:var(--ink-soft)}
.library-card .theme{color:var(--vermilion)}
.record-detail-hex{background:var(--paper-shade);color:var(--ink);border:1px solid var(--line);border-radius:3px}
.hero-copy,.quiet-card>p,.guide-item p,.reflection-intro,.reflection-grid p,.action-card p,.entry-note,.about-panel p,#dialog-content>p,.article-prose,.article-deck,.home-faq details p{color:var(--ink-soft)}
.library-card p,.library-card .library-number,.entry-meta,.storage-note,.library-search-label,.pinyin,.editorial-note,.article-prose .editorial-note,.journal-toolbar label{color:var(--muted)}
.article-toc{background:var(--paper-shade);border:1px solid var(--line);border-left:2px solid var(--bronze);border-radius:3px}
.article-prose h3,.hex-facts dd{color:var(--ink)}
.article-prose a,.article-pagination a,.article-toc a,.guide-links b,.home-faq summary{color:var(--vermilion);text-decoration-color:var(--bronze-soft)}
.breadcrumbs,.breadcrumbs a{color:var(--muted)}
.guide-links span,.guide-links p,.learn-heading>p:last-child{color:var(--muted)}
.article-heading .eyebrow,.page-heading .eyebrow{color:var(--vermilion)}
footer{border-top:3px double var(--line);color:var(--muted)}
.footer-brand{color:var(--ink-soft)}
footer .text-button,footer a{color:var(--vermilion)}
footer p{color:var(--muted)}
#toast{background:var(--ink);color:var(--paper);border:1px solid var(--bronze);border-radius:3px;box-shadow:0 5px 22px #292d2a22}
.skip-link{background:var(--vermilion);color:var(--paper)}
dialog{background:var(--paper);background-image:var(--paper-fibers);border:3px double var(--bronze-soft);border-radius:3px;box-shadow:0 15px 55px #2e291d33;color:var(--ink)}
dialog::backdrop{background:#2d2b2469}
.dialog-close{color:var(--muted)}
.dialog-field label,.source-list{color:var(--ink-soft)}
.source-list a{color:var(--vermilion);text-decoration-color:var(--bronze-soft)}

@keyframes xuan-ink-arrive{from{opacity:.55;transform:translateY(6px)}to{opacity:.92;transform:translateY(0)}}
@keyframes xuan-script-arrive{from{opacity:.48;transform:translateY(3px)}to{opacity:.76;transform:translateY(0)}}
@media(min-width:761px){.hex-facts{position:sticky}}
@media(min-width:1500px){.hero{grid-template-columns:minmax(0,1fr) 360px;gap:48px}.ink-scene{height:285px}.scene-calligraphy{right:11px;top:27px}.scene-seal{right:16px;top:191px}}
@media(max-width:1000px){.hero{grid-template-columns:minmax(0,1fr) 280px;gap:25px}.ink-scene{height:235px}.scene-calligraphy{font-size:25px;right:5px;top:16px}.scene-seal{top:162px;right:8px}}
@media(max-width:760px){
  .hero{grid-template-columns:minmax(0,1fr) 140px;gap:18px;padding:35px 0 30px}
  .hero-aside{max-width:150px}
  .ink-scene{height:165px}
  .scene-calligraphy{font-size:19px;right:0;top:7px;letter-spacing:.14em}
  .scene-seal{width:21px;height:24px;right:2px;top:108px;font-size:9px}
  .hero-aside>p{font-size:8px;letter-spacing:.2px;line-height:1.7;margin-top:3px}
  .paper::before,.library-card::before{inset:4px}
  .paper::after,.library-card::after{background-size:11px 1px,1px 11px,11px 1px,1px 11px,11px 1px,1px 11px,11px 1px,1px 11px}
  .brand-seal{outline-offset:1px}
  .hex-facts{position:relative}
  .dialog-footer{flex-wrap:wrap}
}
@media(max-width:600px){
  .hero{grid-template-columns:minmax(0,1fr);gap:12px;padding:32px 0 25px}
  .hero h1{font-size:clamp(34px,8.7vw,43px);line-height:1.2;letter-spacing:-1.15px}
  .hero-copy{font-size:13px;max-width:420px}
  .hero-aside{width:100%;max-width:none;justify-self:stretch}
  .ink-scene{height:167px;width:min(100%,380px);margin:0 auto}
  .ink-landscape{object-position:center}
  .scene-calligraphy{font-size:23px;right:24px;top:1px;letter-spacing:.16em}
  .scene-seal{right:27px;top:128px}
  .hero-aside>p{width:min(100%,380px);margin:-1px auto 0;text-align:center;font-size:9px}
  .hero .eyebrow{font-size:9px;letter-spacing:1px}
}
@media(prefers-reduced-motion:reduce){.ink-landscape,.scene-calligraphy{animation:none!important;transform:none}.ink-landscape{opacity:.92}.scene-calligraphy{opacity:.76}}