:root{--hexagram-area-max-width:200px;--hexagram-title-font-size:20px;--hexagram-subtitle-font-size:12px;--hexagram-line-indices-area-max-width:60px;--hexagram-line-height:20px;--hexagram-line-gap:12px;--hexagram-line-color:#000000;--hexagram-line-changing-color:#720204;--coin-width:100px}@keyframes icc-flip-heads{0%{transform:rotateY(0)}100%{transform:rotateY(1800deg)}}@keyframes icc-flip-tails{0%{transform:rotateY(0)}100%{transform:rotateY(1980deg)}}.icc .flipping-heads{animation:2s ease-in-out forwards icc-flip-heads}.icc .flipping-tails{animation:2s ease-in-out forwards icc-flip-tails}@keyframes icc-slide-in{100%{transform:translateX(0)}}@-webkit-keyframes icc-slide-in{100%{-webkit-transform:translateX(0)}}@keyframes icc-slide-out{100%{transform:translateX(0)}}@-webkit-keyframes icc-slide-out{100%{-webkit-transform:translateX(0)}}.icc .slide-in{animation:.5s forwards icc-slide-in;-webkit-animation:.5s forwards icc-slide-in}.icc .slide-out{animation:.5s forwards icc-slide-out;-webkit-animation:.5s forwards icc-slide-out}.icc{margin:0 auto;max-width:100%;padding:0 10px}.icc .coins-container{display:flex;gap:4%;justify-content:center;flex-wrap:wrap}.icc .coin{position:relative;width:var(--coin-width);aspect-ratio:1/1;transform-style:preserve-3d}.icc .heads,.icc .tails{position:absolute;width:100%;height:100%;border-radius:50%;backface-visibility:hidden;display:flex;justify-content:center;align-items:center;overflow:hidden}.icc .heads img,.icc .tails img{width:100%;height:100%;object-fit:cover}.icc .tails{transform:rotateY(180deg)}.icc #flip-button{display:block;background-color:#000;color:#fff;padding:10px 15px;border:none;border-radius:4px;cursor:pointer;font-weight:700;margin:20px auto;transition:.3s}@media (hover:hover) and (pointer:fine){.icc #flip-button:hover{background-color:#fff;color:#000}}.icc #flip-button:focus-visible{background-color:#fff;color:#000}.icc #flip-button:disabled{background:#e0e0e0;color:#666;cursor:not-allowed}.icc #hexagram-display-area,.icc #tossing-display-area{display:flex;flex-direction:row;justify-content:center;margin:20px 0;flex-wrap:wrap}.icc .hexagram-title-container{display:flex;flex-direction:column;align-items:center;color:#000}.icc .hexagram-title{font-weight:700;font-size:var(--hexagram-title-font-size);line-height:1}.icc .hexagram-subtitle{font-size:var(--hexagram-subtitle-font-size)}.icc .hexagram-container{display:flex;flex-direction:column-reverse;justify-content:space-between;align-items:center;gap:var(--hexagram-line-gap);width:100%}.icc .hexagram-line{width:100%;text-align:center;position:relative;height:var(--hexagram-line-height);display:flex;align-items:center;justify-content:center}.icc .hexagram-line::before{content:'';position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:var(--hexagram-line-height);border-radius:2px}.icc .hexagram-line[data-symbol=""]::before{background-color:#fff;outline:1px dashed var(--hexagram-line-color)}.icc .hexagram-line[data-symbol="⚊"]::before{background-color:var(--hexagram-line-color)}.icc .hexagram-line[data-changing=true][data-symbol="⚊"]::before{background-color:var(--hexagram-line-changing-color)}.icc .hexagram-line[data-symbol="⚋"]::before{background:linear-gradient(to right,var(--hexagram-line-color) 0,var(--hexagram-line-color) 40%,transparent 40%,transparent 60%,var(--hexagram-line-color) 60%,var(--hexagram-line-color) 100%)}.icc .hexagram-line[data-changing=true][data-symbol="⚋"]::before{background:linear-gradient(to right,var(--hexagram-line-changing-color) 0,var(--hexagram-line-changing-color) 40%,transparent 40%,transparent 60%,var(--hexagram-line-changing-color) 60%,var(--hexagram-line-changing-color) 100%)}.icc #original-hexagram{transform:translateX(50%);-webkit-transform:translateX(50%)}.icc #transformed-hexagram{transform:translateX(-50%);-webkit-transform:translateX(-50%)}.icc #hexagram-line-indices{display:flex;flex-direction:column-reverse;align-items:center;justify-content:space-between;font-weight:700;font-size:clamp(.9rem, 2.5vw, 1.2em);color:#333;gap:var(--hexagram-line-gap)}.icc .hexagram-line-index{height:var(--hexagram-line-height);display:flex;justify-content:center;align-items:center}.icc #hexagram-line-indices-area,.icc #original-hexagram-area,.icc #tossing-hexagram-area,.icc #transformed-hexagram-area{display:flex;flex-direction:column;align-items:center;text-align:center;font-weight:700;gap:var(--hexagram-line-gap);width:100%}.icc #original-hexagram-area,.icc #tossing-hexagram-area,.icc #transformed-hexagram-area{max-width:var(--hexagram-area-max-width)}.icc #hexagram-line-indices-area{max-width:var(--hexagram-line-indices-area-max-width)}.icc #advice-display-area{color:#000}.icc #advice-content{text-align:center}.icc .hexagram-name{text-align:center;font-weight:700}@media screen and (max-width:480px){:root{--hexagram-area-max-width:min(40%, 140px);--hexagram-title-font-size:18px;--hexagram-subtitle-font-size:8px;--hexagram-line-indices-area-max-width:42px;--hexagram-line-height:14px;--hexagram-line-gap:8px;--coin-width:25%}}