/* mind.lle.sh (24/10/2026): o nosso Mindly. Tudo bolinha: a do meio, as filhas no anel, o "+" entre elas, a mãe grande no canto. */
@font-face{font-family:"Montserrat-mind";src:url(/tf/fontes/Montserrat-SemiBold.woff2) format("woff2");font-weight:600;font-display:swap}
/* 24/10: fundo #E4C0A6, letra no branco mais claro #FFFBF3, linhas #FFF7E9 (cores que ela mandou) */
:root{--calma:cubic-bezier(.45,.05,.25,1);--fundo:#E4C0A6;--letra:#FFFBF3;--fio:#FFF7E9}
a,button,input,select,textarea,[tabindex]{outline:none;-webkit-tap-highlight-color:transparent}
:focus,:focus-visible{outline:none;box-shadow:none}
*{box-sizing:border-box;margin:0}
html,body{background:var(--fundo);color:var(--letra);height:100%;overflow:hidden;overscroll-behavior:none}
body{font-family:"Montserrat-mind",sans-serif;font-weight:600;-webkit-user-select:none;user-select:none;touch-action:manipulation}

#fios{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}
#fios circle,#fios line{fill:none;stroke:var(--fio);stroke-width:1.5;transition:opacity 1.2s ease}
/* o anel se desenha devagar, como um traço de laser */
#fios .desenha{animation:laser 2.4s var(--calma) forwards}
@keyframes laser{to{stroke-dashoffset:0}}
#palco{position:fixed;inset:0}

/* cada bolinha: posição, tamanho e letra mudam com mola */
.bola{position:absolute;left:0;top:0;width:0;height:0;border-radius:9999px;transform:translate(-50%,-50%);transform-origin:0 0;display:grid;place-items:center;cursor:pointer;
  transition:translate 1.1s var(--calma),width 1.3s var(--calma),height 1.3s var(--calma),
    opacity 1.1s ease,filter 1.1s ease,background-color .9s ease,font-size .9s ease;
  will-change:transform,width,height;touch-action:none;
  animation:respira 6s ease-in-out infinite}
/* 24/10: tudo respira, devagar (ambiente calmo e acolhedor) */
@keyframes respira{0%,100%{scale:1}50%{scale:1.035}}
.bola.arrasta{transition:width 1.3s var(--calma),height 1.3s var(--calma),opacity 1.1s ease;z-index:3;cursor:grabbing}
/* 24/10: ela lê melhor com MUITO espaço entre as letras */
.bola .t{display:block;max-width:50%;max-height:50%;overflow:hidden;text-align:center;line-height:1.3;letter-spacing:.16em;color:var(--letra);
  overflow-wrap:normal;word-break:normal;hyphens:none;text-wrap:balance;white-space:pre-wrap;cursor:inherit}
.bola .t[contenteditable]{-webkit-user-select:text;user-select:text;cursor:text;caret-color:var(--letra);min-width:1ch}
.bola .mais3{position:absolute;left:0;right:0;bottom:13%;text-align:center;font-size:12px;letter-spacing:.12em;line-height:1;color:var(--letra);pointer-events:none}
.bola.centro{cursor:text}
/* o meio: squircle alongado, cantos grandes e contínuos (superelipse onde o navegador sabe; raio grande nos outros) */
/* 24/10: o canto medido no "long squircle" dela (Mesa): curva redonda de 23% da altura, borda de cima e de baixo retas */
.bola.centro:not(.ponto){border-radius:calc(var(--h) * .23)}
.bola.centro:not(.ponto) .t{max-height:none;overflow:visible;line-height:1;margin-right:-.16em}   /* o espaço depois da última letra não pode empurrar a palavra para a esquerda */
/* 24/10 11h30: o meio é o PRÓPRIO arquivo dela ("long squircle", da Mesa, recortado justo, 1,81 : 1), sem reinterpretar:
   miolo transparente, moldura afundada. Nada de véu, desfoque, linha branca ou sombra por fora. */
/* 24/10 11h35: como ela ensinou: para mudar o tamanho, corta-se um pedaço do MEIO; os cantos e as beiradas do arquivo dela ficam intactos
   (o arquivo é fatiado em 9: os 4 cantos, as 4 beiradas e o miolo). 229 px = onde a curva do canto termina no arquivo (1658 × 916). */
.bola.centro:not(.ponto){background:none;box-shadow:none;border-radius:0;border-style:solid;border-color:transparent;
  border-image:url(/molde.png) 229 fill / var(--canto) stretch;box-sizing:border-box}
/* a mãe só aparece em parte no canto: o texto vai no meio do pedaço que se vê */
.bola.mae .t{max-width:34%;max-height:26%;position:absolute;left:69%;top:69%;transform:translate(-50%,-50%)}
.bola.sai,.bola.nasce{opacity:0;filter:blur(8px);pointer-events:none}

/* o "+" do anel, entre uma bolinha e outra: bolinha CHEIA de branco lelê, sinal em bege lelê (ela odeia coisa vazada) */
.encaixe{position:absolute;left:0;top:0;width:44px;height:44px;margin:-22px 0 0 -22px;display:grid;place-items:center;cursor:pointer;
  transition:transform 1.1s var(--calma),opacity 1.4s ease,filter 1.4s ease}
.encaixe i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--letra);
  color:var(--fundo);font:600 16px/1 "Montserrat-mind",sans-serif;font-style:normal;transition:transform .2s ease}
.encaixe:hover i{transform:scale(1.25)}
.encaixe.sai,.encaixe.nasce{opacity:0;filter:blur(6px);pointer-events:none}

/* a data: meio enevoada, e arrastável */
#nome{position:fixed;z-index:2;filter:blur(.7px);opacity:.75;cursor:grab;touch-action:none;padding:6px;margin:-6px;left:max(28px,env(safe-area-inset-left));top:max(26px,env(safe-area-inset-top));font-size:11px;letter-spacing:.18em;color:var(--letra);white-space:pre}

/* mapa vazio: só o pontinho piscando no meio, em creme lelê, bem devagar (ambiente calmo e acolhedor) */
.bola.ponto{background:var(--fio);cursor:pointer;animation:pisca 4s ease-in-out infinite}
.bola.ponto .t,.bola.ponto .mais3{display:none}
@keyframes pisca{0%,100%{opacity:1}50%{opacity:.55}}