@font-face{font-family:WikiThai;src:url("fonts/NotoSansThai.ttf") format("truetype");font-weight:100 900;font-display:swap}
:root{--paper:#fffdfa;--bg:#fbf7ef;--ink:#302d29;--muted:#85796d;--line:#e8ddd0;--accent:#b34a21;--soft:#f5e9da;--green:#38604e}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:WikiThai,"Leelawadee UI",Tahoma,Arial,sans-serif;font-size:15px;line-height:1.7}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}.shell{width:min(1220px,calc(100% - 64px));margin-inline:auto}.site-header{background:var(--paper);border-bottom:1px solid var(--line)}.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:20px}.brand{display:flex;align-items:center;gap:12px;color:var(--ink);line-height:1.3}.brand img{object-fit:contain}.brand strong{font-size:17px;letter-spacing:.4px}.brand small{display:block;font-size:10px;letter-spacing:2px;margin-top:5px;color:var(--muted)}.site-header nav{display:flex;gap:28px;font-size:14px}.site-header nav a{color:var(--muted)}.site-header nav a[aria-current]{color:var(--accent);font-weight:700}main{padding-top:26px;padding-bottom:38px}.back-link{font-size:13px;color:var(--muted)}.page-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:24px 0}.eyebrow{font-family:Arial,sans-serif;font-size:11px;letter-spacing:2px;color:var(--accent);font-weight:700}h1{font-size:34px;line-height:1.4;margin:4px 0 8px}.page-heading p{margin:0;color:var(--muted)}.data-badge{border:1px solid var(--line);border-radius:100px;background:var(--paper);padding:8px 14px;font-size:12px;color:var(--muted);white-space:nowrap}.source-note{display:flex;align-items:flex-start;gap:13px;border:1px solid #dedfcb;border-radius:13px;padding:16px 20px;background:#f1f1e7}.source-note strong{font-weight:650;font-size:14px;color:var(--green)}.source-note p{font-size:13px;color:#746b5e;margin:3px 0 0}.note-mark{width:22px;height:22px;margin-top:2px;border:1px solid #91a08b;border-radius:50%;display:grid;place-items:center;font:600 13px Arial,sans-serif;flex-shrink:0;color:var(--green)}
input,select,button{font:inherit}button{cursor:pointer}a,button,input,select,summary{touch-action:manipulation}input,select{width:100%;height:47px;background:var(--paper);border:1px solid #d8cbbc;border-radius:9px;padding:9px 13px;color:var(--ink)}input::placeholder{color:#998e82;font-size:14px}input:focus-visible,select:focus-visible,button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #e8b597;outline-offset:3px}.quiet-button{height:47px;border:1px solid var(--line);border-radius:9px;background:transparent;color:var(--muted);padding:8px 17px}.quiet-button:hover{color:var(--accent);background:var(--soft)}.system-picker{display:flex;gap:10px;flex-wrap:wrap;margin:25px 0 20px}.system-button{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;padding:11px 16px;background:var(--paper);color:#6a5e51;font-size:14px}.system-button:hover{background:#fff5e7}.system-button[aria-pressed=true]{border-color:#bb704a;background:#f8e8d8;color:#963d1d;box-shadow:inset 0 -2px 0 #b34a21}.system-button small{display:grid;place-items:center;min-width:23px;height:23px;border-radius:20px;background:#efe7dc;color:#87715e;font-size:11px;padding:1px 7px}.system-button[aria-pressed=true] small{background:#eed1b8;color:#8b421f}.pet-filters{display:flex;align-items:flex-end;gap:14px}.search-field{flex:1;min-width:0}.source-field{width:270px}.pet-filters label{display:block;font-size:13px;font-weight:600;margin-bottom:7px}.system-overview{margin-top:18px;padding:17px 20px;border:1px solid var(--line);border-radius:11px;background:#f5eee3;font-size:13px;color:#746351}.system-overview h2{font-size:16px;color:var(--ink);margin:0 0 3px}.system-overview p{margin:5px 0}.system-overview ul{margin:8px 0 0;padding-left:20px}.system-overview li+li{margin-top:4px}.results-heading{display:flex;justify-content:space-between;gap:14px;align-items:center;margin:20px 0 11px;font-size:12px;color:var(--muted)}.results-heading p{margin:0}.recipe-list{display:grid;gap:13px}.recipe-card{border:1px solid var(--line);border-radius:13px;background:var(--paper);overflow:hidden;scroll-margin-top:20px}.recipe-card>summary{position:relative;display:flex;align-items:center;gap:19px;list-style:none;padding:18px 50px 18px 21px;cursor:pointer}.recipe-card>summary::-webkit-details-marker{display:none}.recipe-card>summary:after{position:absolute;right:22px;top:50%;content:"+";transform:translateY(-50%);color:#99785e;font:400 23px Arial,sans-serif}.recipe-card[open]>summary:after{content:"−"}.recipe-card>summary:hover{background:#fcf5eb}.recipe-card[open]>summary{background:#fcf8f1;border-bottom:1px solid var(--line)}.source-pet{display:flex;align-items:center;gap:13px;flex:0 1 310px;min-width:0}.source-icon{display:grid;place-items:center;background:#f2eadf;border:1px solid #e7dbcb;border-radius:12px;width:56px;height:56px;flex-shrink:0}.source-icon img{width:42px;height:42px;object-fit:contain;image-rendering:auto}.source-icon .image-fallback{font-size:11px;color:#8b7b6b}.source-text{min-width:0}.source-text h3{margin:2px 0 1px;font-size:16px;line-height:1.5;font-weight:650;overflow-wrap:anywhere}.source-text small,.recipe-id{display:block;color:var(--muted);font-size:11px}.recipe-id{letter-spacing:.3px}.summary-arrow{font-size:21px;color:#b29c84;flex-shrink:0}.summary-results{display:flex;gap:7px;align-items:center;flex-wrap:wrap;min-width:0;flex:1}.result-mini{display:inline-flex;align-items:center;gap:6px;color:#665443;background:#f4ecdf;border:1px solid #eaddc9;border-radius:7px;padding:5px 8px;font-size:12px;line-height:1.5;max-width:100%;overflow-wrap:anywhere}.result-mini img{width:24px;height:24px;object-fit:contain;flex-shrink:0}.more-results{font-size:11px;color:var(--muted);padding-inline:3px}.recipe-body{padding:22px}.recipe-title{font-size:14px;font-weight:600;color:#735844;margin:0 0 15px}.recipe-columns{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.6fr);gap:26px}.recipe-columns h4,.recipe-conditions h4{font-size:14px;margin:0 0 10px;font-weight:650}.output-list{display:grid;gap:8px}.output-item{display:flex;align-items:center;gap:10px;background:#f3f5ed;border:1px solid #e0e4d5;border-radius:10px;padding:11px}.output-item .item-art{background:#fffdfa;border-color:#e1e2d6}.output-item .output-text{flex:1;min-width:0}.output-item a{display:block;font-size:13px;line-height:1.5;color:#385b45;overflow-wrap:anywhere}.item-code{display:block;font-size:10px;color:var(--muted);margin-top:2px}.chance{color:#355c42;font:650 16px/1.5 Arial,sans-serif;white-space:nowrap;margin-left:auto}.chance-label{display:block;color:var(--muted);font-size:11px}.output-note,.material-note{font-size:12px;color:var(--muted);line-height:1.8;margin:10px 0 0}.material-mode{display:inline-block;padding:3px 8px;border-radius:5px;background:#f5eadc;color:#906031;font-size:11px;font-weight:500;margin-left:7px}.material-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.material-item{display:flex;align-items:center;gap:8px;min-width:0;padding:9px;border:1px solid var(--line);border-radius:8px;background:#fdfaf5;color:#5d5143}.material-item:hover{border-color:#d0b596;background:#fff4e4;text-decoration:none}.material-item .item-text{min-width:0;overflow-wrap:anywhere;font-size:12px;line-height:1.5}.material-item .quantity{display:block;font-size:11px;font-weight:600;color:#a75d2f;margin-top:3px}.item-art{display:grid;place-items:center;flex-shrink:0;width:35px;height:35px;border:1px solid #e9dfd2;background:#f4eee4;border-radius:7px}.item-art img{width:28px;height:28px;object-fit:contain}.image-fallback{font-size:10px;color:#aa9882}.recipe-conditions{margin-top:19px;border-top:1px solid var(--line);padding-top:15px;color:#756553;font-size:12px}.recipe-conditions ul{margin:6px 0 0;padding-left:20px}.recipe-conditions li+li{margin-top:4px}.fee{color:#836038;font-weight:600}.recipe-notes{margin:12px 0 0;padding:11px 14px;background:#f7f0e3;border-radius:8px;color:#806747;font-size:12px}.recipe-notes p{margin:0}.recipe-notes p+p{margin-top:5px}.empty-list,.loading-note{padding:35px 24px;border:1px dashed #d8c8b2;border-radius:13px;color:var(--muted);background:var(--paper);text-align:center}.empty-list h3{font-size:16px;font-weight:600;color:#6c5945;margin:0 0 5px}.empty-list p{font-size:13px;margin:0}.pagination{display:flex;align-items:center;justify-content:center;gap:12px;margin:23px 0 0;font-size:12px;color:var(--muted)}.pagination button{min-width:84px;min-height:40px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:#80644c;padding:8px 13px;font-size:12px}.pagination button:hover:not(:disabled){background:var(--soft);border-color:#cfb498}.pagination button:disabled{opacity:.45;cursor:default}.reading-note{font-size:13px;color:var(--muted);margin-top:25px;border:1px solid var(--line);border-radius:11px;background:var(--paper);padding:14px 18px}.reading-note summary{font-weight:600;cursor:pointer;color:#6b5e50}.reading-note p{margin:12px 0}.reading-note div{max-width:900px}footer{border-top:1px solid var(--line);padding-block:22px;display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--muted)}.skip-link{position:absolute;top:-100px;background:var(--paper);padding:10px;z-index:5}.skip-link:focus{top:4px}.noscript-note{padding:24px}[hidden]{display:none!important}
.output-name{display:block;font-size:13px;line-height:1.5;color:#385b45;font-weight:600}.output-item.is-unavailable{background:#f1eeea;border-color:#e0d9d0}.output-item.is-unavailable a,.output-item.is-unavailable .output-name,.output-item.is-unavailable .chance{color:#8a8177}.output-item.is-unavailable .item-art{background:#f7f4ef;border-color:#e2dbd2}.output-item.is-unavailable img{opacity:.6}.material-example{margin-top:16px;padding:12px 14px;border:1px dashed #d5bea0;border-radius:9px;background:#fbf4e8}.material-example>summary{font-size:13px;font-weight:600;color:#8c592e;cursor:pointer}.material-example>p{font-size:11px;line-height:1.8;color:#8a7359;margin:10px 0}.material-example .material-list{margin-top:10px}.availability-field{width:175px;flex-shrink:0}.availability-badge{display:inline-block;font-size:10px;padding:2px 7px;border:1px solid #ddc8a6;border-radius:4px;margin-top:6px;line-height:1.5;background:#f6eedc;color:#977036}.availability-badge.is-shadowed{background:#f3e7e2;border-color:#dec2b6;color:#97604a}.availability-note{font-size:12px;color:#866343;background:#f7efdf;border-left:3px solid #c8a874;border-radius:4px;padding:11px 14px;margin-bottom:18px}
.output-item{flex-wrap:wrap}.chance-description{display:block;font-size:11px;font-weight:400;line-height:1.7;color:#77816d;margin-top:3px;overflow-wrap:anywhere}.output-helpers{display:grid;gap:8px;flex-basis:100%;width:100%;border-top:1px solid #dfe3d6;padding-top:9px;margin-top:2px}.helper-title{display:block;font-size:10px;font-weight:600;color:#788064;margin-bottom:5px}.helper-options{display:flex;flex-wrap:wrap;gap:5px}.helper-chip{display:flex;align-items:center;gap:5px;max-width:100%;border:1px solid #dde0d2;border-radius:6px;background:#fffdf7;padding:5px 7px;font-size:10px;line-height:1.6;overflow-wrap:anywhere}.output-item .helper-chip{display:flex;font-size:10px;line-height:1.6}.helper-chip img{width:22px;height:22px;object-fit:contain;flex-shrink:0}.helper-chip small{font-size:9px;color:#938777;margin-left:4px}.no-helper{font-size:11px;color:#938777}.unavailable-conditions{margin-top:17px;border:1px solid #e0c9b5;border-radius:9px;padding:12px 14px;background:#f8eee4;color:#8c6344}.unavailable-conditions>summary{font-size:12px;font-weight:600;cursor:pointer}.unavailable-conditions>p{font-size:11px;margin:9px 0}.unavailable-condition{border-top:1px solid #e7d5c5;padding-top:10px;margin-top:10px}.unavailable-condition>strong{font-size:11px;font-weight:500}.unavailable-condition .output-helpers{border:0;margin-top:7px;padding:0}.unavailable-condition .helper-title{color:#9d7b5d}.unavailable-condition .helper-chip{color:#8c6344;border-color:#e2cfbb}
@media(max-width:1000px){.source-field{width:210px}.pet-filters{flex-wrap:wrap}.search-field{flex-basis:100%}.source-field{flex:1}.material-list{grid-template-columns:repeat(2,minmax(0,1fr))}.source-pet{flex-basis:260px}.summary-results .result-mini:nth-child(3){display:none}.recipe-columns{grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr);gap:19px}}
.output-helper-details{flex-basis:100%;width:100%;border-top:1px solid #dfe3d6;margin-top:2px;padding-top:7px}.output-helper-details>summary{font-size:10px;color:#6a7958;cursor:pointer}.output-helper-details .output-helpers{border:0;margin-top:7px;padding-top:0}
.system-catalog{margin-top:13px;border-top:1px solid #e0d3c1;padding-top:11px}.system-catalog>summary{font-weight:600;font-size:12px;color:#84623e;cursor:pointer}.system-catalog>summary>span{font-size:11px;font-weight:400;margin-left:7px;color:#9a8267}.system-catalog>p{font-size:11px;color:#947c63;margin:9px 0}.catalog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}.configured-item{display:flex;gap:9px;align-items:center;min-width:0;padding:10px;border:1px solid #e1d5c3;border-radius:8px;background:#fffaf1;color:#5c5844}.configured-item:hover{text-decoration:none;border-color:#c9b795}.configured-item>span:last-child{min-width:0;overflow-wrap:anywhere}.configured-item strong{display:block;font-size:12px;line-height:1.5;font-weight:500}.configured-item small{display:block;font-size:10px;color:#9b8c77;margin-top:3px}.configured-state{display:block;font-size:10px;color:#60794c;margin-top:4px}.configured-item.is-unavailable{background:#eee8df;color:#8d8071}.configured-item.is-unavailable .configured-state{color:#9b7b61}.configured-item.is-unavailable img{opacity:.55}
@media(max-width:700px){.shell{width:calc(100% - 32px)}.header-inner{padding-block:15px;gap:16px;flex-wrap:wrap}.site-header nav{gap:20px;font-size:13px}.brand strong{font-size:15px}.brand img{width:36px;height:36px}.brand small{font-size:9px}h1{font-size:28px}.page-heading{margin:18px 0}.page-heading p{font-size:13px}.data-badge{display:none}.source-note{padding:14px;gap:10px}.source-note p{font-size:12px}.system-picker{gap:8px;margin:20px 0 17px}.system-button{padding:9px 12px;gap:8px;font-size:12px}.system-button small{height:20px;font-size:10px}.pet-filters{flex-wrap:wrap;gap:12px}.search-field{flex-basis:100%}.source-field{flex:1;width:auto;min-width:0}.quiet-button{padding-inline:13px}.system-overview{padding:14px;font-size:12px}.system-overview h2{font-size:15px}.results-heading span{display:none}.recipe-card>summary{padding:15px 38px 15px 14px;gap:10px;align-items:flex-start;flex-wrap:wrap}.recipe-card>summary:after{right:14px;top:41px}.source-pet{flex:1 1 100%;gap:10px}.source-icon{width:46px;height:46px;border-radius:9px}.source-icon img{width:35px;height:35px}.source-text h3{font-size:15px}.summary-arrow{display:none}.summary-results{margin-left:56px;gap:5px}.result-mini{font-size:11px;padding:4px 6px}.result-mini img{width:20px;height:20px}.summary-results .result-mini:nth-child(3){display:inline-flex}.recipe-body{padding:16px}.recipe-columns{grid-template-columns:1fr;gap:20px}.material-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.material-item{padding:8px;gap:6px}.material-item .item-text{font-size:11px}.item-art{width:30px;height:30px;border-radius:6px}.item-art img{width:25px;height:25px}.output-item a{font-size:12px}.chance{font-size:15px}.recipe-conditions{margin-top:17px}.pagination{gap:9px}.pagination button{min-width:78px}.reading-note{font-size:12px;padding:13px 15px}footer{flex-direction:column;gap:7px}}
@media(max-width:700px){.source-field{flex-basis:calc(100% - 187px)}.availability-field{width:175px}.quiet-button{height:37px;font-size:12px}.availability-note{font-size:11px;padding:10px 12px}}
@media(max-width:700px){.catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.configured-item{padding:8px;gap:6px}.configured-item strong{font-size:11px}}
@media(max-width:400px){.source-field,.availability-field{flex-basis:100%;width:100%}.system-button{flex:1;justify-content:center}.system-button:first-child{flex-basis:100%}.material-item{gap:5px;padding:7px}.item-art{width:28px;height:28px}.item-art img{width:24px;height:24px}}
@media(max-width:400px){.catalog-grid{grid-template-columns:1fr}}