@import"https://fonts.googleapis.com/css2?family=Gaegu&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Noto+Serif+TC:wght@200..900&display=swap";@import"https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap";html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}a{text-decoration:none}input:focus-visible{border:none;outline:none}button{background-color:transparent;border:none}:root{--color-primary-default: #b7ada1;--color-primary-light: #eee5da;--color-secondary-default: #ffa442;--color-secondary-light: #ffbf54;--color-basic-black: #222222;--color-basic-black-200: #374151;--color-basic-grey: #e5e6e9;--color-basic-white: #f5f5f5;--color-basic-red: #f87171;--border-radius-input: .375rem}body{font-family:Inter,sans-serif;background-color:var(--color-basic-black)}main{min-width:100dvw;min-height:100dvh}h2{font-size:8vw;color:var(--color-basic-white);font-weight:700}button{cursor:pointer}.base-button{background-color:var(--color-primary-default);color:var(--color-basic-black);font-weight:700;font-size:1.5rem;border-radius:40px;border-style:none;padding:.75rem 2rem}.base-button:hover{background-color:var(--color-basic-grey)}.icon-button{color:var(--color-primary-default);margin:.8rem .5rem}input{background:color-mix(in srgb,var(--color-basic-black) 80%,black 20%);height:48px;border-radius:var(--border-radius-input);color:var(--color-basic-white)}h5{font-size:1.25em;font-weight:700;color:var(--color-secondary-light);line-height:2rem}.display-none{display:none}.symbol-list{display:flex;flex-direction:column;align-items:center;gap:4px}.symbol-list .symbol-item{width:auto;display:grid;transform:scaleX(0);transform-origin:bottom left;transition:transform .4s ease-out}.symbol-list .symbol-item span{display:block;border-bottom:3px solid #ffffff}.symbol-list .symbol-line-yang{grid-template-columns:50px 0px;transform:scaleX(1)}.symbol-list .symbol-line-yin{transform:scaleX(1);gap:6px;grid-template-columns:22px 22px}.symbol-list .symbol-line-red>span{border-color:var(--color-basic-red)}.animation-flip-loop{animation:flip-loop .5s linear infinite}@keyframes flip-loop{0%{transform:rotateY(0);opacity:1}50%{transform:rotateY(180deg);opacity:.5}to{transform:rotateY(360deg);opacity:1}}.animation-shrink-out{animation:shrinkOut .3s forwards;pointer-events:none}@keyframes shrinkOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.5)}}.animation-fadeOut-bottom{animation:fadeOutBottom 1s forwards}@keyframes fadeOutBottom{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.1) translateY(500px)}}.animation-fade-top{animation:fadeTop 1s forwards;position:absolute;top:50%;display:block}@keyframes fadeTop{0%{transform:translateY(0)}to{transform:translateY(-50%)}}#root{min-height:100dvh}#Start{background-image:url(/i-ching-easy/images/background.png);background-repeat:no-repeat;background-position:center;background-size:60%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3rem}#Choose{height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;row-gap:4rem}#Choose .coin-main{display:flex;align-items:center;justify-content:center;width:80%;column-gap:4rem;transition:opacity 1s ease-out,visibility 0s linear 1s}#Choose .coin-main .coin-item{width:25%;transition:transform .6s}#Choose .coin-main .coin-item.coin-front{opacity:1}#Choose .coin-main .coin-item.coin-back{opacity:.45}#Choose .judgment{font-size:1.5rem;line-height:3rem;margin-top:.5rem;padding:0 1.5rem}#Choose .judgment .judgment-title{text-align:center;color:var(--color-basic-white)}#Choose .judgment .judgment-text{color:var(--color-primary-default);text-align:center}#Has-sidebar{position:absolute;z-index:1;right:0}#Dictionary{position:fixed;width:100vw;height:100dvh;background-color:var(--color-basic-black);z-index:100;transform:translate(100%);transition:opacity .25s,transform .5s cubic-bezier(.19,1,.22,1);opacity:0;display:flex;justify-content:center}#Dictionary.open{transform:translate(0);visibility:visible;opacity:1}#Dictionary>.icon-button{right:0;position:absolute}#Dictionary .dictionary-content{width:80vw;max-width:1024px;margin:2.8rem 0;display:grid;gap:1.5em;justify-items:center;grid-template-rows:auto 1fr;grid-template-columns:auto 1fr}@media (max-width: 992px){#Dictionary .dictionary-content{display:flex;flex-direction:column;align-items:center;font-size:.8rem}}#Dictionary .dictionary-content .search-bar{width:100%;position:relative;display:flex;grid-column:1 / span 2}#Dictionary .dictionary-content .search-bar .icon-button:first-child{position:absolute;left:10px;pointer-events:none}#Dictionary .dictionary-content .search-bar .icon-button:last-child{position:absolute;color:var(--color-basic-white);right:10px;cursor:pointer}#Dictionary .dictionary-content .search-bar .icon-button:last-child>svg{width:18px}#Dictionary .dictionary-content .search-bar input{width:100%;padding-left:52px;padding-right:40px;border:1px solid transparent}#Dictionary .dictionary-content .search-bar input:focus{border-color:var(--color-secondary-default)}#Dictionary .dictionary-content .dictionary-card{border:1px solid var(--color-secondary-default);border-radius:var(--border-radius-input);padding:1em;width:200px;height:fit-content;display:flex;gap:.5em;flex-direction:column;align-items:center;color:var(--color-primary-light)}#Dictionary .dictionary-content .dictionary-card .dictionary-subtitle{margin-bottom:.5rem;color:var(--color-basic-red)}#Dictionary .dictionary-content .dictionary-card .dictionary-trigram{font-size:.8rem;line-height:1.1rem}#Dictionary .dictionary-content .dictionary-card .dictionary-judgment-box .dictionary-judgment-title svg{padding-right:.5rem}#Dictionary .dictionary-content .dictionary-card .dictionary-judgment-box .dictionary-judgment-content{line-height:1.25rem}#Dictionary .dictionary-content .dictionary-list{width:100%;border:2px solid var(--color-secondary-default);border-radius:var(--border-radius-input);background-color:color-mix(in srgb,var(--color-basic-black) 80%,black 40%);color:var(--color-primary-light);display:flex;flex-direction:column;flex:1;min-height:0;overflow:auto}#Dictionary .dictionary-content .dictionary-list .dictionary-title{padding:1rem}@media (max-width: 992px){#Dictionary .dictionary-content .dictionary-list .dictionary-title{padding:.5rem 1rem}}#Dictionary .dictionary-content .dictionary-list .dictionary-list-content{overflow:hidden scroll;display:flex;flex-direction:column;align-items:stretch;gap:.5rem;padding:0 1rem}#Dictionary .dictionary-content .dictionary-list .dictionary-list-content .dictionary-list-item{padding:1.5rem .75rem;cursor:pointer;border-radius:var(--border-radius-input)}#Dictionary .dictionary-content .dictionary-list .dictionary-list-content .dictionary-list-item:hover{background-color:color-mix(in srgb,var(--color-basic-black) 80%,white 2%)}#Dictionary .dictionary-content .dictionary-list .dictionary-list-content .dictionary-list-item.clicked{background-color:color-mix(in srgb,var(--color-basic-black) 80%,white 2%);border:2px solid color-mix(in srgb,var(--color-secondary-default) 80%,black 70%)}#Dictionary .dictionary-content .dictionary-list .dictionary-list-content .dictionary-list-item .dictionary-item-index{font-family:Roboto Mono,Inter,sans-serif}#Dictionary .dictionary-content .dictionary-list .dictionary-list-content .dictionary-item-index{padding:.5rem;margin-right:.5rem;background-color:var(--color-basic-black-200);border-radius:var(--border-radius-input)}