.vl-craft {
  --ink:#202024; --ink-deep:#101012; --cream:#eee6df;
  --muted:#b1aaad; --gold:#b49364; --line:#ffffff22;
  --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(1000px,94vw);height:min(552px,calc(100dvh - 100px));
  display:grid;grid-template-rows:auto minmax(0,1fr);
  position:relative;isolation:isolate;overflow:hidden;border-radius:42px 42px 30px 30px;
  background:radial-gradient(ellipse at 50% 46%,#343438 0,transparent 44%),linear-gradient(130deg,#202023,#101012 74%);
  box-shadow:0 30px 100px #000d,inset 0 1px #ffffff1c;animation:craft-enter .3s ease-out;
}
.vl-craft .craft-head {display:flex;align-items:center;gap:14px;padding:19px 29px 7px}
.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:#d4ced0;text-align:right;overflow-wrap:anywhere;font-size:12px;background:#ffffff09;border-radius:999px;padding:6px 12px}
.vl-craft .craft-button {color:var(--cream);border:1px solid var(--line);border-radius:999px;background:var(--ink);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:#2a292d}
.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:#59575b transparent}
.vl-craft .categories {align-items:center;padding:7px 29px 5px;gap:7px}
.vl-craft .recipes {align-items:stretch;padding:10px 24px 15px;scroll-snap-type:x proximity;background:linear-gradient(0deg,#101012 0%,#171719 100%);border-top:1px solid #ffffff10}
.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:44px minmax(27px,1fr) auto;justify-items:center;align-items:center;gap:5px;flex:1 0 112px;max-width:151px;padding:3px 5px 6px;text-align:center;scroll-snap-align:start;border-radius:24px;transition:background .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 {background:#ffffff0a}
.vl-craft [aria-pressed=true] {background:#632a36a3;border-color:#9b465670}
.vl-craft .recipe[aria-pressed=true] {background:radial-gradient(ellipse at 50% 34%,#682f3c46,transparent 73%);border-color:transparent}
.vl-craft .recipe[aria-pressed=true] .item-art {box-shadow:0 0 0 1px #a94d60,0 0 13px #98475947}
.vl-craft .craft-sound {flex:none;padding-inline:10px;font-size:12px}
.vl-craft .craft-sound[aria-pressed=true] {color:#e7c696;background:#b4936412;border-color:#b493644a}
.vl-craft .craft-sound[aria-pressed=false] {color:var(--muted);text-decoration:line-through}
.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:42px;height:42px;border-radius:50%;background:radial-gradient(#343438,#1a1a1d);transition:transform .21s ease-out,box-shadow .21s}
.vl-craft .recipe .item-art img {width:81%;height:81%;border-radius:50%}
.vl-craft .recipe:hover:not(:disabled) .item-art {transform:translateY(-3px)}
.vl-craft .recipes.single-recipe {align-items:center;padding-block:5px 8px}
.vl-craft .single-recipe .recipe {
  grid-template: minmax(36px,auto) / 36px minmax(0,1fr) auto;
  justify-items:start;gap:9px;flex:0 1 256px;max-width:256px;
  padding:3px 11px 3px 4px;text-align:left;
}
.vl-craft .single-recipe .recipe[aria-pressed=true] {
  background:linear-gradient(90deg,#682f3c46,transparent);
}
.vl-craft .single-recipe .item-art {width:34px;height:34px}
.vl-craft .material .item-art {height:25px}
.vl-craft .detail-space {position:relative;isolation:isolate;display:grid;grid-template-rows:minmax(0,1fr);min-width:0;min-height:0;overflow:hidden}
.vl-craft .details {z-index:1;min-width:0;min-height:0;overflow:auto;padding:6px 29px;scrollbar-width:thin;scrollbar-color:#59575b transparent}
.vl-craft .seal-watermark {
  position:absolute;z-index:-1;left:50%;top:50%;width:113.55%;aspect-ratio:1;transform:translate(-50%,-50%);
  pointer-events:none;
  color:#d7b988;opacity:.22;border:1px solid currentColor;border-radius:50%;
}
.vl-craft .seal-watermark::before {
  content:'';position:absolute;inset:4px;border-radius:50%;border:1px dashed currentColor;
}
.vl-craft .seal-watermark::after {
  content:'';position:absolute;inset:11px;border:1px solid currentColor;border-radius:50%;opacity:.46;
}
.vl-craft .seal-watermark span {
  position:absolute;left:50%;bottom:1.5%;transform:translateX(-50%);padding:0 7px;background:#202023;
  font-size:13px;line-height:1.2;font-weight:700;letter-spacing:.27em;text-indent:.27em;
}
.vl-craft[data-craft-motion=success] .seal-watermark {animation:craft-seal-flash .72s ease-out}
.vl-craft .craft-transfer-light {position:absolute;z-index:2;width:0;height:0;pointer-events:none}
.vl-craft .craft-transfer-light>span {
  position:absolute;left:0;top:-.5px;height:1px;transform-origin:right center;
  background:linear-gradient(90deg,transparent,#c09a63 55%,#f4d29c);
  filter:drop-shadow(0 0 2px #dfae67b0);
}
.vl-craft .craft-transfer-light>span::after {
  content:'';position:absolute;right:0;top:-1px;width:3px;height:3px;border-radius:50%;
  background:#f4d29c;box-shadow:0 0 5px #eac082;
}
.vl-craft .work-order {display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,.95fr) minmax(0,1fr);grid-template-areas:"intro art materials";align-items:center;gap:16px;min-height:100%}
.vl-craft .detail-head {grid-area:intro;display:grid;align-content:center;gap:7px;min-width:0}
.vl-craft .recipe-info {display:grid;gap:7px;min-width:0}
.vl-craft .detail-head h2 {font-size:clamp(23px,2.6vw,31px);letter-spacing:-.018em}
.vl-craft .ritual-stage {grid-area:art;position:relative;isolation:isolate;display:grid;place-items:center;justify-self:center;width:min(100%,236px);aspect-ratio:1}
.vl-craft .ritual-ring,.vl-craft .ritual-orbit,.vl-craft .ritual-axis {position:absolute;inset:8%;border-radius:50%;pointer-events:none}
.vl-craft .ritual-ring {background:radial-gradient(circle,#a4a4a729,transparent 71%);border:1px solid #c39c6b76;box-shadow:0 0 32px #0006,inset 0 0 20px #0004}
.vl-craft .ritual-ring::after {content:'';position:absolute;inset:5px;border:1px solid #e3af6342;border-radius:50%}
.vl-craft .ritual-orbit {inset:1%;border:1px dashed #d1a37368}
.vl-craft .ritual-axis {inset:21% -5%;z-index:-1;transform:rotate(-20deg);border:1px solid #c38d5759;box-shadow:0 0 22px #c38d5718}
.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 .ritual-art {z-index:1;width:53%;aspect-ratio:1}
.vl-craft .ritual-stage .item-art {width:100%;height:100%;border-radius:50%;background:#222226;font-size:29px;box-shadow:0 0 0 1px #ffffff1c,0 8px 26px #0008;animation:craft-art-in .46s cubic-bezier(.2,.8,.25,1) both}
.vl-craft .ritual-stage img {width:100%;height:100%;border-radius:50%;filter:drop-shadow(0 9px 12px #0007)}
.vl-craft[data-craft-motion=running] .ritual-orbit {animation:craft-orbit 5s linear infinite}
@property --arthan-ring-result-fill {
  syntax:"<percentage>";
  inherits:false;
  initial-value:100%;
}
.vl-craft[data-craft-motion=running] .ritual-ring::before,
.vl-craft[data-craft-motion=waiting] .ritual-ring::before,
.vl-craft[data-craft-motion=success] .ritual-ring::before,
.vl-craft[data-craft-motion=failure] .ritual-ring::before {
  content:'';position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(#ecc38c var(--craft-progress,0%),transparent 0);
  mask-image:radial-gradient(transparent 0 65%,#000 66% 100%);
}
.vl-craft[data-craft-motion=success] .ritual-ring::before {
  background:#ecc38c;animation:craft-ring-contract .42s cubic-bezier(.5,0,.75,1) both;
}
.vl-craft[data-craft-motion=failure] .ritual-ring::before {
  background:conic-gradient(#bc7279 var(--arthan-ring-result-fill,100%),transparent 0);
  animation:craft-ring-extinguish .58s ease-in both;
}
.vl-craft[data-craft-motion=success] .ritual-art {
  animation:craft-item-pop .72s cubic-bezier(.24,.65,.35,1) both;
}
.vl-craft .craft-reward {
  position:absolute;z-index:2;left:50%;top:73%;pointer-events:none;
  padding:3px 10px;border:1px solid #c39c6b7a;border-radius:999px;background:#19151a;
  color:#f1cd97;font-size:14px;font-weight:700;white-space:nowrap;
  font-variant-numeric:tabular-nums;animation:craft-reward-rise .98s ease-out both;
}
.vl-craft .description {margin-top:4px;color:var(--muted);overflow-wrap:anywhere;font-size:13px}
.vl-craft .ingredients {grid-area:materials;min-width:0;padding:5px 0}
.vl-craft .ingredient-heading {display:flex;justify-content:space-between;gap:8px;color:var(--cream);font-size:13px;margin-bottom:6px}
.vl-craft .ingredient-heading span {color:var(--muted)}
.vl-craft .materials {display:grid;gap:3px}
.vl-craft .material {display:grid;align-items:center;grid-template-columns:28px minmax(0,1fr) auto;gap:9px;padding:6px 2px;min-height:38px;font-size:13px;border-bottom:1px solid #ffffff19}
.vl-craft .material img {border-radius:50%}
.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}
.vl-craft .facts dt {color:var(--muted);font-size:11px}
.vl-craft .facts dd {margin:0;color:var(--cream);font-size:17px;font-variant-numeric:tabular-nums}
.vl-craft .craft-actions {display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.vl-craft .craft-submit {flex:1 0 100%;display:flex;align-items:center;gap:10px;margin-top:4px}
.vl-craft .craft-submit [data-output] {color:#d4ced0}
.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 {background:linear-gradient(120deg,#8e3445,#6d2434);border-color:#ae5865;min-width:122px;font-weight:700}
.vl-craft .primary:hover:not(:disabled) {background:#913848;box-shadow:0 0 18px #a13c535b}
.vl-craft .cancel-craft {min-width:122px;color:var(--cream);border-color:#a789635e}
.vl-craft .reason {margin-top:7px;color:var(--red-light);font-size:12px;overflow-wrap:anywhere}
.vl-craft .reason:empty {display:none}
.vl-craft .feedback {color:#cdb7a6;font-size:12px;overflow-wrap:anywhere}
.vl-craft .feedback:empty {display:none}
.vl-craft .feedback[data-tone=fail] {color:var(--red-light)}
.vl-craft .feedback[data-tone=success] {color:#ecd0a1}
.vl-craft .progress {
  position:absolute;z-index:2;left:50%;top:77%;transform:translateX(-50%);min-width:54px;
  padding:2px 8px;text-align:center;color:#efcc94;font-size:15px;font-variant-numeric:tabular-nums;
  border:1px solid #c39c6b5e;border-radius:999px;background:#17171b;pointer-events:none;
}
.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:scale(.86)}to{opacity:1;transform:scale(1)}}
@keyframes craft-ring-contract {
  from {transform:scale(1);opacity:1}
  to {transform:scale(.48);opacity:0}
}
@keyframes craft-item-pop {
  0% {transform:scale(1)}
  20% {transform:scale(.93)}
  52% {transform:translateY(-12%) scale(1.15);filter:drop-shadow(0 0 13px #dfac6b82)}
  78% {transform:translateY(-2%) scale(1.02)}
  100% {transform:scale(1)}
}
@keyframes craft-reward-rise {
  0%, 23% {opacity:0;transform:translate(-50%,8px)}
  41%, 75% {opacity:1;transform:translate(-50%,0)}
  100% {opacity:0;transform:translate(-50%,-6px)}
}
@keyframes craft-ring-extinguish {
  from {--arthan-ring-result-fill:100%;opacity:1}
  to {--arthan-ring-result-fill:0%;opacity:0}
}
@keyframes craft-seal-flash {
  0% {opacity:.22}
  22% {opacity:.88;box-shadow:0 0 24px #c99f6459,inset 0 0 24px #c99f6448}
  100% {opacity:.22;box-shadow:0 0 0 #c99f6400,inset 0 0 0 #c99f6400}
}
@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) 84px;grid-template-areas:"intro art" "materials materials";gap:8px;min-height:0;align-items:start}
  .vl-craft .detail-head {gap:4px}
  .vl-craft .ritual-stage {width:78px;margin-top:5px}
  .vl-craft .seal-watermark {width:86px}
  .vl-craft .seal-watermark span {font-size:7px;letter-spacing:.16em;text-indent:.16em}
  .vl-craft .ritual-axis {inset:23% 6%}
  .vl-craft .detail-head h2 {font-size:18px}
  .vl-craft .ingredients {padding-top:4px}
  .vl-craft .craft-head {padding:7px 11px;gap:8px}
  .vl-craft .progress {min-width:33px;padding:1px 4px;font-size:10px}
  .vl-craft .craft-reward {padding:1px 5px;font-size:10px}
}
@media (prefers-reduced-motion:reduce) {.vl-craft *,.vl-craft *::before,.vl-craft *::after{animation:none!important;transition:none!important}}