:root{color-scheme:light;--paper:#f5f1e8;--ink:#293e38;--muted:#5c6b60;--line:#c9cdbf;--red:#b8412d;--teal:#35695c;--cream:#fcfaf4;--display:KingHwa,'Noto Serif SC',serif}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--display);font-size:15px;line-height:1.6}button,input,select{font:inherit}button,a,input,select{touch-action:manipulation}button{cursor:pointer;color:inherit}button{border:0;background:none}a{color:inherit;text-underline-offset:5px}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--red);outline-offset:4px}button:disabled{cursor:default}::selection{background:#f2c6ad;color:var(--ink)}[hidden]{display:none!important}svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.skip{position:fixed;top:0;left:20px;padding:12px;background:var(--cream);z-index:10;transform:translateY(-120%)}.skip:focus{transform:none}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:1440px;margin:auto;padding:20px 4%;border-bottom:1px solid var(--line);font-size:13px}.back{text-decoration:none}.back:hover{color:var(--red)}.edition{color:var(--muted);letter-spacing:.08em}.tools{display:flex;gap:22px}.tools button{padding:4px 0}.tools button:hover{text-decoration:underline;text-underline-offset:5px}
main{max-width:1320px;margin:0 auto;padding:36px 40px 20px}.opening{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:30px}h1,h2,h3,p{margin:0}h1{font-family:var(--display);font-size:clamp(42px,4.6vw,64px);font-weight:400;line-height:1.15;letter-spacing:.03em;display:flex;align-items:center;gap:6px}h1>span{color:var(--red)}.title-mark{width:42px;height:42px;margin-left:22px;stroke:var(--red);stroke-width:1.1}.opening p:not(.collection-count){color:var(--muted);margin-top:10px;font-size:14px}.collection-count{display:flex;align-items:center;gap:15px;flex-shrink:0}.collection-count strong{font-family:var(--display);font-size:54px;font-weight:400;line-height:1;font-variant-numeric:tabular-nums}.collection-count span i{font-style:normal}.collection-count span{font-size:12px;line-height:1.8;color:var(--muted)}
.workspace{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);min-height:570px}.mix-panel{min-width:0;padding:22px 28px 0 0;position:relative;scroll-margin-top:16px}.panel-heading{display:flex;justify-content:space-between;align-items:center}h2{font-family:var(--display);font-size:23px;font-weight:400}.panel-heading>span{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}.mix-stage{position:relative;display:flex;flex-direction:column;align-items:center;padding:62px 20px 18px;isolation:isolate}.orbit{position:absolute;width:100%;height:100%;left:0;top:0;stroke:var(--line);stroke-width:.8;z-index:-1;pointer-events:none}.ingredients{display:flex;align-items:center;justify-content:center;gap:18px;width:100%;min-height:118px}.socket{width:156px;min-height:110px;padding:12px 9px;border:1px dashed #8c9d8c;background:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;transition:background .2s,border-color .2s}.socket:hover,.socket.drag-over{background:#ebe9db;border-color:var(--teal)}.socket.filled{border:1px solid var(--teal);background:var(--cream)}.socket.filled::after{content:'点击移除';font-size:11px;color:var(--muted)}.socket-placeholder{font-family:var(--display);font-size:19px;line-height:1.5;color:var(--muted)}.cross{font-family:var(--display);font-size:36px;color:var(--red)}.socket .element-name{font-size:16px;line-height:1.4}.socket .element-icon{width:27px;height:27px}.combine{display:flex;align-items:center;justify-content:center;gap:26px;background:var(--red);color:#fff9ef;padding:13px 24px;margin-top:26px;min-width:224px;transition:background .2s}.combine>svg{width:22px;height:22px}.combine:hover:enabled{background:#963523}.combine:disabled{background:#d3d6c9;color:#4d594f}.stage-help{color:var(--muted);font-size:12px;margin-top:16px;text-align:center;min-height:20px}
.result-area{min-height:133px;padding:22px 0;display:flex;align-items:center;justify-content:center;border-top:1px solid var(--line);margin-top:18px}.result-empty{display:flex;align-items:center;gap:24px}.seed-mark{font-family:var(--display);font-size:43px;color:var(--teal);border:1px solid var(--line);width:62px;height:62px;display:grid;place-items:center;border-radius:50%}.result-empty p{font-family:var(--display);font-size:17px;line-height:1.8;color:var(--muted)}.result-empty strong{font-weight:400;color:var(--ink)}.result-success{width:100%;display:flex;align-items:center;gap:16px}.result-symbol{display:grid;place-items:center;flex-shrink:0;width:60px;height:60px;border-radius:50%;background:#e3e9d9;color:var(--teal)}.result-symbol svg{width:32px;height:32px}.result-copy{min-width:0;flex:1}.result-flag{font-size:11px;color:var(--red)}.result-name{font-family:var(--display);font-size:28px;font-weight:400;line-height:1.5;overflow-wrap:anywhere}.result-note{font-size:12px;color:var(--muted);margin-top:3px}.use-result{border:1px solid var(--teal);padding:8px 12px;flex-shrink:0;font-size:12px}.use-result:hover{background:#e3e9d9}.result-failed{font-family:var(--display);text-align:center}.result-failed strong{font-size:25px;font-weight:400}.result-failed p{font-family:var(--display);font-size:13px;color:var(--muted);margin-top:8px}.result-success.arrive{animation:arrive .38s cubic-bezier(.16,1,.3,1)}@keyframes arrive{from{transform:translateY(9px);opacity:.45}to{transform:translateY(0);opacity:1}}
.bench-tools{display:flex;align-items:center;gap:16px;border-top:1px solid var(--line);padding:15px 0;font-size:12px}.bench-tools button{display:flex;gap:5px;align-items:center;padding:5px 0}.bench-tools button:hover{color:var(--red)}.bench-tools svg{width:17px;height:17px}.bench-tools>span{margin-left:auto;color:var(--muted);font-size:11px}.hint-message{font-size:13px;color:var(--teal);padding:0 0 15px}
.collection{border-left:1px solid var(--line);padding:22px 0 20px 28px;min-width:0;display:flex;flex-direction:column}.collection-heading{display:flex;justify-content:space-between;align-items:center;gap:10px}.collection-heading>span{font-size:11px;color:var(--muted)}.search{display:flex;align-items:center;gap:8px;margin-top:20px;border-bottom:1px solid #8c9d8c;padding:0 0 9px}.search>svg{width:18px;height:18px;flex-shrink:0}.search>input{border:0;background:none;color:var(--ink);width:100%;min-width:0;font-size:13px;caret-color:var(--red)}.search>input::placeholder{color:var(--muted);opacity:1}.search>span{font-size:16px;color:var(--muted)}.collection-controls{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:17px 0}.categories{display:flex;gap:5px;flex-wrap:wrap}.categories>button{padding:3px 7px;font-size:11px;color:var(--muted)}.categories>button[aria-pressed='true']{background:var(--ink);color:var(--cream)}.sort-label{font-size:0;flex-shrink:0}.sort-label>select{background:transparent;border:0;color:var(--muted);font-size:11px;max-width:96px;padding:4px 0}.elements{display:flex;flex-wrap:wrap;align-content:flex-start;gap:9px;max-height:340px;min-height:180px;overflow-y:auto;overflow-x:hidden;padding:5px 4px 10px;scrollbar-color:#91a18f transparent;scrollbar-width:thin}.element{display:inline-flex;align-items:center;gap:7px;padding:9px 12px;border:1px solid #bdc7b7;background:var(--cream);border-radius:3px;text-align:left;min-height:44px;max-width:100%;line-height:1.4;transition:border-color .15s,background .15s}.element:hover{border-color:var(--teal);background:#e9eedf}.element[aria-pressed='true']{border-color:var(--red);background:#f3e0d1}.element-icon{display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;flex-shrink:0;color:var(--teal)}.element-icon>svg{width:100%;height:100%;stroke-width:1.5}.element[data-category='五行'] .element-name{font-family:var(--display);font-size:20px;line-height:1}.element-name{font-size:13px;overflow-wrap:anywhere}.no-matches{padding:15px 0;font-size:13px;color:var(--muted)}.collection-tip{border-top:1px solid var(--line);margin-top:auto;padding-top:16px;color:var(--muted);font-size:12px;line-height:1.9}
.journal{margin-top:24px}.journal-heading{display:flex;align-items:center;gap:20px}.journal-heading p{color:var(--muted);font-size:12px}.journal-heading button{margin-left:auto;padding:5px 0;color:var(--teal);font-size:12px}.journal ol{list-style:none;margin:16px 0 0;padding:0;max-height:300px;overflow:auto;scrollbar-color:#91a18f transparent;scrollbar-width:thin}.journal li{display:flex;align-items:center;gap:12px;border-top:1px solid var(--line);padding:13px 0;font-size:13px}.journal li>span{flex:1;min-width:0;overflow-wrap:anywhere}.journal li small{color:var(--muted);font-size:11px}.journal li button{font-family:var(--display);font-size:17px;color:var(--teal);text-decoration:underline;text-underline-offset:4px;padding:0;max-width:40%;overflow-wrap:anywhere}.journal .journal-empty{color:var(--muted);font-size:13px}.footer{display:flex;justify-content:space-between;gap:30px;border-top:1px solid var(--line);padding-top:16px;margin-top:24px;color:var(--muted);font-size:12px}.footer>details{max-width:420px;text-align:right}.footer summary{cursor:pointer;list-style-position:inside}.footer details p{margin-top:12px;text-align:left;font-size:12px}.footer>span{padding-top:2px}
dialog{color:var(--ink);background:var(--paper);border:1px solid var(--ink);max-width:440px;width:calc(100% - 32px);padding:28px}dialog::backdrop{background:#293e3866}dialog p{margin-top:15px;font-size:14px}.dialog-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:24px}.dialog-actions button{padding:10px 16px;border:1px solid var(--line)}.dialog-actions .danger{background:var(--red);color:var(--cream);border:0}
@media(min-width:1500px){main{padding-top:46px}.mix-stage{padding-top:76px;padding-bottom:32px}.workspace{min-height:610px}.elements{max-height:380px}}
@media(max-width:900px){main{padding:26px 24px 20px}.workspace{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}.mix-panel{padding-right:20px}.collection{padding-left:20px}.mix-stage{padding:54px 0 18px}.ingredients{gap:12px}.socket{width:132px}.collection-heading{align-items:flex-start;flex-direction:column;gap:3px}.collection-count{gap:10px}.collection-count strong{font-size:45px}.bench-tools{gap:12px}.bench-tools>span{font-size:11px}.result-success{gap:10px}.result-symbol{width:42px;height:42px}.result-name{font-size:24px}.use-result{padding:8px}.title-mark{margin-left:10px}}
@media(max-width:650px){.topbar{padding:14px 18px;gap:8px;font-size:11px}.edition{display:none}.tools{gap:16px}main{padding:24px 18px 18px}.opening{align-items:flex-start;margin-bottom:22px;gap:12px}h1{font-size:42px;gap:2px}.title-mark{width:25px;height:25px;margin-left:8px}.opening p:not(.collection-count){font-size:12px;max-width:23em;line-height:1.8;margin-top:9px}.collection-count{gap:6px;flex-direction:column;align-items:flex-end;padding-top:4px}.collection-count strong{font-size:36px}.collection-count span{font-size:11px;text-align:right}.collection-count span br,.collection-count span i{display:none}.collection-count span{max-width:60px}.workspace{display:flex;flex-direction:column;min-height:0}.mix-panel{padding:15px 0 0}.panel-heading h2,.collection-heading h2{font-size:21px}.panel-heading>span{font-size:11px}.mix-stage{padding:26px 10px 10px}.ingredients{min-height:98px;gap:20px}.socket{width:132px;min-height:91px;padding:8px}.socket-placeholder{font-size:18px}.socket .element-icon{width:22px;height:22px}.socket .element-name{font-size:15px}.socket.filled::after{font-size:11px}.cross{font-size:28px}.combine{margin-top:16px;padding:10px 20px;min-width:210px;font-size:14px}.stage-help{margin-top:12px;font-size:11px}.result-area{min-height:112px;margin-top:10px;padding:17px 0}.result-empty{gap:18px}.seed-mark{font-size:33px;width:48px;height:48px}.result-empty p{font-size:16px}.bench-tools{padding:9px 0;gap:18px}.bench-tools>span{font-size:11px}.collection{border-left:0;border-top:1px solid var(--ink);padding:17px 0 14px}.collection-heading{flex-direction:row;align-items:center}.search{margin-top:15px}.collection-controls{margin:11px 0}.elements{min-height:120px;max-height:255px;gap:8px;padding-top:4px}.element{padding:8px 11px;min-height:44px}.collection-tip{margin-top:12px;padding-top:10px;font-size:11px}.collection-tip br{display:none}.journal{margin-top:20px}.journal-heading{gap:10px}.journal-heading h2{font-size:21px}.journal-heading p{display:none}.journal li{gap:8px;font-size:12px}.footer{flex-direction:column;gap:10px;margin-top:20px}.footer>details{text-align:left;max-width:none}.result-name{font-size:24px}.result-note{font-size:11px}.result-symbol{width:44px;height:44px}.use-result{font-size:11px}.hint-message{font-size:12px;padding-bottom:10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

:root{--help-paper:var(--paper);--help-text:var(--ink);--help-accent:var(--red);--help-muted:var(--muted)}
.tools{align-items:center}.tools .game-help-button{margin-block:-8px}
.result-failed .collision-pair{margin:0 0 8px;color:var(--teal);font-size:13px}
@media(pointer:coarse){button{min-height:44px;min-width:44px}.back{display:inline-flex;align-items:center;min-height:44px}.search>input,.sort-label>select{font-size:16px;min-height:44px}.bench-tools{flex-wrap:wrap}}