/* Happy Tunes Avatar Studio. Uses the theme's colour tokens (light + dark). */
.ht-content:has(.hta-studio){max-width:1140px;}
.hta-studio{--hta-r:18px;color:var(--ht-dim,#c9c0e0);}
.hta-lead{margin:0 0 18px;font-size:16.5px;line-height:1.6;}
.ht-site .hta-studio button{font:inherit;text-transform:none;letter-spacing:normal;cursor:pointer;}

/* layout */
.hta-grid{display:grid;grid-template-columns:minmax(260px,400px) minmax(0,1fr);gap:clamp(16px,2.6vw,28px);align-items:start;}
.hta-stage{display:flex;flex-direction:column;gap:12px;}
.hta-view{position:relative;aspect-ratio:1/1;border-radius:24px;overflow:hidden;border:1px solid var(--ht-border,#2b2440);
  background:radial-gradient(60% 46% at 50% 92%,rgba(255,63,142,.28),transparent 70%),radial-gradient(90% 70% at 50% 30%,rgba(178,92,255,.22),transparent 70%),var(--ht-surface2,#1d1730);}
.hta-view::after{content:"";position:absolute;left:24%;right:24%;bottom:5.5%;height:5%;border-radius:50%;background:rgba(0,0,0,.28);filter:blur(6px);z-index:0;}
.hta-view canvas{position:relative;z-index:1;display:block;width:100%;height:100%;}
.hta-spinner{position:absolute;right:14px;top:14px;z-index:2;width:22px;height:22px;border-radius:50%;border:3px solid rgba(255,255,255,.25);border-top-color:var(--ht-pink,#ff3f8e);opacity:0;transition:opacity .2s;}
.hta-app.is-loading .hta-spinner{opacity:1;animation:htaSpin .8s linear infinite;}
@keyframes htaSpin{to{transform:rotate(360deg);}}
.hta-err{display:none;position:absolute;inset:auto 12px 12px;z-index:2;margin:0;padding:8px 12px;border-radius:12px;background:var(--ht-surface,#151022);font-size:13.5px;font-weight:700;}
.hta-app.is-error .hta-err{display:block;}
.hta-summary{margin:0;text-align:center;font-weight:700;font-size:14px;color:var(--ht-text,#fff);line-height:1.45;}

/* chips */
.hta-anims,.hta-body{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;}
.ht-site .hta-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;border:1px solid var(--ht-border2,#3a3156);background:var(--ht-surface2,#1d1730);
  color:var(--ht-dim,#c9c0e0);font-size:13.5px;font-weight:800;transition:transform .2s cubic-bezier(.3,1.6,.5,1),border-color .15s,background-color .15s,color .15s;}
.hta-chip code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;font-weight:700;opacity:.75;}
.ht-site .hta-chip:hover{border-color:var(--ht-pink,#ff3f8e);transform:translateY(-1px);}
.ht-site .hta-chip.is-on{background:linear-gradient(120deg,var(--ht-purple,#b25cff),var(--ht-pink,#ff3f8e));border-color:transparent;color:#fff;}
.hta-dice span{display:inline-block;transition:transform .4s cubic-bezier(.3,1.6,.5,1);}
.hta-dice:hover span{transform:rotate(-20deg) scale(1.15);}

/* panel + tabs */
.hta-panel{min-width:0;border-radius:var(--hta-r);border:1px solid var(--ht-border,#2b2440);background:var(--ht-surface,#151022);padding:12px;}
.hta-tabs{display:flex;gap:4px;padding:4px;margin-bottom:12px;border-radius:14px;background:var(--ht-surface2,#1d1730);overflow-x:auto;scrollbar-width:none;}
.hta-tabs::-webkit-scrollbar{display:none;}
.ht-site .hta-tab{flex:1 0 auto;padding:8px 12px;border:0;border-radius:10px;background:transparent;color:var(--ht-dim,#c9c0e0);font-weight:800;font-size:14px;white-space:nowrap;transition:background-color .15s,color .15s;}
.ht-site .hta-tab:hover{color:var(--ht-text,#fff);}
.ht-site .hta-tab[aria-selected="true"]{background:var(--ht-surface,#151022);color:var(--ht-pink,#ff3f8e);box-shadow:0 2px 10px rgba(0,0,0,.18);}
.hta-pane{max-height:min(62vh,560px);overflow-y:auto;padding:2px 2px 4px;scrollbar-width:thin;}
.hta-sub{margin:14px 0 8px;font-family:'Fredoka',sans-serif;font-size:15px;font-weight:700;color:var(--ht-text,#fff);}
.hta-sub:first-child{margin-top:2px;}
.hta-hint{margin:12px 0 0;font-size:13px;font-weight:700;color:var(--ht-mute,#8f86a8);}
.hta-hint b{color:var(--ht-dim,#c9c0e0);}

/* tiles */
.hta-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;}
.ht-site .hta-tile{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px 7px;border-radius:14px;border:2px solid transparent;background:var(--ht-surface2,#1d1730);
  color:var(--ht-dim,#c9c0e0);transition:transform .2s cubic-bezier(.3,1.6,.5,1),border-color .15s,background-color .15s;}
.ht-site .hta-tile:hover{transform:translateY(-2px);border-color:var(--ht-border2,#3a3156);}
.ht-site .hta-tile.is-on{border-color:var(--ht-pink,#ff3f8e);background:color-mix(in srgb,var(--ht-pink,#ff3f8e) 12%,var(--ht-surface2,#1d1730));}
.hta-tile small{display:block;max-width:100%;font-size:11.5px;font-weight:800;line-height:1.2;text-align:center;overflow-wrap:anywhere;}
.hta-thumb{display:block;width:62px;height:62px;flex:none;background-repeat:no-repeat;image-rendering:auto;}
.hta-none{display:flex;align-items:center;justify-content:center;border-radius:50%;width:46px;height:46px;margin:8px;border:2px dashed var(--ht-border2,#3a3156);font-size:18px;color:var(--ht-mute,#8f86a8);}

/* swatches */
.hta-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:8px;}
.ht-site .hta-swatch{display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 4px;border-radius:14px;border:2px solid transparent;background:var(--ht-surface2,#1d1730);color:var(--ht-dim,#c9c0e0);transition:border-color .15s,transform .2s cubic-bezier(.3,1.6,.5,1);}
.ht-site .hta-swatch:hover{transform:translateY(-2px);}
.ht-site .hta-swatch.is-on{border-color:var(--ht-pink,#ff3f8e);}
.hta-swatch span{width:34px;height:34px;border-radius:50%;box-shadow:inset 0 -4px 0 rgba(0,0,0,.18),0 0 0 2px rgba(255,255,255,.12);}
.hta-swatch small{font-size:11.5px;font-weight:800;}

/* chat line */
.hta-command{margin-top:clamp(18px,3vw,28px);padding:clamp(16px,2.6vw,24px);border-radius:22px;border:1px solid var(--ht-border,#2b2440);
  background:linear-gradient(120deg,rgba(255,63,142,.12),rgba(178,92,255,.1) 55%,transparent),var(--ht-surface,#151022);}
.ht-content .hta-h{margin:0 0 10px;font-family:'Fredoka',sans-serif;font-size:21px;color:var(--ht-text,#fff);}
.ht-site .hta-cmd{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:12px 12px 12px 16px;border-radius:16px;border:2px dashed var(--ht-border2,#3a3156);
  background:var(--ht-surface2,#1d1730);color:var(--ht-text,#fff);text-align:left;transition:border-color .15s,transform .15s;}
.ht-site .hta-cmd:hover{border-color:var(--ht-pink,#ff3f8e);}
.hta-cmd code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:clamp(14px,1.9vw,17px);font-weight:700;color:var(--ht-pinks,#ff7ab3);overflow-wrap:anywhere;}
.hta-cmd span{flex:none;padding:7px 14px;border-radius:999px;background:linear-gradient(120deg,var(--ht-purple,#b25cff),var(--ht-pink,#ff3f8e));color:#fff;font-weight:800;font-size:13.5px;}
.hta-cmd.is-copied{border-style:solid;border-color:var(--ht-pink,#ff3f8e);}
.ht-content .hta-steps{margin:14px 0 0;padding-left:22px;display:grid;gap:6px;}
.ht-content .hta-steps li{margin:0;}
.hta-steps b{color:var(--ht-text,#fff);}
.hta-links{display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:16px;}
.ht-content .hta-links .ht-btn{text-decoration:none;}
.ht-content .hta-links .ht-btn-primary,.ht-content .hta-links .ht-btn-primary:hover{color:#fff;}
.ht-content .hta-links .ht-btn-ghost{color:var(--ht-text,#fff);}
.hta-share.is-copied{border-color:var(--ht-pink,#ff3f8e);}

/* floating mini preview while the big one is scrolled away (the theme wrapper's
   overflow-x:hidden rules out position:sticky) */
.hta-mini{position:fixed;left:max(16px,env(safe-area-inset-left));bottom:max(16px,env(safe-area-inset-bottom));z-index:40;width:112px;height:112px;padding:0;
  border-radius:24px;border:1px solid var(--ht-border2,#3a3156);cursor:pointer;
  background:radial-gradient(60% 46% at 50% 92%,rgba(255,63,142,.3),transparent 70%),radial-gradient(90% 70% at 50% 30%,rgba(178,92,255,.25),transparent 70%),var(--ht-surface2,#1d1730);
  box-shadow:0 18px 40px -14px rgba(0,0,0,.6);opacity:0;visibility:hidden;transform:translateY(12px) scale(.9);transition:opacity .25s,transform .3s cubic-bezier(.3,1.5,.5,1),visibility 0s .3s;}
.hta-mini.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .25s,transform .3s cubic-bezier(.3,1.5,.5,1);}
.hta-mini canvas{display:block;width:100%;height:100%;}
.hta-mini:focus-visible{outline:3px solid var(--ht-pink,#ff3f8e);outline-offset:3px;}

/* loading placeholder before the script runs */
.hta-skeleton{display:grid;grid-template-columns:minmax(260px,400px) 1fr;gap:24px;}
.hta-skeleton span{display:block;aspect-ratio:1/1;border-radius:24px;background:var(--ht-surface2,#1d1730);}
.hta-skeleton span + span{aspect-ratio:auto;min-height:320px;}
.hta-note{margin:0;font-weight:700;}

@media (max-width:820px){
  .hta-grid,.hta-skeleton{grid-template-columns:1fr;}
  .hta-skeleton span + span{display:none;}
  .hta-skeleton span{max-width:320px;width:100%;margin:0 auto;}
  .hta-stage{position:static;}
  .hta-view{width:min(78vw,320px);margin:0 auto;}
  .hta-pane{max-height:none;}
}
@media (max-width:480px){
  .hta-mini{width:92px;height:92px;border-radius:20px;}
  .ht-site .hta-tab{padding:8px 9px;font-size:13px;}
  .hta-tiles{grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:6px;}
  .hta-thumb{width:54px;height:54px;}
  .hta-cmd{flex-direction:column;align-items:stretch;}
  .hta-cmd span{text-align:center;}
}
@media (prefers-reduced-motion:reduce){
  .ht-site .hta-chip,.ht-site .hta-tile,.ht-site .hta-swatch{transition:none;}
  .hta-app.is-loading .hta-spinner{animation:none;}
}