.craft-textui {
  position:fixed;
  inset:0;
  z-index:5;
  display:grid;
  place-items:center;
  pointer-events:none;
  color:#ead7d2;
  font:600 16px/1.4 "Chakra Petch","Noto Sans Thai",sans-serif;
}

.craft-textui[hidden] {display:none}

.craft-textui__row {
  --craft-key-size:34px;
  --craft-row-start:6px;
  --craft-textui-reveal-delay:1s;
  --craft-textui-reveal-duration:.85s;
  position:relative;
  isolation:isolate;
  display:flex;
  align-items:center;
  gap:12px;
  min-height:47px;
  max-width:min(340px,calc(100vw - 32px));
  padding:5px 19px 5px var(--craft-row-start);
  border:1px solid transparent;
  border-radius:14px;
  background:transparent;
  color:inherit;
  font:inherit;
  text-align:start;
}

.craft-textui__row::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border:1px solid #b493645c;
  border-radius:inherit;
  background:linear-gradient(105deg,#242025f7,#101012fa 80%);
  box-shadow:0 8px 24px #0008;
  pointer-events:none;
}

.craft-textui__row::after {
  content:"";
  position:absolute;
  inset-inline-start:calc(50% - 18px);
  bottom:-1px;
  width:36px;
  height:1px;
  background:linear-gradient(90deg,transparent,#ac3e51,transparent);
}

.craft-textui.is-revealing .craft-textui__row::before,
.craft-textui.is-revealing .craft-textui__row::after {
  animation:craft-textui-panel-in var(--craft-textui-reveal-duration) ease-in-out var(--craft-textui-reveal-delay) both;
}

.craft-textui.is-revealing .craft-textui__label {
  animation:craft-textui-label-in var(--craft-textui-reveal-duration) ease-in-out var(--craft-textui-reveal-delay) both;
}

.craft-textui.is-revealing .craft-textui__row {
  animation:craft-textui-slide-left var(--craft-textui-reveal-duration) ease-in-out var(--craft-textui-reveal-delay) both;
}

.craft-textui__key {
  position:relative;
  display:grid;
  place-items:center;
  flex:0 0 var(--craft-key-size);
  height:var(--craft-key-size);
  border:1px solid #b493648c;
  border-bottom:2px solid #b49364;
  border-radius:9px;
  background:#171517;
  color:#f2d5a0;
  font:700 19px/1 "Chakra Petch","Noto Sans Thai",sans-serif;
}

@property --craft-sweep-angle {
  syntax:"<angle>";
  inherits:false;
  initial-value:0deg;
}

.craft-textui__key::after {
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  padding:2px;
  pointer-events:none;
  opacity:0;
  background:conic-gradient(from var(--craft-sweep-angle),
    transparent 0deg, #a53449 24deg, #c39352 61deg, #f5d28e 86deg, transparent 106deg);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
}

.craft-textui.is-arriving .craft-textui__key::after {
  animation:craft-textui-sweep .62s linear;
}

.craft-textui.is-opening .craft-textui__key {
  animation:craft-textui-press .15s ease-out both;
}

.craft-textui.is-opening .craft-textui__row::after {
  animation:craft-textui-collapse .15s ease-in both;
}

.craft-textui__label {overflow-wrap:anywhere}
.craft-demo button.craft-textui__row {pointer-events:auto;cursor:pointer}
.craft-demo button.craft-textui__row:hover::before {border-color:#b49364}
.craft-demo button.craft-textui__row:focus-visible .craft-textui__key {outline:2px solid #e6be83;outline-offset:3px}
.craft-demo button.craft-textui__row:active .craft-textui__key {transform:translateY(1px)}

@keyframes craft-textui-panel-in {
  from {opacity:0}
  to {opacity:1}
}

@keyframes craft-textui-label-in {
  from {opacity:0;transform:translateX(6px)}
  to {opacity:1;transform:translateX(0)}
}

@keyframes craft-textui-slide-left {
  from {transform:translateX(calc(50% - var(--craft-row-start) - 1px - var(--craft-key-size) / 2))}
  to {transform:translateX(0)}
}

@keyframes craft-textui-sweep {
  0% {--craft-sweep-angle:-92deg;opacity:0}
  16%, 76% {opacity:1}
  100% {--craft-sweep-angle:268deg;opacity:0}
}

@keyframes craft-textui-press {
  from {transform:scale(1)}
  55%, to {transform:translateY(2px) scale(.88);background:#27191d}
}

@keyframes craft-textui-collapse {
  from {transform:scaleX(1);opacity:1}
  to {transform:scaleX(0);opacity:0}
}

@media (prefers-reduced-motion:reduce) {
  .craft-textui.is-revealing .craft-textui__row,
  .craft-textui.is-revealing .craft-textui__row::before,
  .craft-textui.is-revealing .craft-textui__row::after,
  .craft-textui.is-revealing .craft-textui__label,
  .craft-textui.is-arriving .craft-textui__key::after,
  .craft-textui.is-opening .craft-textui__key,
  .craft-textui.is-opening .craft-textui__row::after {animation:none}
}