/* /info/zh/liuyao/ — paper, ink and vermilion. One file; mobile rules at the end of each block. */
@font-face{font-family:"GuaSerif";src:url(fonts/noto-serif-sc-gua-700.woff2) format("woff2");font-weight:700;font-display:swap}
.ly-body{--paper:#f7f1e3;--paper2:#efe5cf;--ink2:#1d1a16;--zhu:#b8322a;--zhu2:#d9483b;--jin:#b8923a;--jin2:#e3c77a;--wood:#6b4a2b;--edge:#d8c9a6}
.ly-body :focus-visible{outline:2px solid var(--zhu);outline-offset:2px}
.ly-vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.ly-nw{white-space:nowrap}
.ly-sub{font-size:.88rem;color:var(--muted);margin:0 0 10px;line-height:1.7}

/* hero */
.ly-hero{position:relative;overflow:hidden}
.ly-hero::after{content:"";position:absolute;inset:auto -10% -40px -10%;height:180px;pointer-events:none;opacity:.22;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='none'><path d='M0 160 C120 90 200 140 300 100 C380 70 430 120 520 90 C640 50 700 130 820 95 C930 60 1010 120 1200 80 L1200 200 L0 200Z' fill='%23736a5c'/><path d='M0 185 C150 140 260 175 380 150 C520 120 600 170 760 140 C900 115 1020 160 1200 135 L1200 200 L0 200Z' fill='%23463f36'/></svg>") center bottom/100% 100% no-repeat;
  animation:lyDrift 40s ease-in-out infinite alternate}
@keyframes lyDrift{from{transform:translateX(-2%)}to{transform:translateX(2%)}}
@media (max-width:600px){
  .ly-hero{padding-top:16px!important;padding-bottom:18px!important}
  .ly-hero .eyebrow{display:none}
  .ly-hero h1{font-size:1.7rem;margin:0 0 .3em}
  .ly-hero .lead{font-size:.92rem;line-height:1.65;margin-bottom:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .ly-hero .byline{font-size:.78rem;margin:0}
  .ly-hero::after{height:90px;bottom:-30px}
}

/* card */
.ly-section{max-width:980px;margin-left:auto;margin-right:auto}
.ly-section.section{padding-top:28px;padding-bottom:28px}
.ly-card{position:relative;border:1px solid #e3d6b8;border-radius:18px;padding:22px 20px 20px;
  background:radial-gradient(120% 80% at 10% 0%,#fffdf6 0%,var(--paper) 55%,var(--paper2) 100%);
  box-shadow:0 18px 50px -24px rgba(60,40,10,.35),inset 0 0 0 6px rgba(255,255,255,.35)}
.ly-card::before{content:"";position:absolute;inset:0;border-radius:18px;pointer-events:none;opacity:.35;mix-blend-mode:multiply;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .25 0 0 0 .18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.ly-step{margin:0 0 16px;position:relative}
.ly-label{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;font-family:var(--serif);font-size:1.05rem;color:var(--ink2);margin:0 0 8px}
.ly-label span{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--zhu);color:#fff;font:600 .8rem var(--sans)}
.ly-label small{font:400 .78rem var(--sans);color:var(--muted)}
#ly-q{width:100%;border:1px solid var(--edge);border-radius:10px;padding:10px 12px;background:rgba(255,255,255,.7);font:1rem/1.5 var(--sans);resize:vertical;min-height:46px}
.ly-timeline{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
#ly-time,#ly-latezi{border:1px solid var(--edge);border-radius:10px;padding:8px 10px;background:rgba(255,255,255,.7);font:1rem var(--sans);min-height:44px;color:var(--ink2)}
#ly-latezi{font-size:.9rem}
.ly-gz{margin:8px 0 0;font-size:.88rem;color:var(--muted);line-height:1.7}
.ly-gz b{color:var(--ink2);font-weight:600}
.ly-also{text-align:center;font-size:.9rem;margin:14px 0 0}
@media (max-width:600px){.ly-card{padding:16px 14px}.ly-section.section{padding:14px 16px}.ly-step{margin-bottom:10px}.ly-gz{font-size:.8rem;line-height:1.6;margin-top:6px}.ly-label{margin-bottom:6px}.ly-hint{margin-bottom:8px}}

/* sound settings */
.ly-sound-wrap{position:absolute;top:12px;right:12px;z-index:5}
.ly-sound{display:grid;place-items:center;border:1px solid var(--edge);background:rgba(255,255,255,.75);border-radius:50%;width:44px;height:44px;cursor:pointer;color:var(--ink2);padding:0}
.ly-ico{width:22px;height:22px}
.ly-ico-x{display:none}
.ly-sound.off{color:var(--muted)}
.ly-sound.off .ly-ico-wave{display:none}
.ly-sound.off .ly-ico-x{display:inline}
.ly-sound-pop{position:absolute;right:0;top:52px;width:230px;padding:12px 14px;border:1px solid #e3d6b8;border-radius:12px;background:#fffdf7;box-shadow:0 14px 34px -14px rgba(60,40,10,.45)}
.ly-volrow{display:flex;align-items:center;gap:10px;font-size:.9rem;margin:8px 0}
.ly-volrow input{flex:1;accent-color:var(--zhu)}
.ly-sound-pop .ly-sub{margin:4px 0 0;font-size:.8rem}
.ly-check{display:inline-flex;align-items:center;gap:6px;font-size:.88rem;color:var(--ink2);min-height:32px;cursor:pointer}
.ly-check input{width:18px;height:18px;accent-color:var(--zhu)}

/* tabs and panels */
.ly-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px}
.ly-tab{border:1px solid var(--edge);background:rgba(255,255,255,.6);border-radius:999px;padding:8px 15px;min-height:40px;cursor:pointer;font:500 .92rem var(--sans);color:var(--ink2);transition:background .2s,color .2s;white-space:nowrap}
.ly-tab.is-on{background:var(--ink2);color:#f7efe0;border-color:var(--ink2);box-shadow:0 6px 16px -8px rgba(0,0,0,.5)}
.ly-panel:not([hidden]){animation:lyFade .35s ease}
@keyframes lyFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ly-hint,.ly-map{font-size:.88rem;color:var(--muted);margin:0 0 10px;line-height:1.6}
.ly-steps{font-size:.92rem;background:rgba(255,255,255,.6);border:1px dashed var(--edge);border-radius:10px;padding:10px 12px;line-height:1.7;margin:0}
.ly-steps:empty{display:none}
@media (max-width:600px){
  .ly-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin:0 -14px 12px;padding:2px 14px 4px;scroll-padding:0 14px}
  .ly-tabs::-webkit-scrollbar{display:none}
  .ly-tab{min-height:44px;padding:8px 14px;flex:0 0 auto}
}

/* stage: wood table, tortoise shell, 3D coins */
.ly-stage{position:relative;height:250px;border-radius:14px;overflow:hidden;margin:4px 0 14px;perspective:900px;
  background:repeating-linear-gradient(92deg,rgba(255,255,255,.05) 0 2px,transparent 2px 9px),radial-gradient(120% 120% at 50% 20%,#8a6239 0%,var(--wood) 55%,#3e2a17 100%);
  box-shadow:inset 0 10px 30px rgba(0,0,0,.35),inset 0 -6px 18px rgba(0,0,0,.25)}
.ly-shell{position:absolute;top:16px;left:50%;width:132px;margin-left:-66px;z-index:2;cursor:pointer;transform-origin:50% 85%;filter:drop-shadow(0 8px 10px rgba(0,0,0,.35))}
.ly-shell svg{display:block;width:100%;height:auto}
.ly-shell.idle{animation:lyIdle 3.2s ease-in-out 1.2s infinite}
@keyframes lyIdle{0%,78%,100%{transform:rotate(0)}84%{transform:rotate(-4deg) translateY(-2px)}90%{transform:rotate(3deg)}95%{transform:rotate(-1.5deg)}}
.ly-coins{position:absolute;inset:0;z-index:3;display:flex;align-items:flex-end;justify-content:center;gap:clamp(14px,6vw,46px);padding-bottom:44px;outline:none;pointer-events:none}
.ly-coins:focus-visible{outline:2px solid var(--jin2);outline-offset:-6px;border-radius:14px}
.ly-coin-wrap{position:relative;width:74px;height:74px;perspective:420px;pointer-events:auto;cursor:pointer}
.ly-coin-shadow{position:absolute;left:8px;right:8px;bottom:-12px;height:14px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.45),transparent);filter:blur(1px)}
.ly-coin{position:absolute;inset:0;transform-style:preserve-3d}
.ly-face{position:absolute;inset:0;border-radius:50%;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.ly-face svg{width:100%;height:100%;display:block}
.ly-face.front{transform:translateZ(3px)}
.ly-face.back{transform:rotateX(180deg) translateZ(3px)}
.ly-edge{position:absolute;inset:1px;border-radius:50%;transform:translateZ(var(--z));background:radial-gradient(circle,#3a2a14 0 17%,#8a6424 18% 100%);box-shadow:inset 0 0 0 2px #5e4216}
.ly-dust{position:absolute;left:-26px;right:-26px;bottom:-16px;height:28px;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,rgba(236,212,165,.7),rgba(236,212,165,0))}
.ly-spark{position:absolute;top:-6px;width:18px;height:18px;margin-left:-9px;pointer-events:none;z-index:4;border-radius:50%;filter:drop-shadow(0 0 4px #f6d27a);
  background:conic-gradient(from 0deg,transparent 0 40deg,#fff3c4 45deg,transparent 50deg 130deg,#fff3c4 135deg,transparent 140deg 220deg,#fff3c4 225deg,transparent 230deg 310deg,#fff3c4 315deg,transparent 320deg)}
.ly-toss-result{position:absolute;bottom:8px;left:0;right:0;text-align:center;color:#f6e7c4;font:600 .92rem var(--serif);letter-spacing:.1em;text-shadow:0 2px 8px rgba(0,0,0,.6);opacity:0;transition:opacity .3s}
.ly-toss-result.on{opacity:1}
@media (max-width:600px){.ly-stage{height:228px}.ly-shell{width:112px;margin-left:-56px;top:12px}.ly-coins{padding-bottom:40px}.ly-coin-wrap{width:62px;height:62px}}

/* lines being built */
.ly-build{display:flex;flex-direction:column-reverse;gap:6px;max-width:340px;margin:0 auto 12px;border-radius:14px}
.ly-build.done{animation:lyDone 1.4s ease .2s both}
@keyframes lyDone{0%{box-shadow:0 0 0 0 rgba(227,199,122,0);background:transparent}35%{box-shadow:0 0 40px 10px rgba(227,199,122,.55);background:rgba(255,240,200,.55)}100%{box-shadow:0 0 18px 2px rgba(227,199,122,.25);background:rgba(255,246,222,.35)}}
.ly-slot{display:grid;grid-template-columns:44px 1fr 64px;align-items:center;gap:8px;height:30px;font-size:.82rem;color:var(--muted)}
.ly-slot .ly-yao{height:22px}
.ly-slot .ly-tag{text-align:right;font-family:var(--serif);color:var(--ink2)}
.ly-slot.empty .ly-yao{border-bottom:1px dashed var(--edge);height:12px}
.ly-mk{color:var(--zhu)}
.ly-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ly-progress{font-size:.88rem;color:var(--muted);margin-left:auto}
.ly-autoopt{margin-top:8px}
@media (max-width:600px){.ly-progress{margin-left:0;width:100%}}

/* buttons */
.ly-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;border:1px solid var(--ink2);background:var(--ink2);color:#f7efe0;border-radius:999px;padding:9px 18px;font:600 .95rem var(--sans);cursor:pointer;text-decoration:none;transition:transform .15s,box-shadow .2s}
.ly-btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px -10px rgba(0,0,0,.6);color:#fff}
.ly-btn:active{transform:translateY(1px)}
.ly-btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.ly-btn-ghost{background:transparent;color:var(--ink2)}
.ly-btn-ghost:hover{color:var(--ink2);background:rgba(255,255,255,.6)}
.ly-btn-main{background:linear-gradient(180deg,var(--zhu2),var(--zhu));border-color:var(--zhu);padding:12px 28px;font-size:1.05rem;letter-spacing:.08em}
.ly-btn-main.pulse{animation:lyPulse 1.6s ease-in-out infinite}
@keyframes lyPulse{0%,100%{box-shadow:0 0 0 0 rgba(184,50,42,.45)}50%{box-shadow:0 0 0 12px rgba(184,50,42,0)}}
.ly-btn-wa{background:#1f8f4d;border-color:#1f8f4d;color:#fff;padding:12px 24px;font-size:1rem}
.ly-btn-wa:hover{background:#18763f;color:#fff}
.content-box a.ly-btn,.ly-section a.ly-btn{color:#f7efe0;text-decoration:none}
.content-box a.ly-btn-ghost,.ly-section a.ly-btn-ghost{color:var(--ink2)}
.content-box a.ly-btn-wa,.ly-section a.ly-btn-wa{color:#fff}
.ly-link{border:0;background:none;color:var(--green-2,#235a4c);text-decoration:underline;cursor:pointer;font:inherit;padding:4px 6px;margin-left:4px}
.ly-go{text-align:center;margin-top:8px}
.ly-err{color:var(--zhu);font-size:.9rem;min-height:1.2em;margin:8px 0 0}
@media (max-width:600px){.ly-btn{min-height:44px}}

/* manual, name, number */
.ly-seg{display:inline-flex;border:1px solid var(--edge);border-radius:999px;overflow:hidden;margin:0 0 10px}
.ly-seg button{border:0;background:transparent;padding:8px 14px;min-height:40px;cursor:pointer;font:500 .88rem var(--sans);color:var(--ink2)}
.ly-seg button.is-on{background:var(--ink2);color:#fff}
.ly-manlines{display:flex;flex-direction:column-reverse;gap:6px}
.ly-manrow{display:grid;grid-template-columns:44px 1fr;gap:8px;align-items:center}
.ly-manrow b{font:500 .85rem var(--sans);color:var(--muted)}
.ly-chips{display:flex;flex-wrap:wrap;gap:6px}
.ly-chip{border:1px solid var(--edge);background:rgba(255,255,255,.6);border-radius:8px;padding:6px 10px;min-height:36px;cursor:pointer;font:.86rem var(--sans);color:var(--ink2)}
.ly-chip.is-on{border-color:var(--zhu);background:#fbe9e4;color:var(--zhu);font-weight:600}
.ly-fld{display:flex;flex-direction:column;gap:4px;font-size:.88rem;color:var(--muted);flex:1;min-width:150px}
.ly-fld input,.ly-fld select{border:1px solid var(--edge);border-radius:10px;padding:9px 10px;min-height:44px;background:rgba(255,255,255,.75);font:1rem var(--sans);color:var(--ink2)}
.ly-pair,.ly-numrow{display:flex;gap:10px;flex-wrap:wrap}
.ly-namelist{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0;max-height:190px;overflow:auto}
.ly-picked{font:600 1rem var(--serif);color:var(--ink2);margin:6px 0 10px}
.ly-checks{display:flex;gap:6px;flex-wrap:wrap}
#ly-name-hint:empty{display:none}
@media (max-width:600px){.ly-chip{min-height:44px;padding:8px 10px}.ly-manrow{grid-template-columns:38px 1fr}}

/* ink lines (svg). The ink-bleed filter is costly, so only the big lines (.ink) use it. */
.ly-yao{display:block;width:100%;overflow:visible}
.ly-yao path{fill:none;stroke:var(--ink2);stroke-linecap:round}
.ly-yao.ink path{filter:url(#ly-ink)}
.ly-yao.draw path{stroke-dasharray:var(--len,300);stroke-dashoffset:var(--len,300);animation:lyDraw .55s cubic-bezier(.6,.05,.3,1) forwards;animation-delay:calc(var(--d,0s) + .05s)}
.ly-yao.draw path+path{animation-delay:calc(var(--d,0s) + .14s)}
@keyframes lyDraw{to{stroke-dashoffset:0}}

/* result */
.ly-res{position:relative;overflow:hidden;border:1px solid #e3d6b8;border-radius:18px;padding:22px 20px;background:linear-gradient(180deg,#fffdf7,var(--paper));box-shadow:0 18px 50px -26px rgba(60,40,10,.35)}
.ly-res>*{position:relative;z-index:1}
.ly-res.reveal{animation:lyCard .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes lyCard{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
.ly-res.reveal::before{content:"";position:absolute;left:50%;top:190px;width:520px;height:340px;margin:-170px 0 0 -260px;border-radius:50%;pointer-events:none;z-index:0;filter:blur(6px);
  background:radial-gradient(closest-side,rgba(29,26,22,.16),rgba(29,26,22,.05) 60%,transparent);animation:lyWash 1.6s cubic-bezier(.2,.7,.2,1) both}
@keyframes lyWash{0%{transform:scale(.1);opacity:0}30%{opacity:1}100%{transform:scale(1.15);opacity:.55}}
.ly-res.reveal::after{content:"";position:absolute;left:0;right:0;top:0;height:460px;pointer-events:none;z-index:2;opacity:0;background:linear-gradient(105deg,transparent 35%,rgba(255,226,150,.38) 50%,transparent 65%) no-repeat;background-size:250% 100%;animation:lySweep 1.3s ease .35s both}
@keyframes lySweep{0%{background-position:120% 0;opacity:1}85%{opacity:1}100%{background-position:-30% 0;opacity:0}}
.ly-res-title{font:600 1.25rem var(--serif);margin:0 0 8px;outline:none}
.ly-shared{background:#fbefd9;border:1px solid #ecd6a7;border-radius:10px;padding:8px 12px;font-size:.88rem;margin:0 0 10px}
.ly-res-head{display:flex;flex-wrap:wrap;gap:2px 16px;font-size:.86rem;color:var(--muted);margin:0 0 10px;line-height:1.7}
.ly-res-head b{color:var(--ink2);font-weight:600}
.ly-q-show{width:100%;font:500 1.05rem var(--serif);color:var(--ink2);margin:0 0 4px}
.ly-jump{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.ly-jump a{font-size:.82rem;padding:6px 12px;border:1px solid var(--edge);border-radius:999px;color:var(--ink2);text-decoration:none;background:rgba(255,255,255,.6)}
.ly-jump a:hover{border-color:var(--zhu);color:var(--zhu)}
.ly-anchor{scroll-margin-top:96px}
.ly-hexes{display:flex;justify-content:center;gap:clamp(18px,6vw,60px);flex-wrap:wrap;margin:6px 0 18px;perspective:900px}
.ly-hex{position:relative;text-align:center;min-width:140px}
.ly-hex-lines{display:flex;flex-direction:column-reverse;gap:9px;width:132px;margin:0 auto 10px}
.ly-hex-lines .ly-yao{height:16px}
.ly-hl{position:relative}
.ly-hm{position:absolute;right:-22px;top:50%;transform:translateY(-50%);color:var(--zhu);font:700 .95rem var(--sans);font-style:normal}
.ly-hex-title{display:block;font:700 1.25rem "GuaSerif","Noto Serif SC",var(--serif);color:var(--ink2);letter-spacing:.06em;text-decoration:none}
.ly-hex-title:hover{color:var(--zhu)}
.ly-hex-sub{font-size:.82rem;color:var(--muted)}
.ly-hex.bian{animation:lyFlip .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d,0s)}
@keyframes lyFlip{from{opacity:0;transform:rotateY(-80deg)}to{opacity:1;transform:none}}
.ly-seal{display:inline-grid;place-items:center;min-width:46px;padding:4px 7px;margin:4px auto 6px;border-radius:6px;background:var(--zhu);color:#fff7ef;font:700 1.1rem "GuaSerif","Noto Serif SC",var(--serif);letter-spacing:.08em;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.35),0 4px 10px -4px rgba(120,20,10,.5);filter:url(#ly-rough);animation:lySeal .6s cubic-bezier(.3,1.6,.5,1) both;animation-delay:var(--d,0s)}
@keyframes lySeal{0%{opacity:0;transform:scale(2.4) rotate(-12deg)}60%{opacity:1;transform:scale(.92) rotate(2deg)}100%{transform:scale(1) rotate(-3deg)}}
.ly-res.reveal .ly-hex.ben .ly-seal{animation:lySeal .6s cubic-bezier(.3,1.6,.5,1) both,lyShake .3s ease both;animation-delay:var(--d,0s),calc(var(--d,0s) + .25s)}
@keyframes lyShake{0%,100%{translate:0 0}25%{translate:-2px 1px}50%{translate:2px -1px}75%{translate:-1px 0}}
.ly-res.reveal .ly-hex.ben .ly-hex-lines{animation:lyGlow 1.4s ease .3s both}
@keyframes lyGlow{0%{filter:none}40%{filter:drop-shadow(0 0 10px rgba(227,170,60,.9))}100%{filter:drop-shadow(0 0 3px rgba(227,170,60,.35))}}
.ly-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -4px}
.ly-table{width:100%;border-collapse:collapse;font-size:.88rem;min-width:520px}
.ly-table th{font:600 .74rem var(--sans);letter-spacing:.06em;color:var(--muted);text-align:left;padding:6px;border-bottom:2px solid var(--jin)}
.ly-table td{padding:7px 6px;border-bottom:1px solid #eadfc6;vertical-align:middle}
.ly-table tbody tr{animation:lyRow .5s ease both;animation-delay:var(--d,0s)}
@keyframes lyRow{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
.ly-table tr.mv td{background:rgba(184,50,42,.06)}
.ly-table .yao-cell{width:74px}
.ly-table .yao-cell .ly-yao{height:12px;width:64px}
.ly-tag-sy{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;font:700 .74rem var(--sans);margin-left:4px}
.ly-tag-sy.shi{background:var(--zhu);color:#fff}
.ly-tag-sy.ying{border:1px solid var(--zhu);color:var(--zhu)}
.ly-mark{color:var(--zhu);font-weight:700;margin-left:4px}
.ly-fu{color:var(--muted);font-size:.8rem}
.ly-fu-m{display:none}
.ly-wang{min-width:0}
.ly-wang td,.ly-wang th{font-size:.84rem}
.ly-anal,.ly-texts{margin:18px 0 0;border-top:1px dashed var(--edge);padding-top:14px}
.ly-anal h3,.ly-texts h3,.ly-cta h3{font:600 1.05rem var(--serif);margin:14px 0 6px;color:var(--ink2)}
.ly-anal h3{margin-top:0}
.ly-texts h3 a{color:inherit}
.ly-anal ul{margin:0 0 10px;padding-left:1.1em;line-height:1.8;font-size:.93rem}
.ly-anal li{margin:0 0 4px}
.ly-texts p{margin:0 0 6px;line-height:1.75}
.ly-theme{font:600 1rem var(--serif);color:var(--zhu);margin:0 0 6px}
.ly-lbl{display:inline-block;font:600 .7rem var(--sans);letter-spacing:.06em;color:#fff;background:var(--ink2);border-radius:4px;padding:1px 6px;margin-right:8px;vertical-align:2px}
.ly-bh .ly-lbl{background:#8a6a24}
.ly-xg .ly-lbl{background:#6e5c3f}
.ly-bh{color:#3a3229}
.ly-xg{color:var(--muted);font-size:.92rem}
.ly-texts .mv-text,.ly-line{padding:8px 12px;margin:0 0 8px}
.ly-texts .mv-text{background:rgba(184,92,40,.08);border-left:3px solid var(--zhu);border-radius:0 8px 8px 0}
.ly-line{border-left:3px solid #e3d6b8;border-radius:0 8px 8px 0}
.ly-texts .mv-text p,.ly-line p{margin:0 0 4px}
.ly-all,.ly-howto{margin:14px 0 0;border:1px solid #e3d6b8;border-radius:12px;padding:10px 14px;background:rgba(255,255,255,.5)}
.ly-all summary,.ly-howto summary{cursor:pointer;font:600 .98rem var(--serif);color:var(--ink2);min-height:32px}
.ly-all[open] summary,.ly-howto[open] summary{margin-bottom:10px}
.ly-howto ol{margin:0 0 8px;padding-left:1.3em;line-height:1.8;font-size:.93rem}
.ly-howto li{margin:0 0 6px}
.ly-cta{margin:16px 0 0;padding:14px 16px;border:1px solid #cfe3d6;border-radius:12px;background:#f3faf5}
.ly-cta p{margin:0 0 8px;line-height:1.7}
.ly-cta-btns{margin:8px 0 0!important}
.ly-res-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:16px 0 0}
@media (max-width:600px){
  .ly-res{padding:18px 12px}
  .ly-hexes{flex-wrap:nowrap;gap:6px;margin:4px -6px 14px}
  .ly-hex{min-width:0;flex:1 1 0}
  .ly-hex-lines{width:min(78px,100%);gap:7px}
  .ly-hex-lines .ly-yao{height:11px}
  .ly-hm{right:-14px;font-size:.8rem}
  .ly-seal{font-size:.92rem;min-width:36px}
  .ly-hex-title{font-size:1rem;letter-spacing:0}
  .ly-hex-sub{font-size:.74rem;line-height:1.4}
  .ly-table{min-width:0;font-size:.78rem}
  .ly-table th{font-size:.68rem;letter-spacing:0;padding:5px 3px}
  .ly-table td{padding:6px 3px}
  .ly-table .yao-cell{width:38px}
  .ly-table .yao-cell .ly-yao{width:34px;height:9px}
  .ly-fucol{display:none}
  .ly-fu-m{display:block;font-size:.7rem;margin-top:2px}
  .ly-tag-sy{width:16px;height:16px;font-size:.62rem;margin-left:2px}
  .ly-mark{margin-left:2px}
  .ly-wang td,.ly-wang th{font-size:.74rem;padding:5px 3px}
  .ly-anal ul,.ly-howto ol{font-size:.9rem}
  .ly-jump a{padding:8px 12px}
}

/* history */
.ly-hist{border:1px solid #e3d6b8;border-radius:16px;padding:16px 18px;background:#fffdf8}
.ly-h2{font:600 1.1rem var(--serif);margin:0 0 10px}
.ly-hist-list{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:6px}
.ly-hist-item{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;width:100%;min-height:44px;text-align:left;border:1px solid var(--edge);border-radius:10px;background:rgba(255,255,255,.7);padding:8px 12px;cursor:pointer;font:.9rem var(--sans);color:var(--ink2)}
.ly-hist-item:hover{border-color:var(--zhu)}
.ly-hist-t{font-size:.8rem;color:var(--muted)}
.ly-hist-q{font-size:.82rem;color:var(--muted)}

/* toast, image dialog, related links */
.ly-toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);background:var(--ink2);color:#fff;padding:10px 18px;border-radius:999px;font-size:.9rem;opacity:0;transition:all .3s;z-index:99;pointer-events:none}
.ly-toast.on{opacity:1;transform:translateX(-50%)}
.ly-modal{position:fixed;inset:0;z-index:100;background:rgba(20,16,10,.72);display:grid;place-items:center;padding:16px}
.ly-modal-box{max-width:min(520px,100%);max-height:100%;overflow:auto;background:#fffdf7;border-radius:14px;padding:14px;text-align:center}
.ly-modal-box img{width:100%;height:auto;border-radius:8px;margin:8px 0 12px;-webkit-touch-callout:default}
.ly-modal-box p{margin:0;font-size:.92rem}
.ly-related{font-size:.9rem;color:var(--muted)}

@media (prefers-reduced-motion:reduce){
  .ly-hero::after,.ly-panel,.ly-hex.bian,.ly-seal,.ly-table tbody tr,.ly-btn-main.pulse,.ly-shell.idle,.ly-build.done,.ly-res.reveal,.ly-res.reveal::before,.ly-res.reveal::after,.ly-res.reveal .ly-hex.ben .ly-hex-lines{animation:none!important}
  .ly-yao.draw path{animation:none;stroke-dashoffset:0}
}

/* ===================== effects layer (liuyao-fx.js, liuyao-3d.js, liuyao-share.js) ===================== */
/* settings panel */
.ly-sound-pop{max-height:min(70vh,520px);overflow:auto}
.ly-pop-h{font:600 .72rem var(--sans);letter-spacing:.12em;color:var(--muted);margin:10px 0 2px}
.ly-pop-h:first-child{margin-top:0}
.ly-sound-pop .ly-check{display:flex;width:100%}
.ly-selrow{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.88rem;color:var(--ink2);margin:6px 0}
.ly-selrow select{border:1px solid var(--edge);border-radius:8px;padding:6px 8px;background:transparent;color:inherit;font:inherit;min-height:36px}

/* 节气 tones (#23): a faint wash over the paper */
.ly-body{--season:rgba(0,0,0,0)}
.ly-body[data-season="spring"],.ly-res[data-season="spring"]{--season:rgba(120,170,110,.07)}
.ly-body[data-season="summer"],.ly-res[data-season="summer"]{--season:rgba(214,120,70,.06)}
.ly-body[data-season="autumn"],.ly-res[data-season="autumn"]{--season:rgba(190,150,80,.07)}
.ly-body[data-season="winter"],.ly-res[data-season="winter"]{--season:rgba(110,140,170,.08)}
.ly-card,.ly-res{background-image:linear-gradient(var(--season),var(--season)),radial-gradient(120% 80% at 10% 0%,#fffdf6 0%,var(--paper) 55%,var(--paper2) 100%)}

/* hero art (#20) */
.ly-hero-art{position:relative;display:grid;place-items:center;min-height:300px}
.ly-bagua{width:min(320px,100%);height:auto;color:var(--ink2);opacity:.85}
.ly-bagua rect{fill:currentColor}
.ly-bagua text{font:700 15px "GuaSerif",var(--serif);fill:var(--zhu)}
.ly-bg-c1{fill:none;stroke:var(--jin);stroke-width:1.2;stroke-dasharray:2 5}
.ly-bg-c2{fill:rgba(255,255,255,.35);stroke:var(--jin);stroke-width:1}
.ly-bagua{animation:lySpin 140s linear infinite;will-change:transform}
@keyframes lySpin{to{transform:rotate(360deg)}}
.ly-hero-callig{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:0;pointer-events:none}
.ly-callig-ch{display:inline-block;line-height:0}
.ly-callig-txt{font-family:"GuaSerif",var(--serif);font-weight:700;color:var(--ink2);line-height:1}
@media (max-width:760px){.ly-hero-art{display:none}}

/* incense burner and smoke (#12) */
.ly-smoke{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.ly-burner{position:absolute;left:14px;bottom:10px;width:54px;height:auto;z-index:2;pointer-events:none;filter:drop-shadow(0 4px 6px rgba(0,0,0,.4))}
.ly-lite .ly-smoke{display:none}

/* ritual (#1) */
.ly-ritual{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:radial-gradient(circle at 50% 45%,rgba(20,14,8,.55),rgba(20,14,8,.82));color:#f6e8c8;text-align:center;padding:16px;animation:lyFadeIn .4s ease both}
.ly-ritual.out{animation:lyFadeOut .38s ease both}
@keyframes lyFadeIn{from{opacity:0}to{opacity:1}}
@keyframes lyFadeOut{to{opacity:0}}
.ly-ritual-ring{width:84px;height:84px;border-radius:50%;border:3px solid rgba(246,232,200,.85);box-shadow:0 0 30px rgba(246,210,140,.35),inset 0 0 20px rgba(246,210,140,.25);animation:lyBreath 3.2s ease-in-out both}
@keyframes lyBreath{0%{transform:scale(.55);opacity:.4}45%{transform:scale(1.15);opacity:1}100%{transform:scale(.8);opacity:.7}}
.ly-ritual-t{font:600 1.05rem var(--serif);letter-spacing:.3em;margin:4px 0 0}
.ly-ritual-q{font:500 1rem var(--serif);margin:0;max-width:90%}
.ly-ritual-q span{opacity:0;animation:lyInk .5s ease forwards;animation-delay:calc(.6s + var(--i) * .06s)}
@keyframes lyInk{from{opacity:0;filter:blur(4px)}to{opacity:1;filter:none}}
.ly-ritual-bar{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:center;margin-top:6px}
.ly-ritual .ly-btn-ghost{color:#f6e8c8;border-color:rgba(246,232,200,.6)}
.ly-ritual .ly-check{color:#f6e8c8}

/* phone shake (#2) */
.ly-shake-hint{position:absolute;left:10px;right:10px;top:10px;z-index:15;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px 8px 14px;border-radius:12px;background:rgba(20,14,8,.7);color:#f6e8c8;font-size:.9rem}
.ly-shake-hint .ly-btn{min-height:36px;padding:6px 14px;color:#f6e8c8;border-color:rgba(246,232,200,.6)}
#ly-shake[aria-pressed="true"]{background:var(--zhu);border-color:var(--zhu);color:#fff}

/* parallax (#11): individual translate composes with the running animations */
.ly-stage{--px:0;--py:0}
.ly-shell{translate:calc(var(--px) * -7px) calc(var(--py) * -5px)}
.ly-coins{translate:calc(var(--px) * 5px) calc(var(--py) * 3px)}
.ly-stage::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:4;background:radial-gradient(60% 50% at 50% 30%,rgba(255,236,190,.14),transparent 70%)}
/* moving-line close-up (#13) */
.ly-stage.closeup{animation:lyClose .9s cubic-bezier(.3,.7,.3,1)}
@keyframes lyClose{0%{transform:scale(1)}30%{transform:scale(1.06);box-shadow:inset 0 0 60px rgba(246,200,110,.45)}100%{transform:scale(1)}}
.ly-stage.closeup .ly-coin{filter:drop-shadow(0 0 10px rgba(255,214,120,.9))}

/* micro interactions (#22) */
.ly-btn,.ly-tab,.ly-chip,.ly-seg button,.ly-jump a{position:relative;overflow:hidden}
.ly-ripple{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(184,50,42,.35),rgba(29,26,22,.12) 60%,transparent 70%);animation:lyRipple .6s ease-out forwards}
@keyframes lyRipple{to{transform:scale(14);opacity:0}}
.ly-tabs.has-ink{position:relative}
.ly-tabs.has-ink .ly-tab{background:transparent;z-index:1}
.ly-tabs.has-ink .ly-tab.is-on{background:transparent;box-shadow:none;border-color:transparent}
.ly-tab-ink{position:absolute;left:0;top:0;z-index:0;border-radius:999px;background:var(--ink2);box-shadow:0 6px 16px -8px rgba(0,0,0,.5);transition:transform .45s cubic-bezier(.3,1.3,.5,1),width .45s cubic-bezier(.3,1.3,.5,1);}
.ly-coin{rotate:none}

/* 3D coins (#10) */
.ly-3d{position:absolute;inset:0;width:100%!important;height:100%!important;z-index:3;opacity:0;cursor:pointer}
.ly-3d-on .ly-shell,.ly-3d-on .ly-coin-wrap{visibility:hidden}
.ly-3d-on .ly-toss-result{z-index:5}

/* lines flying into the result (#16) */
.ly-fly svg{width:100%;height:100%;display:block}

/* result: calligraphy (#14), 爻变 (#15), motifs (#18), ink (#17) */
.ly-callig{display:flex;justify-content:center;min-height:56px;margin:2px 0 -2px}
.ly-morph path{fill:none;stroke:var(--ink2);stroke-linecap:round}
.ly-hexes{position:relative}
.ly-motif{position:absolute;inset:-10px -20px;z-index:0;pointer-events:none;display:grid;grid-template-rows:1fr 1fr;opacity:.5}
.ly-motif svg{width:100%;height:100%}
.ly-motif path,.ly-motif ellipse{fill:none;stroke:var(--jin);stroke-width:1.4;opacity:.45}
.ly-motif-cap{position:absolute;right:20px;bottom:-4px;font-size:.72rem;color:var(--muted)}
.ly-hex{z-index:1}
.m-rays{animation:lyRays 9s ease-in-out infinite alternate;transform-origin:200px -20px}
@keyframes lyRays{from{transform:rotate(-4deg);opacity:.6}to{transform:rotate(4deg);opacity:1}}
.m-strata path{animation:lyDriftX 12s ease-in-out infinite alternate}
.m-wind path{animation:lyWind 6s linear infinite;stroke-dasharray:60 40}
@keyframes lyWind{to{stroke-dashoffset:-200}}
@keyframes lyDriftX{from{transform:translateX(-10px)}to{transform:translateX(10px)}}
.m-bolt path{fill:rgba(184,146,58,.25)!important;animation:lyFlash 5s steps(1) infinite}
@keyframes lyFlash{0%,86%,90%,100%{opacity:.25}88%,92%{opacity:.9}}
.m-ripple ellipse{transform-origin:200px 90px;animation:lyRippleW 3.6s ease-out infinite}
@keyframes lyRippleW{from{transform:scale(.3);opacity:.8}to{transform:scale(3.4);opacity:0}}
.m-flame path{fill:rgba(214,120,70,.18)!important;transform-origin:center bottom;transform-box:fill-box;animation:lyFlame 1.8s ease-in-out infinite alternate}
@keyframes lyFlame{from{transform:scaleY(.85)}to{transform:scaleY(1.12)}}
.m-mount path{fill:rgba(110,92,63,.12)!important}
.m-mount .b{fill:rgba(110,92,63,.18)!important;animation:lyDriftX 14s ease-in-out infinite alternate}
.m-lake path{animation:lyShimmer 3s ease-in-out infinite alternate}
@keyframes lyShimmer{from{opacity:.15;transform:translateX(-6px)}to{opacity:.6;transform:translateX(6px)}}
.ly-lite .ly-motif *{animation:none!important}
.ly-ink-gl{position:absolute;left:0;width:100%;z-index:0;pointer-events:none}
.ly-res.gl-ink::before{display:none}

/* guided tour (#19) */
.ly-tour-btn{font:600 .82rem var(--sans);padding:6px 14px;border-radius:999px;border:1px solid var(--zhu);background:var(--zhu);color:#fff;cursor:pointer}
.ly-tour{position:fixed;inset:0;z-index:90}
.ly-tour-spot{position:fixed;border-radius:12px;box-shadow:0 0 0 9999px rgba(20,14,8,.62);transition:all .35s cubic-bezier(.3,.7,.3,1);pointer-events:none;outline:2px solid rgba(246,214,140,.9)}
.ly-tour-card{position:fixed;left:50%;transform:translateX(-50%);width:min(420px,calc(100vw - 32px));background:#fffdf7;color:#1d1a16;border-radius:14px;padding:14px 16px;box-shadow:0 20px 50px -20px rgba(0,0,0,.6);transition:top .35s ease}
.ly-tour-card p{margin:0 0 8px;line-height:1.7}
.ly-tour-n{font-size:.75rem;color:#8a7a60}
.ly-tour-btns{display:flex;gap:8px;align-items:center;margin-top:8px}
.ly-tour-y{font-size:.9rem;color:#8a3a2a;min-height:1em}
.ly-table tr.ly-yong td{background:rgba(184,146,58,.22)!important}
.ly-modal-box video{width:100%;height:auto;border-radius:8px;margin:8px 0 12px}

/* night mode (#21) */
html.ly-night{--bg:#14110d;--cream:#1b1712;--sand:#2a241c;--line:#3a3226;--ink:#efe4cf;--text:#e2d8c6;--muted:#b4a890;--green-2:#9fd1b8;--gold-text:#e0bf72}
html.ly-night body{background:#14110d;color:var(--text)}
html.ly-night .ly-body{--paper:#231e17;--paper2:#1a1610;--ink2:#efe2c8;--edge:#4b4031;--zhu:#d4483b;--zhu2:#e15a4b}
html.ly-night .site-header{background:rgba(20,17,13,.94)}
html.ly-night .hero{background:linear-gradient(180deg,#1b1712,#14110d 120%)}
html.ly-night .content-box{background:#1c1813;border-color:#3a3226}
html.ly-night .ly-card,html.ly-night .ly-res{border-color:#3d3427;background-image:linear-gradient(var(--season),var(--season)),radial-gradient(120% 80% at 10% 0%,#2b241b 0%,#211c15 55%,#1a1610 100%)}
html.ly-night .ly-card::before{opacity:.12}
html.ly-night .ly-btn{color:#1d1a16}
html.ly-night .ly-btn:hover{color:#000}
html.ly-night .ly-btn-ghost{background:transparent;color:var(--ink2)}
html.ly-night .ly-btn-main,html.ly-night .ly-btn-wa{color:#fff}
html.ly-night .content-box a.ly-btn{color:#1d1a16}
html.ly-night .content-box a.ly-btn-ghost{color:var(--ink2)}
html.ly-night .content-box a.ly-btn-wa{color:#fff}
html.ly-night .ly-tab.is-on,html.ly-night .ly-seg button.is-on{color:#1d1a16}
html.ly-night .ly-tab,html.ly-night .ly-chip,html.ly-night .ly-jump a,html.ly-night .ly-steps,html.ly-night #ly-q,html.ly-night #ly-time,html.ly-night #ly-latezi,html.ly-night .ly-fld input,html.ly-night .ly-fld select,html.ly-night .ly-sound,html.ly-night .ly-hist-item,html.ly-night .ly-all,html.ly-night .ly-howto{background:rgba(255,255,255,.04);color:var(--ink2)}
html.ly-night .ly-chip.is-on{background:rgba(212,72,59,.18);color:#f0a497}
html.ly-night .ly-sound-pop,html.ly-night .ly-hist,html.ly-night .ly-modal-box{background:#221d16;border-color:#3d3427;color:var(--text)}
html.ly-night .ly-table td{border-color:#3a3226}
html.ly-night .ly-cta{background:rgba(31,143,77,.12);border-color:rgba(31,143,77,.4)}
html.ly-night .ly-shared{background:rgba(224,191,114,.12);border-color:rgba(224,191,114,.35)}
html.ly-night .ly-bh{color:#e6dbc6}
html.ly-night .ly-bg-c2{fill:rgba(255,255,255,.05)}
html.ly-night .ly-res-head b,html.ly-night .ly-gz b{color:var(--ink2)}
html.ly-night .ly-tab-ink{background:#efe2c8}

@media (prefers-reduced-motion:reduce){
  .ly-bagua,.ly-ritual-ring,.ly-ritual-q span,.ly-stage.closeup,.ly-ripple,.ly-motif *{animation:none!important}
  .ly-ritual-q span{opacity:1}
}
html.ly-night .ly-build.done{animation-name:lyDoneN}
@keyframes lyDoneN{0%{box-shadow:0 0 0 0 rgba(227,199,122,0)}35%{box-shadow:0 0 40px 8px rgba(227,199,122,.35);background:rgba(227,199,122,.08)}100%{box-shadow:0 0 16px 2px rgba(227,199,122,.18);background:rgba(227,199,122,.04)}}
html.ly-night .ly-tour-card{background:#241e17;color:#efe2c8;border:1px solid #4b4031}
html.ly-night .ly-tour-n{color:#b4a890}
html.ly-night .ly-tour-y{color:#f0a497}

/* background motifs run a few cycles, then rest (saves battery and keeps scrolling smooth) */
.ly-motif *{animation-iteration-count:3!important}