:root{--bg:#070808;--cell:#101312;--line:#303936;--fg:#edf0eb;--muted:#7d8781;--wood:#35c875;--fire:#ef4d45;--earth:#d6a247;--metal:#e8eeec;--water:#4b9bd8;--danger:#ee765d}*{box-sizing:border-box}body{background:var(--bg);color:var(--fg);margin:0;font:12px Arial,sans-serif}button,input{font:inherit}.app{background:var(--bg);min-height:100vh}header{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;height:68px;padding:0 42px;display:flex}.brand{letter-spacing:.12em;font:25px Georgia}.brand small{color:var(--muted);letter-spacing:.3em;margin-top:4px;font:8px Arial;display:block}.meta{color:var(--muted);align-items:center;gap:10px;font-size:10px;display:flex}.meta svg{color:var(--muted)}main{grid-template-columns:240px 1fr;gap:46px;min-height:calc(100vh - 68px);padding:0 42px 0 55px;display:grid}.eyebrow{color:var(--earth);letter-spacing:.18em;font-size:10px}.intro h1{margin:20px 0;font:400 70px/.82 Georgia}.intro p{max-width:185px;color:var(--muted);line-height:1.8}.time{color:var(--muted);margin-top:30px;line-height:2}.time b{color:var(--fg);font-weight:400}.intro label{color:var(--muted);margin-top:28px;font-size:10px;display:block}.intro input{width:190px;color:var(--fg);border:0;border-bottom:1px solid var(--line);background:0 0;outline:0;padding:10px 0;display:block}.generate{background:var(--fg);color:#070808;cursor:pointer;border:0;justify-content:center;align-items:center;gap:8px;width:190px;height:38px;margin-top:24px;display:flex}.spin{animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.instrument{flex-direction:column;justify-content:center;align-items:center;display:flex}.outer{background:var(--cell);border:1px solid #526058;width:min(74vw,860px);padding:0}.plate{aspect-ratio:1;background:var(--line);grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr);gap:1px;width:100%;display:grid}.cell{background:var(--cell);min-width:0;color:var(--fg);text-align:left;cursor:pointer;border:0;flex-direction:column;padding:14px;display:flex;position:relative}.cell:hover,.cell.active{outline:1px solid var(--earth);z-index:2;background:#18211d}.coord{height:18px;color:var(--muted);justify-content:space-between;font-size:9px;display:flex}.cell-body{flex:1;grid-template-columns:1fr 1fr;align-items:center;gap:6px;display:grid}.group{flex-direction:column;gap:5px;display:flex}.star,.spirit,.door{margin:0;font-family:Georgia;font-weight:400}.spirit{color:var(--muted);font-size:14px}.stems{flex-direction:column;align-items:flex-end;gap:1px;display:flex}.stems span{font:36px/1 Georgia}.stems span.wood{color:var(--wood)}.stems span.fire{color:var(--fire)}.stems span.earth{color:var(--earth)}.stems span.metal{color:var(--metal)}.stems span.water{color:var(--water)}.earth-stem{opacity:.62;font-size:27px!important}.aux{height:16px;color:var(--muted);font-size:9px}.flags{justify-content:flex-end;gap:7px;height:16px;display:flex}.flags b{color:var(--danger);font-size:10px;font-weight:400}.legend{color:var(--muted);align-items:center;gap:15px;margin-top:16px;font-size:10px;display:flex}.legend span{align-items:center;gap:5px;display:flex}.legend i{border-radius:50%;width:7px;height:7px;display:block}.legend .wood{background:var(--wood)}.legend .fire{background:var(--fire)}.legend .earth{background:var(--earth)}.legend .metal{background:var(--metal)}.legend .water{background:var(--water)}.legend em{color:#59645e;margin-left:8px;font-style:normal}.drawer{z-index:4;background:#0a0d0c;border-top:1px solid #58655d;grid-template-columns:180px repeat(3,1fr);gap:28px;padding:20px 55px;transition:all .3s;display:grid;position:fixed;bottom:0;left:0;right:0;transform:translateY(100%)}.drawer.open{transform:translateY(0)}.drawer h2{margin:8px 0;font:400 25px Georgia}.drawer h3{color:var(--muted);letter-spacing:.15em;margin:0 0 10px;font-size:10px;font-weight:400}.drawer p{border-top:1px solid var(--line);color:var(--muted);margin:0;padding:7px 0}.drawer p b{float:right;color:var(--fg);font-weight:400}.drawer strong{font:400 20px Georgia}.close{color:var(--muted);cursor:pointer;background:0 0;border:0;position:absolute;top:17px;right:32px}@media (width<=850px){header{padding:0 20px}.meta{display:none}main{padding:0 20px;display:block}.intro{padding-top:42px}.intro h1{font-size:60px}.intro input,.generate{width:100%;max-width:300px}.instrument{margin-top:38px}.outer{width:100%}.cell{padding:7px}.cell-body{gap:3px}.star,.door{font-size:12px}.spirit{font-size:10px}.stems span{font-size:25px}.earth-stem{font-size:19px!important}.aux,.flags b{font-size:7px}.legend{flex-wrap:wrap;margin-bottom:100px}.drawer{grid-template-columns:1fr 1fr;gap:14px;padding:18px 20px}.drawer>div:first-of-type{grid-column:1/-1}.close{top:13px;right:17px}}main{grid-template-columns:minmax(300px,360px) 1fr;gap:70px;height:calc(100vh - 68px);min-height:0;padding:0 70px}.intro h1{margin:15px 0 17px;font-size:58px}.intro p{line-height:1.55}.time{margin-top:18px}.intro label{margin-top:16px}.generate{width:260px;margin-top:22px}.instrument{min-width:0;min-height:0}.outer{width:min(62vw,100vh - 150px);max-width:760px}.legend{margin-top:14px}.cell{padding:14px}.cell-body{gap:8px}.star,.door{font-size:15px}.spirit{font-size:13px}.stems span{font-size:32px}.earth-stem{font-size:24px!important}.aux,.flags{height:16px;font-size:8px}.drawer{gap:22px;padding:16px 42px}.intro>.eyebrow,.intro>h1,.intro>p{display:none}.intro{padding-top:12vh}.intro:before{content:"排盘控制";color:var(--fg);letter-spacing:.08em;margin-bottom:38px;font:400 20px Georgia;display:block}.time-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin-top:0;display:grid}.time-grid span{color:var(--muted);margin-bottom:10px;font-size:10px;display:block}.time-grid b{flex-direction:column;align-items:flex-start;gap:4px;font:400 22px/1.15 Georgia;display:flex}.time-grid b i{font-style:normal;display:block}.ju-line{color:var(--muted);align-items:baseline;gap:24px;margin-top:28px;display:flex}.ju-line b{color:var(--fg);font-weight:400}@media (width<=850px){main{height:auto;min-height:calc(100vh - 68px);padding:0 18px 28px;display:block}.intro{padding-top:34px}.intro h1{font-size:52px}.intro input,.generate{width:100%;max-width:300px}.instrument{margin-top:28px}.outer{width:min(100%,100vh - 285px);min-width:300px}.cell{padding:7px}.cell-body{gap:2px}.star,.door{font-size:12px}.spirit{font-size:10px}.stems span{font-size:24px}.earth-stem{font-size:18px!important}.aux,.flags b{font-size:7px}.legend{flex-wrap:wrap;margin-bottom:100px}.drawer{grid-template-columns:1fr 1fr;gap:14px;padding:18px 20px}.drawer>div:first-of-type{grid-column:1/-1}}.group .wood{color:var(--wood)}.group .fire{color:var(--fire)}.group .earth{color:var(--earth)}.group .metal{color:var(--metal)}.group .water{color:var(--water)}.time-editor{margin-top:28px}.time-editor>span{color:var(--muted);margin-bottom:10px;font-size:10px;display:block}.time-fields{gap:14px;width:260px;display:flex}.time-fields input{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;border-radius:2px;min-width:0;width:123px!important;color:var(--fg)!important;border:1px solid var(--line)!important;background:#0d1110!important;padding:11px 10px!important}.time-fields input:focus{outline:1px solid color-mix(in srgb,var(--earth) 35%,transparent);border-color:var(--earth)!important}@media (width<=850px){.time-fields{width:100%;max-width:300px}.time-fields input{flex:1;width:auto!important}}.plate-shell{aspect-ratio:1;grid-template-rows:42px repeat(3,minmax(0,1fr)) 42px;grid-template-columns:42px repeat(3,minmax(0,1fr)) 42px;width:min(62vw,100vh - 150px);max-width:844px;display:grid;position:relative}.plate-shell>.outer{grid-area:2/2/5/5;width:100%;max-width:none;height:100%}.outer-symbols{display:contents}.outer-symbol{color:var(--muted);justify-content:center;align-items:center;font:400 20px Georgia;display:flex}@media (width<=850px){.plate-shell{grid-template-rows:28px repeat(3,minmax(0,1fr)) 28px;grid-template-columns:28px repeat(3,minmax(0,1fr)) 28px;width:min(100%,100vh - 285px);min-width:300px}.plate-shell>.outer{width:100%;min-width:0}.outer-symbol{font-size:16px}}.outer-symbol{flex-direction:column;gap:2px;line-height:1}.outer-symbol b{color:var(--fg);font-size:20px;font-weight:400}.outer-symbol small{color:var(--muted);font:9px Arial}.outer-symbol.top{grid-column:3}.outer-symbol.right{grid-row:3}.outer-symbol.bottom{grid-column:3}.outer-symbol.left{grid-row:3}.outer-symbol.corner{flex-direction:row;justify-content:center;align-items:center;gap:10px;display:flex}.outer-symbol.tl{grid-area:1/2}.outer-symbol.tr{grid-area:1/4}.outer-symbol.br{grid-area:5/4}.outer-symbol.bl{grid-area:5/2}.outer-symbol.corner b{font-size:18px}.outer-symbol.corner small{font-size:8px}.outer-symbol.top,.outer-symbol.bottom{justify-self:center}.outer-symbol.right,.outer-symbol.left{align-self:center}@media (width<=850px){.plate-shell{grid-template-rows:42px repeat(3,minmax(0,1fr)) 42px;grid-template-columns:42px repeat(3,minmax(0,1fr)) 42px}.outer-symbol b{font-size:16px}.outer-symbol small{font-size:7px}.outer-symbol.corner{gap:5px}.outer-symbol.corner b{font-size:14px}}.outer-symbol.corner{flex-direction:row;display:flex;position:relative}.outer-symbol.corner[style*="--order: 0"]{transform:translate(-12px)}.outer-symbol.corner[style*="--order: 1"]{transform:translate(12px)}@media (width<=850px){.outer-symbol.corner[style*="--order: 0"]{transform:translate(-7px)}.outer-symbol.corner[style*="--order: 1"]{transform:translate(7px)}}.coord{justify-content:center;gap:10px}.inner-symbol{color:#59645e;justify-content:center;align-items:center;font:400 11px Arial,sans-serif;display:flex;transform:none}.inner-symbol.inner-0{transform:translate(-18px,-12px)}.inner-symbol.inner-1{transform:translate(18px,12px)}@media (width<=850px){.inner-symbols{inset:28px}.inner-symbol{font-size:9px}.inner-symbol.inner-0{transform:translate(-10px,-7px)}.inner-symbol.inner-1{transform:translate(10px,7px)}}.inner-symbols .inner-symbol:first-child{transform:translate(-18px,-12px)}.inner-symbols .inner-symbol:nth-child(2){transform:translate(18px,12px)}.inner-symbols .inner-symbol:nth-child(3){transform:translate(18px,-12px)}.inner-symbols .inner-symbol:nth-child(4){transform:translate(-18px,12px)}.inner-symbols .inner-symbol:nth-child(5){transform:translate(18px,-12px)}.inner-symbols .inner-symbol:nth-child(6),.inner-symbols .inner-symbol:nth-child(7){transform:translate(-18px,12px)}.inner-symbols .inner-symbol:nth-child(8){transform:translate(18px,-12px)}@media (width<=850px){.inner-symbols .inner-symbol:first-child{transform:translate(-10px,-7px)}.inner-symbols .inner-symbol:nth-child(2){transform:translate(10px,7px)}.inner-symbols .inner-symbol:nth-child(3){transform:translate(10px,-7px)}.inner-symbols .inner-symbol:nth-child(4){transform:translate(-10px,7px)}.inner-symbols .inner-symbol:nth-child(5){transform:translate(10px,-7px)}.inner-symbols .inner-symbol:nth-child(6),.inner-symbols .inner-symbol:nth-child(7){transform:translate(-10px,7px)}.inner-symbols .inner-symbol:nth-child(8){transform:translate(10px,-7px)}}.plate-shell{grid-template-rows:48px repeat(3,minmax(0,1fr)) 48px;grid-template-columns:48px repeat(3,minmax(0,1fr)) 48px}.inner-symbols{inset:38px}.outer-symbol{font-size:18px}.inner-symbol{font-size:10px}@media (width<=850px){.plate-shell{grid-template-rows:34px repeat(3,minmax(0,1fr)) 34px;grid-template-columns:34px repeat(3,minmax(0,1fr)) 34px}.inner-symbols{inset:28px}.outer-symbol{font-size:15px}.inner-symbol{font-size:8px}}.inner-symbols{z-index:2;pointer-events:none;grid-template-rows:12px repeat(3,minmax(0,1fr)) 12px;grid-template-columns:12px repeat(3,minmax(0,1fr)) 12px;display:grid;position:absolute;inset:52px}.inner-symbol{color:#59645e;justify-content:center;align-items:center;font:400 11px Arial,sans-serif;display:flex}.inner-symbol[style*="grid-row: 1"]{align-items:flex-end;padding-bottom:1px}.inner-symbol[style*="grid-row: 5"]{align-items:flex-start;padding-top:1px}.inner-symbol[style*="grid-column: 1"]{justify-content:flex-end;padding-right:1px}.inner-symbol[style*="grid-column: 5"]{justify-content:flex-start;padding-left:1px}@media (width<=850px){.inner-symbols{grid-template-rows:9px repeat(3,minmax(0,1fr)) 9px;grid-template-columns:9px repeat(3,minmax(0,1fr)) 9px;inset:34px}.inner-symbol{font-size:9px}}