.vl-craft {
  --ink:#171516; --ink-deep:#100f11; --cream:#ebdfd2;
  --muted:#b4a59d; --gold:#b69367; --line:#aa846b3b;
  --red:#782735; --red-light:#e2a2a6;
  position:fixed;inset:0;z-index:10;display:grid;place-items:center;pointer-events:none;
  color:var(--cream);font:500 14px/1.45 "Chakra Petch","Noto Sans Thai",sans-serif;
}
.vl-craft *, .craft-demo * {box-sizing:border-box}
.vl-craft [hidden] {display:none!important}
.vl-craft button,.craft-demo button,.craft-demo select {font:inherit}
.vl-craft button {cursor:pointer}
.vl-craft button:disabled {cursor:default;opacity:.48}
.vl-craft button:focus-visible,.vl-craft input:focus-visible {outline:2px solid var(--gold);outline-offset:2px}
.vl-craft .craft-frame {
  pointer-events:auto;width:min(940px,94vw);height:min(586px,calc(100dvh - 100px));
  display:grid;grid-template-rows:auto minmax(0,1fr) auto;
  position:relative;isolation:isolate;overflow:hidden;border-radius:30px 30px 21px 21px;
  background:radial-gradient(ellipse at 24% 45%,#66392e6b,transparent 52%),radial-gradient(ellipse at 105% 0%,#632b3945,transparent 64%),linear-gradient(145deg,#1c1719,#110f14 70%);
  box-shadow:0 30px 100px #000d,inset 0 1px #b6936754;animation:craft-enter .3s ease-out;
}
.vl-craft .craft-frame::after {content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;background:radial-gradient(ellipse at 24% 49%,#ebaf5b40,transparent 59%)}
.vl-craft[data-craft-motion=success] .craft-frame::after {animation:craft-afterglow .85s ease-out}
.vl-craft .craft-head,.vl-craft .craft-foot {display:flex;align-items:center;gap:14px;padding:14px 23px}
.vl-craft .craft-head {background:linear-gradient(180deg,#1a1419bd,transparent)}
.vl-craft .brand {color:var(--gold);font-size:11px;font-weight:700;letter-spacing:.19em}
.vl-craft h1,.vl-craft h2,.vl-craft p,.vl-craft dl {margin:0}
.vl-craft h1 {font-size:24px;line-height:1.35}
.vl-craft h2 {font-size:22px;overflow-wrap:anywhere;line-height:1.35}
.vl-craft .station {margin-left:auto;color:#dcc29f;text-align:right;overflow-wrap:anywhere;font-size:12px;background:#aa846b11;border-radius:999px;padding:6px 12px}
.vl-craft .craft-button {color:var(--cream);border:1px solid var(--line);border-radius:999px;background:#221b21;padding:7px 11px;min-height:34px;transition:background .16s,border-color .16s,box-shadow .16s}
.vl-craft .craft-button:hover:not(:disabled) {border-color:var(--gold);background:#30241f}
.vl-craft .close {font-size:21px;width:36px;padding:0;flex:none}
.vl-craft .craft-workspace {display:grid;grid-template-rows:auto minmax(0,1fr) auto;min-width:0;min-height:0}
.vl-craft .categories,.vl-craft .recipes {display:flex;overflow-x:auto;gap:7px;scrollbar-width:thin;scrollbar-color:#74504a transparent}
.vl-craft .categories {align-items:center;padding:4px 23px 5px;gap:4px}
.vl-craft .recipes {align-items:stretch;padding:7px 23px 10px;scroll-snap-type:x proximity;background:linear-gradient(90deg,transparent,#0b090d6b,transparent)}
.vl-craft .recipes:focus-visible {outline:1px solid var(--gold);outline-offset:-2px}
.vl-craft .category,.vl-craft .recipe {width:100%;min-width:0;border:1px solid transparent;border-radius:999px;background:none;color:var(--cream);text-align:left;overflow-wrap:anywhere}
.vl-craft .category {display:flex;align-items:center;gap:9px;width:auto;flex:none;padding:5px 10px;white-space:nowrap}
.vl-craft .category span:last-child {color:var(--gold);font-size:12px}
.vl-craft .recipe {display:grid;grid-template-rows:38px minmax(27px,1fr) auto;justify-items:center;align-items:center;gap:4px;flex:1 0 116px;max-width:151px;padding:5px 5px 7px;text-align:center;scroll-snap-align:start;border-radius:42px 42px 14px 14px;transition:background .2s,border-color .2s,color .2s}
.vl-craft .recipe>span:nth-child(2) {font-size:12px;line-height:1.3}
.vl-craft .category:hover,.vl-craft .recipe:hover {border-color:var(--line);background:#b6936711}
.vl-craft [aria-pressed=true] {background:#6726389c;border-color:#aa566275}
.vl-craft .recipe[aria-pressed=true] {background:radial-gradient(ellipse at 50% 35%,#86404b65,transparent 83%);border-color:#aa566268;box-shadow:inset 0 -2px #ad4b597d}
.vl-craft .recipe small {display:block;color:var(--muted);font-size:11px}
.vl-craft .recipe em {font-style:normal;color:#d7b382;font-size:10px}
.vl-craft .recipe [data-status=locked],.vl-craft .missing {color:var(--red-light)}
.vl-craft .item-art {display:grid;place-items:center;min-width:0;color:var(--gold);background:radial-gradient(ellipse,#99764b21,transparent 70%)}
.vl-craft .item-art img {display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 5px 8px #0009)}
.vl-craft .recipe .item-art {width:38px;height:38px;border-radius:50%;background:#d4aa7420;transition:transform .21s ease-out}
.vl-craft .recipe .item-art img {width:77%;height:77%;border-radius:8px}
.vl-craft .recipe:hover:not(:disabled) .item-art {transform:translateY(-3px)}
.vl-craft .material .item-art {height:25px}
.vl-craft .details {min-width:0;overflow:auto;padding:5px 23px 10px;scrollbar-width:thin;scrollbar-color:#74504a transparent}
.vl-craft .work-order {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.37fr);align-items:center;gap:23px}
.vl-craft .detail-head {display:grid;align-content:center;justify-items:center;gap:6px;min-width:0;text-align:center;padding:3px 10px 5px}
.vl-craft .ritual-stage {position:relative;isolation:isolate;display:grid;place-items:center;width:158px;height:144px}
.vl-craft .ritual-ring,.vl-craft .ritual-orbit {position:absolute;inset:4px auto;width:134px;aspect-ratio:1;border-radius:50%;pointer-events:none}
.vl-craft .ritual-ring {background:radial-gradient(circle,#edaa5552,transparent 65%);border:1px solid #d3a37357;box-shadow:0 0 27px #c4874726,inset 0 0 22px #af743b30}
.vl-craft .ritual-ring::after {content:'';position:absolute;inset:5px;border:1px solid #e3af6342;border-radius:50%}
.vl-craft .ritual-orbit {inset:0 auto;width:144px;border:1px dashed #d1a3735c}
.vl-craft .ritual-orbit::before,.vl-craft .ritual-orbit::after {content:'';position:absolute;width:5px;height:5px;background:#d2a46e;transform:rotate(45deg);box-shadow:0 0 10px #e2b171a8}
.vl-craft .ritual-orbit::before {left:3%;top:65%}
.vl-craft .ritual-orbit::after {right:3%;top:32%}
.vl-craft .detail-head .item-art {z-index:1;width:90px;height:90px;border-radius:50%;background:transparent;font-size:29px}
.vl-craft .detail-head img {width:70%;height:70%;border-radius:10px;filter:drop-shadow(0 9px 12px #000b)}
.vl-craft .ritual-reveal .item-art {animation:craft-art-in .46s cubic-bezier(.2,.8,.25,1) both}
.vl-craft[data-craft-motion=running] .ritual-orbit {animation:craft-orbit 5s linear infinite}
.vl-craft[data-craft-motion=running] .ritual-ring::before,.vl-craft[data-craft-motion=waiting] .ritual-ring::before {
  content:'';position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(#ecc38c var(--craft-progress,0%),#130e12 0);
  mask-image:radial-gradient(transparent 0 65%,#000 66% 100%);
}
.vl-craft .description {margin-top:4px;color:var(--muted);overflow-wrap:anywhere;font-size:13px}
.vl-craft .ingredients {min-width:0;padding:10px 0}
.vl-craft .ingredient-heading {display:flex;justify-content:space-between;gap:8px;color:#d1b093;font-size:12px;margin-bottom:6px}
.vl-craft .ingredient-heading span {color:var(--muted)}
.vl-craft .materials {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;margin-bottom:9px}
.vl-craft .material {display:grid;align-items:center;grid-template-columns:25px minmax(0,1fr) auto;gap:6px;background:#0e0c0f8a;padding:5px 9px;border-radius:16px;min-height:40px;font-size:12px}
.vl-craft .material b {white-space:nowrap;font-variant-numeric:tabular-nums}
.vl-craft .material span {overflow-wrap:anywhere}
.vl-craft .facts {display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:8px 0;border-block:1px solid var(--line)}
.vl-craft .facts dt {color:var(--muted);font-size:11px}
.vl-craft .facts dd {margin:0;color:#ebcda4;font-size:17px;font-variant-numeric:tabular-nums}
.vl-craft .craft-actions {display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px;padding:6px 9px 6px 12px;background:linear-gradient(90deg,#20161b50,#0f0b11a8);border-radius:24px}
.vl-craft .quantity {display:flex;align-items:center;gap:5px}
.vl-craft .quantity input {width:48px;min-height:34px;padding:3px;color:var(--cream);font:inherit;text-align:center;border:1px solid var(--line);background:var(--ink-deep);border-radius:999px;appearance:textfield}
.vl-craft .quantity input::-webkit-inner-spin-button {appearance:none}
.vl-craft .primary {margin-left:auto;background:linear-gradient(120deg,#943847,#662238);border-color:#bf6c69;min-width:122px;font-weight:700}
.vl-craft .primary:hover:not(:disabled) {background:#913848;box-shadow:0 0 18px #a13c535b}
.vl-craft .reason {margin-top:7px;color:var(--red-light);font-size:12px;overflow-wrap:anywhere}
.vl-craft .reason:empty {display:none}
.vl-craft .craft-foot {padding-block:8px;min-height:48px;background:#110e13a6}
.vl-craft .feedback,.vl-craft .progress {flex:1;min-width:0;overflow-wrap:anywhere}
.vl-craft .feedback {color:#cdb7a6;font-size:13px}
.vl-craft .feedback[data-tone=fail] {color:var(--red-light)}
.vl-craft .feedback[data-tone=success] {color:#ecd0a1}
.vl-craft .progress-label {display:flex;justify-content:space-between;gap:10px}
.vl-craft .track {height:5px;margin-top:6px;background:#332829;overflow:hidden;border-radius:999px}
.vl-craft .fill {height:100%;width:0;background:linear-gradient(90deg,#974957,#ceac79);transition:width .09s linear}
.vl-craft kbd {font:inherit;color:var(--muted);font-size:11px;white-space:nowrap}
.craft-demo {display:flow-root;margin:0;min-height:100vh;color:#ebdfd2;background:linear-gradient(#140c11a8,#100d11c9),url('./assets/frontier.jpg') center/cover fixed;font:500 13px/1.4 "Chakra Petch","Noto Sans Thai",sans-serif}
.demo-controls {position:relative;z-index:12;margin:8px auto;width:fit-content;max-width:96vw;display:flex;align-items:center;gap:7px 12px;flex-wrap:wrap;padding:6px 10px;background:#151315;border:1px solid #aa846b53;border-radius:6px}
.demo-controls select,.demo-controls button {color:inherit;background:#252023;border:1px solid #aa846b53;border-radius:4px;padding:3px 6px}
@keyframes craft-enter {from{opacity:0;transform:translateY(5px)}to{opacity:1}}
@keyframes craft-orbit {to{transform:rotate(1turn)}}
@keyframes craft-art-in {from{opacity:.35;transform:translateY(7px) scale(.86)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes craft-afterglow {0%{opacity:0}25%{opacity:1}100%{opacity:0}}
@media (max-width:680px) {
  .vl-craft .craft-frame {height:calc(100dvh - 110px);margin-top:54px}
  .vl-craft .categories,.vl-craft .recipes,.vl-craft .details {padding-inline:10px}
  .vl-craft .work-order {grid-template-columns:minmax(0,1fr);gap:2px}
  .vl-craft .detail-head {grid-template-columns:76px minmax(0,1fr);align-items:center;justify-items:start;text-align:left;padding:5px 10px}
  .vl-craft .ritual-stage {width:72px;height:72px}
  .vl-craft .ritual-ring {width:62px}
  .vl-craft .ritual-orbit {width:70px}
  .vl-craft .detail-head .item-art {width:54px;height:54px}
  .vl-craft .detail-head h2 {font-size:18px}
  .vl-craft .materials {grid-template-columns:minmax(0,1fr)}
  .vl-craft .craft-head,.vl-craft .craft-foot {padding:7px 11px}
}
@media (prefers-reduced-motion:reduce) {.vl-craft *,.vl-craft *::before,.vl-craft *::after{animation:none!important;transition:none!important}}